/* theDAC site v0.3.0 (13/10/2026). Swiss-brutalist editorial, De Stijl primaries.
   One stylesheet. Pages are assembled by site-src/build.py; this file is edited in place.
   Tokens first, then layout, then sections, then the service pages. */

/* Self-hosted fonts (SIL Open Font License 1.1): Archivo, DM Sans, Space Mono; latin and latin-ext subsets only */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/assets/fonts/archivo-var-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/assets/fonts/archivo-var-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: 'DM Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/assets/fonts/dm-sans-var-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/assets/fonts/dm-sans-var-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: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/space-mono-400-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/space-mono-400-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: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/space-mono-700-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/space-mono-700-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;
}


:root {
  --ink: #0d0d0f;
  --paper: #f4f1ea;
  --paper-2: #e9e4d8;
  --white: #ffffff;
  --red: #ff4b2b;
  --yellow: #f7ff3c;
  --blue: #2a3cf5;
  --muted: #5b5850;

  --line: 3px;
  --shadow-s: 4px 4px 0 var(--ink);
  --shadow: 8px 8px 0 var(--ink);
  --shadow-l: 14px 14px 0 var(--ink);

  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-body: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "Space Mono", ui-monospace, Menlo, monospace;

  --gutter: clamp(16px, 4vw, 48px);
  --max: 1320px;
  --header-h: 76px;
  --ease-out: cubic-bezier(.2, .9, .25, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--f-body);
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}
/* Print-like grain over everything, very light */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 200; opacity: .07; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
::selection { background: var(--yellow); color: var(--ink); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 6px var(--yellow); }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.mono { font-family: var(--f-mono); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 300; background: var(--yellow); border: var(--line) solid var(--ink); padding: 10px 14px; font-weight: 700; }
.skip:focus { top: 12px; }

/* ---------- Type ---------- */
h1, h2, h3 { font-family: var(--f-display); font-weight: 800; letter-spacing: -.025em; line-height: .98; margin: 0; }
h2 { font-size: clamp(2.3rem, 1rem + 4.6vw, 5.4rem); font-stretch: 112%; letter-spacing: -.035em; }
h3 { font-size: clamp(1.25rem, 1rem + .6vw, 1.6rem); font-stretch: 105%; letter-spacing: -.02em; line-height: 1.1; }
p { margin: 0; }
.lead { font-size: clamp(1.1rem, 1rem + .35vw, 1.3rem); line-height: 1.55; max-width: 60ch; }
.muted { color: var(--muted); }

.tag {
  display: inline-flex; align-items: center; gap: .55em;
  font: 700 .78rem/1 var(--f-mono); letter-spacing: .02em;
  padding: .62em .9em; background: var(--yellow); border: var(--line) solid var(--ink); box-shadow: var(--shadow-s);
}
.tag .dot { width: .6em; height: .6em; background: var(--red); border: 2px solid var(--ink); border-radius: 50%; animation: pulse 2.4s ease-in-out infinite; }
.still .tag .dot { animation: none; }
@keyframes pulse { 50% { transform: scale(.6); } }

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--white);
  display: inline-flex; align-items: center; gap: .6em; justify-content: center;
  padding: .95em 1.35em; min-height: 54px;
  font: 700 1rem/1 var(--f-body); text-decoration: none; color: var(--ink);
  background: var(--bg); border: var(--line) solid var(--ink); box-shadow: 6px 6px 0 var(--ink);
  transition: transform .14s var(--ease-out), box-shadow .14s var(--ease-out), background .2s;
  cursor: pointer;
}
.btn:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--ink); }
.btn:active { transform: translate(6px, 6px); box-shadow: 0 0 0 var(--ink); }
.btn-red { --bg: var(--red); }
.btn-yellow { --bg: var(--yellow); }
.btn-ink { --bg: var(--ink); color: var(--paper); box-shadow: 6px 6px 0 var(--yellow); }
.btn-ink:hover { box-shadow: 9px 9px 0 var(--yellow); }
.btn .arr { transition: transform .2s var(--ease-out); }
.btn:hover .arr { transform: translateX(4px); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--paper);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  border-bottom: var(--line) solid var(--ink);
}
.nav { height: var(--header-h); display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; flex-shrink: 0; }
/* Michael's theDAC⁺ mark: white letters and a raised plus on the red box, black frame and hard shadow */
.logo {
  font: 700 1.15rem/1 var(--f-mono); letter-spacing: -.02em;
  background: var(--red); color: #fff; padding: .55em .8em .55em .7em; border: var(--line) solid var(--ink); box-shadow: var(--shadow-s);
  transition: transform .2s var(--ease-spring);
}
.logo::after { content: "+"; content: "+" / ""; position: relative; top: -.45em; margin-left: .06em; font-size: .9em; }
.brand:hover .logo { transform: rotate(-4deg) scale(1.04); }
.brand-name { font: 800 .92rem/1.08 var(--f-display); font-stretch: 105%; letter-spacing: -.01em; }
.nav-links { display: flex; gap: 4px; margin: 0 0 0 auto; list-style: none; padding: 0; }
.nav-links a {
  display: block; padding: .55em .8em; text-decoration: none; font-weight: 600; font-size: .95rem;
  border: var(--line) solid transparent; transition: background .15s, border-color .15s, box-shadow .15s;
}
.nav-links a:hover { background: var(--white); border-color: var(--ink); }
.nav-links a.is-active { background: var(--yellow); border-color: var(--ink); box-shadow: var(--shadow-s); }
.lang { display: flex; border: var(--line) solid var(--ink); box-shadow: var(--shadow-s); flex-shrink: 0; }
.lang a, .lang span { font: 700 .78rem/1 var(--f-mono); padding: .65em .7em; text-decoration: none; }
.lang [aria-current] { background: var(--blue); color: var(--white); }
.lang a:hover { background: var(--yellow); }
.nav .btn { min-height: 44px; padding: .7em 1em; font-size: .92rem; box-shadow: var(--shadow-s); }
.nav .btn:hover { box-shadow: 6px 6px 0 var(--ink); }
.menu-btn { display: none; margin-left: auto; width: 48px; height: 48px; color: var(--ink); text-decoration: none; border: var(--line) solid var(--ink); background: var(--white); box-shadow: var(--shadow-s); cursor: pointer; }
.menu-btn span { display: block; width: 20px; height: 3px; background: var(--ink); margin: 0; transition: transform .2s, opacity .2s; }
.menu-open .menu-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-open .menu-btn span:nth-child(2) { opacity: 0; }
.menu-open .menu-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(40px, 7vw, 96px) clamp(56px, 8vw, 110px); position: relative; }
.hero-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 clamp(24px, 3vw, 48px); align-items: start; }
.hero-head { grid-column: 1 / -1; }
.hero-copy { grid-column: span 6; padding-top: 8px; }
.hero h1 {
  font-size: clamp(2.55rem, .6rem + 6.5vw, 8.6rem);
  font-stretch: 116%; font-weight: 850; letter-spacing: -.045em; line-height: .92;
  margin: 28px 0 clamp(32px, 4vw, 56px); max-width: 15.2em; hyphens: manual; text-wrap: balance;
}
.hero h1 .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .06em; margin-bottom: -.06em; }
.hero h1 .w > span { display: inline-block; transform: translateY(105%); animation: rise .9s var(--ease-out) forwards; animation-delay: calc(var(--i) * 55ms + 120ms); }
@keyframes rise { to { transform: none; } }
.hero h1 .nb { white-space: nowrap; }
.blk {
  display: inline-block; padding: 0 .12em .02em; margin: 0 .02em;
  border: .055em solid var(--ink); box-shadow: .08em .08em 0 var(--ink); line-height: .95;
}
.blk-red { background: var(--red); transform: rotate(-2.5deg); }
.blk-blue { background: var(--blue); color: var(--white); transform: rotate(1.8deg); }
.hero h1 .blk { animation: stamp .7s var(--ease-spring) both; animation-delay: calc(var(--i) * 55ms + 520ms); }
@keyframes stamp { from { opacity: 0; transform: scale(1.9) rotate(-12deg); } }
.hero .lead { margin-bottom: 34px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 38px; }
.stamps { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; }
.stamps li { font: 700 .74rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .04em; padding: .6em .75em; border: 2px dashed var(--ink); display: flex; gap: .5em; align-items: center; }
.stamps li::before { content: "0"; display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; background: var(--ink); color: var(--yellow); }
.stamps li.senior::before { content: "\2605"; content: "\2605" / ""; }

/* The composition: a De Stijl grid that re-tiles itself */
.comp-wrap { grid-column: 8 / -1; position: relative; }
.comp {
  --c: 1.2fr 1fr 1fr; --r: 1fr 1fr 1fr;
  display: grid; aspect-ratio: 5 / 4; gap: 7px; padding: 7px;
  grid-template-columns: var(--c); grid-template-rows: var(--r);
  grid-template-areas: "a b b" "a c d" "e e d";
  background: var(--ink); border: var(--line) solid var(--ink); box-shadow: var(--shadow-l);
  transition: grid-template-columns .9s var(--ease-out), grid-template-rows .9s var(--ease-out);
  transform: rotate(1.2deg);
}
.cb {
  position: relative; min-width: 0; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; text-align: left;
  padding: clamp(10px, 1.4vw, 18px); border: 0; cursor: pointer; color: inherit; text-decoration: none;
  container-type: inline-size;
}
.cb-a { grid-area: a; background: var(--red); }
.cb-b { grid-area: b; background: var(--paper); }
.cb-c { grid-area: c; background: var(--yellow); }
.cb-d { grid-area: d; background: var(--blue); color: var(--white); }
.cb-e { grid-area: e; background: var(--white); }
.cb-n { font: 700 .72rem/1 var(--f-mono); }
.cb-l { font: 800 clamp(.72rem, 11cqi, 1.35rem)/1.02 var(--f-display); font-stretch: 108%; letter-spacing: -.02em; overflow-wrap: anywhere; position: relative; }
.cb svg { position: absolute; right: clamp(10px, 1.4vw, 18px); top: clamp(10px, 1.4vw, 18px); width: 34%; max-width: 92px; height: auto; transition: transform .9s var(--ease-out); }
.cb.is-focus svg { transform: rotate(90deg) scale(1.08); }
.cb:focus-visible { outline-offset: -6px; box-shadow: inset 0 0 0 4px var(--ink), inset 0 0 0 8px var(--yellow); }
.comp-readout {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 26px; transform: rotate(1.2deg);
  font: 400 .74rem/1.4 var(--f-mono); color: var(--muted);
}
.comp-readout b { color: var(--ink); background: var(--yellow); padding: 0 .3em; }
.motion-btn { font: 700 .7rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--ink); background: var(--white); border: 2px solid var(--ink); padding: .5em .6em; cursor: pointer; }
.still .motion-btn { background: var(--yellow); }
.comp-hint { position: absolute; left: -18px; top: 18%; transform: rotate(-90deg) translateX(-100%); transform-origin: left top; font: 700 .7rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }

/* ---------- Marquee ---------- */
.marquee { background: var(--ink); color: var(--yellow); border-block: var(--line) solid var(--ink); overflow: hidden; }
.marquee-track { display: flex; width: max-content; }
.js .marquee-track { animation: marquee 46s linear infinite; }
.marquee:hover .marquee-track, .still .marquee-track { animation-play-state: paused; }
.marquee ul { display: flex; list-style: none; margin: 0; padding: 1.05rem 0; }
.marquee li { font: 700 clamp(.95rem, .8rem + .5vw, 1.25rem)/1 var(--f-mono); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; padding-inline: 1.1em; display: flex; align-items: center; gap: 2.2em; }
.marquee li::after { content: "\2736"; content: "\2736" / ""; color: var(--red); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
.sec { padding-block: clamp(72px, 10vw, 140px); border-top: var(--line) solid var(--ink); position: relative; }
.sec-head { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px 48px; margin-bottom: clamp(44px, 6vw, 84px); align-items: end; }
.sec-head .kicker { grid-column: 1 / -1; }
.sec-head h2 { grid-column: span 7; }
.sec-head .lead { grid-column: span 5; }
.kicker { font: 700 .8rem/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; display: flex; align-items: center; gap: 14px; }
.kicker::after { content: ""; height: var(--line); flex: 1; background: var(--ink); }
.kicker b { background: var(--ink); color: var(--paper); padding: .45em .6em; }

/* Reveal on scroll: hidden only while the script runs; a keyframe so component transitions cannot override it */
.js .rv:not(.in) { opacity: 0; }
.js .rv.in { animation: reveal .6s var(--ease-out) backwards; animation-delay: calc(var(--d, 0) * 70ms); }
@keyframes reveal { from { opacity: 0; transform: translateY(18px); } }

/* ---------- Why ---------- */
.why-row { display: grid; grid-template-columns: minmax(150px, 2.3fr) 4fr 5fr; gap: 24px clamp(24px, 4vw, 64px); padding-block: clamp(32px, 4vw, 52px); border-top: var(--line) solid var(--ink); align-items: start; }
.why-row:last-child { border-bottom: var(--line) solid var(--ink); }
.why-num {
  font: 900 clamp(5rem, 3rem + 7vw, 10.5rem)/.8 var(--f-display); font-stretch: 125%; letter-spacing: -.06em;
  color: var(--c); -webkit-text-stroke: 3px var(--ink);
  transition: color .9s var(--ease-out) .25s;
}
.js .why-row:not(.in) .why-num { color: transparent; }
.why-row h3 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.3rem); margin-bottom: 14px; }
.vs-label { font: 700 .7rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; color: var(--muted); }

/* ---------- Services bento ---------- */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(250px, auto); grid-auto-flow: dense; gap: 24px; }
.tile {
  --bg: var(--white); --fg: var(--ink);
  position: relative; display: flex; flex-direction: column; gap: 14px;
  background: var(--bg); color: var(--fg); padding: clamp(20px, 2vw, 28px);
  border: var(--line) solid var(--ink); box-shadow: var(--shadow);
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.tile:hover { transform: translate(-4px, -4px); box-shadow: 12px 12px 0 var(--ink); }
.tile:has(.tile-open:active) { transform: translate(8px, 8px); box-shadow: 0 0 0 var(--ink); }
.tile-top { display: flex; justify-content: space-between; align-items: flex-start; }
.tile-n { font: 700 .78rem/1 var(--f-mono); padding: .45em .55em; border: 2px solid currentColor; }
.tile svg { width: 46px; height: 46px; }
.tile h3 { font-size: clamp(1.3rem, 1rem + .9vw, 1.85rem); margin-top: auto; }
.tile p { font-size: .98rem; line-height: 1.5; max-width: 46ch; opacity: .9; }
.tile-open {
  align-self: flex-start; display: inline-flex; gap: .5em; align-items: center;
  font: 700 .8rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .05em;
  background: none; border: 0; padding: 0; cursor: pointer; color: inherit;
}
.tile-open::after { content: ""; position: absolute; inset: 0; }
.tile-open i { font-style: normal; display: inline-grid; place-items: center; width: 26px; height: 26px; border: 2px solid currentColor; transition: transform .25s var(--ease-spring); }
.tile:hover .tile-open i { transform: rotate(90deg); }
.t-yellow { --bg: var(--yellow); }
.t-blue { --bg: var(--blue); --fg: var(--white); }
.t-red { --bg: var(--red); }
.t-ink { --bg: var(--ink); --fg: var(--paper); box-shadow: 8px 8px 0 var(--red); }
.t-ink:hover { box-shadow: 12px 12px 0 var(--red); }
.span-2 { grid-column: span 2; }
.t-big h3 { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.6rem); font-stretch: 112%; }

/* Drawer */
.drawer {
  margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh; width: min(680px, 100vw); max-width: 100vw;
  padding: 0; border: 0; border-left: var(--line) solid var(--ink); background: var(--paper); color: var(--ink);
  overscroll-behavior: contain;
}
html:has(dialog[open]) { overflow: hidden; }
.drawer::backdrop { background: rgb(13 13 15 / .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.drawer[open] { animation: slide-in .45s var(--ease-out); }
@keyframes slide-in { from { transform: translateX(100%); } }
.drawer-head { --bg: var(--yellow); --fg: var(--ink); background: var(--bg); color: var(--fg); padding: 28px clamp(22px, 4vw, 40px) 32px; border-bottom: var(--line) solid var(--ink); position: sticky; top: 0; z-index: 1; }
.drawer-head .tile-n { display: inline-block; margin-bottom: 18px; }
.drawer-head h3 { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); font-stretch: 112%; padding-right: 56px; }
.drawer-close { position: absolute; right: 20px; top: 20px; width: 48px; height: 48px; background: var(--white); color: var(--ink); border: var(--line) solid var(--ink); box-shadow: var(--shadow-s); font: 700 1.3rem/1 var(--f-mono); cursor: pointer; }
.drawer-close:active { transform: translate(4px, 4px); box-shadow: none; }
.drawer-close:focus-visible { outline: 4px solid var(--yellow); outline-offset: 3px; }
.drawer-body { padding: 30px clamp(22px, 4vw, 40px) 40px; display: grid; gap: 30px; }
.drawer-body h4, .pkg-col .h-sm { font: 700 .76rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .07em; margin: 0 0 12px; padding-bottom: 10px; border-bottom: var(--line) solid var(--ink); }
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.list li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; line-height: 1.45; }
.list li::before { font: 700 1rem/1.4 var(--f-mono); }
.l-plus li::before { content: "+"; content: "+" / ""; }
.l-arrow li::before { content: "\2192"; content: "\2192" / ""; color: var(--blue); }
.l-minus li::before { content: "\2212"; content: "\2212" / ""; color: var(--red); }
.l-minus li { color: var(--muted); }
.tile .l-minus li { color: inherit; opacity: .85; }
[data-drawer-content] h4:not(:first-child) { margin-top: 30px; }
.models { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.model { border: var(--line) solid var(--ink); background: var(--white); padding: 14px; box-shadow: var(--shadow-s); }
.model b { display: block; font: 800 1.1rem/1.1 var(--f-display); }
.model .mono { display: block; font-size: .74rem; margin: 6px 0 8px; }
.model p { font-size: .88rem; line-height: 1.4; }

/* ---------- Packages: timeline ---------- */
.gantt { background: var(--white); border: var(--line) solid var(--ink); box-shadow: var(--shadow-l); }
.g-axis, .g-sum { display: grid; grid-template-columns: minmax(240px, 34%) 1fr; }
.g-axis { border-bottom: var(--line) solid var(--ink); background: var(--ink); color: var(--paper); }
.g-axis > span { font: 700 .72rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; padding: 14px 20px; }
.g-ticks { display: grid; grid-template-columns: repeat(8, 1fr); padding: 0 !important; }
.g-ticks span { padding: 14px 0 14px 8px; border-left: 1px solid rgb(244 241 234 / .25); font: 700 .7rem/1 var(--f-mono); }
.g-row { border-bottom: var(--line) solid var(--ink); }
.g-row:last-child { border-bottom: 0; }
.g-sum { cursor: pointer; list-style: none; transition: background .2s; }
.g-sum::-webkit-details-marker { display: none; }
.g-sum:hover { background: var(--paper); }
.g-label { font: inherit; margin: 0; padding: 22px 20px; border-right: var(--line) solid var(--ink); display: grid; grid-template-columns: auto 1fr auto; gap: 4px 14px; align-items: center; }
.g-label .pn { font: 700 .72rem/1 var(--f-mono); grid-row: span 2; align-self: start; padding: .4em .5em; border: 2px solid var(--ink); }
.g-label b { font: 800 1.12rem/1.15 var(--f-display); font-stretch: 106%; letter-spacing: -.01em; }
.g-label small { font: 400 .78rem/1.3 var(--f-mono); color: var(--muted); grid-column: 2; }
.g-label .tog { grid-row: 1 / span 2; grid-column: 3; width: 30px; height: 30px; display: grid; place-items: center; border: 2px solid var(--ink); font: 700 1rem/1 var(--f-mono); transition: transform .3s var(--ease-spring), background .2s; }
.g-row[open] .tog { transform: rotate(45deg); background: var(--yellow); }
.g-track { position: relative; padding: 22px 0; background-image: repeating-linear-gradient(90deg, rgb(13 13 15 / .1) 0 1px, transparent 1px calc(100% / 8)); display: flex; align-items: center; }
.g-bar {
  --c: var(--red);
  position: relative; height: 40px; margin-left: 0; width: calc(var(--hi) / 8 * 100%);
  border: var(--line) solid var(--ink); box-shadow: var(--shadow-s);
  background:
    linear-gradient(90deg, var(--c) 0 calc(var(--lo) / var(--hi) * 100%), transparent 0),
    repeating-linear-gradient(-45deg, var(--c) 0 5px, var(--white) 5px 10px);
  transform-origin: left; transition: transform 1.1s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 120ms + 150ms);
}
.js .gantt:not(.in) .g-bar { transform: scaleX(0); }
.g-bar span { position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); font: 700 .78rem/1 var(--f-mono); white-space: nowrap; }
.g-bar.ret { width: 100%; background: repeating-linear-gradient(-45deg, var(--c) 0 5px, var(--white) 5px 10px); }
.g-bar.lab-in span, .g-bar.ret span { left: auto; right: 10px; background: var(--ink); color: var(--yellow); padding: .45em .6em; }
.g-detail { padding: 28px 24px 32px; background: var(--paper); border-top: var(--line) solid var(--ink); display: grid; grid-template-columns: 1fr minmax(220px, 320px); gap: 22px 28px; align-items: center; }
.g-detail > .more-link { margin-top: 0; }
.g-detail > p.intro { grid-column: 1 / -1; font-size: 1.15rem; font-weight: 600; max-width: 70ch; }
.fee { align-self: start; border: var(--line) solid var(--ink); background: var(--yellow); padding: 18px; box-shadow: var(--shadow-s); display: grid; gap: 14px; }
.fee .mono { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; }
.fee b { font: 800 1.2rem/1.15 var(--f-display); }
.fee .btn { min-height: 46px; font-size: .9rem; padding: .7em 1em; box-shadow: var(--shadow-s); }
.g-legend { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 26px; font: 400 .78rem/1.3 var(--f-mono); }
.g-legend span { display: inline-flex; align-items: center; gap: 8px; }
.g-legend i { width: 30px; height: 14px; border: 2px solid var(--ink); display: inline-block; }
.g-legend .solid { background: var(--ink); }
.g-legend .hatch { background: repeating-linear-gradient(-45deg, var(--ink) 0 3px, var(--white) 3px 6px); }
.g-note { margin-top: 16px; max-width: 70ch; font-size: .95rem; line-height: 1.5; color: var(--muted); }

/* ---------- Clients and quotes ---------- */

.familiar { background: var(--ink); color: var(--paper); margin-top: clamp(64px, 8vw, 110px); padding: clamp(40px, 6vw, 80px) clamp(22px, 4vw, 64px); border: var(--line) solid var(--ink); box-shadow: 14px 14px 0 var(--red); position: relative; overflow: hidden; }
.familiar h3 { font-size: clamp(2rem, 1.2rem + 3vw, 4rem); font-stretch: 115%; margin-bottom: clamp(32px, 4vw, 56px); }
.familiar h3 em { font-style: normal; color: var(--yellow); }
.qmark { position: absolute; right: -20px; top: -80px; font: 900 22rem/1 var(--f-display); color: var(--red); opacity: .9; pointer-events: none; }
.quotes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; position: relative; }
.quote { --bg: var(--paper); --fg: var(--ink); background: var(--bg); color: var(--fg); border: var(--line) solid var(--paper); padding: 24px 22px; margin: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; transform: rotate(var(--rot)); transition: transform .3s var(--ease-spring); }
.quote:hover { transform: rotate(0) translateY(-6px); }
.quote blockquote { margin: 0; font: 700 1.15rem/1.32 var(--f-display); letter-spacing: -.01em; }
.quote figcaption { font: 700 .74rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; border-top: 2px solid currentColor; padding-top: 12px; }
.q1 { --bg: var(--yellow); --rot: -1.6deg; }
.q2 { --bg: var(--paper); --rot: 1.2deg; }
.q3 { --bg: var(--red); --rot: -.8deg; }
.q4 { --bg: var(--blue); --fg: var(--white); --rot: 1.6deg; }

/* ---------- Process ---------- */
.steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; align-items: start; list-style: none; margin: 0; padding: 0; }
.step { display: grid; grid-template-rows: calc(70px + 6 * 34px) auto; gap: 18px; }
.step-bar {
  height: calc(70px + var(--n) * 34px); border: var(--line) solid var(--ink); background: var(--c, var(--white)); box-shadow: var(--shadow-s);
  align-self: end; display: flex; align-items: flex-start; padding: 12px 14px; transform-origin: bottom; transition: transform .8s var(--ease-out); transition-delay: calc(var(--n) * 90ms);
}
.js .steps:not(.in) .step-bar { transform: scaleY(0); }
.step-bar span { font: 900 2.6rem/1 var(--f-display); font-stretch: 125%; letter-spacing: -.05em; }
.step b { display: block; font: 800 1.15rem/1.15 var(--f-display); font-stretch: 106%; margin-bottom: 6px; }
.step p { font-size: .93rem; line-height: 1.45; color: var(--muted); }

/* ---------- About ---------- */
.founder { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.portrait { margin: 0; position: relative; }
.portrait-frame { background: var(--yellow); border: var(--line) solid var(--ink); box-shadow: var(--shadow-l); aspect-ratio: 4 / 5; overflow: hidden; transform: rotate(-1.5deg); transition: transform .4s var(--ease-spring); }
.portrait:hover .portrait-frame { transform: rotate(0); }
.portrait img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.18) brightness(1.04); mix-blend-mode: multiply; }
.portrait figcaption { position: absolute; left: -14px; bottom: 26px; background: var(--ink); color: var(--paper); font: 700 .78rem/1.3 var(--f-mono); padding: .7em .9em; transform: rotate(-1.5deg); }
.portrait figcaption b { color: var(--yellow); font-weight: 700; }
.founder h3 { font-size: clamp(2.6rem, 1.4rem + 4vw, 5.6rem); font-stretch: 118%; letter-spacing: -.045em; margin-bottom: 8px; }
.founder .role { font: 700 .85rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .07em; display: inline-block; background: var(--red); padding: .55em .7em; border: var(--line) solid var(--ink); margin-bottom: 26px; }
.founder p + p { margin-top: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 26px 0 30px; }
.chips li { font: 700 .8rem/1 var(--f-mono); padding: .7em .85em; border: var(--line) solid var(--ink); background: var(--white); }
.principles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 26px; border: var(--line) solid var(--ink); background: var(--white); }
.principle { padding: 24px 24px 28px; border-right: var(--line) solid var(--ink); border-bottom: var(--line) solid var(--ink); }
.principle:nth-child(4n) { border-right: 0; }
.principle:nth-last-child(-n + 4) { border-bottom: 0; }
.principle .mono { font-size: .72rem; display: inline-block; background: var(--ink); color: var(--paper); padding: .35em .5em; margin-bottom: 12px; }
.principle b { display: block; font: 800 1.18rem/1.15 var(--f-display); margin-bottom: 8px; }
.principle p { font-size: .95rem; line-height: 1.5; color: var(--muted); }

/* ---------- Contact ---------- */
.contact { background: var(--red); border-top: var(--line) solid var(--ink); padding-block: clamp(72px, 10vw, 140px); position: relative; overflow: hidden; }
.contact::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, rgb(13 13 15 / .06) 0 2px, transparent 2px 14px); pointer-events: none; }
.contact .wrap { position: relative; }
.contact h2 { font-size: clamp(4.2rem, 1rem + 13vw, 15rem); font-stretch: 125%; font-weight: 900; letter-spacing: -.06em; line-height: .82; margin: 22px 0 34px; }
.contact h2 span { display: inline-block; transition: transform .35s var(--ease-spring); }
.contact h2:hover span { transform: rotate(-3deg) translateY(-4px); }
.contact-grid { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.big-mail { display: inline-block; font: 800 clamp(1.7rem, 1rem + 3vw, 3.6rem)/1 var(--f-display); font-stretch: 112%; letter-spacing: -.03em; text-decoration: none; background: linear-gradient(var(--ink), var(--ink)) 0 100% / 100% 6px no-repeat; padding-bottom: .12em; transition: background-size .3s var(--ease-out), color .2s; }
.big-mail:hover { background-size: 100% 100%; color: var(--yellow); }
.contact-lines { display: grid; gap: 14px; margin-top: 36px; }
.contact-lines a, .contact-lines div { display: flex; gap: 14px; align-items: center; font-weight: 600; font-size: 1.08rem; text-decoration: none; }
.contact-lines .ic { width: 44px; height: 44px; display: grid; place-items: center; border: var(--line) solid var(--ink); background: var(--paper); flex-shrink: 0; font: 700 .9rem/1 var(--f-mono); }
.contact-lines small { display: block; font: 400 .78rem/1.3 var(--f-mono); }
.form { background: var(--paper); border: var(--line) solid var(--ink); box-shadow: var(--shadow-l); padding: clamp(22px, 3vw, 36px); display: grid; gap: 16px; }
.form h3 { font-size: 1.6rem; }
.form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form label { display: grid; gap: 6px; font: 700 .76rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .05em; }
.form input, .form textarea { font: 500 1rem/1.4 var(--f-body); padding: 13px 14px; border: var(--line) solid var(--ink); background: var(--white); color: var(--ink); border-radius: 0; width: 100%; }
.form input:focus, .form textarea:focus { outline: none; box-shadow: 4px 4px 0 var(--blue); }
.form textarea { min-height: 120px; resize: vertical; }
.form .note { font: 400 .76rem/1.4 var(--f-mono); color: var(--muted); }
.form .err { font: 700 .74rem/1.3 var(--f-mono); text-transform: none; letter-spacing: 0; color: #b3200a; min-height: 0; }
.form .err:empty { display: none; }
.form [aria-invalid="true"] { border-color: #b3200a; box-shadow: 4px 4px 0 #b3200a; }
.form-status { font: 700 .82rem/1.45 var(--f-body); }
.form-status:empty { margin-top: -16px; } /* stays in the accessibility tree so the live region is announced */

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--paper); padding-block: 72px 32px; }
.foot-grid { display: grid; grid-template-columns: 3fr 3fr 2fr 3fr; gap: 40px; }
.site-footer .fh { font: 700 .74rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--yellow); margin: 0 0 16px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.site-footer .legal { font: 400 .82rem/1.6 var(--f-mono); color: #d9d4c7; }
.foot-claim { font: 800 1.5rem/1.15 var(--f-display); font-stretch: 112%; margin-top: 22px; max-width: 18ch; }
.foot-base { margin-top: 64px; padding-top: 22px; border-top: 1px solid rgb(244 241 234 / .25); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font: 400 .76rem/1.4 var(--f-mono); color: #cfc9bb; }


/* ---------- Variants: classes instead of inline styles, so the CSP can forbid inline styles ---------- */
.d1 { --d: 1; } .d2 { --d: 2; }
.sec.alt { background: var(--paper-2); }
.why-row.c-red { --c: var(--red); } .why-row.c-yellow { --c: var(--yellow); } .why-row.c-blue { --c: var(--blue); }
.g-bar.p1 { --lo: 1; --hi: 2; --c: var(--yellow); --d: 0; }
.g-bar.p2 { --lo: 1; --hi: 2; --c: var(--yellow); --d: 1; }
.g-bar.p3 { --lo: 2; --hi: 4; --c: var(--red); --d: 2; }
.g-bar.p4 { --lo: 3; --hi: 8; --c: var(--red); --d: 3; }
.g-bar.p5 { --lo: 4; --hi: 8; --c: var(--blue); --d: 4; }
.g-bar.p6 { --lo: 3; --hi: 5; --c: var(--blue); --d: 5; }
.g-bar.p7 { --c: var(--blue); --d: 6; }
.step:nth-child(1) { --n: 1; } .step:nth-child(2) { --n: 2; } .step:nth-child(3) { --n: 3; }
.step:nth-child(4) { --n: 4; } .step:nth-child(5) { --n: 5; } .step:nth-child(6) { --n: 6; }
.step:nth-child(2) .step-bar { --c: var(--yellow); } .step:nth-child(4) .step-bar { --c: var(--red); }
.step:nth-child(6) .step-bar { --c: var(--blue); color: var(--white); }
.hero-ctas.flush { margin: 0; }
.contact-lead { margin-bottom: 30px; }

/* ---------- v0.3.0 home components ---------- */

/* Right now: three dated facts, one counting down */
.now { padding-block: clamp(36px, 5vw, 64px); }
.now-title { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.now-title::before { content: ""; width: .7em; height: .7em; border-radius: 50%; background: var(--red); border: 2px solid var(--ink); animation: pulse 2.4s ease-in-out infinite; }
.still .now-title::before { animation: none; }
.now-title::after { content: ""; height: var(--line); flex: 1; background: var(--ink); }
.now-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.now-card { --bg: var(--white); --fg: var(--ink); display: grid; gap: 10px; align-content: start; padding: 22px 22px 24px; background: var(--bg); color: var(--fg); border: var(--line) solid var(--ink); box-shadow: var(--shadow); text-decoration: none; transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out); }
.now-card:hover { transform: translate(-4px, -4px); box-shadow: 12px 12px 0 var(--ink); }
.n-yellow { --bg: var(--yellow); } .n-red { --bg: var(--red); } .n-blue { --bg: var(--blue); --fg: var(--white); }
.now-k { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.now-v { font: 900 clamp(2rem, 1.3rem + 2.2vw, 3.2rem)/.95 var(--f-display); font-stretch: 118%; letter-spacing: -.04em; }
.now-p { font-size: .97rem; line-height: 1.45; }
.now-link { font: 700 .8rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .05em; margin-top: 4px; }

/* Familiar: the dark quote block stands as its own section now */
#familiar { padding-block: clamp(56px, 8vw, 110px); }
#familiar .familiar { margin-top: 0; }
.kicker-inv { position: relative; color: var(--paper); }
.kicker-inv::after { background: var(--paper); opacity: .4; }
.kicker-inv b { background: var(--yellow); color: var(--ink); }
.familiar h2 { position: relative; font-size: clamp(2.2rem, 1.2rem + 3.4vw, 4.4rem); font-stretch: 115%; margin: 22px 0 clamp(32px, 4vw, 56px); }
.familiar h2 em { font-style: normal; color: var(--yellow); }
.quotes.q6 { grid-template-columns: repeat(3, 1fr); }
.q5 { --bg: var(--white); --rot: -1.1deg; }
.q6 { --bg: var(--yellow); --rot: 1deg; }
.familiar-cta { position: relative; margin-top: clamp(32px, 4vw, 48px); }

/* Who advises you: the supplier and the adviser side by side */
.balance { border: var(--line) solid var(--ink); background: var(--white); box-shadow: var(--shadow-l); }
.bal-row { display: grid; grid-template-columns: minmax(180px, 1.1fr) 1fr 1fr; border-top: var(--line) solid var(--ink); }
.bal-row:first-child { border-top: 0; }
.bal-row > span { padding: 18px 22px; display: flex; align-items: center; }
.bal-head > span { font: 700 .78rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .07em; padding-block: 16px; }
.bal-head .bal-them { background: var(--paper-2); }
.bal-head .bal-us { background: var(--ink); color: var(--yellow); }
.bal-k { font: 800 1.05rem/1.2 var(--f-display); font-stretch: 106%; border-right: var(--line) solid var(--ink); }
.bal-them { color: var(--muted); border-right: var(--line) solid var(--ink); }
.bal-us { font-weight: 700; background: var(--yellow); }
.bal-row:not(.bal-head) .bal-us::before { content: "\2713"; content: "\2713" / ""; display: inline-grid; place-items: center; flex-shrink: 0; width: 26px; height: 26px; margin-right: 12px; border: 2px solid var(--ink); background: var(--white); font: 700 .9rem/1 var(--f-mono); }
.bal-note { margin-top: 28px; font: 700 clamp(1.15rem, 1rem + .5vw, 1.45rem)/1.35 var(--f-display); max-width: 52ch; }
.bal-note b { background: var(--yellow); padding: 0 .2em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* Three doors (reusing the why rows) and the service filter */
.door .fit { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.door .fit li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: center; font-weight: 600; padding: 12px 14px; border: var(--line) solid var(--ink); background: var(--white); }
.door .fit li::before { content: "\2192"; content: "\2192" / ""; display: grid; place-items: center; width: 30px; height: 30px; background: var(--c); border: 2px solid var(--ink); font: 700 .95rem/1 var(--f-mono); }
.door.c-blue .fit li::before { color: var(--white); }
.door-btn { display: none; font: 700 .8rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .05em; padding: .8em 1em; border: var(--line) solid var(--ink); background: var(--ink); color: var(--paper); cursor: pointer; box-shadow: 4px 4px 0 var(--c); transition: transform .14s var(--ease-out), box-shadow .14s var(--ease-out); }
.door-btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--c); }
.js .door-btn { display: inline-flex; gap: .6em; align-items: center; }
.svc-filter { display: none; flex-wrap: wrap; gap: 10px; margin: clamp(48px, 6vw, 80px) 0 28px; }
.js .svc-filter { display: flex; }
.bento.filtered { grid-auto-flow: row; }
.svc-filter button { font: 700 .82rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .04em; padding: .85em 1em; border: var(--line) solid var(--ink); background: var(--white); cursor: pointer; display: inline-flex; gap: .7em; align-items: center; }
.svc-filter button span { display: inline-grid; place-items: center; min-width: 1.8em; height: 1.8em; background: var(--ink); color: var(--paper); font-size: .72rem; }
.svc-filter button[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: var(--shadow-s); }
.svc-filter button[aria-pressed="true"] span { background: var(--yellow); color: var(--ink); }
.svc-filter .f-a[aria-pressed="true"] { background: var(--yellow); color: var(--ink); }
.svc-filter .f-b[aria-pressed="true"] { background: var(--blue); color: var(--white); }
.svc-filter .f-c[aria-pressed="true"] { background: var(--red); color: var(--ink); }
.tile.is-out { display: none; }
.tile-top { gap: 10px; }
.tile-top svg { margin-left: auto; flex-shrink: 0; }
.tile-door { font: 700 .66rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .05em; padding: .45em .55em; border: 2px solid var(--ink); color: var(--ink); background: var(--white); }
.tile-door.d-a { background: var(--yellow); } .tile-door.d-b { background: var(--blue); color: var(--white); } .tile-door.d-c { background: var(--red); }
.t-blue .tile-door.d-b, .t-ink .tile-door.d-b { border-color: var(--white); }
.t-yellow .tile-door.d-a { background: var(--white); } .t-red .tile-door.d-c { background: var(--white); }
.tile .tile-meta { font: 700 .74rem/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .04em; opacity: 1; }
.js .tile-more { display: none; }
html:not(.js) .tile-open, html:not(.js) .check-bar { display: none; }
html:not(.js) .motion-btn, html:not(.js) .comp-hint { visibility: hidden; }
html:not(.js) .tile-more { border-top: 2px dashed currentColor; padding-top: 16px; }
.tile-more h4 { font: 700 .72rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .07em; margin: 16px 0 8px; }
.more-link { margin-top: 26px; }
.more-link a { font: 700 .85rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .05em; text-decoration: none; display: inline-block; padding: .8em 1em; border: var(--line) solid var(--ink); background: var(--white); box-shadow: var(--shadow-s); }
.more-link a:hover { background: var(--yellow); }

/* Typical situations */
.stories { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.story { --tag: var(--yellow); --tag-fg: var(--ink); display: flex; flex-direction: column; gap: 14px; padding: 24px 24px 22px; background: var(--white); border: var(--line) solid var(--ink); box-shadow: var(--shadow); position: relative; }
.story::before { content: ""; position: absolute; left: -3px; right: -3px; top: -3px; height: 10px; background: var(--tag); border: var(--line) solid var(--ink); }
.st-a { --tag: var(--yellow); } .st-b { --tag: var(--blue); --tag-fg: var(--white); } .st-c { --tag: var(--red); }
.story-head { display: flex; flex-wrap: wrap; gap: 8px 12px; justify-content: space-between; align-items: center; margin-top: 8px; }
.story-tag { font: 700 .68rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; padding: .45em .6em; background: var(--tag); color: var(--tag-fg); border: 2px solid var(--ink); }
.story-who { font-size: .74rem; color: var(--muted); }
.story h3 { font-size: clamp(1.3rem, 1rem + .9vw, 1.75rem); }
.story-sit { color: var(--muted); line-height: 1.5; }
.story-cols { display: grid; gap: 16px; padding-top: 16px; border-top: 2px dashed var(--ink); margin-top: auto; }
.story-cols h4 { font: 700 .7rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .07em; margin: 0 0 8px; }
.story-cols .list { gap: 6px; font-size: .95rem; }
.story-cols p { font-weight: 600; line-height: 1.45; }
.story-link { align-self: flex-start; font: 700 .76rem/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: .05em; text-decoration: none; border-bottom: 3px solid var(--tag); padding-bottom: 3px; }
.story-link:hover { background: var(--tag); color: var(--tag-fg); }

/* Self-check */
.check { background: var(--white); border: var(--line) solid var(--ink); box-shadow: var(--shadow-l); padding: clamp(18px, 3vw, 36px); }
.check-list { list-style: none; counter-reset: q; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(20px, 3vw, 40px); }
.check-q { counter-increment: q; padding: 18px 0 20px; border-bottom: 2px dashed var(--ink); }
.check-q fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.check-q legend { padding: 0; font-weight: 600; line-height: 1.45; margin-bottom: 14px; display: grid; grid-template-columns: 2.4em 1fr; gap: 8px; }
.check-q legend::before { content: counter(q, decimal-leading-zero); font: 700 .78rem/1.9 var(--f-mono); }
.seg { display: inline-flex; border: var(--line) solid var(--ink); margin-left: calc(2.4em + 8px); }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: block; font: 700 .8rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .04em; padding: .8em 1.05em; border-right: 2px solid var(--ink); background: var(--white); transition: background .15s; }
.seg label:last-child span { border-right: 0; }
.seg label:hover span { background: var(--paper); }
.seg input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: -5px; }
.seg input[value="yes"]:checked + span { background: var(--yellow); }
.seg input[value="unsure"]:checked + span { background: var(--paper-2); }
.seg input[value="no"]:checked + span { background: var(--red); }
.check-tip { display: none; }
.check-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 26px; }
.check-progress { flex: 1 1 200px; height: 14px; border: var(--line) solid var(--ink); background: var(--paper); }
.check-progress span { display: block; height: 100%; width: 0; background: var(--blue); transition: width .3s var(--ease-out); }
.check-count { font-size: .8rem; }
.js .check-nojs { display: none; }
.check-nojs { margin-top: 18px; font-weight: 600; }
.check-result { margin-top: 30px; padding-top: 30px; border-top: var(--line) solid var(--ink); display: grid; grid-template-columns: 220px 1fr; gap: clamp(20px, 4vw, 48px); align-items: start; outline: none; }
.check-result[hidden] { display: none; }
.score { position: relative; width: 200px; aspect-ratio: 1; }
.score svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg, .ring { fill: none; stroke-width: 14; }
.ring-bg { stroke: var(--paper-2); }
.ring { stroke: var(--c, var(--blue)); stroke-dasharray: 314.16; stroke-dashoffset: 314.16; transition: stroke-dashoffset 1s var(--ease-out); }
.score-n { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.score-n b { font: 900 3.6rem/1 var(--f-display); font-stretch: 120%; letter-spacing: -.05em; }
.score-n span { font: 700 .9rem/1 var(--f-mono); }
.result-body h3 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem); margin-bottom: 10px; }
.result-body > p { max-width: 60ch; }
.result-body h4 { font: 700 .76rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .07em; margin: 24px 0 10px; padding-bottom: 10px; border-bottom: var(--line) solid var(--ink); }
.weak { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; }
.weak li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; padding: 12px 14px; border: 2px solid var(--ink); background: var(--paper); }
.weak li::before { content: "!"; content: "!" / ""; display: grid; place-items: center; width: 30px; height: 30px; background: var(--red); border: 2px solid var(--ink); font: 700 .95rem/1 var(--f-mono); }
.weak li.u::before { content: "?"; content: "?" / ""; background: var(--paper-2); }
.weak li a { font: 700 .74rem/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: .04em; display: inline-block; margin-top: 6px; }
.weak li.ok { grid-template-columns: 1fr; font-weight: 700; background: var(--yellow); }
.weak li.ok::before { display: none; }
.check .note { font-size: .74rem; color: var(--muted); margin-top: 14px; }

/* Experience and the network */
.exp, .network { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 5vw, 72px); align-items: start; padding-block: clamp(36px, 5vw, 60px); border-top: var(--line) solid var(--ink); }
.exp-k { display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; background: var(--ink); color: var(--paper); padding: .45em .6em; margin-bottom: 16px; }
.exp h3, .network h3 { font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem); font-stretch: 112%; margin-bottom: 18px; }
.exp-copy p, .net-copy p { line-height: 1.6; max-width: 54ch; }
.exp-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; border: var(--line) solid var(--ink); background: var(--white); box-shadow: var(--shadow); }
.exp-list li { padding: 20px 20px 22px; border-bottom: var(--line) solid var(--ink); display: grid; gap: 6px; }
.exp-list li:nth-child(odd) { border-right: var(--line) solid var(--ink); }
.exp-list li:nth-last-child(-n + 2) { border-bottom: 0; }
.exp-list b { font: 800 1.08rem/1.2 var(--f-display); font-stretch: 106%; }
.exp-list span { font-size: .93rem; line-height: 1.45; color: var(--muted); }
.net-copy .chips { margin-bottom: 0; }
.vet { list-style: none; counter-reset: v; margin: 0; padding: 0; display: grid; gap: 14px; }
.vet li { counter-increment: v; display: grid; grid-template-columns: 54px 1fr; gap: 16px; align-items: start; padding: 18px 20px; border: var(--line) solid var(--ink); background: var(--white); line-height: 1.5; }
.vet li::before { content: counter(v, decimal-leading-zero); display: grid; place-items: center; width: 54px; height: 54px; background: var(--blue); color: var(--white); border: var(--line) solid var(--ink); font: 900 1.3rem/1 var(--f-display); }
.vet li:nth-child(2)::before { background: var(--yellow); color: var(--ink); }
.vet li:nth-child(3)::before { background: var(--red); color: var(--ink); }
.vet li:nth-child(4)::before { background: var(--ink); color: var(--yellow); }
.vet b { display: block; font: 800 1.05rem/1.2 var(--f-display); margin-bottom: 2px; }
#about .founder { padding-top: clamp(36px, 5vw, 60px); border-top: var(--line) solid var(--ink); }
.rules-title { font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem); font-stretch: 112%; margin: clamp(56px, 7vw, 96px) 0 22px; }
.rules-title + .principles { margin-top: 0; }

/* Process with four steps */
.steps-4 { grid-template-columns: repeat(4, 1fr); gap: 22px; }
.steps-4 .step { grid-template-rows: calc(70px + 4 * 44px) auto; }
.steps-4 .step-bar { height: calc(70px + var(--n) * 44px); }
.steps-4 .step:nth-child(3) .step-bar { --c: var(--blue); color: var(--white); }
.steps-4 .step:nth-child(4) .step-bar { --c: var(--red); color: var(--ink); }

/* FAQ */
.faq { border: var(--line) solid var(--ink); background: var(--white); box-shadow: var(--shadow); }
.faq-item { border-bottom: var(--line) solid var(--ink); }
.faq-item:last-child { border-bottom: 0; }
.faq-item summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 34px; gap: 18px; align-items: center; padding: 20px 22px; font: 800 clamp(1.05rem, .95rem + .4vw, 1.3rem)/1.25 var(--f-display); font-stretch: 104%; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; content: "+" / ""; display: grid; place-items: center; width: 32px; height: 32px; border: 2px solid var(--ink); font: 700 1.1rem/1 var(--f-mono); transition: transform .3s var(--ease-spring), background .2s; }
.faq-item[open] summary::after { transform: rotate(45deg); background: var(--yellow); }
.faq-item summary:hover { background: var(--paper); }
.faq-a { padding: 0 22px 22px; max-width: 78ch; line-height: 1.6; color: var(--ink); }
.faq-a a { text-decoration: underline; text-underline-offset: .18em; }

/* Contact additions */
.next { list-style: none; counter-reset: n; margin: 40px 0 0; padding: 0; display: grid; gap: 12px; max-width: 46ch; }
.next li { counter-increment: n; display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: center; font-size: 1.02rem; line-height: 1.4; }
.next li::before { content: counter(n); display: grid; place-items: center; width: 40px; height: 40px; background: var(--ink); color: var(--yellow); font: 900 1.1rem/1 var(--f-display); }
.form select { font: 500 1rem/1.4 var(--f-body); padding: 13px 14px; border: var(--line) solid var(--ink); background: var(--white); color: var(--ink); border-radius: 0; width: 100%; text-transform: none; letter-spacing: 0; }
.form select:focus { outline: none; box-shadow: 4px 4px 0 var(--blue); }
.fh-gap { margin-top: 28px !important; }

/* ---------- Service pages ---------- */
.crumbs { padding-top: 22px; font: 400 .78rem/1.4 var(--f-mono); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; content: "/" / ""; margin-right: 6px; color: var(--muted); }
.crumbs a { text-decoration: none; border-bottom: 2px solid var(--yellow); }
.crumbs [aria-current] { color: var(--muted); }
.lp-hero { padding-block: clamp(28px, 5vw, 72px) clamp(48px, 7vw, 96px); display: grid; grid-template-columns: 7fr 5fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.lp-hero h1 { font-size: clamp(2.5rem, 1rem + 5.4vw, 6.6rem); font-stretch: 116%; font-weight: 850; letter-spacing: -.045em; line-height: .93; margin: 24px 0 28px; text-wrap: balance; }
.lp-hero h1 mark { background: var(--yellow); color: inherit; padding: 0 .08em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.lp-hero .lead { margin-bottom: 30px; }
.lp-hero .hero-note { margin-top: -22px; max-width: 52ch; font-size: .95rem; line-height: 1.5; color: var(--muted); }
.lp-card { --bg: var(--yellow); background: var(--bg); border: var(--line) solid var(--ink); box-shadow: var(--shadow-l); padding: clamp(20px, 2.6vw, 30px); display: grid; gap: 16px; transform: rotate(1deg); }
.lp-card.c-blue { --bg: var(--blue); color: var(--white); } .lp-card.c-red { --bg: var(--red); }
.lp-card h2 { font: 700 .78rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; padding-bottom: 12px; border-bottom: var(--line) solid currentColor; }
.lp-card dl { margin: 0; display: grid; gap: 14px; }
.lp-card dt { font: 700 .7rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .07em; opacity: .85; }
.lp-card dd { margin: 4px 0 0; font: 800 1.15rem/1.25 var(--f-display); font-stretch: 104%; }
.lp-card .big { font: 900 clamp(3rem, 2rem + 3vw, 4.6rem)/.9 var(--f-display); font-stretch: 120%; letter-spacing: -.05em; }
.lp-sec { padding-block: clamp(56px, 8vw, 110px); border-top: var(--line) solid var(--ink); }
.lp-sec.alt { background: var(--paper-2); }
.lp-sec h2 { font-size: clamp(2rem, 1rem + 3.4vw, 4rem); margin-bottom: clamp(26px, 3vw, 40px); max-width: 20ch; }
.lp-sec .sub { max-width: 64ch; margin: -14px 0 32px; }
.lp-sec p + p { margin-top: 14px; }
.lp-prose { max-width: 70ch; line-height: 1.65; }
.lp-prose p + p { margin-top: 14px; }
.signals { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.signals li { display: grid; grid-template-columns: 38px 1fr; gap: 14px; align-items: center; font-weight: 600; font-size: 1.05rem; padding: 16px 18px; border: var(--line) solid var(--ink); background: var(--white); box-shadow: var(--shadow-s); }
.signals li::before { content: "\2713"; content: "\2713" / ""; display: grid; place-items: center; width: 38px; height: 38px; background: var(--yellow); border: var(--line) solid var(--ink); font: 700 1.1rem/1 var(--f-mono); }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cards.two { grid-template-columns: repeat(2, 1fr); }
.card { --bg: var(--white); --fg: var(--ink); background: var(--bg); color: var(--fg); border: var(--line) solid var(--ink); box-shadow: var(--shadow); padding: clamp(20px, 2vw, 28px); display: flex; flex-direction: column; gap: 12px; }
.card.c-yellow { --bg: var(--yellow); } .card.c-blue { --bg: var(--blue); --fg: var(--white); } .card.c-red { --bg: var(--red); } .card.c-ink { --bg: var(--ink); --fg: var(--paper); box-shadow: 8px 8px 0 var(--red); }
.card .mono { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.card h3 { font-size: clamp(1.3rem, 1rem + .9vw, 1.8rem); }
.card p { line-height: 1.5; }
.card .list { font-size: .96rem; margin-top: 4px; }
.card .card-meta { margin-top: auto; padding-top: 12px; border-top: 2px dashed currentColor; font: 700 .74rem/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .04em; }
.lp-steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 0; border: var(--line) solid var(--ink); background: var(--white); }
.lp-steps li { counter-increment: s; padding: 22px 22px 26px; border-right: var(--line) solid var(--ink); display: grid; gap: 8px; align-content: start; }
.lp-steps li:last-child { border-right: 0; }
.lp-steps li::before { content: counter(s, decimal-leading-zero); font: 900 2.4rem/1 var(--f-display); font-stretch: 120%; letter-spacing: -.04em; color: var(--blue); }
.lp-steps b { font: 800 1.15rem/1.15 var(--f-display); }
.lp-steps p { font-size: .95rem; line-height: 1.45; color: var(--muted); }
.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border: var(--line) solid var(--ink); background: var(--white); box-shadow: var(--shadow); }
.fact { padding: 22px 22px 24px; border-bottom: var(--line) solid var(--ink); display: grid; gap: 8px; align-content: start; }
.fact:nth-child(odd) { border-right: var(--line) solid var(--ink); }
.fact:nth-last-child(-n + 2) { border-bottom: 0; }
.fact b { font: 900 clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem)/1 var(--f-display); font-stretch: 116%; letter-spacing: -.03em; }
.fact p { line-height: 1.5; }
.src { font: 400 .74rem/1.5 var(--f-mono); color: var(--muted); margin-top: 18px; }
.src a { text-decoration: underline; text-underline-offset: .18em; }
.sample { border: var(--line) solid var(--ink); background: var(--white); box-shadow: var(--shadow-l); max-width: 760px; }
.sample-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 20px; background: var(--ink); color: var(--paper); font: 700 .78rem/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; }
.sample-row { display: grid; grid-template-columns: 26px minmax(130px, 1fr) 2fr; gap: 14px; align-items: center; padding: 14px 20px; border-top: 2px solid var(--ink); }
.sample-row b { font: 800 1rem/1.2 var(--f-display); }
.sample-row span:last-child { font-size: .95rem; line-height: 1.4; color: var(--muted); }
.light { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--ink); }
.light.r { background: var(--red); } .light.a { background: var(--yellow); } .light.g { background: #3bb273; }
.sample-foot { padding: 14px 20px; border-top: var(--line) solid var(--ink); font: 400 .76rem/1.4 var(--f-mono); color: var(--muted); }
.cta-band { background: var(--red); border-top: var(--line) solid var(--ink); padding-block: clamp(56px, 8vw, 100px); position: relative; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, rgb(13 13 15 / .06) 0 2px, transparent 2px 14px); pointer-events: none; }
.cta-band .wrap { position: relative; display: grid; grid-template-columns: 7fr 5fr; gap: clamp(24px, 4vw, 56px); align-items: end; }
.cta-band h2 { font-size: clamp(2.4rem, 1rem + 5vw, 6rem); font-stretch: 120%; font-weight: 900; letter-spacing: -.05em; line-height: .88; }
.cta-band p { font-size: 1.1rem; line-height: 1.5; margin-bottom: 22px; max-width: 46ch; }
.cta-band .hero-ctas { margin-bottom: 0; }
.related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.related a { display: grid; gap: 8px; padding: 20px; border: var(--line) solid var(--ink); background: var(--white); text-decoration: none; box-shadow: var(--shadow-s); transition: transform .14s var(--ease-out), box-shadow .14s var(--ease-out), background .2s; }
.related a:hover { transform: translate(-3px, -3px); box-shadow: 7px 7px 0 var(--ink); background: var(--yellow); }
.related .mono { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.related b { font: 800 1.2rem/1.15 var(--f-display); }
.updated { font: 400 .76rem/1.4 var(--f-mono); color: var(--muted); margin-top: 18px; }
.note-box { border: var(--line) dashed var(--ink); background: var(--paper); padding: 16px 18px; line-height: 1.5; max-width: 70ch; margin-top: 26px; }
.familiar-lead { position: relative; max-width: 62ch; margin: calc(-1 * clamp(16px, 2vw, 32px)) 0 clamp(28px, 3.4vw, 44px); font-size: 1.08rem; line-height: 1.5; opacity: .85; }
.copy-box { display: grid; gap: 12px; margin-top: 18px; }
.copy-area { display: block; width: 100%; min-height: 8em; margin-top: 14px; resize: vertical; font: 400 .85rem/1.45 var(--f-mono); color: var(--ink); background: var(--white); border: 2px solid var(--ink); padding: 12px; }
.copy-box .copy-area { margin-top: 0; }
.copy-box .btn { justify-self: start; }
.check-copy-status { font: 700 .82rem/1.45 var(--f-body); margin-top: 14px; }
.check-copy-status:empty { margin-top: 0; } /* stays in the accessibility tree so the live region is announced */
@media (width > 1180px) {
  .lp-steps.c3 { --cols: 3; }
  .lp-steps.c3 li:nth-child(3n) { border-right: 0; }
  .lp-steps.c3 li:nth-child(-n + 3) { border-bottom: var(--line) solid var(--ink); }
  .lp-steps.c5 { --cols: 5; }
}
.lp-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.eol { border: var(--line) solid var(--ink); background: var(--white); box-shadow: var(--shadow); max-width: 760px; }
.eol-row { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 14px 20px; border-top: 2px solid var(--ink); align-items: baseline; }
.eol-row:first-child, .eol > .sr-only + .eol-row { border-top: 0; }
.eol-row b { font: 800 1.02rem/1.25 var(--f-display); }
.eol-row span { font: 700 .86rem/1.2 var(--f-mono); white-space: nowrap; }
.eol-row.hot { background: var(--yellow); }
.story.wide { max-width: 860px; }
.stories.two { grid-template-columns: repeat(2, 1fr); }
.lp-steps.stack { --cols: 1 !important; }
.lp-steps.stack li { grid-template-columns: 64px 1fr; column-gap: 16px; border-right: 0 !important; border-bottom: var(--line) solid var(--ink) !important; }
.lp-steps.stack li:last-child { border-bottom: 0 !important; }
.lp-steps.stack li::before { grid-row: 1 / span 2; }
.lp-steps.stack li > * { grid-column: 2; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: clamp(40px, 5vw, 64px); border: var(--line) solid var(--ink); background: var(--white); box-shadow: var(--shadow); }
.stat { padding: 22px 22px 24px; border-right: var(--line) solid var(--ink); display: flex; flex-direction: column; gap: 10px; }
.stat:last-child { border-right: 0; }
.stat b { font: 900 clamp(2.6rem, 1.8rem + 2.4vw, 4rem)/.9 var(--f-display); font-stretch: 120%; letter-spacing: -.05em; }
.stat:nth-child(1) b { color: var(--blue); } .stat:nth-child(3) b { color: var(--red); }
.stat p { line-height: 1.45; font-weight: 600; }
.stat small { margin-top: auto; font: 400 .72rem/1.4 var(--f-mono); color: var(--muted); }
.stats-note { font: 400 .76rem/1.5 var(--f-mono); color: var(--muted); margin-top: 14px; max-width: 90ch; }
.stats-note a { text-decoration: underline; text-underline-offset: .18em; }
.lp-steps + .cards, .cards + .lp-split { margin-top: clamp(28px, 4vw, 48px); }
.lp-split .rules-title { margin-top: 0; }
.lp-split h2 + .lp-steps { margin-top: 0; }
.card-meta a { text-decoration: none; border-bottom: 2px solid currentColor; }
.lp-card p:not(.big) { line-height: 1.45; }
.story.wide .story-cols { grid-template-columns: 1fr 1fr; }

/* ---------- Plain pages: privacy, 404 ---------- */
.nav.plain .lang { margin-left: auto; }
.page { padding-block: clamp(56px, 8vw, 110px); border-top: var(--line) solid var(--ink); }
.page-in { max-width: 74ch; }
.page h1 { font: 900 clamp(2.6rem, 1.6rem + 4vw, 5.4rem)/.95 var(--f-display); font-stretch: 112%; letter-spacing: -.035em; margin: 18px 0 30px; }
.page h2 { font: 800 clamp(1.25rem, 1.1rem + .6vw, 1.6rem)/1.15 var(--f-display); font-stretch: 106%; margin: 42px 0 12px; }
.page p, .page li { line-height: 1.6; }
.page p + p { margin-top: 12px; }
.page ul { padding-left: 1.2em; margin-top: 10px; }
.page a:not(.btn) { text-decoration: underline; text-underline-offset: .18em; }
.page .hero-ctas { margin-top: 34px; }
.big-404 { font: 900 clamp(7rem, 4rem + 18vw, 18rem)/.8 var(--f-display); font-stretch: 125%; letter-spacing: -.06em; color: var(--red); -webkit-text-stroke: 4px var(--ink); }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .nav-links a { padding: .55em .55em; }
  .brand-name { display: none; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .quotes { grid-template-columns: repeat(2, 1fr); }
  .g-detail { grid-template-columns: 1fr 1fr; }
  .principles { grid-template-columns: repeat(2, 1fr); }
  .principle:nth-child(4n) { border-right: var(--line) solid var(--ink); }
  .principle:nth-child(2n) { border-right: 0; }
  .principle:nth-last-child(-n + 4) { border-bottom: var(--line) solid var(--ink); }
  .principle:nth-last-child(-n + 2) { border-bottom: 0; }
}
@media (max-width: 960px) {
  :root { --header-h: 68px; }
  .menu-btn { display: grid; align-content: center; justify-items: center; gap: 4px; }
  .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--paper); }
  .nav { gap: 14px; }
  .nav-links, .nav > .lang, .nav > .btn { display: none; }
  .nav.plain > .lang { display: flex; }
  .menu-open .nav-links {
    display: flex; flex-direction: column; position: fixed; left: 0; right: 0; top: var(--header-h); bottom: 0;
    background: var(--paper); padding: 24px var(--gutter); gap: 10px; border-top: var(--line) solid var(--ink); overflow-y: auto;
  }
  .menu-open .nav-links a { font: 800 2rem/1.1 var(--f-display); font-stretch: 112%; padding: .4em .5em; border: var(--line) solid var(--ink); background: var(--white); box-shadow: var(--shadow-s); }
  .menu-open .nav-links .m-extra { display: flex; gap: 12px; margin-top: 14px; }
  .menu-open .nav-links .m-lang { font: 700 1rem/1 var(--f-mono); padding: 1em 1.2em; background: var(--white); }
  .menu-open .nav-links .m-extra .btn { font: 700 1.05rem/1 var(--f-body); background: var(--red); flex: 1; padding: 1em; text-align: center; }
  .hero-grid, .sec-head, .founder, .contact-grid { grid-template-columns: 1fr; }
  .hero-copy, .comp-wrap, .sec-head h2, .sec-head .lead { grid-column: 1 / -1; }
  .comp-wrap { max-width: 560px; width: 100%; margin: 48px auto 0; }
  .comp { aspect-ratio: 1 / 1; }
  .comp-hint { display: none; }
  .why-row { grid-template-columns: 1fr; }
  .why-num { font-size: 6rem; }
  .steps { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .step { grid-template-rows: calc(70px + 6 * 34px) auto; }
  .principles { grid-template-columns: 1fr; }
  .principle { border-right: 0 !important; border-bottom: var(--line) solid var(--ink) !important; }
  .principle:last-child { border-bottom: 0 !important; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .portrait { max-width: 460px; }
}
@media (width > 960px) { .m-extra { display: none !important; } }
@media (max-width: 640px) {
  body { font-size: 1rem; }
  .hero h1 { font-stretch: 100%; letter-spacing: -.04em; font-size: clamp(2.35rem, 1.2rem + 6vw, 3.4rem); }
  h2 { font-stretch: 100%; }
  .contact h2 { font-stretch: 112%; }
  .hero-ctas .btn { flex: 1 1 100%; }
  .bento { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .quotes { grid-template-columns: 1fr; }
  .g-axis { display: none; }
  .g-sum { grid-template-columns: 1fr; }
  .g-label { border-right: 0; border-bottom: 2px dashed var(--ink); }
  .g-track { padding: 18px 14px 18px 0; }
  .g-bar span { font-size: .7rem; }
  .g-detail { grid-template-columns: 1fr; padding: 22px 18px; }
  .steps { grid-template-columns: 1fr; gap: 14px; }
  .step { grid-template-columns: 76px 1fr; grid-template-rows: auto; align-items: start; gap: 16px; }
  .step-bar { align-self: start; }
  .step-bar { height: 76px; transform-origin: left; }
  .js .steps:not(.in) .step-bar { transform: scaleX(0); }
  .step-bar span { font-size: 2rem; }
  .form .two { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .familiar { box-shadow: 8px 8px 0 var(--red); }
  .qmark { font-size: 14rem; top: -40px; }
  .comp-readout { font-size: .66rem; }
  .models { grid-template-columns: 1fr; }
}

/* v0.3.0 responsive rules for the new components */
@media (max-width: 1180px) {
  .quotes.q6 { grid-template-columns: repeat(2, 1fr); }
  .stories { grid-template-columns: repeat(2, 1fr); }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .lp-steps { --cols: 2 !important; }
  .lp-steps li { border-bottom: var(--line) solid var(--ink); }
  .lp-steps li:nth-child(2n) { border-right: 0; }
  .lp-steps li:last-child, .lp-steps li:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
  .cards > :last-child:nth-child(odd), .lp-steps:not(.stack) li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .lp-steps:not(.stack) li:last-child:nth-child(odd) { border-right: 0; }
}
@media (max-width: 960px) {
  .now-grid { grid-template-columns: 1fr; }
  .bal-row { grid-template-columns: 1fr 1fr; }
  .bal-row .bal-k { grid-column: 1 / -1; border-right: 0; border-bottom: 2px solid var(--ink); background: var(--paper); }
  .bal-head > span:first-child { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .check-list { grid-template-columns: 1fr; }
  .check-result { grid-template-columns: 1fr; }
  .score { width: 170px; }
  .exp, .network { grid-template-columns: 1fr; }
  .steps-4 { grid-template-columns: repeat(2, 1fr); row-gap: 36px; }
  .lp-hero { grid-template-columns: 1fr; }
  .lp-card { transform: none; max-width: 560px; }
  .signals { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; }
  .fact { border-right: 0 !important; border-bottom: var(--line) solid var(--ink) !important; }
  .fact:last-child { border-bottom: 0 !important; }
  .cta-band .wrap { grid-template-columns: 1fr; }
  .related { grid-template-columns: 1fr; }
  .lp-split { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(-n + 2) { border-bottom: var(--line) solid var(--ink); }
}
@media (max-width: 640px) {
  .quotes.q6, .stories, .cards, .cards.two { grid-template-columns: 1fr; }
  .exp-list { grid-template-columns: 1fr; }
  .exp-list li { border-right: 0 !important; border-bottom: var(--line) solid var(--ink) !important; }
  .exp-list li:last-child { border-bottom: 0 !important; }
  .bal-row > span { padding: 14px 14px; font-size: .95rem; }
  .bal-row:not(.bal-head) .bal-us::before { width: 22px; height: 22px; margin-right: 8px; }
  .seg { margin-left: 0; display: flex; }
  .seg label { flex: 1; text-align: center; }
  .check-q legend { grid-template-columns: 2em 1fr; }
  .steps-4 { grid-template-columns: 1fr; gap: 14px; }
  .steps-4 .step { grid-template-columns: 76px 1fr; grid-template-rows: auto; }
  .steps-4 .step-bar { height: 76px; }
  .lp-steps { --cols: 1 !important; }
  .lp-steps li { border-right: 0 !important; border-bottom: var(--line) solid var(--ink) !important; }
  .lp-steps li:last-child { border-bottom: 0 !important; }
  .sample-row { grid-template-columns: 24px 1fr; }
  .sample-row span:last-child { grid-column: 2; }
  .story.wide .story-cols { grid-template-columns: 1fr; }
  .stories.two { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .stat { border-right: 0 !important; border-bottom: var(--line) solid var(--ink); }
  .stat:last-child { border-bottom: 0; }
  .eol-row { grid-template-columns: 1fr; gap: 4px; }
  .svc-filter button { flex: 1 1 calc(50% - 10px); justify-content: space-between; }
  .now-v { font-size: 2.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .rv, .js .rv:not(.in) { opacity: 1; transform: none; }
  .hero h1 .w > span { transform: none; }
  .marquee-track, .js .marquee-track { animation: none; }
}

@media print {
  .site-header, .marquee, .comp-wrap, .drawer, .form, .svc-filter, .door-btn, .check-bar { display: none !important; }
  .tile-more { display: block !important; }
  body::after { display: none; }
  .rv, .js .rv:not(.in) { opacity: 1 !important; transform: none !important; animation: none !important; }
  .js .gantt:not(.in) .g-bar, .js .steps:not(.in) .step-bar { transform: none !important; }
}