@font-face{ /* metric-matched fallback: the Inter swap was the ENTIRE CLS on the permit pages (0.1725 -> 0) */
  font-family:'Inter Fallback';src:local('Arial');
  size-adjust:107%;ascent-override:90%;descent-override:22%;line-gap-override:0%;
}
/* ============================================================
   FILMIC — foundation
   Black canvas, light extended type, Signal Orange as a whisper.
   Tokens per FILMIC-WEBSITE-BUILD-BRIEF.md §5.
   ============================================================ */
:root{
  /* Colour */
  --black:#000000; --ink:#0a0a0a; --charcoal:#2a2a2a;
  --grey:#555555; --silver:#d9d9d9; --white:#ffffff;
  --orange:#ff4f00;
  --grey-lift:#828282;  /* documented §3 deviation: the dimmest grey that passes 4.5:1 on
                           black at small sizes — used ONLY where --grey fails WCAG */

  /* Fluid type scale */
  --step--1: clamp(.78rem, .72rem + .2vw, .82rem);   /* floor lifted: the footer legal line read 11.7px on a phone (2026-07-24) */
  --step-0:  clamp(1rem, .95rem + .3vw, 1.05rem);   /* floor lifted to 16px: body copy was 15.6px on a phone (2026-07-24) */
  --step-1:  clamp(1.3rem, 1.1rem + .8vw, 1.9rem);
  --step-2:  clamp(2rem, 1.4rem + 2.6vw, 3.6rem);
  --step-3:  clamp(3rem, 1.8rem + 6vw, 8rem);
  --step-hero: clamp(1.7rem, .9rem + 3.4vw, 4.2rem);   /* owner 2026-07-17 (2nd cut): MINIMAL — a quiet caption over the footage, not a billboard */
  --perf: clamp(26px, 4.5svh, 44px);   /* filmstrip perforation rail height — shared by .film and the nav's over-film clearance */
  --fast: .18s cubic-bezier(.22,.61,.36,1);   /* UI answer speed (design pass 2026-07-17): interactive colour/state
                                                 changes respond in 180ms ease-out; the slow expo curve stays for
                                                 AMBIENT motion only (media lifts, reveals, filters) */

  /* Rhythm */
  --gutter: clamp(1.25rem, .8rem + 3vw, 5rem);
  --section: clamp(4rem, 2.5rem + 5.5vw, 8rem);   /* tightened 2026-07-17 blank-space review (§4.1) — was 4.5rem/7vw/11rem */

  /* Motion */
  --ease: cubic-bezier(.16,1,.3,1);
  --dur: .9s;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;color-scheme:dark;overflow-x:clip}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto}
.proof__marquee.js-drive .proof__track{animation:none}   /* JS velocity loop takes over */
body{
  background:var(--black);
  color:var(--white);
  font-family:'Inter','Inter Fallback',system-ui,sans-serif;
  font-weight:300;
  font-size:var(--step-0);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"kern" 1;
  overflow-x:hidden;
}
img,svg,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
a,button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
p{text-wrap:pretty}
h1,h2,h3{text-wrap:balance}
:focus-visible{outline:1px solid var(--white);outline-offset:4px}
::selection{background:#2e2e2e;color:var(--white)}   /* the browser-default blue breaks the black room */

/* Skip link — hidden until keyboard focus */
.skip{
  position:fixed;left:var(--gutter);top:-100%;z-index:500;
  background:var(--black);padding:.8rem 1.4rem;
  border:1px solid rgba(255,255,255,.28);
  font-size:var(--step--1);font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;
}
.skip:focus-visible{top:1rem}

/* Tracked caps — section labels, kickers, captions */
.caps,.cue__label{
  text-transform:uppercase;
  letter-spacing:.3em;
  font-size:var(--step--1);
  font-weight:400;
  color:var(--silver);
}

/* ============================================================
   LOADER — black field, X mark calibrates, page reveals (main.js)
   ============================================================ */
.loader{
  position:fixed;inset:0;z-index:300;
  background:var(--black);
  display:none;
  align-items:center;justify-content:center;
}
.js .loader{display:flex}
.loader__mark path{opacity:0;transform-origin:247px 247px}

/* ============================================================
   SCROLL PROGRESS — 2px Signal Orange hairline (orange use 1 of 4 — owner blessed 4, 2026-07-17)
   ============================================================ */
.progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:250;
  background:var(--orange);
  transform:scaleX(0);transform-origin:left;
}

/* ============================================================
   FLIGHT-PATH SPINE — left-edge line drawn by scroll, X-mark waypoints
   ============================================================ */
.spine{
  position:fixed;left:clamp(1rem,2.2vw,2.6rem);top:14vh;bottom:14vh;width:1px;
  background:rgba(255,255,255,.1);z-index:92;display:none;   /* above .work (z91) so the spine stays visible over the Work section; still below menu 95 / header 100 */
}
@media (min-width:1100px){.js .spine{display:block}}
.spine__fill{
  position:absolute;inset:0;
  background:rgba(255,255,255,.55);
  transform:scaleY(0);transform-origin:top;
}
.spine__node{
  position:absolute;left:50%;transform:translate(-50%,-50%);
  width:11px;height:11px;color:rgba(255,255,255,.22);   /* dim WHITE — the mark is never grey (brief §3) */
  transition:color .35s var(--ease), transform .35s var(--ease);
  /* no backing plate: a solid black block read as a hard box over the bright hero sky
     (owner 2026-07-24). The faint X-mark rides the hairline directly — clean on light or dark. */
  padding:3px 0;box-sizing:content-box;
}
.spine__node.lit{color:var(--white);transform:translate(-50%,-50%) scale(1.25)}
.spine__node svg{width:100%;height:100%;display:block}

/* ============================================================
   INSTRUMENT DETAILS — telemetry readouts + horizon ticks on section
   kickers, and the film grade. (The fixed reticle-grid layer was
   removed in the Ive subtraction pass: content-attached instruments
   only; the one orange element stays the progress hairline.)
   ============================================================ */

/* Telemetry readout appended to section kickers by main.js (descending altitude).
   #828282 is the dimmest tone that still passes 4.5:1 on black at this size. */
/* (kicker ALT/HDG readouts removed per owner 2026-07-10 — the horizon tick stays) */

/* Horizon tick under section kickers — tilted until the section settles into view */
.hud-lvl::after{
  content:"";display:block;width:44px;height:1px;margin-top:1rem;
  background:rgba(255,255,255,.32);
  transform:rotate(-6deg);transform-origin:left center;
  transition:transform 1.3s var(--ease) .15s;
}
.hud-lvl.in::after{transform:rotate(0deg)}
/* centered sections (proof, billboards) centre their tick too */
.proof > .caps.hud-lvl::after,.bills > .caps.hud-lvl::after{margin-left:auto;margin-right:auto}

/* Film-grade canvas — enabled by grade.js on capable desktops only */
.grade{position:fixed;inset:0;z-index:90;pointer-events:none;display:none;mix-blend-mode:overlay;opacity:.42}
.grade.on{display:block}

/* (Viewfinder reticle removed per owner, 2026-07-10.) */

/* ============================================================
   MOTION KILL SWITCH — WCAG 2.2.2 pause for the loops and drifts.
   Instrument-quiet, bottom-right corner. Hidden without JS and
   under reduced motion (nothing moves there anyway).
   ============================================================ */
.motion-toggle{
  position:fixed;right:1.1rem;bottom:1.1rem;z-index:150;
  width:36px;height:36px;display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:var(--silver);cursor:pointer;padding:0;
  transition:color var(--fast), border-color var(--fast);
}
.js .motion-toggle{display:flex}
@media (hover:none){.motion-toggle{width:44px;height:44px}}  /* full touch target on phones */

/* ============================================================
   TOUCH TARGETS (WCAG 2.5.8) — 2026-07-24 mobile pass.
   Standalone, stacked links get a comfortable 44px on touch devices. Links sitting INSIDE a
   sentence are deliberately left alone: the success criterion exempts inline text links, and
   padding them would break the line box.
   ============================================================ */
@media (hover:none){
  .brand,
  /* the enquiry + permit pages missed the first pass: 27 of 29 targets were under 44px,
     including SEND ENQUIRY at 38.4px, which is the primary conversion on the whole site */
  .fp-back,
  .fp-foot a,
  .fp-socials a,
  .fp-side li a,
  .fp-note a,
  .fp-card .btn,
  .fp-card button[type="submit"],
  .fp-block label,
  .doc a:not([class]),
  .close__details a,
  .foot__nav a,
  .foot__social a,
  .menu a,
  .nav a:not(.btn){
    min-height:44px;
    display:flex;
    align-items:center;
  }
  .close__details a{justify-content:center}
}
.motion-toggle:hover{color:var(--white);border-color:rgba(255,255,255,.45)}
.motion-toggle svg{width:10px;height:10px;fill:currentColor}
.motion-toggle .mt-play{display:none}
.motion-off .motion-toggle .mt-pause{display:none}
.motion-off .motion-toggle .mt-play{display:block}
/* paused state stops every ambient CSS animation (cue pulse, status dot, fallback marquee)
   and hides the film grade entirely (a gated WebGL buffer must never linger on screen) */
.motion-off *{animation-play-state:paused !important}
.motion-off .grade{display:none}

/* No-JS poster fallbacks for the inline footage loops */
.media-fallback{width:100%;height:100%;object-fit:cover}

/* ============================================================
   HEADER / NAV — transparent EVERYWHERE (owner 2026-07-17: no top
   background on the full website); only the padding tightens on scroll
   ============================================================ */
.site-head{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.6rem var(--gutter);
  transition:padding .35s var(--ease);   /* isolated fixed element — the one sanctioned non-transform transition */
}
.site-head.scrolled{
  padding-top:.95rem;padding-bottom:.95rem;
}
/* While the filmstrip is pinned, drop the nav below the top sprocket rail so the logo
   and links never sit on the perforations (owner grab 2026-07-17). Uses the shared
   --perf token; main.js toggles the class on pin enter/leave. */
.site-head.over-film{padding-top:calc(var(--perf) + .6rem)}
.js .site-head{opacity:0}                       /* intro handled in main.js */

/* Lockup construction: mark at cap height, native-ish gap (brief §3) */
.brand{display:flex;align-items:center;gap:.4rem;transition:opacity var(--fast)}
.brand:hover{opacity:.72}   /* the lockup acknowledges the cursor like every other interactive element */
.brand__mark{width:16px;height:16px}
.brand__word{width:70px;height:16px}

.nav{display:flex;align-items:center;gap:2.6rem}
.nav a{
  font-size:var(--step--1);font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--silver);
  position:relative;padding:.35rem 0;
  transition:color var(--fast);
}
.nav a:hover{color:var(--white)}
.nav a:not(.btn)::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--white);
  transform:scaleX(0);transform-origin:left;   /* transform, not width — no layout work on hover (motion pass) */
  transition:transform .25s cubic-bezier(.22,.61,.36,1);
}
.nav a:not(.btn):hover::after{transform:scaleX(1)}

/* Primary button — bordered, Signal Orange fills on hover (orange use 2 of 4).
   Carries its own tracked-caps type so standalone uses match the nav. */
.btn{
  border:1px solid rgba(255,255,255,.28);
  padding:.7rem 1.5rem !important;
  color:var(--white) !important;
  font-size:var(--step--1);font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;
  position:relative;overflow:hidden;
  transition:border-color var(--fast), color var(--fast), transform .25s cubic-bezier(.22,.61,.36,1) !important;
}
.btn:active{transform:scale(.98)}   /* physical press */
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--orange);
  transform:translateY(101%);
  transition:transform .25s cubic-bezier(.22,.61,.36,1);
}
.btn:hover{border-color:var(--orange);color:var(--black) !important}
.btn:hover::before{transform:translateY(0)}
.btn:disabled{opacity:.55;pointer-events:none}

/* Burger — two lines from the X-mark language; morphs to an X when open */
.burger{
  display:none;
  width:44px;height:44px;
  background:none;border:0;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:7px;
}
.burger span{
  width:24px;height:1px;background:var(--white);
  transition:transform .35s var(--ease);
}
.burger[aria-expanded="false"]:hover span:first-child{transform:translateY(-1.5px)}   /* lines part slightly — alive before it opens */
.burger[aria-expanded="false"]:hover span:last-child{transform:translateY(1.5px)}
.burger[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}

/* Mobile overlay menu */
.menu{
  position:fixed;inset:0;z-index:95;   /* above .work (z91, the film-grade lift) so the mobile nav is never occluded; still below the header (z100) */
  background:var(--black);
  display:flex;align-items:center;
  padding:0 var(--gutter);
  visibility:hidden;opacity:0;
  transition:opacity .4s var(--ease), visibility 0s .4s;
}
.menu.open{visibility:visible;opacity:1;transition:opacity .4s var(--ease)}
.menu nav{display:flex;flex-direction:column;gap:.5rem;width:100%}
.menu a{
  font-size:var(--step-2);font-weight:200;letter-spacing:.02em;
  padding:.4rem 0;color:var(--white);
  opacity:0;transform:translateY(18px);
  transition:opacity .55s var(--ease), transform .55s var(--ease);
}
.menu.open a{opacity:1;transform:none}
.menu.open a:nth-child(2){transition-delay:.06s}
.menu.open a:nth-child(3){transition-delay:.12s}
.menu.open a:nth-child(4){transition-delay:.18s}
.menu.open a:nth-child(5){transition-delay:.24s}
.menu__enquire{
  margin-top:1.6rem;
  font-size:var(--step-0) !important;font-weight:400 !important;
  letter-spacing:.18em;text-transform:uppercase;color:var(--silver) !important;
}

/* ============================================================
   HERO — 100svh, full-bleed media, content bottom-left
   ============================================================ */
.hero{
  position:relative;
  height:100svh;min-height:640px;
  display:flex;align-items:flex-end;
  overflow:hidden;
}
/* Hero media — the opening clip holds the whole frame; scroll drives its playhead
   (time scrub in main.js) while a subtle 1.08 scale swells the media — hence will-change */
/* poster as a CSS backstop behind the scrubbed <video>, same idiom as the film frames —
   so a seek into unbuffered territory on a slow line never paints black; the poster is
   already preloaded (zero network cost) and the opaque cover-fit video occludes it whenever
   a frame paints. On .hero__media so it scales in lockstep with the 1.08 scrub. (2026-07-24) */
.hero__media{position:absolute;inset:0;z-index:0;will-change:transform;background:#050505 url("assets/work/dunes-car-poster.jpg") center/cover no-repeat}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* the scrubbed frame sequence draws here; cover-fit maths lives in main.js so the canvas
   fills the viewport exactly as object-fit:cover did (2026-07-24) */
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* nothing to scrub under reduced motion — the poster backstop on .hero__media stands alone */
@media (prefers-reduced-motion:reduce){.hero__canvas{display:none}}

/* ——— THE FILMSTRIP (lives in the Work section) — a strip of 35mm the scroll drags
       sideways, one continuous reel: frames touch, footage bleeds to every frame edge
       (cover), sprocket rails ride along, a 1px frame line marks each splice. ——— */
.film{
  /* (--perf now lives in :root — the nav's over-film clearance shares it) */
  position:relative;height:100svh;min-height:560px;
  background:#050505;overflow:hidden;
}
.film__track{
  position:absolute;top:0;bottom:0;left:0;
  display:flex;gap:0;width:max-content;          /* owner 2026-07-17 final: clips TOUCH — no blank space between frames */
  will-change:transform;                         /* main.js scrubs translateX */
}
.film__frame{position:relative;flex:0 0 100vw;margin:0}
/* Poster as frame backstop (owner grab 2026-07-17): while a clip's 4K video is still
   loading/decoding mid-transition, the frame showed BLACK — paint each frame's poster
   behind its video so footage (not blank) is always on screen. Same cover sizing. */
.film__frame:nth-child(1){background:#050505 url("assets/work/film-clip-01-poster.jpg") center/cover no-repeat}
.film__frame:nth-child(2){background:#050505 url("assets/work/film-clip-02-poster.jpg") center/cover no-repeat}
.film__frame:nth-child(3){background:#050505 url("assets/work/film-clip-03-poster.jpg") center/cover no-repeat}
.film__frame:nth-child(4){background:#050505 url("assets/work/film-clip-04-poster.jpg") center/cover no-repeat}
.film__media{
  position:absolute;left:0;right:0;top:var(--perf);bottom:var(--perf);
  width:100%;height:calc(100% - 2 * var(--perf));object-fit:cover;
  /* cover, final (owner 2026-07-17): "no empty spaces — each video is part of the reel".
     Footage bleeds to every frame edge; the earlier native-16:9 contain letterboxed at
     non-16:9 viewports, which read as gaps between clips. Scale over space. */
}
/* the seam between shots reads as a film frame line (physical, no grade) */
.film__frame:not(:last-child)::after{
  content:"";position:absolute;top:0;bottom:0;right:-.5px;   /* frames touch — the seam rides the junction itself */
  width:1px;background:rgba(255,255,255,.09);z-index:2;
}
/* sprocket rails — ink bars with faint punched perforations, spanning the whole strip */
.film__track::before,.film__track::after{
  content:"";position:absolute;left:0;right:0;height:var(--perf);z-index:2;
  background:
    radial-gradient(4.5px 6px at 50% 50%, transparent 0 4px, rgba(255,255,255,.17) 4px 5px, transparent 5.5px) 0 50% / 32px 100% repeat-x,
    #060606;
}
.film__track::before{top:0}
.film__track::after{bottom:0}
/* (film captions + edge code removed per owner 2026-07-10 — the footage carries it) */

.hero__scrim{
  position:absolute;inset:0;z-index:1;
  /* owner 2026-07-17: no grey over the top of the opening frame — footage runs clean to the
     page edge; only the bottom keeps its seat for the title + sub-line */
  background:linear-gradient(180deg, transparent 0%, transparent 52%, rgba(0,0,0,.88) 100%);
}

.hero__inner{
  position:relative;z-index:2;width:100%;
  padding:0 var(--gutter) clamp(2.6rem, 4.5vw, 5rem);
}
.hero__title{
  font-size:var(--step-hero);
  font-weight:200;
  letter-spacing:.01em;
  line-height:.94;
}
.hero__title .line{display:block;overflow:hidden;padding-bottom:.04em}
.hero__title .line__in{display:block}
.js .hero__title .line__in{transform:translateY(112%)}   /* rises in via main.js */

.hero__foot{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:2.5rem;flex-wrap:wrap;
  margin-top:clamp(1.6rem, 3vw, 3rem);
}
.js .hero__foot{opacity:0}
.hero__sub{max-width:36ch;color:var(--silver)}

/* Scroll cue — thin line, orange pulse drops down it (orange use 3 of 4, the hero's one orange detail) */
.cue{display:flex;align-items:center;gap:1rem}
.cue__label{letter-spacing:.34em}
.cue__bar{
  width:1px;height:48px;position:relative;overflow:hidden;
  background:rgba(255,255,255,.18);
}
.cue__bar::after{
  content:"";position:absolute;left:0;top:-40%;width:100%;height:40%;
  background:var(--orange);
  animation:cue-drop 2.4s var(--ease) infinite;
}
@keyframes cue-drop{
  0%{top:-40%}
  70%,100%{top:100%}
}

/* ============================================================
   REVEAL — rise-and-settle workhorse (pattern 1), driven by IO in main.js
   ============================================================ */
/* Motion pass 2026-07-17: 40px/1s → 16px/.6s — a settle, not a journey. Same expo family. */
.js [data-reveal]{opacity:0;transform:translateY(16px)}
[data-reveal].in{
  opacity:1;transform:none;
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}

/* Mask-rise split reveal for section headings (hero language, reused).
   Phase 7 kinetic type: each word also settles from ultra-light + faint blur into its
   design weight (Inter variable, wght 100–400 loaded). */
.js [data-split] .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.js [data-split] .w > span{
  display:inline-block;transform:translateY(115%);
  font-weight:150;
  transition:transform .7s var(--ease), font-weight .9s var(--ease);
}
.js [data-split].in .w > span{transform:none;font-weight:var(--split-w,200)}

/* ============================================================
   6.2 PROOF STRIP — one-tone credits, calm
   ============================================================ */
.proof{padding:var(--section) var(--gutter) 0;text-align:center}
/* One slow fluid drift, faded at the edges. Pauses on hover; wraps statically under RM. */
.proof__marquee{
  display:flex;overflow:hidden;
  margin:3.5rem auto 0;max-width:72rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
}
.proof__track{
  list-style:none;flex:none;
  display:flex;align-items:center;gap:clamp(3rem,6vw,5.5rem);
  padding-right:clamp(3rem,6vw,5.5rem);
  animation:proof-drift 48s linear infinite;
}
.proof__marquee:hover .proof__track{animation-play-state:paused}
@keyframes proof-drift{to{transform:translateX(-100%)}}
.proof__track img{
  height:30px;width:auto;display:block;
  filter:brightness(0) invert(88%);    /* ONE flat silver tone, whatever the source colours */
  opacity:.55;
  transition:opacity .45s var(--ease), filter .45s var(--ease);
}
.proof__track img.lit{filter:brightness(0) invert(100%);opacity:1}  /* lights white passing centre */
.proof__track img[alt="Toyota"]{height:24px}   /* optical balance — the wide lockup dominates at 30px */
.proof__line{margin:3.5rem auto 0;max-width:44ch;color:var(--silver)}
/* Showreel card under the client strip (owner 2026-07-24) — deliberately small: an
   invitation, not a headline. Same lightbox as the Work button. No orange (budget stays 4). */
.proof__reel{
  margin:2.6rem auto 0;
  display:inline-flex;align-items:center;gap:1.15rem;
  padding:.5rem 1.3rem .5rem .5rem;
  text-align:left;text-decoration:none;
  border:1px solid rgba(255,255,255,.12);
  transition:border-color var(--fast), background-color var(--fast);
}
.proof__reel:hover{border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.03)}
.proof__reel-shot{
  position:relative;display:block;flex:none;
  width:clamp(124px,15vw,176px);aspect-ratio:16/9;overflow:hidden;background:var(--ink);
}
.proof__reel-shot img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1) brightness(.72);          /* rests dim + monochrome like the billboards… */
  transition:filter var(--fast), transform .4s var(--ease);
}
.proof__reel:hover .proof__reel-shot img{filter:none;transform:scale(1.05)}   /* …wakes on hover */
.proof__reel-play{position:absolute;inset:0;display:grid;place-items:center}
.proof__reel-play svg{
  width:24px;height:24px;fill:var(--white);
  filter:drop-shadow(0 1px 5px rgba(0,0,0,.65));
  transition:transform var(--fast);
}
.proof__reel:hover .proof__reel-play svg{transform:scale(1.14)}
.proof__reel-text{display:flex;flex-direction:column;gap:.35rem}
.proof__reel-cta{font-size:var(--step--1);color:var(--silver);transition:color var(--fast)}
.proof__reel:hover .proof__reel-cta{color:var(--white)}
@media (max-width:560px){
  .proof__reel{gap:.9rem;padding:.45rem 1rem .45rem .45rem}
}

/* ============================================================
   6.3 STATEMENT — one big quiet line
   ============================================================ */
.statement{padding:var(--section) var(--gutter)}
.statement h2{
  font-size:var(--step-2);font-weight:200;line-height:1.2;
  max-width:26ch;letter-spacing:.01em;
}
.statement h2 em{font-style:normal;color:var(--white)}
.statement h2{color:#8b8b8b}   /* was --grey (#555, ~2.8:1): the receding half of the line was near-invisible —
                                  mid-silver keeps the recede-then-land contrast play at a legible ~4.6:1 */

/* ============================================================
   6.4 WORK — the filmstrip carries the showcase.
   ============================================================ */
.work{position:relative;z-index:91}   /* lifts the filmstrip above the film-grade (z90) so the footage stays clean — no grain on the video (owner, 2026-07-10) */
.work__reel{
  position:relative;z-index:1;background:var(--black);
  display:flex;justify-content:center;
  padding:calc(var(--section)*.5) var(--gutter);   /* the button belongs to the filmstrip above, not floating in a void (§4.2) */
}
/* standalone CTAs breathe a little more than the nav button */
.work__reel .btn,.close .btn{padding:.95rem 2.2rem !important}

/* 6.4b PROJECT BILLBOARDS — poster cards, film-key-art feel */
.bills{
  position:relative;z-index:1;background:var(--black);   /* sits above the sticky descent */
  padding:0 var(--gutter) var(--section);
}
.bills > .caps{display:block;margin-bottom:3.5rem;text-align:center}
/* Quiet drifting poster rail (owner rework) — the titles pass by slowly like archive
   cards; they rest dim and monochrome, colour and presence on hover, pause on hover */
.bills__rail{
  overflow:hidden;max-width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.bills__grid{
  list-style:none;
  display:flex;flex-wrap:nowrap;justify-content:flex-start;
  gap:clamp(1.8rem,3vw,2.6rem) clamp(1.4rem,2.2vw,2.2rem);
  width:max-content;margin:0 auto;padding:0 4vw;
  animation:bills-pan 75s ease-in-out infinite alternate; /* gentle there-and-back, no hard loop seam */
  animation-play-state:paused;                             /* rests until the rail reveals */
}
.bills__rail.in .bills__grid{animation-play-state:running}
.bills__rail:hover .bills__grid{animation-play-state:paused !important}
@keyframes bills-pan{to{transform:translateX(calc(-100% + 100vw))}}
.bills__grid li{width:clamp(120px,12vw,156px);flex:none}
.bills__art{
  aspect-ratio:2/3;overflow:hidden;background:var(--ink);
  border:1px solid rgba(255,255,255,.06);
  opacity:.72;   /* was .62 — the rail read almost off at rest; the wall of key art should carry (design pass) */
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), opacity .35s var(--ease);   /* hovers ANSWER; .9s felt asleep */
}
.bills__art img{
  width:100%;height:100%;object-fit:cover;object-position:center top;
  filter:grayscale(1) brightness(.78);           /* rests dim and monochrome… */
  transition:filter .35s var(--ease);
}
.bills__grid li:hover .bills__art{               /* …wakes on touch: colour, presence, gentle lift */
  opacity:1;
  transform:translateY(-3px);
  box-shadow:0 20px 40px -24px rgba(0,0,0,.9);
}
.bills__grid li:hover .bills__art img{filter:grayscale(0) brightness(1)}
.bills__grid .caps{display:block;margin:.9rem 0 .2rem;font-size:.56rem;letter-spacing:.24em;color:var(--silver);opacity:.55}
.bills__grid h3{font-size:.82rem;font-weight:300;letter-spacing:.03em;color:var(--silver)}
.bills__grid li:hover h3{color:var(--white)}
.bills__role{display:block;text-align:center;margin-top:3.5rem}
/* rise-and-settle stagger across the row */
/* true sequential stagger (motion pass 2026-07-17) — the old 2n/3n pattern ran 0/.08/.16/0…
   so item 4 landed BEFORE item 3; the rail now settles left to right, 50ms apart */
.bills__grid li:nth-child(2).in{transition-delay:.05s}
.bills__grid li:nth-child(3).in{transition-delay:.1s}
.bills__grid li:nth-child(4).in{transition-delay:.15s}
.bills__grid li:nth-child(5).in{transition-delay:.2s}
.bills__grid li:nth-child(6).in{transition-delay:.25s}
.bills__grid li:nth-child(7).in{transition-delay:.3s}
.bills__grid li:nth-child(8).in{transition-delay:.35s}
.bills__grid li:nth-child(9).in{transition-delay:.4s}
.bills__grid li:nth-child(10).in{transition-delay:.45s}

/* ============================================================
   6.5 CAPABILITY — instrument numbers + pinned heading list
   ============================================================ */
.cap{padding:calc(var(--section)*.5) var(--gutter) var(--section)}   /* top halved — .bills above already carries a full --section (§4.6) */
/* (.cap__numbers / .num removed — the capability spec figures were retired; .num__big stays, used by .comp__cover) */
.num__big{
  font-size:var(--step-3);font-weight:200;line-height:1;
  letter-spacing:.01em;font-variant-numeric:tabular-nums;
}
/* (.num__big.lit orange-flash rule removed 2026-07-17 — its JS trigger (data-orange) left
   the markup when the spec figures were retired, so it never fired; orange stays at 4) */
.cap__split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,6rem);align-items:start}
.cap__sticky{position:sticky;top:22vh}
.cap__sticky h2{font-size:var(--step-2);font-weight:200;line-height:1.15;margin-top:1.6rem;max-width:16ch}
.cap__list{list-style:none;counter-reset:cap}
.cap__list li{
  counter-increment:cap;
  padding:2.4rem 0;border-top:1px solid rgba(255,255,255,.1);
}
.cap__list li:last-child{border-bottom:1px solid rgba(255,255,255,.1)}
.cap__list li::before{
  content:"0" counter(cap);
  display:block;font-size:var(--step--1);letter-spacing:.3em;
  color:var(--grey-lift);margin-bottom:.9rem;
}
.cap__list h3{font-size:var(--step-1);font-weight:300;margin-bottom:.6rem;--split-w:300}
.cap__list p{color:var(--silver);max-width:44ch;--split-w:300}
/* the closing argument gets the full voice (owner: work this text) */
.cap__hero h3{font-size:var(--step-2);font-weight:200;--split-w:200}
.cap__hero p{font-size:var(--step-1);font-weight:200;color:var(--white);max-width:24ch}

/* ============================================================
   6.6 FLEET — full-bleed gimbal-footage opener, then discipline bands
   ============================================================ */
.fleet{padding:0 var(--gutter) var(--section)}

/* Opener — the rig on station, specs as instrument readouts */
.fleet__intro{
  position:relative;height:92svh;min-height:560px;overflow:hidden;
  margin:0 calc(-1 * var(--gutter));
  display:flex;align-items:flex-end;
}
.fleet__intro video,.fleet__intro .media-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fleet__introscrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,transparent 30%,transparent 44%,rgba(0,0,0,.9) 92%,rgba(0,0,0,.9) 100%)}
.fleet__introtext{position:relative;width:100%;padding:0 var(--gutter) clamp(2.4rem,4vw,4rem)}
.fleet__introtext h2{font-size:var(--step-2);font-weight:200;line-height:1.1;margin-top:1.4rem;max-width:18ch}
.fleet__group{padding-top:var(--section)}
.fleet__group > .caps{display:block;margin-bottom:3.5rem}   /* one kicker rhythm site-wide (design pass) */
.band{
  display:grid;grid-template-columns:7fr 5fr;gap:clamp(1.5rem,4vw,4rem);
  align-items:center;   /* name sits mid-column beside its craft; end-alignment left the column top empty (§4.4) */
  padding:2.5rem 0;
}
.band__media{
  position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--ink);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.band__media video,.band__media > img:not(.band__drone){width:100%;height:100%;object-fit:cover}   /* framed media fills */
.band:hover .band__media{                 /* airborne lift */
  transform:translateY(-6px);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.9);
}
/* alternate entry direction per band for rhythm */
.js .fleet__group .band:nth-of-type(odd)[data-reveal]{transform:translate(-24px,16px)}   /* ±46px was a journey; ±24 is an arrival */
.js .fleet__group .band:nth-of-type(even)[data-reveal]{transform:translate(24px,16px)}
/* the settle must outrank the entry offsets above, or every band sits 24px off and
   clips at 320px (audit 2026-07-25) */
.js .fleet__group .band[data-reveal].in{transform:none}
/* …and mirror the layout on even bands so the craft leads from the side it enters (DJI rhythm) */
@media (min-width:901px){
  .fleet__group .band:nth-of-type(even){grid-template-columns:5fr 7fr}
  .fleet__group .band:nth-of-type(even) .band__media{order:2}
}
.band__text h3{font-size:var(--step-1);font-weight:200;letter-spacing:.02em}
.band__text p{color:var(--silver);margin-top:.7rem;max-width:38ch}

/* ——— Floating gear: cut-out aircraft hover over a soft ground shadow.
       Enters → rises and settles into hover; leaves → descends and lands.
       A soft graphite stage pool sits behind each craft (premium, less cut-out);
       its highlight is the KEY LIGHT — main.js walks --kx/--ky with the cursor. ——— */
.band__media--drone{background:none;overflow:visible;isolation:isolate}
.band__media--drone::before{
  content:"";position:absolute;inset:-16% -10%;z-index:-1;
  background:
    radial-gradient(56% 50% at var(--kx,50%) var(--ky,40%), rgba(255,255,255,.12), rgba(255,255,255,.035) 42%, transparent 68%),
    radial-gradient(80% 74% at 50% 58%, #121212 0%, #060606 55%, transparent 78%);
}
.band__drone{
  position:absolute;left:8%;top:0;width:84%;height:78%;
  object-fit:contain;object-position:center bottom;
  transform:translateY(52px);
  filter:drop-shadow(0 34px 26px rgba(0,0,0,.6));
  transition:transform .8s var(--ease), filter .8s var(--ease);   /* the fleet's one accent — lift, not levitation ceremony */
}
.band__media--drone::after{               /* faint landing-pad sheen the shadow falls onto */
  content:"";position:absolute;left:50%;bottom:1%;
  width:58%;height:7%;transform:translateX(-50%) scaleX(1.1);
  background:radial-gradient(50% 50% at 50% 50%, rgba(255,255,255,.09), transparent 72%);
  transition:transform .8s var(--ease), opacity .8s var(--ease);
}
.band__media--drone.airborne .band__drone{
  transform:translateY(0);
  filter:drop-shadow(0 60px 34px rgba(0,0,0,.4));
}
.band__media--drone.airborne::after{transform:translateX(-50%) scaleX(.62);opacity:.45}
.band:hover .band__media--drone{transform:translateY(-8px);box-shadow:none}

/* ============================================================
   6.7 COMPLIANCE — white on black, X-mark ticks, still
   ============================================================ */
.comp{padding:var(--section) var(--gutter);max-width:70rem}
.comp > .caps{display:block;margin-bottom:3.5rem}
.comp__list{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem 3rem}
.comp__list li{display:flex;align-items:center;gap:1.1rem;font-size:var(--step-1);font-weight:200}
.comp__list svg{width:1em;height:1em;flex:none;color:var(--white)}
.comp__cover{margin-top:calc(var(--section)*.6);display:flex;flex-direction:column;gap:1.2rem}   /* §4.6 */
.comp__line{margin-top:3.5rem;max-width:52ch;color:var(--silver)}
.comp__roc{margin-top:1.6rem;font-size:var(--step--1);letter-spacing:.3em;text-transform:uppercase;color:var(--grey-lift)}   /* real credential text — lifted to the 4.5:1 token (WCAG 1.4.3, 2026-07-24) */

/* ============================================================
   6.8 HOW A SHOOT WORKS
   ============================================================ */
.steps{padding:0 var(--gutter) var(--section)}
.steps > .caps{display:block;margin-bottom:3.5rem}   /* one kicker rhythm site-wide (design pass) */
.steps ol{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2rem,4vw,4rem)}
/* Swiss stagger (design pass 2026-07-17): equal-baseline 3-col read as a template grid —
   each step now starts lower than the last, a diagonal the eye walks down. Desktop only. */
.steps ol li:nth-child(2){margin-top:2.75rem}
.steps ol li:nth-child(3){margin-top:5.5rem}
/* the three steps settle in order, 70ms apart (motion pass) */
.steps ol li:nth-child(2).in{transition-delay:.07s}
.steps ol li:nth-child(3).in{transition-delay:.14s}
.steps__n{display:block;font-size:var(--step--1);letter-spacing:.3em;color:var(--grey-lift);margin-bottom:1.2rem}   /* step ordinals carry meaning — lifted to the 4.5:1 token (WCAG 1.4.3, 2026-07-24) */
.steps h3{font-size:var(--step-1);font-weight:300;margin-bottom:.6rem}
.steps p{color:var(--silver);max-width:30ch}

/* ============================================================
   6.8b ABOUT / THE CREW — BTS loop + the people on the pad
   ============================================================ */
.crew{padding:calc(var(--section)*.5) var(--gutter) 0}   /* top halved — .steps above already carries a full --section (§4.6) */
.crew > .caps{display:block}
.crew h2{font-size:var(--step-2);font-weight:200;line-height:1.15;margin-top:1.4rem;max-width:16ch}
.crew__media{
  position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--ink);
  margin-top:3.5rem;
}
/* absolute so the noscript fallback stacks INTO the frame instead of clipping below it */
.crew__media video,.crew__media .media-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.crew__line{margin-top:3rem;max-width:52ch;color:var(--silver)}
.crew__line + .crew__line{margin-top:1.2rem}
.crew__grid{
  list-style:none;margin-top:var(--section);
  display:flex;flex-wrap:wrap;justify-content:center;
  align-items:flex-end;   /* names + roles share a baseline whether a card has a portrait or not (§4.5) */
  gap:clamp(2rem,4vw,3rem) clamp(1.6rem,3vw,2.6rem);
}
.crew__grid li{width:clamp(110px,12vw,150px);text-align:center}   /* six hold one desktop row — no orphan (§4.5).
   110px floor: at 901–943px viewports (minus a Windows scrollbar) six 120px cards + gaps overflow and re-orphan Gabriel */
/* Two-person pair (owner 2026-07-24): the crew is now just the two photographed members.
   Give them more presence than the old six-up so the section reads deliberate, not sparse. */
.crew__grid--pair{gap:clamp(2rem,5vw,4rem)}
.crew__grid--pair li{width:clamp(150px,20vw,220px)}
/* Until headshots 03–06 land: hide the empty placeholder frames, name + role carry the card.
   Reversible — the rule stops matching the moment an <img> is uncommented into the figure. (§4.5) */
.crew__shot:not(:has(img)){display:none}
.crew__shot{
  position:relative;aspect-ratio:4/5;overflow:hidden;
  background:var(--ink);border:1px solid rgba(255,255,255,.07);
}
.crew__shot::after{                     /* label shows until a headshot is dropped in;
                                           the / "" alt keeps it out of the accessibility tree */
  content:"Headshot" / "";position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  color:var(--grey-lift);font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;
}
.crew__shot img{
  position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) brightness(.9);   /* same resting monochrome as the billboards */
  transition:filter .35s var(--ease);
}
.crew__grid li:hover .crew__shot img{filter:grayscale(0) brightness(1)}
.crew__grid h3,.crew__name{font-size:var(--step-0);font-weight:300;margin-top:1.1rem;letter-spacing:.03em}
.crew__grid .caps{display:block;margin-top:.3rem;font-size:.62rem;letter-spacing:.26em;opacity:.7;
  min-height:3.1em}   /* 1-line roles reserve the 2-line box, so every NAME shares a baseline
                         across the bottom-aligned grid (2-line roles were dragging names up) */
/* true sequential stagger — six crew settle left to right, 60ms apart (motion pass) */
.crew__grid li:nth-child(2).in{transition-delay:.06s}
.crew__grid li:nth-child(3).in{transition-delay:.12s}
.crew__grid li:nth-child(4).in{transition-delay:.18s}
.crew__grid li:nth-child(5).in{transition-delay:.24s}
.crew__grid li:nth-child(6).in{transition-delay:.3s}

/* ============================================================
   6.8c TESTIMONIALS — one voice at a time, set large, on black.
   Compliance-block stillness (§6.7): type only, generous black.
   ============================================================ */
.quotes{padding:var(--section) var(--gutter);max-width:70rem}
.quotes > .caps{display:block;margin-bottom:3.5rem}   /* matches every other kicker; was a full --section of black (§4.3) */
.quotes__feature{width:fit-content;margin:0 auto}     /* frames the featured quote instead of hugging the left half (§4.3) */
.quotes blockquote p{text-wrap:balance}
.quotes__feature blockquote p{
  font-size:var(--step-1);font-weight:300;color:var(--white);
  line-height:1.3;letter-spacing:.005em;max-width:34ch;
}
.quotes figcaption{margin-top:1.4rem;color:var(--silver)}
.quotes__item{border-top:1px solid var(--charcoal);margin-top:2.6rem;padding-top:2.6rem;max-width:44rem}
.quotes__feature + .quotes__item{margin-top:calc(var(--section) * .7)}
.quotes__item blockquote p{
  font-size:var(--step-0);font-weight:300;color:var(--silver);
  line-height:1.55;max-width:52ch;
}
.quotes__item figcaption{margin-top:1.1rem}
/* attribution settles just after its quote — rise-and-settle, staggered */
.js .quotes figcaption{opacity:0;transform:translateY(12px);transition:opacity .55s var(--ease) .12s,transform .55s var(--ease) .12s}
.js .quotes figure.in figcaption{opacity:1;transform:none}

/* ============================================================
   6.9 CONTACT — near-total black, one line
   ============================================================ */
.close{
  min-height:70svh;   /* was 80svh — quotes bottom + close top already stack (§4.6) */
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:var(--section) var(--gutter);gap:2.6rem;
}
.close h2{font-size:var(--step-2);font-weight:200;line-height:1.1;letter-spacing:.01em}
/* step-3 → step-2 (design pass 2026-07-17): after the hero went minimal (63px), a 128px
   closing line inverted the page's hierarchy — the quiet room should not end on a shout */
.status{display:flex;align-items:center;gap:.8rem}
.status__dot{
  width:7px;height:7px;border-radius:50%;background:var(--orange);
  animation:breathe 3s var(--ease) infinite;
}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.35}}
.close__details{
  display:flex;flex-wrap:wrap;justify-content:center;gap:1rem 2.8rem;
  color:var(--silver);font-size:var(--step-0);
}
.close__details a{transition:color var(--fast)}
.close__details a:hover{color:var(--white)}

/* ============================================================
   6.10 FOOTER
   ============================================================ */
.foot{padding:clamp(3rem,6vw,6rem) var(--gutter) 2.5rem;border-top:1px solid rgba(255,255,255,.08)}
.foot__top{display:flex;justify-content:space-between;gap:3rem;flex-wrap:wrap;align-items:flex-start}
.foot__brand img{width:180px;height:auto;margin-bottom:1.4rem}
.foot__brand p{color:var(--silver);font-size:var(--step--1);letter-spacing:.05em}
.foot__nav,.foot__social{display:flex;flex-direction:column;gap:.6rem}
.foot__nav a,.foot__social a{
  font-size:var(--step--1);letter-spacing:.18em;text-transform:uppercase;
  color:var(--silver);transition:color var(--fast);
}
.foot__nav a:hover,.foot__social a:hover{color:var(--white)}
.foot__bar{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;
  margin-top:4rem;padding-top:1.6rem;
  border-top:1px solid rgba(255,255,255,.06);
  color:var(--silver);font-size:var(--step--1);letter-spacing:.1em;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .nav{display:none}
  .burger{display:flex}
  .bills__grid li{width:clamp(100px,27vw,132px)}
  .cap__split{grid-template-columns:1fr;gap:3rem}
  .cap__sticky{position:static}
  .band{grid-template-columns:1fr;align-items:start;gap:1.2rem}
  .comp__list{grid-template-columns:1fr}
  .steps ol{grid-template-columns:1fr;gap:3rem}
  .steps ol li:nth-child(2),.steps ol li:nth-child(3){margin-top:0}   /* stagger is a desktop rhythm */
}
@media (max-width:480px){
  .hero__foot{gap:1.4rem}
  .cue__bar{height:36px}
}

/* ============================================================
   CONTACT PAGE — "File a flight plan". Quiet instrument briefing;
   no GSAP, no HUD layer, CSS-only staged entrance.
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  @view-transition{navigation:auto}              /* soft cross-page dissolve where supported */
}
/* the same dunes frame that opens the site, held far back — continuity, not decoration */
body.fp::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.86) 55%, #000 100%),
    url("assets/work/dunes-car-poster.jpg") center / cover no-repeat #000;
}
.fp-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.6rem var(--gutter);
}
.fp-cols{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);
  gap:clamp(2.5rem,5vw,5rem);align-items:start;
}
@media (max-width:900px){.fp-cols{grid-template-columns:minmax(0,1fr)}}   /* bare 1fr reintroduced the min-content floor and clipped text at 320px */
.fp-side{position:sticky;top:6rem}
@media (max-width:900px){.fp-side{position:static}}
.fp-facts{
  list-style:none;margin-top:3rem;
  display:flex;flex-direction:column;gap:.9rem;
  color:var(--silver);
}
.fp-facts a{transition:color var(--fast)}
.fp-facts a:hover{color:var(--white)}
.fp-facts__status{
  display:flex;align-items:center;gap:.8rem;
  text-transform:uppercase;letter-spacing:.3em;font-size:var(--step--1);font-weight:400;
  margin-bottom:.6rem;
}
.fp-socials{display:flex;gap:1.8rem;margin-top:2.4rem}
.fp-socials a{
  font-size:var(--step--1);font-weight:400;letter-spacing:.18em;text-transform:uppercase;
  color:var(--grey-lift);transition:color var(--fast);
}
.fp-socials a:hover{color:var(--white)}
.fp-back{
  font-size:var(--step--1);font-weight:400;letter-spacing:.18em;text-transform:uppercase;
  color:var(--silver);transition:color var(--fast);
}
.fp-back:hover{color:var(--white)}
.fp-main{max-width:72rem;margin:0 auto;padding:clamp(2rem,6vh,5rem) var(--gutter) var(--section)}
.fp-intro h1{font-size:var(--step-2);font-weight:200;line-height:1.08;margin-top:1.4rem}
.fp-sub{margin-top:1.2rem;color:var(--silver);max-width:44ch}
.fp-intro .caps::after{                          /* the horizon tick, levelled — the plan starts steady */
  content:"";display:block;width:44px;height:1px;margin-top:1rem;background:rgba(255,255,255,.32);
}
.fp-card{
  position:relative;margin-top:0;
  border:1px solid rgba(255,255,255,.1);background:rgba(5,5,5,.72);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  padding:clamp(1.6rem,4vw,3rem);
}
@media (max-width:900px){.fp-card{margin-top:2.5rem}}
.fp-tick{position:absolute;width:12px;height:12px;border:0 solid rgba(255,255,255,.35)}
.fp-tick--tl{left:-1px;top:-1px;border-left-width:1px;border-top-width:1px}
.fp-tick--tr{right:-1px;top:-1px;border-right-width:1px;border-top-width:1px}
.fp-tick--bl{left:-1px;bottom:-1px;border-left-width:1px;border-bottom-width:1px}
.fp-tick--br{right:-1px;bottom:-1px;border-right-width:1px;border-bottom-width:1px}
.fp-block{border:0;padding:2.2rem 0 0}
.fp-block:first-of-type{padding-top:0}
.fp-block legend{padding:0;margin-bottom:1.3rem}
.fp-idx{color:var(--grey-lift);margin-right:1.4em}
.fp-hint{text-transform:none;letter-spacing:.05em;color:var(--grey-lift);margin-left:.8em}
.fp-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem 2rem}
@media (max-width:640px){.fp-grid{grid-template-columns:1fr}}
.fp-field{display:block}
.fp-label{
  display:block;font-size:.62rem;font-weight:400;letter-spacing:.26em;text-transform:uppercase;
  color:var(--grey-lift);margin-bottom:.5rem;
}
.fp-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.fp-card input[type="text"],.fp-card input[type="email"],.fp-card input[type="tel"],
.fp-card textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.16);
  color:var(--white);font:inherit;font-weight:300;padding:.55rem 0;
  border-radius:0;transition:border-color var(--fast);
}
.fp-card ::placeholder{color:var(--grey-lift)}   /* 3.88:1 → 4.5:1 token (WCAG 1.4.3, 2026-07-24) */
.fp-card input:focus-visible,.fp-card textarea:focus-visible{
  outline:none;border-bottom-color:var(--white);
}
.fp-card textarea{resize:vertical;min-height:7rem}
/* pills — checked state is white-on-quiet, instrument toggle style */
.fp-pills{display:flex;flex-wrap:wrap;gap:.7rem}
.fp-pills label{position:relative;cursor:pointer}
.fp-pills input{position:absolute;inset:0;opacity:0;cursor:pointer}
.fp-pills span{
  display:inline-block;padding:.55rem 1.1rem;
  border:1px solid rgba(255,255,255,.16);color:var(--silver);
  font-size:var(--step--1);font-weight:400;letter-spacing:.14em;text-transform:uppercase;
  transition:border-color var(--fast), color var(--fast), background var(--fast);
}
.fp-pills input:checked + span{border-color:var(--white);color:var(--black);background:var(--white)}
.fp-pills input:focus-visible + span{outline:1px solid var(--white);outline-offset:3px}
.fp-file{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  margin-top:2.8rem;padding-top:2rem;border-top:1px solid rgba(255,255,255,.1);
}
.fp-status{display:flex;align-items:center;gap:.8rem;color:var(--grey-lift)}
.fp-status .status__dot{animation:none;opacity:.45}
.fp-status--ready{color:var(--white)}
.fp-status--ready .status__dot{opacity:1;animation:breathe 3s var(--ease) infinite}
.fp-note{margin-top:1.6rem;font-size:var(--step--1);color:var(--grey-lift);letter-spacing:.04em}
.fp-note a{color:var(--silver);border-bottom:1px solid rgba(255,255,255,.25)}
.fp-note a:hover{color:var(--white)}
.fp-error{margin-top:1rem;color:var(--white);font-size:var(--step-0)}
/* success state — the card empties and confirms, same instrument voice */
.fp-done{outline:none}
.fp-done h2{font-size:var(--step-2);font-weight:200;line-height:1.08;margin-top:1.4rem}
.fp-done p:not(.caps){margin-top:1.2rem;color:var(--silver);max-width:44ch}
.fp-done .fp-back{display:inline-block;margin-top:2.4rem}
.fp-foot{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;
  padding:1.6rem var(--gutter) 2rem;border-top:1px solid rgba(255,255,255,.06);
  color:var(--silver);font-size:var(--step--1);letter-spacing:.1em;
}
.fp-foot a:hover{color:var(--white)}
/* staged entrance, CSS only, honours reduced motion by never running there */
@media (prefers-reduced-motion: no-preference){
  .fp .stage{opacity:0;transform:translateY(26px);animation:fpIn 1s var(--ease) forwards}
  .fp .stage:nth-of-type(2){animation-delay:.15s}
  @keyframes fpIn{to{opacity:1;transform:none}}
}

/* ============================================================
   REEL LIGHTBOX — the showreel opens in place over the black room.
   Native <dialog>; the YouTube (no-cookie) iframe is injected on open
   by main.js and removed on close. Sized to a 16:9 frame that never
   exceeds the viewport. No-JS keeps the button's plain YouTube link.
   ============================================================ */
.reel{
  border:0;padding:0;margin:auto;background:transparent;color:var(--white);
  width:min(94vw, 168vh);max-width:1500px;overflow:visible;   /* 168vh keeps the 16:9 frame inside a tall viewport */
}
.reel::backdrop{
  background:rgba(0,0,0,.92);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.reel__frame{
  position:relative;aspect-ratio:16/9;width:100%;background:#000;
  box-shadow:0 40px 120px -40px rgba(0,0,0,.9);
}
.reel__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* close sits fixed in the top layer so it is always reachable, never colliding with the frame */
.reel__close{
  position:fixed;top:1.1rem;right:1.1rem;
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.22);
  color:var(--silver);cursor:pointer;padding:0;
  transition:color var(--fast), border-color var(--fast);
}
.reel__close:hover{color:var(--white);border-color:rgba(255,255,255,.45)}
.reel__close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4}
/* soft open where motion is welcome (the global reduced-motion rule below zeroes this out) */
@media (prefers-reduced-motion:no-preference){
  .reel[open]{animation:reelIn .3s var(--ease)}
  @keyframes reelIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}

/* ============================================================
   REDUCED MOTION — final states, no animation, poster over autoplay
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .js .loader{display:none}
  .js .site-head{opacity:1}
  .js .hero__title .line__in{transform:none}
  .js .hero__foot{opacity:1}
  .js [data-reveal]{opacity:1 !important;transform:none !important}
  .js .quotes figcaption{opacity:1;transform:none}   /* custom stagger, not a data-reveal */
  .js [data-split] .w > span{transform:none}
  .js .spine{display:none}
  .js .motion-toggle{display:none}
  .grade{display:none !important}
  .js [data-split] .w > span{font-weight:inherit}
  .hud-lvl::after{transform:none}
  .proof__track img{opacity:.9}
  .cue__bar::after{content:none}
  .js .band__media--drone .band__drone{transform:none}   /* hover state, no animation */
  .band__media--drone::after{transform:translateX(-50%) scaleX(.6);opacity:.4}
  .proof__track{flex-wrap:wrap;justify-content:center;padding-right:0}
  .proof__track[aria-hidden]{display:none}     /* static wrapped row instead of the drift */
  .proof__marquee{-webkit-mask-image:none;mask-image:none}
  .bills__grid{animation:none;flex-wrap:wrap;justify-content:center;width:auto;max-width:66rem}
  .bills__rail{-webkit-mask-image:none;mask-image:none}
  .bills__art img{filter:grayscale(0) brightness(.9)}
  /* filmstrip degrades to a vertical stack so all four Work pieces stay reachable when the
     scroll-scrub can't run — mirrors the proof/bills fallbacks above (JS still attaches the
     video posters here, so each frame shows its still) */
  .film{height:auto;min-height:0;overflow:visible}
  .film__track{position:static;flex-direction:column;width:auto;gap:0}
  .film__frame{flex:0 0 auto;aspect-ratio:16/9}
  .film__media{position:static;width:100%;height:100%}
  .film__frame:not(:last-child)::after,
  .film__track::before,.film__track::after{display:none}
}

/* same filmstrip stack when JS/GSAP never ran (.js stripped by the watchdog or the
   main.js failsafe) — every frame's video carries a real poster attr, so stills paint */
html:not(.js) .film{height:auto;min-height:0;overflow:visible}
html:not(.js) .film__track{position:static;flex-direction:column;width:auto;gap:0}
html:not(.js) .film__frame{flex:0 0 auto;aspect-ratio:16/9}
html:not(.js) .film__media{position:static;width:100%;height:100%}
html:not(.js) .film__frame:not(:last-child)::after,
html:not(.js) .film__track::before,html:not(.js) .film__track::after{display:none}
/* the film videos carry a real poster attr, so they show a still in the degraded path
   (no need to hide them; noscript stills removed to avoid a double render) */

/* Quiet secondary link under the reel button, sends the reader to the credits page
   without competing with the button. Added 2026-07-24 with the SEO reach build. */
.work__credits{margin-top:1rem;font-size:var(--step--1);letter-spacing:.08em;text-transform:uppercase;color:var(--grey-lift)}
.work__credits a{border-bottom:1px solid var(--charcoal);transition:color var(--fast),border-color var(--fast)}
.work__credits a:hover{color:var(--white);border-color:var(--orange)}

/* ============================================================
   DOC — editorial content pages (permits, FPV, work)
   Added 2026-07-24 for the SEO reach build. Deliberately plain: these pages exist to be
   READ and to be crawled, so all content is in the raw HTML with no reveal-on-scroll
   dependency (the homepage's data-reveal pattern hides content until JS runs, which is
   the wrong trade for a page whose whole job is to rank). Reuses the .fp page chrome
   (header, back link, footer) and the existing tokens. No new colour, no new motion.
   ============================================================ */
.doc{max-width:74ch;margin:0 auto;padding:clamp(2rem,1rem + 5vw,5rem) var(--gutter) var(--section)}
.doc__kicker{margin-bottom:1.25rem;color:var(--grey-lift)}
.doc h1{font-size:var(--step-2);font-weight:200;letter-spacing:-.02em;line-height:1.05;margin-bottom:1.5rem}
.doc__lede{font-size:var(--step-1);font-weight:200;line-height:1.4;color:var(--silver);margin-bottom:2.5rem}
.doc h2{font-size:var(--step-1);font-weight:200;letter-spacing:-.01em;line-height:1.2;margin:3.5rem 0 1rem;padding-top:2rem;border-top:1px solid var(--charcoal)}
.doc h3{font-size:var(--step-0);font-weight:400;letter-spacing:.02em;margin:2rem 0 .5rem}
.doc p{margin-bottom:1.1rem;color:var(--silver)}
.doc p strong{font-weight:400;color:var(--white)}
.doc ul,.doc ol{margin:0 0 1.4rem 1.1rem;color:var(--silver)}
.doc li{margin-bottom:.5rem;padding-left:.3rem}
.doc a:not(.btn){color:var(--white);border-bottom:1px solid var(--charcoal);transition:border-color var(--fast)}
.doc a:not(.btn):hover{border-color:var(--orange)}
/* Tables carry the permit chains. They must stay readable on a phone, so they scroll
   rather than shrink the type below the a11y floor. */
.doc__tablewrap{overflow-x:auto;margin-bottom:1.6rem;-webkit-overflow-scrolling:touch}
.doc table{width:100%;min-width:34rem;border-collapse:collapse;font-size:var(--step--1)}
.doc th,.doc td{text-align:left;vertical-align:top;padding:.7rem .9rem;border-bottom:1px solid var(--charcoal)}
.doc th{font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-lift);white-space:nowrap}
.doc td{color:var(--silver)}
/* Closing call to action, one per page. */
.doc__cta{margin-top:var(--section);padding-top:2rem;border-top:1px solid var(--charcoal)}
.doc__cta h2{border:0;padding:0;margin:0 0 1rem}
/* Sibling page links, the internal linking the two-page site never had. */
.doc__also{margin-top:2.5rem;display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;font-size:var(--step--1);color:var(--grey-lift)}
.doc__also a{color:var(--silver)}
@media (max-width:640px){.doc h2{margin-top:2.5rem}}