/* ============================================================
   itsaura — components: repeated blocks across pages
   ============================================================ */

/* ---------- hero ----------
   The landing page leads with the mark alone: the three tiles sit directly
   beneath it and act as the menu, and the statement follows them. */
.hero{position:relative;text-align:center;padding:44px var(--pad) 0;overflow:visible}
.hero-inner{position:relative;z-index:1;max-width:920px;margin:0 auto}
.hero-logo{width:74px;height:74px;margin:0 auto;
  filter:drop-shadow(0 0 26px rgba(212,175,55,.5))}
.hero .h-display{margin:32px auto 0;max-width:18ch;
  font-size:clamp(32px,4.2vw,52px)}
.hero-lede{font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:#a7abb6;
  max-width:680px;margin:26px auto 0}

/* ---------- offerings (the tiles, used as the menu) ----------
   Spacing is a balance: enough air under the slogan to breathe, but the card
   internals are trimmed to compensate so all three still clear the fold. */
.offerings{position:relative;z-index:1;padding:48px var(--pad) 0}

/* ---------- statement (below the tiles) ----------
   Kept tight so the tiles, the statement, the contact button and the footer
   read as one block rather than separate screens. */
.statement{position:relative;text-align:center;padding:22px var(--pad) 64px}
/* Carries the same panel treatment as the tiles above it, so the row of three
   and the closing statement read as one family rather than two designs. */
.statement-inner{position:relative;z-index:1;max-width:1080px;margin:0 auto;
  padding:40px 46px 42px;border-radius:18px;
  background:linear-gradient(180deg,var(--panel-a),var(--panel-b));
  border:1.5px solid var(--card-line);
  transition:border-color .45s ease,box-shadow .45s ease}
.statement-inner:hover{border-color:var(--card-line-hi);
  box-shadow:0 26px 60px rgba(0,0,0,.55),0 0 80px rgba(212,175,55,.14)}
.statement .hero-lede{font-size:clamp(16px,1.4vw,19px);margin:0 auto;max-width:760px}
.statement .hero-actions{margin-top:26px}
@media (max-width:600px){.statement-inner{padding:32px 24px 34px}}
.hero-actions{display:flex;align-items:center;justify-content:center;gap:14px;
  margin-top:38px;flex-wrap:wrap}
/* The 620px watermark that used to sit behind the hero is gone: with the tiles
   pulled up under the mark, the hero is too short to contain it and it clipped
   into a visible rectangle. The aura carries the glow on its own. */

/* ---------- page hero (subpages) ---------- */
.page-hero{position:relative;text-align:center;padding:104px var(--pad) 0;overflow:hidden}
.page-hero-inner{position:relative;z-index:1;max-width:820px;margin:0 auto}
.page-hero .hero-logo{margin-bottom:22px}
.page-hero .mono-label{display:block;margin-bottom:20px;font-size:15px;
  letter-spacing:.38em}
.page-hero .h-display{font-size:clamp(38px,5.4vw,68px)}
/* The page hero's lede and the first section below it were separated by a
   full 120px section padding on top of the row's own — too big a jump
   straight out of the hero. */
.page-hero + .section{padding-top:60px}

/* ---------- prose ---------- */
.prose{max-width:720px;margin:0 auto}
.prose .h-section{margin-bottom:24px}
.prose p{font-size:16.5px;line-height:1.72;color:#aeb2bc;margin:0 0 18px}
.prose p:last-of-type{margin-bottom:0}
.prose a{color:var(--gold);text-decoration:none;
  border-bottom:1px solid rgba(212,175,55,.35)}
.prose a:hover{border-bottom-color:var(--gold)}
/* Same trap as the nav's Contact button: .prose a (0,1,1) outranks
   .btn-primary (0,1,0), so the label rendered gold on gold and the button
   read as empty. Re-assert at higher specificity. */
.prose a.btn-primary,.prose a.btn-primary:hover{color:var(--ink);border-bottom:none}
.prose .hero-actions{justify-content:flex-start;margin-top:32px}

/* ---------- alternating example rows (Projects) ---------- */
.ex-copy .mono-label{font-size:14px;letter-spacing:.38em}
.h-mid{font-family:var(--serif);font-weight:300;font-size:clamp(26px,2.6vw,34px);
  line-height:1.14;letter-spacing:-.015em;color:var(--cream-h);margin:14px 0 16px}
.ex{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:center;
  padding:64px 0;border-top:1px solid var(--line)}
.ex:first-of-type{border-top:none;padding-top:24px}
/* The last example already has the section's bottom padding beneath it;
   its own 64px on top of that opened an unnecessary gulf. */
.ex:last-of-type{padding-bottom:0}
.ex-flip .ex-shot{order:2}
.ex-copy p{font-size:16px;line-height:1.68;color:var(--muted);margin:0}
.tick-list{list-style:none;margin:20px 0 0;padding:0}
.tick-list li{position:relative;padding-left:24px;font-size:14.5px;line-height:1.6;
  color:var(--body);margin-bottom:11px}
.tick-list li::before{content:"";position:absolute;left:2px;top:6px;width:7px;height:4px;
  border-left:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);
  transform:rotate(-45deg)}
@media (max-width:900px){
  .ex{grid-template-columns:1fr;gap:32px;padding:48px 0}
  .ex-flip .ex-shot{order:0}
  /* A grid item's min-width is auto, so the widest mock window sets a floor
     the 1fr track cannot go below — the threat console held it at 406px and
     the page scrolled sideways on a phone. The console rows already truncate
     with an ellipsis; they just need permission to. */
  .ex > *{min-width:0}
}

/* ---------- mock application window ---------- */
.win{border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.11);
  background:#0b0d12;box-shadow:0 30px 70px rgba(0,0,0,.6),
    0 0 70px rgba(212,175,55,.07)}
.win-bar{display:flex;align-items:center;gap:8px;padding:11px 14px;background:#10131a;
  border-bottom:1px solid rgba(255,255,255,.07)}
.wd{width:10px;height:10px;border-radius:50%}
.wd.r{background:#ec6a5e}.wd.y{background:#f3bf4f}.wd.g{background:#61c554}
.win-title{margin-left:10px;font-family:var(--mono);font-size:11px;color:var(--dim)}
.win-body{padding:16px}
.badge{display:inline-block;padding:3px 9px;border-radius:5px;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);
  background:rgba(212,175,55,.13);border:1px solid rgba(212,175,55,.34)}
.badge-hot{color:#f0907f;background:rgba(236,106,94,.13);border-color:rgba(236,106,94,.4)}
.mnote{font-size:11px;color:var(--dim);margin-left:10px}

/* inbox */
.mk-inbox .mrow{display:flex;align-items:center;gap:10px;padding:9px 10px;
  border-radius:8px;border:1px solid rgba(255,255,255,.06);margin-bottom:7px;
  background:rgba(255,255,255,.02)}
.mdot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.24);flex:0 0 6px}
.msubj{flex:1;font-size:12px;color:#c4c8d2;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.mchip{font-family:var(--mono);font-size:9px;padding:2.5px 7px;border-radius:4px;
  white-space:nowrap;border:1px solid rgba(255,255,255,.14);color:var(--dim)}
.mchip.c-d{color:var(--gold);border-color:rgba(212,175,55,.4);background:rgba(212,175,55,.12)}
.mrow-live{border-color:rgba(212,175,55,.32)}
.mdraft{margin-top:11px;padding:12px 13px;border-radius:9px;
  border:1px solid rgba(212,175,55,.28);background:rgba(212,175,55,.05)}
.mdraft-h{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);margin-bottom:9px}
.ml{display:block;height:5px;border-radius:3px;background:rgba(255,255,255,.14);
  margin-bottom:6px}
.ml.short{width:56%}
.mdraft-f{display:flex;align-items:center;margin-top:11px;flex-wrap:wrap;gap:4px}

/* dashboard — card grid, mirroring the structure of a real operations board */
/* Palette lifted from the real board: navy panels with semantic status
   colours. Scoped to .mk-dash only — the rest of the site stays gold on
   near-black, and the contrast makes the window read as embedded software
   rather than page decoration. */
.mk-dash{--d-bg:#0b1120;--d-card:#151c32;--d-line:#283a58;--d-label:#7b8fa3;
  --d-text:#c0cdd9;--d-green:#22c55e;--d-amber:#f59e0b;--d-blue:#3b82f6;
  --d-purple:#8b5cf6;--d-cyan:#06b6d4;--d-orange:#f97316;--d-red:#ef4444;
  background:var(--d-bg)}
.mk-dash .dcard{background:var(--d-card);border-color:var(--d-line)}
.mk-dash .dcard-t,.mk-dash .label-sm,.mk-dash .ctrl-k{color:var(--d-label)}
.mk-dash .big-num,.mk-dash .mid-num{color:#fff}
/* One hue per card, the way a real board colour-codes by meaning. */
.mk-dash .dgrid .dcard:nth-child(1){border-top:2px solid var(--d-green)}
.mk-dash .dgrid .dcard:nth-child(1) .big-num{color:var(--d-green)}
.mk-dash .dgrid .dcard:nth-child(2){border-top:2px solid var(--d-amber)}
.mk-dash .dgrid .dcard:nth-child(2) .big-num{color:var(--d-amber)}
.mk-dash .dgrid .dcard:nth-child(3){border-top:2px solid var(--d-blue)}
.mk-dash .dcard-wide{border-top:2px solid var(--d-purple)}
.mk-dash .dgrid-3 .dcard:nth-child(1){border-left:2px solid var(--d-cyan)}
.mk-dash .dgrid-3 .dcard:nth-child(1) .mid-num{color:var(--d-cyan)}
.mk-dash .dgrid-3 .dcard:nth-child(2){border-left:2px solid var(--d-orange)}
.mk-dash .dgrid-3 .dcard:nth-child(2) .mid-num{color:var(--d-orange)}
.mk-dash .dgrid-3 .dcard:nth-child(3){border-left:2px solid var(--d-purple)}
.mk-dash .dgrid-3 .dcard:nth-child(3) .mid-num{color:var(--d-purple)}
.mk-dash .stat-pc::after{color:var(--d-label)}
.mk-dash .pct-bar{background:rgba(100,116,139,.25)}
.mk-dash .pct-bar-fill{background:var(--d-amber)}
.mk-dash .status-dot{background:var(--d-green);box-shadow:0 0 9px rgba(34,197,94,.75)}
.mk-dash .badge{color:var(--d-amber);background:rgba(245,158,11,.13);
  border-color:rgba(245,158,11,.4)}
.mk-dash .ctrl{background:var(--d-card);border-color:var(--d-line)}
.mk-dash .ctrl-track{background:rgba(100,116,139,.3)}
.mk-dash .ctrl-knob{background:var(--d-blue);box-shadow:0 0 12px rgba(59,130,246,.8)}
.mk-dash .flow-svg .fnode{fill:#1e2844;stroke:var(--d-line)}
.mk-dash .flow-svg .fnode-mid{fill:rgba(59,130,246,.16);stroke:var(--d-blue)}
.mk-dash .flow-svg .fpipe:nth-of-type(1){stroke:rgba(6,182,212,.6)}
.mk-dash .flow-svg .fpipe:nth-of-type(2){stroke:rgba(34,197,94,.6)}
.mk-dash .flow-svg .fpipe:nth-of-type(3){stroke:rgba(249,115,22,.6)}
.mk-dash .flow-svg .fdot.d-a{fill:var(--d-green)}
.mk-dash .flow-svg .fdot.d-b{fill:var(--d-orange)}
.mk-dash .flow-svg .fnode:nth-of-type(3){stroke:rgba(34,197,94,.7)}
.mk-dash .flow-svg .fnode:nth-of-type(4){stroke:rgba(249,115,22,.7)}
.dgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;margin-bottom:9px}
.dcard{padding:10px 12px;border-radius:9px;background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);display:flex;flex-direction:column;gap:5px}
.dcard-wide{margin-bottom:9px}
.dcard-sm{gap:3px;padding:8px 11px}
.dcard-t{font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim)}
.label-sm{font-family:var(--mono);font-size:8px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim)}
.big-num{font-family:var(--serif);font-size:25px;font-weight:300;color:var(--cream-h);
  line-height:1}
.mid-num{font-family:var(--serif);font-size:17px;font-weight:300;color:var(--cream);
  line-height:1}
.stat-pc::after{content:"%";font-size:13px;color:var(--muted);margin-left:1px}
.pct-bar{height:5px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}
.pct-bar-fill{display:block;height:100%;border-radius:3px;background:var(--gold);
  transform-origin:left;transform:scaleX(0)}
.dstat{display:flex;align-items:center;gap:7px}
.status-dot{width:7px;height:7px;border-radius:50%;background:#61c554;
  box-shadow:0 0 9px rgba(97,197,84,.7);flex:0 0 7px}
.flow-svg{width:100%;height:74px;display:block;margin-top:2px}
.flow-svg .fnode{fill:rgba(255,255,255,.04);stroke:rgba(255,255,255,.2);stroke-width:1}
.flow-svg .fnode-mid{stroke:rgba(212,175,55,.6);fill:rgba(212,175,55,.08)}
.flow-svg .fpipe{fill:none;stroke:rgba(212,175,55,.34);stroke-width:1.2}
.flow-svg .fdot{fill:var(--gold)}
.ctrl{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);flex-wrap:wrap}
.ctrl-k{font-family:var(--mono);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim)}
.ctrl-track{position:relative;flex:1;min-width:80px;height:4px;border-radius:3px;
  background:rgba(255,255,255,.1)}
.ctrl-knob{position:absolute;top:50%;width:11px;height:11px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 12px rgba(212,175,55,.8);
  margin-top:-5.5px;left:22%}

/* report — an emailed analysis, not a dashboard */
.rep-hero{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin:-16px -16px 14px;padding:14px 16px;background:#151821;
  border-bottom:1px solid rgba(255,255,255,.08)}
.rep-hero-t{font-family:var(--sans);font-size:15px;font-weight:700;color:#fff;
  letter-spacing:-.01em}
.rep-hero-s{font-family:var(--mono);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}
.rep-sec{margin-bottom:13px}
.rep-sec-t{font-family:var(--mono);font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);margin-bottom:9px}
.rep-row{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.rep-k{flex:0 0 86px;font-size:11.5px;color:var(--muted)}
.rep-bar{flex:1;height:6px;border-radius:4px;background:rgba(212,175,55,.7);
  transform-origin:left;transform:scaleX(0)}
.rep-bar.b1{background:linear-gradient(90deg,#22c55e,#86efac)}
.rep-bar.b2{background:linear-gradient(90deg,#f59e0b,#fbbf24)}
.rep-bar.b3{background:linear-gradient(90deg,#3b82f6,#60a5fa)}
.mk-report .spark{stroke:#22c55e}
.mk-report .rep-hero{background:linear-gradient(90deg,#151821,#1b2033)}
.mk-report .rep-sec-t{color:#60a5fa}
.pill{flex:0 0 auto;font-family:var(--mono);font-size:8px;letter-spacing:.1em;
  text-transform:uppercase;padding:2px 7px;border-radius:4px;border:1px solid}
.p-ok{color:#7fd06f;border-color:rgba(97,197,84,.4);background:rgba(97,197,84,.1)}
.p-warn{color:#f3bf4f;border-color:rgba(243,191,79,.4);background:rgba(243,191,79,.1)}
.rep-warn{padding:11px 12px;border-radius:8px;margin-bottom:13px;
  border:1px solid rgba(236,106,94,.3);background:rgba(236,106,94,.06)}
.rep-warn-t{font-family:var(--mono);font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:#f0907f;margin-bottom:8px}
.rep-spark{height:40px;margin:2px 0 0}
.rep-spark svg{width:100%;height:100%}
.rep-f{display:flex;align-items:center;flex-wrap:wrap;gap:4px;padding-top:11px;
  border-top:1px solid rgba(255,255,255,.07)}

/* flowchart */
.chartbox{padding:22px 18px;border-radius:14px;border:1px solid rgba(255,255,255,.09);
  background:radial-gradient(ellipse at 50% 0%,rgba(212,175,55,.07),transparent 70%),#0b0d12;
  box-shadow:0 30px 70px rgba(0,0,0,.55)}
.fc{width:100%;height:auto;display:block}
.fc-node rect,.fc-node path{fill:rgba(255,255,255,.035);
  stroke:rgba(255,255,255,.24);stroke-width:1.2}
.fc-node text{font-family:var(--sans);font-size:13px;fill:var(--body);
  text-anchor:middle;dominant-baseline:middle}
.fc-gate rect{fill:rgba(212,175,55,.14);stroke:rgba(212,175,55,.9);stroke-width:1.8}
/* Colour by stage: intake blue, processing cyan, drafting amber, the human
   gate gold, dispatch green. The eye can follow the pipeline by hue alone. */
.fc-assist .n1 rect{fill:rgba(59,130,246,.12);stroke:#3b82f6}
.fc-assist .n1 text{fill:#93c5fd}
.fc-assist .n2 rect{fill:rgba(6,182,212,.12);stroke:#06b6d4}
.fc-assist .n2 text{fill:#67e8f9}
.fc-assist .n3 rect{fill:rgba(139,92,246,.12);stroke:#8b5cf6}
.fc-assist .n3 text{fill:#c4b5fd}
.fc-assist .n4 rect{fill:rgba(139,92,246,.12);stroke:#8b5cf6}
.fc-assist .n4 text{fill:#c4b5fd}
.fc-assist .n5 rect{fill:rgba(245,158,11,.12);stroke:#f59e0b}
.fc-assist .n5 text{fill:#fcd34d}
.fc-assist .n7 rect{fill:rgba(34,197,94,.12);stroke:#22c55e}
.fc-assist .n7 text{fill:#86efac}
.fc-assist .l1{stroke:#3b82f6}
.fc-assist .l2{stroke:#06b6d4}
.fc-assist .l3,.fc-assist .l4{stroke:#8b5cf6}
.fc-assist .l5{stroke:#f59e0b}
.fc-assist .l6,.fc-assist .l7{stroke:#22c55e}
.fc-gate text{fill:var(--gold-warm)}
.fc-muted rect{fill:rgba(255,255,255,.02);stroke:rgba(255,255,255,.14)}
.fc-muted text{fill:var(--dim)}
.fc-link{fill:none;stroke:rgba(212,175,55,.5);stroke-width:1.4;stroke-linecap:round}
.fc-dot{fill:var(--gold)}
.fc-tag{font-family:var(--mono);font-size:10px;fill:var(--dim);text-anchor:middle;
  letter-spacing:.1em;text-transform:uppercase}

/* monitoring */
.mk-watch .ev-row{display:flex;align-items:center;gap:11px;padding:8px 10px;
  border-radius:7px;margin-bottom:6px;background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.05)}
.ev-t{font-family:var(--mono);font-size:10px;color:var(--dim);flex:0 0 34px}
.ev-d{flex:1;font-size:11.5px;color:#aeb2bc;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.ev-s{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:2px 7px;border-radius:4px;border:1px solid rgba(255,255,255,.12);color:var(--dim)}
.s-hi{color:#f0907f;border-color:rgba(236,106,94,.45);background:rgba(236,106,94,.12)}
.s-ok{color:#7fd06f;border-color:rgba(97,197,84,.4);background:rgba(97,197,84,.1)}
.s-lo{color:#fbbf24;border-color:rgba(245,158,11,.4);background:rgba(245,158,11,.1)}
.mk-watch .ev-row{border-left:3px solid rgba(97,197,84,.5)}
.mk-watch .ev-row:nth-child(2),.mk-watch .ev-row:nth-child(4){
  border-left-color:rgba(245,158,11,.6)}
.mk-watch .ev-hot{border-left-color:#ef4444}
.mk-watch .ev-t{color:#60a5fa}
.watch-f{display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin-top:11px;
  padding-top:11px;border-top:1px solid rgba(255,255,255,.07)}

/* ---------- numbered steps ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.step{padding:34px 30px 36px;background:var(--ink);border-radius:16px;
  border:1px solid rgba(255,255,255,.08)}
.step-hi{background:linear-gradient(180deg,var(--panel-a),var(--panel-b));
  border-color:var(--card-line);box-shadow:0 0 60px rgba(212,175,55,.08)}
.step-n{font-family:var(--mono);font-size:13px;color:var(--gold);margin-bottom:20px}
.step .h-sub{font-size:21px;line-height:1.25}
.step p{font-size:14.5px;line-height:1.6;color:var(--muted);margin:0}

/* ---------- security band ---------- */
.security .section-head{margin-bottom:44px}
/* min(320px,100%), not a bare 320px: on a narrow phone the track floor is
   wider than the track itself and the row pushes the page sideways. */
.sec-list{list-style:none;margin:0;padding:0;max-width:1080px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:12px}
.sec-item{display:flex;align-items:center;gap:14px;padding:16px 22px;
  background:var(--ink-2);border:1px solid rgba(255,255,255,.08);border-radius:12px;
  font-size:15px;color:#cfd2da;font-weight:500}

/* ---------- offering cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{position:relative;display:flex;flex-direction:column;padding:0 0 16px;
  min-height:400px;text-decoration:none;overflow:hidden;border-radius:18px;
  background:linear-gradient(180deg,var(--panel-a),var(--panel-b));
  border:1.5px solid var(--card-line);
  transition:transform .45s var(--ease),border-color .45s ease,box-shadow .45s ease}
.card:hover,.card:focus-visible{transform:translateY(-8px);
  border-color:var(--card-line-hi);
  box-shadow:0 26px 60px rgba(0,0,0,.55),0 0 80px rgba(212,175,55,.2)}
.card:hover .card-title,.card:focus-visible .card-title{color:var(--gold-warm)}
.card:hover .arw,.card:focus-visible .arw{transform:translateX(6px)}
.card-art{height:106px;position:relative;display:flex;align-items:center;
  justify-content:center;overflow:hidden;margin-bottom:18px;
  border-bottom:1px solid rgba(212,175,55,.16);
  background:radial-gradient(ellipse at 50% 125%,rgba(212,175,55,.11),transparent 68%)}
.card-body{padding:0 24px;display:flex;flex-direction:column;flex:1}
.card-title{font-family:var(--serif);font-weight:300;font-size:34px;line-height:1;
  letter-spacing:-.02em;color:var(--cream-h);margin:0 0 12px;transition:color .45s ease}
.card-tag{font-size:14.5px;line-height:1.6;color:var(--muted);margin:0 0 14px}
.card-list{list-style:none;margin:0;padding:0}
.card-list li{position:relative;padding-left:20px;font-size:14px;line-height:1.55;
  color:var(--body);margin-bottom:8px}
.card-list li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;
  border-radius:50%;background:var(--gold);opacity:.85}
.card-more{margin-top:auto;padding-top:12px;font-size:14px;font-weight:600;
  color:var(--cream);display:flex;align-items:center;gap:8px}

@media (max-width:900px){.cards{grid-template-columns:1fr}}

/* ---------- cta ---------- */
.cta{position:relative;text-align:center;padding:140px var(--pad);overflow:hidden;
  border-bottom:none}
.cta-inner{position:relative;z-index:1;max-width:720px;margin:0 auto}
.cta-logo{width:66px;height:66px;margin:0 auto;
  filter:drop-shadow(0 0 24px rgba(212,175,55,.45))}
.cta .h-display{margin-top:26px;font-size:clamp(36px,5.2vw,68px)}

/* ============================================================
   Advice page mocks
   ============================================================ */
.badge-ok{color:#7fd06f;background:rgba(97,197,84,.13);border-color:rgba(97,197,84,.4)}
.badge-blue{color:#7fb0f5;background:rgba(59,130,246,.13);border-color:rgba(59,130,246,.4)}
.badge-grey{color:var(--dim);background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.proc-f{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:14px;
  padding-top:12px;border-top:1px solid rgba(255,255,255,.07)}

/* 1. process review */
.mk-proc .proc-row{display:flex;align-items:center;gap:12px;margin-bottom:9px}
.proc-k{flex:0 0 66px;font-family:var(--mono);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}
.pline{flex:1;display:flex;gap:5px;align-items:center}
.pstep{flex:1;height:16px;border-radius:4px;background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.16)}
.pstep.hot{background:rgba(239,68,68,.22);border-color:#ef4444}
.pstep.ok{background:rgba(34,197,94,.22);border-color:#22c55e}
.proc-t{flex:0 0 58px;text-align:right;font-family:var(--mono);font-size:11px}
.t-slow{color:#f0907f}.t-fast{color:#7fd06f}
.proc-note{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--dim);
  margin:0 0 12px 78px}
.dotmark{width:7px;height:7px;border-radius:50%;background:#ef4444;flex:0 0 7px}
.proc-sep{height:1px;background:rgba(255,255,255,.08);margin:12px 0}

/* 2. data landscape */
.dl-grid{display:grid;grid-template-columns:1fr 90px 1.05fr;gap:10px;align-items:center}
.dl-src{display:flex;flex-direction:column;gap:9px}
.chipx{font-family:var(--mono);font-size:9px;padding:5px 8px;border-radius:5px;
  border:1px solid;text-align:center}
.chipx.c1{color:#22c55e;border-color:rgba(34,197,94,.45);background:rgba(34,197,94,.1)}
.chipx.c2{color:#3b82f6;border-color:rgba(59,130,246,.45);background:rgba(59,130,246,.1)}
.chipx.c3{color:#8b5cf6;border-color:rgba(139,92,246,.45);background:rgba(139,92,246,.1)}
.chipx.c4{color:#f59e0b;border-color:rgba(245,158,11,.45);background:rgba(245,158,11,.1)}
.chipx.c5{color:#06b6d4;border-color:rgba(6,182,212,.45);background:rgba(6,182,212,.1)}
.dl-pipes{width:90px;height:170px}
.dl-pipes .dp{fill:none;stroke-width:1.3}
.dl-pipes .p1{stroke:#22c55e}.dl-pipes .p2{stroke:#3b82f6}.dl-pipes .p3{stroke:#8b5cf6}
.dl-pipes .p4{stroke:#f59e0b}.dl-pipes .p5{stroke:#06b6d4}
.dl-out{padding:11px 12px;border-radius:9px;background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.1)}
.dl-out-t{font-family:var(--mono);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);margin-bottom:9px}
.dl-row{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.dl-k{flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,.13)}
.dl-tag{font-family:var(--mono);font-size:8px;padding:2px 6px;border-radius:4px;border:1px solid}
.dl-tag.g{color:#7fd06f;border-color:rgba(34,197,94,.4);background:rgba(34,197,94,.1)}
.dl-tag.b{color:#7fb0f5;border-color:rgba(59,130,246,.4);background:rgba(59,130,246,.1)}
.dl-tag.a{color:#fbbf24;border-color:rgba(245,158,11,.4);background:rgba(245,158,11,.1)}
.dl-tag.r{color:#f0907f;border-color:rgba(239,68,68,.4);background:rgba(239,68,68,.1)}

/* 3. route assessment */
.rt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:13px}
.rtcol{padding:10px 11px;border-radius:9px;background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.1)}
.rt-ms{border-top:2px solid #3b82f6}.rt-gc{border-top:2px solid #22c55e}
.rt-pv{border-top:2px solid var(--gold)}
.rtcol-t{font-size:11.5px;font-weight:600;color:var(--cream);margin-bottom:8px}
.rtbar{height:5px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden;
  margin-bottom:8px}
.rtbar i{display:block;height:100%;border-radius:3px;transform-origin:left;transform:scaleX(0)}
.rt-ms .rtbar i{background:#3b82f6}.rt-gc .rtbar i{background:#22c55e}
.rt-pv .rtbar i{background:var(--gold)}
.rtnote{font-size:10px;line-height:1.45;color:var(--dim)}
.rt-crit{border-radius:9px;border:1px solid rgba(255,255,255,.08);padding:4px 11px}
.rtrow{display:flex;align-items:center;gap:8px;padding:6px 0;
  border-bottom:1px solid rgba(255,255,255,.05)}
.rtrow:last-child{border-bottom:none}
.rtk{flex:1;font-size:11px;color:var(--muted)}
.rtv{width:34px;height:6px;border-radius:3px}
.v-hi{background:#22c55e}.v-mid{background:#f59e0b}.v-lo{background:rgba(255,255,255,.15)}

/* 4. client feedback */
.fb-in{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.fbchip{width:38px;height:14px;border-radius:4px;border:1px solid}
.f-ok{background:rgba(34,197,94,.2);border-color:rgba(34,197,94,.5)}
.f-warn{background:rgba(245,158,11,.2);border-color:rgba(245,158,11,.5)}
.f-bad{background:rgba(239,68,68,.2);border-color:rgba(239,68,68,.5)}
.fb-bar{display:flex;height:9px;border-radius:5px;overflow:hidden;margin-bottom:15px;
  background:rgba(255,255,255,.06)}
.fb-seg{height:100%;transform-origin:left;transform:scaleX(0)}
.s-ok{background:#22c55e;flex:0 0 62%}
.s-warn{background:#f59e0b;flex:0 0 25%}
.s-bad{background:#ef4444;flex:0 0 13%}
.fb-theme{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.fb-t-k{flex:0 0 112px;font-size:11px;color:var(--muted)}
.fb-t-b{flex:1;height:6px;border-radius:3px;transform-origin:left;transform:scaleX(0)}
.b-a{background:#22c55e}.b-b{background:#3b82f6}.b-c{background:#f59e0b}
.fb-t-n{font-family:var(--mono);font-size:11px;color:var(--dim)}

/* 5. exposure review */
.lg-tiers{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.lg-tier{position:relative;display:flex;align-items:center;gap:10px;padding:7px 10px;
  border-radius:7px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02)}
.lg-t-k{flex:0 0 88px;font-size:11px;color:var(--muted)}
.lg-t-b{flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.1)}
.t-ban .lg-t-b{background:#ef4444}.t-high .lg-t-b{background:#f97316}
.t-ltd .lg-t-b{background:#eab308}.t-min .lg-t-b{background:#22c55e}
.lg-here{border-color:rgba(234,179,8,.6);background:rgba(234,179,8,.08)}
.lg-pin{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;
  color:#eab308;white-space:nowrap}
.lg-checks{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}
.lg-c{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--body)}
.lg-tick{width:13px;height:13px;border-radius:4px;flex:0 0 13px;position:relative;
  background:rgba(34,197,94,.18);border:1px solid #22c55e}
.lg-tick::after{content:"";position:absolute;left:3.5px;top:2px;width:4px;height:7px;
  border-right:1.5px solid #7fd06f;border-bottom:1.5px solid #7fd06f;transform:rotate(45deg)}
.lg-open .lg-tick{background:rgba(59,130,246,.15);border-color:#3b82f6}
.lg-open .lg-tick::after{border-color:#7fb0f5;opacity:.35}
@media (max-width:520px){.lg-checks{grid-template-columns:1fr}}

/* ============================================================
   Advice page visualisations — deliberately not application windows.
   Each topic gets its own diagram language: an untangling path, a
   constellation, a decision tree, a river, a pyramid, a matrix, a
   spreading network, a crossover chart.
   ============================================================ */
.viz{width:100%;height:auto;display:block}
.viz-t{font-family:var(--mono);font-size:12px;fill:var(--dim);text-anchor:middle;
  letter-spacing:.08em}
.vt-a{fill:#f0907f}.vt-b{fill:var(--dim)}.vt-ok{fill:#7fd06f}
.vt-warn{fill:#fbbf24}.vt-bad{fill:#f0907f}.vt-pin{fill:var(--gold)}

/* 1. untangling path */
.viz-proc .tangle{fill:none;stroke:#ef4444;stroke-width:2;stroke-linejoin:round;
  stroke-linecap:round;opacity:.85}
.viz-proc .tw{fill:#ef4444}
.viz-proc .straight{fill:none;stroke:#22c55e;stroke-width:2.6;stroke-linecap:round}
.viz-proc .sw{fill:#22c55e}

/* 2. constellation */
.viz-data{overflow:visible}
.viz-data .core-ring{fill:none;stroke:rgba(212,175,55,.5);stroke-width:1.5}
.viz-data .core-dot{fill:var(--gold)}
.viz-data .ol{stroke:rgba(255,255,255,.22);stroke-width:1.2}
.viz-data .nd{transform-box:view-box}
.viz-data .n-a{fill:#22c55e}.viz-data .n-b{fill:#3b82f6}.viz-data .n-c{fill:#8b5cf6}
.viz-data .n-d{fill:#f59e0b}.viz-data .n-e{fill:#06b6d4}.viz-data .n-f{fill:#f97316}

/* 3. decision tree */
.viz-tree .tnode rect{fill:rgba(255,255,255,.04);stroke:rgba(255,255,255,.22);stroke-width:1.3}
.viz-tree .tnode text{font-family:var(--sans);font-size:14px;fill:var(--body);
  text-anchor:middle;dominant-baseline:middle}
.viz-tree .t-ms rect{stroke:#3b82f6}.viz-tree .t-ms text{fill:#93c5fd}
.viz-tree .t-gc rect{stroke:#22c55e}.viz-tree .t-gc text{fill:#86efac}
.viz-tree .t-win rect{fill:rgba(212,175,55,.14);stroke:var(--gold);stroke-width:2}
.viz-tree .t-win text{fill:var(--gold-warm)}
.viz-tree .tlink{fill:none;stroke-width:1.6;stroke-linecap:round}
.viz-tree .k1{stroke:#3b82f6}.viz-tree .k2{stroke:var(--gold)}.viz-tree .k3{stroke:#22c55e}
.viz-tree .twalk{fill:var(--gold)}

/* 4. sentiment river */
.viz-river .riv{fill:none;stroke-linecap:round}
.viz-river .r-ok{stroke:rgba(34,197,94,.55);stroke-width:22}
.viz-river .r-warn{stroke:rgba(245,158,11,.55);stroke-width:13}
.viz-river .r-bad{stroke:rgba(239,68,68,.55);stroke-width:7}
.viz-river .src-dot{fill:var(--gold)}
.viz-river .p-ok,.viz-river .p-ok2{fill:#7fd06f}
.viz-river .p-warn{fill:#fbbf24}.viz-river .p-bad{fill:#f0907f}

/* 5. risk pyramid */
.viz-pyr .tier{stroke:rgba(0,0,0,.35);stroke-width:1}
.viz-pyr .ty-1{fill:rgba(239,68,68,.75)}
.viz-pyr .ty-2{fill:rgba(249,115,22,.7)}
.viz-pyr .ty-3{fill:rgba(234,179,8,.7)}
.viz-pyr .ty-4{fill:rgba(34,197,94,.65)}
.viz-pyr .pyr-l{font-family:var(--sans);font-size:13px;fill:#0a0b0f;font-weight:600;
  text-anchor:middle;dominant-baseline:middle}
.viz-pyr .pyr-pin path{stroke:var(--gold);stroke-width:1.4;fill:none}
.viz-pyr .pyr-pin text{font-family:var(--mono);font-size:11px;fill:var(--gold);
  text-anchor:middle;letter-spacing:.1em}

/* 6. permission matrix */
.viz-grid .gh{font-family:var(--mono);font-size:11px;fill:var(--dim);text-anchor:middle;
  letter-spacing:.12em}
.viz-grid .gr{font-family:var(--sans);font-size:13px;fill:var(--muted);text-anchor:end;
  dominant-baseline:middle}
.viz-grid .gc{stroke-width:1.3}
.viz-grid .ok{fill:rgba(34,197,94,.28);stroke:#22c55e}
.viz-grid .no{fill:rgba(239,68,68,.2);stroke:rgba(239,68,68,.7)}
.viz-grid .appr{fill:rgba(245,158,11,.26);stroke:#f59e0b}

/* 7. spreading network */
.viz-net .netlinks line{stroke:rgba(255,255,255,.16);stroke-width:1.2}
.viz-net .pn{fill:rgba(255,255,255,.12);stroke:rgba(255,255,255,.3);stroke-width:1.2}
.viz-net .w0{fill:rgba(212,175,55,.9);stroke:var(--gold)}

/* 8. cost / return crossover */
.viz-roi .axis{stroke:rgba(255,255,255,.16);stroke-width:1.2}
.viz-roi .roi-cost{fill:none;stroke:#f59e0b;stroke-width:2.4;stroke-linecap:round}
.viz-roi .roi-gain{fill:none;stroke:#22c55e;stroke-width:2.4;stroke-linecap:round}
.viz-roi .roi-fill{fill:rgba(34,197,94,.16)}
.viz-roi .roi-x{fill:var(--gold);stroke:#0a0b0f;stroke-width:2}

/* org chart (business process) */
.viz-org .oc-link{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1.4}
.viz-org .onode rect{fill:rgba(255,255,255,.04);stroke:rgba(255,255,255,.24);stroke-width:1.3}
.viz-org .onode text{font-family:var(--sans);font-size:13px;fill:var(--body);
  text-anchor:middle;dominant-baseline:middle}
.viz-org .o-root rect{fill:rgba(59,130,246,.14);stroke:#3b82f6;stroke-width:1.6}
.viz-org .o-root text{fill:#93c5fd}
.viz-org .o-slow rect{fill:rgba(239,68,68,.16);stroke:#ef4444;stroke-width:1.7}
.viz-org .o-slow text{fill:#f0907f}
.viz-org .o-7 rect{stroke:#22c55e}.viz-org .o-7 text{fill:#86efac}

/* drives and files (data management) */
.viz-drives .drive rect{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.28);stroke-width:1.4}
.viz-drives .drive line{stroke:rgba(255,255,255,.2);stroke-width:2;stroke-linecap:round}
.viz-drives .led{fill:rgba(255,255,255,.2)}
.viz-drives .d-1 .led{fill:#22c55e}
.viz-drives .d-2 .led{fill:#3b82f6}
.viz-drives .d-3 .led{fill:#f59e0b}
.viz-drives .file path{fill:rgba(255,255,255,.05);stroke-width:1.3}
.viz-drives .file .fold{fill:none}
.viz-drives .file line{stroke:rgba(255,255,255,.28);stroke-width:1.4;stroke-linecap:round}
.viz-drives .f-1 path{stroke:#22c55e}.viz-drives .f-2 path{stroke:#3b82f6}
.viz-drives .f-3 path{stroke:#8b5cf6}.viz-drives .f-4 path{stroke:#f59e0b}
.viz-drives .f-5 path{stroke:#06b6d4}.viz-drives .f-6 path{stroke:#f97316}

/* ---------- contact modal ---------- */
.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;
  justify-content:center;padding:24px}
.modal[hidden]{display:none}
.modal-scrim{position:absolute;inset:0;background:rgba(6,7,9,.74);backdrop-filter:blur(6px)}
.modal-panel{position:relative;z-index:1;width:100%;max-width:520px;max-height:92vh;
  overflow-y:auto;padding:38px 38px 34px;border-radius:18px;
  background:linear-gradient(180deg,#13151c,#0e1015);
  border:1px solid rgba(212,175,55,.28);
  box-shadow:0 40px 120px rgba(0,0,0,.7),0 0 100px rgba(212,175,55,.1)}
.modal-x{position:absolute;top:18px;right:18px;width:34px;height:34px;display:flex;
  align-items:center;justify-content:center;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);border-radius:9px;color:var(--body);
  font-size:20px;line-height:1;cursor:pointer;font-family:var(--sans)}
.modal-x:hover{background:rgba(255,255,255,.1);color:#fff}
.modal-title{font-family:var(--serif);font-weight:300;font-size:33px;line-height:1.08;
  margin:12px 0 10px;color:var(--cream-h)}
.modal-lede{font-size:14.5px;line-height:1.6;color:var(--muted);margin:0 0 24px}
.modal-sent{text-align:center;padding:26px 6px 14px}
.modal-sent img{width:56px;height:56px;margin:0 auto;
  filter:drop-shadow(0 0 20px rgba(212,175,55,.45))}
.modal-sent[hidden],.modal-form[hidden]{display:none}
#contact-form{display:flex;flex-direction:column;gap:16px}
.fld{display:flex;flex-direction:column;gap:7px}
.fld > span{font-size:12.5px;font-weight:500;color:var(--body)}
.fld input,.fld select,.fld textarea{font-family:var(--sans);font-size:14.5px;
  color:var(--cream);background:#0a0c11;border:1px solid rgba(255,255,255,.1);
  border-radius:9px;padding:11px 13px;outline:none;appearance:none;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--gold)}
.fld-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fld-note{font-size:12.5px;line-height:1.55;color:var(--dim);margin:2px 0 4px}
.fld-note a{color:var(--gold);text-decoration:none;
  border-bottom:1px solid rgba(212,175,55,.35)}
.form-err{font-size:13px;color:#f0907f;margin:0}
@media (max-width:520px){.fld-row{grid-template-columns:1fr}.modal-panel{padding:30px 22px 26px}}

/* ============================================================
   Knowhow page
   ============================================================ */
.peri{position:relative;border:1px dashed rgba(212,175,55,.38);border-radius:20px;
  padding:46px 26px 30px;background:rgba(212,175,55,.015)}
.peri-tag{position:absolute;top:-9px;left:26px;background:var(--ink);padding:0 11px;
  font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold)}
.pipe{display:grid;grid-template-columns:1fr 46px 1fr 46px 1fr;align-items:stretch}
.pipe-node{padding:26px 24px 28px;border-radius:14px;
  background:linear-gradient(180deg,var(--panel-a),var(--panel-b));
  border:1px solid rgba(255,255,255,.09)}
.pipe-node .pn-k{display:block;font-size:11px;letter-spacing:.24em;margin-bottom:14px}
.pipe-node .h-sub{font-size:21px;margin-bottom:10px}
.pipe-node p{font-size:14.5px;line-height:1.6;color:var(--muted);margin:0}
.pipe-link{position:relative;min-height:42px}
.pipe-link .pl-line{position:absolute;left:5px;right:5px;top:50%;height:1px;
  background:linear-gradient(90deg,rgba(212,175,55,.06),rgba(212,175,55,.5),
    rgba(212,175,55,.06))}
.pipe-link .pl-dot{position:absolute;top:50%;left:5px;width:6px;height:6px;
  margin-top:-3px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 10px rgba(212,175,55,.85)}
.noline{display:flex;flex-direction:column;align-items:center;margin-top:0}
.noline .nl-seg{width:1px;height:22px;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.28) 0 4px,transparent 4px 8px)}
.noline .nl-x{width:26px;height:26px;border-radius:50%;border:1px solid rgba(236,106,94,.6);
  color:#ec6a5e;display:flex;align-items:center;justify-content:center;font-size:13px;
  font-family:var(--mono);margin:4px 0}
.inet{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--dim);border:1px solid rgba(255,255,255,.1);padding:9px 16px;border-radius:9px;
  background:var(--ink);margin-top:4px}
.nl-note{font-size:13.5px;line-height:1.6;color:var(--dim);max-width:420px;text-align:center;
  margin:12px 0 0}
@media (max-width:860px){
  .pipe{grid-template-columns:1fr}
  .pipe-link{min-height:38px}
  .pipe-link .pl-line{left:50%;right:auto;top:7px;bottom:7px;height:auto;width:1px;
    background:linear-gradient(180deg,rgba(212,175,55,.06),rgba(212,175,55,.5),
      rgba(212,175,55,.06))}
  .pipe-link .pl-dot{left:50%;margin-left:-3px;top:7px;margin-top:0}
}

/* chat mock */
.chat{background:#0b0d12;border:1px solid rgba(255,255,255,.09);border-radius:16px;
  padding:22px 22px 20px;box-shadow:0 24px 70px rgba(0,0,0,.45)}
.cwho{font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--dim);margin:0 0 7px}
.cwho-b{margin-top:16px;color:var(--gold)}
.cbub{display:block;border-radius:12px;padding:13px 16px;font-size:14.5px;line-height:1.6}
.cbub-u{background:#151a28;border:1px solid rgba(59,130,246,.35);color:#dfe2ea}
.cbub-b{background:#10131a;border:1px solid rgba(255,255,255,.08);color:#c4c8d2}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;padding-top:11px;
  border-top:1px solid rgba(255,255,255,.08)}
.chip{padding:3px 8px;border-radius:5px;font-family:var(--mono);font-size:10.5px;
  font-weight:400;border:1px solid}
.chip:nth-child(1){color:#7fb0f5;border-color:rgba(59,130,246,.45);background:rgba(59,130,246,.12)}
.chip:nth-child(2){color:#7fd06f;border-color:rgba(34,197,94,.45);background:rgba(34,197,94,.12)}
.chip:nth-child(3){color:#c4b5fd;border-color:rgba(139,92,246,.45);background:rgba(139,92,246,.12)}
.chat-cap{font-size:12.5px;color:var(--dim);margin:14px 2px 0;line-height:1.5}

/* managed grid */
.managed{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:1px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.07);
  border-radius:16px;overflow:hidden}
.mcell{padding:32px 28px;background:var(--ink)}
.mcell h3{font-family:var(--sans);font-weight:600;font-size:17px;margin:0 0 9px;
  color:var(--cream)}
.mcell p{font-size:14.5px;line-height:1.6;color:#878b97;margin:0}

/* proof figures */
.proof{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:900px;margin:0 auto}
.proof-fig{text-align:center;padding:34px 24px;border-radius:18px;
  background:linear-gradient(180deg,var(--panel-a),var(--panel-b));
  border:1.5px solid var(--card-line)}
.proof-n{display:block;font-family:var(--serif);font-weight:300;
  font-size:clamp(40px,5.6vw,68px);line-height:1;color:var(--gold-warm)}
.proof-k{display:block;margin-top:14px;font-size:14px;line-height:1.5;color:var(--muted)}
.proof-note{max-width:640px;margin:34px auto 0;text-align:center;font-size:15.5px;
  line-height:1.65;color:var(--muted)}
@media (max-width:640px){.proof{grid-template-columns:1fr}}

/* retrieval schematic — the corpus, the search, the cited answer */
.corpus{display:grid;grid-template-columns:190px 1fr 250px;gap:26px;align-items:center;
  max-width:1080px;margin:0 auto}
.corpus-side{display:flex;flex-direction:column;gap:26px}
.cfig-n{display:block;font-family:var(--serif);font-weight:300;
  font-size:clamp(30px,3.4vw,44px);line-height:1;color:var(--gold-warm)}
.cfig-k{display:block;margin-top:8px;font-size:12.5px;line-height:1.45;color:var(--muted)}
/* The dot field is a repeating gradient, which is costly to rasterise. Contain
   paint here and give the sweep its own compositor layer, or every frame of the
   sweep repaints the whole field — which locked the tab while building this. */
.corpus-grid{position:relative;height:230px;border-radius:14px;overflow:hidden;
  contain:paint;border:1px solid rgba(255,255,255,.1);background-color:#0b0d12;
  background-image:radial-gradient(circle,rgba(255,255,255,.15) 1.1px,transparent 1.1px);
  background-size:11px 11px}
.scan{position:absolute;top:0;bottom:0;width:130px;pointer-events:none;
  will-change:transform;
  background:linear-gradient(90deg,transparent,rgba(212,175,55,.2),transparent)}
.hit{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 12px rgba(212,175,55,.95)}
.hit.h1{left:22%;top:14%}.hit.h2{left:38%;top:38%}.hit.h3{left:55%;top:24%}
.hit.h4{left:66%;top:62%}.hit.h5{left:81%;top:44%}
.corpus-cap{position:absolute;left:14px;bottom:11px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.corpus-out{position:relative;display:flex;align-items:center}
.corpus-link{position:absolute;left:-52px;top:50%;transform:translateY(-50%);
  width:52px;height:200px}
.corpus-link .cl{fill:none;stroke:rgba(212,175,55,.55);stroke-width:1.3}
.corpus-answer{width:100%;padding:18px 18px 16px;border-radius:14px;
  background:linear-gradient(180deg,var(--panel-a),var(--panel-b));
  border:1.5px solid var(--card-line)}
.ca-t{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:11px}
.ca-line{display:block;height:6px;border-radius:3px;background:rgba(255,255,255,.16);
  margin-bottom:7px;transform-origin:left}
.ca-line.short{width:62%}
.ca-cites{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px;padding-top:11px;
  border-top:1px solid rgba(255,255,255,.08)}
.ca-c{padding:2.5px 7px;border-radius:4px;font-family:var(--mono);font-size:9.5px;
  font-weight:400;border:1px solid}
.ca-c:nth-child(1){color:#7fb0f5;border-color:rgba(59,130,246,.45);background:rgba(59,130,246,.12)}
.ca-c:nth-child(2){color:#7fd06f;border-color:rgba(34,197,94,.45);background:rgba(34,197,94,.12)}
.ca-c:nth-child(3){color:#c4b5fd;border-color:rgba(139,92,246,.45);background:rgba(139,92,246,.12)}
.ca-time{margin-top:11px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}
@media (max-width:900px){
  .corpus{grid-template-columns:1fr;gap:30px}
  .corpus-side{flex-direction:row;gap:30px}
  .corpus-link{display:none}
}

/* product screenshot in a window frame */
.shot{margin:0 auto;max-width:980px}
.shot-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:#10131a;
  border:1px solid rgba(255,255,255,.11);border-bottom:none;border-radius:14px 14px 0 0}
.shot-bar .sd{width:11px;height:11px;border-radius:50%}
.shot-bar .sd.r{background:#ec6a5e}.shot-bar .sd.y{background:#f3bf4f}
.shot-bar .sd.g{background:#61c554}
.shot-name{margin-left:12px;font-family:var(--mono);font-size:11px;color:var(--dim)}
.shot img{width:100%;height:auto;display:block;border:1px solid rgba(255,255,255,.11);
  border-top:none;border-radius:0 0 14px 14px;
  box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 70px rgba(212,175,55,.06)}
.shot-cap{margin:18px auto 0;max-width:620px;text-align:center;font-size:13.5px;
  line-height:1.6;color:var(--dim)}

/* ---------- founder + office (About) ---------- */
/* The illustrations are gold on pure black. Screen blending drops the black
   into the page background for free — no alpha channel, which would have
   quadrupled the file size on artwork this densely textured. */
.founder{max-width:1000px;margin:0 auto;display:grid;
  grid-template-columns:0.78fr 1fr;gap:44px;align-items:center}
.founder-fig{margin:0}
.founder-fig img{width:100%;height:auto;display:block;mix-blend-mode:screen}
.founder-copy .h-section{margin:14px 0 22px;font-size:clamp(28px,3.6vw,44px)}
.founder-copy p{font-size:16.5px;line-height:1.72;color:#aeb2bc;margin:0 0 18px}
.founder-link{display:inline-flex;align-items:center;gap:10px;margin-top:8px;
  font-size:14.5px;font-weight:600;color:var(--gold);text-decoration:none}
.founder-link:hover .arw{transform:translateX(6px)}
/* Mirror of .founder — copy on the left, artwork on the right, and a narrower
   image column since the office sketch is landscape and reads at a smaller
   size than the portrait does. */
.whois{max-width:1000px;margin:0 auto;display:grid;
  grid-template-columns:1fr 0.62fr;gap:48px;align-items:center}
.whois-copy .h-section{margin-bottom:24px}
.whois-copy p{font-size:16.5px;line-height:1.72;color:#aeb2bc;margin:0 0 18px}
.whois-copy p:last-of-type{margin-bottom:0}
.whois-fig{margin:0}
.whois-fig img{width:100%;height:auto;display:block;mix-blend-mode:screen}

.office{margin:0}
.office img{width:100%;height:auto;display:block;mix-blend-mode:screen}
.office-cap{max-width:640px;margin:26px auto 0;text-align:center;font-size:14.5px;
  line-height:1.65;color:var(--muted)}

@media (max-width:820px){
  .founder{grid-template-columns:1fr;gap:28px}
  .founder-fig{max-width:340px;margin:0 auto}
  .whois{grid-template-columns:1fr;gap:28px}
  .whois-fig{max-width:420px;margin:0 auto}
}

/* ---------- legal pages ---------- */
.legal{position:relative;z-index:1;max-width:760px;margin:0 auto;padding:56px var(--pad) 110px}
.legal-head{max-width:760px;margin:0 auto;padding:84px var(--pad) 0;text-align:center}
.legal-head .h-display{font-size:clamp(36px,5.4vw,58px)}
.legal-head .mono-label{display:block;margin-bottom:20px}
.legal-date{font-family:var(--mono);font-size:12.5px;color:var(--dim);margin-top:20px}
.legal-sec{padding-top:40px;margin-top:40px;border-top:1px solid rgba(255,255,255,.08)}
.legal-sec:first-of-type{margin-top:0;border-top:none}
.legal h2{font-family:var(--serif);font-weight:400;font-size:25px;color:var(--cream-h);
  margin:0 0 18px}
.legal-n{color:var(--gold);font-family:var(--mono);font-size:16px;margin-right:12px}
.legal p{font-size:16px;line-height:1.72;color:#aeb2bc;margin:0 0 16px}
.legal p:last-child{margin-bottom:0}
.legal strong{color:#f0ecdf;font-weight:600}
.legal ul{list-style:none;margin:4px 0 0;padding:0}
.legal li{position:relative;font-size:16px;line-height:1.7;color:#aeb2bc;
  padding-left:22px;margin-bottom:11px}
.legal li::before{content:"";position:absolute;left:2px;top:11px;width:5px;height:5px;
  border-radius:50%;background:var(--gold)}
.legal a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(212,175,55,.3)}
.legal a:hover{border-bottom-color:var(--gold)}

/* The quiet alternative to the form, for people who would rather call. */
.modal-alt{margin:16px 0 0;text-align:center;font-size:13.5px;color:var(--dim)}
.modal-alt a{color:var(--gold);text-decoration:none;
  border-bottom:1px solid rgba(212,175,55,.3)}
.modal-alt a:hover{border-bottom-color:var(--gold)}

/* Spam honeypot. Off-screen rather than display:none, because a hidden
   field is skipped by most bots while an off-screen one still gets
   filled. The modal's focus trap skips it via its tabindex. */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ---------- running-systems band (Projects) ----------
   Deliberately quiet: a claim this strong is more credible stated plainly
   than dressed up. Sits between the hero and the first example, so it frames
   every diagram below it as a screenshot rather than an illustration. */
.live{padding:8px var(--pad) 0}
.live-note{position:relative;z-index:1;max-width:760px;margin:0 auto;
  text-align:center;padding:20px 26px;border-radius:13px;
  background:linear-gradient(180deg,var(--panel-a),var(--panel-b));
  /* The one green in the site's own chrome. It is borrowed from the status
     colour the dashboard mocks already use for "nominal", so it carries the
     meaning the sentence is making rather than introducing a new accent. */
  border:1px solid rgba(97,197,84,.42);
  box-shadow:0 0 40px rgba(97,197,84,.07);
  font-size:15.5px;line-height:1.6;color:var(--body)}
/* The band now sits where .page-hero + .section used to meet, so it has to
   carry that rule's tightened top padding forward. */
.live + .section{padding-top:52px}
@media (max-width:600px){.live-note{padding:18px 20px;font-size:14.5px}}