/* ============================================================
   Virtual View Tours — MARKETING SITE design system
   DARK EDITORIAL RESTYLE (Claude Design pass, 2026-08-31).
   Shared stylesheet for the full public marketing website
   (home + services + areas + signature-standard + pricing +
   portfolio + reviews + about + contact + blog).

   $0 · vanilla · self-hosted · NO framework/CDN/build/deps.
   Design language: one dark ground (#0d0d0d), Plus Jakarta Sans,
   steel-blue accent scale (sky/steel/deep from the cube logo),
   hairline borders as the pacing device — the photography is the
   only thing allowed to shout. Replaces the Deep Harbor
   light/bone alternation (see git history for the prior system).

   PORT LAW: every component class from the prior system is kept
   and restyled dark — page markup did not change vocabulary, so
   a class dropped here is a silent visual break on some page.
   Legacy token names (--ink/--paper/--muted/--accent-*) are kept
   as ALIASES onto the new scale because ~48 per-page inline
   <style> blocks and inline style="" attributes still read them.
   Every animation is compositor-safe (transform/opacity only)
   and fully disabled under prefers-reduced-motion.
   ============================================================ */

/* ---- self-hosted brand face: Plus Jakarta Sans (variable, wght 200-800) ---- */
@font-face{
  font-family:'Plus Jakarta Sans';
  src:url('assets/plus-jakarta-var.woff2') format('woff2');
  font-weight:200 800;
  font-style:normal;
  font-display:swap;
}
/* Metric-matched fallback (CLS guard). Plus Jakarta runs a touch wider than
   Arial at text sizes; size-adjust tuned so the swap doesn't reflow body copy. */
@font-face{ font-family:'PlusJakarta-fallback'; src:local('Arial'); size-adjust:105%; ascent-override:98%; descent-override:26%; line-gap-override:0% }

:root{
  /* ============ DARK EDITORIAL TOKENS ============
     --black is THE page ground. --surface/--surface-2 are lifted panels
     (cards, drawers, alternating bands). Steel-blue scale: --sky is the
     interactive accent (links, hovers, focus, the h1 em), --steel/--deep
     are the logo navies for gradients/marks. Text: --white headings,
     --n300 body, --n400 muted/meta, --n500 faint. Borders are white
     hairlines at 10%/18%. */
  --black:#0d0d0d; --surface:#151517; --surface-2:#1e1e21; --white:#fff;
  --n300:#b3b6bc; --n400:#8b8f97; --n500:#6a6e76;
  --sky:#67b3d5; --steel:#4492b6; --deep:#387e9f;
  --border:rgba(255,255,255,.10); --border-2:rgba(255,255,255,.18);
  --font:"Plus Jakarta Sans","PlusJakarta-fallback",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --maxw:1180px;
  --measure:68ch;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-lux:cubic-bezier(.16,1,.3,1);
  --ease-snap:cubic-bezier(.2,.8,.2,1);
  --dur:260ms; --dur-slow:1100ms;
  --fs-h3:clamp(1.25rem,1.1rem+0.7vw,1.45rem);

  /* ============ LEGACY ALIASES (do not remove) ============
     Inline styles across ~54 pages read these by the OLD names. On the
     dark ground the old "dark text" roles invert to light, the old
     "light paper" roles invert to dark surfaces, and all three accent
     roles collapse onto the sky/steel scale. --ink is a TEXT alias
     (white) — every rule that used it as a BACKGROUND has been
     rewritten below to a surface token instead. */
  --ink:var(--white); --ink-2:var(--white); --ink-soft:var(--n300);
  --paper:var(--black); --paper-2:var(--surface); --paper-3:var(--surface-2);
  --muted:var(--n400); --muted-2:var(--n400);
  --line:var(--border); --line-2:var(--border);
  --accent:var(--sky); --accent-deep:var(--sky); --accent-soft:var(--sky);
  --accent-grad:linear-gradient(150deg,#67b3d5,#4492b6 55%,#387e9f);
  --serif:var(--font); --serif-display:var(--font); --sans:var(--font);
  --canvas:var(--black);
  --ring-top:inset 0 0 0 1px rgba(255,255,255,.06);
  --shadow: var(--ring-top), 0 1px 1px rgba(0,0,0,.3), 0 10px 24px -8px rgba(0,0,0,.5);
  --shadow-lift: var(--ring-top), 0 14px 26px -10px rgba(0,0,0,.5), 0 30px 54px -26px rgba(0,0,0,.7);
  --rule-brass:linear-gradient(90deg,transparent,#4492b6 22%,#4492b6 78%,transparent);
  --ink-cinema:#0a0a0b;      /* one shade below --black: the screening-room ground */
  --ink-cinema-2:#151517;    /* alternation tone for bg-bone under body.cinema */
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font); color:var(--n300); background:var(--black);
  font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; overflow-x:hidden;
  font-variant-numeric:normal;
  text-wrap:pretty;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a,button,summary{-webkit-tap-highlight-color:transparent}
::selection{background:rgba(103,179,213,.28);color:#fff}
h1,h2,h3,h4{font-family:var(--font);font-weight:600;letter-spacing:-.024em;line-height:1.1;color:var(--white)}

/* visible keyboard focus everywhere (WCAG 2.4.7) */
:focus-visible{outline:2px solid var(--sky);outline-offset:3px;border-radius:2px}
a.skip{position:fixed;left:16px;top:-60px;z-index:200;background:var(--white);color:var(--black);
  padding:12px 18px;border-radius:4px;font-size:14px;font-weight:600;transition:top .2s var(--ease)}
a.skip:focus{top:16px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.eyebrow{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--n400);font-weight:600}
h2.display{font-size:clamp(32px,4.6vw,58px);letter-spacing:-.036em;line-height:1.02}
.lede{font-size:clamp(16px,1.3vw,17.5px);line-height:1.72;color:var(--n400);max-width:56ch}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font);font-size:13.5px;font-weight:700;letter-spacing:.03em;
  padding:16px 27px;border-radius:0;border:1px solid transparent;cursor:pointer;
  background:var(--white);color:var(--black);
  transition:transform .28s var(--ease-snap),background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);background:var(--sky);color:var(--black)}
.btn-primary{background:var(--white);color:var(--black)}
.btn-primary:hover{background:var(--sky);color:var(--black);box-shadow:0 16px 30px -14px rgba(103,179,213,.35)}
.btn-ghost{background:transparent;color:var(--white);border-color:var(--border-2);font-weight:600}
.btn-ghost:hover{background:rgba(103,179,213,.10);border-color:var(--sky);color:var(--white)}
.btn-light{background:var(--white);color:var(--black)}
.btn-light:hover{background:var(--sky);color:var(--black)}
.btn-outline-light{background:transparent;color:var(--white);border-color:rgba(255,255,255,.5);font-weight:600}
.btn-outline-light:hover{border-color:var(--sky);background:rgba(103,179,213,.10)}
.btn .arw{transition:transform .4s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}
.btn-lg{padding:18px 32px;font-size:14.5px}
.btn:active,.svc:active,.tier:active,.pcard:active{transform:translateY(0) scale(.985);transition-duration:.06s}

/* text links with the sliding underline */
.lnk{font-size:13px;font-weight:500;color:var(--n300);white-space:nowrap}
.lnk:hover{color:var(--white)}
.go{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--n300);border-bottom:1px solid var(--border-2);padding-bottom:5px;transition:color .22s var(--ease),border-color .22s var(--ease)}
.go:hover{color:var(--white);border-bottom-color:var(--sky)}

/* ---------------- shared nav ---------------- */
header.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px clamp(20px,4vw,44px);
  transition:background .4s var(--ease),box-shadow .4s var(--ease),padding .4s var(--ease);
}
header.nav.scrolled{
  background:rgba(13,13,13,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--border);padding-top:14px;padding-bottom:14px;
}
/* pages without a full-bleed photo hero get the solid nav from first paint */
header.nav.solid{background:rgba(13,13,13,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--border)}
.brand{display:flex;align-items:baseline;gap:0;color:#fff;
  font-size:21px;letter-spacing:.02em;white-space:nowrap;flex:0 0 auto}
.brand b{font-weight:400}
.brand .vvt{font-family:var(--font);font-weight:600;font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;transform:translateY(-1px)}
.brand .dot{color:var(--sky);font-weight:700}
nav.links{display:flex;align-items:center;gap:30px;margin-left:auto}
nav.links a.nl{font-size:11.5px;font-weight:600;color:rgba(255,255,255,.78);letter-spacing:.13em;text-transform:uppercase;padding:12px 2px;
  transition:color .3s var(--ease);position:relative}
nav.links a.nl::after{content:"";position:absolute;left:0;bottom:6px;height:1px;width:0;background:var(--sky);transition:width .35s var(--ease)}
nav.links a.nl:hover::after,nav.links a.nl[aria-current="page"]::after{width:100%}
nav.links a.nl:hover,nav.links a.nl[aria-current="page"]{color:#fff}
.menu-btn{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:6px}
.menu-btn span{width:24px;height:2px;background:#fff}

/* disclosure nav (W3C pattern) — panels live permanently in the DOM (crawlable);
   JS only toggles [data-open]. :focus-within keeps keyboard access with JS off. */
.nav-grp{position:relative;display:flex;align-items:center;gap:2px}
.nl-car{background:none;border:0;cursor:pointer;padding:12px 5px;display:flex;align-items:center;color:rgba(255,255,255,.6)}
.nl-car svg{width:10px;height:6px;transition:transform .3s var(--ease)}
.nav-grp[data-open] .nl-car svg{transform:rotate(180deg)}
.drop{position:absolute;top:calc(100% + 14px);left:-18px;min-width:262px;background:rgba(21,21,23,.97);border:1px solid var(--border-2);border-radius:0;box-shadow:0 24px 60px -20px rgba(0,0,0,.7);backdrop-filter:blur(14px);padding:8px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;z-index:70}
.nav-grp[data-open] .drop,.nav-grp:focus-within .drop{opacity:1;visibility:visible;transform:none}
.drop a{display:block;padding:11px 14px;border-radius:0;transition:background .2s var(--ease)}
.drop a b{display:block;font-size:13.5px;font-weight:600;color:var(--white);letter-spacing:0;text-transform:none}
.drop a span{display:block;font-size:12px;color:var(--n500);margin-top:2px;letter-spacing:0;text-transform:none}
.drop a:hover{background:rgba(255,255,255,.05)}
.drop a[aria-current="page"] b{color:var(--sky)}
.m-only{display:none}
/* solid CTA — square, white, steps to sky on hover (over dark it always reads) */
.nav-cta{background:var(--white)!important;border:1px solid var(--white)!important;border-radius:0!important;color:var(--black)!important;padding:.8em 1.6em!important;font-size:11px!important;font-weight:700!important;letter-spacing:.12em;text-transform:uppercase;margin-left:24px;backdrop-filter:none!important}
.nav-cta:hover{background:var(--sky)!important;border-color:var(--sky)!important;color:var(--black)!important}
/* FIX 1 (2026-07-17, preserved): the full desktop nav needs ~1194px before it fits
   on one line (live-measured across the shared header); the drawer serves 0-1220. */
@media(max-width:1220px){
  .m-only{display:block}
  .nl-car{display:none}
  nav.links a.nl{letter-spacing:.02em;text-transform:none;font-weight:500}
  .nav-grp{flex-direction:column;align-items:flex-start;gap:6px}
  .drop{position:static;opacity:1;visibility:visible;transform:none;border:0;box-shadow:none;background:transparent;backdrop-filter:none;padding:0 0 0 14px;min-width:0}
  .drop a{padding:4px 0}
  .drop a b{font-size:15px;font-weight:500;color:var(--n300)}
  .drop a span{display:none}
  header.nav .nav-cta{display:inline-flex;margin-left:auto;margin-right:6px;padding:.55em 1.1em!important}
}
@media(max-width:430px){ .brand .vvt,.brand .dot{display:none} } /* mark-only brand so the pill never wraps */
@media(max-width:430px){ .btn-ghost{white-space:normal;text-align:center} }
/* the mobile drawer (dark panel, right side) */
@media(max-width:1220px){
  nav.links{position:fixed;inset:0 0 0 auto;width:min(80vw,320px);background:var(--surface);
    flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:18px;padding:88px 40px 40px;overflow-y:auto;
    transform:translateX(100%);transition:transform .45s var(--ease);box-shadow:-20px 0 50px -20px rgba(0,0,0,.7);z-index:60}
  nav.links.open{transform:none}
  nav.links a.nl{color:var(--white)!important;font-size:19px}
  .menu-btn{display:flex;z-index:61}
  header.nav .menu-btn span{background:#fff}
}

/* ---------------- hero (home cinematic, 3s step-down) ----------------
   The h1 opens oversized (display voice), and once the film loop is really
   playing for 3s the hero "settles": headline steps down, the sub yields to
   the trust proof. The h1 is never hidden or emptied — it only changes size
   and weight, so the LCP element and the crawlable heading are stable. */
.hero{position:relative;min-height:88svh;display:flex;align-items:flex-end;background:var(--surface);overflow:hidden}
/* HEROFOLD 2026-08-31 (researched): 100svh + bottom-aligned content left 23-28% of the fold
   empty above the eyebrow and pushed the primary CTA to 72% down the desktop screen. 88svh
   keeps the full-bleed cinematic frame, lifts the whole value prop + CTA into view, and
   lets the next section peek by ~12% — a real scroll cue, better than a "Scroll" label. */
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 38%;background-size:cover;background-position:center 38%;
  transform:scale(1.06);animation:heroZoom 16s var(--ease) forwards}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s var(--ease)}
.hero-video.ready{opacity:1}
@keyframes heroZoom{to{transform:scale(1)}}
/* Two-axis scrim (measured fix, 2026-07-10, preserved verbatim): protects the
   headline band over high-key photos; mobile-first horizontal ramp. */
.hero-scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,12,.36) 0%,rgba(10,10,12,.22) 32%,rgba(10,10,12,.52) 74%,rgba(10,10,12,.84) 100%),
             linear-gradient(90deg,rgba(10,10,12,.54) 0%,rgba(10,10,12,.44) 55%,rgba(10,10,12,.40) 100%)}
@media(min-width:1100px){
  .hero-scrim{background:linear-gradient(180deg,rgba(10,10,12,.36) 0%,rgba(10,10,12,.22) 32%,rgba(10,10,12,.52) 74%,rgba(10,10,12,.84) 100%),
              linear-gradient(90deg,rgba(10,10,12,.54) 0%,rgba(10,10,12,.38) 55%,rgba(10,10,12,.12) 82%,rgba(10,10,12,0) 95%)}
}
.hero-inner{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 28px 8vh;color:#fff}
.hero .eyebrow{color:rgba(255,255,255,.80);text-shadow:0 1px 18px rgba(0,0,0,.55)}
.hero h1{font-size:clamp(46px,7.8vw,110px);font-weight:600;line-height:.96;letter-spacing:-.042em;margin:18px 0 22px;max-width:16ch;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.42),0 2px 34px rgba(0,0,0,.38);
  transition:font-size var(--dur-slow) var(--ease),letter-spacing var(--dur-slow) var(--ease),max-width var(--dur-slow) var(--ease)}
.hero h1 em{font-style:italic;font-weight:300;color:var(--sky)}
.hero p.sub{font-size:clamp(16px,1.6vw,19px);color:rgba(255,255,255,.92);max-width:62ch;line-height:1.55;transition:opacity 700ms var(--ease)}
.hero .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.hero .trust{margin-top:34px;font-size:13px;letter-spacing:.03em;color:rgba(255,255,255,.72);display:flex;align-items:center;gap:10px;flex-wrap:wrap;transition:opacity 900ms var(--ease)}
.hero .trust .ln{width:26px;height:1px;background:rgba(255,255,255,.4)}
.trust-l1{display:inline-flex;align-items:center;gap:10px}
/* settled state: headline steps down, the sub quiets, trust holds */
.hero.settled h1{font-size:clamp(30px,3vw,46px);letter-spacing:-.026em;max-width:26ch}
.hero.settled p.sub{opacity:.55}
@media(max-width:640px){.hero h1{font-size:clamp(38px,10vw,60px)}.hero.settled h1{font-size:clamp(26px,7vw,34px)}}
@media(max-width:430px){
  .hero .trust{flex-direction:column;align-items:flex-start;gap:8px}
  .trust-sep{display:none}
}
.scrollcue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;
  writing-mode:vertical-rl;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.6);display:flex;align-items:center;gap:12px}
.scrollcue::after{content:"";width:1px;height:44px;background:linear-gradient(rgba(255,255,255,.6),transparent);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{opacity:.2;transform:scaleY(.4);transform-origin:top}50%{opacity:1}100%{opacity:.2;transform:scaleY(1);transform-origin:top}}
@media(max-width:1200px){ .scrollcue{display:none} }

/* ---------------- sub-page hero (interior pages) ---------------- */
.subhero{position:relative;background:var(--black);color:#fff;padding:clamp(128px,17vw,190px) 0 clamp(56px,7vw,86px);overflow:hidden;border-bottom:1px solid var(--border)}
.subhero.dark-img::before{content:"";position:absolute;inset:0;background-size:cover;background-position:center;opacity:.30}
.subhero .sc{position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,13,13,.6),rgba(13,13,13,.85))}
.subhero .inner{position:relative;z-index:2}
.subhero h1{font-size:clamp(34px,5vw,60px);font-weight:600;letter-spacing:-.036em;color:#fff;max-width:20ch;margin:14px 0 18px;line-height:1.02}
.subhero .eyebrow{color:var(--n400)}
.subhero.dark-img .eyebrow{color:rgba(255,255,255,.8)}
.subhero p.sub{color:var(--n300);max-width:60ch;font-size:clamp(15.5px,1.35vw,18px);line-height:1.6}
.subhero.dark-img p.sub{color:rgba(255,255,255,.88)}
.subhero .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}

/* breadcrumb */
.crumb{position:relative;z-index:2;font-size:12.5px;letter-spacing:.02em;color:var(--n500);margin-bottom:6px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.crumb a{color:var(--n500);transition:color .3s}
.crumb a:hover{color:#fff}
.crumb .sep{opacity:.5}

/* ---------------- section shell ---------------- */
section.sec{padding:clamp(72px,10vw,132px) 0}
section.sec.tight{padding:clamp(56px,7vw,90px) 0}
.sec-head{max-width:640px;margin-bottom:52px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head h2{margin-top:14px}
.sec-head p:not(.eyebrow){margin-top:16px;color:var(--n400)}
/* the old light alternation collapses onto two dark tones + hairlines */
.bg-bone{background:var(--surface)}
.bg-paper{background:var(--black)}
.bg-ink{background:var(--surface);color:var(--n300)}
.bg-ink .eyebrow{color:var(--n400)}
.bg-ink h2,.bg-ink h3{color:#fff}
.bg-ink .sec-head p:not(.eyebrow){color:var(--n400)}

/* ---------------- value props ---------------- */
.values{background:var(--black)}
.val-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;border:1px solid var(--border);background:var(--border)}
.val{background:var(--black);padding:38px 30px;position:relative;transition:background .4s var(--ease)}
.val:hover{background:var(--surface)}
.val::after{content:"";position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--sky);transition:width .5s var(--ease-lux)}
.val:hover::after{width:100%}
.val .n{font-size:15px;font-weight:300;color:var(--n500);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.val h3{font-size:19px;margin:16px 0 10px;letter-spacing:-.01em}
.val p{font-size:14.5px;color:var(--n400);line-height:1.6}

/* VALSWIPE 2026-08-31: a swipeable variant of the value grid. Desktop keeps the 4-up grid
   (nothing hidden: these are the core reasons to buy). Below 760px, where 4 columns cannot
   fit and stacking cost 1.7 screens of scroll, it becomes a horizontal scroll-snap rail with
   the next card peeking so there is an obvious affordance to swipe. Momentum scrolling on
   touch; keyboard users still tab through every card in order. */
@media(max-width:760px){
  .val-grid.swipe{display:flex;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;gap:1px;border:1px solid var(--border);scrollbar-width:none}
  .val-grid.swipe::-webkit-scrollbar{display:none}
  .val-grid.swipe .val{flex:0 0 82%;scroll-snap-align:start;padding:30px 24px}
  .val-grid.swipe .val p{font-size:14px}
}
@media(prefers-reduced-motion:reduce){ .val-grid.swipe{scroll-behavior:auto} }

/* home value rows (design §8 — used where markup adopts them) */
.val-row{display:grid;grid-template-columns:180px 1fr 1.35fr;gap:48px;align-items:start;padding:44px 0;border-top:1px solid var(--border)}
.val-row:last-of-type{border-bottom:1px solid var(--border)}
.val-row .n{font-size:62px;font-weight:300;line-height:.8;letter-spacing:-.05em;color:var(--n500);font-variant-numeric:tabular-nums}
.val-row p{font-size:15px;line-height:1.7;color:var(--n400);padding-top:5px}
.val-row p em{font-style:italic;color:var(--white)}
@media (max-width:900px){.val-row{grid-template-columns:1fr;gap:14px}}

/* ---------------- services (benefit cards + lightbox) ---------------- */
.services{background:var(--surface)}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.svc{position:relative;text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:0;padding:34px 30px;
  box-shadow:none;transition:transform .5s var(--ease),border-color .5s var(--ease);cursor:pointer;font-family:var(--font);width:100%;color:inherit}
.svc:hover{transform:translateY(-4px);border-color:var(--border-2)}
.svc .ico{width:40px;height:40px;color:var(--sky);margin-bottom:20px}
.svc .win{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--sky);font-weight:600;margin-bottom:12px}
.svc h3{font-size:21px;letter-spacing:-.01em;margin-bottom:10px}
.svc .hook{font-size:16.5px;font-weight:500;line-height:1.35;color:var(--white);margin-bottom:10px}
.svc p{font-size:14.5px;color:var(--n400);line-height:1.6}
.svc .more{margin-top:18px;font-size:13px;font-weight:600;color:var(--sky);display:inline-flex;align-items:center;gap:7px}
.svc .more .arw{transition:transform .3s var(--ease)}
.svc:hover .more .arw{transform:translateX(3px)}

/* lightbox (service deep view) */
.lb{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:24px;
  background:rgba(10,10,11,.82);backdrop-filter:blur(6px)}
.lb.open{display:flex}
.lb-card{background:var(--surface);max-width:760px;width:100%;max-height:88vh;overflow:auto;border-radius:0;border:1px solid var(--border-2);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8);opacity:0;transform:translateY(14px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.lb.open .lb-card{opacity:1;transform:none}
.lb-media{aspect-ratio:16/9;background:var(--surface-2);overflow:hidden}
.lb-media img{width:100%;height:100%;object-fit:cover}
.lb-body{padding:34px clamp(26px,4vw,44px) 40px}
.lb-body .win{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--sky);font-weight:600}
.lb-body h3{font-size:clamp(24px,3vw,32px);margin:12px 0 14px}
.lb-body p{color:var(--n300);line-height:1.6;margin-bottom:16px}
.lb-stat{background:var(--surface-2);border-left:2px solid var(--sky);padding:16px 20px;font-size:14.5px;color:var(--n300);line-height:1.55}
.lb-stat .tag{display:inline-block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--sky);font-weight:700;margin-left:6px}
.lb-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.lb-x{position:absolute;top:18px;right:20px;z-index:2;background:rgba(255,255,255,.9);border:0;width:40px;height:40px;border-radius:50%;
  cursor:pointer;font-size:20px;line-height:1;color:var(--black);box-shadow:0 6px 20px -8px rgba(0,0,0,.6)}
.lb-x:hover{background:#fff}

/* ---------------- statement band ---------------- */
.statement{position:relative;min-height:74vh;display:flex;align-items:center;background:var(--surface);overflow:hidden;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.statement .bg{position:absolute;inset:0;background-size:cover;background-position:center}
.statement .sc{position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,13,13,.82) 0%,rgba(13,13,13,.5) 55%,rgba(13,13,13,.24) 100%)}
.statement .inner{position:relative;z-index:2;color:#fff}
.statement .eyebrow{color:rgba(255,255,255,.8)}
.statement h2{font-size:clamp(30px,4.4vw,54px);max-width:20ch;color:#fff;letter-spacing:-.034em;line-height:1.02}
.statement p{margin:20px 0 32px;color:rgba(255,255,255,.86);max-width:48ch}
.statement .rule{width:64px;height:1px;background:var(--sky);margin-bottom:28px}
/* near-silent brand band (signature standard statement) */
.statement.silent{min-height:64vh;text-align:center;justify-content:center;background:var(--black)}
.statement.silent p{margin-inline:auto}
.statement.silent .inner{max-width:900px;margin:0 auto;text-align:center;padding:0 28px}
.statement.silent .rule{margin:0 auto 30px}
.statement.silent h2{max-width:24ch;margin:0 auto;font-size:clamp(30px,4.6vw,56px)}

/* ---------------- gallery ---------------- */
.gallery{background:var(--black)}
.g-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:2px;grid-auto-flow:dense}
.g-item{position:relative;overflow:hidden;border-radius:0;background:var(--surface-2)}
.g-item img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-lux),filter .6s var(--ease);display:block}
.g-item:hover img{transform:scale(1.05);filter:saturate(1.03) contrast(1.02)}
.g-item .tag{position:absolute;left:16px;bottom:14px;color:#fff;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  opacity:0;transform:translateY(8px);transition:.4s var(--ease);text-shadow:0 1px 12px rgba(0,0,0,.75);z-index:2}
.g-item::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(0,0,0,.5));opacity:0;transition:.4s var(--ease)}
.g-item:hover .tag{opacity:1;transform:none}
.g-item:hover::after{opacity:1}
.g-item::before{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--sky);z-index:1;transition:width .6s var(--ease-lux)}
.g-item:hover::before{width:100%}
.span6{grid-column:span 6}.span4{grid-column:span 4}.span5{grid-column:span 5}.span7{grid-column:span 7}.span8{grid-column:span 8}
.tall{grid-row:span 2}
.g-item.span6{aspect-ratio:16/10}.g-item.span4{aspect-ratio:4/5}.g-item.span5{aspect-ratio:5/4}
.g-item.span7{aspect-ratio:16/9}.g-item.span8{aspect-ratio:16/9}

/* ---------------- process ---------------- */
.process{background:var(--surface);color:var(--n300);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.process .eyebrow{color:var(--n400)}
.process .sec-head h2{color:#fff}.process .sec-head p:not(.eyebrow){color:var(--n400)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;counter-reset:step}
.step{position:relative;padding-top:30px;border-top:1px solid var(--border-2)}
.step .num{font-size:13px;font-weight:600;letter-spacing:.1em;color:var(--sky);font-variant-numeric:tabular-nums}
.step h3{color:#fff;font-size:20px;margin:14px 0 10px;letter-spacing:-.01em}
.step p{color:var(--n400);font-size:14.5px;line-height:1.6}

/* ---------------- signature standard (home section + tier ladder) ---------------- */
.sig{background:var(--surface)}
.sig .lede{margin-top:18px;color:var(--n300)}
.tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:52px}
.tiers.trio{grid-template-columns:repeat(3,1fr);max-width:1080px;margin-left:auto;margin-right:auto}
/* Signature Standard content-mix table + tier math */
.mixtab{width:100%;max-width:760px;margin:40px auto 0;border-collapse:collapse;font-size:14px}
.mixtab th,.mixtab td{padding:12px 10px;text-align:center;border-bottom:1px solid var(--border)}
.mixtab th{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--n400);font-weight:600}
.mixtab td:first-child,.mixtab th:first-child{text-align:left}
.mixtab .tot{font-weight:700;color:var(--white)}
.mixtab tr.best td{background:rgba(103,179,213,.07)}
@media(max-width:560px){.mixtab{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;font-size:12.5px}.mixtab th,.mixtab td{padding:10px 8px}}
.tier .price-line{font-size:32px;font-weight:500;letter-spacing:-.02em;color:var(--white);margin:6px 0 2px;font-variant-numeric:tabular-nums}
.tier .price-line span{font-size:13px;color:var(--n400);letter-spacing:0;font-weight:400}
.tier .vid-math{font-size:12.5px;color:var(--sky);font-weight:600;margin-bottom:14px}
.tier ul.feat{list-style:none;padding:0;margin:14px 0 20px;text-align:left}
.tier ul.feat li{font-size:13.5px;color:var(--n300);padding:7px 0;border-top:1px solid var(--border);line-height:1.45}
.tier ul.feat li:first-child{border-top:0}
.tier{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:0;padding:30px 26px;box-shadow:none;
  transition:transform .5s var(--ease),border-color .5s var(--ease)}
.tier:hover{transform:translateY(-4px);border-color:var(--border-2)}
.tier.best{border-color:var(--sky)}
.tier .flag{position:absolute;top:-11px;left:26px;background:var(--sky);color:var(--black);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:700;padding:6px 10px;border-radius:0;border:0}
.tier .step-n{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--n400);font-weight:600}
.tier h3{font-size:21px;margin:10px 0 12px;letter-spacing:-.01em}
.tier p{font-size:14px;color:var(--n400);line-height:1.6}
.tier .buys{margin-top:14px;font-size:14px;color:var(--n300);line-height:1.55}
.sig .honest{max-width:60ch;margin:40px auto 0;text-align:center;color:var(--n400);font-size:15px;line-height:1.65}
.sig .cta-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:38px}

/* honest fine print (pricing narrative) */
.honest{font-size:14.5px;line-height:1.74;color:var(--n400)}
.honest a{color:var(--sky);border-bottom:1px solid rgba(103,179,213,.4)}
.honest a:hover{color:var(--white);border-bottom-color:var(--white)}

/* mechanism / ROI row (consistency -> recognition -> chosen) */
.mech{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:8px}
.mech .m{padding:30px 26px;border:1px solid var(--border);border-radius:0;background:var(--surface)}
.mech .m .n{color:var(--sky);font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.mech .m h3{font-size:19px;margin:12px 0 8px;letter-spacing:-.01em}
.mech .m p{font-size:14px;color:var(--n400);line-height:1.6}

/* ---------------- reviews ---------------- */
.reviews{background:var(--surface)}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.rev{background:var(--surface);border:1px solid var(--border);border-radius:0;padding:34px 30px}
.reviews.bg-paper .rev,.bg-paper .rev{background:var(--surface)}
/* U+2605 / U+2192 are not in the Plus Jakarta subset either — pin the symbol
   stack so stars/arrows render predictably everywhere (preserved fix). */
.stars,.tstars,.arw{font-family:"Apple Symbols","Segoe UI Symbol","Noto Sans Symbols 2","Arial Unicode MS",sans-serif}
.stars{color:var(--sky);letter-spacing:3px;font-size:14px;margin-bottom:16px}
.rev .q{font-size:16.5px;font-weight:500;line-height:1.55;color:var(--white);margin:0 0 18px;quotes:none}
.rev .who{font-size:13.5px;color:var(--n400)}
.rev .who b{color:var(--white);font-weight:600}
/* review stars: the sky accent (one accent sitewide now — brass/gold retired) */
.reviews .stars,.trust-band .stars{color:var(--sky)}
.rev-featured .rev{padding:36px 32px;position:relative;overflow:hidden}
.rev-featured .q{font-size:18.5px}
.rev-featured .rev::before{content:"\201C";position:absolute;top:6px;right:20px;font-size:66px;font-weight:300;line-height:1;color:var(--sky);opacity:.18;pointer-events:none}
/* masonry wall for many varying-length reviews */
.rev-wall{columns:3 300px;column-gap:24px}
.rev-wall .rev{break-inside:avoid;-webkit-column-break-inside:avoid;margin:0 0 24px;padding:26px 26px}
.rev-wall .q{font-size:15.5px;line-height:1.55}
/* 5.0 trust band */
.trust-band{display:flex;align-items:center;gap:26px;max-width:900px;margin:0 auto;flex-wrap:wrap;justify-content:center;text-align:center}
.trust-band .tb-score{display:flex;align-items:baseline;gap:12px}
.trust-band .tb-score .big{font-size:52px;font-weight:300;line-height:1;color:var(--white);font-variant-numeric:tabular-nums}
.trust-band .tb-score .stars{font-size:22px;margin:0;letter-spacing:2px}
.trust-band .tb-line{max-width:520px;text-align:left;color:var(--n300);font-size:15px}
@media(max-width:640px){.rev-wall{columns:1}.trust-band .tb-line{text-align:center}}
/* review highlights (synthesis of recurring themes) */
.hi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:10px}
.hi{background:var(--surface);border-left:2px solid var(--sky);padding:22px 24px;border-radius:0}
.hi h3{font-size:17px;color:var(--white);margin-bottom:7px;line-height:1.25}
.hi p{font-size:13.5px;color:var(--n300);line-height:1.55}
@media(max-width:900px){.hi-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.hi-grid{grid-template-columns:1fr}}
/* contextual testimonial spotlight (service/area pages) */
.spotlight{max-width:760px;margin:0 auto;text-align:center}
.spotlight::before{content:"";display:block;width:46px;height:2px;margin:0 auto 22px;background:var(--rule-brass)}
.spotlight .stars{color:var(--sky);letter-spacing:3px;font-size:15px;margin-bottom:14px}
.spotlight blockquote{font-size:clamp(19px,2vw,23px);font-weight:500;line-height:1.42;color:var(--white);letter-spacing:-.015em;margin:0 0 16px;quotes:none}
.spotlight figcaption{font-size:14px;color:var(--n400)}
.spotlight figcaption b{color:var(--white);font-weight:600}
.bg-ink .spotlight blockquote{color:#fff}
.bg-ink .spotlight figcaption{color:var(--n400)}
.bg-ink .spotlight figcaption b{color:#fff}

/* hero text link (demoted second CTA) + trust stars + sitewide CTA trust chip */
.hero-lnk{color:rgba(255,255,255,.88);font-size:14.5px;font-weight:500;letter-spacing:.01em;border-bottom:1px solid rgba(255,255,255,.38);padding-bottom:3px;transition:border-color .3s var(--ease),color .3s var(--ease);align-self:center}
.hero-lnk:hover{color:#fff;border-color:var(--sky)}
.tstars{color:var(--sky);letter-spacing:2px;font-size:11px}
.trust a{color:inherit}
.trust a:hover{color:#fff}
.cta-trust{font-size:12.5px;font-weight:500;letter-spacing:.05em;color:var(--n400);margin-top:12px}
.cta-trust a{color:inherit}
.cta-trust a:hover{color:var(--white)}
.cta-trust .tstars{font-size:11px;letter-spacing:1.5px}
.subhero .cta-trust{color:var(--n400)}
.subhero .cta-trust a:hover{color:#fff}
/* visible freshness caption (paired with schema dateModified) */
.page-updated{max-width:var(--maxw);margin:0 auto;padding:18px clamp(20px,4vw,44px) 0;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--n500)}
.page-updated::before{content:"";display:inline-block;width:26px;height:1px;background:var(--steel);vertical-align:middle;margin-right:10px}
/* pre-footer service-area directory band */
.area-band{background:var(--surface);border-top:1px solid var(--border);padding:56px 0 60px}
.area-band h2{font-size:clamp(22px,2.6vw,30px);letter-spacing:-.02em;margin-bottom:26px}
.area-band .cols{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.area-band h3{font-family:var(--font);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--n500);margin-bottom:12px}
.area-band ul{list-style:none}
.area-band li{margin:7px 0}
.area-band a{font-size:14px;color:var(--n300)}
.area-band a:hover{color:var(--white)}
@media(max-width:760px){.area-band .cols{grid-template-columns:1fr 1fr}}
@media(max-width:430px){.area-band .cols{gap:18px 20px}.area-band h3{letter-spacing:.1em}}
.ft .ft-human{font-size:13.5px;color:var(--n400);line-height:1.55;margin:10px 0 14px;max-width:24ch}
/* contact fact ledger */
.fact-ledger{margin:6px 0 0}
.fact-ledger div{display:flex;justify-content:space-between;gap:18px;padding:13px 2px;border-top:1px solid var(--border)}
.fact-ledger div:last-child{border-bottom:1px solid var(--border)}
.fact-ledger dt{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--n400)}
.fact-ledger dd{font-size:14.5px;color:var(--white);text-align:right;margin:0}
.fact-ledger dd a{color:var(--sky);border-bottom:1px solid rgba(103,179,213,.4)}
/* case studies: real result blocks */
.case-svc{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
.case-svc span{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--sky);font-weight:600;border:1px solid var(--border-2);border-radius:0;padding:5px 12px}
.case-result{border-left:2px solid var(--sky);padding:2px 0 2px 20px;margin-top:22px}
.case-result .stars{color:var(--sky);letter-spacing:3px;font-size:14px;margin-bottom:9px}
.case-result blockquote{font-size:17px;font-weight:500;line-height:1.5;color:var(--white);margin:0 0 10px;quotes:none}
.case-result figcaption{font-size:13.5px;color:var(--n400)}
.case-result figcaption b{color:var(--white);font-weight:600}
.case-metric{display:flex;gap:28px;flex-wrap:wrap;margin-top:18px}
.case-metric .m .big{font-size:24px;font-weight:500;color:var(--white);line-height:1;font-variant-numeric:tabular-nums}
.case-metric .m .lab{font-size:12px;color:var(--n400);margin-top:5px;letter-spacing:.02em}
.ph{outline:1px dashed var(--sky);outline-offset:3px}
.ph-note{font-size:12px;color:var(--n400);letter-spacing:.02em;margin-top:14px;font-style:italic}

/* by-the-numbers band */
.bynum{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(30px,6vw,84px);text-align:center;font-variant-numeric:tabular-nums}
.bynum .stat{min-width:150px}
.bynum .stat .big{font-size:clamp(34px,4vw,52px);font-weight:300;color:var(--white);letter-spacing:-.02em;line-height:1}
.bg-ink .bynum .stat .big{color:#fff}
.bynum .stat .lab{margin-top:10px;font-size:13px;letter-spacing:.04em;color:var(--n400)}
.bg-ink .bynum .stat .lab{color:var(--n400)}

/* ---------------- pricing teaser ---------------- */
.pricing{background:var(--black);text-align:center}
.pricing .card{max-width:760px;margin:0 auto;background:var(--surface);border:1px solid var(--border);border-radius:0;
  padding:clamp(40px,6vw,64px)}
.pricing h2{margin:14px 0 14px}
.pricing p{color:var(--n400);max-width:52ch;margin:0 auto 30px}
.pricing .row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.pricing .fine{margin-top:22px;font-size:13px;color:var(--n400)}

/* ---------------- FAQ (accordion, GEO engine) ---------------- */
.faq{background:var(--surface)}
.faq-list{max-width:820px;margin:0 auto}
.faq-item{border-top:1px solid var(--border-2)}
.faq-item:last-child{border-bottom:1px solid var(--border-2)}
.faq-item summary{list-style:none;cursor:pointer;padding:26px 44px 26px 0;position:relative;
  font-size:clamp(16.5px,1.8vw,19.5px);font-weight:600;color:var(--white);letter-spacing:-.015em;line-height:1.35}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:6px;top:24px;font-size:24px;font-weight:300;color:var(--n500);font-family:var(--font);transition:transform .3s var(--ease),color .3s var(--ease)}
.faq-item[open] summary::after{content:"–"}
.faq-item[open] summary::after,.faq-item summary:hover::after{color:var(--sky)}
.faq-item .a{padding:0 44px 26px 0;color:var(--n300);line-height:1.68;max-width:70ch}
.faq-item .a p{margin-bottom:12px}

/* ---------------- blog teaser + index cards ---------------- */
.posts{background:var(--black)}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.post-grid.two{grid-template-columns:repeat(2,1fr)}
.pcard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:0;overflow:hidden;
  transition:transform .5s var(--ease),border-color .5s var(--ease)}
.pcard:hover{transform:translateY(-4px);border-color:var(--border-2)}
.pcard .thumb{aspect-ratio:16/10;background:var(--surface-2);overflow:hidden}
.pcard .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.pcard:hover .thumb img{transform:scale(1.05)}
.pcard .pc-body{padding:26px 26px 30px;display:flex;flex-direction:column;flex:1}
.pcard .cat{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--sky);font-weight:600}
.pcard h3{font-size:19px;margin:12px 0 10px;letter-spacing:-.015em;line-height:1.28}
.pcard p{font-size:14px;color:var(--n400);line-height:1.6;flex:1}
.pcard .meta{margin-top:18px;font-size:12.5px;color:var(--n400);display:flex;gap:10px;align-items:center}

/* ---------------- article / prose (blog + long body) ---------------- */
.article{background:var(--black)}
.article-wrap{max-width:760px;margin:0 auto;padding:0 28px}
.article-head{max-width:760px;margin:0 auto;padding:clamp(120px,15vw,170px) 28px clamp(30px,4vw,44px);text-align:center}
.article-head .cat{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--sky);font-weight:600}
.article-head h1{font-size:clamp(30px,4vw,48px);letter-spacing:-.03em;margin:16px 0 20px;line-height:1.08}
.byline{display:flex;align-items:center;justify-content:center;gap:14px;font-size:13.5px;color:var(--n400)}
.byline img{width:40px;height:40px;border-radius:50%;object-fit:cover;background:var(--surface-2)}
.byline b{color:var(--white);font-weight:600}
.byline .sep{opacity:.5}
.article-hero{max-width:1000px;margin:34px auto 0;aspect-ratio:16/9;overflow:hidden;border-radius:0;background:var(--surface-2)}
.article-hero img{width:100%;height:100%;object-fit:cover}
.tldr{background:var(--surface);border-left:2px solid var(--sky);border-radius:0;padding:24px 28px;margin:0 0 36px}
.tldr .lab{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--sky);font-weight:700;margin-bottom:10px}
.tldr p{font-size:15.5px;line-height:1.65;color:var(--n300);margin-bottom:10px}
.tldr p:last-child{margin-bottom:0}
.prose{font-size:16.5px;line-height:1.76;color:var(--n300)}
.prose > *+*{margin-top:22px}
.prose h2{font-size:clamp(23px,2.8vw,29px);color:var(--white);letter-spacing:-.02em;margin-top:48px;line-height:1.2}
.prose h3{font-size:clamp(18.5px,2.2vw,21px);color:var(--white);margin-top:34px}
.prose p{max-width:100%}
.prose a{color:var(--sky);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.prose a:hover{color:var(--white)}
.prose ul,.prose ol{padding-left:22px}
.prose li{margin-top:8px}
.prose img{border-radius:0;margin:12px 0;height:auto}
.prose figure figcaption{font-size:13px;color:var(--n400);text-align:center;margin-top:8px}
.prose blockquote{border-left:2px solid var(--sky);padding-left:22px;font-size:19.5px;font-weight:500;line-height:1.45;color:var(--white);font-style:italic}
.stat-tag{display:inline-block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--sky);font-weight:700;
  border:1px solid var(--border-2);border-radius:0;padding:1px 6px;margin-left:4px;vertical-align:middle}

/* data table (comparison) */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border);border-radius:0;margin:8px 0}
table.data{width:100%;border-collapse:collapse;font-size:14.5px;min-width:520px;font-variant-numeric:tabular-nums}
table.data th,table.data td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--border);vertical-align:top}
table.data thead th{background:var(--surface);font-family:var(--font);font-weight:600;color:var(--white);font-size:13px;letter-spacing:.02em}
table.data tbody tr:last-child td,table.data tr:last-child td{border-bottom:0}
table.data td{color:var(--n300);line-height:1.5}

/* article footer CTA card + related links */
.cta-card{max-width:760px;margin:52px auto 0;background:var(--surface);border:1px solid var(--border-2);color:#fff;border-radius:0;padding:clamp(34px,5vw,52px);text-align:center}
.cta-card .eyebrow{color:var(--n400)}
.cta-card h3{color:#fff;font-size:clamp(23px,2.8vw,30px);margin:12px auto 14px;max-width:22ch}
.cta-card p{color:var(--n400);max-width:52ch;margin:0 auto 26px}
.related{max-width:760px;margin:52px auto 0;border-top:1px solid var(--border);padding-top:32px}
.related h3{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--n500);margin-bottom:18px;font-family:var(--font);font-weight:600}
.related ul{list-style:none;display:grid;gap:12px}
.related a{color:var(--white);font-size:17px;font-weight:500;transition:color .3s}
.related a:hover{color:var(--sky)}

/* generic content prose block for service/area/about pages */
.content{background:var(--black)}
.content .col{max-width:760px}
.content h2{font-size:clamp(24px,3vw,32px);margin-bottom:16px;letter-spacing:-.024em}
.content h3{font-size:20px;margin:32px 0 12px;letter-spacing:-.01em}
.content p{color:var(--n300);line-height:1.7;margin-bottom:16px;max-width:var(--measure)}
.content ul{list-style:none;margin:8px 0 20px}
.content ul li{position:relative;padding-left:24px;margin-bottom:10px;color:var(--n300);line-height:1.6}
.content ul li::before{content:"";position:absolute;left:2px;top:11px;width:7px;height:7px;background:var(--steel);border-radius:50%}
.two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,64px);align-items:start}
.two-col .media{border-radius:0;overflow:hidden;background:var(--surface-2)}
.two-col .media .amb-wrap{aspect-ratio:5/4}
.two-col .media img{width:100%;height:100%;object-fit:cover}

/* NAP block */
.nap{font-size:15px;line-height:1.7;color:var(--n300)}
.nap b{color:var(--white)}

/* ---------------- final CTA ---------------- */
.final{position:relative;background:var(--black);color:#fff;text-align:center;overflow:hidden;border-top:1px solid var(--border)}
.final .bg{position:absolute;inset:0;opacity:.32;background-size:cover;background-position:center}
.final .sc{position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,13,13,.72),rgba(13,13,13,.88))}
.final .inner{position:relative;z-index:2;padding:clamp(80px,11vw,140px) 0}
.final .eyebrow{color:rgba(255,255,255,.8)}
.final h2{font-size:clamp(32px,4.8vw,58px);color:#fff;max-width:18ch;margin:0 auto 22px;letter-spacing:-.036em;line-height:1.0}
.final p{color:rgba(255,255,255,.78);margin-bottom:34px;max-width:52ch;margin-left:auto;margin-right:auto}
.final .row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------------- footer ---------------- */
footer.ft{background:var(--black);color:var(--n400);padding:70px 0 34px;border-top:1px solid var(--border)}
.ft-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:44px;border-bottom:1px solid var(--border)}
.ft .brand2{font-size:19px;font-weight:600;letter-spacing:-.01em;color:#fff;margin-bottom:14px}
.ft p.blurb{font-size:14px;line-height:1.6;max-width:34ch}
.ft h3{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--n500);margin-bottom:16px;font-weight:700;font-family:var(--font)}
.ft ul{list-style:none}
.ft ul li{margin-bottom:11px}
.ft ul li a{font-size:13.5px;color:var(--n300);transition:color .3s}
.ft ul li a:hover{color:#fff}
.ft .nap-line{font-size:13.5px;color:var(--n400);line-height:1.6;margin-top:14px}
.ft-bot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;padding-top:26px;font-size:12.5px;color:var(--n500)}

/* brand thread — the one-line scent band pointing at the Signature Standard */
.thread{padding:clamp(60px,9vw,104px) 28px;text-align:center;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.thread p{font-style:italic;font-weight:400;font-size:clamp(19px,2.4vw,25px);color:var(--white);max-width:36ch;margin:0 auto 12px;line-height:1.4;letter-spacing:-.015em}
.thread a{font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--sky)}

/* ---------------- reveal ---------------- */
.rise{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rise.in{opacity:1;transform:none}
.rise.d1{transition-delay:.08s}.rise.d2{transition-delay:.16s}.rise.d3{transition-delay:.24s}

/* ---------------- responsive ---------------- */
@media(max-width:980px){
  .val-grid{grid-template-columns:repeat(2,1fr)}
  .svc-grid,.rev-grid,.steps,.post-grid,.mech{grid-template-columns:1fr 1fr}
  .tiers,.tiers.trio{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiers.trio .tier:last-child{grid-column:1/-1}
  .ft-top{grid-template-columns:1fr 1fr}
  .two-col{grid-template-columns:1fr}
}
@media(max-width:760px){
  .val-grid,.svc-grid,.rev-grid,.steps,.post-grid,.post-grid.two,.mech,.tiers,.tiers.trio{grid-template-columns:1fr}
  .g-grid{grid-template-columns:repeat(2,1fr)}
  .span6,.span4,.span5,.span7,.span8{grid-column:span 1}
  .g-item.span6,.g-item.span7,.g-item.span8{aspect-ratio:4/3}
  .tall{grid-row:auto}
  .ft-top{grid-template-columns:1fr}
  .hero{min-height:88svh}
  .hero-inner{padding-bottom:5vh}
  .hero .film-pill{margin-top:16px}
  .hero .trust{margin-top:22px}
  .bynum{gap:28px 40px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important}
  .rise{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .hero-bg{transform:none}
  .btn:hover,.svc:hover,.pcard:hover,.tier:hover{transform:none}
  /* the hero never settles without its video; keep the full display voice */
  .hero.settled h1{font-size:clamp(46px,7.8vw,110px);letter-spacing:-.042em;max-width:16ch}
  .hero.settled p.sub{opacity:1}
}

/* ============================================================
   MOTION & DEPTH PASS — compositor-only (preserved mechanics,
   recolored). Parallax + tilt are JS-gated OFF on mobile /
   coarse pointers; everything degrades static under
   prefers-reduced-motion.
   ============================================================ */

/* media wipe reveal — the clip lives on the INNER img (IO deadlock guard, preserved) */
.mask>img{clip-path:inset(0 0 100% 0);transition:clip-path 1.15s var(--ease-lux),transform .9s var(--ease)}
.mask.in>img{clip-path:inset(0 0 0 0)}

/* word-stagger headline reveal (JS wraps each word: .w > span) */
.ws .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em;margin-bottom:-.06em}
.ws .w > span{display:inline-block;transform:translateY(115%);transition:transform .7s var(--ease-lux)}
.ws.in .w > span{transform:none}

/* parallax */
.px-inner{transform:translate3d(0,var(--py,0),0) scale(1.14);will-change:transform}

/* 3D tilt on cards */
.tilt{position:relative;transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d;transition:transform .5s var(--ease-lux)}
.tilt.tilting{transition:transform .1s linear}
.tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;opacity:0;
  background:radial-gradient(430px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.10),transparent 58%);
  transition:opacity .5s var(--ease-lux)}
.tilt.tilting::after{opacity:1}
.mag{will-change:transform;transition:transform .24s var(--ease-lux)}
.spot{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:0;transition:opacity .6s var(--ease)}
.sec-head{position:relative}
.echo{position:absolute;right:0;top:-.52em;z-index:0;pointer-events:none;user-select:none;white-space:nowrap;
  font-style:italic;font-weight:600;line-height:1;letter-spacing:-.03em;
  font-size:clamp(90px,13vw,190px);color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.07)}
.bg-ink .echo{-webkit-text-stroke:1px rgba(255,255,255,.07)}
@media(max-width:1000px){.echo{display:none}}
@media(prefers-reduced-motion:reduce){.tilt::after{display:none}.mag{transition:none}.spot{display:none}}

/* section heads: eyebrow, then the headline wipes up, then the lede */
.sec-head.rise{opacity:1;transform:none}
.sec-head.rise .eyebrow,.sec-head.rise h2,.sec-head.rise p{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.sec-head.rise h2{clip-path:inset(-4% -4% 104% -4%);transition:opacity .8s var(--ease) .09s,transform .8s var(--ease) .09s,clip-path .9s var(--ease-lux) .09s}
.sec-head.rise p{transition-delay:.18s}
.sec-head.rise.in .eyebrow,.sec-head.rise.in h2,.sec-head.rise.in p{opacity:1;transform:none}
.sec-head.rise.in h2{clip-path:inset(-4% -4% -10% -4%)}

/* scroll-linked zoom (native CSS scroll-driven animations, preserved) */
@supports (animation-timeline: view()) {
  .g-item img,.two-col .media img{animation:bandZoom linear both;animation-timeline:view();animation-range:entry 0% cover 85%}
  .hero-bg{animation:heroDrift linear both;animation-timeline:scroll(root);animation-range:0 100vh}
}
@keyframes bandZoom{from{scale:1.08}to{scale:1}}
@keyframes heroDrift{from{scale:1}to{scale:1.08}}
/* reading progress on long-form articles */
.readbar{position:fixed;top:0;left:0;right:0;height:2px;z-index:300;pointer-events:none;
  background:var(--sky);transform-origin:0 50%;transform:scaleX(0)}

@media(prefers-reduced-motion:reduce){
  .g-item img,.two-col .media img,.hero-bg{animation:none!important}
  .sec-head.rise .eyebrow,.sec-head.rise h2,.sec-head.rise p{transition:none;opacity:1;transform:none;clip-path:none}
  .readbar{display:none}
}

/* pinned scroll-story ("the reel is the hero") */
.story{position:relative;background:var(--black)}
.story-track{position:relative}
.story-sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center}
.story-bg{position:absolute;inset:0}
.story-bg .frame{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;transform:scale(1.1);
  will-change:opacity,transform;
  transition:opacity 1s var(--ease-lux),transform 7s var(--ease-lux)}
.story-bg .frame.on{opacity:1;transform:scale(1)}
.story-bg .frame.still,.story-bg .frame.still.on{transform:scale(1);transition:opacity 1s var(--ease-lux)}
.story-sticky > .sc{position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,13,13,.5) 0%,rgba(13,13,13,.35) 40%,rgba(13,13,13,.84) 100%)}
.story-inner{position:relative;z-index:2;color:#fff;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 28px}
.story-inner .eyebrow{color:rgba(255,255,255,.8)}
.story-caps{position:relative;min-height:clamp(180px,26vh,240px);margin-top:18px}
.story-cap{position:absolute;left:0;top:0;right:0;opacity:0;transform:translateY(22px);
  transition:opacity .6s var(--ease-lux),transform .6s var(--ease-lux);pointer-events:none}
.story-cap.on{opacity:1;transform:none;pointer-events:auto}
.story-cap h2{color:#fff;font-size:clamp(30px,4.4vw,54px);max-width:16ch;letter-spacing:-.034em;line-height:1.02}
.story-cap p{color:rgba(255,255,255,.84);margin-top:14px;max-width:46ch;font-size:clamp(15px,1.5vw,17.5px)}
.story-progress{display:flex;gap:9px;margin-top:30px}
.story-progress i{width:38px;height:2px;background:rgba(255,255,255,.26);transition:background .4s var(--ease)}
.story-progress i.on{background:var(--sky)}

@media(max-width:760px){
  .tilt{transform:none!important}
  .story-sticky{height:90svh}
  .story-cap h2{font-size:clamp(26px,7vw,40px)}
}
@media(prefers-reduced-motion:reduce){
  .mask>img{clip-path:none!important;transition:none!important}
  .ws .w > span{transform:none!important;transition:none!important}
  .hero-video{transition:none!important}
  .tilt{transform:none!important}
  .px-inner{transform:none!important}
  .story-bg .frame{transition:none!important}
  .story-cap{transition:none!important}
}

/* ---- native cross-page transitions (progressive enhancement, same-origin MPA) ---- */
@view-transition{ navigation:auto }
::view-transition-old(root),::view-transition-new(root){ animation-duration:.32s; animation-timing-function:var(--ease) }
header.nav{ view-transition-name:site-nav }
footer.ft{ view-transition-name:site-ft }

/* ---- typography: typeset wrapping (Plus Jakarta carries no opsz axis;
   weights are set per-role above, no font-variation-settings needed) ---- */
h1,h2,h3,h4{ text-wrap:balance; font-kerning:normal; font-feature-settings:"kern" 1,"liga" 1 }
.lede,.hero p.sub,.subhero p.sub,.prose p,.tldr p{ text-wrap:pretty }
.svc h3,.tier h3,.pcard h3,.val h3,.step h3,.mech .m h3,.content h3{ font-size:var(--fs-h3) }

/* ---- focus: dark-aware double ring (WCAG 2.4.7 / 1.4.11) ---- */
:focus-visible{ outline:2px solid var(--sky); outline-offset:2px; box-shadow:0 0 0 4px rgba(103,179,213,.28) }

/* ---- link-underline dialect ---- */
.lnk,.prose a,.related a,.svc .more{ background-image:linear-gradient(var(--sky),var(--sky)); background-repeat:no-repeat; background-position:0 100%; background-size:0% 1px; transition:background-size .5s var(--ease-lux),color .3s var(--ease) }
.lnk:hover,.prose a:hover,.related a:hover,.svc:hover .more{ background-size:100% 1px }
.prose a{ text-decoration:none }

/* ---- fixed-nav anchor offset so jumped-to sections aren't cropped ---- */
section[id]{ scroll-margin-top:clamp(80px,12vh,120px) }

@media(prefers-reduced-motion:reduce){
  @view-transition{ navigation:none }
  ::view-transition-group(*),::view-transition-old(root),::view-transition-new(root){ animation:none!important }
  .val::after,.g-item::before{ transition:none!important }
  .btn:active,.svc:active,.tier:active,.pcard:active{ transform:none!important }
  body::before{ animation:none!important; transform:scaleX(0) }
  .lnk,.prose a,.related a,.svc .more{ background-size:100% 1px }
}

/* brand mark (the VVT cube) in the nav, beside the wordmark */
.brand-mark{ height:24px; width:auto; flex:0 0 auto; align-self:center; margin-right:10px; display:block }
@media(max-width:760px){ .brand-mark{ height:22px; margin-right:8px } }

/* ---- services page: package cards (real published price card) ---- */
.tiers.pkgs .tier{display:flex;flex-direction:column}
.tier .price{color:var(--white);font-size:30px;font-weight:500;line-height:1;margin:6px 0 4px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.tier .price .from{display:block;font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--n400);margin-bottom:7px}
.tier .price small{display:block;font-size:12.5px;color:var(--n400);font-weight:400;letter-spacing:0;margin-top:6px}
.tier.best .price{color:var(--sky)}
.pkg-includes{list-style:none;margin:18px 0 24px;display:grid;gap:10px}
.pkg-includes li{position:relative;padding-left:26px;font-size:14px;color:var(--n300);line-height:1.4}
.pkg-includes li::before{content:"";position:absolute;left:3px;top:3px;width:12px;height:7px;border-left:2px solid var(--sky);border-bottom:2px solid var(--sky);transform:rotate(-45deg)}
.tier .pkg-cta{margin-top:auto;width:100%;justify-content:center}
/* à-la-carte add-on chips */
.addon-strip{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:940px;margin:0 auto}
.addon-chip{font-size:13.5px;color:var(--n300);background:var(--surface);border:1px solid var(--border);border-radius:0;padding:9px 17px;white-space:nowrap}
.addon-chip b{color:var(--white);font-weight:600}

/* ---- portfolio: category filter + reel + impact ---- */
.filter-bar{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:44px}
.filter-chip{font-family:var(--font);font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--n300);
  background:var(--surface);border:1px solid var(--border-2);border-radius:0;padding:9px 19px;cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .28s var(--ease-snap)}
.filter-chip:hover{border-color:rgba(255,255,255,.5)}
.filter-chip:active{transform:scale(.96)}
.filter-chip.is-on{background:var(--white);color:var(--black);border-color:var(--white)}
.g-item[hidden]{display:none}
/* cinematic reel window */
.reel{position:relative;max-width:1100px;margin:0 auto;aspect-ratio:16/9;border-radius:0;overflow:hidden;background:var(--surface);box-shadow:var(--shadow-lift)}
.reel img{width:100%;height:100%;object-fit:cover;opacity:.86;transition:transform 1.1s var(--ease-lux),opacity .5s var(--ease)}
.reel:hover img{transform:scale(1.04);opacity:.95}
.reel-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border:0;background:transparent;cursor:pointer;color:#fff}
.reel-play span{width:88px;height:88px;border-radius:50%;background:rgba(255,255,255,.12);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.5);
  display:flex;align-items:center;justify-content:center;transition:transform .4s var(--ease-lux),background .3s var(--ease),border-color .3s var(--ease)}
.reel-play:hover span{transform:scale(1.08);background:rgba(103,179,213,.24);border-color:var(--sky)}
.reel-play svg{width:30px;height:30px;margin-left:5px;fill:#fff}
.reel-cap{position:absolute;left:24px;bottom:20px;color:#fff;font-size:13px;letter-spacing:.06em;text-transform:uppercase;text-shadow:0 1px 12px rgba(0,0,0,.7)}
@media(prefers-reduced-motion:reduce){.reel img{transition:none}.reel:hover img{transform:none}}

/* ---- photo-band: full-bleed media interlude ---- */
.photo-band{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:0}
.photo-band img{width:100%;height:clamp(240px,38vw,480px);object-fit:cover;display:block}
.photo-band.duo{grid-template-columns:1.4fr 1fr}
.photo-band.duo img{height:clamp(280px,42vw,540px)}
@media(max-width:640px){.photo-band{grid-template-columns:1fr}.photo-band img{height:clamp(190px,52vw,260px)}.photo-band.duo{grid-template-columns:1fr 1fr}.photo-band.duo img{height:clamp(160px,34vw,240px)}}

/* ---- journal index: featured post + hairline editorial rows ---- */
.post-feat{display:grid;grid-template-columns:1.35fr 1fr;gap:34px;align-items:center;margin:8px 0 30px;border:1px solid var(--border);border-radius:0;overflow:hidden;background:var(--surface)}
.post-feat .pf-media img{width:100%;height:100%;object-fit:cover;display:block}
.post-feat .pf-body{padding:30px 34px 30px 0}
.post-feat h3{font-size:clamp(21px,2.3vw,28px);letter-spacing:-.02em;margin:12px 0 10px}
.post-feat p{color:var(--n300);font-size:14.5px;max-width:46ch}
.post-feat .pi-m{display:inline-block;margin-top:14px}
.post-index{border-top:1px solid var(--border)}
.pi-row{display:grid;grid-template-columns:200px 1fr auto;gap:22px;align-items:baseline;padding:18px 2px;border-bottom:1px solid var(--border);transition:background .25s var(--ease)}
.pi-row:hover{background:var(--surface)}
.pi-cat{font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--sky)}
.pi-t{font-size:16.5px;font-weight:600;letter-spacing:-.01em;color:var(--white)}
.pi-row:hover .pi-t{color:var(--sky)}
.pi-m{font-size:12px;color:var(--n400);white-space:nowrap}
@media(max-width:760px){.post-feat{grid-template-columns:1fr}.post-feat .pf-body{padding:22px}.pi-row{grid-template-columns:1fr;gap:5px;padding:16px 2px}.pi-m{display:none}}

/* legible selection on dark grounds */
.hero ::selection,.subhero ::selection,.bg-ink ::selection,.process ::selection,.statement ::selection,.final ::selection,.story ::selection,footer.ft ::selection,.cta-card ::selection{background:rgba(103,179,213,.32);color:#fff}
/* print: no dark ink dumps, reveal everything, hide chrome */
@media print{
  header.nav,.final,.scrollcue,.area-band,.menu-btn,.nav-cta{display:none!important}
  .rise,.mask,.ws .w>span{opacity:1!important;transform:none!important;clip-path:none!important}
  body,.hero,.subhero,.bg-ink,.bg-bone,.bg-paper,.process,.statement,.sig,.faq,.reviews,.services,footer.ft{background:#fff!important;color:#1a2431!important}
  h1,h2,h3,h4,.hero h1,.subhero h1,.statement h2,.process h2,.process h3,.process p{color:#1a2431!important;text-shadow:none!important}
}

/* ---- visual package cards (deliverables AS images, benefits as captions) ---- */
.pkg-tiles{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin:14px 0 4px}
.pkg-tiles figure{position:relative;border-radius:0;overflow:hidden}
.pkg-tiles img{width:100%;height:86px;object-fit:cover;display:block}
.pkg-tiles figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 9px 7px;font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.72))}
/* ---- click-to-enlarge image viewer ---- */
.zoomable{cursor:zoom-in}
.imgbox{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:4vh 4vw;background:rgba(10,10,11,.92);opacity:0;visibility:hidden;transition:opacity .28s var(--ease),visibility .28s}
.imgbox.on{opacity:1;visibility:visible}
.imgbox img{max-width:92vw;max-height:88vh;border-radius:0;box-shadow:0 30px 80px -20px rgba(0,0,0,.8);cursor:zoom-out}
.imgbox .ib-x{position:absolute;top:18px;right:22px;background:none;border:0;color:rgba(255,255,255,.85);font-size:34px;line-height:1;cursor:pointer;padding:8px}
.imgbox .ib-x:hover{color:#fff}

/* visible package include list (always shown; the popup is the deep dive) */
.pkg-list{list-style:none;margin:12px 0 4px;padding:0}
.pkg-list li{font-size:13px;color:var(--n300);padding:6.5px 0 6.5px 20px;border-top:1px solid var(--border);position:relative}
.pkg-list li::before{content:"";position:absolute;left:2px;top:13px;width:9px;height:5px;border-left:1.6px solid var(--sky);border-bottom:1.6px solid var(--sky);transform:rotate(-45deg)}
.pkg-open{display:inline-flex;align-items:center;gap:7px;margin:10px 0 14px;background:none;border:0;cursor:pointer;font:600 12.5px/1 var(--font);letter-spacing:.05em;color:var(--sky);padding:8px 0}
.pkg-open:hover{color:var(--white)}
/* the package deep-dive popup */
.pkg-modal{position:fixed;inset:0;z-index:130;display:flex;align-items:center;justify-content:center;padding:3vh 3vw;background:rgba(10,10,11,.94);opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s}
.pkg-modal.on{opacity:1;visibility:visible}
.pkgm{background:var(--surface);border:1px solid var(--border-2);border-radius:0;max-width:900px;width:100%;max-height:92vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 40px 90px -30px rgba(0,0,0,.8)}
.pkgm-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;padding:26px 30px 6px}
.pkgm-head h3{font-size:clamp(23px,2.8vw,30px);letter-spacing:-.02em}
.pkgm-head .p{font-size:17px;font-weight:500;color:var(--sky);font-variant-numeric:tabular-nums}
.pkgm-why{padding:0 30px 16px;color:var(--n300);font-size:14.5px;max-width:62ch}
.pkgm-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 30px 8px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.pkgm-slide{flex:0 0 min(320px,78%);scroll-snap-align:center;background:var(--surface-2);border-radius:0;overflow:hidden}
.pkgm-slide img{width:100%;height:180px;object-fit:cover;display:block}
.pkgm-slide .t{padding:13px 15px 15px}
.pkgm-slide .t b{display:block;font-size:15px;font-weight:600;color:var(--white);margin-bottom:5px}
.pkgm-slide .t span{display:block;font-size:12.5px;color:var(--n400);line-height:1.55}
.pkgm-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 30px 24px}
.pkgm-nav{display:flex;gap:8px}
.pkgm-nav button{width:38px;height:38px;border-radius:999px;border:1px solid var(--border-2);background:var(--surface);cursor:pointer;color:var(--white);font-size:16px}
.pkgm-nav button:hover{border-color:var(--sky)}
.pkgm-x{position:absolute;top:16px;right:20px;background:none;border:0;color:rgba(255,255,255,.85);font-size:34px;line-height:1;cursor:pointer;padding:8px}
.pkgm-x:hover{color:#fff}
@media(max-width:640px){.pkgm-head,.pkgm-why,.pkgm-track,.pkgm-foot{padding-left:18px;padding-right:18px}}

/* whole package card = one big target */
.tier.pkg-click{cursor:pointer;transition:transform .3s var(--ease),border-color .3s var(--ease)}
.tier.pkg-click:hover{transform:translateY(-3px);border-color:var(--border-2)}

/* ============================================================
   THE SCREENING ROOM — portfolio.html + video.html register.
   Under the dark editorial system the whole site lives in this
   territory already; body.cinema keeps only its structural
   pieces (rail, film dialog, oversized hero) plus a one-step-
   deeper ground so film pages still read a shade more theatrical.
   ============================================================ */

/* ---- "watch a listing film" pill ---- */
.film-pill{display:inline-flex;align-items:center;gap:10px;margin-top:24px;background:transparent;
  border:1px solid rgba(103,179,213,.55);color:#fff;font-family:var(--font);font-size:13px;font-weight:600;
  letter-spacing:.04em;padding:11px 22px;border-radius:999px;cursor:pointer;
  transition:border-color .3s var(--ease),background .3s var(--ease)}
.film-pill:hover{border-color:var(--sky);background:rgba(103,179,213,.12)}
.film-pill .fp-play{font-size:10px;line-height:1}

/* ---- film dialog: native <dialog> (explicit centering, preserved fix) ---- */
dialog.film-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;
  border:0;padding:0;max-width:min(1160px,92vw);max-height:90vh;width:100%;background:transparent;color:#fff}
dialog.film-dialog::backdrop{background:var(--ink-cinema);opacity:0;transition:opacity .35s var(--ease)}
dialog.film-dialog[open]::backdrop{opacity:.96}
.fd-frame{position:relative;aspect-ratio:16/9;max-height:calc(90vh - 34px);background:#000;border-radius:0;overflow:hidden;box-shadow:0 50px 130px -30px rgba(0,0,0,.85);margin:0 auto}
.fd-frame video{width:100%;height:100%;display:block;background:#000}
.fd-close{position:absolute;top:12px;right:12px;z-index:2;background:rgba(10,10,11,.55);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.4);color:#fff;
  width:38px;height:38px;border-radius:50%;cursor:pointer;font-size:20px;line-height:1;transition:border-color .3s,background .3s}
.fd-close:hover{background:rgba(255,255,255,.18);border-color:#fff}
.fd-cap{margin:16px 4px 0;color:rgba(255,255,255,.6);font-size:12.5px;letter-spacing:.04em;text-align:center}
.fd-cap a{color:#fff;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
@media(prefers-reduced-motion:reduce){ dialog.film-dialog::backdrop{transition:none} }

/* ---- film-grain overlay utility ---- */
.grain{position:relative}
.grain::before{content:"";position:fixed;top:-10%;left:-10%;width:120%;height:120%;z-index:2;pointer-events:none;
  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='0.9' numOctaves='2' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat:repeat;background-size:220px 220px;opacity:.035;
  animation:grainDrift 9s steps(8) infinite}
@keyframes grainDrift{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-40px,-30px,0)} }
@media(prefers-reduced-motion:reduce){ .grain::before{animation:none} }

/* ---- body.cinema: one step deeper than the base ground ---- */
body.cinema{background:var(--ink-cinema);color:var(--n300)}
body.cinema h1,body.cinema h2,body.cinema h3,body.cinema h4{color:#fff}
body.cinema .eyebrow{color:var(--n400)}
body.cinema .sec-head p:not(.eyebrow){color:var(--n400)}
body.cinema .lede{color:var(--n400)}
body.cinema .bg-paper{background:var(--ink-cinema)}
body.cinema .bg-bone{background:var(--ink-cinema-2)}
body.cinema .bg-ink,body.cinema .hero,body.cinema .subhero,body.cinema .final,body.cinema .process,body.cinema .statement{background:var(--ink-cinema)}
body.cinema footer.ft{background:var(--ink-cinema)}
body.cinema .content p,body.cinema .content ul li{color:var(--n300)}
body.cinema .content ul li::before{background:var(--steel)}
body.cinema .stat-tag{color:var(--sky);border-color:var(--border-2)}
body.cinema .page-updated{color:var(--n500)}
body.cinema .g-item,body.cinema .two-col .media{background:var(--surface)}
body.cinema .filter-chip{background:var(--surface);border-color:var(--border-2);color:var(--n300)}
body.cinema .filter-chip:hover{border-color:rgba(255,255,255,.5)}
body.cinema .filter-chip.is-on{background:#fff;color:var(--ink-cinema);border-color:#fff}
body.cinema .faq{background:var(--ink-cinema-2)}
body.cinema .faq-item{border-color:var(--border-2)}
body.cinema .faq-item summary{color:#fff}
body.cinema .faq-item .a{color:var(--n300)}
body.cinema .faq-item summary::after{color:var(--n500)}
body.cinema .faq-item[open] summary::after,body.cinema .faq-item summary:hover::after{color:var(--sky)}
body.cinema .related{border-color:var(--border-2)}
body.cinema .related h3{color:var(--n500)}
body.cinema .related a{color:#fff}
body.cinema .related a:hover{color:var(--sky)}
body.cinema .thread{border-color:var(--border-2)}
body.cinema .thread p{color:#fff}
body.cinema .thread a{color:var(--sky)}
body.cinema .bynum .stat .big{color:#fff}
body.cinema .bynum .stat .lab{color:var(--n400)}
body.cinema ::selection{background:rgba(103,179,213,.32);color:#fff}

/* portfolio.html: the oversized screening-room hero */
body.cinema .hero h1{font-size:clamp(48px,9vw,110px);font-weight:500;max-width:15ch}
body.cinema .subhero h1 em{font-style:italic;color:var(--sky);font-weight:300}
body.cinema .subhero h1{font-size:clamp(40px,6.4vw,80px)}

/* ---- horizontal scroll-snap work rail (portfolio screening room) ---- */
.rail-sec{padding-bottom:8px}
.rail-scroller{position:relative}
.rail-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px clamp(20px,4vw,44px) 14px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.rail-card{position:relative;flex:0 0 auto;width:min(78vw,420px);scroll-snap-align:start;
  border-radius:0;overflow:hidden;background:#000;box-shadow:0 20px 50px -24px rgba(0,0,0,.75);
  cursor:pointer;border:0;padding:0;text-align:left;font:inherit;color:inherit;display:block}
.rail-card::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);pointer-events:none}
.rc-media{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
.rc-media img,.rc-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.rc-media video{pointer-events:none}
.rc-cap{padding:14px 4px 0;font-size:13px;letter-spacing:.03em;color:var(--n400)}
.rail-featured .rc-cap{color:#fff;font-weight:600;display:flex;align-items:center;gap:9px}
.rail-featured .rc-play{display:inline-flex;align-items:center;justify-content:center;width:21px;height:21px;
  border-radius:50%;border:1px solid var(--sky);font-size:9px;padding-left:2px;flex:0 0 auto}
.rail-progress{height:2px;margin:2px clamp(20px,4vw,44px) 0;background:rgba(255,255,255,.14);
  position:relative;overflow:hidden}
.rail-progress::before{content:"";position:absolute;inset:0;background:var(--sky);transform-origin:0 50%}
@supports (animation-timeline: view()) {
  .rail-track{scroll-timeline:--railscroll inline}
  .rail-progress::before{animation:railProgress linear both;animation-timeline:--railscroll;animation-range:0% 100%}
}
@keyframes railProgress{ from{transform:scaleX(.02)} to{transform:scaleX(1)} }
@media(max-width:640px){ .rail-card{width:82vw} }
@media(prefers-reduced-motion:reduce){ .rail-progress::before{animation:none!important} }

/* ---- home.html: atmosphere shift (seam spacers flanking the pinned story) ---- */
.atmos-seam{height:clamp(90px,14vw,190px);background:transparent}
.atmos{position:fixed;inset:0;z-index:-1;pointer-events:none}
.atmos-dark{position:absolute;inset:0;background:var(--ink-cinema,#0a0a0b);opacity:0}
@supports (animation-timeline: view()) {
  .story{view-timeline:--filmzone block}
  .atmos-dark{animation:atmosCross linear both;animation-timeline:--filmzone;animation-range:cover 0% cover 100%}
}
@keyframes atmosCross{0%{opacity:0}8%{opacity:1}92%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){ .atmos-dark{opacity:0!important;animation:none!important} }

/* ---- home.html: confidence stats band ---- */
.stats-band{background:var(--black);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(28px,4vw,48px);text-align:center}
.sb-stat{padding:0 6px}
.sb-rule{width:44px;height:1px;margin:0 auto 22px;background:var(--rule-brass)}
/* every .sb-num reserves the SAME height and bottom-aligns (baseline fix, preserved) */
.sb-num{font-size:clamp(46px,6vw,84px);font-weight:300;letter-spacing:-.02em;color:var(--white);line-height:1;font-variant-numeric:tabular-nums;
  min-height:clamp(46px,6vw,84px);display:flex;align-items:flex-end;justify-content:center}
.sb-num.compact{font-size:clamp(22px,2.6vw,36px);white-space:nowrap}
.sb-lab{margin-top:14px;font-size:13px;letter-spacing:.02em;color:var(--n400)}
@media(max-width:760px){
  .stats-grid{grid-template-columns:1fr 1fr;row-gap:40px}
  .sb-num.compact{font-size:clamp(20px,5.4vw,28px)}
}

/* ---- hero video pause control (WCAG 2.2.2, preserved mechanics) ---- */
.video-pause-btn{position:absolute;z-index:3;right:clamp(20px,4vw,44px);bottom:clamp(74px,9vw,96px);
  width:40px;height:40px;border-radius:50%;align-items:center;justify-content:center;
  background:rgba(10,10,11,.5);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.4);color:#fff;cursor:pointer;
  transition:background .3s var(--ease),border-color .3s var(--ease)}
.video-pause-btn:not([hidden]){display:flex}
.video-pause-btn:hover{background:rgba(255,255,255,.18);border-color:var(--sky)}
.video-pause-btn svg{width:16px;height:16px;fill:#fff}
.video-pause-btn .vp-play{display:none}
.video-pause-btn.is-paused .vp-pause{display:none}
.video-pause-btn.is-paused .vp-play{display:block}
@media(max-width:760px){ .video-pause-btn{bottom:110px} }

/* ---- case study template: chaptered sticky-media story (preserved) ---- */
.cs-story{position:relative;background:var(--ink-cinema,#0a0a0b)}
.cs-progress-track{position:absolute;inset:0;pointer-events:none;z-index:2;display:grid;align-content:end}
.cs-progress-bar{position:sticky;bottom:0;height:3px;background:rgba(255,255,255,.14)}
.cs-progress-bar::before{content:"";position:absolute;inset:0;background:var(--sky);transform-origin:0 50%;transform:scaleX(.02)}
.cs-chapter{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,56px);align-items:start;padding:clamp(56px,9vw,104px) 0}
.cs-chapter:first-child{padding-top:clamp(40px,7vw,80px)}
.cs-media{position:relative;border-radius:0;overflow:hidden;background:#000;box-shadow:0 30px 70px -30px rgba(0,0,0,.8);aspect-ratio:16/10}
.cs-media picture,.cs-media img{display:block;width:100%;height:100%;object-fit:cover}
.cs-media .reel-play span{width:72px;height:72px}
.cs-media .reel-play svg{width:24px;height:24px}
.cs-media-trio{aspect-ratio:auto;background:transparent;box-shadow:none;display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.cs-media-trio picture{position:relative;aspect-ratio:3/4;overflow:hidden;background:#000;display:block}
.cs-media-trio img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cs-cap .eyebrow{color:var(--n400)}
.cs-cap h2{color:#fff;font-size:clamp(28px,3.4vw,40px);margin:12px 0 14px;max-width:16ch}
.cs-cap p{color:var(--n300);font-size:15.5px;line-height:1.65;max-width:44ch}
@media(min-width:761px){ .cs-media{position:sticky;top:14vh} }
@media(max-width:760px){
  .cs-chapter{grid-template-columns:1fr;gap:22px;padding:52px 0}
  .cs-chapter:first-child{padding-top:36px}
  .cs-cap p{max-width:none}
}
@supports (animation-timeline: view()) {
  .cs-story{view-timeline:--csprogress block}
  .cs-progress-bar::before{animation:csProgressFill linear both;animation-timeline:--csprogress;animation-range:cover 0% cover 100%}
  .cs-media img{animation:csMediaSettle linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
  .cs-cap{animation:csCapRise linear both;animation-timeline:view();animation-range:entry 5% cover 40%}
}
@keyframes csProgressFill{from{transform:scaleX(.02)}to{transform:scaleX(1)}}
@keyframes csMediaSettle{from{scale:1.04}to{scale:1}}
@keyframes csCapRise{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){
  .cs-media img{animation:none!important}
  .cs-cap{animation:none!important;opacity:1!important;translate:none!important}
  .cs-progress-bar::before{animation:none!important;transform:scaleX(.02)!important}
}

/* case-studies.html: featured case teaser card */
.case-feat{display:grid;grid-template-columns:1.1fr .9fr;gap:0;border-radius:0;overflow:hidden;background:var(--ink-cinema,#0a0a0b);border:1px solid var(--border);box-shadow:var(--shadow-lift)}
.case-feat .cf-media{position:relative;aspect-ratio:16/10}
.case-feat .cf-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--ease)}
.case-feat .cf-body{padding:clamp(30px,4vw,48px);display:flex;flex-direction:column;justify-content:center;color:var(--n300)}
.case-feat .cf-body .eyebrow{color:var(--n400)}
.case-feat .cf-body h2{color:#fff;font-size:clamp(23px,2.7vw,30px);margin:12px 0 14px}
.case-feat .cf-body p{color:var(--n400);font-size:14.5px;line-height:1.6;margin-bottom:22px}
.case-feat .cf-body .more{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--sky)}
.case-feat .cf-body .more .arw{transition:transform .3s var(--ease)}
.case-feat:hover .cf-body .more .arw{transform:translateX(3px)}
.case-feat:hover .cf-media img{transform:scale(1.04)}
@media(max-width:760px){ .case-feat{grid-template-columns:1fr} }

/* ---- ambient-loop utility (poster-first, LCP-safe; preserved mechanics) ---- */
.amb-wrap{position:relative;width:100%;height:100%;overflow:hidden;background:var(--surface-2)}
.statement .amb-wrap{position:absolute;inset:0}
.amb-wrap>picture,.amb-wrap>img{position:absolute;inset:0;width:100%;height:100%}
.amb-wrap>picture img,.amb-wrap>img{width:100%;height:100%;object-fit:cover;display:block}
.amb-loop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s var(--ease)}
.amb-loop.ready{opacity:1}
.amb-scrim{position:absolute;inset:0;background:rgba(13,13,13,.48);pointer-events:none}
.amb-wrap .video-pause-btn{right:14px;bottom:14px}
@media(prefers-reduced-motion:reduce){ .amb-loop{transition:none!important} }

/* ---- services.html: split-screen sticky ladder (design §10 voice) ----
   Same sticky primitive as before; the light->navy->cinema tone descent
   collapses onto the single dark ground with hairline separations, and
   the rail type moves to the tight editorial voice. */
.svc-ladder{background:var(--black)}
.ladder-head{padding:clamp(72px,9vw,120px) clamp(20px,4vw,48px) 0}
.ladder-row{display:grid;grid-template-columns:minmax(260px,34%) 1fr;gap:clamp(28px,4vw,64px);align-items:start;padding:clamp(52px,7vw,92px) clamp(20px,4vw,48px)}
.ladder-row+.ladder-row{border-top:1px solid var(--border)}
.ladder-rail{position:sticky;top:clamp(84px,12vh,140px)}
.ladder-num{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--sky);font-weight:700;margin-bottom:14px}
.ladder-name{font-family:var(--font);font-weight:600;font-size:clamp(30px,3.6vw,46px);line-height:1.03;letter-spacing:-.032em;margin-bottom:16px;max-width:12ch;color:var(--white)}
.ladder-line{font-style:italic;font-weight:400;font-size:clamp(16px,1.5vw,18.5px);line-height:1.45;margin-bottom:18px;max-width:28ch;color:var(--n300)}
.ladder-price{font-size:13.5px;color:var(--n400);margin-bottom:24px;letter-spacing:.02em}
.ladder-price b{font-size:20px;font-weight:500;color:var(--white);font-variant-numeric:tabular-nums;margin-left:6px}
.ladder-media{display:flex;flex-direction:column;gap:2px}
.ladder-media figure{position:relative;border-radius:0;overflow:hidden;aspect-ratio:4/3;margin:0}
.ladder-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s var(--ease)}
.ladder-media figure:hover img{transform:scale(1.03)}
.ladder-media figcaption{position:absolute;left:0;right:0;bottom:0;padding:12px 16px;font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.9);background:linear-gradient(transparent,rgba(0,0,0,.68))}
.ladder-media .amb-figure{aspect-ratio:16/10}
/* tone classes collapse onto the dark ground (kept so markup needn't change) */
.ladder-row.tone-1{background:var(--black)}
.ladder-row.tone-2{background:var(--surface)}
.ladder-row.tone-3{background:var(--ink-cinema,#0a0a0b)}
.ladder-row.tone-2 .ladder-line,.ladder-row.tone-3 .ladder-line{color:var(--n300)}
.ladder-row.tone-2 .ladder-price,.ladder-row.tone-3 .ladder-price{color:var(--n400)}
.ladder-row.tone-2 .ladder-price b,.ladder-row.tone-3 .ladder-price b{color:#fff}
.ladder-row.tone-2 .ladder-num,.ladder-row.tone-3 .ladder-num{color:var(--sky)}
.ladder-row.tone-2 .ladder-name,.ladder-row.tone-3 .ladder-name{color:#fff}
@media(max-width:760px){
  .ladder-row{display:block;padding:40px 20px}
  .ladder-rail{position:static;margin-bottom:24px}
  .ladder-media figure{aspect-ratio:16/11}
}

/* ============================================================
   NEW COMPONENTS (Claude Design pass) — cinematic pricing bands
   + portfolio job sections. Adopted by pricing.html; available
   sitewide.
   ============================================================ */

/* ---- pricing: promise-led cinematic bands ---- */
.band{position:relative;min-height:74vh;display:flex;align-items:flex-end;overflow:hidden;border-top:1px solid var(--border)}
.band>img,.band>picture{position:absolute;inset:0;width:100%;height:100%}
.band>picture img,.band>img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.band:hover>img,.band:hover>picture img{transform:scale(1.028)}
/* Two layers: vertical scrim protecting the bottom content band (both columns),
   plus a horizontal one keeping the left column deepest. */
.band-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,13,13,0) 0%,rgba(13,13,13,.30) 42%,rgba(13,13,13,.86) 100%),linear-gradient(100deg,rgba(13,13,13,.90) 0%,rgba(13,13,13,.70) 44%,rgba(13,13,13,.34) 100%)}
.band-inner{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:end;width:100%;padding:64px clamp(20px,4vw,56px) 56px}
.tier-name{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--sky);margin-bottom:20px;white-space:nowrap}
.promise{font-size:clamp(30px,3.5vw,54px);font-weight:600;line-height:1.02;letter-spacing:-.034em;color:var(--white);max-width:20ch}
.band .buys{font-size:14.5px;line-height:1.72;color:var(--n300);margin-top:24px;max-width:48ch}
.band-right{display:flex;flex-direction:column;gap:22px;padding-bottom:6px}
.price-quiet{font-size:13px;color:var(--n400);display:flex;align-items:baseline;gap:7px}
.price-quiet span{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.66);white-space:nowrap}
.price-quiet b{font-size:19px;font-weight:500;color:rgba(255,255,255,.9);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.band.best .price-quiet b{color:var(--sky)}
.band .pkg-list{display:grid;grid-template-columns:1fr 1fr;gap:0 26px;margin:0}
.band .pkg-list li{list-style:none;font-size:12.5px;color:rgba(255,255,255,.92);padding:8px 0;border-bottom:1px solid rgba(255,255,255,.22);border-top:0;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.band .pkg-list li::before{display:none}
.band .flag{position:absolute;top:32px;left:clamp(20px,4vw,56px);font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--black);background:var(--sky);padding:6px 10px;white-space:nowrap;z-index:2}
.band.quiet{min-height:48vh}
@media (max-width:900px){.band-inner{grid-template-columns:1fr;gap:32px}.band{min-height:0}}

/* ---- before/after compare slider (.ba) — reinstated 2026-08-31 for Signature Photos.
   HONESTY LAW (see the parked note in home.html): this component may only ever show a
   GENUINE same-frame pair. The markup wires real asset filenames and the page JS hides
   the whole block if either file is missing — never a placeholder, never two different
   rooms posing as one. The invisible <input type=range> is the control: draggable,
   keyboard-accessible (arrow keys), screen-reader labelled. ---- */
.ba{position:relative;overflow:hidden;aspect-ratio:16/10;background:var(--surface-2)}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba .ba-after{clip-path:inset(0 0 0 var(--pos,50%))}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;background:rgba(255,255,255,.9);pointer-events:none;box-shadow:0 0 14px rgba(0,0,0,.5)}
.ba-handle::after{content:"↔";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:rgba(13,13,13,.62);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.6);color:#fff;font-size:15px;display:flex;align-items:center;justify-content:center;font-family:"Apple Symbols","Segoe UI Symbol","Noto Sans Symbols 2","Arial Unicode MS",sans-serif}
.ba input[type=range]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.ba input[type=range]:focus-visible ~ .ba-handle{background:var(--sky)}
.ba-lab{position:absolute;bottom:12px;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.92);text-shadow:0 1px 12px rgba(0,0,0,.8);pointer-events:none}
.ba-lab.l{left:14px}.ba-lab.r{right:14px}
.ba-note{margin-top:12px;font-size:12px;letter-spacing:.04em;color:var(--n500)}

/* ---- portfolio: by-shoot job sections ---- */
.job{padding:104px 0 0}
.job-head{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:end;margin-bottom:36px}
.job-head .eyebrow{display:block;margin-bottom:14px}
.job-head h3{font-size:clamp(26px,2.9vw,42px);font-weight:600;line-height:1.04;letter-spacing:-.03em;max-width:22ch}
.job-meta{font-size:14px;line-height:1.7;color:var(--n400);max-width:40ch}
.frames{display:grid;gap:2px;grid-template-columns:1.4fr 1fr 1fr}
.frames figure{position:relative;overflow:hidden;margin:0}
.frames img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;transition:transform 1.2s var(--ease)}
.frames figure:hover img{transform:scale(1.03)}
.film-frame{position:relative;aspect-ratio:2.39/1;overflow:hidden;background:var(--surface)}
.film-frame img{width:100%;height:100%;object-fit:cover}
.film-frame .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:74px;height:74px;border:1px solid rgba(255,255,255,.5);background:rgba(13,13,13,.4);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;color:var(--white);font-size:15px;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.film-frame:hover .play{background:rgba(103,179,213,.24);border-color:var(--sky)}
.film-cap{padding:20px 0 0;font-size:12px;letter-spacing:.06em;color:var(--n500)}
.cap{position:absolute;left:14px;bottom:12px;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.9);text-shadow:0 1px 12px rgba(0,0,0,.75)}
@media (max-width:900px){.frames{grid-template-columns:1fr}.job-head{grid-template-columns:1fr;gap:20px}}

/* SVCLABEL 2026-09-01: "From $400" alone reads as a bare rate for photography;
   naming the package it belongs to is what stops that misread. Kept on the same
   line so the row does not grow taller. */
.ladder-price .in-pkg{display:inline;font-size:.62em;font-weight:500;color:var(--n400);letter-spacing:.01em;white-space:nowrap;margin-left:.45em}
@media(max-width:560px){.ladder-price .in-pkg{display:block;margin:2px 0 0;font-size:.68em}}

/* ── Review page (REVIEWFLOW 2026-09-01) ───────────────────────────────────
   A sentiment split, NOT a review gate: the Google link is reachable from both
   branches. Gating -- showing the public review path only to happy customers --
   is against Google's review policy and risks the profile's reviews being
   filtered, so the unhappy branch leads with the private form but still offers
   the public option. Two targets only, both thumb-sized, per the "easy for
   everyone / visually simple" north star. */
.rv-hero h1 em{font-style:italic;font-weight:300;color:var(--sky)}
.rv-wrap{max-width:760px;margin:0 auto}

.rv-choice{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:8px 0 4px}
.rv-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  min-height:210px;padding:34px 22px;background:var(--surface);border:1px solid var(--border);
  color:var(--white);cursor:pointer;font-family:var(--font);
  transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease)}
.rv-btn:hover{border-color:var(--sky);background:var(--surface-2);transform:translateY(-2px)}
.rv-btn:focus-visible{outline:2px solid var(--sky);outline-offset:3px}
.rv-ic{display:block;width:46px;height:46px;color:var(--sky)}
.rv-ic svg{width:100%;height:100%;display:block}
.rv-lb{font-size:16.5px;font-weight:600;letter-spacing:-.01em}

.rv-panel{padding:6px 0 8px}
.rv-h{font-size:clamp(26px,3.4vw,38px);letter-spacing:-.028em;margin:0 0 14px}
.rv-h:focus{outline:none}
.rv-p{color:var(--n300);line-height:1.68;max-width:56ch;margin:0 0 26px}
.rv-cta{display:inline-block}
.rv-fine{font-size:13.5px;color:var(--n400);line-height:1.6;margin:16px 0 0;max-width:60ch}
.rv-alt{margin-top:10px}
.rv-alt a{color:var(--sky);text-decoration:underline;text-underline-offset:3px}

.rv-lab{display:block;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--n400);margin:20px 0 8px}
.rv-in{width:100%;background:var(--surface);border:1px solid var(--border);color:var(--white);
  font-family:var(--font);font-size:16px;line-height:1.5;padding:14px 16px;border-radius:0;
  transition:border-color .25s var(--ease)}
.rv-in:focus{outline:none;border-color:var(--sky)}
.rv-in::placeholder{color:var(--n500)}
.rv-ta{resize:vertical;min-height:150px}
.rv-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}

.rv-back{margin-top:28px;background:none;border:0;padding:0;cursor:pointer;font-family:var(--font);
  font-size:14.5px;color:var(--n400);transition:color .25s var(--ease)}
.rv-back:hover{color:var(--sky)}
.rv-back:focus-visible{outline:2px solid var(--sky);outline-offset:3px}

@media(max-width:620px){
  /* stack rather than shrink -- two 210px tiles side by side on a phone leaves
     each too narrow for the label to sit on one line */
  .rv-choice{grid-template-columns:1fr;gap:14px}
  .rv-btn{min-height:132px;flex-direction:row;gap:18px;justify-content:flex-start;padding:24px 22px}
  .rv-ic{width:34px;height:34px;flex:0 0 34px}
  .rv-actions .btn{width:100%;text-align:center}
}