/* ============================================================================
   QUIET PRECISION — design + motion system (preview layer)
   markdimercurio.com · loaded AFTER site.css on opt-in preview routes.
   Direction: Modern-Precision discipline governed by Quiet-Authority restraint.
   "Less is more — but let our technique shine." Extends the navy+gold palette;
   never replaces it. Motion: transform/opacity only, reduced-motion-safe, no CLS.
   Spec: review/design-system.md · Reference: /design-system
   ========================================================================== */

/* Native cross-document page transitions (MPA) — smooth, fast, graceful on
   unsupported browsers. Applies between opted-in preview routes. */
@view-transition{ navigation:auto; }

:root{
  /* — surfaces — */
  --surface-0:#ffffff; --surface-1:#f6f7f9; --surface-2:#eef0f4;
  --surface-ink:#15233a; --surface-ink-2:#0e1626;
  /* — text tiers — */
  --text-strong:#15233a; --text:#3e4a60; --text-muted:#6a7689;
  --text-on-dark:#eef2f8; --text-on-dark-muted:#aebacd;
  /* — borders — */
  --border:#e7e8ec; --border-strong:#d6d9e0;
  /* — accent — */
  --accent:#a8843d; --accent-2:#b8943f; --accent-soft:#c9a05a; --accent-ink:#8a6a28;
  /* — fluid type scale — */
  --fs-display:clamp(40px,5.4vw,64px); --fs-h1:clamp(34px,4.4vw,52px);
  --fs-h2:clamp(27px,3.2vw,38px); --fs-h3:clamp(20px,1.6vw,24px);
  --fs-lead:clamp(18px,1.5vw,21px); --fs-body:16.5px; --fs-small:14.5px; --fs-fine:12.5px;
  /* — spacing (extends Task 8) — */
  --space-2:8px; --space-3:12px; --space-5:20px; --space-7:48px; --space-8:80px;
  /* — motion — */
  --dur-fast:160ms; --dur-base:480ms; --dur-slow:820ms;
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --ease-spring:linear(0,.5 7.5%,.9 15%,1.05 22%,1.01 33%,1 50%);
  --stagger:80ms;
  /* — film grain (CSP: img-src data: is allowed) — */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ---------- Type refinements (Playfair display accent · DM Sans body) ---------- */
/* Heroes own their own title color/size: .hero-title is white-by-default (site.css) and only ever
   sits on a DARK surface (legacy .hero image OR the .qp-splithero dark panel). Excluding it here
   stops QP's navy --text-strong from inverting it to dark-on-dark. Without this, every hero headline's
   non-accent text goes near-invisible (caught at Gate 3 on /dst-basics; also repaired the live /how-it-works). */
.qp h1:not(.hero-title), .qp .h1{ font-size:var(--fs-h1); line-height:1.04; letter-spacing:-1.2px; color:var(--text-strong); }
.qp h2, .qp .h2{ font-size:var(--fs-h2); line-height:1.08; letter-spacing:-.7px; color:var(--text-strong); }
.qp h3, .qp .h3{ font-size:var(--fs-h3); line-height:1.2; letter-spacing:-.3px; }
.qp .lead{ font-size:var(--fs-lead); line-height:1.6; color:var(--text); max-width:64ch; }

/* ---- Dark-surface text guard — the load-order-tie CLASS (caught at Gate 3) ----
   QP's bare-element heading rules above (.qp h1 / .qp h2 = specificity 0,1,1) TIE with legacy
   element+class rules (.cta-block h2, h1.hero-title … also 0,1,1) and WIN on load order, silently
   flipping light-on-dark headings to navy-on-dark (e.g. .cta-block h2 went #15233a ON #15233a).
   .hero-title is excluded at the source above; for every OTHER legacy DARK surface, re-assert light
   heading text here — accent spans (.ser/.accent) keep their own gold, only the bare heading flips.
   Specificity (0,2,1) > .qp h2 (0,1,1). ADD any new dark container that holds an h1/h2/h3. */
.qp :is(.hero, .sec-dark, .cta-block, .guide-cover, .path.is-dark, .qp-sh-panel) :is(h1, h2, h3){ color:#fff; }
.qp p{ text-wrap:pretty; }
.qp .measure{ max-width:68ch; }

/* ---------- Reveal primitive — VISIBLE-BY-DEFAULT (refactored 2026-06-24, vocab rule #1) ----------
   Resting state is the element's normal visible self. Hidden ONLY for motion-allowed + JS (html.js,
   set inline pre-paint). So reduced-motion, no-JS, and crawlers all get the visible default — no
   stranding, no noscript backstop needed. Trigger = .is-in (IO in quiet-precision.js, unobserves + degrades). */
@media (prefers-reduced-motion: no-preference){
  html.js .qp-reveal{ opacity:0; transform:translateY(22px); will-change:transform,opacity;
    transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
  html.js .qp-reveal.is-in{ opacity:1; transform:none; }
  html.js .qp-reveal[data-delay="1"]{ transition-delay:.08s } html.js .qp-reveal[data-delay="2"]{ transition-delay:.16s } html.js .qp-reveal[data-delay="3"]{ transition-delay:.24s }
}

/* ---------- Interior hero (NOT the home hero) — toned imagery + masked headline ---------- */
.qp-hero{ position:relative; overflow:hidden; color:#fff; background:var(--surface-ink);
  min-height:clamp(380px,58vh,580px); display:flex; align-items:flex-end; }
.qp-hero .qp-hero-bgwrap{ position:absolute; inset:-8% 0; will-change:transform; }
.qp-hero .qp-hero-bg{ position:absolute; inset:0; background-size:cover; background-position:center 42%; }
/* the towers interior-hero photo + branded scrim (legibility-first) */
.qp-hero--towers .qp-hero-bg{
  background-image:
    linear-gradient(180deg, rgba(13,20,34,.58) 0%, rgba(13,20,34,.30) 38%, rgba(11,17,28,.86) 100%),
    url('/assets/hero-towers-wide.jpg');
}
/* optional duotone — toned to brand so the stock reads native */
.qp-hero--towers .qp-hero-bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(135deg, var(--surface-ink-2), var(--accent));
  mix-blend-mode:soft-light; opacity:var(--tone,.10); }   /* quiet: texture you feel, not see */
/* film grain — just under the conscious threshold */
.qp-hero::before{ content:""; position:absolute; inset:0; background-image:var(--grain);
  background-size:200px; opacity:.03; mix-blend-mode:overlay; pointer-events:none; z-index:1; }
.qp-hero .qp-hero-inner{ position:relative; z-index:2; max-width:1080px; margin:0 auto;
  width:100%; padding:0 56px var(--space-8); }
.qp-hero .qp-eyebrow{ display:inline-block; font-size:var(--fs-fine); letter-spacing:.24em;
  text-transform:uppercase; font-weight:600; color:var(--accent-soft); margin-bottom:18px; }
.qp-hero h1{ font-size:var(--fs-display); line-height:1.03; letter-spacing:-1.6px; color:#fff;
  margin:0; max-width:18ch; }
.qp-hero h1 .accent{ font-family:'Playfair Display',serif; font-style:italic; font-weight:600;
  color:var(--accent-soft); letter-spacing:-1px; }
.qp-hero .qp-hero-sub{ margin:18px 0 0; max-width:60ch; font-size:var(--fs-lead);
  line-height:1.55; color:var(--text-on-dark); }
@media (max-width:760px){
  .qp-hero .qp-hero-inner{ padding:0 24px 48px; }
  .qp-hero--towers .qp-hero-bg{ background-image:
    linear-gradient(180deg, rgba(13,20,34,.6) 0%, rgba(13,20,34,.34) 38%, rgba(11,17,28,.9) 100%),
    url('/assets/hero-towers-wide-sm.jpg'); }
}

/* masked line reveal — hero headline only, on load (above the fold) */
.qp-line{ display:block; overflow:hidden; }
/* base = VISIBLE (no transform) so reduced-motion + no-JS always show the headline;
   the hidden start state lives inside no-preference, like the eyebrow/sub. */
.qp-line > span{ display:inline-block; }
@media (prefers-reduced-motion: no-preference){
  .qp-hero .qp-eyebrow{ opacity:0; animation:qpRise var(--dur-slow) .05s var(--ease-out) forwards; }
  .qp-line > span{ transform:translateY(102%); animation:qpLineUp var(--dur-slow) var(--ease-out) forwards; }
  .qp-line:nth-of-type(1) > span{ animation-delay:.12s } .qp-line:nth-of-type(2) > span{ animation-delay:.22s }
  .qp-hero .qp-hero-sub{ opacity:0; animation:qpRise var(--dur-slow) .4s var(--ease-out) forwards; }
}
@keyframes qpLineUp{ from{transform:translateY(102%)} to{transform:translateY(0)} }
@keyframes qpRise{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }

/* ---------- Process steps — quiet vertical timeline with gold nodes ---------- */
.qp-steps{ display:grid; gap:0; max-width:760px; }
.qp-step{ position:relative; padding:26px 0 26px 56px; border-bottom:1px solid var(--border); }
.qp-step:last-child{ border-bottom:0; }
.qp-step::before{ content:""; position:absolute; left:9px; top:34px; width:10px; height:10px;
  border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(168,132,61,.14); }
.qp-step::after{ content:""; position:absolute; left:13.5px; top:44px; bottom:-1px; width:1px;
  background:var(--border-strong); }
.qp-step:last-child::after{ display:none; }
.qp-step .when{ display:inline-block; font-size:var(--fs-fine); letter-spacing:.16em;
  text-transform:uppercase; font-weight:700; color:var(--accent-ink); margin-bottom:6px; }
.qp-step h3{ font-size:var(--fs-h3); margin:0 0 6px; color:var(--text-strong); letter-spacing:-.3px; }
.qp-step p{ margin:0; color:var(--text); font-size:var(--fs-body); line-height:1.6; }

/* ---------- Glow CTA section — the ONE greenlit generative accent ---------- */
.qp-glow{ position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(180deg, var(--surface-ink) 0%, var(--surface-ink-2) 100%); }
.qp-glow::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  /* quiet: noticed only on a second look — present, deliberate, never attention-grabby */
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,38%), rgba(168,132,61,.12), rgba(168,132,61,0) 60%);
  transition:background-position .25s var(--ease-out); }
.qp-glow::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:var(--grain); background-size:220px; opacity:.045; mix-blend-mode:overlay; }
.qp-glow > *{ position:relative; z-index:1; }
@media (prefers-reduced-motion: reduce){ .qp-glow::before{ transition:none; } }

/* ---------- Count-up figures ---------- */
.qp-stat{ font-variant-numeric:tabular-nums; font-weight:800; letter-spacing:-1px;
  font-size:clamp(34px,4vw,46px); color:var(--text-strong); line-height:1; }
.qp-stat .qp-unit{ color:var(--accent-ink); }
.qp-stats{ display:flex; flex-wrap:wrap; gap:48px; margin:0 0 var(--space-7); }
.qp-stats .qp-stat-item{ display:flex; flex-direction:column; gap:6px; }
.qp-stats .qp-stat-label{ font-size:var(--fs-small); color:var(--text-muted); letter-spacing:.01em; }
.qp-stats .qp-stat-rule{ width:1px; align-self:stretch; background:var(--border-strong); }
/* visually hidden, screen-reader available — carries the count-up's final value once (no slot-machine) */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; border:0; }

/* ---------- Section rhythm + micro-interactions ---------- */
.qp-sec{ padding:var(--space-section) 56px; }
.qp-sec--sm{ padding:var(--space-section-sm) 56px; }
@media (max-width:760px){ .qp-sec,.qp-sec--sm{ padding:var(--space-section-sm) 24px; } }
.qp-kicker{ display:inline-block; font-size:var(--fs-fine); letter-spacing:.22em; text-transform:uppercase;
  font-weight:700; color:var(--accent-ink); margin-bottom:14px; }
.qp .btn-gold, .qp .btn-ghost, .qp .btn-dark{ transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
@media (prefers-reduced-motion: no-preference){ .qp .btn-gold:hover{ transform:translateY(-1px); } }