/* ===========================================================
   OSRC — Om Sai Ram Construction
   Cinematic dark / fluid-glass corporate experience
   =========================================================== */

/* ---- Tokens ---- */
:root{
  --bg:        #e7dece;          /* beige base */
  --bg-2:      #eee7d8;          /* lighter beige — alt sections */
  --charcoal:  #ddd2bb;          /* deeper beige — subtle surfaces */
  --line:      rgba(40,30,8,0.16);
  --line-2:    rgba(40,30,8,0.09);

  --gold:      #957010;          /* deep antique gold — readable on beige */
  --gold-2:    #c39a2c;          /* brighter glint */
  --gold-deep: #6d520c;
  --gold-rgb:  149,112,16;

  --concrete:  #6b6353;
  --text:      #1c1810;          /* warm near-black */
  --muted:     rgba(28,24,16,0.64);
  --faint:     rgba(28,24,16,0.42);

  /* frosted light glass for the beige theme */
  --glass:        rgba(255,255,255,0.40);
  --glass-2:      rgba(255,255,255,0.58);
  --glass-border: rgba(40,30,8,0.16);
  --glass-blur:   8px;            /* tweakable (lowered for perf) */

  --motion: 1;                    /* tweakable multiplier 0..1.4 */

  --display: "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif;
  --mono:    "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif;

  --gutter: clamp(20px, 5vw, 96px);
  --maxw: 1480px;
  --sect: clamp(90px, 13vh, 200px);
  --ease: cubic-bezier(.22,1,.36,1);
}

/* ---- Background theme variants (beige family, tweakable) ---- */
[data-theme="sandstone"]{ --bg:#e7dece; --bg-2:#eee7d8; --charcoal:#ddd2bb; }
[data-theme="bone"]{ --bg:#efe9dc; --bg-2:#f5f0e6; --charcoal:#e4dcca; }
[data-theme="clay"]{ --bg:#e2d5c0; --bg-2:#ece1cf; --charcoal:#d4c5aa; }

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--display);
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
  cursor:auto;
}
body.has-cursor{ cursor:none; }
body.has-cursor a, body.has-cursor button, body.has-cursor .magnetic{ cursor:none; }

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; }
::selection{ background:rgba(var(--gold-rgb),0.28); color:#fff; }

/* page grain + warm vignette
   PERF: no mix-blend-mode here — a blended fixed full-viewport layer forces the
   browser to re-composite the entire page through the blend on every scroll
   frame. A plain translucent vignette (multiply of rgba(80,60,20,.10) over the
   beige page precomputed into the color below) looks identical and is free. */
body::before{
  content:""; position:fixed; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(140% 95% at 50% -10%, transparent 60%, rgba(58,42,10,0.10) 100%);
}
.grain{
  position:fixed; inset:-12%; z-index:3; pointer-events:none; opacity:.04; will-change:transform;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{ 0%{transform:translate(0,0)} 50%{transform:translate(-3%,2%)} 100%{transform:translate(2%,-2%)} }

.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }

/* ---- Typographic helpers ---- */
.eyebrow{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--muted);
  display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow .idx{ color:var(--gold); }
.eyebrow::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--gold); box-shadow:0 0 12px rgba(var(--gold-rgb),.9);
}
.display{
  font-family:var(--display); font-weight:500;
  line-height:.96; letter-spacing:-.025em; text-wrap:balance;
}
.h-xl{ font-size:clamp(2.6rem, 8.5vw, 9.5rem); }
.h-lg{ font-size:clamp(2.2rem, 6vw, 5.6rem); }
.h-md{ font-size:clamp(1.8rem, 3.6vw, 3.4rem); }
.gold{ color:var(--gold); }
.italic{ font-style:italic; }
.lead{ font-size:clamp(1.05rem,1.5vw,1.35rem); color:var(--muted); max-width:54ch; line-height:1.55; }

.section-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:clamp(40px,6vw,80px); }

/* line-reveal mask (hidden state only when JS animation is active) */
.reveal-line{ display:block; overflow:hidden; }
.reveal-line > span{ display:block; }
.split-word{ display:inline-block; overflow:hidden; vertical-align:top; }
.split-word > span{ display:inline-block; }
body.js-anim .reveal-line > span,
body.js-anim .split-word > span{ transform:translateY(110%); }
.reveal-line > span, .split-word > span{ transition:none !important; }

/* ---- Glass primitive ---- */
.glass{
  /* PERF: no live backdrop-filter — every blurred card is re-rasterised each
     scrolled frame (the parallax statcard on EVERY frame). Over the cream page
     a slightly milkier static fill + the ::before sheen reads identically. */
  position:relative; background:rgba(255,255,255,.55);
  border:1px solid var(--glass-border);
  border-radius:18px; overflow:hidden;
}
.glass::before{ /* top sheen */
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(160deg, rgba(255,255,255,.55), rgba(255,255,255,0) 42%);
  opacity:.8;
}
.glass::after{ /* hairline highlight */
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 1px rgba(255,255,255,.04);
}

/* ---- Buttons ---- */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:.8em;
  padding:1.05em 1.7em; border-radius:100px; font-size:.95rem; font-weight:500;
  letter-spacing:.01em; isolation:isolate; will-change:transform;
}
.btn .dot{ width:8px; height:8px; border-radius:50%; background:var(--gold); transition:transform .5s var(--ease); }
.btn-primary{ background:var(--gold); color:#0a0a0a; }
.btn-primary .dot{ background:#0a0a0a; }
.btn-primary::after{ content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1; background:var(--gold-2); transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease); }
.btn-primary:hover::after{ transform:scaleX(1); }
.btn-ghost{ border:1px solid var(--glass-border); color:var(--text); background:rgba(255,255,255,.28); }
.btn-ghost:hover{ border-color:rgba(var(--gold-rgb),.6); }
.btn:hover .dot{ transform:scale(1.6); }
.btn{ transition:transform .45s var(--ease); }
.btn:not(.magnetic):hover{ transform:scale(1.02); }
.btn .arrow{ transition:transform .5s var(--ease); }
.btn:hover .arrow{ transform:translateX(5px); }

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--gutter); -webkit-backdrop-filter:blur(0px); backdrop-filter:blur(0px);
  transition:padding .55s var(--ease), background .55s var(--ease), border-color .55s var(--ease),
    box-shadow .55s var(--ease), -webkit-backdrop-filter .55s var(--ease), backdrop-filter .55s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  padding:14px var(--gutter); background:color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter:blur(10px) saturate(1.3); backdrop-filter:blur(10px) saturate(1.3);
  border-bottom:1px solid var(--line);
  box-shadow:0 10px 34px -22px rgba(20,15,6,.28);
}
.nav__logo img{ height:42px; width:auto; transition:height .5s var(--ease); }
.nav.scrolled .nav__logo img{ height:34px; }
.nav__links{ display:flex; gap:34px; align-items:center; }
.nav__links a{ font-size:.9rem; color:var(--muted); position:relative; transition:color .35s; }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:-6px; height:1px; width:0; background:var(--gold); transition:width .4s var(--ease); }
.nav__links a:hover{ color:var(--text); }
.nav__links a:hover::after{ width:100%; }
.nav__cta{ display:flex; align-items:center; gap:18px; }
.nav__burger{ display:none; flex-direction:column; gap:5px; }
.nav__burger span{ width:26px; height:2px; background:var(--text); transition:transform .35s var(--ease), opacity .25s var(--ease); }

/* =========================================================
   HERO
   ========================================================= */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; }
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__bg .ph{ position:absolute; inset:-8%; width:116%; height:116%;
  /* will-change is LOAD-BEARING: heroZoom scrub-scales this 116%-viewport
     layer 1->1.18. Without the hint Chrome keeps re-choosing the raster scale
     as the scale changes and re-rasterises the whole layer mid-scroll —
     measured on a 4x-throttled CPU as 69 jank frames over the hero, dropping
     to 18 with this one line (zoom kept, identical visuals). */
  will-change:transform;
  background:
    repeating-linear-gradient(135deg, rgba(40,30,8,.035) 0 2px, transparent 2px 13px),
    linear-gradient(160deg, var(--bg-2), var(--bg)); }
/* hero still — replaces the old background video. Sized like the video was
   (the .reel class used to do this); no CSS filter, the warm tone is baked
   into the file so the parallax transform never triggers a re-raster. */
.hero__bgimg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; z-index:0; }
.hero__bg::after{
  content:""; position:absolute; inset:0;
  /* The photo shows at full strength — no reading veil across it. Legibility
     is handled on the type itself (a soft cream halo on .hero__title, see
     premium.css) so the picture never has to be washed out. All that is left
     here is a whisper at the very bottom so the hero melts into the page. */
  background:linear-gradient(180deg, transparent 0%, transparent 74%, color-mix(in srgb,var(--bg) 42%,transparent) 100%);
}
.hero__bg::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:radial-gradient(80% 60% at 72% 32%, rgba(var(--gold-rgb),.16), transparent 60%);
}
/* will-change: this block is transform+opacity-tweened from the FIRST scroll
   tick (content fade + rise). Without the hint its layer is created and the
   whole headline rasterised on that first tick — pre-promote so the raster
   happens during load, off the scroll path. */
.hero__content{ position:relative; z-index:4; width:100%; padding-bottom:clamp(70px,11vh,140px); will-change:transform,opacity; }
.hero__bg .ph__label{ display:none; }
.hero__eyebrow{ margin-bottom:clamp(20px,3vh,40px); }
.hero__title{ margin:0; }
.hero__title .line{ font-weight:600; }
.hero__title .line.thin{ font-weight:300; color:var(--muted); }
.hero__title .line .stroke{
  -webkit-text-stroke:1.4px rgba(var(--gold-rgb),.85); color:transparent;
  -webkit-text-fill-color:transparent;
}
.hero__row{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:34px; margin-top:clamp(28px,4vh,52px); }
.hero__sub{ font-family:var(--mono); font-size:.8rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }
.hero__sub b{ color:var(--gold); font-weight:400; }
.hero__actions{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; }

.hero__scroll{ position:absolute; left:var(--gutter); bottom:30px; z-index:5; display:flex; align-items:center; gap:14px; color:var(--muted); font-family:var(--mono); font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; }
@media (max-height:820px){ .hero__scroll{ display:none; } }

/* hero floating video card */
.hero__video{
  /* 22%: sampled the hero photo behind this card's column — it is open fog
     down to y~560 (1440x900), then the tower starts (min luminance falls
     214 -> 72). At 30% the card's bottom edge cut into that tower top; 22%
     lands it wholly in the open sky with ~56px to spare, while still sitting
     ~96px clear of the nav. (The morph ghost takes its start rect from this
     element, so the scroll flight follows automatically.) */
  position:absolute; right:clamp(20px,5vw,90px); top:22%; z-index:5;
  width:clamp(180px,17vw,250px); aspect-ratio:4/5; border-radius:14px; overflow:hidden;
  border:1px solid var(--glass-border); box-shadow:0 28px 70px rgba(0,0,0,.5); will-change:transform;
}
.hero__video__inner{ position:absolute; inset:0; animation:hover-float 6s var(--ease) infinite; will-change:transform; }
.hero__video .ph{ height:100%; }
.hero__video .ph__label{ display:none; }
.hero__video .ph::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,12,.1), rgba(10,10,12,.55)); }
.hero__video__play{ position:absolute; inset:0; display:grid; place-items:center; z-index:2; }
.hero__video__play span{ width:52px; height:52px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.12); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.32); color:#fff; padding-left:3px; transition:transform .5s var(--ease); }
.hero__video:hover .hero__video__play span{ transform:scale(1.06); }
.hero__video__cap{ position:absolute; left:0; bottom:0; z-index:2; padding:14px; font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:#fff; display:flex; align-items:center; gap:8px; }
.hero__video__cap .rec{ width:7px; height:7px; border-radius:50%; background:#ff4d4d; box-shadow:0 0 10px #ff4d4d; animation:blink 1.6s steps(2) infinite; }
@keyframes blink{ 50%{ opacity:.2 } }
@keyframes hover-float{ 0%,100%{ transform:translateY(0) rotate(-1.2deg) } 50%{ transform:translateY(-16px) rotate(1.2deg) } }
/* ---- Phone hero -------------------------------------------------------
   The card used to sit at top:84px while the (bottom-anchored) heading began
   200-270px lower — a dead band between them, and an empty column beside the
   type. Both modes below anchor the card from the BOTTOM instead, so it tracks
   the heading: the content is bottom-anchored too, which keeps their spacing
   constant whatever the phone's height.
   ----------------------------------------------------------------------- */

/* TWO-COLUMN PHONE HERO — text left, floating card right.
   The space budget is exact, not guessed. The display size is fixed at 38.4px
   and its widest line, "THE FUTURE", measures 237px. So:
       16 padding + 237 text + 12 gap + card + 12 inset  <=  viewport
   which leaves room for an 83px card at 360px and 153px at 430px. The card
   therefore flexes with the viewport instead of the headline breaking: it is
   full size (108px) on large phones and eases only where the arithmetic
   demands it. Two columns hold down to 357px by that budget — below the
   breakpoint the layout stacks.

   The slope is steeper than a plain vw fraction on purpose: no single vw
   multiplier can be both <=83px at 360 and ~104px at 430 (that needs 0.231
   and 0.233 at once). 45.7vw-92.6px passes through 71px at 358 and 104px at
   430, which leaves 11px of slack against "THE FUTURE" at the narrow end —
   enough that real-device font rendering can't tip a line over — and opens
   the gutter beside the italic "FUTURE" from 17px to 23px, where it was
   optically crowding the card. */
@media (max-width:760px) and (min-width:358px){
  /* Everything here is scoped under `.hero` on purpose. careers.html and
     impact.html reuse .hero__content / .hero__eyebrow / .hero__title for their
     page headers but have no .hero wrapper and no card — unscoped, the column
     rule below would narrow their headlines to clear a card that isn't there. */
  /* Content is top-anchored so the eyebrow starts just under the logo rather
     than floating in the middle of the screen. --gap is that distance below
     the nav; --cardw is the single source of truth for the card's width, used
     again by the column rule and the card's own offset. */
  .hero{
    --nav:87px;
    --gap:45px;   /* +23px to the logo's baseline = ~68px below it */
    --cardw:clamp(71px, 45.7vw - 92.6px, 108px);
    align-items:flex-start;
    padding-top:calc(var(--nav) + var(--gap));
    padding-bottom:0;
  }
  .hero .hero__content{ padding-inline:16px; padding-bottom:0; }
  .hero .hero__video{
    width:var(--cardw); right:12px;
    /* Centred on the heading block, which is what it sits beside. That block
       (eyebrow + three display lines) measures ~183px and barely moves across
       the band, while the card is 1.25x its own width via aspect-ratio 4/5 —
       so the offset that centres it is (183 - 1.25*cardw)/2, which reduces to
       91.5px - 0.625*cardw. Anchored from the top now that the content is,
       and never by transform: GSAP owns this element's transform for the
       hero parallax. */
    top:calc(var(--nav) + var(--gap) + 91.5px - 0.625 * var(--cardw));
    bottom:auto; margin-block:0;
    box-shadow:0 14px 28px rgba(0,0,0,.35);
  }
  /* The left column is only what actually sits beside the card. The tagline
     and CTA clear its bottom edge, so they keep the full measure —
     constraining them would wrap them for nothing. */
  .hero .hero__eyebrow, .hero .hero__title{
    max-width:calc(100% - var(--cardw) - 8px);
  }
}

/* Under ~357px the column budget no longer closes, so the headline keeps the
   full measure at full size. The card can't sit beside it and can't sit above
   it either — above would push the heading a card's height down the screen,
   which is the whole thing this layout is trying to avoid. So it drops to the
   right of the tagline instead, still top-anchored with the rest. */
@media (max-width:357px){
  .hero{
    --nav:87px;
    --gap:45px;   /* ~68px below the logo's bottom edge */
    align-items:flex-start;
    padding-top:calc(var(--nav) + var(--gap));
    padding-bottom:0;
  }
  .hero .hero__content{ padding-inline:16px; padding-bottom:0; }
  .hero .hero__video{
    width:88px; right:12px;
    top:calc(var(--nav) + var(--gap) + 196px);   /* clears the heading block */
    bottom:auto; margin-block:0;
    box-shadow:0 14px 28px rgba(0,0,0,.35);
  }
  /* the tagline is the one line that now shares a row with the card */
  .hero .hero__sub{ max-width:calc(100% - 108px); }
}
/* 761–1024px — a narrow desktop window or a tablet. This band gets the
   desktop hero, whose content is bottom-anchored by design: at 1440 that
   reads as a cinematic full-height hero, but stretched down to ~860 it left
   823px of empty sky between the logo and the eyebrow (measured).
   Top-anchor it here only. The card keeps its own position (top:22%) and
   stays clear of the text horizontally right across the band — the card
   starts at x640–793 while the headline's ink ends at x354–506 — so pulling
   the text up cannot collide with it. Above 1024px nothing changes. */
@media (min-width:761px) and (max-width:1024px){
  .hero{ align-items:flex-start; padding-top:calc(87px + 18px); }  /* ~40px below the logo */
  .hero .hero__content{ padding-bottom:0; }
  /* .hero__row is space-between, so the CTA sits at the far right — which,
     once the content moves up, is directly underneath the card. Cap the row
     so it stays clear. Exact rather than guessed: across this band both
     --gutter and the card's right inset resolve to 5vw, so the card's left
     edge is 0.95w - 180px and the content starts at 0.05w; capping the row at
     90vw - 204px leaves 24px of clearance at every width. It wraps the CTA
     under the tagline if it ever runs out of room, which is the safe failure. */
  .hero .hero__row{ max-width:calc(90vw - 204px); }
}

.scroll-orb{ width:46px; height:46px; border-radius:50%; border:1px solid var(--glass-border); display:grid; place-items:center; position:relative; background:rgba(255,255,255,.28); }
.scroll-orb::before{ content:""; position:absolute; inset:0; border-radius:50%; border-top:1px solid var(--gold); animation:spin 3.5s linear infinite; }
.scroll-orb i{ width:1px; height:14px; background:var(--gold); animation:bob 1.8s var(--ease) infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes bob{ 0%,100%{ transform:translateY(-3px); opacity:.4 } 50%{ transform:translateY(4px); opacity:1 } }

/* floating glass particles */
.particles{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.particles span{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(var(--gold-rgb),.6), rgba(var(--gold-rgb),.2) 55%, transparent 72%);
  animation:float linear infinite; will-change:transform;
}
@keyframes float{ from{ transform:translateY(20px); opacity:0 } 10%{opacity:.8} 90%{opacity:.6} to{ transform:translateY(-120px); opacity:0 } }

/* =========================================================
   IMAGE PLACEHOLDER
   ========================================================= */
.ph{
  position:relative; width:100%; height:100%; overflow:hidden;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 2px, transparent 2px 11px),
    linear-gradient(135deg, #34322e, #201f1c);
}
.ph__label{
  position:absolute; left:14px; bottom:12px; font-family:var(--mono);
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5);
  display:flex; align-items:center; gap:8px;
}
.ph__label::before{ content:""; width:18px; height:1px; background:var(--gold-2); }
.ph--tall{ aspect-ratio:3/4; }
.ph--wide{ aspect-ratio:16/9; }

/* =========================================================
   SHOWREEL — media grows from small to full-bleed on scroll
   ========================================================= */
.showreel{ position:relative; height:190vh; background:var(--bg); }
.showreel__sticky{ position:sticky; top:0; height:100svh; overflow:hidden; display:grid; place-items:center; }
.showreel__media{
  /* PERF: sized at the FINAL (full-bleed) box; the scroll-driven grow is pure
     transform scale (with a counter-scaled inner video), so zero layout/paint per frame */
  position:relative; width:100vw; height:100vh; border-radius:20px; overflow:hidden;
  border:1px solid var(--glass-border); box-shadow:0 40px 120px rgba(0,0,0,.5);
  will-change:transform;
  contain:layout paint; transform:translateZ(0) scale(.42,.54); transform-origin:50% 50%;
}
/* Resting counter-scale = (sy/sx, 1) at p=0, i.e. (.54/.42, 1). Net video
   scale is a uniform .54, so the still first paint fills the card height and
   crops only the sides — the building reads immediately, before showreel() in
   main.js takes over the per-frame value on scroll. */
.showreel__media .ph{ will-change:transform; transform:scale(1.2857,1); transform-origin:50% 50%; }
.showreel__media .ph{ height:100%; }
.showreel__media .ph__label{ display:none; }
.showreel__media .ph::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,12,.15), rgba(10,10,12,.55)); }
.showreel__play{
  position:absolute; inset:0; z-index:3; display:grid; place-items:center; pointer-events:none;
}
.showreel__play span{
  width:88px; height:88px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.10); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.3); color:#fff; font-size:1.3rem; padding-left:5px;
}
.showreel__play span::after{ content:""; position:absolute; width:88px; height:88px; border-radius:50%; border:1px solid rgba(255,255,255,.35); animation:pulse 2.6s var(--ease) infinite; }
@keyframes pulse{ 0%{ transform:scale(1); opacity:.7 } 100%{ transform:scale(1.7); opacity:0 } }
.showreel__cap{
  position:absolute; left:0; right:0; bottom:0; z-index:3; padding:22px clamp(20px,2.4vw,34px);
  display:flex; justify-content:space-between; align-items:flex-end;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.7);
}
.showreel__head{
  position:absolute; z-index:4; text-align:center; pointer-events:none; color:#fff;
  text-shadow:0 6px 40px rgba(0,0,0,.5); will-change:transform,opacity;
}
.showreel__eyebrow{ position:absolute; top:clamp(80px,12vh,140px); left:0; right:0; z-index:4; text-align:center; }

/* =========================================================
   ABOUT
   ========================================================= */
.about{ padding-block:var(--sect); }
.about__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(40px,6vw,90px); align-items:center; }
.about__lead{ margin:.4em 0 1.4em; }
.about__copy{ display:flex; flex-direction:column; gap:18px; }
.about__copy p{ color:var(--muted); max-width:46ch; line-height:1.6; }

/* contain + tabular digits: the count-up rewrites these numbers ~60x/s during
   the intro — keep each relayout inside the card instead of the whole page */
.statcard{ padding:clamp(26px,3vw,40px); display:flex; flex-direction:column; gap:0; contain:layout paint; }
.statcard__row{ display:flex; align-items:baseline; justify-content:space-between; gap:18px; padding:22px 0; border-bottom:1px solid var(--line-2); }
.statcard__row:last-child{ border-bottom:none; padding-bottom:0; }
.statcard__row:first-child{ padding-top:0; }
.statcard__num{ font-family:var(--display); font-weight:500; font-size:clamp(2.4rem,4vw,3.6rem); line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.statcard__num .suf{ color:var(--gold); }
.statcard__lbl{ font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); text-align:right; max-width:13ch; }

/* =========================================================
   SHOWCASE (sticky horizontal pin — all projects shown before scroll continues)
   ========================================================= */
.showcase{ position:relative; background:var(--bg-2); }
.showcase__sticky{ position:sticky; top:0; height:100svh; display:flex; align-items:center; overflow:hidden; }
/* reduced-motion / no-pin fallback: native horizontal scroll */
.showcase.is-scroll{ height:auto !important; }
.showcase.is-scroll .showcase__sticky{ position:relative; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; cursor:grab; -webkit-overflow-scrolling:touch; }
.showcase.is-scroll .showcase__sticky::-webkit-scrollbar{ display:none; }
.showcase.is-scroll .showcase__sticky.drag{ cursor:grabbing; }
.showcase__track{ display:flex; gap:clamp(20px,2.4vw,40px); padding-inline:var(--gutter); will-change:transform; }
.showcase__intro{ flex:0 0 auto; width:min(38vw,440px); align-self:center; padding-right:30px; }
.showcase__intro h2{ margin:.5em 0 .6em; }
.proj{
  flex:0 0 auto; width:min(74vw,460px); height:min(74vh,620px);
  position:relative; border-radius:16px; overflow:hidden; cursor:pointer;
  border:1px solid rgba(255,255,255,.08);
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.028) 0 2px, transparent 2px 12px),
    linear-gradient(158deg, #302e2a, #1a1916);
}
.proj__shade{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 80% at 20% 0%, rgba(255,255,255,.05), transparent 55%); }
.proj__top{ position:absolute; top:0; left:0; right:0; z-index:2; display:flex; justify-content:space-between; padding:22px; font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.proj__cat{ color:var(--gold); }
.proj__body{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:clamp(22px,2.5vw,34px); }
.proj__title{ font-family:var(--display); font-weight:500; font-size:clamp(1.5rem,2.4vw,2.2rem); line-height:1.04; letter-spacing:-.02em; }
.proj__meta{ display:flex; gap:22px; margin-top:14px; flex-wrap:wrap; }
.proj__meta div{ display:flex; flex-direction:column; gap:3px; }
.proj__meta span{ font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.proj__meta b{ font-weight:500; font-size:.95rem; color:var(--text); }
.proj__story{ margin-top:16px; color:var(--muted); font-size:.92rem; max-width:38ch; max-height:0; opacity:0; overflow:hidden; transition:max-height .6s var(--ease), opacity .5s, margin .5s; }
.proj:hover .proj__story{ max-height:120px; opacity:1; }
.proj__glow{ position:absolute; inset:0; z-index:3; opacity:0; transition:opacity .6s; pointer-events:none; background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%), rgba(var(--gold-rgb),.16), transparent 60%); }
.proj:hover .proj__glow{ opacity:1; }
.showcase__hint{ position:absolute; bottom:34px; right:var(--gutter); z-index:4; font-family:var(--mono); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); display:flex; align-items:center; gap:10px; }
.showcase__progress{ width:120px; height:2px; background:var(--line); position:relative; }
.showcase__progress i{ position:absolute; left:0; top:0; height:100%; width:0; background:var(--gold); }

/* =========================================================
   FEATURED STORYTELLING
   ========================================================= */
.featured{ position:relative; }
.story{ min-height:100svh; position:relative; display:flex; align-items:center; overflow:hidden; }
.story__bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.story__bg .ph{ position:absolute; inset:-10%; width:120%; height:120%; }
.story__bg > img{ position:absolute; inset:-8%; width:116%; height:116%; object-fit:cover; }
.story__bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(5,5,5,.92) 0%, rgba(5,5,5,.6) 45%, rgba(5,5,5,.25) 100%); }
.story__inner{ position:relative; z-index:2; max-width:640px; }
.story__kicker{ margin-bottom:24px; }
.story__title{ margin:.3em 0; }
.story__text{ color:var(--muted); font-size:1.1rem; line-height:1.6; margin:1.2em 0 2em; max-width:50ch; }
.story__metrics{ display:flex; gap:clamp(26px,4vw,60px); flex-wrap:wrap; }
.story__metrics div span{ display:block; font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); margin-bottom:6px; }
.story__metrics div b{ font-family:var(--display); font-weight:500; font-size:clamp(1.7rem,3vw,2.6rem); letter-spacing:-.02em; }

/* =========================================================
   SERVICES
   ========================================================= */
.services{ padding-block:var(--sect); position:relative; }
.services__mega{ font-family:var(--display); font-weight:600; font-size:min(clamp(4rem,21vw,17rem), calc((100vw - 2*var(--gutter)) / 5)); line-height:.82; letter-spacing:-.04em; color:transparent; -webkit-text-stroke:1px rgba(28,24,16,.22); margin:0 0 -.06em; pointer-events:none; white-space:nowrap; }
.services__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:clamp(30px,4vw,56px); }
.svc{ position:relative; padding:clamp(26px,2.4vw,40px); min-height:300px; display:flex; flex-direction:column; justify-content:space-between; border-radius:18px; transition:transform .6s var(--ease); overflow:hidden; }
.svc::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%), rgba(var(--gold-rgb),.18), transparent 60%); opacity:0; transition:opacity .5s; }
.svc:hover::before{ opacity:1; }
.svc:hover{ transform:translateY(-6px); }
.svc__no{ font-family:var(--mono); font-size:.8rem; color:var(--gold); letter-spacing:.1em; }
.svc__name{ font-family:var(--display); font-weight:500; font-size:clamp(1.5rem,2vw,2rem); line-height:1.05; letter-spacing:-.02em; }
.svc__desc{ color:var(--muted); font-size:.92rem; margin-top:14px; max-width:34ch; line-height:1.55; }
.svc__head{ display:flex; justify-content:space-between; align-items:flex-start; }
.svc__icon{ width:42px; height:42px; border-radius:50%; border:1px solid var(--glass-border); display:grid; place-items:center; color:var(--gold); transition:transform .6s var(--ease); }
/* The arrow is an inline SVG (see ARROW_NE in main.js). Sizing is required:
   an <svg> carrying only a viewBox defaults to 300x150, which this icon's
   overflow:hidden would clip into a smear. stroke inherits `color` above. */
.svc__icon svg{ width:17px; height:17px; display:block; }
.svc:hover .svc__icon{ transform:rotate(45deg); }

/* =========================================================
   IMPACT
   ========================================================= */
.impact{ position:relative; padding-block:var(--sect); overflow:hidden; }
/* The drifting survey grid. The pattern lives on an oversized ::before that
   moves via transform (compositor-only, rasterised once); the static radial
   mask stays on the parent so it doesn't drift with the pattern. It used to
   animate background-position, which repaints the whole masked section every
   frame — measured as recurring ~83ms frames through the impact section. */
.impact__grid-bg{ position:absolute; inset:0; z-index:0; opacity:.5; overflow:hidden;
  mask-image:radial-gradient(120% 90% at 50% 50%, #000 30%, transparent 80%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 50%, #000 30%, transparent 80%); }
.impact__grid-bg::before{ content:""; position:absolute; inset:-64px 0 0 -64px;
  background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
  background-size:64px 64px; will-change:transform; }
.impact__grid-bg.move::before{ animation:gridmove 24s linear infinite; }
@keyframes gridmove{ to{ transform:translate(64px,64px); } }
.impact__inner{ position:relative; z-index:2; }
.impact__row{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; border-top:1px solid var(--line); }
/* contain:layout — the three counters rewrite their digits ~60x/s for 1.8s.
   Without containment each digit-width change (and the comma appearing at
   1,000) reflows the whole impact grid row. `layout` only, not `paint`: at
   8rem with -.04em tracking the glyphs can sit proud of the box. */
.impact__cell{ padding:clamp(34px,5vw,72px) 0; border-right:1px solid var(--line); padding-right:24px; contain:layout; }
.impact__cell:last-child{ border-right:none; }
.impact__num{ font-family:var(--display); font-weight:500; font-size:clamp(3.4rem,9vw,8rem); line-height:.9; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.impact__num .suf{ color:var(--gold); }
.impact__lbl{ font-family:var(--mono); font-size:.8rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-top:14px; }

/* =========================================================
   TIMELINE
   ========================================================= */
.timeline{ position:relative; background:var(--bg); }
.timeline__sticky{ position:sticky; top:0; min-height:100svh; display:flex; flex-direction:column; justify-content:center; gap:clamp(28px,5vh,56px); overflow:hidden; padding-block:clamp(50px,9vh,110px); }
.timeline__viewport{ overflow:hidden; }
.timeline.is-scroll{ height:auto !important; }
.timeline.is-scroll .timeline__sticky{ position:relative; min-height:0; }
.timeline.is-scroll .timeline__viewport{ overflow-x:auto; overflow-y:hidden; scrollbar-width:none; cursor:grab; -webkit-overflow-scrolling:touch; }
.timeline.is-scroll .timeline__viewport::-webkit-scrollbar{ display:none; }
.timeline.is-scroll .timeline__viewport.drag{ cursor:grabbing; }
.timeline__track{ display:flex; gap:0; padding-inline:var(--gutter); width:max-content; position:relative; padding-top:50px; will-change:transform; }
.timeline__track::before{ content:""; position:absolute; left:0; right:0; top:56px; height:1px; background:var(--line); }
.tl{ flex:0 0 auto; width:340px; padding-right:40px; position:relative; }
.tl__dot{ width:13px; height:13px; border-radius:50%; background:var(--bg); border:1px solid var(--gold); position:relative; margin-bottom:34px; }
.tl__dot::after{ content:""; position:absolute; inset:3px; border-radius:50%; background:var(--gold); transform:scale(0); transition:transform .5s var(--ease); }
.tl.on .tl__dot::after, .tl:hover .tl__dot::after{ transform:scale(1); }
.tl__year{ font-family:var(--display); font-weight:500; font-size:clamp(2rem,3vw,2.8rem); letter-spacing:-.02em; }
.tl__title{ color:var(--text); font-size:1.05rem; margin-top:10px; font-weight:500; }
.tl__desc{ color:var(--muted); font-size:.9rem; margin-top:8px; max-width:30ch; line-height:1.5; }

/* =========================================================
   CLIENTS
   ========================================================= */
.clients{ padding-block:clamp(60px,8vw,110px); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
/* The section is deliberately full-bleed so the marquee can run edge to edge,
   but the heading was inheriting that with no gutter: at 360px the title
   measured 354px in a 360px viewport — 3px of clearance a side, i.e. clipped
   on most phones. The marquee below stays full-bleed. */
.clients__head{ text-align:center; margin-bottom:52px; padding-inline:var(--gutter); }
.marquee{ position:relative; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee__row{ display:flex; gap:18px; width:max-content; animation:marq 48s linear infinite; }
.marquee:hover .marquee__row{ animation-play-state:paused; }
@keyframes marq{ to{ transform:translateX(-50%); } }
.client{ flex:0 0 auto; width:230px; height:120px; border-radius:14px; display:grid; place-items:center; }
.client__name{ font-family:var(--display); font-weight:500; font-size:1.05rem; letter-spacing:.02em; color:var(--muted); transition:color .4s; }
.client:hover .client__name{ color:var(--text); }
.client__name small{ display:block; font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; color:var(--faint); text-transform:uppercase; margin-top:6px; }

/* =========================================================
   SAFETY & QUALITY
   ========================================================= */
.safety{ padding-block:var(--sect); }
.safety__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,90px); align-items:center; }
.safety__list{ display:flex; flex-direction:column; gap:0; margin-top:36px; }
.qa{ padding:28px 0; border-top:1px solid var(--line); display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:start; transition:padding-left .5s var(--ease); }
.qa:hover{ padding-left:14px; }
.qa:last-child{ border-bottom:1px solid var(--line); }
.qa__no{ font-family:var(--mono); color:var(--gold); font-size:.8rem; padding-top:6px; }
.qa__title{ font-family:var(--display); font-weight:500; font-size:clamp(1.4rem,2vw,1.9rem); letter-spacing:-.01em; }
.qa__desc{ color:var(--muted); margin-top:10px; max-width:46ch; line-height:1.55; }
.safety__visual{ position:relative; aspect-ratio:4/5; border-radius:18px; overflow:hidden; }

/* =========================================================
   CAREERS
   ========================================================= */
.careers{ position:relative; padding-block:var(--sect); text-align:center; overflow:hidden; }
.careers__big{ margin:0 auto; max-width:18ch; }
.careers__sub{ margin:1.4em auto 2.4em; }
.careers__cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:60px; text-align:left; }
.jobcard{ padding:28px; border-radius:16px; transition:transform .55s var(--ease); }
.jobcard:hover{ transform:translateY(-6px); }
.jobcard__role{ font-family:var(--display); font-weight:500; font-size:1.25rem; }
.jobcard__meta{ font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:10px; display:flex; gap:14px; }
.jobcard__link{ margin-top:24px; display:flex; align-items:center; justify-content:space-between; color:var(--gold); font-size:.9rem; }

/* =========================================================
   CONTACT
   ========================================================= */
.contact{ position:relative; min-height:100svh; display:flex; align-items:center; padding-block:var(--sect); overflow:hidden; }
.contact__map{ position:absolute; inset:0; z-index:0; opacity:.4; }
.contact__map::after{ content:""; position:absolute; inset:0; background:radial-gradient(82% 82% at 30% 50%, transparent, var(--bg) 58%); }
.contact__panel{ position:relative; z-index:2; max-width:1040px; margin:0 auto; width:100%; display:grid; grid-template-columns:.9fr 1.1fr; }
.contact__left{ padding:clamp(34px,4vw,56px); border-right:1px solid var(--glass-border); }
.contact__left h2{ margin:0 0 28px; }
.contact__det{ display:flex; flex-direction:column; gap:22px; margin-top:30px; }
.contact__det div span{ display:block; font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); margin-bottom:7px; }
.contact__det div b{ font-weight:500; font-size:1.02rem; }
.contact__right{ padding:clamp(34px,4vw,56px); }
.field{ margin-bottom:22px; }
.field label{ display:block; font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.field input, .field textarea{ width:100%; background:rgba(255,255,255,.5); border:1px solid var(--glass-border); border-radius:12px; padding:14px 16px; color:var(--text); font-family:var(--display); font-size:1rem; transition:border-color .4s, background .4s; }
.field input:focus, .field textarea:focus{ outline:none; border-color:rgba(var(--gold-rgb),.65); background:rgba(255,255,255,.72); }
.field textarea{ resize:vertical; min-height:96px; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ padding-block:clamp(60px,8vw,110px) 40px; border-top:1px solid var(--line); }
.footer__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; }
.footer__brand img{ height:48px; margin-bottom:22px; }
.footer__brand p{ color:var(--muted); max-width:34ch; line-height:1.55; }
.footer__col h4{ font-family:var(--mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); margin:0 0 18px; font-weight:400; }
.footer__col a{ display:block; color:var(--muted); padding:7px 0; transition:color .3s; }
.footer__col a:hover{ color:var(--gold); }
.footer__bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; margin-top:64px; padding-top:28px; border-top:1px solid var(--line); font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }

/* =========================================================
   CUSTOM CURSOR
   ========================================================= */
.cursor{ position:fixed; top:0; left:0; z-index:9000; pointer-events:none; will-change:transform; }
/* AutoCAD-style crosshair — compact, travels with the pointer */
.xhair{ position:fixed; top:0; left:0; width:0; height:0; z-index:9000; pointer-events:none; opacity:0; transition:opacity .3s; will-change:transform; }
.xhair.ready{ opacity:1; }
.xhair__plus{ position:absolute; top:0; left:0; transition:transform .14s var(--ease); }
.xhair__arm{ position:absolute; background:rgba(var(--gold-rgb),.8); }
/* arms connect to the center pickbox — one cohesive crosshair */
.xhair__arm--l{ width:8px; height:1px; left:-13px; top:0; }
.xhair__arm--r{ width:8px; height:1px; left:5px;  top:0; }
.xhair__arm--t{ width:1px; height:8px; top:-13px; left:0; }
.xhair__arm--b{ width:1px; height:8px; top:5px;  left:0; }
.xhair__box{ position:absolute; width:9px; height:9px; border:1px solid rgba(var(--gold-rgb),.9); left:0; top:0; transform:translate(-50%,-50%); transition:width .25s var(--ease), height .25s var(--ease), background .25s, border-color .25s; }
.xhair__box::after{ content:""; position:absolute; inset:50% auto auto 50%; width:2px; height:2px; background:var(--gold); transform:translate(-50%,-50%); }
.xhair.hot .xhair__box{ width:20px; height:20px; background:rgba(var(--gold-rgb),.14); }
.xhair.hot .xhair__arm{ background:rgba(var(--gold-rgb),1); }
.xhair.clicking .xhair__box{ animation:xhair-click .4s var(--ease); }
@keyframes xhair-click{ 0%{ transform:translate(-50%,-50%) scale(1) } 40%{ transform:translate(-50%,-50%) scale(.55) } 100%{ transform:translate(-50%,-50%) scale(1) } }
/* click ripple */
.click-ripple{ position:fixed; z-index:8950; pointer-events:none; width:14px; height:14px; border-radius:50%; border:1px solid rgba(var(--gold-rgb),.9); transform:translate(-50%,-50%) scale(.2); animation:click-ripple .6s var(--ease) forwards; }
@keyframes click-ripple{ to{ transform:translate(-50%,-50%) scale(4.2); opacity:0; border-color:rgba(var(--gold-rgb),0); } }
.xhair__tag{ position:absolute; left:0; top:0; transform:translate(16px,16px); font-family:var(--mono); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); opacity:0; transition:opacity .3s; white-space:nowrap; }
.xhair.hot .xhair__tag{ opacity:.85; }
.cursor__glow{ position:fixed; top:0; left:0; z-index:1; pointer-events:none; width:520px; height:520px; border-radius:50%; transform:translate(-50%,-50%); background:radial-gradient(circle, rgba(var(--gold-rgb),.08), transparent 60%); will-change:transform; }

/* Project photo following the cursor */

/* =========================================================
   PRELOADER
   ========================================================= */
.loader{ position:fixed; inset:0; z-index:9999; background:var(--bg); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:28px; }
.loader__logo{ height:74px; opacity:0; }
.loader__bar{ width:min(280px,60vw); height:1px; background:var(--line); position:relative; overflow:hidden; }
.loader__bar i{ position:absolute; left:0; top:0; height:100%; width:0; background:var(--gold); }
.loader__pct{ font-family:var(--mono); font-size:.72rem; letter-spacing:.2em; color:var(--muted); }
.loader.done{ pointer-events:none; }

/* =========================================================
   REVEAL UTILITIES
   ========================================================= */
body.js-anim .fade-up{ opacity:0; transform:translateY(24px) scale(.985); transition:opacity .75s var(--ease), transform .75s var(--ease); will-change:transform,opacity; }
body.js-anim .fade-up.is-in{ opacity:1; transform:translateY(0) scale(1); will-change:auto; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1024px){
  .about__grid{ grid-template-columns:1fr; }
  .services__grid{ grid-template-columns:repeat(2,1fr); }
  .careers__cards{ grid-template-columns:1fr 1fr; }
  .footer__top{ grid-template-columns:1fr 1fr; }
  .safety__grid{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  /* the menu sheet always exists; hidden state is compositor-only so both
     opening AND closing animate smoothly (no display:none pop, no tear) */
  .nav__links{
    display:flex; flex-direction:column; gap:0;
    position:fixed; left:0; right:0; top:70px; bottom:0; z-index:55;
    background:
      radial-gradient(130% 70% at 100% 0%, rgba(var(--gold-rgb),.12), transparent 55%),
      var(--bg);
    padding:clamp(20px,4vh,40px) var(--gutter) calc(env(safe-area-inset-bottom,0px) + 40px);
    border-top:1px solid var(--line);
    overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
    contain:layout paint;
    visibility:hidden; opacity:0; transform:translateY(-14px);
    pointer-events:none;
    transition:opacity .38s var(--ease), transform .44s var(--ease), visibility 0s .44s;
    will-change:transform,opacity;
  }
  .nav__cta .btn-ghost{ display:none; }
  .nav__burger{ display:flex; }
  /* mobile open menu — cream sheet matching site theme */
  /* scroll lock is handled via touch events (see inline nav script) — toggling
     overflow on <body> forces a full-page relayout at tap-time on phones */
  /* IMPORTANT: drop the nav's backdrop-filter while the menu is open — a
     backdrop-filter makes .nav the containing block for its position:fixed
     child, which would collapse the full-screen menu overlay. Also give the
     top strip a solid cream bg so it blends with the sheet. */
  body.nav-open .nav{
    background:var(--bg) !important;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
    border-bottom-color:var(--line);
  }
  /* ---- premium full-screen overlay ---- */
  .nav__links{ counter-reset:navi; }
  body.nav-open .nav__links{
    visibility:visible; opacity:1; transform:translateY(0);
    pointer-events:auto;
    transition:opacity .42s var(--ease), transform .5s var(--ease), visibility 0s;
  }
  /* force dark text on the cream sheet (overrides dark-hero light rules) */
  .nav__links a{ color:var(--text) !important; }
  .nav__links > a, .nav__drop{ counter-increment:navi; }
  /* large display-font rows with a gold index + arrow */
  .nav__links > a,
  .nav__drop > .nav__drop-top{
    font-family:var(--display); font-weight:400; line-height:1;
    font-size:clamp(2rem,8.5vw,2.7rem); letter-spacing:-.02em;
    display:flex; align-items:center; gap:16px; width:100%;
    padding:24px 2px; border-bottom:1px solid var(--line);
  }
  .nav__links > a::before,
  .nav__drop > .nav__drop-top::before{
    content:counter(navi,decimal-leading-zero);
    font-family:var(--mono); font-size:.64rem; letter-spacing:.1em; color:var(--gold);
    align-self:flex-start; margin-top:.55em; min-width:1.8em;
  }
  .nav__links > a::after,
  .nav__drop > .nav__drop-top::after{
    content:"→"; margin-left:auto; color:var(--gold); font-size:1.05rem; opacity:.32;
  }
  .nav__links > a[aria-current="page"]{ color:var(--gold) !important; }
  body.nav-open .nav .nav__cta .nav__burger span{ background:var(--text) !important; }
  /* staggered entrance */
  body.nav-open .nav__links > *{ opacity:0; animation:navItemIn .5s var(--ease) forwards; }
  body.nav-open .nav__links > *:nth-child(1){ animation-delay:.05s; }
  body.nav-open .nav__links > *:nth-child(2){ animation-delay:.11s; }
  body.nav-open .nav__links > *:nth-child(3){ animation-delay:.17s; }
  body.nav-open .nav__links > *:nth-child(4){ animation-delay:.23s; }
  body.nav-open .nav__links > *:nth-child(5){ animation-delay:.29s; }
  @keyframes navItemIn{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
  /* hamburger → X */
  body.nav-open .nav__burger{ position:relative; z-index:80; }
  body.nav-open .nav__burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  body.nav-open .nav__burger span:nth-child(2){ opacity:0; }
  body.nav-open .nav__burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .services__grid{ grid-template-columns:1fr; }
  .careers__cards{ grid-template-columns:1fr; }
  .impact__row{ grid-template-columns:1fr; }
  .impact__cell{ border-right:none; border-bottom:1px solid var(--line); }
  .contact__panel{ grid-template-columns:1fr; }
  .contact__left{ border-right:none; border-bottom:1px solid var(--glass-border); }
  /* phone footer: brand on top (full width), then the 3 link columns side by side — like desktop */
  .footer__top{ grid-template-columns:repeat(3,1fr); gap:clamp(20px,5vw,40px) 14px; }
  .footer__brand{ grid-column:1 / -1; margin-bottom:6px; }
  .footer__brand p{ max-width:42ch; }
  .footer__col h4{ margin-bottom:12px; }
  .footer__col a{ padding:6px 0; font-size:.95rem; }
  .footer__bottom{ margin-top:40px; flex-direction:column; align-items:flex-start; gap:8px; }
  body.has-cursor{ cursor:auto; }
  .cursor{ display:none; }
  .hero__scroll{ display:none; }
  .proj{ width:84vw; }
}
/* ---- tweak-driven toggles ---- */
[data-ambient="off"] .particles span,
[data-ambient="off"] .grain,
[data-ambient="off"] .scroll-orb::before,
[data-ambient="off"] .scroll-orb i,
[data-ambient="off"] .hero__video__inner,
[data-ambient="off"] .hero__video__cap .rec,
[data-ambient="off"] .showreel__play span::after,
[data-ambient="off"] .impact__grid-bg.move{ animation:none !important; }
[data-cursorglow="off"] .cursor__glow{ display:none; }

@media (prefers-reduced-motion:reduce){
  /* Disable only decorative/ambient animations — never a universal transition
     killer, which spawns stuck micro-transitions that fight JS-driven transforms. */
  .particles span, .grain, .scroll-orb::before, .scroll-orb i,
  .marquee__row, .hero__video__inner, .hero__video__cap .rec,
  .showreel__play span::after, .scroll-orb, .impact__grid-bg.move,
  .btn-primary::after{ animation:none !important; }
}

/* =========================================================
   MEDIA-TILE TEXT (project cards, story features, peek)
   Tiles stay dark photographic panels on the beige page, so their
   overlaid text must read light regardless of the beige text token.
   ========================================================= */
.proj__title, .proj__meta b, .story__title, .story__metrics div b,
.proj__top, .proj__meta span, .proj__story,
.story__text, .story__metrics div span{ color:rgba(244,240,231,.72); }
.proj__cat{ color:var(--gold-2); }
.story .eyebrow, .showreel__head{ color:rgba(244,240,231,.86); }
.story .eyebrow .idx, .story .eyebrow::before,
.showreel__eyebrow .idx, .showreel__eyebrow::before{ color:var(--gold-2); background-color:var(--gold-2); }
.story .eyebrow::before{ background:var(--gold-2); }
/* the showreel eyebrow sits on the beige page before the video covers it */
.showreel__eyebrow{ color:var(--muted); }
.showreel__eyebrow .idx{ color:var(--gold); }


/* =========================================================
   PROJECTS — category overview cards (projects.html)
   ========================================================= */
.cat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,28px); margin-top:clamp(34px,5vw,60px); }
.cat-card{ display:block; text-align:left; cursor:pointer; padding:0; overflow:hidden; border-radius:18px; width:100%;
  background:rgba(255,255,255,.55); border:1px solid var(--glass-border); border-top:2px solid transparent; color:var(--text);
  transition:transform .55s var(--ease), box-shadow .55s var(--ease), border-color .55s var(--ease); }
.cat-card:hover{ transform:translateY(-8px); box-shadow:0 34px 70px -34px rgba(40,30,8,.45); border-top-color:var(--gold); }
.cat-card__media{ aspect-ratio:16/10; overflow:hidden; background:var(--charcoal); }
.cat-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.cat-card:hover .cat-card__media img{ transform:scale(1.03); }
.cat-card__body{ padding:clamp(20px,2.2vw,30px); }
.cat-card__no{ font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; color:var(--gold); }
.cat-card__title{ font-family:var(--display); font-weight:600; font-size:clamp(1.4rem,2vw,1.95rem); letter-spacing:-.02em; margin:8px 0 10px; }
.cat-card__count{ font-family:var(--mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:.6em; }
.cat-card__count .arrow{ color:var(--gold); transition:transform .35s var(--ease); }
.cat-card:hover .cat-card__count .arrow{ transform:translateX(5px); }
@media(max-width:980px){ .cat-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:620px){ .cat-grid{ grid-template-columns:1fr; } }
.cat-back{ display:inline-flex; align-items:center; gap:.5em; cursor:pointer; background:none; border:0;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold);
  margin-bottom:clamp(20px,3vw,34px); transition:gap .3s var(--ease); }
.cat-back:hover{ gap:.9em; }
.cat-head{ margin-bottom:clamp(24px,3.5vw,40px); }
#listView .projects-list{ margin-inline:0; }
.cat-card__media .ph{ width:100%; height:100%; }

/* =========================================================
   TESTIMONIALS (admin-driven, homepage)
   ========================================================= */
.tst{ padding-block:var(--sect); }
.tst__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:clamp(34px,4vw,56px); }
.tcard{ padding:clamp(26px,2.4vw,36px); border-radius:18px; display:flex; flex-direction:column; gap:16px; }
.tcard__stars{ color:var(--gold); letter-spacing:3px; font-size:.95rem; }
.tcard__quote{ margin:0; font-size:1.05rem; line-height:1.6; color:var(--text); }
.tcard__by{ display:flex; flex-direction:column; gap:2px; margin-top:auto; }
.tcard__by b{ font-family:var(--display); font-weight:600; }
.tcard__by span{ font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
@media(max-width:980px){ .tst__grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:620px){ .tst__grid{ grid-template-columns:1fr; } }

/* ---- "Crafted by" credit (footer bottom) ---- */
.footer__craft i{ font-style:normal; color:var(--gold); margin-right:6px; }

/* ---- scroll performance: keep parallax layers GPU-resident ---- */
[data-parallax]{ will-change:transform; }

/* ---- perf: marquee cards use a static glass look (backdrop-filter inside a
   continuously-animated row forces a full re-blur of every card every frame) ---- */
.marquee .client{ -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(255,255,255,.34); }

/* ---- perf: ambient animations pause when their section is scrolled offstage
   (toggled by offstagePause() in main.js) ---- */
body.hero-offstage .hero__aurora::before,
body.hero-offstage .hero__aurora::after,
body.hero-offstage .particles span,
body.hero-offstage .hero__title .gold,
body.hero-offstage .scroll-orb i,
body.hero-offstage .scroll-orb::before{ animation-play-state:paused !important; }
.marquee__row.is-offstage{ animation-play-state:paused; }

/* ---- accessibility: keyboard focus (WCAG 2.4.7) — :focus-visible only, so
   mouse users never see it ---- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--gold); outline-offset:3px; border-radius:4px;
}
.btn:focus-visible{ outline-offset:4px; border-radius:100px; }

/* ---- branded slim scrollbar ---- */
html{ scrollbar-color: rgba(var(--gold-rgb),.55) transparent; scrollbar-width:thin; }
body::-webkit-scrollbar{ width:9px; }
body::-webkit-scrollbar-thumb{ background:rgba(var(--gold-rgb),.5); border-radius:8px; }
body::-webkit-scrollbar-thumb:hover{ background:rgba(var(--gold-rgb),.75); }
body::-webkit-scrollbar-track{ background:transparent; }

/* ---- contrast: small gold labels darken on light backgrounds only (4.6:1);
   dark-background contexts keep the brighter gold ---- */
.eyebrow .idx{ color:#7a5c0d; }
.impact .idx, .imp-hero .idx, .car-hero .idx, body.dark-hero .hero .idx,
.tst .idx, [class*="__cap"] .idx{ color:var(--gold); }
.footer__craft i{ color:#7a5c0d; }

/* ---- mobile menu performance: freeze ambient layers under the open sheet ---- */
body.nav-open .grain,
body.nav-open .particles span,
body.nav-open .marquee__row,
body.nav-open .hero__aurora::before,
body.nav-open .hero__aurora::after,
body.nav-open .scroll-orb i,
body.nav-open .scroll-orb::before{ animation-play-state:paused !important; }

/* ---- phones: solid nav bar instead of live backdrop blur (continuous GPU cost
   on mobile; visually near-identical over the cream page) ---- */
@media (max-width:760px){
  /* no backdrop-filter AT ALL on the mobile nav — even blur(0px) makes the nav a
     containing block, which would clip the fixed menu sheet during its close fade */
  .nav{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
  .nav.scrolled{
    background:color-mix(in srgb, var(--bg) 97%, transparent);
  }
}

/* ==========================================================================
   MOBILE OVERHAUL (<=760px) — scoped so desktop (>760px) is untouched.
   Appended last so these win the cascade. Covers: kill scroll-jacking on the
   Selected Works + Journey sections (native swipe carousels), stop text
   clipping, larger legible labels, header clearance, footer lockup, tighter
   spacing. Contrast tokens + FAB live in premium.css (loads after this).
   ========================================================================== */
@media (max-width:760px){

  /* ---- SELECTED WORKS + OUR JOURNEY — smooth native swipe carousel on phones.
       is-scroll makes the row a horizontal touch-scroll (real momentum, no
       scroll-jack); scroll-snap centres each card and a project peeks past the
       intro so it's clear there's more to swipe. ---- */
  .showcase.is-scroll .showcase__sticky{
    height:auto; scroll-snap-type:x mandatory; scroll-padding-inline:16px;
    padding:32px 0; -webkit-overflow-scrolling:touch; touch-action:pan-x;
  }
  .showcase__track{ padding-inline:16px; gap:14px; align-items:stretch; }
  .showcase__intro{ width:72vw; max-width:320px; align-self:center; padding-right:0; scroll-snap-align:start; }
  .showcase__intro h2{ font-size:clamp(1.9rem,8vw,2.4rem); line-height:1.06; }
  .proj{ width:80vw; max-width:340px; height:auto; aspect-ratio:3/4; scroll-snap-align:center; }
  .proj__title{ font-size:clamp(1.5rem,6vw,1.9rem); }
  .showcase__hint{ display:none; }             /* avoid overlap with the FAB */

  .timeline.is-scroll .timeline__sticky{ min-height:0; height:auto; padding:8px 0; }
  .timeline.is-scroll .timeline__viewport{
    scroll-snap-type:x mandatory; scroll-padding-inline:16px;
    padding-bottom:8px; -webkit-overflow-scrolling:touch; touch-action:pan-x;
  }
  .timeline__track{ padding-inline:16px; gap:10px; }
  .tl{ width:78vw; max-width:320px; padding-right:0; scroll-snap-align:center; }
  .tl__desc{ max-width:none; }                 /* was 30ch → no mid-word clip */
  .timeline.is-scroll .tl__dot::after{ transform:scale(1); }   /* no pin to light them */

  /* ---- 4  LEGIBLE LABEL/CAPTION SIZES (>=12px) + calmer tracking ---- */
  .eyebrow{ font-size:.8rem; letter-spacing:.16em; }
  .footer__col h4{ font-size:.8rem; letter-spacing:.12em; }
  .footer__bottom{ font-size:.8rem; letter-spacing:.08em; }
  .statcard__lbl, .impact__lbl, .proj__top, .showreel__cap,
  .client__name small, .hero__video__cap, .car-statbar__lbl,
  .imp-stats__lbl, .cat-card__count, .jobcard__meta,
  .contact__det div span, .footer__socials, .footer__socials a{ font-size:.8rem !important; letter-spacing:.1em; }
  .footer__col a{ font-size:1rem; }             /* body-size footer links */
  .footer__brand p{ font-size:.95rem; }

  /* ---- 6  HEADER CLEARANCE — anchored sections clear the fixed bar ---- */
  section[id]{ scroll-margin-top:92px; }
  .footer__brand img{ height:40px; margin-bottom:16px; display:block; }  /* logo lockup */

}