.case-hero img{object-position:center 40%}
/* HERO RECOMPOSITION: three zones. Metadata top left, headline left/middle, subject right third. */
.hero{background:#0A0A0A}
.hero-img{object-position:70% 50%}
.hero-shade{background:linear-gradient(90deg,rgba(10,10,10,.62) 0%,rgba(10,10,10,.28) 42%,rgba(10,10,10,0) 64%),linear-gradient(180deg,rgba(10,10,10,.55) 0%,rgba(10,10,10,0) 30%,rgba(10,10,10,0) 62%,rgba(10,10,10,.75) 100%)}
.hero-meta{color:rgba(236,234,228,.92);text-shadow:0 1px 12px rgba(0,0,0,.55)}
.hero-meta-tl{top:calc(96px + env(safe-area-inset-top,0px))}
/* Headline stays oversized but is capped by viewport height so it always stops 60px+ below the metadata. */
/* Height cap: the headline keeps the 16.5vw scale but never climbs into the metadata zone. At 16.5vw the longest line ends near 61% width, leaving the subject third clear. */
.hero-title{font-size:clamp(64px,min(16.5vw,calc((100svh - 196px - clamp(64px,10vh,110px)) / 2.6)),260px)}
/* Sequence: black > ISO > image reveal > metadata > WE MAKE > BRANDS > MATTER. > dot > subject lit > nav > scroll */
.js .hero-img{filter:brightness(.6);transition:opacity .8s ease .55s,clip-path 1.9s var(--mask) .55s,transform 2.8s var(--ex) .55s,filter 1.2s ease 2.55s}
.is-ready .hero-img{filter:none}
.is-ready .hero-meta{transition-delay:1.05s}
.is-ready .hero-meta-tr{transition-delay:1.15s}
@media (max-width:820px){
  .hero{align-items:flex-end;padding-bottom:calc(140px + env(safe-area-inset-bottom,0px))}
  .hero{--hfs:clamp(56px,21vw,140px)}
  .hero-media{inset:-10px -10px auto -10px;height:calc(100% - 150px - 2.6 * var(--hfs) - env(safe-area-inset-bottom,0px))}
  .hero-media:after{content:"";position:absolute;inset:auto 0 0 0;height:22%;background:linear-gradient(180deg,rgba(10,10,10,0),#0A0A0A)}
  .hero-img{object-position:80% 35%}
  .hero-shade{inset:0;background:linear-gradient(180deg,rgba(10,10,10,.6) 0%,rgba(10,10,10,0) 28%)}
  .hero-meta-tl{top:calc(88px + env(safe-area-inset-top,0px))}
  .hero-title{font-size:var(--hfs);margin-top:0}
  .hero-cats{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:820px) and (max-height:640px){.hero{--hfs:clamp(52px,18vw,110px)}}
@media (prefers-reduced-motion:reduce){.js .hero-img{filter:none}}
.hero-scroll{bottom:14px;gap:8px}.hero-scroll i{height:24px}
/* CTA underline: clear, responsive gap below "crazy idea?" (about 6px mobile, 8-12px tablet, 10-15px desktop). */
.cta-title .cl:last-child{padding-bottom:calc(var(--ug) + var(--ut) + .1em);margin-bottom:calc(-1 * (var(--ug) + var(--ut) + .1em))}
.cta-title{--ug:clamp(7px,.55vw + 4.5px,15px);--ut:clamp(3px,.045em,6px)}
.cta-accent::after{bottom:auto;top:calc(.86em + var(--ug));height:var(--ut);transition:transform .45s var(--ex) 1.5s}
/* Featured ideas: the pinned row scales with screen height so every 3-line title clears the bottom edge, all cards aligned */
.is-pinned .ideas-title{font-size:clamp(56px,min(9.5vw,12.5vh),150px)}
.is-pinned .ideas-head{margin-bottom:min(36px,3.5vh)}
.is-pinned .idea-media,.is-pinned .idea-end{height:min(40vh,400px,calc(100vh - 530px))}
/* Showreel video: titles matched to the site type, smaller and quieter than the slideshow words */
.reel-vid .reel-word{font-size:clamp(40px,6.4vw,120px);left:max(var(--pad),5vw);bottom:12vh;opacity:0;transition:opacity .45s ease;text-shadow:0 2px 24px rgba(0,0,0,.45);pointer-events:none}
.reel-vid .reel-word.is-on{opacity:1}
.reel-vid .reel-word.is-high{bottom:auto;top:24vh}
.reel-dot{font-style:normal;color:var(--acid)}
.reel-vid .reel-end{transition:opacity 1.1s ease}
@media (max-width:820px){.reel-stage video{object-fit:contain}.reel-vid .reel-word{bottom:22vh}.reel-vid .reel-word.is-high{top:22vh}}