/* Golden Bridge Capital Advisors — design system.
   Dark, warm, editorial. Sections may opt into .theme-paper for light reading surfaces. */

:root {
  --bg: #0b0a08;
  --bg-deep: #070605;
  --surface: #13110d;
  --surface-2: #1b1812;
  --fg: #f0e9db;
  --fg-2: #b3a995;
  --fg-3: #8e8676;
  --rule: rgba(236, 211, 152, 0.13);
  --rule-2: rgba(236, 211, 152, 0.28);
  --accent: #d9b25f;
  --accent-hi: #f5e1a8;
  --accent-lo: #a8792b;
  --accent-ink: #171106;
  --gold-grad: linear-gradient(105deg, #f8e9b9 0%, #dfb968 34%, #b98832 68%, #ecd391 100%);
  --serif: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --gutter: clamp(20px, 4.2vw, 64px);
  --max: 1280px;
  --side: max(var(--gutter), calc((100vw - var(--max)) / 2));
  /* Same inset measured against the positioned ancestor, which excludes the scrollbar. */
  --edge: max(var(--gutter), calc((100% - var(--max)) / 2));
  --lvh: 100vh;
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --header-h: 76px;
  color-scheme: dark;
}

.theme-paper {
  --bg: #f3eee4;
  --surface: #fbf8f2;
  --surface-2: #e9e2d3;
  --fg: #16120b;
  --fg-2: #51493b;
  --fg-3: #6b6354;
  --rule: rgba(22, 18, 11, 0.12);
  --rule-2: rgba(22, 18, 11, 0.3);
  --accent: #8f6319;
  --accent-hi: #7a5413;
  --accent-lo: #b8862f;
  color: var(--fg);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); background: var(--bg-deep); }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 1rem/1.65 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
body.dialog-open, .nav-open body { overflow: hidden; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, dl, dd, ol, ul, figure, fieldset { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: rgba(217, 178, 95, 0.38); color: #fff; }
.theme-paper ::selection { background: rgba(143, 99, 25, 0.26); color: var(--fg); }
/* Dark inserts inside light sections keep the dark-theme selection. */
.theme-paper .inline-cta > div ::selection, .theme-paper .large-callout ::selection, .theme-paper .button--dark ::selection { background: rgba(217, 178, 95, 0.38); color: #fff; }
/* Gold surfaces carry dark ink, selected or not. */
.button--gold ::selection, .chip input:checked + span::selection { background: rgba(23, 17, 6, 0.24); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
[hidden] { display: none !important; }
dialog:not([open]) { display: none; }
/* The calculator cannot compute without scripts; the brief links still work. */
.no-js #calculator { display: none; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: 12px; z-index: 200; padding: 12px 18px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 600; transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.container { width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; }
.container--narrow { --max: 880px; }
.container--wide { --max: 1480px; }

/* ------------------------------------------------------------ typography */

.h-display { font-family: var(--serif); font-weight: 500; font-size: clamp(2.3rem, 4.7vw, 4.6rem); line-height: 1; letter-spacing: -0.012em; font-variant-numeric: lining-nums; text-wrap: balance; }
.h-display em { font-style: italic; font-weight: 400; padding-right: 0.08em; color: var(--accent); background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.theme-paper .h-display em { background: linear-gradient(105deg, #a3741f, #7a5413 55%, #a8792b); -webkit-background-clip: text; background-clip: text; }
/* Capped by height as well as width: the pinned intro has exactly one screen to fit in. */
.h-display--hero { font-size: clamp(2.7rem, min(5.6vw, 9.6vh), 5.9rem); line-height: 0.96; }
.h-display--xl { font-size: clamp(2.5rem, 6vw, 5.8rem); }
.h-display--page { font-size: clamp(min(2.4rem, 10.2vw), 5.1vw, 4.9rem); }
.h-display--article { font-size: clamp(2rem, 3.9vw, 3.5rem); line-height: 1.05; }
.h-display--small { font-size: clamp(1.9rem, 3.2vw, 3rem); }
.h-display--finale { font-size: clamp(2.2rem, 4.3vw, 4.4rem); }
.ln { display: block; overflow: hidden; overflow-wrap: break-word; padding: 0.06em 0.08em 0.16em; margin: -0.06em -0.08em -0.16em; }
.ln > span { display: block; }

.kicker { display: inline-flex; align-items: center; gap: 0.9em; font: 600 0.72rem/1.3 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
.kicker--line::before { content: ""; flex: none; width: 34px; height: 1px; background: currentColor; opacity: 0.75; }
.lead { max-width: 46em; font-size: clamp(1.05rem, 1.35vw, 1.22rem); line-height: 1.6; color: var(--fg-2); }
.footnote { max-width: 62em; margin-top: 28px; font-size: 0.82rem; line-height: 1.6; color: var(--fg-3); }
.footnote .link-arrow { display: inline; }
.tag { display: inline-block; padding: 0.7em 1.1em; border: 1px solid var(--rule-2); border-radius: 999px; font: 600 0.68rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }

/* --------------------------------------------------------------- buttons */

.button { --h: 52px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.7em; min-height: var(--h); padding: 0 1.6em; border: 1px solid transparent; border-radius: 999px; font: 600 0.92rem/1 var(--sans); letter-spacing: 0.01em; white-space: nowrap; cursor: pointer; overflow: hidden; transition: transform 0.5s var(--ease-out), background-position 0.6s var(--ease-out), background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.5s; }
.button svg { flex: none; width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.5s var(--ease-out); }
.button svg.icon-fill { fill: currentColor; stroke: none; }
.button:hover svg:not(.icon-fill) { transform: translateX(4px); }
.button--gold { background: var(--gold-grad); background-size: 190% 100%; color: var(--accent-ink); box-shadow: inset 0 0 0 1px rgba(255, 240, 196, 0.3), 0 14px 34px -16px rgba(217, 178, 95, 0.75); }
.button--gold::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent); transform: skewX(-20deg) translateX(-120%); transition: transform 0.9s var(--ease-out); pointer-events: none; }
.button--gold:hover { background-position: 100% 0; transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(255, 240, 196, 0.45), 0 20px 46px -16px rgba(217, 178, 95, 0.95); }
.button--gold:hover::after { transform: skewX(-20deg) translateX(620%); }
.button--ghost { border-color: var(--rule-2); background: rgba(255, 255, 255, 0.03); color: var(--fg); }
.button--ghost:hover { border-color: var(--accent); color: var(--accent-hi); transform: translateY(-2px); }
.button--line { border-color: var(--rule-2); color: var(--fg-2); background: none; }
.button--line:hover { border-color: var(--accent); color: var(--fg); }
.button--dark { background: #15110a; color: #f3e6c4; }
.button--dark:hover { background: #2b2212; transform: translateY(-2px); }
.button--small { --h: 42px; padding: 0 1.25em; font-size: 0.84rem; }
.button--large { --h: 60px; padding: 0 2em; font-size: 1rem; }
.button--full { width: 100%; }
.icon-button { display: inline-grid; place-items: center; flex: none; width: 42px; height: 42px; border: 1px solid var(--rule-2); border-radius: 50%; color: var(--fg); transition: border-color 0.3s, color 0.3s, background-color 0.3s, transform 0.5s var(--ease-out); }
.icon-button svg { width: 18px; height: 18px; fill: currentColor; }
.icon-button:hover { border-color: var(--accent); color: var(--accent-hi); transform: translateY(-2px); }

.link-arrow { display: inline-flex; align-items: center; gap: 0.6em; font: 600 0.86rem/1.2 var(--sans); letter-spacing: 0.02em; color: var(--accent); }
.link-arrow svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.5s var(--ease-out); }
a.link-arrow:hover svg, a:hover .link-arrow svg { transform: translateX(5px); }
.link-quiet { display: inline-flex; align-items: center; gap: 0.55em; padding-bottom: 6px; border-bottom: 1px solid var(--rule-2); font: 500 0.95rem/1.2 var(--sans); color: var(--fg); transition: border-color 0.3s, color 0.3s; }
.link-quiet svg { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.5s var(--ease-out); }
.link-quiet:hover { border-color: var(--accent); color: var(--accent-hi); }
.link-quiet:hover svg { transform: translate(2px, -2px); }

/* ---------------------------------------------------------------- header */

.scroll-progress { position: fixed; inset: 0 0 auto; z-index: 120; height: 2px; pointer-events: none; }
.scroll-progress span { display: block; height: 100%; background: var(--gold-grad); transform: scaleX(0); transform-origin: 0 50%; }
.site-header { position: fixed; inset: 0 0 auto; z-index: 100; height: var(--header-h); transition: transform 0.6s var(--ease-out), height 0.4s var(--ease-out); }
.site-header::before { content: ""; position: absolute; inset: 0; border-bottom: 1px solid transparent; background: linear-gradient(180deg, rgba(7, 6, 5, 0.7), rgba(7, 6, 5, 0)); transition: background 0.4s, border-color 0.4s, backdrop-filter 0.4s; pointer-events: none; }
.site-header.is-scrolled { height: 64px; }
.site-header.is-scrolled::before { border-bottom-color: var(--rule); background: rgba(10, 9, 7, 0.78); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); }
.site-header.is-hidden { transform: translateY(-100%); }
/* Without app.js the bar never gets .is-scrolled: it stays at the top of the document instead of floating, transparent, over the content. */
@media (min-width: 1021px) { .no-js .site-header { position: absolute; } }
.header-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 100%; }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark { width: 40px; height: 30px; }
.brand-copy { display: grid; line-height: 1; }
.brand-copy strong { font: 600 1.3rem/1 var(--serif); letter-spacing: 0.01em; }
.brand-copy small { margin-top: 6px; white-space: nowrap; font: 600 0.55rem/1 var(--sans); letter-spacing: 0.32em; text-transform: uppercase; color: var(--fg-3); }
.main-nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 38px); }
.main-nav > a { position: relative; padding: 10px 0; font: 500 0.86rem/1 var(--sans); color: var(--fg-2); transition: color 0.3s; }
.main-nav > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: 100% 50%; transition: transform 0.5s var(--ease-out); }
.main-nav > a:hover { color: var(--fg); }
.main-nav > a:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
.nav-contacts { display: none; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.nav-toggle { position: relative; display: none; width: 42px; height: 42px; padding: 0; border: 1px solid var(--rule-2); border-radius: 50%; background: none; cursor: pointer; }
.nav-toggle i { position: absolute; left: 12px; right: 12px; top: 50%; height: 1.5px; background: var(--fg); transition: transform 0.5s var(--ease-out); }
.nav-toggle i:first-child { transform: translateY(-4px); }
.nav-toggle i:nth-child(2) { transform: translateY(4px); }
.nav-toggle[aria-expanded="true"] i:first-child { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] i:nth-child(2) { transform: rotate(-45deg); }

/* ------------------------------------------------------------------ hero */

.hero { position: relative; background: var(--bg-deep); }
.hero-stage { position: relative; display: grid; grid-template-rows: 1fr auto; min-height: 100vh; min-height: 100svh; overflow: hidden; }
.hero-media { position: absolute; inset: 0; background: radial-gradient(110% 80% at 76% 66%, #2b1c09 0%, #120c06 44%, #070605 80%); }
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.6s ease; }
.hero-canvas.is-ready { opacity: 1; }
.hero-scrim { position: absolute; inset: 0; opacity: var(--scrim, 1); background: linear-gradient(90deg, rgba(7, 6, 5, 0.95) 0%, rgba(7, 6, 5, 0.86) 28%, rgba(7, 6, 5, 0.5) 46%, rgba(7, 6, 5, 0) 68%); }
.hero-shade { position: absolute; inset: 0; opacity: var(--shade, 0); background: linear-gradient(90deg, rgba(7, 6, 5, 0.92) 0%, rgba(7, 6, 5, 0.74) 26%, rgba(7, 6, 5, 0) 58%); }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 6, 5, 0.62) 0%, rgba(7, 6, 5, 0) 18%, rgba(7, 6, 5, 0) 80%, rgba(7, 6, 5, 0.55) 100%); pointer-events: none; }
.hero-layer { position: relative; z-index: 2; }
.hero-intro { display: flex; align-items: center; padding-block: calc(var(--header-h) + 5vh) 9vh; }
/* The cap follows the text size: lines of the headline do not wrap on wide screens. */
.hero-copy { min-width: 0; max-width: min(56.25rem, max(60vw, 23rem)); }
.hero-copy > *, .hero-copy h1 .kicker { animation: rise 1.2s var(--ease-out) both; }
.hero-copy > h1 { animation: none; }
.hero-copy .ln > span { animation: line-in 1.3s var(--ease-out) both; }
.hero-copy .ln:nth-of-type(2) > span { animation-delay: 0.1s; }
.hero-copy .ln:nth-of-type(3) > span { animation-delay: 0.2s; }
.hero-copy .ln:nth-of-type(4) > span { animation-delay: 0.3s; }
.hero-copy > :nth-child(2) { animation-delay: 0.5s; }
.hero-copy > :nth-child(3) { animation-delay: 0.62s; }
.hero-copy > :nth-child(4) { animation-delay: 0.74s; }
.hero-copy h1 .kicker { display: flex; margin-bottom: 26px; }
.hero-lead { max-width: 33em; margin-top: 28px; font-size: clamp(1.02rem, 1.3vw, 1.2rem); line-height: 1.6; color: #cfc5b0; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; margin-top: 36px; }
.hero-facts { display: flex; flex-wrap: wrap; margin-top: 48px; border-top: 1px solid var(--rule); }
.hero-facts div { padding: 18px 30px 0 0; margin-right: 30px; border-right: 1px solid var(--rule); }
.hero-facts div:last-child { margin-right: 0; padding-right: 0; border-right: 0; }
.hero-facts dt { font: 500 0.68rem/1.3 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); }
.hero-facts dd { margin-top: 7px; font: 500 clamp(1.25rem, 1.8vw, 1.6rem)/1.1 var(--serif); color: var(--accent-hi); font-variant-numeric: lining-nums; }

.hero-chapters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding-bottom: 56px; }
.hero-chapter-index { font: 600 0.7rem/1.3 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
.hero-chapter h2 { margin-top: 12px; font: 500 clamp(1.6rem, 2.4vw, 2.3rem)/1.04 var(--serif); }
.hero-chapter p { max-width: 30em; margin-top: 12px; font-size: 0.95rem; color: var(--fg-2); }
.hero-chapters::before { content: ""; position: absolute; inset: -80px calc(var(--side) * -1) 0; z-index: -1; background: linear-gradient(180deg, rgba(7, 6, 5, 0), rgba(7, 6, 5, 0.9) 42%); pointer-events: none; }
.story-live .hero-chapters::before { display: none; }
.hero-finale, .hero-rail, .hero-cue { display: none; }

/* Scroll-driven hero. Enabled by hero.js once WebGL and motion are available. */
/* A declaration that contains var() is never discarded at parse time, so an lvh value cannot be
   stacked after a vh one there; the unit comes in through a custom property instead. */
@supports (height: 100lvh) { :root { --lvh: 100lvh; } }
.story-live .hero { height: calc(var(--lvh) * (2 + var(--story-len, 2.7))); margin-bottom: calc(var(--lvh) * -1); }
.story-live .hero-stage { position: sticky; top: 0; display: block; height: var(--lvh); min-height: 0; }
.story-live .hero-layer { position: absolute; top: 0; bottom: 0; left: var(--edge); right: var(--edge); width: auto; margin: 0; }
/* Set by hero.js when the opening copy would not fit the one-screen stage. */
.story-live .hero-stage.is-tight .hero-facts { display: none; }
/* Auto margins centre the copy and, unlike align-items: center, never push its top out of reach. */
.story-live .hero-intro { align-items: flex-start; padding-block: var(--header-h) 6vh; opacity: var(--o, 1); transform: translate3d(0, var(--y, 0px), 0); }
.story-live .hero-copy { margin-block: auto; }
.story-live .hero-chapters { display: block; padding: 0; pointer-events: none; }
.story-live .hero-chapter { position: absolute; left: 0; bottom: clamp(64px, 12vh, 132px); max-width: 540px; opacity: var(--o, 0); transform: translate3d(0, var(--y, 28px), 0); }
.story-live .hero-chapter::before { content: ""; position: absolute; inset: -80px -200px -110px -160px; z-index: -1; background: radial-gradient(closest-side, rgba(7, 6, 5, 0.8), rgba(7, 6, 5, 0.5) 55%, rgba(7, 6, 5, 0)); pointer-events: none; }
.story-live .hero-chapter h2 { font-size: clamp(2.3rem, 4.6vw, 4.6rem); line-height: 0.98; }
.story-live .hero-chapter p { margin-top: 16px; font-size: clamp(0.98rem, 1.2vw, 1.12rem); color: #cfc5b0; }
/* The finale lies over the opening; until hero.js shows it, it must let clicks through. */
.story-live .hero-finale { display: flex; flex-direction: column; align-items: center; pointer-events: none; padding-top: calc(var(--header-h) + 5vh); text-align: center; opacity: var(--o, 0); transform: translate3d(4vw, var(--y, 28px), 0); }
.story-live .hero-finale::before { content: ""; position: absolute; left: 50%; top: 0; z-index: -1; width: min(980px, 86vw); height: 64%; background: radial-gradient(closest-side, rgba(7, 6, 5, 0.74), rgba(7, 6, 5, 0.4) 58%, rgba(7, 6, 5, 0)); transform: translateX(-50%); pointer-events: none; }
.story-live .hero-finale .kicker { margin-bottom: 20px; }
.hero-finale-text { max-width: 27em; margin-block: 20px 28px; font-size: 0.98rem; color: #cfc5b0; text-shadow: 0 0 2px rgba(7, 6, 5, 0.95), 0 0 9px rgba(7, 6, 5, 0.9), 0 0 18px rgba(7, 6, 5, 0.8); }
/* The short disclaimer replaces the paragraph where the paragraph is hidden (phones). */
.hero-finale-note { display: none; max-width: 30em; margin-top: 18px; padding: 6px 12px; border-radius: 10px; background: rgba(7, 6, 5, 0.74); font-size: 0.76rem; line-height: 1.5; color: #cfc5b0; }
.story-live .hero-rail { position: absolute; right: var(--edge); top: 50%; z-index: 2; display: grid; gap: 16px; opacity: var(--o, 0); transform: translateY(-50%); }
.hero-rail li { display: flex; align-items: center; justify-content: flex-end; gap: 12px; font: 600 0.66rem/1 var(--sans); letter-spacing: 0.16em; color: var(--fg-3); transition: color 0.5s; }
.hero-rail li::after { content: ""; width: 20px; height: 1px; background: currentColor; transition: width 0.6s var(--ease-out); }
.hero-rail li.is-active { color: var(--accent-hi); }
.hero-rail li.is-active::after { width: 46px; }
.story-live .hero-cue { position: absolute; right: var(--edge); bottom: 24px; z-index: 3; display: grid; justify-items: center; gap: 10px; font: 600 0.6rem/1 var(--sans); letter-spacing: 0.32em; text-transform: uppercase; color: var(--fg-2); opacity: var(--o, 1); }
.hero-cue i { width: 1px; height: 42px; background: linear-gradient(var(--accent-hi), transparent); transform-origin: 50% 0; animation: cue 2.4s var(--ease) infinite; }
/* Still frame of the finished bridge when the live scene cannot run (no JS, no WebGL). */
.hero-stage.is-fallback .hero-media, .no-js .hero-media { background: #070605 url("/assets/hero-poster.webp") center / cover no-repeat; }
@media (max-aspect-ratio: 4/5) {
  .hero-stage.is-fallback .hero-media, .no-js .hero-media { background-image: url("/assets/hero-poster-tall.webp"); }
}

/* -------------------------------------------------------------- sections */

main > section:not(.hero) { position: relative; z-index: 3; }
.section { padding-block: clamp(84px, 11vw, 168px); background: var(--bg); }
.section--tight { padding-block: clamp(56px, 7vw, 104px); }
.section--deep { background: var(--bg-deep); }
.section--rule { border-top: 1px solid var(--rule); }
.section--overlap { border-radius: clamp(20px, 3vw, 40px) clamp(20px, 3vw, 40px) 0 0; box-shadow: 0 -40px 100px rgba(0, 0, 0, 0.6); }
.section-head { margin-bottom: clamp(40px, 5.5vw, 80px); }
.section-head--split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 28px clamp(32px, 6vw, 96px); align-items: end; }
.section-head .kicker { margin-bottom: 22px; }
.section-head-aside p { max-width: 30em; font-size: 1.02rem; color: var(--fg-2); }
.section-head-aside .link-arrow { margin-top: 18px; }
.section-head-aside p + .link-arrow { margin-top: 20px; }

/* situations */
.situations { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule-2); }
.situation { position: relative; display: flex; flex-direction: column; min-height: 440px; padding: 34px 28px 30px; border-right: 1px solid var(--rule); transition: background-color 0.6s; }
.situation:first-child { padding-left: 0; }
.situation:last-child { padding-right: 0; border-right: 0; }
.situation::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--gold-grad); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.8s var(--ease-out); }
.situation:hover::before { transform: scaleX(1); }
.situation-index { font: 500 0.78rem/1 var(--sans); letter-spacing: 0.16em; color: var(--fg-3); }
.situation h3 { margin-top: 34px; font: 500 clamp(1.5rem, 2vw, 1.95rem)/1.08 var(--serif); text-wrap: balance; }
.situation p { margin-top: 16px; font-size: 0.94rem; color: var(--fg-2); }
.situation-service { margin-top: auto; padding-top: 28px; font: 500 0.8rem/1.45 var(--sans); color: var(--fg-3); text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 4px; transition: color 0.3s; }
.situation-service:hover { color: var(--accent-hi); }
.situation-price { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 14px; padding-block: 14px; border-block: 1px solid var(--rule); }
.situation-price strong { font: 500 1.55rem/1 var(--serif); font-variant-numeric: lining-nums; white-space: nowrap; color: var(--accent-hi); }
.situation-price small { font-size: 0.78rem; text-align: right; color: var(--fg-3); }
.situation .link-arrow { margin-top: 18px; }

/* recipients strip */
.strip { --gap: clamp(28px, 4vw, 60px); padding-block: 56px 60px; border-block: 1px solid var(--rule); background: var(--bg-deep); overflow: hidden; }
.marquee { margin-block: 26px 22px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; align-items: center; gap: var(--gap); width: max-content; padding-right: var(--gap); animation: marquee 48s linear infinite; }
.marquee-track span { font: 500 clamp(1.9rem, 3.6vw, 3.4rem)/1.1 var(--serif); white-space: nowrap; color: var(--fg); }
.marquee-track span:nth-of-type(even) { font-style: italic; color: transparent; -webkit-text-stroke: 1px rgba(236, 211, 152, 0.6); }
.marquee-track i { flex: none; width: 8px; height: 8px; background: var(--accent); transform: rotate(45deg); }
.strip .footnote { margin-top: 0; }

/* demo cards + mock windows */
.demo-cards { display: grid; gap: clamp(22px, 3vw, 44px); }
.demo-card { position: relative; display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); min-height: 470px; border: 1px solid var(--rule); border-radius: 20px; background: linear-gradient(140deg, #15120c, #0c0a07 62%); overflow: hidden; transition: border-color 0.5s; }
.demo-card:hover { border-color: var(--rule-2); }
.demo-card--flip { grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr); }
.demo-card--flip .demo-card-copy { order: 2; }
.demo-card-copy { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(28px, 3.6vw, 56px); }
.demo-card-copy h2, .demo-card-copy h3 { margin-top: 26px; font: 500 clamp(1.8rem, 2.9vw, 2.9rem)/1.04 var(--serif); text-wrap: balance; }
.demo-card-copy p { max-width: 30em; margin-top: 16px; color: var(--fg-2); }
.demo-card-copy .link-arrow { margin-top: auto; padding-top: 30px; }
.demo-card-art { position: relative; display: grid; place-items: center; padding: clamp(22px, 3.4vw, 52px); background: radial-gradient(90% 90% at 60% 40%, rgba(217, 178, 95, 0.17), transparent 70%); perspective: 1400px; overflow: hidden; }
.mock { --tilt: calc(1 - var(--p, 1)); position: relative; width: 100%; max-width: 640px; border: 1px solid rgba(236, 211, 152, 0.24); border-radius: 12px; background: #0e0c09; box-shadow: 0 44px 90px -34px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(0, 0, 0, 0.6); overflow: hidden; transform: rotateX(calc(var(--tilt) * 16deg)) rotateY(calc(var(--tilt) * -12deg)) translate3d(0, calc(var(--tilt) * 34px), 0); transform-origin: 50% 100%; }
.demo-card--flip .mock { transform: rotateX(calc(var(--tilt) * 16deg)) rotateY(calc(var(--tilt) * 12deg)) translate3d(0, calc(var(--tilt) * 34px), 0); }
.mock-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--rule); font: 500 0.72rem/1 var(--sans); color: var(--fg-3); }
.mock-bar i { width: 9px; height: 9px; border-radius: 50%; background: #3a3327; }
.mock-bar i:first-child { background: var(--accent); }
.mock-bar b { margin-left: 10px; font-weight: 600; color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock-bar span { margin-left: auto; white-space: nowrap; color: var(--accent); }
.mock-formula { display: flex; align-items: center; gap: 12px; padding: 9px 16px; border-bottom: 1px solid var(--rule); font: 500 0.72rem/1 var(--mono); color: var(--fg-2); }
.mock-formula span { padding-right: 12px; border-right: 1px solid var(--rule); color: var(--accent); }
.mock-body { padding: 18px 16px 16px; }
.mock-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mock-kpis span { min-height: 64px; padding: 12px; border: 1px solid var(--rule); border-radius: 8px; background: rgba(255, 255, 255, 0.015); }
.mock-kpis small { display: block; font: 500 0.62rem/1.25 var(--sans); letter-spacing: 0.04em; color: var(--fg-3); }
.mock-kpis strong { display: block; margin-top: 8px; font: 500 clamp(1rem, 1.6vw, 1.3rem)/1 var(--serif); font-variant-numeric: lining-nums; white-space: nowrap; color: var(--accent-hi); }
.mock-bars { display: flex; align-items: flex-end; gap: 10px; height: 150px; margin-top: 16px; padding: 12px 12px 0; border: 1px solid var(--rule); border-radius: 8px; background: repeating-linear-gradient(0deg, transparent 0 36px, rgba(236, 211, 152, 0.06) 36px 37px); }
.mock-bars i { flex: 1; height: var(--bar); border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #f1d893, #a8792b); transform-origin: 50% 100%; transition: transform 1.2s var(--ease-out) calc(var(--i) * 80ms + 0.25s); }
.mock-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.mock-tabs span { padding: 7px 10px; border-radius: 6px; background: rgba(255, 255, 255, 0.035); font: 500 0.64rem/1 var(--sans); color: var(--fg-3); }
.mock-tabs .is-active { background: rgba(217, 178, 95, 0.18); color: var(--accent-hi); }
.mock-chart { width: 100%; height: 150px; margin-top: 16px; border: 1px solid var(--rule); border-radius: 8px; }
.mock-grid { fill: none; stroke: rgba(236, 211, 152, 0.08); vector-effect: non-scaling-stroke; }
.mock-line { fill: none; stroke: var(--accent-hi); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.mock-line--soft { stroke: #8e7440; stroke-width: 2; }
.mock-legend { display: flex; gap: 18px; margin-top: 10px; font: 500 0.66rem/1 var(--sans); color: var(--fg-3); }
.mock-legend i { display: inline-block; width: 14px; height: 2px; margin-right: 7px; vertical-align: middle; background: var(--accent-hi); }
.mock-legend span + span i { background: #8e7440; }
.mock-caption { margin-top: 12px; font: 500 0.7rem/1.4 var(--sans); letter-spacing: 0.04em; color: var(--fg-3); }
.mock--preview { max-width: 560px; margin-inline: auto; transform: rotateX(calc(var(--tilt) * 12deg)) translate3d(0, calc(var(--tilt) * 30px), 0); }
.mock--preview .mock-kpis small { width: 60%; height: 6px; border-radius: 3px; background: rgba(236, 211, 152, 0.14); }
.mock--preview .mock-kpis strong { width: 44%; height: 14px; border-radius: 3px; background: linear-gradient(90deg, rgba(245, 225, 168, 0.55), rgba(245, 225, 168, 0.15)); }
.demo-flag { position: absolute; right: 16px; top: 16px; z-index: 1; padding: 0.6em 0.9em; border: 1px solid var(--rule-2); border-radius: 999px; background: rgba(11, 10, 8, 0.7); font: 600 0.6rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-2); }
.demo-card-art > div { display: grid; place-items: center; width: 100%; perspective: 1400px; }
.mock-watermark { position: absolute; inset: 0; display: grid; place-items: center; font: 600 clamp(3rem, 8vw, 6rem)/1 var(--serif); letter-spacing: 0.22em; color: rgba(236, 211, 152, 0.07); transform: rotate(-16deg); pointer-events: none; }
.preview-grid > div:first-child { perspective: 1400px; }

/* conditions */
.pledges { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--rule-2); }
.pledge { padding: 30px 26px 6px; border-right: 1px solid var(--rule); }
.pledge:first-child { padding-left: 0; }
.pledge:last-child { padding-right: 0; border-right: 0; }
.pledge-num { display: inline-block; padding-right: 0.1em; font: italic 400 3.2rem/1 var(--serif); font-variant-numeric: lining-nums; color: var(--accent); background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pledge h3 { margin-top: 24px; font: 600 1.02rem/1.3 var(--sans); text-wrap: balance; }
.pledge p { margin-top: 10px; font-size: 0.9rem; color: var(--fg-2); }

/* services */
.service-list { border-top: 1px solid var(--rule-2); }
.service-row { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1.5fr) minmax(170px, 0.5fr) auto; gap: 18px clamp(20px, 3vw, 48px); align-items: center; padding: 30px 0; border-bottom: 1px solid var(--rule); }
.service-row::before { content: ""; position: absolute; inset: 0 -22px; border-radius: 14px; background: var(--surface); opacity: 0; transition: opacity 0.45s; }
.service-row:hover::before { opacity: 1; }
.service-row > * { position: relative; }
.service-num { align-self: start; padding-top: 12px; font: 500 0.78rem/1 var(--sans); letter-spacing: 0.14em; color: var(--fg-3); }
.service-main h3 { font: 500 clamp(1.5rem, 2.3vw, 2.2rem)/1.08 var(--serif); text-wrap: balance; }
.service-main h3 a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.7s var(--ease-out); }
.service-main h3 a:hover { background-size: 100% 1px; }
.service-main p { max-width: 58em; margin-top: 10px; font-size: 0.94rem; color: var(--fg-2); }
.service-price { display: grid; gap: 4px; }
.service-price strong { font: 500 1.7rem/1 var(--serif); font-variant-numeric: lining-nums; white-space: nowrap; }
.service-price span { font-size: 0.84rem; color: var(--fg-2); }
.service-price small { margin-top: 4px; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.service-actions { display: grid; gap: 12px; justify-items: start; }

/* calculator */
.calc { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.calc-form { display: grid; gap: 30px; }
.calc-form fieldset { min-width: 0; padding: 0; border: 0; }
.calc-form legend { margin-bottom: 14px; padding: 0; font: 600 0.7rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-3); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border: 1px solid var(--rule-2); border-radius: 999px; font: 500 0.9rem/1.2 var(--sans); color: var(--fg-2); transition: color 0.3s, border-color 0.3s, background-color 0.3s, box-shadow 0.4s; }
.chip:hover span { border-color: var(--accent); color: var(--fg); }
.chip input:checked + span { border-color: transparent; background: var(--gold-grad); color: var(--accent-ink); box-shadow: 0 10px 26px -14px rgba(217, 178, 95, 0.9); }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.calc-result { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 14px; padding: clamp(26px, 3vw, 40px); border: 1px solid var(--rule-2); border-radius: 20px; background: linear-gradient(160deg, rgba(217, 178, 95, 0.14), rgba(217, 178, 95, 0.02) 55%), var(--surface); }
.calc-price { padding-right: 0.06em; font: 500 clamp(2.5rem, 4.2vw, 3.9rem)/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; color: var(--accent-hi); background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.calc-duration { font: 500 1rem/1.3 var(--sans); }
.calc-result p { font-size: 0.84rem; color: var(--fg-3); }
.calc-result small { font-size: 0.76rem; text-align: center; color: var(--fg-3); }

/* process */
.process { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 7vw, 120px); align-items: start; }
.process-intro { position: sticky; top: calc(var(--header-h) + 40px); }
.process-intro .kicker { margin-bottom: 22px; }
.process-intro p { max-width: 26em; margin-top: 22px; color: var(--fg-2); }
.process-intro .link-arrow { margin-top: 22px; }
.process-steps { position: relative; }
.process-steps::before, .process-steps::after { content: ""; position: absolute; left: 21.5px; top: 34px; bottom: 34px; width: 1px; background: var(--rule-2); }
.process-steps::after { background: linear-gradient(#f8e9b9, #b98832); transform: scaleY(var(--p, 0)); transform-origin: 50% 0; }
.process-steps li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 28px; padding: 26px 0; }
.process-num { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--rule-2); border-radius: 50%; background: var(--bg-deep); font: 600 0.74rem/1 var(--sans); letter-spacing: 0.06em; color: var(--accent-hi); }
.process-steps h3 { padding-top: 8px; font: 500 clamp(1.4rem, 2vw, 1.8rem)/1.1 var(--serif); }
.process-steps p { max-width: 34em; margin-top: 8px; font-size: 0.95rem; color: var(--fg-2); }
.experience { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 30px clamp(32px, 6vw, 96px); align-items: end; margin-top: clamp(64px, 9vw, 128px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--rule-2); }
.experience-text { margin-top: 18px; font: 500 clamp(1.7rem, 3vw, 2.9rem)/1.12 var(--serif); text-wrap: balance; }
.experience-text em { font-style: italic; color: var(--accent); background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.experience small { font-size: 0.78rem; line-height: 1.6; color: var(--fg-3); }
.experience .link-arrow { margin-top: 22px; }

/* guide cards */
.guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.guide-card { position: relative; display: flex; flex-direction: column; min-height: 300px; padding: 28px; border: 1px solid var(--rule); border-radius: 16px; background: var(--surface); transition: transform 0.7s var(--ease-out), border-color 0.4s, box-shadow 0.7s; }
.guide-card:hover { border-color: var(--rule-2); box-shadow: 0 34px 60px -38px rgba(0, 0, 0, 0.5); transform: translateY(-6px); }
.guide-card-meta { display: flex; justify-content: space-between; gap: 12px; font: 600 0.66rem/1.35 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.guide-card-meta small { font-weight: 500; font-size: 0.76rem; letter-spacing: 0.02em; text-transform: none; white-space: nowrap; color: var(--fg-3); }
.guide-card h3 { margin-top: 26px; font: 500 clamp(1.45rem, 1.9vw, 1.8rem)/1.1 var(--serif); text-wrap: balance; }
.guide-card h3 a::after { content: ""; position: absolute; inset: 0; }
.guide-card p { margin-top: 12px; font-size: 0.92rem; color: var(--fg-2); }
.guide-card .link-arrow { margin-top: auto; padding-top: 24px; }
.guide-card:hover .link-arrow svg { transform: translateX(5px); }
.hub-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 48px; margin-bottom: clamp(32px, 4vw, 56px); padding-bottom: clamp(32px, 4vw, 56px); border-bottom: 1px solid var(--rule-2); }
.hub-intro strong { font: 500 clamp(1.3rem, 1.9vw, 1.6rem)/1.2 var(--serif); }
.hub-intro p { font-size: 0.95rem; color: var(--fg-2); }

/* faq */
.faq { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(32px, 7vw, 120px); align-items: start; }
.faq-intro { position: sticky; top: calc(var(--header-h) + 40px); }
.faq-intro .kicker { margin-bottom: 22px; }
.faq-intro p { max-width: 24em; margin-top: 22px; color: var(--fg-2); }
.faq-contacts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.faq-list { border-top: 1px solid var(--rule-2); }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; font: 500 clamp(1.2rem, 1.7vw, 1.5rem)/1.2 var(--serif); list-style: none; cursor: pointer; transition: color 0.3s; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent-hi); }
.faq-item summary i { position: relative; flex: none; width: 34px; height: 34px; border: 1px solid var(--rule-2); border-radius: 50%; transition: transform 0.6s var(--ease-out), background-color 0.3s, border-color 0.3s, color 0.3s; }
.faq-item summary i::before, .faq-item summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1px; background: currentColor; transform: translate(-50%, -50%); transition: transform 0.6s var(--ease-out); }
.faq-item summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] summary i { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); transform: rotate(180deg); }
.theme-paper .faq-item[open] summary i { color: #fff; }
.faq-item[open] summary i::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-item > p { max-width: 56em; padding: 0 58px 26px 0; color: var(--fg-2); animation: rise 0.6s var(--ease-out) both; }

/* final call to action */
.cta-section { padding-block: clamp(110px, 15vw, 220px); border-top: 1px solid var(--rule); background: var(--bg-deep); text-align: center; overflow: hidden; }
.cta-glow { position: absolute; left: 50%; bottom: -46%; width: min(1200px, 130vw); aspect-ratio: 1; background: radial-gradient(closest-side, rgba(217, 178, 95, 0.24), rgba(217, 178, 95, 0.06) 46%, transparent 70%); transform: translateX(-50%); pointer-events: none; }
.cta-bridge { position: absolute; inset: auto 0 0; width: 100%; height: clamp(120px, 21vw, 260px); fill: none; stroke: var(--accent); stroke-width: 1; opacity: 0.55; }
.cta-bridge path { vector-effect: non-scaling-stroke; }
.cta-bridge path + path { opacity: 0.45; }
.cta-inner { position: relative; display: grid; justify-items: center; }
.cta-inner .kicker { margin-bottom: 26px; }
.cta-text { max-width: 34em; margin-top: 26px; font-size: 1.08rem; color: var(--fg-2); }
.cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 38px; }
.cta-note { margin-top: 22px; font-size: 0.8rem; color: var(--fg-3); }

/* ---------------------------------------------------------------- footer */

.site-footer { position: relative; z-index: 3; padding-top: clamp(56px, 7vw, 96px); border-top: 1px solid var(--rule); background: #060504; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1.5fr 0.8fr 0.9fr; gap: 40px; }
.footer-brand p { max-width: 24em; margin-block: 20px 22px; font-size: 0.9rem; color: var(--fg-3); }
.footer-title { margin-bottom: 18px; font: 600 0.68rem/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-3); }
.footer-links { display: grid; gap: 11px; }
.footer-links a { font-size: 0.9rem; color: var(--fg-2); transition: color 0.3s; }
.footer-links a:hover { color: var(--accent-hi); }
.footer-legal { margin-top: clamp(40px, 5vw, 72px); padding-block: 26px 34px; border-top: 1px solid var(--rule); }
.footer-legal p { max-width: 96em; font-size: 0.74rem; line-height: 1.6; color: var(--fg-3); }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; margin-top: 18px; font-size: 0.76rem; color: var(--fg-3); }

/* ---------------------------------------------------------------- dialog */

.quote-dialog { width: min(640px, calc(100% - 20px)); max-height: min(92vh, 920px); max-height: min(92dvh, 920px); padding: 0; border: 1px solid var(--rule-2); border-radius: 22px; background: #100e0a; color: var(--fg); box-shadow: 0 60px 140px rgba(0, 0, 0, 0.85); overflow: auto; overscroll-behavior: contain; }
.quote-dialog::backdrop { background: rgba(4, 3, 2, 0.76); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.quote-dialog[open] { animation: dialog-in 0.55s var(--ease-out); }
.quote-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding: clamp(22px, 4vw, 36px); }
.dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.dialog-header h2 { margin-top: 10px; font: 500 clamp(1.7rem, 3vw, 2.2rem)/1.05 var(--serif); }
.dialog-close { position: relative; flex: none; width: 40px; height: 40px; padding: 0; border: 1px solid var(--rule-2); border-radius: 50%; background: none; cursor: pointer; transition: border-color 0.3s, transform 0.5s var(--ease-out); }
.dialog-close:hover { border-color: var(--accent); transform: rotate(90deg); }
.dialog-close i::before, .dialog-close i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; background: var(--fg); transform: translate(-50%, -50%) rotate(45deg); }
.dialog-close i::after { transform: translate(-50%, -50%) rotate(-45deg); }
.dialog-intro { font-size: 0.92rem; color: var(--fg-2); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: grid; gap: 8px; min-width: 0; }
.field-wide { grid-column: 1 / -1; }
.field > span { font: 600 0.68rem/1.25 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--rule-2); border-radius: 12px; background-color: #17140f; font-size: 0.95rem; transition: border-color 0.3s, box-shadow 0.3s; }
.field textarea { resize: vertical; }
.field select { padding-right: 40px; text-overflow: ellipsis; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23d9b25f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; }
.field option { background: #17140f; color: #f0e9db; }
.field :focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(217, 178, 95, 0.2); }
.field ::placeholder { color: var(--fg-3); }
.quote-details { padding: 0 14px; border: 1px solid var(--rule); border-radius: 12px; }
.quote-details summary { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; font: 600 0.86rem/1.2 var(--sans); cursor: pointer; }
.quote-details summary span { font-weight: 500; color: var(--fg-3); }
.quote-details .form-grid { padding-bottom: 16px; }
.estimate { display: grid; gap: 6px; padding: 18px; border: 1px solid var(--rule-2); border-radius: 14px; background: linear-gradient(140deg, rgba(217, 178, 95, 0.17), rgba(217, 178, 95, 0.03)); }
.estimate span { font: 600 0.68rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.estimate strong { font: 500 2rem/1.05 var(--serif); font-variant-numeric: lining-nums; color: var(--accent-hi); }
.estimate em { font: 500 0.9rem/1.3 var(--sans); font-style: normal; color: var(--fg); }
.estimate small { font-size: 0.78rem; color: var(--fg-3); }
.dialog-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.dialog-actions .button { flex: 1 1 auto; }
.form-note { font-size: 0.78rem; line-height: 1.55; color: var(--fg-3); }
.form-note a, .brief-fallback a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.brief-fallback summary { font-size: 0.82rem; color: var(--fg-2); cursor: pointer; }
.brief-fallback p { margin-top: 8px; font-size: 0.8rem; color: var(--fg-3); }
.brief-preview { max-height: 180px; margin: 10px 0 0; padding: 12px; border: 1px solid var(--rule); border-radius: 10px; background: #0b0a07; font: 400 0.76rem/1.5 var(--mono); white-space: pre-wrap; overflow: auto; color: var(--fg-2); }
.toast { position: sticky; bottom: 16px; width: max-content; max-width: calc(100% - 32px); margin: 0 auto 16px; padding: 12px 18px; border-radius: 999px; background: var(--accent); font: 600 0.84rem/1 var(--sans); color: var(--accent-ink); opacity: 0; transform: translateY(10px); transition: opacity 0.4s, transform 0.5s var(--ease-out); pointer-events: none; }
.toast.visible { opacity: 1; transform: none; }

.mobile-bar { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 90; display: none; gap: 8px; padding: 8px; border: 1px solid var(--rule-2); border-radius: 999px; background: rgba(14, 12, 9, 0.88); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.65); }
.mobile-bar .button { flex: 1; --h: 48px; }
.mobile-bar .icon-button { width: 48px; height: 48px; }

/* ----------------------------------------------------------- inner pages */

.page-hero { padding-block: calc(var(--header-h) + clamp(44px, 6vw, 88px)) clamp(56px, 8vw, 112px); background: var(--bg-deep); overflow: hidden; }
.page-hero::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: linear-gradient(90deg, transparent, var(--rule-2), transparent); }
.page-hero-glow { position: absolute; right: -12%; top: -34%; width: min(920px, 92vw); aspect-ratio: 1; background: radial-gradient(closest-side, rgba(217, 178, 95, 0.22), rgba(217, 178, 95, 0.05) 50%, transparent 72%); pointer-events: none; }
.page-hero .container { position: relative; }
.page-hero .kicker { margin-bottom: 22px; }
.page-hero .lead { margin-top: 26px; }
.page-hero--error { min-height: 78vh; display: grid; align-items: center; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(28px, 4vw, 52px); font-size: 0.78rem; color: var(--fg-3); }
.breadcrumbs a { transition: color 0.3s; }
.breadcrumbs a:hover { color: var(--accent-hi); }
.breadcrumbs i { font-style: normal; opacity: 0.5; }
.breadcrumbs span { color: var(--fg-2); }

.service-hero, .demo-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr); gap: clamp(32px, 6vw, 96px); align-items: end; }
.price-card { display: grid; gap: 16px; padding: clamp(24px, 3vw, 36px); border: 1px solid var(--rule-2); border-radius: 20px; background: linear-gradient(160deg, rgba(217, 178, 95, 0.15), rgba(217, 178, 95, 0.02) 60%), rgba(19, 17, 13, 0.82); }
.price-card-value { font: 500 clamp(1.9rem, 2.8vw, 2.6rem)/1.05 var(--serif); font-variant-numeric: lining-nums; color: var(--accent-hi); }
.price-card dl, .demo-facts dl { border-top: 1px solid var(--rule); }
.price-card dl div, .demo-facts dl div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--rule); font-size: 0.86rem; }
.price-card dt, .demo-facts dt { color: var(--fg-3); }
.price-card dd { font-weight: 500; text-align: right; }
.price-card small { font-size: 0.75rem; color: var(--fg-3); }
.demo-facts { padding: 24px; border: 1px solid var(--rule-2); border-radius: 18px; background: rgba(19, 17, 13, 0.75); }
.demo-facts dl { margin-top: 14px; }
.demo-facts dd { font: 500 1.3rem/1 var(--serif); font-variant-numeric: lining-nums; color: var(--accent-hi); }
.demo-facts p { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 0.78rem; color: var(--fg-3); }
.demo-facts p i, .live-dot { width: 7px; height: 7px; border-radius: 50%; background: #7bd3a0; box-shadow: 0 0 10px #7bd3a0; }

.fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); }
.statement { margin-top: 18px; font: 500 clamp(1.5rem, 2.3vw, 2.1rem)/1.16 var(--serif); text-wrap: pretty; }
.notice { display: flex; gap: 14px; margin-top: clamp(32px, 4vw, 56px); padding: 18px 20px; border: 1px solid var(--rule); border-radius: 14px; background: rgba(255, 255, 255, 0.015); font-size: 0.86rem; line-height: 1.6; color: var(--fg-2); }
.notice svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.notice--plain { margin-top: 24px; }
.scope { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.scope-head { position: sticky; top: calc(var(--header-h) + 40px); }
.scope-head .kicker { margin-bottom: 22px; }
.scope-head p { margin-top: 20px; font-size: 0.92rem; color: var(--fg-2); }
.check-list { border-top: 1px solid var(--rule-2); }
.check-list li { display: flex; align-items: flex-start; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--rule); font: 500 clamp(1.15rem, 1.6vw, 1.4rem)/1.28 var(--serif); }
.check-list svg { flex: none; width: 22px; height: 22px; margin-top: 4px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.question-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.h-display + .question-grid { margin-top: clamp(36px, 5vw, 64px); }
/* Five cards in three columns: the last two share the second row instead of leaving a hole. */
@media (min-width: 901px) {
  .question-grid:has(> :nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .question-grid:has(> :nth-child(5):last-child) > * { grid-column: span 2; }
  .question-grid:has(> :nth-child(5):last-child) > :nth-child(n + 4) { grid-column: span 3; }
}
.question-card { padding: 28px; border: 1px solid var(--rule); border-radius: 16px; background: var(--surface); }
.question-card > span { display: inline-block; padding-right: 0.1em; font: italic 400 2.3rem/1 var(--serif); font-variant-numeric: lining-nums; color: var(--accent); }
.question-card h3 { margin-top: 20px; font: 500 1.45rem/1.15 var(--serif); text-wrap: balance; }
.question-card p { margin-top: 12px; font-size: 0.92rem; color: var(--fg-2); }
.example-link { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; margin-top: 32px; }
.example-link p { font-size: 0.8rem; color: var(--fg-3); }
.two-column { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 120px); }
.two-column .kicker { margin-bottom: 20px; }
.numbered-list { margin-top: 30px; border-top: 1px solid var(--rule-2); }
.numbered-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.numbered-list span { font: 600 0.74rem/1.75 var(--sans); letter-spacing: 0.1em; color: var(--accent); }
.numbered-list--muted span { color: var(--fg-3); }
.numbered-list--muted p { color: var(--fg-2); }
.preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.preview-grid .kicker { margin-bottom: 20px; }
.preview-grid .lead { margin-top: 22px; }
.compact-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--rule-2); }
.compact-steps li { padding: 22px 18px 0; border-right: 1px solid var(--rule); }
.compact-steps li:first-child { padding-left: 0; }
.compact-steps li:last-child { border-right: 0; }
.compact-steps span { font: 600 0.7rem/1 var(--sans); letter-spacing: 0.16em; color: var(--accent); }
.compact-steps b { display: block; margin-top: 12px; font: 500 1.3rem/1.15 var(--serif); }
h2.kicker { display: flex; }
.other-services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.other-service { position: relative; padding: 24px 56px 24px 24px; border: 1px solid var(--rule); border-radius: 16px; transition: border-color 0.4s, transform 0.6s var(--ease-out); }
.other-service:hover { border-color: var(--rule-2); transform: translateY(-4px); }
.other-service h3 { font: 500 1.3rem/1.15 var(--serif); }
.other-service span { display: block; margin-top: 8px; font-size: 0.82rem; color: var(--fg-3); }
.other-service svg { position: absolute; right: 22px; top: 26px; width: 20px; height: 20px; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.5s var(--ease-out); }
.other-service:hover svg { transform: translateX(4px); }

/* articles and legal pages */
.section--article { padding-top: clamp(48px, 6vw, 88px); }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(32px, 6vw, 88px); align-items: start; }
.article-aside { position: sticky; top: calc(var(--header-h) + 28px); display: grid; gap: 24px; }
.article-aside ol { display: grid; gap: 9px; margin-top: 14px; }
.article-aside nav a { font-size: 0.86rem; line-height: 1.4; color: var(--fg-2); transition: color 0.3s; }
.article-aside nav a:hover { color: var(--accent); }
.aside-card { display: grid; gap: 12px; padding: 22px; border: 1px solid var(--rule-2); border-radius: 16px; background: var(--surface); }
/* The whole sidebar does not fit under the header on a laptop screen: there the contents list
   scrolls away with the page and only the offer stays in view. */
@media (min-width: 901px) and (max-height: 1040px) {
  .article-aside { position: static; align-self: stretch; grid-template-rows: auto 1fr; }
  .aside-card { position: sticky; top: calc(var(--header-h) + 28px); align-self: start; }
}
/* Between the tablet layout and a wide desktop the article column is narrower than the tables of
   four or five columns: one column there, as below 900px. */
@media (min-width: 901px) and (max-width: 1160px) {
  .article-layout { grid-template-columns: minmax(0, 1fr); }
  .article-aside { position: static; order: -1; display: block; }
  .article-aside nav { display: none; }
  .aside-card { position: static; }
}
.aside-card strong { font: 500 1.4rem/1.12 var(--serif); }
.aside-card p { font-size: 0.84rem; color: var(--fg-2); }
.prose { font-size: 1.06rem; line-height: 1.75; }
.prose > * + *, .guide-section > * + *, .guide-sources > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 2.2em; font: 500 clamp(1.7rem, 2.6vw, 2.3rem)/1.12 var(--serif); font-variant-numeric: lining-nums; text-wrap: balance; }
.prose > h2:first-child, .prose > .guide-steps:first-child { margin-top: 0; }
.prose h3 { font: 600 1.02rem/1.3 var(--sans); }
.prose p, .prose li { color: #2c261b; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose ul:not([class]) li, .guide-bullets li { position: relative; padding-left: 1.5em; }
.prose ul:not([class]) li + li, .guide-bullets li + li { margin-top: 0.5em; }
.prose ul:not([class]) li::before, .guide-bullets li::before { content: ""; position: absolute; left: 2px; top: 0.72em; width: 7px; height: 7px; background: var(--accent); transform: rotate(45deg); }
.guide-section { margin-top: 0; }
.guide-summary { padding: 24px 26px; border-left: 2px solid var(--accent); border-radius: 0 14px 14px 0; background: var(--surface); }
.guide-summary span { font: 600 0.68rem/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
.guide-summary p { margin-top: 10px; font: 500 1.32rem/1.35 var(--serif); color: var(--fg); }
.guide-formula { padding: 22px; border: 1px solid var(--rule-2); border-radius: 14px; background: var(--surface); }
.guide-formula strong { display: block; font: 600 1.05rem/1.5 var(--mono); }
.guide-formula p { margin-top: 8px; font-size: 0.9rem; color: var(--fg-2); }
/* A wide table scrolls inside its frame; the shadows at the edges show that there is more to see. */
.guide-table-wrap { border: 1px solid var(--rule-2); border-radius: 14px; overflow-x: auto;
  background:
    linear-gradient(90deg, var(--surface) 30%, transparent) left / 44px 100% no-repeat local,
    linear-gradient(270deg, var(--surface) 30%, transparent) right / 44px 100% no-repeat local,
    linear-gradient(90deg, rgba(60, 44, 12, 0.16), transparent) left / 16px 100% no-repeat scroll,
    linear-gradient(270deg, rgba(60, 44, 12, 0.16), transparent) right / 16px 100% no-repeat scroll,
    var(--surface); }
.guide-table-wrap table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 0.9rem; line-height: 1.5; }
.guide-table-wrap th, .guide-table-wrap td { padding: 12px 16px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.guide-table-wrap tr:last-child th, .guide-table-wrap tr:last-child td { border-bottom: 0; }
.guide-table-wrap thead th { font: 600 0.68rem/1.3 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.guide-table-wrap tbody th { font-weight: 600; }
/* On a phone every table is wider than its frame (min-width: 520px); the edge shadow alone is easy to miss. */
@media (max-width: 561px) {
  .guide-table-wrap::before { content: "Таблица шире экрана — листайте вбок →"; position: sticky; left: 0; display: block; padding: 9px 16px; border-bottom: 1px solid var(--rule); font: 600 0.72rem/1.3 var(--sans); letter-spacing: 0.02em; color: var(--fg-3); }
}
.guide-steps { border-top: 1px solid var(--rule-2); }
.guide-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.guide-steps li > span { font: 600 0.74rem/1.9 var(--sans); letter-spacing: 0.1em; color: var(--accent); }
.guide-steps strong { font-weight: 600; }
.guide-steps p { margin-top: 4px; font-size: 0.95rem; color: var(--fg-2); }
.guide-steps--large li { grid-template-columns: 72px minmax(0, 1fr); padding: 30px 0; }
.guide-steps--large li > span { font: italic 400 2.6rem/1 var(--serif); letter-spacing: 0; font-variant-numeric: lining-nums; }
.guide-steps--large h2 { margin-top: 0; font-size: clamp(1.5rem, 2.2vw, 1.9rem); }
.guide-steps--large p { margin-top: 10px; font-size: 1rem; }
.guide-checklist li { display: flex; gap: 12px; padding: 10px 0; }
.guide-checklist svg { flex: none; width: 20px; height: 20px; margin-top: 5px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.guide-note { padding: 16px 18px; border: 1px solid rgba(143, 99, 25, 0.28); border-radius: 14px; background: rgba(143, 99, 25, 0.08); font-size: 0.95rem; }
.inline-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; margin-block: 2.4em; padding: 26px 28px; border-radius: 18px; background: #15110a; }
.inline-cta .kicker { color: #d9b25f; }
.inline-cta strong { display: block; margin-top: 8px; font: 500 1.6rem/1.1 var(--serif); font-variant-numeric: lining-nums; color: #f5e1a8; }
.prose .inline-cta p { margin-top: 6px; font-size: 0.86rem; color: #b3a995; }
.prose .inline-cta a { color: var(--accent-ink); text-decoration: none; }
.guide-faq .faq-item summary { font-size: 1.28rem; }
.guide-faq .faq-item > p { margin-top: 0; }
.guide-sources li + li { margin-top: 0.5em; }
.guide-disclaimer { margin-top: 2.4em; padding-top: 1.4em; border-top: 1px solid var(--rule); font-size: 0.8rem; }
.prose .guide-disclaimer, .prose .experience-disclaimer { color: var(--fg-3); }
.guide-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 28px; font-size: 0.8rem; color: var(--fg-3); }
.guide-meta a { color: var(--fg-2); text-decoration: underline; text-underline-offset: 3px; }
.definition-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.definition-grid article { padding: 20px; border: 1px solid var(--rule-2); border-radius: 14px; background: var(--surface); }
.definition-grid p { margin-top: 6px; font-size: 0.9rem; }
.large-callout { padding: 28px; border-radius: 18px; background: #15110a; }
.large-callout strong { display: block; font: 500 clamp(1.5rem, 2.4vw, 2rem)/1.15 var(--serif); color: #f5e1a8; }
/* Serif text with figures in it: lining numerals, as in the headings. */
.guide-summary p, .faq-item summary, .check-list li, .question-card h3, .statement, .large-callout strong, .experience-text { font-variant-numeric: lining-nums; }
.prose .large-callout p { margin-top: 12px; font-size: 0.95rem; color: #b3a995; }
.experience-disclaimer { font-size: 0.8rem; }
.service-links { border-top: 1px solid var(--rule-2); }
.service-links li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.service-links a { font-weight: 500; text-decoration: none; color: var(--fg); }
.service-links a:hover { color: var(--accent); }
.service-links span { font-size: 0.9rem; white-space: nowrap; color: var(--fg-3); }

/* interactive demo pages */
.section--demo { padding-top: clamp(40px, 5vw, 72px); background: var(--bg-deep); }
.demo-instructions { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 20px 48px; margin-bottom: 24px; padding: 26px; border: 1px solid var(--rule); border-radius: 18px; background: var(--surface); }
.demo-instructions h2 { margin-top: 10px; font: 500 1.6rem/1.1 var(--serif); }
.demo-instructions ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.demo-instructions li { display: grid; align-content: start; gap: 8px; font-size: 0.86rem; color: var(--fg-2); }
.demo-instructions li span { font: 600 0.7rem/1 var(--sans); letter-spacing: 0.1em; color: var(--accent); }
.demo-tip { grid-column: 1 / -1; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 0.8rem; color: var(--fg-3); }
.demo-tip strong { color: var(--fg-2); }
.demo-disclaimer { margin-top: 22px; font-size: 0.78rem; line-height: 1.6; color: var(--fg-3); }
.demo-disclaimer strong { color: var(--fg-2); }

/* ---------------------------------------------------------------- motion */

@keyframes rise { from { opacity: 0; transform: translate3d(0, 22px, 0); } }
@keyframes line-in { from { transform: translate3d(0, 110%, 0); } }
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }
@keyframes cue { 0% { opacity: 0; transform: scaleY(0); } 40% { opacity: 1; transform: scaleY(1); } 100% { opacity: 0; transform: translateY(18px) scaleY(1); } }
@keyframes dialog-in { from { opacity: 0; transform: translate3d(0, 24px, 0) scale(0.98); } }

/* Entry states apply only after motion.js is running, so content never stays hidden without it. */
/* The entrance transition applies until .is-done; afterwards each element's own hover and transition rules win again. */
.motion-ready [data-reveal]:not(.is-in):not([data-reveal="lines"]) { opacity: 0; transform: translate3d(0, 26px, 0); }
.motion-ready [data-reveal]:not(.is-done) { transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
.motion-ready [data-reveal="lines"]:not(.is-in) .ln > span { transform: translate3d(0, 110%, 0); }
.motion-ready [data-reveal="lines"] .ln > span { transition: transform 1.2s var(--ease-out); }
.motion-ready [data-reveal="lines"] .ln:nth-child(2) > span { transition-delay: 0.09s; }
.motion-ready [data-reveal="lines"] .ln:nth-child(3) > span { transition-delay: 0.18s; }
.motion-ready [data-reveal]:not(.is-in) .mock-bars i { transform: scaleY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee-track { flex-wrap: wrap; justify-content: center; gap: 14px 28px; width: auto; padding-inline: var(--gutter); animation: none; }
  .marquee-track span { font-size: clamp(1.3rem, 2.4vw, 2.2rem); }
  .marquee-track [data-copy], .marquee-track [data-end] { display: none; }
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 1100px) {
  .situations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .situation { min-height: 0; padding: 30px 28px 30px 0; }
  .situation:nth-child(2n) { padding: 30px 0 30px 28px; border-right: 0; }
  .situation:nth-child(n + 3) { border-top: 1px solid var(--rule); }
  .pledges { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
  .pledge:nth-child(3n) { border-right: 0; }
  .pledge:nth-child(3n + 1) { padding-left: 0; }
  .service-row { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .service-actions { grid-column: 2 / -1; display: flex; align-items: center; gap: 20px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1020px) {
  .main-nav { position: fixed; inset: 0; z-index: -1; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding: 96px var(--gutter) 40px; background: rgba(9, 8, 6, 0.98); opacity: 0; visibility: hidden; transform: translate3d(0, -14px, 0); transition: opacity 0.4s, transform 0.6s var(--ease-out), visibility 0s 0.4s; overflow-y: auto; }
  .main-nav.open { opacity: 1; visibility: visible; transform: none; transition: opacity 0.4s, transform 0.6s var(--ease-out); }
  .main-nav > a { padding: 14px 0; border-bottom: 1px solid var(--rule); font: 500 clamp(1.9rem, 7.4vw, 2.7rem)/1.1 var(--serif); color: var(--fg); }
  .main-nav > a::after { display: none; }
  /* Auto margins centre the list but collapse when it is taller than the screen, so the first link stays reachable. */
  .main-nav > a:first-child { margin-top: auto; }
  .nav-contacts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; margin-bottom: auto; }
  .nav-toggle { display: inline-block; }
  /* The open menu scrolls under the header bar, which therefore has to be opaque. */
  .nav-open .site-header::before { border-bottom-color: var(--rule); background: #090806; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .no-js .main-nav { position: static; z-index: auto; flex-direction: row; flex-wrap: wrap; gap: 14px; padding: 0; background: none; opacity: 1; visibility: visible; transform: none; }
  .no-js .main-nav > a { margin: 0; padding: 6px 0; border: 0; font: 500 0.82rem/1 var(--sans); }
  .no-js .nav-toggle, .no-js .nav-contacts { display: none; }
  .no-js .site-header { position: static; height: auto; padding-block: 14px; }
  .no-js .header-inner { flex-wrap: wrap; }
}

@media (max-width: 900px) {
  .section-head--split, .process, .faq, .scope, .fit-grid, .two-column, .preview-grid, .service-hero, .demo-hero, .calc, .experience, .hub-intro, .article-layout, .demo-instructions { grid-template-columns: minmax(0, 1fr); }
  .process-intro, .faq-intro, .scope-head, .calc-result, .article-aside { position: static; }
  .article-aside { order: -1; }
  .article-aside nav { display: none; }
  .demo-card, .demo-card--flip { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .demo-card--flip .demo-card-copy { order: 0; }
  .demo-card-copy .link-arrow { padding-top: 22px; }
  .guide-grid, .question-grid, .other-services, .definition-grid { grid-template-columns: minmax(0, 1fr); }
  .guide-card { min-height: 0; }
  .compact-steps { grid-template-columns: minmax(0, 1fr); }
  .compact-steps li { display: flex; align-items: baseline; gap: 18px; padding: 16px 0; border-right: 0; border-bottom: 1px solid var(--rule); }
  .compact-steps b { margin-top: 0; }
  .hero-chapters { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .story-live .hero-rail { display: none; }
}

@media (orientation: portrait), (max-width: 760px) {
  .hero-copy { max-width: none; }
  .hero-scrim { background: linear-gradient(180deg, rgba(7, 6, 5, 0.92) 0%, rgba(7, 6, 5, 0.88) 55%, rgba(7, 6, 5, 0.68) 80%, rgba(7, 6, 5, 0.42) 100%); }
  .hero-shade { background: linear-gradient(180deg, rgba(7, 6, 5, 0.94) 0%, rgba(7, 6, 5, 0.82) 24%, rgba(7, 6, 5, 0) 46%); }
  .hero-intro { align-items: flex-start; padding-block: calc(var(--header-h) + 4vh) 6vh; }
  .story-live .hero-intro { padding-top: calc(var(--header-h) + 3.5vh); }
  .story-live .hero-copy { margin-block: 0; }
  .story-live .hero-cue { display: none; }
  .story-live .hero-chapter { bottom: auto; top: calc(var(--header-h) + 5vh); }
  .story-live .hero-chapter::before { inset: -40px -60px -60px; }
  .story-live .hero-finale { padding-top: calc(var(--header-h) + 4vh); transform: translate3d(0, var(--y, 28px), 0); }
  .story-live .hero-rail { display: none; }
}

/* In em, so that an enlarged default font size lets the lines wrap again instead of being cut. */
@media (min-width: 62.5em) and (orientation: landscape) {
  .h-display--hero .ln { white-space: nowrap; }
}

/* Short landscape screens (laptops with browser chrome, phones on their side): tighten, then drop
   secondary items, so the primary action always fits inside the pinned stage. */
@media (orientation: landscape) and (max-height: 700px) {
  .hero-copy h1 .kicker { margin-bottom: 16px; }
  .hero-lead { margin-top: 16px; }
  .hero-actions { margin-top: 22px; }
  .hero-facts { margin-top: 26px; }
  .hero-facts div { padding-top: 14px; }
  .story-live .hero-chapter { bottom: clamp(36px, 8vh, 64px); }
  .story-live .hero-finale { padding-top: calc(var(--header-h) + 2vh); }
}
@media (orientation: landscape) and (max-height: 560px) {
  :root { --header-h: 60px; }
  .story-live .hero-facts, .story-live .hero-cue, .hero-finale-text { display: none; }
  .hero-finale-note { display: block; }
  .story-live .hero-finale .h-display { margin-bottom: 18px; }
}
@media (orientation: landscape) and (max-height: 460px) {
  .h-display--hero { font-size: clamp(1.7rem, 10.5vh, 3rem); }
  .story-live .hero-lead { display: none; }
  .hero-actions { margin-top: 16px; }
  .hero-actions .button--large, .hero-finale .button--large { --h: 48px; }
  .story-live .hero-chapter h2 { font-size: clamp(1.6rem, 9vh, 2.6rem); }
  .story-live .hero-chapter p { margin-top: 8px; font-size: 0.9rem; }
  .h-display--finale { font-size: clamp(1.6rem, 9vh, 2.6rem); }
}

/* Small phones: the pinned stage is one screen tall, so the intro must fit in it. */
@media (max-width: 380px) {
  .h-display--hero { font-size: clamp(2rem, 10.2vw, 2.7rem); }
  .dialog-actions .button { padding-block: 12px; line-height: 1.25; text-align: center; white-space: normal; }
  .brand-copy small { letter-spacing: 0.22em; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .hero-copy h1 .kicker { margin-bottom: 16px; }
  .hero-lead { margin-top: 14px; font-size: 0.94rem; line-height: 1.5; }
  .hero-actions { gap: 12px 24px; margin-top: 18px; }
  .hero-actions .button--large { --h: 54px; }
  .hero-facts { margin-top: 20px; }
}
@media (max-width: 760px) and (max-height: 620px) {
  .story-live .hero-facts { display: none; }
}

@media (max-width: 760px) {
  :root { --header-h: 64px; }
  .header-cta { display: none; }
  .brand-copy strong { font-size: 1.14rem; }
  .brand-mark { width: 34px; height: 26px; }
  .hero-finale-text { display: none; }
  .hero-finale-note { display: block; }
  .story-live .hero-finale .h-display { margin-bottom: 24px; }
  .story-live .hero { --story-len: 2.3; }
  .story-live .hero-finale { align-items: flex-start; text-align: left; }
  .hero-lead { margin-top: 20px; }
  .hero-actions { margin-top: 26px; }
  .hero-actions .button, .hero-finale .button { max-width: 100%; padding-block: 12px; line-height: 1.25; text-align: center; white-space: normal; }
  .hero-facts { margin-top: 30px; }
  .hero-facts div { padding: 14px 18px 0 0; margin-right: 18px; }
  .hero-facts div:last-child { display: none; }
  .situations { grid-template-columns: minmax(0, 1fr); }
  .situation, .situation:nth-child(2n) { padding: 28px 0; border-right: 0; }
  .situation + .situation { border-top: 1px solid var(--rule); }
  .pledges { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .pledge, .pledge:first-child, .pledge:last-child { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; padding: 24px 0; border-right: 0; border-bottom: 1px solid var(--rule); }
  .pledge-num { grid-row: span 2; font-size: 2.6rem; }
  .pledge h3 { margin-top: 4px; }
  .pledge p { grid-column: 2; }
  .service-row { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 26px 0; }
  .service-row::before { display: none; }
  .service-num { padding-top: 0; }
  .service-price { grid-template-columns: auto 1fr; align-items: baseline; column-gap: 14px; }
  .service-price small { grid-column: 1 / -1; }
  .service-actions { grid-column: auto; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 6px; }
  .site-footer { padding-bottom: 92px; }
  .faq-item > p { padding-right: 0; }
  .demo-instructions ol { grid-template-columns: minmax(0, 1fr); }
  .mock-kpis { gap: 6px; }
  .mock-kpis span { padding: 9px; }
  .mobile-bar { display: flex; transform: translate3d(0, 150%, 0); transition: transform 0.7s var(--ease-out); }
  .mobile-bar.is-visible, .no-js .mobile-bar { transform: none; }
}

/* Phones on their side: the finale has to clear the fixed contact bar. */
@media (max-width: 760px) and (orientation: landscape) and (max-height: 460px) {
  .story-live .hero-finale .kicker { display: none; }
  .story-live .hero-finale .h-display { margin-bottom: 12px; }
  .hero-finale-note { margin-top: 8px; padding: 3px 10px; }
  /* The text sits on the left, across the bridge: shade that side rather than the top. */
  .hero-shade { background: linear-gradient(90deg, rgba(7, 6, 5, 0.9) 0%, rgba(7, 6, 5, 0.72) 48%, rgba(7, 6, 5, 0) 82%); }
  .story-live .hero-finale::before { left: calc(var(--gutter) * -1); width: 86%; height: 100%; background: linear-gradient(90deg, rgba(7, 6, 5, 0.84), rgba(7, 6, 5, 0.6) 55%, rgba(7, 6, 5, 0)); transform: none; }
}

/* Renderers that do not scroll (search-engine crawlers stretch the viewport to the height of the
   page instead). No real screen is both taller than 3000px and 2.5 times taller than wide: there
   the hero keeps the height of its content and nothing waits for an entrance. */
@media (min-height: 3001px) and (max-aspect-ratio: 2/5) {
  .hero-stage { min-height: 0 !important; }
  .hero-intro { padding-block: calc(var(--header-h) + 40px) 72px !important; }
  .story-live .hero { height: auto !important; margin-bottom: 0 !important; }
  .story-live .hero-stage { position: relative !important; display: grid !important; height: auto !important; }
  .story-live .hero-layer { position: relative !important; left: auto !important; right: auto !important; width: min(var(--max), 100% - 2 * var(--gutter)) !important; margin-inline: auto !important; opacity: 1 !important; transform: none !important; }
  .story-live .hero-chapters { display: grid !important; padding-bottom: 56px !important; }
  .story-live .hero-chapter { position: static !important; max-width: none !important; opacity: 1 !important; transform: none !important; }
  .story-live .hero-chapter::before, .hero-finale, .hero-rail, .hero-cue { display: none !important; }
  [data-reveal], .ln > span, .hero-copy > *, .hero-copy .kicker { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
}

/* ----------------------------------------------------------------- print */

@media print {
  :root, .theme-paper { color-scheme: light; --bg: #fff; --bg-deep: #fff; --surface: #fff; --surface-2: #fff; --fg: #111; --fg-2: #333; --fg-3: #555; --rule: rgba(0, 0, 0, 0.18); --rule-2: rgba(0, 0, 0, 0.35); --accent: #7a5413; --accent-hi: #7a5413; }
  html, body, .section, .page-hero, .cta-section, .site-footer, .strip { background: #fff !important; color: #111 !important; }
  .site-header, .scroll-progress, .mobile-bar, .hero-media, .hero-cue, .hero-rail, .hero-finale, .quote-dialog, .skip-link, .marquee, .cta-glow, .cta-bridge, .page-hero-glow, .demo-card-art { display: none !important; }
  .story-live .hero { height: auto !important; margin-bottom: 0 !important; }
  .story-live .hero-stage { position: static !important; height: auto !important; }
  .story-live .hero-layer, .story-live .hero-chapter { position: static !important; visibility: visible !important; opacity: 1 !important; transform: none !important; }
  .story-live .hero-chapter::before { display: none; }
  .story-live .hero-intro { padding-block: 0 24px; }
  .story-live .hero-chapters { display: grid !important; }
  [data-reveal], .ln > span, .hero-copy > *, .hero-copy .kicker, .faq-item > p { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .h-display em, .pledge-num, .calc-price, .experience-text em { background: none !important; -webkit-text-fill-color: currentColor !important; color: #7a5413 !important; }
  .hero-lead, .hero-chapter p, .hero-finale-text { color: #333 !important; }
  .section, .page-hero, .cta-section { padding-block: 24px !important; }
  .section--overlap { border-radius: 0; box-shadow: none; }
  .price-card, .demo-facts, .calc-result, .estimate, .notice, .demo-card { background: #fff !important; }
  .inline-cta, .large-callout { background: #fff !important; border: 1px solid rgba(0, 0, 0, 0.35); }
  .inline-cta strong, .large-callout strong, .prose .inline-cta p, .prose .large-callout p { color: #111 !important; }
  .button { border: 1px solid rgba(0, 0, 0, 0.35) !important; background: none !important; box-shadow: none !important; color: #111 !important; }
  a { text-decoration: none; }
  .faq-item summary i { display: none; }
}