/* ============================================================
   Virtual View Tours — MARKETING SITE design system
   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: DESIGN-BRIEF.md — "expensive by subtraction",
   ONE rationed brass accent, the photography is the only color
   that shouts. Dark<->bone alternation is the pacing device.

   Spine + tokens inherited from home.html (SPEC299); generalized
   here and extended with sub-page components. Every animation is
   compositor-safe (transform/opacity only) and fully disabled
   under prefers-reduced-motion.
   ============================================================ */

/* ---- self-hosted display face (already in assets/) ---- */
@font-face{
  font-family:'Fraunces';
  src:url('assets/fraunces-var.woff2') format('woff2');
  font-weight:100 900;   /* full axis — unlocks the light display voice (opsz set per role below) */
  font-style:normal;
  font-display:swap;
}
/* ---- self-hosted body face: Inter (Latin subset, variable 100–900, ~48KB). NOT preloaded (below-fold; swap). ---- */
@font-face{
  font-family:'Inter';
  src:url('assets/inter-var.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* Metric-matched fallbacks (CLS guard). Inter matches within ~1%, and Fraunces-fallback
   matches within ~1% at TEXT sizes -- but NOT at display sizes: Fraunces is variable and
   carries an opsz axis, so at opsz 144 / wght 328 the real cut is far narrower than Georgia,
   which has no optical sizing. Measured on the real hero string at 94px: real Fraunces
   1562px vs fallback 2037px = 30.4% wider, enough to wrap the hero H1 to a third line
   mid-swap on the LCP element. One fallback cannot serve both ends of an optical-size axis,
   so display roles get their own face below (see --serif-display). */
@font-face{ font-family:'Inter-fallback'; src:local('Arial'); size-adjust:107%; ascent-override:90%; descent-override:22%; line-gap-override:0% }
@font-face{ font-family:'Fraunces-fallback'; src:local('Georgia'); size-adjust:104%; ascent-override:92%; descent-override:24%; line-gap-override:0% }
@font-face{ font-family:'Fraunces-fallback-display'; src:local('Georgia'); size-adjust:80%; ascent-override:92%; descent-override:24%; line-gap-override:0% }

:root{
  /* ============ ACCENT HIERARCHY LAW (Deep Harbor) ============
     #2c6285 ink-blue  = INTERACTIVE + brand identity only (links, buttons, focus, eyebrows)
     #b18f52 champagne = DECORATIVE hairlines/borders only — never fills, never text-on-fill
     #c19a4e gold      = review stars ONLY
     ONE dark ground: #16202e blue-black FROM THE LOGO (bg-ink/process/footer/subhero + theme-color).
     Scrims tint rgba(15,24,35,x). Primary buttons = --accent-deep. Warm --ink stays TEXT-only.
     Photography is the only thing allowed to be louder than all of these. */
  --ink:#1a2431; --ink-2:#232f3e; --ink-soft:#3d4a5a;
  --paper:#ffffff; --paper-2:#f2f4f6; --paper-3:#e9edf1;
  /* muted-2 carries small INFORMATIONAL text (pricing fine print, post meta,
     captions, tier labels) at 11-13px, so it owes WCAG AA body 4.5:1. At the old
     #8b95a2 it measured 2.58:1 on the paper-3 ground, unreadable microtype and the
     faint-grey tell that makes a page look templated. Darkened to clear 4.5:1 on
     every light ground (4.52 on paper-3, 5.32 on paper) while staying a step
     lighter than --muted. Light grounds only; never used on bg-ink. */
  --muted:#5f6b78; --muted-2:#626c7a;
  --line:rgba(20,30,44,.12); --line-2:rgba(20,30,44,.07);
  --accent:#2b608f; --accent-deep:#1e3f66; --accent-soft:#cfdbe6;   /* VVT Deep Harbor: deepened steel-blue (from the logo). Prior steel: #34709a/#26516e/#bcd7e6. Brass: #9a7b4f/#7c6039/#e9d9c1 */
  --accent-grad:linear-gradient(150deg,#3f77ab,#2b608f 55%,#1e3f66);   /* the cube logo's two navies, for the mark */
  /* Fraunces display + system sans body (Inter = optional self-host upgrade) */
  --serif:"Fraunces","Fraunces-fallback",Georgia,"Times New Roman",serif;
  /* display roles only -- same real font, a fallback tuned for the opsz end of the axis */
  --serif-display:"Fraunces","Fraunces-fallback-display",Georgia,"Times New Roman",serif;
  --sans:"Inter","Inter-fallback",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --maxw:1180px;
  --measure:68ch;
  --ease:cubic-bezier(.22,.61,.36,1);      /* calm ease-out */
  --ease-lux:cubic-bezier(.16,1,.3,1);     /* long "inevitable" ease */
  /* below: merged from 2 later :root{} reopenings (prune, 2026-07-18); --shadow/--shadow-lift are the final elevation-pass values, the superseded flat ones are gone */
  --canvas:#f7f9fb;                                   /* Deep Harbor warm ivory ground so cards read as objects */
  --ring-top:inset 0 1px 0 rgba(255,255,255,.7), inset 0 0 0 1px rgba(20,30,44,.05);
  --shadow: var(--ring-top), 0 1px 1px rgba(20,30,44,.04), 0 4px 8px -2px rgba(20,30,44,.07), 0 10px 24px -8px rgba(20,30,44,.10);
  --shadow-lift: var(--ring-top), 0 2px 4px -1px rgba(20,30,44,.06), 0 14px 26px -10px rgba(44,98,133,.18), 0 30px 54px -26px rgba(20,30,44,.42);
  --ease-snap:cubic-bezier(.2,.8,.2,1);               /* tactile micro-interactions */
  --fs-h3:clamp(1.3rem,1.15rem+0.7vw,1.5rem);         /* unify the 20–24px card-h3 spread into one */
  --rule-brass:linear-gradient(90deg,transparent,#b18f52 22%,#b18f52 78%,transparent);   /* champagne hairline, decorative dividers only */
  --ink-cinema:#0b1017;      /* one shade below --ink #16202e: the screening-room ground */
  --ink-cinema-2:#111925;    /* alternation tone for bg-bone under body.cinema */
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans); color:var(--ink); background:var(--canvas);
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; overflow-x:hidden;
  font-variant-numeric:normal;   /* the Fraunces subset has no tabular figures + it's wrong in prose; routed only to real columns (table.data, .bynum) below */
  letter-spacing:-.006em;        /* subtle Inter tightening */
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a,button,summary{-webkit-tap-highlight-color:transparent}
::selection{background:var(--accent);color:#fff}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;line-height:1.08;font-optical-sizing:auto}

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

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.eyebrow{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);font-weight:600}
h2.display{font-size:clamp(30px,4.6vw,52px);letter-spacing:-.02em}
.lede{font-size:clamp(17px,1.4vw,19px);color:var(--ink-soft);max-width:56ch}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-size:14.5px;font-weight:600;letter-spacing:.01em;
  padding:15px 26px;border-radius:2px;border:1px solid transparent;cursor:pointer;
  transition:transform .5s var(--ease),background .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease);
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--accent-deep);color:#fff}
.btn-primary:hover{background:#193657;box-shadow:0 16px 30px -14px rgba(22,50,74,.55)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-light{background:var(--paper);color:var(--ink)}
.btn-light:hover{background:#fff;box-shadow:0 16px 30px -14px rgba(20,30,44,.5)}
.btn-outline-light{background:transparent;color:var(--paper);border-color:rgba(255,255,255,.5)}
.btn-outline-light:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn .arw{transition:transform .4s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}
.btn-lg{padding:18px 32px;font-size:15.5px}

/* ---------------- 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(255,255,255,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line-2);padding-top:14px;padding-bottom:14px;
}
/* pages whose hero is light (bone) get the solid nav from first paint */
header.nav.solid{background:rgba(255,255,255,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line-2)}
.brand{display:flex;align-items:baseline;gap:0;font-family:var(--serif);color:#fff;
  font-size:21px;letter-spacing:.02em;transition:color .4s var(--ease);white-space:nowrap;flex:0 0 auto}
.brand b{font-weight:400}
.brand .vvt{font-family:var(--sans);font-weight:600;font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;transform:translateY(-1px)}
.brand .dot{display:none}
header.nav.scrolled .brand,header.nav.solid .brand{color:var(--ink)}
.brand .dot{color:var(--accent);font-weight:700}
nav.links{display:flex;align-items:center;gap:30px}
nav.links a.nl{font-size:14px;font-weight:500;color:rgba(255,255,255,.9);letter-spacing:.01em;
  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(--accent);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[aria-current="page"]{color:#fff}
header.nav.scrolled nav.links a.nl,header.nav.solid nav.links a.nl{color:var(--ink-soft)}
header.nav.scrolled nav.links a.nl:hover,header.nav.solid nav.links a.nl:hover,
header.nav.scrolled nav.links a.nl[aria-current="page"],header.nav.solid nav.links a.nl[aria-current="page"]{color:var(--ink)}
.nav-cta{padding:11px 20px;font-size:13.5px}
header.nav:not(.scrolled):not(.solid) .nav-cta{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.4);backdrop-filter:blur(4px)}
header.nav:not(.scrolled):not(.solid) .nav-cta:hover{background:#fff;color:var(--ink);border-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;transition:background .3s}
header.nav.scrolled .menu-btn span,header.nav.solid .menu-btn span{background:var(--ink)}

/* ---------------- hero (home cinematic) ---------------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;background:#16202e;overflow:hidden}
.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.2s var(--ease)}
.hero-video.ready{opacity:1}
@keyframes heroZoom{to{transform:scale(1)}}
/* Two-axis scrim (measured fix, 2026-07-10). The vertical ramp alone left the
   headline band at only ~.12 alpha over a high-key skylight photo: ~19% of the
   pixels behind the H1 fell under the WCAG 3:1 large-text floor (worst 1.64:1).
   A horizontal ramp fixes it, but it must be MOBILE-FIRST: on narrow screens the
   headline spans nearly the full width, so a ramp that fades out leaves the right
   edge of the text unprotected (measured 3.5% still failing at 375px). Default is
   therefore a ramp that never fully fades; only once the text column is genuinely
   narrow does it open up so the right side of the frame stays luminous. */
.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:var(--accent-soft)}
/* glyph shadow does the LOCAL work the scrim can't: a tight 2px pass sharpens
   every letter edge, the wide pass keeps the soft halo. Costs the photo nothing. */
.hero h1{font-size:clamp(44px,7.6vw,94px);line-height:1.02;letter-spacing:-.025em;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)}
.hero h1 em{font-style:italic;color:#b18f52;font-weight:inherit}
.hero p.sub{font-size:clamp(17px,1.7vw,21px);color:rgba(255,255,255,.92);max-width:62ch;line-height:1.5}
.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}
.hero .trust .ln{width:26px;height:1px;background:rgba(255,255,255,.4)}
.trust-l1{display:inline-flex;align-items:center;gap:10px}
/* D7 (2026-07-18): designed two-line stack for the mobile hero trust chip -- below
   this width the single-line "stars 5.0 . 86 five-star reviews . 700+ LA listings .
   next-day photos" was cramped/wrapped mid-phrase. Split cleanly into two lines
   (reviews line, then the listings/turnaround line) with NO leading or trailing
   separator dot on either line: trust-sep (the middle ".") is the ONLY thing
   between them and it's hidden here, not just left dangling at a line edge. */
@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}}
/* D5 (2026-07-18): was hidden only <=760px, which left it overlapping the hero CTAs/
   trust chip at 768px tablet widths (see WEBSITE-PLAYBOOK.md §9's 768/1024 check).
   The cue is a nice-to-have hint, not load-bearing content, so hide it at any width
   where vertical room gets tight -- below 1200px, matching the nav's own breakpoint
   for the same "not enough room" reasoning (see the FIX 1 note near .m-only above). */
@media(max-width:1200px){ .scrollcue{display:none} }

/* ---------------- sub-page hero (interior pages) ---------------- */
.subhero{position:relative;background:#16202e;color:#fff;padding:clamp(128px,17vw,190px) 0 clamp(56px,7vw,86px);overflow:hidden}
.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(15,24,35,.6),rgba(15,24,35,.82))}
.subhero .inner{position:relative;z-index:2}
.subhero h1{font-size:clamp(34px,5.4vw,64px);letter-spacing:-.02em;color:#fff;max-width:20ch;margin:14px 0 18px;line-height:1.03}
.subhero .eyebrow{color:var(--accent-soft)}
.subhero p.sub{color:rgba(255,255,255,.86);max-width:60ch;font-size:clamp(16px,1.4vw,19px);line-height:1.55}
.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:rgba(255,255,255,.62);margin-bottom:6px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.crumb a{color:rgba(255,255,255,.62);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(--muted)}
.bg-bone{background:var(--paper-2)}
.bg-paper{background:var(--paper)}
.bg-ink{background:var(--ink);color:var(--paper)}
.bg-ink .eyebrow{color:var(--accent-soft)}
.bg-ink h2,.bg-ink h3{color:#fff}
.bg-ink .sec-head p:not(.eyebrow){color:rgba(255,255,255,.6)}

/* ---------------- value props ---------------- */
.values{background:var(--paper)}
.val-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;border:1px solid var(--line-2);background:var(--line-2)}
.val{background:var(--paper);padding:38px 30px;transition:background .4s var(--ease)}
.val:hover{background:var(--paper-2)}
.val .n{font-family:var(--serif);font-size:15px;color:var(--accent);letter-spacing:.02em}
.val h3{font-size:21px;margin:16px 0 10px;letter-spacing:0}
.val p{font-size:15px;color:var(--muted);line-height:1.55}

/* ---------------- services (benefit cards + lightbox) ---------------- */
.services{background:var(--paper-2)}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.svc{position:relative;text-align:left;background:var(--paper);border:1px solid var(--line-2);border-radius:4px;padding:34px 30px;
  box-shadow:var(--shadow);transition:transform .5s var(--ease),box-shadow .5s var(--ease);cursor:pointer;font-family:var(--sans);width:100%;color:inherit}
.svc:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.svc .ico{width:40px;height:40px;color:var(--accent);margin-bottom:20px}
.svc .win{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:12px}
.svc h3{font-size:23px;letter-spacing:0;margin-bottom:10px}
.svc .hook{font-family:var(--serif);font-size:18px;line-height:1.3;color:var(--ink);margin-bottom:10px}
.svc p{font-size:15px;color:var(--muted);line-height:1.55}
.svc .more{margin-top:18px;font-size:13px;font-weight:600;color:var(--accent-deep);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(12,12,14,.72);backdrop-filter:blur(6px)}
.lb.open{display:flex}
.lb-card{background:var(--paper);max-width:760px;width:100%;max-height:88vh;overflow:auto;border-radius:4px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.6);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(--paper-3);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(--accent);font-weight:600}
.lb-body h3{font-size:clamp(24px,3vw,32px);margin:12px 0 14px}
.lb-body p{color:var(--ink-soft);line-height:1.6;margin-bottom:16px}
.lb-stat{background:var(--paper-2);border-left:2px solid var(--accent);padding:16px 20px;border-radius:0 3px 3px 0;font-size:14.5px;color:var(--ink-soft);line-height:1.55}
.lb-stat .tag{display:inline-block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-deep);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(--ink);box-shadow:0 6px 20px -8px rgba(20,30,44,.4)}
.lb-x:hover{background:#fff}

/* ---------------- statement band ---------------- */
.statement{position:relative;min-height:74vh;display:flex;align-items:center;background:#16202e;overflow:hidden}
.statement .bg{position:absolute;inset:0;background-size:cover;background-position:center}
.statement .sc{position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,24,35,.78) 0%,rgba(15,24,35,.45) 55%,rgba(15,24,35,.2) 100%)}
.statement .inner{position:relative;z-index:2;color:#fff}
.statement .eyebrow{color:var(--accent-soft)}
.statement h2{font-size:clamp(30px,4.8vw,58px);max-width:20ch;color:#fff;letter-spacing:-.02em}
.statement p{margin:20px 0 32px;color:rgba(255,255,255,.86);max-width:48ch}
.statement .rule{width:64px;height:1px;background:var(--accent);margin-bottom:28px}
/* near-silent brand band (signature standard statement) */
.statement.silent{min-height:64vh;text-align:center;justify-content:center;background:linear-gradient(178deg,#1c2632,#16202e 55%)}
/* D4 (2026-07-18): the 23 .statement.silent motto bands center their h2 (h2 margin:0
   auto via .statement.silent h2 below) but the <p> under it had no auto margins, so it
   sat flush against .inner's left edge -- off-center vs the h2 above it. Scoped to
   .silent ONLY: the plain .statement (about.html/home.html/drone.html/etc, a left-
   aligned two-col band with text on one side and media on the other) must NOT get
   this -- verified live that a blanket .statement p rule would center that paragraph
   inside its column while the h2 above it stays flush-left, misaligning the two. */
.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,5vw,62px)}

/* ---------------- gallery ---------------- */
.gallery{background:var(--paper)}
.g-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;grid-auto-flow:dense}
.g-item{position:relative;overflow:hidden;border-radius:4px;background:var(--paper-3)}
.g-item img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease);display:block}
.g-item:hover img{transform:scale(1.05)}
.g-item .tag{position:absolute;left:16px;bottom:14px;color:#fff;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  opacity:0;transform:translateY(8px);transition:.4s var(--ease);text-shadow:0 1px 12px rgba(0,0,0,.6);z-index:2}
.g-item::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(20,30,44,.4));opacity:0;transition:.4s var(--ease)}
.g-item:hover .tag{opacity:1;transform:none}
.g-item:hover::after{opacity:1}
.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(--ink);color:var(--paper)}
.process .eyebrow{color:var(--accent-soft)}
.process .sec-head h2{color:#fff}.process .sec-head p:not(.eyebrow){color:rgba(255,255,255,.6)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;counter-reset:step}
.step{position:relative;padding-top:30px;border-top:1px solid rgba(255,255,255,.16)}
.step .num{font-family:var(--serif);font-size:15px;color:var(--accent-soft)}   /* FIX 7 (2026-07-17): .process is always the ONE dark ground (see the elevation-pass override below), so --accent (#2b608f, ~2.5-2.9:1) failed WCAG here; --accent-soft reads white-on-dark and clears 4.5:1 */
.step h3{color:#fff;font-size:22px;margin:14px 0 10px;letter-spacing:0}
.step p{color:rgba(255,255,255,.62);font-size:15px;line-height:1.55}

/* ---------------- signature standard (home section + tier ladder) ---------------- */
.sig{background:var(--paper-2)}
.sig .lede{margin-top:18px;color:var(--ink-soft)}
.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(--line-2)}
.mixtab th{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
.mixtab td:first-child,.mixtab th:first-child{text-align:left}
.mixtab .tot{font-weight:700;color:var(--ink)}
.mixtab tr.best td{background:color-mix(in srgb,var(--accent) 5%,transparent)}
@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-family:var(--serif);font-size:34px;letter-spacing:-.02em;color:var(--ink);margin:6px 0 2px}
.tier .price-line span{font-family:var(--font);font-size:13px;color:var(--muted);letter-spacing:0}
.tier .vid-math{font-size:12.5px;color:var(--accent-deep);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(--ink-soft);padding:7px 0;border-top:1px solid var(--line-2);line-height:1.45}
.tier ul.feat li:first-child{border-top:0}
.tier{position:relative;background:var(--paper);border:1px solid var(--line-2);border-radius:4px;padding:30px 26px;box-shadow:var(--shadow);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.tier:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.tier.best{border-color:var(--accent);box-shadow:0 1px 0 rgba(20,30,44,.05),0 26px 50px -26px rgba(44,98,133,.5)}
.tier .flag{position:absolute;top:-11px;left:26px;background:var(--paper);color:var(--ink);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;padding:5px 12px;border-radius:999px;border:1px solid #b18f52}
.tier .step-n{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);font-weight:600}
.tier h3{font-size:22px;margin:10px 0 12px;letter-spacing:0}
.tier p{font-size:14.5px;color:var(--muted);line-height:1.55}
.tier .buys{margin-top:14px;font-size:14px;color:var(--ink-soft);line-height:1.5}
.sig .honest{max-width:60ch;margin:40px auto 0;text-align:center;color:var(--muted);font-size:15px;line-height:1.6}
.sig .cta-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:38px}

/* 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(--line-2);border-radius:4px;background:var(--paper)}
.mech .m .n{font-family:var(--serif);color:var(--accent);font-size:15px}
.mech .m h3{font-size:20px;margin:12px 0 8px;letter-spacing:0}
.mech .m p{font-size:14.5px;color:var(--muted);line-height:1.55}

/* ---------------- reviews ---------------- */
.reviews{background:var(--paper-2)}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.rev{background:var(--paper);border:1px solid var(--line-2);border-radius:4px;padding:34px 30px;box-shadow:var(--shadow)}
/* U+2605 (star) and U+2192 (arrow) are NOT in the Fraunces or Inter subsets, and
   Georgia lacks them too. Measured at 40px, all three report a 40.00px advance
   for these glyphs -- exactly 1.000em, the notdef signature -- so every one of the
   591 stars and 363 arrows was resolving through an arbitrary system fallback:
   Apple Symbols on macOS, Segoe UI Symbol on Windows, Noto on Android, each with a
   different width, weight and baseline. It looks correct on a Mac, which is why it
   went unnoticed. Pin an explicit stack so the rating row renders predictably
   everywhere; the stars are a trust element and sit under every primary CTA. */
.stars,.tstars,.arw{font-family:"Apple Symbols","Segoe UI Symbol","Noto Sans Symbols 2","Arial Unicode MS",sans-serif}
.stars{color:var(--accent);letter-spacing:3px;font-size:15px;margin-bottom:16px}
.rev .q{font-family:var(--serif);font-size:19px;line-height:1.46;color:var(--ink);margin:0 0 18px;quotes:none}
.rev .who{font-size:14px;color:var(--muted)}
.rev .who b{color:var(--ink);font-weight:600}
/* review stars read as classic gold, not accent */
.reviews .stars,.trust-band .stars{color:#c19a4e}
/* featured band: a touch larger, quieter */
.rev-featured .rev{padding:36px 32px}
.rev-featured .q{font-size:21px}
/* 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:17px;line-height:1.5}
/* 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-family:var(--serif);font-size:52px;line-height:1;color:var(--ink);font-variation-settings:"opsz" 60,"wght" 360}
.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(--ink-soft);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(--paper);border-left:2px solid #c19a4e;border-radius:0 4px 4px 0;padding:22px 24px;box-shadow:var(--shadow)}
.hi h3{font-family:var(--serif);font-size:18px;color:var(--ink);margin-bottom:7px;line-height:1.22;font-variation-settings:"opsz" 40,"wght" 448}
.hi p{font-size:14px;color:var(--ink-soft);line-height:1.5}
@media(max-width:900px){.hi-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.hi-grid{grid-template-columns:1fr}}
/* featured cards: a quiet oversized quote mark */
.rev-featured .rev{position:relative;overflow:hidden}
.rev-featured .rev::before{content:"\201C";position:absolute;top:6px;right:20px;font-family:var(--serif);font-size:66px;line-height:1;color:#c19a4e;opacity:.2;pointer-events:none}
/* contextual testimonial spotlight (dropped into service/area pages where relevant) */
.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);border-radius:2px}
.spotlight .stars{color:#c19a4e;letter-spacing:3px;font-size:15px;margin-bottom:14px}
.spotlight blockquote{font-family:var(--serif);font-size:clamp(20px,2.1vw,25px);line-height:1.36;color:var(--ink);letter-spacing:-.01em;margin:0 0 16px;quotes:none;font-variation-settings:"opsz" 48,"wght" 404}
.spotlight figcaption{font-size:14px;color:var(--muted)}
.spotlight figcaption b{color:var(--ink);font-weight:600}
.bg-ink .spotlight blockquote{color:#fff}
.bg-ink .spotlight figcaption{color:rgba(255,255,255,.7)}
.bg-ink .spotlight figcaption b{color:#fff}
/* ---- SHINE: disclosure nav (W3C pattern), tracked caps links, capsule CTA ----
   Panels live permanently in the DOM (crawlable); JS only toggles [data-open].
   :focus-within keeps keyboard access working even with JS off. */
nav.links{margin-left:auto}
.nav-grp{position:relative;display:flex;align-items:center;gap:2px}
nav.links a.nl{font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;padding:12px 2px}
.nl-car{background:none;border:0;cursor:pointer;padding:12px 5px;display:flex;align-items:center;color:rgba(255,255,255,.75)}
header.nav.scrolled .nl-car,header.nav.solid .nl-car{color:var(--muted)}
.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:255px;background:var(--paper);border:1px solid var(--accent-soft);border-radius:10px;box-shadow:0 12px 32px rgba(31,71,98,.12);padding:10px;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:10px 12px;border-radius:7px}
.drop a b{display:block;font-size:13.5px;font-weight:600;color:var(--ink);letter-spacing:0;text-transform:none}
.drop a span{display:block;font-size:12px;color:var(--muted);margin-top:2px;letter-spacing:0;text-transform:none}
.drop a:hover{background:var(--paper-2)}
.drop a[aria-current="page"] b{color:var(--accent)}
.m-only{display:none}
/* capsule CTA: one outline pill that works over the dark hero AND the light scrolled header */
.nav-cta{background:transparent!important;border:1px solid currentColor!important;border-radius:999px!important;color:#fff;padding:.7em 1.5em!important;font-size:11px!important;font-weight:600!important;letter-spacing:.12em;text-transform:uppercase;margin-left:24px;backdrop-filter:none!important}
header.nav.scrolled .nav-cta,header.nav.solid .nav-cta{color:var(--ink)}
.nav-cta:hover{background:var(--accent-deep)!important;border-color:var(--accent-deep)!important;color:#fff!important}
/* FIX 1 (2026-07-17): the disclosure-nav + drawer rules used to only kick in at
   760px, but the full desktop nav needs much more room than that. Between
   761-1140px the brand wrapped to 2-3 lines and the Book capsule clipped off the
   right edge on EVERY page (iPad portrait 768 and landscape 1024 both broken).
   Live DOM measurement (not just the arithmetic estimate) of the shared header
   across every page: brand ~220px + nav-links' NATURAL width ~727px (7 items +
   6×30px gaps; "Signature Standard" alone is ~163px and is the item that wraps
   to 2 lines first) + capsule ~135px + its own 24px margin + 88px header
   padding = ~1194px before anything can render on one line with zero overlap.
   1140px undershoots that by ~54px, so the breakpoint is 1220px (comfortable
   ~26px+ margin above the real crossover, verified empirically at 1200-1240px)
   -- moved verbatim so the hamburger + mobile Book pill serve the whole
   0-1220 range; the content-grid rules stay at 760 below. */
@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;padding:0 0 0 14px;min-width:0}
  .drop a{padding:4px 0}
  .drop a b{font-size:15px;font-weight:500;color:var(--ink-soft)}
  .drop a span{display:none}
  /* persistent Book pill: CTA lives OUTSIDE the drawer, beside the hamburger */
  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 */
/* FIX (2026-07-17 adversarial review, pre-existing #F7): the FAQ ghost CTA's
   "Still have questions? Book a consultation" label is 346px of nowrap text,
   14px too wide for a 360px viewport (real horizontal scroll). .btn-ghost is
   the only .btn variant long enough sitewide to ever hit this, so scoping the
   wrap+center to the class (not the shared .btn base) is safe: every other
   .btn-ghost label on the site is short enough to stay single-line and
   visually unchanged. */
@media(max-width:430px){ .btn-ghost{white-space:normal;text-align:center} }

/* hero text link (demoted second CTA) + gold 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:#fff}
.tstars{color:#c19a4e;letter-spacing:2px}
.trust a{color:inherit}
.trust a:hover{color:#fff}
.cta-trust{font-size:12.5px;font-weight:500;letter-spacing:.05em;color:var(--muted);margin-top:12px}
.cta-trust a{color:inherit}
.cta-trust a:hover{color:var(--ink)}
.cta-trust .tstars{font-size:11.5px;letter-spacing:1.5px}
.subhero .cta-trust{color:rgba(255,255,255,.72)}
.subhero .cta-trust a:hover{color:#fff}
/* visible freshness caption (paired with schema dateModified; only bumped with real changes) */
.page-updated{max-width:var(--maxw);margin:0 auto;padding:18px clamp(20px,4vw,44px) 0;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)}
.page-updated::before{content:"";display:inline-block;width:26px;height:1px;background:#b18f52;vertical-align:middle;margin-right:10px}
/* pre-footer service-area directory band */
.area-band{background:var(--paper-2);border-top:1px solid var(--line-2);padding:56px 0 60px}
.area-band h2{font-size:clamp(22px,2.6vw,30px);letter-spacing:-.01em;margin-bottom:26px}
.area-band .cols{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.area-band h3{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.area-band ul{list-style:none}
.area-band li{margin:7px 0}
.area-band a{font-size:14px;color:var(--ink-soft)}
.area-band a:hover{color:var(--accent)}
@media(max-width:760px){.area-band .cols{grid-template-columns:1fr 1fr}}
.ft .ft-human{font-size:13.5px;color:rgba(255,255,255,.6);line-height:1.55;margin:10px 0 14px;max-width:24ch}
/* contact fact ledger (replaced the Maps iframe: zero third-party requests) */
.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(--accent-soft)}
.fact-ledger div:last-child{border-bottom:1px solid var(--accent-soft)}
.fact-ledger dt{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.fact-ledger dd{font-size:14.5px;color:var(--ink);text-align:right;margin:0}
.fact-ledger dd a{color:var(--accent);border-bottom:1px solid var(--accent-soft)}
/* 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(--accent-deep);font-weight:600;border:1px solid var(--line);border-radius:999px;padding:5px 12px}
.case-result{border-left:2px solid #c19a4e;padding:2px 0 2px 20px;margin-top:22px}
.case-result .stars{color:#c19a4e;letter-spacing:3px;font-size:14px;margin-bottom:9px}
.case-result blockquote{font-family:var(--serif);font-size:19px;line-height:1.42;color:var(--ink);margin:0 0 10px;quotes:none;font-variation-settings:"opsz" 40,"wght" 406}
.case-result figcaption{font-size:13.5px;color:var(--muted)}
.case-result figcaption b{color:var(--ink);font-weight:600}
.case-metric{display:flex;gap:28px;flex-wrap:wrap;margin-top:18px}
.case-metric .m .big{font-family:var(--serif);font-size:26px;color:var(--ink);line-height:1;font-variation-settings:"opsz" 40,"wght" 420}
.case-metric .m .lab{font-size:12px;color:var(--muted);margin-top:5px;letter-spacing:.02em}
.ph{outline:1px dashed var(--accent);outline-offset:3px}
.ph-note{font-size:12px;color:var(--accent-deep);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}
.bynum .stat{min-width:150px}
.bynum .stat .big{font-family:var(--serif);font-size:clamp(34px,4vw,52px);color:var(--ink);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(--muted)}
.bg-ink .bynum .stat .lab{color:rgba(255,255,255,.6)}

/* ---------------- pricing teaser ---------------- */
.pricing{background:var(--paper);text-align:center}
.pricing .card{max-width:760px;margin:0 auto;background:var(--paper-2);border:1px solid var(--line);border-radius:4px;
  padding:clamp(40px,6vw,64px);box-shadow:var(--shadow)}
.pricing h2{margin:14px 0 14px}
.pricing p{color:var(--muted);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(--muted-2)}

/* ---------------- FAQ (accordion, GEO engine) ---------------- */
.faq{background:var(--paper-2)}
.faq-list{max-width:820px;margin:0 auto}
.faq-item{border-top:1px solid var(--line);}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-item summary{list-style:none;cursor:pointer;padding:26px 44px 26px 0;position:relative;
  font-family:var(--serif);font-size:clamp(18px,2vw,22px);color:var(--ink);letter-spacing:-.01em;line-height:1.3}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:6px;top:24px;font-size:24px;color:var(--accent);font-family:var(--sans);transition:transform .3s var(--ease)}
.faq-item[open] summary::after{content:"–"}
.faq-item .a{padding:0 44px 26px 0;color:var(--ink-soft);line-height:1.65;max-width:70ch}
.faq-item .a p{margin-bottom:12px}

/* ---------------- blog teaser + index cards ---------------- */
.posts{background:var(--paper)}
.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(--paper);border:1px solid var(--line-2);border-radius:4px;overflow:hidden;
  box-shadow:var(--shadow);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.pcard .thumb{aspect-ratio:16/10;background:var(--paper-3);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(--accent);font-weight:600}
.pcard h3{font-size:21px;margin:12px 0 10px;letter-spacing:0;line-height:1.22}
.pcard p{font-size:14.5px;color:var(--muted);line-height:1.55;flex:1}
.pcard .meta{margin-top:18px;font-size:12.5px;color:var(--muted-2);display:flex;gap:10px;align-items:center}

/* ---------------- article / prose (blog + long body) ---------------- */
.article{background:var(--paper)}
.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(--accent);font-weight:600}
.article-head h1{font-size:clamp(30px,4.4vw,52px);letter-spacing:-.02em;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(--muted)}
.byline img{width:40px;height:40px;border-radius:50%;object-fit:cover;background:var(--paper-3)}
.byline b{color:var(--ink);font-weight:600}
.byline .sep{opacity:.5}
.article-hero{max-width:1000px;margin:34px auto 0;aspect-ratio:16/9;overflow:hidden;border-radius:4px;background:var(--paper-3)}
.article-hero img{width:100%;height:100%;object-fit:cover}
.tldr{background:var(--paper-2);border-left:2px solid var(--accent);border-radius:0 4px 4px 0;padding:24px 28px;margin:0 0 36px}
.tldr .lab{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-deep);font-weight:700;margin-bottom:10px}
.tldr p{font-size:16px;line-height:1.6;color:var(--ink-soft);margin-bottom:10px}
.tldr p:last-child{margin-bottom:0}
.prose{font-size:17.5px;line-height:1.75;color:var(--ink-soft)}
.prose > *+*{margin-top:22px}
.prose h2{font-size:clamp(24px,3vw,32px);color:var(--ink);letter-spacing:-.01em;margin-top:48px;line-height:1.18}
.prose h3{font-size:clamp(20px,2.4vw,24px);color:var(--ink);margin-top:34px}
.prose p{max-width:100%}
.prose a{color:var(--accent-deep);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.prose a:hover{color:var(--accent)}
.prose ul,.prose ol{padding-left:22px}
.prose li{margin-top:8px}
.prose img{border-radius:4px;margin:12px 0;height:auto}
.prose figure figcaption{font-size:13px;color:var(--muted-2);text-align:center;margin-top:8px}
.prose blockquote{border-left:2px solid var(--accent);padding-left:22px;font-family:var(--serif);font-size:22px;line-height:1.4;color:var(--ink);font-style:italic}
.stat-tag{display:inline-block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-deep);font-weight:700;
  border:1px solid var(--line);border-radius:2px;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(--line);border-radius:4px;margin:8px 0}
table.data{width:100%;border-collapse:collapse;font-size:15px;min-width:520px}
table.data th,table.data td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line-2);vertical-align:top}
table.data thead th{background:var(--paper-2);font-family:var(--sans);font-weight:600;color:var(--ink);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(--ink-soft);line-height:1.5}

/* article footer CTA card + related links */
.cta-card{max-width:760px;margin:52px auto 0;background:var(--ink);color:#fff;border-radius:4px;padding:clamp(34px,5vw,52px);text-align:center}
.cta-card .eyebrow{color:var(--accent-soft)}
.cta-card h3{color:#fff;font-size:clamp(24px,3vw,32px);margin:12px auto 14px;max-width:22ch}
.cta-card p{color:rgba(255,255,255,.78);max-width:52ch;margin:0 auto 26px}
.related{max-width:760px;margin:52px auto 0;border-top:1px solid var(--line);padding-top:32px}
.related h3{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin-bottom:18px;font-family:var(--sans);font-weight:600}
.related ul{list-style:none;display:grid;gap:12px}
.related a{color:var(--ink);font-family:var(--serif);font-size:19px;transition:color .3s}
.related a:hover{color:var(--accent-deep)}

/* generic content prose block for service/area/about pages */
.content{background:var(--paper)}
.content .col{max-width:760px}
.content h2{font-size:clamp(24px,3vw,34px);margin-bottom:16px;letter-spacing:-.01em}
.content h3{font-size:22px;margin:32px 0 12px;letter-spacing:0}
.content p{color:var(--ink-soft);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(--ink-soft);line-height:1.6}
.content ul li::before{content:"";position:absolute;left:2px;top:11px;width:7px;height:7px;background:var(--accent);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:4px;overflow:hidden;background:var(--paper-3);box-shadow:var(--shadow)}
/* WAVE 3: an ambient loop dropped into the two-col local-image slot (area pages)
   needs an explicit aspect-ratio since .amb-wrap has no intrinsic size of its
   own (unlike a plain <img>, which gets its aspect hint from width/height attrs) -
   5:4 matches the 900x720 picture convention already used in this slot sitewide. */
.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(--ink-soft)}
.nap b{color:var(--ink)}

/* ---------------- final CTA ---------------- */
.final{position:relative;background:#16202e;color:#fff;text-align:center;overflow:hidden}
.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(15,24,35,.7),rgba(15,24,35,.86))}
.final .inner{position:relative;z-index:2;padding:clamp(80px,11vw,140px) 0}
.final .eyebrow{color:var(--accent-soft)}
.final h2{font-size:clamp(32px,5vw,60px);color:#fff;max-width:18ch;margin:0 auto 22px;letter-spacing:-.02em}
.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(--ink);color:rgba(255,255,255,.66);padding:70px 0 34px;border-top:1px solid rgba(255,255,255,.08)}
.ft-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.1)}
.ft .brand2{font-family:var(--serif);font-size:24px;color:#fff;margin-bottom:14px}
.ft p.blurb{font-size:14px;line-height:1.6;max-width:34ch}
.ft h3{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:16px;font-weight:600;font-family:var(--sans)}
.ft ul{list-style:none}
.ft ul li{margin-bottom:11px}
.ft ul li a{font-size:14.5px;color:rgba(255,255,255,.72);transition:color .3s}
.ft ul li a:hover{color:#fff}
.ft .nap-line{font-size:13.5px;color:rgba(255,255,255,.6);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:13px;color:rgba(255,255,255,.44)}

/* brand thread — the one-line scent band that points every service page at
   the Signature Standard (each page phrases it differently; the claim's
   OWNER is signature-standard.html per the one-owner law) */
.thread{padding:clamp(60px,9vw,104px) 28px;text-align:center;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.thread p{font-family:var(--serif);font-style:italic;font-variation-settings:"opsz" 60,"wght" 420;font-size:clamp(20px,2.6vw,27px);color:var(--ink);max-width:36ch;margin:0 auto 12px;line-height:1.35;letter-spacing:-.01em}
.thread a{font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--accent-deep)}

/* ---------------- 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}   /* no orphan card beside an empty slot */
  .ft-top{grid-template-columns:1fr 1fr}
  .two-col{grid-template-columns:1fr}
}
/* FIX 1 (2026-07-17): drawer position + hamburger rules moved from 760px to
   1220px (see the matching block + measurement note ~line 413) so the mobile
   nav covers the whole broken range; the content-grid rules below stay at 760px. */
@media(max-width:1220px){
  nav.links{position:fixed;inset:0 0 0 auto;width:min(80vw,320px);background:var(--paper);
    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(20,30,44,.4);z-index:60}
  nav.links.open{transform:none}
  nav.links a.nl{color:var(--ink)!important;font-size:19px}
  .menu-btn{display:flex;z-index:61}
  header.nav .menu-btn span{background:#fff}
  header.nav.scrolled .menu-btn span,header.nav.solid .menu-btn span,header.nav.menuopen .menu-btn span{background:var(--ink)}
}
@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:100svh}
  .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}
}

/* ============================================================
   MOTION & DEPTH PASS — luxury, fast, compositor-only.
   transform/opacity/clip-path only. Parallax + tilt are JS-gated
   OFF on mobile / coarse pointers, and everything degrades to a
   static, legible layout under prefers-reduced-motion.
   ============================================================ */

/* media wipe reveal (compositor-safe clip-path) */
/* CRITICAL (2026-07-08): the clip lives on the INNER img, never on the
   observed element itself. Modern Chrome factors clip-path into
   IntersectionObserver visibility, so a fully-clipped observed element
   reports 0% intersecting forever and the reveal DEADLOCKS invisible. */
.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 1s var(--ease-lux)}
.ws.in .w > span{transform:none}

/* parallax: measured element carries [data-px]; its .px-inner is oversized
   (scale headroom so translation never reveals an edge) and JS moves --py */
.px-inner{transform:translate3d(0,var(--py,0),0) scale(1.14);will-change:transform}

/* 3D tilt on cards (JS sets --rx/--ry from pointer position) */
.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}

/* finish layer (2026-07-08) — pointer-scoped only: glare that rides the tilt,
   magnetic primary CTAs, a cursor spotlight on the dark bands, one outlined
   echo word. NOTHING here animates at idle and nothing runs a persistent
   rAF loop; reduced-motion strips it all. */
.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,.13),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-family:var(--serif);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(26,36,49,.10)}
.bg-ink .echo{-webkit-text-stroke:1px rgba(255,255,255,.08)}
@media(max-width:1000px){.echo{display:none}}
@media(prefers-reduced-motion:reduce){.tilt::after{display:none}.mag{transition:none}.spot{display:none}}

/* motion doctrine v2 (2026-07-08, Zajno concepts, compositor-only):
   choreographed section-head stagger + line-wipe H2s, and scroll-linked
   image zoom via NATIVE CSS scroll-driven animations where supported
   (GPU, zero JS, zero main-thread cost; silently static elsewhere).
   Deliberately NOT taken from the reference: smooth-scroll hijack,
   preloaders, physics, Lottie. Core Web Vitals are a ranking signal
   and the photography stays the hero. */

/* 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: clipped photos ease from 1.08 to 1 as they cross the
   viewport; the hero ground drifts to 1.08 as you scroll away from it.
   Uses the standalone `scale` property so hover transform zooms still
   compose; applied ONLY inside overflow-hidden frames (.g-item, .two-col
   .media, .hero) so nothing ever bleeds over a neighbor. */
@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 (blog posts): a 2px accent hairline */
.readbar{position:fixed;top:0;left:0;right:0;height:2px;z-index:300;pointer-events:none;
  background:var(--accent);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" storytelling moment) */
.story{position:relative;background:var(--ink)}
.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;   /* pinned to the GPU: the swap must never re-raster mid-scroll */
  transition:opacity 1s var(--ease-lux),transform 7s var(--ease-lux)}
.story-bg .frame.on{opacity:1;transform:scale(1)}
/* beats 3→4 (bedroom day → dusk, same room): straight crossfade, no zoom drift on either frame */
.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(15,24,35,.5) 0%,rgba(15,24,35,.35) 40%,rgba(15,24,35,.82) 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:var(--accent-soft)}
.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.8vw,58px);max-width:16ch;letter-spacing:-.02em;line-height:1.04}
.story-cap p{color:rgba(255,255,255,.84);margin-top:14px;max-width:46ch;font-size:clamp(15px,1.5vw,18px)}
.story-progress{display:flex;gap:9px;margin-top:30px}
.story-progress i{width:38px;height:2px;background:rgba(255,255,255,.26);border-radius:2px;transition:background .4s var(--ease)}
.story-progress i.on{background:var(--accent)}

@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}
}

/* ============================================================
   $10K ELEVATION PASS — pure CSS, ~zero new network cost.
   Token overrides + refined material / type / motion. Every rule
   holds the CWV budget (transform/opacity/shadow/clip-path only);
   all new motion is reduced-motion-gated at the bottom. (This
   section's token overrides now live in the merged :root{}/body{}
   at the top of the file.)
   ============================================================ */

/* ---- 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: authored optical sizes + typeset wrapping ---- */
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 }
.hero h1{ font-variation-settings:"opsz" 144,"wght" 328 }               /* Deep Harbor: big + lighter = quiet luxury */
h2.display,.statement h2,.final h2,.subhero h1,.article-head h1,.story-cap h2,.cta-card h3{ font-variation-settings:"opsz" 88,"wght" 380 }
/* Roles that request the high-opsz end of the axis get the display-tuned fallback, so a
   swap does not reflow them (Georgia is ~30% wide against Fraunces up here). Text-size
   roles below stay on --serif, where the standard fallback already matches within ~1%. */
.hero h1,h2.display,.statement h2,.final h2,.subhero h1,.article-head h1,.story-cap h2,.echo,.sb-num,.ladder-name{ font-family:var(--serif-display) }
.svc h3,.tier h3,.pcard h3,.val h3,.step h3,.mech .m h3,.content h3{ font-variation-settings:"opsz" 34,"wght" 460; font-size:var(--fs-h3) }
.svc .hook,.prose blockquote,.rev .q{ font-variation-settings:"opsz" 30,"wght" 410 }
.val .n,.step .num,.mech .m .n,.tier .step-n{ font-variation-settings:"opsz" 14,"wght" 520 }
/* numerals: body{} above already routes to "normal" (see the merged block's comment); real columns opt back in to tabular here */
table.data,.bynum{ font-variant-numeric:tabular-nums }
.bynum .stat .big{ font-variation-settings:"opsz" 72,"wght" 380; letter-spacing:-.02em }

/* ---- material: warm figure-ground + milled cards (upgrades all --shadow users) ---- */
.svc:hover,.tier:hover,.pcard:hover{ box-shadow:var(--shadow-lift) }
.val{ position:relative }
.val:hover{ background:var(--paper) }                                    /* was gray-fill (template tell) — now a brass top-wipe */
.val::after{ content:""; position:absolute; left:0; top:-1px; height:2px; width:0; background:var(--accent); transition:width .5s var(--ease-lux) }
.val:hover::after{ width:100% }

/* ---- subtle tonal depth on the ink panels (kills banding at scale) ---- */
/* ONE dark ground everywhere (logo blue-black, matches theme-color #16202e) */
.bg-ink,.process,footer.ft{ background:linear-gradient(178deg,#1c2632,#16202e 55%) }

/* ---- ration the brass: it should mean "special", not "wallpaper" ---- */
::selection{ background:rgba(44,98,133,.22); color:var(--ink) }
.faq-item summary::after{ color:var(--muted-2) }
.faq-item[open] summary::after,.faq-item summary:hover::after{ color:var(--accent) }
.content ul li::before{ background:var(--ink-soft) }

/* ---- focus: dark-aware double ring (WCAG 2.4.7 / 1.4.11) ---- */
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; box-shadow:0 0 0 4px rgba(44,98,133,.28) }
.hero :focus-visible,.bg-ink :focus-visible,.statement :focus-visible,.final :focus-visible,.story :focus-visible,.subhero :focus-visible,.process :focus-visible{ outline-color:#fff; box-shadow:0 0 0 4px rgba(255,255,255,.35) }

/* ---- micro-interactions: tactile press + one link-underline dialect ---- */
.btn{ transition:transform .28s var(--ease-snap),background .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease) }
.btn:active,.svc:active,.tier:active,.pcard:active{ transform:translateY(0) scale(.985); transition-duration:.06s }
.lnk,.prose a,.related a,.svc .more{ background-image:linear-gradient(var(--accent),var(--accent)); 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 }
.ws .w > span{ transition-duration:.7s }                                /* tighten so a long H1 settles inside the LCP window */

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

/* ---- gallery: slower zoom + a brass baseline wipe, one motion dialect ---- */
.g-item::before{ content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--accent); z-index:1; transition:width .6s var(--ease-lux) }
.g-item:hover::before{ width:100% }
.g-item img{ transition:transform 1.1s var(--ease-lux),filter .6s var(--ease) }
.g-item:hover img{ filter:saturate(1.03) contrast(1.02) }

/* pacing: keep tones alternating (home reviews flips to paper next to the bone Signature band) */
.reviews.bg-paper{ background:var(--paper) }

@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 "V") 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{font-family:var(--serif);color:var(--ink);font-size:32px;line-height:1;margin:6px 0 4px;font-variation-settings:"opsz" 40,"wght" 400}
.tier .price .from{display:block;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin-bottom:7px}
.tier .price small{display:block;font-family:var(--sans);font-size:12.5px;color:var(--muted);font-weight:400;letter-spacing:0;margin-top:6px}
.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(--ink-soft);line-height:1.4}
.pkg-includes li::before{content:"";position:absolute;left:3px;top:3px;width:12px;height:7px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);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(--ink-soft);background:var(--paper);border:1px solid var(--line-2);border-radius:999px;padding:9px 17px;box-shadow:var(--shadow);white-space:nowrap}
.addon-chip b{color:var(--ink);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(--sans);font-size:13.5px;font-weight:600;letter-spacing:.02em;color:var(--ink-soft);
  background:var(--paper);border:1px solid var(--line);border-radius:999px;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:var(--ink)}
.filter-chip:active{transform:scale(.96)}
.filter-chip.is-on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.g-item[hidden]{display:none}
/* cinematic reel window */
.reel{position:relative;max-width:1100px;margin:0 auto;aspect-ratio:16/9;border-radius:4px;overflow:hidden;background:var(--ink);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,.14);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)}
.reel-play:hover span{transform:scale(1.08);background:rgba(255,255,255,.24)}
.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,.6)}
@media(prefers-reduced-motion:reduce){.reel img{transition:none}.reel:hover img{transform:none}}

/* ---- photo-band: full-bleed media interlude (image-forward rhythm; slots upgrade when real exports land) ---- */
.photo-band{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:8px 8px}
.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 (Mural/Plain pattern) ---- */
.post-feat{display:grid;grid-template-columns:1.35fr 1fr;gap:34px;align-items:center;margin:8px 0 30px;border:1px solid var(--line-2);border-radius:4px;overflow:hidden;background:var(--paper);box-shadow:var(--shadow)}
.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(22px,2.4vw,30px);letter-spacing:-.01em;margin:12px 0 10px}
.post-feat p{color:var(--ink-soft);font-size:15px;max-width:46ch}
.post-feat .pi-m{display:inline-block;margin-top:14px}
.post-index{border-top:1px solid var(--line)}
.pi-row{display:grid;grid-template-columns:200px 1fr auto;gap:22px;align-items:baseline;padding:18px 2px;border-bottom:1px solid var(--line-2);transition:background .25s var(--ease)}
.pi-row:hover{background:var(--paper-2)}
.pi-cat{font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--accent)}
.pi-t{font-family:var(--serif);font-size:18.5px;color:var(--ink);font-variation-settings:"opsz" 34,"wght" 440}
.pi-row:hover .pi-t{color:var(--accent-deep)}
.pi-m{font-size:12px;color:var(--muted);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(207,219,230,.32);color:#fff}
@media(max-width:430px){.area-band .cols{gap:18px 20px}.area-band h3{letter-spacing:.1em}}
/* 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}
  .hero,.subhero,.bg-ink,.process,.statement,footer.ft{background:#fff!important;color:var(--ink)!important}
  .hero h1,.subhero h1,.statement h2,.process h2,.process h3,.process p{color:var(--ink)!important;text-shadow:none!important}
}

/* ---- visual package cards (Lightship pattern: deliverables AS images, benefits as captions) ---- */
.pkg-tiles{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:14px 0 4px}
.pkg-tiles figure{position:relative;border-radius:4px;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(15,24,35,.72))}
/* ---- click-to-enlarge image viewer (sitewide; big targets, nothing hidden) ---- */
.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(15,24,35,.9);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:4px;box-shadow:0 30px 80px -20px rgba(0,0,0,.6);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(--ink-soft);padding:6.5px 0 6.5px 20px;border-top:1px solid var(--line-2);position:relative}
.pkg-list li::before{content:"";position:absolute;left:2px;top:13px;width:9px;height:5px;border-left:1.6px solid var(--accent);border-bottom:1.6px solid var(--accent);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(--sans);letter-spacing:.05em;color:var(--accent);padding:8px 0}
.pkg-open:hover{color:var(--accent-deep)}
/* the package deep-dive popup: dark scrim, serif header, scroll-snap carousel */
.pkg-modal{position:fixed;inset:0;z-index:130;display:flex;align-items:center;justify-content:center;padding:3vh 3vw;background:rgba(15,24,35,.94);opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s}
.pkg-modal.on{opacity:1;visibility:visible}
.pkgm{background:var(--paper);border-radius:10px;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,.6)}
.pkgm-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;padding:26px 30px 6px}
.pkgm-head h3{font-size:clamp(24px,3vw,32px);letter-spacing:-.01em;font-variation-settings:"opsz" 60,"wght" 380}
.pkgm-head .p{font-family:var(--serif);font-size:17px;color:var(--accent-deep)}
.pkgm-why{padding:0 30px 16px;color:var(--ink-soft);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(--paper-2);border-radius:8px;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-family:var(--serif);font-size:16.5px;color:var(--ink);margin-bottom:5px}
.pkgm-slide .t span{display:block;font-size:12.5px;color:var(--muted);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(--line);background:var(--paper);cursor:pointer;color:var(--ink);font-size:16px}
.pkgm-nav button:hover{border-color:var(--accent)}
.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 (opens the deep-dive; the Choose CTA still books) */
.tier.pkg-click{cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.tier.pkg-click:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}

/* ============================================================
   WAVE 1 — THE SCREENING ROOM (2026-07-17)
   Dark cinema register for portfolio.html + video.html ONLY,
   scoped entirely under body.cinema — every other page (incl.
   money pages) is completely untouched. Also: the film-grain
   utility, the shared film <dialog> (home pill + work rail +
   video.html opener), and the horizontal scroll-snap work rail.
   All motion here is compositor-only and stripped under
   prefers-reduced-motion; the rail's progress hairline is a
   NATIVE CSS scroll-driven animation — zero JS scroll listeners.
   (--ink-cinema/-2 tokens live in the merged :root{} at the top.)
   ============================================================ */

/* ---- champagne "watch a listing film" pill ---- */
.film-pill{display:inline-flex;align-items:center;gap:10px;margin-top:24px;background:transparent;
  border:1px solid rgba(177,143,82,.55);color:#fff;font-family:var(--sans);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:#b18f52;background:rgba(177,143,82,.12)}
.film-pill .fp-play{font-size:10px;line-height:1}

/* ---- film dialog: native <dialog>, shared by the home pill + work rail + video.html ----
   Centering is explicit (fixed + transform) rather than relying on the UA's auto-margin
   dialog centering, which fights with an authored width/max-width and can pin the box to
   the top-left instead of centering it (verified live 2026-07-17). */
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:4px;overflow:hidden;box-shadow:0 50px 130px -30px rgba(0,0,0,.75);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(11,16,23,.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}
/* E7 (2026-07-18): the case-study inbound link lives inside the dark film-dialog
   caption, where the shared a{color:inherit;text-decoration:none} reset would
   otherwise make it invisible against the 60%-opacity white caption text. Full-
   opacity white + underline distinguishes it by shape too, not color alone. */
.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 (static SVG feTurbulence noise; optional steps() drift) ---- */
.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: the screening-room register (portfolio.html + video.html ONLY) ---- */
body.cinema{background:var(--ink-cinema);color:rgba(255,255,255,.82)}
body.cinema h1,body.cinema h2,body.cinema h3,body.cinema h4{color:#fff}
body.cinema .eyebrow{color:var(--accent-soft)}
body.cinema .sec-head p:not(.eyebrow){color:rgba(255,255,255,.62)}
body.cinema .lede{color:rgba(255,255,255,.78)}
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:linear-gradient(178deg,#0e141d,var(--ink-cinema) 55%)}
body.cinema .content p,body.cinema .content ul li{color:rgba(255,255,255,.72)}
body.cinema .content ul li::before{background:var(--accent-soft)}
body.cinema .stat-tag{color:var(--accent-soft);border-color:rgba(255,255,255,.28)}
body.cinema .page-updated{color:rgba(255,255,255,.5)}
body.cinema .g-item,body.cinema .two-col .media{background:#141c28}
body.cinema .filter-chip{background:#141c28;border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.72)}
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:rgba(255,255,255,.14)}
body.cinema .faq-item summary{color:#fff}
body.cinema .faq-item .a{color:rgba(255,255,255,.72)}
body.cinema .faq-item summary::after{color:rgba(255,255,255,.45)}
body.cinema .faq-item[open] summary::after,body.cinema .faq-item summary:hover::after{color:#b18f52}
body.cinema .related{border-color:rgba(255,255,255,.14)}
body.cinema .related h3{color:rgba(255,255,255,.5)}
body.cinema .related a{color:#fff}
body.cinema .related a:hover{color:var(--accent-soft)}
body.cinema .thread{border-color:rgba(255,255,255,.14)}
body.cinema .thread p{color:#fff}
body.cinema .thread a{color:var(--accent-soft)}
body.cinema .bynum .stat .big{color:#fff}
body.cinema .bynum .stat .lab{color:rgba(255,255,255,.6)}
body.cinema ::selection{background:rgba(177,143,82,.32);color:#fff}

/* portfolio.html: the oversized screening-room hero (§2 type recipe, lighter weight, one accent word) */
body.cinema .hero h1{font-size:clamp(48px,9vw,110px);font-variation-settings:"opsz" 144,"wght" 270;max-width:15ch}
body.cinema .subhero h1 em{font-style:italic;color:#b18f52;font-weight:inherit}
body.cinema .subhero h1{font-size:clamp(40px,7vw,88px)}

/* ---- 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:4px;overflow:hidden;background:#000;box-shadow:0 20px 50px -24px rgba(0,0,0,.65);
  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;border-radius:4px}
.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}
/* FIX 6 (2026-07-17): the hover-injected clip has no controls and sits on TOP of the
   poster; without this it swallows the poster's click-to-enlarge on fine pointers.
   pointer-events:none lets clicks fall through to the poster underneath. */
.rc-media video{pointer-events:none}
.rc-cap{padding:14px 4px 0;font-size:13px;letter-spacing:.03em;color:rgba(255,255,255,.68)}
.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 #b18f52;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;border-radius:2px}
.rail-progress::before{content:"";position:absolute;inset:0;background:#b18f52;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} }

/* ============================================================
   WAVE 2 — SCROLL CHOREOGRAPHY + CASE STUDY TEMPLATE (2026-07-17)
   Everything here is @supports-gated on native CSS scroll-driven
   animations (animation-timeline: view()), compositor-only
   (opacity/transform/scale only, NEVER background-color), and
   fully static-visible without JS or without browser support.
   Zero JS scroll listeners anywhere in this block's features.
   ============================================================ */

/* ---- home.html: atmosphere shift (§2.3) ----
   Two small transparent "seam" spacers flank the pinned arrival
   .story section. A single fixed dark layer (a DESCENDANT of
   .story, so its named view-timeline reference needs no
   timeline-scope) fades in/out behind those seams only — every
   other section keeps its own opaque background untouched, so
   contrast on existing content never changes. */
.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,#0b1017);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 (§2.4) ---- */
.stats-band{background:var(--paper)}
.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)}
/* D6 (2026-07-18): "Under 24 hrs" is a 3-word phrase, not a short numeral like the
   other three stats ("700+"/"200+"/"86") -- at the full .sb-num display size it wraps
   inside the rigid 4-col grid, and even scaled down its own shorter line-box would sit
   higher than the others (font-size drives line-height, so a smaller box floats above
   the tall numerals' baseline instead of sharing it). Fix: every .sb-num reserves the
   SAME height (min-height matching the base font-size clamp) and bottom-aligns its
   text via flex -- a no-op for the three full-size numeral stats (their content
   already fills that height) but pins .compact's smaller text to the same visual
   baseline. .compact then only needs to shrink the font enough to fit one line,
   verified live at both 1440px desktop (4-col) and 375px mobile (2-col). */
.sb-num{font-family:var(--serif);font-size:clamp(46px,6vw,84px);font-variation-settings:"opsz" 144,"wght" 300;letter-spacing:-.02em;color:var(--ink);line-height:1;
  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:13.5px;letter-spacing:.02em;color:var(--muted)}
@media(max-width:760px){
  .stats-grid{grid-template-columns:1fr 1fr;row-gap:40px}
  .sb-num.compact{font-size:clamp(20px,5.4vw,28px)}
}

/* ---- home.html: hero video pause control (WCAG 2.2.2) ----
   Reduced-motion / coarse-pointer visitors never get the injected
   loop at all (poster-only), so this button stays hidden for them
   by construction; it reveals itself the moment the video actually
   starts playing (JS toggles [hidden]) and is a real, keyboard-
   reachable <button> the whole time it's visible. */
.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(11,16,23,.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)}
/* the [hidden] attribute is how JS gates this to "only once the video is actually
   playing" (WCAG 2.2.2); display:flex must yield to it, so it's scoped to :not([hidden])
   rather than sitting on the base rule where it would fight the UA [hidden]{display:none}. */
.video-pause-btn:not([hidden]){display:flex}
.video-pause-btn:hover{background:rgba(255,255,255,.18);border-color:#fff}
.video-pause-btn svg{width:16px;height:16px;fill:#fff}
.video-pause-btn .vp-play{display:none}
/* class-driven, not aria-pressed (see FIX 2026-07-17): aria-pressed is a toggle-
   button pattern that goes stale the moment the VIDEO pauses/plays for a reason
   other than this button (autoplay policy, tab backgrounding, etc.); the JS now
   listens to the video's own play/pause events and toggles .is-paused instead,
   so this state can never drift from what's actually on screen. */
.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 ----
   The template every future "one address, one film" case page
   copies. Static-visible without support: all three chapters sit
   in normal flow, fully opaque/legible, media never hidden. */
.cs-story{position:relative;background:var(--ink-cinema,#0b1017)}
/* FIX (2026-07-17 adversarial review): .cs-progress-bar is the sole child of this
   track, so under plain block layout its static (flow) position sits at the TOP
   of the tall track, and a bottom-anchored sticky element release-scrolls almost
   immediately instead of holding at the viewport bottom. display:grid + align-
   content:end moves its static position to the BOTTOM of the (still absolutely
   sized, full-height) track instead, so the sticky bottom:0 hairline actually
   holds through the whole scroll and only releases at the true end of the story. */
.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:#b18f52;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:4px;overflow:hidden;background:#000;box-shadow:0 30px 70px -30px rgba(0,0,0,.6);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;border-radius:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cs-media-trio picture{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:4px;background:#000;display:block}
.cs-media-trio img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cs-cap .eyebrow{color:var(--accent-soft)}
.cs-cap h2{color:#fff;font-size:clamp(28px,3.6vw,42px);margin:12px 0 14px;max-width:16ch}
.cs-cap p{color:rgba(255,255,255,.72);font-size:16px;line-height:1.62;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 (links to the immersive template) */
.case-feat{display:grid;grid-template-columns:1.1fr .9fr;gap:0;border-radius:4px;overflow:hidden;background:var(--ink-cinema,#0b1017);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}
.case-feat .cf-body{padding:clamp(30px,4vw,48px);display:flex;flex-direction:column;justify-content:center;color:rgba(255,255,255,.86)}
.case-feat .cf-body .eyebrow{color:var(--accent-soft)}
.case-feat .cf-body h2{color:#fff;font-size:clamp(24px,2.8vw,32px);margin:12px 0 14px;font-variation-settings:"opsz" 88,"wght" 380}
.case-feat .cf-body p{color:rgba(255,255,255,.68);font-size:15px;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(--accent-soft)}
.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)}
.case-feat .cf-media img{transition:transform .9s var(--ease)}
@media(max-width:760px){ .case-feat{grid-template-columns:1fr} }

/* ============================================================
   WAVE 3 (2026-07-18): Higgsfield ambient-loop utility, shared
   verbatim across services.html (the sticky ladder below),
   burbank/long-beach/dtla/malibu.html, signature-standard.html
   and about.html. Same discipline as the home hero: poster-first
   LCP-safe <video poster> is the only thing coarse/reduced-
   motion/mobile visitors ever load (idle-inject JS gates them
   out entirely), muted/loop/playsinline/preload=none, opacity
   fade-in only once really playing, one shared pause control
   pattern (WCAG 2.2.2) synced to real play/pause events. ---- */
.amb-wrap{position:relative;width:100%;height:100%;overflow:hidden;background:var(--paper-3)}
/* an ambient loop used as a full-bleed section background (signature-standard.html's
   and about.html's statement bands) needs to fill the section absolutely, the same
   role .statement .bg already plays for a plain photo background. */
.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(15,24,35,.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 (plan §3.1) ----
   Six repeated per-service rows, each a sticky-rail pattern (the
   same primitive as .cs-media above, mirrored: here the RAIL
   sticks while the MEDIA column scrolls past underneath it).
   Pure CSS position:sticky, zero JS, degrades to plain stacked
   flow if sticky/his content is short. The register descends
   light -> transitional navy -> cinema-dark across the 6 rows
   using ONLY existing brand tokens (no new colors): tone-1 =
   --paper (Photography, Video), tone-2 = the existing footer-
   ramp navy #1c2632 (Aerial & Drone, 3D Tours), tone-3 =
   --ink-cinema (Virtual Staging, Signature Standard) - "descending
   into film/twilight territory" per the plan. */
.svc-ladder{background:var(--paper)}
.ladder-head{padding:clamp(72px,9vw,120px) clamp(20px,4vw,48px) 0}
/* align-items:start is REQUIRED (same technique as .cs-chapter above): the grid
   row track's height always comes from the tallest item's content regardless of
   align-items (here that's .ladder-media's stacked figures), but position:sticky
   only has real travel room if the RAIL's own box stays at its natural (short)
   content height inside that tall row - align-items:stretch would blow the rail
   up to the row's full height and leave sticky nothing to hold within. */
.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 rgba(20,30,44,.08)}
.ladder-row.tone-2+.ladder-row.tone-2,.ladder-row.tone-3+.ladder-row.tone-3{border-top-color:rgba(255,255,255,.1)}
.ladder-rail{position:sticky;top:clamp(84px,12vh,140px)}
.ladder-num{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:14px}
.ladder-name{font-family:var(--serif);font-variation-settings:"opsz" 120,"wght" 340;font-size:clamp(38px,5.4vw,66px);line-height:1.03;margin-bottom:16px;max-width:11ch}
.ladder-line{font-family:var(--serif);font-variation-settings:"opsz" 30,"wght" 410;font-size:clamp(17px,1.6vw,20px);line-height:1.42;margin-bottom:18px;max-width:28ch;color:var(--ink-soft)}
.ladder-price{font-size:14.5px;color:var(--muted);margin-bottom:24px;letter-spacing:.02em}
.ladder-price b{font-family:var(--serif);font-size:22px;color:var(--ink);font-variation-settings:"opsz" 34,"wght" 460;margin-left:6px}
.ladder-media{display:flex;flex-direction:column;gap:20px}
.ladder-media figure{position:relative;border-radius:4px;overflow:hidden;aspect-ratio:4/3;margin:0;box-shadow:var(--shadow-lift)}
.ladder-media img{width:100%;height:100%;object-fit:cover;display:block}
.ladder-media figcaption{position:absolute;left:0;right:0;bottom:0;padding:12px 16px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:linear-gradient(transparent,rgba(15,24,35,.68))}
.ladder-media .amb-figure{aspect-ratio:16/10}
.ladder-row.tone-1{background:var(--paper)}
.ladder-row.tone-2{background:#1c2632}
.ladder-row.tone-3{background:var(--ink-cinema,#0b1017)}
.ladder-row.tone-2 .ladder-line,.ladder-row.tone-3 .ladder-line{color:rgba(255,255,255,.72)}
.ladder-row.tone-2 .ladder-price,.ladder-row.tone-3 .ladder-price{color:rgba(255,255,255,.55)}
.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(--accent-soft)}
.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}
}