/* Layout: 1440 frame from the Figma file. Dark only, matched to the frame. Full-bleed teal panels fade into the stage; content sits on fixed inner widths. */
:root{
  color-scheme:dark;
  --bg:#111413; --hero:#191B18; --bar:#181512;
  --paper:#EADAC0; --paper-hero:#D3C6B2; --paper-ink:#181512; --paper-soft:#3F382F; --grain:url("./assets/grain.webp");--stain:url("./assets/stain.png");
  --tile-a:#1E2422; --tile-b:#171C1A;
  --cream:#EDDDC4; --soft:#DCCFBA; --muted:#A3968A;
  --teal:#4FB39B; --teal-deep:#174C41; --band:#14322B; --band-end:#142E29;
  --p1:#153C33; --p2:#132823; --p3:#111D1A; --p4:#121615; --s1:#153932; --s2:#132A26; --s3:#121F1C; --s4:#111816; --r1:#132723; --r2:#12201D; --r3:#111817;
  --lime:#BCFB0E; --ink:#111111; --orange:#E8713F; --frame:#7D7D7D; --pill:#7D705F;
  --f-display:'Big Shoulders Display','Arial Narrow',Impact,sans-serif;
  --f-label:'Big Shoulders Text','Arial Narrow',sans-serif;
  --f-body:'Poppins','Helvetica Neue',Arial,sans-serif;
  --r:16px;
  --gut-l:max(16px, env(safe-area-inset-left, 0px));
  --gut-r:max(16px, env(safe-area-inset-right, 0px));
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--soft);font-family:var(--f-body);font-size:16px;line-height:1.25;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg)}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,p,figure,dl,dd{margin:0}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:4px}
.em{color:var(--teal)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:8px;z-index:70;background:var(--cream);color:var(--ink);padding:10px 16px;border-radius:999px;font-weight:600;text-decoration:none}
.skip:focus{left:16px}

/* frame width + gutters */
.w{max-width:1440px;margin-inline:auto;padding-left:var(--gut-l);padding-right:var(--gut-r)}
.in{margin-inline:auto;width:100%}

/* type */
.label{font-family:var(--f-label);font-weight:700;font-size:18px;letter-spacing:.1em;text-transform:uppercase;color:var(--cream);line-height:1.2}
.label.t{color:var(--teal)}
.h2{font-family:var(--f-body);font-weight:700;font-size:clamp(32px,3.4vw,48px);line-height:1.085;letter-spacing:-.01em;color:var(--cream);text-wrap:balance}
.sub{font-size:18px;line-height:1.45;color:var(--soft)}
.body{font-size:18px;line-height:22px;color:var(--soft)}
.ov .body{font-size:16px;line-height:1.375}
.ov .label{font-size:16px}
.ttl{font-size:18px;font-weight:600;color:var(--cream);line-height:1.3}
.c{text-align:center}

/* site header */
.site{background:var(--bar)}
.site .w{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:64px;flex-wrap:wrap;padding-block:10px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-height:44px}
.logo{width:32px;height:32px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23E8713F'/%3E%3Cg fill='%23181512'%3E%3Ccircle cx='6' cy='6' r='3.4'/%3E%3Ccircle cx='16' cy='6' r='3.4'/%3E%3Ccircle cx='26' cy='6' r='3.4'/%3E%3Ccircle cx='6' cy='16' r='1.5'/%3E%3Ccircle cx='16' cy='16' r='3.4'/%3E%3Ccircle cx='26' cy='16' r='1.5'/%3E%3Ccircle cx='6' cy='26' r='3.4'/%3E%3Ccircle cx='16' cy='26' r='3.4'/%3E%3Ccircle cx='26' cy='26' r='1.5'/%3E%3C/g%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
.brand b{font-family:var(--f-display);font-weight:700;font-size:18px;letter-spacing:.08em;color:var(--cream);text-transform:uppercase}
.toplinks{display:flex;gap:28px;flex-wrap:wrap;font-size:18px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.toplinks [aria-current]{color:var(--cream)}

/* hero */
.hero{position:relative;background:linear-gradient(rgba(211,198,178,.3),rgba(211,198,178,.3)),var(--grain) 0 0/1024px 1024px,var(--stain) 0 0/1600px 1600px,var(--paper-hero);overflow:hidden;isolation:isolate;display:flex;min-height:calc(100vh - 64px);min-height:calc(100svh - 64px)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--noise),var(--lime);clip-path:polygon(0 92.3%,100% 48.5%,100% 100%,0 100%)}
.hero .w{flex:1;width:100%;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto 1fr;padding-block:58px 0}
.hero h1{grid-column:1;grid-row:1 / span 2;font-family:var(--f-display);font-weight:800;font-size:clamp(48px,4.45vw,64px);line-height:1.06;text-transform:uppercase;color:var(--paper-ink);letter-spacing:.005em;padding-left:clamp(0px,1.2vw,16px)}
.hero .lede{grid-column:2;grid-row:1;font-size:18px;line-height:22px;font-weight:500;color:var(--paper-soft);text-align:right;max-width:470px;padding-top:7px;padding-right:clamp(0px,1.2vw,16px)}
.stage{grid-column:1/-1;grid-row:3;justify-self:center;align-self:end;margin-top:45px;width:min(1093px,100%,calc((100svh - 308px) / .547));aspect-ratio:1093/598;border-radius:var(--r) var(--r) 0 0;background:#000;overflow:hidden}
.stage img,.stage canvas{width:100%;height:100%;object-fit:cover;object-position:top}
.visit{grid-column:2;grid-row:2;justify-self:end;align-self:start;margin-right:clamp(0px,1.2vw,16px);position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:48px;min-width:220px;padding:0 28px;color:var(--ink);font-weight:600;font-size:16px;text-decoration:none;margin-top:30px;
  --bc:var(--ink);--bt:1.5px;background-color:transparent;
  background-image:linear-gradient(var(--bc),var(--bc)),linear-gradient(var(--bc),var(--bc)),linear-gradient(var(--bc),var(--bc)),linear-gradient(var(--bc),var(--bc)),linear-gradient(var(--bc),var(--bc)),linear-gradient(var(--bc),var(--bc)),linear-gradient(var(--bc),var(--bc)),linear-gradient(var(--bc),var(--bc));
  background-position:left top,left top,right top,right top,left bottom,left bottom,right bottom,right bottom;
  background-size:12px var(--bt),var(--bt) 12px,12px var(--bt),var(--bt) 12px,12px var(--bt),var(--bt) 12px,12px var(--bt),var(--bt) 12px;
  background-repeat:no-repeat;transition:color .2s ease,background-color .2s ease}
.visit:hover,.visit:focus-visible{--bc:var(--orange);--bt:4px;background-color:#0A0A09;color:var(--orange)}
.visit:focus-visible{outline-color:var(--ink)}

/* section nav */
.snav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(17,20,19,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:opacity .35s ease,transform .35s ease}
.snav.is-hidden{opacity:0;transform:translateY(-100%);pointer-events:none}
.snav .w{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:80px}
.back{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--muted);min-height:44px;padding-left:clamp(0px,1.7vw,24px)}
.links{display:flex;gap:4px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-right:clamp(0px,9vw,134px)}
.links::-webkit-scrollbar{display:none}
.links a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 10px;font-size:14px;font-weight:500;color:var(--soft);text-decoration:none;white-space:nowrap}
.links a:hover{color:var(--cream)}
.links a[aria-current]{color:var(--cream)}
.links a[aria-current]::after{content:"";position:absolute;left:10px;right:10px;bottom:6px;height:2px;border-radius:2px;background:var(--orange)}

/* tiles */
.tile{background:linear-gradient(180deg,var(--tile-a),var(--tile-b));border-radius:var(--r);padding:32px;display:flex;flex-direction:column;gap:12px}
.js-rv .rv{opacity:calc(.12 + .88 * var(--rv,0));transform:translateY(calc((1 - var(--rv,0)) * 28px))}
.tile .body{max-width:560px}
.ov{max-width:1265px;padding-top:104px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px;align-items:start}
.col{display:flex;flex-direction:column;gap:16px}
.tile .grp{display:flex;flex-direction:column;gap:12px}
.tile .grp+.grp{margin-top:21px}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:33px 32px}
.facts>div{display:flex;flex-direction:column;gap:12px}
.imp{grid-column:1/-1;margin-top:14px;padding:32px 88px 64px}
.imp .label{margin-bottom:2px}
.nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;text-align:center}
.num{font-family:var(--f-display);font-weight:800;font-size:clamp(64px,7.2vw,104px);line-height:1.1;color:var(--teal);font-variant-numeric:tabular-nums;white-space:nowrap}
.nums p{font-size:14px;color:var(--cream);margin-top:6px}

/* full-bleed teal panels that fade into the stage */
.panel{border-radius:var(--r) var(--r) 0 0;background:linear-gradient(180deg,var(--teal-deep) 0,var(--p1) 90px,var(--p2) 170px,var(--p3) 250px,var(--p4) 330px,var(--bg) 420px)}
.meet{margin-top:89px;padding-top:85px}
/* before / after: heading, subhead, frame and toggle stick together while the wipe runs */
.ba{position:relative}
.ba.is-scrub{height:270vh}
.ba-stick{display:flex;flex-direction:column;align-items:center}
.ba.is-scrub .ba-stick{position:sticky;top:0;height:100vh;height:100svh;justify-content:center}
.ba-sub{margin-top:22px}
.ba-frame{margin-top:82px}
.ba-sub{overflow:hidden}
.ba.is-scrub .ba-frame{margin-top:28px;width:min(1204px,100%,calc((100svh - 240px) * 1.7785))}
.seg{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:2;background:rgba(17,20,19,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ba-frame{position:relative;width:min(1204px,100%);flex:none;aspect-ratio:1204/677;border:2px solid var(--frame);border-radius:var(--r);overflow:hidden;background:#111015;--p:1}
.ba-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba-after{clip-path:inset(0 calc((1 - var(--p)) * 100%) 0 0)}
.ba-line{position:absolute;top:0;bottom:0;left:calc(var(--p) * 100%);width:2px;margin-left:-1px;background:var(--cream);opacity:calc(min(var(--p), 1 - var(--p)) * 40);pointer-events:none}
.seg{display:inline-flex;border:1px solid var(--pill);border-radius:999px;overflow:hidden}
.seg button{all:unset;cursor:pointer;font-family:var(--f-label);font-weight:600;font-size:15px;letter-spacing:.04em;color:var(--cream);min-height:34px;min-width:72px;padding:0 4px;display:inline-flex;align-items:center;justify-content:center;text-align:center;box-sizing:border-box}
.seg button[aria-pressed="true"]{background:var(--orange);color:var(--ink)}
.seg button:focus-visible{outline:2px solid var(--cream);outline-offset:-4px;border-radius:999px}
.meet .ba-cap{margin-top:64px;max-width:560px;margin-inline:auto}

/* problem */
.prob{max-width:1264px;padding-top:120px}
.prob .sub{margin-top:22px;max-width:450px}
/* findings: media on the left changes as each finding appears; the block stays centered in the viewport */
.story{margin-top:79px}
.story-grid{--bl:clamp(16px,calc((100vw - 1264px) / 2),88px);display:grid;grid-template-columns:calc(820px + var(--bl)) minmax(0,1fr);column-gap:46px;align-items:center;margin-left:calc(-1 * var(--bl))}
.ftexts{max-width:400px}
.fmedias{position:relative;display:grid}
.fmedia{grid-area:1/1;transition:opacity .45s ease}
.ftexts{display:flex;flex-direction:column;gap:28px;max-width:420px}
.ftext{display:flex;flex-direction:column;gap:8px;transition:opacity .45s ease}
.story.is-story .story-stick{position:sticky;top:max(96px,calc(50vh - var(--sh,448px) / 2))}
.is-story .fmedia:not(.is-on){opacity:0;pointer-events:none}
.is-story .ftext:not(.is-on):not(.is-past){display:none}
.is-story .ftext.is-past{opacity:.45}
.is-story .ftext.is-new{animation:ftin .5s ease both}
@keyframes ftin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.shot{border:1px solid var(--frame);border-radius:var(--r);overflow:hidden;background:#000;aspect-ratio:16/9;position:relative}
.shot img,.shot canvas,.shot video{width:100%;height:100%;object-fit:cover;display:block}
.scroller{container-type:size}
.scroller img{height:auto;object-fit:initial;animation:longlist 9s ease-in-out 1s infinite alternate}
@keyframes longlist{0%,8%{transform:translateY(0)}92%,100%{transform:translateY(calc(-100% + 100cqh))}}
@media (prefers-reduced-motion:reduce){.scroller{overflow-y:auto}.scroller img{animation:none}}
.shot.ph{display:grid;place-items:center;background:repeating-linear-gradient(135deg,#15191A 0 14px,#121516 14px 28px);border-style:dashed;padding:32px;text-align:center}
.shot.ph>div{display:flex;flex-direction:column;gap:10px;max-width:360px}
.goals{padding-top:76px}
.goals .sub{margin-top:22px}
.gc{max-width:932px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 90px;margin-top:85px}
.gc ul{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-direction:column;gap:32px}
.gc li{max-width:420px}

/* design system */
.ds{max-width:1280px;padding-top:130px}
.ds .sub{margin-top:22px;max-width:480px}
.dsg{display:flex;flex-direction:column;gap:52px;margin-top:102px;max-width:1221px}
.dsg figure{display:grid;grid-template-columns:757px minmax(0,1fr);column-gap:27px;align-items:start}
.dsg figure.flip{grid-template-columns:minmax(0,1fr) 757px;column-gap:22px}
.dsg figure.flip figcaption{order:-1;text-align:right;align-items:flex-end;justify-self:end}
.dsg img{border-radius:var(--r);width:100%;aspect-ratio:757/504;object-fit:cover}
.dsg figcaption{display:flex;flex-direction:column;gap:8px;max-width:430px}

/* solutions */
.sol{margin-top:264px;background:linear-gradient(180deg,var(--teal-deep) 0,var(--s1) 100px,var(--s2) 200px,var(--s3) 300px,var(--s4) 400px,var(--bg) 500px)}
.sol{overflow:hidden}
.strip{width:min(740px,100%);margin-inline:auto;display:block}
.sol.is-sol .strip{transform:translateY(calc((1 - var(--s,0)) * -100%))}
.is-sol .sol-head{opacity:var(--h,0);transform:translateY(calc((1 - var(--h,0)) * 24px))}
.sol .h2{margin-top:85px}
.sol .sub{margin-top:22px}
.dec{max-width:1186px;display:grid;grid-template-columns:minmax(0,652px) minmax(0,440px);column-gap:46px;row-gap:16px;padding-top:96px}
.dec+.media,.dec+.rail-wrap{margin-top:70px}
.dec-h{display:flex;flex-direction:column;gap:14px}
.dec-h h3{font-size:20px;font-weight:500;line-height:1.2;letter-spacing:.02em;color:var(--cream);max-width:340px}
.dec-x{display:flex;flex-direction:column;gap:12px;grid-row:span 2}
.dec-x .label+p{margin-top:2px}
.dec-x .body+.label{margin-top:28px}
.duo{max-width:1245px;display:grid;grid-template-columns:701fr 516fr;gap:28px;align-items:start}
.duo figure{display:flex;flex-direction:column;gap:20px}
.duo figcaption{max-width:470px}
.dec3{max-width:936px}
.zoom img,.zoom canvas{position:absolute;left:50%;top:50%;width:calc(var(--z) * 100%);height:auto;max-width:none;object-fit:initial;transform:translate(calc(var(--cx) * -100%),calc(var(--cy) * -100%))}
.dec3 .shot{border-width:1px}

/* rail */
.rail-wrap{position:relative}
.rail-wrap{margin-top:72px}
.rail{display:flex;gap:24px;overflow-x:auto;scrollbar-width:none;cursor:grab;padding-left:max(16px,calc((100% - 1186px)/2));padding-right:16px;scroll-padding-left:max(16px,calc((100% - 1186px)/2));
  user-select:none;-webkit-user-select:none}
.rail::-webkit-scrollbar{display:none}
/* Design choice 2: the row starts under the right-hand text column and runs off the right edge */
@media (min-width:1100px){.rail-offset{--rs:max(16px,min(calc((100% - 1186px) / 2 + 698px),calc(100% - 834px - var(--gut-r))));padding-left:var(--rs);scroll-padding-left:var(--rs)}}
.rail.is-drag{cursor:grabbing}
.rail figure{flex:0 0 min(540px,84vw);display:flex;flex-direction:column;gap:24px}
.rail figcaption{max-width:520px}
.rail .shot{aspect-ratio:1;background:#050505}
.rail img{-webkit-user-drag:none}
.rail-hint{margin-top:20px;text-align:center;font-size:14px;color:var(--muted)}

/* impact */
.impact{margin-top:170px;padding-top:82px}
.impact .sub{margin-top:22px;max-width:540px;margin-inline:auto}
.stats{max-width:1140px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 40px;margin-top:118px;text-align:center}
.stat{display:flex;flex-direction:column;align-items:center;gap:6px}
.stat .num{color:var(--cream)}
.stat .ttl{margin-top:20px}
.stat .body{max-width:510px;line-height:18px}
.stat.wide{grid-column:1/-1}
.quote{margin-top:200px;background:var(--band);padding-block:44px 48px}
.quote blockquote{margin:0 auto;max-width:760px;font-family:var(--f-display);font-weight:800;font-size:clamp(32px,3.4vw,48px);line-height:1.09;text-transform:uppercase;color:var(--cream);text-wrap:balance}
.quote cite{display:block;margin-top:24px;font-style:normal}
.retro{background:linear-gradient(0deg,var(--band-end) 0,var(--r1) 80px,var(--r2) 140px,var(--r3) 200px,var(--bg) 260px);border-radius:0 0 var(--r) var(--r);padding-block:158px 120px}
.retro .in{max-width:1280px}
.retro .sub{margin-top:22px}
.rc{display:grid;grid-template-columns:minmax(0,652px) minmax(0,1fr);gap:32px 0;margin-top:92px;padding-left:8px}
.rc>div{display:flex;flex-direction:column;gap:14px;max-width:420px}

/* next case study, styled after the home page cards */
.next{margin-top:200px;padding-block:140px 140px;background:linear-gradient(rgba(234,218,192,.3),rgba(234,218,192,.3)),var(--grain) 0 0/1024px 1024px,var(--stain) 0 0/1600px 1600px,var(--paper);color:var(--paper-ink)}
.next .label.t{color:#9C3A15}
.next .h2{color:var(--paper-ink)}
.next .body{color:var(--paper-soft)}
.next-in{max-width:1280px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,588px);gap:48px;align-items:center}
.next-copy{display:flex;flex-direction:column;gap:22px;max-width:480px}
.card{display:flex;flex-direction:column;text-decoration:none;color:var(--paper-ink)}
.card-img{position:relative;display:block;aspect-ratio:588/340;overflow:hidden;background:#222}
.card-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1) brightness(1.05);transition:filter .35s ease}
.card-img::after{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(20,18,16,.62) 1.1px,transparent 1.7px) 0 0/5px 5px;transition:opacity .35s ease;pointer-events:none}
.card-row{position:relative;min-height:56px;display:block}
.chips{position:relative;padding:12px 20px;display:flex;gap:8px;flex-wrap:wrap;transition:opacity .2s ease}
.chips span{background:var(--paper-ink);color:var(--paper);font-family:var(--f-label);font-weight:700;font-size:15px;letter-spacing:.1em;text-transform:uppercase;padding:5px 12px}
.card-bar{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 20px 0 24px;background:var(--orange);color:var(--paper-ink);font-size:20px;font-weight:500;clip-path:inset(0 0 100% 0);transition:clip-path .3s ease}
.card-t{display:flex;align-items:baseline;gap:8px;padding:8px 0 0 20px;border-top:2px solid #2B2723;font-size:20px;font-weight:500}
.card-t b{font-family:var(--f-display);font-weight:800;font-size:32px;letter-spacing:.02em;text-transform:uppercase}
.card:hover .card-img img,.card:focus-visible .card-img img{filter:none}
.card:hover .card-img::after,.card:focus-visible .card-img::after{opacity:0}
.card:hover .chips,.card:focus-visible .chips{opacity:0}
.card:hover .card-bar,.card:focus-visible .card-bar{clip-path:inset(0)}
.card:focus-visible{outline-color:var(--paper-ink)}
.foot{background:var(--bar)}
.foot-in{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-block:32px;font-family:var(--f-label);font-weight:700;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.totop{color:var(--cream);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
@media (max-width:820px){.next{margin-top:120px;padding-block:80px}.next-in{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.card-img img,.card-bar,.card-img::after{transition:none}}

/* hero load-in: headline, description, image, then the button; the lime band sweeps up behind them */
@keyframes heroUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes heroImg{from{opacity:0;transform:translateY(40px) scale(.97)}to{opacity:1;transform:none}}
@keyframes heroBand{from{opacity:0;transform:translateY(18%)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .hero h1{animation:heroUp .8s cubic-bezier(.2,.7,.2,1) .1s both}
  .hero .lede{animation:heroUp .8s cubic-bezier(.2,.7,.2,1) .25s both}
  .hero::after{animation:heroBand 1s cubic-bezier(.2,.7,.2,1) .2s both}
  .stage{animation:heroImg 1s cubic-bezier(.2,.7,.2,1) .4s both}
  .visit{animation:heroUp .7s cubic-bezier(.2,.7,.2,1) .75s both}
}

/* scroll-filled headings */
.fill .wd{transition:opacity .25s linear}
.js-fill .fill .wd{opacity:var(--o,.22)}

/* responsive */
@media (max-width:1100px){
  .dsg figure{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
  .dsg figure.flip{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}
  .story-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);margin-left:0}
  .imp{padding:32px}
}
@media (max-width:820px){
  .hero .w{grid-template-columns:1fr;grid-template-rows:auto;padding-block:40px 0;row-gap:24px}
  .hero h1,.hero .lede,.visit,.stage{grid-column:1;grid-row:auto}
  .hero h1,.hero .lede{padding:0}
  .hero .lede{text-align:left}
  .visit{justify-self:start;margin:0}
  .stage{margin-top:8px}
  .hero::after{clip-path:polygon(0 88%,100% 62%,100% 100%,0 100%)}
  .snav .back .t{display:none}
  .ov,.gc,.dec,.duo,.stats,.rc{grid-template-columns:minmax(0,1fr)}
  .dsg figure,.dsg figure.flip{grid-template-columns:minmax(0,1fr);row-gap:16px}
  .dsg figure.flip figcaption{order:0;text-align:left;align-items:flex-start;justify-self:start}
  .rail{padding-left:16px}
  .story-grid,.fmedias,.ftexts{display:contents}
  .story-grid{display:flex;flex-direction:column;gap:20px}
  .fmedia[data-step="0"]{order:1}.ftext[data-step="0"]{order:2;margin-bottom:28px}.fmedia[data-step="1"]{order:3}.ftext[data-step="1"]{order:4;margin-bottom:28px}.fmedia[data-step="2"]{order:5}.ftext[data-step="2"]{order:6}
  .facts{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .nums{grid-template-columns:1fr;gap:28px}
  .dec-x{grid-row:auto}
  .rc{padding-left:0}
  .meet,.impact{margin-top:72px}
  .sol,.quote{margin-top:120px}
  .stats{margin-top:64px}
}

/* ===== On Belay: same system, accents from the app (mint badge, cyan-teal) ===== */
.case-ob{--teal:#3FD0BE;--teal-deep:#114A45;--band:#11312E;--band-end:#112D2A;--lime:#00F5D5;
  --p1:#113A36;--p2:#112725;--p3:#111D1B;--p4:#111615;--s1:#113834;--s2:#112926;--s3:#111F1D;--s4:#111816;--r1:#112624;--r2:#111F1E;--r3:#111816}
.case[hidden]{display:none!important}
.cr{color:var(--cream);font-weight:600}
.h3b{font-size:clamp(24px,2.2vw,32px);font-weight:700;line-height:1.15;color:var(--cream);letter-spacing:-.01em;text-wrap:balance}
.shot-auto{aspect-ratio:auto}
.shot-auto img{height:auto}

/* hero: three app screens on a deep teal stage */
.stage-ob{background:radial-gradient(120% 90% at 50% 0%,#174F49 0%,#0E2624 55%,#0A1514 100%);display:flex;justify-content:center;align-items:flex-start}
.trio{display:flex;justify-content:center;align-items:flex-start;gap:clamp(16px,3.4%,44px);width:100%;padding-top:7%}
.phone{position:relative;border-radius:28px;overflow:hidden;border:1px solid rgba(237,221,196,.22);background:#131313;box-shadow:0 30px 60px rgba(0,0,0,.45)}
.phone img{display:block;width:100%;height:auto}
.trio .phone{width:24%;flex:none}
.trio .phone.mid{width:27%;margin-top:-3%}
@media (prefers-reduced-motion:no-preference){
  .trio .phone{animation:heroImg 1s cubic-bezier(.2,.7,.2,1) both}
  .trio .phone:nth-child(1){animation-delay:.55s}.trio .phone:nth-child(2){animation-delay:.45s}.trio .phone:nth-child(3){animation-delay:.65s}
}

/* problem */
.ob-sub{max-width:640px;margin-inline:auto}
.big-shot{max-width:1204px;margin-top:72px}
.big-shot .shot{border-width:2px}
.meet .ob-cap{margin-top:40px;max-width:600px;margin-inline:auto}
.bleed2{--bl:clamp(16px,calc((100vw - 1264px) / 2),88px);display:grid;grid-template-columns:calc(620px + var(--bl)) minmax(0,1fr);column-gap:56px;align-items:center;margin-left:calc(-1 * var(--bl));margin-top:150px;max-width:none;width:auto}
.bleed2-media .shot{border-radius:0 var(--r) var(--r) 0;border-left:0}
.bleed2-text{display:flex;flex-direction:column;gap:16px;max-width:440px}
.tri3{max-width:1264px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;margin-top:120px}
.tri3>div{display:flex;flex-direction:column;gap:10px}
.tiles3>.tile{gap:10px}

/* research */
.stats3{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:96px;max-width:1264px}
.stats3 .num,.stats4 .num{color:var(--cream)}
.rail-head{max-width:1264px;margin-top:150px;display:flex;flex-direction:column;gap:12px}
.rail-head .body{max-width:560px}
.rail-ppl{margin-top:40px;padding-left:max(16px,calc((100% - 1264px) / 2))}
.rail-ppl figcaption{display:flex;flex-direction:column;gap:8px;max-width:420px}
.shot.sq{aspect-ratio:1}
.pp{max-width:1264px;display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:64px;align-items:center;margin-top:150px}
.pp-media img{width:100%;aspect-ratio:1152/1440;object-fit:cover;border-radius:var(--r)}
.pp-text{display:flex;flex-direction:column;gap:16px}
.pq{margin:8px 0;font-family:var(--f-display);font-weight:800;font-size:clamp(28px,2.6vw,40px);line-height:1.08;text-transform:uppercase;color:var(--cream)}
.pl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin:8px 0}
.pl ul{margin:10px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.jm{max-width:1204px;margin-top:150px;display:flex;flex-direction:column;align-items:center;gap:14px}
.jm .body{max-width:620px}
.jm .shot{margin-top:40px;width:100%;border-width:2px}
.ai{max-width:1264px;margin-top:150px;background:linear-gradient(180deg,var(--tile-a),var(--tile-b));border-radius:var(--r);padding:48px;display:flex;flex-direction:column;gap:14px}
.ai .body{max-width:820px}
.tools{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tools li{background:var(--bg);color:var(--cream);font-family:var(--f-label);font-weight:700;font-size:16px;letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;border-radius:999px}
.trig{max-width:1264px;display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:72px;align-items:center;margin-top:150px}
.trig-media img{width:100%;border-radius:var(--r)}
.trig-text{display:flex;flex-direction:column;gap:14px}
.trig-list{display:flex;flex-direction:column;gap:22px;margin-top:14px}
.trig-list>div{display:flex;flex-direction:column;gap:6px}
#o-research .imp,#o-solution .imp{max-width:1265px;margin-top:72px}

/* design */
.strip.strip-wide{width:min(1204px,100%)}
.phones2{max-width:1245px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.phones2 figure{margin:0;display:flex;flex-direction:column;gap:20px}
.pstage{border-radius:var(--r);overflow:hidden;background:linear-gradient(180deg,var(--teal-deep) 0,var(--s2) 60%,var(--s4) 100%);aspect-ratio:1;display:flex;justify-content:center;padding-top:48px}
.pstage .phone{width:46%;height:calc(100% + 40px);border-radius:28px 28px 0 0}
.phone.scroll{container-type:size}
.phone.scroll img{animation:longlist 10s ease-in-out 1s infinite alternate}
@media (prefers-reduced-motion:reduce){.phone.scroll{overflow-y:auto}.phone.scroll img{animation:none}}
.vers{max-width:1245px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.vers .tile{padding:40px;gap:12px}
.vn{font-family:var(--f-display);font-weight:800;font-size:clamp(56px,6vw,88px);line-height:1;color:var(--cream)}
.vl{list-style:none;margin:4px 0 6px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.vl li{background:var(--bg);color:var(--cream);font-family:var(--f-label);font-weight:700;font-size:16px;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:6px}
.final{max-width:1000px;margin-top:56px;display:flex;flex-direction:column;gap:20px}
.final .shot{border-width:2px}
.cities{max-width:1245px;border-radius:var(--r);background:linear-gradient(180deg,var(--teal-deep) 0,var(--s2) 55%,var(--s4) 100%);padding:clamp(48px,7vw,96px) clamp(24px,5vw,72px);display:flex;justify-content:space-around;gap:24px;flex-wrap:wrap}
.cities span{font-family:var(--f-display);font-weight:800;font-size:clamp(40px,5.6vw,84px);line-height:1;text-transform:uppercase;color:var(--cream)}
.cities span:nth-child(2){color:var(--lime)}

/* solution: flows on a teal stage beside their notes */
#o-solution .story{margin-top:79px}
.fstage{aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:linear-gradient(180deg,var(--teal-deep) 0,var(--s2) 60%,var(--s4) 100%);display:flex;justify-content:center;gap:6%;padding-top:7%}
.fstage .phone{width:28%;align-self:flex-start;border-radius:24px 24px 0 0}
.a11y{max-width:1264px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:64px;margin-top:150px;align-items:start}

/* impact */
.stats4{grid-template-columns:repeat(2,minmax(0,1fr))}
.recs-wrap{max-width:1264px;padding-top:150px}
.recs-wrap .sub{margin-top:22px;max-width:520px}
.recs{list-style:none;margin:64px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 64px}
.recs li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px;align-items:start}
.recs .rn{font-family:var(--f-display);font-weight:800;font-size:44px;line-height:1;color:var(--teal)}
.recs li>div{display:flex;flex-direction:column;gap:8px}

@media (max-width:1100px){
  .bleed2{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);margin-left:0}
  .bleed2-media .shot{border-radius:var(--r);border-left:1px solid var(--frame)}
}
@media (max-width:820px){
  .bleed2,.tri3,.stats3,.pp,.pl,.trig,.phones2,.vers,.a11y,.recs{grid-template-columns:minmax(0,1fr)}
  .bleed2,.rail-head,.pp,.jm,.ai,.trig,.a11y,.recs-wrap{margin-top:88px}
  .tri3{margin-top:72px}
  .ai{padding:28px}
  .cities{flex-direction:column;align-items:center}
  .trio .phone{width:30%}.trio .phone.mid{width:33%}
  .fstage .phone{width:36%}
}

.case-ob .quote blockquote{max-width:980px}

/* ===== Home page (from the Framer home page) ===== */
.case-home{--hx:clamp(0px,1.9vw,27px);--f-home:var(--f-body);--h-dark:#181512;--h-dark2:#24231F;--h-cream:var(--cream);--h-off:var(--cream);--h-grey:var(--muted);font-family:var(--f-home)}
.toplinks a{color:inherit;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.toplinks a:hover{color:var(--cream)}
.toplinks .is-off{opacity:.55;min-height:44px;display:inline-flex;align-items:center;cursor:default}
a.brand{color:inherit}

/* hero: beige paper with portrait and teal band, from the home page artwork */
/* hero: one paper fill; the teal band is a CSS shape that scales with the viewport;
   the portrait cutout sits in the 1440 content frame and scales with the heading, so the gap to the text stays constant */
.hhero{--S:min(1440px,100vw);position:relative;isolation:isolate;overflow:hidden;min-height:calc(100vh - 64px);min-height:calc(100svh - 64px);display:flex;
  background:var(--grain) 0 0/1024px 1024px,var(--stain) 0 0/1600px 1600px,#E8D9C4}
.hhero::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--grain) 0 0/1024px 1024px,var(--stain) 0 0/1600px 1600px,#407568;
  clip-path:polygon(0 86.7%,100% 44%,100% 100%,0 100%)}
.hh-art{--gap:128px;--W:calc(var(--S) * .8748);--H:calc(var(--W) * 1772 / 2114);--inset:calc(var(--W) * .197);position:relative;z-index:-1;flex:none;align-self:stretch;width:var(--W);margin-left:calc(var(--gap) - var(--inset));pointer-events:none}
.hh-art img{position:absolute;left:0;top:max(56px,calc(100% - var(--H)));display:block;width:100%;height:var(--H)}
.hh-in{flex:1;display:flex;align-items:stretch;padding-block:0}
.hh-copy{flex:none;align-self:center;padding-block:72px 120px}
.hh-copy{display:flex;flex-direction:column;align-items:flex-start;gap:0;padding-left:var(--hx);max-width:none}
.hh-eyebrow{font-family:var(--f-label);font-weight:800;font-size:20px;letter-spacing:.1em;text-transform:uppercase;color:var(--h-dark)}
.hh-title{margin-top:30px;font-family:var(--f-display);font-weight:800;font-size:clamp(72px,8.9vw,128px);line-height:.84;letter-spacing:-.01em;text-transform:uppercase;color:var(--h-dark);display:flex;flex-direction:column}
.hh-title span{display:flex;align-items:center}
.hh-star{width:.62em;height:.62em;margin:0 0 0 .08em;align-self:center;position:relative;top:var(--star-y,-.42em)}
.hh-lede{margin-top:34px;max-width:510px;font-size:20px;line-height:28px;font-weight:500;letter-spacing:.1px;color:var(--h-dark)}
.hh-btn{margin-top:30px;grid-column:auto;justify-self:auto}

@keyframes hstar{from{opacity:0;transform:scale(.2) rotate(-120deg)}to{opacity:1;transform:none}}
@keyframes hbg{from{background-position:calc(100% + 40px) bottom}to{background-position:right bottom}}

/* shared home type */
.hk-label{font-family:var(--f-label);font-weight:800;font-size:20px;letter-spacing:.2em;text-transform:uppercase;color:var(--teal)}
.hk-label.ink{color:var(--h-dark)}
.hk-h2{margin-top:8px;font-family:var(--f-display);font-weight:800;font-size:clamp(56px,6.1vw,88px);line-height:1;text-transform:uppercase;color:var(--h-cream)}
.hk-h2.ink{color:var(--h-dark)}

/* stack */
.hstack{position:relative;background:var(--bg);padding-block:160px 120px;overflow:hidden}
.tool{flex:none;width:var(--cw);min-height:0;border:1.5px solid rgba(241,223,197,.75);border-radius:8px;background:linear-gradient(180deg,var(--tile-a),var(--tile-b));padding:28px;display:flex;flex-direction:column;gap:20px;box-sizing:border-box;transition:background-color .2s ease,border-color .2s ease}
.tool:hover{border-color:var(--h-cream)}
.tool>h3{font-size:20px;font-weight:600;color:var(--h-off);line-height:1;margin:0;order:0}
.tool{display:grid;grid-template-columns:48px 1fr;column-gap:14px;row-gap:22px;align-content:start}
.tool .ti{grid-row:1;grid-column:1}
.tool>h3{grid-row:1;grid-column:2;align-self:center}
.tool>p{grid-column:1/-1;margin:0;font-size:16px;line-height:24px;color:var(--h-cream)}
.ti{width:48px;height:48px;border-radius:12px;border:1px solid rgba(241,223,197,.35);background:var(--bg);display:grid;place-items:center;overflow:hidden}
.ti img{width:32px;height:32px;object-fit:contain}
.ti-gamma{background:var(--bg)}
.ti-gamma svg{width:36px;height:auto}
.ti-gamma svg path{fill:var(--h-off)}

/* case studies on paper */
.hwork{background:var(--bg);padding-block:112px 160px;color:var(--cream)}
.hw-in{max-width:1214px}
.hw-grid{margin-top:96px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.hwork .card{color:var(--cream)}

/* contact */
.hcontact{position:relative;margin-top:calc(-1 * var(--r));border-radius:var(--r) var(--r) 0 0;background:linear-gradient(180deg,var(--teal-deep) 0,var(--p1) 90px,var(--p2) 170px,var(--p3) 250px,var(--p4) 330px,var(--bg) 420px);padding-block:128px 112px;color:var(--h-off)}
.hc-in{max-width:1214px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,540px);gap:64px;align-items:center}
.hc-lede{margin-top:40px;max-width:440px;font-size:18px;line-height:27px;font-weight:500}
.hc-links{margin-top:40px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.hc-li{width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(242,241,236,.2);color:var(--h-off)}
.hc-li:hover{border-color:var(--orange);color:var(--orange)}
.hc-mail{font-family:var(--f-body);font-weight:500;font-size:16px;letter-spacing:.01em;user-select:all}
.hc-copybtn{all:unset;cursor:pointer;width:44px;height:44px;display:grid;place-items:center;color:var(--h-grey);border-radius:8px;transition:color .2s ease}
.hc-copybtn:hover{color:var(--h-off)}
.hc-copybtn:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.hc-form{display:flex;flex-direction:column;padding:32px;background:linear-gradient(180deg,var(--tile-a),var(--tile-b))}
.hc-form label{font-family:var(--f-label);font-weight:500;font-size:16px;letter-spacing:.1em;text-transform:uppercase;color:var(--h-cream);margin:0 0 10px}
.hc-form input,.hc-form textarea{font:inherit;font-size:16px;color:var(--h-off);background:var(--bg);border:1px solid #8E8B83;padding:14px 16px;margin:0 0 22px;border-radius:0;outline:none;resize:vertical}
.hc-form input::placeholder,.hc-form textarea::placeholder{color:#A9A59C;opacity:1}
.hc-form input:focus-visible,.hc-form textarea:focus-visible{border-color:var(--orange);box-shadow:0 0 0 1px var(--orange)}
.hc-form textarea{min-height:110px}
.hc-submit{margin-top:4px;font-family:var(--f-label);font-weight:600;font-size:16px;letter-spacing:.2em;text-transform:uppercase;color:var(--h-dark);background:var(--h-cream);border:1px solid var(--h-cream);min-height:48px;cursor:pointer;transition:background-color .2s ease,color .2s ease}
.hc-submit:hover{background:var(--orange);color:var(--h-dark)}
.hc-submit:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.hc-note{margin-top:16px;font-size:14px;line-height:1.5;color:var(--h-cream)}

@media (max-width:900px){
  .hhero{flex-direction:column;animation:none}
  .hhero::before{display:block;clip-path:polygon(0 88%,100% 66%,100% 100%,0 100%)}
  .hh-in{flex-direction:column;padding-block:0;min-width:0;width:100%}
  .hh-title{font-size:min(72px,15.5vw)}
  .hh-copy{align-self:stretch;min-width:0;padding-block:40px 8px}
  .hh-art{align-self:flex-end;width:min(100vw,560px);margin:8px calc(-1 * var(--gut-r)) 0 0;aspect-ratio:2114/1772}
  .hh-art img{position:static;height:100%}
  .hh-copy{padding-left:0}
  .hw-grid,.hc-in{grid-template-columns:minmax(0,1fr)}
  .hstack,.hwork,.hcontact{padding-block:72px 88px}
  .hw-grid{margin-top:48px}
  .tool{width:280px}
}



.case-home .card-t{line-height:28px}
.case-home .card-t span,.case-home .card-t{letter-spacing:.02em}

/* one left edge for every home heading: the hero copy's inset */
.case-home .hw-in,.case-home .hc-in{max-width:none;margin-inline:0;padding-left:var(--hx);box-sizing:border-box}
.hc-title{display:flex;flex-direction:column}
.hc-title>span{display:flex;align-items:center}
.hc-star{width:.42em;height:.42em;margin-left:.1em;position:relative;top:-.5em;flex:none}
.hc-copybtn svg{width:20px;height:20px}
.hc-copybtn:hover{color:var(--h-off)}
.hc-copybtn.is-done{color:var(--teal)}
@media (prefers-reduced-motion:no-preference){.hc-star{transition:transform .9s cubic-bezier(.2,.7,.2,1)}}
@media (max-width:900px){.case-home .hw-in,.case-home .hc-in,.hs-head{padding-left:0}}

/* card for a case study that isn't published yet: no link, hover shows "Coming soon" */
.card.is-soon{cursor:default}
.card-soon{position:absolute;inset:0;z-index:2;display:grid;place-items:center;background:rgba(17,20,19,.72);opacity:0;transition:opacity .3s ease}
.card-soon b{font-family:var(--f-label);font-weight:800;font-size:20px;letter-spacing:.2em;text-transform:uppercase;color:var(--paper-ink);background:var(--paper);padding:10px 18px}
.card.is-soon:hover .card-soon,.card.is-soon:focus-visible .card-soon{opacity:1}
.card.is-soon:hover .card-img img,.card.is-soon:focus-visible .card-img img{filter:grayscale(1) contrast(1.1) brightness(1.05)}
.card.is-soon:hover .card-img::after,.card.is-soon:focus-visible .card-img::after{opacity:1}
.card.is-soon:hover .chips,.card.is-soon:focus-visible .chips{opacity:1}
@media (prefers-reduced-motion:reduce){.card-soon{transition:none}}

/* hero to stack: the teal band and the portrait fade through deep teal into the page background */
.hhero::after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:-1;height:clamp(130px,20%,190px);pointer-events:none;
  background:linear-gradient(180deg,rgba(17,20,19,0) 0,rgba(23,76,65,.28) 40%,rgba(19,40,35,.7) 75%,var(--bg) 100%)}


/* ===== hero entrance, modeled on Work Louder: words rise out of a blur, the portrait glides up */
@keyframes hwIn{from{opacity:0;filter:blur(10px);transform:translateY(var(--dy,40px))}to{opacity:1;filter:none;transform:none}}
@keyframes artUp{from{transform:translateY(80px)}to{transform:none}}
@keyframes artFade{from{opacity:0}to{opacity:1}}
.hw{display:inline-block}
@media (prefers-reduced-motion:no-preference){
  .hw{animation:hwIn 1s cubic-bezier(.22,1,.36,1) var(--d,0s) both}
  .hw-s{--dy:18px}
  .hh-eyebrow .hw{--dy:24px}
  .hh-star{animation:hstar 1s cubic-bezier(.2,.7,.2,1) .8s both}
  .hh-btn{animation:hwIn 1s cubic-bezier(.22,1,.36,1) 1.05s both;--dy:24px}
  .hh-art{animation:artUp 1.9s cubic-bezier(.16,1.08,.3,1) .2s both,artFade .7s ease-out .2s both}
}

/* Marathon thumbnail: a dark base at rest, the full-color screenshot on hover */
.card-img-2 .ci-off{position:absolute;inset:0;transition:opacity .35s ease}
.card:hover .card-img-2 .ci-off,.card:focus-visible .card-img-2 .ci-off{opacity:0}

/* ===== stack: centered Poppins heading, then two drag rails of the same 540px cards used in Marathon */
.hs-head{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:820px;margin-inline:auto}
.hs-label{color:var(--teal)}
.hstack .h2{margin-top:14px}
.hs-sub{margin-top:20px;max-width:560px;font-size:20px;line-height:28px;color:var(--soft)}
.hs-rails{margin-top:72px;display:flex;flex-direction:column;gap:56px}
/* home rails: 20% smaller than the case study cards; they slide in, then loop (driven by app.js) */
.hrail{--cw:min(432px,78vw);--g:24px;--edge:calc(max(var(--gut-l),(100% - 1440px) / 2 + var(--gut-l)) + var(--hx));overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.hrail.is-drag{cursor:grabbing}
.hrail:focus-visible{outline:2px solid var(--orange);outline-offset:6px}
.hr-track{display:flex;gap:var(--g);width:max-content;padding-left:var(--edge);will-change:transform;transform:translate3d(100vw,0,0)}
.hrail[data-dir="-1"] .hr-track{transform:translate3d(-100vw,0,0)}
.hr-track figure{flex:0 0 var(--cw);margin:0;display:flex;flex-direction:column;gap:20px}
.hr-track .shot{aspect-ratio:1;border:1px solid #2E2E2C;border-radius:var(--r);overflow:hidden;background:linear-gradient(180deg,#2C2C2C,#0A0A0A)}
.hr-track .shot img{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none;pointer-events:none}
.hr-track figcaption{display:flex;flex-direction:column;gap:10px;padding-inline:4px}
.hr-track .body{font-size:16px;line-height:24px;color:var(--soft)}
@media (max-width:900px){.hstack{padding-top:112px}.hrail{--edge:var(--gut-l)}}
.hrail figcaption .tc-h b{font-size:18px}
.tc-h{display:flex;align-items:center;gap:14px}
.tc-h b{font-family:var(--f-body);font-weight:600;font-size:20px;color:var(--h-off)}
.tc-h .ti{width:40px;height:40px;border-radius:10px}
.tc-h .ti img{width:26px;height:26px}
.tc-h .ti-gamma svg{width:30px}

/* ===== section headers reveal word by word once reached (stack waits until the hero is scrolled past) */
@media (prefers-reduced-motion:no-preference){
  [data-reveal] .hw{animation:none;opacity:0}
  [data-reveal].is-in .hw{animation:hwIn .7s cubic-bezier(.22,1,.36,1) var(--d,0s) both}
  [data-reveal] .h2 .hw{--dy:28px}
  [data-reveal] .hs-sub .hw,[data-reveal] .hs-label .hw{--dy:16px}
}
.hw-head{margin-bottom:0}

/* ===== paper lives only in heroes: case study cards and "next case study" bands sit on the dark page */
.hw-grid{margin-top:72px}
.card{color:var(--cream)}
.card-img{border-radius:var(--r);border:1px solid #2E2E2C;background:#151817}
.card-row{margin-top:4px}
.chips span{background:var(--tile-a);color:var(--soft);border:1px solid #343A38;font-size:16px}
.card-bar{border-radius:8px}
.card-t{border-top:0;padding:4px 0 0 4px;color:var(--soft)}
.card-t b{color:var(--cream)}
.card:focus-visible{outline:2px solid var(--orange);outline-offset:6px}
.card:hover .card-img,.card:focus-visible .card-img{border-color:#4A504E}
.card.is-soon:hover .card-img{border-color:#2E2E2C}
.next{background:var(--bg);color:var(--cream)}
.next .label.t{color:var(--teal)}
.next .h2{color:var(--cream)}
.next .body{color:var(--soft)}

/* ===== case study cards, v2: one container. Tags top-left inside the image; the orange bar rises from the image's bottom edge on hover */
.card-img{display:block}
.card:hover .chips,.card:focus-visible .chips{opacity:1}
.card-img .card-bar{position:absolute;left:0;right:0;bottom:0;top:auto;height:64px;z-index:3;border-radius:0;padding:0 24px;clip-path:inset(100% 0 0 0);transition:clip-path .35s cubic-bezier(.2,.7,.2,1)}
.card:hover .card-img .card-bar,.card:focus-visible .card-img .card-bar{clip-path:inset(0)}
.card-t{margin-top:16px;padding-left:4px}
.card.is-soon .card-soon{z-index:4}

/* stack rails stay hidden until the stack header has played; they fade in, then slide */
.hrail{opacity:0;transition:opacity .2s ease}
.hrail.is-shown{opacity:1}
/* case study cards wait for their header, then fade up */
[data-cards] .card{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}
[data-cards] .card+.card{transition-delay:.12s}
[data-cards].is-shown .card{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.hrail,[data-cards] .card{opacity:1;transform:none}}

[data-reveal]{will-change:transform;position:relative;z-index:2}

html{scrollbar-gutter:stable}
html.is-held{overflow:hidden}

/* tags sit under the title */
.card > .chips{position:static;padding:12px 0 0 4px;opacity:1}
/* halftone glyph arrow floats on the orange bar, like the Framer site */
.card-bar .glyph{flex:none;width:28px;height:28px}
@keyframes glyphBob{from{transform:translateY(0)}to{transform:translateY(-6px)}}
@media (prefers-reduced-motion:no-preference){.card-bar .glyph{animation:glyphBob .95s ease-in-out infinite alternate}}
/* Let's Talk joins last, after the case study cards */
.hcontact{transition:opacity .7s ease}
html.js-seq .hcontact:not(.is-shown){opacity:0}
.ti-ff svg{width:26px;height:26px;display:block}
.tc-h .ti-ff svg{width:24px;height:24px}

/* audit: case study sub-nav links match the 16px floor used for secondary nav */
.links a{font-size:16px}
.snav .back{font-size:16px}
/* audit: "next case study" card fades up with the rest of the band */
@media (prefers-reduced-motion:no-preference){
  .next .card{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}
  .next .card.is-seen{opacity:1;transform:none}
}
.snav .back{min-width:44px;justify-content:center}

/* audit: tags are 16px on every page */
.chips span{font-size:16px}