/* The Horse Trek story uses the shared case-study shell and original artwork. */
.flowframe-horse{--hc-blue:#344269;--hc-muted:#687080;--hc-cream:#f7f3ec;--hc-brown:#4a3528}
.flowframe-case.flowframe-horse article{padding-top:120px}
.flowframe-case.flowframe-horse article>.head{position:relative;padding-bottom:0}
.flowframe-case.flowframe-horse article>.head h1{font-size:clamp(36px,4.2vw,48px);max-width:none;line-height:1.08}
.flowframe-case.flowframe-horse article>.head .lede{font-size:16px;line-height:1.6;margin-top:20px}
.flowframe-case.flowframe-horse article>.head .facts{display:none}
.flowframe-horse .hc-hero{border-radius:24px;overflow:hidden;background:var(--hc-cream)}
.hc-motion{position:relative;aspect-ratio:1.6;container-type:inline-size;overflow:hidden}
.hc-motion .ffgh-hero{height:100%;min-height:0;--horse-width:36cqw;--horse-bottom:5cqw;--cafe-pastry-from-bottom:31.1%;--cafe-mouth-from-bottom:19cqw}
.hc-motion .ffgh-art:after{background:linear-gradient(#f7f3ec30,transparent 35%)}
.hc-motion .ffgh-lakeHorse{left:30%}
.hc-motion .ffgh-horse{max-width:none}
.hc-motion[data-playing=false] .ffgh-hero *,.hc-motion[data-playing=false] .ffgh-hero *:before{animation-play-state:paused!important}
.hc-motion-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
.hc-motion[data-reduced=true] .hc-motion-poster{display:block}
.hc-motion[data-started=false] .hc-motion-poster{display:block}
.hc-motion[data-reduced=true] .ffgh-hero{visibility:hidden}
.hc-scene-title{position:absolute;z-index:3;top:9%;left:20%;right:20%;text-align:center;pointer-events:none;color:#4a3528}
.hc-scene-title>span{font-size:12px;line-height:1.4;color:#8a6548}
.hc-scene-title>strong{display:block;font:400 clamp(30px,5.2cqw,54px)/.98 Georgia,'Times New Roman',serif;letter-spacing:-.055em;margin-top:17px;text-wrap:balance}
.hc-hero-caption{position:absolute;z-index:5;inset:auto 24px 20px;display:flex;align-items:center;justify-content:space-between;gap:14px;color:#fff;font-size:13px;line-height:1.4;text-shadow:0 1px 8px #30241170}
.hc-hero-caption>span:first-child{background:#3b302c99;backdrop-filter:blur(14px);border-radius:30px;padding:10px 15px}
.hc-hero-caption button{display:inline-flex;align-items:center;gap:9px;min-height:40px;padding:9px 15px;border:1px solid #ffffff60;border-radius:30px;color:#fff;background:#3b302c99;backdrop-filter:blur(14px);font:inherit;cursor:pointer}
.hc-hero-caption button>span{font-size:16px;line-height:1}
.flowframe-horse :is(button,a):focus-visible{outline:2px solid #168bff;outline-offset:4px}
.hc-workflow{padding:26px 30px;background:#f5f6f8;border:1px solid #e9ecf0;border-radius:18px}
.hc-workflow ol{display:flex;list-style:none;margin:0;padding:0;gap:0}
.hc-workflow li{flex:1;position:relative;display:flex;min-width:0}
.hc-workflow li:not(:last-child):after{content:"";height:1px;background:#d6dce7;position:absolute;left:48px;right:8px;top:17px}
.hc-workflow button{border:0;background:none;display:flex;flex-direction:column;align-items:flex-start;gap:11px;color:#737b8a;padding:0 12px 0 0;font:inherit;font-size:12px;line-height:1.4;text-align:left;cursor:pointer;position:relative;z-index:1}
.hc-step-number{display:grid;place-items:center;border:1px solid #d9dfeb;background:#f5f6f8;border-radius:50%;width:35px;height:35px;font-size:12px}
.hc-workflow button[aria-pressed=true]{color:#263858}
.hc-workflow button[aria-pressed=true] .hc-step-number{background:var(--hc-blue);border-color:var(--hc-blue);color:white}
.hc-workflow-detail{display:grid;grid-template-columns:160px 1fr;gap:24px;margin-top:25px;padding-top:22px;border-top:1px solid #e2e6ee;min-height:0;align-items:start}
.flowframe-horse .hc-workflow-detail h3{font-size:17px;margin:0!important;line-height:1.5}
.flowframe-horse .hc-workflow-detail p{margin:0!important;color:#687080;font-size:14px;line-height:1.65;max-width:none}
.hc-tabs{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:18px}
.hc-tabs button{border:1px solid transparent;background:transparent;color:#747b89;border-radius:30px;min-height:39px;padding:9px 15px;font:inherit;font-size:12px;line-height:1.35;cursor:pointer}
.hc-tabs button[aria-pressed=true]{background:var(--hc-blue);border-color:var(--hc-blue);color:#fff}
.hc-tabs button:hover:not([aria-pressed=true]){background:#f1f3f6;color:#344269}
.hc-interface{border:1px solid #dce1e9;border-radius:15px;overflow:hidden;background:#f7f8fc}
.hc-interface-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 17px;background:#fff;border-bottom:1px solid #e3e7ee;font-size:11px;line-height:1.4;color:#4b566d}
.hc-interface-bar>span:last-child{color:#7b8496;font-size:10px;white-space:nowrap}
.hc-interface-screen{position:relative;aspect-ratio:1240/760;overflow:hidden;background:#f7f8fc}
.hc-interface-screen>iframe{position:absolute;left:0;top:0;width:1240px;height:760px;border:0;transform-origin:top left;pointer-events:none;color-scheme:light}
.hc-expand{position:absolute;bottom:19px;right:19px;display:inline-flex;align-items:center;gap:23px;min-height:44px;border:1px solid #ffffff35;border-radius:12px;padding:12px 17px;background:var(--hc-blue);color:white;font:inherit;font-size:12px;cursor:pointer;box-shadow:0 8px 25px #17244925}
.hc-expand svg{width:18px;height:18px;flex:none}
.flowframe-horse .hc-caption{padding:20px 4px 0;display:grid;gap:8px}
.flowframe-horse .hc-caption h3{margin:0!important;font-size:18px;line-height:1.4;font-weight:500;color:var(--palette-b100,#151719)}
.flowframe-horse .hc-caption p{margin:0!important;font-size:13px;line-height:1.65;color:#75808b}
.hc-public-capture{padding:0;margin:0!important;border:1px solid #e5dfd5;border-radius:16px;overflow:hidden;background:#f7f3ec;aspect-ratio:1.6}
.hc-public-capture img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.flowframe-horse .hc-host-note{max-width:none;font-size:12px!important;line-height:1.6!important;color:#788190;margin:16px 3px 0!important}
.hc-craft{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;border:1px solid #e8e4db;border-radius:20px;background:#f7f3ec;overflow:hidden;min-height:300px}
.hc-pose-stage{position:relative;padding:34px 10px;aspect-ratio:1.22}
.hc-pose-stage:after{position:absolute;content:"";background:#79684415;border-radius:50%;height:6%;left:20%;right:16%;bottom:18%;filter:blur(9px)}
.hc-pose-stage img{position:absolute;inset:8% 5%;height:84%;width:90%;object-fit:contain}
.hc-craft-copy{padding:32px 28px 32px 12px}
.hc-craft .hc-tabs{gap:7px;margin-bottom:22px}
.hc-craft .hc-tabs button{border-color:#d9d2c5;color:#8d7c6c;padding:7px 13px;font-size:11px;min-height:35px}
.hc-craft .hc-tabs button[aria-pressed=true]{border-color:#4a3528;background:#4a3528;color:#fff}
.hc-craft-copy>p{font-size:14px;line-height:1.65;color:#8a7767;min-height:0;margin:0!important}
.hc-craft-copy>a{display:inline-flex;align-items:center;gap:16px;color:#4a3528;text-decoration:none;font-size:12px;margin-top:24px}
.hc-craft-copy>a svg{height:15px;width:15px}
.hc-dialog{width:calc(100vw - 44px);height:calc(100dvh - 44px);max-width:1440px;max-height:none;box-sizing:border-box;padding:0;margin:auto;border:1px solid #ffffff30;border-radius:18px;background:#2e3b61;color:#fff;overflow:hidden;font-family:var(--font-site,Arial,sans-serif)}
.hc-dialog::backdrop{background:#101a2bdd;backdrop-filter:blur(8px)}
.hc-dialog-inner{display:flex;flex-direction:column;height:100%}
.hc-dialog-inner>header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:13px 19px;flex:none;font-size:14px;line-height:1.3}
.hc-dialog header>div{display:grid;gap:4px}
.hc-dialog small{font-size:10px;color:#c0cae3}
.hc-dialog header button{display:inline-flex;align-items:center;gap:15px;border:1px solid #ffffff40;min-height:40px;padding:9px 13px;border-radius:9px;background:transparent;color:white;font:inherit;font-size:12px;cursor:pointer}
.hc-dialog header button>span{font-size:23px;line-height:16px}
.hc-dialog iframe{display:block;width:100%;flex:1;min-height:0;border:0;background:#fff;color-scheme:light}
.flowframe-case.flowframe-horse article .closing{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
.flowframe-case.flowframe-horse article .closing .card .words{padding-top:15px;border-top:1px solid #dfe3e9}
@media(max-width:760px){
  .flowframe-case.flowframe-horse article{padding-top:115px}
  .flowframe-case.flowframe-horse article>.head h1{font-size:39px}
  .flowframe-case.flowframe-horse article>.head .lede{font-size:16px;line-height:1.65;margin-top:18px}
  .flowframe-case.flowframe-horse article>.head .facts{grid-auto-flow:column;grid-template-columns:1fr 1fr;gap:20px;margin-top:19px;font-size:11px}
  .flowframe-case.flowframe-horse article>.head .results{gap:5px}
  .flowframe-horse .hc-hero{border-radius:17px}
  .hc-motion{aspect-ratio:1.1}
  .hc-motion .ffgh-hero{--horse-width:54cqw;--horse-bottom:15cqw;--cafe-mouth-from-bottom:28cqw}
  .hc-motion .ffgh-lakeHorse{left:24%}
  .hc-scene-title{top:10%;left:12%;right:12%}
  .hc-scene-title>span{font-size:9px}
  .hc-scene-title>strong{font-size:32px;margin-top:11px}
  .hc-motion .ffgh-cafeHigh,.hc-motion .ffgh-cafeMid,.hc-motion .ffgh-cafeHorse,.hc-motion .ffgh-cafeBite{right:13%}
  .hc-hero-caption{inset:auto 12px 12px;gap:8px;font-size:10px}
  .hc-hero-caption>span:first-child{padding:9px 11px;max-width:60%}
  .hc-hero-caption button{padding:8px 12px;min-height:35px;font-size:11px}
  .hc-workflow{padding:20px 16px;border-radius:16px}
  .hc-workflow ol{overflow-x:auto;gap:13px;padding-bottom:8px}
  .hc-workflow li{flex:0 0 105px}
  .hc-workflow button{font-size:11px;gap:9px}
  .hc-workflow li:not(:last-child):after{right:0;left:42px}
  .hc-workflow-detail{grid-template-columns:1fr;gap:9px;min-height:0;margin-top:17px;padding-top:18px}
  .hc-tabs{flex-wrap:wrap;overflow:visible;max-width:100%;padding:0 0 5px;gap:3px;margin-bottom:12px}
  .hc-tabs button{flex:0 1 auto;max-width:100%;white-space:normal;overflow-wrap:anywhere;font-size:11px;padding:8px 12px;min-height:36px}
  .hc-interface{border-radius:12px}
  .hc-interface-bar{padding:10px 12px;font-size:10px}
  .hc-interface-screen{aspect-ratio:1.2}
  .hc-expand{bottom:11px;right:11px;min-height:40px;padding:10px 12px;gap:15px;font-size:11px}
  .hc-interface-screen:after{content:"";position:absolute;pointer-events:none;inset:auto 0 0;height:50%;background:linear-gradient(transparent,#eef1f8b3)}
  .hc-interface-screen .hc-expand{z-index:1}
  .flowframe-horse .hc-caption{grid-template-columns:1fr;gap:8px;padding:16px 2px 0}
  .flowframe-horse .hc-caption h3{font-size:17px}
  .flowframe-horse .hc-caption p{font-size:12px}
  .hc-public-capture{aspect-ratio:1.15;border-radius:12px}
  .hc-craft{grid-template-columns:1fr;min-height:0}
  .hc-pose-stage{aspect-ratio:1.5;padding:0}
  .hc-craft-copy{padding:8px 19px 23px}
  .hc-craft .hc-tabs{flex-wrap:wrap;overflow:visible;margin-bottom:15px}
  .hc-craft-copy>p{min-height:0;font-size:13px}
  .hc-craft-copy>a{margin-top:18px;font-size:11px}
  .hc-dialog{width:calc(100vw - 12px);height:calc(100dvh - 12px);border-radius:12px}
  .hc-dialog-inner>header{padding:11px;gap:10px;font-size:12px}
  .hc-dialog small{font-size:9px}
  .hc-dialog header button{gap:10px;padding:8px 10px;min-height:37px;font-size:11px}
  .flowframe-case.flowframe-horse article .closing{grid-template-columns:1fr;gap:20px}
}
@media(prefers-reduced-motion:reduce){.hc-motion-poster{display:block}.hc-motion .ffgh-hero{visibility:hidden}}

.flowframe-case.flowframe-horse article>.head .ff-project-website{position:static;margin:18px 0 0;padding:7px 11px;min-height:31px;font-size:11px;background:#f2f4f7;color:#344269;border:0;box-shadow:none}
.flowframe-case.flowframe-horse article>.cover{margin-top:30px;margin-bottom:30px}