/* Hallmark · shape: Platform, by request: an audience-first company site with a router home, deep developer, deals, public-sector, professional-circle, knowledge, careers and international pages · genre: atmospheric · theme: Lumen retuned to the client's navy and gold · brand: BE NADLAN (spec 2026-10-30) · job: hire
 * hero: Poster with a reel of current renders and an ask field · nav: audience-first mega menu over a retracting bar · footer: statement with the legal row · type: one family, Heebo, weight carries the hierarchy by request · v8 light theme by request, night scope on hero, club band and footer */
/* Hallmark · dismissed 67 · Latin acronyms and project names inside running Hebrew copy (VISION, YTOWN, IP, PDF, BE NADLAN) are names, not labels set in caps */
/* Hallmark · dismissed 38iii · BE EARLY is the club's wordmark, set once in gold as its own line of the club heading */

/* Hallmark · dismissed 23 · the 6,700+ figure in gold is the deck's own language, navy tiles with gold numbers, asked for as the company's strength */
/* Hallmark · dismissed 59 · many sections by request: completed projects, total units, neighbourhoods, services, why BE NADLAN, knowledge, media, technology and about were each asked for by name */
/* Hallmark · dismissed F4 · the second hero action is the outlined pill over the photograph, not a fill */
/* Hallmark · dismissed F15 · the archive ledger, the media wall and the two-column splits each set their own gap by content */
/* Hallmark · waive 59 · the scale band butts the hero, a paper change, by design · the 6,700 figure reads as the hero's second beat */
/* Hallmark · dismissed 3 · the shape on .play::before is the play triangle drawn with borders, not a side stripe */
/* Hallmark · dismissed F7 · the pill radius sits on controls: the skip link, the audience switch and the two pause buttons */
/* Hallmark · dismissed 83 · the renders are the client's own portfolio of projects, the page's proof, so pictures carry more of it than usual */

:root {
  color-scheme: light;
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.25rem; --text-xl: 1.5625rem; --text-2xl: 1.953rem; --text-3xl: 2.441rem;
  --text-display-s: clamp(2.25rem, 4vw + 0.5rem, 4rem); --text-display: clamp(3.25rem, 7.4vw + 0.5rem, 8.5rem);
  --text-poster: clamp(4.5rem, 11vw + 1rem, 12rem);
  --text-section: clamp(2.25rem, 2.6vw + 1rem, 3.75rem); --text-title: clamp(1.25rem, 0.75vw + 0.875rem, 1.625rem); --text-lead: clamp(1.125rem, 0.35vw + 1rem, 1.375rem);
  --text-figure: clamp(2.5rem, 3vw + 1rem, 4rem); --text-quote: clamp(2rem, 3.2vw + 1rem, 4.25rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms; --dur-fade: 1200ms;
  --container: 1440px; --gutter: 64px; --gap-columns: 32px; --section-gap-s: 120px; --section-gap: 160px;
  --z-sticky-nav: 300;
  /* the client's navy (#001236) and gold (#E8B400), mixed in OKLCH */
  --color-paper: #F7F5F0; --color-paper-2: #FFFEFB; --color-paper-3: #EFEBE3;
  --color-deep: #EEF2F7;
  --color-ink: #0B1B3F; --color-ink-2: #3A4763; --color-muted: #5A6580;
  --color-rule: #E2DDD3; --color-rule-2: #CBC4B6;
  --color-accent: #7A5800; --color-accent-hover: #5E4400; --color-accent-ink: #0B1B3F;
  --color-accent-soft: #E8B40066;
  --color-gold: #E8B400; --color-gold-hover: #F2C21A;
  --color-focus: #0B1B3F;
  --color-tile: #FFFEFB;
  /* the night scope used by the hero, the club band and the footer */
  --dk-paper: oklch(17% 0.058 262); --dk-paper-2: oklch(21% 0.06 262); --dk-paper-3: oklch(25% 0.058 262); --dk-deep: oklch(13% 0.05 262);
  --dk-ink: oklch(96.5% 0.008 250); --dk-ink-2: oklch(86% 0.02 255); --dk-muted: oklch(73% 0.03 258);
  --dk-rule: oklch(31% 0.05 262); --dk-rule-2: oklch(41% 0.05 262);
  --dk-accent: oklch(81% 0.165 86); --dk-accent-hover: oklch(86% 0.15 88); --dk-accent-soft: oklch(81% 0.165 86 / 0.35);
  --scrim: oklch(13% 0.05 262 / 0.94); --scrim-mid: oklch(13% 0.05 262 / 0.55); --scrim-0: oklch(13% 0.05 262 / 0);
  --font-display: "Heebo", "Assistant", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Heebo", "Assistant", ui-sans-serif, system-ui, sans-serif;
  --radius-card: 18px; --glass-fill: #FFFEFB1F; --glass-hover: #FFFEFB33; --glass-line: #FFFEFB66; --radius-soft: 12px; --shadow-soft: 0 14px 34px -18px #0B1B3F40; --radius-pill: 999px; --rule-hair: 1px;
  --display-weight: 300;
  --banner-h: 40px;
  /* chart series, validated for the light surface (dataviz validate_palette: CVD 9.9, contrast 3:1+) */
  --viz-jer: #c98500; --viz-rg: #2a78d6; --viz-by: #d95926; --viz-rlz: #13936a;
  --color-error: oklch(76% 0.13 28);
}
.dark {
  color-scheme: dark; color: var(--color-ink);
  --color-paper: var(--dk-paper); --color-paper-2: var(--dk-paper-2); --color-paper-3: var(--dk-paper-3);
  --color-deep: var(--dk-deep);
  --color-ink: var(--dk-ink); --color-ink-2: var(--dk-ink-2); --color-muted: var(--dk-muted);
  --color-rule: var(--dk-rule); --color-rule-2: var(--dk-rule-2);
  --color-accent: var(--dk-accent); --color-accent-hover: var(--dk-accent-hover); --color-accent-ink: var(--dk-paper);
  --color-accent-soft: var(--dk-accent-soft);
  --color-focus: var(--dk-accent);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; background: var(--color-paper); }
html { scroll-padding-top: var(--space-3xl); scroll-behavior: smooth; scrollbar-color: var(--color-muted) var(--color-paper); }
body { margin: 0; color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.6; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
::selection { background: color-mix(in oklab, var(--color-accent) 30%, transparent); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
h1, h2, h3 { letter-spacing: -0.01em; margin: 0; font-family: var(--font-display); font-weight: var(--display-weight); font-synthesis: none; line-height: 1.08; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
h2 { max-width: 22ch; font-size: var(--text-section); }
h3 { font-size: var(--text-title); line-height: 1.2; font-weight: 500; letter-spacing: 0; }
p { margin: 0; text-wrap: pretty; }
ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
li { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lead { font-size: var(--text-lead); line-height: 1.5; color: var(--color-ink-2); max-width: 46ch; }
.skip { position: absolute; inset-inline-start: var(--space-md); top: var(--space-md); z-index: 400; padding: var(--space-xs) var(--space-md); background: var(--color-gold); color: var(--color-accent-ink); border-radius: var(--radius-pill); transform: translateY(-200%); }
.skip:focus-visible { transform: none; }
.progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 500; background: var(--color-gold); transform-origin: right; transform: scaleX(0); pointer-events: none; }

/* pictures: the client's renders in true colour */
.pic { position: relative; overflow: hidden; border-radius: var(--radius-card); background: var(--color-paper-2); max-width: 100%; }
.pic > img { width: 100%; height: 100%; object-fit: cover; }

/* controls */
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-lg); border: 1px solid transparent; border-radius: var(--radius-pill); font: 500 var(--text-md)/1 var(--font-body); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn--primary { background: var(--color-gold); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-gold-hover); }
.btn--quiet { box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule-2); color: var(--color-ink); background: var(--scrim-0); }
.btn--quiet:hover { background: var(--color-paper-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn[aria-disabled="true"], .btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.more { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.3em; }
.more:hover { color: var(--color-accent); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.chip { min-height: 44px; padding: 0 var(--space-md); border-radius: var(--radius-pill); border: 1px solid var(--color-rule-2); background: var(--scrim-0); cursor: pointer; font-size: var(--text-sm); transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.chip:hover { background: var(--color-paper-2); }
.chip[aria-pressed="true"], .chip[aria-selected="true"] { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }
.chip:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.chip:active { transform: translateY(1px); }
.chip:disabled { opacity: 0.5; cursor: not-allowed; }

/* chrome: a banner over a bar that retracts on scroll */
.banner { height: var(--banner-h); display: flex; align-items: center; justify-content: center; background: var(--color-paper-3); font-size: var(--text-sm); color: var(--color-ink-2); padding-inline: var(--space-md); }
.banner a { text-decoration: none; }
.banner a:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); }
.bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: var(--z-sticky-nav); background: color-mix(in oklab, var(--color-deep) 92%, transparent); border-bottom: var(--rule-hair) solid var(--color-rule); transition: transform var(--dur-short) var(--ease-out); }
.bar.is-tucked { transform: translateY(-100%); }
.bar__in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 76px; }
.mark { display: inline-flex; align-items: center; text-decoration: none; }
.mark img { height: 56px; width: auto; }
.nav { display: flex; gap: var(--space-lg); font-size: var(--text-md); }
.nav a { text-decoration: none; color: var(--color-ink-2); padding-block: var(--space-xs); white-space: nowrap; }
.nav a:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); }
.bar__end { display: flex; align-items: center; gap: var(--space-md); }
.lang { font-size: var(--text-sm); color: var(--color-muted); text-decoration: none; padding: var(--space-xs); }
.lang:hover { color: var(--color-ink); }

/* hero: a reel of the client's renders, an audience switch */
.hero { position: relative; min-height: calc(100svh - var(--banner-h) - 77px); display: grid; align-items: end; isolation: isolate; background: var(--color-deep); color: var(--color-ink); }
.reel { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.reel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--dur-fade) var(--ease-out); }
.reel img.is-on { opacity: 1; animation: drift 9s linear both; }
@keyframes drift { from { transform: scale(1.1); } to { transform: scale(1); } }
.reel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--scrim) 6%, var(--scrim-mid) 50%, var(--scrim-0) 100%); }
.hero__in { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-xl); align-items: end; padding-block: var(--space-3xl) var(--space-xl); }
.hero__text { display: grid; gap: var(--space-lg); }
.hero h1 { font-size: var(--text-display); line-height: 0.98; max-width: none; }
.rule-gold { width: 96px; height: 2px; background: var(--color-gold); border: 0; margin: 0; }
.who { display: inline-flex; padding: var(--space-2xs); gap: var(--space-2xs); border-radius: var(--radius-pill); background: var(--scrim-mid); border: 1px solid var(--color-rule-2); justify-self: start; }
.who button { min-height: 44px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-pill); background: var(--scrim-0); cursor: pointer; font-size: var(--text-md); transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.who button:hover { background: var(--color-paper-2); }
.who button[aria-selected="true"] { background: var(--color-ink); color: var(--color-paper); }
.who button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.who button:active { transform: translateY(1px); }
.who button:disabled { opacity: 0.5; background: var(--scrim-0); color: var(--color-muted); cursor: not-allowed; }
.hero .lead { color: var(--color-ink); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }
.reel-ctl { display: grid; gap: var(--space-sm); justify-items: end; text-align: end; }
.reel-ctl__now { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.2; }
.reel-ctl__where { font-size: var(--text-sm); color: var(--color-ink-2); }
.reel-ctl__bar { display: flex; align-items: center; gap: var(--space-sm); }
.reel-ctl__dots { display: flex; gap: var(--space-2xs); }
.reel-ctl__dots button { width: 44px; height: 44px; padding: 0; border: 0; background: var(--scrim-0); cursor: pointer; display: grid; place-items: center; }
.reel-ctl__dots button::before { content: ""; width: 18px; height: 2px; background: var(--color-rule-2); transition: background-color var(--dur-short) var(--ease-out); }
.reel-ctl__dots button[aria-current="true"]::before { background: var(--color-gold); }
.reel-ctl__dots button:focus-visible { outline: 2px solid var(--color-focus); }
.reel-ctl__pause { min-height: 44px; padding: 0 var(--space-md); border-radius: var(--radius-pill); border: 1px solid var(--color-rule-2); background: var(--scrim-mid); cursor: pointer; font-size: var(--text-sm); }
.reel-ctl__pause:hover { background: var(--color-paper-2); }
.reel-ctl__pause:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.reel-ctl__note { font-size: var(--text-xs); color: var(--color-muted); }

/* sections */
.section { padding-block: var(--section-gap) 0; }
.section__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-xl); align-items: end; margin-bottom: var(--space-2xl); }
.section__head .lead { justify-self: start; }

/* scale: the unit total and the map of the cities */
.scale { background: var(--color-deep); border-bottom: var(--rule-hair) solid var(--color-rule); padding-block: var(--space-3xl); color: var(--color-ink); }
.scale__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: center; }
.poster { font-family: var(--font-display); font-weight: 300; font-size: var(--text-poster); line-height: 0.86; color: var(--color-accent); direction: ltr; text-align: end; margin: 0; overflow-wrap: break-word; min-width: 0; }
.scale__say { display: grid; gap: var(--space-lg); }
.scale__say h2 { font-size: var(--text-display-s); }
.scale__note { font-size: var(--text-sm); color: var(--color-muted); max-width: 44ch; }
.scale__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule-2); }
.scale__row div { display: grid; gap: var(--space-2xs); padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.scale__row div:nth-child(odd) { padding-inline-end: var(--space-lg); border-inline-end: var(--rule-hair) solid var(--color-rule-2); }
.scale__row div:nth-child(even) { padding-inline-start: var(--space-lg); }
.scale__row strong { font-family: var(--font-display); font-weight: 300; font-size: var(--text-figure); line-height: 1; direction: ltr; justify-self: start; }
.scale__row span { color: var(--color-ink-2); }
.mapbox { display: grid; gap: var(--space-sm); }
.map { width: 100%; height: auto; max-height: 680px; direction: ltr; }
.map .coast { fill: none; stroke: var(--color-rule-2); stroke-width: 1.5; stroke-dasharray: 2 5; stroke-linecap: round; }
.map .sea { fill: var(--color-muted); font: 400 13px var(--font-body); }
.map .city { fill: var(--color-accent-soft); stroke: var(--color-accent); stroke-width: 1; }
.map text { fill: var(--color-ink-2); font: 400 14px var(--font-body); }
.mapbox figcaption { font-size: var(--text-sm); color: var(--color-muted); }
.bdi { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-lg); align-items: center; margin-top: var(--space-2xl); padding: var(--space-lg) var(--space-xl); border-radius: var(--radius-card); border: 1px solid var(--color-accent-soft); background: var(--color-paper); color: var(--color-ink); }
.bdi__mark { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1; color: var(--color-accent); }
.bdi p { font-size: var(--text-lg); line-height: 1.4; }
.bdi p span { display: block; color: var(--color-muted); font-size: var(--text-sm); margin-top: var(--space-2xs); }

/* catalogue: the live projects, filterable */
.filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-xl); }
.filters__count { font-size: var(--text-sm); color: var(--color-muted); }
.cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); }
.cards li[hidden] { display: none; }
.card { display: grid; gap: var(--space-md); text-decoration: none; }
.card .pic { aspect-ratio: 4 / 5; }
.card__hover { position: absolute; inset: auto 0 0; padding: var(--space-lg) var(--space-md) var(--space-md); background: linear-gradient(to top, var(--scrim), var(--scrim-0)); color: var(--color-ink); font-size: var(--text-sm); line-height: 1.45; transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.js .card__hover { opacity: 0; transform: translateY(8px); }
.js .card:hover .card__hover, .js .card:focus-visible .card__hover { opacity: 1; transform: none; }
.card:hover h3 { text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.2em; }
.card:focus-visible { outline-offset: 6px; border-radius: var(--radius-card); }
.card__meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xs) var(--space-md); align-items: baseline; }
.card__where { grid-column: 1 / -1; color: var(--color-muted); font-size: var(--text-sm); }
.card__units { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1; }
.card__units small { font-family: var(--font-body); font-size: var(--text-xs); color: var(--color-ink-2); margin-inline-start: var(--space-2xs); }
.card--soon .pic { display: grid; align-content: end; padding: var(--space-lg); border: 2px solid var(--color-accent); background: var(--color-paper-2); color: var(--color-ink); }
.card--soon .pic p { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.15; }

/* coming soon */
.card--live .pic { border-color: var(--color-rule-2); }
.soon { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--space-xl); align-items: start; margin-top: var(--space-2xl); padding-top: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.soon__h { font-size: var(--text-2xl); color: var(--color-accent); }
.soon__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); }
.soon__list li { display: grid; gap: var(--space-2xs); }
.soon__list b { font-weight: 300; font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.2; }
.soon__list span { color: var(--color-ink-2); font-size: var(--text-md); }

/* neighbourhoods: a sticky picture that changes as each line scrolls past */
.story { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-3xl); align-items: start; }
.story__stage { position: sticky; top: calc(var(--space-2xl) + env(safe-area-inset-top, 0px)); aspect-ratio: 4 / 5; max-height: calc(100svh - 128px); width: 100%; border-radius: var(--radius-card); overflow: hidden; background: var(--color-paper-2); }
.story__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--dur-long) var(--ease-out); }
.story__stage img.is-on { opacity: 1; }
.story__steps { display: grid; }
.step { min-height: 78svh; display: grid; align-content: center; gap: var(--space-lg); padding-block: var(--space-2xl); border-top: var(--rule-hair) solid var(--color-rule); }
.step:first-child { border-top: 0; padding-top: 0; min-height: 60svh; align-content: start; }
.step blockquote { font-family: var(--font-display); font-size: var(--text-quote); line-height: 1.08; text-wrap: balance; transition: color var(--dur-long) var(--ease-out); color: var(--color-muted); }
.step.is-on blockquote { color: var(--color-ink); }
.step figcaption { display: grid; gap: var(--space-2xs); color: var(--color-ink-2); font-size: var(--text-md); }
.step figcaption b { font-weight: 300; font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-ink); }
.step .pic { display: none; aspect-ratio: 16 / 10; }

/* one project opened */
.case { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: start; }
.case .pic { aspect-ratio: 16 / 10; }
.caption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.case__text { display: grid; gap: var(--space-xl); padding-top: var(--space-xs); }
.facts { border-top: var(--rule-hair) solid var(--color-rule); }
.facts div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.facts dt { color: var(--color-muted); font-size: var(--text-sm); padding-top: var(--space-3xs); }

/* archive: a ticker, then the ledger behind a switch */
.ticker { margin-top: var(--section-gap); border-block: var(--rule-hair) solid var(--color-rule); background: var(--color-deep); color: var(--color-ink); display: flex; align-items: center; gap: var(--space-md); overflow: hidden; }
.ticker__track { display: flex; gap: var(--space-2xl); padding-block: var(--space-lg); white-space: nowrap; animation: slide 60s linear infinite; font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-ink-2); }
.ticker__track span::after { content: "/"; margin-inline-start: var(--space-2xl); color: var(--color-accent); }
.ticker.is-paused .ticker__track, .ticker:hover .ticker__track, .ticker:focus-within .ticker__track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(50%); } }
.ticker__pause { flex: none; margin-inline-start: var(--space-md); min-height: 44px; padding: 0 var(--space-md); border-radius: var(--radius-pill); border: 1px solid var(--color-rule-2); background: var(--color-deep); cursor: pointer; font-size: var(--text-sm); position: relative; z-index: 1; }
.ticker__pause:hover { background: var(--color-paper-2); }
.ticker__pause:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.strip { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1.4fr); gap: var(--space-md); margin-bottom: var(--space-2xl); }
.strip .pic { height: 300px; }
.archive-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--space-lg); margin-bottom: var(--space-xl); }
.archive-sum { font-family: var(--font-display); font-size: var(--text-3xl); line-height: 1; }
.archive-sum small { display: block; font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-xs); }
.archive { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap-columns); }
.archive li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--space-sm); padding-block: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); }
.archive b { font-weight: 300; font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.25; }
.archive span { display: block; font-size: var(--text-sm); color: var(--color-muted); }
.archive--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.archive em { font-style: normal; font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-ink-2); }

/* why, with the sales team at work */
.why-wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: start; }
.why { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-xl); }
.why li { display: grid; gap: var(--space-md); align-content: start; padding-block: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.why h3 { font-size: var(--text-2xl); }
.why p { color: var(--color-ink-2); max-width: 48ch; }
.why-pics { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-md); }
.why-pics .pic { aspect-ratio: 3 / 4; }
.why-pics .pic:last-child { margin-top: var(--space-2xl); }

/* method: the services in the order the work runs */
.method { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gap-columns); counter-reset: step; position: relative; }
.method li { counter-increment: step; display: grid; gap: var(--space-md); align-content: start; padding-top: var(--space-xl); position: relative; }
.method li::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--color-rule-2); }
.method li::after { content: counter(step); position: absolute; top: -15px; inset-inline-start: 0; width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--radius-pill); background: var(--color-paper); border: 1px solid var(--color-accent); color: var(--color-accent); font-size: var(--text-sm); }
.method h3 { font-size: var(--text-xl); }
.method ul { display: grid; gap: var(--space-2xs); color: var(--color-ink-2); font-size: var(--text-md); }
.method-pic { margin-top: var(--space-3xl); display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-md); }
.method-pic .pic { height: 420px; }

/* technology and AI */
.tech { background: var(--color-deep); border-block: var(--rule-hair) solid var(--color-rule); padding-block: var(--space-3xl); margin-top: var(--section-gap); color: var(--color-ink); }
.tech__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; }
.tech__text { display: grid; gap: var(--space-lg); }
.tech__grid .pic { aspect-ratio: 16 / 9; }
.proofs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); margin-top: var(--space-2xl); }
.proofs li { display: grid; gap: var(--space-sm); align-content: start; padding-top: var(--space-lg); border-top: 2px solid var(--color-accent); }
.proofs strong { font-family: var(--font-display); font-weight: 300; font-size: var(--text-2xl); line-height: 1.1; }
.proofs p { color: var(--color-ink-2); }
.tech__duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); margin-top: var(--space-2xl); }
.tech__duo figure { display: grid; gap: var(--space-md); }
.tech__duo .pic { aspect-ratio: 16 / 9; }
.tech__duo h3 { font-size: var(--text-2xl); }
.tech__duo p { color: var(--color-ink-2); }

/* clients */
.logos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-md); margin-bottom: var(--space-2xl); }
.logos li { display: grid; place-items: center; height: 120px; padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-tile); }
.logos li.logos--dark { background: var(--color-paper-3); color: var(--color-ink); }
.logos img { max-height: 64px; width: auto; object-fit: contain; }
.clients__list { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-xl); font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.4; color: var(--color-ink-2); }

/* media wall */
.media-top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: end; margin-bottom: var(--space-2xl); }
.media-top figure { margin-top: var(--space-xl); }
.media-top blockquote { font-family: var(--font-display); font-size: var(--text-quote); line-height: 1.12; }
.media-top figcaption { color: var(--color-muted); font-size: var(--text-sm); margin-top: var(--space-md); }
.wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); margin-top: var(--space-xl); }
.wall li[hidden] { display: none; }
.item { display: grid; align-content: start; gap: var(--space-sm); min-height: 100%; padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule-2); text-decoration: none; }
.item:hover h3 { text-decoration: underline; text-decoration-color: var(--color-accent); }
.item__src { display: flex; justify-content: space-between; gap: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.item h3 { font-size: var(--text-xl); line-height: 1.25; }
.wall li.is-video { grid-column: span 2; }
.item--video .pic { aspect-ratio: 16 / 9; }
.item--video .pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--scrim-mid), var(--scrim-0)); }
.play { position: absolute; inset-inline-start: var(--space-lg); bottom: var(--space-lg); z-index: 1; display: inline-flex; align-items: center; gap: var(--space-sm); min-height: 44px; padding: 0 var(--space-lg) 0 var(--space-md); border-radius: var(--radius-pill); background: var(--color-gold); color: var(--color-accent-ink); font-weight: 500; font-size: var(--text-sm); }
.play::before { content: ""; width: 0; height: 0; border-block: 7px solid transparent; border-inline-end: 11px solid currentColor; }
.item__type { color: var(--color-accent); font-size: var(--text-sm); }

/* knowledge: the four booklets as covers */
.books { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); }
.book { display: grid; gap: var(--space-md); text-decoration: none; }
.cover { position: relative; aspect-ratio: 3 / 4; border-radius: 8px var(--radius-card) var(--radius-card) 4px; background: var(--color-deep); border: 1px solid var(--color-rule-2); padding: var(--space-xl) var(--space-lg) var(--space-lg); display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-md); overflow: hidden; transition: transform var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.cover::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 10px; background: var(--color-gold); }
.book:hover .cover { transform: translateY(-6px); border-color: var(--color-accent); }
.cover__no::before { content: attr(data-no); }
.cover__no { font-family: var(--font-display); font-size: var(--text-poster); line-height: 0.8; color: var(--color-paper-3); direction: ltr; justify-self: end; }
.cover h3 { font-size: var(--text-2xl); line-height: 1.1; align-self: end; }
.cover__by { font-size: var(--text-sm); color: var(--color-muted); }
.book p { color: var(--color-ink-2); }
.articles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); margin-top: var(--space-2xl); }
.articles a { display: grid; gap: var(--space-xs); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule-2); text-decoration: none; }
.articles a:hover h3 { text-decoration: underline; text-decoration-color: var(--color-accent); }
.articles p { color: var(--color-ink-2); }

/* about */
.about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: start; }
.about__text { display: grid; gap: var(--space-lg); position: sticky; top: calc(var(--space-3xl) + env(safe-area-inset-top, 0px)); }
.about__text p { color: var(--color-ink-2); font-size: var(--text-lg); max-width: 52ch; }
.timeline li { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--space-lg); padding-block: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.timeline time { font-family: var(--font-display); font-size: var(--text-3xl); line-height: 1; color: var(--color-accent); }
.timeline h3 { font-size: var(--text-xl); }
.timeline p { color: var(--color-ink-2); margin-top: var(--space-2xs); }

/* close */
.close { padding-block: var(--section-gap) var(--section-gap-s); }
.close__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: end; }
.close h2 { font-size: var(--text-display-s); max-width: 14ch; }
.close .lead { margin-top: var(--space-lg); }
.contact { display: grid; gap: var(--space-md); font-family: var(--font-display); font-size: var(--text-2xl); }
.contact a { text-decoration: none; justify-self: start; border-bottom: var(--rule-hair) solid var(--color-rule-2); padding-bottom: var(--space-2xs); transition: border-color var(--dur-short) var(--ease-out); }
.contact a:hover { border-color: var(--color-accent); }
.contact__addr { font-family: var(--font-body); font-size: var(--text-lg); color: var(--color-ink-2); }

/* footer: statement */
.foot { border-top: var(--rule-hair) solid var(--color-rule); padding-block: var(--space-3xl) var(--space-xl); background: var(--color-deep); color: var(--color-ink); }
.foot__top { display: flex; justify-content: space-between; align-items: end; gap: var(--space-xl); }
.foot__statement { font-family: var(--font-display); font-size: var(--text-section); line-height: 1.1; max-width: 20ch; }
.foot__logo { height: 120px; width: auto; }
.foot__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-lg); margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); }
.foot__links { display: flex; flex-wrap: wrap; gap: var(--space-lg); }
.foot__links a { text-decoration: none; }
.foot__links a:hover { color: var(--color-ink); text-decoration: underline; }

@media (max-width: 80rem) {
  .nav { display: none; }
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .archive { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .method { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--space-2xl); }
  .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 60rem) {
  :root { --gutter: 24px; --section-gap-s: 80px; --section-gap: 104px; }
  .hero__in, .section__head, .case, .close__grid, .scale__grid, .why-wrap, .tech__grid, .about, .media-top, .story { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .reel-ctl { justify-items: start; text-align: start; }
  .poster { text-align: start; justify-self: start; }
  .story__stage { display: none; }
  .step, .step:first-child { min-height: 0; padding-block: var(--space-xl); }
  .step blockquote { color: var(--color-ink); }
  .step .pic { display: block; }
  .about__text { position: static; }
  .tech__duo, .articles { grid-template-columns: minmax(0, 1fr); }
  .proofs, .books { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .archive { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .strip { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .strip .pic { height: 200px; }
  .bdi { grid-template-columns: minmax(0, 1fr); }
  .soon, .soon__list { grid-template-columns: minmax(0, 1fr); }
  .method-pic { grid-template-columns: minmax(0, 1fr); }
  .method-pic .pic { height: 280px; }
}
@media (max-width: 40rem) {
  :root { --gutter: 16px; --section-gap-s: 56px; --section-gap: 80px; --gap-columns: 16px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--space-md); }
  .method, .proofs, .archive, .why, .books, .wall { grid-template-columns: minmax(0, 1fr); }
  .wall li.is-video { grid-column: auto; }
  .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bar__end .btn { display: none; }
  .mark img { height: 46px; }
  .foot__top { flex-direction: column; align-items: start; }
  .scale__row { grid-template-columns: minmax(0, 1fr); }
  .scale__row div:nth-child(odd) { border-inline-end: 0; padding-inline-end: 0; }
  .scale__row div:nth-child(even) { padding-inline-start: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bar, .btn, .chip, .who button, .card__hover, .cover, .contact a, .story__stage img, .step blockquote, .reel img { transition: none; }
  .bar.is-tucked { transform: none; }
  .reel img.is-on { animation: none; }
  .ticker__track { animation: none; flex-wrap: wrap; white-space: normal; }
  .progress { display: none; }
}

/* v6 · kicker over section titles */
.kicker { color: var(--color-accent); font-size: var(--text-sm); font-weight: 500; margin-bottom: var(--space-sm); }

/* programme: the stair of unit types */
.prog { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: start; }
.stairs { display: grid; gap: var(--space-lg); padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-deep); border: var(--rule-hair) solid var(--color-rule); }
.stairs figcaption { color: var(--color-ink-2); max-width: 60ch; }
.stairs figcaption b { display: block; font-family: var(--font-display); font-weight: 300; font-size: var(--text-2xl); color: var(--color-ink); margin-bottom: var(--space-xs); }
.stairs ol { display: grid; gap: var(--space-md); }
.stairs li { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-lg); align-items: center; }
.stair__bar { display: flex; align-items: center; gap: var(--space-sm); height: 40px; }
.stair__bar::before { content: ""; flex: none; height: 100%; width: calc(var(--w) * 2.8%); border-radius: 8px; background: var(--color-gold); transform-origin: right; transition: transform var(--dur-fade) var(--ease-out); }
.js .stairs:not(.is-in) .stair__bar::before { transform: scaleX(0); }
.stair__bar span { font-family: var(--font-display); font-size: var(--text-xl); }
.stairs li p { color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.4; }
.stairs li p b { display: block; color: var(--color-ink); font-size: var(--text-md); font-weight: 500; }
.stairs__note { font-size: var(--text-xs); color: var(--color-muted); }
.prog__side { display: grid; gap: var(--space-xl); justify-items: start; }
.prog__q { font-family: var(--font-display); font-size: var(--text-quote); line-height: 1.1; }
.prog__list { display: grid; width: 100%; }
.prog__list li, .desk li, .after__flow li { display: grid; gap: var(--space-2xs); padding-block: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.prog__list b, .desk li b, .after__flow b { font-weight: 500; font-size: var(--text-lg); }
.prog__list span, .desk li span, .after__flow span { color: var(--color-ink-2); }

/* market analyst */
.viz-wrap { display: grid; gap: var(--space-md); padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-deep); border: var(--rule-hair) solid var(--color-rule); }
.viz-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-md); }
.chip--key::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-inline-end: var(--space-xs); background: var(--k); vertical-align: 0; }
.chip--jer { --k: var(--viz-jer); } .chip--rg { --k: var(--viz-rg); } .chip--by { --k: var(--viz-by); } .chip--rlz { --k: var(--viz-rlz); }
.viz-tip { font-size: var(--text-sm); color: var(--color-ink-2); min-height: 1.6em; }
.viz-box { position: relative; border-radius: 8px; }
.viz-box:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.viz { direction: ltr; display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-body); }
.viz__grid line { stroke: var(--color-rule); stroke-width: 1; }
.viz__grid text, .viz__x text { fill: var(--color-muted); font-size: 12px; }
.viz__partial { fill: var(--color-paper-2); opacity: 0.6; }
.viz__line { fill: none; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; transition: opacity var(--dur-short) var(--ease-out); }
.viz__line--part { stroke-dasharray: 4 5; }
.viz__end { fill: var(--c); stroke: var(--color-deep); stroke-width: 2; }
.viz__lab { fill: var(--color-ink); font-size: 13px; }
.viz__s--jer { --c: var(--viz-jer); } .viz__s--rg { --c: var(--viz-rg); } .viz__s--by { --c: var(--viz-by); } .viz__s--rlz { --c: var(--viz-rlz); }
.viz.is-focus .viz__s:not(.is-on) { opacity: 0.18; }
.js .viz:not(.is-drawn) .viz__line { stroke-dasharray: 1400; stroke-dashoffset: 1400; }
.viz.is-drawn .viz__line:not(.viz__line--part) { transition: stroke-dashoffset 1600ms var(--ease-out), opacity var(--dur-short) var(--ease-out); stroke-dashoffset: 0; }
.viz__hover { opacity: 0; pointer-events: none; }
.viz.is-hover .viz__hover { opacity: 1; }
.viz__cross { stroke: var(--color-ink-2); stroke-width: 1; }
.viz__dot { stroke: var(--color-deep); stroke-width: 2; }
.viz__dot--jer { fill: var(--viz-jer); } .viz__dot--rg { fill: var(--viz-rg); } .viz__dot--by { fill: var(--viz-by); } .viz__dot--rlz { fill: var(--viz-rlz); }
.viz__hit { fill: transparent; cursor: crosshair; }
.viz-card { color: var(--color-ink); position: absolute; top: 8px; z-index: 2; min-width: 190px; padding: var(--space-sm) var(--space-md); border-radius: 10px; background: var(--color-paper-3); border: var(--rule-hair) solid var(--color-rule-2); font-size: var(--text-sm); pointer-events: none; }
.viz-card[hidden] { display: none; }
.viz-card b { display: block; font-family: var(--font-display); font-weight: 300; font-size: var(--text-lg); margin-bottom: var(--space-2xs); }
.viz-card p { display: flex; justify-content: space-between; gap: var(--space-md); }
.viz-card i { font-style: normal; display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-ink-2); }
.viz-card i::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--k); }
.viz-src { font-size: var(--text-xs); color: var(--color-muted); max-width: 110ch; }
.viz-src a { color: var(--color-ink-2); }
.viz-table summary { min-height: 44px; display: inline-flex; align-items: center; cursor: pointer; color: var(--color-ink-2); text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.3em; }
.viz-table__scroll { overflow-x: auto; }
.viz-table table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); margin-top: var(--space-sm); }
.viz-table caption { text-align: start; color: var(--color-muted); padding-bottom: var(--space-xs); }
.viz-table th, .viz-table td { padding: var(--space-xs) var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); text-align: start; }
.viz-table td { direction: ltr; text-align: end; }
.pulse { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); margin-top: var(--space-2xl); }
.pulse__i { display: grid; gap: var(--space-2xs); padding-top: var(--space-lg); border-top: 2px solid var(--k); }
.pulse__i--jer { --k: var(--viz-jer); } .pulse__i--rg { --k: var(--viz-rg); } .pulse__i--by { --k: var(--viz-by); } .pulse__i--rlz { --k: var(--viz-rlz); }
.pulse__city { font-size: var(--text-lg); }
.pulse__big { font-family: var(--font-display); font-size: var(--text-figure); line-height: 1; justify-self: start; }
.pulse__what { font-size: var(--text-sm); color: var(--color-muted); }
.pulse__now { font-size: var(--text-sm); color: var(--color-ink-2); margin-top: var(--space-xs); }
.analyst__more { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); margin-top: var(--space-3xl); align-items: start; }
.desk { display: grid; gap: var(--space-lg); justify-items: start; }
.desk h3, .brief h3, .after h3 { font-size: var(--text-2xl); }
.desk ul { width: 100%; }

/* forms */
.brief, .ask { display: grid; gap: var(--space-md); align-content: start; padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule-2); }
.brief > p:not(.field__err):not(.form__note) { color: var(--color-ink-2); }
label, legend { font-size: var(--text-md); }
input:not([type="checkbox"]):not([type="radio"]), select, textarea { width: 100%; min-height: 48px; padding: var(--space-sm) var(--space-md); border-radius: 10px; border: 1px solid var(--color-rule-2); background: var(--color-deep); color: var(--color-ink); caret-color: var(--color-accent); font: inherit; }
textarea { resize: vertical; min-height: 96px; }
input:hover, select:hover, textarea:hover { border-color: var(--color-muted); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; border-color: var(--color-accent); }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--color-error); }
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; accent-color: var(--color-accent); flex: none; margin: var(--space-3xs) 0 0; }
.check { display: flex; gap: var(--space-sm); align-items: start; font-size: var(--text-sm); color: var(--color-ink-2); }
.check a { color: var(--color-ink); }
.field { display: grid; gap: var(--space-xs); }
.field--set { border: 0; padding: 0; margin: 0; }
.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs) var(--space-lg); }
.checks--row { grid-template-columns: repeat(3, max-content); }
.checks label { display: flex; gap: var(--space-xs); align-items: center; min-height: 44px; color: var(--color-ink-2); cursor: pointer; }
.opt, .hint { color: var(--color-muted); font-size: var(--text-xs); }
.field__err { color: var(--color-error); font-size: var(--text-sm); }
.form__note { font-size: var(--text-sm); color: var(--color-ink-2); }
.form__note:empty { display: none; }
.brief .btn { justify-self: start; }

.close__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: end; margin-bottom: var(--space-2xl); }
.close__head .lead { margin-top: 0; }
.close__grid { align-items: start; }
.ask { gap: var(--space-lg); padding: var(--space-xl) var(--space-xl) var(--space-lg); }
.ask fieldset.ask__step { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-lg); }
.ask__step > legend { font-family: var(--font-display); font-size: var(--text-2xl); margin-bottom: var(--space-md); padding: 0; }
.ask__steps { display: flex; gap: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); counter-reset: s; }
.ask__steps li { counter-increment: s; display: flex; align-items: center; gap: var(--space-xs); flex: 1; padding-bottom: var(--space-sm); border-bottom: 2px solid var(--color-rule-2); }
.ask__steps li::before { content: counter(s); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid currentColor; font-size: var(--text-xs); }
.ask__steps li[aria-current="step"], .ask__steps li.is-done { color: var(--color-ink); border-color: var(--color-accent); }
.paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.path { position: relative; display: flex; gap: var(--space-sm); align-items: start; padding: var(--space-md); border-radius: 12px; border: 1px solid var(--color-rule-2); background: var(--color-deep); cursor: pointer; transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.path:hover { border-color: var(--color-muted); }
.path:has(input:checked) { border-color: var(--color-accent); background: var(--color-paper-3); }
.path:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.path span { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.path b { font-size: var(--text-lg); font-weight: 500; color: var(--color-ink); }
.when { display: grid; gap: var(--space-lg); }
.when[hidden], .ask fieldset.ask__step[hidden], .field[hidden] { display: none; }
.ask__nav { display: flex; gap: var(--space-sm); justify-content: flex-end; padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.ask__nav [hidden] { display: none; }
.ask__done { padding: var(--space-lg); border-radius: 12px; border: 1px solid var(--color-accent-soft); background: var(--color-deep); display: grid; gap: var(--space-sm); }
.ask__done:focus { outline: none; }
.ask__done[hidden] { display: none; }
.ask__done h3 { font-size: var(--text-xl); }
.ask__done dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2xs) var(--space-md); font-size: var(--text-sm); }
.ask__done dt { color: var(--color-muted); }
.ask__done p { color: var(--color-ink-2); font-size: var(--text-sm); }
.after { display: grid; gap: var(--space-xl); align-content: start; }
.after__flow { counter-reset: f; }
.after__flow li { counter-increment: f; grid-template-columns: 32px minmax(0, 1fr); column-gap: var(--space-md); }
.after__flow li::before { content: counter(f); grid-row: span 2; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--color-accent); color: var(--color-accent); font-size: var(--text-sm); }
.ai-card { color: var(--color-ink); display: grid; gap: var(--space-sm); justify-items: start; padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-deep); border: var(--rule-hair) solid var(--color-accent-soft); }
.ai-card__h { font-family: var(--font-display); font-size: var(--text-xl); }
.ai-card p:not(.ai-card__h) { color: var(--color-ink-2); font-size: var(--text-sm); }
.after__addr { font-size: var(--text-sm); color: var(--color-muted); }
.after__addr a { color: var(--color-ink-2); }

/* knowledge tracks */
.tracks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); margin-top: var(--space-2xl); }
.tracks a, .tracks button { display: grid; gap: var(--space-2xs); width: 100%; min-height: 100%; text-align: start; padding: var(--space-lg); border-radius: var(--radius-card); border: 1px solid var(--color-rule-2); background: var(--color-paper-2); color: inherit; font: inherit; text-decoration: none; cursor: pointer; transition: border-color var(--dur-short) var(--ease-out); }
.tracks a:hover, .tracks button:hover { border-color: var(--color-accent); }
.tracks a:focus-visible, .tracks button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.tracks b { font-size: var(--text-lg); font-weight: 500; }
.tracks span { color: var(--color-ink-2); font-size: var(--text-sm); }

/* assistant */
.ai-fab { position: fixed; inset-inline-start: var(--space-lg); bottom: var(--space-lg); z-index: var(--z-sticky-nav); display: inline-flex; align-items: center; gap: var(--space-sm); min-height: 52px; padding: 0 var(--space-lg); border-radius: var(--radius-pill); border: 1px solid var(--color-accent); background: var(--color-deep); color: var(--color-ink); font: 500 var(--text-md)/1 var(--font-body); cursor: pointer; transition: transform var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.ai-fab:hover { background: var(--color-paper-3); }
.ai-fab:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.ai-fab__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-gold); box-shadow: 0 0 0 4px var(--color-accent-soft); }
.ai { width: min(440px, 100% - 32px); max-height: min(720px, 100% - 32px); margin: auto var(--space-lg) var(--space-lg) auto; padding: 0; border-radius: var(--radius-card); border: 1px solid var(--color-rule-2); background: var(--color-paper); color: var(--color-ink); }
.ai[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; }
.ai::backdrop { background: var(--scrim-mid); }
.ai__head { display: flex; justify-content: space-between; align-items: start; gap: var(--space-md); padding: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.ai__h { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.2; }
.ai__sub { font-size: var(--text-xs); color: var(--color-muted); }
.ai__x { min-height: 44px; padding: 0 var(--space-md); border-radius: var(--radius-pill); border: 1px solid var(--color-rule-2); background: var(--scrim-0); color: var(--color-ink); font: inherit; font-size: var(--text-sm); cursor: pointer; }
.ai__x:hover { background: var(--color-paper-2); }
.ai__x:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.ai__log { overflow-y: auto; display: grid; align-content: start; gap: var(--space-md); padding: var(--space-lg); min-height: 200px; }
.msg { max-width: 88%; padding: var(--space-sm) var(--space-md); border-radius: 12px; font-size: var(--text-sm); line-height: 1.55; white-space: pre-wrap; }
.msg--bot { justify-self: start; background: var(--color-paper-2); }
.msg--me { justify-self: end; background: var(--color-paper-3); border: 1px solid var(--color-rule-2); }
.msg--warn { justify-self: stretch; max-width: none; border: 1px solid var(--color-accent-soft); background: var(--color-deep); color: var(--color-ink-2); }
.msg a { color: var(--color-accent); }
.ai__chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); padding: 0 var(--space-lg) var(--space-md); }
.ai__chips .chip { font-size: var(--text-xs); min-height: 44px; white-space: nowrap; }
.ai__form { display: grid; gap: var(--space-sm); padding: var(--space-md) var(--space-lg) var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.ai__form textarea { min-height: 64px; }
.ai__row { display: flex; justify-content: flex-end; gap: var(--space-sm); }
.ai__row [hidden] { display: none; }
.ai__note { font-size: var(--text-xs); color: var(--color-muted); line-height: 1.5; }
.ai__note a { color: var(--color-ink-2); }

@media (max-width: 80rem) {
  .pulse { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-xl); }
}
@media (max-width: 60rem) {
  .prog, .analyst__more, .close__head { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .tracks { grid-template-columns: minmax(0, 1fr); }
  .proofs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .viz-wrap, .stairs, .brief, .ask { padding: var(--space-lg) var(--space-md); }
  .paths, .checks, .pulse { grid-template-columns: minmax(0, 1fr); }
  .checks--row { grid-template-columns: repeat(3, max-content); }
  .stairs li { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .ai-fab { inset-inline-start: var(--space-md); bottom: var(--space-md); }
  .ai { margin: auto var(--space-md) var(--space-md); }
  .viz-box { overflow-x: auto; }
  .viz { min-width: 600px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .stairs:not(.is-in) .stair__bar::before { transform: none; }
  .js .viz:not(.is-drawn) .viz__line { stroke-dasharray: none; stroke-dashoffset: 0; }
  .viz__line--part { stroke-dasharray: 4 5; }
}

/* BE FIRST presale club */
.club { margin-top: var(--section-gap); padding-block: var(--space-3xl); background: var(--color-deep); border-block: var(--rule-hair) solid var(--color-accent-soft); }
.club__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-3xl); align-items: start; }
.club__say { display: grid; gap: var(--space-lg); }
.club__mark { white-space: nowrap; font-family: var(--font-display); font-size: var(--text-display); line-height: 0.85; color: inherit; justify-self: start; }
.club__say h2 { font-size: var(--text-display-s); max-width: 16ch; }
.club__perks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-xl); margin-top: var(--space-md); }
.club__perks li { display: grid; gap: var(--space-2xs); padding-block: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule-2); }
.club__perks b { font-weight: 500; font-size: var(--text-lg); }
.club__perks span { color: var(--color-ink-2); }
.club__next { display: grid; gap: var(--space-sm); }
.club__next-h { color: var(--color-accent); font-size: var(--text-sm); font-weight: 500; }
.club__next ul { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.club__next li { padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); border: 1px solid var(--color-rule-2); font-size: var(--text-sm); }
.join { display: grid; gap: var(--space-md); padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-accent-soft); }
.join h3 { font-size: var(--text-2xl); }
.join__free { color: var(--color-ink-2); margin-top: calc(var(--space-xs) * -1); }
.join__two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.join .btn { justify-self: start; }
.join__fine { font-size: var(--text-xs); color: var(--color-muted); }
.soon__club { margin-top: var(--space-2xs); }
.social { display: flex; flex-wrap: wrap; gap: var(--space-lg); }
.social a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink-2); }
.social a:hover { color: var(--color-ink); }
@media (max-width: 60rem) {
  .club__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
}
@media (max-width: 40rem) {
  .club__perks, .join__two { grid-template-columns: minmax(0, 1fr); }
  .join { padding: var(--space-lg) var(--space-md); }
}

/* v7 · one family across the site: Heebo for display and text, weight carries the hierarchy */
:root { --font-body: "Heebo", "Assistant", ui-sans-serif, system-ui, sans-serif; --bar-h: 72px; }
.poster, .scale__row strong, .pulse__big, .timeline time, .archive-sum { font-weight: 300; letter-spacing: -0.02em; }
b, strong { font-weight: 500; }

/* header: audience-first mega menu */
.bar { position: sticky; top: 0; z-index: var(--z-sticky-nav); }
.bar__in { gap: var(--space-lg); }
.mnav { display: flex; align-items: center; gap: var(--space-2xs); }
.mnav__item { position: static; }
.mnav__btn, .mnav__link { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 44px; padding: 0 var(--space-sm); border: 0; border-radius: var(--radius-pill); background: var(--scrim-0); color: var(--color-ink); font: 400 var(--text-sm)/1 var(--font-body); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color var(--dur-short) var(--ease-out); }
.mnav__btn::after { content: ""; width: 6px; height: 6px; border-inline-end: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--dur-short) var(--ease-out); }
.mnav__btn[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
.mnav__btn:hover, .mnav__link:hover, .mnav__btn[aria-expanded="true"] { background: var(--color-paper-2); }
.mnav__btn:focus-visible, .mnav__link:focus-visible, .tool:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.mnav__link[aria-current="page"], .mnav__btn.is-here { color: var(--color-accent); }
.mega { position: absolute; inset-inline: 0; top: 100%; background: var(--color-deep); border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.mega[hidden] { display: none; }
.mega__in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-2xl); padding-block: var(--space-xl) var(--space-2xl); }
.mega__say h2 { font-size: var(--text-2xl); max-width: 18ch; }
.mega__say p { color: var(--color-ink-2); margin-top: var(--space-sm); max-width: 46ch; }
.mega__say .more { margin-top: var(--space-sm); }
.mega__links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs) var(--space-lg); align-content: start; }
.mega__links a { display: grid; gap: var(--space-3xs); padding: var(--space-sm) var(--space-md); border-radius: 12px; text-decoration: none; transition: background-color var(--dur-short) var(--ease-out); }
.mega__links a:hover { background: var(--color-paper-2); }
.mega__links a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.mega__links b { font-weight: 500; }
.mega__links span { font-size: var(--text-sm); color: var(--color-muted); line-height: 1.4; }
.tools { display: flex; align-items: center; gap: var(--space-xs); }
.tool { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; padding: 0 var(--space-md); border-radius: var(--radius-pill); border: 1px solid var(--color-rule-2); background: var(--scrim-0); color: var(--color-ink); font: 400 var(--text-sm)/1 var(--font-body); text-decoration: none; cursor: pointer; }
.tool:hover { background: var(--color-paper-2); }
.tool kbd { font: inherit; font-size: var(--text-xs); color: var(--color-muted); }
.burger { display: none; }
.drawer-nav { width: min(420px, 100%); height: 100%; max-height: none; margin: 0 0 0 auto; padding: 0; border: 0; background: var(--color-deep); color: var(--color-ink); }
.drawer-nav::backdrop { background: var(--scrim-mid); }
.drawer-nav[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.drawer-nav__head { display: flex; justify-content: space-between; align-items: center; padding: var(--space-md) var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.drawer-nav__body { overflow-y: auto; padding: var(--space-md) var(--space-lg) var(--space-2xl); display: grid; gap: var(--space-xs); align-content: start; }
.drawer-nav details { border-bottom: var(--rule-hair) solid var(--color-rule); }
.drawer-nav summary { min-height: 52px; display: flex; align-items: center; font-size: var(--text-lg); cursor: pointer; }
.drawer-nav details a { display: flex; min-height: 44px; align-items: center; padding-inline-start: var(--space-md); color: var(--color-ink-2); text-decoration: none; }
.drawer-nav .drawer-nav__plain { display: flex; min-height: 52px; align-items: center; font-size: var(--text-lg); text-decoration: none; border-bottom: var(--rule-hair) solid var(--color-rule); }

/* doors: the router under the hero */
.doors { padding-block: var(--space-2xl) var(--space-3xl); background: var(--color-deep); border-bottom: var(--rule-hair) solid var(--color-rule); }
.doors__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--space-md); margin-bottom: var(--space-xl); }
.doors__head h2 { font-size: var(--text-3xl); }
.doors__head p { color: var(--color-ink-2); max-width: 52ch; }
.doors__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); }
.door { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-sm); min-height: 196px; padding: var(--space-lg); border-radius: var(--radius-card); border: 1px solid var(--color-rule-2); background: var(--color-paper); text-decoration: none; overflow: hidden; transition: border-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.door:hover { border-color: var(--color-accent); transform: translateY(-3px); }
.door:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.door__who { font-size: var(--text-sm); color: var(--color-accent); }
.door__what { font-size: var(--text-2xl); font-weight: 300; line-height: 1.15; }
.door__go { display: flex; justify-content: space-between; align-items: center; color: var(--color-ink-2); font-size: var(--text-sm); }
.door__go::after { content: ""; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--color-rule-2); background: linear-gradient(var(--color-ink), var(--color-ink)) center / 10px 1.5px no-repeat; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.door:hover .door__go::after { border-color: var(--color-accent); background-color: var(--color-accent); }
.door--lead { grid-column: span 2; background: linear-gradient(120deg, var(--color-paper-3), var(--color-paper)); border-color: var(--color-accent-soft); }
.doors__more { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); }
.doors__more a { color: var(--color-ink-2); }

/* hero ask field */
.ask-hero { display: flex; gap: var(--space-xs); align-items: center; max-width: 560px; margin-top: var(--space-lg); padding: var(--space-2xs); padding-inline-start: var(--space-md); border-radius: var(--radius-pill); background: var(--scrim); border: 1px solid var(--color-rule-2); }
.ask-hero label { flex: 1; color: var(--color-muted); cursor: text; min-height: 44px; display: flex; align-items: center; }
.ask-hero .btn { min-height: 44px; }

/* project rail */
.rail-wrap { position: relative; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 22%); gap: var(--gap-columns); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-lg); scrollbar-width: thin; overscroll-behavior-x: contain; }
.rail > li { scroll-snap-align: start; }
.rail > li[hidden] { display: none; }
.rail-ctl { display: flex; gap: var(--space-xs); }
.rail-ctl button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--color-rule-2); background: var(--scrim-0); color: var(--color-ink); cursor: pointer; font-size: var(--text-lg); }
.rail-ctl button:hover { background: var(--color-paper-2); }
.rail-ctl button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.card { width: 100%; text-align: start; font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.card__badge { position: absolute; top: var(--space-sm); inset-inline-start: var(--space-sm); z-index: 1; padding: var(--space-3xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-gold); color: var(--color-accent-ink); font-size: var(--text-xs); font-weight: 500; }

/* quick view sheet and drawers */
.sheet { width: min(640px, 100%); height: 100%; max-height: none; margin: 0 auto 0 0; padding: 0; border: 0; background: var(--color-paper); color: var(--color-ink); }
.sheet::backdrop { background: var(--scrim-mid); }
.sheet[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.sheet__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); padding: var(--space-md) var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.sheet__body { overflow-y: auto; padding: var(--space-lg); display: grid; gap: var(--space-lg); align-content: start; }
.sheet__body .pic { aspect-ratio: 16 / 10; }
.sheet__body h2 { font-size: var(--text-3xl); }
.sheet__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.sheet__facts div { padding-top: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule-2); }
.sheet__facts dt { font-size: var(--text-xs); color: var(--color-muted); }
.sheet__facts dd { margin: 0; font-size: var(--text-lg); }
.sheet__cta { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.fine { font-size: var(--text-xs); color: var(--color-muted); line-height: 1.5; }
.x { min-height: 44px; padding: 0 var(--space-md); border-radius: var(--radius-pill); border: 1px solid var(--color-rule-2); background: var(--scrim-0); color: var(--color-ink); font: inherit; font-size: var(--text-sm); cursor: pointer; }
.x:hover { background: var(--color-paper-2); }
.x:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* 360: the wheel of services */
.s360 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); }
.s360__core { grid-column: span 2; grid-row: span 2; display: grid; align-content: center; gap: var(--space-md); padding: var(--space-xl); border-radius: var(--radius-card); background: radial-gradient(circle at 30% 30%, var(--color-paper-3), var(--color-deep)); border: 1px solid var(--color-accent-soft); }
.s360__core strong { font-size: var(--text-poster); font-weight: 300; line-height: 0.9; color: var(--color-accent); direction: ltr; justify-self: start; }
.s360__core p { color: var(--color-ink-2); max-width: 48ch; }
.s360__i { display: grid; align-content: start; gap: var(--space-xs); padding: var(--space-lg); border-radius: var(--radius-card); border: 1px solid var(--color-rule-2); background: var(--color-paper-2); text-decoration: none; transition: border-color var(--dur-short) var(--ease-out); }
a.s360__i:hover { border-color: var(--color-accent); }
a.s360__i:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.s360__i em { font-style: normal; font-size: var(--text-xs); color: var(--color-accent); direction: ltr; justify-self: start; }
.s360__i b { font-size: var(--text-lg); font-weight: 500; }
.s360__i span { font-size: var(--text-sm); color: var(--color-ink-2); line-height: 1.45; }

/* deal highlight */
.deal { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; padding: var(--space-2xl); margin-top: var(--space-2xl); border-radius: var(--radius-card); background: var(--color-deep); border: 1px solid var(--color-accent-soft); }
.deal__fig { font-size: var(--text-display-s); font-weight: 300; line-height: 1; color: var(--color-accent); }
.deal__fig small { display: block; font-size: var(--text-lg); color: var(--color-ink-2); margin-top: var(--space-xs); }
.deal p { color: var(--color-ink-2); }
.deal h3 { font-size: var(--text-2xl); margin-bottom: var(--space-sm); }

/* inner pages: hero, chapters rail, prose */
.phero { padding-block: var(--space-3xl) var(--space-2xl); background: var(--color-deep); border-bottom: var(--rule-hair) solid var(--color-rule); }
.phero__crumbs { font-size: var(--text-sm); color: var(--color-muted); margin-bottom: var(--space-lg); }
.phero__crumbs a { color: var(--color-ink-2); }
.phero h1 { font-size: var(--text-display-s); max-width: 20ch; }
.phero .lead { margin-top: var(--space-lg); max-width: 60ch; }
.phero__cta { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
.doc { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--space-3xl); padding-block: var(--space-3xl); align-items: start; }
.toc { position: sticky; top: calc(var(--bar-h) + var(--space-lg)); display: grid; gap: var(--space-2xs); font-size: var(--text-sm); }
.toc p { color: var(--color-muted); margin-bottom: var(--space-xs); }
.toc a { display: flex; align-items: center; min-height: 36px; padding-inline-start: var(--space-md); border-inline-start: 2px solid var(--color-rule); color: var(--color-ink-2); text-decoration: none; }
.toc a:hover { color: var(--color-ink); }
.toc a[aria-current="true"] { border-color: var(--color-accent); color: var(--color-ink); }
.prose { display: grid; gap: var(--space-3xl); min-width: 0; }
.prose section { display: grid; gap: var(--space-lg); scroll-margin-top: calc(var(--bar-h) + var(--space-lg)); }
.prose h2 { font-size: var(--text-section); max-width: 24ch; }
.prose h3 { font-size: var(--text-xl); }
.prose p, .prose li { color: var(--color-ink-2); max-width: 72ch; font-size: var(--text-lg); line-height: 1.65; }
.prose p strong, .prose li strong { color: var(--color-ink); }
.prose ul { display: grid; gap: var(--space-sm); padding-inline-start: var(--space-lg); list-style: disc; }
.prose ul li::marker { color: var(--color-accent); }
.prose a { color: var(--color-ink); text-decoration-color: var(--color-accent); text-underline-offset: 0.25em; }
.prose blockquote { color: var(--color-ink); margin: 0; padding: var(--space-md) var(--space-lg); border-inline-start: 3px solid var(--color-accent); background: var(--color-paper-2); border-radius: 0 8px 8px 0; }
.prose hr { display: none; }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.tile { display: grid; gap: var(--space-xs); align-content: start; padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper-2); border: 1px solid var(--color-rule); }
.tile h3 { font-size: var(--text-lg); color: var(--color-ink); }
.tile p, .tile li { font-size: var(--text-md); }
ol.steps { counter-reset: st; display: grid; gap: var(--space-md); }
ol.steps > li { counter-increment: st; position: relative; min-height: 44px; padding-inline-start: 60px; padding-bottom: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
ol.steps > li::before { content: counter(st); position: absolute; inset-inline-start: 0; top: 0; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--color-accent); color: var(--color-accent); font-size: var(--text-md); }
.prose ol.steps { padding: 0; list-style: none; }
.faq { display: grid; gap: 0; }
.faq details { border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); min-height: 64px; padding-block: var(--space-sm); font-size: var(--text-lg); color: var(--color-ink); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--color-rule-2); color: var(--color-accent); }
.faq details[open] summary::after { content: "−"; }
.faq summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.faq details > div { padding-bottom: var(--space-lg); }
.table-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid var(--color-rule); }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: var(--text-md); }
.table-wrap th, .table-wrap td { padding: var(--space-sm) var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); text-align: start; vertical-align: top; color: var(--color-ink-2); }
.table-wrap th { background: var(--color-paper-2); color: var(--color-ink); font-weight: 500; }
.pform { display: grid; gap: var(--space-md); padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-paper-2); border: 1px solid var(--color-accent-soft); max-width: 760px; }
.pform__two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.pform .btn { justify-self: start; }

/* knowledge hub */
.kfilter { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; justify-content: space-between; margin-bottom: var(--space-xl); }
.ksearch { min-width: 260px; flex: 1; max-width: 420px; }
.kgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.kcard { color: var(--color-ink); display: grid; gap: var(--space-sm); align-content: start; padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper-2); border: 1px solid var(--color-rule); }
.kcard[hidden] { display: none; }
.kcard__meta { font-size: var(--text-xs); color: var(--color-accent); }
.kcard h3 { font-size: var(--text-lg); }
.kcard p { color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.6; }
.kcard details summary { min-height: 44px; display: inline-flex; align-items: center; cursor: pointer; color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.3em; }
.kcard__lesson { color: var(--color-ink) !important; border-top: var(--rule-hair) solid var(--color-rule); padding-top: var(--space-sm); }
.shelf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); }
.vol { display: grid; gap: var(--space-md); align-content: start; }
.vol__cover { aspect-ratio: 3 / 4; border-radius: 8px var(--radius-card) var(--radius-card) 4px; padding: var(--space-xl) var(--space-lg); display: grid; align-content: space-between; background: linear-gradient(160deg, var(--color-paper-3), var(--color-deep)); border: 1px solid var(--color-rule-2); position: relative; overflow: hidden; }
.vol__cover::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 10px; background: var(--color-gold); }
.vol__cover b { font-size: var(--text-2xl); font-weight: 300; line-height: 1.1; }
.vol__cover span { font-size: var(--text-sm); color: var(--color-muted); }
.vol p { color: var(--color-ink-2); font-size: var(--text-sm); }
.vol__state { font-size: var(--text-xs); color: var(--color-accent); }
.alist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gap-columns); }
.alist a { display: grid; gap: var(--space-2xs); padding-block: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule-2); text-decoration: none; }
.alist a:hover h3 { text-decoration: underline; text-decoration-color: var(--color-accent); }
.alist small { color: var(--color-accent); font-size: var(--text-xs); }
.alist p { color: var(--color-ink-2); font-size: var(--text-sm); }

/* palette */
.pal { width: min(640px, calc(100% - 32px)); margin: 12vh auto auto; padding: 0; border-radius: var(--radius-card); border: 1px solid var(--color-rule-2); background: var(--color-paper); color: var(--color-ink); }
.pal::backdrop { background: var(--scrim-mid); }
.pal__in { display: flex; gap: var(--space-sm); align-items: center; padding: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.pal__in input { border: 0; background: var(--scrim-0); font-size: var(--text-lg); min-height: 48px; }
.pal__list { max-height: 50vh; overflow-y: auto; padding: var(--space-xs); display: grid; gap: var(--space-3xs); }
.pal__list button, .pal__list a { display: flex; justify-content: space-between; gap: var(--space-md); align-items: center; width: 100%; min-height: 48px; padding: var(--space-xs) var(--space-md); border: 0; border-radius: 12px; background: var(--scrim-0); color: var(--color-ink); font: inherit; text-align: start; text-decoration: none; cursor: pointer; }
.pal__list [aria-selected="true"], .pal__list button:hover, .pal__list a:hover { background: var(--color-paper-2); }
.pal__list small { color: var(--color-muted); font-size: var(--text-xs); white-space: nowrap; }
.pal__foot { padding: var(--space-sm) var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-xs); color: var(--color-muted); }

/* cookie notice */
.cookie { position: fixed; inset-inline: var(--space-lg); bottom: var(--space-lg); z-index: calc(var(--z-sticky-nav) + 1); display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; justify-content: space-between; max-width: 920px; margin-inline: auto; padding: var(--space-md) var(--space-lg); border-radius: var(--radius-card); background: var(--color-deep); border: 1px solid var(--color-rule-2); color: var(--color-ink); font-size: var(--text-sm); }
.cookie[hidden] { display: none; }
.cookie p { max-width: 64ch; color: var(--color-ink-2); }
.cookie__btns { display: flex; gap: var(--space-xs); }

/* chapter rail on the homepage */
.chapters { position: fixed; inset-inline-end: var(--space-md); top: 50%; transform: translateY(-50%); z-index: 5; display: grid; gap: var(--space-xs); }
.chapters a { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-xs); min-height: 28px; color: var(--color-muted); font-size: var(--text-xs); text-decoration: none; }
.chapters a span { opacity: 0; transition: opacity var(--dur-short) var(--ease-out); background: var(--color-deep); padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-pill); }
.chapters a::after { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--color-muted); }
.chapters a:hover span, .chapters a:focus-visible span, .chapters a[aria-current="true"] span { opacity: 1; }
.chapters a[aria-current="true"] { color: var(--color-ink); }
.chapters a[aria-current="true"]::after { background: var(--color-gold); border-color: var(--color-accent); }
.chapters a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 8px; }

/* marquee of client logos */
.marquee { overflow: hidden; margin-top: var(--space-2xl); mask-image: linear-gradient(90deg, transparent, var(--color-ink) 8%, var(--color-ink) 92%, transparent); }
.marquee__track { display: flex; gap: var(--space-md); width: max-content; animation: slide 50s linear infinite; }
.marquee.is-paused .marquee__track { animation-play-state: paused; }
.marquee__track li { display: grid; place-items: center; height: 84px; min-width: 180px; padding: var(--space-md) var(--space-lg); border-radius: var(--radius-card); background: var(--color-tile); }
.marquee__track li.logos--dark { background: var(--color-paper-3); color: var(--color-ink); }
.marquee__track img { max-height: 48px; width: auto; }
.marquee__track li.name { background: var(--color-paper-2); color: var(--color-ink-2); font-size: var(--text-lg); white-space: nowrap; }
.marquee-ctl { display: flex; justify-content: flex-end; margin-top: var(--space-xs); }

/* language switch on international pages */
.langs { display: flex; gap: var(--space-2xs); }
.langs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-sm); border-radius: var(--radius-pill); color: var(--color-ink-2); text-decoration: none; font-size: var(--text-sm); }
.langs a[aria-current="page"] { color: var(--color-accent); }
[dir="ltr"] .sheet { margin: 0 0 0 auto; }
[dir="ltr"] .drawer-nav { margin: 0 auto 0 0; }

@media (max-width: 80rem) {
  .mnav { display: none; }
  .burger { display: inline-flex; }
  .chapters { display: none; }
  .rail { grid-auto-columns: minmax(240px, 34%); }
  .kgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 60rem) {
  .doors__grid, .s360 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .door--lead { grid-column: span 2; }
  .doc, .deal, .mega__in { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .toc { position: static; grid-auto-flow: column; overflow-x: auto; }
  .toc p { display: none; }
  .toc a { white-space: nowrap; }
  .shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles, .alist { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  .doors__grid, .s360, .kgrid, .sheet__facts, .pform__two { grid-template-columns: minmax(0, 1fr); }
  .door--lead, .s360__core { grid-column: auto; grid-row: auto; }
  .rail { grid-auto-columns: 78%; }
  .tools .tool kbd { display: none; }
  .deal, .pform { padding: var(--space-lg) var(--space-md); }
  .cookie { inset-inline: var(--space-sm); bottom: var(--space-sm); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; flex-wrap: wrap; width: auto; }
  .door, .door:hover { transform: none; }
}

/* footer columns */
.foot__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xl); margin-top: var(--space-2xl); }
.foot__cols > div { display: grid; gap: var(--space-2xs); align-content: start; }
.foot__cols a { display: inline-flex; align-items: center; min-height: 36px; color: var(--color-ink-2); text-decoration: none; justify-self: start; }
.foot__cols a:hover { color: var(--color-ink); text-decoration: underline; }
.foot__h { color: var(--color-accent); font-size: var(--text-sm); margin-bottom: var(--space-xs); }
.foot__addr { color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.5; }
.foot .social { margin-top: var(--space-xl); }
.linkbtn { min-height: 36px; padding: 0; border: 0; background: var(--scrim-0); color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.linkbtn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (max-width: 60rem) { .foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .foot__cols { grid-template-columns: minmax(0, 1fr); } }

/* inner page hero with picture, open items */
.phero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: center; }
.phero__grid > div:only-child { grid-column: 1 / -1; }
.phero__pic { aspect-ratio: 4 / 3; border-radius: var(--radius-card); }
mark.tbd { background: var(--scrim-0); color: var(--color-accent); border: 1px dashed var(--color-accent); border-radius: 8px; padding: 0 var(--space-2xs); }
.sec-cta { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); }
.split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: start; }
.split .pic { aspect-ratio: 4 / 3; }
.split--pics { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-md); }
.split--pics .pic { aspect-ratio: 3 / 4; }
.bul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm) var(--space-lg); padding: 0 !important; list-style: none !important; }
.bul li { position: relative; padding: var(--space-sm) 0 var(--space-sm) 0; padding-inline-start: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-md) !important; }
.bul li::before { content: ""; position: absolute; inset-inline-start: 0; top: 1.15em; width: 8px; height: 8px; border-radius: 50%; background: var(--color-gold); }
.bul li b { color: var(--color-ink); display: block; }
.dnum { color: var(--color-accent); font-size: var(--text-sm); direction: ltr; justify-self: start; }
@media (max-width: 60rem) { .phero__grid, .split { grid-template-columns: minmax(0, 1fr); } .bul { grid-template-columns: minmax(0, 1fr); } }

/* v7 cards, covers, hero kicker */
.card { position: relative; }
.card__meta { display: grid; gap: var(--space-2xs); }
.card__where { color: var(--color-muted); font-size: var(--text-sm); }
.card .pic { position: relative; }
.pic--text { display: grid; align-content: end; padding: var(--space-lg); border: 1px solid var(--color-accent-soft); background: linear-gradient(160deg, var(--color-paper-3), var(--color-deep)); }
.pic--text p { font-size: var(--text-xl); font-weight: 300; line-height: 1.25; }
.vol__img { width: 100%; height: auto; border-radius: 8px var(--radius-card) var(--radius-card) 4px; box-shadow: 0 18px 40px var(--scrim-mid); }
a.vol { text-decoration: none; }
a.vol { transition: transform var(--dur-short) var(--ease-out); }
a.vol:hover { transform: translateY(-6px); }
a.vol:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.vol p b { color: var(--color-ink); font-weight: 500; }
.hero__kicker { color: var(--color-accent); font-size: var(--text-sm); font-weight: 500; }
.soon__club { margin-top: var(--space-md); }
@media (prefers-reduced-motion: reduce) { a.vol:hover { transform: none; } }

/* developers: programme below text, positioning cards */
.prog-below { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-xl); align-items: center; margin-top: var(--space-lg); }
.places { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.place { display: grid; gap: var(--space-sm); align-content: start; padding: var(--space-md); border-radius: var(--radius-card); background: var(--color-paper-2); border: 1px solid var(--color-rule); }
.place .pic { aspect-ratio: 16 / 10; display: block; }
.place blockquote { font-size: var(--text-2xl); font-weight: 300; line-height: 1.15; color: var(--color-ink); margin: 0; padding: 0; border: 0; background: none; }
.place figcaption { color: var(--color-ink-2); font-size: var(--text-sm); }
.place figcaption b { display: block; color: var(--color-ink); font-weight: 500; font-size: var(--text-md); }
@media (max-width: 60rem) { .prog-below, .places { grid-template-columns: minmax(0, 1fr); } }

/* ART: the company's design DNA, drawn as gold line work */
.doors { background: var(--color-deep) url("img/art-waves.svg") center / cover no-repeat; }
.phero { color: var(--color-ink); background: var(--color-deep) url("img/art-waves-soft.svg") center / cover no-repeat; position: relative; }
.foot { background: var(--color-deep) url("img/art-skyline.svg") bottom center / 100% auto no-repeat; }
.s360__core { background: url("img/art-waves.svg") center / cover no-repeat, radial-gradient(circle at 30% 30%, var(--color-paper-3), var(--color-deep)); }
.artband { padding-block: var(--section-gap) var(--space-3xl); background: url("img/art-waves-soft.svg") center / cover no-repeat; }
.artband__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; }
.artband__say { display: grid; gap: var(--space-lg); justify-items: start; }
.artband__say h2 { font-size: var(--text-display-s); }
.artband__wall { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto; gap: var(--space-md); }
.artband__f { margin: 0; display: grid; gap: var(--space-xs); }
.artband__f--tall { grid-row: span 2; }
.artband__f--tall .pic { aspect-ratio: 3 / 4; }
.artband__f .pic { aspect-ratio: 4 / 3; border-radius: 2px 40px 2px 2px; }
.artband__f figcaption { font-size: var(--text-sm); color: var(--color-ink-2); }
.s360--nine { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.s360--nine .s360__core { grid-column: 1 / -1; grid-row: auto; }
/* prose resets for embedded components */
.prose .clients__list, .prose .logos, .prose .archive, .prose .bul { list-style: none; padding: 0; }
.prose .clients__list { display: flex; }
.prose .logos { display: grid; }
.prose .archive { display: grid; }
.prose .fine, .prose .hint, .prose .opt, .prose .field__err { font-size: var(--text-xs); }
.prose .form__note { font-size: var(--text-sm); }
.prose .pform p:not(.fine):not(.hint):not(.form__note) { font-size: var(--text-md); }
@media (max-width: 60rem) { .artband__in { grid-template-columns: minmax(0, 1fr); } .s360--nine { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .s360--nine { grid-template-columns: minmax(0, 1fr); } }

.rail-ctl button::before { content: ""; display: inline-block; width: 9px; height: 9px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); }
.rail-ctl button[data-rail="next"]::before { transform: rotate(-135deg); }

/* v8 · lighter theme: warm paper, navy ink, gold reserved for fills and figures */
body { background: var(--color-paper); }
.bar { background: color-mix(in oklab, var(--color-paper-2) 94%, transparent); backdrop-filter: blur(10px); border-bottom: var(--rule-hair) solid var(--color-rule); }
.bar__in { min-height: 84px; }
.mark img { height: 52px; }
.util { background: var(--color-ink); color: var(--color-paper-2); font-size: var(--text-xs); }
.util__in { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); min-height: 40px; }
.util a { display: inline-flex; align-items: center; min-height: 36px; color: var(--color-paper-2); text-decoration: none; opacity: 0.86; }
.util a:hover { opacity: 1; text-decoration: underline; text-decoration-color: var(--color-gold); }
.util a:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; }
.util__links, .util__end { display: flex; gap: var(--space-lg); }
.mnav { gap: var(--space-xs); }
.mnav__btn { display: grid; justify-items: start; gap: var(--space-3xs); min-height: 60px; padding: var(--space-xs) var(--space-md); border-radius: 12px; border: 1px solid var(--scrim-0); text-align: start; }
.mnav__btn::after { position: absolute; inset-inline-end: var(--space-sm); top: 50%; }
.mnav__item { position: relative; }
.mnav__l { font-size: var(--text-md); font-weight: 500; color: var(--color-ink); }
.mnav__s { font-size: var(--text-xs); color: var(--color-muted); }
.mnav__btn { padding-inline-end: calc(var(--space-md) + 14px); position: relative; }
.mnav__btn:hover, .mnav__btn[aria-expanded="true"] { background: var(--color-paper); border-color: var(--color-rule); }
.mnav__btn.is-here { background: var(--color-paper); border-color: var(--color-gold); }
.mnav__btn.is-here .mnav__l { color: var(--color-ink); }
.mnav--intl { gap: var(--space-2xs); }
.mega { background: var(--color-paper-2); box-shadow: 0 30px 60px -30px var(--scrim-mid); border-bottom: 3px solid var(--color-gold); }
.mega__k { font-size: var(--text-sm); color: var(--color-accent); font-weight: 500; }
.mega__say { display: grid; gap: var(--space-sm); justify-items: start; align-content: start; }
.mega__links a { border: 1px solid var(--color-rule); background: var(--color-paper); }
.mega__links a:hover { border-color: var(--color-gold); background: var(--color-paper-2); }
.btn--quiet { box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule-2); }
.hero { min-height: min(88svh, 860px); }
.hero .lead { max-width: 52ch; }
.hero__aud { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-sm); margin-top: var(--space-lg); max-width: 920px; }
.aud { display: grid; gap: var(--space-2xs); padding: var(--space-md); border-radius: 12px; background: var(--scrim-mid); border: 1px solid var(--color-rule-2); text-decoration: none; backdrop-filter: blur(6px); transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.aud:hover { border-color: var(--color-gold); background: var(--scrim); }
.aud:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; }
.aud b { font-size: var(--text-lg); font-weight: 500; color: var(--color-ink); }
.aud span { font-size: var(--text-sm); color: var(--color-ink-2); }
.aud--lead { background: var(--color-gold); border-color: var(--color-gold); }
.aud--lead b, .aud--lead span { color: var(--color-accent-ink); }
.aud--lead:hover { background: var(--color-gold-hover); }
.proof { padding-block: var(--space-2xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
.proof__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); }
.proof__row div { display: grid; gap: var(--space-2xs); padding-top: var(--space-md); border-top: 2px solid var(--color-gold); }
.proof__row strong { font-size: var(--text-figure); font-weight: 300; line-height: 1; direction: ltr; justify-self: start; letter-spacing: -0.02em; }
.proof__row span { color: var(--color-ink-2); }
.proof .bdi { margin-top: var(--space-xl); background: var(--color-paper-2); border-color: var(--color-rule); }
.proof .marquee { margin-top: var(--space-xl); }
.marquee__track li { border: 1px solid var(--color-rule); }
.marquee__track li.logos--dark { background: var(--color-ink); }
.marquee-ctl .reel-ctl__pause, .ticker__pause { background: var(--color-paper-2); }
.clubband { padding-block: var(--space-2xl); }
.clubband__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-deep); }
.clubband .club__mark { font-size: var(--text-display-s); color: inherit; }
.clubband h2 { font-size: var(--text-2xl); }
.clubband p { color: var(--color-ink-2); }
.clubband ul { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-block: var(--space-md); }
.clubband li { padding: var(--space-2xs) var(--space-md); border-radius: var(--radius-pill); border: 1px solid var(--color-rule-2); font-size: var(--text-sm); }
.join-dlg { width: min(640px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: 0; border: 0; border-radius: var(--radius-card); background: var(--color-paper-2); color: var(--color-ink); }
.join-dlg::backdrop { background: var(--scrim-mid); }
.join-dlg .join { border: 0; border-radius: 0; }
.join-dlg__head { display: flex; justify-content: flex-end; padding: var(--space-sm) var(--space-sm) 0; }
.section__head { margin-bottom: var(--space-xl); }
.kicker2 { display: inline-block; font-size: var(--text-sm); color: var(--color-accent); font-weight: 500; margin-bottom: var(--space-xs); }
.doc .prose { gap: var(--space-2xl); }
.phero { background-color: var(--color-deep); }
.s360__core { background: url("img/art-waves.svg") center / cover no-repeat, var(--color-ink); }
.s360__core strong { color: var(--color-gold); }
.s360__core p { color: var(--color-paper-3); }
.s360__i { background: var(--color-paper-2); }
.deal { background: var(--color-paper-2); border-color: var(--color-rule); }
.deal__fig { color: var(--color-ink); }
.door, .kcard, .tile, .place, .stairs, .viz-wrap, .brief, .ask, .pform, .join, .ai-card { background: var(--color-paper-2); }
.viz-wrap { border-color: var(--color-rule); }
input:not([type="checkbox"]):not([type="radio"]), select, textarea { background: var(--color-paper); }
.path { background: var(--color-paper); }
.path:has(input:checked) { background: var(--color-deep); }
.archive-top .chip, .chip { background: var(--color-paper-2); }
.chip[aria-pressed="true"], .chip[aria-selected="true"] { background: var(--color-ink); color: var(--color-paper-2); }
.ai-fab { background: var(--color-ink); color: var(--color-paper-2); border-color: var(--color-ink); }
.ai-fab:hover { background: var(--color-accent); }
.cookie { background: var(--color-paper-2); box-shadow: 0 10px 30px -10px var(--scrim-mid); }
.vol__img { box-shadow: 0 18px 40px -18px var(--scrim-mid); }
.card__hover { color: var(--color-paper-2); }
.pic--text { background: var(--color-ink); border-color: var(--color-ink); }
.pic--text p { color: var(--color-paper-2); }
.chapters a span { background: var(--color-paper-2); border: 1px solid var(--color-rule); }
.artband { background: url("img/art-waves-soft.svg") center / cover no-repeat, var(--color-paper); }
.ticker { background: var(--color-paper-2); }
@media (max-width: 80rem) { .hero__aud { grid-template-columns: repeat(2, minmax(0, 1fr)); } .util__links a:nth-child(n+4) { display: none; } }
@media (max-width: 60rem) { .proof__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .clubband__in { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 40rem) { .util__links { display: none; } .hero__aud { grid-template-columns: minmax(0, 1fr); } .mark img { height: 44px; } }

/* international projects hub */
.ipgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); list-style: none; padding: 0 !important; margin-top: var(--space-md); }
.ipgrid li[hidden] { display: none; }
.ip { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-md); padding: var(--space-md); border-radius: var(--radius-card); background: var(--color-paper-2); border: 1px solid var(--color-rule); height: 100%; }
.ip .pic { aspect-ratio: 3 / 4; border-radius: 12px; }
.ip__body { display: grid; gap: var(--space-xs); align-content: start; justify-items: start; }
.ip__body h3 { font-size: var(--text-xl); }
.ip__city { font-size: var(--text-sm) !important; color: var(--color-accent) !important; font-weight: 500; }
.ip__units { font-size: var(--text-sm) !important; color: var(--color-ink) !important; }
.ip__body p { font-size: var(--text-sm) !important; line-height: 1.55; }
.ip__note { background: var(--color-deep); padding: var(--space-xs) var(--space-sm); border-radius: 10px; }
.ip__dev { color: var(--color-muted) !important; }
.ip .btn { margin-top: var(--space-xs); }
@media (max-width: 60rem) { .ipgrid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 40rem) { .ip { grid-template-columns: minmax(0, 1fr); } .ip .pic { aspect-ratio: 16 / 10; } }

.clubband h2 { display: grid; gap: var(--space-2xs); }
.clubband .club__sub { font-size: var(--text-2xl); }

.founder { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-xl); align-items: start; }
.founder__say h2 { font-size: var(--text-display-s); line-height: 1.05; margin-bottom: var(--space-sm); }
.founder__q { margin: var(--space-md) 0; padding: var(--space-md); border-radius: var(--radius-card); background: var(--color-paper-3); }
.founder__q p { font-size: var(--text-xl); line-height: 1.35; color: var(--color-ink); }
.founder__q cite { display: block; margin-top: var(--space-2xs); font-style: normal; font-size: var(--text-sm); color: var(--color-muted); }
.seen { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); margin: var(--space-sm) 0 var(--space-md); padding: 0; list-style: none; }
.seen li { font-size: var(--text-lg); font-weight: 600; color: var(--color-ink-2); }
.pwall { list-style: none; margin: var(--space-md) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--space-md); }
.pwall--home { margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pcard a { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius-card); overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }
.pcard a:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.pcard__pic { position: relative; aspect-ratio: 16 / 9; background: var(--color-deep); overflow: hidden; }
.pcard__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pcard__pic.is-off img { display: none; }
.pcard__pic.is-off { display: grid; place-items: center; background: var(--color-deep) url("img/art-waves-soft.svg") center / cover; }
.pcard__src { position: absolute; inset-block-start: var(--space-xs); inset-inline-start: var(--space-xs); padding: var(--space-3xs) var(--space-xs); border-radius: 99px; background: var(--color-paper-2); color: var(--color-ink); font-size: var(--text-sm); font-weight: 600; }
.pcard__pic.is-off .pcard__src { position: static; font-size: var(--text-xl); background: none; }
.pcard__body { padding: var(--space-sm) var(--space-md) var(--space-md); display: flex; flex-direction: column; gap: var(--space-2xs); }
.pcard__meta { font-size: var(--text-sm); color: var(--color-muted); }
.pcard h3 { font-size: var(--text-lg); line-height: 1.3; font-weight: 600; }
.pcard--big h3 { font-size: var(--text-md); }
.pcard p { font-size: var(--text-sm); color: var(--color-ink-2); }
.pcard__tag { align-self: start; font-size: var(--text-sm); color: var(--color-muted); border: 1px solid var(--color-rule-2); border-radius: 99px; padding: 0 var(--space-xs); }
.pcard[hidden] { display: none; }
@media (max-width: 900px) { .founder { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .pwall--home { grid-template-columns: minmax(0, 1fr); } }

/* v9: softer surfaces, clear way home, quick dock */
.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-lg); font-size: var(--text-md); color: var(--color-ink-2); }
.crumbs__home { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 40px; padding: 0 var(--space-md); border-radius: var(--radius-pill); background: var(--color-paper-3); color: var(--color-ink); font-weight: 500; text-decoration: none; }
.crumbs__home::before { content: ""; width: 8px; height: 8px; border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor; transform: rotate(-45deg); }
[dir="rtl"] .crumbs__home::before { transform: rotate(-45deg) scaleX(-1); }
.crumbs__home:hover { background: var(--color-rule); }
.crumbs__sep { width: 5px; height: 5px; border-radius: 50%; background: var(--color-rule-2); }
.tool--tel { font-weight: 500; }
.dock { display: none; }
@media (max-width: 900px) {
  .dock { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; inset-inline: var(--space-sm); inset-block-end: var(--space-sm); z-index: 40; padding: var(--space-2xs); border-radius: var(--radius-pill); background: var(--color-paper-2); box-shadow: var(--shadow-soft), 0 0 0 1px var(--color-rule); }
  .dock a { display: grid; place-items: center; min-height: 48px; border-radius: var(--radius-pill); color: var(--color-ink); font-size: var(--text-sm); font-weight: 500; text-decoration: none; }
  .dock a[aria-current="page"] { background: var(--color-paper-3); }
  .dock .dock__go { background: var(--color-gold); color: var(--color-accent-ink); }
  body { padding-bottom: 84px; }
  .tool--tel { display: none; }
}
.card, .s360__i, .kcard, .tile, .vol, .ipcard, .places > *, .deal { border-radius: var(--radius-card); }
.section { padding-block: clamp(56px, 7vw, 112px); }

/* v9 home */
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }
.btn--lg { min-height: 56px; padding: 0 var(--space-xl); font-size: var(--text-lg); }
.btn--glass { background: var(--glass-fill); color: var(--color-paper-2); box-shadow: inset 0 0 0 1px var(--glass-line); }
.btn--glass:hover { background: var(--glass-hover); }
.hero__others { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-md); margin-top: var(--space-lg); font-size: var(--text-md); }
.hero__others span { opacity: .8; }
.hero__others a { color: inherit; text-underline-offset: 4px; }
.clients { margin-top: var(--space-xl); padding: var(--space-xl) var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper-2); }
.clients__h { font-size: var(--text-lg); font-weight: 500; color: var(--color-ink-2); margin-bottom: var(--space-lg); text-align: center; }
.clients__logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-lg) var(--space-2xl); }
.clients__logos img { height: 44px; width: auto; opacity: .85; transition: opacity .2s; }
.clients__logos img:hover { opacity: 1; }
.clients__names { list-style: none; margin: var(--space-lg) 0 0; padding: var(--space-lg) 0 0; border-top: 1px solid var(--color-rule); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs) var(--space-lg); }
.clients__names li { font-size: var(--text-md); font-weight: 500; color: var(--color-ink-2); }
.gets { margin-top: var(--space-xl); padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-paper-2); box-shadow: var(--shadow-soft); }
.gets h3 { font-size: var(--text-title); margin-bottom: var(--space-lg); }
.gets ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg); counter-reset: g; }
.gets li { counter-increment: g; display: flex; flex-direction: column; gap: var(--space-2xs); padding-top: var(--space-md); border-top: 2px solid var(--color-gold); }
.gets li b { font-size: var(--text-lg); font-weight: 600; }
.gets li span { color: var(--color-ink-2); }
.devcall { margin: var(--space-md) 0; padding: var(--space-md) var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper-3); font-size: var(--text-lg); line-height: 1.6; }
@media (max-width: 900px) { .gets ol { grid-template-columns: 1fr 1fr; } .clients__logos img { height: 34px; } }
@media (max-width: 560px) { .gets ol { grid-template-columns: 1fr; } }