/* ============================================================
   BRIDGE CAPITAL · INSTITUTIONAL DIGITAL ASSET MARKETS
   Shared design system — navy ink / cream paper / antique gold
   Fraunces · Inter Tight · JetBrains Mono
   ============================================================ */

:root {
  --ink: #0A0E1A;
  --ink-2: #0D1322;
  --ink-3: #121A2E;
  --ink-4: #1A2440;
  --paper: #F5F1E8;
  --paper-90: rgba(245, 241, 232, 0.9);
  --paper-70: rgba(245, 241, 232, 0.7);
  --paper-55: rgba(245, 241, 232, 0.55);
  --paper-35: rgba(245, 241, 232, 0.35);
  --paper-18: rgba(245, 241, 232, 0.18);
  --paper-10: rgba(245, 241, 232, 0.10);
  --paper-06: rgba(245, 241, 232, 0.06);
  --gold: #B8924A;
  --gold-bright: #D4A857;
  --gold-deep: #8B6B2D;
  --gold-18: rgba(212, 168, 87, 0.18);
  --gold-35: rgba(212, 168, 87, 0.35);
  --rust: #9B3D1F;
  --rust-bright: #C25530;
  --sage: #4A5D3E;
  --sage-bright: #7A9468;

  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  --max: 1360px;
  --pad: clamp(20px, 4vw, 64px);
  --sec: clamp(96px, 14vh, 180px);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-2: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip; /* not `hidden` — hidden creates a scroll container and kills position:sticky */
}

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }
::selection { background: var(--gold); color: var(--ink); }

/* ---------- typography ---------- */
.kicker {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-bright);
}
.kicker--dim { color: var(--paper-55); }

h1, h2, h3, .display { font-family: var(--serif); font-weight: 350; line-height: 1.04; letter-spacing: -0.015em; }
.display-xl { font-size: clamp(52px, 9.5vw, 148px); }
.display-lg { font-size: clamp(40px, 6.4vw, 96px); }
.display-md { font-size: clamp(30px, 4.2vw, 60px); }
.display-sm { font-size: clamp(24px, 2.8vw, 38px); }
em, .it { font-style: italic; font-weight: 340; }
.gold { color: var(--gold-bright); }

.deck {
  font-family: var(--serif);
  font-size: clamp(18px, 1.6vw, 23px);
  font-weight: 330;
  font-style: italic;
  line-height: 1.55;
  color: var(--paper-70);
}
.body-dim { color: var(--paper-55); }
.mono {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ---------- layout ---------- */
.container { max-width: var(--max); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.section { padding: var(--sec) 0; position: relative; }
.section--tight { padding: calc(var(--sec) * 0.6) 0; }
.section--paper { background: var(--paper); color: var(--ink); }
.section--paper .kicker--dim, .section--paper .body-dim, .section--paper .deck { color: rgba(10, 14, 26, 0.62); }
.section--raise { background: var(--ink-2); }

.sec-head { display: flex; align-items: baseline; gap: 24px; margin-bottom: clamp(40px, 6vw, 84px); }
.sec-head .rule { flex: 1; height: 1px; background: var(--paper-18); transform-origin: left; }
.section--paper .sec-head .rule { background: rgba(10, 14, 26, 0.2); }
.sec-num {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.24em;
  color: var(--gold-bright); white-space: nowrap;
}

.grid { display: grid; gap: 1px; background: var(--paper-10); border: 1px solid var(--paper-10); }
.section--paper .grid { background: rgba(10,14,26,.14); border-color: rgba(10,14,26,.14); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 900;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--pad);
  transition: background 0.5s var(--ease), backdrop-filter 0.5s, padding 0.5s var(--ease);
}
.nav.scrolled {
  background: rgba(10, 14, 26, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 14px var(--pad);
  border-bottom: 1px solid var(--paper-06);
}
.nav-logo { display: flex; flex-direction: column; gap: 2px; z-index: 2; }
.nav-logo .l1 { font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: 0.34em; }
.nav-logo .l2 { font-family: var(--mono); font-size: 8px; letter-spacing: 0.3em; color: var(--paper-55); }
.nav-links { display: flex; gap: 36px; align-items: center; }
.nav-link { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--paper-70); position: relative; padding: 6px 0; transition: color 0.3s; }
.nav-link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--gold-bright); transform: scaleX(0); transform-origin: right; transition: transform 0.45s var(--ease); }
.nav-link:hover { color: var(--paper); }
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-link.active { color: var(--gold-bright); }
.nav-link.active::after { transform: scaleX(1); }

.burger { display: none; z-index: 1002; width: 44px; height: 44px; position: relative; }
.burger span { position: absolute; left: 10px; right: 10px; height: 1.5px; background: var(--paper); transition: transform 0.45s var(--ease), top 0.45s var(--ease), opacity 0.3s; }
.burger span:nth-child(1) { top: 17px; }
.burger span:nth-child(2) { top: 26px; }
.menu-open .burger span:nth-child(1) { top: 21.5px; transform: rotate(45deg); }
.menu-open .burger span:nth-child(2) { top: 21.5px; transform: rotate(-45deg); }

.menu-overlay {
  position: fixed; inset: 0; z-index: 1000; background: var(--ink-2);
  display: flex; flex-direction: column; justify-content: center; padding: 0 var(--pad);
  clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path 0.7s var(--ease-2), visibility 0s 0.7s;
}
.menu-open .menu-overlay { clip-path: inset(0 0 0% 0); visibility: visible; transition: clip-path 0.7s var(--ease-2), visibility 0s; }
.menu-overlay a { font-family: var(--serif); font-size: clamp(34px, 7vw, 64px); line-height: 1.25; color: var(--paper-70); display: flex; align-items: baseline; gap: 18px; transform: translateY(40px); opacity: 0; transition: color 0.3s, transform 0.6s var(--ease), opacity 0.6s; }
.menu-overlay a .idx { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; color: var(--gold-bright); }
.menu-overlay a:hover { color: var(--gold-bright); }
.menu-open .menu-overlay a { transform: translateY(0); opacity: 1; }
.menu-open .menu-overlay a:nth-child(1) { transition-delay: 0.10s; }
.menu-open .menu-overlay a:nth-child(2) { transition-delay: 0.16s; }
.menu-open .menu-overlay a:nth-child(3) { transition-delay: 0.22s; }
.menu-open .menu-overlay a:nth-child(4) { transition-delay: 0.28s; }
.menu-open .menu-overlay a:nth-child(5) { transition-delay: 0.34s; }
.menu-open .menu-overlay a:nth-child(6) { transition-delay: 0.40s; }
.menu-open .menu-overlay a:nth-child(7) { transition-delay: 0.46s; }

/* ---------- hero ---------- */
.hero { min-height: 100svh; display: flex; flex-direction: column; position: relative; overflow: hidden; padding-top: 110px; }
.hero-media { position: absolute; inset: 0; z-index: 0; background: url("../assets/img/hero-poster.jpg") center / cover no-repeat; }
.hero-media video { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.2) contrast(1.05) brightness(0.85); }
.hero-canvas { position: absolute; inset: 0; z-index: 1; opacity: 0.55; }
.hero-vignette { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse 90% 70% at 50% 40%, transparent 30%, rgba(10,14,26,0.72) 100%),
              linear-gradient(180deg, rgba(10,14,26,0.62) 0%, rgba(10,14,26,0.28) 26%, rgba(10,14,26,0.30) 60%, var(--ink) 100%); }
.hero .container { position: relative; z-index: 2; margin-top: auto; margin-bottom: auto; padding-top: 32px; padding-bottom: 56px; }
.hero-meta { display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vh, 48px); }
.hero-title { margin: 0 0 clamp(24px, 3.5vh, 44px); }
.hero-deck { max-width: 56ch; }
.hero-bottom { position: relative; z-index: 2; border-top: 1px solid var(--paper-10); background: rgba(10, 14, 26, 0.5); }
.hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); }
.hero-stat { padding: clamp(18px, 2.6vh, 30px) var(--pad); border-right: 1px solid var(--paper-10); }
.hero-stat:last-child { border-right: 0; }
.hero-stat .n { font-family: var(--serif); font-size: clamp(28px, 3.4vw, 50px); line-height: 1; color: var(--gold-bright); }
.hero-stat .t { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--paper-55); margin-top: 10px; }

.scroll-hint { position: absolute; right: var(--pad); bottom: 120px; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.scroll-hint .line { width: 1px; height: 56px; background: var(--paper-35); overflow: hidden; position: relative; }
.scroll-hint .line::after { content: ""; position: absolute; left: 0; top: -50%; width: 100%; height: 50%; background: var(--gold-bright); animation: drip 2s var(--ease-2) infinite; }
@keyframes drip { 0% { top: -50%; } 100% { top: 110%; } }
.scroll-hint .mono { writing-mode: vertical-rl; font-size: 9px; color: var(--paper-55); }

/* part hero (subpages) */
.part-hero { min-height: 88svh; display: flex; align-items: flex-end; position: relative; overflow: hidden; padding-bottom: clamp(56px, 9vh, 110px); }
.part-hero .ph-media { position: absolute; inset: 0; z-index: 0; }
.part-hero .ph-media img { position: relative; top: -6%; width: 100%; height: 112%; object-fit: cover; opacity: 0.38; filter: grayscale(0.25) contrast(1.05); will-change: transform; }
.part-hero .ph-media::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,14,26,0.55) 0%, rgba(10,14,26,0.35) 30%, rgba(10,14,26,0.55) 62%, var(--ink) 100%),
              radial-gradient(ellipse 80% 60% at 50% 50%, transparent 30%, rgba(10,14,26,0.35) 100%); }
.part-hero::before { content: attr(data-numeral); position: absolute; right: -2vw; top: 6vh; font-family: var(--serif); font-size: clamp(220px, 42vw, 640px); line-height: 0.8; color: transparent; -webkit-text-stroke: 1px var(--paper-18); z-index: 1; pointer-events: none; }
.part-hero .container { position: relative; z-index: 2; }
.part-hero .crumbs { display: flex; gap: 14px; align-items: center; margin-bottom: 26px; }
.part-hero .crumbs .sep { width: 32px; height: 1px; background: var(--gold); }

/* ---------- full-bleed photographic plate ---------- */
.plate { position: relative; height: clamp(420px, 78vh, 760px); overflow: hidden; display: flex; align-items: flex-end; }
.plate img { position: absolute; top: -8%; left: -2%; width: 104%; height: 116%; object-fit: cover; will-change: transform; }
.plate::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(10,14,26,0.55) 0%, rgba(10,14,26,0.05) 22%, rgba(10,14,26,0.05) 60%, rgba(10,14,26,0.85) 100%),
              radial-gradient(ellipse 80% 60% at 50% 50%, transparent 30%, rgba(10,14,26,0.35) 100%); }
.plate .plate-cap { position: relative; z-index: 2; width: 100%; display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; padding: 0 var(--pad) clamp(28px, 4vh, 48px); flex-wrap: wrap; }
.plate .pl-id { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-bright); display: block; margin-bottom: 12px; }
.plate .pl-text { font-family: var(--serif); font-style: italic; font-size: clamp(17px, 1.7vw, 23px); line-height: 1.4; color: var(--paper-90); max-width: 52ch; }
.plate .pl-attr { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--paper-55); max-width: 240px; text-align: right; }

/* ---------- photo grid ---------- */
.photo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.2vw, 18px); }
.pg-cell { position: relative; aspect-ratio: 4 / 5; overflow: hidden; display: block; }
.pg-cell img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.2) contrast(1.04); transition: transform 1s var(--ease), filter 0.6s; will-change: transform; }
.pg-cell::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,14,26,0.15) 0%, rgba(10,14,26,0.05) 45%, rgba(10,14,26,0.82) 100%); transition: background 0.5s; }
.pg-cell:hover img { transform: scale(1.07); filter: grayscale(0) contrast(1.06); }
.pg-cell .pg-cap { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 1; }
.pg-cell .pg-num { font-family: var(--mono); font-size: 9px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-bright); display: block; margin-bottom: 7px; }
.pg-cell .pg-title { font-family: var(--serif); font-size: clamp(17px, 1.5vw, 22px); color: var(--paper); line-height: 1.2; }
.pg-cell .pg-arr { position: absolute; top: 16px; right: 16px; z-index: 1; font-family: var(--mono); font-size: 13px; color: var(--paper-70); transform: translate(-6px, 6px); opacity: 0; transition: transform 0.5s var(--ease), opacity 0.4s; }
.pg-cell:hover .pg-arr { transform: translate(0, 0); opacity: 1; }

/* ---------- split photo ---------- */
.split-photo { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(28px, 4vw, 72px); align-items: center; }
.split-photo.flip { grid-template-columns: 1.15fr 1fr; }
.split-photo .sp-img { position: relative; overflow: hidden; aspect-ratio: 4 / 5; }
.split-photo.wide .sp-img { aspect-ratio: 5 / 4; }
.split-photo .sp-img img { width: 100%; height: 112%; position: relative; top: -6%; object-fit: cover; filter: grayscale(0.15) contrast(1.04); will-change: transform; }
.split-photo .sp-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,14,26,0.12) 0%, transparent 35%, rgba(10,14,26,0.45) 100%); }
.split-photo .sp-cap { position: absolute; left: 18px; bottom: 14px; z-index: 1; font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--paper-70); }

/* ---------- marquee ---------- */
.marquee { overflow: hidden; border-top: 1px solid var(--paper-10); border-bottom: 1px solid var(--paper-10); padding: 18px 0; position: relative; }
.marquee-track { display: flex; gap: 64px; width: max-content; will-change: transform; }
.marquee-track span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--paper-55); white-space: nowrap; display: flex; align-items: center; gap: 64px; }
.marquee-track span::after { content: "◆"; font-size: 7px; color: var(--gold); }

/* ---------- cards ---------- */
.card { background: var(--ink); padding: clamp(28px, 3vw, 44px); position: relative; overflow: hidden; transition: background 0.5s; }
.card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: var(--gold); transform: scaleY(0); transform-origin: top; transition: transform 0.5s var(--ease); }
.card:hover { background: var(--ink-3); }
.card:hover::before { transform: scaleY(1); }
.card .c-idx { font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em; color: var(--gold-bright); margin-bottom: 22px; display: block; }
.card h3 { font-size: clamp(20px, 1.8vw, 26px); margin-bottom: 14px; }
.card p { font-size: 15px; color: var(--paper-55); }
.section--paper .card { background: var(--paper); }
.section--paper .card:hover { background: #EFEADD; }
.section--paper .card p { color: rgba(10,14,26,0.62); }

.tilt { transform-style: preserve-3d; will-change: transform; }
.tilt .t-inner { transform: translateZ(24px); }

/* instrument cards */
.inst-tag { display: inline-block; font-family: var(--mono); font-size: 22px; font-weight: 700; letter-spacing: 0.1em; color: var(--gold-bright); margin-bottom: 6px; }
.inst-sub { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.26em; color: var(--paper-55); text-transform: uppercase; margin-bottom: 20px; display: block; }

/* ---------- list rows ---------- */
.rows { border-top: 1px solid var(--paper-18); }
.row { display: grid; grid-template-columns: 88px 1fr 1.4fr; gap: clamp(16px, 3vw, 48px); padding: clamp(22px, 2.6vw, 36px) 0; border-bottom: 1px solid var(--paper-10); align-items: baseline; position: relative; }
.row .r-num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; color: var(--gold-bright); }
.row .r-title { font-family: var(--serif); font-size: clamp(20px, 2vw, 28px); }
.row .r-body { font-size: 15px; color: var(--paper-55); }
.section--paper .rows { border-color: rgba(10,14,26,0.3); }
.section--paper .row { border-color: rgba(10,14,26,0.14); }
.section--paper .row .r-body { color: rgba(10,14,26,0.62); }

/* ---------- compare table ---------- */
.compare { border: 1px solid var(--paper-10); }
.compare-head, .compare-row { display: grid; grid-template-columns: 0.7fr 1fr 1fr; }
.compare-head > div { padding: 18px 24px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-bright); border-bottom: 1px solid var(--paper-18); }
.compare-row > div { padding: 22px 24px; font-size: 14.5px; color: var(--paper-70); border-bottom: 1px solid var(--paper-06); }
.compare-row:last-child > div { border-bottom: 0; }
.compare-row > div:first-child { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--paper); }
.compare-row > div:nth-child(2) { border-left: 1px solid var(--paper-06); border-right: 1px solid var(--paper-06); }
.compare-row:hover > div { background: var(--paper-06); }

/* ---------- bars (drivers) ---------- */
.bars { display: flex; flex-direction: column; gap: 26px; }
.bar-item .bar-label { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.bar-item .bar-label .name { font-size: 15px; }
.bar-item .bar-label .w { font-family: var(--mono); font-size: 9px; letter-spacing: 0.26em; color: var(--gold-bright); }
.bar-track { height: 3px; background: var(--paper-10); overflow: hidden; }
.bar-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright)); }

/* ---------- tiers ---------- */
.tier { display: grid; grid-template-columns: 120px 1fr 1.1fr; gap: clamp(16px, 3vw, 40px); padding: 24px 0; border-bottom: 1px solid var(--paper-10); align-items: center; }
.tier-pill { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; padding: 7px 13px; border: 1px solid; display: inline-flex; align-items: center; gap: 8px; }
.tier-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tier--low .tier-pill { color: var(--sage-bright); border-color: rgba(122,148,104,0.4); }
.tier--med .tier-pill { color: var(--gold-bright); border-color: var(--gold-35); }
.tier--high .tier-pill { color: var(--rust-bright); border-color: rgba(194,85,48,0.45); }
.tier--sev .tier-pill { color: #E06B6B; border-color: rgba(224,107,107,0.45); }
.tier .t-desc { font-size: 14.5px; color: var(--paper-70); }
.tier .t-act { font-size: 14.5px; color: var(--paper-55); }

/* ---------- checklist (qualifies / not) ---------- */
.checklist li { display: flex; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--paper-10); font-size: 15px; color: var(--paper-70); }
.checklist .ok, .checklist .no { font-family: var(--mono); font-size: 13px; flex: 0 0 auto; margin-top: 2px; }
.checklist .ok { color: var(--sage-bright); }
.checklist .no { color: var(--rust-bright); }
.section--paper .checklist li { border-color: rgba(10,14,26,0.12); color: rgba(10,14,26,0.78); }

/* ---------- quote band ---------- */
.quote-band { padding: var(--sec) 0; text-align: center; position: relative; }
.quote-band .q { font-family: var(--serif); font-style: italic; font-weight: 320; font-size: clamp(28px, 4.6vw, 64px); line-height: 1.25; max-width: 22ch; margin: 0 auto; }
.quote-band .attr { margin-top: 34px; }

/* ---------- statement ---------- */
.statement { font-family: var(--serif); font-size: clamp(26px, 3.6vw, 54px); line-height: 1.3; font-weight: 330; max-width: 30ch; }
.statement .hl { color: var(--gold-bright); font-style: italic; }

/* ---------- callout ---------- */
.callout { border: 1px solid var(--gold-35); padding: clamp(24px, 3vw, 40px); position: relative; background: linear-gradient(135deg, rgba(212,168,87,0.06), transparent 55%); }
.callout .co-tag { position: absolute; top: -8px; left: 24px; background: var(--ink); padding: 0 12px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-bright); }
.section--paper .callout .co-tag { background: var(--paper); }
.callout p { font-size: 15.5px; color: var(--paper-70); }
.section--paper .callout p { color: rgba(10,14,26,0.72); }
.callout--rust { border-color: rgba(194,85,48,0.45); background: linear-gradient(135deg, rgba(155,61,31,0.08), transparent 55%); }
.callout--rust .co-tag { color: var(--rust-bright); }

/* ---------- gates / hscroll ---------- */
.hscroll { position: relative; overflow: hidden; }
.hscroll-track { display: flex; will-change: transform; }
.gate { flex: 0 0 min(560px, 82vw); min-height: 64vh; border-right: 1px solid var(--paper-10); padding: clamp(36px, 4vw, 64px); display: flex; flex-direction: column; justify-content: space-between; gap: 48px; background: var(--ink-2); }
.gate .g-num { font-family: var(--serif); font-size: clamp(80px, 9vw, 150px); line-height: 0.9; color: transparent; -webkit-text-stroke: 1px var(--gold); }
.gate h3 { font-size: clamp(26px, 2.6vw, 40px); margin-bottom: 16px; }
.gate p { color: var(--paper-55); font-size: 15.5px; max-width: 40ch; }

/* ---------- timeline (10 steps) ---------- */
.timeline { position: relative; padding-left: clamp(28px, 5vw, 80px); }
.timeline::before { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 1px; background: var(--paper-10); }
.timeline .tl-progress { position: absolute; left: 6px; top: 0; width: 1px; height: 100%; background: var(--gold-bright); transform: scaleY(0); transform-origin: top; }
.tl-phase { font-family: var(--mono); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-bright); padding: 56px 0 8px; position: relative; }
.tl-phase:first-child { padding-top: 0; }
.tl-step { padding: 30px 0; border-bottom: 1px solid var(--paper-06); position: relative; display: grid; grid-template-columns: 64px 1fr; gap: clamp(16px, 3vw, 40px); }
.tl-step::before { content: ""; position: absolute; left: calc(-1 * clamp(28px, 5vw, 80px) + 2px); top: 42px; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); border: 1px solid var(--gold); }
.tl-step .s-num { font-family: var(--serif); font-size: 30px; color: var(--gold-bright); line-height: 1; }
.tl-step h4 { font-family: var(--serif); font-size: clamp(19px, 1.7vw, 24px); font-weight: 380; margin-bottom: 8px; }
.tl-step p { font-size: 14.5px; color: var(--paper-55); max-width: 68ch; }

/* ---------- accordion ---------- */
.acc { border-top: 1px solid var(--paper-18); }
.acc-item { border-bottom: 1px solid var(--paper-10); }
.acc-btn { width: 100%; display: grid; grid-template-columns: 56px 1fr 40px; gap: 20px; align-items: baseline; text-align: left; padding: 28px 0; }
.acc-btn .a-num { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.2em; color: var(--gold-bright); }
.acc-btn .a-q { font-family: var(--serif); font-size: clamp(18px, 1.8vw, 24px); font-weight: 360; transition: color 0.3s; }
.acc-btn:hover .a-q { color: var(--gold-bright); }
.acc-btn .a-x { position: relative; width: 14px; height: 14px; justify-self: end; align-self: center; }
.acc-btn .a-x::before, .acc-btn .a-x::after { content: ""; position: absolute; background: var(--gold-bright); transition: transform 0.45s var(--ease); }
.acc-btn .a-x::before { left: 0; top: 6.5px; width: 14px; height: 1px; }
.acc-btn .a-x::after { left: 6.5px; top: 0; width: 1px; height: 14px; }
.acc-item.open .a-x::after { transform: scaleY(0); }
.acc-panel { overflow: hidden; height: 0; }
.acc-panel-inner { padding: 0 96px 32px 76px; font-size: 15.5px; color: var(--paper-55); max-width: 76ch; }

/* ---------- doc cards ---------- */
.doc-card { border: 1px solid var(--paper-10); padding: clamp(30px, 3.4vw, 52px); display: flex; flex-direction: column; gap: 26px; min-height: 380px; position: relative; overflow: hidden; transition: border-color 0.4s; background: var(--ink-2); }
.doc-card::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 180px; height: 180px; border: 1px solid var(--gold-18); transform: rotate(45deg); transition: transform 0.6s var(--ease), border-color 0.4s; }
.doc-card:hover { border-color: var(--gold-35); }
.doc-card:hover::after { transform: rotate(45deg) scale(1.25); border-color: var(--gold-35); }
.doc-card .d-ref { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; color: var(--gold-bright); }
.doc-card h3 { font-size: clamp(22px, 2.1vw, 32px); }
.doc-card p { font-size: 15px; color: var(--paper-55); flex: 1; }
.doc-card .d-meta { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--paper-35); line-height: 2; }

/* ---------- stack cards (home four parts) ---------- */
.stack { position: relative; }
.stack-card { position: sticky; top: 90px; min-height: calc(100svh - 120px); display: flex; align-items: center; background: var(--ink); border-top: 1px solid var(--paper-18); will-change: transform; }
.stack-card .sc-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 6vw, 100px); align-items: center; width: 100%; }
.stack-card .sc-numeral { font-family: var(--serif); font-size: clamp(120px, 18vw, 280px); line-height: 0.85; color: transparent; -webkit-text-stroke: 1px var(--gold-35); }
.stack-card h3 { font-size: clamp(34px, 4.4vw, 68px); margin: 18px 0 22px; }
.stack-card p { color: var(--paper-55); max-width: 52ch; margin-bottom: 36px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; padding: 18px 30px; border: 1px solid var(--paper-35); position: relative; overflow: hidden; transition: color 0.4s var(--ease), border-color 0.4s; will-change: transform; }
.btn::before { content: ""; position: absolute; inset: 0; background: var(--gold-bright); transform: scaleY(0); transform-origin: bottom; transition: transform 0.45s var(--ease); z-index: 0; }
.btn span, .btn .arr { position: relative; z-index: 1; }
.btn:hover { color: var(--ink); border-color: var(--gold-bright); }
.btn:hover::before { transform: scaleY(1); }
.btn .arr { transition: transform 0.4s var(--ease); }
.btn:hover .arr { transform: translateX(5px); }
.btn--gold { border-color: var(--gold); color: var(--gold-bright); }
.section--paper .btn { border-color: rgba(10,14,26,0.4); }
.section--paper .btn:hover { color: var(--paper); border-color: var(--ink); }
.section--paper .btn::before { background: var(--ink); }

/* ---------- diagram (DvP) ---------- */
.dvp-wrap { position: relative; }
.dvp-svg text { font-family: var(--mono); }
.dvp-svg .lbl { font-size: 10px; letter-spacing: 0.2em; fill: var(--paper-55); }
.dvp-svg .lbl-big { font-size: 13px; letter-spacing: 0.24em; fill: var(--paper); font-weight: 600; }
.dvp-svg .lbl-gold { fill: var(--gold-bright); }
.dvp-svg .box { fill: rgba(212,168,87,0.04); stroke: var(--gold-35); }
.dvp-svg .box-outer { fill: none; stroke: var(--paper-18); }
.dvp-svg .flow { fill: none; stroke: var(--gold-bright); stroke-width: 1.5; }
.dvp-svg .flow-dim { fill: none; stroke: var(--paper-35); stroke-width: 1; stroke-dasharray: 3 5; }
.dvp-svg .pulse-dot { fill: var(--gold-bright); }

/* ---------- legal pack ---------- */
.legal-layout { display: grid; grid-template-columns: 250px 1fr; gap: clamp(40px, 6vw, 110px); align-items: start; }
.legal-toc { position: sticky; top: 120px; }
.legal-toc .lt-head { font-family: var(--mono); font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--paper-35); margin-bottom: 18px; }
.legal-toc a { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper-55); padding: 9px 0 9px 16px; border-left: 1px solid var(--paper-10); transition: color 0.3s, border-color 0.3s; }
.legal-toc a:hover { color: var(--paper); }
.legal-toc a.active { color: var(--gold-bright); border-left-color: var(--gold-bright); }
.legal-sec { padding: clamp(44px, 7vh, 80px) 0; border-bottom: 1px solid var(--paper-06); scroll-margin-top: 120px; }
.legal-sec:first-child { padding-top: 0; }
.legal-sec .l-ref { font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-bright); display: block; margin-bottom: 16px; }
.legal-sec h2 { font-size: clamp(26px, 2.6vw, 40px); margin-bottom: 24px; }
.legal-sec h3 { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--paper-70); margin: 32px 0 14px; }
.legal-sec p { font-size: 15px; color: var(--paper-70); max-width: 78ch; margin-bottom: 14px; }
.legal-sec p strong { font-weight: 500; color: var(--paper); }
.legal-list { margin: 14px 0 18px; }
.legal-list li { position: relative; padding: 8px 0 8px 26px; font-size: 14.5px; color: var(--paper-70); max-width: 76ch; }
.legal-list li::before { content: "—"; position: absolute; left: 0; color: var(--gold-bright); }
.notice-box { border: 1px solid var(--gold-35); background: linear-gradient(135deg, rgba(212,168,87,0.07), transparent 60%); padding: clamp(28px, 3.4vw, 48px); margin: 24px 0; }
.notice-box p { font-family: var(--serif); font-size: clamp(16px, 1.5vw, 20px); line-height: 1.6; color: var(--paper-90); max-width: 70ch; }
.notice-box p + p { margin-top: 16px; }

/* ---------- next part footer nav ---------- */
.next-part { border-top: 1px solid var(--paper-10); }
.next-part a { display: block; padding: clamp(64px, 10vh, 130px) 0; position: relative; overflow: hidden; }
.next-part .np-label { margin-bottom: 18px; display: block; }
.next-part .np-title { font-family: var(--serif); font-size: clamp(40px, 7vw, 110px); line-height: 1; transition: color 0.4s; display: flex; align-items: center; gap: 30px; }
.next-part .np-title .arr { font-family: var(--sans); font-size: 0.55em; transition: transform 0.5s var(--ease); }
.next-part a:hover .np-title { color: var(--gold-bright); }
.next-part a:hover .np-title .arr { transform: translateX(18px); }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--paper-10); padding: clamp(56px, 8vh, 100px) 0 40px; background: var(--ink-2); }
.footer-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr 1.2fr; gap: clamp(28px, 3.5vw, 64px); margin-bottom: 72px; }
.footer h5 { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--paper-35); margin-bottom: 22px; font-weight: 500; }
.footer-links li { margin-bottom: 12px; }
.footer-links a { font-size: 14px; color: var(--paper-55); transition: color 0.3s; }
.footer-links a:hover { color: var(--gold-bright); }
.footer .brand-line { font-family: var(--serif); font-size: clamp(22px, 2.2vw, 32px); font-style: italic; max-width: 18ch; line-height: 1.4; }
.footer-base { border-top: 1px solid var(--paper-06); padding-top: 28px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer-base p { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--paper-35); }
.footer-disc { font-size: 12px; color: var(--paper-35); max-width: 100ch; margin-bottom: 40px; line-height: 1.7; }

/* ---------- chrome: cursor / progress / curtain / preloader / grain ---------- */
.cursor { position: fixed; top: 0; left: 0; z-index: 2000; pointer-events: none; mix-blend-mode: difference; }
.cursor .dot { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--paper); transform: translate(-50%, -50%); }
.cursor .ring { position: absolute; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--paper-55); transform: translate(-50%, -50%); transition: width 0.35s var(--ease), height 0.35s var(--ease), border-color 0.3s; }
.cursor.is-hover .ring { width: 64px; height: 64px; border-color: var(--paper); }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 1500; pointer-events: none; }
.progress .p-fill { height: 100%; background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright)); transform: scaleX(0); transform-origin: left; }

.curtain { position: fixed; inset: 0; z-index: 3000; background: var(--ink-2); display: flex; align-items: center; justify-content: center; transform: scaleY(0); transform-origin: top; pointer-events: none; }
.curtain .c-mark { font-family: var(--mono); font-size: 11px; letter-spacing: 0.4em; color: var(--gold-bright); opacity: 0; }

.preloader { position: fixed; inset: 0; z-index: 4000; background: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; }
.preloader .pl-word { font-family: var(--mono); font-size: 12px; letter-spacing: 0.5em; color: var(--paper); }
.preloader .pl-count { font-family: var(--serif); font-size: clamp(64px, 10vw, 130px); line-height: 1; color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.preloader .pl-bar { width: min(320px, 60vw); height: 1px; background: var(--paper-18); overflow: hidden; }
.preloader .pl-bar i { display: block; height: 100%; width: 0%; background: var(--gold-bright); }

.grain { position: fixed; inset: -100%; z-index: 2500; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 9s steps(10) infinite; }
@keyframes grain { 0%,100% { transform: translate(0,0); } 20% { transform: translate(-6%,4%); } 40% { transform: translate(4%,-7%); } 60% { transform: translate(-3%,6%); } 80% { transform: translate(6%,-3%); } }

/* ---------- split / reveal primitives ---------- */
.split-parent { overflow: hidden; }
.split-line { display: block; overflow: hidden; }
.split-line > span { display: block; will-change: transform; }
html.js [data-split] { visibility: hidden; }
html.js [data-split].split-ready { visibility: visible; }
html.js [data-reveal] { opacity: 0; transform: translateY(36px); }
html.js [data-reveal-group] > * { opacity: 0; transform: translateY(36px); }
html.no-motion [data-reveal], html.no-motion [data-reveal-group] > * { opacity: 1 !important; transform: none !important; }
html.no-motion [data-split] { visibility: visible !important; }

/* ---------- mobile bottom tab bar (injected by JS, shown ≤768px) ---------- */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 950; display: none; background: rgba(13, 19, 34, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--paper-10); padding-bottom: env(safe-area-inset-bottom); transition: transform 0.45s var(--ease); }
.tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 11px 0 10px; font-family: var(--mono); font-size: 8.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper-55); }
.tabbar a::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: transparent; transition: background 0.3s; }
.tabbar a.active { color: var(--gold-bright); }
.tabbar a.active::before { background: var(--gold-bright); }
.menu-open .tabbar { transform: translateY(110%); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .nav-links { display: none; }
  .burger { display: block; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .photo-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .hero-stat:nth-child(2) { border-right: 0; }
  .hero-stat:nth-child(-n+2) { border-bottom: 1px solid var(--paper-10); }
}
@media (max-width: 768px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .row { grid-template-columns: 48px 1fr; }
  .row .r-body { grid-column: 2; }
  .compare-head, .compare-row { grid-template-columns: 1fr; }
  .compare-head > div:not(:first-child) { display: none; }
  .compare-row > div:nth-child(2) { border-left: 0; border-right: 0; }
  .compare-row > div { border-bottom: 0; }
  .compare-row { border-bottom: 1px solid var(--paper-10); padding: 6px 0; }
  .stack-card .sc-grid { grid-template-columns: 1fr; gap: 24px; }
  .stack-card { min-height: auto; position: relative; top: 0; padding: 64px 0; }
  .tier { grid-template-columns: 1fr; gap: 10px; }
  .acc-btn { grid-template-columns: 40px 1fr 24px; }
  .acc-panel-inner { padding: 0 24px 28px 60px; }
  .scroll-hint { display: none; }
  .split-photo, .split-photo.flip { grid-template-columns: 1fr; }
  .legal-layout { grid-template-columns: 1fr; }
  .legal-toc { position: sticky; top: 56px; z-index: 100; display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 0 22px; margin: 0 calc(-1 * var(--pad)); padding: 14px var(--pad) 12px; background: rgba(10, 14, 26, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--paper-10); }
  .legal-toc::-webkit-scrollbar { display: none; }
  .legal-toc .lt-head { display: none; }
  .legal-toc a { border-left: 0; padding: 6px 0; white-space: nowrap; flex: 0 0 auto; }
  .legal-toc a.active { border-bottom: 1px solid var(--gold-bright); }
  .split-photo .sp-img { aspect-ratio: 16 / 10; }
  .sec-head { flex-wrap: wrap; gap: 12px 18px; }
  .sec-num { white-space: normal; }
  .timeline { padding-left: 32px; }
  .tl-step { grid-template-columns: 1fr; gap: 8px; }
  .tl-step::before { left: -30px; }
}

/* ============================================================
   TABLET EXPERIENCE (769–1080px)
   Condensed chrome, two-column menus and grids — but keeps the
   desktop mechanics: sticky stack cards, pinned gates, sidebars.
   ============================================================ */
@media (max-width: 1080px) and (min-width: 769px) {
  /* two-column immersive overlay menu */
  .menu-overlay { flex-direction: row; flex-wrap: wrap; align-content: center; column-gap: 6%; }
  .menu-overlay a { flex: 0 0 44%; font-size: clamp(30px, 4.6vw, 46px); padding: 12px 0; }
  /* two-column card grids breathe better than three */
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .rows .row { grid-template-columns: 64px 1fr 1.2fr; }
  /* keep the legal sidebar, slimmer */
  .legal-layout { grid-template-columns: 210px 1fr; gap: clamp(32px, 4vw, 56px); }
  /* pinned gates, sized for the viewport */
  .gate { flex: 0 0 min(470px, 58vw); }
  .stack-card .sc-numeral { font-size: clamp(110px, 15vw, 200px); }
  .part-hero::before { font-size: clamp(200px, 38vw, 480px); }
  .split-photo, .split-photo.flip { gap: clamp(24px, 3.5vw, 48px); }
  .acc-panel-inner { padding-right: 40px; }
  /* the DvP diagram pans rather than shrinks */
  .dvp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dvp-svg { min-width: 880px; }
}

/* ============================================================
   MOBILE EXPERIENCE (≤768px)
   App-like: bottom tab bar, swipe carousels with scroll-snap,
   card-style tables, video-only hero, tuned type and spacing.
   ============================================================ */
@media (max-width: 768px) {
  .tabbar { display: flex; }
  body.has-tabbar .footer { padding-bottom: 110px; }
  /* hero: video only, tighter */
  .hero-canvas { display: none; }
  .hero { padding-top: 92px; }
  .hero-stat { padding: 16px 20px; }
  .hero-stat .n { font-size: 26px; }
  .part-hero { min-height: 72svh; }
  .plate { height: clamp(340px, 52vh, 520px); }

  /* four-parts stack becomes a swipe carousel */
  .stack { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; padding: 8px var(--pad) 28px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .stack::-webkit-scrollbar { display: none; }
  .stack-card { position: static; flex: 0 0 85vw; min-height: 0; border: 1px solid var(--paper-10); background: var(--ink-2); padding: 30px 0; scroll-snap-align: center; }
  .stack-card .container.sc-grid { padding: 0 22px; grid-template-columns: 1fr; gap: 16px; }
  .stack-card .sc-numeral { font-size: 64px; }
  .stack-card h3 { font-size: 26px; margin: 8px 0 12px; }
  .stack-card p { font-size: 13.5px; margin-bottom: 20px; }
  .stack-card .btn { padding: 14px 20px; }

  /* photo grid becomes a swipe carousel */
  .photo-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .photo-grid::-webkit-scrollbar { display: none; }
  .pg-cell { flex: 0 0 70vw; scroll-snap-align: center; }

  /* gates: native swipe with snap (GSAP pin disabled in JS) */
  .hscroll { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .hscroll::-webkit-scrollbar { display: none; }
  .hscroll-track { transform: none !important; width: max-content; }
  .gate { flex: 0 0 84vw; min-height: 48vh; padding: 26px 22px; scroll-snap-align: start; gap: 28px; }
  .gate .g-num { font-size: 64px; }
  .gate h3 { font-size: 24px; }

  /* exchange-vs-OTC table becomes labeled cards */
  .compare { border: 0; }
  .compare-head { display: none; }
  .compare-row { display: block; border: 1px solid var(--paper-10); margin-bottom: 12px; padding: 18px 18px 8px; }
  .compare-row:hover > div { background: none; }
  .compare-row > div { border: 0; padding: 0 0 12px; font-size: 14px; }
  .compare-row > div:first-child { color: var(--gold-bright); padding-bottom: 12px; }
  .compare-row > div:nth-child(n+2)::before { display: block; font-family: var(--mono); font-size: 8px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; margin-bottom: 5px; }
  .compare-row > div:nth-child(2)::before { content: "Exchange · order book"; color: var(--paper-35); }
  .compare-row > div:nth-child(3)::before { content: "OTC · bilateral"; color: var(--gold-deep); }

  /* the DvP diagram pans rather than shrinks */
  .dvp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dvp-svg { min-width: 820px; }

  /* type and chrome tune */
  .quote-band .q { font-size: clamp(24px, 7.4vw, 34px); }
  .next-part .np-title { font-size: clamp(32px, 9vw, 48px); }
  .menu-overlay a { font-size: clamp(28px, 8.6vw, 40px); }
  .doc-card { min-height: 0; }
}