/* ==========================================================================
   Zenotia — main stylesheet
   Hand-written CSS. No frameworks, no page builders.
   Sections: reset → tokens → base → layout → components → sections → utilities → motion
   (Deliberately unlayered: WordPress prints its global styles outside any cascade layer,
    and unlayered rules would otherwise beat everything in a @layer.)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts (self-hosted variable fonts, latin subset)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/public-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Cross-document view transitions (progressive enhancement) */
@view-transition { navigation: auto; }

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-height: 100svh; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, h5, h6 { font-weight: inherit; font-size: inherit; overflow-wrap: normal; hyphens: manual; }
p, li, dd, blockquote { overflow-wrap: break-word; }
ul[class], ol[class] { list-style: none; padding: 0; }
a { color: inherit; text-decoration-thickness: from-font; text-underline-offset: .15em; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; border-radius: 2px; }
:focus:not(:focus-visible) { outline: none; }
table { border-collapse: collapse; width: 100%; }

/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */
:root {
  --font-display: "Public Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Public Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --ink: #0b0b0c;
  --ink-2: #17171a;
  --ink-3: #232327;
  --paper: #fbfaf7;
  --paper-2: #f3f2ed;
  --paper-3: #e9e7e0;
  --mute: var(--fg-2);
  --mute-2: #8f8f97;
  --line: rgb(11 11 12 / .1);
  --line-strong: rgb(11 11 12 / .18);

  /* Gradient stops. Light mode uses the logo's grey-to-black (dark enough for white text on it); dark mode the ember brand
     colours (redefined below). --on-g is the text/icon colour that sits on a gradient. */
  --coral: #0b0b0c;
  --amber: #2e2e33;
  --sun: #55555b;
  --lemon: #6e6e74;
  --on-g: #ffffff;
  --g-brand: linear-gradient(120deg, var(--lemon) 0%, var(--sun) 25%, var(--amber) 60%, var(--coral) 100%);
  --g-brand-soft: linear-gradient(120deg, color-mix(in srgb, var(--lemon) 35%, transparent), color-mix(in srgb, var(--sun) 30%, transparent), color-mix(in srgb, var(--amber) 28%, transparent), color-mix(in srgb, var(--coral) 30%, transparent));

  /* Theme: light (default). Dark overrides live just below :root. */
  color-scheme: light;
  --bg: #fbfaf7;
  --bg-2: #f3f2ed;
  --bg-3: #e9e7e0;
  --surface: #ffffff;                 /* raised elements: chips, toggles */
  --fg: #0b0b0c;
  --fg-2: #616169;
  --accent-fg: #3a3a40;
  --band-bg: #0b0b0c;                 /* dark feature bands, CTA, score card */
  --band-bg-2: #17171a;
  --band-bg-3: #232327;
  --band-edge: transparent;           /* hairline that separates bands from a dark page */
  --footer-bg: #0b0b0c;
  --header-glass: rgb(251 250 247 / .78);
  /* Liquid glass header (see .site-header::before / ::after). */
  --lg-edge: rgb(255 255 255 / .16);
  --lg-tint-top: rgb(255 255 255 / .56);
  --lg-bright: .8;
  --menu-shade: rgb(14 14 16 / .8);
  --lg-tint-bottom: rgb(250 249 246 / .44);
  --lg-hi: rgb(255 255 255 / .95);
  --lg-lo: rgb(255 255 255 / .55);
  --lg-depth: rgb(11 11 12 / .1);
  --lg-rim: rgb(255 255 255 / .55);
  --lg-glint: rgb(255 255 255 / 1);
  --lg-glint-2: rgb(255 255 255 / .8);
  --lg-drop-1: rgb(11 11 12 / .06);
  --lg-drop-2: rgb(11 11 12 / .22);
  --lg-drop-fill: rgb(255 255 255 / .55);
  --lq-a: rgb(11 11 12 / .05);
  --lq-b: rgb(11 11 12 / .1);
  --lq-edge: rgb(11 11 12 / .35);
  --dot: rgb(11 11 12 / .09);
  --glow-o: .38;                      /* grey glows read heavier than ember ones */
  --code-bg: #0b0b0c;
  --success-bg: #e9f7ec; --success-fg: #11532a;
  --error-bg: #fdeeea;   --error-fg: #8a2b16;
  --sun-o: 0; --sun-r: -90deg; --sun-s: .5;
  --moon-o: 1; --moon-r: 0deg; --moon-s: 1;
  /* Chart series (validated: lightness band, chroma, CVD ΔE, contrast on the figure surface) */
  --c1: #d4532f; --c2: #2a78d6; --c3: #1baf7a; --c-muted: #d3d0c7; --c-grid: #e7e5de;
  --c-good: #0ca30c; --c-mid: #fab219; --c-poor: #d03b3b;
  --scrub-dim: #85858d;                /* 3.5:1 on paper: still readable large text before it lights up */
  --spot: color-mix(in srgb, var(--amber) 15%, transparent);

  --radius-s: .5rem;
  --radius-m: 1rem;
  --radius-l: 1.5rem;
  --radius-xl: 2.25rem;
  --radius-pill: 999px;

  --shadow-s: 0 1px 2px rgb(11 11 12 / .05), 0 2px 8px rgb(11 11 12 / .05);
  --shadow-m: 0 12px 32px -12px rgb(11 11 12 / .2);
  --shadow-l: 0 40px 90px -30px rgb(11 11 12 / .35);

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-1: .3s;
  --dur-2: .5s;
  --dur-3: .9s;
  --ease-rv: cubic-bezier(.4, 0, .6, 1);
  --ease-hover: cubic-bezier(.22, 1, .36, 1);   /* soft, no overshoot */
  --dur-hover: .55s;

  --container: 90rem; /* 1440px: every section caps here, centred on wide and 4K screens */
  --container-narrow: 46rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --section: clamp(4.5rem, 9vw, 8.5rem);
  --header-h: 6.125rem; /* 98px: the floating glass capsule inside it is 76px */
  --admin-h: 0px;     /* height of the fixed WordPress admin bar (logged-in users), set below */
  --admin-space: 0px; /* room it takes at the top of the page, fixed or not */

  --fs--1: clamp(.8rem, .78rem + .1vw, .875rem);
  --fs-0: clamp(1rem, .97rem + .15vw, 1.0625rem);
  --fs-1: clamp(1.125rem, 1.05rem + .4vw, 1.375rem);
  --fs-2: clamp(1.375rem, 1.2rem + .8vw, 1.875rem);
  --fs-3: clamp(1.75rem, 1.35rem + 1.7vw, 2.75rem);
  --fs-4: clamp(2.25rem, 1.5rem + 3.2vw, 4rem);
  --fs-5: clamp(2.75rem, 1.4rem + 5.6vw, 6rem);
  --fs-6: clamp(3.25rem, 1.1rem + 9vw, 9.5rem);
}

/* Theme: dark — follows the OS unless the visitor picked a theme (data-theme on <html>, set before paint). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
  --coral: #e95c3a; --amber: #f3903f; --sun: #fdc70c; --lemon: #fff33b; --on-g: #0b0b0c;
    --bg: #0e0e10;
    --bg-2: #17171b;
    --bg-3: #232328;
    --surface: #1c1c21;
    --fg: #f4f3ef;
    --fg-2: #a9a9b1;
    --mute-2: #7d7d86;
    --line: rgb(255 255 255 / .1);
    --line-strong: rgb(255 255 255 / .2);
    --accent-fg: #f6a25a;
    --band-bg: #151518;
    --band-bg-2: #1e1e23;
    --band-bg-3: #2a2a30;
    --band-edge: rgb(255 255 255 / .07);
    --footer-bg: #09090a;
    --header-glass: rgb(14 14 16 / .78);
    --lg-edge: rgb(30 30 34 / .14);
    --lg-tint-top: rgb(40 40 44 / .5);
    --lg-bright: .5;
    --menu-shade: rgb(12 12 14 / .64);
    --lg-tint-bottom: rgb(16 16 18 / .42);
    --lg-hi: rgb(255 255 255 / .22);
    --lg-lo: rgb(255 255 255 / .08);
    --lg-depth: rgb(0 0 0 / .35);
    --lg-rim: rgb(255 255 255 / .14);
    --lg-glint: rgb(255 255 255 / .75);
    --lg-glint-2: rgb(255 255 255 / .35);
    --lg-drop-1: rgb(0 0 0 / .3);
    --lg-drop-2: rgb(0 0 0 / .6);
    --lg-drop-fill: rgb(255 255 255 / .1);
    --lq-a: rgb(253 199 12 / .1);
    --lq-b: rgb(233 92 58 / .16);
    --lq-edge: rgb(253 199 12 / .75);
    --dot: rgb(255 255 255 / .06);
    --glow-o: .5;
    --code-bg: #060607;
    --success-bg: rgb(34 197 94 / .14); --success-fg: #86efac;
    --error-bg: rgb(239 68 68 / .14);   --error-fg: #fca5a5;
    --shadow-s: 0 1px 2px rgb(0 0 0 / .4), 0 2px 8px rgb(0 0 0 / .3);
    --shadow-m: 0 12px 32px -12px rgb(0 0 0 / .7);
    --shadow-l: 0 40px 90px -30px rgb(0 0 0 / .8);
    --sun-o: 1; --sun-r: 0deg; --sun-s: 1;
    --moon-o: 0; --moon-r: 90deg; --moon-s: .5;
    --c1: #e5653b; --c2: #3987e5; --c3: #199e70; --c-muted: #3a3a41; --c-grid: #2c2c31;
    --scrub-dim: #6a6a72; --spot: rgb(255 255 255 / .06);
  --scrub-dim: #6a6a72; --spot: rgb(255 255 255 / .06);
  --c1: #e5653b; --c2: #3987e5; --c3: #199e70; --c-muted: #3a3a41; --c-grid: #2c2c31;
  --scrub-dim: #6a6a72; --spot: rgb(255 255 255 / .06);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --coral: #e95c3a; --amber: #f3903f; --sun: #fdc70c; --lemon: #fff33b; --on-g: #0b0b0c;
  --bg: #0e0e10;
  --bg-2: #17171b;
  --bg-3: #232328;
  --surface: #1c1c21;
  --fg: #f4f3ef;
  --fg-2: #a9a9b1;
  --mute-2: #7d7d86;
  --line: rgb(255 255 255 / .1);
  --line-strong: rgb(255 255 255 / .2);
  --accent-fg: #f6a25a;
  --band-bg: #151518;
  --band-bg-2: #1e1e23;
  --band-bg-3: #2a2a30;
  --band-edge: rgb(255 255 255 / .07);
  --footer-bg: #09090a;
  --header-glass: rgb(14 14 16 / .78);
  --lg-edge: rgb(30 30 34 / .14);
  --lg-tint-top: rgb(40 40 44 / .5);
  --lg-bright: .5;
  --menu-shade: rgb(12 12 14 / .64);
  --lg-tint-bottom: rgb(16 16 18 / .42);
  --lg-hi: rgb(255 255 255 / .22);
  --lg-lo: rgb(255 255 255 / .08);
  --lg-depth: rgb(0 0 0 / .35);
  --lg-rim: rgb(255 255 255 / .14);
  --lg-glint: rgb(255 255 255 / .75);
  --lg-glint-2: rgb(255 255 255 / .35);
  --lg-drop-1: rgb(0 0 0 / .3);
  --lg-drop-2: rgb(0 0 0 / .6);
  --lg-drop-fill: rgb(255 255 255 / .1);
  --lq-a: rgb(253 199 12 / .1);
  --lq-b: rgb(233 92 58 / .16);
  --lq-edge: rgb(253 199 12 / .75);
  --dot: rgb(255 255 255 / .06);
  --glow-o: .5;
  --code-bg: #060607;
  --success-bg: rgb(34 197 94 / .14); --success-fg: #86efac;
  --error-bg: rgb(239 68 68 / .14);   --error-fg: #fca5a5;
  --shadow-s: 0 1px 2px rgb(0 0 0 / .4), 0 2px 8px rgb(0 0 0 / .3);
  --shadow-m: 0 12px 32px -12px rgb(0 0 0 / .7);
  --shadow-l: 0 40px 90px -30px rgb(0 0 0 / .8);
  --sun-o: 1; --sun-r: 0deg; --sun-s: 1;
  --moon-o: 0; --moon-r: 90deg; --moon-s: .5;
  --c1: #e5653b; --c2: #3987e5; --c3: #199e70; --c-muted: #3a3a41; --c-grid: #2c2c31;
  --scrub-dim: #6a6a72; --spot: rgb(255 255 255 / .06);
}

/* Dark bands (stats, why-us, CTA, footer): dark in both themes, a step lighter than a dark page. */
.is-dark {
  --bg: var(--band-bg);
  --bg-2: var(--band-bg-2);
  --bg-3: var(--band-bg-3);
  --surface: var(--band-bg-3);
  --fg: var(--paper);
  --fg-2: #a6a6ae;
  --mute: #a6a6ae;
  --mute-2: #7d7d86;
  --line: rgb(255 255 255 / .12);
  --line-strong: rgb(255 255 255 / .24);
  --accent-fg: var(--sun);
  --spot: rgb(255 255 255 / .07);
  --shadow-m: 0 12px 32px -12px rgb(0 0 0 / .6);
  color-scheme: dark;
  background: var(--bg);
  color: var(--fg);
}
.section.is-dark { border-block: 1px solid var(--band-edge); }
/* Gradients on always-dark surfaces: white-to-grey in light mode, ember in dark mode. */
.is-dark, .menu-overlay, .site-footer {
  --lemon: #ffffff; --sun: #dcdce0; --amber: #a9a9b0; --coral: #7a7a82; --on-g: #0b0b0c;
  --g-brand: linear-gradient(120deg, var(--lemon) 0%, var(--sun) 25%, var(--amber) 60%, var(--coral) 100%);
  --g-brand-soft: linear-gradient(120deg, color-mix(in srgb, var(--lemon) 35%, transparent), color-mix(in srgb, var(--sun) 30%, transparent), color-mix(in srgb, var(--amber) 28%, transparent), color-mix(in srgb, var(--coral) 30%, transparent));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.is-dark, .menu-overlay, .site-footer) { --coral: #e95c3a; --amber: #f3903f; --sun: #fdc70c; --lemon: #fff33b; --on-g: #0b0b0c; }
}
:root[data-theme="dark"] :is(.is-dark, .menu-overlay, .site-footer) { --coral: #e95c3a; --amber: #f3903f; --sun: #fdc70c; --lemon: #fff33b; --on-g: #0b0b0c; }

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--admin-h) + var(--header-h) + 1rem); }
body {
  font-family: var(--font-body);
  font-size: var(--fs-0);
  font-weight: 400;
  color: var(--fg);
  background: var(--bg);
  overflow-x: clip;
}
body.menu-open { overflow: hidden; }

h1, h2, h3, h4, .display, .h1, .h2, .h3, .h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.025em;
  text-wrap: balance;
  color: var(--fg);
}
.display { font-size: var(--fs-5); letter-spacing: -.035em; line-height: .98; font-weight: 600; }
.display--xl { font-size: var(--fs-6); letter-spacing: -.032em; line-height: .94; }
.h1 { font-size: var(--fs-4); }
.h2 { font-size: var(--fs-3); }
.h3 { font-size: var(--fs-2); letter-spacing: -.015em; }
.h4 { font-size: var(--fs-1); letter-spacing: -.01em; }
p { text-wrap: pretty; }
.lede { font-size: var(--fs-1); color: var(--fg-2); line-height: 1.5; max-width: 40ch; text-wrap: pretty; }
.lede--wide { max-width: 56ch; }
.small { font-size: var(--fs--1); }
.mute { color: var(--fg-2); }
.mono { font-family: var(--font-mono); font-size: .85em; }

.grad {
  font-style: normal;
  background: var(--g-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Gradient text only paints inside its own box: grow the box on every side (and cancel it with negative margins, so
     nothing moves) so tight tracking, descenders and overhanging glyphs such as y, j and f are never cut off. */
  padding: .08em .1em .18em; margin: -.08em -.1em -.18em;
}
::selection { background: var(--sun); color: var(--on-g); }

.skip-link {
  position: absolute; left: 1rem; top: -100%; z-index: 100;
  padding: .75rem 1rem; background: var(--fg); color: var(--bg);
  border-radius: var(--radius-s); font-weight: 600;
}
.skip-link:focus { top: 1rem; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.container--narrow { width: min(100% - 2 * var(--gutter), var(--container-narrow)); margin-inline: auto; }
.container--wide { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }

.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: calc(var(--section) * .6); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }
.section--bg-2 { background: var(--bg-2); }

.section__head { display: grid; gap: 1.25rem; align-items: end; margin-bottom: clamp(2rem, 5vw, 4rem); }
.section__head > .lede { margin-top: .25rem; }
.text-center > .lede, .section__head.text-center .lede { margin-inline: auto; text-wrap: balance; }
.text-center > .eyebrow, .section__head.text-center .eyebrow { justify-content: center; }
@media (min-width: 60em) {
  .section__head--split { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .section__head--split .lede { justify-self: end; max-width: 42ch; }
  .section__head--split .section__cta { justify-self: end; }
}

.stack > * + * { margin-top: var(--stack, 1rem); }
.flow > * + * { margin-top: var(--flow, 1.25em); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--cluster, .75rem); align-items: center; }
.grid { display: grid; gap: var(--grid-gap, 1.25rem); }
@media (min-width: 48em) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64em) {
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.divider { height: 1px; background: var(--line); border: 0; }

/* --------------------------------------------------------------------------
   Components
   -------------------------------------------------------------------------- */

/* Eyebrow ------------------------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-2); margin-bottom: 1.1rem;
}
.eyebrow__dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--g-brand); flex: none; }

/* Buttons ------------------------------------------------------------- */
.btn {
  --btn-bg: var(--fg); --btn-fg: var(--bg); --btn-border: transparent;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .9em 1.5em; min-height: 3rem;
  border-radius: var(--radius-pill);
  background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-border);
  font-weight: 600; font-size: .95rem; line-height: 1; letter-spacing: -.005em;
  text-decoration: none; white-space: nowrap;
  transition: transform var(--dur-hover) var(--ease-hover), background var(--dur-1) ease, color var(--dur-1) ease, border-color var(--dur-1) ease, box-shadow var(--dur-hover) var(--ease-hover);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-m); }
/* Solid buttons fill with the gradient on hover (grey-to-black in light mode, ember in dark), plus a light sweep. */
.btn:not(.btn--ghost, .btn--link) { position: relative; isolation: isolate; overflow: hidden; }
.btn:not(.btn--ghost, .btn--link)::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: var(--g-brand); opacity: 0; transition: opacity var(--dur-hover) var(--ease-hover); }
.btn:not(.btn--ghost, .btn--link)::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 30%, color-mix(in srgb, var(--on-g) 35%, transparent) 50%, transparent 70%); transform: translateX(-130%); transition: transform .7s ease; pointer-events: none; }
@media (hover: hover) {
  .btn:not(.btn--ghost, .btn--link):hover { --btn-fg: var(--on-g); }
  .btn:not(.btn--ghost, .btn--link):hover::before { opacity: 1; }
  .btn:not(.btn--ghost, .btn--link):hover::after { transform: translateX(130%); }
  .btn--ghost:hover { border-color: var(--fg); }
}
.btn:active { transform: translateY(0); }
.btn__icon { display: inline-grid; place-items: center; width: 1.1em; height: 1.1em; transition: transform var(--dur-hover) var(--ease-hover); }
.btn__icon .icon { width: 100%; height: 100%; }
.btn:hover .btn__icon { transform: translateX(3px); }
.btn:hover .icon--arrow-up-right { transform: translate(2px, -2px); }
.btn--brand { --btn-bg: var(--g-brand); --btn-fg: var(--on-g); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--fg); --btn-border: var(--line-strong); }
.btn--ghost:hover { --btn-bg: var(--bg-2); box-shadow: none; }
.btn--light { --btn-bg: var(--paper); --btn-fg: var(--ink); }
.btn--link { --btn-bg: transparent; --btn-fg: var(--fg); padding-inline: 0; min-height: 0; }
.btn--link:hover { transform: none; box-shadow: none; color: var(--accent-fg); }
.btn--lg { padding: 1.05em 1.75em; font-size: 1.05rem; min-height: 3.5rem; }
.btn--sm { padding: .65em 1.1em; font-size: .85rem; min-height: 2.5rem; }
.is-dark .btn--ghost { --btn-fg: var(--paper); }
.is-dark .btn--ghost:hover { --btn-bg: rgb(255 255 255 / .08); }
.btn[disabled], .btn[aria-busy="true"] { opacity: .6; pointer-events: none; }

/* Pills / tags ---------------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4em .8em; border-radius: var(--radius-pill);
  background: var(--bg-2); color: var(--fg); font-size: .8rem; font-weight: 500; line-height: 1;
  border: 1px solid transparent;
}
.pill--outline { background: transparent; border-color: var(--line); color: var(--fg-2); }
.pill--brand { background: var(--g-brand); color: var(--on-g); }
.pill--dark { background: var(--fg); color: var(--bg); }
.pill--muted { background: var(--bg-3); color: var(--fg-2); }
.pill--hires { background: color-mix(in srgb, var(--amber) 16%, transparent); color: var(--fg); border-color: color-mix(in srgb, var(--amber) 40%, transparent); }
.pill--hires .icon { width: .85em; height: .85em; color: var(--accent-fg); stroke-width: 2.5; }
.pill .icon { width: .9em; height: .9em; }
.tag-list { display: flex; flex-wrap: wrap; gap: .4rem; }

.pill-filter { display: flex; flex-wrap: wrap; gap: .5rem; }
.pill-filter button { padding: .55em 1em; border-radius: var(--radius-pill); border: 1px solid var(--line); font-size: .85rem; font-weight: 500; transition: background var(--dur-1), color var(--dur-1), border-color var(--dur-1); }
.pill-filter button:hover { border-color: var(--line-strong); background: var(--bg-2); }
.pill-filter button[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* Icon ----------------------------------------------------------------- */
.icon { width: 1.25rem; height: 1.25rem; flex: none; }
.icon-disc {
  display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--radius-m);
  background: var(--g-brand); color: var(--on-g);
}
.icon-disc .icon { width: 1.35rem; height: 1.35rem; }
.icon-disc--soft { background: var(--bg-3); color: var(--fg); }

/* Stars / avatars ------------------------------------------------------- */
.stars { display: inline-flex; gap: .15rem; color: var(--amber); }
.stars .icon { width: 1rem; height: 1rem; }
.avatar {
  display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--g-brand); color: var(--on-g); font-family: var(--font-display); font-weight: 700; font-size: .95rem; letter-spacing: -.02em;
  flex: none;
}
.avatar--img { object-fit: cover; }
.avatar--lg { width: 5rem; height: 5rem; font-size: 1.5rem; }
.avatar--xl { width: 8rem; height: 8rem; font-size: 2.25rem; border-radius: var(--radius-l); }

/* Cover & mock --------------------------------------------------------- */
.cover { position: relative; overflow: hidden; overflow: clip; aspect-ratio: 16 / 10; background: var(--p3, var(--ink-2)); border-radius: var(--radius-m); isolation: isolate; }
.cover--wide { aspect-ratio: 16 / 9; border-radius: var(--radius-l); }
.cover--square { aspect-ratio: 1; }
.cover__img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-3) var(--ease-out); }
.cover__art { position: absolute; inset: 0; background: var(--p3, #17171a); overflow: hidden; }
.cover__blob { position: absolute; border-radius: 50%; filter: blur(40px); opacity: .9; }
.cover__blob--a { width: 70%; aspect-ratio: 1; left: -10%; top: -20%; background: var(--p1, var(--coral)); }
.cover__blob--b { width: 60%; aspect-ratio: 1; right: -15%; bottom: -25%; background: var(--p2, var(--sun)); }
.cover__grid {
  position: absolute; inset: 0; opacity: .18; mix-blend-mode: overlay;
  background-image: linear-gradient(rgb(255 255 255 / .6) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .6) 1px, transparent 1px);
  background-size: 2.5rem 2.5rem;
}

.mock { border-radius: var(--radius-m); background: var(--p3, var(--ink-2)); box-shadow: var(--shadow-m); overflow: hidden; overflow: clip; border: 1px solid rgb(255 255 255 / .06); }
.mock__bar { display: flex; align-items: center; gap: .75rem; height: 2.25rem; padding-inline: .9rem; background: rgb(255 255 255 / .06); backdrop-filter: blur(4px); }
.mock__dots { display: inline-flex; gap: .35rem; }
.mock__dots i { width: .55rem; height: .55rem; border-radius: 50%; background: rgb(255 255 255 / .35); }
.mock__url { font-family: var(--font-mono); font-size: .7rem; color: rgb(255 255 255 / .7); padding: .2em .65em; background: rgb(0 0 0 / .25); border-radius: var(--radius-pill); }
.mock__screen { border-radius: 0; aspect-ratio: 16 / 10; }
.mock .cover__img { object-position: top center; }

/* Cards ---------------------------------------------------------------- */
.card {
  display: flex; flex-direction: column; gap: 1rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--bg-2); border-radius: var(--radius-l);
  border: 1px solid transparent;
  transition: transform var(--dur-hover) var(--ease-hover), box-shadow var(--dur-hover) var(--ease-hover), border-color var(--dur-2), background var(--dur-2);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-m); }
.is-dark .card { background: var(--bg-2); border-color: var(--line); }
.card__title { font-size: var(--fs-2); letter-spacing: -.02em; }
.card__title a { text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card--link { position: relative; }
.card__text { color: var(--fg-2); }

/* Work card */
.work-card { position: relative; display: grid; gap: 1.1rem; }
.work-card:hover .cover__img { transform: scale(1.035); }
.work-card__body { display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; align-items: start; }
.work-card__title { font-size: var(--fs-2); letter-spacing: -.02em; }
.work-card__title a { text-decoration: none; }
.work-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.work-card__meta { color: var(--fg-2); font-size: var(--fs--1); }
.work-card__arrow { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--line); transition: background var(--dur-2), color var(--dur-2), transform var(--dur-hover) var(--ease-hover); }
.work-card:hover .work-card__arrow { background: var(--fg); color: var(--bg); transform: rotate(-45deg); }
.work-card__tags { grid-column: 1 / -1; }

/* Post card */

.meta { display: flex; flex-wrap: wrap; gap: .35rem 1rem; align-items: center; font-size: var(--fs--1); color: var(--fg-2); }
.meta__cat { font-weight: 600; color: var(--accent-fg); text-decoration: none; position: relative; z-index: 2; }
.meta__cat:hover { text-decoration: underline; }

/* Service row (archive) */
.service-row {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem 1.5rem; align-items: start;
  padding-block: clamp(1.5rem, 3vw, 2.5rem); border-top: 1px solid var(--line); position: relative;
  transition: padding-left var(--dur-hover) var(--ease-hover);
}
.service-row:last-child { border-bottom: 1px solid var(--line); }
.service-row__num { font-family: var(--font-display); font-weight: 500; color: var(--fg-2); font-size: var(--fs-0); padding-top: .4rem; min-width: 2.5rem; }
.service-row__title { font-size: var(--fs-3); letter-spacing: -.03em; }
.service-row__title a { text-decoration: none; }
.service-row__title a::after { content: ""; position: absolute; inset: 0; }
.service-row__tag { color: var(--fg-2); max-width: 48ch; margin-top: .4rem; }
.service-row__list { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.service-row__arrow { position: absolute; right: 0; top: clamp(1.5rem, 3vw, 2.5rem); width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; transition: background var(--dur-2), color var(--dur-2), transform var(--dur-hover) var(--ease-hover); }
.service-row:hover .service-row__arrow { background: var(--fg); color: var(--bg); transform: rotate(-45deg); }
/* Narrow screens: the included list goes under the title (left alone it lands in the number's column and widens it,
   squeezing the title and text into a sliver), and the title leaves room for the arrow pinned at the top right. */
@media (max-width: 59.99em) {
  .service-row > div { min-width: 0; padding-right: 3.75rem; }
  .service-row__list { grid-column: 2; min-width: 0; }
}
@media (min-width: 60em) {
  .service-row { grid-template-columns: 4rem 1.1fr 1fr 4rem; }
  .service-row__tag { margin-top: .5rem; }
  .service-row__list { margin-top: .4rem; }
  .service-row__arrow { position: static; justify-self: end; }
  .service-row:hover { padding-left: .75rem; }
}

/* Quote card: the same three bands on every card, whatever the content —
   rating row (fixed height) · review text (fills) · client row (pinned to the bottom). */
.quote {
  display: flex; flex-direction: column; gap: 1.25rem; height: 100%;
  padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--radius-l);
  background: var(--bg-2); border: 1px solid var(--line);
}
.is-dark .quote { background: rgb(255 255 255 / .04); }
.quote__top { display: flex; align-items: center; gap: .75rem; min-height: 1.75rem; }
.quote__top .pill { margin-left: auto; white-space: nowrap; }
.quote__text { margin: 0; font-family: var(--font-display); font-size: var(--fs-1); font-weight: 500; line-height: 1.4; letter-spacing: -.01em; text-wrap: pretty; flex: 1; }
.quote__text > :last-child { margin-bottom: 0; }
.quote__text--lg { font-size: var(--fs-2); line-height: 1.3; }
.quote__foot { display: flex; align-items: center; gap: .9rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.quote__foot .avatar { width: 2.75rem; height: 2.75rem; font-size: .85rem; }
/* Room for a name plus a two-line role on every card, so dividers line up across a row. */
.quote__who { display: grid; gap: .1rem; align-content: center; min-width: 0; flex: 1; line-height: 1.3; min-height: calc(1.3em + .1rem + 2.6 * var(--fs--1)); }
.quote__name { font-weight: 600; overflow-wrap: anywhere; }
.quote__role { color: var(--fg-2); font-size: var(--fs--1); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.quote__mark { flex: none; width: 1.5rem; height: 1.5rem; color: var(--amber); opacity: .7; }
.quote__mark .icon { width: 100%; height: 100%; }

/* Stat */
.stat { display: grid; gap: .35rem; align-content: start; }
.stat__value { font-family: var(--font-display); font-size: var(--fs-5); font-weight: 600; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat__value sup, .stat__value .stat__unit { font-size: .45em; vertical-align: top; letter-spacing: 0; margin-left: .05em; }
.stat__label { color: var(--fg-2); font-size: var(--fs--1); max-width: 22ch; }
.stat--sm .stat__value { font-size: var(--fs-3); }

/* Breadcrumbs / pagination */
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; font-size: var(--fs--1); color: var(--fg-2); }
.crumbs li + li::before { content: "/"; margin-right: .35rem; opacity: .5; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--fg); text-decoration: underline; }
.pagination ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 3rem; }
.pagination .page-numbers { display: inline-grid; place-items: center; min-width: 2.75rem; height: 2.75rem; padding-inline: .75rem; border-radius: var(--radius-pill); border: 1px solid var(--line); text-decoration: none; font-weight: 500; font-size: .9rem; }
.pagination .page-numbers.current { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.pagination a.page-numbers:hover { background: var(--bg-2); }
.pagination .dots { border: 0; }

/* Accordion (details) */
.accordion { border-top: 1px solid var(--line); }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__item summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; font-family: var(--font-display); font-size: var(--fs-1); font-weight: 600; letter-spacing: -.01em; }
/* The +/x sits in a circle that fills with the gradient when open; main.js animates the height (see "Accordion"). */
.accordion__item summary .icon { flex: none; width: 2.25rem; height: 2.25rem; padding: .55rem; border-radius: 50%; border: 1px solid var(--line-strong); transition: transform .5s var(--ease-out), background-color .35s ease, border-color .35s ease, color .35s ease; }
.accordion__item summary { transition: color var(--dur-1) ease; }
@media (hover: hover) { .accordion__item summary:hover .icon { border-color: var(--fg); transform: rotate(90deg); } }
.accordion__item[open]:not(.is-closing) summary .icon { transform: rotate(135deg); background: var(--g-brand); color: var(--on-g); border-color: transparent; }
.accordion__item summary:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; border-radius: .25rem; }
.accordion__body { padding-bottom: 1.5rem; color: var(--fg-2); max-width: 60ch; overflow: hidden; }

/* Check list */
.checks { display: grid; gap: .75rem; }
.checks li { display: flex; gap: .75rem; align-items: flex-start; }
.checks .icon { width: 1.25rem; height: 1.25rem; padding: .15rem; border-radius: 50%; background: var(--g-brand); color: var(--on-g); flex: none; margin-top: .15rem; stroke-width: 3; }
@media (min-width: 48em) { .checks--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 2rem; } }

/* Forms ------------------------------------------------------------- */
.form { display: grid; gap: 1.1rem; }
.form__row { display: grid; gap: 1.1rem; }
@media (min-width: 40em) { .form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field { display: grid; gap: .45rem; }
.field label { font-size: .85rem; font-weight: 600; }
.field label .req { color: var(--c-poor); }
.field input, .field textarea, .field select {
  width: 100%; padding: .9rem 1rem; border-radius: var(--radius-m);
  border: 1px solid var(--line-strong); background-color: var(--bg);
  font-size: 1rem; line-height: 1.4;
  transition: border-color var(--dur-1), box-shadow var(--dur-hover) var(--ease-hover);
}
@media (hover: hover) { .field :is(input, textarea, select):hover:not(:focus) { border-color: color-mix(in srgb, var(--fg) 45%, transparent); } }
/* Dropdowns match the text fields: no native styling; an outlined chevron (drawn on the field, in the text colour)
   that darkens on hover and turns over while the dropdown is focused. */
.field select { -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 2.9rem; text-overflow: ellipsis; background-image: none; }
.field select option { background-color: var(--bg); color: var(--fg); }
.field:has(> select) { position: relative; }
.field:has(> select)::after {
  content: ""; position: absolute; right: 1.05rem; bottom: calc(1.65rem - .5rem); width: 1rem; height: 1rem; pointer-events: none;
  background: var(--fg-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%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 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--dur-hover) var(--ease-hover), background-color var(--dur-1) ease;
}
.field:has(> select:hover)::after { background: var(--fg); }
.field:has(> select:focus)::after { background: var(--fg); transform: rotate(180deg); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 4px color-mix(in srgb, var(--coral) 15%, transparent); }
.field textarea { min-height: 9rem; resize: vertical; }
.field__hint { font-size: .8rem; color: var(--fg-2); }
.field--error input, .field--error textarea { border-color: var(--c-poor); }
.field__error { font-size: .8rem; color: var(--error-fg); }
.form__hp { position: absolute !important; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.form__status { padding: 1rem 1.25rem; border-radius: var(--radius-m); font-weight: 500; display: none; }
.form__status.is-success { display: block; background: var(--success-bg); color: var(--success-fg); }
.form__status.is-error { display: block; background: var(--error-bg); color: var(--error-fg); }
.form__consent { font-size: .8rem; color: var(--fg-2); }
.form__consent a { color: var(--fg); }

/* Search form */
.search-form { display: flex; gap: .5rem; max-width: 36rem; }
.search-form input { flex: 1; padding: .9rem 1.1rem; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); background: var(--bg); }
.search-form input:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 4px color-mix(in srgb, var(--coral) 15%, transparent); }

/* Marquee ------------------------------------------------------------ */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee__track { display: flex; gap: clamp(2rem, 5vw, 4rem); width: max-content; animation: marquee var(--marquee-dur, 40s) linear infinite; padding-block: .5rem; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { display: inline-flex; align-items: center; gap: clamp(2rem, 5vw, 4rem); font-family: var(--font-display); font-size: var(--fs-2); font-weight: 600; letter-spacing: -.02em; color: var(--fg-2); white-space: nowrap; }
.marquee__item::after { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--g-brand); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Rail (horizontal snap scroller) ------------------------------------- */
.rail-wrap { position: relative; }
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: var(--rail-col, clamp(18rem, 72vw, 34rem));
  gap: clamp(1rem, 2.5vw, 2rem);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  padding-inline: max(var(--gutter), (100% - var(--container)) / 2);
  padding-bottom: .5rem; scroll-padding-inline: max(var(--gutter), (100% - var(--container)) / 2);
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
.rail-nav { display: flex; gap: .5rem; }
.rail-nav button { width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; transition: background var(--dur-1), color var(--dur-1); }
.rail-nav button:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.rail-nav button[disabled] { opacity: .35; pointer-events: none; }

/* Prose (post/page content) ------------------------------------------- */
.prose { font-size: var(--fs-0); line-height: 1.7; }
.prose > * + * { margin-top: 1.3em; }
.prose > h2, .prose > h3, .prose > h4 { margin-top: 2em; }
.prose h2 { font-size: var(--fs-3); }
.prose h3 { font-size: var(--fs-2); }
.prose h4 { font-size: var(--fs-1); }
.prose a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 2px; }
.prose a:hover { text-decoration-color: var(--coral); }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: .4em; }
.prose blockquote { padding: 1.5rem 2rem; border-left: 3px solid var(--coral); background: var(--bg-2); border-radius: 0 var(--radius-m) var(--radius-m) 0; font-family: var(--font-display); font-size: var(--fs-1); font-weight: 500; line-height: 1.4; }
.prose blockquote.is-style-pull { border: 0; background: none; padding: 0; font-size: var(--fs-3); letter-spacing: -.02em; }
.prose blockquote cite { display: block; margin-top: .75rem; font: 500 var(--fs--1) var(--font-body); color: var(--fg-2); font-style: normal; }
.prose pre { padding: 1.25rem 1.5rem; border-radius: var(--radius-m); background: var(--code-bg); color: var(--paper); border: 1px solid var(--line); overflow: auto; font-family: var(--font-mono); font-size: .85rem; line-height: 1.6; }
.prose code { font-family: var(--font-mono); font-size: .88em; background: var(--bg-2); padding: .15em .4em; border-radius: .35em; }
.prose pre code { background: none; padding: 0; }
.prose img, .prose figure { border-radius: var(--radius-m); }
.prose figcaption { font-size: var(--fs--1); color: var(--fg-2); margin-top: .6rem; }
.prose table { font-size: .95rem; }
.prose th, .prose td { text-align: left; padding: .75rem 1rem; border-bottom: 1px solid var(--line); }
.prose th { font-weight: 600; }
.prose hr { border: 0; height: 1px; background: var(--line); margin-block: 3rem; }
.prose .is-style-panel { padding: 1.75rem 2rem; background: var(--bg-2); border-radius: var(--radius-l); }
.prose .is-style-panel > * + * { margin-top: .75em; }
.prose .is-style-checks { list-style: none; padding: 0; display: grid; gap: .6rem; }
.prose .is-style-checks li { padding-left: 2rem; position: relative; }
.prose .is-style-checks li::before { content: ""; position: absolute; left: 0; top: .35em; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--g-brand) ; }
.prose .is-style-checks li::after { content: ""; position: absolute; left: .35rem; top: .62em; width: .5rem; height: .3rem; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg); }
.prose .stats-row h3 { font-size: var(--fs-4); letter-spacing: -.04em; line-height: 1; }
.prose .stats-row p { color: var(--fg-2); margin-top: .35em; }
.prose .wp-block-columns { display: flex; gap: 2rem; flex-wrap: wrap; }
.prose .wp-block-column { flex: 1 1 12rem; }
.prose .wp-block-column > * + * { margin-top: .5em; }
.prose .wp-block-button__link { display: inline-flex; padding: .9em 1.5em; border-radius: var(--radius-pill); background: var(--fg); color: var(--bg); text-decoration: none; font-weight: 600; }
.prose .is-style-brand .wp-block-button__link { background: var(--g-brand); color: var(--on-g); }
.prose .is-style-ghost .wp-block-button__link { background: transparent; border: 1px solid var(--line-strong); color: var(--fg); }
.prose .alignwide { width: min(100vw - 2 * var(--gutter), var(--container)); margin-left: 50%; transform: translateX(-50%); }
.prose .alignfull { width: 100vw; margin-left: 50%; transform: translateX(-50%); }
.prose .wp-block-image img { width: 100%; }
.prose .wp-block-separator { border: 0; height: 1px; background: var(--line); max-width: 6rem; margin-inline: 0; }

/* Policy pages: numbered headings */
.policy .prose h2 { font-size: var(--fs-2); }
.policy__meta { color: var(--fg-2); font-size: var(--fs--1); }
/* Policy pages end with the text (no call to action), so give it the standard section spacing before the footer. */
.policy, main > article:last-child { padding-bottom: var(--section); }

/* --------------------------------------------------------------------------
   Sections: header, footer, hero, home blocks, inner pages
   -------------------------------------------------------------------------- */

/* Header --------------------------------------------------------------- */
.site-header {
  /* No view-transition-name here: it would cut the glass off from the page behind and misplace positioned children.
     header.php names the header only while a page-to-page transition runs (pageswap / pagereveal). */
  position: sticky; top: var(--admin-h); z-index: 60; height: var(--header-h);
  background: transparent; border-bottom: 1px solid transparent;
  transition: background var(--dur-2), border-color var(--dur-2), box-shadow var(--dur-hover) var(--ease-hover);
}
/* Scrolled: Apple-style liquid glass. The bar becomes a floating capsule (::before) that springs in around the
   header's content. The capsule is clear glass: light blur, a tint, inner "thickness" shading and, in Chromium, real
   refraction along its rim (main.js builds the lens map, with a slight colour split). ::after is the specular rim: a
   thin bright edge with glints that follow the light (the pointer, --lx) and a sheen that moves with the scroll. */
.site-header {
  --cap-x: max(.5rem, calc((100% - min(100% - 2 * var(--gutter), var(--container))) / 2 - 1.1rem));
  --cap-y: .6875rem;
}
.site-header::before, .site-header::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: var(--cap-y) var(--cap-x); border-radius: var(--radius-pill);
  opacity: 0; scale: .965 .8;
  transition: opacity .3s ease, scale .7s linear(0, .45 9%, .86 19%, 1.04 29%, 1.07 36%, 1.03 47%, .99 60%, 1.005 75%, 1);
}
.site-header::before {
  background: linear-gradient(180deg, var(--lg-edge) 0, var(--lg-tint-top) 32%, var(--lg-tint-bottom) 68%, var(--lg-edge) 100%), linear-gradient(90deg, var(--lg-edge) 0, transparent 2.5rem, transparent calc(100% - 2.5rem), var(--lg-edge) 100%);
  backdrop-filter: blur(9px) saturate(185%) brightness(var(--lg-bright)); -webkit-backdrop-filter: blur(9px) saturate(185%) brightness(var(--lg-bright));
  box-shadow:
    inset 0 1px 1px var(--lg-hi),
    inset 0 -1px 1px var(--lg-lo),
    inset 0 10px 18px -14px var(--lg-hi),
    inset 0 -12px 20px -16px var(--lg-depth),
    0 1px 2px var(--lg-drop-1),
    0 16px 36px -18px var(--lg-drop-2);
}
.site-header::after {
  padding: 1.25px;
  background:
    radial-gradient(14rem 3.5rem at var(--lx, 22%) 0%, var(--lg-glint), transparent 70%),
    radial-gradient(14rem 3.5rem at calc(100% - var(--lx, 22%)) 100%, var(--lg-glint-2), transparent 70%),
    radial-gradient(3rem 3rem at 0% 50%, var(--lg-glint-2), transparent 75%),
    radial-gradient(3rem 3rem at 100% 50%, var(--lg-glint-2), transparent 75%),
    linear-gradient(105deg, transparent calc(var(--sheen, 30%) - 18%), var(--lg-glint-2) var(--sheen, 30%), transparent calc(var(--sheen, 30%) + 18%)),
    linear-gradient(var(--lg-rim), var(--lg-rim));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.site-header.is-scrolled::before, .site-header.is-scrolled::after { opacity: 1; scale: 1; }
html.liquid .site-header::before { backdrop-filter: blur(7px) url(#zen-liquid) saturate(185%) brightness(var(--lg-bright)); }
/* Safari only samples the page from the header's own layer, so there the header itself carries the blur, cut to the
   capsule (its drop shadow is lost to the cut, so the rim's lower edge does that job). */
@supports (-webkit-backdrop-filter: blur(1px)) {
  .site-header::before { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-header.is-scrolled {
    -webkit-backdrop-filter: blur(9px) saturate(185%) brightness(var(--lg-bright)); backdrop-filter: blur(9px) saturate(185%) brightness(var(--lg-bright));
    clip-path: inset(var(--cap-y) var(--cap-x) round var(--radius-pill));
  }
}
/* Nav: a glass droplet slides between the links on hover (main.js adds it and moves it). */
.nav { position: relative; }
.nav__drop {
  position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; border-radius: var(--radius-pill);
  background: var(--lg-drop-fill);
  box-shadow: inset 0 1px 1px var(--lg-hi), inset 0 -1px 1px var(--lg-lo), inset 0 0 0 .5px var(--lg-rim), 0 4px 12px -6px var(--lg-drop-2);
  opacity: 0; transition: opacity .25s ease, left .5s cubic-bezier(.34, 1.4, .64, 1), width .5s cubic-bezier(.34, 1.4, .64, 1);
}
.nav__drop.is-on { opacity: 1; }
/* The droplet stands in for the hover fill, except on the current page's link, which keeps its own inverted pill
   (clearing its fill would leave its inverted text unreadable on the glass). */
.has-drop .nav .menu a:hover:not([aria-current="page"]) { background: transparent; }
.nav .menu { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .site-header::before, .site-header::after { scale: 1; transition: opacity .2s ease; }
}
@media (prefers-reduced-transparency: reduce) {
  .site-header::before, html.liquid .site-header::before { background: var(--header-glass); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
}
.site-header__inner { height: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; }
/* Small screens: the nav is hidden, so the actions take the last column themselves (no empty column after them), and
   the logo and burger sit the same 1rem in from the capsule's ends (the capsule is .5rem from the screen edge there). */
.site-header__actions { grid-column: -2; }
@media (max-width: 55.99em) { .site-header__inner, .menu-overlay__top { padding-inline: max(0px, calc(1.5rem - var(--gutter))); } }
.wordmark { display: inline-flex; align-items: center; text-decoration: none; }
.wordmark img { width: 8.25rem; height: auto; }
/* Header logo: same size as the original zenotia.com header (192px wide on desktop, ~167px on phones). */
.site-header .wordmark img, .menu-overlay__top .wordmark img { width: 10.5rem; }
@media (min-width: 48em) { .site-header .wordmark img, .menu-overlay__top .wordmark img { width: 12rem; } }
/* Light mode: grey-to-black wordmark; dark mode and dark panels (footer, menu overlay): the colour gradient. */
/* Light mode on always-dark surfaces (footer, menu overlay): the white-to-grey version. */
.wordmark__img--dark, .wordmark__img--ondark { display: none; }
:is(.is-dark, .menu-overlay) .wordmark__img--light { display: none; }
:is(.is-dark, .menu-overlay) .wordmark__img--ondark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wordmark__img--light, :root:not([data-theme="light"]) .wordmark__img--ondark { display: none; }
  :root:not([data-theme="light"]) .wordmark__img--dark { display: block; }
}
:root[data-theme="dark"] .wordmark__img--light, :root[data-theme="dark"] .wordmark__img--ondark { display: none; }
:root[data-theme="dark"] .wordmark__img--dark { display: block; }
/* Footer logo: same size as the header's. */
.site-footer .wordmark img { width: 10.5rem; }
@media (min-width: 48em) { .site-footer .wordmark img { width: 12rem; } }
.nav { display: none; justify-self: center; }
.nav .menu { display: flex; gap: .25rem; }
.nav .menu a {
  display: inline-block; padding: .55rem .85rem; border-radius: var(--radius-pill); font-size: .92rem; font-weight: 500; text-decoration: none; color: var(--fg);
  transition: background var(--dur-1), color var(--dur-1);
}
.nav .menu a:hover { background: var(--bg-2); }
.nav .menu a[aria-current="page"] { background: var(--fg); color: var(--bg); }
.site-header__actions { display: flex; align-items: center; gap: .5rem; justify-self: end; }
.site-header__cta { display: none; }
.theme-toggle {
  position: relative; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--fg);
  transition: background var(--dur-1), border-color var(--dur-1), transform var(--dur-hover) var(--ease-hover);
}
.theme-toggle:hover { border-color: var(--fg); transform: rotate(-15deg); }
.theme-toggle .icon { grid-area: 1 / 1; width: 1.15rem; height: 1.15rem; transition: opacity .3s, transform .5s var(--ease-out); }
.theme-toggle__sun { opacity: var(--sun-o); transform: rotate(var(--sun-r)) scale(var(--sun-s)); }
.theme-toggle__moon { opacity: var(--moon-o); transform: rotate(var(--moon-r)) scale(var(--moon-s)); }
.menu-overlay__theme { display: inline-flex; align-items: center; gap: .6rem; color: var(--paper); font-size: var(--fs--1); font-weight: 500; }
.menu-overlay__theme .theme-toggle { width: 2.25rem; height: 2.25rem; background: rgb(255 255 255 / .06); border-color: rgb(255 255 255 / .28); color: var(--paper); }
/* Circular reveal when switching theme (View Transitions; plain swap elsewhere). */
html.theme-switching::view-transition-old(root),
html.theme-switching::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.theme-switching::view-transition-new(root) { z-index: 2; }
.burger { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--line); position: relative; z-index: 70; background: var(--bg); }
.burger__lines { position: relative; width: 1.1rem; height: 10px; }
.burger__lines::before, .burger__lines::after { content: ""; position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; transition: transform var(--dur-hover) var(--ease-hover), top var(--dur-2) var(--ease-out); }
.burger__lines::before { top: 0; }
.burger__lines::after { top: 8.5px; }
.burger[aria-expanded="true"] .burger__lines::before { top: 4.25px; transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger__lines::after { top: 4.25px; transform: rotate(-45deg); }
@media (min-width: 56em) {
  .nav { display: block; }
  .site-header__cta { display: inline-flex; }
  .burger { display: none; }
}

/* WordPress admin bar (logged-in users only). It is fixed at the top: 32px, 46px at 782px and below. At 600px and
   below WordPress lets it scroll away, so the header then sticks to the very top again. Everything that sticks under
   the header adds --admin-h; full-height blocks take off --admin-space. */
:root:has(> body.admin-bar) { --admin-h: 32px; --admin-space: 32px; }
@media screen and (max-width: 782px) { :root:has(> body.admin-bar) { --admin-h: 46px; --admin-space: 46px; } }
@media screen and (max-width: 600px) { :root:has(> body.admin-bar) { --admin-h: 0px; } }
/* Mobile menu: the floating panel. The header's glass capsule drops down into a frosted dark panel that stops 8px
   above the foot of the screen; its top edge never moves. main.js measures the capsule and sets --mg-* on the
   .menu-glass element, which is the moving glass (a fixed element, so Safari can blur the page through it too). While
   it is out, the header's own capsule is hidden (html.mg-on): the two are identical at rest, so the hand-over at either
   end cannot be seen. The links (.menu-overlay) sit on the panel, below the header row; the burger turns into the X. */
.menu-glass {
  --mg-ease-out: cubic-bezier(.2, .9, .25, 1);
  position: fixed; z-index: 59; pointer-events: none;
  top: var(--mg-top, 11px); left: var(--mg-l, 8px); right: var(--mg-r, 8px); height: var(--mg-h0, 76px);
  border-radius: calc(var(--mg-h0, 76px) / 2);
  background: linear-gradient(180deg, var(--lg-tint-top), var(--lg-tint-bottom));
  backdrop-filter: blur(9px) saturate(185%) brightness(var(--lg-bright)); -webkit-backdrop-filter: blur(9px) saturate(185%) brightness(var(--lg-bright));
  box-shadow: inset 0 0 0 100vmax transparent, inset 0 0 0 1px var(--lg-rim), 0 0 0 100vmax rgb(0 0 0 / 0);
  opacity: 0; visibility: hidden;
  transition: opacity var(--mg-fade, .22s) ease, visibility 0s linear var(--mg-fade, .22s);
}
/* Out (open, or closing): when closing, the links fade first, then the panel lifts back into the capsule. */
.menu-glass.is-on {
  opacity: 1; visibility: visible;
  transition: height .44s cubic-bezier(.55, 0, .25, 1) .11s, border-radius .44s cubic-bezier(.55, 0, .25, 1) .11s,
    box-shadow .36s ease .2s, backdrop-filter .4s ease .15s, -webkit-backdrop-filter .4s ease .15s, opacity var(--mg-fade, .15s) ease, visibility 0s;
}
.menu-glass.is-open {
  height: var(--mg-h1, 80vh); border-radius: 30px;
  backdrop-filter: blur(22px) saturate(150%) brightness(.65); -webkit-backdrop-filter: blur(22px) saturate(150%) brightness(.65);
  box-shadow: inset 0 0 0 100vmax var(--menu-shade), inset 0 0 0 1px rgb(255 255 255 / .14), 0 0 0 100vmax rgb(0 0 0 / .4);
  transition: height .64s cubic-bezier(.2, .9, .25, 1), border-radius .5s var(--mg-ease-out), box-shadow .4s ease,
    backdrop-filter .45s ease, -webkit-backdrop-filter .45s ease, opacity var(--mg-fade, .15s) ease, visibility 0s;
  transition: height .64s linear(0, .22 7%, .58 15%, .88 25%, 1.03 35%, 1.045 43%, 1.01 57%, .997 73%, 1), border-radius .5s var(--mg-ease-out), box-shadow .4s ease,
    backdrop-filter .45s ease, -webkit-backdrop-filter .45s ease, opacity var(--mg-fade, .15s) ease, visibility 0s;
}
.menu-glass.from-capsule { --mg-fade: 0s; } /* it takes over from a visible capsule, so it must not fade */
/* While the panel is out, the header's capsule, its rim, the reading-depth tint and its readout are hidden. */
html.mg-on .site-header::before, html.mg-on .site-header::after, html.mg-on .hl, html.mg-on .hl-read { opacity: 0 !important; }
html.mg-on .site-header::before { transition: none; }
html.mg-swap .site-header::before, html.mg-swap .site-header::after { transition: none !important; }
@supports (-webkit-backdrop-filter: blur(1px)) {
  html.mg-on .site-header.is-scrolled { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* The header row over the dark panel: the theme button steps aside (the panel has its own), the burger goes light. */
.site-header .theme-toggle { transition: background var(--dur-1), border-color var(--dur-1), transform var(--dur-hover) var(--ease-hover), opacity .2s ease, scale .2s ease; }
body.menu-open .site-header .theme-toggle { opacity: 0; scale: .7; pointer-events: none; }
.burger { transition: background-color .3s ease, border-color .3s ease, color .3s ease, scale .16s ease; }
body.menu-open .burger { background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .3); color: var(--paper); }
.burger:active { scale: .92; }
.burger__lines::before, .burger__lines::after { transition: transform .26s cubic-bezier(.34, 1.4, .64, 1), top .26s cubic-bezier(.34, 1.4, .64, 1); }
/* Light mode: the header logo switches to the light-on-dark version while the panel is open. */
body.menu-open .site-header .wordmark__img--light, body.menu-open .site-header .wordmark__img--dark { display: none; }
body.menu-open .site-header .wordmark__img--ondark { display: block; }
/* The logo's motion layer draws the page-mode colours, so it stands down while the panel is open. */
body.menu-open .site-header .wordmark__fx { visibility: hidden; }
body.menu-open .site-header .wordmark.is-fx .wordmark__img { visibility: visible; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.menu-open .site-header .wordmark__img--ondark { display: none; }
  :root:not([data-theme="light"]) body.menu-open .site-header .wordmark__img--dark { display: block; }
}
:root[data-theme="dark"] body.menu-open .site-header .wordmark__img--ondark { display: none; }
:root[data-theme="dark"] body.menu-open .site-header .wordmark__img--dark { display: block; }

.menu-overlay {
  position: fixed; z-index: 61; color: var(--paper);
  top: calc(var(--mg-top, 11px) + var(--mg-h0, 76px)); left: var(--mg-l, 8px); right: var(--mg-r, 8px); bottom: 8px;
  display: grid; grid-template-rows: 1fr auto; gap: 1.5rem; padding-block: .75rem 1.75rem;
  overflow-y: auto; overscroll-behavior: contain; /* short screens: the menu scrolls itself, never the page behind */
  visibility: hidden; transition: visibility 0s linear .35s;
}
.menu-overlay.is-open { visibility: visible; transition-delay: 0s; }
/* The header row stays on top while the menu is open (its burger is the close button), so the overlay's own top bar
   is not shown. */
.menu-overlay__top { display: none; }
.menu-overlay .container { width: auto; margin-inline: 0; padding-inline: calc(max(var(--gutter), 1.5rem) - var(--mg-l, 8px)); }
.menu-overlay__close { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid rgb(255 255 255 / .28); color: var(--paper); background: rgb(255 255 255 / .06); }
.menu-overlay__links { align-self: start; }
.menu-overlay__links .menu { display: grid; gap: .25rem; }
.menu-overlay__links .menu a {
  display: block; width: max-content; max-width: 100%; font-family: var(--font-display); font-size: var(--fs-4); font-weight: 600; letter-spacing: -.03em; text-decoration: none; padding: .25rem 0;
  opacity: 0; translate: 0 10px; scale: .97; transform-origin: 0 50%;
  /* Closing: quick, bottom link first. */
  transition: opacity .15s ease calc(var(--ri, 0) * 18ms), translate .18s ease-in calc(var(--ri, 0) * 18ms), scale .18s ease-in calc(var(--ri, 0) * 18ms), color var(--dur-1);
}
.menu-overlay__links .menu a:hover, .menu-overlay__links .menu a[aria-current="page"] { color: var(--sun); }
.menu-overlay.is-open .menu a {
  opacity: 1; translate: 0 0; scale: 1;
  transition: opacity .32s ease calc(.23s + var(--i, 0) * 45ms), translate .52s var(--ease-out) calc(.23s + var(--i, 0) * 45ms), scale .52s var(--ease-out) calc(.23s + var(--i, 0) * 45ms), color var(--dur-1);
}
.menu-overlay__links .menu li:nth-child(1) a { --i: 0; --ri: 7; }
.menu-overlay__links .menu li:nth-child(2) a { --i: 1; --ri: 6; }
.menu-overlay__links .menu li:nth-child(3) a { --i: 2; --ri: 5; }
.menu-overlay__links .menu li:nth-child(4) a { --i: 3; --ri: 4; }
.menu-overlay__links .menu li:nth-child(5) a { --i: 4; --ri: 3; }
.menu-overlay__links .menu li:nth-child(6) a { --i: 5; --ri: 2; }
.menu-overlay__links .menu li:nth-child(7) a { --i: 6; --ri: 1; }
.menu-overlay__links .menu li:nth-child(8) a { --i: 7; --ri: 0; }
.menu-overlay__foot { display: grid; gap: 1rem; color: rgb(244 243 238 / .62); font-size: var(--fs--1); opacity: 0; translate: 0 8px; transition: opacity .15s ease, translate .18s ease-in; }
.menu-overlay.is-open .menu-overlay__foot { opacity: 1; translate: 0 0; transition: opacity .38s ease .52s, translate .48s var(--ease-out) .52s; }
.menu-overlay__foot a { color: var(--paper); text-decoration: none; }
@media (prefers-reduced-motion: reduce) {
  .menu-glass, .menu-glass.is-on, .menu-glass.is-open { transition-duration: .01s !important; transition-delay: 0s !important; }
  .menu-overlay__links .menu a, .menu-overlay.is-open .menu a, .menu-overlay__foot, .menu-overlay.is-open .menu-overlay__foot { translate: none; scale: none; transition: opacity .15s ease; }
}

.scroll-progress { position: fixed; left: 0; top: var(--admin-h); height: 2px; width: 100%; z-index: 61; transform-origin: 0 50%; transform: scaleX(0); background: var(--g-brand); pointer-events: none; }

/* Footer --------------------------------------------------------------- */
.site-footer { background: var(--footer-bg); border-top: 1px solid var(--band-edge); color: var(--paper); padding-top: var(--section); overflow: clip; }
.site-footer__top { display: grid; gap: 3rem; padding-bottom: 3rem; border-bottom: 1px solid rgb(255 255 255 / .12); }
.site-footer__brand { display: grid; gap: 1.25rem; align-content: start; }
.site-footer__brand .lede { color: #a6a6ae; max-width: 32ch; }
.site-footer__cols { display: grid; gap: 2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-footer h2 { font-family: var(--font-body); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: #a6a6ae; font-weight: 600; margin-bottom: 1rem; }
.site-footer .menu { display: grid; gap: .5rem; }
.site-footer .menu a, .site-footer address a { text-decoration: none; color: var(--paper); opacity: .85; transition: opacity var(--dur-1), color var(--dur-1); }
.site-footer .menu a:hover, .site-footer address a:hover { opacity: 1; color: var(--sun); }
.site-footer address { font-style: normal; display: grid; gap: .5rem; color: #d6d6dc; }
.site-footer__social { display: flex; gap: .5rem; margin-top: 1rem; }
.site-footer__social a { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid rgb(255 255 255 / .18); color: var(--paper); transition: background var(--dur-1), color var(--dur-1), border-color var(--dur-1); }
.site-footer__social a:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.site-footer__big { overflow: clip; font-family: var(--font-display); /* clip, not hidden: hidden would make this a scroll container and capture the view() timeline */ font-size: var(--fs-6); font-weight: 700; letter-spacing: -.05em; line-height: .85; padding-block: 2.5rem 0; user-select: none; }
.site-footer__big span { background: var(--g-brand); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; padding-right: .05em; }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-block: 1.5rem 2rem; font-size: var(--fs--1); color: #a6a6ae; }
.site-footer__bottom .menu { display: flex; gap: 1.25rem; }
.site-footer__legal { display: grid; gap: .35rem; max-width: 46rem; }
.site-footer__company { font-size: .78rem; line-height: 1.5; color: #a6a6ae; }
.site-footer__company a { color: #d6d6dc; text-decoration: underline; text-decoration-color: rgb(255 255 255 / .3); text-underline-offset: .2em; transition: color var(--dur-1) ease, text-decoration-color var(--dur-1) ease; }
.site-footer__company a:hover { color: var(--sun); text-decoration-color: var(--sun); }
@media (min-width: 60em) {
  .site-footer__top { grid-template-columns: 1.2fr 2fr; }
  .site-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Hero (home) ------------------------------------------------------------ */
.hero { position: relative; padding-block: clamp(3rem, 8vw, 6rem) clamp(3rem, 6vw, 5rem); overflow: clip; }
.hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__glow { opacity: var(--glow-o); position: absolute; width: 60vw; max-width: 56rem; aspect-ratio: 1; right: -15vw; top: -20vw; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--sun) 45%, transparent), color-mix(in srgb, var(--amber) 20%, transparent) 50%, transparent 75%); filter: blur(30px); }
.hero__glow--2 { left: -20vw; top: 40%; right: auto; width: 40vw; background: radial-gradient(closest-side, color-mix(in srgb, var(--coral) 25%, transparent), transparent 70%); }
.hero__grid { position: absolute; inset: 0; opacity: .5; background-image: radial-gradient(var(--dot) 1px, transparent 1px); background-size: 1.5rem 1.5rem; -webkit-mask-image: radial-gradient(ellipse at 70% 20%, #000 20%, transparent 70%); mask-image: radial-gradient(ellipse at 70% 20%, #000 20%, transparent 70%); }
.hero__inner { display: grid; gap: 3rem; align-items: center; }
.hero__copy { display: grid; gap: 1.5rem; max-width: 42rem; }
.hero__title { font-size: clamp(2.75rem, 1rem + 5.2vw, 6rem); letter-spacing: -.032em; line-height: .96; max-width: 12ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero__trust { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; color: var(--fg-2); font-size: var(--fs--1); }
.hero__trust strong { color: var(--fg); font-weight: 600; }
@media (min-width: 64em) {
  .hero { min-height: calc(100svh - var(--header-h) - var(--admin-space)); display: grid; align-items: center; }
}
/* A page's opening hero runs up behind the header (which is clear until the page scrolls), so its glow and dot grid
   reach the top of the screen instead of stopping in a straight line under the header. The content stays put. */
.site-main > :is(.hero, .journal-hero):first-child { margin-top: calc(-1 * var(--header-h)); padding-top: calc(var(--header-h) + clamp(3rem, 8vw, 6rem)); }
.site-main > .journal-hero:first-child { padding-top: calc(var(--header-h) + clamp(3rem, 7vw, 6rem)); }
@media (min-width: 64em) and (max-height: 67.5em) {
  .site-main > .hero:first-child { min-height: calc(100svh - var(--admin-space)); }
}
/* Hero background: a slow drifting glow, and a ripple that lights the dot grid from the card on every scene change. */
@property --hr { syntax: "<length>"; inherits: false; initial-value: 0px; }
.hero__aurora { position: absolute; width: 45vw; max-width: 40rem; aspect-ratio: 1; right: 8%; top: 25%; border-radius: 50%; opacity: var(--glow-o); background: radial-gradient(closest-side, color-mix(in srgb, var(--amber) 18%, transparent), color-mix(in srgb, var(--coral) 8%, transparent) 55%, transparent 75%); filter: blur(40px); }
.hero__ripple { position: absolute; inset: 0; opacity: 0; background-image: radial-gradient(color-mix(in srgb, var(--fg) 40%, transparent) 1.2px, transparent 1.3px); background-size: 1.5rem 1.5rem; --m: radial-gradient(circle at var(--rx, 75%) var(--ry, 45%), transparent calc(var(--hr) - 90px), #000 calc(var(--hr) - 20px), transparent calc(var(--hr) + 20px)); -webkit-mask-image: var(--m); mask-image: var(--m); }
.hero__ripple.is-on { animation: hero-ripple 2.2s var(--ease-out); }
@keyframes hero-ripple { 0% { --hr: 0px; opacity: 0; } 8% { opacity: 1; } 100% { --hr: 1100px; opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .hero__aurora { animation: hero-aurora 16s ease-in-out infinite alternate; }
  .hero__glow--2 { animation: hero-aurora 22s ease-in-out infinite alternate-reverse; }
}
@keyframes hero-aurora { 0% { translate: 0 0; scale: 1; } 50% { translate: -12vw 6vh; scale: 1.15; } 100% { translate: 4vw -8vh; scale: .95; } }
.hero.is-paused .hero__bg * { animation-play-state: paused; }
/* Tall screens (over 1080px high): the hero sizes to its content instead of filling the screen. */
@media (min-width: 64em) and (min-height: 67.5625em) {
  .hero { min-height: 0; }
}
@media (min-width: 64em) {
  .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; }
}

/* Hero visual: the animated selling-point card (sections/hero). White with an ink hairline in light mode, dark in dark mode.
   Scene art: base styles are the finished frame; `.sc:not(.on-N)` is the state before step N (main.js adds on-1…on-N). */
.hero__visual { position: relative; justify-self: center; width: min(100%, 31rem); display: grid; }
@media (min-width: 64em) { .hero__visual { justify-self: end; margin-right: clamp(0rem, 3vw, 2.5rem); } }
.usp-card {
  --u-bg: #ffffff; --u-border: var(--ink); --u-fg: #0b0b0c; --u-fg-2: #616169; --u-panel: #f3f2ed; --u-panel-2: #e9e7e0;
  --u-wire: #e2e1da; --u-wire-2: #cfcec7; --u-wire-3: #a3a29c; --u-ok: #12a150; --u-deep: #ffffff; --u-edge: #dedcd5;
  --u-text-soft: #2e2e33; --u-meta: #7d7d86; --u-sweep: #0b0b0c; --u-dotc: #ffffff; --u-grain: .035;
  --u-spring: cubic-bezier(.34, 1.56, .64, 1);
  position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 1.1rem; padding: clamp(1.15rem, 3vw, 1.5rem);
  border-radius: var(--radius-xl); background: var(--u-bg); border: 1px solid var(--u-border); color: var(--u-fg); box-shadow: var(--shadow-l); min-width: 0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .usp-card {
    --u-bg: var(--band-bg); --u-border: var(--band-edge); --u-fg: #f4f3ef; --u-fg-2: #a6a6ae; --u-panel: #1c1c21; --u-panel-2: #222228;
    --u-wire: #3b3b43; --u-wire-2: #4a4a52; --u-wire-3: #5c5c66; --u-ok: #3ecf6e; --u-deep: #151518; --u-edge: #2e2e35;
    --u-text-soft: #e7e6e1; --u-meta: #7d7d86; --u-sweep: #ffffff; --u-dotc: #fdc70c; --u-grain: .07;
  }
}
:root[data-theme="dark"] .usp-card {
  --u-bg: var(--band-bg); --u-border: var(--band-edge); --u-fg: #f4f3ef; --u-fg-2: #a6a6ae; --u-panel: #1c1c21; --u-panel-2: #222228;
  --u-wire: #3b3b43; --u-wire-2: #4a4a52; --u-wire-3: #5c5c66; --u-ok: #3ecf6e; --u-deep: #151518; --u-edge: #2e2e35;
  --u-text-soft: #e7e6e1; --u-meta: #7d7d86; --u-sweep: #ffffff; --u-dotc: #fdc70c; --u-grain: .07;
}
.usp-card::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: var(--u-grain); pointer-events: none; mix-blend-mode: overlay; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.usp-card::after { content: ""; position: absolute; z-index: -1; width: 60%; aspect-ratio: 1; right: -25%; bottom: -35%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--coral) 30%, transparent), transparent 75%); pointer-events: none; }
.usp-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 2rem; }
.usp-title { font-size: .95rem; font-weight: 600; color: var(--u-fg); }
.usp-pill { padding: .3rem .7rem; border-radius: var(--radius-pill); background: var(--u-panel-2); color: var(--u-fg); font-size: .78rem; font-weight: 600; white-space: nowrap; }
.usp-stack { display: grid; min-width: 0; }
.usp-stack > * { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s; }
.usp-stack > .is-active { opacity: 1; visibility: visible; transition: opacity .45s ease .1s, visibility 0s; }
.usp-stack--end { justify-items: end; }
.usp-stage { transition: opacity .45s ease; }
.usp-stage.is-out { opacity: 0; }
.usp-scene svg { display: block; width: 100%; height: auto; overflow: visible; }
.usp-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: var(--radius-m); overflow: hidden; background: var(--u-panel); }
.usp-facts li { display: grid; gap: .15rem; align-content: start; padding: .8rem .85rem; min-width: 0; }
.usp-facts li + li { border-left: 1px solid var(--u-edge); }
.usp-facts b { font-family: var(--font-display); font-size: clamp(.95rem, .85rem + .35vw, 1.1rem); font-weight: 650; letter-spacing: -.02em; line-height: 1.2; }
.usp-facts span { font-size: .74rem; color: var(--u-fg-2); line-height: 1.35; }
.usp-foot { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; }
.usp-foot[hidden] { display: none; }
.usp-progress { flex: 1; display: grid; gap: .45rem; min-width: 0; }
.usp-progress__label { font-size: .74rem; font-weight: 600; color: var(--u-fg); }
.usp-pause:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.usp-bar { position: relative; display: block; height: 3px; border-radius: 3px; background: var(--u-panel-2); overflow: hidden; }
.usp-bar i { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: var(--g-brand); border-radius: inherit; }
.usp-pause { flex: none; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 1px solid var(--u-edge); background: var(--u-panel); color: var(--u-fg); cursor: pointer; }
.usp-pause:focus-visible { border-radius: 50%; }
.usp-pause svg { width: .85rem; height: .85rem; }
.usp-pause .i-play { display: none; }
.usp-pause[aria-pressed="true"] .i-play { display: block; }
.usp-pause[aria-pressed="true"] .i-pause { display: none; }

.usp-card .sc text { font-family: var(--font-body); }
.usp-card .no-tr, .usp-card .no-tr * { transition: none !important; }
.usp-card .cap { fill: var(--u-fg-2); font-size: 8.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.usp-card .digits { fill: var(--u-fg); font-weight: 700; font-variant-numeric: tabular-nums; }
.usp-card .roll { transform: translateY(var(--to)); transition: transform 1.4s var(--ease-out) .15s; }
.usp-card .roll.slow { transition-duration: 1.7s; }
.sc--build:not(.on-6) .roll, .sc--price:not(.on-5) .roll { transform: none; }
/* 1 · Build */
.b-frame { fill: none; stroke: var(--u-wire-2); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1s var(--ease-out); }
.sc:not(.on-1) .b-frame { stroke-dashoffset: 1; }
.b-chrome { transition: opacity .5s ease; }
.sc:not(.on-2) .b-chrome { opacity: 0; }
.b-chrome path { stroke: var(--u-wire); stroke-width: 1; }
.b-chrome circle { fill: var(--u-wire-2); }
.b-url { fill: var(--u-panel-2); }
.b-wire { opacity: 0; transition: opacity .4s ease; }
.sc.on-3:not(.on-5) .b-wire { opacity: 1; }
.b-wire rect { fill: none; stroke: var(--u-wire-3); stroke-width: 1; stroke-dasharray: 3 3; transform-box: fill-box; transform-origin: center; transition: opacity .45s ease, transform .6s var(--u-spring); transition-delay: calc(var(--i) * 75ms); }
.sc:not(.on-3) .b-wire rect { opacity: 0; transform: scale(.82); }
.b-fill { clip-path: inset(0 0 0 0); transition: clip-path 1.3s cubic-bezier(.65, 0, .35, 1); }
.sc:not(.on-4) .b-fill { clip-path: inset(0 100% 0 0); }
.b-sweep { opacity: 0; transform: translateX(324px); transition: transform 1.3s cubic-bezier(.65, 0, .35, 1), opacity .3s ease; }
.sc:not(.on-4) .b-sweep { transform: translateX(0); }
.sc.on-4:not(.on-5) .b-sweep { opacity: 1; }
.b-score-in { transform-box: fill-box; transform-origin: center; transition: opacity .4s ease, transform .6s var(--u-spring); }
.sc:not(.on-6) .b-score-in { opacity: 0; transform: scale(.55); }
.usp-card .ring-track { fill: none; stroke: var(--u-panel-2); stroke-width: 4; }
.usp-card .ring { fill: none; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s var(--ease-out) .15s; }
.sc:not(.on-6) .ring { stroke-dashoffset: 1; }
/* 2 · Fixed price */
.p-card { transition: transform .75s var(--u-spring), opacity .4s ease; transition-delay: calc(var(--i) * 140ms); }
.sc:not(.on-1) .p-card { opacity: 0; transform: translateY(-26px); }
.usp-card .card-bg { fill: var(--u-panel); stroke: var(--u-edge); }
.p-card .ln { fill: var(--u-wire); }
.p-card .blk { fill: var(--u-panel-2); }
.p-label { fill: var(--u-fg); font-size: 9.5px; font-weight: 600; }
.p-price { fill: var(--u-fg); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; transform-box: fill-box; transform-origin: center; transition: opacity .3s ease, transform .5s var(--u-spring); transition-delay: calc(var(--i) * 140ms); }
.sc:not(.on-2) .p-price { opacity: 0; transform: translateY(7px) scale(.8); }
.p-line { fill: none; stroke: var(--u-wire-2); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .8s var(--ease-out); }
.sc:not(.on-3) .p-line { stroke-dashoffset: 1; }
.p-dot { transform-box: fill-box; transform-origin: center; transition: transform .45s var(--u-spring); transition-delay: calc(250ms + var(--i) * 120ms); }
.sc:not(.on-3) .p-dot { transform: scale(0); }
.p-total { transition: opacity .4s ease, transform .55s var(--ease-out); }
.sc:not(.on-4) .p-total { opacity: 0; transform: translateY(12px); }
.p-glow { fill: none; stroke-width: 1.4; opacity: 1; transition: opacity .7s ease; }
.sc:not(.on-6) .p-glow { opacity: 0; }
.p-shackle { fill: none; stroke: var(--u-fg); stroke-width: 2.4; stroke-linecap: round; transition: transform .35s cubic-bezier(.5, 0, .75, 0); }
.sc:not(.on-6) .p-shackle { transform: translateY(-5px); }
.p-stamp { transform-box: fill-box; transform-origin: center; transition: opacity .25s ease, transform .5s var(--u-spring); }
.sc:not(.on-7) .p-stamp { opacity: 0; transform: scale(1.8); }
.stamp-text { font-size: 10.5px; font-weight: 800; letter-spacing: .16em; }
/* 3 · Care */
.c-orbit { transform-box: view-box; transform-origin: 104px 124px; animation: usp-spin 32s linear infinite; }
.c-node { transform-box: fill-box; transform-origin: center; animation: usp-spin 32s linear infinite reverse; }
@keyframes usp-spin { to { transform: rotate(360deg); } }
.c-node circle { fill: var(--u-deep); stroke-width: 1.3; }
.c-node path, .c-node ellipse { fill: none; stroke: var(--u-fg); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.c-ring { fill: none; stroke: var(--u-edge); stroke-dasharray: 2 5; }
.c-ring-2 { fill: none; stroke: var(--u-panel-2); }
.c-tile { fill: var(--u-panel); stroke: var(--u-edge); }
.c-tile-ln { fill: var(--u-wire); }
.c-dot { fill: var(--u-ok); transition: fill .4s ease; }
.sc:not(.on-1) .c-dot { fill: var(--u-wire-3); }
.sc.on-1:not(.on-4) .c-dot { fill: var(--c-poor); animation: usp-blink 1s ease-in-out infinite; }
@keyframes usp-blink { 50% { opacity: .3; } }
.c-pulse { fill: none; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.sc.on-4 .c-pulse { animation: usp-pulse 1.2s var(--ease-out) both; }
@keyframes usp-pulse { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(2); } }
.c-b1, .c-b2 { transition: opacity .4s ease, transform .55s var(--u-spring); }
.sc:not(.on-1) .c-b1, .sc:not(.on-3) .c-b2 { opacity: 0; transform: translateY(10px); }
.c-bubble { fill: var(--u-panel-2); }
.c-msg { fill: var(--u-text-soft); font-size: 9.5px; font-weight: 500; }
.c-msg-dark { fill: var(--on-g); font-size: 9.5px; font-weight: 500; }
.c-msg-dark.strong { font-weight: 700; }
.c-meta { fill: var(--u-meta); font-size: 7.5px; font-weight: 500; }
.c-typing { opacity: 0; transition: opacity .3s ease; }
.sc.on-2:not(.on-3) .c-typing { opacity: 1; }
.c-typing circle { fill: var(--u-wire-3); animation: usp-bob 1s ease-in-out infinite; animation-delay: calc(var(--i) * .15s); }
@keyframes usp-bob { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-3px); } }
.c-done { transform-box: fill-box; transform-origin: left center; transition: opacity .3s ease, transform .55s var(--u-spring); }
.sc:not(.on-5) .c-done { opacity: 0; transform: scale(.85); }
.c-done-bg { fill: var(--u-deep); stroke-width: 1.2; }
.c-done-text { fill: var(--u-fg); font-size: 10px; font-weight: 700; }
.usp-card.is-paused * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .usp-card * { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .usp-bar { display: none; }
}
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Logo strip */
.logos { padding-block: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.logos__label { text-align: center; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); margin-bottom: 1.25rem; }

/* Intro statement */
.statement { font-family: var(--font-display); font-size: var(--fs-3); font-weight: 500; letter-spacing: -.025em; line-height: 1.2; max-width: 30ch; text-wrap: pretty; }
.statement .grad { font-weight: 600; }
.statement--xl { font-size: var(--fs-4); max-width: 24ch; }

/* Bento services grid */
.bento { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bento__item {
  position: relative; grid-column: span 2; display: grid; gap: 1rem; align-content: start;
  padding: clamp(1.4rem, 3vw, 2.25rem); border-radius: var(--radius-l); background: var(--bg-2);
  min-height: 16rem; overflow: hidden; isolation: isolate;
  transition: transform var(--dur-hover) var(--ease-hover), box-shadow var(--dur-hover) var(--ease-hover);
}
.bento__item:hover { transform: translateY(-3px); box-shadow: var(--shadow-m); }
.bento__item--dark { --fg: var(--paper); background: var(--band-bg); color: var(--paper); border: 1px solid var(--band-edge); }
.bento__item--dark .bento__text { color: #a6a6ae; }
.bento__item--brand { --fg: var(--on-g); --fg-2: color-mix(in srgb, var(--on-g) 78%, transparent); background: var(--g-brand); color: var(--on-g); }
.bento__item--brand .bento__text { color: color-mix(in srgb, var(--on-g) 78%, transparent); }
.bento__item--brand .icon-disc { background: var(--ink); color: var(--paper); }
.bento__num { position: absolute; right: 1.5rem; top: 1.5rem; font-family: var(--font-display); font-size: .9rem; font-weight: 500; color: var(--fg-2); }
.bento__item--dark .bento__num { color: #a6a6ae; }
.bento__item--brand .bento__num { color: color-mix(in srgb, var(--on-g) 72%, transparent); }
.bento__title { font-size: var(--fs-2); letter-spacing: -.02em; }
.bento__title a { text-decoration: none; }
.bento__title a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.bento__text { color: var(--fg-2); max-width: 36ch; }
.bento__more { margin-top: auto; display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .9rem; }
.bento__more .icon { transition: transform var(--dur-hover) var(--ease-hover); }
.bento__item:hover .bento__more .icon { transform: translateX(4px); }
.bento__art { display: none; position: absolute; right: -8%; bottom: -12%; width: 55%; aspect-ratio: 1; pointer-events: none; z-index: -1; opacity: .9; }
@media (min-width: 48em) { .bento__art { display: block; } }
.art-windows span { position: absolute; border-radius: .9rem; background: rgb(255 255 255 / .9); box-shadow: var(--shadow-m); border: 1px solid var(--line); }
.art-windows span:nth-child(1) { inset: 10% 20% 30% 0; background: var(--paper); }
.art-windows span:nth-child(2) { inset: 28% 0 12% 22%; background: linear-gradient(135deg, var(--paper), var(--paper-3)); }
.art-windows span:nth-child(3) { inset: 46% 32% 0 10%; background: var(--g-brand); border: 0; }
.bento__item--dark .art-windows span { background: var(--ink-3); border-color: rgb(255 255 255 / .12); }
.bento__item--dark .art-windows span:nth-child(3) { background: var(--g-brand); }
.art-rings { display: grid; place-items: center; }
.art-rings span { position: absolute; border-radius: 50%; border: 1.5px solid currentColor; opacity: .25; inset: 0; }
.art-rings span:nth-child(2) { inset: 18%; opacity: .45; }
.art-rings span:nth-child(3) { inset: 36%; opacity: .7; background: var(--g-brand); border: 0; }
@media (min-width: 48em) {
  .bento__item { grid-column: span 1; }
  .bento__item--wide { grid-column: span 2; }
}
@media (min-width: 64em) {
  .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .bento__item { grid-column: span 2; }
  .bento__item--wide { grid-column: span 3; min-height: 20rem; }
}

/* Stats band */
.stats { display: grid; gap: 2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 64em) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stats .stat { padding-top: 1.5rem; border-top: 1px solid var(--line); min-width: 0; }
/* Service outcomes are often words ("Weekly", "Prototype"), so they get a size that fits a quarter column. */
.stats--words .stat__value { font-size: clamp(1.75rem, 1rem + 2.4vw, 3.25rem); letter-spacing: -.03em; overflow-wrap: anywhere; }

/* Process: sticky visual + steps */
.process { display: grid; gap: 3rem; }
.process__sticky { position: sticky; top: calc(var(--admin-h) + var(--header-h) + 1.5rem); display: grid; gap: 1.5rem; align-self: start; }
/* Single column: the steps scroll underneath the sticky heading, so give it the header's frosted glass. */
@media (max-width: 59.99em) {
  .process__sticky {
    z-index: 2; top: calc(var(--admin-h) + var(--header-h) + .5rem);
    margin-inline: -.75rem; padding: 1rem .75rem 1.25rem; gap: 1rem;
    border-radius: var(--radius-l); border: 1px solid var(--line);
    background: var(--header-glass);
    backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%);
  }
  .process__sticky .eyebrow { margin-bottom: 0; }
}
/* Process panel: one website taking shape across the steps (sections/process). White with an ink hairline in light mode,
   dark in dark mode. Scenes are drawn finished; while a scene has .play its pieces run their entrance from hidden. */
.process__screen { position: relative; border-radius: var(--radius-l); overflow: hidden; isolation: isolate; display: none;
  --pa-bg: #ffffff; --pa-border: var(--ink); --pa-fg: #0b0b0c; --pa-fg-2: #616169; --pa-surf: #f3f2ed; --pa-mute: #e2e1da; --pa-mute-2: #c9c8c1; --pa-ok: #12a150;
  background: var(--pa-bg); border: 1px solid var(--pa-border); color: var(--pa-fg); box-shadow: var(--shadow-l); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .process__screen { --pa-bg: var(--band-bg); --pa-border: var(--band-edge); --pa-fg: #f4f3ef; --pa-fg-2: #a6a6ae; --pa-surf: #1f1f24; --pa-mute: #2e2e35; --pa-mute-2: #45454d; --pa-ok: #3ecf6e; }
}
:root[data-theme="dark"] .process__screen { --pa-bg: var(--band-bg); --pa-border: var(--band-edge); --pa-fg: #f4f3ef; --pa-fg-2: #a6a6ae; --pa-surf: #1f1f24; --pa-mute: #2e2e35; --pa-mute-2: #45454d; --pa-ok: #3ecf6e; }
.process__screen::after { content: ""; position: absolute; z-index: -1; width: 70%; aspect-ratio: 1; right: -25%; bottom: -40%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--coral) 22%, transparent), transparent 72%); }
.pa-svg { display: block; width: 100%; height: auto; }
.pa-svg text { font-family: var(--font-body); }
.pa-pane { opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
.pa-pane.is-active { opacity: 1; visibility: visible; transition: opacity .5s ease .1s, visibility 0s; }
.pa-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0 1.4rem 1.2rem; }
.pa-stack { display: grid; }
.pa-stack > * { grid-area: 1 / 1; opacity: 0; transition: opacity .45s ease; }
.pa-stack > .is-active { opacity: 1; }
.pa-stack--end { justify-items: end; text-align: right; }
.pa-foot b { font-family: var(--font-display); font-size: clamp(2rem, 1.4rem + 1.6vw, 2.75rem); font-weight: 800; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; background: var(--g-brand); -webkit-background-clip: text; background-clip: text; color: transparent; padding: .06em .1em .14em; margin: -.06em -.1em -.14em; }
.pa-foot span { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pa-fg-2); }
.pa-frame { fill: var(--pa-bg); stroke: var(--pa-mute-2); }
.pa-rule { stroke: var(--pa-mute); }
.pa-surf { fill: var(--pa-surf); } .pa-mute { fill: var(--pa-mute); } .pa-mute2 { fill: var(--pa-mute-2); } .pa-ong { fill: var(--on-g); } .pa-fill-fg { fill: var(--pa-fg); } .pa-ok { fill: var(--pa-ok); }
.pa-dash { fill: none; stroke: var(--pa-mute-2); stroke-dasharray: 4 4; }
.pa-ink { stroke: var(--pa-fg); }
.pa-node { fill: var(--pa-surf); stroke: var(--pa-mute-2); }
.pa-node-t { fill: var(--pa-fg); font-size: 9px; font-weight: 700; }
.pa-link { fill: none; stroke: var(--pa-mute-2); stroke-width: 1.5; }
.pa-cap { fill: var(--pa-fg-2); font-size: 8px; font-weight: 700; letter-spacing: 1px; }
.pa-note { fill: var(--pa-fg-2); font-size: 9px; font-weight: 600; }
.pa-stamp-t { font-size: 10.5px; font-weight: 800; letter-spacing: 2px; }
.pa-aa { fill: var(--pa-fg); font-size: 22px; font-weight: 800; letter-spacing: -1px; }
.pa-code { font-family: var(--font-mono); font-size: 8.5px; }
.pa-fg { fill: var(--pa-fg); } .pa-fg2 { fill: var(--pa-fg-2); }
.pa-wk { fill: var(--on-g); font-size: 7.5px; font-weight: 800; }
.pa-url { fill: var(--pa-fg); font-size: 9.5px; font-weight: 700; }
.pa-live-t { fill: #fff; font-size: 9.5px; font-weight: 800; }
.pa-ring-track { fill: none; stroke: var(--pa-mute); stroke-width: 7; }
.pa-ring { fill: none; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: .1; }
.pa-ring-v { fill: var(--pa-fg); font-size: 18px; font-weight: 800; }
.pa-ring-l { fill: var(--pa-fg-2); font-size: 7.5px; font-weight: 700; letter-spacing: .8px; }
.pa-draw { stroke-dasharray: 1; stroke-dashoffset: 0; }
.pa-lens { opacity: 0; }
.pa-pop, .pa-rise, .pa-drop, .pa-stamp, .pa-live { transform-box: fill-box; }
@media (prefers-reduced-motion: no-preference) {
  .pa-play .pa-pop { animation: pa-pop .55s var(--spring, cubic-bezier(.34, 1.56, .64, 1)) both; animation-delay: var(--d, 0s); transform-origin: center; }
  .pa-play .pa-draw { animation: pa-draw .7s var(--ease-out) both; animation-delay: var(--d, 0s); }
  .pa-play .pa-rise { animation: pa-rise .6s var(--ease-out) both; animation-delay: var(--d, 0s); }
  .pa-play .pa-wipe { animation: pa-wipe 1.1s var(--ease-in-out) both; animation-delay: var(--d, 0s); }
  .pa-play .pa-type { animation: pa-type 1.2s steps(14) both; animation-delay: var(--d, 0s); }
  .pa-play .pa-drop { animation: pa-drop .7s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: var(--d, 0s); }
  .pa-play .pa-stamp { animation: pa-stamp .5s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: var(--d, 0s); transform-origin: center; }
  .pa-play .pa-ring { animation: pa-ring 1.6s var(--ease-out) both; animation-delay: var(--d, 0s); }
  .pa-play .pa-lens { animation: pa-lens 2.6s var(--ease-out) .9s both; }
  .pa-caret { animation: pa-blink 1s steps(1) infinite; }
  .pa-live { transform-origin: center; animation: pa-live-pulse 1.6s ease-out infinite; }
  .process__screen.is-paused * { animation-play-state: paused !important; }
}
.pa-stamp { transform: rotate(-8deg); }
@keyframes pa-pop { from { opacity: 0; transform: scale(.6); } }
@keyframes pa-draw { from { stroke-dashoffset: 1; } }
@keyframes pa-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes pa-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes pa-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes pa-drop { from { opacity: 0; transform: translateY(-26px); } }
@keyframes pa-stamp { from { opacity: 0; transform: scale(1.8) rotate(-12deg); } to { opacity: 1; transform: rotate(-8deg); } }
@keyframes pa-ring { from { stroke-dashoffset: 1; } }
@keyframes pa-lens { 0% { opacity: 0; transform: translate(-60px, 10px); } 15% { opacity: 1; } 50% { transform: translate(40px, 50px); } 85% { opacity: 1; transform: translate(130px, 10px); } 100% { opacity: 0; transform: translate(150px, 0); } }
@keyframes pa-blink { 50% { opacity: 0; } }
@keyframes pa-live-pulse { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(3); } }
/* Process: expanding step cards (sections/process). The open card is wide (art, text, tags); the others show their
   number, a vertical title and the timing. The title is one element that rotates upright and glides to its place
   (measured from .ex-ph) as its card widens. Phones stack the cards; the open one slides open (0fr → 1fr). */
.ex {
  --pa-bg: #ffffff; --pa-border: var(--ink); --pa-fg: #0b0b0c; --pa-fg-2: #616169; --pa-surf: #f3f2ed; --pa-mute: #e2e1da; --pa-mute-2: #c9c8c1; --pa-ok: #12a150;
  list-style: none; margin: 0; padding: 0; display: flex; gap: .75rem; min-height: 35rem; counter-reset: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ex { --pa-bg: var(--band-bg); --pa-border: var(--band-edge); --pa-fg: #f4f3ef; --pa-fg-2: #a6a6ae; --pa-surf: #1f1f24; --pa-mute: #2e2e35; --pa-mute-2: #45454d; --pa-ok: #3ecf6e; }
}
:root[data-theme="dark"] .ex { --pa-bg: var(--band-bg); --pa-border: var(--band-edge); --pa-fg: #f4f3ef; --pa-fg-2: #a6a6ae; --pa-surf: #1f1f24; --pa-mute: #2e2e35; --pa-mute-2: #45454d; --pa-ok: #3ecf6e; }
.ex-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.ex-card { position: relative; overflow: hidden; isolation: isolate; flex: 1 1 0; min-width: 0; border-radius: var(--radius-l); border: 1px solid var(--pa-border); background: var(--pa-bg); color: var(--pa-fg); cursor: pointer; transition: flex-grow .8s var(--ease-out), border-color .4s ease, box-shadow .5s var(--ease-out); }
.ex-card.is-active { flex-grow: 3.4; cursor: default; box-shadow: var(--shadow-l); }
@media (hover: hover) { .ex-card:not(.is-active):hover { border-color: var(--pa-fg); } }
.ex-card::after { content: ""; position: absolute; z-index: -1; width: 90%; aspect-ratio: 1; right: -35%; bottom: -35%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--coral) 18%, transparent), transparent 72%); opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.ex-card.is-active::after { opacity: 1; }
.ex-closed { position: absolute; inset: 0; padding: 1.4rem; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; transition: opacity .45s ease; }
.ex-closed b { font-family: var(--font-display); font-size: 2.4rem; font-weight: 800; letter-spacing: -.05em; line-height: 1; color: var(--pa-fg-2); }
.ex-closed small, .ex-head small { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pa-fg-2); }
.ex-card.is-active .ex-closed { opacity: 0; }
.ex-title { position: absolute; z-index: 2; margin: 0; left: calc(50% - .78rem); top: calc(100% - 3.6rem); transform-origin: 0 0; transform: rotate(-90deg) scale(.8); font-family: var(--font-display); font-size: 1.6rem; line-height: 1.2; font-weight: 700; letter-spacing: -.025em; white-space: nowrap; transition: left .8s var(--ease-out), top .8s var(--ease-out), transform .8s var(--ease-out); }
.ex-card.is-active .ex-title { left: var(--ox, 1.4rem); top: var(--oy, 18rem); transform: none; }
.ex-btn { all: unset; cursor: pointer; }
.ex-btn::after { content: ""; position: absolute; inset: -100vmax; } /* the whole card is the click target… */
.ex-card.is-active .ex-btn::after { content: none; }                  /* …until it's open, so its text can be selected */
.ex-btn:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; border-radius: .25rem; }
.ex-card:has(.ex-btn:focus-visible) { border-color: var(--pa-fg); }
.ex-open { position: absolute; inset: 0 auto 0 0; width: max(31rem, 100%); padding: 1.4rem; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s; }
.ex-card.is-active .ex-open { opacity: 1; visibility: visible; transition: opacity .5s ease .3s, visibility 0s; }
.ex-inner { display: grid; gap: 1rem; align-content: start; }
.ex-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.ex-head b { font-family: var(--font-display); font-size: 2.6rem; font-weight: 800; letter-spacing: -.05em; line-height: 1; background: var(--g-brand); -webkit-background-clip: text; background-clip: text; color: transparent; padding: .06em .1em .14em; margin: -.06em -.1em -.14em; }
.ex-art { border-radius: var(--radius-m); overflow: hidden; background: var(--pa-surf); }
.ex-art svg { display: block; height: clamp(11rem, 18vw, 16rem); width: auto; max-width: 100%; margin-inline: auto; }
.ex-ph { margin: 0; font-family: var(--font-display); font-size: 1.6rem; line-height: 1.2; font-weight: 700; visibility: hidden; }
.ex-text { margin: 0; color: var(--pa-fg-2); max-width: 46ch; }
.ex-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.ex-tags .pill { background: var(--pa-surf); color: var(--pa-fg); }
.ex-bar { position: absolute; left: 1.4rem; right: 1.4rem; bottom: 1rem; height: 2px; border-radius: 2px; background: var(--pa-mute); overflow: hidden; opacity: 0; transition: opacity .4s ease; }
.ex-card.is-active .ex-bar { opacity: 1; }
.ex-bar i { position: absolute; inset: 0; background: var(--g-brand); transform-origin: left; transform: scaleX(var(--p, 0)); }
.ex-foot { display: flex; align-items: center; gap: .75rem; margin-top: 1.25rem; color: var(--fg-2); font-size: var(--fs--1); }
.ex-foot[hidden] { display: none; }
.ex-pause { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); color: var(--fg); cursor: pointer; flex: none; }
.ex-pause svg { width: .85rem; height: .85rem; } .ex-pause .i-play { display: none; } .ex-pause[aria-pressed="true"] .i-play { display: block; } .ex-pause[aria-pressed="true"] .i-pause { display: none; }
.ex-pause:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
/* Pausing stops the auto-advance (in JS) and the art's endless loops; a card's one-off entrance always finishes. */
.ex.is-paused :is(.pa-caret, .pa-live), .ex.is-idle :is(.pa-caret, .pa-live) { animation-play-state: paused; }
/* Phones/tablets — and without JavaScript — the cards stack. */
@media (max-width: 63.99em) {
  .ex { flex-direction: column; min-height: 0; gap: .6rem; }
  .ex-card { flex: none; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "num title weeks" "open open open"; align-items: center; column-gap: 1rem; padding: 1.1rem 1.2rem 1.4rem; }
  .ex-closed { display: contents; }
  .ex-closed b { grid-area: num; font-size: 1.7rem; }
  .ex-card.is-active .ex-closed b { background: var(--g-brand); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
  .ex-closed small { grid-area: weeks; }
  .ex-card.is-active .ex-closed { opacity: 1; }
  .ex-title, .ex-card.is-active .ex-title { position: static; grid-area: title; transform: none; font-size: 1.25rem; white-space: normal; }
  .ex-open { position: static; grid-area: open; width: auto; padding: 0; visibility: visible; opacity: 0; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease-out), opacity .4s ease; }
  .ex-card.is-active .ex-open { grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows .6s var(--ease-out), opacity .5s ease .15s; }
  .ex-card:not(.is-active) .ex-open { visibility: hidden; transition: grid-template-rows .6s var(--ease-out), opacity .4s ease, visibility 0s linear .6s; }
  .ex-inner { min-height: 0; overflow: hidden; }
  .ex-head, .ex-ph { display: none; }
  .ex-art { margin-top: 1rem; }
  .ex-art svg { height: auto; width: 100%; }
  .ex-bar { left: 1.2rem; right: 1.2rem; bottom: .6rem; }
}
:root:not(.js) .ex { flex-direction: column; min-height: 0; }
:root:not(.js) .ex-card { flex: none; padding: 1.4rem; cursor: default; }
:root:not(.js) .ex-closed { display: none; }
:root:not(.js) .ex-title { position: static; transform: none; }
:root:not(.js) .ex-open { position: static; width: auto; padding: 0; opacity: 1; visibility: visible; display: block; }
:root:not(.js) .ex-ph, :root:not(.js) .ex-bar, :root:not(.js) .ex-btn::after { display: none; }
@media (prefers-reduced-motion: reduce) {
  .ex-card, .ex-title, .ex-open, .ex-closed { transition-duration: .01ms !important; transition-delay: 0s !important; }
}

.steps { display: grid; gap: 0; counter-reset: step; }
.step { display: grid; grid-template-columns: 3.5rem 1fr; gap: 1rem; padding-block: 2rem; border-top: 1px solid var(--line); align-items: start; }
.step:last-child { border-bottom: 1px solid var(--line); }
.step__num { font-family: var(--font-display); font-size: var(--fs-1); font-weight: 600; color: var(--fg-2); padding-top: .2rem; }
.step__title { font-size: var(--fs-2); letter-spacing: -.02em; margin-bottom: .5rem; }
.step__text { color: var(--fg-2); max-width: 46ch; }
.step__meta { margin-top: 1rem; display: flex; gap: .4rem; flex-wrap: wrap; }
.step.is-active .step__num { color: var(--accent-fg); }
@media (min-width: 60em) {
  .process { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(3rem, 6vw, 6rem); align-items: start; }
  .process__screen { display: block; }
  .step { padding-block: 2.5rem; }
}

/* Why us — feature grid on dark */
.features { display: grid; gap: 1rem; }
@media (min-width: 48em) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.feature { position: relative; display: grid; gap: 1rem; padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--radius-l); background: rgb(255 255 255 / .04); border: 1px solid rgb(255 255 255 / .1); transition: border-color var(--dur-2), background var(--dur-2); }
.feature:hover { border-color: rgb(255 255 255 / .25); background: rgb(255 255 255 / .06); }
.feature__title { font-size: var(--fs-2); letter-spacing: -.02em; }
.feature__text { color: #a6a6ae; }
.feature__num { position: absolute; right: 1.5rem; top: 1.5rem; font-family: var(--font-display); color: #a6a6ae; font-size: .9rem; }

/* Speed showcase */
.rating { display: grid; gap: 2rem; align-items: center; }
.rating__num { font-family: var(--font-display); font-size: var(--fs-6); font-weight: 700; letter-spacing: -.05em; line-height: .9; background: var(--g-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rating__bars { display: grid; gap: .9rem; }
.rating__bar { display: grid; grid-template-columns: 8.5rem 1fr 3rem; gap: 1rem; align-items: center; font-size: .9rem; }
.rating__bar b { font-weight: 500; }
.rating__track { height: .6rem; border-radius: var(--radius-pill); background: rgb(255 255 255 / .1); overflow: hidden; }
.rating__fill { height: 100%; width: 0; border-radius: inherit; background: var(--g-brand); transition: width 1.4s var(--ease-out); }
.is-in .rating__fill { width: var(--w); }
.rating__val { font-variant-numeric: tabular-nums; text-align: right; color: #a6a6ae; }
@media (min-width: 60em) { .rating { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 4rem; } }

/* CTA band */
.cta { --fg: var(--paper); --fg-2: #c9c9d0; --line: rgb(255 255 255 / .14); position: relative; overflow: hidden; border-radius: var(--radius-xl); background: var(--band-bg); border: 1px solid var(--band-edge); color: var(--paper); padding: clamp(3rem, 7vw, 6rem) clamp(1.5rem, 5vw, 5rem); isolation: isolate; text-align: center; display: grid; gap: 1.75rem; justify-items: center; }
.cta::before, .cta::after { content: ""; position: absolute; z-index: 0; border-radius: 50%; filter: blur(50px); pointer-events: none; will-change: translate, scale; }
/* The copy sits on its own layer above the glows, so a glow can never be painted over it. */
.cta > * { position: relative; z-index: 1; }
.cta::before { width: 50%; aspect-ratio: 1; left: -10%; top: -30%; background: color-mix(in srgb, var(--amber) 45%, transparent); }
.cta::after { width: 45%; aspect-ratio: 1; right: -10%; bottom: -40%; background: color-mix(in srgb, var(--coral) 50%, transparent); }
/* The two glows drift around the card on long, offset loops. Only translate and scale animate, so the browser
   moves the blurred glows on the GPU instead of repainting them every frame. */
.cta::before { animation: cta-drift-a 19s ease-in-out infinite alternate; }
.cta::after { animation: cta-drift-b 23s ease-in-out infinite alternate; }
@keyframes cta-drift-a {
  0%   { translate: 0 0; scale: 1; }
  30%  { translate: 38% 22%; scale: 1.15 1.05; }
  65%  { translate: 70% 55%; scale: .9 1; }
  100% { translate: 18% 85%; scale: 1.1; }
}
@keyframes cta-drift-b {
  0%   { translate: 0 0; scale: 1; }
  35%  { translate: -45% -30%; scale: 1.2 1.08; }
  70%  { translate: -90% -55%; scale: .95 1.05; }
  100% { translate: -30% -95%; scale: 1.1; }
}
@media (prefers-reduced-motion: reduce) { .cta::before, .cta::after { animation: none; } }
.cta__title { font-size: var(--fs-5); letter-spacing: -.032em; max-width: 16ch; }
.cta__text { color: #c9c9d0; max-width: 46ch; font-size: var(--fs-1); }
.cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.cta__mail { color: #c9c9d0; font-size: var(--fs--1); }
.cta__mail a { color: var(--paper); text-decoration: none; border-bottom: 1px solid rgb(255 255 255 / .3); }
.cta__mail a:hover { border-color: var(--sun); color: var(--sun); }

/* Page hero (inner pages) */
.page-hero { padding-block: clamp(3rem, 7vw, 6rem) clamp(2rem, 5vw, 4rem); display: grid; gap: 1.25rem; }
.page-hero .crumbs { margin-bottom: .5rem; }
.page-hero__title { font-size: var(--fs-5); letter-spacing: -.032em; line-height: .96; max-width: 14ch; }
.page-hero__title--wide { max-width: 22ch; }
.page-hero .lede { max-width: 56ch; }
.page-hero--center { text-align: center; justify-items: center; }
.page-hero--center .page-hero__title { max-width: 18ch; margin-inline: auto; }
.page-hero--center .lede { max-width: 50ch; margin-inline: auto; text-wrap: balance; }
.page-hero--center .crumbs ol { justify-content: center; }

/* Work archive */
.work-grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 3vw, 2rem); }
@media (min-width: 48em) { .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.work-grid > .is-hidden { display: none; }

/* Project single */
.project-hero { display: grid; gap: 2rem; padding-block: clamp(3rem, 7vw, 6rem) 0; }
.project-hero__meta { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); font-size: var(--fs--1); }
.project-hero__meta dt { color: var(--fg-2); margin-bottom: .25rem; }
.project-hero__meta dd { font-weight: 500; }
.project-hero__meta a { text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; }
.project-hero__meta a:hover { color: var(--accent-fg); }
@media (min-width: 60em) {
  .project-hero { grid-template-columns: 1.4fr 1fr; align-items: end; }
  .project-hero__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.project-cover { margin-block: clamp(2rem, 5vw, 4rem); }
.project-body { display: grid; gap: 3rem; }
.project-body__side { display: grid; gap: 2rem; align-content: start; }
.project-body__side .results { display: grid; gap: 1.25rem; }
.project-body__side .stat { padding: 1.25rem 0; border-top: 1px solid var(--line); }
.project-body__side .stat__value { font-size: var(--fs-4); }
@media (min-width: 60em) {
  .project-body { grid-template-columns: minmax(0, 1fr) 18rem; gap: 5rem; }
  .project-body__side { position: sticky; top: calc(var(--admin-h) + var(--header-h) + 1.5rem); }
}
.project-section { display: grid; gap: 1rem; }
.project-section + .project-section { margin-top: 3rem; }
.project-section h2 { font-size: var(--fs-3); letter-spacing: -.03em; }
.next-project { display: grid; gap: 1.25rem; padding-block: var(--section); border-top: 1px solid var(--line); text-decoration: none; }
.next-project__label { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); }
.next-project__title { font-size: var(--fs-5); letter-spacing: -.032em; display: inline-flex; align-items: center; gap: .5rem; }
.next-project__title .icon { width: .7em; height: .7em; transition: transform var(--dur-hover) var(--ease-hover); }
.next-project:hover .next-project__title .icon { transform: translate(6px, -6px); }

/* Service single */
.service-hero { display: grid; gap: 1.5rem; padding-block: clamp(3rem, 7vw, 6rem) clamp(2rem, 5vw, 4rem); }
.service-hero__title { font-size: var(--fs-5); letter-spacing: -.032em; line-height: .96; max-width: 16ch; }
.service-hero__side { display: grid; gap: 1rem; align-content: start; padding: 1.75rem; border-radius: var(--radius-l); background: var(--bg-2); }
.service-hero__side .stat__value { font-size: var(--fs-3); }
@media (min-width: 60em) {
  .service-hero { grid-template-columns: 1.5fr 1fr; align-items: end; gap: 4rem; }
}
.service-block { display: grid; gap: 2rem; }
.service-block__head { display: grid; gap: .75rem; }
.service-block__head h2 { font-size: var(--fs-3); letter-spacing: -.03em; }
@media (min-width: 60em) { .service-block { grid-template-columns: 1fr 1.6fr; gap: 4rem; } .service-block__head { position: sticky; top: calc(var(--admin-h) + var(--header-h) + 1.5rem); } }

/* About page */
.about-story { display: grid; gap: 2rem; }
@media (min-width: 60em) { .about-story { grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; } }
.values { display: grid; gap: 1rem; }
@media (min-width: 48em) { .values { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .values { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.value { display: grid; gap: .85rem; padding: 1.75rem; border-radius: var(--radius-l); background: var(--bg-2); align-content: start; }
.value__title { font-size: var(--fs-1); }
.value__text { color: var(--fg-2); font-size: var(--fs--1); }
.stack-list { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Contact page */
.contact { display: grid; gap: 3rem; }
@media (min-width: 60em) { .contact { grid-template-columns: 1fr 1.2fr; gap: 5rem; align-items: start; } .contact__info { position: sticky; top: calc(var(--admin-h) + var(--header-h) + 1.5rem); } }
.contact__info { display: grid; gap: 2rem; align-content: start; }
.contact__big a { font-family: var(--font-display); font-size: var(--fs-3); font-weight: 600; letter-spacing: -.03em; text-decoration: none; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 2px; transition: background-size var(--dur-hover) var(--ease-hover); overflow-wrap: anywhere; }
.contact__big a:hover { background-size: 100% 2px; }
.contact__rows { display: grid; gap: 1.25rem; }
.contact__row { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; align-items: start; }
.contact__row b { display: block; font-weight: 600; margin-bottom: .15rem; }
.contact__row span, .contact__row address { color: var(--fg-2); font-style: normal; }
.contact__card { padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: var(--radius-xl); background: var(--bg-2); display: grid; gap: 1.5rem; }
.contact__card h2 { font-size: var(--fs-2); letter-spacing: -.02em; }


/* 404 + search */
.not-found { min-height: calc(100svh - var(--header-h) - var(--admin-space)); display: grid; place-items: center; text-align: center; padding-block: var(--section); }
.not-found__code { font-family: var(--font-display); font-size: clamp(6rem, 25vw, 18rem); font-weight: 700; letter-spacing: -.06em; line-height: .85; background: var(--g-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.search-results { display: grid; gap: 1.5rem; }
.search-result { padding: 1.5rem; border-radius: var(--radius-l); background: var(--bg-2); display: grid; gap: .5rem; }
.search-result__type { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2); }
.search-result h2 { font-size: var(--fs-1); }
.search-result a { text-decoration: none; }
.search-result a:hover { color: var(--accent-fg); }

/* Reviews page */
.rating-summary { display: grid; gap: 1rem; justify-items: center; text-align: center; padding: 2.5rem; border-radius: var(--radius-xl); background: var(--bg-2); }
.rating-summary__facts { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 2.5rem; margin-top: .5rem; }
.rating-summary__facts div { display: grid; gap: .1rem; }
.rating-summary__facts dt { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2); }
.rating-summary__facts dd { font-family: var(--font-display); font-size: var(--fs-2); font-weight: 600; letter-spacing: -.02em; }
.quotes-grid > .is-hidden, .quotes-grid > .is-paged { display: none; }
.rating-summary__num { font-family: var(--font-display); font-size: var(--fs-5); font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.quotes-grid { display: grid; gap: 1.25rem; }
@media (min-width: 48em) { .quotes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .quotes-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }


/* =========================================================================
   Journal: artwork, cards, topics, article layout, prose, charts
   ========================================================================= */
.art { display: block; width: 100%; height: 100%; }
.art text { font-family: var(--font-display); fill: #fff; }
/* Light mode: illustrations and cover blobs go greyscale to match the ink palette; dark mode keeps their colour. */
:root:not([data-theme="dark"]) .art { filter: grayscale(1) contrast(1.05); }
:root:not([data-theme="dark"]) .cover__blob { filter: blur(40px) grayscale(1); }
/* …and their colour fades back in on hover / keyboard focus (cards, the featured article, topic tiles), and stays on
   for the topic you're viewing. */
.art { transition: filter .7s var(--ease-out), transform 1.1s var(--ease-hover); }
.cover__blob { transition: filter .7s var(--ease-out); }
:root:not([data-theme="dark"]) :is(a, article):is(:hover, :focus-visible, :focus-within) .art,
:root:not([data-theme="dark"]) .topic[aria-current] .art { filter: grayscale(0) contrast(1); }
:root:not([data-theme="dark"]) :is(a, article):is(:hover, :focus-visible, :focus-within) .cover__blob { filter: blur(40px) grayscale(0); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .art { filter: none; }
  :root:not([data-theme="light"]) .cover__blob { filter: blur(40px); }
}
.art__value { font-size: 230px; font-weight: 700; letter-spacing: -10px; }
.art__label { font-size: 46px; font-weight: 500; fill-opacity: .82; }
.art__motif { transform-origin: 1210px 410px; transition: transform 1.2s var(--ease-hover); }

/* Cards */
.post-card { position: relative; display: grid; gap: 1.1rem; align-content: start; }
.post-card__art { aspect-ratio: 3 / 2; border-radius: var(--radius-l); overflow: hidden; isolation: isolate; background: var(--bg-3); }
.post-card__art .art { transition: filter .7s var(--ease-out), transform 1.1s var(--ease-hover); }
.post-card:hover .post-card__art .art { transform: scale(1.035); }
.post-card:hover .art__motif { transform: rotate(-4deg) scale(1.04); }
.post-card__body { display: grid; gap: .6rem; align-content: start; }
.post-card__title { font-size: var(--fs-1); line-height: 1.2; letter-spacing: -.015em; }
.post-card__title a { text-decoration: none; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 2px; transition: background-size var(--dur-hover) var(--ease-hover); }
.post-card__title a::after { content: ""; position: absolute; inset: 0; }
.post-card:hover .post-card__title a { background-size: 100% 2px; }
.post-card__excerpt { color: var(--fg-2); font-size: .95rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-card__more { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; margin-top: .4rem; }
.post-card__more .icon { transition: transform var(--dur-hover) var(--ease-hover); }
.post-card:hover .post-card__more .icon { transform: translateX(4px); }
.post-card--featured { gap: 1.5rem; }
.post-card--featured .post-card__art { aspect-ratio: 16 / 9; border-radius: var(--radius-xl); }
.post-card--featured .post-card__title { font-size: var(--fs-3); letter-spacing: -.03em; line-height: 1.08; }
.post-card--featured .post-card__excerpt { font-size: var(--fs-1); -webkit-line-clamp: 4; }
@media (min-width: 60em) {
  .post-card--featured { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: center; gap: 3rem; }
}
.posts-grid { display: grid; gap: clamp(2rem, 4vw, 3.25rem) clamp(1rem, 3vw, 2rem); }
@media (min-width: 40em) { .posts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .posts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.journal-featured { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); padding-bottom: clamp(2.5rem, 5vw, 4.5rem); border-bottom: 1px solid var(--line); }

/* Journal hero + topics */
.journal-hero { position: relative; isolation: isolate; overflow: clip; padding-block: clamp(3rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4rem); }
.journal-hero__pattern { position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(var(--dot) 1.2px, transparent 1.2px), linear-gradient(120deg, transparent 55%, color-mix(in srgb, var(--amber) 14%, transparent)); background-size: 22px 22px, 100% 100%; -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent); mask-image: linear-gradient(180deg, #000 40%, transparent); }
.journal-hero__title { font-size: var(--fs-5); letter-spacing: -.032em; line-height: .98; max-width: 16ch; margin-bottom: 1.25rem; }
.journal-hero .lede { margin-bottom: 2rem; }
.journal-hero--topic .journal-hero__art { position: absolute; inset: 0; z-index: -1; opacity: .16; -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000 75%); mask-image: linear-gradient(90deg, transparent 20%, #000 75%); }
.journal-hero--topic .crumbs { margin-bottom: 1rem; }
.topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: .75rem; }
.topic { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem; padding: .55rem .9rem .55rem .55rem; border-radius: var(--radius-m); border: 1px solid var(--line); background: var(--surface); text-decoration: none; transition: border-color var(--dur-1) ease, transform var(--dur-hover) var(--ease-hover), box-shadow var(--dur-hover) var(--ease-hover); }
.topic:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: var(--shadow-s); }
.topic[aria-current="page"] { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.topic__art { width: 2.75rem; height: 2.75rem; border-radius: .7rem; overflow: hidden; }
.topic--all { grid-template-columns: 1fr auto; padding-left: 1rem; min-height: 3.9rem; }
.topic__name { font-weight: 600; font-size: .92rem; }
.topic__count { font-size: .78rem; font-weight: 600; color: var(--fg-2); background: var(--bg-2); border-radius: var(--radius-pill); padding: .2em .65em; font-variant-numeric: tabular-nums; }

/* Article hero */
.article-hero { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.75rem, 4vw, 2.75rem); }
.article-hero__body { display: grid; gap: 1.1rem; justify-items: start; margin-top: 1.25rem; }
.pill--topic { background: color-mix(in srgb, var(--amber) 18%, transparent); color: var(--fg); text-decoration: none; font-weight: 600; transition: background var(--dur-1) ease; }
.pill--topic:hover { background: color-mix(in srgb, var(--amber) 30%, transparent); }
.article-hero__title { font-size: var(--fs-4); letter-spacing: -.035em; line-height: 1.02; }
.article-hero__dek { font-size: var(--fs-1); color: var(--fg-2); line-height: 1.5; text-wrap: pretty; }
.article-hero__meta { display: flex; align-items: center; gap: .85rem; font-size: var(--fs--1); color: var(--fg-2); line-height: 1.45; }
.article-hero__meta b { color: var(--fg); font-weight: 600; }
.avatar--sm { width: 2.75rem; height: 2.75rem; font-size: .85rem; }
.article-art { aspect-ratio: 16 / 7; border-radius: var(--radius-xl); overflow: hidden; overflow: clip; isolation: isolate; } /* clip: keeps the page as the scroll timeline for the parallax */
@media (max-width: 40em) { .article-art { aspect-ratio: 16 / 10; border-radius: var(--radius-l); } }

/* Article layout: sticky contents on the left, a comfortable measure for reading */
.article-layout { display: grid; gap: 2rem; padding-block: clamp(2.5rem, 5vw, 4rem) 0; }
.article-main { min-width: 0; }
.article-aside { display: none; }
@media (min-width: 64em) {
  .article-layout { grid-template-columns: 15rem minmax(0, 45rem); justify-content: center; gap: clamp(3rem, 5vw, 5rem); }
  .article-aside { display: block; }
  .article-aside .toc { position: sticky; top: calc(var(--admin-h) + var(--header-h) + 1.5rem); }
  .toc--mobile { display: none; }
}
.toc__title { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); font-weight: 600; margin-bottom: .9rem; }
.toc__list { display: grid; gap: .15rem; border-left: 1px solid var(--line); }
.toc__list a { display: grid; grid-template-columns: 1.75rem 1fr; gap: .25rem; padding: .45rem .5rem .45rem .9rem; margin-left: -1px; border-left: 2px solid transparent; font-size: .86rem; line-height: 1.35; color: var(--fg-2); text-decoration: none; transition: color var(--dur-1) ease, border-color var(--dur-1) ease, background var(--dur-1) ease; }
.toc__list a:hover { color: var(--fg); background: var(--bg-2); }
.toc__list a[aria-current="true"] { color: var(--fg); border-left-color: var(--coral); font-weight: 600; }
.toc__num { font-variant-numeric: tabular-nums; color: var(--fg-2); font-weight: 500; }
.toc__progress { margin-top: 1.25rem; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.toc__progress span { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: var(--g-brand); }
.toc--mobile { margin-bottom: 2rem; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); }
.toc--mobile summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.25rem; font-weight: 600; }
.toc--mobile summary::after { content: "+"; font-size: 1.3rem; line-height: 1; color: var(--fg-2); transition: transform var(--dur-hover) var(--ease-hover); }
.toc--mobile[open] summary::after { transform: rotate(45deg); }
.toc--mobile .toc__list { margin: 0 1.25rem 1.1rem; }
.toc__count { margin-left: auto; font-size: .8rem; font-weight: 500; color: var(--fg-2); }

/* Key takeaways */
.takeaways { position: relative; margin-bottom: 2.5rem; padding: clamp(1.25rem, 3vw, 1.9rem); border-radius: var(--radius-l); background: var(--bg-2); border: 1px solid var(--line); overflow: hidden; isolation: isolate; }
.takeaways::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--g-brand); }
.takeaways__title { display: flex; align-items: center; gap: .55rem; font-size: var(--fs-1); margin-bottom: 1rem; }
.takeaways__title .icon { color: var(--accent-fg); }
.takeaways .checks { gap: .7rem; }

/* Reading typography */
.prose--article { font-size: clamp(1.0625rem, 1rem + .25vw, 1.15rem); line-height: 1.75; }
.prose--article > * + * { margin-top: 1.35em; }
.prose--article > h2 { position: relative; margin-top: 2.6em; padding-top: 1.1em; border-top: 1px solid var(--line); font-size: var(--fs-2); letter-spacing: -.02em; scroll-margin-top: calc(var(--admin-h) + var(--header-h) + 1.5rem); }
.prose--article > h3 { margin-top: 2em; font-size: var(--fs-1); }
.prose--article > h2 + *, .prose--article > h3 + * { margin-top: .8em; }
.heading-anchor { margin-left: .45em; font-weight: 400; color: var(--fg-2); text-decoration: none !important; opacity: 0; transition: opacity var(--dur-1) ease; }
.prose--article h2:hover .heading-anchor, .heading-anchor:focus-visible { opacity: 1; }
.prose--article p, .prose--article li { color: color-mix(in srgb, var(--fg) 88%, var(--bg)); }
.prose--article strong { color: var(--fg); }
.prose--article li::marker { color: var(--accent-fg); font-weight: 600; }
.prose .wp-block-table { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); }
.prose .wp-block-table table { min-width: 32rem; border-collapse: collapse; font-size: .92rem; line-height: 1.5; }
.prose .wp-block-table th { background: var(--bg-2); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-2); }
.prose .wp-block-table tr:last-child td { border-bottom: 0; }
.prose .wp-block-table th, .prose .wp-block-table td { border: 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose .wp-block-table thead { border-bottom: 0; }
.prose .wp-block-table thead th { border-bottom: 1px solid var(--line-strong); }
/* Content lists carry a class from the block editor, which the global reset would strip of markers. */
.prose ul.wp-block-list:not(.is-style-checks) { list-style: disc; padding-left: 1.3em; }
.prose ol.wp-block-list { list-style: decimal; padding-left: 1.4em; }
.prose .wp-block-list:not(.is-style-checks) li { padding-left: .2em; }
/* Checklists: the icon sits in its own 2rem gutter, aligned to the first line of text. */
.prose ul.is-style-checks { list-style: none; padding-left: 0; display: grid; gap: .75rem; }
.prose ul.is-style-checks li { position: relative; padding-left: 2.1rem; margin-top: 0; }
.prose ul.is-style-checks li::before { top: calc((1lh - 1.25rem) / 2); width: 1.25rem; height: 1.25rem; }
.prose ul.is-style-checks li::after { left: .38rem; top: calc((1lh - 1.25rem) / 2 + .38rem); }
.prose .wp-block-table td:first-child { font-weight: 600; color: var(--fg); }
.prose pre.wp-block-code { position: relative; font-size: .85rem; line-height: 1.65; padding: 2.4rem 1.25rem 1.25rem; }
.prose pre.wp-block-code::before { content: attr(data-lang); position: absolute; left: 1.25rem; top: .8rem; font: 600 .68rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: #a6a6ae; }
.code-copy { position: absolute; right: .6rem; top: .55rem; padding: .35rem .7rem; border-radius: var(--radius-pill); border: 1px solid rgb(255 255 255 / .18); color: #e6e6ea; font-size: .72rem; font-weight: 600; transition: background var(--dur-1) ease, border-color var(--dur-1) ease; }
.code-copy:hover { background: rgb(255 255 255 / .1); border-color: rgb(255 255 255 / .35); }
.callout { position: relative; padding: 1.1rem 1.25rem 1.1rem 3.25rem; border-radius: var(--radius-m); border: 1px solid var(--line); background: var(--surface); font-size: .98rem; }
.callout::before { position: absolute; left: 1.1rem; top: 1rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; display: grid; place-items: center; font: 700 .8rem/1 var(--font-body); color: #0b0b0c; }
.callout--tip { border-left: 4px solid var(--c-good); }
.callout--tip::before { content: "✓"; background: var(--c-good); color: #fff; }
.callout--warn { border-left: 4px solid var(--c-mid); }
.callout--warn::before { content: "!"; background: var(--c-mid); }
.callout p { color: var(--fg); }

/* Sources + foot */
.sources { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.sources__title { font-size: var(--fs-1); margin-bottom: 1rem; }
.sources ol { padding-left: 1.4em; display: grid; gap: .55rem; font-size: .92rem; }
.sources li::marker { color: var(--fg-2); font-variant-numeric: tabular-nums; }
.sources a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: .2em; transition: text-decoration-color var(--dur-1) ease; }
.sources a:hover { text-decoration-color: var(--coral); }
.sources__host { color: var(--fg-2); font-size: .82em; }
.article-foot { margin-top: 3rem; display: grid; gap: 1.5rem; }
.author-box { display: grid; grid-template-columns: auto 1fr; gap: 1rem 1.25rem; align-items: center; padding: 1.5rem; border-radius: var(--radius-l); background: var(--bg-2); }
.author-box__name { font-weight: 600; }
.author-box__bio { color: var(--fg-2); font-size: var(--fs--1); }
.author-box .share { grid-column: 1 / -1; padding-top: 1rem; border-top: 1px solid var(--line); }
@media (min-width: 48em) { .author-box { grid-template-columns: auto 1fr auto; } .author-box .share { grid-column: auto; padding-top: 0; border-top: 0; } }
.share { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.share a, .share button { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--line); transition: background var(--dur-1) ease, color var(--dur-1) ease, border-color var(--dur-1) ease; }
.share a:hover, .share button:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.post-nav { display: grid; gap: 1rem; }
@media (min-width: 48em) { .post-nav { grid-template-columns: 1fr 1fr; } }
.post-nav__link { display: grid; gap: .4rem; padding: 1.25rem 1.4rem; border-radius: var(--radius-l); border: 1px solid var(--line); text-decoration: none; transition: border-color var(--dur-1) ease, background var(--dur-1) ease, transform var(--dur-hover) var(--ease-hover); }
.post-nav__link:hover { border-color: var(--line-strong); background: var(--bg-2); transform: translateY(-2px); }
.post-nav__link--next { text-align: right; justify-items: end; }
.post-nav__link--next:only-child { grid-column: 2; }
.post-nav__label { display: inline-flex; align-items: center; gap: .4rem; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2); font-weight: 600; }
.post-nav__label .icon { width: 1rem; height: 1rem; }
.post-nav__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-0); line-height: 1.3; }

/* Charts — values are always visible as text; the <details> table is the full data view */
.chart { margin-block: 2.25em !important; padding: clamp(1.1rem, 3vw, 1.6rem); border-radius: var(--radius-l); background: var(--surface); border: 1px solid var(--line); font-size: .9rem; line-height: 1.4; }
.chart__head { display: grid; gap: .3rem; margin: 0 0 1.25rem !important; }
.chart__title { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: var(--fg); letter-spacing: -.01em; }
.chart__caption { color: var(--fg-2); font-size: .85rem; }
.chart__rows { display: grid; gap: .7rem; }
.chart__row { display: grid; grid-template-columns: minmax(7rem, 38%) 1fr auto; align-items: center; gap: .85rem; transition: opacity var(--dur-1) ease; }
.chart__rows:hover .chart__row:not(:hover) { opacity: .5; }
.chart__label { color: var(--fg); }
.chart__track { position: relative; height: 14px; border-left: 1px solid var(--c-grid); }
.chart__bar { position: absolute; inset: 0 auto 0 0; width: var(--v); border-radius: 0 4px 4px 0; background: var(--c1); transform-origin: 0 50%; transition: transform 1s var(--ease-out), filter var(--dur-1) ease; transition-delay: calc(var(--i, 0) * 70ms); }
.chart__row:hover .chart__bar { filter: brightness(1.08); }
.chart__row.is-muted .chart__bar { background: var(--c-muted); }
.chart__value { font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; min-width: 3.5rem; text-align: right; }
@media (max-width: 34em) {
  .chart__row { grid-template-columns: 1fr auto; gap: .3rem .75rem; }
  .chart__row .chart__track { grid-column: 1 / -1; grid-row: 2; }
}
.chart__cols { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: clamp(.5rem, 2vw, 1.5rem); align-items: end; }
.chart__cols::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2.1rem; border-bottom: 1px solid var(--c-grid); pointer-events: none; }
.chart__col { display: grid; grid-template-rows: auto 11rem auto; justify-items: center; gap: .5rem; text-align: center; transition: opacity var(--dur-1) ease; }
.chart__cols:hover .chart__col:not(:hover) { opacity: .5; }
.chart__colarea { position: relative; width: min(100%, 3.25rem); align-self: end; height: 100%; }
.chart__colbar { position: absolute; inset: auto 0 0; height: var(--v); border-radius: 4px 4px 0 0; background: var(--c1); transform-origin: 50% 100%; transition: transform 1s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
.chart__col.is-muted .chart__colbar { background: var(--c-muted); }
.chart__col .chart__label { font-size: .82rem; color: var(--fg-2); line-height: 1.6rem; }
.chart__col .chart__value { text-align: center; min-width: 0; font-size: .85rem; }
.chart__stack { display: flex; gap: 2px; height: 18px; border-radius: 4px; overflow: hidden; background: var(--surface); }
.chart__seg { flex: 0 0 max(3px, calc(var(--v) - 2px)); background: var(--c1); transform-origin: 0 50%; transition: transform 1s var(--ease-out); transition-delay: calc(var(--i, 0) * 120ms); }
.chart__seg--2 { background: var(--c2); }
.chart__seg--3 { background: var(--c3); }
.chart__legend { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: 1rem !important; list-style: none; padding: 0 !important; }
.chart__legend li { display: inline-flex; align-items: center; gap: .45rem; margin: 0 !important; color: var(--fg); }
.chart__legend b { font-weight: 600; font-variant-numeric: tabular-nums; }
.chart__key { width: .8rem; height: .8rem; border-radius: 3px; display: inline-block; flex: none; }
.chart__legend--status { margin: 0 0 1.25rem !important; }
.chart__status { display: inline-grid; place-items: center; width: 1.15rem; height: 1.15rem; border-radius: 50%; font: 700 .68rem/1 var(--font-body); font-style: normal; color: #0b0b0c; }
.chart__status--good { background: var(--c-good); color: #fff; }
.chart__status--mid { background: var(--c-mid); }
.chart__status--poor { background: var(--c-poor); color: #fff; }
.chart__ranges { display: grid; gap: 1.6rem; }
.chart__range { display: grid; grid-template-columns: 3.5rem 1fr; align-items: center; gap: .9rem; }
.chart__range .chart__label { font-weight: 600; }
.chart__band { position: relative; display: flex; gap: 2px; height: 14px; }
.chart__zone { flex: 0 0 calc(var(--w) - 1.4px); transform-origin: 0 50%; transition: transform 1s var(--ease-out); transition-delay: calc(var(--i, 0) * 120ms); }
.chart__zone--good { background: var(--c-good); border-radius: 4px 0 0 4px; }
.chart__zone--mid { background: var(--c-mid); }
.chart__zone--poor { background: var(--c-poor); border-radius: 0 4px 4px 0; }
.chart__tick { position: absolute; left: var(--at); top: calc(100% + .35rem); transform: translateX(-50%); font-size: .78rem; font-weight: 600; color: var(--fg-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.chart__tick::before { content: ""; position: absolute; left: 50%; top: -.55rem; height: .4rem; border-left: 1px solid var(--fg-2); }
.chart--range .chart__plot { padding-bottom: 1.3rem; }
.chart__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; }
.chart__stat { display: grid; gap: .3rem; align-content: start; padding: 1rem 1.1rem; border-radius: var(--radius-m); background: var(--bg-2); }
.chart__stat-value { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.6rem); letter-spacing: -.035em; line-height: 1; color: var(--fg); }
.chart__stat.is-highlight .chart__stat-value { color: var(--accent-fg); }
.chart__stat-label { color: var(--fg-2); font-size: .85rem; }
.chart__data { margin-top: 1.1rem !important; border-top: 1px solid var(--line); padding-top: .75rem; }
.chart__data summary { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 600; color: var(--fg-2); }
.chart__data summary::before { content: "▸"; transition: transform var(--dur-1) ease; }
.chart__data[open] summary::before { transform: rotate(90deg); }
.chart__data table { margin-top: .6rem; font-size: .85rem; }
.chart__data th, .chart__data td { padding: .4rem .6rem; border-bottom: 1px solid var(--line); text-align: left; }
.chart__data td { font-variant-numeric: tabular-nums; }
.chart__source { margin-top: .6rem !important; font-size: .78rem; color: var(--fg-2); }
.chart__source a { color: var(--fg-2); }
@media (prefers-reduced-motion: no-preference) {
  .js .chart:not(.is-in) .chart__bar, .js .chart:not(.is-in) .chart__seg, .js .chart:not(.is-in) .chart__zone { transform: scaleX(0); }
  .js .chart:not(.is-in) .chart__colbar { transform: scaleY(0); }
}


/* =========================================================================
   Motion system
   ---------------------------------------------------------------------------
   Everything below is progressive: without JS, without support or with
   prefers-reduced-motion, content is simply shown.
   ========================================================================= */

/* --- Headlines: each word rises out of its own mask ---------------------- */
/* clip-path (not overflow) masks the word without moving its baseline, so splitting causes no layout shift. */
.sw { display: inline-block; clip-path: inset(-.18em -.14em -.26em -.14em); }
.sw__i { display: inline-block; transform-origin: 0 100%; }
.grad.is-split { background: none; padding-right: 0; }
.grad.is-split .sw__i { background: var(--g-brand); -webkit-background-clip: text; background-clip: text; color: transparent; padding: .08em .1em .18em; margin: -.08em -.1em -.18em; }
.grad.is-split { padding: 0; margin: 0; }

/* --- Statement: words light up as you scroll through it ------------------- */
.scrub-w { transition: color .45s ease, opacity .45s ease; }

/* --- Spotlight that follows the pointer on cards -------------------------- */
.spotlight { position: relative; isolation: isolate; }
.spotlight::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .6s var(--ease-hover); background: radial-gradient(26rem circle at var(--sx, 50%) var(--sy, 50%), var(--spot), transparent 45%); }
.spotlight:hover::after { opacity: 1; }
.bento__item--brand.spotlight { --spot: rgb(255 255 255 / .28); }

/* --- Buttons: label rolls up, main CTAs lean toward the pointer ----------- */
.btn__label { display: inline-block; overflow: hidden; padding-block: .3em; margin-block: -.3em; }
.btn__roll { --roll: 1.6em; display: inline-block; text-shadow: 0 var(--roll) 0 currentColor; transition: transform var(--dur-hover) var(--ease-hover); }
.btn:hover .btn__roll, .btn:focus-visible .btn__roll { transform: translateY(calc(var(--roll) * -1)); }
.btn.is-magnetic { translate: var(--mag-x, 0) var(--mag-y, 0); transition: transform var(--dur-hover) var(--ease-hover), translate .7s var(--ease-hover), background var(--dur-1) ease, color var(--dur-1) ease, border-color var(--dur-1) ease, box-shadow var(--dur-hover) var(--ease-hover), --lemon .6s ease, --sun .6s ease, --amber .6s ease, --coral .6s ease, --on-g .6s ease; }
.btn.is-magnetic.is-tracking { transition-duration: var(--dur-hover), .18s, var(--dur-1), var(--dur-1), var(--dur-1), var(--dur-hover); }
@media (hover: none), (forced-colors: active) {
  .btn__roll { text-shadow: none; }
  .btn:hover .btn__roll, .btn:focus-visible .btn__roll { transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Split headings: the element itself stays put, its words do the moving. */
  .js .reveal.split:not(.is-in) { opacity: 1; translate: none; }
  .js .reveal.split.is-in { animation: none; }
  .js .split { --d: calc(var(--i, 0) * 80ms); }
  .js .split:not(.is-in) .sw__i { translate: 0 145%; rotate: 6deg; }
  .js .split .sw__i { transition: translate 1.05s var(--ease-out), rotate 1.05s var(--ease-out); transition-delay: calc(var(--d) + min(var(--wi), 18) * 36ms); }

  /* Statement scrub: unlit words are dimmed (still ≥ 3:1), lit words take full colour. */
  .js .is-scrub .scrub-w:not(.is-lit) { color: var(--scrub-dim); }
  .js .is-scrub .grad.scrub-w:not(.is-lit) { opacity: .4; }

  /* Introductions: blur in rather than slide. */
  .js .lede.reveal:not(.is-in) { filter: blur(12px); }
  .js .lede.reveal.is-in { animation-name: zen-reveal-blur; }
  @keyframes zen-reveal-blur { from { opacity: 0; translate: 0 14px; filter: blur(12px); } to { opacity: 1; translate: 0 0; filter: none; } }

  /* Eyebrow dot pops in with its label. */
  .js .eyebrow.reveal.is-in .eyebrow__dot { animation: zen-dot .8s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 80ms + .15s); }
  @keyframes zen-dot { 0% { scale: 0; } 55% { scale: 1.7; } 100% { scale: 1; } }

  /* Card images wipe up from the bottom and settle from a slight zoom. */
  .js .media-reveal { clip-path: inset(0 0 0 0); transition: clip-path 1.25s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
  .js .media-reveal:not(.is-in) { clip-path: inset(100% 0 0 0); }
  .js .media-reveal .art, .js .media-reveal .cover__img { transition: transform 1.1s var(--ease-hover), scale 1.6s var(--ease-out), filter .7s var(--ease-out); transition-delay: 0s, calc(var(--i, 0) * 90ms), 0s; }
  .js .media-reveal:not(.is-in) .art, .js .media-reveal:not(.is-in) .cover__img { scale: 1.18; }

  /* Scroll-linked effects where the browser supports scroll timelines. */
  @supports (animation-timeline: view()) {
    .article-art .art, .project-cover .cover__img { animation: zen-parallax linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    @keyframes zen-parallax { from { transform: translateY(-5%) scale(1.12); } to { transform: translateY(5%) scale(1.12); } }
    .section.is-dark { animation: zen-band linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
    @keyframes zen-band { from { clip-path: inset(0 clamp(.75rem, 3.5vw, 3rem) round var(--radius-xl)); } to { clip-path: inset(0 0 round 0); } }
    .site-footer__big span { animation: zen-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
    @keyframes zen-rise { from { transform: translateY(55%); opacity: .25; } to { transform: none; opacity: 1; } }
    .stat__value { animation: zen-tick linear both; animation-timeline: view(); animation-range: entry 10% cover 35%; }
    @keyframes zen-tick { from { letter-spacing: .02em; opacity: .4; } to { letter-spacing: -.04em; opacity: 1; } }
  }

  /* Page-to-page transitions: the old page lifts away and fades; the new page fades in without lifting, because its
     own entrances already rise into place (a lifting page under rising blocks read as the entrance playing twice);
     the header holds still; journal artwork and project screenshots morph into the page they open. */
  ::view-transition-old(root) { animation: zen-vt-out .28s var(--ease-in-out) both; }
  ::view-transition-new(root) { animation: zen-vt-fade-in .4s var(--ease-out) both; }
  @keyframes zen-vt-fade-in { from { opacity: 0; } }
  @keyframes zen-vt-out { to { opacity: 0; transform: translateY(-10px); } }
  @keyframes zen-vt-in { from { opacity: 0; transform: translateY(18px); } }
  ::view-transition-group(morph) { animation-duration: .7s; animation-timing-function: var(--ease-out); }
  ::view-transition-group(morph) { overflow: clip; border-radius: var(--radius-l); }
  ::view-transition-image-pair(morph) { isolation: auto; overflow: clip; }
  /* Both snapshots fill the moving box; the destination is opaque and covers the source, so nothing ghosts. */
  ::view-transition-old(morph), ::view-transition-new(morph) { width: 100%; height: 100%; object-fit: cover; overflow: clip; animation: none; mix-blend-mode: normal; }
  /* Only one side present (e.g. leaving an article for a page without a matching card): just fade it. */
  ::view-transition-old(morph) { animation: zen-vt-fade .22s linear both; }
  @keyframes zen-vt-fade { to { opacity: 0; } }
  ::view-transition-old(morph):only-child { animation: zen-vt-out .3s var(--ease-in-out) both; }
  ::view-transition-new(morph):only-child { animation: zen-vt-in .55s var(--ease-out) both; }
}
/* Never morph while switching theme: the circular reveal should cover the whole page. */
html.theme-switching .site-header, html.theme-switching [data-vt] { view-transition-name: none !important; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */
.text-center { text-align: center; }
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; } .mt-4 { margin-top: 4rem; }
.mb-1 { margin-bottom: 1rem; } .mb-2 { margin-bottom: 2rem; } .mb-3 { margin-bottom: 3rem; }
.max-w-prose { max-width: 60ch; }
.nowrap { white-space: nowrap; }
.is-hidden { display: none !important; }
.w-full { width: 100%; }
/* Pricing: rate facts, calculator, examples, method -------------------- */
.rate-facts { display: grid; gap: 1px; list-style: none; padding: 0; margin: 0 0 clamp(3rem, 6vw, 4.5rem); border-radius: var(--radius-l); overflow: clip; background: var(--line); border: 1px solid var(--line); }
.rate-fact { display: grid; gap: .35rem; align-content: start; padding: clamp(1.25rem, 3vw, 1.75rem); background: var(--bg); }
.rate-fact__value { font-family: var(--font-display); font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.75rem); font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.rate-fact__label { color: var(--fg-2); font-size: var(--fs--1); max-width: 30ch; }
@media (min-width: 24em) and (max-width: 63.99em) { .rate-facts { grid-template-columns: repeat(2, 1fr); } .rate-fact:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 64em) { .rate-facts { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } }

.calc { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 64em) { .calc { grid-template-columns: minmax(0, 1fr) minmax(21rem, 25rem); } }
/* Rhythm: 4rem between questions, 1.25rem from a question to its answers, .75rem between answers. A legend is not
   a grid item of its fieldset, so its spacing comes from its own margin rather than the fieldset's gap. */
.calc__questions { display: grid; gap: clamp(2.75rem, 5vw, 4rem); min-width: 0; }
.calc__q { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 1.25rem; }
.calc__legend { display: flex; align-items: center; gap: .85rem; padding: 0; margin-bottom: 1.25rem; font-family: var(--font-display); font-size: var(--fs-2); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.calc__n { display: inline-grid; place-items: center; flex: none; min-width: 2.25rem; height: 1.6rem; padding-inline: .45rem; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--amber) 16%, transparent); font: 600 .78rem/1 var(--font-mono); color: var(--accent-fg); letter-spacing: 0; }
.calc__help { color: var(--fg-2); font-size: var(--fs--1); max-width: 62ch; margin-top: -.75rem; }
.calc__options { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
.calc__options--features { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.calc__options--care { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }

/* Option cards: a native input inside a label, so keyboard, screen readers and no-JS all just work. */
.opt { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: .8rem; padding: 1.1rem 1.2rem; border-radius: var(--radius-m); border: 1px solid var(--line-strong); background: var(--bg); cursor: pointer; transition: border-color var(--dur-hover) var(--ease-hover), background-color var(--dur-hover) var(--ease-hover), box-shadow var(--dur-hover) var(--ease-hover); }
.opt:hover { border-color: color-mix(in srgb, var(--coral) 55%, var(--line-strong)); }
.opt input { width: 1.1rem; height: 1.1rem; margin: .1rem 0 0; accent-color: var(--coral); cursor: pointer; }
.opt:has(input:checked) { border-color: var(--coral); background: color-mix(in srgb, var(--amber) 9%, var(--bg)); box-shadow: 0 0 0 1px var(--coral); }
.opt input:focus-visible { outline: none; } /* the card carries the focus ring */
.opt:has(input:focus-visible) { outline: 2px solid var(--coral); outline-offset: 3px; }
.opt__body { display: grid; gap: .2rem; min-width: 0; }
.opt__label { font-weight: 600; line-height: 1.3; }
.opt__hint { color: var(--fg-2); font-size: var(--fs--1); line-height: 1.4; }
.opt__price { font-weight: 600; font-size: var(--fs--1); color: var(--accent-fg); font-variant-numeric: tabular-nums; }
.opt__extra { font: 600 .8rem/1.3 var(--font-body); color: var(--fg-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.opt:has(input:checked) .opt__extra { color: var(--fg); }
.calc__options--pages { grid-template-columns: repeat(auto-fill, minmax(min(100%, 8rem), 1fr)); }
@media (max-width: 35.99em) {
  .calc__options { gap: .6rem; }
  .opt { padding: .9rem 1rem; gap: .7rem; }
  .calc__options--pages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .calc__options--pages .opt { padding: .85rem .8rem; gap: .55rem; }
}
.calc__options--pages .opt { grid-template-columns: auto 1fr; align-items: center; padding-block: 1rem; }

.calc__submit { padding-top: .25rem; }
.has-calc .calc__submit { display: none; }

.calc__summary { display: grid; gap: 1rem; }
@media (min-width: 64em) { .calc__summary { position: sticky; top: calc(var(--admin-h) + var(--header-h) + 1.25rem); } }
.calc__panel { position: relative; display: grid; gap: 1.25rem; padding: clamp(1.5rem, 3vw, 2rem); border-radius: var(--radius-xl); background: var(--band-bg); border: 1px solid var(--band-edge); color: var(--fg); overflow: clip; isolation: isolate; }
.calc__panel::before { content: ""; position: absolute; inset: -40% -30% auto auto; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--amber) 22%, transparent), transparent); z-index: -1; pointer-events: none; }
.calc__eyebrow { font: 600 .75rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); }
.calc__total { font-family: var(--font-display); font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.25rem); text-wrap: balance; font-weight: 600; letter-spacing: -.035em; line-height: 1.05; font-variant-numeric: tabular-nums; margin-top: -.5rem; }
.calc__sub { color: var(--fg-2); font-size: var(--fs--1); margin-top: -.6rem; }
.calc__facts { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--line); }
.calc__facts > div { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); font-size: var(--fs--1); }
.calc__facts dt { color: var(--fg-2); }
.calc__facts dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.calc__split { display: grid; gap: .8rem; }
.calc__split-title { font-weight: 600; font-size: var(--fs--1); }
.calc__rows { gap: .55rem; }
.calc__rows .chart__row { grid-template-columns: minmax(0, 1fr) minmax(4.5rem, 38%) 2.6rem; gap: .6rem; font-size: .8rem; }
.calc__rows .chart__label { color: var(--fg-2); line-height: 1.25; }
.calc__rows .chart__track { height: 8px; border-left-color: var(--line-strong); }
.calc__rows .chart__bar { background: var(--amber); transition: width .6s var(--ease-out), filter var(--dur-1) ease; }
.calc__rows .chart__value { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.calc__rows .chart__row.is-zero { opacity: .45; }
.calc__actions { display: grid; gap: .75rem; }
.calc__actions .btn { justify-content: center; }
.calc__tools { display: flex; gap: .5rem; }
.calc__tool { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 2.75rem; padding: .5rem .8rem; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); font-size: .85rem; font-weight: 500; color: var(--fg); transition: background-color var(--dur-hover) var(--ease-hover), border-color var(--dur-hover) var(--ease-hover); }
.calc__tool:hover { background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .35); }
.calc__tool .icon { width: 1rem; height: 1rem; }
.calc__tool.is-copied { border-color: var(--c-good); }
.calc__note { color: var(--fg-2); font-size: .78rem; }
.calc__audit { display: flex; gap: .75rem; align-items: flex-start; padding: 1rem 1.15rem; border-radius: var(--radius-l); background: color-mix(in srgb, var(--amber) 12%, var(--bg)); border: 1px solid color-mix(in srgb, var(--amber) 35%, transparent); font-size: var(--fs--1); }
.calc__audit .icon { flex: none; width: 1.25rem; height: 1.25rem; color: var(--accent-fg); margin-top: .1rem; }
.calc__audit a { font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.calc__audit[hidden] { display: none; }

/* Phones: a slim sticky total while answering, so the price visibly moves. */
.calc__peek { position: sticky; bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 5; display: flex; align-items: center; gap: .75rem; padding: .8rem 1.1rem; border-radius: var(--radius-pill); background: var(--band-bg); color: var(--paper); border: 1px solid rgb(255 255 255 / .12); box-shadow: var(--shadow-l); text-decoration: none; font-size: .9rem; }
.calc__peek b { font-variant-numeric: tabular-nums; }
.calc__peek-label { color: #a6a6ae; }
.calc__peek-more { margin-left: auto; display: inline-flex; align-items: center; gap: .3rem; color: #a6a6ae; font-size: .8rem; }
.calc__peek-more .icon { width: .9rem; height: .9rem; }
.calc__peek { display: none; }
@media (max-width: 63.99em) { .has-calc .calc__peek { display: flex; } }

@media (prefers-reduced-motion: no-preference) {
  .calc__panel.is-flash .calc__total { animation: calc-flash .6s var(--ease-out); }
  @keyframes calc-flash { from { opacity: .35; translate: 0 .25rem; } to { opacity: 1; translate: 0 0; } }
}

.examples { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.example { position: relative; display: grid; gap: .6rem; align-content: start; padding: clamp(1.4rem, 2.5vw, 1.75rem); border-radius: var(--radius-l); background: var(--bg); border: 1px solid var(--line); transition: border-color var(--dur-hover) var(--ease-hover), translate var(--dur-hover) var(--ease-hover); }
.example:hover { border-color: var(--line-strong); translate: 0 -3px; }
.example__title { font-family: var(--font-display); font-size: var(--fs-1); font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.example__text { color: var(--fg-2); font-size: var(--fs--1); }
.example__cost { font-family: var(--font-display); font-size: clamp(1.25rem, 1.05rem + .55vw, 1.5rem); white-space: nowrap; font-weight: 600; letter-spacing: -.03em; margin-top: .5rem; font-variant-numeric: tabular-nums; }
.example__meta { color: var(--fg-2); font-size: .8rem; }
.example__link { display: inline-flex; align-items: center; gap: .35rem; margin-top: .4rem; font-weight: 600; font-size: .9rem; color: var(--accent-fg); }
.example__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.example__link .icon { width: 1rem; height: 1rem; transition: translate var(--dur-hover) var(--ease-hover); }
.example:hover .example__link .icon { translate: 2px -2px; }

.method { display: grid; gap: 2rem clamp(1.5rem, 3vw, 3rem); }
@media (min-width: 48em) { .method { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .method { grid-template-columns: repeat(3, 1fr); } }
.method__item { display: grid; gap: .5rem; align-content: start; padding-top: 1.25rem; border-top: 1px solid var(--line-strong); }
.method__title { font-family: var(--font-display); font-size: var(--fs-1); font-weight: 600; letter-spacing: -.01em; }
.method__text { color: var(--fg-2); }

.next-steps { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; gap: .9rem; counter-reset: step; max-width: 36rem; }
.next-steps li { position: relative; padding-left: 2.6rem; color: var(--fg-2); counter-increment: step; }
.next-steps li::before { content: counter(step); position: absolute; left: 0; top: -.1rem; display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--g-brand); color: var(--on-g); font: 700 .8rem/1 var(--font-body); }
.next-steps b { color: var(--fg); }

.section--bg-2 .contact__card { background: var(--bg); border: 1px solid var(--line); }
.contact__card .h3 { font-size: var(--fs-2); letter-spacing: -.02em; }
.contact__info--lead { gap: 1.25rem; }
.contact__info--lead > .h2 { max-width: 18ch; }
.contact__info .quote { margin-top: 1.25rem; height: auto; }
.sample__copy { display: grid; gap: 1.25rem; align-content: start; }
.contact__alt { display: grid; gap: .75rem; margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.contact__alt-title { font-weight: 600; }
.contact__alt-link { display: flex; align-items: center; gap: .9rem; padding: .85rem 1rem; border-radius: var(--radius-m); border: 1px solid var(--line); text-decoration: none; transition: border-color var(--dur-hover) var(--ease-hover), background-color var(--dur-hover) var(--ease-hover); }
.contact__alt-link:hover { border-color: var(--line-strong); background: var(--bg-2); }
.contact__alt-link > span:last-child { display: grid; gap: .1rem; }
.contact__alt-link > span:last-child span { color: var(--fg-2); font-size: var(--fs--1); }
.contact__alt-link .icon-disc { width: 2.5rem; height: 2.5rem; }
.contact__alt-link .icon-disc .icon { width: 1.15rem; height: 1.15rem; }

/* Forms: fieldsets and chips used by the audit request */
.field legend { padding: 0; margin-bottom: .45rem; font-size: .85rem; font-weight: 600; }
.field legend .mute { font-weight: 400; }
fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
.tier-pick__options { display: grid; gap: .6rem; }
@media (min-width: 36em) { .tier-pick__options { grid-template-columns: 1fr 1fr; } }
.focus-pick__options { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip-check { position: relative; display: inline-flex; }
.chip-check input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip-check span { display: inline-flex; align-items: center; gap: .4rem; padding: .55em 1em; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); font-size: .85rem; font-weight: 500; transition: background-color var(--dur-hover) var(--ease-hover), border-color var(--dur-hover) var(--ease-hover), color var(--dur-hover) var(--ease-hover); }
.chip-check span::before { content: "+"; font-weight: 600; width: .8em; text-align: center; }
.chip-check:hover span { border-color: var(--fg-2); }
.chip-check input:checked + span { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.chip-check input:checked + span::before { content: "✓"; }
.chip-check input:focus-visible + span { outline: 3px solid var(--coral); outline-offset: 2px; }

/* Website audit: free check, report, tiers, areas, sample ----------------- */
.audit-hero__check { width: min(100%, 42rem); margin: clamp(1.75rem, 4vw, 2.5rem) auto 0; text-align: left; }
.site-check { display: grid; gap: .6rem; }
.site-check__label { font-weight: 600; font-size: .9rem; }
.site-check__bar { display: flex; align-items: center; gap: .5rem; padding: .4rem .4rem .4rem 1rem; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-m); transition: border-color var(--dur-hover) var(--ease-hover), box-shadow var(--dur-hover) var(--ease-hover); }
.site-check__bar:focus-within { border-color: var(--coral); box-shadow: 0 0 0 4px color-mix(in srgb, var(--coral) 18%, transparent), var(--shadow-m); }
.site-check__icon { display: inline-grid; color: var(--fg-2); flex: none; }
.site-check__icon .icon { width: 1.25rem; height: 1.25rem; }
.site-check__bar input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--fg); font: 500 var(--fs-0)/1.4 var(--font-body); padding: .6rem 0; }
.site-check__bar input:focus { outline: none; }
.site-check__bar input::placeholder { color: var(--mute-2); }
.site-check__btn { flex: none; }
.site-check__btn[aria-busy="true"] { opacity: .75; cursor: progress; }
.site-check__note { color: var(--fg-2); font-size: var(--fs--1); }
.site-check__error { color: var(--error-fg); background: var(--error-bg); padding: .6rem .9rem; border-radius: var(--radius-m); font-size: .9rem; font-weight: 500; }
@media (max-width: 35.99em) {
  .site-check__bar { flex-wrap: wrap; border-radius: var(--radius-l); padding: .4rem; }
  .site-check__icon { display: none; }
  .site-check__bar input { flex-basis: 100%; padding: .7rem .75rem; }
  .site-check__btn { width: 100%; justify-content: center; }
}

.check-section[hidden] { display: none; }
.check-progress { display: flex; align-items: center; justify-content: center; gap: 1rem; min-height: 9rem; padding: 2rem; border-radius: var(--radius-xl); border: 1px dashed var(--line-strong); color: var(--fg-2); font-weight: 500; }
.check-progress__ring { width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 3px solid var(--line-strong); border-top-color: var(--coral); animation: zen-spin .9s linear infinite; }
@keyframes zen-spin { to { rotate: 1turn; } }
@media (prefers-reduced-motion: reduce) { .check-progress__ring { animation-duration: 3s; } }
.check-error { padding: 1.1rem 1.35rem; border-radius: var(--radius-l); background: var(--error-bg); color: var(--error-fg); font-weight: 500; max-width: 46rem; margin-inline: auto; }

.check-report { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); padding: clamp(1.5rem, 4vw, 3rem); border-radius: var(--radius-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-m); }
.check-report:focus { outline: none; }
.check-report:focus-visible { outline: 3px solid var(--coral); outline-offset: 4px; }
.check-report__head { display: grid; gap: .9rem; }
.check-report__eyebrow { font: 600 .75rem/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2); }
.check-report__title { font-family: var(--font-display); font-size: var(--fs-3); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; max-width: 24ch; text-wrap: balance; overflow-wrap: anywhere; }
.check-report__counts { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.check-count { display: inline-flex; align-items: center; gap: .45rem; padding: .45em .9em .45em .5em; border-radius: var(--radius-pill); background: var(--bg-2); font-size: .9rem; }
.check-count b { font-variant-numeric: tabular-nums; }
.check__icon { display: inline-grid; place-items: center; flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; color: #fff; }
.check__icon .icon { width: .85rem; height: .85rem; stroke-width: 3; }
.check--fail .check__icon, .check-count--fail .check__icon { background: var(--c-poor); }
.check--warn .check__icon, .check-count--warn .check__icon { background: var(--c-mid); color: #0b0b0c; }
.check--pass .check__icon, .check-count--pass .check__icon { background: var(--c-good); }
.check-report__areas { display: grid; gap: 1.5rem clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 52em) { .check-report__areas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.check-area { display: grid; gap: .6rem; align-content: start; }
.check-area__title { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--line-strong); font-family: var(--font-display); font-size: var(--fs-1); font-weight: 600; }
.check-area__count { font: 500 .8rem/1 var(--font-body); color: var(--fg-2); }
.check-list { list-style: none; padding: 0; margin: 0; display: grid; }
.check { display: flex; gap: .75rem; align-items: flex-start; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.check .check__icon { margin-top: .05rem; }
.check__body { display: grid; gap: .2rem; min-width: 0; }
.check__title { font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.check__status { display: inline-block; margin-right: .35rem; font: 700 .68rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); vertical-align: .12em; }
.check__detail { color: var(--fg-2); font-size: var(--fs--1); overflow-wrap: anywhere; }
.check--pass .check__title { font-weight: 500; }
.check-report__next { display: grid; gap: 1.5rem; padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--radius-l); background: var(--bg-2); }
@media (min-width: 52em) { .check-report__next { grid-template-columns: 1.2fr 1fr; align-items: center; } }
.check-report__subtitle { font-family: var(--font-display); font-size: var(--fs-1); font-weight: 600; margin-bottom: 1rem; }
.check-report__cta { display: grid; gap: .75rem; justify-items: start; }
.check-report__cta .btn { white-space: normal; text-align: left; }
.check-report__small { color: var(--fg-2); font-size: .78rem; }

.tiers { display: grid; gap: 1.25rem; align-items: stretch; max-width: 62rem; margin-inline: auto; }
@media (min-width: 52em) { .tiers { grid-template-columns: 1fr 1fr; } }
.tier { position: relative; display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.75rem, 3.5vw, 2.5rem); border-radius: var(--radius-xl); background: var(--bg-2); border: 1px solid var(--line); }
.tier--featured { background: var(--band-bg); border-color: var(--band-edge); color: var(--fg); overflow: clip; isolation: isolate; }
.tier--featured::before { content: ""; position: absolute; inset: auto -20% -45% auto; width: 75%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--amber) 25%, transparent), transparent); z-index: -1; }
.tier__badge { align-self: flex-start; }
.tier__title { font-family: var(--font-display); font-size: var(--fs-2); font-weight: 600; letter-spacing: -.02em; }
.tier__summary { color: var(--fg-2); }
.tier__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .6rem; margin-top: .25rem; }
.tier__amount { font-family: var(--font-display); font-size: var(--fs-4); font-weight: 600; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.tier__unit { color: var(--fg-2); font-size: var(--fs--1); }
.tier__time { display: inline-flex; align-items: center; gap: .45rem; color: var(--fg-2); font-size: var(--fs--1); }
.tier__time .icon { width: 1rem; height: 1rem; }
.tier__list { margin: .5rem 0 1rem; }
.tier__cta { margin-top: auto; align-self: flex-start; }

.audit-areas { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
/* Six areas: 2 × 3 or 3 × 2, never a row of five and one left over. */
@media (min-width: 40em) { .audit-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .audit-areas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.audit-area { display: grid; gap: .75rem; align-content: start; padding: clamp(1.4rem, 3vw, 1.9rem); border-radius: var(--radius-l); background: var(--bg); border: 1px solid var(--line); }
.audit-area__title { font-family: var(--font-display); font-size: var(--fs-1); font-weight: 600; }
.audit-area__text { color: var(--fg-2); font-size: var(--fs--1); }

.sample { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 64em) { .sample { grid-template-columns: 1fr 1.05fr; } }
.report { display: grid; gap: 1rem; padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--radius-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-l); rotate: -.6deg; margin: 0; min-width: 0; }
.report__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.report__brand { font: 700 .75rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); }
.report__site { font-family: var(--font-display); font-size: var(--fs-2); font-weight: 600; letter-spacing: -.02em; overflow-wrap: anywhere; }
.report__scores { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; list-style: none; padding: 0; margin: 0; }
@media (min-width: 36em) { .report__scores { grid-template-columns: repeat(4, 1fr); } }
.report__scores li { display: grid; gap: .35rem; padding: .8rem .9rem; border-radius: var(--radius-m); background: var(--bg-2); font-size: .8rem; color: var(--fg-2); }
.report__scores b { font: 600 var(--fs-2)/1 var(--font-display); color: var(--fg); letter-spacing: -.02em; }
.sev { position: relative; padding-left: .9rem; }
.sev::before { content: ""; position: absolute; left: 0; top: 50%; width: .5rem; height: .5rem; border-radius: 50%; translate: 0 -50%; }
.sev--high::before { background: var(--c-poor); }
.sev--mid::before { background: var(--c-mid); }
.report__table-wrap { overflow-x: auto; border-radius: var(--radius-m); border: 1px solid var(--line); }
.report__table-wrap:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }
.report__table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.report__table th { text-align: left; font-weight: 600; color: var(--fg-2); padding: .65rem .8rem; background: var(--bg-2); white-space: nowrap; }
.report__table td { padding: .7rem .8rem; border-top: 1px solid var(--line); vertical-align: top; }
.report__table td:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.sev-label { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; white-space: nowrap; }
.sev-label::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; }
.sev-label--high::before { background: var(--c-poor); }
.sev-label--mid::before { background: var(--c-mid); }
.sev-label--low::before { background: var(--c-good); }
.report__cap { color: var(--fg-2); font-size: .78rem; }

.audit-promo { position: relative; display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; padding: clamp(1.75rem, 5vw, 3.5rem); border-radius: var(--radius-xl); background: var(--bg-2); border: 1px solid var(--line); overflow: clip; isolation: isolate; }
.audit-promo::before { content: ""; position: absolute; inset: -50% -10% auto auto; width: 55%; aspect-ratio: 1; border-radius: 50%; background: var(--g-brand-soft); filter: blur(40px); opacity: .7; z-index: -1; pointer-events: none; }
@media (min-width: 64em) { .audit-promo { grid-template-columns: 1fr 1.1fr; } }
.audit-promo__copy { display: grid; gap: .9rem; }
.audit-promo__text { color: var(--fg-2); max-width: 44ch; }
.audit-promo__form { display: grid; gap: .9rem; }
.audit-promo__more { font-size: var(--fs--1); color: var(--fg-2); }
/* Promo band directly above the closing CTA: one shared gap instead of two paddings stacked. */
.section--tight:has(.audit-promo) + .section--tight { padding-top: 0; }
.audit-promo__more a { color: var(--fg); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }

@media print {
  .site-header, .site-footer, .menu-overlay, .scroll-progress, .cta, .rail-nav, .burger { display: none !important; }
  body { background: #fff; color: #000; }
  /* Pricing: print the answers you chose and the estimate, nothing else. */
  .page-template-page-templates-pricing .site-main > section:not(:has(.calc)), .calc__peek, .calc__tools, .calc__actions .btn, .calc__submit, .calc__audit { display: none !important; }
  .page-template-page-templates-pricing .opt:not(:has(input:checked)) { display: none; }
  .calc { grid-template-columns: 1fr 1fr; }
  .calc__panel { background: #fff; color: #000; border: 1px solid #000; --fg: #000; --fg-2: #333; --line: #bbb; }
  /* With JS the pricing page prints only the estimate sheet below (one A4 page, made for Save as PDF). */
  html.has-estimate-sheet, html.has-estimate-sheet body { background: #fff !important; }
  html.has-estimate-sheet body > :not(.estimate-sheet) { display: none !important; }
  html.has-estimate-sheet .estimate-sheet { display: flex !important; }
}

/* Printed estimate sheet (pricing calculator). Fixed colours: it is always ink on white paper. */
@page estimate-sheet { size: A4; margin: 0; }
.estimate-sheet {
  page: estimate-sheet; display: none; position: relative; box-sizing: border-box; width: 210mm; height: 296mm; overflow: hidden;
  flex-direction: column; gap: 7mm; padding: 15mm 15mm 11mm; background: #fff; color: #0b0b0c;
  font-family: var(--font-body); font-size: 9.5pt; line-height: 1.45; -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.estimate-sheet::before { content: ""; position: absolute; inset: 0 0 auto; height: 2.2mm; background: var(--g-brand); }
.estimate-sheet p, .estimate-sheet h2, .estimate-sheet dl, .estimate-sheet dd { margin: 0; }
.es__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10mm; }
.es__logo { width: 52mm; height: auto; margin-top: 1mm; }
.es__meta { text-align: right; font-size: 8.5pt; color: #55555c; display: grid; gap: .6mm; }
.es__meta b { color: #0b0b0c; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.es__kicker, .es__h, .es__eyebrow { font-family: var(--font-body); font-size: 7.5pt; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; }
.es__kicker { color: #0b0b0c; margin-bottom: 1mm !important; }
.es__hero { position: relative; isolation: isolate; overflow: hidden; border-radius: 6mm; background: #0b0b0c; color: #fbfaf7; padding: 9mm 10mm 8mm; }
.es__hero::before { content: ""; position: absolute; z-index: -1; width: 120mm; aspect-ratio: 1; right: -40mm; top: -70mm; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--sun) 50%, transparent), color-mix(in srgb, var(--amber) 26%, transparent) 55%, transparent 76%); }
.es__hero::after { content: ""; position: absolute; left: 10mm; bottom: 0; width: 34mm; height: 1.2mm; border-radius: 1mm 1mm 0 0; background: var(--g-brand); }
.es__eyebrow { color: #b9b9c0; }
.es__total { font-family: var(--font-display); font-size: 34pt; font-weight: 600; letter-spacing: -.035em; line-height: 1.05; margin: 2.5mm 0 2mm !important; font-variant-numeric: tabular-nums; }
.es__sub { color: #c9c9cf; font-size: 10.5pt; }
.es__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5mm; margin-top: 7mm !important; padding-top: 5mm; border-top: 1px solid rgb(255 255 255 / .16); }
.es__facts dt { font-size: 7.5pt; color: #a6a6ae; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 1.2mm; }
.es__facts dd { font-weight: 600; font-size: 12pt; font-variant-numeric: tabular-nums; }
.es__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10mm; }
.es__h { color: #0b0b0c; margin-bottom: 3mm !important; padding-bottom: 2.5mm; border-bottom: 1px solid #0b0b0c; }
.es__answers > div { display: grid; grid-template-columns: 42% 1fr; gap: 3mm; padding: 1.9mm 0; border-bottom: 1px solid #e7e5de; }
.es__answers dt { color: #6b6b73; }
.es__answers dd { font-weight: 600; }
.es__bars { display: grid; gap: 2.8mm; padding-top: .8mm; }
.es__bar { display: grid; grid-template-columns: 33mm 1fr 9mm; align-items: center; gap: 3mm; }
.es__bar-label { color: #3a3a40; line-height: 1.25; }
.es__bar-track { height: 2.4mm; border-radius: 2mm; background: #efede7; overflow: hidden; }
.es__bar-fill { display: block; height: 100%; width: var(--v); border-radius: inherit; background: var(--g-brand); }
.es__bar-value { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.es__bar.is-zero .es__bar-label, .es__bar.is-zero .es__bar-value { color: #a6a6ae; }
.es__bar--total { grid-template-columns: 1fr auto; margin-top: 1mm; padding-top: 2.6mm; border-top: 1px solid #0b0b0c; }
.es__bar--total .es__bar-label { color: #0b0b0c; font-weight: 700; }
.es__next { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr auto; gap: 4mm 10mm; align-items: start; padding: 6mm 7mm 5mm 8.5mm; border-radius: 5mm; background: #f6f4ee; }
.es__next::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 1.5mm; background: var(--g-brand); }
.es__next .es__h { border: 0; padding: 0; margin-bottom: 1.8mm !important; }
.es__next p { max-width: 105mm; }
.es__contact { text-align: right; font-weight: 600; display: grid; gap: .8mm; }
.es__contact p { max-width: none; }
.es__link { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 1mm 3mm; font-size: 8.5pt; color: #55555c; padding-top: 3.5mm; border-top: 1px solid #e2dfd6; max-width: none !important; }
.es__link a { color: #0b0b0c; font-weight: 600; text-decoration: none; word-break: break-all; }
.es__foot { margin-top: auto; display: flex; justify-content: space-between; gap: 10mm; font-size: 7.5pt; color: #6b6b73; padding-top: 3mm; border-top: 1px solid #e7e5de; }
.es__foot p:last-child { font-weight: 600; color: #0b0b0c; }

/* --------------------------------------------------------------------------
   Motion: reveal-on-scroll (JS adds .is-in) with reduced-motion safety
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  /* Reveal runs as an animation on the independent translate/scale properties, so it never overrides an
     element's own transition or hover transform (cards, bento tiles and buttons keep their smooth hovers). */
  /* Timing follows Apple's product pages: a 30px rise on a soft ease-in-out that settles at ~0.6s while the fade
     runs on to 0.85s, and blocks that arrive together start ~120ms apart. */
  .js .reveal:not(.is-in) { opacity: 0; translate: 0 30px; }
  .js .reveal--scale:not(.is-in) { translate: none; scale: .96; }
  .js .reveal--left:not(.is-in) { translate: -30px 0; }
  .js .reveal.is-in { animation: zen-reveal .85s var(--ease-rv) both; animation-delay: calc(var(--i, 0) * 120ms); }
  .js .reveal--scale.is-in { animation-name: zen-reveal-scale; }
  .js .reveal--left.is-in { animation-name: zen-reveal-left; }
  /* No end values: each entrance lands on the element's own opacity and position (a disabled arrow stays faint). */
  @keyframes zen-reveal { 0% { opacity: 0; translate: 0 30px; } 72% { translate: 0 0; } }
  @keyframes zen-reveal-scale { 0% { opacity: 0; scale: .96; } 72% { scale: 1; } }
  @keyframes zen-reveal-left { 0% { opacity: 0; translate: -30px 0; } 72% { translate: 0 0; } }
  /* Cascades (see main.js): a component's pieces follow its frame one by one. A tall component only fades its frame
     in; its pieces rise on their own as they come into view. */
  .js .reveal.rv-frame:not(.is-in) { translate: none; scale: none; }
  .js .reveal.rv-frame.is-in { animation-name: zen-reveal-frame; animation-duration: .9s; }
  @keyframes zen-reveal-frame { 0% { opacity: 0; } }
  .js .rv-unit:is(.is-in, .ps-on) .rv-kid:not(.rv-done) { animation: zen-reveal-kid .8s var(--ease-rv) both; animation-delay: calc(var(--i, 0) * 120ms + 120ms + var(--k, 0) * 75ms); }
  .js .rv-unit.ps-on .rv-kid:not(.rv-done) { animation-delay: calc(var(--ps-i, 0) * 120ms + 320ms + var(--k, 0) * 75ms); }
  @keyframes zen-reveal-kid { 0% { opacity: 0; translate: 0 16px; } 72% { translate: 0 0; } }
  /* Once an entrance has played it lets go, so hovers and magnetic buttons move the element again. */
  .js .reveal.is-in.rv-done { animation: none; }
  /* While main.js sets up the entrances nothing transitions, so nothing fades out before it fades in (see main.js). */
  .zen-prep *, .zen-prep *::before, .zen-prep *::after { transition: none !important; }

  /* Scroll-driven parallax for decorative hero glow (progressive) */
  @supports (animation-timeline: scroll()) {
    .hero__glow { animation: glow-drift linear both; animation-timeline: scroll(); animation-range: 0 60vh; }
    @keyframes glow-drift { to { transform: translateY(18vh) scale(1.08); } }
    .scroll-progress { animation: progress linear both; animation-timeline: scroll(root); transform: none; }
    @keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .marquee__track { animation: none; }
  .gauge__fill { transition: none; stroke-dashoffset: var(--gauge-offset, 8.5); }
  .rating__fill { width: var(--w); }
}

/* Touch screens report :hover after a tap and keep it; skip the lift there so cards don't stay raised. */
@media (hover: none) {
  .btn:hover, .card:hover, .bento__item:hover, .theme-toggle:hover { transform: none; box-shadow: none; }
  .work-card:hover .cover__img, .post-card:hover .cover__img { transform: none; }
}

/* ==========================================================================
   Motion: about-reviews-contact
   ========================================================================== */
/* about-reviews-contact: story timeline, review wall, form progress -------- */

/* 1. About story timeline ------------------------------------------------- */
.about-story--tl { grid-template-columns: 1fr; }
@media (min-width: 60em) { .about-story--tl { grid-template-columns: 1fr; gap: 4rem; } }
ol.tl { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 2.25rem; padding-left: 2rem; }
.tl::before, .tl::after { content: ""; position: absolute; left: .5rem; top: .5rem; bottom: .5rem; width: 2px; border-radius: 2px; }
.tl::before { background: var(--line); }
.tl::after { background: var(--g-brand); transform-origin: top; transform: scaleY(var(--p, 1)); }
.tl__item { position: relative; }
.tl__dot { position: absolute; left: -2rem; top: .2rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--g-brand); box-shadow: 0 0 0 4px var(--bg); }
.tl__label { display: block; font-size: var(--fs--1); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-2); margin-bottom: .35rem; }
.tl__title { font-family: var(--font-display); font-size: var(--fs-1); font-weight: 600; letter-spacing: -.01em; line-height: 1.25; margin: 0 0 .5rem; }
.tl__text { margin: 0; color: var(--fg-2); max-width: 44ch; text-wrap: pretty; }

@media (min-width: 60em) {
  ol.tl { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 2rem; padding: 2.5rem 0 0; }
  .tl::before, .tl::after { left: 0; right: 0; top: .5rem; bottom: auto; width: auto; height: 2px; }
  .tl::after { transform-origin: left; transform: scaleX(var(--p, 1)); }
  .tl__dot { left: 0; top: -2.5rem; }
}

.tl.is-ready::after { transition: transform .12s linear; }
.tl.is-ready .tl__dot { transform: scale(0); transition: transform .6s var(--ease-out); }
.tl.is-ready .tl__body { opacity: 0; translate: 0 18px; transition: opacity .7s var(--ease-out), translate .7s var(--ease-out); }
.tl.is-ready .tl__item.is-reached .tl__dot { transform: scale(1); z-index: 1; }
.tl.is-ready .tl__item.is-reached .tl__body { opacity: 1; translate: none; transition-delay: .12s; }
@media (prefers-reduced-motion: reduce) {
  .tl.is-ready::after, .tl.is-ready .tl__dot, .tl.is-ready .tl__body { transition: none; }
}

/* 2. Two-way review wall --------------------------------------------------- */
.rwall { position: relative; display: grid; gap: 1rem; margin-inline: calc(50% - 50vw); padding-bottom: 3rem; overflow: clip; }
.rwall__title { text-align: center; margin: 0 0 .5rem; font-size: var(--fs-2); padding-inline: 1rem; }
.rwall__row { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.rwall__track { display: flex; width: max-content; animation: rwall-drift calc(var(--n, 8) * 7s) linear infinite; will-change: transform; }
.rwall__row--rev .rwall__track { animation-direction: reverse; }
.rwall__group { display: flex; gap: 1rem; padding-right: 1rem; flex: none; }
.rwall__card { flex: none; width: min(18rem, 78vw); display: grid; gap: .6rem; align-content: start; padding: 1.1rem 1.25rem; border: 1px solid var(--line); border-radius: var(--radius-l, 1rem); background: var(--surface); }
.rwall__card .stars .icon { width: .85rem; height: .85rem; }
.rwall__quote { margin: 0; font-size: var(--fs--1); line-height: 1.5; color: var(--fg); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.rwall__name { font-size: var(--fs--1); font-weight: 600; color: var(--fg-2); }
@keyframes rwall-drift { to { transform: translate3d(-50%, 0, 0); } }
.rwall.is-paused .rwall__track, .rwall.is-offscreen .rwall__track { animation-play-state: paused; }
@media (hover: hover) and (pointer: fine) { .rwall__row:hover .rwall__track { animation-play-state: paused; } }

.rwall__toggle { justify-self: center; display: inline-flex; align-items: center; gap: .55rem; margin-top: .5rem; padding: .5rem 1rem; border: 1px solid var(--line-strong, var(--line)); border-radius: 999px; background: var(--surface); color: var(--fg); font: inherit; font-size: var(--fs--1); font-weight: 500; cursor: pointer; transition: background .25s var(--ease-hover), border-color .25s var(--ease-hover); }
.rwall__toggle:hover { background: var(--bg-2); }
.rwall__toggle:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
.rwall__toggle .i-play { display: none; }
.rwall__toggle[aria-pressed="true"] .i-play { display: block; }
.rwall__toggle[aria-pressed="true"] .i-pause { display: none; }

@media (prefers-reduced-motion: reduce) {
  .rwall__track { animation: none; }
  .rwall__row { overflow-x: auto; scrollbar-width: none; }
  .rwall__group + .rwall__group { display: none; }
  .rwall__toggle { display: none; }
}

/* 3. Form progress ---------------------------------------------------------- */
.form[data-zen-form]:not([data-audit-form]):not([data-quote-form]) { position: relative; }
.form__progress { position: absolute; left: 0; right: 0; top: -1rem; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; pointer-events: none; }
.form__progress-fill { display: block; height: 100%; background: var(--g-brand); transform-origin: left; transform: scaleX(var(--fp, 0)); transition: transform .5s var(--ease-out); }
.form.is-sent .form__progress-fill { transform: scaleX(1); }

.form.has-progress [type="submit"] { position: relative; transition: width .55s var(--ease-out), padding .55s var(--ease-out), border-radius .55s var(--ease-out), background .3s ease; }
.form.has-progress.is-sent [type="submit"] { width: var(--btn-h, 3.5rem); height: var(--btn-h, 3.5rem); padding: 0; border-radius: 50%; justify-content: center; overflow: hidden; }
.form.has-progress .btn__label, .form.has-progress .btn__icon { transition: opacity .2s ease; }
.form.has-progress.is-sent .btn__label, .form.has-progress.is-sent .btn__icon { opacity: 0; position: absolute; }
.form__tick { position: absolute; inset: 0; margin: auto; width: 1.4rem; height: 1.4rem; opacity: 0; fill: none; stroke: var(--btn-fg, var(--on-g, currentColor)); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.form__tick path { stroke-dasharray: 26; stroke-dashoffset: 26; }
.form.is-sent .form__tick { opacity: 1; }
.form.is-sent .form__tick path { stroke-dashoffset: 0; transition: stroke-dashoffset .45s var(--ease-out) .35s; }
@media (prefers-reduced-motion: reduce) {
  .form__progress-fill, .form.has-progress [type="submit"], .form.is-sent .form__tick path { transition: none; }
}

/* ==========================================================================
   Motion: home-work
   ========================================================================== */
/* home-work: services bento motion · work filter shuffle · case-study browser rise.  Light = grey->black via tokens. */

/* ===== Bento: readable text on the gradient card (token driven) ===== */
.bento__item--brand { --fg: var(--on-g, var(--ink)); --fg-2: color-mix(in srgb, var(--on-g, var(--ink)) 78%, transparent); color: var(--on-g, var(--ink)); }
.bento__item--brand .bento__text,
.bento__item--brand .bento__num { color: var(--fg-2); }
.bento__item--brand .icon-disc {
  background: color-mix(in srgb, var(--on-g, var(--ink)) 16%, transparent);
  color: var(--on-g, var(--ink));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-g, var(--ink)) 28%, transparent);
}
.bento .icon-disc { color: var(--on-g, var(--ink)); }
.bento__item--brand :focus-visible { outline-color: var(--on-g, currentColor); }

/* Pointer spotlight (position set by JS) */
.bento__item { --mx: 50%; --my: 50%; --spot: color-mix(in srgb, var(--fg) 9%, transparent); }
.bento__item--dark { --spot: color-mix(in srgb, var(--paper) 11%, transparent); }
.bento__item--brand { --spot: color-mix(in srgb, var(--on-g, var(--paper)) 22%, transparent); }
.bento__item::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  background: radial-gradient(26rem circle at var(--mx) var(--my), var(--spot), transparent 62%);
  transition: opacity var(--dur-2) var(--ease-hover);
}
@media (hover: hover) and (pointer: fine) {
  .bento__item.is-spot::before { opacity: 1; }
}
/* the wide cards' art sits above the glow */
.bento__art { z-index: -1; }
.bento__art span { will-change: auto; }

@media (prefers-reduced-motion: no-preference) {
  /* --- Web Design: panes fan out and settle (on reveal + hover) --- */
  .art-windows span { transition: translate var(--dur-2) var(--ease-hover), rotate var(--dur-2) var(--ease-hover), scale var(--dur-2) var(--ease-hover); }
  @keyframes hw-fan-1 { 0% { translate: 0 12%; scale: .92; opacity: 0; rotate: 0deg; } 45% { translate: -7% -5%; rotate: -4deg; opacity: 1; } 100% { translate: 0 0; rotate: 0deg; scale: 1; opacity: 1; } }
  @keyframes hw-fan-2 { 0% { translate: 0 12%; scale: .92; opacity: 0; rotate: 0deg; } 45% { translate: 5% -3%; rotate: 3deg; opacity: 1; } 100% { translate: 0 0; rotate: 0deg; scale: 1; opacity: 1; } }
  @keyframes hw-fan-3 { 0% { translate: 0 14%; scale: .92; opacity: 0; rotate: 0deg; } 45% { translate: -2% 7%; rotate: 2deg; opacity: 1; } 100% { translate: 0 0; rotate: 0deg; scale: 1; opacity: 1; } }
  .js .reveal.is-in .art-windows span:nth-child(1) { animation: hw-fan-1 1.5s var(--ease-out) .35s backwards; }
  .js .reveal.is-in .art-windows span:nth-child(2) { animation: hw-fan-2 1.5s var(--ease-out) .45s backwards; }
  .js .reveal.is-in .art-windows span:nth-child(3) { animation: hw-fan-3 1.5s var(--ease-out) .55s backwards; }

  /* --- Web Development: rings breathe, disc drifts --- */
  @keyframes hw-ring-once { 0% { scale: 1; } 40% { scale: 1.07; } 100% { scale: 1; } }
  @keyframes hw-breathe { from { scale: 1; } to { scale: 1.08; } }
  @keyframes hw-drift { 0% { translate: 0 0; } 50% { translate: 7% -6%; } 100% { translate: -5% 4%; } }
  .art-rings span { transform-origin: 50% 50%; }
  .js .reveal.is-in .art-rings span:nth-child(1) { animation: hw-ring-once 1.8s var(--ease-in-out) .5s 1; }
  .js .reveal.is-in .art-rings span:nth-child(2) { animation: hw-ring-once 1.8s var(--ease-in-out) .62s 1; }
  .js .reveal.is-in .art-rings span:nth-child(3) { animation: hw-ring-once 1.8s var(--ease-in-out) .74s 1; }

  /* --- Small cards: icon draws in on reveal --- */
  @keyframes hw-pop { from { scale: .6; rotate: -12deg; opacity: 0; } to { scale: 1; rotate: 0deg; opacity: 1; } }
  @keyframes hw-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  .js .bento__item:not(.bento__item--wide).is-in .icon-disc { animation: hw-pop .8s var(--ease-out) calc(var(--i, 0) * 80ms + .15s) backwards; }
  .js .bento__item:not(.bento__item--wide).is-in .icon-disc svg > * { stroke-dasharray: 1; animation: hw-draw 1s var(--ease-out) calc(var(--i, 0) * 80ms + .4s) backwards; }
  .icon-disc { transition: translate var(--dur-hover) var(--ease-hover), rotate var(--dur-hover) var(--ease-hover), scale var(--dur-hover) var(--ease-hover); }
  .icon-disc .icon { transition: translate var(--dur-hover) var(--ease-hover); }

  @media (hover: hover) and (pointer: fine) {
    .bento__item--dark:hover .art-windows span:nth-child(1), .bento__item--dark:focus-within .art-windows span:nth-child(1) { translate: -6% -5%; rotate: -3.5deg; }
    .bento__item--dark:hover .art-windows span:nth-child(2), .bento__item--dark:focus-within .art-windows span:nth-child(2) { translate: 4% -3%; rotate: 2.5deg; }
    .bento__item--dark:hover .art-windows span:nth-child(3), .bento__item--dark:focus-within .art-windows span:nth-child(3) { translate: -2% 6%; rotate: 1.5deg; scale: 1.03; }

    .js .reveal.is-in.bento__item--brand:is(:hover,:focus-within) .art-rings span:is(:nth-child(1),:nth-child(2)) { animation: hw-breathe 2.6s var(--ease-in-out) infinite alternate; }
    .js .reveal.is-in.bento__item--brand:is(:hover,:focus-within) .art-rings span:nth-child(2) { animation-delay: -.5s; }
    .js .reveal.is-in.bento__item--brand:is(:hover,:focus-within) .art-rings span:nth-child(3) { animation: hw-drift 4.2s var(--ease-in-out) infinite alternate; }

    .bento__item:not(.bento__item--wide):hover .icon-disc { translate: 0 -3px; rotate: -5deg; scale: 1.07; }
    .bento__item:not(.bento__item--wide):hover .icon-disc .icon { translate: 1px -1px; }
  }
}

/* ===== Work archive: filter shuffle ===== */
.work-grid { position: relative; }
.work-grid > .hw-ghost { position: absolute; margin: 0; pointer-events: none; z-index: 2; }

/* ===== Case study: site rises and scrolls inside the frame ===== */
.project-cover { perspective: 1600px; perspective-origin: 50% 20%; }
@media (prefers-reduced-motion: no-preference) {
  .project-cover { view-timeline: --hw-cover block; }
  .project-cover .mock { transform-origin: 50% 100%; }
  .project-cover .cover__img { transform-origin: 50% 0; scale: 1.12; }
  @supports (animation-timeline: view()) {
    @keyframes hw-rise { from { transform: rotateX(25deg) translateY(7%); box-shadow: var(--shadow-s); } to { transform: none; box-shadow: var(--shadow-l); } }
    @keyframes hw-scroll { from { translate: 0 0; } to { translate: 0 -10.6%; } }
    .project-cover .mock { animation: hw-rise linear both; animation-timeline: --hw-cover; animation-range: entry 0% entry 85%; }
    .project-cover .cover__img { animation: hw-scroll linear both; animation-timeline: --hw-cover; animation-range: entry 60% exit 40%; }
  }
  @supports not (animation-timeline: view()) {
    .js .project-cover .mock { transform: rotateX(calc((1 - var(--hw-rise, 1)) * 25deg)) translateY(calc((1 - var(--hw-rise, 1)) * 7%)); box-shadow: var(--shadow-l); }
    .js .project-cover .cover__img { translate: 0 calc(var(--hw-scroll, 0) * -10.6%); }
  }
}

/* ==========================================================================
   Motion: journal-article
   ========================================================================== */
/* journal-article: topic pill slides, card settle, live contents, article progress and media reveals */

/* ---- Journal topics: sliding pills ------------------------------------------------------------ */
.topics { position: relative; }
.topics__pill {
  position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; border-radius: var(--radius-m);
  transform: translate3d(var(--x, 0px), var(--y, 0px), 0); width: var(--w, 0px); height: var(--h, 0px);
  opacity: 0;
}
.topics__pill--active { background: var(--fg); }
.topics__pill--hover { background: color-mix(in srgb, var(--fg) 8%, transparent); }
.topics.is-live .topics__pill--active { opacity: 1; }
.topics.is-live .topics__pill--hover.is-on { opacity: 1; }
.topics.is-live .topic { z-index: 1; background: transparent; }
.topics.is-live .topic:hover { transform: none; box-shadow: none; }
.topics.is-live .topic[aria-current="page"] { border-color: transparent; box-shadow: none; color: var(--bg); }
.topics.is-live .topic[aria-current="page"] .topic__count { background: color-mix(in srgb, var(--bg) 20%, transparent); color: var(--bg); }
.topics.is-live .topic[aria-current="page"]::after { display: none; }
.topics.is-live .topic { transition: border-color var(--dur-1) ease, color var(--dur-1) ease; }
.topics.is-live .topic__count { transition: background var(--dur-1) ease, color var(--dur-1) ease; }
.topics.is-live .topic:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .topics.is-ready .topics__pill { transition: transform .55s var(--ease-out), width .55s var(--ease-out), height .55s var(--ease-out), opacity .3s ease; }
  .topics.is-ready .topics__pill--hover.is-snap { transition: opacity .3s ease; }
  /* First-viewport cards settle in with a short stagger (index set by JS). */
  .js .post-card.settle:not(.is-in) { translate: 0 16px; }
  .js .post-card.settle.is-in { animation-duration: .8s; }
}

/* ---- Article: contents shown from 75em, collapsible block below ---------------------------------- */
@media (min-width: 64em) and (max-width: 74.99em) {
  .article-layout { grid-template-columns: minmax(0, 45rem); justify-content: center; }
  .article-aside { display: none; }
  .toc--mobile { display: block; }
}
@media (min-width: 75em) {
  .article-layout { grid-template-columns: 15rem minmax(0, 45rem); }
  .article-aside { display: block; }
  .toc--mobile { display: none; }
}
.toc__list { position: relative; }
.toc__marker {
  position: absolute; left: -1px; top: 0; width: 2px; height: 1px; transform-origin: 0 0; pointer-events: none;
  background: var(--g-brand); opacity: 0; transform: translateY(var(--y, 0px)) scaleY(var(--h, 1));
}
.toc.is-live .toc__marker { opacity: 1; }
.toc.is-live .toc__list a[aria-current="true"] { border-left-color: transparent; }
.toc.is-live .toc__list a { transition: color var(--dur-1) ease, background var(--dur-1) ease; }
@media (prefers-reduced-motion: no-preference) {
  .toc.is-ready .toc__marker { transition: transform .5s var(--ease-out), opacity .3s ease; }
}

/* ---- Article reading progress: the existing top bar follows the article ------------------------- */
.scroll-progress.is-article { height: 3px; animation: none; transform: scaleX(var(--read-p, 0)); }

/* ---- Article headings (h3) mask, images wipe ----------------------------------------------------- */
.hm { display: block; overflow: clip; overflow-clip-margin: .2em; }
.hm__i { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .js .hm__i { transition: translate .9s var(--ease-out); }
  .js .hm:not(.is-in) .hm__i { translate: 0 110%; }
  .js .art-wipe { transition: clip-path 1.1s var(--ease-out); }
  .js .art-wipe:not(.is-seen) { clip-path: inset(0 100% 0 0 round var(--radius-m)); }
  .js .art-wipe.is-seen { clip-path: inset(0 0 0 0 round var(--radius-m)); }
}

/* ==========================================================================
   Motion: pricing-audit
   ========================================================================== */
/* pricing-audit: rolling totals (pricing) and the scan sweep (website audit). Tokens only; motion is opt-in. */

/* Pricing ---------------------------------------------------------------- */
.pa-rolling { color: transparent !important; -webkit-text-fill-color: transparent; }
.pa-roll { position: absolute; z-index: 1; display: block; pointer-events: none; white-space: nowrap; overflow: hidden; }
.pa-roll__row { display: inline-flex; vertical-align: top; }
.pa-roll__col { display: inline-block; overflow: hidden; position: relative; }
.pa-roll__col.is-static { overflow: visible; white-space: pre; }
.pa-roll__strip { display: flex; flex-direction: column; will-change: transform; }
.pa-roll__strip > span { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .calc__rows .chart__bar { transition: width .85s cubic-bezier(.34, 1.3, .64, 1), filter var(--dur-1) ease; }
}

/* Audit scan ------------------------------------------------------------- */
.check-progress.has-scan { flex-direction: column; gap: 1.25rem; padding: clamp(1.25rem, 3vw, 2rem); }
.check-progress.has-scan .check-progress__ring { display: none; }
.scan-ghost { position: absolute; inset: 0 auto auto 0; width: 100%; background: var(--bg); z-index: 2; pointer-events: none; }
.check-section .container { position: relative; }
.scan { display: grid; gap: 1.1rem; justify-items: center; width: 100%; }
.scan__page { position: relative; width: min(100%, 22rem); aspect-ratio: 16 / 11; overflow: hidden; border-radius: var(--radius-m, .9rem); background: var(--surface, var(--bg-2)); border: 1px solid var(--line-strong); box-shadow: var(--shadow-l, none); }
.scan__bar { display: flex; align-items: center; gap: .3rem; padding: .5rem .6rem; border-bottom: 1px solid var(--line); }
.scan__bar i { width: .42rem; height: .42rem; border-radius: 50%; background: var(--line-strong); }
.scan__bar b { flex: 1; height: .55rem; margin-left: .5rem; border-radius: 99px; background: var(--line); }
.scan__body { display: grid; gap: .5rem; padding: .7rem .75rem; }
.scan__hero { height: 2.6rem; border-radius: .4rem; background: color-mix(in srgb, var(--fg) 9%, transparent); }
.scan__line { height: .4rem; border-radius: 99px; background: color-mix(in srgb, var(--fg) 12%, transparent); }
.scan__line--w80 { width: 80%; } .scan__line--w60 { width: 60%; } .scan__line--w40 { width: 40%; }
.scan__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; }
.scan__cards i { height: 1.7rem; border-radius: .35rem; background: color-mix(in srgb, var(--fg) 7%, transparent); border: 1px solid var(--line); }
.scan__sweep { position: absolute; inset: 0; pointer-events: none; transform: translateY(-100%); background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--amber) 22%, transparent)); border-bottom: 2px solid var(--amber); box-shadow: 0 6px 22px color-mix(in srgb, var(--amber) 55%, transparent); will-change: transform; }
.scan__sweep::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: linear-gradient(90deg, transparent, var(--lemon), var(--coral), transparent); }
.scan__marks { position: absolute; inset: 0; pointer-events: none; }
.scan__mark { position: absolute; width: .85rem; height: .85rem; margin: -.425rem 0 0 -.425rem; border-radius: 50%; opacity: 0; transform: scale(0); background: var(--c-good); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-good) 25%, transparent); }
.scan__mark--mid { background: var(--c-mid); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-mid) 25%, transparent); }
.scan__mark--poor { background: var(--c-poor); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-poor) 25%, transparent); }
.scan__mark.is-on { opacity: 1; transform: none; }
.scan__steps { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem .5rem; list-style: none; margin: 0; padding: 0; }
.scan__step { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: 99px; border: 1px solid var(--line); color: var(--fg-2); font-size: .8rem; opacity: .4; }
.scan__step i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--line-strong); }
.scan__step.is-on { opacity: 1; border-color: var(--line-strong); color: var(--fg); }
.scan__step--good.is-on i { background: var(--c-good); }
.scan__step--mid.is-on i { background: var(--c-mid); }
.scan__step--poor.is-on i { background: var(--c-poor); }
@media (prefers-reduced-motion: no-preference) {
  .scan__sweep { animation: pa-sweep 2.3s cubic-bezier(.45, 0, .55, 1) infinite; }
  .scan__mark { transition: opacity .2s ease, transform .55s cubic-bezier(.34, 1.7, .64, 1); transform: scale(0); }
  .scan__mark.is-on { transform: scale(1); }
  .scan__step { transition: opacity .4s var(--ease-out), border-color .4s var(--ease-out), color .4s var(--ease-out); }
  .scan__step.is-on i { animation: pa-pop .5s cubic-bezier(.34, 1.7, .64, 1); }
  .scan__hero, .scan__line { animation: pa-pulse 1.8s ease-in-out infinite; }
  @keyframes pa-sweep { 0% { transform: translateY(-100%); } 85%, 100% { transform: translateY(0); } }
  @keyframes pa-pop { from { transform: scale(0); } to { transform: scale(1); } }
  @keyframes pa-pulse { 50% { opacity: .55; } }
}
@media (prefers-reduced-motion: reduce) { .scan__sweep { transform: translateY(-50%); } }

/* ==========================================================================
   Motion: services
   ========================================================================== */
/* Services: sticky discipline rail (archive) + deliverables tick-off (single). */

/* ---- Archive rail ---- */
.svc-rail { display: none; }
@media (min-width: 64em) {
  .svc-layout { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
  .svc-rail { display: block; position: sticky; top: calc(var(--admin-h) + var(--header-h) + 2rem); padding-block: .5rem; }
  .svc-rail__list { list-style: none; margin: 0; padding: 0 0 0 1px; position: relative; border-left: 1px solid var(--line); }
  .svc-rail__marker {
    position: absolute; left: 0; top: 0; width: 3px; height: var(--m-h, 2.5rem); border-radius: 3px;
    background: var(--g-brand); transform: translateY(var(--m-y, 0)); opacity: 0;
    transition: transform .55s var(--ease-out), height .55s var(--ease-out), opacity .3s ease;
    z-index: 1; will-change: transform;
  }
  .svc-rail.has-marker .svc-rail__marker { opacity: 1; }
  .svc-rail__link {
    display: flex; gap: .85rem; align-items: baseline; padding: .65rem 0 .65rem 1.1rem; text-decoration: none;
    color: var(--fg-2); font-family: var(--font-display); font-weight: 500; letter-spacing: -.01em;
    transition: color .3s var(--ease-hover), transform .45s var(--ease-hover);
  }
  .svc-rail__num { font-size: var(--fs--1); font-variant-numeric: tabular-nums; color: var(--fg-2); min-width: 1.6rem; }
  .svc-rail__link:hover { color: var(--fg); }
  .svc-rail__link[aria-current="true"] { color: var(--fg); transform: translateX(.25rem); }
  .svc-rail__link:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; border-radius: .4rem; }

  .svc-layout .service-row { grid-template-columns: 3rem minmax(0, 1fr) 3rem; min-height: clamp(14rem, 34vh, 20rem); align-content: start; }
  .svc-layout .service-row__list { grid-column: 2; grid-row: 2; }
  .svc-layout .service-row__arrow { grid-column: 3; grid-row: 1; }
  .svc-layout .service-row:hover { padding-left: 0; }
  .svc-layout .service-row.is-current .service-row__num { color: var(--fg); }
  .svc-layout .service-row__num { transition: color .3s var(--ease-hover); }
}

/* ---- Single: deliverables tick off ---- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-tick-list] li > span { color: var(--fg-2); transition: color .5s var(--ease-out); transition-delay: calc(var(--t, 0) * 120ms + 220ms); }
  .js [data-tick-list] li > .icon { transform: scale(0); opacity: 0; }
  .js [data-tick-list].is-in li > span { color: var(--fg); }
  .js [data-tick-list].is-in li > .icon { animation: zen-tick .6s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(var(--t, 0) * 120ms); }
  @keyframes zen-tick { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
}

.checks[data-tick-list] .icon { color: var(--on-g, var(--ink)); }

/* ==========================================================================
   audit-radar
   ========================================================================== */
/* Audit radar — "Six areas" section: cards around a radar chart (sections/audit-areas). */
.audit-radar { --ar-card: var(--surface); --ar-t: 6s; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .audit-radar { --ar-card: var(--bg); } }
:root[data-theme="dark"] .audit-radar { --ar-card: var(--bg); }

.audit-radar .audit-area { background: var(--ar-card); }

/* Layout: chart on top, then the cards (1 / 2 columns); three columns from 64em. */
.audit-areas--radar { align-items: stretch; }
.audit-areas--radar .audit-radar__box { grid-column: 1 / -1; }
@media (min-width: 64em) {
  .audit-areas--radar { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: repeat(3, auto); align-items: stretch; }
  .audit-areas--radar .audit-radar__box { grid-column: 2; grid-row: 1 / 4; align-self: center; }
  .audit-areas--radar .audit-area { grid-column: 3; }
  .audit-areas--radar .audit-area[data-k="0"] { grid-row: 1; }
  .audit-areas--radar .audit-area[data-k="1"] { grid-row: 2; }
  .audit-areas--radar .audit-area[data-k="2"] { grid-row: 3; }
  .audit-areas--radar .audit-area[data-k="3"] { grid-column: 1; grid-row: 3; }
  .audit-areas--radar .audit-area[data-k="4"] { grid-column: 1; grid-row: 2; }
  .audit-areas--radar .audit-area[data-k="5"] { grid-column: 1; grid-row: 1; }
}

/* Chart card */
.audit-radar__box { border-radius: var(--radius-l); background: var(--ar-card); border: 1px solid var(--line); padding: clamp(.75rem, 2vw, 1.25rem); display: grid; gap: .75rem; }
.audit-radar__chart { position: relative; aspect-ratio: 360 / 340; max-width: 26rem; width: 100%; justify-self: center; }
.audit-radar__chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* Sweep: a circle inscribed in the hexagon (apothem 104 of 360). */
.audit-radar__sweep { position: absolute; inset: 0; margin: auto; width: 57.7%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from -30deg, transparent 0deg, color-mix(in srgb, var(--coral) 18%, transparent) 55deg, transparent 60deg);
  -webkit-mask: radial-gradient(closest-side, #000 99%, transparent); mask: radial-gradient(closest-side, #000 99%, transparent);
  animation: ar-sweep var(--ar-t) linear infinite; }
.rd-grid { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.rd-before { fill: color-mix(in srgb, var(--fg) 8%, transparent); stroke: var(--fg-2); stroke-dasharray: 4 3; stroke-width: 1.5; }
.rd-after { fill-opacity: .3; stroke-width: 2.5; stroke-linejoin: round; transform-box: view-box; transform-origin: 180px 170px; animation: ar-after var(--ar-t) var(--ease-in-out) infinite; }
.rd-lbl { font-family: var(--font-body, inherit); font-size: 13.5px; font-weight: 700; fill: var(--fg); text-anchor: middle; transform-box: fill-box; transform-origin: center; transition: transform .35s var(--ease-hover); }
.audit-radar__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.4rem; margin: 0; font-size: var(--fs--1); font-weight: 600; color: var(--fg-2); }
.audit-radar__legend span { display: inline-flex; align-items: center; gap: .5rem; }
.audit-radar__key { display: inline-block; width: 1.1rem; height: .4rem; border-radius: 99px; }
.audit-radar__key--before { border: 1.5px dashed var(--fg-2); height: 0; }
.audit-radar__key--after { background: var(--g-brand); }

/* Cards light up as the sweep passes: card k is delayed by k/6 of the period. */
/* The sweep animates one number (--ar-hi); the card's lift, border and shadow follow it, so a hover can still win. */
@property --ar-hi { syntax: "<number>"; inherits: false; initial-value: 0; }
.audit-radar .audit-area {
  animation: ar-hi var(--ar-t) var(--ease-in-out) infinite; animation-delay: calc(var(--k, 0) * var(--ar-t) / 6);
  translate: 0 calc(var(--ar-hi) * -3px);
  border-color: color-mix(in srgb, var(--fg) calc(var(--ar-hi) * 100%), var(--line));
  box-shadow: 0 16px 34px -22px rgb(0 0 0 / calc(var(--ar-hi) * .5));
}
@keyframes ar-sweep { to { transform: rotate(360deg); } }
@keyframes ar-hi { 0%, 12% { --ar-hi: 1; } 22%, 100% { --ar-hi: 0; } }
@keyframes ar-after {
  0%, 20% { transform: scale(.45); opacity: 0; }
  45%, 88% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}

/* Pause only when off-screen (class set by audit-radar.js); hovering never stops the sweep. */
.audit-radar.is-idle :is(.audit-radar__sweep, .rd-after, .audit-area) { animation-play-state: paused; }

/* Card hover: lift, ink border, and the icon tile fills with the gradient and tilts. */
.audit-area .icon-disc { transition: background-color .35s ease, color .35s ease, transform .55s cubic-bezier(.34, 1.56, .64, 1); }
@media (hover: hover) {
  .audit-area:hover, .audit-radar .audit-area:hover { transform: translateY(-6px); border-color: var(--fg); box-shadow: var(--shadow-m); }
  .audit-area:hover .icon-disc { background: var(--g-brand); color: var(--on-g); transform: rotate(-8deg) scale(1.08); }
}

/* A hovered card marks its axis label. */
.audit-areas--radar:has(.audit-area:hover) .rd-lbl { opacity: .55; }
.audit-areas--radar:has(.audit-area[data-k="0"]:hover) .rd-lbl[data-k="0"],
.audit-areas--radar:has(.audit-area[data-k="1"]:hover) .rd-lbl[data-k="1"],
.audit-areas--radar:has(.audit-area[data-k="2"]:hover) .rd-lbl[data-k="2"],
.audit-areas--radar:has(.audit-area[data-k="3"]:hover) .rd-lbl[data-k="3"],
.audit-areas--radar:has(.audit-area[data-k="4"]:hover) .rd-lbl[data-k="4"],
.audit-areas--radar:has(.audit-area[data-k="5"]:hover) .rd-lbl[data-k="5"] { opacity: 1; transform: scale(1.14); text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .audit-radar__sweep { display: none; }
  .audit-radar .audit-area, .rd-after { animation: none; }
}

/* ==========================================================================
   audit-ring
   ========================================================================== */
/* Audit tiers: "scope ring" cards. Colours via tokens only. */
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
:root { --tr-bg: var(--surface); --tr-bg-feat: var(--surface); --tr-edge: var(--fg); --tr-art: color-mix(in srgb, var(--fg) 5%, transparent); --tr-mute: color-mix(in srgb, var(--fg) 14%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --tr-bg: var(--bg-2); --tr-bg-feat: var(--band-bg); --tr-edge: var(--line); } }
:root[data-theme="dark"] { --tr-bg: var(--bg-2); --tr-bg-feat: var(--band-bg); --tr-edge: var(--line); }

.tier { background: var(--tr-bg); border-color: var(--tr-edge); transition: transform .5s var(--ease-hover), box-shadow .5s var(--ease-hover); }
.tier--featured { background: var(--tr-bg-feat); border-color: var(--tr-edge); overflow: visible; isolation: isolate; }
.tier--featured::before { content: ""; position: absolute; inset: -2px; width: auto; aspect-ratio: auto; border-radius: inherit; padding: 2px; z-index: -1; background: conic-gradient(from var(--ang), var(--lemon), var(--sun), var(--amber), var(--coral), transparent 60%, var(--lemon)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .tier--featured::before { animation: tier-spin 9s linear infinite; } }
@keyframes tier-spin { to { --ang: 360deg; } }
@media (hover: hover) and (pointer: fine) {
	.tier:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -34px rgb(0 0 0 / .4); }
	.tier:hover .tier__credit { transform: none; border-color: var(--fg); }
}

.tier__art { border-radius: 1.1rem; background: var(--tr-art); overflow: hidden; }
.tier__art svg { display: block; width: 100%; height: auto; font-family: inherit; }
.seg { fill: none; stroke-width: 10; stroke-linecap: butt; }
.seg-base { stroke: var(--tr-mute); }
.seg-lit { opacity: 0; }
.ring-txt { font-size: 9px; font-weight: 700; fill: var(--fg); text-anchor: middle; }
.ring-big { font-size: 22px; font-weight: 800; fill: var(--fg); text-anchor: middle; letter-spacing: -1px; }
.ring-sm { font-size: 7.5px; font-weight: 700; fill: var(--fg-2); text-anchor: middle; letter-spacing: .8px; }
.ring-note { font-size: 9px; font-weight: 600; fill: var(--fg-2); }
.pip { fill: var(--tr-mute); }
.pip-on { transform-box: fill-box; transform-origin: center; }
/* Static (reduced-motion) state: Focused shows the first area, Full lights everything. */
.ring--one .ring-name { opacity: 0; }
.ring--one .ring-name:first-of-type { opacity: 1; }
.ring--one .seg-lit:nth-of-type(2) { opacity: 1; }
.ring--all .seg-lit { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
	.ring--one .seg-lit, .ring--one .ring-name { animation: seg-one-6 6s steps(1) infinite; animation-delay: calc(var(--i) * 1s); }
	.ring--one .seg-lit:nth-of-type(2), .ring--one .ring-name:first-of-type { opacity: 0; }
	.ring--all .seg-lit { opacity: 0; animation: seg-all 6s var(--ease-in-out) infinite; animation-delay: calc(var(--i) * 2.1s / var(--n)); }
	.pip-on { opacity: 0; animation: pip 6s var(--ease-in-out) infinite; animation-delay: calc(var(--i) * .3s + .4s); }
}
@keyframes seg-all { 0% { opacity: 0; } 8%, 80% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes pip { 0% { opacity: 0; transform: scale(.4); } 8%, 85% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }

.tier__credit { position: relative; display: flex; align-items: center; gap: .7rem; margin: .25rem 0 0; padding: .7rem .9rem; border-radius: .8rem; border: 1px dashed var(--line-strong); font-size: .85rem; color: var(--fg-2); transform: translateY(4px); transition: transform .5s var(--ease-hover), border-color .4s; }
.tier__credit b { color: var(--fg); }
.tier__credit-disc { display: grid; place-items: center; flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--g-brand); color: var(--on-g); font-weight: 800; font-size: .85rem; }
@keyframes seg-one-1 { 0% { opacity: 1; } 100.00%, 100% { opacity: 0; } }
@keyframes seg-one-2 { 0% { opacity: 1; } 50.00%, 100% { opacity: 0; } }
@keyframes seg-one-3 { 0% { opacity: 1; } 33.33%, 100% { opacity: 0; } }
@keyframes seg-one-4 { 0% { opacity: 1; } 25.00%, 100% { opacity: 0; } }
@keyframes seg-one-5 { 0% { opacity: 1; } 20.00%, 100% { opacity: 0; } }
@keyframes seg-one-6 { 0% { opacity: 1; } 16.67%, 100% { opacity: 0; } }
@keyframes seg-one-7 { 0% { opacity: 1; } 14.29%, 100% { opacity: 0; } }
@keyframes seg-one-8 { 0% { opacity: 1; } 12.50%, 100% { opacity: 0; } }
@keyframes seg-one-9 { 0% { opacity: 1; } 11.11%, 100% { opacity: 0; } }
@keyframes seg-one-10 { 0% { opacity: 1; } 10.00%, 100% { opacity: 0; } }
@keyframes seg-one-11 { 0% { opacity: 1; } 9.09%, 100% { opacity: 0; } }
@keyframes seg-one-12 { 0% { opacity: 1; } 8.33%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) { .ring-n1 .ring--one .seg-lit, .ring-n1 .ring--one .ring-name { animation-name: seg-one-1; animation-duration: 1s; } }
@media (prefers-reduced-motion: no-preference) { .ring-n2 .ring--one .seg-lit, .ring-n2 .ring--one .ring-name { animation-name: seg-one-2; animation-duration: 2s; } }
@media (prefers-reduced-motion: no-preference) { .ring-n3 .ring--one .seg-lit, .ring-n3 .ring--one .ring-name { animation-name: seg-one-3; animation-duration: 3s; } }
@media (prefers-reduced-motion: no-preference) { .ring-n4 .ring--one .seg-lit, .ring-n4 .ring--one .ring-name { animation-name: seg-one-4; animation-duration: 4s; } }
@media (prefers-reduced-motion: no-preference) { .ring-n5 .ring--one .seg-lit, .ring-n5 .ring--one .ring-name { animation-name: seg-one-5; animation-duration: 5s; } }
@media (prefers-reduced-motion: no-preference) { .ring-n7 .ring--one .seg-lit, .ring-n7 .ring--one .ring-name { animation-name: seg-one-7; animation-duration: 7s; } }
@media (prefers-reduced-motion: no-preference) { .ring-n8 .ring--one .seg-lit, .ring-n8 .ring--one .ring-name { animation-name: seg-one-8; animation-duration: 8s; } }
@media (prefers-reduced-motion: no-preference) { .ring-n9 .ring--one .seg-lit, .ring-n9 .ring--one .ring-name { animation-name: seg-one-9; animation-duration: 9s; } }
@media (prefers-reduced-motion: no-preference) { .ring-n10 .ring--one .seg-lit, .ring-n10 .ring--one .ring-name { animation-name: seg-one-10; animation-duration: 10s; } }
@media (prefers-reduced-motion: no-preference) { .ring-n11 .ring--one .seg-lit, .ring-n11 .ring--one .ring-name { animation-name: seg-one-11; animation-duration: 11s; } }
@media (prefers-reduced-motion: no-preference) { .ring-n12 .ring--one .seg-lit, .ring-n12 .ring--one .ring-name { animation-name: seg-one-12; animation-duration: 12s; } }

/* --------------------------------------------------------------------------
   Light mode: colour on hover, per element. Gradients are grey-to-black in light mode; hovering a single card,
   heading or button fades its own gradient (and everything inside it: icon tiles, gradient words, stars, bars, the
   hero card's art) back to the ember colours. The four stops are registered so they can transition, and each unit
   rebuilds --g-brand from its own (fading) stops.
   -------------------------------------------------------------------------- */
@property --lemon { syntax: "<color>"; inherits: true; initial-value: #6e6e74; }
@property --sun { syntax: "<color>"; inherits: true; initial-value: #55555b; }
@property --amber { syntax: "<color>"; inherits: true; initial-value: #2e2e33; }
@property --coral { syntax: "<color>"; inherits: true; initial-value: #0b0b0c; }
@property --on-g { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
:is(.card, .cta, .audit-promo, .site-footer .menu a, .site-footer address a, .site-footer__company a, .site-footer__big, .bento__item, .feature, .tier, .usp-card, .audit-area, .quote, .stat, .post-card, .work-card, .tl__item, .service-row, .rd__chart-box, .tile, .examples > *, .btn, .ex-card, .hv-card) {
  --g-brand: linear-gradient(120deg, var(--lemon) 0%, var(--sun) 25%, var(--amber) 60%, var(--coral) 100%);
  --g-brand-soft: linear-gradient(120deg, color-mix(in srgb, var(--lemon) 35%, transparent), color-mix(in srgb, var(--sun) 30%, transparent), color-mix(in srgb, var(--amber) 28%, transparent), color-mix(in srgb, var(--coral) 30%, transparent));
}
:is(.card, .cta, .audit-promo, .site-footer .menu a, .site-footer address a, .site-footer__company a, .site-footer__big, .bento__item, .feature, .tier, .usp-card, .audit-area, .quote, .stat, .post-card, .work-card, .tl__item, .service-row, .rd__chart-box, .tile, .examples > *) {
  transition: transform var(--dur-hover) var(--ease-hover), box-shadow var(--dur-hover) var(--ease-hover), border-color var(--dur-2) ease, background-color var(--dur-2) ease, color var(--dur-1) ease,
    --lemon .6s ease, --sun .6s ease, --amber .6s ease, --coral .6s ease, --on-g .6s ease;
}
.btn { transition: transform var(--dur-hover) var(--ease-hover), background var(--dur-1) ease, color var(--dur-1) ease, border-color var(--dur-1) ease, box-shadow var(--dur-hover) var(--ease-hover), --lemon .6s ease, --sun .6s ease, --amber .6s ease, --coral .6s ease, --on-g .6s ease; }
.ex-card { transition: flex-grow .8s var(--ease-out), border-color .4s ease, box-shadow .5s var(--ease-out), --lemon .6s ease, --sun .6s ease, --amber .6s ease, --coral .6s ease, --on-g .6s ease; }
@media (hover: hover) {
  :root:not([data-theme="dark"]) :is(.card, .cta, .audit-promo, .site-footer .menu a, .site-footer address a, .site-footer__company a, .site-footer__big, .bento__item, .feature, .tier, .usp-card, .audit-area, .quote, .stat, .post-card, .work-card, .tl__item, .service-row, .rd__chart-box, .tile, .examples > *, .btn, .ex-card, .hv-card):hover { --lemon: #fff33b; --sun: #fdc70c; --amber: #f3903f; --coral: #e95c3a; --on-g: #0b0b0c; }
}
:root:not([data-theme="dark"]) :is(.card, .cta, .audit-promo, .site-footer .menu a, .site-footer address a, .site-footer__company a, .site-footer__big, .bento__item, .feature, .tier, .usp-card, .audit-area, .quote, .stat, .post-card, .work-card, .tl__item, .service-row, .rd__chart-box, .tile, .examples > *, .btn, .ex-card, .hv-card):focus-visible { --lemon: #fff33b; --sun: #fdc70c; --amber: #f3903f; --coral: #e95c3a; --on-g: #0b0b0c; }
@media (prefers-reduced-motion: reduce) {
  :is(.card, .cta, .audit-promo, .site-footer .menu a, .site-footer address a, .site-footer__company a, .site-footer__big, .bento__item, .feature, .tier, .usp-card, .audit-area, .quote, .stat, .post-card, .work-card, .tl__item, .service-row, .rd__chart-box, .tile, .examples > *, .btn, .ex-card, .hv-card) { transition-duration: .01ms !important; }
}

/* --------------------------------------------------------------------------
   Ink lens on headings (h1, h2 in the page). While the pointer is over a heading, main.js adds a decorative copy
   (.ink-lens, aria-hidden) on top of it; a circle of ink follows the pointer and, inside it, the heading reads cream
   with the highlighted word in full brand colour. Colour only ever sits on ink: 5.7:1 (coral) to 17:1 (lemon).
   The copy exists only while hovering, so the heading's real text is never doubled.
   -------------------------------------------------------------------------- */
@property --lens-r { syntax: "<length>"; inherits: false; initial-value: 0px; }
.has-ink-lens { position: relative; }
.ink-lens {
  --lens-ink: #0b0b0c; --lens-fg: #fbfaf7;
  position: absolute; inset: 0; z-index: 2; pointer-events: none; user-select: none;
  color: var(--lens-fg); background: var(--lens-ink);
  -webkit-mask: radial-gradient(circle var(--lens-r) at var(--lx, 50%) var(--ly, 50%), #000 97%, transparent 100%);
          mask: radial-gradient(circle var(--lens-r) at var(--lx, 50%) var(--ly, 50%), #000 97%, transparent 100%);
  transition: --lens-r .45s var(--ease-out);
}
.ink-lens.is-on { --lens-r: clamp(64px, 8vw, 120px); }
/* Dark mode and dark bands: a lighter ink so the lens still shows against the dark background. */
.is-dark .ink-lens, .cta .ink-lens { --lens-ink: #2a2a31; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ink-lens { --lens-ink: #2a2a31; } }
:root[data-theme="dark"] .ink-lens { --lens-ink: #2a2a31; }
.ink-lens .grad, .ink-lens .grad .sw__i {
  background-image: linear-gradient(120deg, #fff33b 0%, #fdc70c 25%, #f3903f 60%, #e95c3a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ink-lens .sw__i { translate: none !important; rotate: none !important; transition: none !important; }
.ink-lens .reveal { opacity: 1 !important; translate: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) { .ink-lens { transition: none; } }

/* Footer, light mode: links fade to amber, and the logo crossfades from its white-to-grey version to full colour on
   hover (dark mode already shows the colour logo). */
.site-footer .menu a:hover, .site-footer address a:hover, .site-footer__company a:hover { opacity: 1; color: var(--sun); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .site-footer .wordmark { display: inline-grid; }
  :root:not([data-theme="dark"]) .site-footer .wordmark img { grid-area: 1 / 1; transition: opacity .55s var(--ease-out); }
  :root:not([data-theme="dark"]) .site-footer .wordmark__img--dark { display: block; opacity: 0; }
  :root:not([data-theme="dark"]) .site-footer .wordmark:is(:hover, :focus-visible) .wordmark__img--dark { opacity: 1; }
  :root:not([data-theme="dark"]) .site-footer .wordmark:is(:hover, :focus-visible) .wordmark__img--ondark { opacity: 0; }
}
:root[data-theme="light"] .site-footer .wordmark { display: inline-grid; }
:root[data-theme="light"] .site-footer .wordmark img { grid-area: 1 / 1; transition: opacity .55s var(--ease-out); }
:root[data-theme="light"] .site-footer .wordmark__img--dark { display: block; opacity: 0; }
:root[data-theme="light"] .site-footer .wordmark:is(:hover, :focus-visible) .wordmark__img--dark { opacity: 1; }
:root[data-theme="light"] .site-footer .wordmark:is(:hover, :focus-visible) .wordmark__img--ondark { opacity: 0; }

/* Logo animation (main.js "logo-motion"): an inline SVG copy laid over the wordmark images while it plays. */
.wordmark { position: relative; }
.wordmark__fx { position: absolute; display: grid; pointer-events: none; overflow: visible; }
.wordmark__fx-layer { grid-area: 1 / 1; display: block; width: 100%; height: 100%; overflow: visible; }
.wordmark__fx-layer * { transform-box: fill-box; transform-origin: center; }
.wordmark.is-fx .wordmark__img { visibility: hidden; }

/* Signal path (main.js): the circuit trace drawn over a section intro while it switches on. */
.sig-host { position: relative; }
.sig-svg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 1; }
.sig-svg .sig-via { transform-box: fill-box; transform-origin: center; }
.js .sig-off:not(.reveal) { opacity: .15; }
@media print { .sig-svg { display: none; } .js .sig-off { opacity: 1; } }

/* --------------------------------------------------------------------------
   Card hover: every card on the site (first made for the price cards). main.js (search "Card hover") marks each
   card .hv-card and its row or grid .hv-group, and adds a light and an edge (.hv-light, .hv-edge) to the card's
   surface: the card itself, or its picture on work and journal cards (.hv-media). On hover the card lifts and tilts
   toward the pointer (--hv-rx / --hv-ry), the light and a bright brand-gradient edge follow the pointer
   (--hv-x / --hv-y), an amber shadow replaces the border and the other cards in the group step back.
   .hv-flat (segments of one panel, large panels): light, edge and dim only, no lift, tilt or shadow.
   Mouse and trackpad only. Reduced motion keeps the light, edge and dim, not the lift or tilt.
   -------------------------------------------------------------------------- */
:where(.hv-surface) { position: relative; }
.hv-surface { isolation: isolate; }
.hv-card { --hv-rx: 0deg; --hv-ry: 0deg; --hv-ty: -4px; }
/* (0,3,0): stronger than the shared hover-colour rule above, whose transition list has no opacity (the other cards
   would dim in one frame instead of fading). Carries the cards' own hover properties too (padding, flex-grow). */
.hv-card.hv-card.hv-card {
  transition: transform .5s var(--ease-hover), opacity .45s ease, translate var(--dur-hover) var(--ease-hover), border-color .45s ease,
    box-shadow .55s var(--ease-hover), background-color var(--dur-2) ease, color var(--dur-1) ease,
    padding var(--dur-hover) var(--ease-hover), flex-grow .8s var(--ease-out),
    --lemon .6s ease, --sun .6s ease, --amber .6s ease, --coral .6s ease, --on-g .6s ease;
}
.hv-media.hv-media {
  transition: clip-path 1.25s var(--ease-out) calc(var(--i, 0) * 90ms), border-color .45s ease, box-shadow .55s var(--ease-hover);
}
/* A card's reveal animation holds its end opacity while it exists, which would block the dim: main.js marks the card
   settled once the reveal has played and the animation is dropped (its end state equals the resting state). */
.js .hv-card.reveal.is-in.hv-settled { animation: none; }
.hv-light, .hv-edge { position: absolute; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .45s ease; }
.hv-light {
  inset: 0; z-index: -1;
  background: radial-gradient(20rem circle at var(--hv-x, 50%) var(--hv-y, 0%), var(--hv-glow, color-mix(in srgb, var(--amber) 15%, transparent)), transparent 62%);
}
.hv-edge {
  inset: -1px; z-index: 2; padding: 1px;
  background: radial-gradient(13rem circle at var(--hv-x, 50%) var(--hv-y, 0%), var(--hv-edge-a, var(--sun)), var(--hv-edge-b, color-mix(in srgb, var(--coral) 50%, transparent)) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.hv-clip > .hv-edge { inset: 0; } /* surfaces that clip their overflow would cut a ring drawn over the border */
.hv-media > .hv-light { z-index: 1; } /* pictures: the light glows over the image */
.hv-media > .hv-edge { z-index: 3; }
/* The gradient card: a white light and edge (the brand gradient would vanish on it). */
.bento__item--brand.hv-card { --hv-glow: rgb(255 255 255 / .26); --hv-edge-a: #fff; --hv-edge-b: rgb(255 255 255 / .5); }
/* This light replaces the older pointer spotlights. */
.hv-card.spotlight::after, .hv-card.bento__item::before { content: none; }
/* Rows and segments without corners get the card radius so the edge reads as a card. */
.service-row.hv-card { border-radius: var(--radius-l); }
/* Room for the lift and the shadow inside the review wall's clipped rows. */
.rwall__row:has(.hv-card) { padding-block: 14px 30px; margin-block: -14px -30px; }
@media (hover: hover) and (pointer: fine) {
  .hv-card.hv-card:not(.hv-flat):hover { translate: none; transform: perspective(1100px) translateY(var(--hv-ty)) rotateX(var(--hv-rx)) rotateY(var(--hv-ry)); }
  .hv-card:not(.hv-flat):hover:is(.hv-surface), .hv-card:not(.hv-flat):hover .hv-surface {
    border-color: transparent; box-shadow: 0 30px 60px -34px color-mix(in srgb, var(--amber) 60%, rgb(0 0 0 / .45));
  }
  .hv-card:hover .hv-light, .hv-card:hover .hv-edge { opacity: 1; }
  /* (cards still waiting for their entrance stay hidden) */
  .hv-group:has(.hv-card:hover) .hv-card:not(:hover, .reveal:not(.is-in), .ps-pre > :not(.ps-on)) { opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
  .hv-card.hv-card.hv-card:hover { transform: none; translate: none; }
}
/* Page-to-page morph: the clicked card leaves flat and without its light (main.js sets .hv-off on pageswap). */
.hv-off .hv-card.hv-card.hv-card { transform: none; transition: none; }
.hv-off :is(.hv-light, .hv-edge) { opacity: 0; transition: none; }
@media print { .hv-light, .hv-edge { display: none; } }

/* --------------------------------------------------------------------------
   Price scale (price cards: worked examples, audit tiers). main.js adds a shared scale under each price, from £0 to
   a round figure above the dearest card in the row, so the cards can be compared at a glance. Entrance: the cards
   rise and tip upright in turn while the prices count up and the bars fill. Hover: the shared card hover above,
   plus the bar glows.
   -------------------------------------------------------------------------- */
.ps-group.ps-pre { perspective: 1100px; }
/* Tipped back, the outer cards reach past the page edge: keep that from making the page scroll sideways. */
.section:has(.ps-group.ps-pre) { overflow-x: clip; }
.ps-card { transform-origin: 50% 100%; }
.ps-group.ps-pre > .ps-card { transition: opacity .7s ease, transform 1.15s var(--ease-out); transition-delay: calc(var(--ps-i, 0) * 120ms); }
.ps-group.ps-pre > .ps-card:not(.ps-on) { opacity: 0; transform: translateY(56px) rotateX(26deg); }
.ps { display: grid; gap: .45rem; margin-block: .1rem .2rem; }
.ps__track { position: relative; height: 6px; border-radius: 3px; background: var(--line); }
.ps__fill {
  position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--g-brand);
  left: calc(var(--lo, 0) * 100%); width: max(6px, calc((var(--hi, 0) - var(--lo, 0)) * 100%));
  transition: box-shadow .45s ease;
}
.ps__labels { position: relative; height: 1.35em; font-size: .68rem; line-height: 1; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.ps__labels span { position: absolute; top: .4em; translate: -50% 0; white-space: nowrap; }
.ps__labels span::before { content: ""; position: absolute; left: 50%; top: -.55em; width: 1px; height: .3em; background: var(--line-strong); }
.ps__labels span:first-child { translate: 0 0; }
.ps__labels span:first-child::before { left: 0; }
.ps__labels span:last-child { translate: -100% 0; }
.ps__labels span:last-child::before { left: auto; right: 0; }
.tier .ps { margin-top: -.25rem; }
@media (hover: hover) and (pointer: fine) {
  .ps-card:hover .ps__fill { box-shadow: 0 0 12px -1px color-mix(in srgb, var(--sun) 75%, transparent); }
}
@media print {
  .ps-group.ps-pre > .ps-card { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Liquid level (scroll depth). Once the header turns into the glass capsule, the capsule fills with a faint tint
   from left to right as you go down the page (on articles: down the article). The tint's front edge is a liquid
   surface that leans and sloshes when you scroll quickly and settles when you stop. A small readout under the
   capsule shows the depth and the minutes left while you scroll, then fades. main.js adds both and, when it does,
   hides the thin top bar (.scroll-progress), which stays as the no-JS fallback.
   -------------------------------------------------------------------------- */
.has-level .scroll-progress { display: none; }
.hl {
  position: absolute; z-index: -1; inset: var(--cap-y) var(--cap-x); border-radius: var(--radius-pill);
  overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .3s ease;
}
.site-header.is-scrolled .hl { opacity: 1; }
.hl svg { display: block; width: 100%; height: 100%; }
.hl__edge { fill: none; stroke: var(--lq-edge); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.hl-read {
  position: absolute; top: calc(100% - var(--cap-y) + .4rem); right: calc(var(--cap-x) + 1.2rem);
  display: flex; align-items: center; gap: .45rem; padding: .3rem .75rem; border-radius: var(--radius-pill);
  font-size: .74rem; font-weight: 600; line-height: 1.2; color: var(--fg); pointer-events: none; white-space: nowrap;
  background: linear-gradient(180deg, var(--lg-tint-top), var(--lg-tint-bottom));
  backdrop-filter: blur(8px) saturate(180%); -webkit-backdrop-filter: blur(8px) saturate(180%);
  box-shadow: inset 0 1px 1px var(--lg-hi), inset 0 0 0 .5px var(--lg-rim), 0 8px 18px -10px var(--lg-drop-2);
  opacity: 0; translate: 0 -4px; transition: opacity .3s ease, translate .3s ease;
}
.hl-read.is-on { opacity: 1; translate: 0 0; }
.hl-read__left { color: var(--fg-2); font-weight: 500; }
.hl-odo { display: inline-flex; font-variant-numeric: tabular-nums; font-weight: 700; height: 1.2em; line-height: 1.2em; overflow: hidden; }
.hl-odo__col { display: flex; flex-direction: column; transition: translate .45s var(--ease-out); }
.hl-odo__col span { height: 1.2em; }
.hl-odo__col.is-gone { width: 0; overflow: hidden; }
@media (prefers-reduced-transparency: reduce) {
  .hl-read { background: var(--header-glass); }
}
@media print { .hl, .hl-read { display: none; } }

/* --------------------------------------------------------------------------
   Liquid run: the entrance for the services rail and the journal contents. A drop of the brand gradient falls onto
   the top of the list's line and runs down it like liquid in a glass tube; each item comes into focus as the liquid
   reaches it, then the liquid drains back up into the current item's marker and settles with a wobble. main.js
   adds the pieces (.lr-*) for the run and removes them after. Reduced motion: no run, the list just shows.
   -------------------------------------------------------------------------- */
.lr-pre .lr-item:not(.lr-on) { opacity: .18; filter: blur(5px); translate: -6px 0; }
:is(.lr-pre, .lr-run) :is(.svc-rail__marker, .toc__marker) { opacity: 0 !important; transition: none !important; } /* hidden from the start, not just once the run begins */
.lr-fill, .lr-drop, .lr-head { position: absolute; top: 0; pointer-events: none; z-index: 3; }
.lr-fill { left: -1px; width: var(--lr-w, 3px); height: 0; border-radius: 3px; background: var(--g-brand); }
.lr-drop {
  left: calc(var(--lr-w, 3px) / 2 - 1px); width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%;
  background: var(--g-brand); box-shadow: 0 0 10px color-mix(in srgb, var(--amber) 55%, transparent);
}
.lr-head {
  left: calc(var(--lr-w, 3px) / 2 - 1px); width: 7px; height: 10px; margin: -6px 0 0 -3.5px; opacity: 0;
  border-radius: 40% 40% 50% 50% / 30% 30% 70% 70%; background: var(--coral);
  box-shadow: 0 0 12px 1px color-mix(in srgb, var(--amber) 55%, transparent);
}
@media print { .lr-pre .lr-item:not(.lr-on) { opacity: 1; filter: none; translate: none; } .lr-fill, .lr-drop, .lr-head { display: none; } }