/* ============================================================
   KRIZ ASPHALT TECHNOLOGY — Shared design system
   "Industrial Intelligence" · canonical stylesheet for krizat.com
   ------------------------------------------------------------
   Evolves the approved kat-home-studio concept into a multi-page
   system. STYLIST refinement pass (design-director): richer but
   DISCIPLINED finish — layered "lit-metal" glow (crisp core + soft
   halo, never a fuzzy blob), ambient page depth (radial key-light +
   fine grain), sheened gold gradients, hairline section seams,
   balanced typographic ragging, and legibility-first accents.
   One-accent-per-section via [data-accent]; WCAG-AA paper KPI ink.

   Every class + hook from the prior system is preserved (pages
   already reference them); refinements are additive.

   All copy is DRAFT for Pavel's review. Photography = atmosphere /
   evidence only: no fabricated data, no fake UI, public-safe.
   ============================================================ */

/* ============================================================
   1 · DESIGN TOKENS
   ============================================================ */
:root{
  /* Ink / paper field */
  --ink-900:#101012; --ink-850:#131417; --ink-800:#16181B; --ink-700:#1E2226;
  --ink-600:#272C31; --ink-500:#333A41;
  --paper:#F8F7F3; --paper-2:#EFEDE6; --paper-3:#E4E1D8;
  --paper-ink:#191B1D;            /* readable ink on paper (AA on --paper) */

  /* Signal gold — decision colour + glow source */
  --gold:#C79A32; --gold-hi:#E4C877; --gold-lo:#A97F22; --gold-deep:#8A6416;

  /* Muted text */
  --ink-mute:#9AA0A6; --ink-faint:#7A7F84; --paper-mute:#585C60;

  /* Technical accents — ONE per section */
  --steel:#2E6F9E;  --steel-hi:#7FB6DA;
  --petrol:#1F5A4C; --petrol-hi:#6FB79C;
  --copper:#B0552E; --copper-hi:#E08A5E;
  --cyan:#5FB4C4;   --cyan-hi:#9BD6E1;

  /* Active accent (per-section override via [data-accent]) */
  --accent:var(--gold);
  --accent-hi:var(--gold-hi);
  --accent-glow:rgba(199,154,50,.40);   /* soft outer glow of the accent */

  /* Glow primitives — LAYERED (tight bright core + soft halo) so accents
     read as "lit metal", never a cheap single-blur blob. Discipline: the
     wide halo stays low-opacity; the crispness comes from the tight core. */
  --glow-gold-xs:0 0 8px rgba(199,154,50,.26);
  --glow-gold-s:0 0 12px rgba(199,154,50,.30), 0 0 4px rgba(228,200,119,.28);
  --glow-gold-m:0 0 22px rgba(199,154,50,.32), 0 0 6px rgba(228,200,119,.30);
  --glow-gold-l:0 0 46px rgba(199,154,50,.26), 0 0 14px rgba(199,154,50,.24);
  --glow-accent:0 0 24px var(--accent-glow), 0 0 7px var(--accent-glow);
  /* Text glow: 1px near-white-gold core keeps the glyph edge SHARP; the
     14px halo is the "lit" feeling. Legibility-first (low-vision safe). */
  --text-glow-gold:0 0 1px rgba(233,211,140,.55), 0 0 14px rgba(199,154,50,.30);
  --text-glow-accent:0 0 1px color-mix(in srgb,var(--accent-hi) 60%,transparent), 0 0 15px var(--accent-glow);

  /* Sheen used on gold surfaces (buttons, rules) for a milled-metal read */
  --gold-sheen:linear-gradient(135deg,var(--gold-hi) 0%,var(--gold) 38%,var(--gold-lo) 100%);

  /* Typography */
  --font-display:'Avenir Next','Inter','Helvetica Neue',Arial,sans-serif;
  --font-text:'Avenir Next','Inter','Helvetica Neue',Arial,sans-serif;

  /* Fluid type scale */
  --fs-display-xl:clamp(2.75rem,6vw,5.5rem);
  --fs-display-l:clamp(2rem,4vw,3.25rem);
  --fs-display-m:clamp(1.6rem,2.6vw,2.3rem);
  --fs-headline:clamp(1.4rem,2vw,1.9rem);
  --fs-lead:clamp(1.14rem,1.5vw,1.32rem);
  --fs-body:1.0625rem;
  --fs-kpi:clamp(2.5rem,5vw,4rem);
  --fs-eyebrow:0.8125rem;
  --fs-cap:0.8125rem;

  /* Layout */
  --gutter:clamp(24px,6vw,96px);
  --measure:68ch;
  --maxw:1280px;
  --nav-h:76px;
  --radius:4px; --radius-lg:6px; --radius-xs:2px;
  --ease:cubic-bezier(0.22,1,0.36,1);
  --dur:.18s;

  /* Ambient page key-light (very subtle warm top-glow behind everything) */
  --ambient:radial-gradient(120% 62% at 50% -8%, rgba(199,154,50,.055) 0%, rgba(199,154,50,.018) 26%, rgba(16,16,18,0) 60%);
}

/* Per-section accent + matching glow. Gold is always-on; the accent
   colours the tick, eyebrow dot, KPI figures (on dark) and section glow. */
[data-accent="gold"]  {--accent:var(--gold);   --accent-hi:var(--gold-hi);   --accent-glow:rgba(199,154,50,.42);}
[data-accent="steel"] {--accent:var(--steel);  --accent-hi:var(--steel-hi);  --accent-glow:rgba(46,111,158,.44);}
[data-accent="petrol"]{--accent:var(--petrol); --accent-hi:var(--petrol-hi); --accent-glow:rgba(31,90,76,.48);}
[data-accent="copper"]{--accent:var(--copper); --accent-hi:var(--copper-hi); --accent-glow:rgba(176,85,46,.44);}
[data-accent="cyan"]  {--accent:var(--cyan);   --accent-hi:var(--cyan-hi);   --accent-glow:rgba(95,180,196,.44);}

/* ============================================================
   2 · RESET / BASE  (+ ambient depth layer)
   ============================================================ */
*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 12px);}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{
  margin:0; background:var(--ink-900); color:var(--paper);
  font-family:var(--font-text); font-size:var(--fs-body); line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden; position:relative;
}
/* Ambient warm key-light — fixed, behind all content, disciplined & faint. */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:var(--ambient);
}
/* Fine film grain — kills the "flat/cheap" feel of solid dark fields.
   Self-contained SVG turbulence, ~2.4% opacity. Static (reduced-motion safe). */
body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.025;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Keep real content above the ambient layers. */
.site-header,.site-footer,main,.hero,.plate,.cta,.photo-band,.page-hero,.nav-backdrop{position:relative; z-index:1;}

img,svg{max-width:100%; display:block;}
a{color:inherit;}
::selection{background:var(--gold); color:var(--ink-900);}
:focus-visible{outline:2px solid var(--gold-hi); outline-offset:2px; border-radius:var(--radius-xs);}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); width:100%;}
.skip{position:absolute; left:-9999px; top:0; background:var(--gold); color:var(--ink-900);
  padding:10px 18px; z-index:300; font-weight:700; text-decoration:none;}
.skip:focus{left:12px; top:12px;}
.visually-hidden{position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; margin:-1px;}

/* ============================================================
   3 · TYPOGRAPHY PRIMITIVES
   ============================================================ */
h1,h2,h3,h4{margin:0; font-family:var(--font-display); letter-spacing:-0.015em; text-wrap:balance;}
.display-xl{font-weight:900; font-size:var(--fs-display-xl); line-height:1.02; letter-spacing:-0.022em;}
.display-l {font-weight:800; font-size:var(--fs-display-l);  line-height:1.05;}
.display-m {font-weight:800; font-size:var(--fs-display-m);  line-height:1.1;}
.headline-m{font-weight:700; font-size:var(--fs-headline);   line-height:1.15; letter-spacing:-0.01em;}
.lead{font-size:var(--fs-lead); line-height:1.55; font-weight:400; text-wrap:pretty;}
p{text-wrap:pretty;}
.hl{color:var(--gold); text-shadow:var(--text-glow-gold);}   /* highlight word — matches logo gold #C79A32 */

.eyebrow{
  display:flex; align-items:center; gap:12px;
  font-size:var(--fs-eyebrow); font-weight:600; letter-spacing:0.14em;
  font-variant:small-caps; text-transform:lowercase; color:var(--ink-mute);
}
.eyebrow::before{content:""; width:40px; height:2px; flex:0 0 auto; border-radius:2px;
  background:linear-gradient(90deg,var(--gold-hi),var(--gold) 60%,transparent);
  box-shadow:var(--glow-gold-xs);}
.eyebrow .dot{width:8px; height:8px; border-radius:50%; background:var(--accent);
  flex:0 0 auto; box-shadow:0 0 10px var(--accent-glow), 0 0 3px var(--accent-glow);}
.eyebrow.on-paper{color:var(--paper-mute);}
.eyebrow.on-paper::before{box-shadow:none; background:linear-gradient(90deg,var(--gold-lo),transparent);}
.eyebrow.center{justify-content:center;}

.kpi-num{font-family:var(--font-display); font-weight:800; font-variant-numeric:tabular-nums;
  line-height:1; font-size:var(--fs-kpi);}
.cap{font-size:var(--fs-cap); font-weight:500; color:var(--ink-mute); line-height:1.45; letter-spacing:0.01em;}
.on-paper .cap, .cap.on-paper{color:var(--paper-mute);}

/* ============================================================
   4 · BUTTONS  (milled-gold sheen · resting + hover glow)
   ============================================================ */
.btn{display:inline-flex; align-items:center; gap:10px; font-family:var(--font-display);
  font-weight:700; font-size:0.95rem; letter-spacing:0.01em; text-decoration:none;
  padding:15px 30px; border-radius:var(--radius-xs); cursor:pointer; border:0; position:relative;
  transition:transform var(--dur) var(--ease), background var(--dur) var(--ease),
             color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);}
.btn .arrow{transition:transform var(--dur) var(--ease);}
.btn:hover .arrow{transform:translateX(4px);}

.btn-primary{background:var(--gold-sheen); color:var(--ink-900);
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset, 0 -1px 0 rgba(0,0,0,.14) inset,
             0 8px 22px -14px rgba(199,154,50,.55), var(--glow-gold-xs);}
.btn-primary:hover{background:linear-gradient(135deg,var(--gold-hi) 0%,var(--gold) 55%,var(--gold-lo) 100%);
  transform:translateY(-1px);
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset, var(--glow-gold-m), 0 12px 28px -14px rgba(199,154,50,.7);}
.btn-primary:active{transform:translateY(0);}

.btn-ghost{background:transparent; color:inherit; padding:15px 4px; position:relative;}
.btn-ghost::after{content:""; position:absolute; left:4px; bottom:8px; height:1px; width:calc(100% - 8px);
  background:linear-gradient(90deg,var(--gold),var(--gold-hi)); transform-origin:left; transform:scaleX(1);
  transition:transform .15s var(--ease), background .15s var(--ease), box-shadow .15s var(--ease);}
.btn-ghost:hover::after{background:linear-gradient(90deg,var(--gold-hi),var(--gold)); box-shadow:var(--glow-gold-s);}
.btn-ghost .arrow{color:var(--gold);}
.paper .btn-ghost, .plate.paper .btn-ghost{color:var(--paper-ink);}

.btn-accent{background:transparent; color:var(--paper); position:relative; padding:14px 26px;
  border:1px solid color-mix(in srgb,var(--accent) 55%,transparent); border-radius:var(--radius-xs);}
.btn-accent:hover{border-color:var(--accent); box-shadow:var(--glow-accent);
  background:color-mix(in srgb,var(--accent) 8%,transparent);}
.plate.paper .btn-accent{color:var(--paper-ink);}

/* ============================================================
   5 · PLATE — the section grammar (+ hairline seams)
   ============================================================ */
.plate{padding:clamp(72px,10vh,128px) 0; position:relative;}
.plate.dark{background:var(--ink-900); color:var(--paper);}
.plate.paper{background:var(--paper); color:var(--paper-ink);}
/* Alternate dark band with a faint vertical lift for depth */
.plate.dark.raised{background:linear-gradient(180deg,var(--ink-850) 0%,var(--ink-900) 60%);}
.plate.paper.raised{background:linear-gradient(180deg,#FBFAF6 0%,var(--paper) 60%);}

/* SEAM — an optional hairline gold-fade divider at the top of a plate, for
   premium transitions between dark↔paper bands. Add class "seam-top". */
.seam-top{border-top:1px solid transparent;}
.seam-top::before{content:""; position:absolute; top:-1px; left:0; right:0; height:1px; z-index:2;
  background:linear-gradient(90deg,transparent 8%,rgba(199,154,50,.42) 50%,transparent 92%);
  pointer-events:none;}
.plate.paper.seam-top::before{background:linear-gradient(90deg,transparent 8%,rgba(138,100,22,.30) 50%,transparent 92%);}

/* Hairline accent rule that can head a band */
.band-rule{height:2px; width:64px; margin-bottom:22px; border-radius:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-hi));
  box-shadow:0 0 22px var(--accent-glow), 0 0 6px var(--accent-glow);}
/* Kill the redundant top stub when an eyebrow (which carries its own rule) follows it. */
.band-rule:has(+ .eyebrow){display:none;}

/* Standard two-column plate (text + evidence image) */
.plate .grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(40px,5vw,72px); align-items:center;}
.plate .grid.reverse{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);}
.plate .grid.reverse .img-c{order:-1;}

.section-head{max-width:680px;}
.section-head .lead{margin-top:18px;}

/* Evidence-plate text column: eyebrow · claim · proof · implication · cta */
.text-c{max-width:600px;}
.text-c .claim{margin:20px 0 0;}
.text-c .proof{margin:22px 0 0;}
.paper .text-c .proof, .plate.paper .proof{color:#33383D;}
.dark .text-c .proof, .plate.dark .proof{color:rgba(248,247,243,.82);}
.text-c .implication{margin:26px 0 0; font-size:var(--fs-lead); line-height:1.5; font-weight:500;}
.text-c .plate-cta{margin-top:30px;}

/* ============================================================
   6 · IMAGE FRAME + registration tick + caption
   ============================================================ */
.img-c{position:relative;}
.img-c figure{margin:0;}
.img-frame{position:relative; border-radius:var(--radius); overflow:hidden; background:var(--ink-800);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.75);}
.img-frame::before{content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  border-radius:var(--radius);
  /* crisp inner keyline + faint top-lit sheen so the frame reads "finished" */
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07), inset 0 24px 60px -40px rgba(255,255,255,.14);}
.img-frame img{width:100%; height:100%; object-fit:cover; display:block;}
.ar-32{aspect-ratio:3/2;} .ar-43{aspect-ratio:4/3;} .ar-45{aspect-ratio:4/5;}
.ar-11{aspect-ratio:1/1;} .ar-169{aspect-ratio:16/9;}

.img-cap{display:flex; gap:10px; align-items:stretch; margin-top:12px; padding-left:2px;}
.img-cap .tick{width:2px; background:var(--accent); flex:0 0 auto; border-radius:2px;
  box-shadow:0 0 10px var(--accent-glow), 0 0 3px var(--accent-glow);}
.img-cap .cap{margin:0;}

/* Registration corner tick — "authored to one standard" gold L */
.img-frame::after,
.kpi-row::before,
.tool-card::after{
  content:""; position:absolute; width:18px; height:18px; z-index:4; pointer-events:none;
  background:
    linear-gradient(var(--gold),var(--gold)) left top / 18px 2px no-repeat,
    linear-gradient(var(--gold),var(--gold)) left top / 2px 18px no-repeat;
  filter:drop-shadow(0 0 5px rgba(199,154,50,.55));
}
.img-frame::after{top:10px; left:10px;}
.tool-card::after{top:16px; left:16px;}

/* ============================================================
   7 · KPI CLUSTER  (lit figures)
   ============================================================ */
.kpi-row{display:flex; flex-wrap:wrap; gap:32px 44px; margin:28px 0 0; position:relative; padding-top:28px;}
.kpi-row::before{top:0; left:0;}
.kpi{display:flex; flex-direction:column; gap:8px;}
.kpi .kpi-num{color:var(--gold); text-shadow:var(--text-glow-gold);}
.plate.dark .kpi .kpi-num, .dark .kpi .kpi-num{color:var(--gold); text-shadow:var(--text-glow-gold);}
.kpi .kpi-label{font-size:0.8125rem; font-weight:600; letter-spacing:0.12em; font-variant:small-caps;
  text-transform:lowercase; color:var(--ink-mute); max-width:16ch;}
.paper .kpi .kpi-label, .plate.paper .kpi .kpi-label{color:var(--paper-mute);}
/* WCAG-AA fix: gold figures fail contrast on Warm Paper. On paper the
   number is ink; gold survives only in the tick + labels + on dark. */
.paper .kpi .kpi-num, .plate.paper .kpi .kpi-num{color:var(--paper-ink); text-shadow:none;}

/* ============================================================
   8 · CALLOUT / "black space" evidence box
   ============================================================ */
.callout{margin-top:26px; background:linear-gradient(180deg,var(--ink-800),var(--ink-850));
  border:1px solid var(--ink-700); border-left:3px solid var(--accent); border-radius:var(--radius);
  padding:22px 26px; position:relative;
  box-shadow:inset 0 0 44px -22px var(--accent-glow), 0 20px 44px -34px #000;}
.callout::before{content:""; position:absolute; left:-2px; top:0; bottom:0; width:3px;
  background:var(--accent); box-shadow:0 0 16px var(--accent-glow); border-radius:2px; opacity:.9;}
.callout .mech{font-size:1.05rem; line-height:1.6; color:rgba(248,247,243,.9); margin:0;}
.callout .mech .val{font-family:var(--font-display); font-weight:800; color:#fff;
  font-variant-numeric:tabular-nums; text-shadow:var(--text-glow-gold);}
.callout .attrib{margin-top:16px; padding-top:16px; border-top:1px solid var(--ink-700);
  display:flex; gap:11px; align-items:flex-start;}
.callout .attrib .qtick{color:var(--accent); font-family:var(--font-display); font-weight:900;
  font-size:1.5rem; line-height:1;}
.callout .attrib .who{font-size:0.9rem; line-height:1.5; color:var(--ink-mute); margin:0;}
.callout .attrib .who b{color:#CFE1F0; font-weight:700;}
/* Paper variant */
.plate.paper .callout{background:linear-gradient(180deg,#FBFAF6,#F5F3ED); border-color:var(--paper-2); color:var(--paper-ink);
  box-shadow:inset 0 0 44px -24px var(--accent-glow), 0 18px 40px -34px rgba(0,0,0,.25);}
.plate.paper .callout .mech{color:#2A2D30;}
.plate.paper .callout .mech .val{color:var(--paper-ink); text-shadow:none;}
.plate.paper .callout .attrib{border-top-color:var(--paper-2);}
.plate.paper .callout .attrib .who{color:var(--paper-mute);}
.plate.paper .callout .attrib .who b{color:var(--paper-ink);}

/* Badge (spec pill) */
.badge{display:inline-flex; align-items:center; gap:9px; margin-top:20px;
  background:color-mix(in srgb,var(--accent) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 42%,transparent);
  padding:7px 14px; border-radius:var(--radius-xs); font-size:0.78rem; font-weight:600;
  letter-spacing:0.06em; color:var(--accent-hi); box-shadow:inset 0 0 18px -10px var(--accent-glow);}
.badge .d{width:7px; height:7px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 8px var(--accent-glow), 0 0 3px var(--accent-glow);}
.plate.paper .badge{color:color-mix(in srgb,var(--accent) 72%,#000);}

/* ============================================================
   9 · NUMBERED / ordered evidence LIST
   ============================================================ */
.ev-list{list-style:none; margin:26px 0 0; padding:0; display:grid; gap:0;}
.ev-list li{display:flex; gap:16px; padding:18px 0; border-top:1px solid var(--ink-700);
  align-items:flex-start; transition:padding-left .2s var(--ease);}
.ev-list li:last-child{border-bottom:1px solid var(--ink-700);}
/* no hover shift: evidence-list items are not clickable */
.ev-list .idx{font-family:var(--font-display); font-weight:800; font-variant-numeric:tabular-nums;
  color:var(--gold); font-size:0.95rem; line-height:1.5; flex:0 0 auto; width:28px; text-shadow:var(--glow-gold-xs);}
.ev-list .txt{font-size:1.05rem; line-height:1.5; color:rgba(248,247,243,.86);}
.ev-list .txt b{font-weight:700; color:var(--paper);}
/* Paper variant */
.plate.paper .ev-list li, .plate.paper .ev-list li:last-child{border-color:var(--paper-2);}
.plate.paper .ev-list .idx{color:var(--gold-lo); text-shadow:none;}
.plate.paper .ev-list .txt{color:#26292D;}
.plate.paper .ev-list .txt b{color:#111;}

/* Definition-style row list (who / want) */
.row-list{display:grid; gap:0;}
.row-item{display:grid; grid-template-columns:minmax(140px,auto) 1fr; gap:20px; padding:22px 0;
  border-top:1px solid var(--ink-700); align-items:baseline; transition:padding-left .2s var(--ease);}
.row-item:last-child{border-bottom:1px solid var(--ink-700);}
/* no hover shift: row items are not clickable */
.row-item .who{font-family:var(--font-display); font-weight:800; font-size:1.15rem; color:var(--paper);
  position:relative;}
.row-item .who::before{content:""; position:absolute; left:-14px; top:.55em; width:6px; height:6px;
  border-radius:50%; background:var(--accent); opacity:1; transition:none;
  box-shadow:0 0 8px var(--accent-glow), 0 0 3px var(--accent-glow);}
/* static accent dot (always shown) — not a hover/click affordance */
.row-item .want{color:rgba(248,247,243,.74); font-size:1rem; line-height:1.5;}
.row-item .want b{color:var(--paper); font-weight:600;}
.plate.paper .row-item, .plate.paper .row-item:last-child{border-color:var(--paper-2);}
.plate.paper .row-item .who{color:var(--paper-ink);}
.plate.paper .row-item .want{color:#3A3E42;}
.plate.paper .row-item .want b{color:var(--paper-ink);}
.plate.paper .row-item .who{color:var(--paper-ink);}
.plate.paper .row-item .want{color:#3A3E42;}
.plate.paper .row-item .want b{color:var(--paper-ink);}

/* Numbered process steps */
.steps{display:grid; gap:0; margin-top:6px;}
.step{display:grid; grid-template-columns:auto 1fr; gap:18px; padding:18px 0;
  border-top:1px solid var(--ink-700); align-items:baseline;}
.step:last-child{border-bottom:1px solid var(--ink-700);}
.step .n{font-family:var(--font-display); font-weight:800; color:var(--accent);
  font-variant-numeric:tabular-nums; text-shadow:0 0 14px var(--accent-glow);}
.step .s{color:rgba(248,247,243,.76); font-size:1rem; line-height:1.5;}
.step .s b{color:var(--paper); font-weight:700;}
.plate.paper .step, .plate.paper .step:last-child{border-color:var(--paper-2);}
.plate.paper .step .n{text-shadow:none;}
.plate.paper .step .s{color:#3A3E42;}
.plate.paper .step .s b{color:var(--paper-ink);}

/* ============================================================
   10 · QUOTE / pull-quote
   ============================================================ */
.pull-quote{margin:22px 0 0; font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.9rem,3.4vw,3rem); line-height:1.12; letter-spacing:-0.015em; color:var(--paper);
  text-wrap:balance;}
.pull-quote .q{color:var(--gold); text-shadow:var(--text-glow-gold);}
.plate.paper .pull-quote{color:var(--paper-ink);}
.plate.paper .pull-quote .q{color:var(--gold-lo); text-shadow:none;}
.sign{margin-top:28px;}
.sign .name{font-family:var(--font-display); font-weight:800; font-size:1.1rem; color:var(--gold);}
.sign .role{display:block; margin-top:4px; font-size:0.85rem; font-weight:600;
  letter-spacing:0.02em; color:var(--ink-mute);}
.plate.paper .sign .name{color:var(--gold-lo);}
.plate.paper .sign .role{color:var(--paper-mute);}

/* ============================================================
   11 · CARD  (tool card / feature card over photo)
   ============================================================ */
.card-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(24px,3vw,36px); margin-top:44px;}
.card-grid.two{grid-template-columns:1fr 1fr;}
.card-grid.three{grid-template-columns:repeat(3,1fr);}

.tool-card{position:relative; border-radius:var(--radius-lg); overflow:hidden; isolation:isolate;
  min-height:420px; display:flex; flex-direction:column; justify-content:flex-end; padding:34px;
  --tc:var(--accent); --tc-hi:var(--accent-hi);
  box-shadow:0 30px 70px -40px #000; transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);}
/* lift only when the whole card is a link (clickable) */
a.tool-card:hover{transform:translateY(-3px); box-shadow:0 38px 80px -40px #000, 0 0 0 1px color-mix(in srgb,var(--tc) 24%,transparent);}
.tool-card .bg{position:absolute; inset:0; z-index:-2;}
.tool-card .bg img{width:100%; height:100%; object-fit:cover; opacity:.5;}
.tool-card::before{content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(90% 60% at 18% 108%, color-mix(in srgb,var(--tc) 24%,transparent) 0%, rgba(16,16,18,0) 60%),
    linear-gradient(0deg, rgba(16,16,18,.97) 0%, rgba(16,16,18,.86) 42%, rgba(16,16,18,.68) 100%);}
.tool-card .edge{position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--tc); z-index:1;
  box-shadow:0 0 20px color-mix(in srgb,var(--tc) 65%,transparent), 0 0 6px color-mix(in srgb,var(--tc) 60%,transparent);}
.tool-card .panel{color:var(--paper);}
.tool-card .tool-eyebrow{display:flex; align-items:center; gap:10px; font-size:0.8rem; font-weight:600;
  letter-spacing:0.12em; font-variant:small-caps; text-transform:lowercase; color:var(--ink-mute);}
.tool-card .tool-eyebrow::before{content:""; width:28px; height:2px; background:var(--tc); border-radius:2px;
  box-shadow:0 0 12px color-mix(in srgb,var(--tc) 55%,transparent);}
.tool-card h3{margin:16px 0 0; font-size:2rem; font-weight:800;}
.tool-card h3 .role{display:block; font-size:0.82rem; font-weight:600; letter-spacing:0.1em;
  font-variant:small-caps; text-transform:lowercase; color:var(--tc-hi); margin-top:8px;}
.tool-card p{margin:16px 0 0; color:rgba(248,247,243,.82); font-size:1.02rem; line-height:1.55; max-width:44ch;}
.tool-card .tool-link{margin-top:22px; display:inline-flex; align-items:center; gap:8px;
  font-weight:700; font-size:0.92rem; color:var(--paper); text-decoration:none; align-self:flex-start;}
.tool-card .tool-link .arrow{color:var(--tc-hi); transition:transform var(--dur) var(--ease);}
.tool-card .tool-link:hover .arrow{transform:translateX(4px);}
/* named accent hooks for the two engines */
.tool-card.poyiva{--tc:var(--petrol); --tc-hi:var(--petrol-hi);}
.tool-card.yistiva{--tc:var(--steel); --tc-hi:var(--steel-hi);}

/* Open editorial feature card — hairline top rule + gold tick, no box/shadow.
   (Replaces the dated 2015-era "boxed card + coloured left-bar" motif.) */
.feature{position:relative; padding:26px 24px 6px 0; background:none; border:none;
  border-top:1px solid var(--ink-700); border-radius:0; overflow:visible;
  transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease);}
.feature::before{content:""; position:absolute; left:0; top:-1px; height:2px; width:38px; border-radius:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-hi));
  box-shadow:0 0 12px color-mix(in srgb,var(--accent) 45%,transparent);
  transition:width var(--dur) var(--ease);}
/* lift + rule-extend only when the card is itself a link (clickable) */
a.feature{text-decoration:none; color:inherit;}
a.feature h3, a.feature p{text-decoration:none;}
a.feature:hover{transform:translateY(-3px);}
a.feature:hover::before{width:72px;}
.feature h3{font-size:1.3rem; font-weight:800; letter-spacing:-.01em; margin:16px 0 10px; position:relative;}
.feature p{color:rgba(248,247,243,.72); font-size:0.98rem; line-height:1.6; margin:0; position:relative;}
.plate.paper .feature{border-top-color:color-mix(in srgb,var(--paper-ink) 15%,transparent);}
.plate.paper .feature h3{color:var(--paper-ink);}
.plate.paper .feature p{color:#3A3E42;}

/* ===========================================================
   Pass-2 conversion components (2026-07-27)
   =========================================================== */

/* Trust / recognition strip under the hero (text signals, no employer logos) */
.trust-strip{background:var(--ink-900); border-bottom:1px solid var(--ink-800);}
.trust-strip .wrap{display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:12px 30px; padding-top:16px; padding-bottom:16px;}
.trust-item{display:flex; align-items:center; gap:9px; font-size:.83rem; letter-spacing:.01em;
  color:rgba(248,247,243,.66); font-weight:500; line-height:1.3;}
.trust-item::before{content:""; width:6px; height:6px; border-radius:50%; flex:0 0 auto;
  background:var(--gold); box-shadow:0 0 8px rgba(212,160,60,.5);}
.trust-item b{color:#f4f1ea; font-weight:700;}
@media(max-width:720px){ .trust-strip .wrap{gap:9px 18px;} .trust-item{font-size:.75rem;} }

/* Full-bleed media header band inside a plate (the refinery value band) */
.has-media-head{padding-top:0;}
.media-head{position:relative; overflow:hidden; margin-bottom:clamp(38px,6vw,68px);
  padding:clamp(60px,9vw,116px) 0;}
.media-head-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 58%;}
.media-head-scrim{position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(10,10,11,.93),rgba(10,10,11,.72) 52%,rgba(10,10,11,.44));}
.media-head-inner{position:relative; max-width:720px;}
.media-head .eyebrow{color:rgba(248,247,243,.85);}
.media-head h2{color:#fff;}
.media-head .lead{color:rgba(248,247,243,.88); margin-top:18px;}

/* Clickable audience-router rows (only these animate — they are links) */
a.row-item{text-decoration:none; cursor:pointer;
  grid-template-columns:minmax(150px,auto) 1fr auto;}
a.row-item:hover{padding-left:12px;}
a.row-item .who{transition:color .2s var(--ease);}
a.row-item:hover .who{color:var(--gold-hi);}
a.row-item .go{align-self:center; color:var(--accent); font-weight:800; opacity:0; transform:translateX(-6px);
  transition:opacity .2s var(--ease), transform .2s var(--ease);}
a.row-item:hover .go{opacity:1; transform:translateX(0);}

/* Compact standalone image band (short value section on home) */
.plate.media-band{position:relative; overflow:hidden; color:#fff; background:var(--ink-900);}
.plate.media-band .eyebrow{color:rgba(248,247,243,.85);}
.plate.media-band h2{color:#fff;}
.plate.media-band .lead{color:rgba(248,247,243,.88); margin-top:18px; max-width:60ch;}

/* Audience cards — "lit-metal" tiles: dark body, GLOWING gold top edge, warm inner bloom, glow-lift on hover */
.aud-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:18px; margin-top:clamp(30px,4vw,44px);}
.aud-card{position:relative; display:flex; flex-direction:column; text-decoration:none; color:inherit; overflow:hidden;
  border:1px solid color-mix(in srgb,var(--gold) 20%,var(--ink-700)); border-radius:10px; padding:26px 24px 22px;
  background:radial-gradient(130% 90% at 0% 0%, color-mix(in srgb,var(--gold) 13%,transparent), transparent 58%),
    linear-gradient(160deg,var(--ink-850),var(--ink-900));
  box-shadow:0 16px 40px -30px #000, inset 0 1px 0 rgba(255,255,255,.04);
  transition:transform .22s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);}
/* glowing gold top edge (lit metal) */
.aud-card::before{content:""; position:absolute; inset:0 0 auto 0; height:2px;
  background:linear-gradient(90deg,var(--gold-hi),var(--gold) 55%,transparent 94%);
  box-shadow:0 0 16px 1px rgba(199,154,50,.6);}
/* warm corner bloom */
.aud-card::after{content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:radial-gradient(85% 65% at 100% 0%, rgba(228,200,119,.07), transparent 55%);}
.aud-card:hover{transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--gold) 52%,var(--ink-700));
  box-shadow:0 0 26px -6px rgba(199,154,50,.42), 0 28px 54px -30px #000, inset 0 0 70px -44px var(--gold);}
.aud-card:hover::before{box-shadow:0 0 22px 2px rgba(199,154,50,.9);}
.aud-card h3{position:relative; font-family:var(--font-display); font-weight:800; letter-spacing:-.01em;
  font-size:1.5rem; color:#fff; margin:0 0 8px;}
.aud-card p{position:relative; color:rgba(248,247,243,.75); font-size:.97rem; line-height:1.5; margin:0 0 16px; flex:1 1 auto;}
.aud-card .arrow{position:relative; color:var(--gold-hi); font-weight:800; align-self:flex-start;
  text-shadow:0 0 10px rgba(199,154,50,.5); transition:transform .2s var(--ease);}
.aud-card:hover .arrow{transform:translateX(6px);}

/* Engagement "ways to work" — numbered formats with outlined gold numerals (distinct from tile grids) */
.ways{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(26px,3.5vw,44px); margin-top:clamp(34px,4vw,52px);}
.way{display:flex; gap:18px; align-items:flex-start;}
.way-n{font-family:var(--font-display); font-weight:800; font-size:clamp(2.2rem,3.2vw,2.8rem); line-height:.85;
  color:color-mix(in srgb,var(--gold) 18%,transparent); -webkit-text-stroke:1.4px var(--gold); flex:0 0 auto;}
.way-b h3{font-family:var(--font-display); font-weight:800; font-size:1.22rem; color:#fff; margin:2px 0 8px; letter-spacing:-.01em;}
.way-b p{color:rgba(248,247,243,.72); font-size:.98rem; line-height:1.55; margin:0;}
.plate.paper .way-b h3{color:var(--paper-ink);}
.plate.paper .way-b p{color:#3A3E42;}

/* Premium "economic levers" cards (light) — lifted cream panels + glowing gold top bar */
.card-grid.levers{gap:clamp(18px,2vw,22px);}
.card-grid.levers .feature{padding:30px 26px 26px; border:1px solid rgba(199,154,50,.20); border-radius:12px;
  background:linear-gradient(165deg,#FFFDF9 0%,#F4F0E7 100%); overflow:hidden;
  box-shadow:0 20px 44px -30px rgba(30,22,8,.5), 0 3px 10px -6px rgba(30,22,8,.14);
  transition:transform .22s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);}
.card-grid.levers .feature::before{content:""; position:absolute; inset:0 0 auto 0; height:3px; width:100%;
  background:linear-gradient(90deg,var(--gold-hi),var(--gold) 55%,transparent);
  box-shadow:0 0 12px rgba(199,154,50,.45);}
.card-grid.levers .feature:hover{transform:translateY(-4px); border-color:rgba(199,154,50,.5);
  box-shadow:0 30px 56px -30px rgba(30,22,8,.55), 0 0 24px -8px rgba(199,154,50,.4);}
.card-grid.levers .feature h3{color:var(--paper-ink); font-size:1.34rem; margin:4px 0 10px;}
.card-grid.levers .feature p{color:#3A3E42;}

/* ===== Animated SQC control chart — Quality-Loop hero ===== */
.hero-sqc{position:absolute; inset:0; z-index:-3; overflow:hidden;
  background:linear-gradient(135deg,var(--ink-850),var(--ink-900));}
.hero-sqc .sqc-svg{position:absolute; inset:0; width:100%; height:100%;}
.hero-sqc::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg,var(--ink-900) 12%,color-mix(in srgb,var(--ink-900) 55%,transparent) 46%,transparent 72%);}
.sqc-grid line{stroke:rgba(255,255,255,.05); stroke-width:1;}
.sqc-cl{stroke:rgba(248,247,243,.26); stroke-width:1.5;}
.sqc-lim{stroke:rgba(199,154,50,.45); stroke-width:1.5; stroke-dasharray:6 6;}
.sqc-lab{fill:rgba(248,247,243,.34); font-family:var(--font-display); font-size:13px; font-weight:700; letter-spacing:.08em;}
.sqc-line{fill:none; stroke:var(--c); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round;
  stroke-dasharray:1500; stroke-dashoffset:1500; filter:drop-shadow(0 0 5px color-mix(in srgb,var(--c) 55%,transparent));
  animation:sqc-draw 2.4s var(--ease) forwards;}
.sqc-b{animation-delay:.35s;} .sqc-c{animation-delay:.7s;}
.sqc-pt{fill:var(--c); opacity:0; transform-box:fill-box; transform-origin:center;
  animation:sqc-pt .5s var(--ease) var(--d) forwards;
  filter:drop-shadow(0 0 4px color-mix(in srgb,var(--c) 60%,transparent));}
.sqc-ooc{fill:#E08A3C; opacity:0; animation:sqc-pt .5s var(--ease) 2.5s forwards;
  filter:drop-shadow(0 0 9px rgba(224,138,60,.85));}
.sqc-ooc-ring{fill:none; stroke:#E08A3C; stroke-width:2; opacity:0; transform-box:fill-box; transform-origin:center;
  animation:sqc-ring 2.4s var(--ease) 2.8s infinite;}
@keyframes sqc-draw{to{stroke-dashoffset:0;}}
@keyframes sqc-pt{from{opacity:0; transform:scale(0);} to{opacity:1; transform:scale(1);}}
@keyframes sqc-ring{0%{opacity:.9; transform:scale(.55);} 70%{opacity:0; transform:scale(1.9);} 100%{opacity:0; transform:scale(1.9);}}
@media (prefers-reduced-motion:reduce){
  .sqc-line{animation:none; stroke-dashoffset:0;}
  .sqc-pt,.sqc-ooc{animation:none; opacity:1; transform:none;}
  .sqc-ooc-ring{animation:none; opacity:.6;}}

/* ============================================================
   12 · HERO  (dual key-light, big placed logo, lit gold rule)
   ============================================================ */
.hero{position:relative; min-height:min(88vh,820px); display:flex; align-items:flex-end;
  isolation:isolate; overflow:hidden;}
.hero-photo{position:absolute; inset:0; z-index:-3;}
.hero-photo img{width:100%; height:100%; object-fit:cover; object-position:68% 50%;}
.hero-scrim{position:absolute; inset:0; z-index:-2;
  background:
    linear-gradient(105deg, rgba(16,16,18,0.95) 0%, rgba(16,16,18,0.76) 34%, rgba(16,16,18,0.12) 66%, rgba(16,16,18,0) 100%),
    linear-gradient(0deg, rgba(16,16,18,0.66) 0%, rgba(16,16,18,0) 42%);
  transition:opacity .2s linear;}
/* Dual radial light behind hero copy: a warm gold key + a faint cool rim
   opposite it — reads deliberate and dimensional, still restrained. */
.hero-glow{position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(46vw 46vw at 12% 84%, rgba(199,154,50,.22) 0%, rgba(199,154,50,.08) 34%, rgba(199,154,50,0) 66%),
    radial-gradient(40vw 40vw at 88% 10%, rgba(95,180,196,.08) 0%, rgba(95,180,196,0) 60%);}
.hero-inner{width:100%; padding-bottom:clamp(56px,9vh,104px); padding-top:calc(var(--nav-h) + 44px);}
.hero-col{max-width:720px;}
.hero .hero-logo{display:inline-block; margin-bottom:26px;}
.hero .hero-logo img{width:clamp(300px,44vw,600px); height:auto;
  filter:drop-shadow(0 8px 30px rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(199,154,50,.14));}
.hero h1{margin:22px 0 0;}
.hero .lead{margin:26px 0 0; color:rgba(248,247,243,.88); max-width:52ch;}
.hero .cred{margin:22px 0 0; font-size:0.95rem; color:rgba(248,247,243,.72); max-width:60ch;}
.hero-cta{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:38px;}
.hero-rule{position:absolute; left:0; right:0; bottom:0; height:2px; z-index:1;
  background:linear-gradient(90deg, var(--gold-deep) 0%, var(--gold) 32%, var(--gold-hi) 52%, var(--gold) 72%, var(--gold-deep) 100%);
  box-shadow:var(--glow-gold-l);}
.hero-meta{position:absolute; right:var(--gutter); bottom:26px; z-index:1; text-align:right;
  display:flex; flex-direction:column; gap:2px;}
.hero-meta .cap{color:rgba(248,247,243,.7);}
@media (max-width:820px){ .hero-meta{display:none;} }

/* Compact inner-page hero (no full viewport) */
.page-hero{position:relative; overflow:hidden; isolation:isolate;
  padding:calc(var(--nav-h) + clamp(56px,10vh,96px)) 0 clamp(48px,8vh,80px);}
.page-hero .hero-photo{z-index:-3;}
.page-hero .hero-scrim{z-index:-2;}
.page-hero .hero-glow{opacity:.85;
  background:radial-gradient(44vw 40vw at 10% -10%, var(--accent-glow) 0%, rgba(199,154,50,0) 62%);}
.page-hero h1{margin:18px 0 0; max-width:20ch;}
.page-hero .lead{margin:22px 0 0; color:rgba(248,247,243,.86); max-width:56ch;}
.page-hero .hero-rule{background:linear-gradient(90deg,var(--gold-deep) 0%,var(--gold) 30%,var(--gold-hi) 50%,var(--gold) 70%,var(--gold-deep) 100%);
  box-shadow:var(--glow-gold-m);}

/* ============================================================
   13 · CTA band  (dual radial light + photo)
   ============================================================ */
.cta{position:relative; overflow:hidden; isolation:isolate;}
.cta .bg{position:absolute; inset:0; z-index:-3;}
.cta .bg img{width:100%; height:100%; object-fit:cover; object-position:60% 50%;}
.cta::before{content:""; position:absolute; inset:0; z-index:-2;
  background:linear-gradient(180deg, rgba(16,16,18,.86) 0%, rgba(16,16,18,.94) 100%);}
.cta::after{content:""; position:absolute; left:50%; top:44%; transform:translate(-50%,-50%);
  width:74vw; height:74vw; max-width:940px; max-height:940px; z-index:-1; pointer-events:none;
  background:radial-gradient(circle, rgba(199,154,50,.18) 0%, rgba(199,154,50,.07) 34%, rgba(199,154,50,0) 66%);}
.cta-inner{padding:clamp(80px,12vh,150px) 0; text-align:center;}
.cta h2{margin:22px auto 0; max-width:20ch;}
.cta .lead{margin:24px auto 0; max-width:52ch; color:rgba(248,247,243,.86);}
.cta-actions{margin-top:40px; display:flex; justify-content:center; gap:18px; flex-wrap:wrap;}
.cta .confid{margin-top:34px; font-size:0.85rem; color:var(--ink-mute); max-width:56ch;
  margin-left:auto; margin-right:auto;}
.cta .confid .lk{color:var(--paper);}

/* Full-width photo band with caption */
.photo-band{position:relative; height:clamp(320px,52vh,540px); overflow:hidden;}
.photo-band img{width:100%; height:100%; object-fit:cover; object-position:50% 42%;}
.photo-band::after{content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(16,16,18,.85) 0%, rgba(16,16,18,.1) 55%, rgba(16,16,18,.4) 100%);}
.photo-band .band-cap{position:absolute; left:var(--gutter); right:var(--gutter); bottom:20px; z-index:2;}
.photo-band .band-cap .cap{color:rgba(248,247,243,.72);}

/* ============================================================
   14 · HEADER / NAV  (grouped dropdowns + mobile drawer)
   ============================================================ */
.site-header{position:fixed; inset:0 0 auto 0; z-index:100; height:var(--nav-h);
  display:flex; align-items:center; border-bottom:1px solid transparent; background:transparent;
  transition:background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);}
.site-header.scrolled{background:linear-gradient(180deg,rgba(16,16,18,0.94),rgba(16,16,18,0.88));
  border-bottom-color:color-mix(in srgb,var(--gold) 55%,transparent);
  backdrop-filter:saturate(125%) blur(9px);
  box-shadow:0 1px 0 rgba(199,154,50,.28), 0 14px 34px -24px #000;}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px;}

/* placed logo (never text) — subtle shadow keeps it legible over hero imagery */
.brand-logo{display:inline-flex; align-items:center; text-decoration:none; flex:0 0 auto;}
.brand-logo img{height:54px; width:auto; display:block;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.45));}
@media (max-width:520px){ .brand-logo img{height:44px;} }
/* HOME shows the big hero logo — don't double up: hide the small header logo while the
   hero is in view, fade it in once scrolled past (header stays branded, never doubled).
   Only affects pages that place a .hero-logo (i.e. the homepage). */
body:has(.hero-logo) .site-header .brand-logo{opacity:0; visibility:hidden;
  transition:opacity .25s var(--ease), visibility .25s var(--ease);}
body:has(.hero-logo) .site-header.scrolled .brand-logo{opacity:1; visibility:visible;}

/* Primary nav */
.primary-nav{display:flex; align-items:center; gap:8px;}
.nav-menu{display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0;}
.nav-item{position:relative;}
.nav-link, .nav-trigger{font-family:var(--font-text); font-size:0.9rem; font-weight:600;
  color:var(--paper); text-decoration:none; background:none; border:0; cursor:pointer;
  padding:8px 14px; border-radius:var(--radius-xs); display:inline-flex; align-items:center; gap:7px;
  opacity:.88; letter-spacing:0.01em; text-shadow:0 1px 6px rgba(0,0,0,.4);
  transition:opacity .16s var(--ease), color .16s var(--ease);}
.site-header.scrolled .nav-link, .site-header.scrolled .nav-trigger{text-shadow:none;}
.nav-link:hover, .nav-trigger:hover{opacity:1; color:var(--gold-hi);}
.nav-trigger .caret{width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px); transition:transform .2s var(--ease); opacity:.7;}
.nav-item.open .nav-trigger .caret{transform:rotate(-135deg) translateY(-1px);}
/* active state — glowing gold underline */
.nav-link.active, .nav-item.active > .nav-trigger{opacity:1; color:var(--gold-hi);}
.nav-link.active::after, .nav-item.active > .nav-trigger::after{content:""; position:absolute; left:14px; right:14px;
  bottom:2px; height:2px; background:linear-gradient(90deg,var(--gold),var(--gold-hi)); box-shadow:var(--glow-gold-s); border-radius:2px;}

/* Dropdown panel */
.nav-dropdown{position:absolute; top:calc(100% + 10px); left:0; min-width:264px;
  background:linear-gradient(180deg,rgba(21,22,26,0.98),rgba(17,18,21,0.98));
  border:1px solid var(--ink-700); border-top:2px solid var(--gold);
  border-radius:0 0 var(--radius) var(--radius); padding:8px; margin:0; list-style:none;
  box-shadow:0 28px 56px -26px #000, 0 0 0 1px rgba(199,154,50,.10), 0 -1px 16px -6px rgba(199,154,50,.30);
  backdrop-filter:saturate(120%) blur(10px);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .18s var(--ease), transform .18s var(--ease), visibility .18s var(--ease);}
.nav-item.open .nav-dropdown{opacity:1; visibility:visible; transform:translateY(0);}
.nav-dropdown a{display:block; padding:11px 14px; border-radius:var(--radius-xs); text-decoration:none;
  color:rgba(248,247,243,.86); font-size:0.9rem; font-weight:600; line-height:1.3;
  position:relative; transition:background .15s var(--ease), color .15s var(--ease), padding-left .15s var(--ease);}
.nav-dropdown a .sub{display:block; font-size:0.76rem; font-weight:500; color:var(--ink-mute);
  margin-top:3px; letter-spacing:0;}
.nav-dropdown a:hover, .nav-dropdown a:focus-visible{
  background:linear-gradient(90deg,rgba(199,154,50,.14),rgba(199,154,50,.05));
  color:var(--paper); padding-left:18px;}
.nav-dropdown a[aria-current="page"]{color:var(--gold-hi);}
.nav-dropdown a[aria-current="page"]::before{content:""; position:absolute; left:6px; top:50%;
  transform:translateY(-50%); width:4px; height:4px; border-radius:50%; background:var(--gold);
  box-shadow:0 0 8px var(--accent-glow), 0 0 3px var(--accent-glow);}

.nav-cta{margin-left:8px; padding:11px 22px !important; font-size:0.9rem !important;}

/* Hamburger */
.nav-toggle{display:none; background:none; border:0; color:var(--paper); cursor:pointer; padding:8px;
  margin-left:4px;}
.nav-toggle span{display:block; width:24px; height:2px; background:var(--paper); margin:5px 0; border-radius:2px;
  transition:transform .25s var(--ease), opacity .2s var(--ease);}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* Mobile drawer */
.nav-backdrop{position:fixed; inset:0; z-index:98; background:rgba(0,0,0,.5); opacity:0; visibility:hidden;
  transition:opacity .28s var(--ease), visibility .28s var(--ease);}
.nav-backdrop.open{opacity:1; visibility:visible;}

@media (max-width:960px){
  .primary-nav{position:fixed; top:0; right:0; bottom:0; width:min(86vw,380px); z-index:99;
    flex-direction:column; align-items:stretch; justify-content:flex-start; gap:0;
    background:linear-gradient(180deg,var(--ink-850),var(--ink-900)); border-left:1px solid color-mix(in srgb,var(--gold) 55%,transparent);
    padding:calc(var(--nav-h) + 12px) 0 32px; overflow-y:auto;
    transform:translateX(105%); transition:transform .3s var(--ease);
    box-shadow:-30px 0 60px -30px #000;}
  .primary-nav.open{transform:translateX(0);}
  .nav-menu{flex-direction:column; align-items:stretch; gap:0; width:100%;}
  .nav-item{width:100%; border-bottom:1px solid var(--ink-700);}
  .nav-link, .nav-trigger{width:100%; justify-content:space-between; padding:16px var(--gutter); border-radius:0;
    font-size:1rem; opacity:1; text-shadow:none;}
  .nav-link.active::after, .nav-item.active > .nav-trigger::after{display:none;}
  .nav-item.active > .nav-trigger, .nav-link.active{border-left:2px solid var(--gold);}
  /* accordion dropdowns in drawer */
  .nav-dropdown{position:static; min-width:0; opacity:1; visibility:visible; transform:none;
    background:var(--ink-850); border:0; border-radius:0; box-shadow:none; backdrop-filter:none;
    padding:0; max-height:0; overflow:hidden; transition:max-height .28s var(--ease);}
  .nav-item.open .nav-dropdown{max-height:640px;}
  .nav-dropdown a{padding:13px var(--gutter) 13px calc(var(--gutter) + 12px);
    border-top:1px solid var(--ink-700);}
  .nav-dropdown a:hover, .nav-dropdown a:focus-visible{padding-left:calc(var(--gutter) + 18px);}
  .nav-cta{margin:20px var(--gutter) 0; justify-content:center; text-align:center;}
  .nav-toggle{display:block;}
}

/* ============================================================
   15 · FOOTER
   ============================================================ */
.site-footer{background:linear-gradient(180deg,var(--ink-850),var(--ink-900));
  border-top:1px solid var(--ink-700); padding:60px 0 40px; position:relative;}
.site-footer::before{content:""; position:absolute; top:-1px; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(199,154,50,.55),transparent);}
.site-footer .top{display:grid; grid-template-columns:minmax(220px,1fr) 2fr; gap:48px; align-items:start;}
.site-footer .brand-col .brand-logo img{height:40px;}
.site-footer .brand-col p{margin:18px 0 0; color:var(--ink-mute); font-size:0.9rem; line-height:1.55; max-width:34ch;}
.footer-groups{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:32px;}
.footer-group h4{font-size:0.78rem; font-weight:700; letter-spacing:0.12em; font-variant:small-caps;
  text-transform:lowercase; color:var(--gold); margin-bottom:14px;}
.footer-group ul{list-style:none; margin:0; padding:0; display:grid; gap:9px;}
.footer-group a{font-size:0.9rem; font-weight:500; text-decoration:none; color:rgba(248,247,243,.78);
  transition:color .15s var(--ease);}
.footer-group a:hover{color:var(--gold-hi);}
.site-footer .bottom{margin-top:44px; padding-top:24px; border-top:1px solid var(--ink-700);
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;}
.site-footer .bottom .cap{max-width:64ch;}
.site-footer .bottom a{color:var(--gold); text-decoration:none;}
/* footer social icons (LinkedIn / X) — monochrome, gold on hover */
.site-footer .social{display:inline-flex; align-items:center; gap:13px; margin-left:14px; vertical-align:middle;}
.site-footer .social a{color:rgba(248,247,243,.55); display:inline-flex; transition:color .2s var(--ease), transform .2s var(--ease);}
.site-footer .social a:hover{color:var(--gold); transform:translateY(-1px);}
.site-footer .social svg{display:block;}
.site-footer .draft{color:var(--ink-faint); font-size:0.75rem; margin-top:14px; max-width:88ch; line-height:1.5;}
@media (max-width:760px){ .site-footer .top{grid-template-columns:1fr;} }

/* ============================================================
   16 · MOTION — reveal on enter
   ============================================================ */
.reveal{opacity:0; transform:translateY(16px);
  transition:opacity .42s var(--ease), transform .42s var(--ease);}
.reveal.in{opacity:1; transform:none;}
.reveal.d1{transition-delay:.06s;} .reveal.d2{transition-delay:.12s;} .reveal.d3{transition-delay:.18s;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  .btn,.arrow,.row-item,.ev-list li,.feature,.tool-card{transition:none !important;}
}

/* Reduced-transparency: drop backdrop blur, keep solid legible panels. */
@media (prefers-reduced-transparency:reduce){
  .site-header.scrolled{background:var(--ink-900); backdrop-filter:none;}
  .nav-dropdown{background:var(--ink-850); backdrop-filter:none;}
  body::after{display:none;}
}

/* ============================================================
   16b · SHARED SPACING UTILITIES  (replace per-page inline styles)
   ============================================================ */
.mt-lg{margin-top:clamp(48px,6vh,72px);}
.mt-md{margin-top:clamp(40px,5vh,60px);}
.mt-sm{margin-top:34px;}
/* dual-CTA row: matches .plate-cta spacing but lays two buttons in a wrapping row */
.cta-row{margin-top:34px; display:flex; gap:22px; flex-wrap:wrap; align-items:center;}

/* Inline schematic figure (black-space SVG) filling an .img-frame slot */
.img-frame .svg-figure{position:absolute; inset:0; width:100%; height:100%; display:block; z-index:1;}

/* ============================================================
   17 · RESPONSIVE (content grids)
   ============================================================ */
@media (max-width:900px){
  .plate .grid, .plate .grid.reverse,
  .card-grid.two, .card-grid.three{grid-template-columns:1fr;}
  .plate .grid.reverse .img-c{order:0;}
  .plate .grid .img-c{order:2;}
  .plate .grid .text-c{order:1;}
  .row-item{grid-template-columns:1fr; gap:6px;}
}
@media (max-width:820px){
  .hero-scrim{background:
      linear-gradient(180deg, rgba(16,16,18,0.9) 0%, rgba(16,16,18,0.5) 46%, rgba(16,16,18,0.82) 100%);}
  .hero-glow{background:radial-gradient(70vw 50vw at 50% 100%, rgba(199,154,50,.16) 0%, rgba(199,154,50,0) 62%);}
}
@media (max-width:720px){
  .tool-card{min-height:360px; padding:26px;}
  .kpi-row{gap:24px 32px;}
}

/* ============================================================
   16b · VALUE-AT-A-GLANCE outcome tiles (case studies — shared by all 16)
   ============================================================ */
.value-glance{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:clamp(18px,2.4vw,28px); margin-top:40px;}
.vg-tile{position:relative; padding:26px 24px 22px; border-radius:var(--radius);
  background:linear-gradient(180deg,var(--ink-850),var(--ink-900)); border:1px solid var(--ink-700);
  border-top:2px solid var(--accent); box-shadow:inset 0 0 60px -46px var(--accent-glow);}
.vg-tile .vg-fig{font-family:var(--font-display); font-weight:800; font-variant-numeric:tabular-nums;
  font-size:clamp(1.9rem,3.4vw,2.6rem); line-height:1; color:var(--accent-hi); text-shadow:var(--text-glow-accent);}
.vg-tile .vg-label{display:block; margin-top:12px; font-size:.95rem; line-height:1.4;
  color:rgba(248,247,243,.82); font-weight:600;}
.vg-tile .vg-note{display:block; margin-top:10px; font-size:.72rem; letter-spacing:.04em;
  color:var(--ink-faint); font-style:italic;}
.vg-disclaimer{margin-top:22px; font-size:.8rem; font-style:italic; color:var(--ink-mute); max-width:64ch;}
/* paper variant: figure -> ink (WCAG-AA); accent survives in the top rule + note */
.plate.paper .vg-tile{background:linear-gradient(180deg,#FBFAF6,#F4F2EC); border-color:var(--paper-3);}
.plate.paper .vg-tile .vg-fig{color:var(--paper-ink); text-shadow:none;}
.plate.paper .vg-tile .vg-label{color:#33383D;}
.plate.paper .vg-tile .vg-note{color:var(--paper-mute);}
.plate.paper .vg-disclaimer{color:var(--paper-mute);}