/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   Crestmont design system v3 (BRAND-002..006) — docs/frontend/DESIGN.md · motion: docs/frontend/MOTION.md
   Reference-matched composition in the approved dark colourway: rich-black pages, charcoal raised panels,
   white headings, grey supporting text, Crestmont gold as the accent. Dark tokens are the default; `.on-dark`
   re-scopes every token for raised charcoal panels, so components render correctly on either surface.
   Every class name used by the server markup is kept.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── 0. Self-hosted type (SIL OFL 1.1 — licence in /assets/fonts/Inter-OFL.txt) ──────────────── */
@font-face { font-family: "Inter Display"; src: url("/assets/fonts/InterDisplay-Medium.woff") format("woff"); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/Inter-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/Inter-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/Inter-SemiBold.woff") format("woff"); font-weight: 600 700; font-style: normal; font-display: swap; }

/* ── 1. Tokens ─────────────────────────────────────────────────────────────────────────────────── */
:root {
  /* surfaces (dark) — ink-0 page (rich black), ink-1 band, ink-2 card, ink-3 control, ink-4 pressed */
  --ink-0: #080808;
  --ink-1: #101010;
  --ink-2: #141414;
  --ink-3: #1a1a1a;
  --ink-4: #232323;
  --line: #242424;
  --line-2: #313131;
  --line-control: #737373;   /* form-control boundary ≥ 3:1 on --ink-3 (WCAG 1.4.11) */
  --line-gold: #4f4128;
  /* gold — the approved Crestmont gold; --gold-1 is the text-safe tint used on dark surfaces */
  --gold-1: #e6c582;
  --gold-2: #d7b56f;
  --gold-3: #a88b52;
  --gold-pale: #f1dfb0;
  --gold-wash: rgba(215, 181, 111, .08);
  --gold-ring: rgba(215, 181, 111, .24);
  /* text */
  --white: #f5f5f5;          /* strongest text (headings) */
  --text: #e2e2e2;
  --text-2: #b8b8b8;
  --text-3: #959595;
  --on-gold: #0d0d0d;
  --black: #080808;
  /* status — always paired with words */
  --ok: #79c795;
  --warn: #e4b652;
  --bad: #e8877a;
  --info: #8db2e2;
  --focus: #f0d68f;
  color-scheme: dark;
  --font-display: "Inter Display", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --fs-xs: .78rem; --fs-sm: .875rem; --fs-md: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.375rem; --fs-2xl: 1.75rem;
  --fs-3xl: clamp(2rem, 3.6vw, 2.9rem);
  --fs-4xl: clamp(2.4rem, 5vw, 4rem);
  --fs-5xl: clamp(2.6rem, 6.4vw, 5.4rem);
  /* space */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 7rem; --s-10: 10rem;
  --gutter: 16px;
  --max: 1240px;
  --max-wide: 1360px;
  /* shape & depth */
  --r-1: 4px; --r-2: 8px; --r-3: 16px; --r-4: 24px;
  --radius: var(--r-1); --radius-lg: var(--r-2);
  --shadow-1: 0 1px 0 rgba(255,255,255,.03) inset, 0 24px 48px -24px rgba(0,0,0,.9);
  --shadow: none;
  /* motion */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-fast: 140ms;
  --t-med: 280ms;
  --t-slow: 520ms;
  --header-h: 72px;
  --intro-offset: 80ms;      /* hero sequence start; raised to follow the M01 intro when it plays */
}
@media (min-width: 640px) { :root { --gutter: 24px; } }
@media (min-width: 1100px) { :root { --gutter: 40px; } }

/* Raised charcoal panels (the featured package, "Working with Crestmont", the closing contact band, the hero
   price panel) re-scope the surface tokens one step up from the rich-black page. The dark shells keep the page
   tokens. */
.on-dark {
  --ink-0: #141414; --ink-1: #181818; --ink-2: #1d1d1d; --ink-3: #222222; --ink-4: #2a2a2a;
  --line: #2c2c2c; --line-2: #383838; --line-control: #767676; --line-gold: #5a4b2e;
  --white: #ffffff;
  color: var(--text);
}
.site-footer, .sidebar, .auth-aside, .intro, .draft-banner { color: var(--text); }

/* ── 2. Base ──────────────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0; background: var(--ink-0); color: var(--text);
  font: 400 var(--fs-md)/1.6 var(--font-body); font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--gold-1); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--t-fast) var(--ease-out); }
a:hover { color: var(--white); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--gold-2); color: var(--on-gold); }
h1, h2, h3, h4 { color: var(--white); margin: 0 0 var(--s-4); text-wrap: balance; }
h1, h2 { font-family: var(--font-display); font-weight: 500; line-height: 1.04; letter-spacing: -.035em; }
h3, h4 { font-family: var(--font-body); font-weight: 600; line-height: 1.25; letter-spacing: -.012em; }
h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
p { margin: 0 0 var(--s-4); text-wrap: pretty; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-6) 0; }
strong { color: var(--white); font-weight: 600; }
small, .muted { color: var(--text-2); }
.faint { color: var(--text-3); }
code, kbd { font-family: var(--font-mono); font-size: .88em; overflow-wrap: anywhere; word-break: break-word; }
.skip { position: absolute; left: -999px; top: var(--s-2); background: var(--gold-2); color: var(--on-gold); padding: var(--s-2) var(--s-4); z-index: 400; border-radius: var(--r-1); font-weight: 600; text-decoration: none; }
.skip:focus { left: var(--s-4); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.on-dark { background-color: var(--ink-0); }
html { background: #080808; }

/* ── 3. Layout utilities ──────────────────────────────────────────────────────────────────────── */
.container { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.container--wide { max-width: calc(var(--max-wide) + 2 * var(--gutter)); }
.grid { display: grid; gap: var(--s-5); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.grid > *, .kpis > *, .exec-grid > *, .form-layout > * { min-width: 0; }
.stack > * + * { margin-top: var(--s-4); }
.row { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.right { margin-left: auto; }
/* Section label: "/ Our services" — a slash marker in gold, sentence-case text. */
.eyebrow, .section__label { display: inline-flex; align-items: center; gap: .45em; margin: 0 0 var(--s-4); font: 500 var(--fs-sm)/1.2 var(--font-body); color: var(--text-2); letter-spacing: -.005em; }
.eyebrow::before, .section__label::before { content: "/"; color: var(--gold-1); font-weight: 600; }
.lede { font-size: clamp(1.02rem, 1.25vw, 1.15rem); line-height: 1.6; color: var(--text-2); max-width: 38rem; }
.rule-gold { height: 1px; background: linear-gradient(90deg, transparent, var(--gold-3), transparent); border: 0; }

/* ── 4. Brand mark ────────────────────────────────────────────────────────────────────────────── */
.brand { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; color: var(--white); flex: none; }
.brand:hover { color: var(--white); }
/* The crest PNG (84×82, opaque #0d0d0d background) sits in a black tile of exactly that colour, at 2× density.
   On dark surfaces the tile is invisible; on light surfaces it reads as a deliberate badge. Never upscaled. */
.brand__tile { width: 48px; height: 48px; flex: none; display: grid; place-items: center; background: #0d0d0d; border-radius: 12px; transition: transform var(--t-med) var(--ease-out); }
.brand:hover .brand__tile { transform: translateY(-1px); }
.brand__mark { width: 42px; height: 41px; flex: none; }
.logo-lockup { width: 232px; max-width: 100%; height: auto; }
.logo-lockup--half { width: 116px; }
.brand__word { display: block; font: 600 1rem/1 var(--font-body); letter-spacing: .2em; color: var(--white); }
.brand__sub { display: block; font: 500 .58rem/1 var(--font-body); letter-spacing: .22em; color: var(--gold-1); margin-top: 6px; }
/* Artwork on black: blend so the PNG's flat background (incl. a #0e0e0e patch) dissolves; the asset is untouched. */
.on-dark .brand__mark, .sidebar .brand__mark, .site-footer .brand__mark, .auth-aside img, .intro img, .cta-mark img { mix-blend-mode: lighten; filter: contrast(1.04); }

/* ── 5. Public header & navigation ────────────────────────────────────────────────────────────── */
.site-header { position: sticky; top: 0; z-index: 60; background: rgba(8, 8, 8, .86); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid transparent; transition: border-color var(--t-med) var(--ease-out), background-color var(--t-med) var(--ease-out); }
.site-header[data-scrolled="true"] { border-bottom-color: var(--line); background: rgba(8, 8, 8, .94); }
.site-header .container { display: flex; align-items: center; gap: var(--s-5); min-height: var(--header-h); max-width: calc(var(--max-wide) + 2 * var(--gutter)); }
.nav { display: flex; gap: var(--s-1); margin-left: auto; align-items: center; }
.nav a:not(.btn) { position: relative; color: var(--text-2); text-decoration: none; font-size: var(--fs-sm); font-weight: 500; padding: var(--s-2) var(--s-3); border-radius: var(--r-1); transition: color var(--t-fast) var(--ease-out); }
.nav a:not(.btn)::after { content: ""; position: absolute; left: var(--s-3); right: var(--s-3); bottom: 3px; height: 1.5px; background: var(--gold-2); transform: scaleX(0); transform-origin: left; transition: transform var(--t-med) var(--ease-out); }
.nav a:not(.btn):hover { color: var(--white); }
.nav a:not(.btn):hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--white); }
.nav .btn { margin-left: var(--s-3); }
.nav__account { margin-left: var(--s-3); padding-left: var(--s-4) !important; border-left: 1px solid var(--line); border-radius: 0 !important; }
.nav-toggle { display: none; align-items: center; gap: var(--s-2); margin-left: auto; min-height: 44px; background: var(--ink-2); border: 1px solid var(--line-2); color: var(--text); padding: 0 var(--s-3); border-radius: var(--r-2); font: 500 var(--fs-sm)/1 var(--font-body); cursor: pointer; transition: border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); }
.nav-toggle:hover { border-color: var(--line-control); color: var(--white); }
.nav-toggle__icon { position: relative; width: 16px; height: 10px; flex: none; }
.nav-toggle__icon::before, .nav-toggle__icon::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; border-radius: 1px; transition: transform var(--t-med) var(--ease-in-out), top var(--t-med) var(--ease-in-out); }
.nav-toggle__icon::before { top: 1px; }
.nav-toggle__icon::after { top: 7.5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before { top: 4.25px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after { top: 4.25px; transform: rotate(-45deg); }
@media (max-width: 1020px) {
  .site-header .nav-toggle { display: inline-flex; }
  .site-header .nav {
    position: absolute; top: var(--header-h); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ink-0); border-bottom: 1px solid var(--line); padding: var(--s-3) var(--gutter) var(--s-6);
    height: calc(100dvh - var(--header-h)); max-height: calc(100dvh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain;
    visibility: hidden; opacity: 0; transform: translateY(-8px); pointer-events: none;
    transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out), visibility 0s linear var(--t-med);
  }
  .site-header .nav[data-open="true"] { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out), visibility 0s; }
  .site-header .nav a:not(.btn) { font: 500 var(--fs-xl)/1.2 var(--font-display); letter-spacing: -.02em; color: var(--white); padding: var(--s-4) 0; border-bottom: 1px solid var(--line); border-radius: 0; }
  .site-header .nav a:not(.btn)::after { display: none; }
  .site-header .nav a[aria-current="page"] { color: var(--gold-1); }
  .nav__account { margin-left: 0; padding-left: 0 !important; border-left: 0; }
  .site-header .nav .btn { margin: var(--s-5) 0 0; min-height: 52px; font-size: var(--fs-md); }
  body[data-nav-open="true"] { overflow: hidden; }
}

/* ── 6. Buttons (M03) ─────────────────────────────────────────────────────────────────────────────
   Layers: the button face (background + label), an optional arrow square, and — built lazily by app.js on first
   hover/focus — a tile layer (.btn__fx). Each tile shows the hover face (gold, black label) clipped to its cell, so
   the label is legible at every moment of the fill. Tokens per variant: --btn-bg/fg, --fx-bg/fg, --arrow-bg/fg. */
.btn {
  --btn-bg: var(--gold-2); --btn-fg: var(--on-gold); --btn-bd: transparent; --fx-bg: var(--gold-pale); --fx-fg: var(--on-gold);
  --arrow-bg: var(--black); --arrow-fg: var(--gold-2); --fx-arrow-bg: var(--black); --fx-arrow-fg: var(--gold-pale);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3); min-height: 44px; padding: 0 var(--s-5);
  border-radius: var(--r-2); font: 500 var(--fs-sm)/1 var(--font-body); letter-spacing: -.005em; text-decoration: none; cursor: pointer;
  background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-bd); white-space: nowrap; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.btn:hover { color: var(--btn-fg); }
.btn:active:not([disabled]):not([aria-disabled="true"]) { transform: scale(.98); }
.btn--primary { --btn-bg: var(--gold-2); --btn-fg: var(--on-gold); }
.btn--secondary { --btn-bg: transparent; --btn-fg: var(--white); --btn-bd: var(--line-gold); --fx-bg: var(--gold-2); --arrow-bg: var(--gold-2); --arrow-fg: var(--on-gold); --fx-arrow-bg: var(--black); --fx-arrow-fg: var(--gold-2); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--text-2); }
.btn--ghost:hover { --btn-bg: var(--ink-4); --btn-fg: var(--white); }
.btn--danger { --btn-bg: transparent; --btn-fg: var(--bad); --btn-bd: color-mix(in srgb, var(--bad) 45%, transparent); }
.btn--danger:hover { --btn-bg: color-mix(in srgb, var(--bad) 10%, transparent); }
.on-dark .btn--primary, .site-footer .btn--primary, .sidebar .btn--primary, .auth-aside .btn--primary { --btn-bg: var(--gold-2); --btn-fg: var(--on-gold); --fx-bg: var(--gold-pale); --arrow-bg: var(--black); --arrow-fg: var(--gold-2); --fx-arrow-bg: var(--black); --fx-arrow-fg: var(--gold-pale); }
.on-dark .btn--secondary, .site-footer .btn--secondary, .sidebar .btn--secondary { --btn-bg: transparent; --btn-fg: var(--white); --btn-bd: var(--line-gold); --fx-bg: var(--gold-2); --arrow-bg: var(--gold-2); --arrow-fg: var(--on-gold); --fx-arrow-bg: var(--black); --fx-arrow-fg: var(--gold-2); }
.on-dark .btn--ghost:hover, .sidebar .btn--ghost:hover { --btn-bg: var(--ink-3); }
.btn--sm { min-height: 34px; padding: 0 var(--s-3); font-size: var(--fs-xs); border-radius: var(--r-1); }
.btn--lg { min-height: 52px; padding: 0 var(--s-6); font-size: var(--fs-md); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
/* CTA arrow square */
.btn--cta { padding-right: 6px; gap: var(--s-4); min-height: 48px; }
.btn--cta.btn--sm { min-height: 38px; padding-right: 4px; gap: var(--s-3); }
.btn__label { position: relative; }
.btn__arrow { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 6px; background: var(--arrow-bg); color: var(--arrow-fg); flex: none; transition: background-color 80ms linear, color 80ms linear; }
.btn--sm .btn__arrow { width: 30px; height: 30px; border-radius: 4px; }
.btn__arrow svg { width: 14px; height: 14px; transition: transform var(--t-med) var(--ease-out); }
.btn--cta:hover .btn__arrow, .btn--cta:focus-visible .btn__arrow { background: var(--fx-arrow-bg); color: var(--fx-arrow-fg); }
.btn--cta:hover .btn__arrow svg, .btn--cta:focus-visible .btn__arrow svg { transform: translate(1px, -1px); }
/* tile layer */
.btn__fx { position: absolute; inset: -1px; pointer-events: none; z-index: 1; border-radius: inherit; overflow: hidden; }
.btn__tile { position: absolute; overflow: hidden; opacity: 0; visibility: hidden; transition: opacity 40ms linear 0ms, visibility 0s linear 40ms; }
.btn__face { position: absolute; display: flex; align-items: center; background: var(--fx-bg); color: var(--fx-fg); white-space: nowrap; }
.btn__face .btn__arrow { background: var(--fx-arrow-bg); color: var(--fx-arrow-fg); }
.btn:hover .btn__tile, .btn:focus-visible .btn__tile { opacity: 1; visibility: visible; transition: opacity 70ms linear var(--d, 0ms), visibility 0s linear var(--d, 0ms); }
.btn[disabled] .btn__fx, .btn[aria-disabled="true"] .btn__fx { display: none; }
.btn.btn--fx-arming .btn__tile { opacity: 0 !important; visibility: hidden !important; transition: none !important; }
.nav a.btn--primary, .nav a.btn--primary:hover { color: var(--btn-fg); }

/* ── 7. Cards ─────────────────────────────────────────────────────────────────────────────────── */
.card { position: relative; background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--s-5); }
.card--gold { border-color: var(--line-gold); }
.card__title { font: 600 var(--fs-lg)/1.3 var(--font-body); color: var(--white); margin: 0 0 var(--s-2); letter-spacing: -.012em; }
.card--feature { padding-top: var(--s-6); }
.card--feature::before { content: ""; position: absolute; top: var(--s-5); left: var(--s-5); width: 8px; height: 8px; border-radius: 2px; background: var(--gold-2); }
.card--feature .card__title { margin-top: var(--s-3); }
.card--link { display: block; text-decoration: none; color: inherit; transition: border-color var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out); }
.card--link:hover { border-color: var(--line-2); color: inherit; transform: translateY(-2px); }
.card--link .card__more { display: inline-flex; gap: var(--s-2); margin-top: var(--s-2); font-size: var(--fs-sm); font-weight: 600; color: var(--gold-1); }
.card--quiet { background: var(--ink-1); margin-top: var(--s-4); }
.price { font: 500 clamp(2.2rem, 3.4vw, 2.9rem)/1 var(--font-display); color: var(--white); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.035em; }
.price small { font: 400 var(--fs-sm) var(--font-body); color: var(--text-3); letter-spacing: 0; }
.checklist { list-style: none; padding: 0; margin: var(--s-4) 0; }
.checklist li { padding: 7px 0 7px 28px; position: relative; font-size: var(--fs-sm); color: var(--text-2); }
.checklist li::before { content: ""; position: absolute; left: 0; top: 9px; width: 16px; height: 16px; border-radius: 4px; background: var(--gold-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 8.3l2.4 2.3 5.2-5.2' fill='none' stroke='%230d0d0d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; }
.checklist s { color: var(--text-3); }

/* ── 8. Forms ─────────────────────────────────────────────────────────────────────────────────── */
.field { display: grid; gap: var(--s-2); margin-bottom: var(--s-4); min-width: 0; }
.field label, .label { font-size: var(--fs-sm); font-weight: 500; color: var(--text); }
.field .hint { font-size: var(--fs-xs); color: var(--text-3); line-height: 1.5; }
.field .error-text { font-size: var(--fs-xs); color: var(--bad); font-weight: 500; }
.error-text { color: var(--bad); }
.input, .select, .textarea {
  width: 100%; min-height: 44px; background: var(--ink-3); color: var(--white); border: 1px solid var(--line-control); border-radius: var(--r-2);
  padding: var(--s-2) var(--s-3); font: inherit; font-size: max(16px, 1rem); line-height: 1.4;
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.input::placeholder, .textarea::placeholder { color: var(--text-3); opacity: 1; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--text-3); }
.textarea { min-height: 120px; resize: vertical; }
.select { appearance: none; -webkit-appearance: none; padding-right: 2.4rem; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.select[multiple] { background-image: none; padding-right: var(--s-3); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--gold-1); outline: none; box-shadow: 0 0 0 3px var(--gold-ring); background: var(--ink-2); }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--bad); }
.input[aria-invalid="true"]:focus, .select[aria-invalid="true"]:focus, .textarea[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 25%, transparent); }
input[type="file"].input { padding: var(--s-2); }
input[type="file"]::file-selector-button { margin-right: var(--s-3); border: 1px solid var(--line-2); background: var(--ink-2); color: var(--white); border-radius: var(--r-1); padding: 6px 12px; font: 500 var(--fs-xs) var(--font-body); cursor: pointer; }
input[type="date"].input, input[type="datetime-local"].input { color-scheme: inherit; }
.checkbox { display: flex; gap: var(--s-2); align-items: flex-start; font-size: var(--fs-sm); cursor: pointer; }
.checkbox input, input[type="radio"] { margin-top: .28em; accent-color: var(--gold-2); width: 16px; height: 16px; flex: none; }
.on-dark .checkbox input, .on-dark input[type="radio"] { accent-color: var(--gold-2); }
fieldset { border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--s-4) var(--s-5); margin: 0 0 var(--s-5); min-width: 0; }
legend { padding: 0 var(--s-2); font: 600 var(--fs-md) var(--font-body); color: var(--white); }
.form-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-5); align-items: center; }
.dropzone { border: 1px dashed var(--line-control); border-radius: var(--r-3); padding: var(--s-5); text-align: center; color: var(--text-2); background: var(--ink-3); transition: border-color var(--t-fast), background-color var(--t-fast); }
.dropzone:focus-within, .dropzone[data-over="true"] { border-color: var(--gold-1); background: var(--gold-wash); }
.form-grid { gap: 0 var(--s-5); }
.form-layout { align-items: start; }
.form-note { font-size: var(--fs-xs); }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
form.row { align-items: flex-end; }
form.row .field { margin-bottom: 0; flex: 1 1 180px; }
fieldset.field { border: 0; padding: 0; margin: 0 0 var(--s-4); }
fieldset.field > legend { font-size: var(--fs-sm); color: var(--text-2); margin-bottom: var(--s-2); padding: 0; }
.btn[data-busy="true"] > :not(.btn__fx), .btn[data-busy="true"] { color: transparent !important; }
.btn[data-busy="true"]::after { content: ""; position: absolute; inset: 0; margin: auto; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid; border-color: var(--btn-fg) var(--btn-fg) transparent transparent; animation: spin .7s linear infinite; z-index: 2; }
@keyframes spin { to { transform: rotate(1turn); } }

/* ── 9. Alerts, toasts, badges ────────────────────────────────────────────────────────────────── */
.alert { position: relative; border: 1px solid var(--line); border-left: 3px solid var(--info); background: var(--ink-2); padding: var(--s-3) var(--s-4); border-radius: var(--r-2); margin-bottom: var(--s-4); font-size: var(--fs-sm); color: var(--text); }
.alert ul { margin: var(--s-2) 0 0; padding-left: 1.2em; }
.alert--success { border-left-color: var(--ok); }
.alert--error { border-left-color: var(--bad); background: color-mix(in srgb, var(--bad) 6%, var(--ink-2)); }
.alert--warn { border-left-color: var(--warn); background: color-mix(in srgb, var(--warn) 6%, var(--ink-2)); }
.alert--info { border-left-color: var(--info); }
.toast { position: fixed; right: var(--s-5); bottom: var(--s-5); z-index: 220; max-width: 400px; margin: 0; padding-right: var(--s-7); box-shadow: var(--shadow-1); background: var(--ink-2); animation: toast-in var(--t-med) var(--ease-out); transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out); }
.toast[data-leaving="true"] { opacity: 0; transform: translateY(8px); }
.toast__close { position: absolute; top: 50%; right: var(--s-2); transform: translateY(-50%); width: 32px; height: 32px; display: grid; place-items: center; background: none; border: 0; color: var(--text-3); cursor: pointer; border-radius: var(--r-1); font-size: 18px; line-height: 1; }
.toast__close:hover { color: var(--white); background: var(--ink-4); }
@keyframes toast-in { from { transform: translateY(12px); opacity: 0; } }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 1px 9px 1px 8px; border-radius: 999px; font: 500 var(--fs-xs)/1.7 var(--font-body); letter-spacing: 0; border: 1px solid var(--line-2); color: var(--text-2); background: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; max-width: 100%; }
@media (max-width: 480px) { .badge { white-space: normal; } }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.badge--ok, .badge--warn, .badge--bad, .badge--info, .badge--gold { border-color: color-mix(in srgb, currentColor 35%, transparent); background: color-mix(in srgb, currentColor 8%, var(--ink-2)); }
.badge--ok { color: var(--ok); } .badge--warn { color: var(--warn); } .badge--bad { color: var(--bad); } .badge--info { color: var(--info); } .badge--gold { color: var(--gold-1); }
.side-link .badge::before { display: none; }

/* ── 10. Tables, filters, pagination ──────────────────────────────────────────────────────────── */
/* position:relative contains the visually-hidden <caption> so it cannot widen the page on phones. */
.table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--ink-2); -webkit-overflow-scrolling: touch; }
table.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table th { text-align: left; font-weight: 500; color: var(--text-3); background: var(--ink-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); white-space: nowrap; font-size: var(--fs-xs); position: sticky; top: 0; z-index: 1; }
.table td { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; color: var(--text); }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background-color var(--t-fast) var(--ease-out); }
.table tbody tr:hover { background: var(--ink-3); }
.table td a:not(.btn) { color: var(--white); text-decoration-color: var(--line-control); }
.table td a:not(.btn):hover { color: var(--gold-1); text-decoration-color: currentColor; }
.table td:has(> .btn), .table td:has(> form) { white-space: nowrap; }
.table th.num { text-align: right; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.filters { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: end; margin-bottom: var(--s-4); padding: var(--s-3) var(--s-4); background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r-3); }
.filters .field { margin: 0; min-width: 160px; flex: 1 1 160px; }
.filters .btn, .filters > .btn, .filters > button { align-self: end; min-height: 44px; }
.filters .field:has(> .btn:only-child), .filters .field:has(> button:only-child), .filters > .btn, .filters > button { flex: 0 0 auto; min-width: 0; }
@media (min-width: 761px) { .filters:not(.date-range) { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); } .filters:not(.date-range) .field { min-width: 0; } }
.pagination { display: flex; gap: var(--s-2); align-items: center; justify-content: flex-end; margin-top: var(--s-4); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }

/* ── 11. Empty, error, loading states ─────────────────────────────────────────────────────────── */
.empty { position: relative; text-align: center; padding: var(--s-7) var(--s-5); border: 1px dashed var(--line-2); border-radius: var(--r-3); color: var(--text-2); background: var(--ink-3); }
.empty::before { content: ""; display: block; width: 28px; height: 28px; margin: 0 auto var(--s-4); border-radius: 8px; background: var(--ink-3); box-shadow: inset 0 0 0 9px var(--ink-3), inset 0 0 0 14px var(--gold-2); }
.empty h3 { font-size: var(--fs-lg); margin-bottom: var(--s-2); }
.empty p { max-width: 36rem; margin-left: auto; margin-right: auto; }
.skeleton { background: linear-gradient(90deg, var(--ink-4) 0%, var(--ink-3) 50%, var(--ink-4) 100%); background-size: 200% 100%; animation: shimmer 1.4s var(--ease-in-out) infinite; border-radius: var(--r-1); min-height: 1em; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.skeleton--line { height: .8rem; margin: var(--s-3) 0; }
.skeleton--label { height: .6rem; width: 55%; }
.skeleton--value { height: 1.6rem; width: 40%; margin-top: var(--s-3); }
.page.is-loading > :not(.loading-state) { display: none; }
.loading-state { margin-top: var(--s-2); }
.error-page { text-align: center; padding: var(--s-9) var(--gutter) var(--s-8); min-height: 60vh; display: grid; align-content: center; justify-items: center; }
.error-page h1 { font-size: var(--fs-4xl); max-width: 18ch; }
.error-page .lede { margin: 0 auto var(--s-6); }
.error-page__mark { font: 500 clamp(5rem, 16vw, 10rem)/.9 var(--font-display); color: transparent; -webkit-text-stroke: 1.5px var(--gold-3); margin-bottom: var(--s-5); font-variant-numeric: lining-nums; letter-spacing: -.04em; }

/* ── 12. Dialogs, drawers, disclosures ────────────────────────────────────────────────────────── */
dialog { background: var(--ink-2); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--s-6); max-width: min(560px, 92vw); box-shadow: var(--shadow-1); }
dialog::backdrop { background: rgba(0, 0, 0, .72); backdrop-filter: blur(2px); }
dialog[open]:not(.drawer) { animation: dialog-in var(--t-med) var(--ease-out); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(8px) scale(.985); } }
dialog.drawer { position: fixed; inset: 0 0 0 auto; left: auto; right: 0; top: 0; bottom: 0; margin: 0; padding: 0; width: min(500px, 100vw); height: 100dvh; max-height: 100dvh; max-width: 100vw; border-radius: 0; border-width: 0 0 0 1px; display: none; flex-direction: column; background: var(--ink-2); }
dialog.drawer[open] { display: flex; animation: drawer-in var(--t-med) var(--ease-out); }
@keyframes drawer-in { from { transform: translateX(32px); opacity: 0; } }
.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line); }
.drawer__title { font: 600 var(--fs-lg)/1.3 var(--font-body); margin: 0; }
.drawer__body { flex: 1; overflow-y: auto; padding: var(--s-5); overscroll-behavior: contain; }
.drawer__body h1 { font-size: var(--fs-2xl); }
.drawer__body h2, .drawer__body h3 { margin-top: var(--s-6); margin-bottom: var(--s-3); font: 600 var(--fs-md)/1.3 var(--font-body); }
.drawer__body > :first-child, .drawer__body [data-drawer-body] > :first-child { margin-top: 0; }
.drawer__foot { padding: var(--s-3) var(--s-5); border-top: 1px solid var(--line); display: flex; justify-content: flex-end; }
/* FAQ disclosure (M10): app.js animates the height; the +/− mark rotates in sync. */
details.disclosure { border-bottom: 1px solid var(--line); padding: 0; margin: 0; }
details.disclosure:first-of-type { border-top: 1px solid var(--line); }
details.disclosure summary { position: relative; cursor: pointer; padding: var(--s-5) var(--s-8) var(--s-5) 0; font: 500 var(--fs-lg)/1.4 var(--font-body); color: var(--white); list-style: none; transition: color var(--t-fast) var(--ease-out); letter-spacing: -.01em; }
details.disclosure summary:hover { color: var(--gold-1); }
details.disclosure summary::-webkit-details-marker { display: none; }
details.disclosure summary::before { content: ""; position: absolute; right: 0; top: 50%; width: 32px; height: 32px; margin-top: -16px; border-radius: 8px; background: var(--ink-2); border: 1px solid var(--line); transition: background-color var(--t-med) var(--ease-out), border-color var(--t-med) var(--ease-out); }
details.disclosure summary::after { content: ""; position: absolute; right: 9px; top: 50%; width: 14px; height: 14px; margin-top: -7px; background: linear-gradient(currentColor, currentColor) center/14px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center/1.5px 14px no-repeat; color: var(--white); transition: transform var(--t-med) var(--ease-in-out); }
details.disclosure[open] summary::before, details.disclosure[data-opening="true"] summary::before { background: var(--gold-2); border-color: var(--gold-2); }
details.disclosure[open] summary::after { transform: rotate(135deg); color: var(--on-gold); }
details.disclosure[data-closing="true"] summary::after { transform: rotate(0deg); }
details.disclosure[data-closing="true"] summary::before { background: var(--ink-2); border-color: var(--line); }
details.disclosure .disclosure__body { overflow: hidden; }
details.disclosure .disclosure__body, details.disclosure > :not(summary) { color: var(--text-2); max-width: 46rem; padding-bottom: var(--s-5); margin: 0; }
details > summary { cursor: pointer; padding: var(--s-2) 0; min-height: 40px; }
details.card > summary { font-weight: 600; color: var(--text); padding: var(--s-2) 0; min-height: 40px; line-height: 1.5; }
details.card[open] > summary { margin-bottom: var(--s-4); }
.definitions summary { cursor: pointer; }
.definitions .dl { margin-top: var(--s-3); }

/* ── 13. Motion primitives (M02, M04, M05, M08–M10) ─────────────────────────────────────────────
   Hidden states exist only under html.js and only for elements the script marked pending (below the fold when it
   started), so content is never hidden without a script to reveal it. */
.w { display: inline-block; }
/* M02 — hero load sequence (CSS only, starts after the M01 intro when it plays). The heading is held hidden until
   --intro-offset and then shown whole (failsafe); app.js upgrades it to a word-by-word reveal when it runs in time. */
.hero-title { animation: show-now 1ms linear backwards; animation-delay: var(--intro-offset); }
@keyframes show-now { from, to { opacity: 0; } }
.hero-title.hero-words { animation: none; }
.hero-words .w { opacity: .1; transform: translateY(.22em); animation: word-in 560ms var(--ease-out) forwards; animation-delay: calc(var(--intro-offset) + var(--i, 0) * 55ms); }
.hero-seq { opacity: 0; transform: translateY(18px); animation: seq-in 700ms var(--ease-out) forwards; animation-delay: calc(var(--intro-offset) + 180ms + var(--seq, 0) * 130ms); }
.hero-seq--art { transform: translateY(26px) scale(.97); }
@keyframes word-in { to { opacity: 1; transform: none; } }
@keyframes seq-in { to { opacity: 1; transform: none; } }
/* entry reveals */
.js [data-reveal="pending"] { opacity: 0; transform: translateY(26px); }
.js [data-reveal="in"] { opacity: 1; transform: none; transition: opacity 720ms var(--ease-out) var(--rd, 0ms), transform 820ms var(--ease-out) var(--rd, 0ms); }
.js [data-reveal="pending"].reveal--slide { transform: translateX(-48px); }
.js [data-reveal="pending"].reveal-words, .js [data-reveal="in"].reveal-words { opacity: 1; transform: none; }
.js .reveal-words[data-reveal="pending"] .w { opacity: .1; transform: translateY(.25em); }
.js .reveal-words[data-reveal="in"] .w { opacity: 1; transform: none; transition: opacity 520ms var(--ease-out) calc(var(--i, 0) * 45ms), transform 620ms var(--ease-out) calc(var(--i, 0) * 45ms); }
/* scroll-driven words (M04): .w gets data-on as the section scrolls in */
.js .scroll-words .w { opacity: .12; transition: opacity 260ms var(--ease-out), transform 360ms var(--ease-out); transform: translateY(.12em); }
.js .scroll-words .w[data-on] { opacity: 1; transform: none; }

/* ── 14. M01 — opening logo and tile reveal ───────────────────────────────────────────────────────
   Rendered by the server on the first public page view of a browser session. Pure CSS timeline:
   mark 0–450 ms, tiles clear in seeded random order (each 110 ms, starts spread over 230 ms), overlay hidden at
   ~900 ms and removed by app.js. pointer-events:none throughout; hidden for reduced motion and without JS. */
.intro { --hold: 430ms; position: fixed; inset: 0; z-index: 300; pointer-events: none; overflow: hidden; animation: intro-done 1ms linear forwards; animation-delay: 950ms; }
/* minmax(0, …): 12 tiles must fit any phone (a 1fr track keeps its content's minimum, which made the intro 360px wide on 320–359px screens). */
.intro__tiles { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(7, minmax(0, 1fr)); }
.intro__tiles i { background: #141414; box-shadow: 0 0 0 1px #141414; animation: intro-tile 110ms linear forwards; animation-delay: calc(var(--hold) + var(--d, 0ms)); }
.intro__mark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 12px; color: #fff; animation: intro-mark-in 160ms var(--ease-out) both, intro-mark-out 60ms linear forwards; animation-delay: 0ms, calc(var(--hold) - 40ms); }
.intro__mark img { width: 42px; height: 41px; }
.intro__mark span { font: 600 1.05rem/1 var(--font-body); letter-spacing: .22em; }
@keyframes intro-tile { to { opacity: 0; } }
@keyframes intro-mark-in { from { opacity: 0; } }
@keyframes intro-mark-out { to { opacity: 0; } }
@keyframes intro-done { to { visibility: hidden; } }
.has-intro { --intro-offset: 640ms; }

/* ── 15. Public sections ──────────────────────────────────────────────────────────────────────── */
.section { padding: clamp(4.5rem, 9vw, 8rem) 0; }
.section--tight { padding: var(--s-7) 0; }
.section--flush { padding-top: var(--s-6); }
.section--band { background: var(--ink-2); }
.section h2 { max-width: 18ch; }
.section__more { margin-top: var(--s-6); margin-bottom: 0; font-size: var(--fs-sm); color: var(--text-3); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); align-items: baseline; }
.section__more a:not(.btn) { font-weight: 500; color: var(--white); text-decoration: none; border-bottom: 1px solid var(--line-control); padding-bottom: 1px; transition: border-color var(--t-fast); }
.section__more a:not(.btn):hover { border-bottom-color: var(--gold-2); }
.section > .container .muted, .section__head + .muted { max-width: 68ch; }
/* Reference section head: label, then heading left and supporting copy right. */
.section__inner { display: block; }
.section__head { display: grid; gap: var(--s-4) var(--s-8); grid-template-columns: minmax(0, 1fr); margin-bottom: clamp(2.5rem, 5vw, 4rem); align-items: end; }
.section__head h2 { margin: 0; }
.section__head .lede { margin: 0; }
@media (min-width: 900px) { .section__head:has(.lede) { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }

/* Hero (M02) */
.hero { padding: var(--s-9) 0 var(--s-8); position: relative; }
.hero h1 { font-size: var(--fs-5xl); max-width: 13ch; line-height: 1.0; letter-spacing: -.045em; }
.hero .lede { margin-bottom: var(--s-6); }
.hero--home { padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(3rem, 5vw, 4.5rem); }
.hero--home .container { max-width: calc(var(--max-wide) + 2 * var(--gutter)); }
.hero__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-6); align-items: start; }
.hero__top .eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
.hero__panel { width: 300px; border-radius: var(--r-3); padding: var(--s-4); display: grid; gap: var(--s-3); text-decoration: none; color: var(--text); position: relative; overflow: hidden; }
.hero__panel:hover { color: var(--text); }
.hero__panel-head { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-xs); color: var(--text-3); }
.hero__panel-price { font: 500 2rem/1 var(--font-display); letter-spacing: -.035em; color: #fff; }
.hero__panel-note { font-size: var(--fs-xs); color: var(--text-2); margin: 0; padding-right: 48px; }
.hero__panel .btn__arrow { position: absolute; right: var(--s-4); bottom: var(--s-4); }
.hero__panel:hover .btn__arrow { background: var(--gold-pale); }
.hero__body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s-7); align-items: center; margin-top: clamp(-4rem, -4vw, -1rem); }
.hero__art { position: relative; aspect-ratio: 1 / 1; width: min(100%, 620px); margin: 0 0 -8% -4%; }
.hero__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.hero__copy .lede { color: var(--text-2); max-width: 30rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.hero__facts { list-style: none; margin: var(--s-7) 0 0; padding: var(--s-5) 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-5); }
.hero__facts li { display: grid; gap: 2px; }
.hero__facts strong { font: 600 var(--fs-sm)/1.3 var(--font-body); }
.hero__facts span { font-size: var(--fs-xs); color: var(--text-3); }
.hero--page { padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(2.5rem, 5vw, 4rem); }
.hero--page h1 { font-size: var(--fs-4xl); max-width: 18ch; }
.hero--page .lede { margin-bottom: var(--s-5); }
.hero--page .row { margin-top: var(--s-2); }
.hero--page + .section--flush { padding-top: var(--s-6); }
@media (max-width: 900px) {
  .hero__top { grid-template-columns: 1fr; }
  .hero__panel { width: 100%; max-width: 420px; }
  .hero__body { grid-template-columns: 1fr; gap: var(--s-5); margin-top: var(--s-6); }
  .hero__art { width: min(100%, 460px); margin: 0 auto; order: 2; }
  .hero__copy { order: 1; }
}

/* M04 — statement stage */
.statement { position: relative; }
.statement__stage { display: grid; place-items: center; text-align: center; padding: clamp(5rem, 12vw, 9rem) var(--gutter); }
.statement__stage > div { width: 100%; max-width: 980px; min-width: 0; }
.statement__text { font: 500 clamp(2.1rem, 5vw, 4.2rem)/1.04 var(--font-display); letter-spacing: -.045em; color: var(--white); max-width: 15ch; margin: 0 auto; text-wrap: balance; }
.statement__labels { list-style: none; margin: var(--s-7) auto 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--s-3); max-width: 760px; }
.statement__label { display: inline-flex; align-items: center; gap: var(--s-2); padding: 10px 14px 10px 10px; background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r-2); font-size: var(--fs-sm); color: var(--text); box-shadow: 0 10px 24px -18px rgba(13,13,13,.4); text-align: left; }
.statement__label::before { content: ""; width: 20px; height: 20px; flex: none; border-radius: 5px; background: var(--ink-0) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 8.3l2.4 2.3 5.2-5.2' fill='none' stroke='%23d7b56f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; }
@media (min-width: 761px) {
  .js .statement--pinned { height: 230vh; }
  .js .statement--pinned .statement__stage { position: sticky; top: 0; height: 100vh; height: 100dvh; padding: 0 var(--gutter); }
  .js .statement--pinned .statement__labels { position: absolute; inset: 0; margin: 0; max-width: none; display: block; pointer-events: none; }
  .js .statement--pinned .statement__label { position: absolute; opacity: 0; transform: translateY(calc(18px + (0.5 - var(--p, 0)) * 40px)); transition: opacity 420ms var(--ease-out), transform 520ms var(--ease-out); max-width: 280px; }
  .js .statement--pinned .statement__label[data-on] { opacity: 1; transform: translateY(calc((0.5 - var(--p, 0)) * 40px)); }
  .js .statement--pinned .statement__label:nth-child(1) { left: 9%; top: 19%; }
  .js .statement--pinned .statement__label:nth-child(2) { right: 8%; top: 25%; }
  .js .statement--pinned .statement__label:nth-child(3) { left: 13%; bottom: 22%; }
  .js .statement--pinned .statement__label:nth-child(4) { right: 12%; bottom: 17%; }
}

/* M05 — services bento */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-3); }
.bento__card { grid-column: span 2; position: relative; display: grid; grid-template-rows: auto 1fr; gap: var(--s-4); min-height: 300px; padding: var(--s-5); background: var(--ink-1); border-radius: var(--r-3); text-decoration: none; color: var(--text); overflow: hidden; transition: background-color var(--t-med) var(--ease-out); }
.bento__card:nth-child(-n+2) { grid-column: span 3; }
.bento__card:hover { background: var(--ink-3); color: var(--text); }
.bento__icon { width: 150px; height: 150px; justify-self: end; margin: -8px -8px 0 0; transition: transform 520ms var(--ease-out); }
.bento__card:nth-child(-n+2) .bento__icon { width: 180px; height: 180px; }
.bento__card:hover .bento__icon { transform: translateY(-6px); }
.bento__text { align-self: end; display: grid; gap: var(--s-2); max-width: 30rem; }
.bento__title { font: 600 var(--fs-lg)/1.25 var(--font-body); color: var(--white); letter-spacing: -.015em; margin: 0; }
.bento__summary { font-size: var(--fs-sm); color: var(--text-2); margin: 0; }
.bento__go { position: absolute; left: var(--s-5); top: var(--s-5); width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: var(--ink-2); color: var(--white); transition: background-color var(--t-fast), color var(--t-fast), transform var(--t-med) var(--ease-out); }
.bento__go svg { width: 14px; height: 14px; }
.bento__card:hover .bento__go, .bento__card:focus-visible .bento__go { background: var(--gold-2); color: var(--on-gold); }
@media (max-width: 1000px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bento__card, .bento__card:nth-child(-n+2) { grid-column: span 1; } }
@media (max-width: 600px) { .bento { grid-template-columns: 1fr; } .bento__card { min-height: 0; grid-template-columns: 1fr auto; grid-template-rows: auto; align-items: end; } .bento__icon, .bento__card:nth-child(-n+2) .bento__icon { width: 104px; height: 104px; grid-column: 2; grid-row: 1; margin: 0; } .bento__text { grid-column: 1; grid-row: 1; padding-top: var(--s-7); } }

/* Showcase (M05, portfolio) */
.showcase { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.showcase__item { display: grid; gap: var(--s-4); text-decoration: none; color: var(--text); }
.showcase__media { border-radius: var(--r-3); overflow: hidden; background: var(--ink-2); aspect-ratio: 16 / 10; }
.showcase__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.showcase__item:hover .showcase__media img { transform: scale(1.03); }
.showcase__pending { border-radius: var(--r-4); padding: clamp(1.5rem, 4vw, 3rem); display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: var(--s-6); align-items: end; }
.showcase__pending h3 { font: 500 clamp(1.6rem, 2.6vw, 2.2rem)/1.1 var(--font-display); letter-spacing: -.035em; max-width: 20ch; margin-bottom: var(--s-3); }
.showcase__pending p { color: var(--text-2); max-width: 46rem; margin: 0; }
@media (max-width: 760px) { .showcase, .showcase__pending { grid-template-columns: 1fr; } }

/* M06 — process stages */
.stages { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); position: relative; }
.stages__aside { position: sticky; top: calc(var(--header-h) + 3vh); height: calc(100vh - var(--header-h) - 6vh); height: calc(100dvh - var(--header-h) - 6vh); display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s-5); }
.stages__count { align-self: center; font: 500 clamp(1.4rem, 2vw, 1.8rem)/1 var(--font-display); color: var(--text-3); letter-spacing: -.03em; display: flex; gap: 2px; font-variant-numeric: tabular-nums; }
.stages__num-wrap { position: relative; display: inline-block; height: 1em; overflow: hidden; color: var(--white); }
.stages__num { display: block; }
.stages__num--in { position: absolute; left: 0; top: 0; }
.stages__art { position: relative; width: min(100%, 480px); aspect-ratio: 1 / 1; justify-self: center; }
.stages__art img, .stage__art-m img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.tilefx { position: absolute; inset: 0; pointer-events: none; }
.tilefx i { position: absolute; background-repeat: no-repeat; }
.stages__list { list-style: none; margin: 0; padding: 0; counter-reset: stage; }
.stage { min-height: 70vh; display: grid; align-content: center; padding: var(--s-7) 0; transition: opacity 420ms var(--ease-out), transform 520ms var(--ease-out); }
.js .stages--live .stage { opacity: .22; transform: translateY(10px); }
.js .stages--live .stage[data-current] { opacity: 1; transform: none; }
.stage__num { font: 500 var(--fs-sm)/1 var(--font-body); color: var(--gold-1); margin: 0 0 var(--s-3); }
.stage h3 { font: 500 clamp(2rem, 3.6vw, 3rem)/1.02 var(--font-display); letter-spacing: -.04em; margin-bottom: var(--s-5); }
.stage__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); max-width: 34rem; }
.stage__steps li { display: grid; gap: 2px; padding-left: var(--s-4); border-left: 1px solid var(--line-2); }
.stage__steps strong { font-weight: 600; font-size: var(--fs-md); }
.stage__steps span { color: var(--text-2); font-size: var(--fs-sm); line-height: 1.55; }
.stage__art-m { display: none; }
@media (max-width: 860px) {
  .stages { grid-template-columns: 1fr; }
  .stages__aside { display: none; }
  .stage { min-height: 0; padding: var(--s-6) 0; border-top: 1px solid var(--line); }
  .js .stages--live .stage { opacity: 1; transform: none; }
  .stage__art-m { display: block; position: relative; width: min(64vw, 260px); aspect-ratio: 1 / 1; margin-bottom: var(--s-4); }
}

/* M07 — Anatomy of a build (existing feature, light system) */
.anatomy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: var(--s-7); align-items: start; }
.anatomy > * { min-width: 0; }
.anatomy__note { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-xs); color: var(--text-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 3px 12px; margin-bottom: var(--s-6); background: var(--ink-2); }
.anatomy__note::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-2); }
.anatomy__layers { list-style: none; margin: 0; padding: 0; counter-reset: layer; border-top: 1px solid var(--line); }
.anatomy__layer { counter-increment: layer; border-bottom: 1px solid var(--line); }
.anatomy__tab { width: 100%; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0 var(--s-3); align-items: baseline; text-align: left; background: none; border: 0; padding: var(--s-4) 0 var(--s-4) var(--s-4); color: var(--text-2); font: inherit; cursor: pointer; position: relative; transition: color var(--t-fast) var(--ease-out); }
.anatomy__tab::before { content: "/" counter(layer, decimal-leading-zero); font: 500 var(--fs-sm)/1 var(--font-body); color: var(--text-3); font-variant-numeric: tabular-nums; transition: color var(--t-fast); }
.anatomy__tab::after { content: ""; position: absolute; left: -1px; top: 12px; bottom: 12px; width: 3px; border-radius: 2px; background: var(--gold-2); transform: scaleY(0); transition: transform var(--t-med) var(--ease-out); }
.anatomy__tab-title { font: 600 var(--fs-lg)/1.3 var(--font-body); color: var(--white); letter-spacing: -.012em; }
.anatomy__tab-stage { grid-column: 2; font-size: var(--fs-xs); color: var(--text-3); margin-top: 2px; }
.anatomy__tab:hover .anatomy__tab-title { color: var(--gold-1); }
.anatomy__tab[aria-selected="true"]::before { color: var(--gold-1); }
.anatomy__tab[aria-selected="true"]::after { transform: scaleY(1); }
.anatomy__detail { display: none; color: var(--text-2); font-size: var(--fs-sm); margin: 0; max-width: 30rem; }
.anatomy__tab[aria-selected="true"] + .anatomy__detail { display: block; padding: 0 0 var(--s-4) calc(2.5rem + var(--s-3) + var(--s-4)); animation: reveal-down var(--t-med) var(--ease-out); }
@keyframes reveal-down { from { opacity: 0; transform: translateY(-4px); } }
.anatomy__stage { position: sticky; top: calc(var(--header-h) + 24px); }
.mini { --m-ink: #151515; --m-accent: #d7b56f; border: 1px solid var(--line-2); border-radius: var(--r-3); background: #0b0b0b; overflow: hidden; box-shadow: var(--shadow-1); }
.mini__chrome { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #171717; }
.mini__chrome i { width: 8px; height: 8px; border-radius: 50%; background: #3a3a3a; }
.mini__url { margin-left: var(--s-3); flex: 1; height: 22px; border-radius: 999px; background: #202020; display: flex; align-items: center; padding: 0 12px; font-size: 11px; color: #8f8f8f; font-family: var(--font-mono); overflow: hidden; white-space: nowrap; }
.mini__score { margin-left: auto; font: 600 11px/1 var(--font-body); color: #d7b56f; opacity: 0; transform: translateY(2px); transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out); white-space: nowrap; }
.mini__viewport { position: relative; aspect-ratio: 16 / 11; background: #0f0f0f; overflow: hidden; transition: background-color var(--t-med) var(--ease-out); }
.mini__page { position: absolute; inset: 0; padding: 7% 8%; display: grid; grid-template-rows: auto 1fr auto; gap: 6%; color: #ececec; font-family: var(--font-body); }
.mini__nav { display: flex; align-items: center; gap: 4%; }
.mini__logo { width: 16%; height: 10px; }
.mini__links { display: flex; gap: 6%; margin-left: auto; width: 40%; justify-content: flex-end; }
.mini__links i { width: 22%; height: 6px; }
.mini__btn { width: 14%; height: 18px; border-radius: 2px; }
.mini__hero { display: grid; grid-template-columns: 1.3fr 1fr; gap: 6%; align-items: center; }
.mini__h { height: 16px; width: 92%; margin-bottom: 6px; }
.mini__h--2 { width: 70%; }
.mini__p { height: 6px; width: 86%; margin-top: 8px; }
.mini__p--2 { width: 64%; }
.mini__img { aspect-ratio: 4 / 3.4; border-radius: 4px; }
.mini__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4%; }
.mini__card { height: 42px; border-radius: 3px; }
/* Layers are cumulative; every layer selector has equal specificity, so source order decides. */
.mini__logo, .mini__links i, .mini__h, .mini__p, .mini__img, .mini__card { display: block; }
.mini__btn, .mini__cta { display: grid; place-items: center; text-align: center; }
.mini__logo, .mini__links i, .mini__btn, .mini__h, .mini__p, .mini__cta, .mini__img, .mini__card { border: 1px dashed #5c5c5c; background: transparent; transition: background-color var(--t-med) var(--ease-out), border-color var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out), opacity var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out); }
.mini__links i { display: inline-block; }
.mini__text, .mini__card-text { display: none; }
.mini:is([data-layer="2"],[data-layer="3"],[data-layer="4"],[data-layer="5"],[data-layer="6"]) .mini__viewport { background: var(--m-ink); }
.mini:is([data-layer="2"],[data-layer="3"],[data-layer="4"],[data-layer="5"],[data-layer="6"]) :is(.mini__logo, .mini__h) { border-color: transparent; background: #e6e6e6; }
.mini:is([data-layer="2"],[data-layer="3"],[data-layer="4"],[data-layer="5"],[data-layer="6"]) :is(.mini__links i, .mini__p) { border-color: transparent; background: #5e5e5e; }
.mini:is([data-layer="2"],[data-layer="3"],[data-layer="4"],[data-layer="5"],[data-layer="6"]) :is(.mini__btn, .mini__cta) { border-color: transparent; background: var(--m-accent); }
.mini:is([data-layer="2"],[data-layer="3"],[data-layer="4"],[data-layer="5"],[data-layer="6"]) :is(.mini__img, .mini__card) { border: 1px solid #2a2a2a; background: #1c1c1c; }
.mini:is([data-layer="3"],[data-layer="4"],[data-layer="5"],[data-layer="6"]) :is(.mini__h, .mini__p) { display: none; }
.mini:is([data-layer="3"],[data-layer="4"],[data-layer="5"],[data-layer="6"]) :is(.mini__text, .mini__card-text) { display: block; }
.mini:is([data-layer="3"],[data-layer="4"],[data-layer="5"],[data-layer="6"]) :is(.mini__cta-label, .mini__btn-label) { display: block; }
.mini:is([data-layer="3"],[data-layer="4"],[data-layer="5"],[data-layer="6"]) .mini__img { border-color: transparent; background: radial-gradient(60% 45% at 50% 62%, #a88b52 0 55%, transparent 56%), radial-gradient(70% 55% at 50% 64%, #d7b56f 0 60%, transparent 61%), linear-gradient(170deg, #222222, #161616); }
.mini:is([data-layer="3"],[data-layer="4"],[data-layer="5"],[data-layer="6"]) .mini__card { background: #1a1a1a; padding: 6px 7px; }
.mini:is([data-layer="4"],[data-layer="5"],[data-layer="6"]) .mini__card:nth-child(3) { transform: translateY(-3px); box-shadow: 0 6px 14px -6px rgba(0,0,0,.8); border-color: var(--m-accent); }
.mini[data-layer="4"] .mini__cta { animation: mini-press 2.4s var(--ease-in-out) infinite; }
@keyframes mini-press { 0%, 60%, 100% { transform: none; } 70% { transform: scale(.94); } 80% { transform: none; } }
.mini:is([data-layer="5"],[data-layer="6"]) :is(.mini__cta, .mini__btn) { outline: 2px solid #f1dfb0; outline-offset: 2px; }
.mini[data-layer="5"] .mini__region { outline: 1px dashed rgba(215, 181, 111, .6); outline-offset: 4px; }
.mini__tag { display: none; position: absolute; top: -4px; left: 0; font: 600 9px/1 var(--font-mono); color: #0d0d0d; background: #d7b56f; padding: 2px 4px; border-radius: 2px; transform: translateY(-100%); z-index: 1; }
.mini[data-layer="5"] .mini__tag { display: inline-block; }
.mini__region { position: relative; }
.mini[data-layer="6"] .mini__score { opacity: 1; transform: none; }
.mini__text--h { font: 500 clamp(13px, 1.6vw, 20px)/1.12 var(--font-display); letter-spacing: -.03em; color: #f5f5f5; margin: 0; }
.mini__text--p { font-size: clamp(8px, .8vw, 10.5px); line-height: 1.45; color: #a8a8a8; margin: 8px 0 0; max-width: 95%; }
.mini__cta { width: 34%; height: 20px; margin-top: 14px; border-radius: 3px; }
.mini__cta-label, .mini__btn-label { display: none; font: 600 clamp(6px, .65vw, 9px)/1 var(--font-body); color: #0d0d0d; letter-spacing: .02em; }
.mini__card-text { font: 600 clamp(6px, .62vw, 8.5px)/1.3 var(--font-body); color: #e6e6e6; }
.mini__card-text span { display: block; font-weight: 400; color: #9a9a9a; margin-top: 2px; }
.mini__caption { display: flex; justify-content: space-between; gap: var(--s-3); padding: 10px 14px; background: #171717; font-size: var(--fs-xs); color: #8f8f8f; }
.mini__caption strong { color: #ececec; font-weight: 600; }
@media (max-width: 960px) { .anatomy { grid-template-columns: 1fr; gap: var(--s-6); } .anatomy__stage { position: static; order: -1; } }

/* M08 — statement + comparison */
.statement-lg { font: 500 clamp(2.2rem, 5vw, 4.2rem)/1.03 var(--font-display); letter-spacing: -.045em; text-align: center; max-width: 16ch; margin: 0 auto clamp(3rem, 6vw, 5rem); }
.versus { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-4); max-width: 1000px; margin: 0 auto; }
.versus__panel { border-radius: var(--r-4); padding: clamp(1.5rem, 3vw, 2.5rem); }
.versus__panel--not { background: var(--ink-2); border: 1px solid var(--line); }
.versus__title { display: flex; align-items: center; gap: var(--s-3); font: 600 var(--fs-lg)/1.2 var(--font-body); color: var(--white); margin: 0 0 var(--s-5); letter-spacing: -.012em; }
.versus__title .brand__tile { width: 36px; height: 36px; border-radius: 9px; }
.versus__title .brand__mark { width: 30px; height: 29px; }
.versus__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.versus__list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--s-3); padding: 12px 0; border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.versus__list li:first-child { border-top: 0; }
.versus__list li::before { content: ""; width: 20px; height: 20px; border-radius: 5px; margin-top: 1px; background: var(--gold-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 8.3l2.4 2.3 5.2-5.2' fill='none' stroke='%230d0d0d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; }
.versus__panel--not .versus__list li::before { background: var(--ink-4) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 5l6 6M11 5l-6 6' fill='none' stroke='%23b8b8b8' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/16px no-repeat; }
.versus__list strong { display: block; font-weight: 600; }
.versus__list span { color: var(--text-2); }
@media (max-width: 760px) { .versus { grid-template-columns: 1fr; } }

/* Ledger (capabilities) */
.ledger { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.ledger li { padding: var(--s-5); background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r-3); }
.ledger h3 { font-size: var(--fs-md); margin-bottom: var(--s-2); }
.ledger p { color: var(--text-2); margin: 0; font-size: var(--fs-sm); }
@media (max-width: 900px) { .ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ledger { grid-template-columns: 1fr; } }

/* M09 — packages */
.switch { display: inline-flex; position: relative; padding: 4px; border-radius: 10px; background: var(--ink-4); gap: 0; }
.switch__btn { position: relative; z-index: 1; min-height: 38px; padding: 0 var(--s-4); border: 0; background: transparent; border-radius: 7px; font: 500 var(--fs-sm)/1 var(--font-body); color: var(--text-2); cursor: pointer; transition: color var(--t-med) var(--ease-out); }
.switch__btn[aria-selected="true"] { color: var(--on-gold); }
/* Once the pill has settled, the selected button carries the black itself (the pill is only the moving layer). */
.switch__btn[aria-selected="true"][data-settled] { background: var(--gold-2); }
/* First placement (and reduced motion) applies the selected state without any transition. */
.switch--instant .switch__btn, .switch--instant .switch__pill { transition: none !important; }
.switch__pill { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: 0; border-radius: 7px; background: var(--gold-2); transition: transform 300ms var(--ease-in-out), width 300ms var(--ease-in-out); }
.switch__pill::after { content: ""; position: absolute; right: 8px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 2px; background: var(--gold-2); }
.plans__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--s-5); margin-bottom: clamp(2rem, 4vw, 3rem); }
.plans__head h2 { margin: 0; }
.plans__set + .plans__set { margin-top: var(--s-7); }
.plans__set-title { font: 600 var(--fs-lg)/1.3 var(--font-body); margin-bottom: var(--s-4); }
.js .plans--live .plans__set-title { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.js .plans--live .plans__set + .plans__set { margin-top: 0; }
.pricing-grid { align-items: stretch; gap: var(--s-3); }
.package { display: flex; flex-direction: column; padding: var(--s-6) var(--s-5) var(--s-5); border-radius: var(--r-4); transition: border-color var(--t-med) var(--ease-out); }
.package .card__title { font: 600 var(--fs-lg)/1.2 var(--font-body); letter-spacing: -.012em; margin-bottom: var(--s-1); }
.package > .card__title + .muted { font-size: var(--fs-sm); }
@media (min-width: 900px) { .package > .card__title + .muted { min-height: 3.2em; } .package .package__terms { min-height: 2.9em; } }
.package .price { margin: var(--s-5) 0 var(--s-2); }
.package .checklist { flex: 0 1 auto; margin-bottom: var(--s-2); }
.package__terms { font-size: var(--fs-xs); margin-top: var(--s-2); }
.package__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: auto; padding-top: var(--s-4); }
.package__actions .btn { flex: 1 1 auto; }
.package.card--gold { --ink-0: #141414; }
.package:hover { border-color: var(--line-2); }
.card > .price + p, .card > .price + .checklist { margin-top: var(--s-3); }
.grid + p.muted, .grid + .muted { margin-top: var(--s-6); }
.package__inherits { margin: var(--s-3) 0 var(--s-2); color: var(--gold-1); font-size: var(--fs-sm); font-weight: 500; }
.package__more { margin: 0 0 var(--s-2); font-size: var(--fs-sm); }
.package__more a { color: var(--text-2); }
.package__more a:hover { color: var(--gold-1); }

/* Package comparison — cumulative packages, one row per capability (catalog PACKAGE_FEATURES). No overflow container, so the
   package headings stay pinned beneath the site header while the rows scroll past. */
.compare-wrap { border: 1px solid var(--line); border-radius: var(--r-3); background: var(--ink-2); }
table.compare { table-layout: fixed; }
.compare col, .compare th, .compare td { box-sizing: border-box; }
.compare thead th { position: sticky; top: var(--header-h); z-index: 3; background: var(--ink-2); border-bottom: 1px solid var(--line-2); padding: var(--s-5) var(--s-4) var(--s-4); white-space: normal; vertical-align: bottom; text-align: center; }
.compare thead th:first-child { border-top-left-radius: var(--r-3); }
.compare thead th:last-child { border-top-right-radius: var(--r-3); }
.compare__corner { width: 34%; }
.compare__name { display: block; color: var(--white); font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.01em; }
.compare__price { display: block; margin-top: 2px; color: var(--text-2); font-size: var(--fs-sm); font-weight: 500; font-variant-numeric: tabular-nums; }
.compare__badge { display: inline-block; margin-bottom: var(--s-2); padding: .15em .6em; border-radius: 999px; background: var(--gold-2); color: var(--on-gold); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .02em; }
/* Premium: a quiet gold column from heading to the final button */
.compare thead .compare__pkg--premium { background: linear-gradient(180deg, rgba(215,181,111,.16), var(--ink-2) 85%); box-shadow: inset 1px 0 0 var(--line-gold), inset -1px 0 0 var(--line-gold), inset 0 2px 0 var(--gold-2); }
.compare thead .compare__pkg--premium .compare__name { color: var(--gold-pale); }
.compare tbody td:last-child { background: rgba(215,181,111,.045); box-shadow: inset 1px 0 0 var(--line-gold), inset -1px 0 0 var(--line-gold); }
.compare tbody:last-of-type tr:last-child td:last-child { box-shadow: inset 1px 0 0 var(--line-gold), inset -1px 0 0 var(--line-gold), inset 0 -1px 0 var(--line-gold); }
.compare th[scope="row"] { position: relative; text-align: left; font-weight: 400; color: var(--text); background: transparent; white-space: normal; font-size: var(--fs-sm); padding: var(--s-3) var(--s-4); vertical-align: middle; z-index: auto; }
.compare td { text-align: center; vertical-align: middle; padding: var(--s-3) var(--s-3); }
.compare tbody tr:not(.compare__group):not(.compare__actions):hover { background: rgba(255,255,255,.025); }
.compare tbody tr:not(.compare__group):hover th[scope="row"] .compare__label { color: var(--white); }
.compare__group th { position: static; padding: var(--s-5) var(--s-4) var(--s-2); background: transparent; color: var(--gold-1); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid var(--line); text-align: left; z-index: auto; }
.compare__tick { display: inline-block; width: 22px; height: 22px; border-radius: 50%; background: var(--gold-wash); box-shadow: inset 0 0 0 1px var(--gold-3); vertical-align: middle; position: relative; }
.compare__tick::after { content: ""; position: absolute; left: 7.5px; top: 4px; width: 5px; height: 10px; border: solid var(--gold-1); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.compare__tick--sm { width: 16px; height: 16px; margin: 0 .45em .15em 0; flex: none; }
.compare__tick--sm::after { left: 5.5px; top: 2.5px; width: 4px; height: 8px; }
.compare__scope { color: var(--text); font-size: var(--fs-sm); line-height: 1.4; }
.compare__no { color: var(--text-3); }
.compare__sub { display: block; color: var(--text-3); font-size: var(--fs-xs); font-weight: 400; margin-top: 2px; }
.compare__actions td { padding: var(--s-4) var(--s-3) var(--s-5); }
.compare__actions .btn { width: 100%; justify-content: center; }
.compare__foot { margin-top: var(--s-5); max-width: 70ch; }
/* Toggletip: explanation text is in the page (visible without JavaScript); with JS it opens on click/Enter and closes with Escape. */
.toggletip { display: none; }
.has-toggletips .toggletip { display: inline-grid; place-items: center; width: 34px; height: 34px; margin: -6px 0 -6px .15em; padding: 0; vertical-align: middle; border: 0; border-radius: 50%; background: transparent; color: var(--text-2); font: 600 11px/1 var(--font-body); font-style: italic; cursor: pointer; position: relative; }
.has-toggletips .toggletip::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1px solid var(--line-control); transition: border-color var(--t-fast) var(--ease-out); }
.has-toggletips .toggletip:hover, .has-toggletips .toggletip[aria-expanded="true"] { color: var(--gold-1); }
.has-toggletips .toggletip:hover::after, .has-toggletips .toggletip[aria-expanded="true"]::after { border-color: var(--gold-2); }
.toggletip__text { display: block; margin-top: 4px; color: var(--text-3); font-size: var(--fs-xs); line-height: 1.45; }
.has-toggletips .toggletip__text { display: none; position: absolute; left: var(--s-4); top: calc(100% - 6px); z-index: 5; width: min(320px, 80vw); margin: 0; padding: var(--s-3); border: 1px solid var(--line-gold); border-radius: var(--r-1); background: var(--ink-3); color: var(--text); box-shadow: 0 18px 36px -12px rgba(0,0,0,.85); }
.has-toggletips .toggletip[aria-expanded="true"] + .toggletip__text { display: block; animation: sv-in 200ms var(--ease-out); }
@media (max-width: 760px) {
  .compare__corner { width: 31%; }
  .compare thead th { padding: var(--s-4) 4px var(--s-3); }
  .compare__name { font-size: var(--fs-md); }
  .compare__price { font-size: var(--fs-xs); }
  .compare__badge { font-size: 10px; padding: .1em .45em; }
  .compare th[scope="row"] { padding: var(--s-3) 6px var(--s-3) var(--s-3); font-size: var(--fs-xs); }
  .compare td { padding: var(--s-3) 4px; }
  .compare__scope { font-size: 11.5px; line-height: 1.35; overflow-wrap: break-word; hyphens: auto; }
  .compare__tick--sm { display: none; }
  .compare__group th { padding: var(--s-4) var(--s-3) var(--s-2); }
  .compare__actions .btn { padding-left: 4px; padding-right: 4px; font-size: var(--fs-xs); white-space: normal; min-height: 44px; }
  .compare__actions td { padding: var(--s-3) 3px var(--s-4); }
  .has-toggletips .toggletip__text { left: var(--s-3); width: min(300px, 86vw); }
}

/* Portfolio */
.shot { border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; background: var(--ink-1); }
.shot img { width: 100%; height: auto; transition: transform 600ms var(--ease-out); }
.shot--pending { aspect-ratio: 16/10; display: grid; place-items: center; padding: var(--s-5); text-align: center; color: var(--text-3); font-size: var(--fs-sm); background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(13,13,13,.035) 14px 15px), var(--ink-1); }
.shot--mobile.shot--pending { aspect-ratio: 9/19; }
a.shot { display: block; cursor: zoom-in; }
.portfolio-card { padding: var(--s-4); display: flex; flex-direction: column; }
.portfolio-card__shot { display: block; margin-bottom: var(--s-5); text-decoration: none; }
.portfolio-card__shot:hover .shot img { transform: scale(1.025); }
.portfolio-card .card__title { font: 500 var(--fs-2xl)/1.15 var(--font-display); letter-spacing: -.03em; }
.portfolio-card .card__title a { color: var(--white); text-decoration: none; }
.portfolio-card .card__title a:hover { color: var(--gold-1); }
.portfolio-card .row { margin-top: auto; padding-top: var(--s-3); }
.case-shots { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: var(--s-5); align-items: start; }
.case-shots figure { margin: 0; }
.case-shots figcaption { margin-top: var(--s-2); font-size: var(--fs-xs); }
.viewer { max-width: 96vw; max-height: 94vh; padding: var(--s-4); }
.viewer img { max-height: 82vh; width: auto; margin: 0 auto var(--s-3); }
.testimonial { margin: 0; font: 500 var(--fs-xl)/1.45 var(--font-display); letter-spacing: -.02em; }
.testimonial footer { font: 400 var(--fs-sm) var(--font-body); margin-top: var(--s-3); }

/* Experience cards */
.experience { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); }
.experience .card { padding: var(--s-5); border-radius: var(--r-3); }
@media (max-width: 1000px) { .experience { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .experience { grid-template-columns: 1fr; } }

/* M10 — FAQ */
.faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.faq__title { font: 500 clamp(2.2rem, 4.4vw, 3.6rem)/1.02 var(--font-display); letter-spacing: -.045em; max-width: 9ch; margin: 0; }
.faq__aside { position: sticky; top: calc(var(--header-h) + 24px); }
.faq__aside p { color: var(--text-2); margin-top: var(--s-5); max-width: 22rem; }
/* minmax(0, 1fr) + anywhere-wrap: the long support address must wrap on 320–360px phones, never widen the page. */
.faq__aside a { overflow-wrap: anywhere; }
@media (max-width: 860px) { .faq { grid-template-columns: minmax(0, 1fr); } .faq__aside { position: static; } }

/* M10 — closing CTA band */
.cta-band { position: relative; overflow: hidden; border-radius: var(--r-4); margin: 0 var(--gutter); }
.cta-band > .container { padding-top: clamp(3rem, 7vw, 6rem); padding-bottom: clamp(3rem, 7vw, 6rem); }
.cta-band__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.cta-band__grid > * { min-width: 0; }
.cta-band h2 { font-size: clamp(2.3rem, 4.6vw, 3.9rem); max-width: 13ch; margin: var(--s-4) 0 var(--s-5); }
.cta-band .lede { margin-bottom: var(--s-6); }
.cta-band .card { padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--ink-1); border-color: var(--line); }
.cta-band__contact { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--text-3); }
.cta-band__art { width: min(260px, 60%); aspect-ratio: 1; margin: 0 0 var(--s-2) -12px; }
.cta-band__art img { width: 100%; height: 100%; object-fit: contain; }
.cta-band__copy .section__label { color: var(--text-2); }
@media (max-width: 900px) { .cta-band__grid { grid-template-columns: 1fr; } .cta-band { margin: 0; border-radius: 0; } }

/* Prose & legal */
.prose { max-width: 68ch; overflow-wrap: break-word; }
.prose a { overflow-wrap: anywhere; }
.prose h2 { font-size: var(--fs-2xl); margin-top: var(--s-7); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--fs-lg); margin-top: var(--s-5); }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li { margin-bottom: var(--s-2); }
.prose p, .prose li { color: var(--text); }
.prose-wide { max-width: 52rem; }
.plain-list { padding-left: 1.2em; color: var(--text-2); }
.plain-list li { margin-bottom: var(--s-2); padding-left: var(--s-1); }
.plain-list li::marker { color: var(--gold-3); }
.plain-list.numbered { list-style: decimal; }
.plain-list.numbered li::marker { font-variant-numeric: tabular-nums; color: var(--gold-1); }
.h4 { font: 600 var(--fs-lg) var(--font-body); margin-top: var(--s-6); }
.legal-draft { border: 1px solid var(--line-gold); background: color-mix(in srgb, var(--gold-2) 14%, var(--ink-2)); color: var(--text); padding: var(--s-3) var(--s-4); border-radius: var(--r-2); margin-bottom: var(--s-7); font-size: var(--fs-sm); max-width: 68ch; }
.legal-nav { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: baseline; }
.legal-nav a { font-size: var(--fs-sm); }
.legal-account-link { margin: var(--s-6) 0 0; max-width: 68ch; padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-2); background: var(--ink-2); font-size: var(--fs-sm); color: var(--text-2); }
.draft-banner { background: #0d0d0d; box-shadow: inset 0 -1px 0 var(--line); color: var(--gold-1); font-size: var(--fs-xs); padding: 7px var(--gutter); text-align: center; line-height: 1.4; }
.preview-banner { background: color-mix(in srgb, var(--info) 10%, var(--ink-2)); border-bottom: 1px solid color-mix(in srgb, var(--info) 30%, transparent); color: var(--info); text-align: center; padding: var(--s-2) var(--s-4); font-size: var(--fs-sm); }
.cms-pre { white-space: pre-wrap; font: inherit; color: var(--text-2); background: var(--ink-3); border: 1px solid var(--line); border-radius: var(--r-2); padding: var(--s-3); }
.index-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.index-list li { border-bottom: 1px solid var(--line); }
.index-list a { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) 36px; gap: var(--s-5); align-items: center; padding: var(--s-5) 0; text-decoration: none; color: var(--text-2); }
.index-list__name { font: 500 clamp(1.3rem, 2vw, 1.65rem)/1.15 var(--font-display); letter-spacing: -.03em; color: var(--white); transition: transform var(--t-med) var(--ease-out); }
.index-list a:hover .index-list__name { transform: translateX(4px); }
.index-list__summary { font-size: var(--fs-md); line-height: 1.55; }
.index-list__arrow { justify-self: end; width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: var(--ink-2); color: var(--white); border: 1px solid var(--line); transition: background-color var(--t-fast), color var(--t-fast); font-size: 0; }
.index-list__arrow::before { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 11.5l7-7M6 4.5h5.5V10' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 11.5l7-7M6 4.5h5.5V10' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.index-list a:hover .index-list__arrow, .index-list a:focus-visible .index-list__arrow { background: var(--gold-2); color: var(--on-gold); border-color: var(--gold-2); }
@media (max-width: 760px) { .index-list a { grid-template-columns: minmax(0, 1fr) 34px; gap: var(--s-2) var(--s-4); } .index-list__summary { grid-column: 1; grid-row: 2; font-size: var(--fs-sm); } .index-list__arrow { grid-row: 1 / span 2; } }
.steps { counter-reset: step; display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); list-style: none; padding: 0; margin: 0; }
.step { counter-increment: step; border-top: 1px solid var(--line-2); padding-top: var(--s-4); }
.step::before { content: "/" counter(step, decimal-leading-zero); font: 500 var(--fs-sm)/1 var(--font-body); color: var(--gold-1); display: block; margin-bottom: var(--s-3); }
.step__title { font-size: var(--fs-lg); margin-bottom: var(--s-2); }
.step p { font-size: var(--fs-sm); margin: 0; }
.steps--full { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); row-gap: var(--s-7); }

/* Footer (M10) */
.site-footer { position: relative; overflow: hidden; padding: clamp(3.5rem, 7vw, 6rem) 0 0; color: var(--text-3); font-size: var(--fs-sm); background: var(--ink-0); box-shadow: inset 0 1px 0 var(--line); margin-top: var(--s-8); }
.site-footer .container { max-width: calc(var(--max-wide) + 2 * var(--gutter)); position: relative; z-index: 1; }
.site-footer a:not(.btn) { color: var(--text-2); text-decoration: none; overflow-wrap: anywhere; }
.site-footer a:not(.btn):hover { color: var(--white); }
.site-footer h4 { font: 500 var(--fs-xs)/1 var(--font-body); color: var(--text-3); margin-bottom: var(--s-4); }
.footer-grid { display: grid; gap: var(--s-6); grid-template-columns: 2fr repeat(3, 1fr); }
.footer-grid > * { min-width: 0; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.footer-cta { margin: var(--s-5) 0; }
.footer-base { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); justify-content: space-between; align-items: center; padding: var(--s-5) 0; margin-top: var(--s-7); border-top: 1px solid var(--line); }
.footer-base p { margin: 0; }
.footer-word { display: block; font: 600 clamp(4rem, 17vw, 16rem)/.78 var(--font-display); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1px #2a2a2a; white-space: nowrap; text-align: center; margin: var(--s-6) 0 -.12em; user-select: none; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > :first-child { grid-column: 1 / -1; } }

/* ── 16. Auth shell ───────────────────────────────────────────────────────────────────────────── */
.auth-shell { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.auth-aside { order: -1; position: relative; display: grid; align-content: space-between; padding: var(--s-7) clamp(2rem, 5vw, 4.5rem); background: #111111; box-shadow: inset -1px 0 0 var(--line); overflow: hidden; }
.auth-aside__crest { position: relative; width: min(100%, 340px); aspect-ratio: 1; display: grid; place-items: center; margin: var(--s-6) 0; }
.auth-aside__crest img { width: 232px; max-width: 64%; position: relative; z-index: 1; }
.auth-aside__crest .hero__ring { color: var(--line-gold); }
.auth-aside__line { font: 500 var(--fs-3xl)/1.06 var(--font-display); letter-spacing: -.04em; color: var(--white); max-width: 15ch; margin: 0; }
.auth-aside__foot { font-size: var(--fs-sm); color: var(--text-3); display: flex; gap: var(--s-4); flex-wrap: wrap; }
.auth-aside__foot a:not(.btn) { color: var(--text-2); text-decoration: none; }
.hero__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; color: var(--gold-3); }
.hero__ring .ring-draw { stroke-dasharray: 1; stroke-dashoffset: 0; animation: engrave 900ms var(--ease-in-out) both; animation-delay: calc(var(--i, 0) * 120ms + 150ms); }
.hero__ring .ring-ticks { animation: fade-in 700ms var(--ease-out) both 700ms; }
@keyframes engrave { from { stroke-dashoffset: 1; } }
@keyframes fade-in { from { opacity: 0; } }
.auth-main { display: grid; place-items: center; padding: var(--s-7) var(--gutter); }
.auth-card { width: 100%; max-width: 440px; background: var(--ink-2); padding: clamp(1.5rem, 4vw, 2.5rem); border-color: var(--line); border-radius: var(--r-4); }
.auth-card .brand { justify-content: center; display: flex; margin-bottom: var(--s-6); }
.auth-card h1 { font-size: var(--fs-3xl); text-align: center; }
.auth-card h1 + p, .auth-card h1 + .muted { text-align: center; }
.auth-card .btn--primary[type="submit"] { width: 100%; }
.auth-card .form-actions { justify-content: center; }
@media (min-width: 961px) { .auth-shell--split .auth-card .brand { display: none; } }
@media (max-width: 960px) { .auth-shell { grid-template-columns: 1fr; } .auth-aside { display: none; } }

/* ── 17. App shell (portal / staff / owner) ───────────────────────────────────────────────────── */
.app { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.sidebar { background: #0d0d0d; box-shadow: inset -1px 0 0 var(--line); padding: var(--s-5) var(--s-3) var(--s-6); position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.sidebar .brand { margin: 0 var(--s-2) var(--s-6); }
.sidebar .brand__tile { width: 42px; height: 42px; }
.sidebar .brand__word { font-size: .92rem; letter-spacing: .18em; }
.sidebar .brand__sub { font-size: .54rem; letter-spacing: .18em; }
.sidebar nav { display: block; }
.side-group { margin-bottom: var(--s-5); }
.side-group__label { font: 500 var(--fs-xs)/1 var(--font-body); color: var(--text-3); padding: 0 var(--s-3); margin-bottom: var(--s-2); }
.side-link { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: 36px; padding: 6px var(--s-3); border-radius: var(--r-2); color: var(--text-2); text-decoration: none; font-size: var(--fs-sm); font-weight: 500; transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); }
.side-link:hover { background: var(--ink-2); color: var(--white); }
.side-link[aria-current="page"] { background: var(--ink-3); color: var(--white); }
.side-link[aria-current="page"]::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 2px 2px 0; background: var(--gold-2); }
.side-link .badge { padding: 0 7px; font-size: .7rem; line-height: 1.6; }
.app-main { min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-4); padding: var(--s-3) var(--s-6); border-bottom: 1px solid var(--line); min-height: 60px; background: rgba(8, 8, 8, .9); backdrop-filter: saturate(140%) blur(8px); position: sticky; top: 0; z-index: 30; }
.topbar .nav-toggle { margin-left: 0; }
.topbar__area { font-size: var(--fs-sm); color: var(--text-3); white-space: nowrap; display: inline-flex; align-items: center; gap: var(--s-2); }
.topbar__area::before { content: "/"; color: var(--gold-1); font-weight: 600; }
.topbar .faint { white-space: nowrap; }
.topbar .who { margin-left: auto; font-size: var(--fs-sm); color: var(--text-2); }
.topbar .who .avatar { vertical-align: middle; margin-right: var(--s-2); }
.topbar .who a:not(.btn) { color: var(--text-2); }
.topbar .who a:not(.btn):hover { color: var(--white); }
.topbar form { margin: 0; }
.avatar { width: 28px; height: 28px; border-radius: 8px; display: inline-grid; place-items: center; background: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line-gold); color: var(--gold-2); font: 600 .72rem/1 var(--font-body); flex: none; }
.page { padding: var(--s-6) var(--s-6) var(--s-8); width: 100%; max-width: 1440px; }
.page-head { display: flex; align-items: flex-end; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-6); padding-bottom: var(--s-5); border-bottom: 1px solid var(--line); }
.page-head > div:first-child { min-width: 0; }
.page-head .eyebrow { margin-bottom: var(--s-2); font-size: var(--fs-xs); }
.page-head h1 { font-size: clamp(1.75rem, 2.6vw, 2.4rem); margin: 0; overflow-wrap: anywhere; line-height: 1.08; }
.page-head .actions { margin-left: auto; display: flex; gap: var(--s-2); flex-wrap: wrap; }
.page h2 { font: 600 var(--fs-lg)/1.3 var(--font-body); letter-spacing: -.012em; }
.page .section { padding: var(--s-6) 0; }
.page .card + .card, .page .card + .grid, .page .grid + .card, .page .table-wrap + .card { margin-top: var(--s-4); }
.page p, .page li, .page dd, .page td, .page h2, .page h3, .page summary { overflow-wrap: break-word; }
.kpis { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); margin-bottom: var(--s-5); }
@media (min-width: 1100px) { .kpis:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kpis:has(> :nth-child(8):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kpi { position: relative; background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--s-4); min-width: 0; }
.kpi__label { font-size: var(--fs-xs); font-weight: 500; color: var(--text-3); }
.kpi__value { font: 500 clamp(1.6rem, 2.3vw, 2.1rem)/1.1 var(--font-display); color: var(--white); margin-top: var(--s-2); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.035em; overflow-wrap: anywhere; }
.kpi__sub { font-size: var(--fs-xs); color: var(--text-3); margin-top: var(--s-1); }
.meter { height: 4px; background: var(--ink-4); border-radius: 999px; overflow: hidden; margin-top: var(--s-3); }
/* Operational screens: data renders at its value immediately — no decorative grow-in (DESIGN.md §6). */
.meter > span { display: block; height: 100%; background: var(--gold-2); border-radius: inherit; }
.exec-grid { margin-bottom: var(--s-5); }
.exec-tile { text-decoration: none; color: inherit; display: block; transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out); }
.exec-tile:hover, .exec-tile:focus-visible { border-color: var(--line-2); box-shadow: 0 10px 24px -18px rgba(0,0,0,.8); color: inherit; }
.exec-tile--warn .kpi__value { color: var(--warn); }
.exec-tile--bad .kpi__value { color: var(--bad); }
.exec-tile--warn::after, .exec-tile--bad::after { content: ""; position: absolute; top: var(--s-4); right: var(--s-4); width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }
.exec-tile--bad::after { background: var(--bad); }
.tabs { position: relative; display: flex; gap: var(--s-1); border-bottom: 1px solid var(--line); margin-bottom: var(--s-5); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { position: relative; padding: var(--s-3) var(--s-4); color: var(--text-2); text-decoration: none; font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; transition: color var(--t-fast) var(--ease-out); }
.tabs a::after { content: ""; position: absolute; left: var(--s-3); right: var(--s-3); bottom: -1px; height: 2px; background: var(--gold-2); transform: scaleX(0); transition: transform var(--t-med) var(--ease-out); }
.tabs a:hover { color: var(--white); }
.tabs a[aria-current="page"] { color: var(--white); }
.tabs a[aria-current="page"]::after { transform: scaleX(1); }
.tabs[data-overflow="end"] { mask-image: linear-gradient(90deg, #000 85%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); }
.tabs[data-overflow="both"] { mask-image: linear-gradient(90deg, transparent, #000 12%, #000 85%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 85%, transparent); }
.tabs[data-overflow="start"] { mask-image: linear-gradient(90deg, transparent, #000 15%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%); }
.timeline { list-style: none; margin: 0; padding: 0 0 0 var(--s-1); border-left: 1px solid var(--line-2); }
.timeline li { padding: 0 0 var(--s-4) var(--s-5); position: relative; font-size: var(--fs-sm); }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: -5px; top: .5em; width: 9px; height: 9px; border-radius: 50%; background: var(--ink-2); border: 1.5px solid var(--gold-3); }
.timeline li:first-child::before { background: var(--gold-2); border-color: var(--gold-2); }
.thread { display: grid; gap: var(--s-3); }
.msg { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--s-3) var(--s-4); max-width: 52rem; overflow-wrap: anywhere; }
.msg--staff { border-color: var(--line-gold); background: color-mix(in srgb, var(--gold-2) 8%, var(--ink-2)); }
.msg--internal { border-style: dashed; background: var(--ink-3); }
.msg__meta { font-size: var(--fs-xs); color: var(--text-3); margin-bottom: var(--s-1); }
.thread .msg p:last-child { margin-bottom: 0; }
.kanban { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: var(--s-3); overflow-x: auto; padding-bottom: var(--s-3); scroll-snap-type: x proximity; mask-image: linear-gradient(90deg, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); }
.kanban__col { background: var(--ink-1); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--s-3); min-height: 140px; scroll-snap-align: start; }
.kanban__col h3 { font: 600 var(--fs-xs)/1.3 var(--font-body); color: var(--text-2); margin-bottom: var(--s-3); display: flex; justify-content: space-between; gap: var(--s-2); }
.kanban__card { display: block; background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r-2); padding: var(--s-3); margin-bottom: var(--s-2); text-decoration: none; color: var(--text); font-size: var(--fs-sm); overflow-wrap: anywhere; line-height: 1.5; transition: border-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast); }
.kanban__card:hover { border-color: var(--line-2); color: var(--white); transform: translateY(-1px); box-shadow: 0 10px 20px -16px rgba(0,0,0,.8); }
.kanban__card strong { display: block; color: var(--white); font-weight: 600; }
.kanban__item { position: relative; }
.kanban__item .kanban__card { padding-right: var(--s-3); }
.kanban__item .kanban__card strong { padding-right: 5.25rem; margin-bottom: var(--s-1); }
.kanban__quick { position: absolute; top: var(--s-2); right: var(--s-2); display: inline-flex; align-items: center; min-height: 30px; padding: 0 var(--s-2); font-size: var(--fs-xs); color: var(--text-2); text-decoration: none; border: 1px solid var(--line-2); border-radius: var(--r-1); background: var(--ink-3); }
.kanban__quick:hover { border-color: var(--gold-2); color: var(--white); }
.dl { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: var(--s-2) var(--s-5); font-size: var(--fs-sm); margin: 0; }
.dl dt { color: var(--text-3); overflow-wrap: break-word; }
.dl dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.bar-chart { display: grid; gap: var(--s-3); min-width: 0; }
.bar-chart__row { display: grid; gap: var(--s-1); min-width: 0; font-size: var(--fs-sm); }
.bar-chart__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--s-3); min-width: 0; }
.bar-chart__label { min-width: 0; flex: 1 1 8rem; overflow-wrap: anywhere; }
.bar-chart__value { flex: 0 0 auto; margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bar-chart__sub { color: var(--text-3); }
.bar-chart__bar { height: 8px; background: var(--ink-4); border-radius: 999px; overflow: hidden; }
.bar-chart__bar span { display: block; height: 100%; background: var(--gold-2); border-radius: inherit; }
.live-status { margin: var(--s-3) var(--s-2) 0; padding: .6rem .75rem; border: 1px solid var(--line-gold); border-radius: var(--r-2); background: var(--ink-2); color: var(--text); font-size: var(--fs-xs); animation: toast-in var(--t-med) var(--ease-out); }
.live-status a { color: var(--gold-1); margin-left: .25rem; }
.app-scrim { display: none; }
@media (max-width: 960px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 90; width: min(300px, 86vw); height: 100dvh; box-shadow: 0 24px 48px rgba(0,0,0,.4); transform: translateX(-102%); visibility: hidden; transition: transform var(--t-med) var(--ease-out), visibility 0s linear var(--t-med); }
  .sidebar[data-open="true"] { transform: none; visibility: visible; transition: transform var(--t-med) var(--ease-out), visibility 0s; }
  .app-scrim { display: block; position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.66); opacity: 0; pointer-events: none; transition: opacity var(--t-med) var(--ease-out); }
  .sidebar[data-open="true"] ~ .app-scrim { opacity: 1; pointer-events: auto; }
  .page { padding: var(--s-5) var(--gutter) var(--s-7); }
  .topbar { padding: var(--s-2) var(--gutter); }
  .topbar .nav-toggle { display: inline-flex !important; }
}
@media (min-width: 961px) { .topbar .nav-toggle { display: none !important; } }

/* ── 18. Area-specific components (kept from the product workstreams) ─────────────────────────── */
.quote-line { align-items: end; }
.quote-line .field:first-child { flex: 3 1 260px; }
.quote-line .field:last-child { flex: 1 1 120px; }
.code-block { background: var(--ink-3); border: 1px solid var(--line); border-radius: var(--r-2); padding: var(--s-3) var(--s-4); font: var(--fs-xs)/1.6 var(--font-mono); color: var(--text-2); white-space: pre-wrap; word-break: break-word; max-height: 28rem; overflow: auto; margin: 0 0 var(--s-3); }
.recovery-codes { list-style: none; margin: var(--s-4) 0; padding: var(--s-4); display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-2) var(--s-4); background: var(--ink-3); border: 1px solid var(--line-gold); border-radius: var(--r-2); }
.recovery-codes code { font: 500 var(--fs-md)/1.6 var(--font-mono); color: var(--white); letter-spacing: .06em; }
.diff span { display: block; }
.diff__add { color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, transparent); }
.diff__del { color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--bad) 50%, transparent); }
.diff__ctx { color: var(--text-3); }
.ob-section { margin: 0; }
.ob-section > legend { padding: 0 var(--s-2); }
[data-gate] .dl { margin-top: var(--s-3); }
[data-gate] ul, .readiness-report ul { margin: 0; padding-left: 1.1rem; }
.date-range__fields { border: 0; padding: 0; margin: 0; display: grid; gap: var(--s-2); min-width: 0; }
.date-range__fields > legend { padding: 0; margin-bottom: var(--s-1); font: 500 var(--fs-sm) var(--font-body); color: var(--text); }
.date-range__inputs { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.date-range__inputs .field { margin: 0; min-width: 150px; flex: 1 1 150px; }
.date-range__presets { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.date-range__apply { margin: 0; }
.chip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--s-3); border: 1px solid var(--line-2); border-radius: 999px; font-size: var(--fs-xs); font-weight: 500; color: var(--text-2); text-decoration: none; background: var(--ink-2); transition: border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out); }
.chip:hover { border-color: var(--line-control); color: var(--white); }
.chip[aria-current="true"] { border-color: var(--gold-2); color: var(--on-gold); background: var(--gold-2); }
.richtext { display: grid; gap: var(--s-3); margin-bottom: var(--s-4); }
.richtext .field { margin-bottom: 0; }
.richtext__toolbar { display: flex; flex-wrap: wrap; gap: var(--s-1); padding: var(--s-1); border: 1px solid var(--line-control); border-bottom: 0; border-radius: var(--r-2) var(--r-2) 0 0; background: var(--ink-1); }
.richtext__toolbar + .textarea { border-top-left-radius: 0; border-top-right-radius: 0; }
.richtext__preview { border: 1px dashed var(--line-2); border-radius: var(--r-2); padding: var(--s-3) var(--s-4); background: var(--ink-3); max-width: none; font-size: var(--fs-sm); }
.richtext__preview :last-child { margin-bottom: 0; }
.richtext__preview h2 { font-size: var(--fs-xl); margin-top: var(--s-3); }
.richtext__preview h3 { font-size: var(--fs-lg); margin-top: var(--s-3); }
.attr-list { margin: 0; }
.share-url { display: block; word-break: break-all; font: var(--fs-sm)/1.5 var(--font-mono); background: var(--ink-3); border: 1px solid var(--line-gold); border-radius: var(--r-2); padding: var(--s-3); user-select: all; }
.share-page { max-width: 640px; }
.receipt { max-width: 52rem; }
.receipt, .receipt * { overflow-wrap: anywhere; }
.receipt > *, .receipt .grid > * { min-width: 0; }
.receipt-print { background: #fff; color: #000; }
.receipt-print .receipt, .receipt-print .receipt * { color: #000; background: #fff; border-color: #999; }
.receipt-print .btn--secondary, .receipt-print .btn--ghost { --btn-fg: #111; --btn-bd: #999; }
/* Phase 8: customer-facing financial document (receipt). White paper, black type, restrained gold accents — the
   same layout as the PDF. Text-safe gold on white is --gold-3 darkened (#7a6536, 5.6:1). */
.fin-doc { --doc-ink: #111; --doc-body: #2e2e2e; --doc-muted: #5f5f5f; --doc-gold: #7a6536; --doc-gold-line: var(--gold-3); --doc-wash: #fbf7ed; --doc-rule: #dcdcdc;
  max-width: 52rem; background: #fff; color: var(--doc-body); border-radius: var(--r-2); border-top: 8px solid #111; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 18px 48px rgba(0, 0, 0, .35);
  padding: var(--s-6) clamp(var(--s-4), 5vw, var(--s-7)) var(--s-5); font: 400 var(--fs-sm)/1.55 var(--font-body); overflow-wrap: anywhere; }
.fin-doc * { color: inherit; }
.fin-doc h1, .fin-doc strong, .fin-doc dd, .fin-doc th, .fin-doc .fin-doc__party { color: var(--doc-ink); }
.fin-doc__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-4); padding-bottom: var(--s-4); border-bottom: 1px solid var(--doc-gold-line); }
.fin-doc__mark { display: block; font: 700 1.6rem/1 var(--font-display); letter-spacing: .14em; color: var(--doc-ink); }
.fin-doc__sub { display: block; margin-top: 6px; font: 600 .62rem/1 var(--font-body); letter-spacing: .3em; color: var(--doc-gold); }
.fin-doc__entity { margin: var(--s-3) 0 0; font-size: var(--fs-xs); color: var(--doc-muted); }
.fin-doc__title { text-align: right; }
.fin-doc__title h1 { margin: 0; font: 700 1.7rem/1 var(--font-display); letter-spacing: .18em; text-transform: uppercase; }
.fin-doc__number { margin: var(--s-2) 0 0; font-weight: 700; color: var(--doc-gold); }
.fin-doc .fin-doc__label { margin: 0 0 var(--s-2); font: 700 .66rem/1.2 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--doc-gold); }
.fin-doc__parties { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 18rem); gap: var(--s-5); padding: var(--s-5) 0 var(--s-4); }
.fin-doc__party { margin: 0; font-size: var(--fs-lg); font-weight: 700; }
.fin-doc__facts { margin: 0; }
.fin-doc__facts > div { display: flex; justify-content: space-between; gap: var(--s-3); padding: 5px 0; border-bottom: 1px solid var(--doc-rule); }
.fin-doc__facts dt { color: var(--doc-muted); }
.fin-doc__facts dd { margin: 0; font-weight: 700; text-align: right; }
.fin-doc__notice { margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4); background: var(--doc-wash); border-left: 3px solid var(--doc-gold-line); color: var(--doc-ink); }
.fin-doc__amount { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--s-3); margin-bottom: var(--s-5); padding: var(--s-4) var(--s-5); background: var(--doc-wash); border-left: 3px solid var(--doc-gold-line); }
.fin-doc__amount strong { display: block; font: 700 2rem/1.1 var(--font-display); }
.fin-doc__amount .fin-doc__label { margin: 0 0 var(--s-1); }
.fin-doc__table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.fin-doc__table th { text-align: left; padding: var(--s-2) var(--s-2); font: 700 .66rem/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--doc-muted); border-top: 1px solid var(--doc-ink); border-bottom: 1px solid var(--doc-gold-line); }
.fin-doc__table td { padding: var(--s-3) var(--s-2); border-bottom: 1px solid var(--doc-rule); vertical-align: top; }
.fin-doc__table .num { text-align: right; white-space: nowrap; }
.fin-doc__totals { margin: var(--s-3) 0 0 auto; width: min(100%, 20rem); border-collapse: collapse; font-variant-numeric: tabular-nums; }
.fin-doc__totals th { text-align: left; font-weight: 400; padding: 4px var(--s-3); color: var(--doc-body); }
.fin-doc__totals td { text-align: right; padding: 4px var(--s-3); white-space: nowrap; color: var(--doc-ink); }
.fin-doc__totals .is-strong th, .fin-doc__totals .is-strong td { font-weight: 700; color: var(--doc-ink); border-top: 1px solid var(--doc-ink); }
.fin-doc__totals .is-highlight th, .fin-doc__totals .is-highlight td { font-weight: 700; background: var(--doc-wash); color: var(--doc-ink); padding-top: var(--s-2); padding-bottom: var(--s-2); }
.fin-doc__section { margin-top: var(--s-5); }
.fin-doc__details { display: grid; grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr); gap: var(--s-2) var(--s-4); margin: 0; }
.fin-doc__details dt { color: var(--doc-muted); }
.fin-doc__details dd { margin: 0; font-weight: 600; }
.fin-doc__foot { margin-top: var(--s-6); padding-top: var(--s-3); border-top: 1px solid var(--doc-gold-line); font-size: var(--fs-xs); color: var(--doc-muted); }
.fin-doc__foot p { margin: 0 0 var(--s-2); max-width: none; }
.fin-doc__thanks { color: var(--doc-ink); font-weight: 700; }
.fin-doc + .fin-doc__tech { max-width: 52rem; margin-top: var(--s-4); }
@media (max-width: 560px) { .fin-doc__parties { grid-template-columns: minmax(0, 1fr); } .fin-doc__title { text-align: left; } .fin-doc__details { grid-template-columns: minmax(0, 1fr); } .fin-doc__details dd { margin-bottom: var(--s-2); } }
.copy-btn[data-copied="true"] { color: var(--ok); }

/* ── 19. Responsive refinements & touch targets ───────────────────────────────────────────────── */
@media (max-width: 560px) {
  .dl { grid-template-columns: minmax(0, 1fr); gap: 0 var(--s-5); }
  .dl dt { margin-top: var(--s-2); }
  .page-head .actions { margin-left: 0; }
  .toast { left: var(--s-4); right: var(--s-4); bottom: var(--s-4); max-width: none; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; justify-content: space-between; }
  .hero--page .row .btn { flex: 1 1 auto; }
  .hero__facts { grid-template-columns: 1fr; }
  .kpis, .kpis.grid, .kpis.grid-4, .kpis.grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
  .kpi { padding: var(--s-3); }
  .kpi__sub { font-size: .72rem; }
  .table td:first-child, .table th:first-child { min-width: 9.5rem; }
  .badge { white-space: normal; line-height: 1.45; padding-top: 2px; padding-bottom: 2px; }
  .table .badge { white-space: nowrap; }
}
@media (max-width: 600px) { .topbar__area { display: none; } .topbar .who { white-space: nowrap; } .topbar { flex-wrap: nowrap; } .topbar .who__name { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
@media (max-width: 380px) {
  .site-header .container { gap: var(--s-3); }
  .brand { gap: var(--s-2); }
  .brand__tile { width: 40px; height: 40px; border-radius: 10px; }
  .brand__word { font-size: .86rem; letter-spacing: .14em; }
  .brand__sub { font-size: .5rem; letter-spacing: .12em; }
  .nav-toggle { padding: 0 var(--s-2); }
}
@media (pointer: coarse), (max-width: 760px) {
  .side-link { min-height: 44px; }
  .tabs a { min-height: 44px; display: inline-flex; align-items: center; }
  .nav-toggle { min-height: 44px; }
  .pagination a { min-height: 44px; }
  .chip { min-height: 40px; }
  .btn--sm { min-height: 40px; }
  label.checkbox { min-height: 40px; align-items: center; }
  label.checkbox input { margin-top: 0; }
  .kanban__quick { min-height: 36px; }
}
@media (pointer: fine) { .page .input, .page .select, .page .textarea { font-size: .9375rem; min-height: 40px; } .page .filters .btn { min-height: 40px; } }

/* ── 20. Reduced motion: everything visible, nothing moves ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: .001ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  .intro { display: none !important; }
  .skeleton { animation: none !important; background: var(--ink-4); }
  .mini[data-layer="4"] .mini__cta { animation: none !important; }
  .js .statement--pinned { height: auto; }
  .js .statement--pinned .statement__stage { position: static; height: auto; padding: clamp(5rem, 12vw, 9rem) var(--gutter); }
  .js .statement--pinned .statement__labels { position: static; display: grid; margin: var(--s-7) auto 0; max-width: 760px; pointer-events: auto; }
  .js .statement--pinned .statement__label { position: static; opacity: 1; transform: none; }
  .js .scroll-words .w { opacity: 1; transform: none; }
  .js .stages--live .stage { opacity: 1; transform: none; }
}

/* ── 21. Print ────────────────────────────────────────────────────────────────────────────────── */
@media print {
  .site-header, .sidebar, .topbar, .site-footer, .btn, .no-print, .tabs, .filters, .toast, .draft-banner, .app-scrim, .intro, form { display: none !important; }
  body { background: #fff; color: #000; }
  .app { display: block; } .app-main, .page { padding: 0; }
  .readiness-report, .readiness-report * { color: #000 !important; background: #fff !important; border-color: #999 !important; box-shadow: none !important; }
  .readiness-report a { text-decoration: none; }
  .readiness-report .card, .readiness-report [data-gate], .readiness-report tr { break-inside: avoid; }
  .readiness-report .table { font-size: 9pt; }
  .readiness-report .meter span { background: #000 !important; }
  .readiness-report details > *:not(summary) { display: block; }
  .receipt, .receipt * { color: #000 !important; background: #fff !important; border-color: #999 !important; box-shadow: none !important; }
  .receipt { border: 1px solid #999; break-inside: avoid; }
  .fin-doc { box-shadow: none; border-radius: 0; max-width: none; padding: 0; }
  .fin-doc__tech { display: none !important; }
}
/* Phones: the full-bleed black contact band runs straight into the black footer. */
@media (max-width: 900px) { main:has(> #contact:last-child) + .site-footer { margin-top: 0; } main:has(> #contact:last-child) + .site-footer .container { border-top: 1px solid var(--line); padding-top: var(--s-7); } }

/* ── Portfolio explorer (docs/frontend/PORTFOLIO.md) ─────────────────────────────────────────────────────────
   One active project in a large embedded viewport; previous/next arrows sit OUTSIDE the viewport. Base styles
   are the enhanced carousel; nojs.css turns the same markup into an accessible project list. */
.pfx { position: relative; margin-top: var(--s-2); }
.pfx__row { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; gap: var(--s-4); align-items: center; }
.pfx--single .pfx__row { grid-template-columns: minmax(0, 1fr); }
.pfx__arrow { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; background: var(--ink-2); color: var(--white); border: 1px solid var(--line-gold); cursor: pointer; transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); }
.pfx__arrow:hover { background: var(--gold-2); color: var(--on-gold); border-color: var(--gold-2); }
.pfx__arrow:active { transform: scale(.96); }
.pfx__window { overflow: hidden; border-radius: var(--r-4); min-width: 0; }
.pfx__track { display: flex; list-style: none; margin: 0; padding: 0; transition: transform 560ms var(--ease-in-out); will-change: transform; }
.pfx__slide { flex: 0 0 100%; min-width: 0; }
.pfx__viewport { border: 1px solid var(--line-2); border-radius: var(--r-4); background: #050505; overflow: hidden; box-shadow: var(--shadow-1); }
.pfx__chrome { display: flex; align-items: center; gap: var(--s-3); height: 42px; padding: 0 var(--s-4); background: var(--ink-2); border-bottom: 1px solid var(--line); }
.pfx__dots { display: inline-flex; gap: 6px; } .pfx__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-4); }
.pfx__url { flex: 1; min-width: 0; height: 26px; display: flex; align-items: center; padding: 0 12px; border-radius: 999px; background: var(--ink-0); color: var(--text-3); font: 500 var(--fs-xs)/1 var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pfx__flag { font: 600 .68rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--gold-1); border: 1px solid var(--line-gold); border-radius: 999px; padding: 5px 9px; }
/* The screen keeps one outer size per breakpoint whatever the device mode (no layout shift). Inside it, a device
   "stage" shows the site at a real device width scaled to fit (portfolio.js sets the --pfx-* variables): the whole
   width is always visible and the site scrolls natively inside its own viewport. Posters fill the stage's width and
   can only ever be trimmed at the bottom — never at the sides. */
.pfx__viewport { container-type: inline-size; }
.pfx__screen { --pfx-pad: 0px; position: relative; height: clamp(380px, 62.5cqi, min(78svh, 760px)); background: var(--ink-1); overflow: hidden; overscroll-behavior: contain; }
/* Narrower frames (tablets, small laptops) get a taller, roughly square screen so tablet and phone viewports keep real height. */
/* Tall frames are for portrait devices only: a desktop rendering keeps the 16:10 desktop frame (62.5cqi) at every width,
   so the full desktop viewport fits without a gap below it. */
@container (max-width: 999px) { .pfx:not([data-mode="desktop"]) .pfx__screen { height: clamp(440px, 170cqi, 74svh); } }
.pfx__stage { position: absolute; top: var(--pfx-pad); left: 50%; width: var(--pfx-stw, 100%); height: var(--pfx-sth, 100%); transform: translateX(-50%); overflow: hidden; background: #050505; }
.pfx__poster { position: absolute; left: 0; top: 0; width: 100%; height: auto; display: none; transition: opacity var(--t-med) var(--ease-out); }
.pfx__poster--missing { position: absolute; inset: 0; height: 100%; display: grid; place-items: center; color: var(--text-3); font-size: var(--fs-sm); }
.pfx[data-mode="desktop"] .pfx__poster--desktop, .pfx[data-mode="tablet"] .pfx__poster--tablet, .pfx[data-mode="mobile"] .pfx__poster--mobile { display: block; }
.pfx[data-mode="tablet"] .pfx__slide:not(:has(.pfx__poster--tablet)) .pfx__poster--desktop { display: block; }
.pfx__frame { position: absolute; left: 0; top: 0; width: var(--pfx-dw, 100%); height: var(--pfx-fh, 100%); transform: scale(var(--pfx-s, 1)); transform-origin: 0 0; border: 0; background: #fff; opacity: 0; transition: opacity var(--t-med) var(--ease-out); }
.pfx__slide.is-ready .pfx__frame { opacity: 1; }
.pfx__slide.is-ready .pfx__poster { opacity: 0; }
/* Tablet and phone: a device bezel around the stage on a soft backdrop */
.pfx:is([data-mode="tablet"], [data-mode="mobile"]) .pfx__screen { background: radial-gradient(60% 80% at 50% 40%, #171717, #070707); }
.pfx:is([data-mode="tablet"], [data-mode="mobile"]) .pfx__stage { border-radius: 22px; box-shadow: 0 0 0 7px #1c1c1c, 0 0 0 8px var(--line-2), 0 30px 60px -20px rgba(0,0,0,.9); }
.pfx[data-mode="tablet"] .pfx__stage { border-radius: 16px; }
.pfx__status { position: absolute; left: var(--s-4); bottom: var(--s-4); max-width: min(520px, calc(100% - 2 * var(--s-4))); padding: var(--s-2) var(--s-3); border-radius: var(--r-2); background: rgba(8,8,8,.92); border: 1px solid var(--line-2); color: var(--text); font-size: var(--fs-sm); line-height: 1.45; }
.pfx__status:empty { display: none; }
.pfx__status a { color: var(--gold-1); }
.pfx__meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-4) var(--s-7); align-items: end; padding: var(--s-5) var(--s-1) 0; }
.pfx__count { margin: 0 0 var(--s-2); color: var(--text-3); font-size: var(--fs-sm); }
.pfx__count-n { color: var(--gold-1); font-weight: 600; }
.pfx__name { font: 500 var(--fs-3xl)/1.05 var(--font-display); letter-spacing: -.035em; margin: 0 0 var(--s-2); }
.pfx__desc { margin: 0; color: var(--text-2); max-width: 62ch; }
.pfx__links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: center; justify-content: flex-end; }
.pfx__label { flex-basis: 100%; text-align: right; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; color: var(--gold-1); }
.pfx__link { display: inline-flex; align-items: center; gap: 6px; color: var(--white); font-size: var(--fs-sm); font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--line-control); padding-bottom: 2px; }
.pfx__link:hover { color: var(--gold-1); border-bottom-color: var(--gold-1); }
@media (max-width: 1000px) {
  .pfx__meta { grid-template-columns: minmax(0, 1fr); }
  .pfx__links { justify-content: flex-start; } .pfx__label { text-align: left; }
}
.pfx__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.pfx__pages { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pfx__page, .pfx__tool { min-height: 38px; padding: 0 var(--s-3); border-radius: 999px; border: 1px solid var(--line-2); background: var(--ink-2); color: var(--text-2); font: 500 var(--fs-sm)/1 var(--font-body); cursor: pointer; transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out); }
.pfx__page:hover, .pfx__tool:hover { color: var(--white); border-color: var(--line-control); }
.pfx__page[aria-current="true"], .pfx__tool[aria-pressed="true"] { background: var(--gold-2); border-color: var(--gold-2); color: var(--on-gold); }
.pfx__tools { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.pfx__seg { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; border: 1px solid var(--line); background: var(--ink-1); }
.pfx__seg .pfx__tool { border-color: transparent; min-height: 32px; background: transparent; }
.pfx__seg .pfx__tool[aria-pressed="true"] { background: var(--gold-2); color: var(--on-gold); }
.pfx__hint { margin: var(--s-3) 0 0; color: var(--text-3); font-size: var(--fs-xs); }
.pfx--single .pfx__pages, .pfx--case .pfx__links .pfx__link--case { display: none; }
/* Expanded view: the same element becomes a fixed overlay, so the mounted demo is never reloaded. */
/* Expanded: the same element becomes a fixed overlay (the mounted demo is never reloaded). The project name and links
   move into a compact header above the frame, the controls sit beneath it, and the frame takes the rest of the height. */
.pfx--expanded { position: fixed; inset: 0; z-index: 250; margin: 0; padding: var(--s-3) clamp(var(--s-3), 2.5vw, var(--s-6)) var(--s-3); background: #050505; display: flex; flex-direction: column; overflow: hidden; overscroll-behavior: contain; }
.pfx--expanded .pfx__row { flex: 1 1 auto; min-height: 0; }
.pfx--expanded .pfx__window, .pfx--expanded .pfx__track, .pfx--expanded .pfx__slide { height: 100%; }
.pfx--expanded .pfx__slide { display: flex; flex-direction: column; min-height: 0; }
.pfx--expanded .pfx__meta { order: -1; padding: 0 var(--s-1) var(--s-3); align-items: center; }
.pfx--expanded .pfx__name { font-size: var(--fs-xl); margin: 0; }
.pfx--expanded .pfx__desc, .pfx--expanded .pfx__count, .pfx--expanded .pfx__label, .pfx--expanded .pfx__hint { display: none; }
.pfx--expanded .pfx__viewport { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.pfx--expanded .pfx__screen { flex: 1 1 auto; height: auto; min-height: 240px; }
.pfx--expanded .pfx__bar { margin-top: var(--s-3); padding-top: var(--s-3); }
html.pfx-lock { overflow: hidden; }
.pf-index { margin-top: var(--s-8); }
.pf-index__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s-5); }
.index-list .pf-index__live { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-2); color: var(--text-2); font-size: var(--fs-sm); white-space: nowrap; text-decoration: underline; text-decoration-color: var(--line-control); text-underline-offset: 3px; }
.index-list .pf-index__live::after { content: "↗"; margin-left: .35em; }
.index-list .pf-index__live:hover { color: var(--gold-1); text-decoration-color: currentColor; }
@media (max-width: 760px) { .pf-index__item { grid-template-columns: minmax(0, 1fr); } .index-list .pf-index__live { padding: 0 0 var(--s-4); } }
.pf-index__title { font: 500 var(--fs-2xl)/1.1 var(--font-display); letter-spacing: -.03em; margin-bottom: var(--s-4); }
@media (max-width: 760px) {
  .pfx__row { grid-template-columns: 1fr 1fr; grid-template-areas: "win win" "prev next"; gap: var(--s-3); }
  .pfx--single .pfx__row { grid-template-columns: 1fr; grid-template-areas: "win"; }
  .pfx__window { grid-area: win; }
  .pfx__arrow { width: 100%; height: 52px; }
  .pfx__arrow--prev { grid-area: prev; } .pfx__arrow--next { grid-area: next; }
  .pfx__tools { width: 100%; }
  .pfx__seg { flex: 1 1 100%; justify-content: space-between; } .pfx__seg .pfx__tool { flex: 1; }
  .pfx__meta { grid-template-columns: 1fr; }
  .pfx__links { justify-content: flex-start; } .pfx__label { text-align: left; }
  .pfx__name { font-size: var(--fs-2xl); }
  .pfx--expanded .pfx__row { grid-template-rows: minmax(0, 1fr) auto; }
  .pfx--expanded .pfx__arrow { height: 44px; }
  .pfx--expanded .pfx__pages { display: none; }
}

/* ── Service visuals (docs/frontend/SERVICE-VISUALS.md) ───────────────────────────────────────────── */
/* Two-column service hero: the existing copy and CTAs left, an interactive demonstration right; stacked below 1000px. */
.hero--service .hero-service { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.hero--service .hero-service__copy { min-width: 0; }
.hero--service .hero-service__visual { min-width: 0; }
@media (max-width: 999px) { .hero--service .hero-service { grid-template-columns: minmax(0, 1fr); } }

.sv { --sv-h: 330px; position: relative; margin: 0; padding: var(--s-4); border: 1px solid var(--line-2); border-radius: var(--r-2);
  background: linear-gradient(160deg, var(--ink-2), var(--ink-1) 60%); box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 30px 60px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(0,0,0,.4);
  color: var(--text); font-size: var(--fs-sm); line-height: 1.5; min-width: 0; }
.sv::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; background: linear-gradient(140deg, var(--gold-ring), transparent 35%, transparent 70%, rgba(215,181,111,.12)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 1px; }
.sv__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-bottom: var(--s-3); }
.sv__tag { display: inline-flex; align-items: center; gap: .4em; padding: .2em .6em; border: 1px solid var(--line-gold); border-radius: 999px; color: var(--gold-1); font-size: var(--fs-xs); letter-spacing: .04em; text-transform: uppercase; }
.sv__tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-2); }
.sv__title { color: var(--white); font-weight: 600; font-size: var(--fs-md); }
.sv__body { position: relative; min-width: 0; }
.sv [hidden] { display: none !important; }
.sv__controls { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.sv__opt, .sv__toggle { appearance: none; font: inherit; font-size: var(--fs-sm); line-height: 1.2; min-height: 40px; padding: .55em .9em; border-radius: var(--r-1); border: 1px solid var(--line-control); background: var(--ink-3); color: var(--text); cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast); }
.sv__opt:hover, .sv__toggle:hover { border-color: var(--gold-3); color: var(--white); }
.sv__opt:active { transform: translateY(1px); }
.sv__opt[aria-pressed="true"] { border-color: var(--gold-2); background: var(--gold-wash); color: var(--gold-pale); box-shadow: 0 0 0 1px var(--gold-2) inset; }
.sv__opt--gold { background: var(--gold-2); border-color: var(--gold-2); color: var(--on-gold); font-weight: 600; }
.sv__opt--gold:hover { background: var(--gold-pale); color: var(--on-gold); }
.sv__opt--quiet { background: transparent; border-color: var(--line-2); color: var(--text-2); }
.sv__opt--sm { min-height: 32px; padding: .35em .7em; font-size: var(--fs-xs); }
.sv__opt:disabled, .sv__opt[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.sv__opt:focus-visible, .sv__toggle:focus-visible, .sv button:focus-visible, .sv input:focus-visible, .sv [tabindex]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sv__toggle { display: inline-flex; align-items: center; gap: .55em; }
.sv__toggle::before { content: ""; flex: none; width: 28px; height: 16px; border-radius: 999px; background: var(--ink-4) radial-gradient(circle at 8px 50%, var(--text-3) 5px, transparent 5.5px); border: 1px solid var(--line-control); transition: background var(--t-fast); }
.sv__toggle[aria-pressed="true"]::before { background: var(--gold-2) radial-gradient(circle at 19px 50%, var(--on-gold) 5px, transparent 5.5px); border-color: var(--gold-2); }
.sv__notes, .sv__list { list-style: none; margin: var(--s-3) 0 0; padding: var(--s-3) 0 0; border-top: 1px solid var(--line); color: var(--text-2); }
.sv__notes strong, .sv__list strong { color: var(--white); }
.sv__list li + li { margin-top: .35em; }
.sv__list code, .sv code { font-family: var(--font-mono); font-size: .92em; color: var(--gold-1); }
.sv[data-js] .sv__note:not([data-on]) { display: none; }
.sv:not([data-js]) .sv__note + .sv__note { margin-top: .4em; }
.sv__hint { margin: var(--s-3) 0 0; color: var(--text-3); font-size: var(--fs-xs); }
.sv-small { color: var(--text-3); font-size: var(--fs-xs); margin: .5em 0 0; }
.sv-ok { color: var(--ok); margin: 0; }
.sv-note-inline { color: var(--warn); margin: .6em 0 0; }
.sv-badge { display: inline-block; padding: .15em .55em; border-radius: 999px; background: var(--ink-4); color: var(--warn); font-size: var(--fs-xs); border: 1px solid #5c4a20; }
.sv-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-3) 0 0; }
.sv-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .3em var(--s-3); margin: 0; }
.sv-kv dt { color: var(--text-3); } .sv-kv dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.sv-table { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); }
.sv-table th, .sv-table td { text-align: left; padding: .45em .5em; border-bottom: 1px solid var(--line); }
.sv-table th { color: var(--text-3); font-weight: 500; }
.sv-log { list-style: none; margin: var(--s-3) 0 0; padding: var(--s-2) var(--s-3); border-left: 2px solid var(--gold-3); background: var(--ink-1); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-2); }
.sv-log--warn { border-left-color: var(--warn); }
.sv-log li::before { content: "› "; color: var(--gold-2); }
.sv[data-js] .sv-log li { opacity: 0; transform: translateX(-6px); transition: opacity var(--t-med), transform var(--t-med) var(--ease-out); }
.sv[data-js] .sv-log li.is-in { opacity: 1; transform: none; }
.sv[data-paused] *, .sv[data-paused] *::before, .sv[data-paused] *::after { animation-play-state: paused !important; }

/* 1. layers */
.sv-layers { height: var(--sv-h); perspective: 1100px; display: grid; place-items: center; }
.sv-layers__stack { position: relative; width: min(100%, 420px); aspect-ratio: 16 / 11; transform-style: preserve-3d; transition: transform 700ms var(--ease-in-out); }
.sv-layer { position: absolute; inset: 0; border-radius: 10px; border: 1px solid var(--line-2); transition: transform 700ms var(--ease-in-out), opacity 500ms, border-color 300ms, box-shadow 300ms; }
.sv-layer__label { position: absolute; left: 8px; top: -1.6em; font-size: var(--fs-xs); color: var(--gold-1); opacity: 0; transition: opacity 300ms; white-space: nowrap; }
.sv-layer--structure { background: var(--ink-1); }
.sv-layer--visual, .sv-layer--responsive, .sv-layer--function { background: transparent; border-color: transparent; }
.sv-layer i, .sv-layer b, .sv-layer .r, .sv-layer .f { position: absolute; display: block; border-radius: 4px; }
.sv-layer .w { border: 1px dashed #4a4a4a; }
.sv-layer .w--nav { left: 4%; right: 4%; top: 5%; height: 8%; } .sv-layer .w--h { left: 6%; top: 22%; width: 48%; height: 12%; } .sv-layer .w--p { left: 6%; top: 37%; width: 40%; height: 14%; }
.sv-layer .w--btn { left: 6%; top: 55%; width: 18%; height: 8%; } .sv-layer .w--img { right: 6%; top: 22%; width: 34%; height: 41%; }
.sv-layer .w--c1, .sv-layer .w--c2, .sv-layer .w--c3 { top: 70%; width: 28%; height: 16%; } .sv-layer .w--c1 { left: 6%; } .sv-layer .w--c2 { left: 36%; } .sv-layer .w--c3 { left: 66%; } .sv-layer .w--foot { left: 4%; right: 4%; bottom: 3%; height: 4%; }
.sv-layer .v--logo { left: 6%; top: 7%; width: 12%; height: 4%; background: var(--gold-2); } .sv-layer .v--h1 { left: 6%; top: 23%; width: 46%; height: 5%; background: var(--white); }
.sv-layer .v--h2 { left: 6%; top: 30%; width: 34%; height: 5%; background: var(--white); } .sv-layer .v--p1, .sv-layer .v--p2 { left: 6%; height: 2.2%; background: var(--text-3); } .sv-layer .v--p1 { top: 39%; width: 40%; } .sv-layer .v--p2 { top: 44%; width: 32%; }
.sv-layer .v--img { right: 6%; top: 22%; width: 34%; height: 41%; background: linear-gradient(135deg, #3a2f1b, var(--gold-3) 55%, var(--gold-pale)); }
.sv-layer .v--c1, .sv-layer .v--c2, .sv-layer .v--c3 { top: 70%; width: 28%; height: 16%; background: var(--ink-3); border: 1px solid var(--line-2); } .sv-layer .v--c1 { left: 6%; } .sv-layer .v--c2 { left: 36%; } .sv-layer .v--c3 { left: 66%; }
.sv-layer .r { border: 2px solid var(--gold-3); background: rgba(8,8,8,.5); }
.sv-layer .r--desk { left: 8%; top: 12%; width: 50%; height: 62%; } .sv-layer .r--tab { left: 52%; top: 20%; width: 26%; height: 58%; } .sv-layer .r--phone { left: 80%; top: 30%; width: 12%; height: 50%; border-radius: 6px; }
.sv-layer .f--form { left: 6%; top: 54%; width: 24%; height: 10%; display: flex !important; gap: 3px; align-items: center; } .sv-layer .f--form i { position: static !important; flex: 1; height: 60%; background: var(--ink-4); border: 1px solid var(--line-control); }
.sv-layer .f--form .f__btn { flex: .6; background: var(--gold-2); border-color: var(--gold-2); }
.sv-layer .f--ok { right: 4%; top: 6%; width: 22px; height: 22px; display: grid !important; place-items: center; border-radius: 50% !important; background: var(--ok); color: var(--on-gold); font-size: 13px; font-weight: 700; }
.sv-layer .f--seo { right: 10%; bottom: 3%; font-family: var(--font-mono); font-size: 10px; color: var(--gold-1); white-space: nowrap; }
.sv-layer--responsive { opacity: 0; }
/* assembled */
.sv-layers[data-view="all"] .sv-layer--structure { opacity: .55; }
/* exploded: an isometric stack; the chosen layer is lifted, gold-edged and labelled */
.sv-layers:not([data-view="all"]) .sv-layers__stack { transform: rotateX(56deg) rotateZ(-38deg) translate3d(-4%, 8%, 0) scale(.82); }
.sv-layers:not([data-view="all"]) .sv-layer { border-color: var(--line-2); background-color: rgba(16,16,16,.72); box-shadow: 0 18px 30px -12px rgba(0,0,0,.9); opacity: .5; }
.sv-layers:not([data-view="all"]) .sv-layer__label { opacity: 1; transform: rotateZ(0); }
.sv-layers:not([data-view="all"]) .sv-layer--structure { transform: translateZ(0); }
.sv-layers:not([data-view="all"]) .sv-layer--visual { transform: translateZ(55px); }
.sv-layers:not([data-view="all"]) .sv-layer--responsive { transform: translateZ(110px); }
.sv-layers:not([data-view="all"]) .sv-layer--function { transform: translateZ(165px); }
.sv-layers[data-view="structure"] .sv-layer--structure, .sv-layers[data-view="visual"] .sv-layer--visual, .sv-layers[data-view="responsive"] .sv-layer--responsive, .sv-layers[data-view="function"] .sv-layer--function { opacity: 1; border-color: var(--gold-2); box-shadow: 0 0 0 1px var(--gold-2), 0 30px 40px -14px rgba(0,0,0,.95); }
.sv-layers[data-view="structure"] .sv-layer--structure { transform: translateZ(-20px) translateX(-10px); }
.sv-layers[data-view="visual"] .sv-layer--visual { transform: translateZ(75px) translateX(-24px); }
.sv-layers[data-view="responsive"] .sv-layer--responsive { transform: translateZ(130px) translateX(-24px); }
.sv-layers[data-view="function"] .sv-layer--function { transform: translateZ(200px) translateX(-24px); }
/* build (Replay): layers drop into place one at a time */
.sv-layers[data-view="build"] .sv-layer { opacity: 0; }
.sv-layers[data-view="build"][data-built="1"] .sv-layer--structure,
.sv-layers[data-view="build"][data-built="2"] :is(.sv-layer--structure, .sv-layer--visual),
.sv-layers[data-view="build"][data-built="3"] :is(.sv-layer--structure, .sv-layer--visual, .sv-layer--responsive),
.sv-layers[data-view="build"][data-built="4"] .sv-layer { opacity: 1; }
.sv:not([data-js]) .sv-layers { height: auto; padding: var(--s-4) 0; }

/* 2. compare */
.sv-compare { --pos: 50%; position: relative; height: var(--sv-h); border-radius: 10px; overflow: hidden; border: 1px solid var(--line-2); touch-action: pan-y; user-select: none; cursor: ew-resize; }
.sv-site { position: absolute; inset: 0; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.sv-site--before { background: #e9e4cf; color: #2b2bb0; font-family: "Times New Roman", Times, serif; }
.sv-site--before .sv-site__bar { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px; background: #8a1c1c; color: #ffef6b; padding: 4px 8px; font-size: 13px; }
.sv-site--before .sv-site__nav span { margin-left: 8px; text-decoration: underline; }
.sv-site__shout { background: #ffef6b; color: #c00; text-align: center; font-weight: 700; font-size: 13px; padding: 3px; }
.sv-site--before .sv-site__hero { display: flex; flex-direction: column; gap: 4px; text-align: center; font-size: 12px; }
.sv-site--before .sv-site__h { font-size: 17px; color: #8a1c1c; font-style: italic; }
.sv-site--before .sv-site__cta { align-self: center; padding: 2px 10px; background: #c0c0c0; border: 2px outset #eee; color: #000; font-size: 12px; }
.sv-site--before .sv-site__items { display: flex; gap: 6px; justify-content: center; font-size: 12px; } .sv-site--before .sv-site__items span { border: 1px solid #2b2bb0; padding: 2px 6px; }
.sv-site--before .sv-site__hours { font-size: 11px; text-align: center; color: #555; }
.sv-site--after { background: #faf7f1; color: #1d1a16; font-family: var(--font-body); clip-path: inset(0 0 0 var(--pos)); }
.sv-compare.is-animating .sv-site--after { transition: clip-path 450ms var(--ease-in-out); }
.sv-compare.is-animating .sv-compare__handle { transition: left 450ms var(--ease-in-out); }
.sv-site--after .sv-site__bar { display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.sv-site--after .sv-site__brand { font-weight: 700; letter-spacing: -.01em; } .sv-site--after .sv-site__nav { display: flex; gap: 12px; color: #6b6257; }
.sv-site--after .sv-site__hero { display: flex; flex-direction: column; gap: 8px; padding: 18px 0 8px; }
.sv-site--after .sv-site__h { font-size: 22px; line-height: 1.12; font-weight: 700; letter-spacing: -.02em; max-width: 14ch; }
.sv-site--after .sv-site__p { font-size: 12px; color: #5a5249; max-width: 34ch; }
.sv-site--after .sv-site__cta { align-self: flex-start; padding: 7px 14px; border-radius: 6px; background: #1d1a16; color: #faf7f1; font-size: 12px; font-weight: 600; }
.sv-site--after .sv-site__items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; font-size: 11px; }
.sv-site--after .sv-site__items span { padding: 22px 8px 6px; border-radius: 6px; background: linear-gradient(#e8dcc6, #d9c6a3); }
.sv-site--after .sv-site__hours { font-size: 11px; color: #6b6257; }
.sv-compare__lbl { position: absolute; bottom: 10px; padding: 2px 8px; border-radius: 999px; background: rgba(8,8,8,.82); color: var(--white); font-size: var(--fs-xs); pointer-events: none; }
.sv-compare__lbl--before { left: 10px; } .sv-compare__lbl--after { right: 10px; color: var(--gold-pale); }
.sv-compare__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 44px; margin-left: -22px; display: grid; place-items: center; cursor: ew-resize; }
.sv-compare__handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--gold-2); box-shadow: 0 0 12px rgba(215,181,111,.6); }
.sv-compare__grip { position: relative; width: 34px; height: 34px; border-radius: 50%; background: var(--gold-2); box-shadow: 0 6px 18px rgba(0,0,0,.5); }
.sv-compare__grip::before, .sv-compare__grip::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; border: 6px solid transparent; margin-top: -6px; }
.sv-compare__grip::before { left: 3px; border-right-color: var(--on-gold); } .sv-compare__grip::after { right: 3px; border-left-color: var(--on-gold); }
.sv-compare.is-dragging .sv-compare__grip { transform: scale(1.08); }

/* 3. shop */
.sv-steps { display: flex; gap: 4px; list-style: none; margin: 0 0 var(--s-3); padding: 0; font-size: var(--fs-xs); counter-reset: s; }
.sv-steps li { flex: 1; padding: .35em .5em; border-top: 2px solid var(--line-2); color: var(--text-3); counter-increment: s; }
.sv-steps li::before { content: counter(s) " · "; }
.sv-steps li[aria-current] { border-top-color: var(--gold-2); color: var(--gold-pale); }
.sv-shop__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-3); }
.sv-shop__products { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.sv-prod { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "art name price" "art btn btn"; gap: 2px var(--s-2); align-items: center; padding: var(--s-2); border: 1px solid var(--line); border-radius: var(--r-1); background: var(--ink-1); }
.sv-prod__art { grid-area: art; width: 44px; height: 44px; border-radius: 6px; }
.sv-prod__art--notebook { background: linear-gradient(135deg, #2f3a2a, #59704f); } .sv-prod__art--pen { background: linear-gradient(135deg, #5c4a20, var(--gold-2)); } .sv-prod__art--tote { background: linear-gradient(135deg, #6b6255, #cfc3ab); }
.sv-prod__name { grid-area: name; color: var(--white); } .sv-prod__price { grid-area: price; color: var(--gold-1); font-variant-numeric: tabular-nums; }
.sv-prod .sv__opt { grid-area: btn; justify-self: start; }
.sv-prod.is-added { animation: sv-pop 420ms var(--ease-out); }
@keyframes sv-pop { 40% { box-shadow: 0 0 0 1px var(--gold-2); background: var(--gold-wash); } }
.sv-cart { padding: var(--s-3); border: 1px solid var(--line-2); border-radius: var(--r-1); background: var(--ink-1); display: flex; flex-direction: column; gap: var(--s-2); }
.sv-cart__title { margin: 0; color: var(--white); font-weight: 600; } .sv-cart__title span { color: var(--text-3); font-weight: 400; }
.sv-cart__lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; min-height: 48px; }
.sv-cart__empty { color: var(--text-3); }
.sv-cart__line { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s-2); align-items: center; }
.sv-cart__name { overflow-wrap: anywhere; } .sv-cart__amt { font-variant-numeric: tabular-nums; min-width: 5.5em; text-align: right; }
.sv-qty { display: inline-flex; align-items: center; border: 1px solid var(--line-control); border-radius: var(--r-1); }
.sv-qty__btn { appearance: none; border: 0; background: transparent; color: var(--text); width: 30px; height: 30px; cursor: pointer; font: inherit; }
.sv-qty__btn:hover { color: var(--gold-1); } .sv-qty__n { min-width: 1.6em; text-align: center; font-variant-numeric: tabular-nums; }
.sv-cart__sum { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s-2); margin: 0; padding-top: var(--s-2); border-top: 1px solid var(--line); font-size: var(--fs-xs); }
.sv-cart__sum dt { color: var(--text-3); } .sv-cart__sum dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.sv-cart__sum .sv-cart__total { color: var(--white); font-size: var(--fs-sm); font-weight: 600; }
.sv-shop__checkout, .sv-shop__done { padding: var(--s-4); border: 1px solid var(--line-gold); border-radius: var(--r-1); background: var(--ink-1); }
.sv-shop__secure { margin: 0 0 .5em; color: var(--gold-1); font-weight: 600; } .sv-shop__secure::before { content: "🔒 "; }
.sv-shop__amount { color: var(--white); }
.sv-shop__ok { color: var(--ok); font-weight: 600; margin: 0 0 .5em; }
.sv-shop__email { margin: var(--s-3) 0 0; padding: var(--s-3); background: var(--ink-0); border: 1px solid var(--line); border-radius: var(--r-1); font-size: 11px; white-space: pre-wrap; color: var(--text-2); }
.sv[data-js] .sv-shop:not([data-step="checkout"]) .sv-shop__checkout,
.sv[data-js] .sv-shop:not([data-step="done"]) .sv-shop__done,
.sv[data-js] .sv-shop:is([data-step="checkout"], [data-step="done"]) .sv-shop__grid { display: none; }
.sv:not([data-js]) .sv-shop__done, .sv:not([data-js]) [data-to-checkout], .sv:not([data-js]) [data-add], .sv:not([data-js]) .sv-shop__actions { display: none; }
.sv:not([data-js]) .sv-shop__checkout { margin-top: var(--s-3); }

/* 4. modules */
.sv-mod { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--s-3); align-items: stretch; }
.sv-mod__map { position: relative; min-height: 220px; }
.sv-mod__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.sv-mod__line { fill: none; stroke: var(--line-2); stroke-width: 2; stroke-dasharray: 4 6; }
.sv-mod__line.is-flow { stroke: var(--gold-2); animation: sv-flow 900ms linear 2; }
@keyframes sv-flow { to { stroke-dashoffset: -40; } }
.sv-mod__node { position: absolute; transform: translate(-50%, -50%); padding: .4em .7em; border-radius: var(--r-1); border: 1px solid var(--line-2); background: var(--ink-3); color: var(--text-2); font-size: var(--fs-xs); white-space: nowrap; box-shadow: 0 10px 20px -10px rgba(0,0,0,.9); transition: border-color var(--t-med), color var(--t-med); }
.sv-mod__node--core { left: 50%; top: 50%; border-color: var(--gold-3); color: var(--gold-pale); background: linear-gradient(var(--ink-4), var(--ink-2)); padding: .7em 1em; }
.sv-mod__node[data-node="scheduling"] { left: 20%; top: 25%; } .sv-mod__node[data-node="dashboard"] { left: 80%; top: 25%; } .sv-mod__node[data-node="workflow"] { left: 50%; top: 87.5%; }
.sv-mod[data-module="scheduling"] [data-node="scheduling"], .sv-mod[data-module="dashboard"] [data-node="dashboard"], .sv-mod[data-module="workflow"] [data-node="workflow"] { border-color: var(--gold-2); color: var(--white); }
.sv-mod[data-module="scheduling"] [data-line="scheduling"], .sv-mod[data-module="dashboard"] [data-line="dashboard"], .sv-mod[data-module="workflow"] [data-line="workflow"] { stroke: var(--gold-3); }
.sv-mod__ui { min-width: 0; }
.sv-mod__panel { padding: var(--s-3); border: 1px solid var(--line-2); border-radius: var(--r-1); background: var(--ink-1); }
.sv[data-js] .sv-mod:not([data-module="scheduling"]) [data-panel="scheduling"], .sv[data-js] .sv-mod:not([data-module="dashboard"]) [data-panel="dashboard"], .sv[data-js] .sv-mod:not([data-module="workflow"]) [data-panel="workflow"] { display: none; }
.sv:not([data-js]) .sv-mod__panel + .sv-mod__panel { margin-top: var(--s-2); }
.sv-mod__h { margin: 0 0 var(--s-2); color: var(--white); font-weight: 600; }
.sv-mod__slots, .sv-mod__tasks, .sv-mod__feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sv-mod__slots li, .sv-mod__tasks li { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); min-height: 32px; }
.sv-mod__slots li > span:first-child { font-variant-numeric: tabular-nums; color: var(--text-3); }
.sv-mod__booked { color: var(--gold-1); font-size: var(--fs-xs); } .sv-mod__booked--new { color: var(--ok); }
.sv-mod__tasks li.is-done > span:first-child { text-decoration: line-through; color: var(--text-3); } .sv-mod__ok { color: var(--ok); font-size: var(--fs-xs); }
.sv-mod__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: var(--s-2); }
.sv-mod__kpis span { display: flex; flex-direction: column; padding: var(--s-2); border-radius: var(--r-1); background: var(--ink-3); color: var(--text-3); font-size: var(--fs-xs); }
.sv-mod__kpis b { color: var(--white); font-size: var(--fs-xl); font-variant-numeric: tabular-nums; }
.sv-mod__kpis b.is-bump { animation: sv-bump 500ms var(--ease-out); }
@keyframes sv-bump { 30% { color: var(--gold-1); transform: translateY(-2px); } }
.sv-mod__feed { font-size: var(--fs-xs); color: var(--text-2); max-height: 96px; overflow: auto; }

/* 5. technical SEO */
.sv-seo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-3); }
.sv-seo__map { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "robots home sitemap" "services about contact" "kitchens bathrooms old"; gap: 18px 8px; align-content: center; position: relative; padding: var(--s-2) 0; }
.sv-seo__map::before { content: ""; position: absolute; left: 16%; right: 16%; top: 33%; border-top: 1px dashed var(--line-2); }
.sv-seo__map::after { content: ""; position: absolute; left: 16%; right: 50%; top: 66%; border-top: 1px dashed var(--line-2); }
.sv-seo__node { position: relative; z-index: 1; appearance: none; font: inherit; font-family: var(--font-mono); font-size: 10.5px; min-height: 44px; padding: .4em .3em; border-radius: var(--r-1); border: 1px solid var(--line-control); background: var(--ink-3); color: var(--text); cursor: pointer; overflow-wrap: normal; transition: border-color var(--t-fast), box-shadow var(--t-med), background var(--t-med); }
.sv-seo__node--robots { grid-area: robots; } .sv-seo__node--home { grid-area: home; } .sv-seo__node--sitemap { grid-area: sitemap; } .sv-seo__node--services { grid-area: services; }
.sv-seo__node--about { grid-area: about; } .sv-seo__node--contact { grid-area: contact; } .sv-seo__node--kitchens { grid-area: kitchens; } .sv-seo__node--bathrooms { grid-area: bathrooms; } .sv-seo__node--old { grid-area: old; }
.sv-seo__node--file { border-style: dashed; color: var(--text-2); } .sv-seo__node--redirect { color: var(--warn); }
.sv-seo__node:hover { border-color: var(--gold-3); }
.sv-seo__node[aria-pressed="true"] { border-color: var(--gold-2); background: var(--gold-wash); color: var(--gold-pale); }
.sv-seo__node.is-crawled::after { content: "✓"; position: absolute; top: -7px; right: -5px; width: 15px; height: 15px; border-radius: 50%; background: var(--ok); color: var(--on-gold); font-size: 9px; line-height: 15px; font-family: var(--font-body); }
.sv-seo__node.is-visiting { box-shadow: 0 0 0 3px var(--gold-ring), 0 0 18px rgba(215,181,111,.45); }
.sv-seo__inspect { min-width: 0; padding: var(--s-3); border: 1px solid var(--line-2); border-radius: var(--r-1); background: var(--ink-1); }
.sv-seo__meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .25em var(--s-2); margin: 0; font-size: var(--fs-xs); }
.sv-seo__meta dt { color: var(--text-3); } .sv-seo__meta dd { margin: 0; overflow-wrap: anywhere; }
.sv[data-js] .sv-seo__meta:not([data-on]) { display: none; }
.sv:not([data-js]) .sv-seo__meta + .sv-seo__meta { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.sv-seo__log { grid-column: 1 / -1; list-style: none; margin: 0; padding: var(--s-2) var(--s-3); min-height: 3.2em; max-height: 110px; overflow: auto; border-left: 2px solid var(--gold-3); background: var(--ink-1); font-family: var(--font-mono); font-size: 11px; color: var(--text-2); }

/* 6. staged flows */
.sv-flow__chips { list-style: none; margin: 0 0 var(--s-3); padding: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: thin; }
.sv-flow__chip { appearance: none; font: inherit; font-size: var(--fs-xs); display: inline-flex; gap: .4em; align-items: center; min-height: 36px; padding: .3em .65em; white-space: nowrap; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--text-3); cursor: pointer; }
.sv-flow__chip.is-past { color: var(--text); border-color: var(--gold-3); }
.sv-flow__chip[aria-pressed="true"] { color: var(--on-gold); background: var(--gold-2); border-color: var(--gold-2); }
.sv-flow__chip[data-gate]:not([aria-pressed="true"]) { border-style: dashed; }
.sv-flow__chip:disabled { opacity: .45; cursor: not-allowed; }
.sv-flow__n { font-family: var(--font-mono); opacity: .75; }
.sv-flow__toggles { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-3); }
.sv-flow__panels { position: relative; }
.sv-flow__panel { padding: var(--s-4); border: 1px solid var(--line-2); border-radius: var(--r-1); background: var(--ink-1); min-height: 214px; }
.sv-flow__panel[data-gate] { border-color: var(--line-gold); }
.sv-flow__panel > p { margin: 0 0 .5em; }
.sv-flow__h { margin: 0 0 var(--s-3); font-size: var(--fs-md); color: var(--white); }
.sv[data-js] .sv-flow__panel:not([data-on]) { display: none; }
.sv[data-js] .sv-flow__panel[data-on] { animation: sv-in 360ms var(--ease-out); }
@keyframes sv-in { from { opacity: 0; transform: translateY(8px); } }
.sv:not([data-js]) .sv-flow__panel + .sv-flow__panel { margin-top: var(--s-2); }
.sv:not([data-js]) .sv-flow__chips, .sv:not([data-js]) .sv-flow__toggles { display: none; }
.sv-msg { margin: 0; padding: var(--s-3); border-left: 2px solid var(--gold-2); background: var(--ink-2); }
.sv-msg p { margin: 0 0 .4em; color: var(--white); } .sv-msg footer { color: var(--text-3); font-size: var(--fs-xs); }
.sv-route { list-style: none; display: flex; gap: 6px; padding: 0; margin: var(--s-2) 0 0; }
.sv-route li { padding: .3em .7em; border: 1px solid var(--line-2); border-radius: var(--r-1); color: var(--text-3); } .sv-route li.is-on { border-color: var(--gold-2); color: var(--gold-pale); }
.sv-draft { padding: var(--s-3); border: 1px dashed var(--line-gold); border-radius: var(--r-1); } .sv-draft p { margin: .5em 0 0; }
.sv-mail { padding: var(--s-3); background: #f6f4ef; color: #1d1a16; border-radius: var(--r-1); }
.sv-mail p { margin: 0 0 .4em; } .sv-mail__from { font-size: 11px; color: #6b6257; } .sv-mail__subj { font-weight: 700; }
.sv-auth { list-style: none; padding: 0; margin: var(--s-2) 0 0; display: grid; gap: 4px; font-family: var(--font-mono); font-size: var(--fs-xs); }
.sv-auth .ok { color: var(--ok); font-weight: 500; } .sv-auth .bad { color: var(--bad); font-weight: 500; }
.sv-auth div { display: inline; }
.sv-card { padding: var(--s-3); border: 1px solid var(--line-2); border-radius: var(--r-1); background: var(--ink-2); } .sv-card__h { margin: 0; color: var(--white); font-weight: 600; }
.sv-timeline { margin: var(--s-2) 0 0; padding-left: 1.1em; color: var(--text-2); }
.sv-gbp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-3); }
.sv-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sv-gbp__card { padding: var(--s-3); border-radius: var(--r-1); background: #fff; color: #202124; font-family: Arial, Helvetica, sans-serif; font-size: 12px; }
.sv-gbp__card p { margin: 0 0 .35em; } .sv-gbp__name { font-size: 16px; } .sv-gbp__link { color: #1a56c4; } .sv-gbp__card .sv-small { color: #5f6368; }

/* custom development */
.sv-ms__label { display: flex; justify-content: space-between; gap: var(--s-2); color: var(--text-2); }
.sv-ms__label output { color: var(--white); font-weight: 600; font-variant-numeric: tabular-nums; }
.sv-ms__range { width: 100%; margin: var(--s-2) 0 var(--s-3); accent-color: var(--gold-2); min-height: 44px; }
.sv-ms__steps { list-style: none; margin: 0; padding: 0 0 0 18px; position: relative; display: grid; gap: 6px; }
.sv-ms__steps::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--gold-3), var(--line-2)); }
.sv-ms__steps li { position: relative; display: flex; justify-content: space-between; gap: var(--s-2); padding: .35em .6em; border-radius: var(--r-1); }
.sv-ms__steps li::before { content: ""; position: absolute; left: -17px; top: .75em; width: 10px; height: 10px; border-radius: 50%; background: var(--ink-0); border: 2px solid var(--gold-3); }
.sv-ms__steps li b { font-weight: 500; color: var(--text-3); text-align: right; }
.sv-ms__steps li.is-pay { background: var(--gold-wash); border: 1px solid var(--line-gold); }
.sv-ms__steps li.is-pay::before { background: var(--gold-2); }
.sv-ms__steps li.is-pay b { color: var(--gold-pale); font-variant-numeric: tabular-nums; font-weight: 600; }

/* portals */
.sv-roles__signin { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2); padding: var(--s-2) var(--s-3); border-radius: var(--r-1); background: var(--ink-3); margin-bottom: var(--s-2); }
.sv-roles__who { color: var(--white); } .sv-roles__mfa { color: var(--gold-1); font-size: var(--fs-xs); }
.sv-roles__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sv-roles__rows li { display: flex; justify-content: space-between; gap: var(--s-2); padding: .45em .7em; border: 1px solid var(--line-2); border-radius: var(--r-1); background: var(--ink-1); transition: opacity var(--t-med), border-color var(--t-med); }
.sv-roles__state { font-weight: 500; color: var(--ok); } .sv-roles__state::before { content: "● "; }
.sv-roles__rows li[data-denied] { opacity: .6; border-style: dashed; } .sv-roles__rows li[data-denied] .sv-roles__state { color: var(--text-3); } .sv-roles__rows li[data-denied] .sv-roles__state::before { content: "⊘ "; }
.sv-roles__activity { list-style: none; margin: var(--s-2) 0 0; padding: 0; font-family: var(--font-mono); font-size: 11px; color: var(--text-3); max-height: 3.6em; overflow: hidden; }

/* booking */
.sv-book__rules { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-3); }
.sv-book__grid { display: grid; gap: 3px; }
.sv-book__row { display: grid; grid-template-columns: 3.2em repeat(5, minmax(0, 1fr)); gap: 3px; }
.sv-book__row--head span { text-align: center; color: var(--text-2); font-size: var(--fs-xs); } .sv-book__row--head small { color: var(--gold-1); }
.sv-book__t { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3); align-self: center; }
.sv-slot { appearance: none; width: 100%; height: 24px; padding: 0; font: inherit; font-size: 9.5px; border-radius: 4px; border: 1px solid var(--line-control); background: var(--ink-3); color: var(--text-3); cursor: pointer; }
.sv-slot[data-state="open"] { border-color: var(--gold-3); background: rgba(215,181,111,.12); }
.sv-slot[data-state="open"]:hover { background: rgba(215,181,111,.24); }
.sv-slot[data-busy] { background: var(--ink-4); }
.sv-slot[aria-disabled="true"] { cursor: not-allowed; border-color: var(--line-2); }
.sv-slot[aria-pressed="true"] { background: var(--gold-2); color: var(--on-gold); border-color: var(--gold-2); }
.sv-book__count { margin: var(--s-2) 0 0; color: var(--text-2); font-size: var(--fs-xs); min-height: 1.5em; }
.sv-book__confirm { margin-top: var(--s-2); padding: var(--s-2) var(--s-3); border: 1px solid var(--line-2); border-radius: var(--r-1); background: var(--ink-1); min-height: 64px; }

/* events: analytics and landing pages */
.sv-ev { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--s-3); }
.sv-ev__site { padding: var(--s-4); border-radius: 10px; background: #faf7f1; color: #1d1a16; transition: max-width 400ms var(--ease-in-out); margin: 0 auto; width: 100%; max-width: 100%; }
.sv-ev__site[data-device="phone"] { max-width: 210px; border: 6px solid #1d1d1d; border-radius: 22px; }
.sv-ev__site .sv__opt { background: #fff; color: #1d1a16; border-color: #cfc6b6; }
.sv-ev__site .sv__opt--gold { background: #1d1a16; color: #faf7f1; border-color: #1d1a16; }
.sv-ev__brand { margin: 0 0 var(--s-2); font-weight: 700; font-size: 12px; } .sv-ev__h { margin: 0 0 .4em; font-size: 18px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; } .sv-ev__p { margin: 0 0 var(--s-3); font-size: 12px; color: #5a5249; }
.sv-ev__btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s-3); }
.sv-ev__form { display: none; margin-top: var(--s-3); gap: 6px; flex-direction: column; } .sv-ev__form[data-on] { display: flex; }
.sv-ev__field { display: block; padding: .5em .6em; border: 1px solid #cfc6b6; border-radius: 6px; background: #fff; color: #6b6358; font-size: 12px; }
.sv-ev__thanks { display: none; margin-top: var(--s-3); color: #1f7a45; } .sv-ev__thanks[data-on] { display: block; }
.sv-ev__panel { min-width: 0; padding: var(--s-3); border: 1px solid var(--line-2); border-radius: var(--r-1); background: var(--ink-1); }
.sv-ev__ph { margin: 0 0 var(--s-2); color: var(--white); font-weight: 600; }
.sv-ev__log { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 11px; max-height: 140px; overflow: auto; color: var(--text-2); }
.sv-ev__log li { animation: sv-in 300ms var(--ease-out); } .sv-ev__log code { color: var(--gold-1); }
.sv-ev__own { margin-top: var(--s-3); padding-top: var(--s-2); border-top: 1px solid var(--line); font-size: var(--fs-xs); }
.sv:not([data-js]) .sv-ev__form, .sv:not([data-js]) .sv-ev__thanks { display: flex; }

/* performance waterfall */
.sv-wf__opts { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-3); }
.sv-wf__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; position: relative; }
.sv-wf__row { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); gap: var(--s-2); align-items: center; font-size: var(--fs-xs); }
.sv-wf__label { color: var(--text-2); }
.sv-wf__track { position: relative; height: 14px; border-radius: 3px; background: var(--ink-1); }
.sv-wf__bar { position: absolute; top: 0; bottom: 0; left: calc(var(--s) * 1%); width: calc(var(--d) * 1%); border-radius: 3px; background: linear-gradient(90deg, var(--gold-3), var(--gold-2)); transition: left 600ms var(--ease-in-out), width 600ms var(--ease-in-out); }
.sv-wf__marks { position: relative; height: 2.6em; margin-left: calc(10.5rem + var(--s-2)); font-size: 10.5px; }
.sv-wf__mark { position: absolute; top: 0; left: calc(var(--at, 50) * 1%); transform: translateX(-50%); padding-top: 10px; white-space: nowrap; color: var(--gold-1); transition: left 600ms var(--ease-in-out); }
.sv-wf__mark::before { content: ""; position: absolute; top: 0; left: 50%; width: 2px; height: 8px; background: currentColor; }
.sv-wf__mark--end { color: var(--text-2); transform: translateX(-100%); } .sv-wf__mark--end::before { left: auto; right: 0; }
.sv-wf__mark[data-mark="first"] { --at: 51; } .sv-wf__mark--end { --at: 83; }
.sv-wf__shift { margin: var(--s-2) 0 0; color: var(--warn); font-size: var(--fs-xs); } .sv-wf__shift.is-ok { color: var(--ok); }
.sv-wf__shift::before { content: "⚠ "; } .sv-wf__shift.is-ok::before { content: "✓ "; }

/* small screens */
@media (max-width: 640px) {
  .sv { padding: var(--s-3); --sv-h: 280px; }
  .sv-shop__grid, .sv-mod, .sv-seo, .sv-ev, .sv-gbp { grid-template-columns: minmax(0, 1fr); }
  .sv-mod__map { min-height: 170px; }
  .sv-wf__row { grid-template-columns: minmax(0, 1fr); gap: 2px; } .sv-wf__marks { margin-left: 0; }
  .sv-book__row { grid-template-columns: 2.8em repeat(5, minmax(0, 1fr)); }
  .sv-site--after .sv-site__h { font-size: 18px; }
  .sv-layers:not([data-view="all"]) .sv-layers__stack { transform: rotateX(56deg) rotateZ(-38deg) translate3d(-2%, 12%, 0) scale(.7); }
}
@media (prefers-reduced-motion: reduce) {
  .sv *, .sv *::before, .sv *::after { animation: none !important; transition: none !important; }
}
.sv .sv-compare__handle:focus-visible { outline: none; }
.sv .sv-compare__handle:focus-visible .sv-compare__grip { outline: 2px solid var(--focus); outline-offset: 3px; }

/* ── AI receptionist control centre & voice styles (docs/frontend/AI-RECEPTIONIST.md) ─────────────────────────── */
.sv--receptionist .sv__body { container-type: inline-size; }
.rc { display: grid; gap: var(--s-3); }
.rc__modes { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--ink-1); justify-self: start; }
.rc__mode { appearance: none; border: 0; min-height: 36px; padding: 0 var(--s-4); border-radius: 999px; background: transparent; color: var(--text-2); font: 600 var(--fs-sm)/1 var(--font-body); cursor: pointer; }
.rc__mode[aria-pressed="true"] { background: var(--gold-2); color: var(--on-gold); }
.rc__mode:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.rc__scns { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.rc__grid { display: grid; grid-template-columns: 200px minmax(0, 1fr) 200px; grid-template-areas: "call talk sys"; gap: var(--s-3); }
@container (max-width: 860px) { .rc__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "call sys" "talk talk"; } }
@container (max-width: 460px) { .rc__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "call" "talk" "sys"; } .rc__systems { grid-template-columns: 1fr 1fr; } }
.rc__call { grid-area: call; display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3); border: 1px solid var(--line-2); border-radius: var(--r-2); background: radial-gradient(120% 90% at 50% 0%, #1b1710, var(--ink-1) 70%); }
.rc__caller { display: flex; gap: var(--s-2); align-items: center; }
.rc__caller strong { display: block; color: var(--white); font-size: var(--fs-sm); }
.rc__num { display: block; color: var(--text-3); font: 500 var(--fs-xs)/1.3 var(--font-mono); }
.rc__avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--ink-4); box-shadow: inset 0 0 0 1px var(--line-control); position: relative; }
.rc__avatar::after { content: ""; position: absolute; inset: 9px 11px 13px; border-radius: 50% 50% 40% 40%; background: var(--text-3); box-shadow: 0 9px 0 -2px var(--text-3); }
.rc[data-state="live"] .rc__avatar, .rc[data-state="dialing"] .rc__avatar { box-shadow: inset 0 0 0 1px var(--gold-2), 0 0 0 0 var(--gold-ring); animation: rc-ring 1.6s var(--ease-out) infinite; }
@keyframes rc-ring { 70% { box-shadow: inset 0 0 0 1px var(--gold-2), 0 0 0 10px rgba(215,181,111,0); } }
.rc__state { margin: 0; font-size: var(--fs-xs); color: var(--text-2); min-height: 2.6em; }
.rc[data-state="live"] .rc__state { color: var(--ok); }
.rc[data-state="ended"] .rc__state { color: var(--gold-1); }
.rc__voice { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
.rc__speaker { font-size: var(--fs-xs); color: var(--text-3); min-height: 1.2em; }
.rc__timer { margin: 0; font: 600 var(--fs-md)/1 var(--font-mono); color: var(--white); font-variant-numeric: tabular-nums; }
.rc-wave { display: flex; align-items: center; gap: 3px; height: 34px; }
.rc-wave i { flex: 1; height: 18%; border-radius: 2px; background: var(--line-control); transition: height 200ms var(--ease-out), background-color 200ms; }
.rc[data-speaking="ai"] .rc-wave i, .vl__card.is-speaking .rc-wave i { background: var(--gold-2); animation: rc-wave 900ms ease-in-out infinite alternate; animation-delay: calc(var(--i) * -73ms); }
.rc[data-speaking="caller"] .rc-wave i { background: var(--text); animation: rc-wave 760ms ease-in-out infinite alternate; animation-delay: calc(var(--i) * -91ms); }
@keyframes rc-wave { 0% { height: 14%; } 30% { height: 82%; } 60% { height: 38%; } 100% { height: 64%; } }
.rc__talk { grid-area: talk; min-width: 0; border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--ink-1); }
.rc__scroll { height: 330px; overflow-y: auto; overscroll-behavior: contain; padding: var(--s-3); scroll-behavior: smooth; }
.sv--compact .rc__scroll { height: 290px; }
.rc-scn__intro { margin: 0 0 var(--s-3); color: var(--text-3); font-size: var(--fs-xs); }
.rc-checks { list-style: none; margin: 0 0 var(--s-3); padding: var(--s-2) var(--s-3); border-radius: var(--r-1); border: 1px solid var(--line-gold); background: var(--gold-wash); display: grid; gap: 3px; font-size: var(--fs-xs); color: var(--text-2); }
.rc-checks li::before { content: "○ "; color: var(--text-3); }
.rc-checks li.is-ok { color: var(--text); } .rc-checks li.is-ok::before { content: "✓ "; color: var(--ok); }
.rc-log { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.rc-line { display: grid; gap: 2px; max-width: 88%; }
.rc-line__who { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.rc-line__text { padding: .5em .75em; border-radius: 12px; font-size: var(--fs-sm); line-height: 1.45; }
.rc-line--ai .rc-line__who { color: var(--gold-1); }
.rc-line--ai .rc-line__text { background: rgba(215,181,111,.1); border: 1px solid var(--line-gold); color: var(--white); border-top-left-radius: 4px; }
.rc-line--caller { justify-self: end; text-align: right; }
.rc-line--caller .rc-line__text { background: var(--ink-3); border: 1px solid var(--line-2); color: var(--text); border-top-right-radius: 4px; text-align: left; }
.rc-line--system { justify-self: center; max-width: 100%; text-align: center; }
.rc-line--system .rc-line__who { display: none; }
.rc-line--system .rc-line__text { padding: .2em .6em; font: 500 11px/1.4 var(--font-mono); color: var(--text-3); background: transparent; }
.rc-line__note { font-size: 11px; color: var(--gold-1); font-style: italic; }
.rc-line__note::before { content: "↳ "; font-style: normal; }
.rc-summary { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px var(--s-3); margin: var(--s-3) 0 0; padding: var(--s-3); border-radius: var(--r-1); border: 1px solid var(--gold-3); background: linear-gradient(160deg, rgba(215,181,111,.14), var(--ink-2)); font-size: var(--fs-xs); }
.rc-summary dt { color: var(--text-3); } .rc-summary dd { margin: 0; color: var(--white); }
.rc-summary::before { content: "Call summary"; grid-column: 1 / -1; margin-bottom: 4px; font-weight: 600; color: var(--gold-1); letter-spacing: .06em; text-transform: uppercase; font-size: 10.5px; }
.rc__systems { grid-area: sys; display: grid; gap: var(--s-2); align-content: start; }
.rc-sys { position: relative; display: grid; gap: 2px; padding: var(--s-2) var(--s-3) var(--s-2) calc(var(--s-3) + 12px); border: 1px solid var(--line-2); border-radius: var(--r-1); background: var(--ink-1); transition: border-color var(--t-med), background-color var(--t-med); }
.rc-sys::before { content: ""; position: absolute; left: 10px; top: 14px; width: 7px; height: 7px; border-radius: 50%; background: var(--line-control); }
.rc-sys.is-set { border-color: var(--line-gold); background: linear-gradient(90deg, rgba(215,181,111,.08), var(--ink-1) 70%); }
.rc-sys.is-set::before { background: var(--gold-2); box-shadow: 0 0 10px rgba(215,181,111,.7); }
.rc-sys.is-pulse { animation: rc-pulse 900ms var(--ease-out); }
@keyframes rc-pulse { 30% { box-shadow: 0 0 0 3px var(--gold-ring); } }
.rc-sys__name { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.rc-sys__val { font-size: var(--fs-xs); color: var(--text); line-height: 1.35; }
/* With JavaScript: one scenario at a time; lines and summaries appear as the call plays. Without it, everything shows. */
.sv[data-js] .rc-scn:not([data-on]) { display: none; }
.sv[data-js] .rc-line:not(.is-in) { display: none; }
.sv[data-js] .rc-line.is-in { animation: sv-in 320ms var(--ease-out); }
.sv[data-js] .rc-summary:not(.is-in) { display: none; }
.sv[data-js] .rc-summary.is-in { animation: sv-in 400ms var(--ease-out); }
.sv:not([data-js]) .rc-scn + .rc-scn { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.sv:not([data-js]) .rc__scroll { height: auto; }
.sv:not([data-js]) .rc__call, .sv:not([data-js]) .rc__systems, .sv:not([data-js]) .rc__modes, .sv:not([data-js]) .rc__scns { display: none; }
.sv:not([data-js]) .rc__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "talk"; }

.vl { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--s-3); }
@media (max-width: 640px) { .vl { grid-template-columns: minmax(0, 1fr); } }
.vl__list { display: grid; gap: 6px; align-content: start; }
.vl__item { appearance: none; text-align: left; display: grid; gap: 2px; min-height: 52px; padding: var(--s-2) var(--s-3); border-radius: var(--r-1); border: 1px solid var(--line-2); background: var(--ink-1); color: var(--text); font: inherit; cursor: pointer; transition: border-color var(--t-fast), background-color var(--t-fast); }
.vl__item:hover { border-color: var(--gold-3); }
.vl__item[aria-checked="true"] { border-color: var(--gold-2); background: var(--gold-wash); box-shadow: inset 3px 0 0 var(--gold-2); }
.vl__item:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.vl__name { color: var(--white); font-weight: 600; font-size: var(--fs-sm); }
.vl__traits { color: var(--text-3); font-size: var(--fs-xs); }
.vl__preview { display: grid; gap: var(--s-3); align-content: start; }
.vl__card { padding: var(--s-4); border-radius: var(--r-2); border: 1px solid var(--line-gold); background: radial-gradient(140% 100% at 0% 0%, rgba(215,181,111,.16), var(--ink-1) 60%); }
.sv[data-js] .vl__card:not([data-on]) { display: none; }
.sv:not([data-js]) .vl__card + .vl__card { margin-top: var(--s-2); }
.vl__head { display: flex; align-items: center; gap: var(--s-3); }
.vl__head .rc-wave { flex: 1; height: 28px; }
.vl__badge { flex: none; padding: .2em .6em; border-radius: 999px; background: var(--gold-2); color: var(--on-gold); font-size: var(--fs-xs); font-weight: 600; }
.vl__line { margin: var(--s-3) 0; font: 500 var(--fs-lg)/1.4 var(--font-display); letter-spacing: -.01em; color: var(--white); }
.vl__meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px var(--s-3); margin: 0; font-size: var(--fs-xs); }
.vl__meta dt { color: var(--text-3); } .vl__meta dd { margin: 0; color: var(--text-2); }
.vl__note { margin: 0; font-size: var(--fs-xs); color: var(--text-3); line-height: 1.5; }
.vl__note strong { color: var(--text-2); }
@media (prefers-reduced-motion: reduce) { .rc-wave i { animation: none !important; height: 40% !important; } }
.rc-home { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.rc-home__copy { position: sticky; top: calc(var(--header-h) + var(--s-6)); }
@media (max-width: 1000px) { .rc-home__copy { position: static; } }
@media (max-width: 1000px) { .rc-home { grid-template-columns: minmax(0, 1fr); } }
.rc-home__points { list-style: none; margin: var(--s-5) 0; padding: 0; display: grid; gap: var(--s-2); }
.rc-home__points li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--s-3); color: var(--text-2); font-size: var(--fs-sm); }
.rc-home__points li::before { content: ""; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: var(--gold-wash); box-shadow: inset 0 0 0 1px var(--gold-3); }
.rc-dir { max-width: none; margin-top: var(--s-6); }
.rc-safe__title { margin: var(--s-5) 0 var(--s-2); color: var(--gold-1); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.rc-safe { list-style: none; margin: 0; padding: var(--s-3) var(--s-4); border-radius: var(--r-2); border: 1px solid var(--line-gold); background: var(--gold-wash); display: grid; gap: 6px; font-size: var(--fs-sm); color: var(--text); }
.rc-safe li::before { content: "✓ "; color: var(--gold-1); font-weight: 600; }
.rc-uses li { display: flex; flex-direction: column; gap: var(--s-2); }
.rc-uses h3 { margin: 0; }
.rc-uses__tag { margin: 0; color: var(--gold-1); font-size: var(--fs-xs); letter-spacing: .04em; }
.rc-uses__note { margin-top: var(--s-4); font-size: var(--fs-xs); }
.rc-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-3); position: relative; }
.rc-flow::before { content: ""; position: absolute; left: 4%; right: 4%; top: 30px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-3), transparent); }
.rc-flow__node { position: relative; display: grid; gap: var(--s-2); align-content: start; padding: var(--s-5) var(--s-4) var(--s-4); border-radius: var(--r-3); border: 1px solid var(--line); background: var(--ink-2); font-size: var(--fs-sm); }
.rc-flow__node span:last-child { color: var(--text-2); }
.rc-flow__node strong { color: var(--white); font-size: var(--fs-md); }
.rc-flow__n { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--ink-4); border: 1px solid var(--line-gold); color: var(--gold-1); font: 600 11px/1 var(--font-mono); }
.rc-flow__node--core { border-color: var(--gold-3); background: radial-gradient(120% 100% at 50% 0%, rgba(215,181,111,.16), var(--ink-2) 70%); }
.rc-flow__node--core .rc-flow__n { background: var(--gold-2); color: var(--on-gold); }
@media (max-width: 1100px) { .rc-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rc-flow::before { display: none; } }
@media (max-width: 600px) { .rc-flow { grid-template-columns: minmax(0, 1fr); } }
.rc-steps { list-style: none; margin: 0 0 var(--s-6); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); counter-reset: none; }
.rc-steps li { display: grid; gap: var(--s-2); padding: var(--s-5); border-top: 2px solid var(--gold-3); background: var(--ink-2); border-radius: 0 0 var(--r-3) var(--r-3); font-size: var(--fs-sm); }
.rc-steps strong { color: var(--white); font-size: var(--fs-md); } .rc-steps li > span:last-child { color: var(--text-2); }
.rc-steps__n { color: var(--gold-1); font: 600 var(--fs-xs)/1 var(--font-mono); }
@media (max-width: 900px) { .rc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .rc-steps { grid-template-columns: minmax(0, 1fr); } }
.rc-price { max-width: 760px; }
.rc-cta { padding: clamp(2rem, 5vw, 4rem); border-radius: var(--r-4); text-align: left; }
.rc-cta h2 { max-width: 18ch; }

/* ── Crestmont website assistant (docs/frontend/CHATBOT.md) ──────────────────────────────────────────────────────── */
.cb { --cb-gap: max(16px, env(safe-area-inset-right)); position: fixed; right: var(--cb-gap); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 200; display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-3); pointer-events: none; }
.cb > * { pointer-events: auto; }
.cb [hidden], .cb[hidden] { display: none !important; }
.cb.is-hidden { visibility: hidden; opacity: 0; }
html.has-intro .cb { animation: show-now 1ms linear 2.4s backwards; }
.cb__launch { position: relative; order: 3; width: 60px; height: 60px; padding: 0; border-radius: 18px; border: 1px solid var(--gold-3); background: radial-gradient(120% 120% at 30% 20%, #262013, #0b0b0b 70%); box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 14px 34px -10px rgba(0,0,0,.9), 0 0 24px -6px rgba(215,181,111,.45); cursor: pointer; display: grid; place-items: center; transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out), border-color var(--t-med); }
.cb__launch img { width: 38px; height: auto; transition: transform var(--t-med) var(--ease-out); }
.cb__launch:hover { transform: translateY(-2px); border-color: var(--gold-2); box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 18px 40px -10px rgba(0,0,0,.9), 0 0 32px -4px rgba(215,181,111,.6); }
.cb__launch:hover img { transform: scale(1.06); }
.cb__launch:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.cb.is-open .cb__launch { border-color: var(--gold-2); }
.cb__dot { position: absolute; top: -3px; right: -3px; width: 12px; height: 12px; border-radius: 50%; background: var(--gold-2); box-shadow: 0 0 0 3px #0b0b0b; animation: cb-ping 2s var(--ease-out) infinite; }
@keyframes cb-ping { 0% { box-shadow: 0 0 0 3px #0b0b0b, 0 0 0 3px rgba(215,181,111,.6); } 80%, 100% { box-shadow: 0 0 0 3px #0b0b0b, 0 0 0 12px rgba(215,181,111,0); } }
.cb__hello { order: 2; display: flex; align-items: center; gap: var(--s-2); margin: 0; padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4); border-radius: 14px; border: 1px solid var(--line-gold); background: rgba(14,14,14,.96); color: var(--text); font-size: var(--fs-sm); box-shadow: 0 16px 34px -14px rgba(0,0,0,.9); animation: cb-in 420ms var(--ease-out); }
.cb__hello-x { appearance: none; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--text-3); font-size: 18px; cursor: pointer; }
.cb__hello-x:hover { color: var(--white); background: var(--ink-3); }
.cb__panel { order: 1; width: min(400px, calc(100vw - 2 * var(--cb-gap))); height: min(620px, calc(100dvh - 120px)); display: flex; flex-direction: column; border-radius: 20px; border: 1px solid var(--line-gold); background: linear-gradient(180deg, #121212, #0a0a0a); box-shadow: 0 30px 80px -20px rgba(0,0,0,.95), 0 0 0 1px rgba(0,0,0,.5); overflow: hidden; transform-origin: bottom right; animation: cb-open 340ms var(--ease-out); }
@keyframes cb-open { from { opacity: 0; transform: translateY(12px) scale(.97); } }
@keyframes cb-in { from { opacity: 0; transform: translateY(8px); } }
.cb__head { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); background: radial-gradient(120% 140% at 0% 0%, rgba(215,181,111,.14), transparent 60%); }
.cb__crest { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: #0b0b0b; border: 1px solid var(--line-gold); }
.cb__crest img { width: 24px; height: auto; }
.cb__titles { flex: 1; min-width: 0; display: grid; }
.cb__title { color: var(--white); font-weight: 600; font-size: var(--fs-md); }
.cb__status { color: var(--ok); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb__status::before { content: "● "; }
.cb.is-offline .cb__status { color: var(--text-3); }
.cb__icon { appearance: none; flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--text-2); cursor: pointer; }
.cb__icon:hover { color: var(--white); background: var(--ink-3); border-color: var(--line-2); }
.cb__icon:focus-visible, .cb__chip:focus-visible, .cb__send:focus-visible, .cb__input:focus-visible, .cb__log:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb__log { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); scroll-behavior: smooth; }
.cb__msg { max-width: 88%; font-size: var(--fs-sm); line-height: 1.5; }
.cb__msg p { margin: 0; } .cb__msg p + p { margin-top: .55em; }
.cb__msg a { color: var(--gold-1); text-underline-offset: 3px; }
.cb__msg--ai, .cb__msg--welcome { align-self: flex-start; padding: var(--s-3); border-radius: 4px 14px 14px 14px; background: rgba(215,181,111,.08); border: 1px solid var(--line-gold); color: var(--text); }
.cb__who { display: block; margin-bottom: 4px; color: var(--gold-1); font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.cb__msg--user { align-self: flex-end; padding: var(--s-2) var(--s-3); border-radius: 14px 4px 14px 14px; background: var(--ink-3); border: 1px solid var(--line-2); color: var(--white); }
.cb__msg--note { align-self: center; max-width: 100%; color: var(--text-3); font-size: var(--fs-xs); text-align: center; }
.cb__msg--error { align-self: stretch; max-width: 100%; padding: var(--s-2) var(--s-3); border-radius: 10px; border: 1px solid #5a2f28; background: rgba(232,135,122,.08); color: var(--bad); font-size: var(--fs-xs); }
.cb__msg.is-new { animation: cb-in 300ms var(--ease-out); }
.cb__fine { color: var(--text-3); font-size: var(--fs-xs); }
.cb__typing { align-self: flex-start; display: inline-flex; gap: 5px; padding: var(--s-3) var(--s-4); border-radius: 4px 14px 14px 14px; background: rgba(215,181,111,.06); border: 1px solid var(--line-gold); }
.cb__typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-2); animation: cb-dot 1.1s ease-in-out infinite; }
.cb__typing i:nth-child(2) { animation-delay: .15s; } .cb__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes cb-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.cb__suggest { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 var(--s-4) var(--s-3); }
.cb__chip { appearance: none; min-height: 34px; padding: .4em .8em; border-radius: 999px; border: 1px solid var(--line-2); background: var(--ink-2); color: var(--text-2); font: 500 var(--fs-xs)/1.2 var(--font-body); cursor: pointer; text-align: left; }
.cb__chip:hover { border-color: var(--gold-3); color: var(--white); }
.cb__offline { margin: 0 var(--s-4) var(--s-3); padding: var(--s-3); border-radius: 12px; border: 1px solid var(--line-2); background: var(--ink-1); font-size: var(--fs-xs); color: var(--text-2); }
.cb__offline p { margin: 0 0 var(--s-2); } .cb__offline strong { color: var(--white); }
.cb__links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px var(--s-3); }
.cb__links a { display: inline-flex; min-height: 32px; align-items: center; color: var(--gold-1); }
.cb__form { display: flex; align-items: flex-end; gap: var(--s-2); margin: 0 var(--s-3); padding: var(--s-2); border-radius: 14px; border: 1px solid var(--line-control); background: var(--ink-2); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.cb__form:focus-within { border-color: var(--gold-2); box-shadow: 0 0 0 3px var(--gold-ring); }
.cb__input { flex: 1; min-height: 36px; max-height: 120px; resize: none; padding: .45em .5em; border: 0; background: transparent; color: var(--white); font: 400 16px/1.4 var(--font-body); }
.cb__input::placeholder { color: var(--text-3); }
.cb__input:focus { outline: none; }
.cb__input:disabled { cursor: not-allowed; }
.cb__send { appearance: none; flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; border: 0; background: var(--gold-2); color: var(--on-gold); cursor: pointer; transition: background-color var(--t-fast), transform var(--t-fast); }
.cb__send:hover:not(:disabled) { background: var(--gold-pale); }
.cb__send:disabled { background: var(--ink-4); color: var(--text-3); cursor: not-allowed; }
.cb__foot { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px var(--s-2); margin: 0; padding: var(--s-2) var(--s-4) var(--s-3); font-size: var(--fs-xs); color: var(--text-3); }
.cb__foot a { color: var(--text-2); display: inline-flex; min-height: 34px; align-items: center; }
.cb__foot a:hover { color: var(--gold-1); }
@media (max-width: 560px) {
  .cb__panel { position: fixed; left: 8px; right: 8px; bottom: max(8px, env(safe-area-inset-bottom)); width: auto; height: min(78dvh, 640px); border-radius: 18px; }
  .cb.is-open .cb__launch { visibility: hidden; }
  .cb__launch { width: 54px; height: 54px; border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) { .cb *, .cb { animation: none !important; transition: none !important; } }
@media print { .cb { display: none !important; } }

/* ── About (docs/frontend/ABOUT.md) ──────────────────────────────────────────────────────────────────────────────── */
.hero--about { padding-bottom: clamp(3rem, 7vw, 6rem); }
.hero--about .about__title { font-size: clamp(3.2rem, 8.4vw, 8rem); line-height: .9; letter-spacing: -.055em; max-width: 9ch; }
.about-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.about-hero__art { position: relative; aspect-ratio: 1 / 1; width: min(100%, 520px); justify-self: end; }
.about-hero__art::before { content: ""; position: absolute; inset: 12%; border-radius: 50%; background: radial-gradient(circle, rgba(215,181,111,.22), transparent 65%); filter: blur(12px); }
.about-hero__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; animation: about-float 7s ease-in-out infinite alternate; }
@keyframes about-float { to { transform: translateY(-14px) rotate(-1.5deg); } }
@media (max-width: 860px) { .about-hero { grid-template-columns: minmax(0, 1fr); } .about-hero__art { width: min(70%, 320px); justify-self: center; order: -1; margin-bottom: -2rem; } }
@media (prefers-reduced-motion: reduce) { .about-hero__art img { animation: none; } }
.hero--about .lede { max-width: 46ch; font-size: clamp(1.1rem, 1.6vw, 1.35rem); margin-top: var(--s-5); }
.chapters { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.chapter { display: grid; grid-template-columns: clamp(4rem, 12vw, 10rem) minmax(0, 1fr); gap: var(--s-5); padding: clamp(1.5rem, 4vw, 3rem) 0; border-bottom: 1px solid var(--line); align-items: start; }
.chapter__n { font: 500 clamp(2.4rem, 7vw, 6rem)/.85 var(--font-display); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1px var(--gold-3); }
.chapter__body { font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.6; color: var(--text); max-width: 60ch; }
.chapter__body p { margin: 0; }
.chapter[data-reveal].is-in .chapter__n, .chapter.is-visible .chapter__n { -webkit-text-stroke-color: var(--gold-2); }
@media (max-width: 640px) { .chapter { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); } }

/* constellation */
.cst { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s-4); align-items: center; }
@media (max-width: 900px) { .cst { grid-template-columns: minmax(0, 1fr); } }
.cst__stage { position: relative; aspect-ratio: 1.25 / 1; min-height: 300px; border-radius: var(--r-3); background: radial-gradient(60% 60% at 50% 50%, rgba(215,181,111,.10), transparent 70%), var(--ink-1); border: 1px solid var(--line); overflow: visible; }
.cst__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.cst__spoke, .cst__link { stroke: var(--line-2); stroke-width: .25; vector-effect: non-scaling-stroke; transition: stroke var(--t-med), stroke-width var(--t-med); }
.cst__spoke { stroke-dasharray: 2 2; }
.cst__spoke.is-on { stroke: var(--gold-2); stroke-width: 1.5; stroke-dasharray: none; }
.cst__link.is-on { stroke: var(--gold-3); stroke-width: 1.2; animation: cst-flow 2.4s linear infinite; stroke-dasharray: 3 2; }
@keyframes cst-flow { to { stroke-dashoffset: -10; } }
.cst__core { position: absolute; left: 50%; top: 51%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 4px; padding: var(--s-3) var(--s-4); border-radius: 18px; background: #0b0b0b; border: 1px solid var(--gold-3); box-shadow: 0 0 40px -8px rgba(215,181,111,.45); color: var(--text-2); font-size: var(--fs-xs); text-align: center; }
.cst__core img { width: 30px; height: auto; }
.cst__nodes { position: absolute; inset: 0; }
.cst__node { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); appearance: none; min-height: 40px; padding: .45em .9em; border-radius: 999px; border: 1px solid var(--line-control); background: var(--ink-3); color: var(--text); font: 600 var(--fs-sm)/1.1 var(--font-body); white-space: nowrap; cursor: pointer; transition: border-color var(--t-fast), background-color var(--t-fast), color var(--t-fast), box-shadow var(--t-med); }
.cst__node:hover { border-color: var(--gold-3); }
.cst__node.is-linked { border-color: var(--gold-3); color: var(--gold-pale); }
.cst__node[aria-pressed="true"] { background: var(--gold-2); color: var(--on-gold); border-color: var(--gold-2); box-shadow: 0 0 0 6px var(--gold-ring); }
.cst__node:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.cst__panel { min-width: 0; }
.cst__detail { padding: var(--s-4); border-radius: var(--r-3); border: 1px solid var(--line-gold); background: linear-gradient(160deg, rgba(215,181,111,.10), var(--ink-1) 60%); }
.sv[data-js] .cst__detail:not([data-on]) { display: none; }
.sv[data-js] .cst__detail[data-on] { animation: sv-in 320ms var(--ease-out); }
.sv:not([data-js]) .cst__detail + .cst__detail { margin-top: var(--s-2); }
.cst__h { margin: 0 0 var(--s-2); font-size: var(--fs-xl); color: var(--white); }
.cst__detail p { margin: 0 0 var(--s-2); color: var(--text-2); }
.cst__connects { font-size: var(--fs-xs); color: var(--gold-1) !important; }
.cst__services { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: 4px; }
.cst__services a { display: inline-flex; min-height: 34px; align-items: center; color: var(--white); text-decoration-color: var(--line-control); }
.cst__services a::after { content: " →"; color: var(--gold-1); margin-left: .3em; }
@media (max-width: 560px) { .cst__node { font-size: var(--fs-xs); padding: .4em .7em; min-height: 36px; } .cst__core span { display: none; } }

/* journey */
.jr { --p: 0; }
.jr__rail { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); padding: var(--s-4) 0 var(--s-5); }
.jr__end { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
.jr__end--live { color: var(--gold-1); }
.jr__stops { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; }
.jr__stops::before { content: ""; position: absolute; left: 10px; right: 10px; top: 50%; height: 2px; margin-top: -1px; background: var(--line-2); z-index: -1; }
.jr__stops::after { content: ""; position: absolute; left: 10px; top: 50%; height: 2px; margin-top: -1px; width: calc((100% - 20px) * var(--p)); background: linear-gradient(90deg, var(--gold-3), var(--gold-2)); z-index: -1; transition: width 520ms var(--ease-in-out); }
.jr__fill { display: none; }
.jr__stop { appearance: none; position: relative; width: 34px; height: 34px; padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
.jr__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--ink-1); border: 2px solid var(--line-control); transition: background-color var(--t-fast), border-color var(--t-fast), transform var(--t-fast); }
.jr__stop.is-past .jr__dot { background: var(--gold-3); border-color: var(--gold-3); }
.jr__stop[aria-pressed="true"] .jr__dot { background: var(--gold-2); border-color: var(--gold-pale); transform: scale(1.35); box-shadow: 0 0 0 5px var(--gold-ring); }
.jr__stop:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 50%; }
.jr__lbl { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); font: 600 10px/1 var(--font-mono); color: var(--text-3); }
.jr__stop[aria-pressed="true"] .jr__lbl { color: var(--gold-1); }
.jr__cards { min-height: 9.5rem; }
.jr__card { padding: var(--s-4) var(--s-5); border-radius: var(--r-3); border: 1px solid var(--line-gold); background: linear-gradient(160deg, rgba(215,181,111,.10), var(--ink-1) 55%); }
.sv[data-js] .jr__card:not([data-on]) { display: none; }
.sv[data-js] .jr__card[data-on] { animation: sv-in 320ms var(--ease-out); }
.sv:not([data-js]) .jr__card + .jr__card { margin-top: var(--s-2); }
.sv:not([data-js]) .jr__rail { display: none; }
.jr__meta { display: flex; gap: var(--s-3); align-items: center; margin: 0 0 var(--s-2); }
.jr__n { font: 600 var(--fs-xs)/1 var(--font-mono); color: var(--gold-1); }
.jr__phase { padding: .15em .6em; border-radius: 999px; border: 1px solid var(--line-gold); color: var(--gold-pale); font-size: var(--fs-xs); }
.jr__h { margin: 0 0 var(--s-2); font-size: var(--fs-xl); color: var(--white); }
.jr__card p:last-child { margin: 0; color: var(--text-2); max-width: 70ch; }
@media (max-width: 640px) { .jr__rail { grid-template-columns: minmax(0, 1fr); } .jr__end { display: none; } .jr__stop { width: 26px; height: 34px; } .jr__dot { width: 11px; height: 11px; } .jr__lbl { display: none; } }

/* quality lab */
.lab__tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--ink-1); width: fit-content; max-width: 100%; margin-bottom: var(--s-4); }
.lab__tab { appearance: none; min-height: 38px; padding: 0 var(--s-4); border: 0; border-radius: 999px; background: transparent; color: var(--text-2); font: 600 var(--fs-sm)/1 var(--font-body); cursor: pointer; }
.lab__tab[aria-selected="true"] { background: var(--gold-2); color: var(--on-gold); }
.lab__tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.lab__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s-4); align-items: start; }
@media (max-width: 900px) { .lab__grid { grid-template-columns: minmax(0, 1fr); } }
.lab__view { position: relative; overflow: hidden; border-radius: var(--r-2); border: 1px solid var(--line-2); background: #0d0d0d; min-height: 200px; }
.lab__site { --lab-accent: #d7b56f; container-type: inline-size; transform-origin: 0 0; background: #faf7f1; color: #1d1a16; padding: 18px 22px 22px; font-family: var(--font-body); transition: transform 200ms var(--ease-out); }
.lab__nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid #e3dccf; }
.lab__logo { font-weight: 700; letter-spacing: -.01em; }
.lab__links { display: flex; gap: 18px; font-size: 14px; color: #4f4840; }
.lab__links span { text-decoration: underline; text-decoration-color: var(--lab-accent); text-underline-offset: 4px; }
.lab__menu { display: none; padding: 4px 10px; border: 1px solid #cfc6b6; border-radius: 6px; font-size: 13px; }
.lab__hero { padding: 26px 0 18px; }
.lab__h { margin: 0 0 8px; font: 700 32px/1.1 var(--font-display); letter-spacing: -.02em; color: #1d1a16; max-width: 18ch; }
.lab__p { margin: 0 0 16px; color: #575047; font-size: 15px; }
.lab__btn { display: inline-block; padding: 10px 16px; border-radius: 8px; background: #1d1a16; color: #faf7f1; font-weight: 600; font-size: 14px; box-shadow: inset 0 -3px 0 var(--lab-accent); }
.lab__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lab__cards span { padding: 38px 12px 12px; border-radius: 8px; background: linear-gradient(#ece3d2, #e2d4bb); font-size: 14px; color: #2e2924; border-top: 3px solid var(--lab-accent); }
.lab__cards span[data-contrast="muted"] { color: #6b6257; }
@container (max-width: 900px) { .lab__h { font-size: 26px; } .lab__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 600px) { .lab__links { display: none; } .lab__menu { display: inline-block; } .lab__h { font-size: 22px; } .lab__cards { grid-template-columns: minmax(0, 1fr); } .lab__cards span { padding-top: 18px; } }
.lab__site.show-focus [data-f] { position: relative; outline: 2px solid #2563eb; outline-offset: 3px; border-radius: 4px; }
.lab__site.show-focus [data-f]::after { content: attr(data-f); position: absolute; top: -12px; right: -12px; width: 20px; height: 20px; border-radius: 50%; background: #2563eb; color: #fff; font: 700 11px/20px var(--font-body); text-align: center; text-decoration: none; }
.lab__site.show-focus .lab__links [data-f] { display: inline-block; }
.lab__site.show-contrast [data-contrast] { box-shadow: 0 0 0 2px #16a34a; border-radius: 4px; }
.lab__gridlines { position: absolute; inset: 0; pointer-events: none; opacity: 0; background-image: repeating-linear-gradient(0deg, rgba(37,99,235,.18) 0 1px, transparent 1px 8px), repeating-linear-gradient(90deg, rgba(37,99,235,.10) 0 1px, transparent 1px 8px); transition: opacity var(--t-med); }
.lab__view.show-grid .lab__gridlines { opacity: 1; }
.lab__panel { padding: var(--s-4); border-radius: var(--r-2); border: 1px solid var(--line-2); background: var(--ink-1); }
.sv[data-js] .lab__panel:not([data-on]) { display: none; }
.sv:not([data-js]) .lab__panel + .lab__panel { margin-top: var(--s-2); }
.sv:not([data-js]) .lab__tabs, .sv:not([data-js]) .lab__panel input, .sv:not([data-js]) .lab__toggles, .sv:not([data-js]) .lab__swatches { display: none; }
.lab__ph { margin: 0 0 var(--s-2); color: var(--white); font-size: var(--fs-lg); }
.lab__panel p { margin: 0 0 var(--s-3); color: var(--text-2); font-size: var(--fs-sm); }
.lab__ctl { display: grid; gap: var(--s-2); font-size: var(--fs-sm); color: var(--text-2); }
.lab__ctl output { color: var(--gold-1); font-weight: 600; font-variant-numeric: tabular-nums; margin-left: .4em; }
.lab__ctl input { width: 100%; min-height: 44px; accent-color: var(--gold-2); }
.lab__toggles { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.lab__ratios { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: 4px; font: 500 var(--fs-xs)/1.4 var(--font-mono); }
.lab__ratios .ok { color: var(--ok); } .lab__ratios .ok::before { content: "✓ "; }
.lab__ratios .bad { color: var(--bad); } .lab__ratios .bad::before { content: "✕ "; }
.lab__swatches { display: flex; gap: var(--s-3); }
.lab__swatch { appearance: none; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--ink-0); background: var(--c); box-shadow: 0 0 0 1px var(--line-control); cursor: pointer; }
.lab__swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--ink-0), 0 0 0 4px var(--white); }
.lab__swatch:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }

/* closing hand-over to the footer wordmark */
.about-close { padding-bottom: clamp(2rem, 5vw, 4rem); text-align: center; }
.about-close .section__label { justify-content: center; display: flex; }
.about-close__title { font: 500 clamp(2.4rem, 6vw, 5rem)/1 var(--font-display); letter-spacing: -.045em; margin: 0 auto var(--s-4); max-width: 16ch; }
.about-close .lede { margin: 0 auto var(--s-6); max-width: 48ch; }
.about-close .hero__actions { justify-content: center; }
.footer-word--about { -webkit-text-stroke-color: var(--gold-3); background: linear-gradient(90deg, rgba(215,181,111,.22), rgba(215,181,111,.06)) no-repeat 0 0 / 0% 100%; -webkit-background-clip: text; background-clip: text; transition: background-size 1800ms var(--ease-in-out), -webkit-text-stroke-color 1200ms var(--ease-out); }
.footer-word--about.is-drawn { background-size: 100% 100%; -webkit-text-stroke-color: var(--gold-2); }
@media (prefers-reduced-motion: reduce) { .cst__link.is-on { animation: none; } .jr__stops::after, .footer-word--about { transition: none; } }

/* ── Contact (docs/frontend/CONTACT.md) ──────────────────────────────────────────────────────────────────────────── */
.hero--contact { text-align: center; padding-bottom: clamp(1.5rem, 4vw, 3rem); }
.cx-hero { display: grid; justify-items: center; }
.cx-hero .eyebrow { justify-content: center; }
.hero--contact h1 { margin-left: auto; margin-right: auto; max-width: 14ch; }
.hero--contact .lede { margin: var(--s-4) auto 0; max-width: 54ch; }
.cx-section { padding-bottom: clamp(3rem, 7vw, 6rem); }
.cx { --cx-p: 0; position: relative; display: grid; justify-items: center; padding: clamp(1rem, 4vw, 3.5rem) 0; isolation: isolate; }
.cx-card { position: relative; z-index: 2; width: min(100%, 760px); padding: clamp(1.25rem, 4vw, 2.75rem); border-radius: 26px; border: 1px solid var(--line-gold); background: linear-gradient(180deg, rgba(26,22,14,.92), rgba(12,12,12,.96)); box-shadow: 0 50px 100px -40px rgba(0,0,0,.95), 0 0 0 1px rgba(0,0,0,.6), 0 0 80px -30px rgba(215,181,111,calc(.15 + var(--cx-p) * .35)); backdrop-filter: blur(8px); transition: box-shadow 600ms var(--ease-out); }
.cx-card::before { content: ""; position: absolute; left: 10%; right: 10%; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-2), transparent); opacity: calc(.4 + var(--cx-p) * .6); }
/* the workspace around the card */
.cx-ws { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; } /* decorative orbs drift: never widen the page (contact, 320–360px phones) */
.cx-ws__item { position: absolute; display: grid; gap: 6px; padding: 14px; border-radius: 16px; border: 1px solid var(--line-2); background: linear-gradient(160deg, var(--ink-3), var(--ink-1)); box-shadow: 0 24px 50px -24px rgba(0,0,0,.9); opacity: .55; transform: translate(var(--tx, 0), var(--ty, 0)) rotate(var(--rot, 0deg)); transition: opacity 500ms var(--ease-out), border-color 500ms, box-shadow 500ms, transform 700ms var(--ease-out); }
.cx-ws__item i { display: block; height: 6px; border-radius: 3px; background: var(--ink-4); }
.cx-ws__item em { font: 600 18px/1 var(--font-mono); color: var(--text-3); font-style: normal; }
.cx-ws__item--site { left: 1%; top: 10%; width: 170px; --rot: -6deg; } .cx-ws__item--site i:nth-child(1) { width: 60%; } .cx-ws__item--site b { display: block; height: 54px; border-radius: 8px; background: linear-gradient(135deg, #2a2418, var(--gold-3)); opacity: .5; }
.cx-ws__item--code { right: 1%; top: 14%; width: 150px; --rot: 5deg; }
.cx-ws__item--care { left: 3%; bottom: 12%; width: 130px; --rot: 4deg; }
.cx-ws__item--chat { right: 3%; bottom: 10%; width: 160px; --rot: -4deg; } .cx-ws__item--chat i:nth-child(2) { width: 70%; margin-left: auto; }
.cx[data-topic="site"] .cx-ws [data-glyph="site"], .cx[data-topic="code"] .cx-ws [data-glyph="code"], .cx[data-topic="care"] .cx-ws [data-glyph="care"], .cx[data-topic="chat"] .cx-ws [data-glyph="chat"] { opacity: 1; border-color: var(--gold-3); box-shadow: 0 24px 50px -24px rgba(0,0,0,.9), 0 0 40px -12px rgba(215,181,111,.55); --ty: -8px; }
.cx[data-topic="code"] .cx-ws [data-glyph="code"] em, .cx[data-topic="care"] .cx-ws [data-glyph="care"] em { color: var(--gold-1); }
.cx-ws__orb { position: absolute; border-radius: 50%; filter: blur(50px); opacity: .5; }
.cx-ws__orb--a { width: 320px; height: 320px; left: 8%; top: 20%; background: radial-gradient(circle, rgba(215,181,111,.25), transparent 70%); animation: cx-drift 14s ease-in-out infinite alternate; }
.cx-ws__orb--b { width: 260px; height: 260px; right: 10%; bottom: 8%; background: radial-gradient(circle, rgba(215,181,111,.18), transparent 70%); animation: cx-drift 18s ease-in-out infinite alternate-reverse; }
@keyframes cx-drift { to { transform: translate(30px, -20px) scale(1.1); } }
.cx-ws__ring { position: absolute; left: 50%; top: 50%; width: min(92%, 900px); aspect-ratio: 1.6; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid rgba(215,181,111,calc(.06 + var(--cx-p) * .22)); transition: border-color 600ms; }
.cx[data-focus="message"] .cx-ws__item--chat i { animation: cx-type 1.2s ease-in-out infinite; }
@keyframes cx-type { 50% { opacity: .4; } }
.cx.is-sending .cx-ws__item { opacity: .9; --ty: -14px; }
.cx.is-sending .cx-ws__ring { border-color: var(--gold-3); animation: cx-pulse 1.4s ease-out infinite; }
@keyframes cx-pulse { 50% { transform: translate(-50%, -50%) scale(1.02); } }
@media (max-width: 1100px) { .cx-ws__item { display: none; } }
/* form */
.cx-progress { height: 3px; border-radius: 2px; background: var(--ink-4); overflow: hidden; margin-bottom: var(--s-2); }
.cx-progress__bar { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--gold-3), var(--gold-2), var(--gold-pale)); transition: width 500ms var(--ease-out); }
.cx-progress__text { margin: 0 0 var(--s-5); min-height: 1.4em; font-size: var(--fs-xs); color: var(--text-3); }
.cx-step { margin: 0 0 var(--s-5); padding: 0; border: 0; min-width: 0; }
.cx-step__title { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); padding: 0; color: var(--white); font-weight: 600; font-size: var(--fs-md); }
.cx-step__n { font: 600 var(--fs-xs)/1 var(--font-mono); color: var(--gold-1); padding: .3em .5em; border-radius: 6px; border: 1px solid var(--line-gold); }
.cx-form .input, .cx-form .textarea { background: rgba(8,8,8,.7); border-radius: 12px; transition: border-color var(--t-fast), box-shadow var(--t-med), background-color var(--t-fast); }
.cx-form .input:focus, .cx-form .textarea:focus { border-color: var(--gold-2); box-shadow: 0 0 0 4px var(--gold-ring); background: #0b0b0b; outline: none; }
.cx-form .field label { transition: color var(--t-fast); }
.cx-form .field:focus-within label { color: var(--gold-1); }
.cx-form [aria-invalid="true"] { border-color: var(--bad); }
.cx-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.cx-chip { position: relative; display: inline-flex; cursor: pointer; }
.cx-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cx-chip span { display: inline-flex; align-items: center; min-height: 42px; padding: .5em 1em; border-radius: 999px; border: 1px solid var(--line-control); background: rgba(8,8,8,.6); color: var(--text-2); font-size: var(--fs-sm); transition: border-color var(--t-fast), background-color var(--t-fast), color var(--t-fast), transform var(--t-fast); }
.cx-chip:hover span { border-color: var(--gold-3); color: var(--white); }
.cx-chip input:checked + span { background: var(--gold-2); border-color: var(--gold-2); color: var(--on-gold); font-weight: 600; }
.cx-chip input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.cx-topics.has-error .cx-chip span { border-color: var(--bad); }
.cx-count { margin: 4px 0 0; text-align: right; font: 500 var(--fs-xs)/1 var(--font-mono); color: var(--text-3); }
.cx-submit { display: grid; gap: var(--s-3); justify-items: center; margin-top: var(--s-5); text-align: center; }
.cx-send { position: relative; min-width: min(100%, 320px); min-height: 54px; justify-content: center; font-size: var(--fs-md); }
.cx-send__spin { display: none; width: 18px; height: 18px; margin-left: .6em; border-radius: 50%; border: 2px solid rgba(13,13,13,.25); border-top-color: var(--on-gold); animation: cx-spin .8s linear infinite; }
.cx-send.is-sending .cx-send__spin { display: inline-block; }
.cx-send[aria-disabled="true"] { cursor: progress; opacity: .85; }
@keyframes cx-spin { to { transform: rotate(360deg); } }
/* channels */
.cx-channels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); max-width: 1000px; margin: var(--s-6) auto 0; }
@media (max-width: 860px) { .cx-channels { grid-template-columns: minmax(0, 1fr); } }
.cx-channel { position: relative; display: grid; gap: 4px; padding: var(--s-5) var(--s-5) var(--s-5); border-radius: var(--r-3); border: 1px solid var(--line); background: var(--ink-2); text-decoration: none; color: var(--text-2); transition: border-color var(--t-med), transform var(--t-med) var(--ease-out), background-color var(--t-med); }
.cx-channel:hover { border-color: var(--gold-3); transform: translateY(-3px); background: linear-gradient(160deg, rgba(215,181,111,.08), var(--ink-2)); }
.cx-channel:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.cx-channel__title { color: var(--gold-1); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.cx-channel__addr { color: var(--white); font-size: var(--fs-md); font-weight: 500; overflow-wrap: anywhere; padding-right: 36px; }
.cx-channel__note { font-size: var(--fs-sm); }
.cx-channel__go { position: absolute; right: var(--s-4); top: var(--s-4); width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--line-2); color: var(--gold-1); }
.cx-channel__go svg { width: 14px; height: 14px; }
.cx-channel:hover .cx-channel__go { background: var(--gold-2); color: var(--on-gold); border-color: var(--gold-2); }
.cx-more { max-width: 760px; margin: var(--s-6) auto 0; text-align: center; color: var(--text-2); font-size: var(--fs-sm); }
.cx-more p { margin: 0 0 var(--s-2); }
/* thanks */
.hero--thanks { text-align: center; }
.cx-thanks { display: grid; justify-items: center; }
.cx-thanks .eyebrow { justify-content: center; }
.cx-thanks .lede { margin-left: auto; margin-right: auto; }
.cx-thanks .row { justify-content: center; }
.cx-check { color: var(--gold-2); margin-bottom: var(--s-4); }
.cx-check circle { stroke-dasharray: 183; stroke-dashoffset: 183; animation: cx-draw 900ms var(--ease-out) 150ms forwards; }
.cx-check path { stroke-dasharray: 44; stroke-dashoffset: 44; animation: cx-draw 500ms var(--ease-out) 900ms forwards; }
@keyframes cx-draw { to { stroke-dashoffset: 0; } }
.cx-next { list-style: none; margin: var(--s-6) auto; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); max-width: 760px; text-align: left; counter-reset: cx; }
.cx-next li { counter-increment: cx; display: grid; gap: 4px; padding: var(--s-4); border-radius: var(--r-3); border: 1px solid var(--line); background: var(--ink-2); font-size: var(--fs-sm); color: var(--text-2); }
.cx-next li::before { content: "0" counter(cx); font: 600 var(--fs-xs)/1 var(--font-mono); color: var(--gold-1); }
.cx-next strong { color: var(--white); }
@media (max-width: 700px) { .cx-next { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .cx-ws__orb, .cx.is-sending .cx-ws__ring, .cx-ws__item i { animation: none !important; } .cx-check circle, .cx-check path { animation: none; stroke-dashoffset: 0; } .cx-ws__item, .cx-card { transition: none; } }
/* touch targets and phone fit (375px sweep) */
.rc__scn-btn.sv__opt--sm { min-height: 38px; }
@media (max-width: 560px) { .cst__stage { aspect-ratio: 1 / 1.08; min-height: 0; } }
/* Measured placement (services.js): the stacked arrangement sets its own height. */
.cst__stage--stack { aspect-ratio: auto; min-height: 0; }
/* Without JavaScript the capabilities are a plain, fully readable list (no positioned nodes to overflow). */
.sv:not([data-js]) .cst__stage { aspect-ratio: auto; min-height: 0; padding: var(--s-4); }
.sv:not([data-js]) .cst__lines { display: none; }
.sv:not([data-js]) .cst__core { position: static; transform: none; margin: 0 auto var(--s-3); width: max-content; }
.sv:not([data-js]) .cst__nodes { position: static; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.sv:not([data-js]) .cst__node { position: static; transform: none; }

/* ── AI draft replies (staff: support tickets and conversations; src/ui/ai-draft.ts, app.js) ── */
.ai-draft { display: grid; gap: var(--s-2); }
.ai-draft__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.ai-draft__status { margin: 0; color: var(--text-2); font-size: var(--fs-sm); }
.ai-draft__status[data-state="failed"] { color: var(--bad); }
.ai-draft__status[data-state="pending"]::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: var(--s-2); vertical-align: -1px; border-radius: 50%; border: 1.5px solid var(--gold-1); border-right-color: transparent; animation: spin .9s linear infinite; }
.ai-draft__action { margin-left: var(--s-2); }
.ai-draft__note { margin: 0; font-size: var(--fs-sm); }
.ai-draft [hidden], .ai-draft-sensitive[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { .ai-draft__status[data-state="pending"]::before { animation: none; border-right-color: var(--gold-1); opacity: .6; } }

/* ── Touch targets (CREST-GAP-045) ────────────────────────────────────────────────────────────────
   The site's own rule: every control is at least 44 × 44 px on touch screens and phones. Placed last so it wins over
   the compact component sizes above (portfolio segmented control, journey stops, assistant, simulations, toasts). */
@media (pointer: coarse), (max-width: 760px) {
  .btn.btn--sm, .btn--cta.btn--sm { min-height: 44px; }
  .pfx__page, .pfx__tool, .pfx__seg .pfx__tool { min-height: 44px; min-width: 44px; }
  .sv__opt.sv__opt--sm, .rc__scn-btn.sv__opt--sm { min-height: 44px; }
  .toast__close { width: 44px; height: 44px; }
  .cb__hello-x, .cb__icon, .cb__send { width: 44px; height: 44px; }
  .cb__chip { min-height: 44px; }
  .cb__links a, .cb__foot a { min-height: 44px; min-width: 44px; }
  /* Journey: 44 px stops cannot share one phone-width rail, so the stops become numbered buttons that wrap. */
  .jr__stops { flex-wrap: wrap; justify-content: flex-start; gap: 6px; }
  .jr__stops::before, .jr__stops::after { display: none; }
  .jr__stop, .jr__stop:focus-visible { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--ink-1); }
  .jr__stop .jr__dot { display: none; }
  .jr__stop .jr__lbl { display: block; position: static; transform: none; font-size: 12px; color: var(--text-2); }
  .jr__stop.is-past { border-color: var(--gold-3); }
  .jr__stop[aria-pressed="true"] { background: var(--gold-2); border-color: var(--gold-2); }
  .jr__stop[aria-pressed="true"] .jr__lbl { color: var(--on-gold); }
}

/* ───────────── Lead research (/staff/research) ───────────── */
.research-detail { margin-top: var(--s-2); }
.research-detail > summary { cursor: pointer; color: var(--gold-2); }
.research-detail h4 { margin: var(--s-3) 0 var(--s-1); font-size: 0.95rem; }
.research-findings { padding-left: 1.1rem; }
.research-findings li { margin-bottom: var(--s-2); }
.research-findings a { word-break: break-all; }
.inline-form { display: flex; gap: var(--s-2); align-items: end; flex-wrap: wrap; margin-top: var(--s-2); }
.inline-form .field { margin: 0; flex: 1 1 14rem; }

/* Staff → Portfolio display order (drag handle, mouse / touch / keyboard; Up / Down fallback). */
.pf-order { list-style: none; padding: 0; margin: 0 0 var(--s-3); display: grid; gap: var(--s-2); }
.pf-order__item { display: grid; grid-template-columns: auto auto 1fr auto auto; gap: var(--s-3); align-items: center; padding: var(--s-3); }
.pf-order__item.is-dragging { outline: 2px dashed var(--gold, #c9a227); opacity: .85; }
.pf-order__handle { min-width: 44px; min-height: 44px; cursor: grab; touch-action: none; border: 1px solid var(--line, #3a3222); border-radius: 8px; background: transparent; color: inherit; font-size: 1.2rem; }
.pf-order__handle:active { cursor: grabbing; }
.pf-order__handle:focus-visible { outline: 2px solid var(--gold, #c9a227); outline-offset: 2px; }
.pf-order__pos { font-variant-numeric: tabular-nums; min-width: 1.5rem; text-align: right; color: var(--muted, #8d887c); }
.pf-order__main { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .pf-order__item { grid-template-columns: auto auto 1fr; }
  .pf-order__status, .pf-order__moves { grid-column: 3; }
}