/* ==========================================================================
   ARCFORMA KIT · FONTS (kit-v1.css, part 1 of 3)
   Mona Sans, Martian Mono and Newsreader, self-hosted, and their metric-matched
   fallbacks. The same URLs on every page, so a visitor downloads them once.
   ========================================================================== */
@font-face{font-family:"Mona Sans";src:url(/assets/fonts/site/mona-sans/mona-sans-latin-standard-normal.woff2) format("woff2-variations"),url(/assets/fonts/site/mona-sans/mona-sans-latin-standard-normal.woff2) format("woff2");font-weight:200 900;font-stretch:75% 125%;font-style:normal;font-display:swap}
@font-face{font-family:"Martian Mono";src:url(/assets/fonts/site/martian-mono/martian-mono-latin-standard-normal.woff2) format("woff2-variations"),url(/assets/fonts/site/martian-mono/martian-mono-latin-standard-normal.woff2) format("woff2");font-weight:100 800;font-stretch:75% 112.5%;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url(/assets/fonts/site/newsreader/newsreader-latin-display-normal.woff2) format("woff2-variations"),url(/assets/fonts/site/newsreader/newsreader-latin-display-normal.woff2) format("woff2");font-weight:300 500;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url(/assets/fonts/site/newsreader/newsreader-latin-display-italic.woff2) format("woff2-variations"),url(/assets/fonts/site/newsreader/newsreader-latin-display-italic.woff2) format("woff2");font-weight:300 500;font-style:italic;font-display:swap}
/* metric-matched fallbacks, measured against the real files */
@font-face{font-family:"Mona Fallback";src:local("Arial"),local("Helvetica Neue"),local("Helvetica");size-adjust:104.25%;ascent-override:104.6%;descent-override:30.7%;line-gap-override:0%}
@font-face{font-family:"Mona Display Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Neue Bold"),local("Helvetica Bold");font-weight:700;size-adjust:99.68%;ascent-override:109.35%;descent-override:32.1%;line-gap-override:0%}
@font-face{font-family:"Martian Fallback";src:local("Menlo"),local("Menlo Regular"),local("Consolas"),local("Courier New");size-adjust:99.67%;ascent-override:100.3%;descent-override:20.1%;line-gap-override:0%}
@font-face{font-family:"Newsreader Fallback";src:local("Georgia");font-style:normal;size-adjust:101.77%;ascent-override:72.22%;descent-override:26.04%;line-gap-override:0%}
@font-face{font-family:"Newsreader Fallback";src:local("Georgia Italic"),local("Georgia-Italic");font-style:italic;size-adjust:91.4%;ascent-override:80.42%;descent-override:28.99%;line-gap-override:0%}

/* ==========================================================================
   ARCFORMA · COMBINED (Signal x Spec Sheet): carbon grounds, one cobalt signal
   The one token sheet. Every colour, type role, rule, radius, duration and
   easing on the page is defined here, once. Nothing outside :root may carry a
   colour literal (gate 52) or a duration literal (gate 46).
   ========================================================================== */
:root{
  /* ---- neutrals: bone and paper grounds, ink and graphite carbon ---- */
  --bone:#E4E5E1;        /* ground, with --grain; ink on it 14.70 */
  --paper:#F2F3F0;       /* raised plates; the one answer on cobalt (7.67) */
  --ink:#121314;         /* type on bone; the carbon ground, with --grain-d */
  --graphite:#1D1F21;    /* panels one step up on carbon (1.13:1 to ink) */
  --iron:#55585A;        /* secondary type on bone (5.66); never on carbon */
  --ash:#8C9092;         /* ticks and noise on bone; secondary text on carbon (5.77) */

  /* ---- cobalt: the accent, one hue ---- */
  --cobalt:#0845AC;      /* the accent on bone and paper (6.75 / 7.67); solids of 24px+ on carbon */
  --cobalt-art:#0139A9;  /* specimen plate grounds, matching the stipple art */
  --cobalt-deep:#06327A; /* glass tint, readout chips, flat cards during a resolve */
  --cobalt-lit:#3D7DF5;  /* signal cobalt: text and thin marks on ink (4.83); 24px+ on graphite (4.29) */
  --tint-30:#527DC5;     /* cobalt + 30% white: decorative hairlines on cobalt */
  --tint-50:#84A2D6;     /* cobalt + 50% white: diagrams and large type on cobalt (3.30) */
  --tint-70:#B5C7E6;     /* cobalt + 70% white: labels on flat cobalt (5.00); marks on glass */
  --tint-85:#DAE3F3;     /* cobalt + 85% white: body on cobalt (6.62); every type on cobalt glass */

  /* ---- alpha tokens (the only place colour-mix of a token is named) ---- */
  --rule:color-mix(in srgb,var(--ink) 16%,transparent);
  --rule-2:color-mix(in srgb,var(--ink) 8%,transparent);
  --rule-d:color-mix(in srgb,var(--bone) 16%,transparent);
  --rule-d2:color-mix(in srgb,var(--bone) 8%,transparent);
  --rule-t:color-mix(in srgb,var(--tint-50) 38%,transparent);
  --bone-dim:color-mix(in srgb,var(--bone) 62%,transparent);     /* 6.18 on ink, 5.83 on graphite */
  --bone-80:color-mix(in srgb,var(--bone) 82%,transparent);      /* captions under the proof figures (10.0 on graphite) */
  --q-off:color-mix(in srgb,var(--tint-30) 55%,transparent);     /* the quote's unlit letter squares: tone on cobalt */
  --glass-cobalt:color-mix(in srgb,var(--cobalt-deep) 84%,transparent);   /* one tone across the art and the crest: tint-85 6.49:1 over pure cream */
  --chip:color-mix(in srgb,var(--cobalt-deep) 86%,transparent);
  --hd-bone:color-mix(in srgb,var(--bone) 90%,transparent);
  --hd-ink:color-mix(in srgb,var(--ink) 90%,transparent);
  --hd-cobalt:color-mix(in srgb,var(--cobalt) 95%,transparent);
  --lens-out:color-mix(in srgb,var(--cobalt-deep) 85%,transparent);
  --rule-d50:color-mix(in srgb,var(--bone) 50%,transparent);     /* the parts list's top rule on carbon */
  --lit-22:color-mix(in srgb,var(--cobalt-lit) 22%,transparent); /* the route's base trace under the lit trace */
  --crop:.55;            /* crop marks: currentColor at this opacity, everywhere */
  --glass-blur:18px;     /* cobalt glass over the stipple art */
  --hd-blur:12px;

  /* ---- contextual signal (D2): brand cobalt on bone, lit on ink, paper on cobalt ---- */
  --signal:var(--cobalt);

  /* ---- type ---- */
  --sans:"Mona Sans","Mona Fallback",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --disp:"Mona Sans","Mona Display Fallback","Mona Fallback","Helvetica Neue",Arial,sans-serif;
  --mono:"Martian Mono","Martian Fallback",ui-monospace,Menlo,monospace;
  --serif:"Newsreader","Newsreader Fallback",Georgia,"Times New Roman",serif;

  /* ---- type scale (2.4): every font size on the page is one of these, or a role class below.
     Copy steps: body 17, card copy 16, UI 15, small UI 14; mono 13 and labels 11 are roles.
     Component titles keep the blueprint's per-card sizes (2.4, "Card titles"). Gate 55 enforces it. ---- */
  --fs-body:17px;        /* body, FAQ answers, the case summary, cite names, close facts */
  --fs-s:16px;           /* card copy: case outcomes, built lists, phases, people answers, case quotes */
  --fs-ui:15px;          /* buttons, links, footer nav and notes, the four-ways body (was 15.5) */
  --fs-xs:14px;          /* header nav, small buttons, spec rows, phone people answers */
  --fs-mono:13px;        /* .mono: part names, link arrows */
  --fs-lbl:11px;         /* .lbl: every label; the 11px floor */
  --fs-svg:9.5px;        /* SVG label text in viewBox units; fitl scales it so it never renders under 11px */
  --fs-h1:clamp(52px,7.2vw,104px);  /* inner-page H1 (.t-h1): between the hero's --fs-xl and --fs-h2 */
  --fs-h2:clamp(38px,5vw,76px);
  --fs-h3:clamp(24px,2.3vw,34px);
  --fs-deck:clamp(19px,1.74vw,25px);
  --fs-case:clamp(22px,1.95vw,28px);
  --fs-card:clamp(24px,2.1vw,30px);
  --fs-faq:clamp(18px,1.55vw,22px);
  --fs-step:clamp(19px,1.6vw,23px);
  --fs-ba:clamp(20px,1.85vw,27px);
  --fs-way:19px;         /* a collapsed way's title (loved, as built) */
  --fs-xl:clamp(84px,14.9vw,216px);
  --fs-pf:clamp(44px,8.6cqw,84px);   /* the proof figure on the instrument overlay */
  --fs-pf-s:52px;                    /* the proof figure in the static 2x2 */
  --fs-pf-nojs:clamp(52px,5.4vw,76px);
  --fs-cond:clamp(96px,11.1vw,160px);
  --fs-quote:clamp(26px,2.78vw,40px); /* the quote (t-voice--q): a pull-quote, two thirds of the old poster (31 to 60) */
  --fs-close:clamp(50px,7.6vw,116px);/* the close H2 (t-voice--xl) */
  --fs-result:clamp(19px,6.2cqw,28px);/* the case result card (t-voice--s): follows its plate's width (.cf-c is the container) */
  --fs-lead:clamp(18px,1.53vw,22px); /* leads (t-lead) */

  /* ---- the quote's rhythm (5 · QUOTE): a pull-quote between §03 and §04, its gaps tightened with --fs-quote
     (the poster's values in brackets). Phones (860 and under) step down in the media block below, where the squares
     row is hidden ---- */
  --q-measure:38ch;      /* the quote's measure: five lines at 861 and up (23ch at the poster size) */
  --q-lead:44px;         /* the head to the quote: the page's head-to-content step (60 as a poster) */
  --q-cite:28px;         /* the quote to the cite (36) */
  --q-code:44px;         /* the cite to the squares row (64) */
  --q-code-k:12px;       /* the squares row's key: rule to label, and label to squares (12, 16) */
  --q-foot:36px;         /* under the section's last line, to the seam: the squares, or the cite with no JS (44; 56 on phones) */

  /* ---- tracking and leading: one value per role. Gate 56 flags any literal outside :root ---- */
  --tr-xl:-.052em;       /* the H1 */
  --tr-h2:-.038em;       /* section H2s */
  --tr-cond:-.04em;      /* step numerals */
  --tr-num:-.035em;      /* readings */
  --tr-card:-.03em;      /* card titles: case names, people */
  --tr-h3:-.025em;       /* H3s, the phone menu, the footer mail */
  --tr-text:-.02em;      /* display copy: voice, the deck, way titles, FAQ questions, before and after, steps */
  --tr-lead:-.012em;     /* leads, close facts */
  --tr-ui:-.01em;        /* names, phases, case quotes */
  --tr-btn:-.005em;      /* buttons, header nav */
  --tr-lbl:.06em;        /* every mono label */
  --lh-cond:.8;          /* step numerals, overlay figures */
  --lh-xl:.84;           /* the H1 */
  --lh-num:.86;          /* readings */
  --lh-h2:.96;           /* section H2s, phone figures */
  --lh-close:.97;        /* the close H2 */
  --lh-h3:1.04;          /* H3s, case names */
  --lh-voice:1.08;       /* case results, the quote, part names */
  --lh-snug:1.2;         /* the menu, phases, way titles, before and after */
  --lh-deck:1.3;         /* the deck, case quotes, steps, FAQ questions, close facts, proof captions */
  --lh-lbl:1.35;         /* labels, spec rows */
  --lh-lead:1.42;        /* leads, card copy */
  --lh-body:1.5;         /* body */
  --lh-solid:1;          /* single-line UI: buttons, links, chips */

  /* ---- grid: 12 columns; M = 8px ---- */
  --pad:clamp(20px,3.34vw,48px);
  --gut:clamp(12px,1.67vw,24px);
  --max:1440px;
  --m:8px;
  --r-btn:2px;           /* the only radius: buttons. Everything else is square */
  --hd-h:64px;

  /* ---- motion: five durations, one curve, one step function ---- */
  --d1:120ms;            /* micro states: colour, square swaps */
  --d2:240ms;            /* UI transforms, sweeps, card fills, rings, the hand-off */
  --d3:480ms;            /* reveals, leaders, figure clips, dither-in (the case plates too), ways open */
  --d4:960ms;            /* hairline draws, scans, the footer pixel */
  --d5:1440ms;           /* long resolves; no user since the case plates moved to --d3 (2026-10-05), kept as the scale's top step */
  --e-out:cubic-bezier(.16,1,.3,1);
  --tick:steps(6,end);
  --st:60ms;
  --st-s:20ms;

  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .07 0 0 0 0 .075 0 0 0 0 .08 0 0 0 1.25 -.7'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .89 0 0 0 0 .9 0 0 0 0 .88 0 0 0 1.1 -.66'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}
.on-ink{--signal:var(--cobalt-lit)}
.on-cobalt{--signal:var(--paper)}
/* phone steps of the type scale (one size per role per breakpoint) */
@media (max-width:860px){:root{--fs-xl:clamp(84px,27vw,200px);--fs-card:21px;--fs-cond:112px;--q-lead:32px;--q-foot:44px}}
@media (max-width:560px){:root{--fs-deck:19px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bone) var(--grain) 0 0/220px 220px;color:var(--ink);font-family:var(--sans);font-size:var(--fs-body);line-height:var(--lh-body);font-weight:400;font-stretch:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-kerning:normal}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
p{margin:0;text-wrap:pretty}
h1,h2,h3,h4{margin:0;font-weight:inherit}
ul,ol{margin:0;padding:0;list-style:none}
figure{margin:0}
::selection{background:var(--cobalt);color:var(--paper)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.on-ink :focus-visible,.on-ink:focus-visible{outline-color:var(--bone)}
.on-cobalt :focus-visible,.on-cobalt:focus-visible{outline-color:var(--paper)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---- type roles: one size per role per breakpoint --------------------- */
.t-xl{font-family:var(--disp);font-weight:640;font-stretch:100%;letter-spacing:var(--tr-xl);line-height:var(--lh-xl)}
.t-h1{font-family:var(--disp);font-weight:640;font-stretch:100%;letter-spacing:var(--tr-xl);line-height:var(--lh-h2);font-size:var(--fs-h1)}
.t-h2{font-family:var(--disp);font-weight:600;letter-spacing:var(--tr-h2);line-height:var(--lh-h2);font-size:var(--fs-h2)}
.t-h3{font-family:var(--disp);font-weight:580;letter-spacing:var(--tr-h3);line-height:var(--lh-h3);font-size:var(--fs-h3)}
.t-num{font-family:var(--disp);font-weight:560;font-stretch:78%;letter-spacing:var(--tr-num);line-height:var(--lh-num);font-variant-numeric:lining-nums proportional-nums;font-feature-settings:"zero" 0}
.t-cond{font-family:var(--disp);font-weight:520;font-stretch:75%;letter-spacing:var(--tr-cond);line-height:var(--lh-cond);font-size:var(--fs-cond);font-variant-numeric:lining-nums proportional-nums;font-feature-settings:"zero" 0}
.t-voice{font-family:var(--serif);font-weight:400;letter-spacing:var(--tr-text);font-variation-settings:"opsz" 72;font-optical-sizing:none}
.t-voice em,.t-voice i{font-style:italic}
/* the voice role has one size per use (2.4): the quote, the close H2, the case result card */
.t-voice--q{font-size:var(--fs-quote);line-height:var(--lh-voice)}
.t-voice--xl{font-size:var(--fs-close);line-height:var(--lh-close)}
.t-voice--s{font-size:var(--fs-result);line-height:var(--lh-voice)}
.t-lead{font-size:var(--fs-lead);line-height:var(--lh-lead);letter-spacing:var(--tr-lead);max-width:40ch}
.dim{color:var(--iron)}
.on-ink .dim{color:var(--bone-dim)}
.on-cobalt .dim{color:var(--tint-70)}
.lbl{font-family:var(--mono);font-stretch:75%;font-weight:420;font-size:var(--fs-lbl);line-height:var(--lh-lbl);letter-spacing:var(--tr-lbl);text-transform:uppercase}
.mono{font-family:var(--mono);font-stretch:87.5%;font-weight:380;font-size:var(--fs-mono);letter-spacing:0}

/* ---- the wordmark: the real file as a mask, recoloured by currentColor -- */
.wm{display:block;aspect-ratio:291.64/48.3;height:auto;background:currentColor;-webkit-mask:url(/assets/brand/arcforma-wordmark-ink.svg) no-repeat center/contain;mask:url(/assets/brand/arcforma-wordmark-ink.svg) no-repeat center/contain}

/* ---- the one button (D20): adapts to its ground; a button is its own ground (D2) ---- */
.btn{--btn-bg:var(--ink);--btn-fg:var(--bone);--btn-sig:var(--cobalt-lit);--btn-sweep:var(--cobalt);
  position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:12px;height:50px;padding:0 22px 0 18px;border-radius:var(--r-btn);background:var(--btn-bg);color:var(--btn-fg);font:560 var(--fs-ui)/var(--lh-solid) var(--sans);letter-spacing:var(--tr-btn);white-space:nowrap;transition:color var(--d1) var(--tick)}
.on-ink .btn,.hd.is-ink .btn{--btn-bg:var(--bone);--btn-fg:var(--ink);--btn-sig:var(--cobalt)}
.on-cobalt .btn,.hd.is-cobalt .btn{--btn-bg:var(--paper);--btn-fg:var(--ink);--btn-sig:var(--cobalt);--btn-sweep:var(--cobalt-deep)}
.btn .sq{width:8px;height:8px;flex:none;background:currentColor;transition:background-color var(--d1) var(--tick),transform var(--d2) var(--e-out)}
.btn.is-sig .sq{background:var(--btn-sig)}
html.anim .btn[data-handoff]:not(.is-on) .sq{background:currentColor}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--btn-sweep);transform:scaleX(0);transform-origin:0 50%;transition:transform var(--d2) var(--tick)}
.btn:hover::before,.btn:focus-visible::before{transform:scaleX(1)}
.btn:hover,.btn:focus-visible{color:var(--paper)}
.btn:hover .sq,.btn:focus-visible .sq{background:var(--paper);transform:rotate(90deg)}
.btn--sm{height:38px;padding:0 16px 0 13px;font-size:var(--fs-xs);gap:10px}
.btn--sm .sq{width:7px;height:7px}
/* the one secondary link */
.tlink{display:inline-flex;align-items:center;gap:10px;font:500 var(--fs-ui)/var(--lh-solid) var(--sans);padding:6px 0;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size var(--d2) var(--e-out)}
.tlink:hover{background-size:0 1px;background-position:100% 100%}
.tlink .ar{font-family:var(--mono);font-stretch:75%;font-size:var(--fs-mono)}

/* ---- instrument marks ---------------------------------------------------- */
.ruler{height:12px;background:
  linear-gradient(90deg,currentColor 1px,transparent 1px) 0 100%/80px 12px repeat-x,
  linear-gradient(90deg,currentColor 1px,transparent 1px) 0 100%/8px 5px repeat-x;opacity:.42}
.ruler--fine{height:8px;background:
  linear-gradient(90deg,currentColor 1px,transparent 1px) 0 100%/40px 8px repeat-x,
  linear-gradient(90deg,currentColor 1px,transparent 1px) 0 100%/4px 3px repeat-x}
.reg{width:16px;height:16px;flex:none;position:relative;color:inherit}
.reg::before,.reg::after{content:"";position:absolute;background:currentColor}
.reg::before{left:50%;top:0;bottom:0;width:1px;margin-left:-.5px}
.reg::after{top:50%;left:0;right:0;height:1px;margin-top:-.5px}
.reg i{position:absolute;inset:3px;border:1px solid currentColor;border-radius:50%}
/* crop marks: the one frame for every specimen */
.crop{position:relative}
.crop>.cm{position:absolute;width:10px;height:10px;pointer-events:none;border-color:currentColor;border-style:solid;opacity:var(--crop)}
.crop>.cm.tl{left:-6px;top:-6px;border-width:1px 0 0 1px}
.crop>.cm.tr{right:-6px;top:-6px;border-width:1px 1px 0 0}
.crop>.cm.bl{left:-6px;bottom:-6px;border-width:0 0 1px 1px}
.crop>.cm.br{right:-6px;bottom:-6px;border-width:0 1px 1px 0}
/* graduated checker dither seam: 12px cells over 48px (tile generated per seam from tokens.css) */
.dseam{display:block;height:48px;background-repeat:repeat-x;background-size:auto 48px;background-position:0 0;margin:-1px 0}
.dseam--ink{background-color:var(--ink)}   /* the cobalt-to-ink seam (D13): cobalt cells dissolving into ink */

/* self-drawing line art: JS sets --len, CSS draws on .is-drawn */
.draw [data-d]{stroke-dasharray:var(--len,1000);stroke-dashoffset:0}
html.anim .draw:not(.is-drawn) [data-d]{stroke-dashoffset:var(--len,1000)}
html.anim .draw [data-d]{transition:stroke-dashoffset var(--d4) var(--e-out);transition-delay:calc(var(--i,0)*var(--st))}
html.anim .draw [data-f]{transition:opacity var(--d2) linear;transition-delay:calc(var(--i,0)*var(--st) + var(--d2))}
html.anim .draw:not(.is-drawn) [data-f]{opacity:0}
.draw.no-tr [data-d],.draw.no-tr [data-f]{transition:none!important}

/* scan reveal: a line crosses, content appears behind it (12px of slack keeps crop marks) */
.scan{position:relative}
html.anim .scan>.scan-in{clip-path:inset(-12px calc(100% + 12px) -12px -12px)}
html.anim .scan.is-in>.scan-in{clip-path:inset(-12px -12px -12px -12px);transition:clip-path var(--d4) var(--e-out)}
.scan>.scan-line{position:absolute;top:-4px;bottom:-4px;left:0;width:1px;background:currentColor;opacity:0;pointer-events:none}
html.anim .scan.is-in>.scan-line{animation:scanline var(--d4) var(--e-out) both}
@keyframes scanline{0%{left:0;opacity:1}88%{opacity:1}100%{left:100%;opacity:0}}

/* generic reveal (never on the hero) */
html.anim .rv{opacity:0;transform:translateY(14px)}
html.anim .rv.in{opacity:1;transform:none;transition:opacity var(--d3) linear,transform var(--d3) var(--e-out);transition-delay:calc(var(--rv,0)*var(--st))}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;transition-delay:0ms!important;scroll-behavior:auto!important}
}

/* ==========================================================================
   ARCFORMA KIT · CHROME AND COMPONENTS (kit-v1.css, part 3 of 3)
   Everything every surface shares beyond the tokens: the wrap, the grounds,
   the skip link, the section head, the header, the footer, the FAQ list, and
   the inner-page parts (page head, spec rows, plate). Moved out of home.css
   unchanged; the homepage inlines this file, inner pages link it.
   ========================================================================== */
html{scroll-padding-top:var(--hd-h)}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
.on-ink{background:var(--ink) var(--grain-d) 0 0/220px 220px;color:var(--bone)}
.on-cobalt{background:var(--cobalt);color:var(--tint-85)}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--bone);padding:10px 14px;font:500 var(--fs-xs) var(--sans)}
.skip:focus{top:12px}
b{font-weight:inherit}
.lbl b{opacity:.45;padding:0 .2em}
section{position:relative}

/* ---- the one section head: § index, name, ruler, readout ----------------- */
.sh{display:flex;align-items:center;gap:14px;color:var(--iron);padding-top:4px}
.on-ink .sh{color:var(--bone-dim)}
.on-cobalt .sh{color:var(--tint-70)}
.sh-n{color:var(--ink);font-weight:560}
.on-ink .sh-n{color:var(--bone)}
.on-cobalt .sh-n{color:var(--paper)}
.sh-rule{flex:1;height:8px;color:currentColor}
.sh-r{white-space:nowrap}

/* ==========================================================================
   0 · HEADER: tick ruler and needle; one lit action mark per viewport (D12)
   ========================================================================== */
.hd{position:fixed;inset:0 0 auto 0;z-index:60;color:var(--ink);transition:background-color var(--d1) linear,color var(--d1) linear}
.hd-row{height:var(--hd-h);max-width:var(--max);margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}
.hd-logo{display:block;width:132px;padding:6px 0}
.hd-logo .wm{width:100%}
.hd-nav{display:flex;gap:30px;font:500 var(--fs-xs)/var(--lh-solid) var(--sans);letter-spacing:var(--tr-btn)}
.hd-nav a{position:relative;padding:8px 0;white-space:nowrap}
.hd-nav a::after{content:"";position:absolute;left:0;right:0;bottom:1px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:0 50%;transition:transform var(--d2) var(--tick)}
.hd-nav a:hover::after,.hd-nav a[aria-current="true"]::after{transform:scaleX(1)}
.hd-nav a[aria-current="true"]::before{content:"";position:absolute;left:-12px;top:50%;width:5px;height:5px;margin-top:-3px;background:currentColor}
.hd-end{justify-self:end;display:flex;align-items:center;gap:10px}
.hd.has-sig .btn:not(:hover):not(:focus-visible) .sq{background:var(--btn-sig)}
.hd-tog{display:none;width:40px;height:38px;position:relative}
.hd-tog i{position:absolute;left:10px;right:10px;height:1.5px;background:currentColor;transition:transform var(--d2) var(--e-out)}
.hd-tog i:first-of-type{top:15px}.hd-tog i:last-of-type{top:22px}
.hd-tog[aria-expanded="true"] i:first-of-type{transform:translateY(3.5px) rotate(45deg)}
.hd-tog[aria-expanded="true"] i:last-of-type{transform:translateY(-3.5px) rotate(-45deg)}
.hd-menu[hidden]{display:none}
.hd-menu{padding:8px var(--pad) 20px;display:grid;gap:2px;font:580 var(--fs-h3)/var(--lh-snug) var(--disp);letter-spacing:var(--tr-h3)}
.hd-menu a{padding:8px 0;border-bottom:1px solid var(--rule)}
.hd-menu .hm-foot{display:flex;justify-content:space-between;align-items:center;padding-top:18px}
.hd-menu .hm-foot .lbl{color:var(--iron)}
/* the scroll meter: a tick ruler along the header's bottom edge, the needle rides it */
.hd-meter{position:relative;height:9px;margin-top:-9px;opacity:0;transition:opacity var(--d1) linear;pointer-events:none}
.hd-ruler{position:absolute;left:0;right:0;bottom:0;height:5px;opacity:.34;background:
  linear-gradient(90deg,currentColor 1px,transparent 1px) 0 100%/80px 5px repeat-x,
  linear-gradient(90deg,currentColor 1px,transparent 1px) 0 100%/8px 2px repeat-x,
  linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat}
.hd-needle{position:absolute;left:0;bottom:0;width:2px;height:9px;background:currentColor;transform:translateX(var(--x,0px));will-change:transform}
.hd.is-stuck{background:var(--hd-bone);-webkit-backdrop-filter:blur(var(--hd-blur));backdrop-filter:blur(var(--hd-blur))}
.hd.is-stuck .hd-meter{opacity:1}
.hd.is-ink{background:var(--hd-ink);color:var(--bone)}
.hd.is-cobalt{background:var(--hd-cobalt);color:var(--paper)}
.hd.is-ink :focus-visible{outline-color:var(--bone)}
.hd.is-cobalt :focus-visible{outline-color:var(--paper)}
.hd.menu-open{background:var(--bone);-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--ink);box-shadow:0 1px 0 var(--rule)}

/* ==========================================================================
   FOOTER: the wordmark is static here; the homepage adds its pixel resolve
   ========================================================================== */
.ft{padding:0 0 28px;border-top:1px solid var(--rule-d)}
.ft-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);padding-top:44px}
.ft-k{color:var(--bone-dim);margin-bottom:16px}
.ft-q{grid-column:1/span 5}
.ft-mail{font:580 var(--fs-h3)/var(--lh-solid) var(--disp);letter-spacing:var(--tr-h3);background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;padding-bottom:6px;transition:background-size var(--d2) var(--tick)}
.ft-mail:hover,.ft-mail:focus-visible{background-size:100% 2px}
.ft-note{margin-top:14px;color:var(--bone-dim);font-size:var(--fs-ui);max-width:34ch}
.ft-nav{grid-column:7/span 4}
.ft-nav ul{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;font-size:var(--fs-ui)}
.ft-legal{grid-column:11/-1}
.ft-legal ul{display:grid;gap:10px;font-size:var(--fs-ui)}
.ft a:not(.ft-mail):hover{text-decoration:underline;text-underline-offset:4px}
.ft-mark{position:relative;margin-top:80px}
.ft-mark .wm{width:100%;color:var(--bone)}
.ft-base{display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between;margin-top:26px;padding-top:16px;border-top:1px solid var(--rule-d);color:var(--bone-dim)}
.ft-dis{flex-basis:100%;opacity:.8}
/* the kit's bone-to-carbon seam (Seam; build.py prints it from the tokens): above any carbon block on an inner page,
   and above the footer, unless the page already ends on carbon */
.seam-ink{background-image:url(/assets/site/seam-ink-v1.svg)}
main:has(>:last-child.on-ink)+.ft-seam{display:none}
/* the company LinkedIn in the base row: a 45px hit area (15px above and below the label) that moves nothing */
.ft-in{padding-block:15px;margin-block:-15px}
.on-ink .crop>.cm{border-color:var(--rule-d50);opacity:1}

/* ==========================================================================
   FAQ LIST (Faq): <details> rows, Q.nn index, a square toggle. Bone grounds
   ========================================================================== */
.faq-list{border-top:1px solid var(--ink)}
.faq-list details{border-bottom:1px solid var(--rule)}
.faq-list summary{display:grid;grid-template-columns:64px 1fr 28px;gap:12px;align-items:center;padding:20px 0;cursor:pointer;list-style:none}
.faq-list summary::-webkit-details-marker{display:none}
.fq-n{color:var(--iron)}
.fq-q{font:560 var(--fs-faq)/var(--lh-deck) var(--disp);letter-spacing:var(--tr-text)}
.fq-x{position:relative;width:14px;height:14px;justify-self:end;box-shadow:inset 0 0 0 1.2px var(--ink);transition:background-color var(--d1) var(--tick)}
.fq-x::before,.fq-x::after{content:"";position:absolute;left:3px;right:3px;top:50%;height:1.2px;margin-top:-.6px;background:var(--ink)}
.fq-x::after{transform:rotate(90deg);transition:transform var(--d2) var(--e-out)}
details[open] .fq-x{background:var(--ink)}
details[open] .fq-x::before{background:var(--bone)}
details[open] .fq-x::after{transform:rotate(0deg);background:var(--bone)}
.faq-list summary:hover .fq-q{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.fq-a{padding:0 40px 24px 76px}
.fq-a p{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--iron);max-width:62ch}
html.anim details[open] .fq-a p{animation:faqin var(--d3) var(--e-out) both}
@keyframes faqin{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
/* the FAQ section's grid (homepage §07, /individuals §03): the H2 sticky in four columns, the list in eight */
.faq-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);margin-top:44px}
.faq-a{grid-column:1/span 4}
.faq-a h2{position:sticky;top:110px}
.faq-list{grid-column:5/-1}

/* ==========================================================================
   INNER PAGES: the page head (strip, H1 in .t-h1, deck, actions), a section,
   spec rows (Spec) and a plate (Plate). Used by app/(site)/ and the 404
   ========================================================================== */
.pg-head{padding:calc(var(--hd-h) + 20px) 0 72px}
.pg-strip{display:flex;align-items:center;gap:16px;height:24px;color:var(--iron)}
.pg-strip>span{display:flex;align-items:center;gap:10px;white-space:nowrap}
.pg-strip .reg{color:var(--ink)}
.pg-strip .ruler{flex:1;color:var(--ink);height:8px;background-size:80px 8px,8px 3px}
.pg-h{margin:28px 0 0;max-width:15ch;text-wrap:balance}
.pg-deck{margin-top:24px;max-width:34em;font-size:var(--fs-deck);line-height:var(--lh-deck);letter-spacing:var(--tr-text);font-weight:460;text-wrap:pretty}
.pg-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:32px}
.pg-note{color:var(--iron)}
.pg-sec{padding:28px 0 104px}
.pg-sec-h{margin:44px 0;max-width:22ch}
/* spec rows: a key in the mono label, a value in UI type; carbon-aware through three local properties */
.spec{--spec-rule:var(--rule);--spec-k:var(--iron);--spec-v:var(--ink);margin:0;display:grid;border-top:1px solid var(--spec-rule)}
.on-ink .spec{--spec-rule:var(--rule-d);--spec-k:var(--bone-dim);--spec-v:var(--bone)}
.spec div{display:grid;grid-template-columns:84px 1fr;gap:12px;padding:8px 0;border-bottom:1px solid var(--spec-rule);font-size:var(--fs-xs);line-height:var(--lh-lbl)}
.spec dt{color:var(--spec-k);padding-top:2px}
.spec dd{margin:0;color:var(--spec-v)}
/* a plate: stipple art on its cobalt ground, inside a crop frame, with a readout chip */
.plate{position:relative;aspect-ratio:var(--ar,1/1);background:var(--cobalt-art)}
.plate>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 50%)}
.plate-ro{position:absolute;left:12px;top:12px;z-index:2;padding:5px 8px 4px;background:var(--chip);color:var(--tint-85);font-variant-numeric:tabular-nums;white-space:nowrap}
/* a page head with a side column (the spec readout, a plate) beside the H1 from 1101px; stacked below */
.pg-split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:end}
.pg-split-main{grid-column:1/span 8}
.pg-split-side{grid-column:9/-1;padding-bottom:6px}

/* ==========================================================================
   CLOSE (homepage §08, inner-page closes): on carbon, the voice H2, the lead,
   the one lit button, then the next-steps row (the call, afterwards, write to us)
   ========================================================================== */
.close-copy{max-width:min(800px,57%)}
.close-h{margin:56px 0 0;color:var(--bone)}
.close-lead{margin-top:36px;color:var(--bone-dim)}
.close-copy .btn{margin-top:30px}
.close-next{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut);margin-top:64px}
.close-next li{border-top:1px solid var(--rule-d);padding-top:14px;display:grid;gap:8px;align-content:start}
.close-next .lbl{color:var(--bone-dim)}
.close-next p{font:500 var(--fs-body)/var(--lh-deck) var(--disp);letter-spacing:var(--tr-lead)}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (min-width:861px) and (max-width:1000px){
  .hd-nav{gap:16px}
}
@media (max-width:1100px){
  .hd-nav{gap:22px}
  .pg-split{grid-template-columns:minmax(0,1fr)}
  .pg-split-main,.pg-split-side{grid-column:1/-1}
  .pg-split-side{margin-top:44px;max-width:560px;padding-bottom:0}
}
@media (max-width:860px){
  .hd-row{grid-template-columns:1fr auto}
  .hd-nav{display:none}
  .hd-tog{display:block;width:44px;height:44px}
  .hd-tog i:first-of-type{top:18px}.hd-tog i:last-of-type{top:25px}
  .hd .btn--sm{height:44px}
  .hd-logo{width:118px}
  .faq-list summary{grid-template-columns:44px 1fr 20px}
  .fq-a{padding:0 0 22px 56px}
  .ft-grid{grid-template-columns:1fr;row-gap:36px}
  /* touch targets: 44px rows in the footer lists; the secondary link's hit area grows without moving its underline */
  .ft-nav ul,.ft-legal ul{row-gap:0}
  .ft-nav a,.ft-legal a{display:block;padding:11px 0}
  .tlink{padding-block:14.5px;margin-block:-8.5px;background-origin:content-box;background-position:0 calc(100% + 6px)}
  .tlink:hover{background-position:100% calc(100% + 6px)}
  .ft-mail{padding-top:4px}
  .ft-q,.ft-nav,.ft-legal{grid-column:1/-1}
  .ft-mark{margin-top:56px}
  .pg-head{padding-bottom:56px}
  .pg-h{margin-top:22px}
  .pg-sec{padding-bottom:72px}
  .pg-sec-h{margin:32px 0}
  .faq-grid{grid-template-columns:1fr;margin-top:32px}
  .faq-a,.faq-list{grid-column:1/-1}
  .faq-a h2{position:static;margin-bottom:24px}
  .close-copy{max-width:none}
  .close-h{margin-top:40px}
  .close-next{grid-template-columns:1fr;gap:18px;margin-top:48px}
}
@media (max-width:560px){
  .sh-r{display:none}
  .pg-strip{justify-content:space-between}
  .pg-strip .ruler{display:none}
}

/* ==========================================================================
   NO-JS: the header sits in the flow's top edge on bone; no menu, no meter
   ========================================================================== */
.nojs .hd{position:absolute;background:var(--bone)}
.nojs .hd-tog,.nojs .hd-meter{display:none}

/* print: a reveal that has not run yet still prints */
@media print{html.anim .rv{opacity:1;transform:none}}