/* Coxie 360, brand system 2026-09.
   Layer 1 is the token sheet: every colour, family, size, weight, tracking, space, radius,
   shadow, blur, duration, easing and z-index the site uses. Nothing below the token sheet
   carries a literal for any of those; the gate (scripts/verify-site.sh) refuses one.
   Breakpoints: 1180px (desktop composition on and off) and 760px (phone). */
:root {
  /* colour: Tara's palette (2026-09-20). Black, warm white, saddle leather, deep green, gold. */
  --ink: #15130F;
  --paper: #F8F5EF;
  --white: #FFFFFF;
  --linen: #EFE9DF;
  --cream: #F3EDE2;
  --sandstone: #DCD2C2;
  --stone: #6E6657;
  --green: #2F4A3B;
  --green-deep: #22382C;
  --gold: #C29A5B;
  --gold-deep: #A98247;
  --saddle: #8A5A2B;
  --espresso: #2A2118;
  --bg: var(--paper);
  --ink-85: rgba(21, 19, 15, .85);
  --ink-70: rgba(21, 19, 15, .72);
  --ink-60: rgba(21, 19, 15, .6);
  --ink-55: rgba(21, 19, 15, .55);
  --ink-35: rgba(21, 19, 15, .35);
  --ink-12: rgba(21, 19, 15, .12);
  --ink-0: rgba(21, 19, 15, 0);
  --line: rgba(21, 19, 15, .14);
  --gold-60: rgba(194, 154, 91, .6);
  --gold-45: rgba(194, 154, 91, .45);
  --gold-25: rgba(194, 154, 91, .25);
  --gold-12: rgba(194, 154, 91, .12);
  --gold-0: rgba(194, 154, 91, 0);
  --green-25: rgba(47, 74, 59, .25);
  --green-12: rgba(47, 74, 59, .12);
  --white-88: rgba(255, 255, 255, .88);
  --white-72: rgba(255, 255, 255, .72);
  --white-55: rgba(255, 255, 255, .55);
  --white-30: rgba(255, 255, 255, .3);
  --white-12: rgba(255, 255, 255, .12);
  --white-0: rgba(255, 255, 255, 0);
  --grad-cta: linear-gradient(90deg, var(--ink) 0%, var(--espresso) 100%);
  --grad-mark: linear-gradient(35deg, var(--ink) 10%, var(--saddle) 90%);
  --grad-sheen: linear-gradient(115deg, var(--white-0) 30%, var(--white-55) 50%, var(--white-0) 70%);

  /* type */
  --font-sans: 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'Newsreader', 'Times New Roman', serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --fs-display: clamp(46px, 6.4vw, 104px);
  --fs-display-split: clamp(46px, 5.4vw, 88px); /* the opening's headline beside the team photograph: its longest word has to end before their faces */
  --fs-h2: clamp(38px, 5.2vw, 84px);
  --fs-h2-sm: clamp(36px, 4.7vw, 76px);
  --fs-h3: clamp(24px, 2.2vw, 34px);
  --fs-h3-lg: clamp(30px, 3vw, 46px);
  --fs-h3-sm: clamp(20px, 1.6vw, 25px);
  --fs-it-lg: clamp(30px, 2.6vw, 40px);
  --fs-quote: clamp(20px, 1.7vw, 25px);
  --fs-lede: clamp(17px, 1.3vw, 21px);
  --fs-body: 16px;
  --fs-body-sm: 15px;
  --fs-body-xs: 14.5px;
  --fs-nav: 15px;
  --fs-btn: 16px;
  --fs-btn-sm: 15px;
  --fs-stat: 34px;
  --fs-label: 12px;
  --fs-cap: 10.5px;
  --fs-cap-sm: 9.5px;
  --fs-cap-xs: 9px;
  --fs-brand: 26px;
  --fs-brand-sm: 22px;
  --fs-sheet: clamp(26px, 6vw, 34px);
  --fs-display-phone: clamp(38px, 11vw, 64px);
  --fs-h2-phone: clamp(36px, 10.5vw, 56px);
  --lh-tight: .94;
  --lh-snug: 1.04;
  --lh-h3: 1.08;
  --lh-lede: 1.55;
  --lh-body: 1.6;
  --lh-cap: 1.85;
  --lh-one: 1;
  --track-display: -.045em;
  --track-h: -.04em;
  --track-h3: -.03em;
  --track-brand: -.035em;
  --track-caps: .3em;
  --track-caps-sm: .26em;
  --track-mono: .32em;
  --track-it: -.02em;
  --track-tight: -.01em;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --opsz-display: 72;
  --opsz-text: 40;

  /* space */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 160px;
  --gutter: clamp(20px, 4.4vw, 72px);
  --max: 1560px;
  --section-top: clamp(64px, 6vw, 88px); /* was clamp(120px, 12.5vw, 184px); the difference moved into --section-bottom so the dissolve zone doubled without moving any copy */
  --section-bottom: clamp(128px, 13.5vw, 208px); /* was clamp(72px, 7vw, 112px); this is the dissolve zone, so it carries the depth */
  --dissolve-r: linear-gradient(to right, var(--ink-0) 22%, var(--ink-12) 32%, var(--ink-35) 40%, var(--ink-70) 50%, var(--ink-85) 56%, var(--ink) 64%); /* 2026-10-12: every background photograph is full bleed with straight, eased dissolves; no domes or quarter ellipses. Where copy sits at the left, the frame opens to the right across this long S-curve */
  --bleed: var(--section-bottom); /* how far each section overlaps the foot of the one above: exactly that section's bottom padding, so a photograph never rides over copy */
  --col-gap: clamp(24px, 3.2vw, 56px);
  --card-pad: clamp(22px, 2.2vw, 34px);
  --bar-pad-y: 18px;
  --bar-top: var(--s-4); /* the floating nav sits this far from the top edge */

  /* radius, borders */
  --r-sm: 12px; --r-md: 16px; --r-lg: 24px; --r-xl: 30px; --r-pill: 999px; --r-round: 50%;
  --bw: 1px; --bw-2: 1.5px; --bw-quote: 2px;

  /* glass */
  --glass-bg: rgba(255, 255, 255, .62);
  --glass-bg-strong: rgba(255, 255, 255, .8);
  --glass-border: rgba(255, 255, 255, .9);
  --glass-edge: linear-gradient(135deg, var(--white) 0%, var(--white-30) 45%, var(--gold-25) 100%);
  --glass-blur: 22px;
  --glass-blur-sm: 12px;
  --glass-sat: 1.3;
  --glass-highlight: inset 0 1px 0 var(--white);
  --glass-dark-bg: rgba(34, 56, 44, .86);
  --glass-dark-border: rgba(255, 255, 255, .22);

  /* shadow, glow */
  --shadow-sm: 0 8px 24px rgba(21, 19, 15, .08);
  --shadow-md: 0 24px 60px rgba(21, 19, 15, .09), 0 2px 6px rgba(21, 19, 15, .04);
  --shadow-lg: 0 40px 90px rgba(21, 19, 15, .14), 0 4px 10px rgba(21, 19, 15, .05);
  --shadow-accent: 0 18px 50px rgba(21, 19, 15, .22);
  --shadow-accent-hover: 0 24px 60px rgba(21, 19, 15, .3);
  --glow-gold: 0 0 70px var(--gold-25);
  --glow-dot: drop-shadow(0 0 10px var(--gold));
  --shadow-hairline: 0 var(--bw) 0 var(--line);
  --shadow-cut: 0 0 0 5px var(--paper);
  --shadow-halo: 0 0 0 6px var(--gold-12);
  --focus-ring: 0 0 0 4px var(--green-12);

  /* motion */
  --dur-fast: .2s; --dur-med: .35s; --dur-slow: .8s; --dur-reveal: .9s; --dur-words: .9s;
  --dur-orbit: 56s; --dur-orbit-inner: 38s; --dur-sweep: 5s; --dur-kenburns: 14s; --dur-flow: 4s; --dur-draw: 1.8s; --dur-bob: 2.2s; --dur-spin: 40s; --dur-sheen: 1.1s;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --stagger: 60ms;
  --stagger-word: 34ms;
  --stagger-node: .4s;
  --tilt: 4deg;
  --dur-pulse: 6s;
  --dur-seat: .7s;
  --dur-tick: 4s;
  --lift: -3px;

  /* icons, rings */
  --icon-sm: 26px; --icon-md: 40px; --icon-lg: 56px;
  --ring-sm: 52px; --ring-md: 64px; --ring-lg: 96px; --orb: 184px; --medal: 190px; --medal-lg: 300px;
  --dot: 8px;
  --bench-h: 430px;
  --seat-open: 3.4;
  --wave-h: 180px; --sweep-h: 120px; --glow-r: 260px;
  --node: 14px;
  --fs-metro: clamp(34px, 4.2vw, 64px);

  /* layers */
  --z-under: -1; --z-under-2: -2; --z-bg: 0; --z-decor: 1; --z-content: 2; --z-float: 3; --z-orb: 4; --z-sheet: 35; --z-bar: 40; --z-skip: 100;
}

@font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-var-latin.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('/assets/fonts/newsreader-normal-latin.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('/assets/fonts/newsreader-italic-latin.woff2') format('woff2'); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('/assets/fonts/geist-mono-var-latin.woff2') format('woff2'); font-weight: 400 600; font-style: normal; font-display: swap; }

/* ── base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: var(--saddle); text-decoration: none; }
button { font: inherit; }
h1, h2, h3, p, dl, dd, ol, ul, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; }
.skip { position: absolute; left: var(--s-3); top: -48px; z-index: var(--z-skip); padding: var(--s-2) var(--s-4); background: var(--ink); color: var(--white); border-radius: var(--r-pill); }
.skip:focus { top: var(--s-3); }

/* ── type ─────────────────────────────────────────────── */
.eyebrow, .cap { font: var(--fw-medium) var(--fs-cap)/var(--lh-cap) var(--font-sans); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-70); }
.cap--sm { font-size: var(--fs-cap-sm); }
.label { font: var(--fw-medium) var(--fs-label)/var(--lh-one) var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--ink-55); display: inline-flex; align-items: center; gap: .6em; }
.label b { color: var(--gold-deep); font-weight: var(--fw-medium); }
.label--rule::after { content: ''; order: 1; width: clamp(80px, 16vw, 260px); height: var(--bw); background: var(--ink-35); margin-left: var(--s-4); }
.label--rule { position: relative; }
.label--rule i { order: 2; width: var(--dot); height: var(--dot); border-radius: var(--r-round); background: var(--gold); margin-left: calc(-1 * var(--s-2)); filter: var(--glow-dot); }
.display { font: var(--fw-bold) var(--fs-display)/var(--lh-tight) var(--font-sans); letter-spacing: var(--track-display); color: var(--ink); text-wrap: balance; }
.display em, .h2 em { display: block; }
.display em, .h2 em, .h3 em, .it { font: italic var(--fw-light) 1.04em/var(--lh-tight) var(--font-serif); font-variation-settings: 'opsz' var(--opsz-display); letter-spacing: var(--track-it); }
.h2 { font: var(--fw-bold) var(--fs-h2)/var(--lh-tight) var(--font-sans); letter-spacing: var(--track-h); color: var(--ink); text-wrap: balance; }
.h2--sm { font-size: var(--fs-h2-sm); }
.h3 { font: var(--fw-semibold) var(--fs-h3)/var(--lh-h3) var(--font-sans); letter-spacing: var(--track-h3); color: var(--ink); text-wrap: balance; }
.h3--lg { font-size: var(--fs-h3-lg); }
.h3 em { font-size: 1.05em; }
.lede { font: var(--fw-regular) var(--fs-lede)/var(--lh-lede) var(--font-sans); color: var(--ink-70); max-width: 34em; text-wrap: pretty; }
.lede b { color: var(--ink); font-weight: var(--fw-medium); }
.body { font: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-sans); color: var(--ink-70); text-wrap: pretty; }
p { text-wrap: pretty; }
.rule { display: inline-block; width: var(--s-7); height: var(--bw); background: var(--ink); vertical-align: middle; }
/* headline line reveal: JS wraps words in .w > i */
[data-words] .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .14em .1em .2em; margin: -.14em -.1em -.2em; white-space: nowrap; }
[data-words] .w i { display: inline-block; transform: translateY(110%); font-style: inherit; font-weight: inherit; font-family: inherit; font-variation-settings: inherit; letter-spacing: inherit; }
[data-words].in .w i { transform: none; transition: transform var(--dur-words) var(--ease-out); transition-delay: calc(var(--i) * var(--stagger-word)); }
html:not(.js) [data-words] .w i { transform: none; }

/* ── chrome ───────────────────────────────────────────── */
.bar { position: fixed; top: var(--bar-top); left: 0; right: 0; margin: 0 auto; width: min(calc(100% - 2 * var(--gutter)), var(--max)); z-index: var(--z-bar); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-5); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-5); border-radius: var(--r-pill); overflow: hidden; background: var(--glass-bg); border: var(--bw) solid var(--glass-border); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); box-shadow: var(--shadow-md), var(--glass-highlight); transition: background var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease); } /* 2026-10-12: a floating glass pill, frosted from the first frame, not a full-width band; the reading-progress line rides inside it */
.bar::after { content: ''; position: absolute; left: 0; bottom: 0; height: var(--bw-2); width: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-45)); transform: scaleX(var(--progress, 0)); transform-origin: left; opacity: 0; transition: opacity var(--dur-med) var(--ease); }
.bar.is-stuck::after { opacity: 1; }
.bar.is-stuck { background: var(--glass-bg-strong); box-shadow: var(--shadow-lg), var(--glass-highlight); }
.brand { display: inline-flex; align-items: center; gap: var(--s-3); color: var(--ink); }
.brand__mark { width: 50px; height: 44px; } /* the official vectors (Rebrand 2026-09); shapes exact, colour from the tokens through currentColor */
.brand__word { width: 122px; height: 24px; }
.bar .brand__mark { width: 40px; height: 35px; } /* the pill sets the mark smaller than the footer does */
.bar .brand__word { width: 108px; height: 21px; }
.mark__node { color: var(--gold); }
.bar__nav { display: flex; justify-content: center; gap: clamp(18px, 2.4vw, 44px); }
.bar__nav a { color: var(--ink); font: var(--fw-medium) var(--fs-nav)/var(--lh-one) var(--font-sans); padding: var(--s-2) 2px; position: relative; }
.bar__nav a::after { content: ''; position: absolute; left: 2px; right: 2px; bottom: var(--s-1); height: var(--bw); background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-med) var(--ease); }
.bar__nav a:hover::after, .bar__nav a.is-active::after { transform: scaleX(1); }
.bar__cta { display: flex; align-items: center; gap: var(--s-5); }
.bar__cta::before { content: ''; width: var(--bw); height: 34px; background: var(--line); }
.bar.is-dark .brand, .bar.is-dark .bar__nav a { color: var(--white); } /* over the hero photograph */
.bar.is-dark .bar__cta::before { background: var(--white-30); }
.bar.is-dark .bar__menu { border-color: var(--white-30); background: var(--ink-35); }
.bar.is-dark .bar__menu i { background: var(--white); }
.bar.is-dark .btn { background: var(--white); color: var(--ink); }
.bar.is-dark.is-stuck { background: var(--ink-55); }
.bar__menu { display: none; width: 48px; height: 48px; border: var(--bw) solid var(--glass-border); border-radius: var(--r-pill); background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); box-shadow: var(--shadow-md), var(--glass-highlight); cursor: pointer; padding: 0; align-items: center; justify-content: center; flex-direction: column; gap: 5px; }
.bar__menu i { display: block; width: 18px; height: var(--bw-2); background: var(--ink); transition: transform var(--dur-med) var(--ease); }
.bar__menu[aria-expanded="true"] i:first-of-type { transform: translateY(3.25px) rotate(45deg); }
.bar__menu[aria-expanded="true"] i:last-of-type { transform: translateY(-3.25px) rotate(-45deg); }
.sheet { position: fixed; inset: 0; z-index: var(--z-sheet); background: var(--glass-bg-strong); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); padding: 110px var(--gutter) var(--s-7); }
.sheet[hidden] { display: none; }
.sheet nav { display: grid; gap: var(--s-1); }
.sheet a { display: flex; align-items: baseline; gap: var(--s-4); padding: var(--s-4) 0; border-bottom: var(--bw) solid var(--line); color: var(--ink); font: var(--fw-semibold) var(--fs-sheet)/1.1 var(--font-sans); letter-spacing: var(--track-h3); }

/* ── buttons ──────────────────────────────────────────── */
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: var(--s-4); padding: var(--s-4) 26px; border-radius: var(--r-pill); background: var(--grad-cta); color: var(--white); font: var(--fw-medium) var(--fs-btn)/var(--lh-one) var(--font-sans); box-shadow: var(--shadow-accent); border: 0; cursor: pointer; transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); white-space: nowrap; }
.btn::after { content: ''; position: absolute; inset: 0; background: var(--grad-sheen); transform: translateX(-120%); transition: transform var(--dur-sheen) var(--ease-out); pointer-events: none; }
.btn:hover { transform: translateY(var(--lift)); box-shadow: var(--shadow-accent-hover); }
.btn:hover::after { transform: translateX(120%); }
.btn svg { width: 18px; height: 18px; color: var(--gold); transition: transform var(--dur-med) var(--ease); }
.btn:hover svg { transform: translateX(var(--s-1)); }
.btn--small { padding: 13px 20px; font-size: var(--fs-btn-sm); }
.btn--ghost { background: var(--white-30); color: var(--ink); --gold: var(--ink); border: var(--bw) solid var(--ink-35); box-shadow: none; -webkit-backdrop-filter: blur(var(--glass-blur-sm)); backdrop-filter: blur(var(--glass-blur-sm)); }
.btn--ghost:hover { box-shadow: none; border-color: var(--ink); }
.btn--light { background: var(--glass-bg-strong); color: var(--ink); border: var(--bw) solid var(--white); box-shadow: var(--shadow-sm); }
.btn--light:hover { box-shadow: var(--shadow-md); }
.link { color: var(--ink); font: var(--fw-medium) var(--fs-nav)/var(--lh-one) var(--font-sans); background: none; border: 0; padding: 0; cursor: pointer; border-bottom: var(--bw) solid var(--ink-35); }
.link--gold { border-bottom-color: var(--gold); padding-bottom: 3px; }
a:focus-visible, button:focus-visible { outline: var(--bw-2) solid var(--gold); outline-offset: var(--s-1); border-radius: var(--r-sm); }
.link--gold:hover { color: var(--saddle); }

/* ── glass, cards, pills ──────────────────────────────── */
.glass, .card { position: relative; border-radius: var(--r-lg); background: var(--glass-bg); border: var(--bw) solid var(--glass-border); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); box-shadow: var(--shadow-md), var(--glass-highlight); transition: transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease); }
.card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: var(--bw); background: var(--glass-edge); -webkit-mask: linear-gradient(var(--white) 0 0) content-box, linear-gradient(var(--white) 0 0); mask: linear-gradient(var(--white) 0 0) content-box, linear-gradient(var(--white) 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: .9; }
.card--hover::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: var(--z-decor); background: radial-gradient(var(--glow-r) circle at var(--mx, 50%) var(--my, 50%), var(--white-30), var(--white-0) 70%); opacity: 0; transition: opacity var(--dur-med) var(--ease); } /* a soft light under the pointer */
.card--hover:hover::after { opacity: 1; }
[data-reveal].card--hover.in, .card--hover:not([data-reveal]) { transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px)); transition: transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease), opacity var(--dur-reveal) var(--ease-out); will-change: transform; }
.card--hover:hover { --ty: var(--lift); box-shadow: var(--shadow-lg), var(--glass-highlight); }
.glass--dark { background: var(--glass-dark-bg); border-color: var(--glass-dark-border); color: var(--white); box-shadow: var(--shadow-lg); }
.pill { position: absolute; z-index: var(--z-float); padding: var(--s-4); border: var(--bw) solid var(--white-55); border-radius: var(--r-sm); background: var(--ink-60); -webkit-backdrop-filter: blur(var(--glass-blur-sm)); backdrop-filter: blur(var(--glass-blur-sm)); font: var(--fw-medium) var(--fs-cap-sm)/var(--lh-cap) var(--font-mono); letter-spacing: var(--track-caps-sm); text-transform: uppercase; color: var(--white); }
.pill--ink { color: var(--ink); border-color: var(--ink-35); background: var(--glass-bg); }
.pill hr { border: 0; border-top: var(--bw) solid var(--white-55); margin: var(--s-2) 0; }
.pill--ink hr { border-color: var(--ink-12); }

/* ── icons, rings, orbs ───────────────────────────────── */
.icon { display: inline-block; width: var(--icon-md); height: var(--icon-md); color: var(--green); }
.icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.icon--sm { width: var(--icon-sm); height: var(--icon-sm); color: var(--ink); }
.icon--ring { width: 76px; height: 76px; border-radius: var(--r-round); border: var(--bw) solid var(--white-72); background: var(--white-30); -webkit-backdrop-filter: blur(var(--glass-blur-sm)); backdrop-filter: blur(var(--glass-blur-sm)); display: grid; place-items: center; box-shadow: var(--shadow-sm); }
.icon--ring svg { width: 34px; height: 34px; color: var(--white); }
.icon--disc { width: var(--ring-md); height: var(--ring-md); border-radius: var(--r-round); background: var(--linen); border: var(--bw) solid var(--sandstone); display: grid; place-items: center; }
.icon--disc svg { width: 28px; height: 28px; color: var(--ink); }
.arrow-chip { width: var(--icon-md); height: var(--icon-md); border-radius: var(--r-round); border: var(--bw) solid var(--ink-12); display: grid; place-items: center; color: var(--ink-55); background: var(--white-55); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.arrow-chip svg { width: 16px; height: 16px; }
a.arrow-chip:hover { background: var(--ink); color: var(--white); transform: translateX(2px); }
.ring-badge { display: flex; align-items: center; gap: var(--s-4); font: var(--fw-medium) var(--fs-cap-sm)/var(--lh-cap) var(--font-sans); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-70); }
.ring-badge i { width: var(--ring-md); height: var(--ring-md); border-radius: var(--r-round); border: var(--bw) dashed var(--ink-35); display: grid; place-items: center; flex: 0 0 auto; animation: spin var(--dur-spin) linear infinite; }
.ring-badge i::after { content: ''; width: var(--s-2); height: var(--s-2); border-radius: var(--r-round); background: var(--ink); }
.ring-badge--white { color: var(--white); }
.ring-badge--white i { border-color: var(--white-55); }
.ring-badge--white i::after { background: var(--white); }
.ring-badge--solid i { border-style: solid; border-color: var(--gold-45); background: var(--white-55); animation: none; }
.ring-badge--solid i::after { background: var(--ink); width: 10px; height: 10px; }

/* ── decoration: arcs, sides, foot lines ──────────────── */
.screen { position: relative; min-height: 100svh; padding: var(--section-top) var(--gutter) var(--section-bottom); overflow: hidden; isolation: isolate; }
.screen + .screen { margin-top: calc(-1 * var(--bleed)); padding-top: calc(var(--section-top) + var(--bleed)); } /* each section overlaps the foot of the one above by --bleed, the zone where the two photographs cross-dissolve; the copy does not move because the top padding grows by the same amount */
.screen__in { position: relative; z-index: var(--z-content); max-width: var(--max); margin: 0 auto; width: 100%; }
.photo { position: absolute; z-index: var(--z-bg); overflow: hidden; pointer-events: none; --fi: calc(var(--bleed) * .55); --fo: calc(var(--bleed) * .55); --mx: linear-gradient(var(--ink), var(--ink)); --mt: linear-gradient(var(--ink), var(--ink)); --my: linear-gradient(to bottom, var(--ink-0) 0, var(--ink-12) calc(var(--fi) * .3), var(--ink-35) calc(var(--fi) * .45), var(--ink-70) calc(var(--fi) * .62), var(--ink-85) calc(var(--fi) * .75), var(--ink) var(--fi), var(--ink) calc(100% - var(--fo)), var(--ink-85) calc(100% - var(--fo) * .75), var(--ink-70) calc(100% - var(--fo) * .62), var(--ink-35) calc(100% - var(--fo) * .45), var(--ink-12) calc(100% - var(--fo) * .3), var(--ink-0) 100%); -webkit-mask-image: var(--mx), var(--my), var(--mt); mask-image: var(--mx), var(--my), var(--mt); -webkit-mask-composite: source-in, source-in; mask-composite: intersect, intersect; } /* no photograph ends in a hard line and none ends before the next begins: the side fade is each section's own (--mx); the top and bottom fades (--my) are eased S-curves in px, the fade-out spanning exactly the overlap with the next section (--fo = --bleed) while the next photograph fades in across the same zone and a little beyond (--fi), so adjacent frames cross-dissolve instead of meeting at a band of paper. 2026-10-12: both fades are .55 of the overlap, not 1.15 and 1, so the incoming frame is fully in before the outgoing one leaves; the page reads as one flow without the haze */
.photo img { width: 100%; height: 100%; object-fit: cover; transform: translate3d(0, var(--py, 0px), 0) scale(1.06); will-change: transform; }
.arc { position: absolute; z-index: var(--z-decor); pointer-events: none; overflow: visible; }
.arc circle.ring { fill: none; stroke: url(#arcGrad); stroke-width: var(--arc-w, 1.1); vector-effect: non-scaling-stroke; }
.arc .orbit { transform-origin: 500px 500px; animation: orbit var(--dur-orbit) linear infinite; }
.arc .dot { fill: var(--gold); stroke: none; filter: var(--glow-dot); }
.arc .dot--soft { fill: var(--white); stroke: var(--gold); stroke-opacity: .7; stroke-width: 1.5; filter: none; }
.arc .tick { fill: none; stroke: var(--gold-25); stroke-width: 1; vector-effect: non-scaling-stroke; }
.arc .ring--inner { opacity: .6; } /* orbit loops (brand deck, visual language): two rings, two nodes, opposite ways round */
.arc .orbit--inner { animation-duration: var(--dur-orbit-inner); animation-direction: reverse; }
.grid-bg { position: absolute; z-index: var(--z-bg); pointer-events: none; opacity: .55; }
.grid-bg line, .grid-bg circle { stroke: var(--gold-12); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.side { position: absolute; z-index: var(--z-float); right: var(--gutter); top: var(--section-top); display: grid; gap: var(--s-1); justify-items: start; font: var(--fw-medium) var(--fs-cap)/var(--lh-cap) var(--font-sans); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-70); padding-left: var(--s-5); border-left: var(--bw) dashed var(--ink-35); }
.side i { display: block; width: 46px; height: var(--bw); background: var(--ink); margin-top: var(--s-3); }
.side--white { color: var(--white); border-color: var(--white-55); }
.side--white i { background: var(--white); }
.side--left { right: auto; left: var(--gutter); top: auto; bottom: var(--s-8); border: 0; padding: 0; }
.side--top { top: var(--s-6); border: 0; padding: 0; text-align: right; justify-items: end; }
.foot-line { position: relative; z-index: var(--z-content); display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-7); font: var(--fw-medium) var(--fs-cap)/var(--lh-cap) var(--font-sans); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-70); }
.foot-line::before { content: ''; flex: 0 0 46px; height: var(--bw); background: var(--ink); }
.foot-line--right { justify-content: flex-end; }
.foot-line--right::before { order: 2; }
.photo-cap { position: absolute; z-index: var(--z-float); font: var(--fw-medium) var(--fs-cap-xs)/var(--lh-cap) var(--font-sans); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--white); padding-left: var(--s-4); border-left: var(--bw) dashed var(--white-55); }
.photo-cap--a { left: 40%; top: 52%; }
.photo-cap--b { left: 62%; top: 58%; }
.photo-cap--c { right: 12%; top: 46%; }
.photo-cap--d { left: 70%; top: 24%; }
.signals__mosaic + .foot-line { grid-column: 1 / -1; }
.photo-cap::after { content: ''; display: block; width: var(--s-6); height: var(--bw); background: var(--white); margin-top: var(--s-2); }

/* ── reveal ───────────────────────────────────────────── */
[data-reveal] { opacity: 0; transform: translateY(var(--s-5)); }
[data-reveal].in { opacity: 1; transform: none; transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
[data-reveal].in[data-delay="1"] { transition-delay: calc(var(--stagger) * 1); }
[data-reveal].in[data-delay="2"] { transition-delay: calc(var(--stagger) * 2); }
[data-reveal].in[data-delay="3"] { transition-delay: calc(var(--stagger) * 3); }
[data-reveal].in[data-delay="4"] { transition-delay: calc(var(--stagger) * 4); }
html:not(.js) [data-reveal] { opacity: 1; transform: none; }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bob { 0%, 100% { transform: translateY(-3px); opacity: 1; } 50% { transform: translateY(4px); opacity: .5; } }
@keyframes flow { to { stroke-dashoffset: -960; } }
@keyframes pulse { 0%, 100% { box-shadow: var(--shadow-md), var(--glass-highlight); } 50% { box-shadow: var(--shadow-md), var(--glass-highlight), var(--glow-gold); } }

/* ── 00 hero ──────────────────────────────────────────── */
.hero { min-height: 100svh; display: grid; align-items: center; padding-top: var(--section-top); padding-bottom: max(var(--s-10), calc(var(--bleed) + var(--s-4))); color: var(--ink); } /* the copy on paper at the left; the team in an arch at the right, inside the mark's orbit (2026-10-12) */
.photo picture { display: contents; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: var(--z-under); background: radial-gradient(ellipse 48% 62% at 74% 44%, var(--gold-12), var(--gold-0) 72%), linear-gradient(to bottom, var(--bg), var(--linen) 62%, var(--bg)); } /* a warm light behind the mark, nothing flat */
.hero__media { position: absolute; margin: 0; top: 50%; right: calc((100% - 100vw) / 2 - 4vw); height: 108svh; aspect-ratio: 5 / 6; transform: translateY(-50%); } /* the mark at the scale of the screen: taller than it, running off the right edge, the team inside its window (2026-10-12) */
/* the mark as a window (2026-10-12): a photograph inside the mark's inner oval, the warm crescent between it and the offset ring, and the gold node running the ring. One SVG, one coordinate system, so ring and window never drift. Used at the opening and for Tara. */
.mark-window { display: block; width: 100%; height: auto; overflow: visible; }
.hero .mark-window { width: 100%; height: 100%; display: block; } /* over .orbit-graphic's small fixed size, and shown at every width */
.mark-window__ring { fill: none; stroke: var(--gold-60); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mark-window__crescent-a { stop-color: var(--linen); }
.mark-window__crescent-b { stop-color: var(--sandstone); }
.mark-window__photo { transform-box: fill-box; transform-origin: 50% 50%; animation: window-settle var(--dur-kenburns) var(--ease-out) both; }
@keyframes window-settle { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes settle { from { transform: translate3d(0, var(--py, 0px), 0) scale(1.14); } to { transform: translate3d(0, var(--py, 0px), 0) scale(1.06); } }
.hero__grid { display: grid; grid-template-columns: minmax(0, 46%); align-items: center; }
.hero .display { font-size: var(--fs-display-split); margin-bottom: var(--s-6); }
.hero .lede { margin-bottom: var(--s-7); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-6); align-items: center; }
.link--light { color: var(--white); border-bottom-color: var(--white-55); display: inline-flex; align-items: center; gap: var(--s-2); padding-bottom: 3px; }
.link--light:hover { border-bottom-color: var(--white); }
.link--chev { display: inline-flex; align-items: center; gap: var(--s-2); padding-bottom: 3px; }
.link .chev { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.stats { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; }
.stats div { padding: var(--s-1) var(--s-6) var(--s-1) 0; margin-right: var(--s-6); border-right: var(--bw) solid var(--line); }
.stats div:last-child { border: 0; }
.stats b { display: block; font: var(--fw-regular) var(--fs-stat)/var(--lh-one) var(--font-serif); font-variation-settings: 'opsz' var(--opsz-display); color: var(--ink); margin-bottom: var(--s-2); letter-spacing: var(--track-it); }
.stats small { font: var(--fw-medium) var(--fs-cap-sm)/var(--lh-cap) var(--font-sans); letter-spacing: var(--track-caps-sm); text-transform: uppercase; color: var(--ink-55); display: block; max-width: 9em; }
.positioning__photo { align-self: center; margin-top: var(--s-8); } /* a team member, framed: people are photographs in the layout, never ghosts behind copy (2026-10-12) */
.positioning .arc { width: 1000px; height: 1000px; top: 20px; right: 12%; }
.positioning__grid { display: grid; grid-template-columns: minmax(0, 40%) 1fr minmax(0, 25%); gap: var(--col-gap); align-items: start; }
.positioning .label { margin-bottom: var(--s-6); }
.positioning .h2 { margin-bottom: var(--s-6); }
.positioning .lede { margin-bottom: var(--s-7); max-width: 26em; }
.who { padding-top: var(--s-9); }
.who__head { display: block; margin-bottom: var(--s-3); font: var(--fw-medium) var(--fs-body-sm)/1.3 var(--font-sans); color: var(--ink-55); }
.who li { display: grid; grid-template-columns: var(--icon-md) 1fr; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5); margin-bottom: var(--s-3); border-radius: var(--r-pill); background: var(--glass-bg); border: var(--bw) solid var(--glass-border); box-shadow: var(--shadow-md), var(--glass-highlight); -webkit-backdrop-filter: blur(var(--glass-blur-sm)); backdrop-filter: blur(var(--glass-blur-sm)); transition: transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease); }
.who li:hover { transform: translateX(var(--s-1)); box-shadow: var(--shadow-lg), var(--glass-highlight); }
.who .icon { width: 30px; height: 30px; color: var(--green); }
.who b { font: var(--fw-medium) var(--fs-body)/1.2 var(--font-sans); color: var(--ink); letter-spacing: var(--track-tight); }
.promise { position: relative; z-index: var(--z-float); margin: var(--s-8) auto 0; max-width: 640px; display: grid; grid-template-columns: 150px 1fr; gap: var(--s-6); align-items: center; padding: var(--s-6) var(--s-6); border-radius: var(--r-xl); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); transform: translateX(-4%); }
.promise .it { font-size: var(--fs-it-lg); line-height: 1.02; }
.promise .it b { font: var(--fw-regular) 1em/1 var(--font-sans); letter-spacing: var(--track-h3); font-style: normal; }
.promise .mini { border-left: var(--bw) solid var(--white-30); padding-left: var(--s-5); font: var(--fw-medium) var(--fs-cap-xs)/1.9 var(--font-sans); letter-spacing: var(--track-caps-sm); text-transform: uppercase; color: var(--white-72); }
.orbit-graphic { width: 150px; height: 150px; overflow: visible; } /* the mark in motion: its two offset ellipses as hairlines, one node running the ring, a fainter one a beat behind */
.orbit-graphic__ring, .orbit-graphic__inner { fill: none; stroke: var(--white); stroke-opacity: .45; stroke-width: 1; vector-effect: non-scaling-stroke; }
.orbit-graphic__node { fill: var(--gold); filter: var(--glow-dot); }
.orbit-graphic__node--trail { opacity: .45; filter: none; }
.positioning .brand--foot { position: absolute; right: var(--gutter); bottom: var(--s-7); z-index: var(--z-float); }

/* ── 02 work ──────────────────────────────────────────── */
.work__head { position: relative; display: grid; grid-template-columns: minmax(0, 58%); gap: var(--col-gap); align-items: end; margin-bottom: var(--s-8); } /* the headline at the left; the photograph is a quarter circle off the right page edge */
.work__head .lede { margin-bottom: 0; }
.work .arc { width: 900px; height: 900px; top: -300px; right: 6%; }
.work .label { margin-bottom: var(--s-6); }
.work .h2 { margin-bottom: var(--s-6); max-width: 11.6em; }
.work .lede { margin-bottom: var(--s-8); max-width: 30em; }
.work__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); }
.wcard { position: relative; min-height: 440px; border-radius: var(--r-lg); overflow: hidden; color: var(--white); padding: var(--card-pad); display: grid; align-content: end; border: var(--bw) solid var(--white-55); box-shadow: var(--shadow-md); isolation: isolate; transition: transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease); }
.wcard:hover { box-shadow: var(--shadow-lg); }
.wcard picture { display: contents; }
.wcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: var(--z-under-2); transition: transform var(--dur-slow) var(--ease); }
.wcard:hover img { transform: scale(1.03); }
.wcard::before { content: ''; position: absolute; inset: 0; z-index: var(--z-under); background: linear-gradient(to top, var(--ink-85) 0%, var(--ink-60) 45%, var(--ink-0) 80%), linear-gradient(to bottom, var(--ink-35), var(--ink-0) 34%); } /* the second veil keeps the white index and icon legible where a frame is bright at the top */
.wcard__top { position: absolute; top: var(--card-pad); left: var(--card-pad); right: var(--card-pad); display: flex; justify-content: space-between; align-items: flex-start; }
.wcard__meta { display: flex; align-items: flex-start; }
.wcard__top .tags { font: var(--fw-medium) var(--fs-cap-xs)/1.9 var(--font-sans); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--white); text-align: left; margin-left: var(--s-4); }
.wcard .h3 { color: var(--white); margin-bottom: var(--s-4); font-size: var(--fs-h3-lg); max-width: 9.5em; }
.wcard .h3 em { color: var(--white); }
.wcard p { color: var(--white-88); font-size: var(--fs-body-sm); line-height: var(--lh-lede); max-width: 26em; margin-bottom: var(--s-5); }
.wcard > .btn { justify-self: start; }
.wcard__side { position: absolute; right: var(--card-pad); bottom: var(--s-7); padding-left: var(--s-5); border-left: var(--bw) dashed var(--white-55); font: var(--fw-medium) var(--fs-cap-xs)/1.9 var(--font-sans); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--white); }
.wcard__side::after { content: ''; display: block; width: var(--s-6); height: var(--bw); background: var(--white); margin-top: var(--s-3); }
.wcard .arc { width: 360px; height: 360px; top: -40px; left: 40px; opacity: .8; }
.work__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--s-5); }
.work__foot .foot-line { margin: 0; }

/* ── 03 seats: the bench ─────────────────────────────── */
.seats .photo { inset: 0; }
.seats .photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--white-72) 0%, var(--white-55) 28%, var(--white-12) 52%, var(--white-30) 78%, var(--white-55) 100%); } /* the stair coil is busier than the four chairs were; a firmer top veil keeps the head and lede legible over it */
.seats__head { display: grid; grid-template-columns: minmax(0, 46%) 1fr; gap: var(--col-gap); align-items: end; margin-bottom: var(--s-8); }
.seats__head .lede { margin-bottom: var(--s-2); }
.seats__side { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-6); align-items: end; }
.quad { width: var(--ring-lg); height: var(--ring-lg); overflow: visible; } /* the ring of four (brand deck, modular grid): four arcs of one circle, one node on the open seat */
.quad__arc { fill: none; stroke: var(--ink-35); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset var(--dur-slow) var(--ease-out), stroke var(--dur-med) var(--ease), stroke-width var(--dur-med) var(--ease); }
.quad__arc:nth-child(2) { transition-delay: calc(var(--stagger) * 2); } .quad__arc:nth-child(3) { transition-delay: calc(var(--stagger) * 4); } .quad__arc:nth-child(4) { transition-delay: calc(var(--stagger) * 6); }
.quad.in .quad__arc, html:not(.js) .quad__arc { stroke-dashoffset: 0; }
.quad[data-open="1"] .quad__arc:nth-child(1), .quad[data-open="2"] .quad__arc:nth-child(2), .quad[data-open="3"] .quad__arc:nth-child(3), .quad[data-open="4"] .quad__arc:nth-child(4) { stroke: var(--gold); stroke-width: 3.5; }
.quad__hand { transform-origin: 60px 60px; transform: rotate(var(--turn, 45deg)); transition: transform var(--dur-seat) var(--ease-out); }
.quad[data-open="2"] .quad__hand { --turn: 135deg; } .quad[data-open="3"] .quad__hand { --turn: 225deg; } .quad[data-open="4"] .quad__hand { --turn: 315deg; }
.quad__hand circle { fill: var(--gold); filter: var(--glow-dot); }
.bench-row { display: flex; gap: var(--s-3); min-height: var(--bench-h); }
.seat { position: relative; flex: 1 1 0; min-width: 0; display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: var(--r-lg); background: var(--glass-bg); border: var(--bw) solid var(--glass-border); box-shadow: var(--shadow-md), var(--glass-highlight); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); transition: flex var(--dur-seat) var(--ease-out), background var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease); cursor: pointer; }
.seat::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: var(--bw-quote); background: linear-gradient(90deg, var(--gold), var(--gold-0)); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-seat) var(--ease-out); }
.seat.is-open { flex: var(--seat-open) 1 0; background: var(--glass-bg-strong); box-shadow: var(--shadow-lg), var(--glass-highlight); cursor: default; }
.seat.is-open::before { transform: scaleX(1); }
.seat__tab { position: relative; z-index: var(--z-decor); display: grid; grid-template-rows: auto auto; align-content: start; gap: var(--s-6); width: 100%; min-height: 220px; padding: var(--card-pad); border: 0; background: none; text-align: left; color: var(--ink); cursor: inherit; }
.seat__icon { width: 84px; height: var(--icon-lg); color: var(--green); align-self: start; }
.seat__icon svg { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset var(--dur-draw) var(--ease-out); }
.seat.is-open .seat__icon svg, html:not(.js) .seat__icon svg { stroke-dashoffset: 0; }
.seat__name { font: var(--fw-semibold) var(--fs-h3)/var(--lh-h3) var(--font-sans); letter-spacing: var(--track-h3); color: var(--ink); text-wrap: balance; }
.seat__body { position: relative; z-index: var(--z-decor); display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-seat) var(--ease-out); }
.seat__body > div { min-height: 0; overflow: hidden; padding: 0 var(--card-pad); opacity: 0; transform: translateY(var(--s-3)); transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease); }
.seat.is-open .seat__body { grid-template-rows: 1fr; }
.seat.is-open .seat__body > div { opacity: 1; transform: none; padding-bottom: var(--card-pad); transition-delay: calc(var(--dur-seat) * .45); }
.seat__body p { font: var(--fw-regular) var(--fs-lede)/var(--lh-lede) var(--font-sans); color: var(--ink-70); max-width: 26em; margin-bottom: var(--s-5); text-wrap: pretty; }
.seat:not(.is-open):hover { background: var(--glass-bg-strong); }

/* ── 04 approach ──────────────────────────────────────── */
.approach .photo { inset: 0; --mx: var(--dissolve-r); } /* full bleed; the copy sits on paper at the left and the frame opens to the right */
.approach .photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--white-12), var(--white-0) 26%, var(--white-0) 80%, var(--white-30) 100%); }
.approach__grid { display: grid; grid-template-columns: minmax(0, 36%) 1fr; gap: var(--col-gap); align-items: center; }
.approach .label { margin-bottom: var(--s-5); }
.approach .h2 { margin-bottom: var(--s-6); }
.approach blockquote { margin: 0 0 var(--s-5); padding-left: var(--s-5); border-left: var(--bw-quote) solid var(--green); font: italic var(--fw-light) var(--fs-quote)/1.3 var(--font-serif); font-variation-settings: 'opsz' var(--opsz-text); color: var(--ink); max-width: 22em; }
.approach .body { max-width: 30em; }
.bench { position: relative; display: grid; grid-template-columns: 200px 1fr 190px; align-items: center; min-height: 440px; }
.bench__list { display: grid; gap: var(--s-4); }
.bench__list li { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--glass-bg); border: var(--bw) solid var(--glass-border); box-shadow: var(--shadow-md), var(--glass-highlight); font: var(--fw-medium) var(--fs-cap-xs)/var(--lh-cap) var(--font-sans); letter-spacing: var(--track-caps-sm); text-transform: uppercase; color: var(--ink); -webkit-backdrop-filter: blur(var(--glass-blur-sm)); backdrop-filter: blur(var(--glass-blur-sm)); transition: transform var(--dur-med) var(--ease); }
.bench__list li:hover { transform: translateX(var(--s-1)); }
.bench__list .icon { width: 30px; height: 30px; flex: 0 0 30px; border-radius: var(--r-round); background: var(--linen); color: var(--ink); display: grid; place-items: center; }
.bench__list .icon svg { width: 16px; height: 16px; }
.bench__wires { position: absolute; inset: 0; z-index: var(--z-bg); pointer-events: none; }
.bench__wires path { fill: none; stroke: var(--white); stroke-opacity: .9; stroke-width: 1.2; }
.bench__wires .glow { stroke: var(--gold); stroke-opacity: .85; stroke-width: 2; filter: var(--glow-dot); stroke-dasharray: 60 900; animation: flow var(--dur-flow) linear infinite; }
.bench__wires .glow--late { animation-delay: calc(var(--dur-flow) / -2); }
.bench__lead { position: relative; z-index: var(--z-decor); justify-self: center; width: 160px; height: 160px; border-radius: var(--r-round); display: grid; place-items: center; align-content: center; gap: var(--s-2); background: radial-gradient(circle at 50% 35%, var(--white-88), var(--white-55) 55%, var(--gold-25)); border: var(--bw) solid var(--white); box-shadow: var(--glow-gold); font: var(--fw-medium) var(--fs-cap-sm)/var(--lh-cap) var(--font-sans); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink); text-align: center; -webkit-backdrop-filter: blur(var(--glass-blur-sm)); backdrop-filter: blur(var(--glass-blur-sm)); }
.bench__lead svg { width: 44px; height: 39px; }
.bench__lead::after { content: ''; position: absolute; inset: calc(-1 * var(--s-3)); border-radius: var(--r-round); border: var(--bw) solid var(--gold-45); pointer-events: none; animation: tick var(--dur-tick) var(--ease-out) infinite; animation-delay: calc(var(--dur-tick) / -3); }
.bench__you { position: relative; z-index: var(--z-decor); display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5); border-radius: var(--r-md); background: var(--glass-bg); border: var(--bw) solid var(--glass-border); box-shadow: var(--shadow-md), var(--glass-highlight); font: var(--fw-medium) var(--fs-cap)/var(--lh-one) var(--font-sans); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink); -webkit-backdrop-filter: blur(var(--glass-blur-sm)); backdrop-filter: blur(var(--glass-blur-sm)); }
.bench__you .icon { color: var(--green); width: 34px; height: 34px; }

/* ── 05 cadence: the metronome ───────────────────────── */
.cadence .photo { inset: 0; --mx: var(--dissolve-r); }
.cadence .photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--white-12), var(--white-12) 34%, var(--white-0) 50%, var(--white-30) 82%, var(--white-30)); }
.cadence__head { display: grid; grid-template-columns: minmax(0, 46%) 1fr; gap: var(--col-gap); align-items: end; margin-bottom: var(--s-8); }
.cadence__head .lede { margin-bottom: var(--s-2); }
.metro { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 40%); gap: 0 var(--s-8); align-items: stretch; }
.metro__list { display: grid; align-content: center; gap: var(--s-2); }
.metro__item { position: relative; }
.metro__btn { display: flex; align-items: baseline; gap: var(--s-5); width: 100%; padding: var(--s-4) 0; border: 0; background: none; text-align: left; cursor: pointer; color: var(--ink-35); transition: color var(--dur-med) var(--ease); }
.metro__name { font: italic var(--fw-light) var(--fs-metro)/1 var(--font-serif); font-variation-settings: 'opsz' var(--opsz-display); letter-spacing: var(--track-it); color: inherit; transition: transform var(--dur-med) var(--ease); }
.metro__item.is-on .metro__btn, .metro__btn:hover, .metro__btn:focus-visible { color: var(--ink); }
.metro__item.is-on .metro__name { transform: translateX(var(--s-2)); }
.metro__desc { display: none; }
.metro__rail { position: relative; background: linear-gradient(to bottom, var(--gold-0), var(--gold-45) 20%, var(--gold-45) 80%, var(--gold-0)); }
.metro__rail::before { content: ''; position: absolute; left: 50%; top: 0; width: var(--bw-2); height: var(--sweep-h); margin-left: calc(var(--bw-2) / -2); background: linear-gradient(to bottom, var(--gold-0), var(--gold), var(--gold-0)); animation: sweep var(--dur-sweep) var(--ease) infinite; } /* the cadence, as light moving down the rail */
@keyframes sweep { from { top: calc(-1 * var(--sweep-h)); opacity: 0; } 15%, 85% { opacity: 1; } to { top: 100%; opacity: 0; } } /* top resolves against the rail, so the light travels its full length */
.metro__marker { position: absolute; left: 50%; top: var(--marker-y, 20%); width: var(--node); height: var(--node); margin: calc(var(--node) / -2) 0 0 calc(var(--node) / -2); border-radius: var(--r-round); background: var(--gold); box-shadow: var(--shadow-halo), var(--glow-gold); transition: top var(--dur-slow) var(--ease-out); }
.metro__marker::after { content: ''; position: absolute; inset: -14px; border-radius: var(--r-round); border: var(--bw) solid var(--gold-45); animation: tick var(--dur-tick) var(--ease-out) infinite; }
@keyframes tick { 0% { transform: scale(.6); opacity: 1; } 70%, 100% { transform: scale(1.6); opacity: 0; } }
.metro__panel { align-self: center; padding: var(--card-pad); min-height: 320px; display: grid; align-content: end; gap: var(--s-4); overflow: hidden; }
.metro__icon { width: var(--icon-lg); height: var(--icon-lg); color: var(--green); margin-bottom: var(--s-4); }
.metro__icon svg { stroke-dasharray: 100; stroke-dashoffset: 0; }
.metro__quote { font: italic var(--fw-light) var(--fs-h3-lg)/1.02 var(--font-serif); font-variation-settings: 'opsz' var(--opsz-display); letter-spacing: var(--track-it); color: var(--ink); }
.metro__text { font: var(--fw-regular) var(--fs-lede)/var(--lh-lede) var(--font-sans); color: var(--ink-70); max-width: 24em; }
.metro__panel.is-swapping .metro__quote, .metro__panel.is-swapping .metro__text, .metro__panel.is-swapping .metro__icon { opacity: 0; transform: translateY(var(--s-2)); transition: none; }
.metro__quote, .metro__text, .metro__icon { transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease); }
.metro__panel.is-swapping .metro__icon svg { stroke-dashoffset: 100; }
.metro__icon svg { transition: stroke-dashoffset var(--dur-draw) var(--ease-out); }

/* ── 06 signals: the pulse ───────────────────────────── */
.start__head { display: grid; grid-template-columns: minmax(0, 46%) 1fr; gap: var(--col-gap); align-items: end; margin-bottom: var(--s-9); }
.start__head .lede { margin-bottom: var(--s-2); }
.start .photo { inset: 0; }
.start .photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--white-72), var(--white-72)); } /* leaf shadow on concrete under the wave, veiled so the gold lines lead; the edges are the mask's */
.pulse { position: relative; }
.pulse__wave { display: block; width: 100%; height: var(--wave-h); overflow: visible; }
.pulse__base { fill: none; stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pulse__line { fill: none; stroke: var(--gold-45); stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-dasharray: 1400; stroke-dashoffset: 1400; }
.pulse.in .pulse__line { animation: draw calc(var(--dur-draw) * 1.6) var(--ease-out) forwards; }
.pulse__glow { fill: none; stroke: var(--gold); stroke-width: 2.4; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-dasharray: 90 1400; stroke-dashoffset: 1490; filter: var(--glow-dot); opacity: 0; }
.pulse.in .pulse__glow { opacity: 1; animation: pulse-run var(--dur-pulse) linear infinite; animation-delay: calc(var(--dur-draw) * 1.6); }
@keyframes pulse-run { to { stroke-dashoffset: 0; } }
.pulse__items { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-6); margin-top: calc(-1 * var(--wave-h) * .7 - var(--node) / 2); }
.pulse__items li { position: relative; padding-top: calc(var(--wave-h) * .7 + var(--node) / 2 + var(--s-6)); }
.pulse__node { position: absolute; left: 50%; top: 0; width: var(--node); height: var(--node); margin-left: calc(var(--node) / -2); border-radius: var(--r-round); background: var(--paper); border: var(--bw-2) solid var(--gold); box-shadow: var(--shadow-cut); transition: background var(--dur-med) var(--ease), transform var(--dur-med) var(--ease); }
.pulse__node i { position: absolute; inset: -10px; border-radius: var(--r-round); border: var(--bw) solid var(--gold-45); opacity: 0; animation: tick var(--dur-tick) var(--ease-out) infinite; animation-delay: calc(var(--i, 0) * var(--stagger-node)); }
.pulse__items li:nth-child(1) .pulse__node i { --i: 0; } .pulse__items li:nth-child(2) .pulse__node i { --i: 1; } .pulse__items li:nth-child(3) .pulse__node i { --i: 2; } .pulse__items li:nth-child(4) .pulse__node i { --i: 3; } .pulse__items li:nth-child(5) .pulse__node i { --i: 4; }
.pulse__items li:hover .pulse__node { background: var(--gold); transform: scale(1.25); }
.pulse__icon { display: block; width: var(--icon-md); height: var(--icon-md); color: var(--green); margin-bottom: var(--s-4); }
.pulse__icon svg { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset var(--dur-draw) var(--ease-out); }
.pulse__items li.in .pulse__icon svg, html:not(.js) .pulse__icon svg { stroke-dashoffset: 0; transition-delay: calc(var(--stagger) * 4); }
.pulse__items .h3 { font-size: var(--fs-h3-sm); margin-bottom: var(--s-3); transition: transform var(--dur-med) var(--ease); }
.pulse__items li:hover .h3 { transform: translateY(var(--lift)); }
.pulse__items p { font: var(--fw-regular) var(--fs-body-xs)/var(--lh-lede) var(--font-sans); color: var(--ink-70); }

/* ── 07 tara ──────────────────────────────────────────── */
.person__grid { display: grid; grid-template-columns: minmax(0, 40%) 1fr; gap: var(--s-8); align-items: center; min-height: min(86svh, 860px); }
.person .photo { inset: 0; }
.person .photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, var(--white-88), var(--white-72) 45%, var(--white-55) 100%), linear-gradient(to bottom, var(--white-30), var(--white-0) 18%, var(--white-0) 82%, var(--white-30)); } /* a texture, never a scene: light on a bare wall under the person; the edges are the mask's */
.person .label { margin-bottom: var(--s-6); }
.person .h2 { margin-bottom: var(--s-6); }
.person .lede { margin-bottom: var(--s-6); max-width: 26em; }
.portrait { --portrait-h: min(86svh, 860px); position: absolute; margin: calc(var(--portrait-h) / -2) 0 0; top: 50%; right: calc((100% - 100vw) / 2); height: var(--portrait-h); aspect-ratio: 4 / 5; } /* a tall half oval off the right page edge, a gold echo of its curve behind it; centred by margin, not transform, because data-reveal owns this element's transform */
.portrait__cut { position: relative; height: 100%; overflow: hidden; border-radius: 50% 0 0 50% / 50% 0 0 50%; background: var(--linen); box-shadow: var(--shadow-lg); }
.portrait__cut img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.frame { margin: 0; border-radius: var(--r-xl); overflow: hidden; border: var(--bw) solid var(--white); box-shadow: var(--shadow-md); background: var(--linen); }
.frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.positioning__photo { aspect-ratio: 3 / 4; border-radius: 0 50% 0 50%; border: 0; box-shadow: var(--shadow-lg); } /* a leaf: two opposite corners swept to full curves */
.work__photo { position: absolute; z-index: var(--z-under); bottom: calc(-1 * var(--s-8)); right: calc((100% - 100vw) / 2); width: 38vw; aspect-ratio: 1; border-radius: 100% 0 0 0; border: 0; box-shadow: none; } /* a quarter circle anchored to the page edge, its flat foot sitting on the line where the cards begin */
.portrait figcaption { position: absolute; left: 26%; bottom: calc(-1 * var(--s-7)); margin-top: var(--s-4); font: var(--fw-medium) var(--fs-cap-sm)/var(--lh-cap) var(--font-sans); letter-spacing: var(--track-caps-sm); text-transform: uppercase; color: var(--ink-70); }
.person__words { margin: 0; padding: var(--s-5) 0 0; border-top: var(--bw) solid var(--line); }
.person__words p { font: italic var(--fw-light) var(--fs-it-lg)/1.05 var(--font-serif); font-variation-settings: 'opsz' var(--opsz-display); letter-spacing: var(--track-it); color: var(--ink); margin-bottom: var(--s-3); }
.person__words footer { font: var(--fw-medium) var(--fs-cap-sm)/var(--lh-cap) var(--font-sans); letter-spacing: var(--track-caps-sm); text-transform: uppercase; color: var(--ink-55); }
.record { display: grid; border-top: var(--bw) solid var(--line); }
.record div { display: grid; grid-template-columns: 200px 1fr; gap: var(--s-5); padding: var(--s-4) 0; border-bottom: var(--bw) solid var(--line); }
.record dt { font: var(--fw-medium) var(--fs-cap-sm)/var(--lh-cap) var(--font-sans); letter-spacing: var(--track-caps-sm); text-transform: uppercase; color: var(--ink-55); }
.record dd { font: var(--fw-regular) var(--fs-body-sm)/var(--lh-lede) var(--font-sans); color: var(--ink); }

/* ── 08 contact + footer ──────────────────────────────── */
/* ── 09 questions ─────────────────────────────────────── */
.faq__grid { display: grid; grid-template-columns: minmax(0, 36%) minmax(0, 1fr); gap: var(--col-gap); align-items: start; }
.faq__head { position: sticky; top: var(--s-10); }
.faq__head .h2 { margin-bottom: var(--s-5); }
.faq__list { border-top: var(--bw) solid var(--line); }
.faq__item { border-bottom: var(--bw) solid var(--line); }
.faq__q { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--s-5); padding: var(--s-5) 0; cursor: pointer; font: var(--fw-semibold) var(--fs-h3-sm)/var(--lh-h3) var(--font-sans); letter-spacing: var(--track-h3); color: var(--ink); }
.faq__q::-webkit-details-marker { display: none; }
.faq__q:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }
.faq__icon { position: relative; flex: 0 0 auto; width: var(--s-5); height: var(--s-5); }
.faq__icon::before, .faq__icon::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: var(--bw-2); margin-top: calc(var(--bw-2) / -2); background: var(--gold); transition: transform var(--dur-med) var(--ease); }
.faq__icon::after { transform: rotate(90deg); }
.faq__item[open] .faq__icon::after { transform: rotate(0deg); } /* a plus that closes into a minus */
.faq__a { max-width: 40em; padding: 0 0 var(--s-6); font: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-sans); color: var(--ink-70); text-wrap: pretty; }

.contact { display: grid; align-content: end; padding-bottom: var(--s-6); color: var(--white); } /* 2026-10-12: the closing is one frame: the brass ring and the sun over the skyline, full bleed, with the conversation, the form and the footer laid over the stone at the left */
.contact .photo { inset: 0; --fo: 0px; --fi: calc(var(--bleed) * 1.6); } /* the frame rises out of the paper of the questions above over a long, eased fade, not a short cross-dissolve against another photograph */
.contact .photo img { object-position: 78% 50%; } /* the ring and the sun sit in the right third of the frame; a tall box keeps them in view */
.contact .photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, var(--ink-70) 0%, var(--ink-60) 30%, var(--ink-12) 58%, var(--ink-0) 72%), linear-gradient(to top, var(--ink-85) 0%, var(--ink-35) 22%, var(--ink-0) 44%);  -webkit-mask-image: linear-gradient(to bottom, var(--ink-0) 0, var(--ink) calc(var(--bleed) * 1.6)); mask-image: linear-gradient(to bottom, var(--ink-0) 0, var(--ink) calc(var(--bleed) * 1.6)); } /* the stone is bright where the sun runs across it; the veil darkens the left and the foot so white copy and the glass form read, the ring and the sky stay clean */
.contact__grid { display: grid; grid-template-columns: minmax(0, 620px); } /* one column at the left; the right half of the frame belongs to the ring */
.contact .h2, .contact .h2 em { color: var(--white); }
.contact .h2 { margin-bottom: var(--s-5); }
.contact .lede { margin-bottom: var(--s-7); max-width: 30em; color: var(--white-88); }
.contact .form, .contact .sent { background: var(--glass-bg-strong); box-shadow: var(--shadow-lg), var(--glass-highlight); } /* frosted glass over the photograph: firm enough that every field reads, the light still coming through */
.form { padding: var(--card-pad); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.field { position: relative; display: grid; grid-template-columns: var(--icon-sm) 1fr; align-items: center; gap: var(--s-3); padding: 0 var(--s-4); border-radius: var(--r-sm); border: var(--bw) solid var(--sandstone); background: var(--white-88); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.field .icon { color: var(--ink-55); width: var(--icon-sm); height: var(--icon-sm); }
.field:focus-within { border-color: var(--green); box-shadow: var(--focus-ring); }
.field:focus-within .icon { color: var(--green); }
.field input, .field select, .field textarea { width: 100%; padding: var(--s-4) 0; border: 0; background: transparent; font: var(--fw-regular) var(--fs-body)/1.4 var(--font-sans); color: var(--ink); outline: none; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-55); }
.field select { appearance: none; -webkit-appearance: none; padding-right: var(--s-6); color: var(--ink); }
.field select:invalid, .field select option[value=""] { color: var(--ink-55); }
.field--select .field__chev { position: absolute; right: var(--s-4); top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--ink-55); pointer-events: none; }
.field--wide { grid-column: 1 / -1; }
.field--area { align-items: start; }
.field--area .icon { margin-top: var(--s-4); }
.field textarea { resize: vertical; min-height: 96px; }
.field.is-invalid { border-color: var(--saddle); }
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__foot { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--s-5); margin-top: var(--s-2); }
.btn--wide { justify-content: center; min-width: 260px; padding-top: 18px; padding-bottom: 18px; }
.form__note { grid-column: 1 / -1; font: var(--fw-regular) var(--fs-body-xs)/1.4 var(--font-sans); color: var(--ink-70); }
.form__note:empty { display: none; }
.sent { padding: var(--card-pad); }
.sent__title { font-size: var(--fs-h3-lg); margin-bottom: var(--s-3); }
.sent__title em { font-style: italic; }
.sent__more { margin-top: var(--s-4); }
.pill--static { position: relative; display: inline-block; background: var(--glass-bg); color: var(--ink); border-color: var(--sandstone); box-shadow: var(--shadow-sm); }
.pill--static hr { border-color: var(--ink-12); }
.contact__badge { margin-top: var(--s-8); }
.contact__line { margin-top: var(--s-8); font: var(--fw-regular) var(--fs-it-lg)/1.02 var(--font-serif); font-variation-settings: 'opsz' var(--opsz-display); letter-spacing: var(--track-it); color: var(--white); text-shadow: 0 1px 24px var(--ink-35); }
.contact__line em { font-style: italic; font-weight: var(--fw-light); }
.contact__line::after { content: ''; display: block; width: var(--s-7); height: var(--bw); background: var(--gold); margin-top: var(--s-5); }
.foot { margin-top: var(--s-8); color: var(--white); }
.foot .brand { color: var(--white); }
.foot__row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-6); padding: var(--s-6) 0; border-top: var(--bw) solid var(--white-30); }
.foot__tag { display: flex; align-items: center; gap: var(--s-5); font: var(--fw-regular) var(--fs-body)/1.3 var(--font-sans); color: var(--white); }
.foot__tag a { color: var(--white); border-bottom: var(--bw) solid var(--gold); }
.foot__place { color: var(--white-72); margin-left: var(--s-5); }
.foot__tag::before { content: ''; width: var(--bw); height: 34px; background: var(--white-30); }
.foot__links { display: flex; align-items: center; gap: var(--s-6); font: var(--fw-medium) var(--fs-nav)/var(--lh-one) var(--font-sans); color: var(--white); }
.foot__links a { color: var(--white); }
.foot__meta { padding: var(--s-3) 0 0; color: var(--white-72); }

/* ── documents (privacy, terms, 404) ──────────────────── */
.doc { max-width: 760px; margin: 0 auto; padding: var(--s-11) var(--gutter) var(--s-10); }
.doc h1 { font: var(--fw-bold) var(--fs-h2)/var(--lh-tight) var(--font-sans); letter-spacing: var(--track-h); margin-bottom: var(--s-4); }
.doc__updated { font: var(--fw-medium) var(--fs-cap-sm)/var(--lh-cap) var(--font-sans); letter-spacing: var(--track-caps-sm); text-transform: uppercase; color: var(--ink-55); margin-bottom: var(--s-7); }
.doc h2 { font: var(--fw-semibold) var(--fs-h3)/1.2 var(--font-sans); letter-spacing: var(--track-it); margin: var(--s-7) 0 var(--s-3); }
.doc p, .doc li { font: var(--fw-regular) var(--fs-lede)/var(--lh-body) var(--font-sans); color: var(--ink-70); margin-bottom: var(--s-3); }
.doc ul { list-style: disc; padding-left: 20px; }
.doc a { color: var(--saddle); border-bottom: var(--bw) solid var(--gold-45); }
.err { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: var(--s-11) var(--gutter) var(--s-9); }
.err .display { margin: var(--s-4) 0; }
.err .lede { margin: 0 auto var(--s-6); }

/* ── responsive ───────────────────────────────────────── */
@media (max-width: 1180px) {
  .bar__nav, .bar__cta .btn { display: none; }
  .bar__cta::before { display: none; }
  .bar__menu { display: flex; }
  .bar__cta { grid-column: 3; justify-self: end; } /* the section links are hidden here, so the menu keeps the right edge */
  .bar { padding: 0; border: 0; overflow: visible; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; } /* below the full nav: no bar at all; the mark floats in its own glass bubble at the left, the menu in a glass circle at the right */
  .bar.is-stuck { background: none; box-shadow: none; }
  .bar::after { display: none; }
  .bar .brand { padding: var(--s-2) var(--s-5) var(--s-2) var(--s-4); border-radius: var(--r-pill); background: var(--glass-bg); border: var(--bw) solid var(--glass-border); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); box-shadow: var(--shadow-md), var(--glass-highlight); transition: background var(--dur-med) var(--ease); }
  .bar.is-stuck .brand, .bar.is-stuck .bar__menu { background: var(--glass-bg-strong); }
  .side, .pill--corner, .positioning .brand--foot, .photo-cap, .grid-bg { display: none; }
  .screen { min-height: 0; }
  .hero { min-height: 0; align-items: start; padding-top: calc(var(--section-top) + var(--s-9)); padding-bottom: max(var(--s-9), calc(var(--bleed) + var(--s-4))); } /* stacked: the arch above, the copy below */
  .hero__media { position: relative; order: -1; top: auto; right: auto; transform: none; height: auto; justify-self: end; width: min(calc(100% + var(--gutter)), 560px); margin: 0 calc(-1 * var(--gutter)) var(--s-8) 0; } /* stacked: the mark above the copy, still running off the right edge */
  .hero__grid { grid-template-columns: 1fr; }
  .positioning__grid { grid-template-columns: 1fr; }
  .positioning__photo { margin-top: 0; max-width: 360px; }
  .who { padding-top: 0; }
    .promise { grid-template-columns: 1fr; transform: none; max-width: none; }
  .promise .mini { border: 0; padding: 0; }
  .orbit-graphic { display: none; }
  .work__head { grid-template-columns: 1fr; align-items: start; }
  .portrait { position: relative; top: auto; right: auto; transform: none; height: auto; justify-self: end; width: min(calc(100% + var(--gutter)), 520px); margin: var(--s-8) calc(-1 * var(--gutter)) var(--s-8) 0; }
  .portrait figcaption { position: static; padding-left: 18%; }
  .person__grid { min-height: 0; }
  .work__photo { position: relative; z-index: auto; top: auto; right: auto; justify-self: end; width: min(calc(100% + var(--gutter)), 520px); margin: var(--s-7) calc(-1 * var(--gutter)) 0 0; }
  .work__pair { grid-template-columns: 1fr; }
  .approach__grid, .person__grid, .contact__grid, .seats__head, .cadence__head, .start__head { grid-template-columns: 1fr; }
  [data-reveal].card--hover.in, .card--hover:not([data-reveal]) { transform: none; }
  .bench-row { flex-direction: column; min-height: 0; }
  .seat, .seat.is-open { flex: none; }
  .seat__tab { min-height: 0; grid-template-columns: auto 1fr; grid-template-rows: none; align-items: center; gap: var(--s-4); }
  .seat__icon { width: 44px; height: 30px; }
  .metro { grid-template-columns: 1fr; gap: var(--s-6); }
  .metro__rail, .metro__panel { display: none; }
  .metro__desc { display: block; font: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-sans); color: var(--ink-70); max-width: 30em; padding: 0 0 var(--s-5) calc(var(--s-5) + 2.4em); }
  .metro__btn, .metro__item.is-on .metro__btn { color: var(--ink); }
  .pulse__wave { display: none; }
  .pulse__items { grid-template-columns: 1fr; margin-top: 0; gap: var(--s-6); padding-left: var(--s-6); border-left: var(--bw) dashed var(--gold-45); }
  .pulse__items li { padding-top: 0; }
  .pulse__node { left: calc(-1 * var(--s-6)); top: var(--s-1); margin-left: calc(var(--node) / -2); }
  .bench { grid-template-columns: 1fr; gap: var(--s-6); min-height: 0; }
  .bench__wires { display: none; }
  .bench__list { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
        .cadence .photo { left: 0; height: 46%; --mx: linear-gradient(var(--ink), var(--ink)); }
  .cadence .photo::after { background: linear-gradient(to bottom, var(--white-88), var(--white-72) 55%, var(--white-72)); }
  .contact__grid { grid-template-columns: 1fr; }
  .faq__grid { grid-template-columns: 1fr; }
  .faq__head { position: static; }
  .contact .photo img { object-position: 42% 50%; } /* phones take the 4:5 ring crop; the ring sits left of centre in it */
  .contact .photo { inset: 0 0 auto 0; height: 100svh; }
  .contact .photo::after { background: linear-gradient(to bottom, var(--ink-0) 0%, var(--ink-0) 36%, var(--ink-60) 64%, var(--ink) 100%); } /* the ring in the clear sky; below it the frame settles into ink and the copy, form and footer continue on it */
  .contact::before { content: ''; position: absolute; left: 0; right: 0; top: calc(100svh - 2px); bottom: 0; z-index: var(--z-under); background: var(--ink); }
  .screen.contact { padding-top: calc(var(--section-top) + var(--bleed) + 44svh); } /* the frame opens on the ring before the copy begins */
  .foot__row { grid-template-columns: 1fr; gap: var(--s-4); }
  .foot__tag::before { display: none; }
}
@media (max-width: 760px) {
  /* 44px thumb targets without moving a pixel: the hit box grows into the surrounding space and the underline stays under the glyphs */
  .link, .foot__tag a, .foot__links a { display: inline-block; padding-top: var(--s-4); padding-bottom: var(--s-4); margin-top: calc(-1 * var(--s-4)); margin-bottom: calc(-1 * var(--s-4)); border-bottom: 0; text-decoration: underline; text-decoration-thickness: var(--bw); text-underline-offset: var(--s-1); }
  .link { text-decoration-color: var(--ink-35); }
  .link--gold { text-decoration-color: var(--gold); }
  .link--light { display: inline-flex; text-decoration-color: var(--white-55); }
  .foot__tag a { text-decoration-color: var(--gold); }
  .foot__links a { text-decoration: none; }
  .brand { padding-top: var(--s-2); padding-bottom: var(--s-2); margin-top: calc(-1 * var(--s-2)); margin-bottom: calc(-1 * var(--s-2)); }
  .brand__mark { width: 40px; height: 35px; }
  .brand__word { width: 102px; height: 20px; }
  .display { font-size: var(--fs-display-phone); }
  .h2, .h2--sm { font-size: var(--fs-h2-phone); }
  .stats { grid-template-columns: 1fr 1fr; gap: var(--s-4) 0; }
  .stats div { border: 0; padding-right: 0; margin-right: 0; }
  .stats div:nth-child(odd) { border-right: var(--bw) solid var(--line); padding-right: var(--s-4); margin-right: var(--s-4); }
  .hero__cta { gap: var(--s-3); }
  .positioning__grid { grid-template-columns: 1fr; }
  .wcard { min-height: 380px; }
  .wcard__side { display: none; }
  .record div { grid-template-columns: 1fr; gap: var(--s-2); }
  .sent__title { font-size: var(--fs-h3); }
  .foot__links { flex-wrap: wrap; gap: var(--s-4); }
  .form { grid-template-columns: 1fr; }
  .form__foot { grid-template-columns: 1fr; }
  .btn--wide { width: 100%; }
  .promise .it { font-size: var(--fs-h3); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal], [data-words] .w i { opacity: 1; transform: none; transition: none; }
  .mark-window__photo { animation: none; }
  .bench__wires .glow, .arc .orbit, .ring-badge i, .pulse__line, .pulse__glow, .metro__marker::after, .metro__rail::before, .bench__lead::after, .pulse__node i { animation: none; }
  .quad__hand, .quad__arc, .card--hover::after { transition: none; }
  .pulse.in .pulse__line, .pulse.in .pulse__glow { animation: none; }
  .pulse__line { stroke-dashoffset: 0; }
  .pulse__glow { display: none; }
  .seat, .seat__body, .seat__body > div, .metro__marker, .card--hover { transition: none; }
  .seat__icon svg, .pulse__icon svg, .metro__icon svg { stroke-dashoffset: 0; transition: none; }
  .values .values__path path { stroke-dashoffset: 0; }
  .photo img { transform: none; }
  .btn::after { display: none; }
}