/* ============================================================
   Trivie — v3 "THE LINE" (DAYLIGHT). A from-scratch third direction.
   Editorial, kinetic, dimensional. One orange line threads every
   chapter. This file holds: shared chrome (header/footer/form),
   the new v3 home sections, and the re-lit inner-page components.
   ============================================================ */

/* ============================================================
   SHARED CHROME
   ============================================================ */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; padding-block: var(--space-3);
  transition: background var(--dur-section) var(--ease-standard), box-shadow var(--dur-section), padding var(--dur-section); }
.site-header.scrolled { background: color-mix(in srgb, var(--sky-0) 82%, transparent); backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 1px 0 var(--line), var(--e1); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.brand { display: inline-flex; align-items: center; gap: var(--space-3); }
.brand-mark { width: 42px; height: 42px; object-fit: contain; }
.brand-word { font-family: var(--font-display); font-weight: 600; font-size: var(--ms-1); line-height: .92; color: var(--ink); display: flex; flex-direction: column; letter-spacing: 0; }
.brand-sub { font-family: var(--font-text); font-weight: 600; font-size: var(--ms-dn2); letter-spacing: 0.2em; text-transform: uppercase; color: var(--sun-deep); margin-top: 4px; }
.nav-desktop { display: none; gap: var(--space-6); }
.nav-desktop a { font-family: var(--font-text); font-size: var(--ms-dn1); font-weight: 600; letter-spacing: 0.04em; color: var(--ink); position: relative; padding-block: var(--space-2); transition: color var(--dur-element); }
.nav-desktop a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--sun); transition: width var(--dur-element) var(--ease-standard); }
.nav-desktop a:hover { color: var(--sun-deep); }
.nav-desktop a:hover::after { width: 100%; }
.nav-desktop a[aria-current="page"]::after { width: 100%; }
.nav-desktop a[aria-current="page"] { color: var(--sun-deep); }
.header-cta { display: none; }
.nav-toggle { display: inline-flex; flex-direction: column; gap: 5px; padding: var(--space-2); min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
.nav-toggle span { width: 26px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform var(--dur-element) var(--ease-standard), opacity var(--dur-element), background var(--dur-element); }
.nav-toggle[aria-expanded="true"] span { background: #fff; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-nav { position: fixed; inset: 0; z-index: 90; background: var(--navy-900); display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity var(--dur-section) var(--ease-standard); }
.mobile-nav.open { opacity: 1; pointer-events: auto; }
.mobile-nav nav { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); text-align: center; }
.mobile-nav a { font-family: var(--font-display); font-size: var(--ms-3); color: #fff; }
.mobile-nav a.btn { font-family: var(--font-text); font-size: var(--ms-0); margin-top: var(--space-3); color: #fff; }

/* ---- FOOTER ---- */
.site-footer { position: relative; z-index: 2; background: var(--navy-900); color: #fff; padding-block: var(--space-8) var(--space-5); }
.site-footer::before { content: ""; display: block; height: 3px; background: linear-gradient(90deg, transparent, var(--sun), transparent); position: absolute; top: 0; left: 0; right: 0; }
.footer-inner { display: grid; gap: var(--space-7); text-align: center; justify-items: center; }
.footer-brand { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; }
.footer-brand img { width: 56px; height: 56px; object-fit: contain; }
.footer-tag { font-family: var(--font-display); font-style: italic; font-size: var(--ms-1); color: #fff; }
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); }
.footer-nav a { font-size: var(--ms-dn1); letter-spacing: 0.04em; color: color-mix(in srgb, #fff 72%, transparent); display: inline-block; padding-block: var(--space-1); }
.footer-nav a:hover { color: var(--sun); }
.footer-contact { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-5); }
.footer-contact a, .footer-contact span { font-size: var(--ms-dn1); color: color-mix(in srgb, #fff 72%, transparent); }
.footer-contact a:hover { color: var(--sun); }
.footer-base { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid color-mix(in srgb, #fff 16%, transparent); display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.footer-base .caption { color: color-mix(in srgb, #fff 64%, transparent); }
.gray-credit a { color: var(--sun); font-weight: 600; }

/* ---- INSTALL CARD ---- */
.install-card[hidden] { display: none; }
.install-card { position: fixed; left: var(--space-4); right: var(--space-4); bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); z-index: 150; display: flex; align-items: center; gap: var(--space-3); max-width: 420px; margin-inline: auto; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--space-3) var(--space-4); box-shadow: var(--e4); }
.install-card img { border-radius: var(--r-sm); }
.install-text { display: flex; flex-direction: column; flex-grow: 1; text-align: left; }
.install-text strong { font-size: var(--ms-dn1); }
.install-text span { font-size: var(--ms-dn2); color: var(--ink-muted); }
.install-btn { min-height: 40px; padding: var(--space-2) var(--space-4); font-size: var(--ms-dn1); }
.install-close { font-size: var(--ms-2); color: var(--ink-muted); padding: var(--space-1) var(--space-2); }

/* ============================================================
   v3 LOADER — the line draws, then lifts to reveal the day
   ============================================================ */
.v3-loader { position: fixed; inset: 0; z-index: 400; background: var(--sky-0); display: grid; place-items: center; transition: opacity 700ms var(--ease-expressive), visibility 700ms; }
.v3-loader.done { opacity: 0; visibility: hidden; pointer-events: none; }
.v3-loader-mark { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); }
.v3-loader-mark img { width: 64px; height: auto; opacity: .9; }
.v3-loader-line { width: min(60vw, 320px); height: 2px; background: var(--line); position: relative; overflow: hidden; border-radius: var(--r-pill); }
.v3-loader-line::after { content: ""; position: absolute; inset: 0; width: 0; background: var(--sun); animation: loader-line 1100ms var(--ease-expressive) forwards; border-radius: var(--r-pill); }
@keyframes loader-line { to { width: 100%; } }
.v3-loader-word { font-family: var(--font-text); font-size: var(--ms-dn1); letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-muted); }
@media (prefers-reduced-motion: reduce) { .v3-loader { display: none; } }

/* ============================================================
   v3 HOME — HERO (kinetic daylight masthead, the line begins)
   ============================================================ */
.v3-hero { position: relative; min-height: 100svh; display: grid; align-items: center; text-align: center; padding-block: clamp(7rem, 6rem + 6vw, 11rem) var(--space-9); overflow: clip; }
/* living daylight: two soft blue/orange auras drift behind the type */
.v3-hero::before {
  content: ""; position: absolute; inset: -15%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(36% 30% at 22% 26%, color-mix(in srgb, var(--sun) 12%, transparent), transparent 70%),
    radial-gradient(44% 38% at 82% 20%, color-mix(in srgb, var(--sky-5) 80%, transparent), transparent 72%);
  filter: blur(10px);
  animation: hero-drift 24s ease-in-out infinite alternate;
}
@keyframes hero-drift { to { transform: translate3d(-2%, 2%, 0) scale(1.07); } }
@media (prefers-reduced-motion: reduce) { .v3-hero::before { animation: none; } }
.v3-hero-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; width: 100%; }
.v3-hero-crest { width: clamp(74px, 9vw, 100px); height: auto; margin-bottom: var(--space-5); filter: drop-shadow(0 16px 30px color-mix(in srgb, var(--navy-900) 22%, transparent)); }
.v3-deed { font-family: var(--font-text); font-size: var(--ms-dn1); font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--sun-deep); margin-bottom: var(--space-5); }
.v3-masthead { font-family: var(--font-display); color: var(--ink); font-weight: 500; line-height: 0.96; letter-spacing: -0.02em; font-size: clamp(3.6rem, 1.4rem + 10vw, 8.5rem); }
.v3-masthead .ln { display: block; }
.v3-masthead .it { font-style: italic; font-weight: 500; color: var(--sun); }
/* the underline that IS the line — draws under the question */
.v3-mast-rule { height: 3px; width: min(60%, 22rem); background: linear-gradient(90deg, var(--sun), var(--marigold)); margin: var(--space-6) auto var(--space-2); border-radius: var(--r-pill); transform-origin: center; }
.js .v3-mast-rule { animation: rule-draw 900ms var(--ease-expressive) 980ms backwards; }
@keyframes rule-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .js .v3-mast-rule { animation: none; } }
.v3-hero-sub { max-width: 42ch; margin: var(--space-5) auto var(--space-7); font-size: var(--ms-1); line-height: 1.5; color: var(--ink-muted); font-weight: 380; }
.v3-hero-ctas { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; align-items: center; }
.v3-scrollcue { position: absolute; left: 50%; bottom: var(--space-6); transform: translateX(-50%); width: 1px; height: var(--space-8); background: linear-gradient(var(--ink-muted), transparent); overflow: hidden; opacity: .5; z-index: 2; }
.v3-scrollcue span { position: absolute; top: 0; left: 0; width: 100%; height: 40%; background: var(--sun); animation: cue 2.2s var(--ease-expressive) infinite; }
@keyframes cue { 0% { transform: translateY(-100%);} 60%,100% { transform: translateY(250%);} }
@media (prefers-reduced-motion: reduce) { .v3-scrollcue span { animation: none; } }

/* split-text words rise on load — PURE CSS so it can never get stuck if JS
   fails. Stagger via nth-child; reduced-motion shows them instantly. */
.split-line { display: block; overflow: hidden; padding-block: 0.06em; }
.split-word { display: inline-block; }
.js .split-word { animation: word-rise 820ms var(--ease-expressive) backwards; }
@keyframes word-rise { from { transform: translateY(112%); opacity: 0; } to { transform: none; opacity: 1; } }
.split-line:nth-of-type(1) .split-word:nth-child(1) { animation-delay: 360ms; }
.split-line:nth-of-type(1) .split-word:nth-child(2) { animation-delay: 440ms; }
.split-line:nth-of-type(1) .split-word:nth-child(3) { animation-delay: 520ms; }
.split-line:nth-of-type(2) .split-word:nth-child(1) { animation-delay: 640ms; }
.split-line:nth-of-type(2) .split-word:nth-child(2) { animation-delay: 720ms; }
.split-line:nth-of-type(2) .split-word:nth-child(3) { animation-delay: 800ms; }
.split-line:nth-of-type(2) .split-word:nth-child(4) { animation-delay: 880ms; }
@media (prefers-reduced-motion: reduce) { .js .split-word { animation: none; } }

/* ============================================================
   v3 SIGNATURE — THE PLOT (pinned, scrubbed line of Lee's years)
   ============================================================ */
.plot-stage { position: relative; z-index: 2; height: 360vh; }
@media (max-width: 48rem) { .plot-stage { height: 300vh; } }
.plot-pin { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.plot-head { text-align: center; padding: clamp(5rem, 4rem + 4vw, 7rem) var(--edge) 0; position: relative; z-index: 3; }
.plot-head .eyebrow { margin-bottom: var(--space-4); justify-content: center; }
.plot-head h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(2rem, 1.2rem + 3.4vw, 3.4rem); color: var(--ink); line-height: 1.05; }
.plot-canvas-wrap { position: relative; }
.plot-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* the milestone data: a clean fallback list with no JS; sr-only once JS draws it on canvas */
.plot-legend { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); max-width: 34rem; margin: var(--space-7) auto 0; text-align: center; padding-inline: var(--edge); }
.plot-legend li { font-family: var(--font-text); font-size: var(--ms-dn1); color: var(--ink-muted); line-height: 1.4; }
.plot-legend b { font-family: var(--font-display); color: var(--ink); margin-right: var(--space-2); }
.plot-legend span { color: var(--sun-deep); font-weight: 600; }
.js .plot-legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0; }
/* the resolve card that lands when the line completes */
.plot-resolve { position: absolute; left: 50%; bottom: clamp(2.5rem, 2rem + 4vw, 6rem); transform: translate(-50%, 16px); width: min(92%, 40rem); text-align: center; z-index: 4; opacity: 0; pointer-events: none; }
.plot-resolve-eyebrow { font-family: var(--font-text); font-size: var(--ms-dn1); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sun-deep); margin-bottom: var(--space-3); }
.plot-resolve-line { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.7rem, 1rem + 3.2vw, 3rem); line-height: 1.12; color: var(--ink); }
.plot-resolve-line em { font-style: italic; color: var(--sun); }

/* ============================================================
   v3 THE WORLD — one cinematic pinned act: hero, then a 3D flight
   along Lee's line, then the resolve. WebGL when able, 2D canvas
   fallback otherwise, readable static stack with no JS.
   ============================================================ */
.world { position: relative; z-index: 2; }
.world-pin { position: relative; }
.world-canvas, .plot-canvas { display: none; }
/* every text layer carries a soft daylight scrim so it ALWAYS wins over the
   scene behind it — this is the fix for text colliding with the graph */
.w-layer { position: relative; z-index: 3; text-align: center; padding-block: var(--space-8); padding-inline: var(--edge); }
.w-layer > .shell, .w-layer > .v3-hero-inner { position: relative; z-index: 1; }
.w-flight-head .eyebrow { justify-content: center; margin-bottom: var(--space-4); }
.w-flight-head h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(2rem, 1.2rem + 3.4vw, 3.4rem); color: var(--ink); line-height: 1.05; max-width: 22ch; margin-inline: auto; }
.w-resolve .btn { margin-top: var(--space-7); }
.plot-resolve-eyebrow { font-family: var(--font-text); font-size: var(--ms-dn1); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sun-deep); margin-bottom: var(--space-4); }
.plot-resolve-line { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.7rem, 1rem + 3.2vw, 3.1rem); line-height: 1.12; color: var(--ink); }
.plot-resolve-line em { font-style: italic; color: var(--sun); }

/* JS, capable: become a tall pinned stage with stacked overlay layers + a canvas */
.js .world { height: 540vh; }
@media (max-width: 48rem) { .js .world { height: 460vh; } }
.js .world-pin { position: sticky; top: 0; height: 100svh; overflow: hidden; display: block; }
.js .world-pin .world-canvas, .js .world-pin .plot-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.js .w-layer { position: absolute; inset: 0; z-index: 3; display: grid; align-content: center; justify-items: center; pointer-events: none; will-change: opacity, transform; }
.js .w-flight { align-content: start; padding-top: clamp(5.5rem, 4rem + 6vw, 9rem); }
.js .w-resolve { opacity: 0; }
.js .w-flight { opacity: 0; }
.js .w-layer a, .js .w-layer .btn { pointer-events: auto; }
/* the scrim — radial daylight behind hero/resolve, a band behind the flight head */
.js .w-hero::before, .js .w-resolve::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(62% 52% at 50% 50%, color-mix(in srgb, var(--sky-1) 86%, transparent) 0%, color-mix(in srgb, var(--sky-1) 40%, transparent) 55%, transparent 78%);
}
.js .w-flight .w-flight-head::before {
  content: ""; position: absolute; inset: -14% -30%; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 100% at 50% 30%, color-mix(in srgb, var(--sky-1) 80%, transparent), transparent 70%);
}
.js .w-flight-head { position: relative; }
.js body.webgl .v3-hero-crest { display: none; } /* the crest lives in 3D space on the WebGL path */

/* ============================================================
   v3 SECTION RHYTHM + the repeating line motif
   ============================================================ */
.v3-section { position: relative; z-index: 2; padding-block: var(--section-y); }
.v3-section .section-head { margin-bottom: var(--space-8); }
/* the line motif repeats as a centered divider between chapters */
.line-rule { width: var(--space-8); height: 3px; background: var(--sun); border-radius: var(--r-pill); margin: 0 auto var(--space-6); }

/* ---- OPERATOR (the difference) ---- */
.operator-grid { display: grid; gap: var(--space-8); align-items: center; }
.operator-portrait { position: relative; max-width: 30rem; margin-inline: auto; width: 100%; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--e3); }
.operator-portrait img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: top center; display: block; }
.operator-portrait::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--navy-900) 8%, transparent); border-radius: var(--r-lg); pointer-events: none; }
.operator-copy { text-align: center; }
.operator-copy .eyebrow { margin-bottom: var(--space-4); justify-content: center; }
.operator-copy .h2 { margin-bottom: var(--space-5); }
.operator-copy .lead { margin-bottom: var(--space-4); margin-inline: auto; max-width: 52ch; }
.operator-copy .body { margin-bottom: var(--space-6); margin-inline: auto; max-width: 54ch; }
.operator-copy .cta-ghost { margin-inline: auto; }

/* ---- THREE PATHS (triptych of strata, not cards) ---- */
.paths { position: relative; z-index: 2; padding-block: var(--section-y); }
.paths-list { display: grid; gap: 0; margin-top: var(--space-7); border-top: 1px solid var(--line); }
.path { border-bottom: 1px solid var(--line); position: relative; }
.path-link { display: block; text-align: center; padding: var(--space-8) var(--edge); position: relative; transition: background var(--dur-section) var(--ease-standard); }
.path-link::before { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; width: 0; margin-inline: auto; background: linear-gradient(90deg, var(--sun), var(--marigold)); transition: width var(--dur-section) var(--ease-expressive); border-radius: var(--r-pill); }
.path-link:hover { background: color-mix(in srgb, var(--sun) 5%, transparent); }
.path-link:hover::before { width: min(70%, 22rem); }
.path-said { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(1.6rem, 1rem + 2.6vw, 2.7rem); color: var(--ink); line-height: 1.06; }
.path-do { display: block; font-family: var(--font-text); font-size: var(--ms-dn1); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sun-deep); margin-top: var(--space-4); }
.path-note { display: block; font-size: var(--ms-0); color: var(--ink-muted); max-width: 54ch; margin: var(--space-3) auto 0; }
.path-go { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4); font-family: var(--font-text); font-size: var(--ms-dn1); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sun-deep); }
.path-link:hover .path-go .arrow { transform: translateX(5px); }
.path-go .arrow { transition: transform var(--dur-element) var(--ease-standard); }
@media (min-width: 64rem) {
  .paths-list { grid-template-columns: repeat(3, 1fr); border-top: none; }
  .path { border-bottom: none; border-left: 1px solid var(--line); }
  .path:first-child { border-left: none; }
  .path-link { padding-block: var(--space-7); height: 100%; }
}

/* ---- DOSSIER (confidentiality, a light paper document) ---- */
.dossier-grid { display: grid; gap: var(--space-8); align-items: center; }
.dossier-copy { text-align: center; }
.dossier-copy .eyebrow { margin-bottom: var(--space-4); justify-content: center; }
.dossier-copy .h2 { margin-bottom: var(--space-5); }
.dossier-copy .lead { margin-bottom: var(--space-4); margin-inline: auto; max-width: 52ch; }
.dossier-copy .body { margin-inline: auto; max-width: 52ch; }
.dossier-copy .cta-ghost { margin-top: var(--space-6); margin-inline: auto; }
.dossier { background: #fff; color: var(--ink); padding: var(--space-6); border-radius: var(--r-md); max-width: 30rem; margin-inline: auto; width: 100%; box-shadow: var(--e3); position: relative; overflow: hidden; transition: transform var(--dur-section) var(--ease-standard), box-shadow var(--dur-section); }
.dossier:hover { transform: translateY(-4px); box-shadow: var(--e4); }
.dossier-head { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-text); font-size: var(--ms-dn1); font-weight: 700; letter-spacing: 0.14em; color: var(--sun-deep); padding-bottom: var(--space-3); border-bottom: 1.5px solid var(--navy-900); }
.dossier-head .ds-no { letter-spacing: 0; color: var(--neutral-500); font-weight: 500; }
.dossier-rows { display: flex; flex-direction: column; }
.dossier-rows > div { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid color-mix(in srgb, var(--navy-900) 10%, transparent); min-width: 0; }
.dossier-rows dt { font-family: var(--font-text); font-size: var(--ms-dn1); letter-spacing: 0.04em; text-transform: uppercase; color: var(--neutral-500); }
.dossier-rows dd { font-family: var(--font-display); font-size: var(--ms-1); color: var(--ink); }
.dossier-rows dd.redact { position: relative; color: var(--ink); user-select: none; overflow-wrap: anywhere; }
.dossier-rows dd.redact::after { content: ""; position: absolute; inset: -1px -3px; border-radius: 2px; background: var(--navy-900); clip-path: inset(0 0 0 0); transition: clip-path var(--dur-reveal) var(--ease-expressive); }
.dossier.is-revealing dd.redact::after { clip-path: inset(0 0 0 100%); }
.dossier.is-revealing .dossier-rows > div:nth-child(3) .redact::after { transition-delay: var(--stagger); }
.dossier.is-revealing .dossier-rows > div:nth-child(4) .redact::after { transition-delay: calc(var(--stagger) * 2); }
.dossier.is-revealing .dossier-rows > div:nth-child(5) .redact::after { transition-delay: calc(var(--stagger) * 3); }
.dossier.is-revealing .dossier-rows > div:nth-child(6) .redact::after { transition-delay: calc(var(--stagger) * 4); }
.dossier-rows dd.ds-live { font-family: var(--font-text); font-size: var(--ms-dn1); font-weight: 700; color: var(--ok); letter-spacing: 0.02em; }
.dossier-foot { margin-top: var(--space-4); font-size: var(--ms-dn1); color: var(--neutral-500); font-style: italic; }

/* ---- PROOF (numbers resolving on the line) ---- */
.proof { position: relative; z-index: 4; padding-block: var(--space-9); background: #fff; border-block: 1px solid var(--line); }
.proof-inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; }
.proof-stat { flex: 1 1 0; min-width: 200px; text-align: center; padding: var(--space-6) var(--space-5); position: relative; }
.proof-stat + .proof-stat::before { content: ""; position: absolute; left: 0; top: 22%; height: 56%; width: 1px; background: var(--line); }
.proof-num { display: block; font-family: var(--font-display); font-variant-numeric: tabular-nums lining-nums; font-size: clamp(2.6rem, 1.4rem + 3.8vw, 4.2rem); font-weight: 500; line-height: 1; color: var(--ink); letter-spacing: -0.02em; }
.proof-num .u { color: var(--sun); }
.proof-label { margin-top: var(--space-3); font-size: var(--ms-dn1); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
@media (max-width: 47.99rem) {
  .proof-stat + .proof-stat::before { display: none; }
  .proof-stat { padding-block: var(--space-5); }
  .proof-stat + .proof-stat { border-top: 1px solid var(--line); }
}

/* ============================================================
   CONTACT (shared: home invite + /contact/ page) — light form
   ============================================================ */
.invite { position: relative; z-index: 2; padding-block: var(--section-y); }
.contact-grid { display: grid; gap: var(--space-8); align-items: start; }
.contact-intro { text-align: center; }
.contact-intro .eyebrow { margin-bottom: var(--space-4); justify-content: center; }
.contact-intro .h2 { margin-bottom: var(--space-5); line-height: 1.04; }
.contact-intro .lead { margin-inline: auto; max-width: 46ch; }
.contact-sign { margin-top: var(--space-6); font-family: var(--font-display); font-style: italic; font-size: var(--ms-2); color: var(--sun); }
.contact-form { display: flex; flex-direction: column; gap: var(--space-4); background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--space-6); position: relative; overflow: hidden; box-shadow: var(--e2); padding-top: var(--space-7); }
.contact-form::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--marigold), var(--sun) 55%, var(--rust)); }
.form-head { display: flex; align-items: center; gap: var(--space-3); padding-bottom: var(--space-5); margin-bottom: var(--space-3); border-bottom: 1px solid var(--line); }
.form-head img { width: 44px; height: auto; flex-shrink: 0; }
.form-kicker { font-family: var(--font-text); font-size: var(--ms-dn2); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sun-deep); }
.form-title { font-family: var(--font-display); font-size: var(--ms-1); color: var(--ink); line-height: 1.1; }
.field-row { display: grid; gap: var(--space-4); }
.field { display: flex; flex-direction: column; gap: var(--space-2); text-align: left; }
.field label { font-size: var(--ms-dn1); font-weight: 600; letter-spacing: 0.02em; color: var(--ink); }
.field input, .field select, .field textarea { font-family: var(--font-text); font-size: var(--ms-0); color: var(--ink); background: var(--sky-1); border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--space-3) var(--space-4); min-height: 52px; width: 100%; transition: border-color var(--dur-element), background var(--dur-element), box-shadow var(--dur-element); }
.field textarea { min-height: 112px; resize: vertical; }
.field select { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23C75F18' d='M6 8 0 0h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-4) center; padding-right: var(--space-7); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--sun); background: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--sun) 20%, transparent); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-submit { margin-top: var(--space-2); width: 100%; }
.form-status { font-size: var(--ms-dn1); min-height: 1.2em; text-align: center; }
.form-status.ok { color: var(--ok); }
.form-status.err { color: var(--err); }
.form-lock { display: inline-flex; align-items: center; gap: var(--space-2); justify-content: center; font-size: var(--ms-dn1); color: var(--ink-muted); margin-top: var(--space-1); }
.form-lock svg { width: 13px; height: 13px; fill: var(--sun); }
.cf-turnstile { margin-top: var(--space-1); min-height: 65px; }
.form-success { display: none; flex-direction: column; align-items: center; text-align: center; gap: var(--space-4); padding: var(--space-7) var(--space-4); }
.contact-form.sent .field, .contact-form.sent .field-row, .contact-form.sent .form-submit, .contact-form.sent .form-lock, .contact-form.sent .form-status, .contact-form.sent .form-head { display: none; }
.contact-form.sent .form-success { display: flex; animation: rise 700ms var(--ease-expressive); }
.form-success img { width: 72px; height: auto; }
.form-success h3 { font-family: var(--font-display); font-size: var(--ms-2); color: var(--ink); }
.form-success p { color: var(--ink-muted); max-width: 30ch; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ============================================================
   RESPONSIVE — home + chrome
   ============================================================ */
@media (min-width: 48rem) {
  .field-row { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 64rem) {
  .nav-desktop { display: flex; }
  .header-cta { display: inline-flex; }
  .nav-toggle { display: none; }
  .footer-inner { grid-template-columns: 1fr auto 1fr; align-items: center; text-align: left; justify-items: start; }
  .footer-contact { justify-content: flex-end; }
  .footer-base { flex-direction: row; justify-content: space-between; }
  .operator-grid { grid-template-columns: 0.9fr 1.1fr; gap: var(--space-10); }
  .operator-copy { text-align: center; }
  .operator-portrait { margin: 0; }
  .dossier-grid { grid-template-columns: 1.05fr 0.95fr; }
  .contact-grid { grid-template-columns: 0.95fr 1.05fr; }
}

/* ============================================================
   INNER PAGES — re-lit shared components (daylight)
   body.page-inner uses these; header is light from the top.
   ============================================================ */
.page-inner main { background: var(--page-grad); background-attachment: fixed; }

/* inner page hero — light, editorial, the line motif under the title */
.page-hero {
  position: relative; z-index: 2;
  background: linear-gradient(180deg, var(--sky-0) 0%, var(--sky-2) 100%);
  padding-block: clamp(7rem, 6rem + 5vw, 11rem) clamp(3.5rem, 2.5rem + 3vw, 6rem);
  text-align: center; border-bottom: 1px solid var(--line); overflow: hidden;
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 56% at 50% -8%, color-mix(in srgb, var(--sun) 9%, transparent), transparent 70%);
}
.page-hero .shell { position: relative; z-index: 1; }
.page-hero .eyebrow { margin-bottom: var(--space-5); justify-content: center; }
.page-hero-title { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.6rem, 1.6rem + 4.2vw, 5rem); line-height: 1.03; letter-spacing: -0.015em; color: var(--ink); text-wrap: balance; margin-bottom: var(--space-5); }
.page-hero-title em { font-style: italic; color: var(--sun); font-weight: 500; }
.page-hero-sub { max-width: 46ch; margin-inline: auto; font-size: var(--ms-1); line-height: 1.5; color: var(--ink-muted); text-wrap: pretty; margin-bottom: var(--space-7); }
.page-hero-ctas { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; align-items: center; }
/* the line motif appears under every interior hero */
.page-hero .shell::after { content: ""; display: block; width: var(--space-8); height: 3px; background: var(--sun); border-radius: var(--r-pill); margin: var(--space-7) auto 0; }
/* the old per-page dark motifs collapse to clean daylight (kept as no-ops) */
.page-hero--ledger::after, .page-hero--gauge::after, .page-hero--rings::after { content: none; }

.page-section { position: relative; z-index: 2; padding-block: var(--section-y); text-align: center; }
.page-section + .page-section { border-top: 1px solid var(--line); }
.page-section .section-head { margin-bottom: var(--space-9); text-align: center; }
.page-section .lead, .page-section .body, .page-section .subhead { margin-inline: auto; }
.page-inner .article-body, .page-inner .article-body * { text-align: left; }

/* difference (some inner pages reuse) */
.difference { position: relative; z-index: 2; padding-block: var(--section-y); }
.difference-inner { display: grid; gap: var(--space-8); align-items: center; }
.difference-copy { text-align: center; }
.difference-copy .eyebrow { margin-bottom: var(--space-4); justify-content: center; }
.difference-copy .h2 { margin-bottom: var(--space-5); }
.difference-copy .lead, .difference-copy .body { margin-bottom: var(--space-5); margin-inline: auto; max-width: 54ch; }
.difference-portrait { max-width: 28rem; margin-inline: auto; overflow: hidden; border-radius: var(--r-lg); box-shadow: var(--e3); }
.difference-portrait img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: top; }
@media (min-width: 64rem) {
  .difference-inner { grid-template-columns: 0.85fr 1.15fr; gap: var(--space-10); }
  .difference-portrait { margin: 0; }
}

/* proof bar (inner) reuses .proof styles via .proof-bar alias */
.proof-bar { position: relative; z-index: 4; background: #fff; border-block: 1px solid var(--line); }
.proof-bar-inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; }

/* home CTA band */
.home-cta-band { position: relative; z-index: 2; padding-block: var(--section-y); text-align: center; }
.home-cta-band .eyebrow { margin-bottom: var(--space-5); justify-content: center; }
.home-cta-band .h2 { margin-bottom: var(--space-4); }
.home-cta-band .lead { margin-bottom: var(--space-7); max-width: 46ch; margin-inline: auto; }
.home-cta-band .cta-group { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; }

/* PROCESS STEPS (sell/buy) — daylight, no 01/02/03 (a dot marker) */
.process-steps { display: flex; flex-direction: column; gap: 0; max-width: 52rem; margin-inline: auto; }
.step { display: grid; grid-template-columns: 1fr; justify-items: center; text-align: center; gap: var(--space-2); padding: var(--space-7) 0; border-bottom: 1px solid var(--line); }
.step:first-child { border-top: 1px solid var(--line); }
.step-num { width: 10px; height: 10px; min-width: 0; padding: 0; margin: 0 auto var(--space-3); background: var(--sun); border-radius: var(--r-full); font-size: 0; line-height: 0; box-shadow: 0 0 0 5px color-mix(in srgb, var(--sun) 16%, transparent); }
.step-title { font-family: var(--font-display); font-size: var(--ms-2); color: var(--ink); line-height: 1.14; margin-bottom: var(--space-3); }
.step-desc { color: var(--ink-muted); max-width: 56ch; line-height: 1.6; margin-inline: auto; }
.step-tag { display: inline-block; margin-top: var(--space-3); font-family: var(--font-text); font-size: var(--ms-dn2); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sun-deep); }
.js .step.reveal { opacity: 0; transform: translateY(18px); }
.step.reveal.is-in { opacity: 1; transform: none; transition: opacity var(--dur-reveal) var(--ease-expressive), transform var(--dur-reveal) var(--ease-expressive); }
.step:nth-child(2).reveal.is-in { transition-delay: var(--stagger); }
.step:nth-child(3).reveal.is-in { transition-delay: calc(var(--stagger) * 2); }
.step:nth-child(4).reveal.is-in { transition-delay: calc(var(--stagger) * 3); }
.step:nth-child(5).reveal.is-in { transition-delay: calc(var(--stagger) * 4); }
.step:nth-child(6).reveal.is-in { transition-delay: calc(var(--stagger) * 5); }

/* VALUE-DRIVER TOOL (valuation) — light */
.vdtool { max-width: 46rem; margin: 0 auto var(--space-9); padding: var(--space-7) var(--space-6); background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); position: relative; overflow: hidden; box-shadow: var(--e2); }
@media (max-width: 30rem) { .vdtool { padding-inline: var(--space-4); } }
.vdtool::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--rust), var(--sun) 50%, var(--marigold)); }
.vdtool-q { font-family: var(--font-display); font-size: var(--ms-2); color: var(--ink); text-align: center; line-height: 1.16; margin-bottom: var(--space-6); text-wrap: balance; }
.vdtool-toggles { display: flex; flex-direction: column; gap: var(--space-3); max-width: 34rem; margin: 0 auto var(--space-7); }
.vdtoggle { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; text-align: center; font-family: var(--font-text); font-size: var(--ms-0); color: var(--ink-muted); padding: var(--space-3) 2.75rem; min-height: 52px; background: var(--sky-1); border: 1px solid var(--line); border-radius: var(--r-sm); transition: border-color var(--dur-element) var(--ease-standard), color var(--dur-element), background var(--dur-element); }
.vdtoggle-dot { flex-shrink: 0; width: 20px; height: 20px; border-radius: var(--r-full); border: 2px solid var(--neutral-300); position: absolute; left: var(--space-4); top: 50%; transform: translateY(-50%); transition: border-color var(--dur-element) var(--ease-standard), background var(--dur-element); }
.vdtoggle-dot::after { content: ""; position: absolute; inset: 3px; border-radius: var(--r-full); background: var(--sun); transform: scale(0); transition: transform var(--dur-element) var(--ease-expressive); }
.vdtoggle[aria-pressed="true"] { color: var(--ink); border-color: color-mix(in srgb, var(--sun) 55%, transparent); background: color-mix(in srgb, var(--sun) 7%, transparent); }
.vdtoggle[aria-pressed="true"] .vdtoggle-dot { border-color: var(--sun); }
.vdtoggle[aria-pressed="true"] .vdtoggle-dot::after { transform: scale(1); }
.vdtoggle:hover { border-color: color-mix(in srgb, var(--sun) 60%, transparent); }
.vdtool-readout { max-width: 34rem; margin: 0 auto; }
.vdtool-track { position: relative; height: 10px; background: var(--neutral-100); border-radius: var(--r-pill); }
.vdtool-fill { height: 100%; width: 62%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--sun-deep), var(--marigold)); transition: width var(--dur-cinematic) var(--ease-expressive); }
.vdtool-tick { position: absolute; top: -4px; width: 2px; height: 18px; background: var(--neutral-300); transform: translateX(-50%); }
.vdtool-scale { display: flex; justify-content: space-between; margin-top: var(--space-3); font-size: var(--ms-dn2); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }
.vdtool-label { text-align: center; font-family: var(--font-display); font-size: var(--ms-2); margin-top: var(--space-5); color: var(--sun-deep); transition: color var(--dur-section) var(--ease-standard); }
.vdtool[data-band="low"] .vdtool-label { color: var(--rust); }
.vdtool[data-band="high"] .vdtool-label { color: var(--sun); }
.vdtool-fine { text-align: center; font-size: var(--ms-dn1); color: var(--ink-muted); line-height: 1.5; margin-top: var(--space-3); max-width: 40ch; margin-inline: auto; }
.vdtool-fine a { color: var(--sun-deep); font-weight: 600; white-space: nowrap; }

.drivers { display: flex; flex-direction: column; gap: var(--space-6); max-width: 46rem; margin-inline: auto; }
.driver { display: flex; flex-direction: column; gap: var(--space-3); }
.driver-label { display: flex; justify-content: center; gap: var(--space-4); align-items: baseline; }
.driver-name { font-family: var(--font-display); font-size: var(--ms-1); color: var(--ink); }
.driver-weight { font-family: var(--font-text); font-size: var(--ms-dn1); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sun-deep); }
.driver-track { height: 6px; background: var(--neutral-100); border-radius: var(--r-pill); overflow: hidden; }
.driver-fill { height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--sun-deep), var(--marigold)); transition: width 1200ms var(--ease-expressive); }
.driver-note { font-size: var(--ms-dn1); color: var(--ink-muted); line-height: 1.5; text-align: center; margin-inline: auto; }

/* LENS checklist (buy) — light */
.lens-list { display: flex; flex-direction: column; max-width: 52rem; margin-inline: auto; }
.lens-item { display: grid; grid-template-columns: 1fr; justify-items: center; text-align: center; gap: var(--space-3); padding: var(--space-6) 0; border-bottom: 1px solid var(--line); }
.lens-item:first-child { border-top: 1px solid var(--line); }
.lens-icon { width: 30px; height: 30px; border-radius: var(--r-full); background: color-mix(in srgb, var(--sun) 14%, transparent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lens-icon svg { width: 15px; height: 15px; stroke: var(--sun-deep); fill: none; }
.lens-title { font-family: var(--font-display); font-size: var(--ms-1); color: var(--ink); margin-bottom: var(--space-2); line-height: 1.2; }
.lens-note { color: var(--ink-muted); font-size: var(--ms-0); line-height: 1.6; max-width: 58ch; margin-inline: auto; }

/* LISTING cards — light, soft elevation */
.listing-grid { display: grid; gap: var(--space-5); }
.listing-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--space-6); position: relative; overflow: hidden; box-shadow: var(--e1); transition: border-color var(--dur-element), transform var(--dur-element) var(--ease-standard), box-shadow var(--dur-element); text-align: center; }
.listing-card:hover { border-color: color-mix(in srgb, var(--sun) 40%, transparent); transform: translateY(-3px); box-shadow: var(--e3); }
.listing-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--marigold), var(--sun)); }
.listing-badge { display: inline-flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); font-family: var(--font-text); font-size: var(--ms-dn2); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sun-deep); }
.listing-badge::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: var(--r-full); background: var(--sun); }
.listing-industry { font-family: var(--font-display); font-size: var(--ms-2); color: var(--ink); line-height: 1.1; margin-bottom: var(--space-4); }
.listing-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-5); margin-bottom: var(--space-5); }
.listing-meta-item { display: flex; flex-direction: column; gap: 2px; }
.listing-meta-label { font-size: var(--ms-dn2); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }
.listing-meta-value { font-family: var(--font-display); font-size: var(--ms-1); color: var(--ink); }
.listing-meta-value.redact { background: var(--navy-900); color: transparent; border-radius: 2px; user-select: none; overflow-wrap: anywhere; }
.listing-cta { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-text); font-size: var(--ms-dn1); font-weight: 600; letter-spacing: 0.06em; color: var(--sun-deep); border-bottom: 1px solid var(--sun); padding-bottom: 2px; transition: gap var(--dur-element); }
.listing-cta:hover { gap: var(--space-3); }

/* CAREER timeline (about) — light, centered, the line as spine */
.career-timeline { position: relative; max-width: 50rem; margin-inline: auto; }
.career-timeline::before { display: none; }
.career-node { position: relative; padding-bottom: var(--space-9); padding-top: var(--space-8); text-align: center; }
.career-node:first-child { padding-top: var(--space-2); }
.career-node:last-child { padding-bottom: 0; }
.career-node::before { content: ""; position: absolute; left: 50%; transform: translateX(-50%); top: 0; width: 11px; height: 11px; border-radius: var(--r-full); background: var(--sun); box-shadow: 0 0 0 5px color-mix(in srgb, var(--sun) 16%, transparent); }
.career-node.highlight::before { background: var(--sun-deep); width: 15px; height: 15px; top: -2px; }
.career-year { font-family: var(--font-text); font-size: var(--ms-dn1); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sun-deep); margin-top: var(--space-3); margin-bottom: var(--space-2); }
.career-role { font-family: var(--font-display); font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.6rem); color: var(--ink); line-height: 1.08; margin-bottom: var(--space-2); }
.career-company { font-family: var(--font-text); font-size: var(--ms-dn1); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--space-5); }
.career-detail { color: var(--ink-muted); max-width: 48ch; line-height: 1.65; margin-inline: auto; }
.career-stat { display: inline-block; margin-top: var(--space-5); font-family: var(--font-display); font-size: var(--ms-2); color: var(--sun); font-style: italic; }

/* ARTICLE / RESOURCE — light reading */
.article-body { max-width: var(--measure); margin-inline: auto; text-align: left; }
.article-body h2 { font-family: var(--font-display); font-size: var(--ms-3); color: var(--ink); margin: var(--space-8) 0 var(--space-4); line-height: 1.1; }
.article-body h3 { font-family: var(--font-display); font-size: var(--ms-2); color: var(--ink); margin: var(--space-6) 0 var(--space-3); }
.article-body p { color: var(--ink-muted); line-height: 1.75; margin-bottom: var(--space-4); }
.article-body p:first-of-type { font-size: var(--ms-1); color: var(--ink); }
.article-body ul, .article-body ol { color: var(--ink-muted); line-height: 1.75; margin-bottom: var(--space-4); padding-left: var(--space-6); }
.article-body li { margin-bottom: var(--space-2); }
.article-body blockquote { border-left: 3px solid var(--sun); padding-left: var(--space-5); margin: var(--space-7) 0; font-family: var(--font-display); font-size: var(--ms-2); font-style: italic; color: var(--ink); line-height: 1.3; }
.article-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--space-6); box-shadow: var(--e1); transition: border-color var(--dur-element), transform var(--dur-element) var(--ease-standard), box-shadow var(--dur-element); display: flex; flex-direction: column; gap: var(--space-3); text-align: center; }
.article-card:hover { border-color: color-mix(in srgb, var(--sun) 40%, transparent); transform: translateY(-3px); box-shadow: var(--e3); }
.article-card-label { font-size: var(--ms-dn2); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sun-deep); }
.article-card-title { font-family: var(--font-display); font-size: var(--ms-2); color: var(--ink); line-height: 1.14; }
.article-card-desc { color: var(--ink-muted); font-size: var(--ms-0); line-height: 1.6; }
.article-card-link { font-size: var(--ms-dn1); font-weight: 600; color: var(--sun-deep); letter-spacing: 0.04em; margin-top: auto; }
.article-grid { display: grid; gap: var(--space-5); }

@media (min-width: 48rem) {
  .proof-bar-inner { flex-wrap: nowrap; }
  .listing-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 420px)); justify-content: center; }
  .article-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 340px)); justify-content: center; }
}

/* pull-quote (articles/about) */
.pull-quote { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: var(--ms-3); line-height: 1.2; color: var(--ink); margin-top: var(--space-6); padding-top: var(--space-5); border-top: 3px solid var(--sun); text-align: center; max-width: 40rem; margin-inline: auto; }
.dropcap { float: left; font-family: var(--font-display); font-weight: 600; font-size: 3.4em; line-height: 0.78; padding: 6px var(--space-3) 0 0; color: var(--sun); }

/* contact-direct (about) */
.contact-direct { margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); align-items: center; text-align: center; }
.contact-direct li { display: flex; flex-direction: column; gap: 2px; align-items: center; }
.cd-label { font-size: var(--ms-dn1); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }
.contact-direct a { font-family: var(--font-display); font-size: var(--ms-2); color: var(--ink); }
.contact-direct a:hover { color: var(--sun-deep); }

/* generic inner-page safety: center stacked grids, let children shrink */
.page-inner [style*="grid"] > *, .page-inner [style*="flex"] > * { min-width: 0; }
@media (max-width: 47.99rem) { .page-inner [style*="1fr 1fr"] { grid-template-columns: 1fr !important; } }
.page-inner .page-section [style*="text-align: left"], .page-inner .page-section [style*="text-align:left"] { text-align: center !important; }
.page-inner .article-body [style*="text-align: left"] { text-align: left !important; }

/* FAQ (home + sell) */
.faq { position: relative; z-index: 2; padding-block: var(--section-y); }
.faq-list { display: flex; flex-direction: column; max-width: 48rem; margin-inline: auto; }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) 0; font-family: var(--font-display); font-weight: 500; font-size: var(--ms-2); color: var(--ink); text-align: left; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon { position: relative; width: 18px; height: 18px; flex-shrink: 0; }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; background: var(--sun); border-radius: 2px; transition: transform var(--dur-element) var(--ease-standard); }
.faq-icon::before { top: 8px; left: 0; width: 18px; height: 2px; }
.faq-icon::after { top: 0; left: 8px; width: 2px; height: 18px; }
.faq-item[open] .faq-icon::after { transform: scaleY(0); }
.faq-body { padding: 0 0 var(--space-5); }
.faq-body p { color: var(--ink-muted); max-width: 62ch; text-align: left; }