/* ==========================================================================
   Ribeiro Media: "Director's Cut x Growth Signal" (LIGHT / daylight edition)
   Order: 1 tokens · 2 base · 3 layout · 4 components · 5 site chrome
          · 6 home · 7 inner-page components · 8 motion · 9 reduced motion
   Theming: every component reads SEMANTIC tokens (--c-bg, --c-text, --line…).
     :root holds the light values. A "night shoot" scope (.section--dark,
     .theme-dark, .site-footer, .topbar, .lightbox) redefines the same tokens,
     so any component dropped inside a dark band restyles itself.
   Rule of thumb for transforms (avoid conflicts):
     - [data-reveal]      animates `opacity` + `translate` (+ clip-path for clip variants)
     - [data-speed]       parallax writes `transform` (use on a wrapper only)
     - [data-tilt]        writes `transform` (never combine with data-speed)
     - [data-magnetic]    writes `transform` (buttons)
   ========================================================================== */

/* 1. TOKENS ================================================================ */
:root {
  /* Fixed palette (never flips) */
  --c-obsidian: #0A0A0C;
  --c-carbon: #141418;
  --c-charcoal: #1C1C21;
  --c-graphite: #2F2F37;
  --c-ivory: #F6F2EF;
  --c-stone: #ECE6E1;
  --c-ivory-2: #ECE6E1;
  --c-white: #FFFFFF;
  --c-ink: #0A0A0C;
  --c-ink-muted: #5A5A63;
  /* Accent: tally-light red */
  --c-signal: #FF3B2F;       /* decorative only: REC dot, glows, growth line, strokes */
  --c-signal-btn: #E0281C;   /* filled CTAs with white label (4.7:1) */
  --c-signal-deep: #C4221A;  /* red text/links on light (5.3:1 on ivory) */
  --g-signal: linear-gradient(135deg, #FF3B2F 0%, #E0281C 55%, #8E1810 100%);
  --glow-signal: 0 0 0 1px rgba(224,40,28,.3), 0 8px 24px -8px rgba(224,40,28,.55);
  --glow-signal-lg: 0 0 0 1px rgba(224,40,28,.45), 0 14px 36px -10px rgba(224,40,28,.65);
  --shadow-soft: 0 1px 2px rgba(10,10,12,.06), 0 8px 24px -8px rgba(10,10,12,.14), 0 30px 60px -30px rgba(10,10,12,.25);

  /* Semantic (light values; flipped inside the dark scope) */
  --c-bg: #F6F2EF;
  --c-bg-alt: #ECE6E1;
  --c-surface: #FFFFFF;
  --c-text: #0A0A0C;
  --c-text-soft: #34343B;
  --c-text-muted: #5A5A63;
  --c-accent: #C4221A;            /* red text + icons */
  --c-error: #B3261E;
  --c-success: #126B3A;
  --focus: #C4221A;
  --line: rgba(10,10,12,.10);
  --line-strong: rgba(10,10,12,.20);
  --line-input: #8A8A94;          /* >= 3:1 on white */
  --hairline: rgba(10,10,12,.10);
  --fill: rgba(10,10,12,.04);
  --fill-hover: rgba(10,10,12,.06);
  --card-bd: rgba(10,10,12,.08);
  --card-bd-hover: rgba(10,10,12,.16);
  --g-text-signal: linear-gradient(135deg, #E0281C 0%, #C4221A 50%, #8E1810 100%);
  --g-sheen: linear-gradient(120deg, rgba(255,255,255,.7), rgba(255,255,255,0) 60%);
  --glass: rgba(255,255,255,.72);
  --glass-strong: rgba(255,255,255,.92);
  --glass-border: rgba(255,255,255,.9);
  --glass-filter: blur(18px) saturate(160%);
  --glass-shadow: 0 0 0 1px rgba(10,10,12,.06), 0 1px 2px rgba(10,10,12,.06), 0 8px 24px -8px rgba(10,10,12,.14), 0 30px 60px -30px rgba(10,10,12,.25), inset 0 1px 0 rgba(255,255,255,.9);
  --shadow-depth: 0 1px 2px rgba(10,10,12,.06), 0 8px 24px -8px rgba(10,10,12,.14), 0 30px 60px -30px rgba(10,10,12,.28), 0 60px 100px -50px rgba(10,10,12,.22);
  --glare: rgba(255,255,255,.6);
  --tile-bg: #FFFFFF;
  --tile-shadow: 0 1px 2px rgba(10,10,12,.06), 0 6px 16px -6px rgba(10,10,12,.14);
  --vf-color: rgba(10,10,12,.85);
  --pixel: #0A0A0C;
  --pixel-k: .55;                  /* pixel opacity multiplier */
  --orb-signal: rgba(255,59,47,.30);
  --orb-sand: rgba(214,176,140,.55);
  --stack-bg: linear-gradient(160deg, #FFFFFF, #FBF8F5 60%);

  /* Type */
  --f-display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --f-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --fs-display: clamp(2.6rem, 6vw + 1rem, 7.5rem);
  --fs-h1: clamp(2.1rem, .9rem + 3.6vw, 4.75rem);
  --fs-h2: clamp(1.9rem, 1rem + 2.7vw, 3.9rem);
  --fs-h3: clamp(1.15rem, 1rem + .6vw, 1.55rem);
  --fs-lead: clamp(1.08rem, 1rem + .35vw, 1.3rem);
  --fs-body: 1.0625rem;
  --fs-small: .9rem;
  --fs-mono: .75rem;

  /* Shape & space */
  --r-btn: 6px;
  --r-card: 18px;
  --r-glass: 28px;
  --gutter: clamp(16px, 4vw, 40px);
  --container: 1320px;
  --section-y: clamp(5rem, 10vw, 10rem);

  /* Header metrics (JS keeps --header-h in sync with the real height) */
  --topbar-h: 40px;
  --nav-h: 88px;
  --nav-h-sm: 64px;
  --logo-h: 52px;
  --logo-h-sm: 38px;
  --header-h: 128px;
  --sticky-top: calc(var(--nav-h-sm) + 2rem);   /* sticky asides (FAQ intros, role intro) */

  /* Motion */
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-io: cubic-bezier(.65,0,.35,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --t-fast: 180ms;
  --t-med: 350ms;
  --t-slow: 900ms;
  --t-reveal: opacity .9s var(--ease-out) var(--rd, 0ms), translate .9s var(--ease-out) var(--rd, 0ms);

  /* Z-index scale */
  --z-base: 1;
  --z-sticky: 20;
  --z-actionbar: 40;
  --z-menu: 45;
  --z-header: 50;
  --z-popup: 80;
  --z-lightbox: 85;
  --z-grain: 95;
  --z-cursor: 100;

  color-scheme: light;
}
@media (max-width: 767px) {
  :root { --topbar-h: 44px; --nav-h: 72px; --nav-h-sm: 60px; --logo-h: 40px; --logo-h-sm: 32px; --header-h: 116px; }
}

/* Night-shoot scope: same tokens, dark values */
.section--dark, .theme-dark, .site-footer, .topbar, .lightbox {
  --c-bg: #0A0A0C;
  --c-bg-alt: #141418;
  --c-surface: #1C1C21;
  --c-text: #F6F2EF;
  --c-text-soft: #D9D4D0;
  --c-text-muted: #A1A1AA;
  --c-accent: #FF3B2F;
  --c-error: #FF8A80;
  --c-success: #9EE6B8;
  --focus: #FF3B2F;
  --line: rgba(246,242,239,.09);
  --line-strong: rgba(246,242,239,.22);
  --line-input: #55555F;
  --hairline: rgba(246,242,239,.08);
  --fill: rgba(246,242,239,.05);
  --fill-hover: rgba(246,242,239,.08);
  --card-bd: #2F2F37;
  --card-bd-hover: #3D3D47;
  --g-text-signal: var(--g-signal);
  --g-sheen: linear-gradient(120deg, rgba(246,242,239,.14), rgba(246,242,239,0) 60%);
  --glass: rgba(20,20,24,.55);
  --glass-strong: rgba(14,14,17,.93);
  --glass-border: rgba(246,242,239,.09);
  --glass-filter: blur(18px) saturate(140%);
  --glass-shadow: 0 1px 1px rgba(0,0,0,.25), 0 4px 8px rgba(0,0,0,.25), 0 16px 32px -8px rgba(0,0,0,.45), 0 40px 80px -24px rgba(0,0,0,.6), inset 0 1px 0 rgba(246,242,239,.06);
  --shadow-depth: 0 1px 1px rgba(0,0,0,.25), 0 4px 8px rgba(0,0,0,.25), 0 16px 32px -8px rgba(0,0,0,.45), 0 40px 80px -24px rgba(0,0,0,.6);
  --shadow-soft: var(--shadow-depth);
  --glare: rgba(246,242,239,.13);
  --tile-bg: linear-gradient(180deg, rgba(246,242,239,.09), rgba(246,242,239,.02));
  --tile-shadow: none;
  --vf-color: rgba(246,242,239,.9);
  --pixel: #F6F2EF;
  --pixel-k: 1;
  --orb-signal: rgba(255,59,47,.55);
  --orb-sand: rgba(246,242,239,.18);
  --stack-bg: linear-gradient(160deg, #202027, #16161b 60%);
  color-scheme: dark;
}

/* 2. BASE ================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--c-ivory); scroll-padding-top: calc(var(--nav-h-sm) + 24px); overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; min-height: 100vh; overflow-x: clip;
  background: var(--c-bg); color: var(--c-text);
  font-family: var(--f-body); font-size: var(--fs-body); line-height: 1.7; font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
body.is-locked { overflow: hidden; }
img, svg, video, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a, button, [role="button"], [role="tab"], label[for], select, summary, .is-clickable { cursor: pointer; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 600; line-height: 1.02; letter-spacing: -0.03em; margin: 0; text-wrap: balance; }
h1 { font-size: var(--fs-h1); font-weight: 800; line-height: .95; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -0.015em; }
p { margin: 0; text-wrap: pretty; }
p + p { margin-top: 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--c-signal-btn); color: #fff; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; box-shadow: 0 0 0 6px rgba(224,40,28,.16); }
[hidden] { display: none !important; }
.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon--fill { fill: currentColor; stroke: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link {
  position: fixed; left: 16px; top: 12px; z-index: 200; padding: .75rem 1.1rem; border-radius: var(--r-btn);
  background: var(--c-signal-btn); color: #fff; font-weight: 700; transform: translateY(-160%); transition: transform var(--t-med) var(--ease-out);
}
.skip-link:focus-visible { transform: none; }
.lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--c-text-muted); max-width: 60ch; }
.muted { color: var(--c-text-muted); }
.prose { max-width: 68ch; }
.prose p { color: var(--c-text-muted); }
.mono { font-family: var(--f-mono); font-weight: 500; font-size: var(--fs-mono); letter-spacing: .14em; text-transform: uppercase; }

/* Headline treatments (max one per headline) */
.text-signal { background: var(--g-text-signal); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-box-decoration-break: clone; }
.text-outline { color: transparent; -webkit-text-stroke: 1.5px var(--c-text); }
.is-split .text-signal { background: none; }
.is-split .text-signal .w__i { background: var(--g-text-signal); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* 3. LAYOUT ================================================================ */
.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(980px + var(--gutter) * 2); }
.section { position: relative; padding-block: var(--section-y); isolation: isolate; }
.section--tight { padding-block: clamp(3.5rem, 6vw, 6rem); }
/* Surfaces: ivory (page default) · stone (alternate) · white (paper) · dark (night-shoot band) */
.section--ivory { background: var(--c-ivory); color: var(--c-text); }
.section--stone, .section--carbon { background: var(--c-stone); color: var(--c-text); }
.section--white { background: var(--c-white); color: var(--c-text); }
.section--dark, .theme-dark { background-color: var(--c-bg); color: var(--c-text); }
.section--clip { overflow: hidden; }
.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); }
.split { display: grid; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 7fr 5fr; }
  .split--rev { grid-template-columns: 5fr 7fr; }
  .split--even { grid-template-columns: 1fr 1fr; }
  .split--top { align-items: start; }
}
/* Grid children never grow past their track (stops min-content blowouts from
   aspect-ratio boxes, nowrap labels and wide boards on small screens) */
.split > *, .page-hero__grid > *, .hero__grid > *, .grid-12 > * { min-width: 0; }
.stack > * + * { margin-top: var(--stack, 1.25rem); }
.cluster { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; }

/* Section header */
.section-head { display: grid; gap: 1.25rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); max-width: 880px; }
.section-head--center { margin-inline: auto; text-align: center; justify-items: center; }
@media (min-width: 900px) {
  .section-head--split { max-width: none; grid-template-columns: 7fr 5fr; align-items: end; gap: 2rem 4rem; }
  .section-head--split .eyebrow { grid-column: 1 / -1; }
}

/* Eyebrow / mono label: "SC 02 — SERVICES" */
.eyebrow {
  display: inline-flex; align-items: center; gap: .7rem; margin: 0;
  font-family: var(--f-mono); font-weight: 500; font-size: var(--fs-mono); letter-spacing: .14em; text-transform: uppercase; line-height: 1.4;
  color: var(--c-text-muted);
}
.eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--c-signal-btn); box-shadow: 10px -10px 0 -1px rgba(224,40,28,.4); flex: none; margin-top: 4px; }
.eyebrow--plain::before { display: none; }

/* 4. COMPONENTS ============================================================ */

/* Buttons --------------------------------------------------------------- */
.btn {
  --btn-bg: transparent; --btn-fg: var(--c-text); --btn-bd: transparent;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 52px; padding: .8rem 1.55rem; border-radius: var(--r-btn); border: 1px solid var(--btn-bd);
  background: var(--btn-bg); color: var(--btn-fg); overflow: hidden; isolation: isolate;
  font-family: var(--f-body); font-weight: 700; font-size: .975rem; line-height: 1.1; letter-spacing: .005em; white-space: nowrap; text-align: center;
  transition: background-color var(--t-med) var(--ease-out), color var(--t-med) var(--ease-out), border-color var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out), transform .45s var(--ease-out);
}
.btn .icon { width: 1.1em; height: 1.1em; transition: transform var(--t-med) var(--ease-out); }
.btn:hover .icon--nudge { transform: translate(3px, -3px); }
.btn:hover .icon--next { transform: translateX(4px); }
.btn--sm { min-height: 44px; padding: .6rem 1.1rem; font-size: .9rem; }
.btn--lg { min-height: 60px; padding: 1rem 2rem; font-size: 1.05rem; }
.btn--block { width: 100%; }
.btn--primary { --btn-bg: var(--c-signal-btn); --btn-fg: #fff; box-shadow: var(--glow-signal); }
.btn--primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,.38) 45%, transparent 60%);
  transform: translateX(-120%); transition: transform .8s var(--ease-out);
}
.btn--primary:hover { --btn-bg: #D0241A; box-shadow: var(--glow-signal-lg); }
.btn--primary:hover::after { transform: translateX(120%); }
.btn--secondary { --btn-bd: var(--c-text); --btn-fg: var(--c-text); }
.btn--secondary:hover { --btn-bg: var(--c-text); --btn-fg: var(--c-bg); --btn-bd: var(--c-text); }
.btn--ghost { --btn-fg: var(--c-text); padding-inline: 1rem; }
.btn--ghost:hover { --btn-bg: var(--fill-hover); }
.btn--dark { --btn-bg: var(--c-obsidian); --btn-fg: var(--c-ivory); box-shadow: 0 10px 30px -10px rgba(0,0,0,.6); }
.btn--dark:hover { --btn-bg: #000; }
.btn--light { --btn-bg: var(--c-ivory); --btn-fg: var(--c-ink); }
.btn--light:hover { --btn-bg: #fff; }
.btn--outline-light { --btn-bd: rgba(255,255,255,.75); --btn-fg: #fff; }
.btn--outline-light:hover { --btn-bg: #fff; --btn-fg: var(--c-ink); }
.btn[disabled], .btn.is-loading { pointer-events: none; }
.btn.is-loading > :not(.btn__spinner) { opacity: 0; }
.btn__spinner { display: none; position: absolute; inset: 0; margin: auto; width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: spin .8s linear infinite; }
.btn.is-loading .btn__spinner { display: block; }
.ripple { position: absolute; border-radius: 50%; pointer-events: none; transform: scale(0); background: rgba(255,255,255,.35); animation: ripple .65s var(--ease-out) forwards; z-index: -1; }
.btn--secondary .ripple, .btn--ghost .ripple { background: rgba(10,10,12,.12); }

/* Text link with drawn underline */
.link {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; font-weight: 700; position: relative;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 10px) / 0% 1.5px no-repeat; transition: background-size var(--t-med) var(--ease-out), color var(--t-fast);
}
.link:hover, .link:focus-visible { background-size: 100% 1.5px; }
.link .icon { transition: transform var(--t-med) var(--ease-out); }
.link:hover .icon { transform: translate(3px, -3px); }
.link--signal { color: var(--c-accent); }
.u-link { background: linear-gradient(currentColor, currentColor) 0 100% / 0% 1px no-repeat; transition: background-size var(--t-med) var(--ease-out), color var(--t-fast); }
.u-link:hover, .u-link:focus-visible { background-size: 100% 1px; }

/* Tags & badges */
.tag {
  display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .65rem; border-radius: 999px;
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 500;
  background: var(--fill); border: 1px solid var(--line); color: var(--c-text);
}
.tag--signal { color: var(--c-accent); border-color: rgba(224,40,28,.32); background: rgba(224,40,28,.06); }
.tag--sample { color: var(--c-error); border-color: rgba(196,34,26,.5); background: rgba(196,34,26,.06); border-style: dashed; }
.section--dark .tag--sample, .theme-dark .tag--sample { color: #FFD7D3; border-color: rgba(255,59,47,.5); background: rgba(255,59,47,.14); }
.chip-list { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Pixel squares (logo motif) */
.px { display: inline-block; width: .32em; height: .32em; background: var(--c-signal-btn); flex: none; }
.px-cluster { position: absolute; width: 28px; height: 28px; pointer-events: none; }
.px-cluster span { position: absolute; width: 8px; height: 8px; background: var(--c-signal-btn); transition: transform .6s var(--ease-spring), opacity .4s; }
.px-cluster span:nth-child(1) { left: 0; top: 10px; }
.px-cluster span:nth-child(2) { left: 10px; top: 0; opacity: .7; }
.px-cluster span:nth-child(3) { left: 10px; top: 10px; opacity: .45; background: var(--pixel); }
.card:hover .px-cluster span:nth-child(1), .is-hover .px-cluster span:nth-child(1) { transform: translate(-10px, 6px) rotate(-20deg); }
.card:hover .px-cluster span:nth-child(2), .is-hover .px-cluster span:nth-child(2) { transform: translate(8px, -12px) rotate(25deg); }
.card:hover .px-cluster span:nth-child(3), .is-hover .px-cluster span:nth-child(3) { transform: translate(14px, 10px) rotate(45deg); opacity: .2; }
.pixels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: -1; }
.pixel { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); background: var(--pc, var(--pixel)); opacity: calc(var(--o, .25) * var(--pixel-k, 1)); animation: pixel-bob var(--d, 7s) ease-in-out var(--delay, 0s) infinite alternate; }
.pixel--signal { --pc: var(--c-signal); }

/* Orbs: soft red + warm sand light leaks */
.orb { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; z-index: -1; opacity: .6; animation: orb-drift 18s ease-in-out infinite alternate; }
.orb--signal { background: radial-gradient(circle, var(--orb-signal), rgba(255,59,47,0) 70%); }
.orb--ivory, .orb--sand { background: radial-gradient(circle, var(--orb-sand), rgba(214,176,140,0) 70%); animation-duration: 24s; animation-direction: alternate-reverse; }

/* Viewfinder frame -------------------------------------------------------- */
.viewfinder { position: relative; }
.viewfinder::after {
  content: ""; position: absolute; inset: -12px; pointer-events: none; z-index: 3;
  --vc: var(--vf-color); --vl: 26px; --vt: 2px;
  background:
    linear-gradient(var(--vc), var(--vc)) top left / var(--vl) var(--vt),
    linear-gradient(var(--vc), var(--vc)) top left / var(--vt) var(--vl),
    linear-gradient(var(--vc), var(--vc)) top right / var(--vl) var(--vt),
    linear-gradient(var(--vc), var(--vc)) top right / var(--vt) var(--vl),
    linear-gradient(var(--vc), var(--vc)) bottom left / var(--vl) var(--vt),
    linear-gradient(var(--vc), var(--vc)) bottom left / var(--vt) var(--vl),
    linear-gradient(var(--vc), var(--vc)) bottom right / var(--vl) var(--vt),
    linear-gradient(var(--vc), var(--vc)) bottom right / var(--vt) var(--vl);
  background-repeat: no-repeat;
}
/* --tight sits ON the photo, so its brackets stay white */
.viewfinder--tight::after { inset: 10px; --vc: rgba(255,255,255,.92); }
.vf-hud {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; padding: clamp(.8rem, 2vw, 1.25rem);
  display: flex; flex-direction: column; justify-content: space-between;
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: #fff;
  text-shadow: 0 1px 8px rgba(0,0,0,.6);
}
.vf-hud__row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.vf-hud__cross { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; translate: -50% -50%; opacity: .6;
  background: linear-gradient(#fff, #fff) center / 100% 1px no-repeat, linear-gradient(#fff, #fff) center / 1px 100% no-repeat; }

/* REC dot + timecode */
.rec { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--f-mono); font-weight: 500; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; }
.rec__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c-signal); box-shadow: 0 0 0 0 rgba(255,59,47,.6); animation: rec-pulse 1.6s ease-in-out infinite; flex: none; }
.timecode { font-family: var(--f-mono); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: .08em; }

/* Glass ------------------------------------------------------------------- */
.glass {
  background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--r-glass);
  -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter);
  box-shadow: var(--glass-shadow);
}
.glass--sheen { background-image: var(--g-sheen); }

/* Card + tilt + glare ----------------------------------------------------- */
.card {
  position: relative; background: var(--c-surface); border: 1px solid var(--card-bd); border-radius: var(--r-card);
  box-shadow: var(--shadow-depth); padding: clamp(1.5rem, 3vw, 2.25rem);
  transition: var(--t-reveal), border-color var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out), transform .5s var(--ease-out);
}
.card:hover { border-color: var(--card-bd-hover); }
.card--link:hover { box-shadow: var(--shadow-depth), 0 0 0 1px rgba(224,40,28,.28); }
.tilt { transform-style: preserve-3d; transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); will-change: auto; }
.tilt.is-tilting { transition: var(--t-reveal), transform .12s linear, border-color var(--t-med), box-shadow var(--t-med); }
.tilt__glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity var(--t-med); z-index: 2;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), var(--glare), transparent 45%); }
.tilt:hover .tilt__glare { opacity: 1; }
.icon-tile {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; flex: none;
  background: var(--tile-bg); border: 1px solid var(--card-bd); color: var(--c-accent); box-shadow: var(--tile-shadow);
}
.icon-tile .icon { width: 24px; height: 24px; }

/* Bento grid -------------------------------------------------------------- */
.bento { display: grid; gap: clamp(.9rem, 2vw, 1.25rem); grid-template-columns: 1fr; }
@media (min-width: 720px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .bento { grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(220px, auto); }
  .bento > * { grid-column: span 2; }
  .bento > .bento__item--wide { grid-column: span 4; }
  .bento > .bento__item--half { grid-column: span 3; }
  .bento > .bento__item--tall { grid-row: span 2; }
}
.bento__item { display: flex; flex-direction: column; gap: 1rem; overflow: hidden; }
.bento__item h3 { margin-top: auto; }
.bento__item p { color: var(--c-text-muted); font-size: .98rem; }
.bento__media { margin: calc(-1 * clamp(1.5rem, 3vw, 2.25rem)); margin-bottom: 0; aspect-ratio: 16/9; overflow: hidden; }
.bento__media img { width: 100%; height: 100%; object-fit: cover; }

/* Feature grid ------------------------------------------------------------ */
.feature-grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.feature { display: grid; gap: 1rem; align-content: start; }
.feature h3 { font-size: 1.2rem; }
.feature p { color: var(--c-text-muted); font-size: .98rem; }

/* Layered image stack ------------------------------------------------------ */
.img-stack { position: relative; padding: 0 12% 14% 0; }
.img-stack__main, .img-stack__float { border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-depth); }
.img-stack__main img, .img-stack__float img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s var(--ease-out); }
.img-stack__main { aspect-ratio: 4/3; }
.img-stack__float { position: absolute; right: 0; bottom: 0; width: 46%; aspect-ratio: 4/5; z-index: 2; border: 6px solid var(--c-white); }
.section--dark .img-stack__float, .theme-dark .img-stack__float { border-color: var(--c-obsidian); }
.img-stack:hover .img-stack__main img { scale: 1.04; }
.img-stack__badge { position: absolute; left: clamp(-8px, -2vw, -24px); bottom: 22%; z-index: 3; padding: 1rem 1.25rem; border-radius: 16px; color: var(--c-text); max-width: 240px; }
.img-stack__badge strong { display: block; font-family: var(--f-display); font-weight: 800; font-size: 1.5rem; line-height: 1.1; letter-spacing: -0.02em; }
.img-stack__badge span { font-family: var(--f-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-muted); }
.img-stack .px-cluster { left: -14px; top: -14px; }
.media-zoom { overflow: hidden; }
.media-zoom img { transition: scale 1s var(--ease-out); }
.media-zoom:hover img, a:hover .media-zoom img, a:focus-visible .media-zoom img { scale: 1.06; }

/* Stats ----------------------------------------------------------------- */
.stats { position: relative; isolation: isolate; display: grid; gap: clamp(.75rem, 2vw, 1.25rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat { position: relative; padding: clamp(1.25rem, 2.6vw, 2rem); border-radius: 22px; display: grid; gap: .4rem; align-content: start; min-height: 170px; }
.stat__label { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-muted); }
.stat__value { font-family: var(--f-display); font-weight: 800; font-size: clamp(2.3rem, 1.2rem + 3.4vw, 4.4rem); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: .05em; margin-top: auto; }
.stat__unit { color: var(--c-accent); }
.stat__desc { font-size: .92rem; color: var(--c-text-muted); line-height: 1.5; }
.stat__node { position: absolute; top: clamp(1.25rem, 2.6vw, 2rem); right: clamp(1.25rem, 2.6vw, 2rem); width: 10px; height: 10px; background: var(--c-signal); box-shadow: 0 0 14px rgba(255,59,47,.6); }
.growth-line { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: -1; }
.growth-line path, .growth-path { fill: none; stroke: var(--c-signal); stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; vector-effect: non-scaling-stroke; }
.growth-line .growth-line__ghost { stroke: var(--line-strong); stroke-dasharray: 2 6; }

/* Marquee --------------------------------------------------------------- */
.marquee { position: relative; overflow: hidden; display: flex; user-select: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; flex: none; align-items: center; gap: clamp(1.5rem, 3vw, 3rem); padding-right: clamp(1.5rem, 3vw, 3rem); animation: marquee var(--marquee-d, 38s) linear infinite; }
.marquee:hover .marquee__track, .marquee.is-paused .marquee__track { animation-play-state: paused; }
.marquee--reverse .marquee__track { animation-direction: reverse; }
.marquee__item { font-family: var(--f-display); font-weight: 800; font-size: clamp(2.2rem, 1rem + 5vw, 6rem); line-height: 1.1; letter-spacing: -0.03em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.5px var(--line-input); transition: color var(--t-med), -webkit-text-stroke-color var(--t-med); }
a.marquee__item:hover, .marquee__item:hover { color: var(--c-text); -webkit-text-stroke-color: var(--c-text); }
.marquee__sep { display: grid; grid-template-columns: repeat(2, 12px); gap: 4px; flex: none; }
.marquee__sep span { width: 12px; height: 12px; background: var(--c-signal-btn); }
.marquee__sep span:nth-child(2) { opacity: .5; } .marquee__sep span:nth-child(3) { opacity: 0; } .marquee__sep span:nth-child(4) { opacity: .25; background: var(--pixel); }

/* Horizontal reel --------------------------------------------------------- */
.reel { position: relative; }
.reel__viewport { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding-block: 1rem 2.5rem; cursor: grab; }
.reel__viewport::-webkit-scrollbar { display: none; }
.reel__viewport.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.reel__viewport.is-dragging * { pointer-events: none; }
.reel__track { display: flex; gap: clamp(1rem, 2.4vw, 2rem); padding-inline: var(--gutter); width: max-content; }
@media (min-width: 1400px) { .reel__track { padding-inline: calc((100vw - var(--container)) / 2); } }
.reel-card { position: relative; flex: none; width: clamp(280px, 40vw, 600px); scroll-snap-align: center; display: grid; gap: 1.1rem; }
.reel-card__media { position: relative; display: block; border-radius: var(--r-card); overflow: hidden; aspect-ratio: 4/3; background: var(--c-bg-alt); box-shadow: var(--shadow-depth); }
.reel-card__media img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.1s var(--ease-out), filter .6s; filter: saturate(.92); }
.reel-card__media:hover img, .reel-card__media:focus-visible img { scale: 1.06; filter: saturate(1.05); }
/* tags on photos: dark glass chip, white text (independent of theme) */
.reel-card__media .tag { position: absolute; left: 1rem; top: 1rem; z-index: 2; color: #fff; border-color: rgba(255,255,255,.22); background: rgba(10,10,12,.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.reel-card__play { position: absolute; right: 1rem; bottom: 1rem; z-index: 2; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; color: var(--c-ink); background: rgba(255,255,255,.82); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 8px 20px -8px rgba(10,10,12,.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background-color var(--t-med), color var(--t-med), transform var(--t-med) var(--ease-out); }
.reel-card__media:hover .reel-card__play, a:is(:hover, :focus-visible) > .reel-card__play { background: var(--c-signal-btn); border-color: var(--c-signal-btn); color: #fff; transform: scale(1.08); }
.reel-card__meta { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.reel-card__index { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .14em; color: var(--c-text-muted); }
.reel-card h3 { font-size: clamp(1.1rem, 1rem + .6vw, 1.45rem); }
.reel-card p { color: var(--c-text-muted); font-size: .96rem; max-width: 52ch; }
.reel-card--end { width: clamp(240px, 26vw, 360px); align-content: center; }
.reel-card--end a { display: grid; place-items: center; gap: 1rem; aspect-ratio: 3/4; border-radius: var(--r-card); border: 1px dashed var(--line-input); text-align: center; padding: 2rem; transition: border-color var(--t-med), background-color var(--t-med); }
.reel-card--end a:hover { border-color: var(--c-signal-btn); background: rgba(224,40,28,.05); }
.reel__controls { display: flex; align-items: center; gap: .75rem; }
.reel__controls .link { white-space: nowrap; }
@media (max-width: 559px) { .reel__progress { display: none; } .reel__controls .link { margin-left: auto; } }
.reel__progress { flex: 1; height: 2px; background: var(--line); position: relative; overflow: hidden; min-width: 80px; }
.reel__progress span { position: absolute; inset: 0; background: var(--c-signal-btn); transform-origin: left; transform: scaleX(var(--p, .1)); transition: transform .2s linear; }
.icon-btn { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--c-text); background: transparent; transition: background-color var(--t-med), border-color var(--t-med), color var(--t-med), transform var(--t-med) var(--ease-out); flex: none; }
.icon-btn:hover { background: var(--c-text); color: var(--c-bg); border-color: var(--c-text); }
.icon-btn .icon { width: 20px; height: 20px; }

/* Process timeline ---------------------------------------------------------- */
.timeline { position: relative; --p: 0; }
.timeline__steps { position: relative; display: grid; gap: 2.25rem; padding-left: 44px; }
.timeline__rail { position: absolute; left: 13px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.timeline__fill { position: absolute; inset: 0; background: var(--c-signal-btn); transform-origin: top; transform: scaleY(var(--p)); }
.timeline__step { position: relative; display: grid; gap: .5rem; }
.timeline__node { position: absolute; left: -44px; top: 2px; width: 28px; height: 28px; display: grid; place-items: center; background: var(--c-surface); border: 2px solid var(--line-strong); transition: background-color .4s, border-color .4s, box-shadow .4s, transform .5s var(--ease-spring); }
.timeline__node::after { content: ""; width: 8px; height: 8px; background: var(--line-strong); transition: background-color .4s; }
.timeline__step.is-active .timeline__node { border-color: var(--c-signal-btn); background: var(--c-signal-btn); box-shadow: 0 0 0 6px rgba(224,40,28,.12), 0 8px 24px -4px rgba(224,40,28,.55); transform: rotate(45deg); }
.timeline__step.is-active .timeline__node::after { background: #fff; }
.timeline__num { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .14em; color: var(--c-text-muted); }
.timeline__step h3 { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); transition: color .4s; }
.timeline__step p { color: var(--c-text-muted); font-size: .98rem; max-width: 40ch; }
@media (min-width: 1024px) {
  .timeline__steps { grid-template-columns: repeat(5, 1fr); padding-left: 0; padding-top: 64px; gap: 2rem; }
  .timeline__rail { left: 0; right: 0; top: 13px; bottom: auto; width: auto; height: 2px; }
  .timeline__fill { transform-origin: left; transform: scaleX(var(--p)); }
  .timeline__node { left: 0; top: -64px; }
}

@media (min-width: 1024px) {
  .timeline--4 .timeline__steps { grid-template-columns: repeat(4, 1fr); }
  .timeline--3 .timeline__steps { grid-template-columns: repeat(3, 1fr); }
}

/* Reviews ------------------------------------------------------------------ */
.reviews-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 2rem; margin-bottom: 2rem; }
.reviews-score { display: flex; align-items: center; gap: 1rem; }
.reviews-score__g { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 14px; background: #fff; border: 1px solid var(--card-bd); box-shadow: var(--shadow-soft); flex: none; }
.reviews-score__g svg { width: 30px; height: 30px; }
.reviews-score__meta { display: grid; gap: .25rem; }
.reviews-score__title { font-weight: 700; font-size: 1.05rem; }
.reviews-score__note { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-text-muted); }
.stars { display: inline-flex; gap: 3px; color: #F2A900; }
.stars .icon { width: 16px; height: 16px; }
.stars--empty { color: var(--line-strong); }
.tabs { position: relative; display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; padding: .35rem; border-radius: 14px; background: var(--c-surface); border: 1px solid var(--card-bd); box-shadow: var(--tile-shadow); margin-bottom: 1.75rem; -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); mask-image: linear-gradient(90deg, #000 90%, transparent); }
@media (min-width: 1100px) { .tabs { -webkit-mask-image: none; mask-image: none; } }
.tabs::-webkit-scrollbar { display: none; }
.tab { position: relative; z-index: 1; flex: none; min-height: 44px; padding: .55rem 1rem; border-radius: 10px; font-weight: 700; font-size: .9rem; color: var(--c-text-muted); white-space: nowrap; transition: color var(--t-med); }
.tab:hover { color: var(--c-text); }
.tab[aria-selected="true"] { color: #fff; }
.tabs__indicator { position: absolute; z-index: 0; top: .35rem; bottom: .35rem; left: 0; width: var(--tw, 0); transform: translateX(var(--tx, 0)); border-radius: 10px; background: var(--c-signal-btn); box-shadow: var(--glow-signal); transition: transform .45s var(--ease-out), width .45s var(--ease-out); }
.carousel { position: relative; }
.carousel__viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; border-radius: var(--r-card); outline-offset: 6px; padding: 4px 4px 40px; margin: -4px -4px -36px; }
.carousel__viewport::-webkit-scrollbar { display: none; }
.carousel__track { display: flex; gap: 1.25rem; }
.carousel__track > * { flex: 0 0 100%; scroll-snap-align: start; }
@media (min-width: 720px) { .carousel__track > * { flex-basis: calc((100% - 1.25rem) / 2); } }
@media (min-width: 1100px) {
  .carousel__track > * { flex-basis: calc((100% - 2.5rem) / 3); }
  /* service pages show two filtered reviews: fill the row instead of leaving a gap */
  .carousel__track:has(> :nth-child(2):last-child) > * { flex-basis: calc((100% - 1.25rem) / 2); }
}
.carousel__controls { display: flex; align-items: center; gap: .75rem; margin-top: 1.5rem; }
.carousel__count { font-family: var(--f-mono); font-size: .78rem; letter-spacing: .14em; color: var(--c-text-muted); min-width: 6ch; }
.carousel__bar { flex: 1; height: 2px; background: var(--line); position: relative; overflow: hidden; }
.carousel__bar span { position: absolute; inset: 0; background: var(--c-signal-btn); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform .4s var(--ease-out); }
.review-card { display: flex; flex-direction: column; gap: 1rem; height: 100%; padding: 1.6rem; border-radius: var(--r-card); background: var(--c-surface); border: 1px solid var(--card-bd); box-shadow: var(--shadow-soft); }
.review-card__head { display: flex; align-items: center; gap: .85rem; }
.avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; font-family: var(--f-display); font-weight: 600; font-size: 1rem; color: #fff; background: hsl(var(--h, 8) 55% 30%); box-shadow: inset 0 0 0 2px rgba(255,255,255,.12); }
.review-card__who { min-width: 0; flex: 1; }
.review-card__name { font-weight: 700; line-height: 1.3; }
.review-card__date { font-size: .82rem; color: var(--c-text-muted); line-height: 1.3; }
.review-card__g { width: 22px; height: 22px; flex: none; }
.review-card__text { color: var(--c-text-soft); font-size: .98rem; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.review-card__text.is-expanded { -webkit-line-clamp: unset; display: block; }
.review-card__more { align-self: flex-start; min-height: 44px; font-weight: 700; font-size: .9rem; color: var(--c-accent); }
.review-card__more:hover { text-decoration: underline; text-underline-offset: 4px; }
.review-card__foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; }
.reviews-empty { padding: 2.5rem; text-align: center; color: var(--c-text-muted); border: 1px dashed var(--line-input); border-radius: var(--r-card); }

/* FAQ accordion (also used by the mobile Services accordion & role cards) -- */
.collapse { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease-out); }
.collapse > * { overflow: hidden; min-height: 0; }
.collapse.is-open { grid-template-rows: 1fr; }
.faq { display: grid; gap: .75rem; }
.faq__item { border-radius: 16px; background: var(--c-surface); border: 1px solid var(--card-bd); box-shadow: var(--shadow-soft); transition: border-color var(--t-med); }
.faq__item:has(.is-open) { border-color: rgba(224,40,28,.35); }
.faq__q { font-family: var(--f-body); letter-spacing: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.2rem 1.4rem; min-height: 64px; text-align: left; font-weight: 700; font-size: 1.05rem; line-height: 1.4; }
.faq__icon { position: relative; width: 28px; height: 28px; flex: none; border-radius: 50%; border: 1px solid var(--line-strong); transition: background-color var(--t-med), border-color var(--t-med), transform var(--t-med) var(--ease-out); }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; background: currentColor; translate: -50% -50%; transition: rotate var(--t-med) var(--ease-out); }
.faq__icon::after { rotate: 90deg; }
.faq__q[aria-expanded="true"] .faq__icon { background: var(--c-signal-btn); border-color: var(--c-signal-btn); color: #fff; }
.faq__q[aria-expanded="true"] .faq__icon::after { rotate: 0deg; }
.faq__a > div > div { padding: 0 1.4rem 1.4rem; color: var(--c-text-muted); max-width: 72ch; }

/* Related services cards -------------------------------------------------- */
.related { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.service-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; height: 100%; }
.service-card__media { aspect-ratio: 16/10; overflow: hidden; }
.service-card__media img { width: 100%; height: 100%; object-fit: cover; }
.service-card__body { display: grid; gap: .8rem; padding: 1.5rem; align-content: start; flex: 1; }
.service-card__body p { color: var(--c-text-muted); font-size: .95rem; }
.service-card__body .link { margin-top: auto; }

/* CTA band (stays a saturated red "night shoot" moment) ---------------------- */
.cta-band { position: relative; overflow: hidden; isolation: isolate; /* starts at signal-btn so white copy keeps >= 4.5:1 */ background: linear-gradient(135deg, var(--c-signal-btn) 0%, #C4221A 55%, #8E1810 100%); color: #fff; padding-block: clamp(5rem, 11vw, 10rem); }
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .22; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.cta-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 80% at 85% 10%, rgba(255,255,255,.18), transparent 60%), radial-gradient(50% 70% at 0% 100%, rgba(0,0,0,.35), transparent 70%); }
.cta-band__title { font-size: var(--fs-display); font-weight: 800; line-height: .92; letter-spacing: -0.04em; }
.cta-band__lead { font-size: var(--fs-lead); max-width: 52ch; color: #fff; }
.cta-band .eyebrow { color: #fff; }
.cta-band .eyebrow::before { background: #fff; box-shadow: 10px -10px 0 -1px rgba(255,255,255,.5); }
.cta-band .growth-line path { stroke: rgba(255,255,255,.85); }
.cta-band .growth-line { z-index: -1; opacity: .7; }
.cta-band :focus-visible { outline-color: #fff; box-shadow: 0 0 0 6px rgba(255,255,255,.25); }

/* Forms -------------------------------------------------------------------- */
.form-panel { position: relative; padding: clamp(1.5rem, 4vw, 3rem); }
.form-grid { display: grid; gap: 1.1rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .span-2 { grid-column: 1 / -1; } }
.field { position: relative; display: grid; }
.field__control {
  width: 100%; min-height: 60px; padding: 1.6rem 1rem .55rem; border-radius: var(--r-btn);
  background: var(--c-surface); border: 1px solid var(--line-input); color: var(--c-text); font-size: 1rem; line-height: 1.4;
  box-shadow: inset 0 1px 2px rgba(10,10,12,.04);
  transition: border-color var(--t-med), box-shadow var(--t-med), background-color var(--t-med); appearance: none; -webkit-appearance: none;
}
textarea.field__control { min-height: 150px; resize: vertical; }
select.field__control { padding-right: 2.75rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%235A5A63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; background-size: 18px; }
select.field__control option { background: var(--c-surface); color: var(--c-text); }
.field__control:hover { border-color: var(--c-text-muted); }
.field__control:focus { border-color: var(--c-signal-btn); box-shadow: 0 0 0 4px rgba(224,40,28,.14), 0 10px 24px -12px rgba(224,40,28,.45); background-color: var(--c-surface); outline: none; }
.field__label { position: absolute; left: 1rem; top: 1.15rem; pointer-events: none; color: var(--c-text-muted); font-size: 1rem; transform-origin: left top; transition: transform var(--t-med) var(--ease-out), color var(--t-med), font-size var(--t-med); }
.field__control:focus + .field__label,
.field__control:not(:placeholder-shown) + .field__label,
.field--select .field__label, .field--static .field__label {
  transform: translateY(-.72rem); font-family: var(--f-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-muted);
}
.field__control:focus + .field__label { color: var(--c-accent); }
.field__control::placeholder { color: transparent; }
.field__error { min-height: 0; font-size: .85rem; color: var(--c-error); margin-top: .35rem; font-weight: 500; }
.field__error:empty { display: none; }
.field.is-invalid .field__control { border-color: var(--c-error); box-shadow: 0 0 0 3px rgba(179,38,30,.1); }
.field.is-valid .field__control { border-color: var(--c-text-muted); }
.field--phone { display: grid; grid-template-columns: 112px 1fr; gap: .5rem; }
.field--phone .field__error { grid-column: 1 / -1; }
.field--phone .field__label { left: calc(112px + .5rem + 1rem); }
.field--phone select.field__control { padding-block: .55rem; }
.field__hint { font-size: .82rem; color: var(--c-text-muted); margin-top: .35rem; }
.check { position: relative; display: flex; align-items: flex-start; gap: .85rem; font-size: .92rem; line-height: 1.55; color: var(--c-text-muted); cursor: pointer; }
.check input { position: absolute; opacity: 0; width: 24px; height: 24px; margin: 0; cursor: pointer; }
.check__box { position: relative; width: 24px; height: 24px; flex: none; border-radius: 6px; border: 1.5px solid var(--line-input); background: var(--c-surface); display: grid; place-items: center; transition: background-color var(--t-med), border-color var(--t-med); margin-top: 1px; }
.check__box svg { width: 16px; height: 16px; stroke: #fff; stroke-width: 3; fill: none; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .35s var(--ease-out) .05s; }
.check input:checked + .check__box { background: var(--c-signal-btn); border-color: var(--c-signal-btn); }
.check input:checked + .check__box svg { stroke-dashoffset: 0; }
.check input:focus-visible + .check__box { outline: 2px solid var(--focus); outline-offset: 3px; }
.check a { color: var(--c-text); text-decoration: underline; text-underline-offset: 3px; }
.hp-field { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { font-size: .92rem; color: var(--c-error); }
.form-status:empty { display: none; }
.form-status a { color: var(--c-text); text-decoration: underline; }
.form-note { font-size: .82rem; color: var(--c-text-muted); }
.form-success { display: grid; justify-items: center; text-align: center; gap: 1rem; padding: clamp(2rem, 6vw, 4rem) 1rem; }
.form-success svg { width: 96px; height: 96px; }
.form-success circle, .form-success path { fill: none; stroke: var(--c-signal-btn); stroke-width: 3; stroke-linecap: square; }
.form-success circle { stroke: var(--line); stroke-width: 2; }
.form-success path { stroke-dasharray: 120; stroke-dashoffset: 120; }
.form-success.is-shown path { animation: draw 1s var(--ease-out) .2s forwards; }
.form-success h3 { font-size: clamp(1.4rem, 1rem + 1.4vw, 2rem); }
.form-success p { color: var(--c-text-muted); max-width: 44ch; }
/* File input */
.file-input { position: relative; display: flex; align-items: center; gap: 1rem; min-height: 72px; padding: 1rem; border-radius: var(--r-btn); border: 1px dashed var(--line-input); background: var(--c-surface); transition: border-color var(--t-med), background-color var(--t-med); }
.file-input:hover, .file-input:focus-within { border-color: var(--c-signal-btn); background: rgba(224,40,28,.04); }
.file-input input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.file-input__text { display: grid; gap: .1rem; font-size: .92rem; }
.file-input__text strong { font-weight: 700; }
.file-input__text span { color: var(--c-text-muted); font-size: .82rem; }

/* Careers role cards ---------------------------------------------------- */
.roles { display: grid; gap: 1rem; }
.role { padding: 0; overflow: hidden; }
.role__head { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; padding: 1.4rem 1.5rem; text-align: left; min-height: 80px; }
.role__title { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.05rem, 1rem + .6vw, 1.4rem); letter-spacing: -0.02em; flex: 1 1 260px; }
.role__toggle { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; transition: transform var(--t-med) var(--ease-out), background-color var(--t-med), color var(--t-med); }
.role__head[aria-expanded="true"] .role__toggle { transform: rotate(180deg); background: var(--c-signal-btn); border-color: var(--c-signal-btn); color: #fff; }
.role__body > div > div { padding: 0 1.5rem 1.5rem; display: grid; gap: 1rem; color: var(--c-text-muted); }
.badge { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: 999px; font-family: var(--f-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; background: var(--c-surface); border: 1px solid var(--line); color: var(--c-text); white-space: nowrap; }
.badge--remote { color: var(--c-success); border-color: color-mix(in srgb, var(--c-success) 35%, transparent); background: color-mix(in srgb, var(--c-success) 7%, transparent); }
.badge--location { color: var(--c-text); }
.badge .icon { width: 13px; height: 13px; }
/* Role chips (home teaser) */
.role-chips { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.role-chip { position: relative; display: grid; gap: 1.25rem; padding: 1.5rem; border-radius: var(--r-card); background: var(--c-surface); border: 1px solid var(--card-bd); box-shadow: var(--shadow-soft); color: var(--c-text); transition: var(--t-reveal), transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .45s; min-height: 190px; }
.role-chip:hover, .role-chip:focus-visible { transform: translateY(-6px); box-shadow: 0 2px 4px rgba(10,10,12,.06), 0 24px 50px -20px rgba(10,10,12,.35); border-color: rgba(196,34,26,.35); }
.role-chip .badge { justify-self: start; }
.role-chip__title { font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.02em; line-height: 1.2; }
.role-chip__foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.role-chip__arrow { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--c-text); color: var(--c-bg); transition: background-color var(--t-med), transform var(--t-med) var(--ease-out); }
.role-chip:hover .role-chip__arrow { background: var(--c-signal-btn); color: #fff; transform: rotate(-45deg); }
.role-chip .px-cluster { right: 1.25rem; top: 1.25rem; }
.role-chip .px-cluster span { background: var(--c-signal-btn); }
.role-chip .px-cluster span:nth-child(3) { background: var(--pixel); }

/* Filter chips + grid ---------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.chip { min-height: 44px; padding: .5rem 1.1rem; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--c-surface); font-weight: 700; font-size: .9rem; color: var(--c-text-muted); transition: background-color var(--t-med), color var(--t-med), border-color var(--t-med); }
.chip:hover { color: var(--c-text); border-color: var(--c-text-muted); }
.chip[aria-pressed="true"] { background: var(--c-signal-btn); border-color: var(--c-signal-btn); color: #fff; box-shadow: var(--glow-signal); }
.filter-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.filter-grid > [hidden] { display: none !important; }

/* Lightbox (markup created by JS) — stays dark for media viewing ------------ */
.lightbox { position: fixed; inset: 0; z-index: var(--z-lightbox); display: grid; place-items: center; padding: clamp(1rem, 4vw, 3rem); color: var(--c-text); background: rgba(5,5,7,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transition: opacity .35s var(--ease-out); }
.lightbox.is-open { opacity: 1; }
.lightbox__figure { margin: 0; display: grid; gap: 1rem; justify-items: center; max-width: min(1200px, 100%); }
.lightbox__img { max-height: 78vh; width: auto; border-radius: 12px; box-shadow: var(--shadow-depth); scale: .96; transition: scale .5s var(--ease-out); }
.lightbox.is-open .lightbox__img { scale: 1; }
.lightbox__caption { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-text-muted); text-align: center; }
.lightbox__close { position: absolute; top: 1rem; right: 1rem; }
.lightbox__nav { position: absolute; top: 50%; translate: 0 -50%; }
.lightbox__prev { left: 1rem; } .lightbox__next { right: 1rem; }
.lightbox .icon-btn { background: rgba(20,20,24,.7); }
.lightbox .icon-btn:hover { background: var(--c-ivory); color: var(--c-ink); }

/* Contact cards ---------------------------------------------------------- */
.contact-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.contact-card { display: grid; gap: .9rem; align-content: start; padding: 1.6rem; border-radius: var(--r-card); background: var(--c-surface); border: 1px solid var(--card-bd); box-shadow: var(--shadow-soft); transition: var(--t-reveal), border-color var(--t-med), box-shadow var(--t-med), transform .45s var(--ease-out); }
a.contact-card:hover, a.contact-card:focus-visible { border-color: rgba(224,40,28,.45); box-shadow: var(--shadow-depth), 0 0 40px -14px rgba(224,40,28,.5); transform: translateY(-4px); }
.contact-card__label { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-muted); }
.contact-card__value { font-weight: 700; font-size: 1.08rem; overflow-wrap: anywhere; }
/* Map facade */
.map-facade { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16/9; min-height: 300px; border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--card-bd); background-color: var(--c-bg-alt); box-shadow: var(--shadow-soft);
  background-image: radial-gradient(var(--line-strong) 1px, transparent 1.5px), linear-gradient(115deg, transparent 40%, rgba(224,40,28,.07) 60%, transparent 75%);
  background-size: 18px 18px, 100% 100%; }
.map-facade__inner { display: grid; justify-items: center; gap: .9rem; text-align: center; padding: 1.5rem; }
.map-facade__pin { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--c-signal-btn); color: #fff; box-shadow: var(--glow-signal-lg); animation: rec-pulse 2s infinite; }
.map-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.85) contrast(1.05); }

/* 404 film slate ------------------------------------------------------------- */
.slate { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: calc(var(--header-h) + 3rem) var(--gutter) 5rem; }
.slate__svg { width: min(420px, 80vw); height: auto; margin-inline: auto; margin-bottom: 2.5rem; }
.slate__svg .slate-top { transform-origin: 18px 62px; animation: clap 2.6s var(--ease-io) infinite; }
.slate__code { font-family: var(--f-display); font-weight: 800; font-size: clamp(4rem, 14vw, 10rem); line-height: .9; letter-spacing: -0.05em; }

/* Inner-page hero + breadcrumb ------------------------------------------- */
.page-hero { position: relative; overflow: hidden; isolation: isolate; padding: calc(var(--header-h) + clamp(3rem, 7vw, 6rem)) 0 clamp(4rem, 8vw, 7rem); }
.page-hero__grid { display: grid; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
@media (min-width: 1000px) { .page-hero__grid { grid-template-columns: 7fr 5fr; } }
.page-hero h1 { font-size: clamp(2.1rem, 1rem + 3.6vw, 4.8rem); margin-block: 1.25rem 1.5rem; }
.page-hero__media { position: relative; }
.page-hero__media .media-frame { border-radius: var(--r-card); overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--shadow-depth); background: var(--c-bg-alt); }
.page-hero__media .media-frame img { width: 100%; height: 100%; object-fit: cover; animation: kenburns 22s ease-in-out infinite alternate; }
/* scrim: keeps the white HUD legible on bright photos (same recipe as the home hero frame) */
.page-hero__media .media-frame { position: relative; }
.page-hero__media:not(.vp-hero__media) .media-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(10,10,12,.38), transparent 26%, transparent 66%, rgba(10,10,12,.5)); }
.page-hero .cluster { margin-top: 2rem; }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-text-muted); }
.breadcrumb li { display: inline-flex; align-items: center; gap: .6rem; }
.breadcrumb li + li::before { content: ""; width: 6px; height: 6px; background: var(--c-signal-btn); }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; }
.breadcrumb a:hover { color: var(--c-text); }
.breadcrumb [aria-current="page"] { color: var(--c-text); }

/* Popup modal (light glass "director's note") ---------------------------- */
.popup { position: fixed; inset: 0; z-index: var(--z-popup); display: grid; place-items: center; padding: 1rem; }
.popup__backdrop { position: absolute; inset: 0; background: rgba(10,10,12,.42); -webkit-backdrop-filter: blur(8px) saturate(120%); backdrop-filter: blur(8px) saturate(120%); opacity: 0; transition: opacity .45s var(--ease-out); }
.popup__dialog { position: relative; width: min(560px, 100%); max-height: calc(100svh - 2rem); overflow-y: auto; padding: clamp(1.5rem, 5vw, 2.75rem); border-radius: var(--r-glass); color: var(--c-text);
  background: linear-gradient(160deg, rgba(255,255,255,.96), rgba(250,246,243,.92)); border: 1px solid rgba(255,255,255,.95);
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 0 0 1px rgba(10,10,12,.06), 0 2px 4px rgba(10,10,12,.06), 0 24px 60px -20px rgba(10,10,12,.35), 0 40px 100px -40px rgba(224,40,28,.45), inset 0 1px 0 #fff;
  opacity: 0; transform: scale(.92) translateY(14px); transition: opacity .45s var(--ease-out), transform .55s var(--ease-spring); }
.popup__dialog::before { content: ""; position: absolute; left: clamp(1.5rem, 5vw, 2.75rem); right: clamp(1.5rem, 5vw, 2.75rem); top: 0; height: 2px; background: linear-gradient(90deg, var(--c-signal), rgba(255,59,47,0)); }
.popup.is-open .popup__backdrop { opacity: 1; }
.popup.is-open .popup__dialog { opacity: 1; transform: none; }
.popup__dialog:focus-visible { outline: none; }
.popup__close { position: absolute; top: .9rem; right: .9rem; width: 44px; height: 44px; background: var(--c-surface); }
.popup__hud { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-bottom: 1.5rem; padding-right: 3rem; }
.live-badge { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .75rem; border-radius: 999px; background: rgba(224,40,28,.07); border: 1px solid rgba(196,34,26,.35); color: var(--c-accent); font-family: var(--f-mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; }
.popup__hud .timecode { font-size: .78rem; color: var(--c-text-muted); }
.popup__eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--f-mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text); margin-bottom: .9rem; }
.popup__eyebrow .icon { color: var(--c-accent); width: 18px; height: 18px; }
.popup__title { font-size: clamp(1.55rem, 1rem + 2.2vw, 2.3rem); line-height: 1.05; margin-bottom: 1rem; }
.popup__body { color: var(--c-text-soft); font-size: 1rem; }
.popup__body strong { color: var(--c-text); }
.countdown { display: flex; align-items: center; gap: .5rem; margin-block: 1.5rem; }
.countdown__unit { display: grid; justify-items: center; min-width: 74px; padding: .7rem .5rem; border-radius: 12px; background: var(--c-surface); border: 1px solid var(--card-bd); box-shadow: var(--tile-shadow); }
.countdown__num { font-family: var(--f-display); font-weight: 800; font-size: 1.6rem; line-height: 1; font-variant-numeric: tabular-nums; }
.countdown__lbl { font-family: var(--f-mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-muted); margin-top: .35rem; }
.countdown__sep { font-family: var(--f-display); color: var(--c-accent); font-size: 1.4rem; }
.countdown__static { display: inline-flex; align-items: center; gap: .6rem; padding: .7rem 1rem; border-radius: 12px; background: var(--c-surface); border: 1px solid var(--card-bd); box-shadow: var(--tile-shadow); font-family: var(--f-mono); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }
.popup__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.popup__actions .btn { flex: 1 1 200px; }

/* 5. SITE CHROME =========================================================== */

/* Header: fixed (overlays the hero). Ink top bar + light nav; light glass after 80px. */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-header); transition: transform .45s var(--ease-out); color: var(--c-text); }
.site-header::before { content: ""; position: absolute; inset: 0 0 -40px; z-index: -2; pointer-events: none; background: linear-gradient(180deg, rgba(246,242,239,.92) 40%, rgba(246,242,239,0)); transition: opacity var(--t-med) var(--ease-out); }
.site-header::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; background: rgba(251,249,247,.84); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 12px 32px -18px rgba(10,10,12,.28); transition: opacity var(--t-med) var(--ease-out); }
.site-header.is-scrolled::before { opacity: 0; }
.site-header.is-scrolled::after { opacity: 1; }
.site-header.is-hidden { transform: translateY(-100%); }
body.menu-open .site-header::after { opacity: 1; background: var(--c-bg); box-shadow: none; }
body.menu-open .site-header { transform: none; }
/* Logo is white-on-transparent: render it ink on every light surface */
.site-header .brand img, .theme-light-logo img { filter: brightness(0); }
.site-footer .brand img { filter: none; }

.topbar { display: grid; grid-template-rows: 1fr; background: var(--c-bg); color: var(--c-text); transition: grid-template-rows var(--t-med) var(--ease-out), opacity var(--t-med) var(--ease-out); border-bottom: 1px solid var(--hairline); }
.topbar__inner { overflow: hidden; min-height: 0; }
.site-header.is-scrolled .topbar { grid-template-rows: 0fr; opacity: 0; border-bottom-color: transparent; }
.topbar__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: var(--topbar-h); font-size: .8rem; color: var(--c-text-muted); }
.topbar__list { display: flex; align-items: center; gap: clamp(.75rem, 2vw, 1.75rem); min-width: 0; }
.topbar__link { display: inline-flex; align-items: center; gap: .45rem; min-height: var(--topbar-h); white-space: nowrap; transition: color var(--t-fast); }
a.topbar__link:hover { color: var(--c-text); }
.topbar__link .icon { width: 14px; height: 14px; color: var(--c-accent); }
.topbar__right { display: flex; align-items: center; gap: 1rem; }
.status { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--f-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 1023px) { .status { display: none !important; } }
.status__dot { width: 7px; height: 7px; border-radius: 50%; background: #39D47A; box-shadow: 0 0 0 3px rgba(57,212,122,.18); animation: status-blink 2.4s ease-in-out infinite; }
.socials { display: flex; align-items: center; gap: .25rem; }
.socials a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--c-text-muted); transition: color var(--t-fast), background-color var(--t-fast), border-color var(--t-fast); }
.socials a:hover { color: var(--c-text); background: var(--fill-hover); }
.socials .icon { width: 18px; height: 18px; }
.socials--sm a { width: 40px; height: var(--topbar-h); border-radius: 8px; }
.socials--sm .icon { width: 15px; height: 15px; }
.socials--lg a { width: 48px; height: 48px; border: 1px solid var(--line-strong); }
.socials--lg a:hover { background: var(--c-text); color: var(--c-bg); border-color: var(--c-text); }
@media (max-width: 767px) { .hide-sm { display: none !important; } .socials--sm a { width: 44px; } }

.navbar { position: relative; }
.navbar__row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: var(--nav-h); transition: height var(--t-med) var(--ease-out); }
.site-header.is-scrolled .navbar__row { height: var(--nav-h-sm); }
.brand { display: inline-flex; align-items: center; flex: none; min-height: 44px; }
.brand img { height: var(--logo-h); width: auto; transition: height var(--t-med) var(--ease-out); }
.site-header.is-scrolled .brand img { height: var(--logo-h-sm); }
.primary-nav { display: none; }
.nav-list { display: flex; align-items: center; gap: .25rem; }
.nav-link { position: relative; display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; padding: .5rem .9rem; font-weight: 500; font-size: .95rem; color: var(--c-text-soft); transition: color var(--t-fast); }
.nav-link::after { content: ""; position: absolute; left: .9rem; right: .9rem; bottom: .55rem; height: 1.5px; background: var(--c-signal-btn); transform: scaleX(0); transform-origin: left; transition: transform var(--t-med) var(--ease-out); }
.nav-link:hover, .nav-link[aria-current="page"], .nav-link[aria-expanded="true"] { color: var(--c-text); }
.nav-link[aria-current="page"] { font-weight: 700; }
.nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }
.nav-link .icon { width: 16px; height: 16px; transition: transform var(--t-med) var(--ease-out); }
.nav-link[aria-expanded="true"] .icon { transform: rotate(180deg); }
.navbar__actions { display: flex; align-items: center; gap: .75rem; }
.nav-cta { display: none; }
@media (min-width: 560px) { .nav-cta { display: inline-flex; } }
@media (min-width: 1100px) {
  .primary-nav { display: block; }
  .burger { display: none !important; }
}
.has-mega { position: static; }
/* "Services" reads as active on any service page */
.has-mega:has(.mega__tile[aria-current="page"]) > .nav-link { color: var(--c-text); font-weight: 700; }
.has-mega:has(.mega__tile[aria-current="page"]) > .nav-link::after { transform: scaleX(1); }

/* Mega menu (light glass) */
.mega { position: absolute; left: 50%; top: calc(100% - 8px); width: min(1100px, calc(100vw - 2 * var(--gutter))); padding: 1rem; translate: -50% 0;
  display: grid; grid-template-columns: 1.6fr 1fr; gap: 1rem; border-radius: var(--r-glass);
  background: var(--glass-strong); border: 1px solid var(--glass-border); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); box-shadow: var(--glass-shadow);
  opacity: 0; visibility: hidden; transform: translateY(10px) scale(.985); transform-origin: top center; transition: opacity .3s var(--ease-out), transform .4s var(--ease-out), visibility 0s linear .4s; }
.has-mega.is-open .mega { opacity: 1; visibility: visible; transform: none; transition: opacity .3s var(--ease-out), transform .4s var(--ease-out), visibility 0s; }
.mega__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }
.mega__tile { display: flex; gap: .9rem; align-items: flex-start; padding: 1rem; border-radius: 16px; transition: background-color var(--t-fast); }
.mega__tile:hover, .mega__tile:focus-visible, .mega__tile[aria-current="page"] { background: var(--fill); }
.mega__tile .icon-tile { width: 44px; height: 44px; border-radius: 10px; transition: background-color var(--t-med), color var(--t-med), border-color var(--t-med); }
.mega__tile:hover .icon-tile { background: var(--c-signal-btn); color: #fff; border-color: var(--c-signal-btn); }
.mega__name { display: block; font-weight: 700; font-size: .98rem; line-height: 1.3; }
.mega__desc { display: block; font-size: .84rem; color: var(--c-text-muted); line-height: 1.45; margin-top: .2rem; }
.mega__feature { position: relative; border-radius: 18px; overflow: hidden; min-height: 300px; background: var(--c-bg-alt); }
.mega__feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; scale: 1.06; transition: opacity .6s var(--ease-out), scale 1.2s var(--ease-out); }
.mega__feature img.is-active { opacity: 1; scale: 1; }
.mega__feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(10,10,12,.82)); }
.mega__caption { position: absolute; left: 1.25rem; right: 1.25rem; bottom: 1.1rem; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: #fff; }

/* Burger */
.burger { position: relative; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-strong); background: rgba(255,255,255,.6); display: grid; place-items: center; }
.burger span { position: absolute; left: 14px; right: 14px; height: 1.5px; background: var(--c-text); transition: transform .45s var(--ease-out), top .45s var(--ease-out); }
.burger span:nth-child(1) { top: 19px; } .burger span:nth-child(2) { top: 27px; }
.burger[aria-expanded="true"] span:nth-child(1) { top: 23px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { top: 23px; transform: rotate(-45deg); }

/* Mobile overlay menu (sibling of header, never inside it) */
.mobile-menu { position: fixed; inset: 0; z-index: var(--z-menu); background: var(--c-bg); color: var(--c-text); padding: calc(var(--header-h) + 1.5rem) var(--gutter) calc(2rem + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 2rem; visibility: hidden; opacity: 0; transition: opacity .4s var(--ease-out), visibility 0s linear .4s; }
.mobile-menu::before { content: ""; position: absolute; width: 420px; height: 420px; right: -180px; bottom: -120px; border-radius: 50%; background: radial-gradient(circle, var(--orb-signal), transparent 70%); filter: blur(60px); pointer-events: none; }
.mobile-menu.is-open { visibility: visible; opacity: 1; transition: opacity .4s var(--ease-out), visibility 0s; }
.mobile-menu .pixels { z-index: 0; }
.mobile-nav { position: relative; display: grid; }
.mobile-nav > li { border-bottom: 1px solid var(--line); opacity: 0; translate: 0 24px; transition: opacity .5s var(--ease-out), translate .6s var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms + 80ms); }
.mobile-menu.is-open .mobile-nav > li { opacity: 1; translate: none; }
.mobile-nav__link { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.35rem, 5vw, 2rem); letter-spacing: -0.02em; text-align: left; }
.mobile-nav__link[aria-current="page"] { color: var(--c-accent); }
.mobile-nav__link .icon { width: 22px; height: 22px; transition: transform var(--t-med) var(--ease-out); color: var(--c-text-muted); }
.mobile-nav__link[aria-expanded="true"] .icon { transform: rotate(180deg); color: var(--c-accent); }
.mobile-sub { display: grid; gap: .1rem; padding: 0 0 1rem; }
.mobile-sub a { display: flex; align-items: center; gap: .75rem; min-height: 48px; color: var(--c-text-muted); font-weight: 500; }
.mobile-sub a:hover, .mobile-sub a[aria-current="page"] { color: var(--c-text); }
.mobile-sub a .px { width: 6px; height: 6px; }
.mobile-menu__foot { position: relative; margin-top: auto; display: grid; gap: 1.25rem; opacity: 0; transition: opacity .5s var(--ease-out) .45s; }
.mobile-menu.is-open .mobile-menu__foot { opacity: 1; }
.mobile-menu__contact { display: grid; gap: .25rem; }
.mobile-menu__contact a { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; color: var(--c-text-muted); }
.mobile-menu__contact .icon { color: var(--c-accent); width: 18px; height: 18px; }
@media (min-width: 1100px) { .mobile-menu { display: none; } }

/* Mobile sticky action bar (<=768px) — light glass */
.action-bar { display: none; }
@media (max-width: 768px) {
  .action-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-actionbar); display: grid; grid-template-columns: 1fr 1fr; gap: .6rem;
    padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom)); background: rgba(251,249,247,.88); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); border-top: 1px solid var(--line); box-shadow: 0 -12px 30px -14px rgba(10,10,12,.22), inset 0 1px 0 rgba(255,255,255,.9);
    transition: transform .4s var(--ease-out); }
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  body.menu-open .action-bar { transform: translateY(110%); }
}
.action-bar .btn { min-height: 50px; width: 100%; }
.action-bar .btn--secondary { --btn-bg: var(--c-white); }
.action-bar .btn--secondary:hover { --btn-bg: var(--c-ink); }
.action-bar__wa { position: relative; overflow: visible !important; }
.action-bar__wa::after { display: none; }
.action-bar__wa::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--c-signal); animation: wa-pulse 2.6s ease-out infinite; pointer-events: none; }

/* Footer: the night-shoot band (dark scope tokens) */
.site-footer { position: relative; background: var(--c-bg); color: var(--c-text); overflow: hidden; isolation: isolate; }
.footer-marquee { padding-block: clamp(2.5rem, 6vw, 5rem); border-bottom: 1px solid var(--hairline); }
.footer-marquee .marquee__item { font-size: clamp(3rem, 1rem + 9vw, 10rem); -webkit-text-stroke-color: rgba(246,242,239,.4); }
.footer-marquee:hover .marquee__item { -webkit-text-stroke-color: var(--c-signal); color: transparent; }
.footer-grid { display: grid; gap: 2.5rem; padding-block: clamp(3rem, 6vw, 5rem); grid-template-columns: 1fr; }
@media (min-width: 640px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1.1fr 1.3fr; } }
.footer-brand img { height: 56px; width: auto; }
.footer-brand p { color: var(--c-text-muted); font-size: .95rem; margin-block: 1.25rem 1.5rem; max-width: 38ch; }
.footer-col h2 { font-family: var(--f-mono); font-weight: 500; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--c-text-muted); margin-bottom: 1rem; }
.footer-col ul { display: grid; gap: 0; }
.footer-col a, .footer-col li > span { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; color: rgba(246,242,239,.86); font-size: .97rem; }
.footer-col a:hover { color: var(--c-signal); }
.footer-col .icon { width: 16px; height: 16px; color: var(--c-signal); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 1.5rem; border-top: 1px solid var(--hairline); font-size: .86rem; color: var(--c-text-muted); }
.footer-bottom a { color: var(--c-text); text-decoration: underline; text-decoration-color: rgba(255,59,47,.6); text-underline-offset: 3px; display: inline-flex; min-height: 44px; align-items: center; }
.footer-bottom a:hover { color: var(--c-signal); }
.footer-bottom .timecode { font-size: .75rem; }

/* Back to top with progress ring */
.backtop { position: fixed; right: clamp(16px, 2.5vw, 28px); bottom: clamp(16px, 2.5vw, 28px); z-index: var(--z-actionbar); width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%); color: var(--c-ink); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 0 0 1px rgba(10,10,12,.06), 0 10px 24px -10px rgba(10,10,12,.35);
  opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity var(--t-med), transform var(--t-med) var(--ease-out), visibility 0s linear var(--t-med), background-color var(--t-med), color var(--t-med); }
.backtop.is-visible { opacity: 1; visibility: visible; transform: none; transition: opacity var(--t-med), transform var(--t-med) var(--ease-out), visibility 0s, background-color var(--t-med), color var(--t-med); }
.backtop:hover { background: var(--c-signal-btn); color: #fff; }
.backtop svg.backtop__ring { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); transform: rotate(-90deg); }
.backtop__ring circle { fill: none; stroke-width: 2; }
.backtop__ring .track { stroke: rgba(10,10,12,.08); }
.backtop__ring .bar { stroke: var(--c-signal-btn); stroke-dasharray: 150.8; stroke-dashoffset: calc(150.8 * (1 - var(--p, 0))); }
.backtop:hover .backtop__ring .bar { stroke: #fff; }
.backtop .icon { width: 20px; height: 20px; }
@media (max-width: 768px) { .backtop { bottom: calc(84px + env(safe-area-inset-bottom)); width: 46px; height: 46px; } }

/* Custom cursor (pointer:fine only, JS adds .has-cursor) — ink ring with a light halo so it reads on any surface */
.cursor { position: fixed; left: 0; top: 0; z-index: var(--z-cursor); pointer-events: none; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; border: 1.5px solid rgba(10,10,12,.7); box-shadow: 0 0 0 1px rgba(255,255,255,.45); display: none; place-items: center;
  transition: width .35s var(--ease-out), height .35s var(--ease-out), margin .35s var(--ease-out), background-color .35s, border-color .35s, opacity .3s; mix-blend-mode: normal; }
.has-cursor .cursor { display: grid; }
.cursor.is-hover { width: 56px; height: 56px; margin: -28px 0 0 -28px; border-color: var(--c-signal-btn); background: rgba(224,40,28,.08); }
.cursor.is-label { width: 84px; height: 84px; margin: -42px 0 0 -42px; background: var(--c-signal-btn); border-color: var(--c-signal-btn); box-shadow: 0 10px 30px -8px rgba(224,40,28,.6); }
.cursor { opacity: 0; transform: translate3d(-200px, -200px, 0); }
.cursor.is-active { opacity: 1; }
.cursor__label { font-family: var(--f-mono); font-weight: 500; font-size: .66rem; letter-spacing: .16em; color: #fff; opacity: 0; transition: opacity .2s; }
.cursor.is-label .cursor__label { opacity: 1; }

/* Film grain (multiply so it reads on light) */
.grain { position: fixed; inset: 0; z-index: var(--z-grain); pointer-events: none; overflow: hidden; opacity: .03; mix-blend-mode: multiply; }
.grain::before { content: ""; position: absolute; inset: -100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 1.2s steps(6) infinite; }

/* 6. HOME ================================================================= */
/* Hero: bright editorial set (ivory, ink brackets, red tally light) */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; padding-top: calc(var(--header-h) + clamp(1.5rem, 4vw, 3rem)); padding-bottom: clamp(2rem, 4vw, 3rem); overflow: hidden; isolation: isolate; }
/* Set grid: faint ink dot matrix, faded towards the edges */
.hero::before, .page-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: radial-gradient(rgba(10,10,12,.09) 1px, transparent 1.4px); background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(70% 60% at 65% 45%, #000 20%, transparent 75%); mask-image: radial-gradient(70% 60% at 65% 45%, #000 20%, transparent 75%); }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%; z-index: -1; background: linear-gradient(180deg, rgba(246,242,239,0), var(--c-ivory)); pointer-events: none; }
.hero__grid { flex: 1; display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
@media (min-width: 1024px) { .hero__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } }
.hero__copy { position: relative; z-index: 2; }
.hero__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.hero__kicker .rec { color: var(--c-text); padding: .35rem .7rem .35rem .6rem; border-radius: 999px; background: var(--c-surface); border: 1px solid var(--card-bd); box-shadow: var(--tile-shadow); }
.hero__kicker .timecode { font-size: .78rem; color: var(--c-text); }
.hero h1 { margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.hero__sub { font-size: var(--fs-lead); color: var(--c-text-muted); max-width: 46ch; line-height: 1.6; }
.hero__sub strong { color: var(--c-text); font-weight: 700; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: clamp(1.75rem, 4vw, 2.75rem); }
.hero__media { position: relative; }
.hero-collage { position: relative; width: 100%; aspect-ratio: 1 / 1.02; max-width: 640px; margin-inline: auto; }
.hero-frame { position: absolute; }
.hero-frame__inner { position: relative; width: 100%; height: 100%; border-radius: 16px; overflow: hidden; background: var(--c-bg-alt); box-shadow: var(--shadow-depth); }
.hero-frame__inner img { width: 100%; height: 100%; object-fit: cover; animation: kenburns 24s ease-in-out infinite alternate; }
.hero-frame--main { left: 22%; top: 4%; width: 54%; height: 86%; z-index: 2; }
.hero-frame--main .hero-frame__inner { border-radius: 10px; box-shadow: 0 2px 4px rgba(10,10,12,.08), 0 24px 50px -16px rgba(10,10,12,.4), 0 60px 120px -40px rgba(10,10,12,.45); }
/* scrim keeps the HUD (white mono text) legible over the photo */
.hero-frame--main .hero-frame__inner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,12,.35), transparent 28%, transparent 62%, rgba(10,10,12,.6)); }
.hero-frame--a { left: 0; top: 14%; width: 38%; aspect-ratio: 4/5; z-index: 1; }
.hero-frame--a .hero-frame__inner { filter: saturate(.75) contrast(.94) brightness(1.04); }
.hero-frame--b { left: 4%; bottom: 0; width: 40%; aspect-ratio: 4/3; z-index: 3; }
.hero-frame--b .hero-frame__inner { border: 5px solid var(--c-white); }
.hero-frame--c { right: 0; top: 0; width: 34%; aspect-ratio: 1/1; z-index: 1; }
.hero-frame--c .hero-frame__inner { filter: saturate(.75) contrast(.94) brightness(1.04); }
.hero-frame--d { right: 2%; bottom: 8%; width: 36%; aspect-ratio: 4/3; z-index: 3; }
.hero-frame--d .hero-frame__inner { border: 5px solid var(--c-white); }
.hero-chip { position: absolute; z-index: 4; display: flex; align-items: center; gap: .75rem; padding: .8rem 1rem; border-radius: 16px; }
.hero-chip.glass { background: rgba(255,255,255,.88); }
.hero-chip--growth { right: -2%; top: 36%; }
.hero-chip--growth svg { width: 64px; height: 30px; overflow: visible; }
.hero-chip__val { font-family: var(--f-display); font-weight: 800; font-size: 1.15rem; line-height: 1; }
.hero-chip__lbl { font-family: var(--f-mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-muted); margin-top: .25rem; }
.hero__foot { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-top: clamp(2rem, 4vw, 3rem); }
.hero__meta { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-muted); }
.hero__meta span { display: inline-flex; align-items: center; gap: .55rem; }
.hero__meta span::before { content: ""; width: 5px; height: 5px; background: var(--c-signal-btn); }
.scroll-cue { display: inline-flex; flex-direction: column; align-items: center; gap: .75rem; font-family: var(--f-mono); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--c-text-muted); min-height: 44px; }
.scroll-cue__line { position: relative; width: 1px; height: 64px; background: var(--line-strong); overflow: hidden; }
.scroll-cue__line::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--c-signal-btn); transform-origin: top; animation: scroll-line 2.2s var(--ease-io) infinite; }
.hero .orb--signal { width: 620px; height: 620px; right: -160px; top: 8%; }
.hero .orb--ivory, .hero .orb--sand { width: 560px; height: 560px; left: -220px; bottom: -120px; }
@media (max-width: 1023px) {
  .hero-collage { aspect-ratio: 1 / .9; max-width: 560px; }
  .hero-frame--main { left: 24%; width: 52%; height: 92%; top: 0; }
  .hero-chip--growth { right: 0; top: auto; bottom: 34%; }
}
@media (max-width: 560px) {
  .hero-frame--d, .hero-frame--c { display: none; }
  .hero-frame--main { left: 30%; width: 62%; }
  .hero-frame--a { left: 0; width: 40%; top: 8%; }
  .hero-frame--b { width: 50%; left: 0; }
  .hero-chip { padding: .6rem .75rem; }
  .hero-chip--growth { right: -4px; bottom: 6%; }
  .hero__ctas .btn { flex: 1 1 100%; }
  .scroll-cue { display: none; }
}

/* Stats strip */
.stats-strip { position: relative; padding-block: clamp(3rem, 6vw, 5rem) clamp(4rem, 8vw, 7rem); }
.stats-strip__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem 2rem; margin-bottom: 2rem; }
.stats-strip__head p { max-width: 52ch; color: var(--c-text-muted); }

/* About intro */
.fact-list { display: grid; gap: 0; margin-block: 2rem; border-top: 1px solid var(--line-strong); }
.fact-list li { display: flex; justify-content: space-between; gap: 1rem; padding-block: .9rem; border-bottom: 1px solid var(--line); font-size: .98rem; }
.fact-list li span:first-child { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-muted); padding-top: .2rem; }
.fact-list li span:last-child { font-weight: 700; text-align: right; }

/* Sticky-stacking service cards */
.stack-cards { display: grid; gap: 1.25rem; }
.stack-card { position: relative; display: grid; overflow: hidden; padding: 0; border-radius: 24px; background: var(--stack-bg); transform-origin: center top; }
.stack-card__body { display: grid; gap: 1.1rem; align-content: start; padding: clamp(1.5rem, 3.5vw, 3rem); }
.stack-card__top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.stack-card__num { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .16em; color: var(--c-text-muted); }
.stack-card__num b { color: var(--c-accent); font-weight: 500; }
.stack-card h3 { font-size: clamp(1.6rem, 1rem + 2.4vw, 3.1rem); line-height: 1; letter-spacing: -0.03em; }
.stack-card p { color: var(--c-text-muted); max-width: 48ch; font-size: 1.02rem; }
.stack-card .chip-list { margin-top: .25rem; }
.stack-card__media { position: relative; min-height: 240px; overflow: hidden; }
.stack-card__media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; transition: scale 1.2s var(--ease-out); }
.stack-card__media::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(10,10,12,.4), transparent 35%); }
.stack-card:hover .stack-card__media img { scale: 1.05; }
.stack-card__media .vf-hud { padding: 1.1rem; }
.stack-card .link { margin-top: .5rem; }
@media (min-width: 900px) {
  .stack-card { grid-template-columns: 1.05fr 1fr; min-height: min(560px, 72vh); }
  .stack-card__body { padding-block: clamp(2rem, 4vw, 3.5rem); }
  .stack-card__body .link { margin-top: auto; }
}
@media (min-width: 1024px) {
  .stack-cards { gap: 0; }
  /* JS --br goes 1 → .55 as a card gets covered; remap to a gentler daylight dim (1 → .8) */
  .stack-card { position: sticky; top: calc(var(--nav-h-sm) + 24px + var(--i, 0) * 18px); margin-bottom: 9vh; transform: scale(var(--sc, 1)); filter: brightness(calc(.45 + var(--br, 1) * .55)); transition: var(--t-reveal), filter .2s linear; }
  .stack-card:last-child { margin-bottom: 0; }
}

#services { padding-bottom: clamp(3rem, 5vw, 5rem); }

/* Why choose us */
.why { overflow: hidden; }
.why .orb--signal { width: 560px; height: 560px; left: -200px; top: 20%; }
.why .orb--ivory, .why .orb--sand { width: 520px; height: 520px; right: -160px; bottom: 0; }
@media (min-width: 640px) { .why .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .why .feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.why-card { position: relative; padding: clamp(1.5rem, 3vw, 2.25rem); display: grid; gap: 1rem; align-content: start; border-radius: 22px; min-height: 260px; transition: var(--t-reveal), border-color var(--t-med), transform .5s var(--ease-out); }
.why-card:hover { border-color: rgba(224,40,28,.3); }
.why-card__num { position: absolute; right: 1.5rem; top: 1.4rem; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .14em; color: var(--c-text-muted); }
.why-card h3 { font-size: 1.22rem; margin-top: .75rem; }
.why-card p { color: var(--c-text-muted); font-size: .98rem; }

/* Careers teaser */
.careers-teaser__head { display: grid; gap: 1.5rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 900px) { .careers-teaser__head { grid-template-columns: 7fr 5fr; align-items: end; } }

/* Inquiry */
.inquiry { overflow: hidden; }
.inquiry .orb--signal { width: 600px; height: 600px; right: -260px; top: 0; opacity: .45; }
.contact-list { display: grid; gap: .25rem; margin-top: 2rem; }
.contact-list a, .contact-list li > span { display: flex; align-items: center; gap: 1rem; min-height: 56px; padding-block: .4rem; border-bottom: 1px solid var(--line); transition: color var(--t-fast); }
.contact-list a:hover { color: var(--c-accent); }
.contact-list .icon-tile { width: 44px; height: 44px; }
.contact-list small { display: block; font-family: var(--f-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-muted); }

/* 8. MOTION ================================================================ */
/* Reveal utilities (JS adds .js to <html> and .is-in when in view) */
:where(.js) [data-reveal] { opacity: 0; translate: 0 32px; transition: var(--t-reveal); }
:where(.js) [data-reveal="fade"] { translate: none; }
:where(.js) [data-reveal="left"] { translate: -48px 0; }
:where(.js) [data-reveal="right"] { translate: 48px 0; }
:where(.js) [data-reveal="clip"] { opacity: 1; translate: none; clip-path: inset(0 0 100% 0); transition: clip-path 1.2s var(--ease-io) var(--rd, 0ms); }
:where(.js) [data-reveal="clip-x"] { opacity: 1; translate: none; clip-path: inset(0 100% 0 0); transition: clip-path 1.2s var(--ease-io) var(--rd, 0ms); }
:where(.js) [data-reveal].is-in { opacity: 1; translate: none; }
:where(.js) [data-reveal="clip"].is-in, :where(.js) [data-reveal="clip-x"].is-in { clip-path: inset(0 0 0 0); }
:where(.js) [data-reveal="stagger"] { opacity: 1; translate: none; }
:where(.js) [data-reveal="stagger"] > * { opacity: 0; translate: 0 28px; --rd: calc(var(--i, 0) * 60ms + var(--rd0, 0ms)); transition: var(--t-reveal); }
:where(.js) [data-reveal="stagger"].is-in > * { opacity: 1; translate: none; }
/* Line-draw for growth SVGs: JS sets --len on each [data-draw] path */
:where(.js) [data-draw] { stroke-dasharray: var(--len, 1000); stroke-dashoffset: var(--len, 1000); transition: stroke-dashoffset 2.2s var(--ease-io) var(--rd, 0ms); }
:where(.js) .is-in [data-draw], :where(.js) [data-draw].is-in { stroke-dashoffset: 0; }
/* Word split (data-split) */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; padding-right: .02em; }
.w__i { display: inline-block; transform: translateY(110%); transition: transform 1.1s var(--ease-out); transition-delay: calc(var(--wi, 0) * 70ms + 120ms); }
.is-split.is-in .w__i { transform: none; }
:where(.js) [data-split]:not(.is-split) { opacity: 0; }
/* Hero entrance helpers */
:where(.js) [data-enter] { opacity: 0; translate: 0 18px; transition: opacity .9s var(--ease-out) var(--ed, 0ms), translate .9s var(--ease-out) var(--ed, 0ms); }
:where(.js.is-loaded) [data-enter] { opacity: 1; translate: none; }
:where(.js) .nav-list > li { opacity: 0; translate: 0 -12px; transition: opacity .6s var(--ease-out), translate .6s var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms + 200ms); }
:where(.js.is-loaded) .nav-list > li { opacity: 1; translate: none; }
:where(.js) .brand { opacity: 0; transition: opacity 1s var(--ease-out) .1s; }
:where(.js.is-loaded) .brand { opacity: 1; }

@keyframes marquee { to { transform: translateX(-100%); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes rec-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,59,47,.55); opacity: 1; } 50% { box-shadow: 0 0 0 7px rgba(255,59,47,0); opacity: .55; } }
@keyframes status-blink { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes wa-pulse { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.12, 1.35); } }
@keyframes kenburns { from { transform: scale(1.12) translate3d(-1.5%, -1%, 0); } to { transform: scale(1.02) translate3d(1%, 1%, 0); } }
@keyframes pixel-bob { from { transform: translate3d(0, 0, 0) rotate(0); } to { transform: translate3d(var(--dx, 12px), var(--dy, -28px), 0) rotate(var(--rot, 0deg)); } }
@keyframes orb-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(60px, -40px, 0) scale(1.12); } }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-6%, 4%); } 40% { transform: translate(5%, -6%); } 60% { transform: translate(-3%, 7%); } 80% { transform: translate(7%, 2%); } 100% { transform: translate(0, 0); } }
@keyframes scroll-line { 0% { transform: scaleY(0); transform-origin: top; } 49% { transform: scaleY(1); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@keyframes clap { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-16deg); } 80% { transform: rotate(0); } }

/* Off-screen loops can be paused by JS via .is-offscreen */
.is-offscreen .orb, .is-offscreen .pixel, .is-offscreen .hero-frame__inner img, .is-offscreen .marquee__track { animation-play-state: paused; }

/* 9. REDUCED MOTION ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .2s !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .grain, .cursor, .pixels, .orb { display: none !important; }
  .marquee__track { animation: none !important; }
  .marquee { overflow-x: auto; }
  .hero-frame__inner img, .page-hero__media .media-frame img { animation: none !important; transform: none !important; }
  [data-speed] { transform: none !important; }
  .tilt { transform: none !important; }
  :where(.js) [data-reveal], :where(.js) [data-reveal="stagger"] > *, :where(.js) [data-enter] { translate: none !important; }
  .w__i { transform: none !important; }
  :where(.js) [data-split]:not(.is-split) { opacity: 1; }
  .stack-card { transform: none !important; filter: none !important; }
  :where(.js) [data-draw] { stroke-dashoffset: 0 !important; }
  .rec__dot, .status__dot, .map-facade__pin, .action-bar__wa::before { animation: none !important; }
}