/* ===================================================================
   FERRUM FILMS
   Brand system sourced from the 2024 Capabilities Deck:
   off-black #151618, sand #E4D393, Futura-geometric display + Courier
   =================================================================== */

/* ---------- FONTS ---------- */
@font-face{font-family:'Clash Display';src:url('assets/fonts/clash-display-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Clash Display';src:url('assets/fonts/clash-display-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Clash Display';src:url('assets/fonts/clash-display-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Clash Display';src:url('assets/fonts/clash-display-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Inter';src:url('assets/fonts/inter-var.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Courier Prime';src:url('assets/fonts/courier-prime-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Courier Prime';src:url('assets/fonts/courier-prime-700.woff2') format('woff2');font-weight:700;font-display:swap}


/* ---------- TOKENS ---------- */
:root{
  --ink:#000000;          /* true black, matches live site */
  --ink-deep:#000000;
  --ink-lift:#0B0B0C;
  --paper:#FFFFFF;
  --sand:#FFFFFF;         /* monochrome accent */
  --accent:#E4D393;       /* warm brand sand, used sparingly on titles */
  --line:rgba(255,255,255,.16);
  --line-soft:rgba(255,255,255,.09);
  --mute:rgba(255,255,255,.68);
  --mute-2:rgba(255,255,255,.45);

  --display:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'Courier Prime',ui-monospace,'SFMono-Regular',Menlo,monospace;
  /* branded display face: Clash Display carries every headline so the type
     reads as Ferrum's own, not a default grotesk. Inter stays for UI + body. */
  --head:'Clash Display','Inter',-apple-system,BlinkMacSystemFont,sans-serif;

  --pad:clamp(20px,4.4vw,72px);
  --gap:clamp(48px,7vw,110px);
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:not(.no-smooth){scroll-behavior:smooth}

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}

/* fine dot texture, matches the deck's matte print feel */
body::before{
  content:'';position:fixed;inset:0;z-index:1;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.038) 1px,transparent 1px);
  background-size:3px 3px;
  mix-blend-mode:overlay;
}

img{max-width:100%;display:block}
/* <picture> only exists to offer AVIF/WebP ahead of the JPEG. It must never
   become a layout box of its own, or it would sit between a flex/grid parent
   and the image it wraps. */
picture{display:contents}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--sand);color:var(--ink)}

.wrap{width:100%;max-width:1560px;margin-inline:auto;padding-inline:var(--pad)}
main{position:relative;z-index:2}


/* ---------- TYPE PRIMITIVES ---------- */
.mono-label{
  font-family:var(--mono);
  font-size:clamp(9.5px,.72vw,11.5px);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--mute);
  margin:0;
  line-height:1.4;
}

.display{
  font-family:var(--head);
  font-weight:600;
  line-height:.86;
  letter-spacing:-.035em;
  text-transform:uppercase;
  margin:0;
}
.display em{font-style:normal;color:var(--mute-2)}
.display--lg{font-size:clamp(40px,6.6vw,104px)}
.display--xl{font-size:clamp(48px,9vw,150px)}
.display--xxl{font-size:clamp(54px,11.4vw,196px)}

/* Considered section title. A hairline mono kicker with a live accent tick
   sits above a confident Clash Display heading; the emphasised word drops to
   an outlined treatment so the pair reads as one branded unit, not a default
   grotesk line. */
.sec-title{
  display:block;position:relative;margin:0;
  font-family:var(--head);font-weight:600;
  font-size:clamp(30px,4vw,60px);line-height:.94;
  letter-spacing:-.035em;text-transform:uppercase;
}
/* the accented word is drawn as an outline, so the phrase has depth and a
   Ferrum-specific signature while staying strictly monochrome */
.sec-title em{
  font-style:normal;color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.62);
  text-stroke:1px rgba(255,255,255,.62);
}
.sec-title__kick{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--mono);font-weight:400;
  font-size:clamp(10px,.8vw,12px);letter-spacing:.28em;text-transform:uppercase;
  color:var(--mute-2);margin-bottom:clamp(16px,1.7vw,24px);
}
.sec-title__kick::before{
  content:'';width:6px;height:6px;border-radius:50%;flex:none;
  background:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent);
}
.sec-title__kick::after{
  content:'';width:clamp(24px,2.6vw,46px);height:1px;background:var(--line);
}


/* ---------- PILL BUTTONS ---------- */
.pill{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  height:44px;padding:0 26px;border-radius:60px;
  font-family:var(--display);font-weight:600;font-size:13px;
  letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;
  overflow:hidden;isolation:isolate;
  transition:color .45s var(--ease),border-color .45s var(--ease);
}
.pill__txt{position:relative;z-index:2}
.pill::after{
  content:'';position:absolute;inset:0;z-index:1;border-radius:inherit;
  transform:translateY(101%);transition:transform .5s var(--ease);
}
.pill--ghost{border:1px solid rgba(255,255,255,.55);color:var(--paper)}
.pill--ghost::after{background:rgba(255,255,255,.1)}
@media (hover:hover){.pill--ghost:hover{border-color:var(--paper)}}

/* solid pills invert on hover: the white fill drains away and leaves a
   white outline, so nothing jumps and nothing slides out from under the cursor */
.pill--solid{
  background:var(--paper);color:var(--ink);
  border:1px solid var(--paper);
  transition:background .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease);
}
.pill--solid::after{display:none}
@media (hover:hover){.pill--solid:hover{background:transparent;color:var(--paper)}}

@media (hover:hover){.pill:hover::after{transform:translateY(0)}}
.pill--lg{height:58px;padding:0 40px;font-size:15px}


/* ===================================================================
   PRELOADER
   =================================================================== */
.preloader{
  position:fixed;inset:0;z-index:200;background:var(--ink);
  display:grid;place-items:center;
  transition:opacity .7s var(--ease),visibility .7s;
}
.preloader.is-done{opacity:0;visibility:hidden}
.preloader__inner{width:min(320px,62vw);text-align:center}
.preloader__mark{width:74px;margin:0 auto 28px;opacity:.92;
  animation:spinSlow 9s linear infinite}
@keyframes spinSlow{to{transform:rotate(360deg)}}
.preloader__bar{height:1px;background:var(--line);overflow:hidden}
.preloader__bar span{display:block;height:100%;width:0;background:var(--paper)}
.preloader__meta{
  display:flex;justify-content:space-between;margin-top:12px;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--mute);
}


/* ===================================================================
   HEADER
   =================================================================== */
.header{
  position:fixed;top:0;left:0;right:0;z-index:90;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--pad);
  transition:transform .55s var(--ease),opacity .35s linear,background .4s linear;
}
.header::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom,rgba(21,22,24,.92),rgba(21,22,24,0));
  opacity:0;transition:opacity .4s linear;
}
.header.is-stuck::before{opacity:1}
.header.is-hidden{transform:translateY(-105%)}
/* the mark lifts under a soft black disc rather than spinning */
/* square box, or the 50% radius on the disc reads as an oval */
.header__mark{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  flex:none;width:64px;height:64px;margin:-9px;border-radius:50%;isolation:isolate;
}
.header__mark::before{
  content:'';position:absolute;inset:0;z-index:-1;border-radius:50%;
  background:rgba(0,0,0,.38);
  opacity:0;transform:scale(.82);
  transition:opacity .34s var(--ease),transform .34s var(--ease);
}
.header__mark:focus-visible::before{opacity:1;transform:scale(1)}
@media (hover:hover){.header__mark:hover::before{opacity:1;transform:scale(1)}}
.header__mark img{width:46px;transition:transform .34s var(--ease)}
.header__mark:focus-visible img{transform:scale(1.07)}
@media (hover:hover){.header__mark:hover img{transform:scale(1.07)}}

/* nothing fixed should sit over a modal: the header steps out while the
   menu overlay or the video lightbox owns the screen */
body.is-locked .header{transform:translateY(-105%);opacity:0;pointer-events:none}


/* ===================================================================
   MENU OVERLAY
   =================================================================== */
.menu{
  position:fixed;inset:0;z-index:150;background:var(--ink);
  display:flex;flex-direction:column;justify-content:center;
  padding:96px var(--pad) 40px;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .8s var(--ease);
  visibility:hidden;
}
.menu.is-open{clip-path:inset(0 0 0 0);visibility:visible}

.menu__close{
  position:absolute;top:26px;right:var(--pad);
  width:52px;height:52px;border-radius:50%;background:var(--paper);
  display:grid;place-items:center;
  transition:transform .5s var(--ease),background .4s;
}
.menu__close span{
  position:absolute;width:17px;height:1.5px;background:var(--ink);
}
.menu__close span:first-child{transform:rotate(45deg)}
.menu__close span:last-child{transform:rotate(-45deg)}
@media (hover:hover){.menu__close:hover{transform:rotate(90deg);background:var(--sand)}}

.menu__nav{display:flex;flex-direction:column;align-items:center;gap:.1em}
.menu__link{
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:clamp(40px,10.4vw,150px);line-height:.94;letter-spacing:-.04em;
  /* the negative tracking eats the space in "GEAR RENTALS" */
  word-spacing:.16em;
  color:var(--paper);
  opacity:0;transform:translateY(38px);
  transition:opacity .7s var(--ease),transform .7s var(--ease),color .4s linear;
}
.menu.is-open .menu__link{opacity:1;transform:none}
.menu.is-open .menu__link:nth-child(1){transition-delay:.14s}
.menu.is-open .menu__link:nth-child(2){transition-delay:.2s}
.menu.is-open .menu__link:nth-child(3){transition-delay:.26s}
.menu.is-open .menu__link:nth-child(4){transition-delay:.32s}
/* hovering one link dims the rest, mirroring the original */
@media (hover:hover){.menu__nav:hover .menu__link{color:rgba(255,255,255,.34)}}
@media (hover:hover){.menu__nav:hover .menu__link:hover{color:var(--paper)}}

.menu__foot{
  display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;
  gap:clamp(16px,2vw,28px);
  margin-top:auto;padding-top:28px;border-top:1px solid var(--line);
}
.menu__foot-info{display:flex;flex-direction:column;gap:5px}
.menu__val{font-family:var(--mono);font-size:12px;letter-spacing:.08em;margin:0;line-height:1.8}
@media (hover:hover){.menu__val a:hover{color:var(--sand)}}
.menu__col--social{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.menu__col--social a{font-family:var(--mono);font-size:12px;letter-spacing:.1em;transition:color .3s}
@media (hover:hover){.menu__col--social a:hover{color:var(--sand)}}
.menu__col--social i{font-style:normal;font-size:.85em}


/* ===================================================================
   HERO
   =================================================================== */
.hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  /* vh-based so the hero always fits the fold on short laptops */
  padding:clamp(92px,13vh,132px) var(--pad) clamp(100px,16vh,150px);
  text-align:center;overflow:hidden;
}
/* faint vertical rules, echoing the deck's grid */
.rules{position:absolute;inset:0;display:flex;justify-content:space-evenly;pointer-events:none}
.rules i{width:1px;height:100%;background:var(--line-soft)}

/* --- background film --- */
/* One filter on the wrapper so the poster and the Vimeo frame are
   graded identically and the crossfade between them is invisible. */
.hero__bg{
  position:absolute;inset:0;z-index:0;overflow:hidden;background:#000;
  container-type:size;
  /* full colour, knocked back only far enough for the type to hold */
  filter:contrast(1.06) saturate(1.05) brightness(.74);
}
.hero__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__film{position:absolute;inset:0;opacity:0;transition:opacity 1.4s linear}
.hero__film.is-live{opacity:1}
/* The reel is graded 2.39:1, so Vimeo letterboxes it inside its own 16:9
   frame. The iframe therefore has to be sized off the *film* ratio, not
   the frame ratio, or those black bars land in the hero. Sized off the
   container rather than the viewport so it still covers on a portrait
   phone, where the crop is severe but the frame stays full-bleed. */
.hero__film{--film-ar:2.4}
.hero__film iframe{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  /* wide enough that the letterboxed film, not the frame, covers the box */
  width:max(100cqw, calc(100cqh * var(--film-ar)));
  height:calc(max(100cqw, calc(100cqh * var(--film-ar))) * 9 / 16);
  border:0;pointer-events:none;
}

/* vignette + top/bottom fades. Multi-stop, eased curves so the black
   dissolves into the film instead of sitting on it as a bar. */
.hero__veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    /* top: enough weight behind the header, gone by a fifth of the way down */
    linear-gradient(to bottom,
      rgba(0,0,0,.80) 0%,
      rgba(0,0,0,.62) 4%,
      rgba(0,0,0,.40) 8%,
      rgba(0,0,0,.22) 13%,
      rgba(0,0,0,.09) 18%,
      rgba(0,0,0,0)   24%),
    /* bottom: melts into the page black under the rail */
    linear-gradient(to top,
      rgba(0,0,0,1)   0%,
      rgba(0,0,0,.86) 6%,
      rgba(0,0,0,.60) 13%,
      rgba(0,0,0,.34) 21%,
      rgba(0,0,0,.14) 30%,
      rgba(0,0,0,0)   40%),
    /* gentle overall knock-back so the lockup always holds */
    linear-gradient(to bottom,rgba(0,0,0,.26),rgba(0,0,0,.26)),
    radial-gradient(120% 82% at 50% 48%,rgba(0,0,0,0) 36%,rgba(0,0,0,.62) 100%);
}
.hero .rules{z-index:1;opacity:.5}

.hero__inner{position:relative;z-index:2;width:100%;max-width:1180px}
/* Hero animates on load, never on scroll: it must never sit
   invisible when it starts below the fold on a short viewport. */
@keyframes heroIn{to{opacity:1;transform:none}}

/* a single instrument readout, not three floating strings of text:
   hairline capsule, blurred plate, live dot, dividers between the fields */
.hero__eyebrow{
  display:inline-flex;align-items:center;justify-content:center;
  gap:0;flex-wrap:nowrap;
  margin:0 auto clamp(24px,4vh,44px);
  padding:0 4px;height:34px;border-radius:60px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  font-family:var(--mono);font-size:clamp(9px,.68vw,10.5px);
  letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.78);
}
.hero__eyebrow span{
  display:flex;align-items:center;gap:8px;
  padding:0 clamp(11px,1.1vw,17px);white-space:nowrap;
}
/* the live dot rides on the first field, echoing the REC light on the rail */
.hero__eyebrow span:first-child::before{
  content:'';width:5px;height:5px;border-radius:50%;
  background:var(--paper);flex:none;
  animation:recBlink 2.4s var(--ease-io) infinite;
}
.hero__eyebrow i{width:1px;height:12px;background:rgba(255,255,255,.2);flex:none}
.js-anim .hero__eyebrow{
  opacity:0;transform:translateY(14px);
  animation:heroIn .9s var(--ease) .3s forwards;
}

/* the logo lockup carries the hero, as it does on the live site */
.hero__title{margin:0}
.hero__lockup{
  display:block;width:min(560px,76vw);height:auto;
  /* The lockup PNG carries ~19% empty alpha below the wordmark, so the
     margin is pulled back by that much first: the tagline then sits
     optically tight under the logo, as one unit. */
  margin:0 auto calc(min(560px,76vw) * -0.095 + clamp(14px,2vh,22px));
}
.js-anim .hero__lockup{
  opacity:0;transform:translateY(20px) scale(.98);
  animation:heroIn 1.05s var(--ease) .42s forwards;
}

.hero__tag{
  font-family:var(--mono);text-transform:uppercase;
  font-size:clamp(10px,1.02vw,14px);letter-spacing:.34em;
  color:rgba(255,255,255,.8);
  /* then a clear break before the CTAs */
  margin:0 0 clamp(40px,7vh,76px);
}
.js-anim .hero__tag{
  opacity:0;transform:translateY(14px);
  animation:heroIn .9s var(--ease) .66s forwards;
}

.hero__cta{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(16px,2.4vw,34px);flex-wrap:wrap;
}
.js-anim .hero__cta{
  opacity:0;transform:translateY(16px);
  animation:heroIn .9s var(--ease) .9s forwards;
}
.hero__reel{
  font-family:var(--display);font-weight:600;font-size:clamp(13px,1.15vw,16px);
  letter-spacing:.1em;text-transform:uppercase;
  transition:color .35s,letter-spacing .5s var(--ease);
}
@media (hover:hover){.hero__reel:hover{color:var(--sand);letter-spacing:.18em}}

/* --- bottom instrument rail --- */
.hero__rail{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding:14px var(--pad);
  border-top:1px solid var(--line-soft);
  font-family:var(--mono);font-size:clamp(9px,.72vw,11px);
  letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.62);
}
.js-anim .hero__rail{
  opacity:0;animation:heroIn 1s linear 1.4s forwards;
}
.hero__rail-item{display:flex;align-items:center;gap:9px;white-space:nowrap}
.hero__rail .rec{
  width:7px;height:7px;border-radius:50%;background:var(--paper);flex:none;
  animation:recBlink 2.4s var(--ease-io) infinite;
}
@keyframes recBlink{0%,100%{opacity:1}50%{opacity:.22}}
.hero__rail .arw{font-style:normal;animation:railNudge 2.2s var(--ease-io) infinite}
@keyframes railNudge{0%,100%{transform:translateY(-2px);opacity:.5}50%{transform:translateY(2px);opacity:1}}


/* ===================================================================
   HEADER NAV CLUSTER
   =================================================================== */
.header__right{display:flex;align-items:center;gap:12px}
.segnav{
  display:flex;align-items:center;gap:2px;
  padding:4px;border-radius:60px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.segnav a{
  padding:8px 18px;border-radius:60px;
  font-family:var(--display);font-weight:500;font-size:13.5px;
  letter-spacing:.005em;color:rgba(255,255,255,.78);
  transition:background .35s linear,color .35s linear;
}
@media (hover:hover){.segnav a:hover{background:var(--paper);color:var(--ink)}}
/* current page: a quiet low-opacity fill so you can tell where you are,
   without reading as a full hover */
.segnav a[aria-current="page"]{background:rgba(255,255,255,.12);color:#fff}
@media (hover:hover){.segnav a[aria-current="page"]:hover{background:var(--paper);color:var(--ink)}}
/* the segmented nav replaces MENU on desktop */
.header__menu{display:none}

.hero__scroll{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:9px;z-index:2;
}
.hero__scroll i{display:block;width:1px;height:46px;background:linear-gradient(var(--paper),transparent);
  animation:scrollPulse 2.4s var(--ease-io) infinite}
@keyframes scrollPulse{0%,100%{transform:scaleY(.35);opacity:.4;transform-origin:top}50%{transform:scaleY(1);opacity:1;transform-origin:top}}


/* ===================================================================
   MARQUEES
   =================================================================== */
.marquee{overflow:hidden;width:100%}
.marquee__track{display:flex;width:max-content;will-change:transform}
.marquee__set{display:flex;align-items:center;flex-shrink:0}

.clients{padding:0 0 clamp(30px,4vw,58px);border-block:1px solid var(--line)}
.clients .marquee__set{gap:0}
/* The source PNGs carry a lot of dead canvas, so the marks are scaled
   well past what the percentages suggest to fill their cells. */
.clogo{
  display:grid;place-items:center;
  width:clamp(140px,13.5vw,210px);height:clamp(78px,7.2vw,112px);
  border-right:1px solid var(--line);flex-shrink:0;
}
.clogo img{max-width:78%;max-height:60%;width:auto;object-fit:contain;opacity:.86}
.clients{padding-top:0}
.clients .marquee{border-top:1px solid var(--line)}

/* client strip when it sits mid-page under the portfolio */
.clients--work{padding-top:clamp(30px,4vw,58px)}
.clients--work .clients__label{
  margin-bottom:clamp(20px,2.4vw,32px);color:var(--mute-2);
}

.marquee--quotes{margin-top:clamp(40px,5vw,72px)}
.marquee--quotes .marquee__set{gap:20px;padding-right:20px;align-items:stretch}
/* the second, opposite-running lane sits just below the first */
.marquee--quotes-2{margin-top:20px}
.marquee--stills{margin-top:clamp(48px,6vw,90px)}
.marquee--stills .marquee__set{gap:14px;padding-right:14px}
.still{flex-shrink:0;width:clamp(200px,23vw,360px);aspect-ratio:16/10;overflow:hidden;border-radius:8px}
.still img{width:100%;height:100%;object-fit:cover;
  filter:saturate(1.12) contrast(1.06) brightness(1.04);
  transition:transform .8s var(--ease),filter .5s linear}
@media (hover:hover){.still:hover img{transform:scale(1.05);filter:saturate(1.18) contrast(1.08) brightness(1.08)}}


/* ===================================================================
   SECTION HEAD (deck footer rule pattern)
   =================================================================== */
.sec-head{
  display:flex;align-items:center;gap:16px;
  padding-bottom:clamp(28px,4vw,54px);
}
.sec-head__num{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--sand)}
.sec-head__rule{flex:0 0 clamp(40px,7vw,120px);height:1px;background:var(--line)}
.sec-head__end{margin-left:auto}


/* ===================================================================
   SERVICES
   =================================================================== */
.services{padding-top:clamp(30px,4vw,58px);padding-bottom:clamp(34px,4.6vw,68px)}
.services .display{margin-bottom:clamp(30px,4vw,56px)}
.services .sec-title,.work .sec-title,.process .sec-title,.about .sec-title,.quotes .sec-title,.faq .sec-title,.split .sec-title,.narr .sec-title,.facts .sec-title{margin-bottom:clamp(30px,4vw,60px)}
/* a section title sitting directly under a sec-head rail wants a little
   less air above it */
.sec-head + .sec-title{margin-top:clamp(4px,1vw,14px)}
.services__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,26px)}

/* Two photo plates, the wordmark baked into the artwork. Radius lives
   on the frame with overflow hidden, so the zoom can never square off
   the corners on hover. */
.svc{
  position:relative;display:block;isolation:isolate;
  overflow:hidden;border-radius:14px;background:var(--ink-lift);
}
.svc__img{display:block;aspect-ratio:2/1;overflow:hidden}
.svc__img img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(1.1) contrast(1.06) brightness(1.02);
  transition:transform .9s var(--ease),filter .6s linear;
}
.svc:focus-visible .svc__img img{filter:saturate(1.16) contrast(1.09) brightness(1.05)}
@media (hover:hover){.svc:hover .svc__img img{filter:saturate(1.16) contrast(1.09) brightness(1.05)}}
.svc:focus-visible .svc__img img{transform:scale(1.045)}
@media (hover:hover){.svc:hover .svc__img img{transform:scale(1.045)}}

/* the darkening veil, clipped by the same rounded frame */
.svc::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:rgba(0,0,0,.34);opacity:0;
  transition:opacity .45s linear;
}
.svc:focus-visible::after{opacity:1}
@media (hover:hover){.svc:hover::after{opacity:1}}
.svc:focus{outline:none}
.svc:focus-visible{outline:2px solid var(--paper);outline-offset:3px}


/* ===================================================================
   WORK GRID
   =================================================================== */
.work{padding-top:clamp(34px,4.6vw,68px);padding-bottom:var(--gap)}
.work .display{margin-bottom:clamp(36px,5vw,72px)}
.work__grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,1.9vw,30px) clamp(14px,1.6vw,26px);
}

/* --- library tile: the whole card is the link to the case study --- */
.tile{
  position:relative;display:block;isolation:isolate;
  aspect-ratio:16/9;overflow:hidden;border-radius:14px;
  background:var(--ink-lift);
}
.tile img{
  width:100%;height:100%;object-fit:cover;
  /* the source jpgs are lightly compressed and read flat; a touch of
     contrast, saturation and warmth brings them back to cinematic */
  filter:saturate(1.1) contrast(1.06) brightness(1.02);
  transition:transform .9s var(--ease),filter .6s linear;
}
.tile:focus-visible img{transform:scale(1.05);filter:saturate(1.16) contrast(1.09) brightness(1.05)}
@media (hover:hover){.tile:hover img{transform:scale(1.05);filter:saturate(1.16) contrast(1.09) brightness(1.05)}}

/* Two stacked layers inside the same rounded, clipped frame: a standing
   gradient that keeps the caption legible on any frame, and a flat veil
   that only appears on hover. Both are inset:0, so the zoom underneath
   never bleeds past the radius. */
.tile__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.34) 30%,rgba(0,0,0,0) 62%);
}
.tile__scrim::after{
  content:'';position:absolute;inset:0;
  background:rgba(0,0,0,.34);opacity:0;
  transition:opacity .45s linear;
}
.tile:focus-visible .tile__scrim::after{opacity:1}
@media (hover:hover){.tile:hover .tile__scrim::after{opacity:1}}

.tile__cap{
  position:absolute;z-index:2;left:clamp(16px,1.7vw,26px);
  right:clamp(16px,1.7vw,26px);bottom:clamp(15px,1.6vw,24px);
  display:flex;flex-direction:column;gap:6px;align-items:flex-start;
  transition:transform .5s var(--ease);
}
@media (hover:hover){.tile:hover .tile__cap{transform:translateY(-3px)}}
.tile__title{
  font-family:var(--display);font-weight:600;
  font-size:clamp(17px,1.5vw,25px);letter-spacing:-.02em;line-height:1.1;
  margin:0;color:var(--paper);
}
/* wins over the later .mono-label colour, which is too dim over a frame */
.tile .tile__cat{color:rgba(255,255,255,.82)}

.tile:focus{outline:none}
.tile:focus-visible{outline:2px solid var(--paper);outline-offset:3px}


/* ===================================================================
   VIDEO LIGHTBOX
   =================================================================== */
.lb{
  position:fixed;inset:0;z-index:300;
  display:grid;place-items:center;
  /* top padding clears the close button so the film never sits under it */
  padding:clamp(76px,7vw,84px) clamp(16px,5vw,64px) clamp(24px,5vw,64px);
  background:rgba(0,0,0,.93);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  opacity:0;visibility:hidden;
  transition:opacity .42s linear,visibility .42s;
}
.lb.is-open{opacity:1;visibility:visible}
/* the second cap keeps a 16:9 frame inside the viewport height on laptops,
   so the player never runs off the bottom of a short screen */
.lb__stage{width:min(1360px,100%);max-width:min(1360px,calc((100dvh - 190px) * 16 / 9))}
.lb__title{margin:0 0 12px;color:var(--paper)}
.lb__frame{
  position:relative;aspect-ratio:16/9;width:100%;
  background:#000;border-radius:10px;overflow:hidden;
  border:1px solid var(--line);
  transform:scale(.965);transition:transform .5s var(--ease);
}
.lb.is-open .lb__frame{transform:none}
.lb__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lb__close{
  position:absolute;z-index:4;
  top:clamp(14px,2.4vw,30px);right:clamp(14px,2.4vw,30px);
  width:clamp(42px,4vw,52px);height:clamp(42px,4vw,52px);
  border-radius:50%;background:var(--paper);
  display:grid;place-items:center;transition:transform .5s var(--ease);
}
.lb__close span{position:absolute;width:clamp(14px,1.3vw,17px);height:1.5px;background:var(--ink)}
.lb__close span:first-child{transform:rotate(45deg)}
.lb__close span:last-child{transform:rotate(-45deg)}
@media (hover:hover){.lb__close:hover{transform:rotate(90deg)}}

/* short landscape screens: give the film every pixel of height it can get */
@media (max-height:520px){
  .lb{padding:56px clamp(14px,4vw,40px) 16px}
  .lb__title{display:none}
}


/* ===================================================================
   PROCESS
   =================================================================== */
.process{padding-block:var(--gap);border-top:1px solid var(--line)}
.process .display{margin-bottom:clamp(40px,5.4vw,84px)}
.process .display em{margin-left:.22em}

/* --- VERTICAL JOURNEY --------------------------------------------------
   The three phases run top to bottom as a timeline. A rail on the left
   carries a node per step and a connector that draws itself as the step
   scrolls into view, so the section reads as one continuous journey. The
   media sits in its own full-width column, alternating side to side, so
   the stills get real room and are never squeezed into a tight crop. */
.process__grid{display:flex;flex-direction:column}
.phase{
  position:relative;
  display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(20px,3vw,48px);
  padding-bottom:clamp(46px,6vw,104px);
}
.phase:last-child{padding-bottom:0}

/* the rail: a node at the top, then a line that runs down to the next step */
.phase__step{
  grid-column:1;grid-row:1;
  display:flex;flex-direction:column;align-items:center;
  align-self:stretch;padding-top:6px;
}
.phase__node{
  width:14px;height:14px;border-radius:50%;flex-shrink:0;
  background:var(--accent);border:1.5px solid var(--accent);
  box-shadow:0 0 0 5px rgba(228,211,147,.14);
  transition:background .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease);
}
.phase__line{
  width:1px;flex:1;margin-top:10px;
  background:var(--line);transform:scaleY(1);transform-origin:top;
  transition:transform 1s var(--ease) .1s;
}
.phase__line--last{display:none}
.js-anim .phase[data-fade] .phase__node{
  background:var(--ink);border-color:var(--line);box-shadow:0 0 0 5px rgba(228,211,147,0);
}
.js-anim .phase[data-fade] .phase__line{transform:scaleY(0)}
.js-anim .phase.in .phase__node{
  background:var(--accent);border-color:var(--accent);
  box-shadow:0 0 0 5px rgba(228,211,147,.14);
}
.js-anim .phase.in .phase__line{transform:scaleY(1)}

/* content: media + copy side by side, alternating which side the film is on */
.phase__content{
  grid-column:2;grid-row:1;
  display:grid;grid-template-columns:1.18fr 1fr;
  gap:clamp(24px,3.4vw,64px);align-items:center;
}
.phase:nth-child(even) .phase__content{grid-template-columns:1fr 1.18fr}
.phase:nth-child(even) .phase__media{order:2}

.phase__img{
  position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:12px;
  background:var(--ink-lift);
}
.phase__img img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--ease),clip-path 1.1s var(--ease)}
/* the film wipes up from the bottom as its step arrives */
.js-anim .phase[data-fade] .phase__img img{clip-path:inset(100% 0 0 0);transform:scale(1.08)}
.js-anim .phase.in .phase__img img{clip-path:inset(0 0 0 0);transform:scale(1)}
.phase__img::after{
  content:'';position:absolute;inset:0;
  background:rgba(0,0,0,.30);opacity:0;transition:opacity .45s linear;
}
@media (hover:hover){.phase:hover .phase__img img{transform:scale(1.04)}}
@media (hover:hover){.phase:hover .phase__img::after{opacity:1}}

.phase__num{color:var(--accent);display:block;margin-bottom:12px}
.phase__title{
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:clamp(24px,3vw,46px);letter-spacing:-.025em;line-height:.98;margin:0 0 16px;
}
.phase p{margin:0;color:var(--mute);font-size:clamp(14px,1.06vw,16.5px);line-height:1.72;max-width:52ch}


/* ===================================================================
   ABOUT
   =================================================================== */
.about{padding-block:var(--gap)}
.about .display{margin-bottom:clamp(36px,5vw,64px)}
.about .display em{margin-right:.2em}
.about__media{
  width:100%;aspect-ratio:21/9;overflow:hidden;margin-bottom:clamp(36px,5vw,72px);
}
.about__media img{width:100%;height:100%;object-fit:cover}

/* ===================================================================
   STORY  (homepage about)
   One landscape plate across the full column, then the copy stacked
   under it: a held lead beside the body, and the three pillars as a
   plain 3-up. Monochrome, same vocabulary as .split and .narr, so the
   section sits inside the rest of the page instead of shouting.
   =================================================================== */
.story{padding-block:var(--gap)}

.story__band{margin:clamp(26px,3.4vw,50px) 0 0}
.story__band .plate__frame{aspect-ratio:21/9}
.story__band .plate__frame img{
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.05s var(--ease);
}
.story__band.in .plate__frame img{clip-path:inset(0 0 0 0)}
.story__slate{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:10px 18px;
  margin-top:12px;color:var(--mute-2);
}

.story__grid{
  display:grid;grid-template-columns:.86fr 1.14fr;
  gap:clamp(24px,4.4vw,86px);
  margin-top:clamp(30px,3.6vw,56px);
  padding-top:clamp(26px,3vw,44px);border-top:1px solid var(--line);
}
.story__lead{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(26px,3.2vw,52px);line-height:.94;letter-spacing:-.04em;
  margin:0;
}
.story__body p{
  margin:0 0 18px;color:var(--mute);
  font-size:clamp(14px,1.06vw,16.5px);line-height:1.78;max-width:70ch;
}
.story__body p:last-child{margin-bottom:0}

/* the ethos line reads as a pull quote, set off by a rule rather than a box */
.story__ethos{
  margin-top:clamp(20px,2.2vw,30px)!important;
  padding-left:clamp(16px,1.6vw,24px);
  border-left:1px solid var(--line);
  font-family:var(--head);font-weight:500;
  font-size:clamp(16px,1.4vw,21px)!important;
  line-height:1.4!important;letter-spacing:-.015em;
  color:var(--paper)!important;
}
.story__ethos .mono-label{display:block;margin-top:12px;color:var(--mute-2)}

/* pillars: three plain columns under a shared rule */
.story__pillars{
  list-style:none;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.4vw,42px);
  margin:clamp(30px,3.6vw,56px) 0 0;padding:0;
}
.spill{
  position:relative;padding-top:clamp(16px,1.8vw,24px);
  border-top:1px solid var(--line);
}
.spill::before{
  content:'';position:absolute;top:-1px;left:0;right:0;height:1px;
  background:var(--paper);transform:scaleX(0);transform-origin:left;
  transition:transform .8s var(--ease) .15s;
}
.spill.in::before{transform:scaleX(1)}
.spill__n{display:block;color:var(--mute-2);margin-bottom:clamp(12px,1.4vw,20px)}
.spill__t{
  margin:0;font-family:var(--head);font-weight:600;
  font-size:clamp(16px,1.3vw,20px);letter-spacing:-.01em;line-height:1.25;
}
.spill__d{
  margin:10px 0 0;color:var(--mute-2);
  font-size:clamp(13px,.98vw,14.5px);line-height:1.66;max-width:44ch;
}


/* ===================================================================
   QUOTES
   =================================================================== */
.quotes{padding-block:clamp(48px,6vw,88px);border-top:1px solid var(--line)}
.marquee--quotes{
  margin-top:clamp(32px,4vw,56px);
  /* inset from both edges: set an explicit width so margins don't overflow */
  width:calc(100% - 2 * var(--pad));
  margin-left:var(--pad);
  mask-image:linear-gradient(to right,transparent 0%,#000 10%,#000 90%,transparent 100%);
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 10%,#000 90%,transparent 100%);
}
.marquee--quotes .marquee__set{gap:18px;padding-right:18px;align-items:stretch}
.marquee--quotes-2{margin-top:16px}
.quote{
  flex-shrink:0;width:clamp(280px,28vw,380px);
  min-height:clamp(230px,18vw,290px);
  margin:0;padding:clamp(22px,2vw,30px);
  border:1px solid var(--line);border-radius:10px;
  background:var(--ink-lift);
  display:flex;flex-direction:column;gap:clamp(12px,1.2vw,18px);
  transition:border-color .4s linear,transform .5s var(--ease);
}
@media (hover:hover){.quote:hover{border-color:rgba(255,255,255,.22);transform:translateY(-3px)}}
.quote__top{
  display:flex;align-items:center;justify-content:space-between;
  padding-bottom:clamp(2px,.4vw,5px);
}
.quote__mark{
  font-family:var(--display);font-weight:700;
  font-size:clamp(36px,3.4vw,54px);line-height:.5;
  color:var(--accent);opacity:.22;
}
.quote__stars{
  font-size:clamp(10px,.8vw,12px);letter-spacing:.2em;
  color:rgba(255,255,255,.38);
}
.quote blockquote{
  margin:0;flex:1;
  font-family:var(--body);font-weight:400;
  font-size:clamp(13.5px,1.05vw,15.5px);line-height:1.65;
  letter-spacing:.002em;color:rgba(255,255,255,.82);
}
.quote figcaption{display:flex;align-items:center;gap:12px;
  padding-top:clamp(12px,1.2vw,16px);border-top:1px solid var(--line)}
.quote figcaption img{width:40px;height:40px;border-radius:50%;object-fit:cover;
  border:1px solid rgba(255,255,255,.14)}
.quote figcaption span{display:flex;flex-direction:column;gap:3px}
.quote figcaption strong{
  font-family:var(--mono);font-weight:700;font-size:10.5px;letter-spacing:.13em;color:#fff;
}
.quote figcaption em{
  font-style:normal;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.12em;color:rgba(255,255,255,.42);
}


/* ===================================================================
   STATS
   =================================================================== */
.stats{padding-block:var(--gap);border-top:1px solid var(--line)}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2vw,34px)}
.stat{
  display:flex;flex-wrap:wrap;align-items:baseline;
  padding-top:22px;border-top:1px solid var(--line);
}
.stat__num,.stat__plus{
  font-family:var(--display);font-weight:600;
  font-size:clamp(46px,6.4vw,104px);line-height:.9;letter-spacing:-.045em;
}
.stat__plus{color:var(--sand)}
.stat p{flex:1 0 100%;margin:14px 0 0}


/* ===================================================================
   FAQ
   =================================================================== */
.faq{padding-block:var(--gap);border-top:1px solid var(--line)}
.faq .display{margin-bottom:clamp(34px,4.4vw,64px)}

/* Compact, centred FAQ: the heading and list are constrained to a
   readable column rather than running the full page width. */
.faq--center .sec-head{max-width:820px;margin-inline:auto}
.faq--center .sec-title{text-align:center;max-width:820px;margin-inline:auto}
.faq--center .faq__list{max-width:820px;margin-inline:auto}
.faq--center .faq__q{font-size:clamp(16px,1.5vw,23px)}
.faq--center .faq__a p{padding-left:clamp(30px,4vw,58px)}

.faq__item{border-top:1px solid var(--line)}
.faq__item:last-child{border-bottom:1px solid var(--line)}
.faq__item summary{
  display:flex;align-items:center;gap:clamp(14px,2.4vw,44px);
  padding:clamp(20px,2.3vw,32px) 0;cursor:pointer;list-style:none;
  transition:color .35s linear;
}
.faq__item summary::-webkit-details-marker{display:none}
@media (hover:hover){.faq__item summary:hover{color:var(--sand)}}
.faq__n{flex-shrink:0;color:var(--sand)}
.faq__q{
  font-family:var(--display);font-weight:500;
  font-size:clamp(17px,1.9vw,31px);letter-spacing:-.018em;line-height:1.18;
}
.faq__ico{
  position:relative;flex-shrink:0;margin-left:auto;
  width:16px;height:16px;
}
.faq__ico::before,.faq__ico::after{
  content:'';position:absolute;top:50%;left:0;
  width:100%;height:1.5px;background:currentColor;
  transition:transform .45s var(--ease);
}
.faq__ico::after{transform:rotate(90deg)}
.faq__item[open] .faq__ico::after{transform:rotate(0)}
.faq__item[open] summary{color:var(--sand)}
.faq__a{overflow:hidden}
.faq__a p{
  margin:0;padding:0 0 clamp(24px,2.6vw,38px) clamp(30px,4.6vw,84px);
  max-width:78ch;color:var(--mute);
  font-size:clamp(14px,1.04vw,16px);line-height:1.72;
}


/* ===================================================================
   CTA
   =================================================================== */
.cta{position:relative;padding-block:clamp(90px,13vw,200px);overflow:hidden;text-align:center}
.cta__bg{position:absolute;inset:0;z-index:0}
.cta__bg img{width:100%;height:100%;object-fit:cover}
.cta__bg::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at center,rgba(21,22,24,.28),rgba(21,22,24,.94) 72%);
}
.cta__inner{position:relative;z-index:2}
.cta .display{margin-bottom:clamp(30px,3.6vw,52px)}


/* ===================================================================
   FOOTER
   =================================================================== */
.footer{position:relative;z-index:2;padding-top:clamp(50px,6vw,86px);border-top:1px solid var(--line)}
/* four quarters: the mark and positioning line hold the first, the rest
   carry navigation and details. No oversized lockup band underneath. */
.footer__top{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;
  gap:clamp(30px,3.2vw,54px);
  padding-bottom:clamp(40px,5vw,72px);
}
.footer__val{
  font-family:var(--mono);font-size:12px;letter-spacing:.09em;
  line-height:2;margin:9px 0 0;text-transform:uppercase;
}
.footer__val a{transition:color .3s linear}
@media (hover:hover){.footer__val a:hover{color:var(--sand)}}
.footer__social{display:flex;flex-direction:column;align-items:flex-start}
.footer__social i,.footer__top-link i{font-style:normal;font-size:.85em}

/* first quarter */
.footer__col--brand{display:flex;flex-direction:column;align-items:flex-start}
.footer__marklink{display:inline-block}
.footer__mark{width:52px;height:auto;opacity:.9;transition:opacity .3s linear,transform .34s var(--ease)}
@media (hover:hover){.footer__marklink:hover .footer__mark{opacity:1;transform:scale(1.06)}}
.footer__tag{
  margin:clamp(18px,1.8vw,26px) 0 0;
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:clamp(15px,1.28vw,19px);line-height:1.18;letter-spacing:-.02em;
}
.footer__blurb{
  margin:12px 0 0;max-width:34ch;
  color:var(--mute-2);font-size:13.5px;line-height:1.65;
}

/* navigation column */
.footer__nav{display:flex;flex-direction:column;align-items:flex-start;margin-top:9px}
.footer__nav a{
  font-family:var(--mono);font-size:12px;letter-spacing:.09em;
  line-height:2;text-transform:uppercase;color:var(--paper);
  transition:color .3s linear,transform .3s var(--ease);
}
@media (hover:hover){.footer__nav a:hover{color:var(--mute);transform:translateX(3px)}}
.footer__nav a[aria-current]{color:var(--mute-2)}

.footer__bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 0 26px;border-top:1px solid var(--line);
}
.footer__top-link{transition:color .3s linear}
@media (hover:hover){.footer__top-link:hover{color:var(--sand)}}


/* ===================================================================
   SCROLL REVEALS
   =================================================================== */
/* Nothing is hidden unless JS has confirmed it can animate it back.
   Scoping to .js-anim means a stalled script or a dead observer can
   never leave copy permanently invisible. */
.js-anim [data-fade]{
  opacity:0;transform:translateY(26px);
  transition:opacity .85s var(--ease),transform .85s var(--ease);
}
.js-anim [data-fade].in{opacity:1;transform:none}

.reveal-chars .ch{display:inline-block}
/* one nowrap box per word, so a split heading breaks at spaces only */
.reveal-chars .wd{display:inline-block;white-space:nowrap}
.js-anim .reveal-chars .ch{
  opacity:0;transform:translateY(.62em) rotate(2deg);
  transition:opacity .62s var(--ease),transform .72s var(--ease);
}
.js-anim .reveal-chars.in .ch{opacity:1;transform:none}

/* the hero's own elements own their load-in above; nothing else here
   may zero them out, or an element without an animation stays invisible */


/* ===================================================================
   CASE STUDY PAGE
   Client colour appears only here, as a single radial bloom behind the
   title. The rest of the page stays on the mono system.
   =================================================================== */
.is-case{--client:#E4D393}

.chero{
  position:relative;overflow:hidden;
  padding:clamp(140px,17vh,210px) 0 clamp(44px,6vh,76px);
  text-align:center;
}
.chero__glow{
  position:absolute;top:-34%;left:50%;transform:translateX(-50%);
  width:min(1500px,142vw);aspect-ratio:1;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,
    color-mix(in srgb,var(--client) 52%,transparent) 0%,
    color-mix(in srgb,var(--client) 26%,transparent) 24%,
    color-mix(in srgb,var(--client) 9%,transparent) 42%,
    rgba(0,0,0,0) 64%);
}
/* concentric rings, the detail that sells the HSTL-style bloom */
.chero__glow::after{
  content:'';position:absolute;inset:18%;border-radius:50%;
  background:repeating-radial-gradient(circle at 50% 50%,
    rgba(255,255,255,.05) 0 1px,rgba(255,255,255,0) 1px 46px);
  mask-image:radial-gradient(circle at 50% 50%,#000 22%,transparent 68%);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 22%,transparent 68%);
}
.chero__inner{position:relative;z-index:2;max-width:960px}

.chero__back{
  display:inline-block;margin-bottom:clamp(26px,4vh,46px);
  transition:color .3s linear,transform .4s var(--ease);
}
@media (hover:hover){.chero__back:hover{color:var(--paper);transform:translateX(-4px)}}

.chero__client{
  font-family:var(--mono);font-size:clamp(11px,1vw,14px);
  letter-spacing:.42em;text-transform:uppercase;
  color:var(--client);margin:0 0 clamp(14px,2vh,22px);
}
.chero__title{
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:clamp(42px,7.8vw,124px);line-height:.86;letter-spacing:-.045em;
  margin:0 0 clamp(24px,3.6vh,40px);
}
.chero__lead{
  max-width:74ch;margin:0 auto clamp(28px,4vh,44px);
  font-size:clamp(14px,1.06vw,17px);line-height:1.78;color:var(--mute);
}

.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.chip{
  font-family:var(--mono);font-size:clamp(10.5px,.82vw,12.5px);
  letter-spacing:.1em;padding:11px 22px;border-radius:60px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:background .35s linear,border-color .35s linear;
}
@media (hover:hover){.chip:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.34)}}

.chero__cta{margin-top:clamp(28px,4vh,44px);display:flex;justify-content:center}

/* video plate: poster paints first, the Vimeo film fades in over it */
.plate__frame--video{container-type:size}
.plate__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.plate__film{position:absolute;inset:0;opacity:0;transition:opacity 1.4s linear;--film-ar:1.7778}
.plate__film.is-live{opacity:1}
.plate__film iframe{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:max(100cqw, calc(100cqh * var(--film-ar)));
  height:calc(max(100cqw, calc(100cqh * var(--film-ar))) * 9 / 16);
  border:0;pointer-events:none;
}

/* ---------- VEXIO STUDIOS: partner plate + stage gallery ---------- */
.vexio__plate{
  position:relative;display:block;width:100%;
  aspect-ratio:21/9;overflow:hidden;
  margin:clamp(30px,4vw,56px) 0 clamp(24px,3vw,44px);
}
.vexio__plate img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(1.08) contrast(1.05);
  transition:transform 1.1s var(--ease);
}
@media (hover:hover){.vexio__plate:hover img{transform:scale(1.04)}}
.vexio__plate::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,0) 55%);
}
.vexio__badge{
  position:absolute;z-index:2;left:clamp(18px,2.4vw,40px);bottom:clamp(18px,2.4vw,36px);
  display:flex;flex-direction:column;gap:8px;
}
.vexio__badge-k{color:var(--accent)}
.vexio__badge-name{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(24px,3.4vw,52px);letter-spacing:-.03em;line-height:1;
}
.vexio__badge-name i{font-style:normal;font-size:.5em;vertical-align:super;color:var(--accent);margin-left:6px}

.stages{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,1.6vw,26px);
}
.stage{display:block;isolation:isolate}
.stage__img{
  position:relative;display:block;aspect-ratio:4/5;overflow:hidden;
  border-radius:12px;border:1px solid var(--line);background:var(--ink-lift);
}
.stage__img img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(1.08) contrast(1.05);
  transition:transform 1s var(--ease),filter .5s linear;
}
@media (hover:hover){.stage:hover .stage__img img{transform:scale(1.06);filter:saturate(1.14) contrast(1.08)}}
.stage__img::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0) 46%);
}
.stage__meta{display:flex;flex-direction:column;gap:5px;padding:14px 2px 0}
.stage__id{color:var(--accent)}
.stage__name{
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:clamp(15px,1.35vw,21px);letter-spacing:-.02em;line-height:1.05;margin:0;
  transition:color .35s linear;
}
@media (hover:hover){.stage:hover .stage__name{color:var(--accent)}}
.stage__spec{color:var(--mute-2);font-size:10.5px}
.vexio .split__cta{margin-top:clamp(30px,3.6vw,52px)}

@media (max-width:860px){
  .stages{grid-template-columns:repeat(2,1fr)}
  .vexio__plate{aspect-ratio:16/9}
}
@media (max-width:480px){
  .stages{grid-template-columns:1fr 1fr}
  .stage__img{aspect-ratio:1}
}

/* ---------- FEATURE VIDEO (rentals hero film) ---------- */
.filmfeat{padding-top:clamp(30px,4vw,60px);padding-bottom:var(--gap)}
.filmfeat__head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-bottom:clamp(16px,1.8vw,26px);
}
.filmfeat__kick{color:var(--accent)}
.filmfeat__frame{cursor:pointer;border:1px solid var(--line);transition:border-color .45s linear}
@media (hover:hover){.filmfeat__frame:hover{border-color:rgba(255,255,255,.4)}}
.filmfeat__play{
  position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;
  background:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,.12));
  border:0;cursor:pointer;color:var(--paper);
  transition:opacity .4s linear;
}
.filmfeat__ico{
  width:clamp(64px,6vw,88px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;background:var(--paper);
  transition:transform .5s var(--ease),background .4s linear;
}
.filmfeat__ico svg{width:34%;fill:var(--ink);margin-left:8%}
@media (hover:hover){.filmfeat__frame:hover .filmfeat__ico{transform:scale(1.08);background:var(--accent)}}
.filmfeat__playtxt{letter-spacing:.2em}
.filmfeat__frame.is-playing .filmfeat__play,
.filmfeat__frame.is-playing .plate__film{opacity:0;pointer-events:none}
.filmfeat__frame.is-playing{cursor:default}
.filmfeat__live{
  position:absolute;inset:0;z-index:4;opacity:0;transition:opacity .6s linear;
}
.filmfeat__frame.is-playing .filmfeat__live{opacity:1}
.filmfeat__live iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* stacked CTA buttons in the closing band */
.cta__row{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(12px,1.4vw,20px);
}

.split__cta{margin-top:clamp(20px,2.2vw,30px)}
.split__cta .pill i{font-style:normal;margin-left:6px}


/* ---------- FILM ROW ---------- */
.films{padding-bottom:var(--gap)}
.films__row{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.6vw,26px);margin-top:clamp(16px,1.9vw,30px);
}
.film{display:flex;flex-direction:column}
.film__hit{
  display:block;width:100%;padding:0;text-align:left;border-radius:14px;
  transition:transform .55s var(--ease);
}
.film__media{
  position:relative;display:block;aspect-ratio:16/9;overflow:hidden;
  border-radius:14px;border:1px solid var(--line);background:var(--ink-lift);
  transition:box-shadow .5s var(--ease),border-color .45s linear;
}
.film__media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--ease);
}
.film__hit:focus-visible .film__media img{
  transform:scale(1.05);
}
@media (hover:hover){.film__hit:hover .film__media img{
  transform:scale(1.05);
}}
.film__hit:focus-visible .film__media{
  border-color:rgba(255,255,255,.5);
  box-shadow:0 24px 60px -18px rgba(0,0,0,.9);
}
@media (hover:hover){.film__hit:hover .film__media{
  border-color:rgba(255,255,255,.5);
  box-shadow:0 24px 60px -18px rgba(0,0,0,.9);
}}
.film__hit:focus{outline:none}
.film__hit:focus-visible .film__media{outline:2px solid var(--paper);outline-offset:3px}
.film__media::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.6) 0%,rgba(0,0,0,0) 38%);
}
/* play control and runtime, previously borrowed from the old tile */
.film__play{
  position:absolute;top:50%;left:50%;z-index:2;
  transform:translate(-50%,-50%) scale(.78);
  width:clamp(52px,4.4vw,68px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;background:var(--paper);
  opacity:0;transition:opacity .38s linear,transform .5s var(--ease);
}
.film__play svg{width:38%;fill:var(--ink);margin-left:9%}
.film__hit:focus-visible .film__play{
  opacity:1;transform:translate(-50%,-50%) scale(1);
}
@media (hover:hover){.film__hit:hover .film__play{
  opacity:1;transform:translate(-50%,-50%) scale(1);
}}
.film__dur{position:absolute;bottom:12px;right:14px;z-index:2;color:rgba(255,255,255,.84)}
.film__foot{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:14px 2px 0;border-top:1px solid var(--line);margin-top:15px;
}
.film__title{
  font-family:var(--display);font-weight:500;
  font-size:clamp(15px,1.24vw,20px);letter-spacing:-.01em;margin:0;
  transition:color .35s linear;
}
@media (hover:hover){.film:hover .film__title{color:var(--sand)}}
.film--lead .film__media{aspect-ratio:2.35/1}
.film--lead .film__title{font-size:clamp(20px,2vw,34px)}


/* ---------- FACT ROW: year / client / category / review ---------- */
.facts{padding-bottom:var(--gap)}
.facts__grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(18px,2.4vw,40px);
}
.fact{padding-top:18px;border-top:1px solid var(--line)}
.fact__v{
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:clamp(17px,1.7vw,28px);letter-spacing:-.02em;line-height:1.1;
  margin:12px 0 0;
}


/* ---------- FULL-BLEED PLATE ---------- */
.plate{padding-bottom:var(--gap)}
.plate__frame{
  position:relative;overflow:hidden;border-radius:14px;
  aspect-ratio:16/9;background:var(--ink-lift);
}
.plate__frame img{width:100%;height:100%;object-fit:cover}
.plate__frame--inset img{object-position:center 30%}


/* ---------- NARRATIVE: concept / production / impact ---------- */
.narr{padding-bottom:var(--gap)}
.narr__grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(26px,3.4vw,64px);margin-top:clamp(28px,3.6vw,50px);
}
.narr__h{
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:clamp(20px,2vw,32px);letter-spacing:-.02em;
  margin:0 0 14px;padding-top:20px;border-top:1px solid var(--line);
}
.narr p{margin:0;color:var(--mute);font-size:clamp(13.5px,1.02vw,15.5px);line-height:1.72}


/* ---------- CREDITS ---------- */
.credits{padding-bottom:var(--gap)}
.credits__grid{
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:clamp(20px,2.4vw,40px);margin-top:clamp(30px,4vw,52px);
}
.credit{padding-top:18px;border-top:1px solid var(--line)}
.credit__v{
  font-family:var(--display);font-weight:500;
  font-size:clamp(14px,1.06vw,18px);line-height:1.6;
  margin:10px 0 0;
}


/* ---------- STILLS STRIP ---------- */
.stills-sec{padding-bottom:var(--gap)}


/* ---------- NEXT PROJECT ---------- */
.nextup{padding-bottom:var(--gap)}
.nextup__link{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  margin-top:16px;padding:clamp(26px,3.4vw,48px) 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  transition:padding-left .5s var(--ease);
}
@media (hover:hover){.nextup__link:hover{padding-left:clamp(10px,1.6vw,26px)}}
.nextup__title{transition:color .35s linear}
@media (hover:hover){.nextup__link:hover .nextup__title{color:var(--sand)}}
.nextup__arw{
  font-size:clamp(24px,2.6vw,42px);line-height:1;flex:none;
  transition:transform .5s var(--ease);
}
@media (hover:hover){.nextup__link:hover .nextup__arw{transform:translate(6px,-6px)}}


/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width:1080px){
  .work__grid{grid-template-columns:repeat(2,1fr)}
  .credits__grid{grid-template-columns:repeat(3,1fr);gap:26px}
  .stats__grid{grid-template-columns:repeat(2,1fr);gap:26px 20px}
  /* the film sits above its copy once the row gets tight */
  .phase__content,
  .phase:nth-child(even) .phase__content{grid-template-columns:1fr;gap:clamp(18px,3vw,28px)}
  .phase:nth-child(even) .phase__media{order:0}
}

@media (max-width:960px){
  /* the segmented nav gives way to the full-screen menu */
  .segnav{display:none}
  .header__menu{display:inline-flex}
}

@media (max-width:860px){
  .narr__grid{grid-template-columns:1fr;gap:34px}
  .story__grid{grid-template-columns:1fr;gap:22px}
  .story__pillars{grid-template-columns:1fr;gap:0}
  .spill{padding-bottom:clamp(20px,2.4vw,30px)}
  .spill__d{max-width:60ch}
  .story__band .plate__frame{aspect-ratio:16/9}
  /* the brand quarter runs the full width above the three detail columns */
  .footer__top{grid-template-columns:repeat(3,1fr);gap:34px 24px}
  .footer__col--brand{grid-column:1/-1;padding-bottom:6px;border-bottom:1px solid var(--line-soft)}
  .footer__blurb{max-width:52ch}
  .menu__foot{flex-direction:column;align-items:flex-start;gap:18px}
  .menu__col--social{flex-direction:row;flex-wrap:wrap;gap:16px;align-items:flex-start}
}

@media (max-width:760px){
  .header{padding:14px var(--pad)}
  .header__mark{width:54px;height:54px;margin:-8px}
  .header__mark img{width:38px}
  .header__cta{display:none}
  .pill{height:40px;padding:0 20px;font-size:12px}

  .hero{padding-top:104px;min-height:92svh}
  .hero__eyebrow{height:30px;letter-spacing:.16em;font-size:9px;max-width:100%}
  .hero__eyebrow span{padding:0 10px;gap:6px}
  .hero__eyebrow i{height:10px}
  /* stack the two words: side by side the text-stroke on FILMS spills
     past the viewport before the clamp has a chance to shrink it */
  /* align-items:baseline degrades to flex-start once the axis turns,
     so the stack has to be re-centred explicitly */
  .hero__type{flex-direction:column;align-items:center;gap:0;font-size:clamp(46px,15vw,90px)}
  .hero__tag{letter-spacing:.22em}
  .hero__cta{flex-direction:column;gap:20px}
  .hero__rail{justify-content:space-between}
  .hero__rail-item--hide{display:none}

  /* "CREATIVEPROCESS" and "FERRUMFILMS" run the roman straight into the
     em with no space, so there is no break opportunity and the heading
     overruns the viewport. Give the em its own line once space runs out. */
  .process .display em,.about .display em{display:block}

  .services__grid{grid-template-columns:1fr}
  .work__grid{grid-template-columns:1fr}

  .facts__grid{grid-template-columns:repeat(2,1fr);gap:22px}
  .narr__grid{grid-template-columns:1fr;gap:34px}
  .films__row{grid-template-columns:1fr}
  .film--lead .film__media{aspect-ratio:16/9}
  .credits__grid{grid-template-columns:repeat(2,1fr);gap:22px}
  .nextup__link{gap:16px}
  /* drop the rail and let each step run full width */
  .phase{grid-template-columns:1fr;column-gap:0}
  .phase__step{display:none}
  .phase__content{grid-column:1}
  .phase__img{aspect-ratio:16/9}

  .about__media{aspect-ratio:4/3}
  .story__band .plate__frame{aspect-ratio:4/3}
  .stat{padding-top:16px}
  .footer__bar{flex-direction:column;align-items:flex-start;gap:9px}
  .footer__bar-mid{display:none}
  .faq__item summary{gap:14px}
}

@media (max-width:520px){
  .footer__top{grid-template-columns:1fr;gap:26px}
  .footer__col--brand{border-bottom:0;padding-bottom:0}
  .clogo{width:150px;height:92px}
  /* the readout drops its third field rather than wrapping or overflowing */
  .hero__eyebrow span:last-of-type,
  .hero__eyebrow i:last-of-type{display:none}
}


/* ---------- MOTION SAFETY ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  [data-fade],.reveal-chars .ch,
  .hero__eyebrow,.hero__lockup,.hero__tag,.hero__cta,.hero__rail{opacity:1!important;transform:none!important;animation:none!important}
  .marquee__track{transform:none!important}
  .story__band .plate__frame img{clip-path:none!important}
  .spill::before{transform:scaleX(1)!important}
}


/* ===================================================================
   LIVE-SITE PASS
   True black canvas, heavy grotesk display, monochrome accents.
   =================================================================== */

/* Display type: tight, heavy, wide-set caps like ferrumfilms.com.
   Clash Display tops out at 700, so the heavy weight is 700 not 800. */
.display{
  font-weight:700;
  letter-spacing:-.04em;
  line-height:.84;
}
.display em{color:rgba(255,255,255,.42)}
.display--lg{font-size:clamp(42px,7.2vw,116px)}
.display--xl{font-size:clamp(52px,9.8vw,168px)}
.display--xxl{font-size:clamp(58px,12.4vw,216px)}

.pill{font-family:var(--display);font-weight:700;letter-spacing:.005em;font-size:12.5px}
.sec-head__num,.mono-label{color:rgba(255,255,255,.6)}

/* Texture: finer, closer to the live grid, less grey wash */
body::before{
  background-image:radial-gradient(rgba(255,255,255,.055) .5px,transparent .5px);
  background-size:4px 4px;
  mix-blend-mode:normal;
  opacity:.7;
}

/* Panels sit on true black */
.quote{background:var(--ink-lift);border-color:var(--line)}
@media (hover:hover){.quote:hover{border-color:rgba(255,255,255,.22);transform:translateY(-3px)}}

/* Imagery runs in full colour; the CTA plate is only dimmed so the
   headline over it stays readable. */
.cta__bg img{filter:contrast(1.06) brightness(.44)}

/* Client logos read as solid white, like the live strip */
.clogo img{opacity:.72;filter:brightness(0) invert(1)}
@media (hover:hover){.clogo:hover img{opacity:1}}

/* Accent hovers go pure white */
::selection{background:#FFFFFF;color:#000000}

/* Header pills: no magnet, so keep them rock-steady on hover */
.header .pill{will-change:auto;transform:none}
@media (hover:hover){.header .pill:hover{transform:none}}


/* ===================================================================
   INTERIOR PAGES
   Portfolio, video production, rentals, studio, contact. These reuse
   the case-study hero and section furniture; only the pieces that
   had no equivalent on the landing page are new below.
   =================================================================== */

/* The case hero's bloom is keyed off --client. Interior pages are not
   about a client, so the bloom drops to a neutral grey lift. */
.is-sub{--client:#33363B}
.is-sub .chero__client{color:rgba(255,255,255,.62);letter-spacing:.32em}
.is-sub .chero{padding-bottom:clamp(52px,7vh,88px)}
/* case study titles can be long: cap font size so they don't wrap mid-word */
.is-case .chero__title{font-size:clamp(42px,6.5vw,100px)}

/* The menu carries six links on the interior pages. At the landing
   page's size six lines overrun the viewport, so it steps down. */
/* Four-item overlay nav: bigger links, more breathing room between them */
.menu__nav--4{gap:.45em}
.menu__nav--4 .menu__link{font-size:clamp(38px,7vw,108px)}
.menu.is-open .menu__nav--4 .menu__link:nth-child(1){transition-delay:.14s}
.menu.is-open .menu__nav--4 .menu__link:nth-child(2){transition-delay:.23s}
.menu.is-open .menu__nav--4 .menu__link:nth-child(3){transition-delay:.32s}
.menu.is-open .menu__nav--4 .menu__link:nth-child(4){transition-delay:.41s}

/* WORK WITH US CTA inside the overlay, fades in after the nav links */
.menu__cta-row{
  display:flex;justify-content:center;
  margin-top:clamp(24px,3.2vh,44px);
  opacity:0;transform:translateY(20px);
  transition:opacity .7s var(--ease) .48s,transform .7s var(--ease) .48s;
}
.menu.is-open .menu__cta-row{opacity:1;transform:none}


/* ---------- SPLIT: a held heading beside a body column ---------- */
.split{padding-bottom:var(--gap)}
.split__grid{
  display:grid;grid-template-columns:.86fr 1.14fr;
  gap:clamp(28px,4.4vw,86px);margin-top:clamp(28px,3.6vw,52px);
}
.split__h{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(26px,3.2vw,52px);line-height:.94;letter-spacing:-.04em;
  margin:0;position:sticky;top:112px;
}
.split__body p{
  margin:0 0 18px;color:var(--mute);
  font-size:clamp(14px,1.06vw,16.5px);line-height:1.78;max-width:70ch;
}
.split__body p:last-of-type{margin-bottom:0}
.split__body p em{font-style:normal;color:var(--paper)}


/* ---------- SPEC LIST: numbered rows, the deck's spec-sheet look ---------- */
/* ---------- CAPABILITY CARDS ----------
   Used where a flat numbered list used to sit: the studio amenities and
   the rental categories. A heading paired with a standfirst, then a card
   grid, then a single closing action. */
.amen__head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(18px,3vw,60px);align-items:end;
  margin-top:clamp(18px,2vw,28px);
}
.amen__lead{
  margin:0;color:var(--mute);
  font-size:clamp(14px,1.06vw,16.5px);line-height:1.7;max-width:58ch;
}

.amen{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.2vw,18px);
  margin-top:clamp(28px,3.4vw,50px);
}
.amen--3{grid-template-columns:repeat(3,1fr)}

.amen__card{
  position:relative;overflow:hidden;
  padding:clamp(22px,2.1vw,30px);
  border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0));
  transition:border-color .4s linear,transform .5s var(--ease);
}
/* a hairline sweeps across the top edge on hover, nothing moves under the cursor */
.amen__card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--paper);transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease);
}
@media (hover:hover){.amen__card:hover{border-color:rgba(255,255,255,.34);transform:translateY(-3px)}}
@media (hover:hover){.amen__card:hover::before{transform:scaleX(1)}}

.amen__n{
  position:absolute;top:clamp(20px,1.9vw,26px);right:clamp(20px,1.9vw,26px);
  color:var(--mute-2);
}
.amen__ico{display:block;width:30px;height:30px;color:var(--paper);opacity:.9}
.amen__ico svg{width:100%;height:100%}
.amen__t{
  margin:clamp(18px,1.7vw,24px) 0 0;
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:clamp(15px,1.24vw,19px);letter-spacing:-.015em;line-height:1.1;
}
.amen__d{
  margin:11px 0 0;color:var(--mute-2);
  font-size:clamp(12.5px,.96vw,14.5px);line-height:1.66;
}

.amen__foot{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:clamp(16px,2vw,32px);
  margin-top:clamp(26px,2.8vw,40px);padding-top:clamp(22px,2.4vw,32px);
  border-top:1px solid var(--line);
}
.amen__foot-t{
  margin:0;max-width:56ch;color:var(--mute);
  font-size:clamp(13.5px,1.02vw,15.5px);line-height:1.66;
}
.amen__foot-t a{color:var(--paper);border-bottom:1px solid var(--line);transition:border-color .3s linear}
@media (hover:hover){.amen__foot-t a:hover{border-color:var(--paper)}}
.amen__foot .pill i{font-style:normal;margin-left:6px}

@media (max-width:1080px){
  .amen,.amen--3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .amen__head{grid-template-columns:1fr;gap:16px;align-items:start}
}
@media (max-width:560px){
  .amen,.amen--3{grid-template-columns:1fr}
}


.list{margin:clamp(26px,3.4vw,48px) 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.list__row{
  display:grid;grid-template-columns:auto 1fr;
  gap:clamp(16px,2.4vw,44px);align-items:start;
  padding:clamp(18px,2vw,30px) 0;border-bottom:1px solid var(--line);
  transition:padding-left .5s var(--ease);
}
@media (hover:hover){.list__row:hover{padding-left:clamp(8px,1.2vw,20px)}}
.list__n{font-family:var(--mono);color:rgba(255,255,255,.5);padding-top:.5em}
.list__t{
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:clamp(18px,1.9vw,30px);letter-spacing:-.025em;line-height:1.06;margin:0;
}
.list__d{margin:11px 0 0;color:var(--mute);font-size:clamp(13.5px,1.02vw,15.5px);line-height:1.72;max-width:64ch}


/* ---------- CONTACT ---------- */
.contact{padding-bottom:var(--gap)}
.contact__layout{
  display:grid;grid-template-columns:.9fr 1.1fr;
  gap:clamp(28px,3.6vw,64px);margin-top:clamp(28px,3.6vw,50px);
  align-items:stretch;
}

/* the pic on one side */
.contact__visual{
  position:relative;border-radius:16px;overflow:hidden;
  border:1px solid var(--line);min-height:460px;
}
.contact__visual img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(1.08) contrast(1.05);
}
.contact__visual::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(200deg,rgba(0,0,0,.05) 30%,rgba(0,0,0,.86));
}
.contact__visual-cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(22px,2.4vw,34px);
}
.contact__visual-cap .mono-label{color:rgba(255,255,255,.72);margin-bottom:10px}
.contact__visual-cap p{
  margin:0;font-family:var(--display);font-weight:500;
  font-size:clamp(16px,1.35vw,21px);line-height:1.4;letter-spacing:-.01em;
  color:#fff;max-width:30ch;
}

/* ---------- WIZARD ---------- */
.wizard{
  position:relative;padding:clamp(24px,2.4vw,38px);
  border:1px solid var(--line);border-radius:16px;background:var(--ink-lift);
  display:flex;flex-direction:column;
}
.wizard__head{margin-bottom:clamp(22px,2.4vw,32px)}
.wizard__count{color:var(--mute-2);display:block;margin-bottom:12px}
.wizard__count b{color:var(--paper)}
.wizard__count i{font-style:normal;color:var(--mute-2);margin:0 3px}
.wizard__bar{height:3px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
.wizard__bar span{
  display:block;height:100%;width:33.33%;border-radius:3px;background:var(--paper);
  transition:width .5s var(--ease);
}

/* panels: only the active one shows. The floor keeps the card from
   collapsing and re-growing as the steps change height. */
.wpanel{display:none}
.wpanel.is-active{display:block;min-height:clamp(300px,32vh,360px);animation:wfade .45s var(--ease)}
@keyframes wfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.wizard__q{
  font-family:var(--display);font-weight:700;text-transform:none;
  font-size:clamp(21px,2vw,30px);line-height:1.1;letter-spacing:-.02em;margin:0;
}
.wizard__hint{margin:10px 0 clamp(20px,2vw,26px);color:var(--mute);
  font-size:clamp(13px,1vw,15px);line-height:1.55}
.wizard__hint--tight{margin:0;font-size:12.5px;color:var(--mute-2)}

/* option cards */
.wopts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wopts--2{grid-template-columns:1fr}
.wopt{
  position:relative;display:flex;flex-direction:column;gap:6px;text-align:left;
  padding:clamp(16px,1.5vw,22px);
  border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.015);
  transition:border-color .3s linear,background .3s linear,transform .3s var(--ease);
}
@media (hover:hover){.wopt:hover{border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.04);transform:translateY(-2px)}}
.wopt__ico{width:26px;height:26px;color:rgba(255,255,255,.82);margin-bottom:6px}
.wopt__t{font-family:var(--display);font-weight:600;font-size:clamp(15px,1.2vw,17px);letter-spacing:-.01em}
.wopt__d{font-size:clamp(12px,.92vw,13.5px);color:var(--mute);line-height:1.4}
/* squared off, because step one takes more than one answer */
.wopt__tick{
  position:absolute;top:14px;right:14px;width:20px;height:20px;border-radius:6px;
  border:1px solid var(--line);transition:border-color .3s linear,background .3s linear;
}
.wopt__tick::after{
  content:'';position:absolute;inset:0;margin:auto;width:9px;height:5px;
  border-left:1.6px solid var(--ink);border-bottom:1.6px solid var(--ink);
  transform:translateY(-1px) rotate(-45deg) scale(0);transform-origin:center;
  transition:transform .3s var(--ease);
}
.wopt.is-sel{border-color:var(--paper);background:rgba(255,255,255,.07)}
.wopt.is-sel .wopt__tick{background:var(--paper);border-color:var(--paper)}
.wopt.is-sel .wopt__tick::after{transform:translateY(-1px) rotate(-45deg) scale(1)}

/* single-line rows for the timing step */
.wopt--row{flex-direction:row;align-items:center;padding:clamp(15px,1.4vw,19px) clamp(18px,1.6vw,22px)}
.wopt--row .wopt__t{flex:1}
.wopt--row .wopt__tick{position:static}

/* step 3 fields */
.wfields{display:grid;gap:clamp(14px,1.5vw,18px)}
.wfields__row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.5vw,18px)}
.field{display:block;position:relative}
.field > .mono-label{display:block;margin-bottom:9px}
.field > .mono-label i{font-style:normal;color:var(--mute-2)}
.field input,.field textarea{
  width:100%;padding:13px 15px;
  background:rgba(255,255,255,.02);color:var(--paper);
  border:1px solid var(--line);border-radius:9px;
  font-family:var(--body);font-size:15px;line-height:1.5;
  transition:border-color .3s linear,background .3s linear;
}
.field textarea{min-height:110px;resize:vertical}
.field__brief{min-height:clamp(150px,17vh,190px)}
@media (hover:hover){.field input:hover,.field textarea:hover{border-color:rgba(255,255,255,.3)}}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--paper);background:rgba(255,255,255,.05)}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.32)}

/* nav */
.wizard__nav{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:clamp(24px,2.6vw,34px);
}
.wizard__adv{margin-left:auto}
.wizard__back{
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mute);transition:color .3s linear;
}
@media (hover:hover){.wizard__back:hover{color:var(--paper)}}
.wizard__back[hidden]{display:none}
.wizard__adv[hidden]{display:none}
.wizard__err{margin:16px 0 0;color:#E8A0A0}
.wizard__err[hidden]{display:none}

/* success */
.wizard__done{text-align:center;padding:clamp(20px,3vw,44px) 0}
.wizard__done[hidden]{display:none}
.wizard__done-mark{
  width:56px;height:56px;margin:0 auto clamp(16px,2vw,22px);
  display:grid;place-items:center;border-radius:50%;
  color:var(--ink);background:var(--paper);
}
.wizard__done-mark svg{width:28px;height:28px}
.wizard__done .wizard__q{text-align:center}
.wizard__done .wizard__hint{max-width:40ch;margin-inline:auto}

/* instant contact things in a row underneath both */
.contact__row{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  margin-top:clamp(28px,3vw,44px);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:var(--line);
}
.crow{
  display:flex;flex-direction:column;gap:8px;
  padding:clamp(20px,2vw,28px);background:var(--ink);
  transition:background .3s linear;
}
@media (hover:hover){a.crow:hover{background:var(--ink-lift)}}
.crow .mono-label{color:var(--mute-2)}
.crow__v{
  font-family:var(--display);font-weight:600;
  font-size:clamp(14px,1.14vw,17px);letter-spacing:-.01em;line-height:1.3;
  word-break:break-word;
}
@media (hover:hover){a.crow:hover .crow__v{color:rgba(255,255,255,.78)}}


/* ---------- INTERIOR RESPONSIVE ---------- */
@media (max-width:960px){
  .split__grid{grid-template-columns:1fr;gap:24px}
  .split__h{position:static}
  .contact__layout{grid-template-columns:1fr;gap:22px}
  .contact__visual{min-height:300px}
  .contact__row{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .list__row{grid-template-columns:1fr;gap:8px}
  .list__n{padding-top:0}
  .wfields__row{grid-template-columns:1fr}
  .wopts{grid-template-columns:1fr}
}
@media (max-width:420px){
  .contact__row{grid-template-columns:1fr}
}


/* ===================================================================
   VIDEO PRODUCTION: editorial method section + pillar grid
   =================================================================== */
.vprod-method{padding-bottom:var(--gap)}

.vprod-method .display{
  text-align:center;
  margin:clamp(28px,3.6vw,56px) 0 0;
}

.vprod-pillars{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
  margin-top:clamp(32px,4vw,60px);
}
.vprod-pillar{
  padding:clamp(24px,2.8vw,44px) clamp(20px,2.2vw,38px);
  border-right:1px solid var(--line);
}
.vprod-pillar:last-child{border-right:none}
.vprod-pillar__num{
  display:block;color:rgba(255,255,255,.38);
  margin-bottom:clamp(14px,1.8vw,24px);
}
.vprod-pillar__t{
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:clamp(18px,2vw,30px);letter-spacing:-.03em;line-height:1.06;
  margin:0 0 clamp(12px,1.4vw,20px);
}
.vprod-pillar__d{
  margin:0;color:var(--mute);
  font-size:clamp(13.5px,1.02vw,15.5px);line-height:1.72;
}

@media (max-width:860px){
  .vprod-pillars{grid-template-columns:repeat(2,1fr)}
  .vprod-pillar:nth-child(2){border-right:none}
  .vprod-pillar{border-bottom:1px solid var(--line)}
  .vprod-pillar:nth-last-child(-n+2){border-bottom:none}
}
@media (max-width:560px){
  .vprod-pillars{grid-template-columns:1fr}
  .vprod-pillar{border-right:none;border-bottom:1px solid var(--line)}
  .vprod-pillar:last-child{border-bottom:none}
}


/* ===================================================================
   BRANDED HEADING FACE  (refinement pass)
   Every headline runs in Clash Display so the type reads as Ferrum's
   own, not a default grotesk. Collected last so it wins cleanly over
   the earlier `--display` (Inter) declarations. Inter still carries
   body copy, the segmented nav and the pill buttons. Clash tops out
   at 700, so any heavier weight is normalised to 700.
   =================================================================== */
.sec-title,.chero__title,.tile__title,.phase__title,.narr__h,.list__t,
.amen__t,.fact__v,.stat__num,.faq__q,.split__h,.vexio__badge-name,
.stage__name,.vprod-pillar__t,.wizard__q,.film__title,.story__lead,.spill__t,
.menu__link,.contact__visual-cap p{
  font-family:var(--head);
}
/* clamp synthetic-bold weights down onto a real Clash cut */
.vexio__badge-name,.split__h,.story__lead{font-weight:700}


/* ===================================================================
   MENU OVERLAY  (refinement pass)
   Room to breathe between the nav lines, a proper full-width CTA and a
   centred, calmer footer. Clash Display now carries the links.
   =================================================================== */
.menu{padding-top:clamp(88px,12vh,120px);padding-bottom:clamp(28px,4vh,48px)}
.menu__nav--4{gap:clamp(16px,3vh,34px)}
.menu__nav--4 .menu__link{
  font-size:clamp(38px,8.4vw,104px);line-height:1;letter-spacing:-.035em;
  font-weight:600;
}
/* a hairline index that fades in beside the hovered line, purely a
   pointer-device flourish */
.menu__link{position:relative}

/* the overlay CTA reads as the primary action: wide, tall, unmissable */
.menu__cta-row .pill--lg{
  min-width:min(360px,80vw);height:62px;font-size:15px;letter-spacing:.06em;
}

/* footer: centred, quieter, no punctuation clutter */
.menu__foot{
  flex-direction:column;align-items:center;text-align:center;
  gap:clamp(16px,2.4vh,26px);
  margin-top:clamp(28px,5vh,56px);padding-top:clamp(22px,3vh,32px);
}
.menu__foot-info{align-items:center;gap:8px}
.menu__val{font-size:12.5px;line-height:1.6}
.menu__col--social{
  flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(16px,3vw,28px);
}


/* ===================================================================
   EMPHASIS SYSTEM  (refinement pass)
   The accented word in every big display headline is drawn as an
   outline, matching the section titles, so the whole site shares one
   signature move instead of a flat grey word.
   =================================================================== */
.display em{
  color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,.5);
  text-stroke:1.5px rgba(255,255,255,.5);
}
/* the closing CTA sits over a photo, so its outline wants a touch more weight */
.cta .display em{-webkit-text-stroke-color:rgba(255,255,255,.7);text-stroke-color:rgba(255,255,255,.7)}


/* ===================================================================
   INTERIOR PAGE HERO  (refinement pass)
   The bloom stays, now sitting on a faint instrument grid with a slow
   ambient drift, so the sub-page heroes feel built rather than blank.
   =================================================================== */
.chero{
  border-bottom:1px solid var(--line-soft);
}
/* faint vertical rules echoing the landing hero's grid */
.chero::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:repeating-linear-gradient(90deg,
    var(--line-soft) 0 1px,transparent 1px 20%);
  opacity:.5;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 62%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 62%,transparent 100%);
}
/* the bloom breathes slowly; disabled under reduced-motion below */
.chero__glow{animation:bloomDrift 16s var(--ease-io) infinite}
@keyframes bloomDrift{
  0%,100%{transform:translateX(-50%) scale(1);opacity:.92}
  50%{transform:translateX(-50%) scale(1.06);opacity:1}
}


/* ===================================================================
   SOCIAL PAGE
   The one place the site runs a colour accent. Red is scoped to
   .is-social through --client, the same hook the case studies use for
   their sand bloom, so nothing leaks onto the rest of the build.
   =================================================================== */
.is-social{--client:#E11D2E}

/* five links needs slightly tighter type than the four-link overlay */
.menu__nav--5 .menu__link{font-size:clamp(32px,5.6vw,88px)}
.menu.is-open .menu__nav--5 .menu__link:nth-child(5){transition-delay:.50s}


/* ---------- HERO ---------- */
/* A photograph carries this header rather than the black-field bloom the
   other sub-pages use, so the page opens on the work itself. */
.shero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:min(92vh,900px);
  display:flex;align-items:center;
  padding:clamp(150px,19vh,220px) 0 clamp(90px,12vh,130px);
  text-align:center;
}
.shero__bg{position:absolute;inset:0;z-index:-3}
/* pushed most of the way to mono on purpose: the red bloom is the only
   colour in the frame, so the photograph must not compete with it */
.shero__bg img{
  width:100%;height:100%;object-fit:cover;object-position:50% 40%;
  filter:grayscale(.82) contrast(1.16) brightness(.74) saturate(.85);
}
/* two passes: a vertical gradient that seats the type, and a vignette that
   pulls the frame edges into the page black so the section has no seam */
.shero__scrim{
  position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(0,0,0,.82) 0%,rgba(0,0,0,.4) 24%,rgba(0,0,0,.46) 58%,rgba(0,0,0,.95) 100%),
    radial-gradient(ellipse 78% 60% at 50% 44%,rgba(0,0,0,0) 26%,rgba(0,0,0,.78) 100%);
}
/* the red, kept as light rather than paint: a halo behind the type, not a
   wash over the photograph */
.shero__glow{
  position:absolute;z-index:-1;pointer-events:none;
  top:-24%;left:50%;transform:translateX(-50%);
  width:min(1150px,112vw);aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%,
    color-mix(in srgb,var(--client) 17%,transparent) 0%,
    color-mix(in srgb,var(--client) 8%,transparent) 26%,
    color-mix(in srgb,var(--client) 2.5%,transparent) 46%,
    rgba(0,0,0,0) 66%);
  mix-blend-mode:screen;
}
.shero__inner{position:relative;z-index:2;max-width:1000px}

/* pure --client is too dark to read as small mono over a photograph, so the
   kicker runs a lifted tint and carries its own black halo */
.shero__kick{
  font-family:var(--mono);font-size:clamp(11px,1vw,14px);
  letter-spacing:.42em;text-transform:uppercase;
  color:color-mix(in srgb,var(--client) 42%,#fff);
  margin:0 0 clamp(16px,2.2vh,24px);
  text-shadow:0 1px 12px rgba(0,0,0,.9),0 0 30px color-mix(in srgb,var(--client) 65%,transparent);
}
.shero__title{
  font-family:var(--head);font-weight:600;text-transform:uppercase;
  font-size:clamp(44px,8vw,132px);line-height:.86;letter-spacing:-.045em;
  margin:0 0 clamp(24px,3.4vh,38px);
  text-shadow:0 8px 60px rgba(0,0,0,.6);
}
/* same outlined-emphasis signature as the rest of the site, in red here */
.shero__title em{
  font-style:normal;color:transparent;
  -webkit-text-stroke:1.6px color-mix(in srgb,var(--client) 88%,#fff);
  text-stroke:1.6px color-mix(in srgb,var(--client) 88%,#fff);
}
.shero__lead{
  max-width:70ch;margin:0 auto clamp(26px,3.6vh,40px);
  font-size:clamp(14px,1.06vw,17px);line-height:1.78;
  color:rgba(255,255,255,.82);
  text-shadow:0 2px 20px rgba(0,0,0,.7);
}
.shero__chips .chip{background:rgba(0,0,0,.34);border-color:rgba(255,255,255,.24)}
@media (hover:hover){.shero__chips .chip:hover{
  background:color-mix(in srgb,var(--client) 22%,rgba(0,0,0,.4));
  border-color:color-mix(in srgb,var(--client) 62%,transparent);
}}
.shero__cta{
  margin-top:clamp(26px,3.6vh,42px);
  display:flex;justify-content:center;flex-wrap:wrap;gap:12px;
}
.shero__foot{
  position:absolute;z-index:2;left:50%;transform:translateX(-50%);
  bottom:clamp(24px,4vh,44px);
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.shero__rule{
  width:1px;height:clamp(28px,5vh,52px);
  background:linear-gradient(to bottom,rgba(255,255,255,.5),transparent);
}
@media (max-width:700px){
  .shero{
    min-height:auto;
    padding:clamp(120px,16vh,150px) 0 clamp(34px,6vh,52px);
  }
  .shero__foot{display:none}
}


/* ---------- TOUCH TAP FEEDBACK ----------
   The hover effects are all gated behind (hover:hover), which is what stops
   the old double-tap on phones. But that left a tap with no feel to it. This
   gives touch a quick press response that fires on the FIRST tap, while the
   link/button still activates on that same tap, so nothing has to be tapped
   twice. Scoped to (hover:none) so the desktop hover is untouched, and kept
   fast (~.13s in, easing back out) so it reads as a press, not an animation. */
@media (hover:none){
  /* linked media: a quick zoom + lift in colour, matching the hover look */
  .reel__hit:active .reel__media img,
  .vfilm__hit:active .vfilm__media img,
  .tile:active img,
  .svc:active .svc__img img,
  .stage:active .stage__img img,
  .phase:active .phase__img img,
  .still:active img,
  .vexio__plate:active img{
    transform:scale(1.05);
    filter:saturate(1.16) contrast(1.09) brightness(1.05);
    transition:transform .16s var(--ease),filter .16s linear;
  }
  /* the frame flashes its accent edge as the finger lands */
  .reel__hit:active .reel__media,
  .vfilm__hit:active .vfilm__media{
    border-color:color-mix(in srgb,var(--client) 60%,transparent);
    transition:border-color .13s linear;
  }
  .tile:active .tile__scrim::after{opacity:1;transition:opacity .13s linear}
  /* card-style tappables press in slightly and firm up their border */
  .amen__card:active,
  .wopt:active,
  .quote:active,
  .sapp:active{
    transform:scale(.988);
    border-color:rgba(255,255,255,.34);
    transition:transform .13s var(--ease),border-color .13s linear;
  }
  /* buttons and pills give a small tactile press */
  .pill:active{transform:scale(.96);transition:transform .12s var(--ease)}
  .header .pill:active{transform:scale(.97)}
}


/* ---------- REEL LIBRARY ---------- */
.reels{padding:var(--gap) 0 clamp(40px,5vw,70px)}
/* the shero already carries generous bottom padding on phones, so the feed
   does not need the full section gap stacked on top of it */
@media (max-width:700px){.reels{padding-top:clamp(26px,5vw,40px)}}
.reels__head{margin-bottom:clamp(30px,4vw,54px)}
.reels .sec-title__kick::before{
  background:var(--client);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--client) 20%,transparent);
}
.reels .sec-title em{-webkit-text-stroke-color:color-mix(in srgb,var(--client) 78%,#fff);}

.reels__grid{
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:clamp(12px,1.4vw,22px);
}
/* six-up strip variant for the reel feed */
.reels__grid--6{grid-template-columns:repeat(6,1fr)}
@media (max-width:1180px){.reels__grid,.reels__grid--6{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.reels__grid,.reels__grid--6{grid-template-columns:repeat(2,1fr);gap:10px}}

.reel{display:flex;flex-direction:column;gap:14px}

.reel__hit{
  display:block;width:100%;padding:0;text-align:left;
  border-radius:14px;
}
.reel__media{
  position:relative;display:block;isolation:isolate;
  aspect-ratio:9/16;overflow:hidden;border-radius:14px;
  background:var(--ink-lift);
  border:1px solid var(--line-soft);
  transition:border-color .45s linear,transform .7s var(--ease);
}
.reel__media img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(1.06) contrast(1.05) brightness(.94);
  transition:transform .9s var(--ease),filter .6s linear;
}
@media (hover:hover){.reel__hit:hover .reel__media{
  border-color:color-mix(in srgb,var(--client) 60%,transparent);
  transform:translateY(-4px);
}}
@media (hover:hover){.reel__hit:hover .reel__media img{transform:scale(1.06);filter:saturate(1.14) contrast(1.08) brightness(1.02)}}

.reel__veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.7) 0%,rgba(0,0,0,.14) 34%,rgba(0,0,0,.28) 100%);
  transition:opacity .4s linear;
}
@media (hover:hover){.reel__hit:hover .reel__veil{opacity:.75}}

.reel__play{
  position:absolute;z-index:2;top:50%;left:50%;
  transform:translate(-50%,-50%) scale(.86);
  width:clamp(44px,4.4vw,62px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.42);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  opacity:0;
  transition:opacity .38s linear,transform .5s var(--ease),background .35s linear;
}
.reel__play svg{width:44%;fill:var(--paper);margin-left:8%}
.reel__hit:focus-visible .reel__play{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media (hover:hover){.reel__hit:hover .reel__play{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@media (hover:hover){.reel__hit:hover .reel__play{background:color-mix(in srgb,var(--client) 72%,transparent);border-color:transparent}}
/* touch has no hover, so the affordance has to stand permanently */
@media (hover:none){
  .reel__play{opacity:1;transform:translate(-50%,-50%) scale(1)}
}

.reel__badge{
  position:absolute;z-index:2;top:12px;right:12px;
  width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(0,0,0,.5);
  border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background .35s linear,border-color .35s linear;
}
.reel__badge svg{width:14px;height:14px;fill:var(--paper)}
@media (hover:hover){.reel__hit:hover .reel__badge{
  background:color-mix(in srgb,var(--client) 82%,transparent);
  border-color:transparent;
}}

.reel__hit:focus{outline:none}
.reel__hit:focus-visible .reel__media{outline:2px solid var(--paper);outline-offset:3px}

.reel__foot{display:flex;flex-direction:column;gap:5px;padding-inline:2px}
.reel__title{
  font-family:var(--head);font-weight:600;
  font-size:clamp(15px,1.15vw,20px);letter-spacing:-.02em;line-height:1.15;
  margin:0;
}
.reel__meta{font-size:clamp(9px,.66vw,10.5px);color:var(--mute-2)}

.reels__more{display:flex;justify-content:center;margin-top:clamp(34px,4.5vw,64px)}


/* ---------- VERTICALS / FEATURED FILMS ----------
   Four longer 16:9 cuts sitting under the reel strip. They reuse the reel
   play control and platform badge, but the card is landscape and opens the
   lightbox in its wide variant. */
.vfilms{padding:0 0 clamp(6px,2vw,26px)}
.vfilms__head{margin-bottom:clamp(26px,3.4vw,46px)}
.vfilms .sec-title__kick::before{
  background:var(--client);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--client) 20%,transparent);
}
.vfilms .sec-title em{-webkit-text-stroke-color:color-mix(in srgb,var(--client) 78%,#fff)}

.vfilms__grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(16px,2vw,30px);
}
@media (max-width:760px){.vfilms__grid{grid-template-columns:1fr;gap:14px}}

.vfilm{display:flex;flex-direction:column;gap:14px}
.vfilm__hit{display:block;width:100%;padding:0;text-align:left;border-radius:16px}
.vfilm__media{
  position:relative;display:block;isolation:isolate;
  aspect-ratio:16/9;overflow:hidden;border-radius:16px;
  background:var(--ink-lift);
  border:1px solid var(--line-soft);
  transition:border-color .45s linear,transform .7s var(--ease);
}
.vfilm__media img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(1.06) contrast(1.05) brightness(.94);
  transition:transform .9s var(--ease),filter .6s linear;
}
@media (hover:hover){.vfilm__hit:hover .vfilm__media{
  border-color:color-mix(in srgb,var(--client) 60%,transparent);
  transform:translateY(-4px);
}}
@media (hover:hover){.vfilm__hit:hover .vfilm__media img{transform:scale(1.05);filter:saturate(1.14) contrast(1.08) brightness(1.02)}}

.vfilm__veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.7) 0%,rgba(0,0,0,.12) 40%,rgba(0,0,0,.24) 100%);
  transition:opacity .4s linear;
}
@media (hover:hover){.vfilm__hit:hover .vfilm__veil{opacity:.75}}

.vfilm__hit:focus{outline:none}
.vfilm__hit:focus-visible .vfilm__media{outline:2px solid var(--paper);outline-offset:3px}
.vfilm__hit:focus-visible .reel__play{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media (hover:hover){.vfilm__hit:hover .reel__play{opacity:1;transform:translate(-50%,-50%) scale(1);background:color-mix(in srgb,var(--client) 72%,transparent);border-color:transparent}}
@media (hover:hover){.vfilm__hit:hover .reel__badge{background:color-mix(in srgb,var(--client) 82%,transparent);border-color:transparent}}

.vfilm__foot{display:flex;flex-direction:column;gap:5px;padding-inline:2px}
.vfilm__title{
  font-family:var(--head);font-weight:600;
  font-size:clamp(16px,1.25vw,21px);letter-spacing:-.02em;line-height:1.15;
  margin:0;
}
.vfilm__meta{font-size:clamp(9px,.66vw,10.5px);color:var(--mute-2)}


/* ---------- APPROACH ----------
   Each card leads with a small line drawing that animates the point it
   is making rather than sitting there as decoration: the 9:16 crop
   travelling across the master, captions landing under a running
   scrub, a master dropping into the delivery tray. The loops only run
   once the card is in view and only while it is hovered or focused, so
   three animations are never competing for attention at once. */
.sapproach{padding-bottom:var(--gap)}
.sapproach__grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,2.4vw,40px);
  margin-top:clamp(30px,4vw,54px);
}
@media (max-width:860px){.sapproach__grid{grid-template-columns:1fr;gap:14px}}

.sapp{
  position:relative;overflow:hidden;
  padding:clamp(24px,2.4vw,36px);
  border:1px solid var(--line);border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0));
  transition:border-color .4s linear,transform .5s var(--ease);
}
/* a hairline sweeps the top edge on hover, matching the capability cards */
.sapp::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--client);transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease);
}
@media (hover:hover){.sapp:hover{border-color:rgba(255,255,255,.3);transform:translateY(-3px)}}
@media (hover:hover){.sapp:hover::before{transform:scaleX(1)}}

.sapp__num{
  position:absolute;top:clamp(22px,2.2vw,32px);right:clamp(22px,2.2vw,32px);
  color:var(--client);letter-spacing:.2em;
}
.sapp__h{
  font-family:var(--head);font-weight:600;
  font-size:clamp(19px,1.7vw,27px);letter-spacing:-.025em;line-height:1.08;
  margin:clamp(18px,1.8vw,26px) 0 12px;
}
.sapp p{margin:0;color:var(--mute);font-size:clamp(13.5px,.98vw,15.5px);line-height:1.72}

/* ---- the drawings ---- */
.sapp__ico{display:block;width:clamp(58px,5vw,74px);color:var(--paper)}
.sapp__ico svg{width:100%;height:auto;overflow:visible}
.sapp__ico rect,.sapp__ico line,.sapp__ico path{
  vector-effect:non-scaling-stroke;
  stroke-linecap:round;
}

/* everything holds its resting pose until the card reveals, then the
   strokes draw themselves in from left to right */
.sapp__ico :is(rect,line,path){
  stroke-dasharray:220;stroke-dashoffset:220;
  transition:stroke-dashoffset 1s var(--ease);
}
.sapp.in .sapp__ico :is(rect,line,path){stroke-dashoffset:0}
.sapp.in .sapp__ico .sico__crop{transition-delay:.2s}
.sapp.in .sapp__ico .sico__tick{transition-delay:.45s}
.sapp.in .sapp__ico .sico__cap--1{transition-delay:.3s}
.sapp.in .sapp__ico .sico__cap--2{transition-delay:.42s}
.sapp.in .sapp__ico .sico__cap--3{transition-delay:.54s}

.sico__master{opacity:.4}
.sico__crop{color:var(--client);stroke:currentColor}
.sico__scan,.sico__track{opacity:.28}
.sico__scrub,.sico__play{color:var(--client);stroke:currentColor}
.sico__scrub{stroke-dasharray:13!important}
.sico__cap{opacity:.55}
.sico__drop{opacity:.55}
.sico__tick{color:var(--client);stroke:currentColor}

/* the loops are opt-in on hover and focus so the section stays calm */
.sapp.in:focus-within .sico__crop{animation:sicoCrop 3.2s var(--ease-io) infinite}
@media (hover:hover){.sapp.in:hover .sico__crop{animation:sicoCrop 3.2s var(--ease-io) infinite}}
.sapp.in:focus-within .sico__scan{animation:sicoScan 3.2s var(--ease-io) infinite}
@media (hover:hover){.sapp.in:hover .sico__scan{animation:sicoScan 3.2s var(--ease-io) infinite}}
.sapp.in:focus-within .sico__scrub{animation:sicoScrub 2.6s linear infinite}
@media (hover:hover){.sapp.in:hover .sico__scrub{animation:sicoScrub 2.6s linear infinite}}
.sapp.in:focus-within .sico__cap{animation:sicoCap 2.6s var(--ease) infinite}
@media (hover:hover){.sapp.in:hover .sico__cap{animation:sicoCap 2.6s var(--ease) infinite}}
.sapp.in:focus-within .sico__cap--2{animation-delay:.16s}
@media (hover:hover){.sapp.in:hover .sico__cap--2{animation-delay:.16s}}
.sapp.in:focus-within .sico__cap--3{animation-delay:.32s}
@media (hover:hover){.sapp.in:hover .sico__cap--3{animation-delay:.32s}}
.sapp.in:focus-within .sico__drop{animation:sicoDrop 2.4s var(--ease) infinite}
@media (hover:hover){.sapp.in:hover .sico__drop{animation:sicoDrop 2.4s var(--ease) infinite}}

@keyframes sicoCrop{
  0%,10%   {transform:translateX(-13px)}
  45%,55%  {transform:translateX(13px)}
  90%,100% {transform:translateX(-13px)}
}
@keyframes sicoScan{
  0%,100%{opacity:.06;transform:translateY(-17px)}
  50%    {opacity:.4;transform:translateY(17px)}
}
@keyframes sicoScrub{from{stroke-dashoffset:13}to{stroke-dashoffset:0}}
@keyframes sicoCap{
  0%,55%,100%{opacity:.2}
  20%,40%    {opacity:1}
}
@keyframes sicoDrop{
  0%,100%{transform:translateY(-3px);opacity:.15}
  40%    {transform:translateY(0);opacity:.8}
  75%    {transform:translateY(5px);opacity:0}
}

/* no hover to opt in with on touch, and the cards are stacked one to a
   screen there anyway, so the loops just run once the card reveals */
@media (hover:none){
  .sapp.in .sico__crop {animation:sicoCrop 3.2s var(--ease-io) infinite}
  .sapp.in .sico__scan {animation:sicoScan 3.2s var(--ease-io) infinite}
  .sapp.in .sico__scrub{animation:sicoScrub 2.6s linear infinite}
  .sapp.in .sico__cap  {animation:sicoCap 2.6s var(--ease) infinite}
  .sapp.in .sico__cap--2{animation-delay:.16s}
  .sapp.in .sico__cap--3{animation-delay:.32s}
  .sapp.in .sico__drop {animation:sicoDrop 2.4s var(--ease) infinite}
}


/* ---------- FROM THE FEED  (rentals) ----------
   A single post lifted out of the social grid: held copy on the left,
   one vertical card on the right, opening the same lightbox. The red is
   scoped to this section so the play control and badge read the way
   they do on the social page rather than in the interior grey. */
.gsoc{--client:#E11D2E;padding-bottom:var(--gap)}
.gsoc__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,330px);
  gap:clamp(28px,4vw,64px);align-items:center;
  margin-top:clamp(24px,3vw,42px);
}
.gsoc .sec-title em{-webkit-text-stroke-color:color-mix(in srgb,var(--client) 78%,#fff)}
.gsoc__lead{
  margin:clamp(16px,1.8vw,26px) 0 0;color:var(--mute);
  font-size:clamp(14px,1.06vw,16.5px);line-height:1.78;max-width:62ch;
}
.gsoc__more{margin-top:clamp(20px,2.2vw,30px)}
.gsoc__reel{max-width:330px;width:100%;justify-self:end}

@media (max-width:860px){
  .gsoc__grid{grid-template-columns:1fr;gap:30px}
  .gsoc__reel{justify-self:start;max-width:280px}
}


/* ---------- VERTICAL LIGHTBOX ---------- */
/* The platform embeds bring their own chrome and their own height, so this
   variant drops the 16:9 cap and gives them a phone-shaped column instead. */
.lb--v{padding:clamp(58px,5vw,70px) clamp(14px,4vw,40px) clamp(14px,2vw,22px)}
/* the LinkedIn card repeats the caption inside itself, so ours is dropped
   and the height handed back to the embed */
.lb--v.is-linkedin .slb__cap{display:none}
.lb--v.is-linkedin .slb__head{margin-bottom:8px}
.lb__stage--v{
  width:min(430px,100%);max-width:none;
  display:flex;flex-direction:column;
  height:100%;max-height:100%;
}
.slb__head{margin-bottom:10px;flex:none}
.slb__plat{color:var(--client);letter-spacing:.28em;margin-bottom:5px}
.slb__title{
  font-family:var(--head);font-weight:600;
  font-size:clamp(19px,1.7vw,26px);letter-spacing:-.025em;line-height:1.1;
  margin:0;color:var(--paper);
}
/* the platform cards each bring their own height (LinkedIn stacks an author
   block and post text above the video), so this takes every pixel the stage
   has left rather than guessing a ratio, and lets the embed scroll inside */
.lb__frame--v{
  aspect-ratio:auto;flex:1 1 auto;min-height:240px;
  border-radius:12px;background:#fff;
}
.lb__frame--v iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* wide variant: YouTube ships a 16:9 film, so the phone column opens out into
   a landscape stage and the frame takes a fixed 16:9 rather than filling the
   full column height */
.lb--v.is-wide .lb__stage--v{width:min(960px,100%)}
.lb--v.is-wide .lb__frame--v{aspect-ratio:16/9;flex:0 0 auto;min-height:0;background:#000}
.slb__foot{padding-top:12px;flex:none}
.slb__cap{
  margin:0 0 10px;color:var(--mute);
  font-size:13.5px;line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.slb__link{
  display:inline-flex;align-items:center;gap:7px;
  color:var(--paper);transition:color .3s linear,gap .3s var(--ease);
}
.slb__link i{font-style:normal;color:var(--client)}
@media (hover:hover){.slb__link:hover{color:var(--client);gap:11px}}

/* short screens: the caption is the first thing to go, the post is the point */
@media (max-height:700px){
  .slb__cap{display:none}
}
@media (max-height:520px){
  .lb--v .slb__head{display:none}
}