/* ==========================================================================
   INVICTUS LEGACY
   Design system: "Hyperstudio" — blueprint scratched into obsidian.
   Hierarchy by SCALE, TRACKING and TYPEFACE, never by weight.
   Elevation by 1px hairline only. No drop shadows anywhere.

   Typeface roles, fixed:
     Newsreader (serif)  — display, headings, figures. The document voice.
     Inter      (sans)   — body, UI, controls. The interface voice.
     JetBrains  (mono)   — labels, indices, metadata. The register voice.
   Fonts are self-hosted (assets/fonts) so the CSP needs no third-party
   origin and first paint never waits on Google.
   ========================================================================== */

/* ---------- FONTS ---------- */
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Newsreader';font-style:normal;font-weight:300 500;font-display:swap;
  src:url('../fonts/newsreader-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Newsreader';font-style:normal;font-weight:300 500;font-display:swap;
  src:url('../fonts/newsreader-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;
  src:url('../fonts/jbmono-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;
  src:url('../fonts/jbmono-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- TOKENS ---------- */
:root{
  /* surfaces */
  --carbon:#080808;
  --obsidian:#101010;
  --trench:#0c0c0d;   /* alternating band, one step under obsidian */
  --slate:#151517;    /* raised panel */
  --graphite:#212121;
  --card-slate:#3b3d45;
  --iron:#474747;

  /* text */
  --smoke:#9c9c9c;
  --ash:#c1c1c1;
  --chalk:#f3f3f3;
  --signal:#ffffff;

  /* accents — strictly scoped */
  /* Cyan since 8 Sep 2026 (was brass/gold). Names kept — 25 call sites. */
  --gold:#596b6e;     /* hairlines, outlined icons, rules */
  --brass:#00b4d8;    /* the only accent allowed to carry text — 7.7:1 on obsidian */
  --pulse:#98ff38;    /* live / status dots only */

  /* type */
  --font:'Inter','Aeonik','Satoshi','General Sans',system-ui,-apple-system,sans-serif;
  --serif:'Newsreader','Iowan Old Style','Times New Roman',Georgia,serif;
  --mono:'JetBrains Mono','Input','IBM Plex Mono','Space Mono',ui-monospace,monospace;

  --fs-caption:13px;
  --fs-body:16px;
  --fs-xs:18px;
  --fs-sub:21px;
  --fs-sm:23px;
  --fs-h:clamp(27px,3.6vw,37px);
  --fs-lg:clamp(34px,5.2vw,49px);
  --fs-display:clamp(41px,7.8vw,72px);

  /* space — base unit 4px, complete ramp, no gaps in the scale */
  --s1:4px;   --s2:8px;   --s3:12px;  --s4:16px;
  --s5:20px;  --s6:24px;  --s7:32px;  --s8:40px;
  --s9:48px;  --s10:56px; --s11:64px; --s12:80px;
  --s13:96px; --s14:120px;

  /* fluid gaps — the ONLY responsive spacing ramps in the stylesheet.
     Every one-off clamp() collapses into one of these. Adding a new
     clamp() for spacing is how the rhythm drifted the first time. */
  --gap-xs:clamp(20px,3vw,32px);    /* inside cards, tight stacks   */
  --gap-sm:clamp(28px,4vw,48px);    /* between related blocks       */
  --gap-md:clamp(40px,6vw,72px);    /* between subsections          */
  --gap-lg:clamp(56px,8vw,96px);    /* section head -> section body */
  --sec:clamp(88px,12vw,152px);     /* section padding-block        */

  --shell:1200px;
  --gut:clamp(20px,5vw,40px);

  /* radius */
  --r-tag:4px; --r-card:8px; --r-icon:99px; --r-pill:9999px;

  /* motion */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-in:cubic-bezier(.5,0,.75,0);
  --t-fast:180ms;
  --t-base:260ms;
}

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--s12)}
body{
  margin:0;
  background:var(--obsidian);
  color:var(--chalk);
  font-family:var(--font);
  font-weight:400;
  font-size:var(--fs-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,figure,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--chalk);color:var(--obsidian)}

:focus-visible{outline:2px solid var(--chalk);outline-offset:3px;border-radius:2px}

.skip{
  position:fixed;top:-100px;left:var(--gut);z-index:2000;
  background:var(--signal);color:var(--obsidian);
  padding:var(--s3) var(--s6);border-radius:var(--r-pill);
  transition:top var(--t-fast) var(--e-out);
}
.skip:focus{top:16px}

/* Visible to assistive tech only. Used where a block needs a heading to keep
   the document outline intact but the page does not need to show one. */
.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ---------- LAYOUT ---------- */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut);position:relative;z-index:2}
/* ---------- SECTION RHYTHM ----------
   One rule governs the space between every section on every page.
   Nothing else in the stylesheet may set padding-block on .sec. */
.sec{padding-block:var(--sec);position:relative;border-top:1px solid var(--graphite)}
.sec--flush{border-top:none}
.sec--cta{background:var(--carbon)}
.sec--tight{padding-block:var(--gap-md)}
.sec + .sec{border-top:1px solid var(--graphite)}
.sec:first-of-type{border-top:none}

/* ---------- TYPE ----------
   Serif carries every display-scale line and every figure; sans carries
   everything a reader interacts with. The split is the hierarchy — it is
   why nothing here needs a bold weight to feel important. */
.display{
  font-family:var(--serif);
  font-size:var(--fs-display);line-height:1.02;letter-spacing:-.018em;
  font-weight:400;margin:0;font-variation-settings:'opsz' 60;
}
.h-lg{font-family:var(--serif);font-size:var(--fs-lg);line-height:1.08;letter-spacing:-.014em;font-weight:400;font-variation-settings:'opsz' 42}
.h{font-family:var(--serif);font-size:var(--fs-h);line-height:1.12;letter-spacing:-.01em;font-weight:400;font-variation-settings:'opsz' 32}
.h-sm{font-size:var(--fs-sm);line-height:1.18;font-weight:400;letter-spacing:-.008em}
.h-xs{font-size:var(--fs-xs);line-height:1.31;font-weight:400;letter-spacing:-.004em}
.dim{color:var(--smoke)}
.sub{color:var(--smoke);font-size:var(--fs-sub);line-height:1.5;max-width:62ch;letter-spacing:-.002em}
.lede{color:var(--ash);font-size:var(--fs-sub);line-height:1.5;max-width:60ch;letter-spacing:-.002em}
.sep{color:var(--iron)}

.mono{
  font-family:var(--mono);font-size:var(--fs-caption);
  letter-spacing:.02em;text-transform:uppercase;color:var(--smoke);
}
.mono.sm{font-size:12px;text-transform:none;letter-spacing:0}
.mono--eyebrow{margin-block:var(--s6) var(--s5)}

/* Section index. The hairline that trails the number is what makes a page
   read as a numbered document rather than a stack of unrelated blocks. */
.mono--num{
  color:var(--smoke);margin-bottom:var(--s5);
  display:flex;align-items:center;gap:var(--s4);
}
.mono--num::after{
  content:'';flex:1;height:1px;max-width:180px;
  background:linear-gradient(90deg,var(--graphite),transparent);
}

.sechead{max-width:74ch;margin-bottom:var(--gap-lg)}
.sechead .h-lg{margin-bottom:var(--s5)}
.sechead .sub{margin-top:var(--s5)}

/* ---------- PAGE HEAD ----------
   Top padding clears the 72px fixed nav before the fluid ramp starts,
   so the eyebrow never sits tight under the bar on short viewports. */
.pagehead{padding-block:calc(72px + var(--gap-sm)) var(--gap-md)}
.pagehead .h-lg{margin-block:var(--s5)}
.pagehead .sub{max-width:66ch}

/* ---------- CTA BAND ---------- */
.ctaband__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--gap-sm);flex-wrap:wrap}
.ctaband .sub{margin-top:var(--s4)}
@media (max-width:760px){.ctaband__inner{flex-direction:column;align-items:flex-start}}

.note{
  margin-top:var(--s8);padding-top:var(--s5);border-top:1px solid var(--graphite);
  color:var(--smoke);font-size:14px;line-height:1.7;max-width:78ch;
}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  border:1px solid transparent;cursor:pointer;
  font-size:14px;letter-spacing:.04em;text-transform:uppercase;
  transition:background var(--t-fast) var(--e-out),color var(--t-fast) var(--e-out),
             border-color var(--t-fast) var(--e-out),transform var(--t-fast) var(--e-out);
  touch-action:manipulation;
}
.btn--pill{
  background:var(--signal);color:var(--obsidian);
  border-radius:var(--r-pill);padding:var(--s3) var(--s6);
}
.btn--pill:hover{background:var(--ash)}
.btn--pill:active{transform:scale(.975)}
.btn--ghost{
  background:transparent;color:var(--chalk);
  border-color:rgba(255,255,255,.5);border-radius:var(--r-card);padding:var(--s2) var(--s5);
}
.btn--ghost:hover{border-color:var(--signal);background:rgba(255,255,255,.05)}
.btn--ghost:active{transform:scale(.975)}
.btn--lg{padding:var(--s4) var(--s7);min-height:48px}
.btn--block{width:100%}
.btn svg{transition:transform var(--t-base) var(--e-out)}
.btn:hover svg{transform:translate(2px,-2px)}

/* ---------- BADGE / TAG ---------- */
.badge{
  display:inline-flex;align-items:center;gap:var(--s2);
  background:#1a1a1a;border:1px solid var(--graphite);border-radius:var(--r-tag);
  padding:var(--s2) var(--s3);font-family:var(--mono);font-size:12px;color:var(--smoke);
  letter-spacing:.02em;text-transform:uppercase;
}
.tag{
  display:inline-flex;align-items:center;gap:var(--s2);
  border:1px solid var(--graphite);border-radius:var(--r-tag);
  padding:var(--s1) var(--s3);font-family:var(--mono);font-size:12px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--smoke);
}
.tag--pulse{color:var(--ash)}
.tag--gold{color:var(--ash);border-color:#2a2620}

/* ---------- ICONS ---------- */
.icon{width:32px;height:32px;color:var(--gold);stroke-width:1.5}

/* ---------- NAV ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:900;transition:background var(--t-base) var(--e-out)}
.nav.is-stuck{background:rgba(16,16,16,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.nav__rule{height:1px;background:var(--graphite);opacity:0;transition:opacity var(--t-base) var(--e-out)}
.nav.is-stuck .nav__rule{opacity:1}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s6);height:72px}

.brand{display:flex;align-items:center;gap:var(--s2);font-size:15px;letter-spacing:-.01em;padding-block:var(--s2)}
.brand__mark{color:var(--chalk);flex:none;transition:transform 600ms var(--e-out)}
.brand:hover .brand__mark{transform:rotate(180deg)}
.brand__thin{color:var(--smoke)}

.nav__links{display:flex;gap:var(--s8)}
.nav__links a{
  font-size:14px;color:var(--smoke);position:relative;padding-block:var(--s3);
  transition:color var(--t-fast) var(--e-out);
}
.nav__links a::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--chalk);
  transform:scaleX(0);transform-origin:right;transition:transform var(--t-base) var(--e-out);
}
.nav__links a:hover,.nav__links a.is-active,.nav__links a.is-current{color:var(--chalk)}
.nav__links a:hover::after,.nav__links a.is-active::after,.nav__links a.is-current::after{transform:scaleX(1);transform-origin:left}
.mobilemenu a.is-current{color:var(--chalk)}

.nav__right{display:flex;align-items:center;gap:var(--s4)}
.langtoggle{display:flex;border:1px solid var(--graphite);border-radius:var(--r-pill);padding:var(--s1)}
/* 44px minimum — this control stays visible at every breakpoint, so it is a
   real touch target on phones, not a desktop-only affordance. */
.langtoggle__btn{
  display:flex;align-items:center;min-height:44px;
  background:none;border:0;cursor:pointer;border-radius:var(--r-pill);
  padding:0 var(--s3);font-family:var(--mono);font-size:12px;letter-spacing:.05em;
  color:var(--smoke);transition:color var(--t-fast) var(--e-out),background var(--t-fast) var(--e-out);
}
.langtoggle__btn.is-on{background:var(--graphite);color:var(--chalk)}
.langtoggle__btn:hover{color:var(--ash)}
.nav__cta{font-size:12px;padding:var(--s2) var(--s5)}

.burger{display:none;background:none;border:0;cursor:pointer;width:44px;height:44px;padding:var(--s2);flex-direction:column;justify-content:center;gap:var(--s1)}
.burger span{display:block;height:1px;width:100%;background:var(--chalk);transition:transform var(--t-base) var(--e-out),opacity var(--t-fast)}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

.mobilemenu{
  position:fixed;inset:72px 0 auto;z-index:890;background:var(--carbon);
  border-top:1px solid var(--graphite);border-bottom:1px solid var(--graphite);
  padding:var(--s5) var(--gut) var(--s8);display:flex;flex-direction:column;
}
.mobilemenu[hidden]{display:none}
.mobilemenu a{padding:var(--s4) 0;border-bottom:1px solid var(--graphite);font-size:var(--fs-sub);color:var(--ash)}
.mobilemenu__cta{color:var(--chalk)!important;border-bottom:0!important;margin-top:var(--s5)}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding-block:var(--s14) var(--s10);overflow:hidden}

.hero__inner{max-width:1000px}
.hero .display{margin-bottom:var(--s8)}

.hero__claim{display:flex;align-items:center;gap:var(--s5);margin-bottom:var(--s8);flex-wrap:wrap}
.hero__claimrule{height:1px;width:56px;background:linear-gradient(90deg,transparent,var(--brass));flex:none}
.hero__claimtext{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap;font-size:var(--fs-sub);color:var(--smoke)}
.hero__amount{
  font-family:var(--serif);font-size:clamp(32px,5vw,50px);letter-spacing:-.016em;
  color:var(--chalk);line-height:1;font-variant-numeric:tabular-nums;
}
.hero__amount .cur{font-size:.5em;color:var(--brass);margin-right:var(--s1);letter-spacing:0}
.hero__approved{color:var(--chalk)}

.hero__cta{display:flex;gap:var(--s3);flex-wrap:wrap;margin-block:var(--s8) var(--gap-md)}

.hero__cred{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--graphite)}
.hero__cred li{
  padding:var(--s5) var(--s5) 0 0;font-size:var(--fs-caption);color:var(--smoke);
  line-height:1.5;border-right:1px solid var(--graphite);padding-right:var(--s5);
}
.hero__cred li:first-child{color:var(--ash)}
.hero__cred li:last-child{border-right:0}

.scrollhint{position:absolute;bottom:28px;right:var(--gut);z-index:3;display:flex;align-items:center;gap:var(--s3)}
.scrollhint .mono{font-size:10px;letter-spacing:.18em}
.scrollhint__line{width:1px;height:40px;background:linear-gradient(var(--iron),transparent);position:relative;overflow:hidden}
.scrollhint__line::after{content:'';position:absolute;inset:0;background:var(--chalk);animation:drop 2.2s var(--e-out) infinite}
@keyframes drop{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ---------- TICKER ---------- */
.ticker{border-block:1px solid var(--graphite);overflow:hidden;padding-block:var(--s4);background:var(--carbon);position:relative;z-index:2}
.ticker__track{display:flex;width:max-content;animation:slide 46s linear infinite}
.ticker__set{display:flex;align-items:center;flex:none}
.ticker__set span{
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--smoke);white-space:nowrap;
}
.ticker__set span:first-child{color:var(--chalk)}
.ticker__set i{display:block;width:5px;height:5px;border-radius:var(--r-icon);background:var(--iron);margin-inline:var(--s7);flex:none}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- GRID / CARDS ---------- */
.grid{display:grid;gap:0}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.rulegrid{border-top:1px solid var(--graphite)}
.rcard{
  display:block;color:inherit;
  padding:var(--s8) var(--s6) var(--s8) 0;
  border-right:1px solid var(--graphite);position:relative;
  transition:background var(--t-base) var(--e-out);
}
/* The brass rule that draws in along the top edge is the whole hover
   affordance for a linked card — no shadow, no lift, no colour shift. */
.rcard::after{
  content:'';position:absolute;left:0;top:-1px;height:1px;width:100%;
  background:var(--brass);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-base) var(--e-out);
}
a.rcard:hover::after,a.rcard:focus-visible::after{transform:scaleX(1)}
a.rcard:hover .icon,a.rcard:focus-visible .icon{color:var(--brass)}
a.rcard:hover .rcard__go,a.rcard:focus-visible .rcard__go{opacity:1;transform:none}
.rcard:first-child{padding-left:0}
.rcard:not(:first-child){padding-left:var(--s6)}
.rcard:last-child{border-right:0}
.rcard__num{position:absolute;top:var(--s8);right:var(--s6);color:var(--smoke);font-size:12px}
.rcard:first-child .rcard__num{right:var(--s6)}
.rcard:last-child .rcard__num{right:0}
.rcard .icon{margin-bottom:var(--s6);transition:color var(--t-base) var(--e-out)}
.rcard .h-sm{margin-bottom:var(--s3);max-width:22ch}
.rcard p{color:var(--smoke);font-size:16px;line-height:1.6;max-width:34ch}
.rcard__go{
  display:inline-flex;align-items:center;gap:var(--s2);margin-top:var(--s5);
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--brass);opacity:0;transform:translateX(-4px);
  transition:opacity var(--t-base) var(--e-out),transform var(--t-base) var(--e-out);
}
/* Touch and keyboard-only users never fire :hover, so the cue is always on
   where hover does not exist. */
@media (hover:none){.rcard__go{opacity:1;transform:none}}

.pullquote{display:flex;gap:var(--s6);margin-top:var(--gap-lg);align-items:flex-start}
.pullquote__bar{width:1px;background:linear-gradient(var(--brass),transparent);align-self:stretch;flex:none;min-height:60px}
.pullquote p{font-family:var(--serif);font-size:var(--fs-h);line-height:1.26;letter-spacing:-.012em;max-width:26ch;color:var(--chalk)}

/* ---------- MODEL ROWS (Present / Prepare / Progress) ----------
   A three-row definition table, not a card grid. The stage name takes the
   serif at display scale so the three stages read as one ordered sequence
   down the page; the index column keeps the document register. */
.model{border-top:1px solid var(--graphite)}
.model__row{
  display:grid;grid-template-columns:56px minmax(0,.72fr) minmax(0,1.28fr);
  gap:var(--s6);align-items:start;
  padding-block:var(--gap-xs);border-bottom:1px solid var(--graphite);
  position:relative;transition:background var(--t-base) var(--e-out);
}
.model__idx{color:var(--smoke);font-size:12px;padding-top:.55em}
.model__name{margin:0;color:var(--chalk)}
.model__body{color:var(--smoke);font-size:16px;line-height:1.62;max-width:52ch}

/* ---------- WEDGE SPLIT ----------
   The claim stays put on the left while the three symptoms scroll past it.
   Sticky is opt-in per viewport: it is only useful where the right column is
   taller than the left, which is not true once the two stack. */
.wedge{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:var(--gap-md)}
.wedge__aside .pullquote{margin-top:0;position:sticky;top:calc(72px + var(--s8))}
.wedge__list{border-top:1px solid var(--graphite)}
.sym{
  padding-block:var(--gap-xs);border-bottom:1px solid var(--graphite);
}
.sym:last-child{border-bottom:0}
.sym h3{margin-bottom:var(--s3)}
.sym p{color:var(--smoke);font-size:16px;line-height:1.62;max-width:52ch}

/* ---------- LEAD + NOTES (proof teaser) ----------
   One named engagement carries the section; the redaction rule and the
   process qualify it. Equal cards made all three look like the same claim,
   which is the opposite of what the evidence policy says (Canon D-31). */
/* align-items:start keeps the lead column at its own height instead of
   stretching it to match the two notes and leaving a well of dead space
   under it. The divider therefore hangs off the taller column. */
.lead{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,.88fr);gap:0;
  align-items:start;border-top:1px solid var(--graphite)}
.lead__main{
  display:block;color:inherit;position:relative;
  padding:var(--gap-xs) var(--gap-sm) var(--gap-sm) 0;
  transition:background var(--t-base) var(--e-out);
}
.lead__side{display:flex;flex-direction:column;align-self:stretch;border-left:1px solid var(--graphite)}
.lead__note{
  display:block;color:inherit;position:relative;flex:1;
  padding:var(--gap-xs) 0 var(--gap-xs) var(--gap-sm);
  border-bottom:1px solid var(--graphite);
  transition:background var(--t-base) var(--e-out);
}
.lead__note:last-child{border-bottom:0}
.lead__main .h{margin-bottom:var(--s4);max-width:16ch}
.lead__body{color:var(--ash);font-size:var(--fs-xs);line-height:1.55;max-width:40ch}
.lead__note h3{margin-bottom:var(--s3)}
.lead__note p{color:var(--smoke);font-size:15px;line-height:1.6;max-width:40ch}

/* The brass rule that draws in along the top edge is the same hover
   affordance .rcard uses — one idiom for a linked block, everywhere. */
a.lead__main::after,a.lead__note::after{
  content:'';position:absolute;left:0;top:-1px;height:1px;width:100%;
  background:var(--brass);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-base) var(--e-out);
}
a.lead__main:hover::after,a.lead__main:focus-visible::after,
a.lead__note:hover::after,a.lead__note:focus-visible::after{transform:scaleX(1)}
a.lead__main:hover .rcard__go,a.lead__main:focus-visible .rcard__go,
a.lead__note:hover .rcard__go,a.lead__note:focus-visible .rcard__go{opacity:1;transform:none}
/* Touch and keyboard-only users never fire :hover, so the cue is always on
   where hover does not exist. */
@media (hover:none){.lead .rcard__go{opacity:1;transform:none}}

/* ---------- CASE STUDIES ---------- */
.case{border-top:1px solid var(--graphite);padding-top:var(--s6);margin-bottom:var(--gap-lg)}
.case:last-child{margin-bottom:0}
.case__meta{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);margin-bottom:var(--s8);flex-wrap:wrap}
.case__meta .mono{font-size:12px}
.case__body{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--gap-md);align-items:start}
.case__text .h{margin-bottom:var(--s2);max-width:20ch}
.case__kicker{font-size:12px;color:var(--smoke);letter-spacing:.06em;margin-bottom:var(--s6)}

.disclosure{
  border:1px solid var(--graphite);border-left:1px solid var(--gold);border-radius:var(--r-tag);
  padding:var(--s4) var(--s5);color:var(--smoke);font-size:15px;line-height:1.6;margin-bottom:var(--s6);
}

.deflist{display:flex;flex-direction:column;gap:var(--s5)}
.deflist>div{display:grid;grid-template-columns:112px 1fr;gap:var(--s5);padding-bottom:var(--s5);border-bottom:1px solid var(--graphite)}
.deflist--wide>div{grid-template-columns:160px 1fr}
.deflist>div:last-child{border-bottom:0;padding-bottom:0}
.deflist dt{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--smoke);padding-top:var(--s1)}
.deflist dd{color:var(--ash);font-size:16px;line-height:1.6}
.dd--hit strong{font-weight:400;color:var(--chalk);font-size:var(--fs-sub)}

.chips{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s6)}
.chips li{
  border:1px solid var(--graphite);border-radius:var(--r-tag);padding:var(--s2) var(--s3);
  font-family:var(--mono);font-size:12px;color:var(--smoke);text-transform:uppercase;letter-spacing:.03em;
}

/* case visuals — generative, no photography */
.case__vis{position:relative;min-height:340px;display:flex;align-items:center;justify-content:center}

.spread{position:relative;width:100%;max-width:400px;height:330px;perspective:1400px}
.page{
  position:absolute;width:60%;height:100%;background:var(--carbon);
  border:1px solid var(--graphite);border-radius:var(--r-tag);
  padding:var(--s5) var(--s4);display:flex;flex-direction:column;gap:var(--s2);
  transition:transform 700ms var(--e-out);
}
.page--a{left:0;top:0;transform:rotateY(9deg) rotateZ(-2deg)}
.page--b{right:0;top:22px;transform:rotateY(-9deg) rotateZ(2deg);border-color:var(--card-slate)}
.page--photo{padding:0;overflow:hidden}
.page--photo img{width:100%;height:100%;object-fit:cover;display:block}
.case:hover .page--a{transform:rotateY(6deg) rotateZ(-3.5deg) translateY(-8px)}
.case:hover .page--b{transform:rotateY(-6deg) rotateZ(3.5deg) translateY(-4px)}
.page__conf{font-size:7px;letter-spacing:.18em;color:var(--iron);margin-bottom:var(--s1)}
.ln{height:5px;background:var(--graphite);border-radius:2px}
.ln.redact{background:var(--iron);position:relative;overflow:hidden}
.ln.redact::after{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,transparent 0 3px,rgba(0,0,0,.5) 3px 6px);
}
.w40{width:40%}.w45{width:45%}.w50{width:50%}.w60{width:60%}.w65{width:65%}
.w70{width:70%}.w72{width:72%}.w78{width:78%}.w80{width:80%}.w85{width:85%}.w90{width:90%}
.bars{display:flex;align-items:flex-end;gap:var(--s1);height:74px;margin-block:var(--s2)}
.bars i{flex:1;height:var(--h);background:var(--iron);border-radius:1px;transform-origin:bottom;animation:grow 900ms var(--e-out) backwards}
.bars i:nth-child(1){animation-delay:.05s}.bars i:nth-child(2){animation-delay:.1s}
.bars i:nth-child(3){animation-delay:.15s}.bars i:nth-child(4){animation-delay:.2s}
.bars i:nth-child(5){animation-delay:.25s}.bars i:nth-child(6){animation-delay:.3s;background:var(--card-slate)}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}

.browser{width:100%;max-width:430px;border:1px solid var(--graphite);border-radius:var(--r-card);overflow:hidden;background:var(--carbon)}
.browser__bar{display:flex;align-items:center;gap:var(--s1);padding:var(--s3);border-bottom:1px solid var(--graphite)}
.browser__bar i{width:6px;height:6px;border-radius:var(--r-icon);background:var(--iron)}
.browser__bar .mono{margin-left:var(--s3);font-size:9px;text-transform:none;letter-spacing:0;color:var(--iron)}
.browser__body{padding:var(--s4);display:flex;flex-direction:column;gap:var(--s4)}
.bw-nav{display:flex;align-items:center;gap:var(--s2)}
.dotmark{width:11px;height:11px;border:1px solid var(--gold);border-radius:2px;transform:rotate(45deg);flex:none}
.bw-nav i{height:4px;width:26px;background:var(--graphite);border-radius:2px}
.bw-nav i.pill{margin-left:auto;width:44px;height:14px;border-radius:var(--r-pill);background:var(--card-slate)}
.bw-hero{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s5) 0 var(--s4);border-bottom:1px solid var(--graphite)}
.bw-hero .ln.lg{height:12px}
.bw-hero .ln.pill{width:82px;height:20px;border-radius:var(--r-pill);background:var(--chalk);margin-top:var(--s2)}
.bw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
.bw-grid i{height:52px;border:1px solid var(--graphite);border-radius:var(--r-tag)}

/* ---------- SERVICES LADDER ---------- */
/* The row hover-wash bleeds 24px past the text column on purpose; clip it here
   so that bleed can never become horizontal page scroll on narrow viewports. */
.ladder{border-top:1px solid var(--graphite);overflow-x:clip}
.tier{
  display:grid;grid-template-columns:1fr auto;gap:var(--s8);align-items:start;
  padding:var(--s8) 0;border-bottom:1px solid var(--graphite);position:relative;
  transition:background var(--t-base) var(--e-out);
}
.tier::before{
  /* Bleed scales with the gutter so it can never exceed the shell padding. */
  content:'';position:absolute;inset:0 calc(var(--gut) * -.6);background:rgba(255,255,255,.018);
  opacity:0;transition:opacity var(--t-base) var(--e-out);pointer-events:none;border-radius:var(--r-card);
}
.tier:hover::before{opacity:1}
.tier--star{border-left:1px solid var(--gold);padding-left:var(--s6);padding-top:calc(var(--s8) + var(--s7))}
.tier__flag{
  position:absolute;top:var(--s5);right:0;font-size:11px;letter-spacing:.12em;color:var(--chalk);
}
.tier__idx{display:block;font-size:12px;color:var(--smoke);margin-bottom:var(--s3)}
.tier__l{max-width:56ch}
.tier__l .h-sm{margin-bottom:var(--s2)}
.tier__l p{color:var(--smoke);font-size:16px;line-height:1.62}
.tier__r{text-align:right;min-width:190px}
.price{font-family:var(--serif);font-size:var(--fs-h);line-height:1;letter-spacing:-.014em;color:var(--chalk);font-variant-numeric:tabular-nums}
.price--big{font-size:clamp(34px,4.4vw,48px);letter-spacing:-.018em}
.price--sm{font-size:var(--fs-sub);color:var(--ash);margin-top:var(--s1)}
.price .cur{font-size:.5em;color:var(--brass);margin-right:var(--s1);letter-spacing:0}
.price__plus{font-size:12px;font-family:var(--mono);color:var(--smoke);text-transform:uppercase;letter-spacing:.05em}
.per{font-size:.6em;color:var(--smoke)}
.tier__days{margin-top:var(--s2);font-size:12px;color:var(--smoke)}
.minilist{margin-top:var(--s4);display:flex;flex-direction:column;gap:var(--s1)}
.minilist li{position:relative;padding-left:var(--s4);color:var(--smoke);font-size:15px}
.minilist li::before{content:'';position:absolute;left:0;top:9px;width:8px;height:1px;background:var(--gold)}

.addons{margin-top:var(--s8)}
.addons__label{margin-bottom:var(--s5);color:var(--smoke)}
.addons ul{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--graphite);border:1px solid var(--graphite);border-radius:var(--r-card);overflow:hidden}
.addons li{background:var(--obsidian);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s2);transition:background var(--t-base) var(--e-out)}
.addons li:hover{background:var(--slate)}
.addons li span{color:var(--smoke);font-size:15px;line-height:1.4}
.addons li b{font-family:var(--serif);font-weight:400;font-size:var(--fs-sm);color:var(--chalk);font-variant-numeric:tabular-nums;letter-spacing:-.012em}

/* ---------- INTEGRITY ---------- */
.integrity{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--gap-md);padding-top:var(--sec);border-top:1px solid var(--graphite)}
.integrity__l .h-lg{max-width:16ch}
.integrity__r p{color:var(--ash);margin-bottom:var(--s5);max-width:58ch;line-height:1.65}
.int__why{color:var(--smoke)!important}
.int__why em{font-style:normal;color:var(--chalk)}
.int__split{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--graphite);border:1px solid var(--graphite);border-radius:var(--r-card);overflow:hidden;margin-top:var(--s6)}
.int__split>div{background:var(--obsidian);padding:var(--s6);display:flex;gap:var(--s4)}
.int__split span{font-size:14px;color:var(--pulse);flex:none;line-height:1.5}
.int__split .is-no span{color:var(--smoke)}
.int__split p{margin:0!important;font-size:15px;color:var(--smoke);line-height:1.55}

/* ---------- PROCESS ---------- */
.steps{position:relative;padding-left:var(--s5)}
.steps::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:1px;background:var(--graphite)}
.steps::after{
  content:'';position:absolute;left:0;top:6px;width:1px;background:var(--gold);
  height:var(--draw,0%);transition:height 1.2s var(--e-out);
}
.step{display:grid;grid-template-columns:64px 1fr;gap:var(--s5);padding:var(--s5) 0 var(--s5) var(--s6);position:relative}
.step::before{content:'';position:absolute;left:calc(var(--s5) * -1 - 3px);top:calc(var(--s5) + 8px);width:7px;height:7px;border-radius:var(--r-icon);background:var(--obsidian);border:1px solid var(--iron)}
.step--gate::before{background:var(--gold);border-color:var(--gold)}
.step__n{font-size:12px;color:var(--smoke);padding-top:var(--s1)}
.step h3{margin-bottom:var(--s1)}
.step p{color:var(--smoke);font-size:16px;line-height:1.6;max-width:64ch}
.gate{
  font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  color:var(--ash);border:1px solid #2a2620;border-radius:var(--r-tag);
  padding:var(--s1) var(--s2);vertical-align:middle;margin-left:var(--s1);
}

.gatebox{margin-top:var(--gap-lg);border:1px solid var(--graphite);border-radius:var(--r-card);overflow:hidden}
.gatebox__head{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);padding:var(--gap-sm);border-bottom:1px solid var(--graphite)}
.gatebox__head .mono{color:var(--smoke);margin-bottom:var(--s2)}
.gatebox__quote{color:var(--smoke);font-size:var(--fs-xs);line-height:1.5;font-style:italic;align-self:center;max-width:44ch}
.gatebox__cols{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--graphite)}
.gatebox__cols>div{background:var(--obsidian);padding:var(--gap-xs)}
.col__label{color:var(--smoke);margin-bottom:var(--s4);font-size:12px}
.gatebox__cols .col__label:not(:first-child){margin-top:var(--s8)}
.checks{display:flex;flex-direction:column;gap:var(--s3)}
.checks li{position:relative;padding-left:var(--s6);color:var(--smoke);font-size:15px;line-height:1.5}
.checks li::before{
  content:'';position:absolute;left:0;top:2px;width:13px;height:13px;
  border:1px solid var(--iron);border-radius:2px;
}
.checks li::after{
  content:'';position:absolute;left:3.5px;top:6px;width:6px;height:3px;
  border-left:1px solid var(--gold);border-bottom:1px solid var(--gold);
  transform:rotate(-45deg);
}
/* checks--no: same checklist shape, but marking what was withheld rather
   than what is included — the tick is muted instead of gold. */
.checks--no li::before{border-color:var(--iron)}
.checks--no li::after{border-color:var(--smoke)}

/* ---------- ABOUT ---------- */
.portrait{margin:0;position:relative;max-width:380px}
.portrait img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:50% 20%;border:1px solid var(--graphite);border-radius:var(--r-card);filter:saturate(.82) contrast(1.04)}
.portrait figcaption{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--graphite)}
.about{display:grid;grid-template-columns:380px 1fr;gap:var(--gap-md);align-items:start}
.about__role{margin-block:var(--s5) var(--s6);color:var(--smoke);font-size:12px;letter-spacing:.08em}
.idcard{border:1px solid var(--graphite);border-radius:var(--r-card);padding:var(--s6);position:relative;overflow:hidden}
.idcard__grid{
  position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(var(--graphite) 1px,transparent 1px),linear-gradient(90deg,var(--graphite) 1px,transparent 1px);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(90% 70% at 80% 10%,#000,transparent 72%);
  mask-image:radial-gradient(90% 70% at 80% 10%,#000,transparent 72%);
}
.idcard__rows{position:relative;display:flex;flex-direction:column;gap:var(--s5)}
.idcard__rows>div{display:grid;grid-template-columns:104px 1fr;gap:var(--s4);padding-bottom:var(--s5);border-bottom:1px solid var(--graphite)}
.idcard__rows>div:last-child{border-bottom:0;padding-bottom:0}
.idcard__rows .mono{font-size:11px;color:var(--smoke);letter-spacing:.06em;padding-top:var(--s1)}
.idcard__rows p{font-size:15px;color:var(--ash);line-height:1.55}

.about__r p{color:var(--smoke);margin-bottom:var(--s5);max-width:58ch;line-height:1.68}
.about__r .lede{color:var(--chalk);margin-bottom:var(--s6)}

.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--graphite);border:1px solid var(--graphite);border-radius:var(--r-card);overflow:hidden;margin-top:var(--s8)}
.stat{background:var(--obsidian);padding:var(--s6);display:flex;flex-direction:column;gap:var(--s2);transition:background var(--t-base) var(--e-out)}
.stat:hover{background:var(--slate)}
.stat b{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.6vw,38px);line-height:1;letter-spacing:-.016em;color:var(--chalk);font-variant-numeric:tabular-nums}
.stat b .cur{font-size:.5em;color:var(--brass);margin-right:var(--s1)}
.stat .mono{font-size:11px;letter-spacing:.08em;color:var(--smoke)}

/* ---------- REVIEW / FORM ---------- */
.review{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-md);align-items:start}
.review__l .h-lg{margin-bottom:var(--s5);max-width:16ch}
.revlist{margin-top:var(--s8);display:flex;flex-direction:column;gap:0;border-top:1px solid var(--graphite)}
.revlist li{display:grid;grid-template-columns:44px 1fr;gap:var(--s4);padding:var(--s5) 0;border-bottom:1px solid var(--graphite);color:var(--ash);font-size:16px}
.revlist .mono{font-size:12px;color:var(--smoke)}
.revcap{margin-top:var(--s6);color:var(--smoke);font-size:11px;letter-spacing:.12em}

.review__form{border:1px solid var(--graphite);border-radius:var(--r-card);padding:var(--gap-xs);background:var(--obsidian)}
.field{margin-bottom:var(--s5)}
.field label{display:block;font-size:14px;color:var(--ash);margin-bottom:var(--s2)}
.field label em{font-style:normal;color:var(--ash)}
.field input,.field select,.field textarea{
  width:100%;background:var(--carbon);border:1px solid var(--graphite);border-radius:var(--r-tag);
  padding:var(--s3) var(--s4);font-size:15px;color:var(--chalk);min-height:48px;
  transition:border-color var(--t-fast) var(--e-out),background var(--t-fast) var(--e-out);
}
.field textarea{min-height:88px;resize:vertical;line-height:1.5}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239c9c9c' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:var(--s8)}
.field select option{background:var(--carbon);color:var(--chalk)}
.field input::placeholder,.field textarea::placeholder{color:var(--smoke)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--iron)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ash);outline:none;background:#0c0c0c}
.field.is-bad input,.field.is-bad select{border-color:#d4674a}
.err{color:#d4674a;font-size:13px;margin-top:var(--s2);min-height:0;display:none}
.field.is-bad .err{display:block}

.consent{display:flex;gap:var(--s3);align-items:flex-start;margin-block:var(--s6);padding-top:var(--s5);border-top:1px solid var(--graphite)}
/* 24px is the WCAG 2.2 minimum target size. The label is clickable too, but
   the box itself should not be the smaller of the two. */
.consent input{width:24px;height:24px;flex:none;margin-top:var(--s1);accent-color:var(--chalk);cursor:pointer}
.consent label{font-size:14px;color:var(--smoke);line-height:1.5;cursor:pointer;padding-block:var(--s1)}

.formnote{margin-top:var(--s4);font-size:13px;color:var(--smoke);line-height:1.55;text-align:center}
.formalt{margin-top:var(--s3);font-size:14px;color:var(--smoke);text-align:center}
.formalt a{display:inline-block;color:var(--ash);border-bottom:1px solid var(--iron);padding-block:var(--s2) var(--s1)}
.formalt a:hover{color:var(--chalk);border-color:var(--chalk)}

/* ---------- PROOF POLICY PANEL ---------- */
.policy__inner{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--gap-md)}
.policy__l h2{margin-top:var(--s5);max-width:20ch}
.policy__r .note{margin-top:var(--s6)}
@media (max-width:1024px){.policy__inner{grid-template-columns:1fr;gap:var(--s8)}}

/* ---------- GALLERY / LIGHTBOX ---------- */
.gal + .gal{margin-top:var(--gap-md);padding-top:var(--gap-md);border-top:1px solid var(--graphite)}
.gal__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s5);flex-wrap:wrap;margin-bottom:var(--s5)}
.gal__note{color:var(--smoke);font-size:15px;line-height:1.65;max-width:78ch;margin-bottom:var(--gap-xs)}
.gal__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:var(--s6)}
.gal__item{display:block;width:100%;padding:0;background:none;border:1px solid var(--graphite);border-radius:var(--r-card);overflow:hidden;cursor:zoom-in;transition:border-color var(--t-fast) var(--e-out),transform var(--t-fast) var(--e-out)}
.gal__item:hover{border-color:var(--iron);transform:translateY(-2px)}
.gal__item img{width:100%;height:auto;display:block;background:var(--carbon)}
.gal__cap{display:flex;justify-content:space-between;gap:var(--s3);padding:var(--s3) var(--s4);border-top:1px solid var(--graphite);text-align:left}
/* --gold is a hairline colour and fails contrast as text; the flag is the
   one place this label had to be readable, so it uses --brass. */
.gal__flag{color:var(--brass);flex:none}

.lightbox{border:none;background:none;padding:0;max-width:min(94vw,1100px);max-height:94vh}
.lightbox::backdrop{background:rgba(8,8,8,.94)}
.lightbox img{width:100%;height:auto;border:1px solid var(--graphite);border-radius:var(--r-card)}
.lightbox__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding:var(--s4) 0}
@media (prefers-reduced-motion:no-preference){
  .lightbox[open]{animation:lbin var(--t-base) var(--e-out)}
  @keyframes lbin{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
}

/* ---------- FOOTER ---------- */
.foot{border-top:1px solid var(--graphite);padding-block:var(--s10) var(--s8);background:var(--obsidian);position:relative;z-index:2}
.foot__top{display:grid;grid-template-columns:1.1fr 1.4fr;gap:var(--gap-md);padding-bottom:var(--s10)}
.foot__brand .brand__mark{color:var(--chalk);margin-bottom:var(--s6)}
.foot__brand .h{max-width:20ch;margin-bottom:var(--s5)}
.foot__claim{color:var(--smoke);font-size:var(--fs-xs)}
.foot__claim b{font-family:var(--serif);font-weight:400;color:var(--chalk);font-variant-numeric:tabular-nums}
.foot__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s8)}
.foot__cols a,.foot__loc{display:block;color:var(--smoke);font-size:15px;padding-block:var(--s3);transition:color var(--t-fast) var(--e-out)}
.foot__cols a:hover{color:var(--chalk)}
.foot__note{color:var(--smoke);font-size:14px;line-height:1.6;padding-block:var(--s3)}
.foot__status{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s5);color:var(--ash);font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.foot__bot{display:flex;justify-content:space-between;gap:var(--s5);padding-top:var(--s6);border-top:1px solid var(--graphite);flex-wrap:wrap}
.foot__bot .mono{font-size:11px;letter-spacing:.06em;color:var(--smoke)}
@media (max-width:860px){.foot__cols{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot__cols{grid-template-columns:1fr;gap:var(--s7)}}

.wafloat{
  position:fixed;right:20px;bottom:20px;z-index:800;
  width:52px;height:52px;border-radius:var(--r-icon);
  background:var(--signal);color:var(--obsidian);
  display:flex;align-items:center;justify-content:center;
  transform:translateY(90px);opacity:0;
  transition:transform 420ms var(--e-out),opacity 300ms var(--e-out),background var(--t-fast);
}
.wafloat.is-in{transform:translateY(0);opacity:1}
.wafloat:hover{background:var(--ash)}
.wafloat:active{transform:scale(.94)}

/* ==========================================================================
   SURFACE BANDS
   Sections alternate obsidian / trench so a long page reads as chapters
   rather than one continuous scroll.
   ========================================================================== */
.sec--alt{background:var(--trench)}

/* ==========================================================================
   STAT BAND — four figures, hairline-separated, no card chrome
   ========================================================================== */
.statband{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-block:1px solid var(--graphite)}
.statband>div{padding:var(--gap-xs) var(--s6) var(--gap-xs) 0;border-right:1px solid var(--graphite)}
.statband>div:last-child{border-right:0}
.statband>div:not(:first-child){padding-left:var(--s6)}
.statband b{
  display:block;font-family:var(--serif);font-weight:400;
  font-size:clamp(30px,3.8vw,42px);line-height:1;letter-spacing:-.018em;
  color:var(--chalk);font-variant-numeric:tabular-nums;margin-bottom:var(--s3);
}
.statband b .cur{font-size:.5em;color:var(--brass);margin-right:var(--s1)}
.statband .mono{font-size:10px;letter-spacing:.08em;line-height:1.5;display:block}

/* ==========================================================================
   PROCESS TEASER — four compact steps with a connecting rule
   ========================================================================== */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--graphite);counter-reset:flow}
.flow li{
  position:relative;padding:var(--gap-xs) var(--s6) 0 0;
  border-right:1px solid var(--graphite);
}
.flow li:last-child{border-right:0}
.flow li:not(:first-child){padding-left:var(--s6)}
.flow li::before{
  content:'';position:absolute;top:-3px;left:0;width:5px;height:5px;
  border-radius:var(--r-icon);background:var(--gold);
}
.flow li.is-gate::before{background:var(--brass)}
.flow__n{font-family:var(--mono);font-size:12px;color:var(--smoke);letter-spacing:.06em}
.flow h3{font-size:var(--fs-xs);line-height:1.3;font-weight:400;margin-block:var(--s3) var(--s2);letter-spacing:-.004em}
.flow p{color:var(--smoke);font-size:15px;line-height:1.6;max-width:30ch}
.flow .gate{margin-left:var(--s2)}

/* ==========================================================================
   DOCUMENT ANATOMY — what is actually inside a Funding Profile
   A schematic, not a mock document: numbered bands mapped to a legend.
   ========================================================================== */
.anatomy{display:grid;grid-template-columns:300px 1fr;gap:var(--gap-md);align-items:start}
.anatomy__plate{
  border:1px solid var(--graphite);border-radius:var(--r-card);
  background:var(--carbon);padding:var(--s6);position:relative;
}
.anatomy__doc{display:flex;flex-direction:column;gap:6px}
.anatomy__doc .band{
  height:var(--bh,10px);border-radius:2px;background:var(--graphite);
  position:relative;transition:background var(--t-base) var(--e-out);
}
.anatomy__doc .band[data-part]{cursor:default}
.anatomy__doc .band.is-on{background:var(--brass)}
.anatomy__doc .rule{height:1px;background:var(--iron);margin-block:var(--s2);opacity:.6}
/* Plate captions, band heights and the withheld hatch. These were inline
   style="" attributes, which the CSP (style-src 'self') blocks on the live site. */
.anatomy__plate .anatomy__cap{font-size:10px;letter-spacing:.14em;color:var(--iron);margin-bottom:var(--s5)}
.anatomy__plate .anatomy__cap--foot{font-size:9px;letter-spacing:.12em;margin-bottom:0;margin-top:var(--s5)}
.anatomy__doc .band[data-h="10"]{--bh:10px}
.anatomy__doc .band[data-h="12"]{--bh:12px}
.anatomy__doc .band[data-h="14"]{--bh:14px}
.anatomy__doc .band[data-h="16"]{--bh:16px}
.anatomy__doc .band[data-h="20"]{--bh:20px}
.anatomy__doc .band[data-h="22"]{--bh:22px}
.anatomy__doc .band[data-h="26"]{--bh:26px}
.anatomy__doc .band[data-h="34"]{--bh:34px}
.anatomy__doc .band[data-h="44"]{--bh:44px}
.anatomy__doc .band--withheld{background:repeating-linear-gradient(45deg,#212121 0 5px,#171717 5px 10px)}
/* Space above the home page's process CTA (also an inline style before). */
.mt-gap-md{margin-top:var(--gap-md)}
.anatomy__legend{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--graphite)}
.anatomy__legend li{
  display:grid;grid-template-columns:38px 1fr;gap:var(--s5);
  padding:var(--s5) 0;border-bottom:1px solid var(--graphite);
}
.anatomy__legend .mono{font-size:12px;color:var(--smoke);padding-top:2px}
.anatomy__legend h3{font-size:var(--fs-xs);font-weight:400;letter-spacing:-.004em;margin-bottom:var(--s1)}
.anatomy__legend p{color:var(--smoke);font-size:15px;line-height:1.6;max-width:52ch}
.anatomy__legend li:hover .mono{color:var(--brass)}

/* ==========================================================================
   COVERAGE — schematic radius map
   ========================================================================== */
.coverage{display:grid;grid-template-columns:1fr 340px;gap:var(--gap-md);align-items:center}
.coverage__map{border:1px solid var(--graphite);border-radius:var(--r-card);background:var(--carbon);padding:var(--s6)}
.coverage__map svg{width:100%;height:auto}
.coverage__list{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--graphite)}
.coverage__list li{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s5);
  padding:var(--s4) 0;border-bottom:1px solid var(--graphite);
  color:var(--ash);font-size:15px;
}
.coverage__list .mono{font-size:11px;color:var(--smoke);flex:none}
@keyframes ping{
  0%{r:18;opacity:.55}
  100%{r:62;opacity:0}
}
.map__ping{animation:ping 3.4s var(--e-out) infinite}

/* ==========================================================================
   FAQ — native disclosure, styled
   ========================================================================== */
.faq{border-top:1px solid var(--graphite)}
.faq details{border-bottom:1px solid var(--graphite)}
.faq summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s6);
  padding:var(--s6) 0;cursor:pointer;list-style:none;
  font-size:var(--fs-xs);line-height:1.4;color:var(--chalk);letter-spacing:-.004em;
  transition:color var(--t-fast) var(--e-out);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--signal)}
.faq summary .mark{
  flex:none;width:18px;height:18px;position:relative;margin-top:4px;
}
.faq summary .mark::before,.faq summary .mark::after{
  content:'';position:absolute;background:var(--brass);
  transition:transform var(--t-base) var(--e-out),opacity var(--t-fast);
}
.faq summary .mark::before{left:0;top:8px;width:18px;height:1px}
.faq summary .mark::after{left:8px;top:0;width:1px;height:18px}
.faq details[open] summary .mark::after{transform:rotate(90deg);opacity:0}
.faq__a{padding-bottom:var(--s7);color:var(--smoke);font-size:16px;line-height:1.7;max-width:72ch}
.faq__a p+p{margin-top:var(--s4)}

/* ==========================================================================
   TERMS PLATE — the commercial rules, stated where a buyer looks for them
   ========================================================================== */
.terms{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--graphite);border:1px solid var(--graphite);border-radius:var(--r-card);overflow:hidden}
.terms>div{background:var(--obsidian);padding:var(--gap-xs);display:flex;flex-direction:column;gap:var(--s3)}
.terms .mono{font-size:11px;letter-spacing:.1em;color:var(--brass)}
.terms h3{font-size:var(--fs-xs);font-weight:400;letter-spacing:-.004em}
.terms p{color:var(--smoke);font-size:15px;line-height:1.65}

/* ==========================================================================
   PROOF STRIP — real published pages, scrolling. Home page only.
   ========================================================================== */
.strip{border-block:1px solid var(--graphite);overflow:hidden;background:var(--carbon);position:relative}
.strip::before,.strip::after{
  content:'';position:absolute;top:0;bottom:0;width:96px;z-index:2;pointer-events:none;
}
.strip::before{left:0;background:linear-gradient(90deg,var(--carbon),transparent)}
.strip::after{right:0;background:linear-gradient(270deg,var(--carbon),transparent)}
.strip__track{display:flex;width:max-content;animation:slide 64s linear infinite}
.strip__set{display:flex;flex:none;gap:var(--s4);padding:var(--s5) var(--s2)}
.strip__set img{
  height:150px;width:auto;border:1px solid var(--graphite);border-radius:var(--r-tag);
  filter:saturate(.65) contrast(1.05);opacity:.72;
  transition:opacity var(--t-base) var(--e-out),filter var(--t-base) var(--e-out);
}
.strip:hover .strip__track{animation-play-state:paused}
.strip__set img:hover{opacity:1;filter:saturate(1) contrast(1)}

/* ==========================================================================
   BREADCRUMBS
   ========================================================================== */
/* Negative top margin absorbs the link's own padding so the crumb row still
   sits where the design puts it while the link itself clears the WCAG 2.2
   24px minimum target. */
.crumbs{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-block:calc(var(--s2) * -1) var(--s4)}
.crumbs a{
  color:var(--smoke);padding-block:var(--s2);
  transition:color var(--t-fast) var(--e-out);
}
.crumbs a:hover{color:var(--chalk)}
.crumbs [aria-current]{color:var(--ash)}

/* ==========================================================================
   SIGNATURE BLOCK — the human sign-off under the about copy
   ========================================================================== */
.signoff{margin-top:var(--s8);padding-top:var(--s6);border-top:1px solid var(--graphite);display:flex;align-items:center;gap:var(--s6);flex-wrap:wrap}
.signoff svg{width:200px;max-width:100%;height:auto;color:var(--ash);flex:none}
.signoff p{color:var(--smoke);font-size:14px;line-height:1.6;margin:0!important}

/* ==========================================================================
   TRUST BLOCKS (Canon D-62, 14 Sep 2026)
   Source note, founder strip, cited findings, business facts, limits and the
   placeholder profile. Same idioms as everything else: 1px hairlines, no
   shadow, serif headings, mono labels, brass only where text must be read.
   ========================================================================== */
/* A sourced statement with its citation directly under it. */
.sourcenote{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:var(--gap-md);margin-top:var(--gap-lg);padding-top:var(--gap-xs);border-top:1px solid var(--graphite)}
.sourcenote__text{color:var(--ash);font-size:var(--fs-xs);line-height:1.6;max-width:60ch}
.sourcelink{display:block;width:fit-content;margin-top:var(--s5);color:var(--smoke);font-size:14px;line-height:1.5;border-bottom:1px solid var(--iron);padding-block:var(--s1);transition:color var(--t-fast) var(--e-out),border-color var(--t-fast) var(--e-out)}
.sourcelink:hover,.sourcelink:focus-visible{color:var(--chalk);border-color:var(--brass)}
.golink{display:flex;align-items:center;gap:var(--s2);width:fit-content;margin-top:var(--s4);padding-block:var(--s2);font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--brass)}
.golink svg{transition:transform var(--t-base) var(--e-out)}
.golink:hover svg,.golink:focus-visible svg{transform:translate(2px,-2px)}

/* Founder strip, home page: the person a client deals with, with a direct line. */
.founder{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:var(--gap-md);align-items:center}
.founder .portrait{max-width:300px}
.founder__body .h{max-width:24ch;margin-bottom:var(--s5)}
.founder__body p{color:var(--smoke);max-width:60ch;line-height:1.68}
.founder__cta{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s7)}

/* Findings from a cited source: index, heading, finding. */
.evidence{margin-top:var(--gap-lg)}
.findings{border-top:1px solid var(--graphite)}
.findings li{display:grid;grid-template-columns:56px minmax(0,.78fr) minmax(0,1.22fr);gap:var(--s6);align-items:start;padding-block:var(--gap-xs);border-bottom:1px solid var(--graphite)}
.findings .mono{padding-top:.3em}
.findings h3{font-size:var(--fs-xs);line-height:1.35;font-weight:400;letter-spacing:-.004em}
.findings p{color:var(--smoke);line-height:1.65;max-width:58ch}
.findings__foot{margin-top:var(--s6)}
.findings__foot p{color:var(--smoke);font-size:14px;line-height:1.6;max-width:72ch}

/* Business facts and limits use the two-column policy layout. */
.facts dd a{color:var(--ash);border-bottom:1px solid var(--iron);padding-block:2px;transition:color var(--t-fast) var(--e-out),border-color var(--t-fast) var(--e-out)}
.facts dd a:hover,.facts dd a:focus-visible{color:var(--chalk);border-color:var(--chalk)}
.facts dd .mono{font-size:var(--fs-body);text-transform:none;letter-spacing:0;color:var(--ash)}
.limits{border-top:1px solid var(--graphite)}
.limits li{padding-block:var(--s5);border-bottom:1px solid var(--graphite)}
.limits h3{font-size:var(--fs-xs);line-height:1.35;font-weight:400;letter-spacing:-.004em;margin-bottom:var(--s2)}
.limits p{color:var(--smoke);line-height:1.6;max-width:60ch}

/* Team profiles. The second one is a placeholder until its details exist. */
.about + .about{margin-top:var(--gap-lg);padding-top:var(--gap-lg);border-top:1px solid var(--graphite)}
.about__name{margin-bottom:var(--s2)}
.about__r .about__role{display:block;margin-block:0 var(--s6)}
.portrait__ph{aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;border:1px dashed var(--iron);border-radius:var(--r-card);background:var(--carbon)}
.about--placeholder .idcard__rows p,.about--placeholder .about__r p{color:var(--smoke)}

@media (max-width:1024px){
  .founder{grid-template-columns:minmax(0,220px) minmax(0,1fr)}
}
@media (max-width:860px){
  .sourcenote{grid-template-columns:1fr;gap:var(--s4)}
  .founder{grid-template-columns:1fr;gap:var(--s8)}
  .founder .portrait{max-width:240px}
  .findings li{grid-template-columns:44px minmax(0,1fr);gap:var(--s3) var(--s5)}
  .findings p{grid-column:2}
}
@media (max-width:560px){
  .findings li{grid-template-columns:1fr;gap:var(--s2)}
  .findings p{grid-column:1}
  .founder__cta .btn{width:100%}
}

/* ==========================================================================
   MOTION — reveals, counters, line-splits
   ========================================================================== */
/* Reveal states are gated on .js — if the script never runs, every section
   renders plainly instead of staying invisible at opacity:0. */
.js [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity 700ms var(--e-out),transform 700ms var(--e-out)}
.js [data-reveal].is-in{opacity:1;transform:none}
[data-reveal-d="1"]{transition-delay:60ms}
[data-reveal-d="2"]{transition-delay:120ms}
[data-reveal-d="3"]{transition-delay:180ms}
[data-reveal-d="4"]{transition-delay:240ms}
[data-reveal-d="5"]{transition-delay:300ms}
[data-reveal-d="6"]{transition-delay:360ms}
[data-reveal-d="7"]{transition-delay:420ms}

[data-reveal-lines] .line{display:block;overflow:hidden}
.js [data-reveal-lines] .line>span{display:block;transform:translateY(104%);transition:transform 900ms var(--e-out)}
.js [data-reveal-lines].is-in .line:nth-child(1)>span{transition-delay:40ms}
.js [data-reveal-lines].is-in .line:nth-child(2)>span{transition-delay:120ms}
.js [data-reveal-lines].is-in .line:nth-child(3)>span{transition-delay:200ms}
.js [data-reveal-lines].is-in .line>span{transform:none}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1024px){
  .case__body{grid-template-columns:1fr;gap:var(--s8)}
  .case__vis{min-height:auto;order:-1}
  .integrity,.about,.review{grid-template-columns:1fr;gap:var(--s8)}
  .addons ul{grid-template-columns:repeat(2,1fr)}
  .foot__top{grid-template-columns:1fr;gap:var(--s10)}
  .anatomy,.coverage{grid-template-columns:1fr;gap:var(--s8)}
  .flow{grid-template-columns:repeat(2,1fr)}
  .flow li:nth-child(2n){border-right:0}
  .flow li:nth-child(n+3){padding-top:var(--gap-xs);border-top:1px solid var(--graphite)}
  .statband{grid-template-columns:repeat(2,1fr)}
  .statband>div:nth-child(2n){border-right:0}
  .statband>div:nth-child(n+3){border-top:1px solid var(--graphite)}
}

@media (max-width:860px){
  .nav__links{display:none}
  .nav__cta{display:none}
  .burger{display:flex}
  .grid--3,.grid--2,.grid--4{grid-template-columns:1fr}
  .rcard{border-right:0;border-bottom:1px solid var(--graphite);padding:var(--s6) 0!important}
  .rcard:last-child{border-bottom:0}
  .rcard__num{right:0!important;top:var(--s6)}
  .rcard p{max-width:46ch}
  .model__row{grid-template-columns:44px minmax(0,1fr);gap:var(--s3) var(--s5)}
  .model__body{grid-column:2;max-width:none}
  .wedge{grid-template-columns:1fr;gap:var(--gap-sm)}
  .wedge__aside{order:2}
  .wedge__aside .pullquote{position:static}
  .lead{grid-template-columns:1fr}
  .lead__main{border-bottom:1px solid var(--graphite);padding:var(--gap-xs) 0}
  .lead__side{border-left:0}
  .lead__note{padding-left:0}
  .lead__main .h,.lead__body,.lead__note p{max-width:52ch}
  .hero__cred{grid-template-columns:1fr 1fr}
  .hero__cred li{border-bottom:1px solid var(--graphite);padding-bottom:var(--s5)}
  .hero__cred li:nth-child(2n){border-right:0}
  .hero__cred li:nth-last-child(-n+2){border-bottom:0}
  .gatebox__head,.gatebox__cols{grid-template-columns:1fr}
  .int__split{grid-template-columns:1fr}
  .terms{grid-template-columns:1fr}
  .tier{grid-template-columns:1fr;gap:var(--s5)}
  .tier__r{text-align:left}
  .tier__flag{position:static;display:block;margin-bottom:var(--s3)}
  .deflist>div{grid-template-columns:1fr;gap:var(--s1)}
  .idcard__rows>div{grid-template-columns:1fr;gap:var(--s1)}
  .pullquote p{font-size:var(--fs-sm)}
  .anatomy{grid-template-columns:1fr}
  .strip__set img{height:112px}
}

@media (max-width:560px){
  .hero{min-height:auto}
  .hero__cred{grid-template-columns:1fr}
  .hero__cred li{border-right:0;padding-right:0}
  .hero__cred li:not(:last-child){border-bottom:1px solid var(--graphite)}
  .hero__cta .btn{width:100%}
  .addons ul{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .scrollhint{display:none}
  .steps{padding-left:var(--s4)}
  .step{grid-template-columns:1fr;gap:var(--s1);padding-left:var(--s5)}
  .step__n{padding-top:0}
  .model__row{grid-template-columns:1fr;gap:var(--s2)}
  .model__idx{padding-top:0}
  .model__body{grid-column:1}
  .foot__bot{flex-direction:column;gap:var(--s3)}
  .spread{height:280px}
  .flow,.statband{grid-template-columns:1fr}
  .flow li,.statband>div{border-right:0;padding-left:0!important;padding-right:0}
  .flow li:not(:first-child){padding-top:var(--gap-xs);border-top:1px solid var(--graphite)}
  .statband>div:not(:first-child){border-top:1px solid var(--graphite)}
  .flow p{max-width:none}
  .faq summary{font-size:var(--fs-body)}
  .signoff{gap:var(--s4)}
}

/* ==========================================================================
   REDUCED MOTION — hard stop on all decorative motion
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .js [data-reveal]{opacity:1;transform:none}
  .js [data-reveal-lines] .line>span{transform:none}
  .ticker__track,.strip__track{animation:none}
  .strip__track{width:100%;overflow-x:auto}
  .map__ping{animation:none;opacity:0}
  .wafloat{transform:none;opacity:1}
}

/* ---------- PRINT ----------
   A prospect who prints the pricing page should get the ladder and the
   terms, not the decoration. */
@media print{
  .nav,.mobilemenu,.wafloat,.scrollhint,.ticker,
  .strip,.sec--cta{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .sec{padding-block:var(--s6);border-color:#ccc;background:#fff!important}
  .display,.h-lg,.h,.h-sm,.h-xs,.price,.stat b,.statband b{color:#000}
  .sub,.lede,p,.mono{color:#333}
  .faq details{border-color:#ccc}
  .faq details[open] .faq__a,.faq__a{display:block!important}
  a[href^="http"]::after{content:' (' attr(href) ')';font-size:9pt;color:#555}
}