/* ═══════════════════════════════════════════════════════════════
   SOUR STUDIO · DESIGN SYSTEM
   Brutalist Editorial · All Sour Acid · Section index masthead
   ═══════════════════════════════════════════════════════════════ */

:root {
  --acid:       oklch(0.93 0.21 115);
  --acid-deep:  oklch(0.85 0.22 115);
  --acid-soft:  oklch(0.96 0.14 115);
  --paper:      #f4f1ea;
  --ink:        #0a0a0a;
  --ink-soft:   rgba(10,10,10,0.62);
  --ink-faint:  rgba(10,10,10,0.38);
  --rule:       rgba(10,10,10,0.18);

  --f-sans:  'Geist', 'Noto Sans SC', system-ui, sans-serif;
  --f-cn:    'Noto Sans SC', 'Geist', sans-serif;
  --f-mono:  'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --f-serif: 'Instrument Serif', 'Noto Serif SC', serif;

  --gutter: clamp(20px, 4vw, 60px);
  --sec-py: clamp(70px, 7vw, 100px);
  /* Content fills to the gutter on every section (matches the hero / section 01),
     so left + right edges stay aligned across the whole page at any viewport width. */
  --max: 100%;
  /* Max content width. Above this viewport width the content stops growing and
     centers, with the section background still full-bleed. Tune this one number. */
  --site-max: 1268px;

  --grid-bg: linear-gradient(to right, rgba(0,0,0,0.06) 1px, transparent 1px);
  --grid-bs: 120px 100%;
}

/* ────────── reset ────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--f-sans);
  color: var(--ink);
  background: var(--acid);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; padding: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }
em { font-style: italic; }

/* language toggle visibility (preserved for future bilingual mode) */
.lang-en { display: inline; }
.lang-cn { display: none; }

/* block-level lang switches (kept for future use) */
.hero-tagline.lang-en,
.hero-tagline.lang-cn { display: flex; flex-direction: column; }
.hero-tagline.lang-cn { display: none; }

/* type helpers */
.serif-it { font-family: var(--f-serif); font-style: italic; font-weight: 400; }
.mono { font-family: var(--f-mono); }
.chinese { font-family: var(--f-cn); }

.mono-label {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600;
  color: var(--ink);
}
.mono-label .bar { width: 28px; height: 1px; background: currentColor; }
.mono-label .idx { font-weight: 700; }
.mono-label .name { color: var(--ink-soft); font-weight: 500; }
.mono-label.sm { font-size: 10px; gap: 10px; }
.mono-label.invert { color: var(--acid); }
.mono-label.invert .name { color: rgba(244,241,234,0.7); }

.mono-meta {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 500;
}

.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 22px; font-size: 14px; font-weight: 500;
  border-radius: 999px; transition: transform .18s ease, background .2s, color .2s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-pill { border-radius: 999px; }
.btn-dark { background: var(--ink); color: var(--acid); }
.btn-dark:hover { background: #1a1a1a; }
.btn-outline { background: transparent; color: var(--ink); border: 2px solid var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--acid); }
.btn-outline .btn-arrow { background: rgba(10,10,10,0.1); }
.btn-lg { padding: 19px 30px; font-size: 16px; font-weight: 650; }
.btn-lg .btn-arrow { width: 31px; height: 31px; font-size: 16px; }
.btn-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(244,241,234,0.16); font-size: 13px;
  transition: background .2s, transform .2s;
}
.btn:hover .btn-arrow { background: var(--acid); color: var(--ink); transform: translateX(2px); }

/* ════════════════════════════════════════════════════════════
   TWEAK: composition variants
   ════════════════════════════════════════════════════════════ */

/* Default (split) — already set. Adding explicit selector for parity. */
body[data-composition="split"] .hero-tagline .line-a { text-align: left; }
body[data-composition="split"] .hero-tagline .line-b { text-align: right; }

/* Center stack — everything centered, stamp under the tagline */
body[data-composition="center"] .hero-tagline .line-a,
body[data-composition="center"] .hero-tagline .line-b { text-align: center; }
body[data-composition="center"] .hero-foot {
  grid-template-columns: 1fr;
  justify-items: center; text-align: center;
}
body[data-composition="center"] .hero-promise { margin: 0 auto; }
body[data-composition="center"] .hero-cta { align-items: center; }

/* Edge to edge — full-bleed massive type with minimal gutters */
body[data-composition="edge"] .sec-hero {
  padding-left: clamp(12px, 2vw, 30px);
  padding-right: clamp(12px, 2vw, 30px);
}
body[data-composition="edge"] .hero-tagline {
  font-size: clamp(72px, 18vw, 280px);
}
body[data-composition="edge"] .hero-stamp {
  font-size: clamp(28px, 5vw, 64px);
  padding: 12px 32px 14px;
  top: clamp(280px, 38vw, 540px);
}
body[data-composition="edge"] .hero-foot {
  padding: 0 clamp(20px, 3vw, 60px);
  margin-top: clamp(40px, 5vw, 80px);
}

/* ════════════════════════════════════════════════════════════
   TWEAK: stamp form variants
   ════════════════════════════════════════════════════════════ */

/* Default rectangle styles already in .hero-stamp. */
body[data-stamp="rect"] .hero-stamp {
  border-radius: 4px;
}

/* Pill — same content, rounded ends, no rotation */
body[data-stamp="pill"] .hero-stamp {
  border-radius: 999px;
  padding: 12px 36px 14px;
  transform: rotate(0deg);
}

/* Seal — circular badge, slight rotation, text wraps inside */
body[data-stamp="circle"] .hero-stamp {
  border-radius: 50%;
  width: clamp(160px, 18vw, 240px);
  height: clamp(160px, 18vw, 240px);
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-size: clamp(18px, 2.4vw, 28px);
  line-height: 1.2;
  white-space: normal;
  transform: rotate(-6deg);
}
body[data-stamp="circle"] .hero-stamp em {
  text-decoration: none;
  display: block;
  padding: 0 18px;
}

/* None — hide entirely */
body[data-stamp="none"] .hero-stamp { display: none; }

/* ════════════════════════════════════════════════════════════
   NAV (shared across pages)
   ════════════════════════════════════════════════════════════ */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 32px;
  padding: 16px var(--gutter);
  min-height: 102px; box-sizing: border-box;
  background: var(--acid);
  border-bottom: 1px solid var(--ink);
  transition: padding .2s;
}
.nav.is-scrolled { padding-top: 10px; padding-bottom: 10px; }
.nav-brand { display: inline-flex; align-items: center; height: auto; }
.nav-logo { height: 54px; width: auto; }
.nav-links {
  display: flex; gap: 28px; justify-content: center;
  font-family: var(--f-mono); font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500;
}
.nav-links a { color: var(--ink-soft); transition: color .15s; padding: 6px 0; }
.nav-links a:hover { color: var(--ink); }
.nav-links a.is-active {
  color: var(--ink); border-bottom: 2px solid var(--ink); padding-bottom: 2px;
}
.nav-right { display: flex; align-items: center; gap: 12px; justify-content: flex-end; }

.lang-toggle {
  display: inline-flex; align-items: center; padding: 4px;
  border-radius: 999px; background: rgba(10,10,10,0.08);
  font-family: var(--f-mono); font-size: 12px; font-weight: 600;
}
.lang-btn {
  padding: 6px 14px; border-radius: 999px; color: var(--ink-faint);
  transition: background .2s, color .2s;
}
.lang-btn.is-active { background: var(--ink); color: var(--acid); }

/* ════════════════════════════════════════════════════════════
   SECTION PATTERN (Brutalist Editorial)
   Each section: relative box with ghosted index number top-right
   ════════════════════════════════════════════════════════════ */
.sec {
  position: relative;
  padding: var(--sec-py) var(--gutter);
  border-bottom: 2px solid var(--ink);
  background-image: var(--grid-bg);
  background-size: var(--grid-bs);
  overflow: hidden;
}
.sec-num {
  position: absolute;
  top: 30px;
  right: var(--gutter);
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: clamp(140px, 22vw, 260px);
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: var(--ink); opacity: 0.06;
  pointer-events: none; user-select: none;
  z-index: 0;
}
.sec > *:not(.sec-num):not(.hero-stamp) { position: relative; z-index: 1; }

/* Section headers don't get the leading bar (matches explore.html mono labels) */
.sec-eyebrow > .mono-label > .bar,
.sec-head > .mono-label > .bar { display: none; }

.sec-eyebrow {
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
  margin-bottom: clamp(28px, 3.5vw, 48px);
}
.sec-head {
  max-width: var(--max); margin: 0 auto;
  display: flex; flex-direction: column; gap: 22px;
  margin-bottom: clamp(48px, 6vw, 80px);
}
.sec-head-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
}
.sec-title {
  font-family: var(--f-sans); font-weight: 500;
  font-size: clamp(34px, 5vw, 76px); line-height: 1.0;
  letter-spacing: -0.025em; max-width: 1100px;
}
.sec-deck {
  font-size: clamp(15px, 1.4vw, 19px); line-height: 1.55;
  color: var(--ink-soft); max-width: 720px;
}

/* ════════════════════════════════════════════════════════════
   01 · BRAND PROMISE (hero)
   ════════════════════════════════════════════════════════════ */
.sec-hero {
  padding: clamp(40px, 6vw, 80px) var(--gutter) clamp(40px, 5vw, 64px);
  min-height: calc(100vh - 80px);
  display: flex; flex-direction: column;
}
.sec-hero .hero-body {
  margin: auto 0;
  display: flex; flex-direction: column;
  gap: clamp(64px, 8vw, 120px);
}
.sec-hero .hero-tagline { margin-top: 0; }
.sec-hero .hero-foot { margin-top: 0; }
.hero-tagline {
  font-family: var(--f-sans); font-weight: 600;
  font-size: clamp(44px, 10vw, 140px);
  line-height: 0.86; letter-spacing: -0.045em;
  margin: 0;
  position: relative;
}
.hero-tagline .line { display: block; }
.hero-tagline .line-a { text-align: left; }
.hero-tagline .line-b { text-align: right; margin-top: 0.04em; }
.hero-tagline .hl {
  position: relative; display: inline-block;
}
.hero-tagline .hl::after {
  content: ""; position: absolute; left: -2%; bottom: -10%;
  width: 104%; height: 14%; background: var(--ink);
  z-index: -1; transform: skew(-4deg);
}

.hero-stamp {
  position: absolute;
  right: clamp(34px, 4.6vw, 82px);
  top: clamp(101px, 8.8vw, 139px);
  left: auto;
  transform: rotate(-3deg);
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
  font-size: clamp(20px, 2.4vw, 36px);
  background: var(--acid); color: var(--ink);
  padding: 6px 22px 7px;
  border: 2px solid var(--ink); border-radius: 6px;
  z-index: 6; line-height: 1.15;
  font-family: var(--f-mono); font-style: normal; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  white-space: nowrap;
  text-align: center;
  display: inline-block;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='130'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.9' numOctaves='2' seed='3' stitchTiles='stitch' result='grain'/%3E%3CfeComponentTransfer in='grain' result='gA'%3E%3CfeFuncA type='discrete' tableValues='1 1 1 1 1 1 1 0 1 1'/%3E%3C/feComponentTransfer%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.055 0.5' numOctaves='3' seed='9' stitchTiles='stitch' result='crack'/%3E%3CfeComponentTransfer in='crack' result='cA'%3E%3CfeFuncA type='discrete' tableValues='1 1 1 1 1 1 1 1 0 1'/%3E%3C/feComponentTransfer%3E%3CfeComposite in='gA' in2='cA' operator='arithmetic' k1='1' k2='0' k3='0' k4='0' result='mul'/%3E%3CfeColorMatrix in='mul' type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='280' height='130' filter='url(%23g)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='130'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.9' numOctaves='2' seed='3' stitchTiles='stitch' result='grain'/%3E%3CfeComponentTransfer in='grain' result='gA'%3E%3CfeFuncA type='discrete' tableValues='1 1 1 1 1 1 1 0 1 1'/%3E%3C/feComponentTransfer%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.055 0.5' numOctaves='3' seed='9' stitchTiles='stitch' result='crack'/%3E%3CfeComponentTransfer in='crack' result='cA'%3E%3CfeFuncA type='discrete' tableValues='1 1 1 1 1 1 1 1 0 1'/%3E%3C/feComponentTransfer%3E%3CfeComposite in='gA' in2='cA' operator='arithmetic' k1='1' k2='0' k3='0' k4='0' result='mul'/%3E%3CfeColorMatrix in='mul' type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='280' height='130' filter='url(%23g)'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-mode: alpha; mask-mode: alpha;
}
.hero-stamp:hover { transform: rotate(3deg); }
.hero-stamp em { text-decoration: none; font-style: normal; display: inline-block; }

.hero-foot {
  display: grid; grid-template-columns: 1.3fr 1fr;
  gap: 60px; align-items: end;
  margin-top: clamp(60px, 8vw, 100px);
}
.hero-promise {
  font-size: clamp(18px, 1.8vw, 24px); line-height: 1.3;
  font-weight: 500; max-width: 720px;
}
.bold-mark { background: var(--ink); color: var(--acid); padding: 0 8px; font-weight: 700; }
.hero-cta {
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}
.hero-cta-meta { letter-spacing: 0.14em; }

/* ════════════════════════════════════════════════════════════
   02 · RESULTS OVERVIEW (ink-card stat grid)
   ════════════════════════════════════════════════════════════ */
.sec-results { }
.ro-grid {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 1.8vw, 24px);
}
.ro-card {
  padding: clamp(28px,2.8vw,38px) clamp(24px,2.4vw,30px);
  display: flex; flex-direction: column; justify-content: center; gap: 16px;
  border: 2px solid var(--ink); border-radius: 18px;
  background: var(--acid); color: var(--ink);
  min-height: 240px;
}
.ro-card-invert { background: var(--ink); color: var(--acid); }
.ro-idx {
  align-self: flex-start;
  font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: 0.18em; font-weight: 700;
  border: 1.5px solid currentColor; border-radius: 999px;
  padding: 5px 11px; opacity: 0.75;
}
.ro-v {
  font-size: clamp(40px, 4.3vw, 58px); font-weight: 700;
  letter-spacing: -0.04em; line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  display: block;
}
.ro-plus { font-size: 0.7em; opacity: 0.85; }
.ro-l {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700;
  border-top: 2px solid currentColor; padding-top: 12px;
}
.ro-s { font-size: 12px; opacity: 0.75; line-height: 1.4; }

/* ════ FINAL CTA · barred banner (shared, matches services page) ════ */
.ro-bar { max-width: var(--max); margin: clamp(22px,2.6vw,34px) auto 0; }
.ro-fig { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; flex: none; padding-left: clamp(20px,2.4vw,36px); margin-left: clamp(4px,1vw,16px); border-left: 2px solid rgba(244,241,234,0.18); }
.ro-fig-big { font-family: var(--f-sans); font-weight: 700; font-size: clamp(30px,3vw,46px); letter-spacing: -0.03em; line-height: 1; color: var(--acid); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ro-fig-sub { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(244,241,234,0.6); white-space: nowrap; }
.svc-foot { display: flex; flex-direction: column; gap: 16px; max-width: var(--max); margin: clamp(30px,3.4vw,48px) auto 0; }
.c-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; background: var(--ink); border: 2.5px solid var(--ink); border-radius: 22px; padding: clamp(26px,3vw,32px) 20px clamp(26px,3vw,32px) clamp(30px,3.4vw,40px); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.c-bar .c-l { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.c-bar .c-kick { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--acid); font-weight: 700; }
.c-bar .c-h { font-family: var(--f-sans); font-size: clamp(21px,2.2vw,30px); font-weight: 600; letter-spacing: -0.02em; color: var(--paper); line-height: 1.05; }
.c-bar .c-sub { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.04em; color: rgba(244,241,234,0.62); margin-top: 3px; }
.c-bar .c-btn { display: inline-flex; align-items: center; gap: 12px; background: var(--acid); color: var(--ink); border-radius: 999px; padding: 15px 19px 15px 26px; font-family: var(--f-sans); font-weight: 700; font-size: 15.5px; white-space: nowrap; transition: background .2s ease; flex: none; }
.c-bar .c-btn .ar { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; background: var(--ink); color: var(--acid); font-size: 16px; transition: transform .2s ease; }
.c-bar:hover { transform: translate(-2px,-2px); }
.c-bar:hover .c-btn { background: var(--paper); }
.c-bar:hover .c-btn .ar { transform: translateX(3px); }
.c-bar:active { transform: translate(2px,2px); }
.c-foot-link { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-family: var(--f-sans); font-size: 14.5px; font-weight: 500; letter-spacing: -0.005em; color: var(--ink-soft); text-decoration: none; transition: color .2s ease; }
.c-foot-link u { text-underline-offset: 3px; }
.c-foot-link:hover { color: var(--ink); }
.c-foot-link .ar { transition: transform .2s ease; }
.c-foot-link:hover .ar { transform: translateX(3px); }
@media (max-width: 760px) {
  .c-bar { flex-direction: column; align-items: flex-start; gap: 20px; }
  .ro-fig { border-left: none; padding-left: 0; margin-left: 0; }
}

/* ════════════════════════════════════════════════════════════
   03 · THE PROBLEM
   ════════════════════════════════════════════════════════════ */
.pain-list {
  max-width: var(--max); margin: 0 auto;
  border-top: 1px solid var(--ink);
}
.pain {
  display: grid; grid-template-columns: 80px 1.1fr 1fr;
  gap: clamp(28px, 4vw, 48px);
  padding: clamp(36px, 5vw, 56px) 0;
  border-bottom: 1px solid var(--ink);
  align-items: start;
}
.pain-idx {
  font-family: var(--f-mono); font-size: 13px; letter-spacing: 0.18em;
  font-weight: 700;
}
.pain-content { display: flex; flex-direction: column; gap: 16px; }
.pain-title {
  font-family: var(--f-sans); font-weight: 500;
  font-size: clamp(22px, 2.4vw, 32px); line-height: 1.15;
  letter-spacing: -0.015em;
}
.pain-body {
  font-size: clamp(15px, 1.4vw, 16.5px); line-height: 1.6; color: var(--ink-soft);
  max-width: 580px;
}
.pain-counter {
  background: var(--ink); color: var(--acid);
  padding: clamp(20px, 2.5vw, 28px);
  display: flex; flex-direction: column; gap: 14px;
  align-self: stretch; border-radius: 14px;
  transition: transform .3s cubic-bezier(.34,1.4,.64,1), box-shadow .3s cubic-bezier(.34,1.4,.64,1);
}
.pain-counter:hover { transform: scale(1.035); box-shadow: 7px 8px 0 var(--acid); }
.pain-counter .mono-label { color: var(--acid); }
.pain-counter .mono-label .bar { background: var(--acid); }
.pain-counter p { font-size: 15px; line-height: 1.55; color: var(--paper); }

/* ════════════════════════════════════════════════════════════
   04 · THE FRAMEWORK (IP Gravity System™ — orbit + flow line)
   Native section text (left, site sizes) + full-bleed diagram
   stages that render the exact v4 React designs, scaled to width.
   ════════════════════════════════════════════════════════════ */
/* Even vertical rhythm: match section 02's deck→cards gap, accounting
   for each diagram's small internal whitespace so the VISIBLE gaps match. */
.sec-framework { padding-bottom: calc(var(--sec-py) - 26px); }
.sec-framework > .sec-head:not(.fw-journey-head) {
  margin-bottom: calc(clamp(48px, 6vw, 80px) - 30px);
}
.sec-framework .fw-journey-head {
  margin-top: calc(clamp(48px, 6vw, 80px) - 30px);
  margin-bottom: calc(clamp(48px, 6vw, 80px) - 37px);
}
.fw-diagram {
  position: relative;
  margin-left: calc(-1 * var(--gutter));
  margin-right: calc(-1 * var(--gutter));
  overflow: hidden;
}
.fw-stage {
  position: absolute; top: 0; left: 50%;
  width: 1440px;
  transform-origin: top center;
  will-change: transform;
}
/* exact helper-class fonts used inside the v4 components */
.fw-stage .mono { font-family: 'Geist Mono', ui-monospace, monospace; }
.fw-stage .serif-it { font-family: 'Instrument Serif', serif; font-style: italic; }
.fw-stage .cn { font-family: 'Noto Sans SC', sans-serif; }

/* ════════════════════════════════════════════════════════════
   05 · SERVICES (teaser)
   ════════════════════════════════════════════════════════════ */
/* caption (replaces old price signal) */
.svc-caption {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-soft); font-weight: 500;
  text-align: right; line-height: 1.7;
}
.svc-caption b { color: var(--ink); font-weight: 700; }

/* shared chip */
.svc-chip {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.02em;
  padding: 6px 12px; border: 1px solid var(--ink); border-radius: 999px;
  white-space: nowrap; font-weight: 500; line-height: 1;
}

.svcA-grid {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.8vw, 26px); align-items: stretch;
  padding-top: 16px;
}
.svcA {
  position: relative;
  padding: 34px 28px 32px;
  display: flex; flex-direction: column; gap: 18px;
  border: 2px solid var(--ink); border-radius: 20px;
  box-shadow: 6px 6px 0 var(--ink);
  background: var(--acid); color: var(--ink);
  min-height: 380px;
  cursor: pointer;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s cubic-bezier(.2,.8,.2,1);
}
.svcA:hover { transform: translateY(-6px); box-shadow: 10px 14px 0 var(--ink); }
.svcA > .svcA-link { position: absolute; inset: 0; z-index: 5; border-radius: 20px; }
.svcA-top { display: flex; align-items: center; justify-content: space-between; }
.svcA-idx { font-family: var(--f-sans); font-weight: 700; font-size: 32px; letter-spacing: -0.04em; line-height: 1; }
.svcA-term {
  font-family: var(--f-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; padding: 5px 10px; border: 1px solid currentColor;
  border-radius: 999px; opacity: 0.85;
}
.svcA-name { font-size: 27px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; }
.svcA-line { font-family: var(--f-serif); font-style: italic; font-size: 22px; line-height: 1.18; }
.svcA-line .lead { font-family: var(--f-sans); font-style: normal; font-weight: 600; letter-spacing: -0.01em; }
.svcA-for { font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); }
.svcA-for b { font-family: var(--f-mono); font-size: 10px; font-style: normal; font-weight: 700; letter-spacing: 0.18em; display: block; margin-bottom: 5px; opacity: 0.75; }
.svcA .svc-chip { font-size: 11px; padding: 6px 12px; }
.svcA-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 8px; }

.svcA-feat { background: var(--ink); color: var(--acid); box-shadow: none; }
.svcA-feat .svcA-line { color: var(--acid); }
.svcA-feat .svcA-for { color: rgba(244,241,234,0.66); }
.svcA-feat .svc-chip { border-color: rgba(244,241,234,0.42); color: var(--acid); }
.svcA-flag {
  position: absolute; top: 0; left: 50%; transform: translate(-50%,-50%);
  background: var(--acid); color: var(--ink); border: 2px solid var(--ink);
  font-family: var(--f-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; padding: 6px 14px;
  white-space: nowrap; border-radius: 999px; z-index: 4;
}
.sec-services .svc-foot { margin-top: clamp(30px, 3.4vw, 48px); }
@media (max-width: 1100px) {
  .svcA-grid { grid-template-columns: 1fr; }
  .svcA { min-height: 0; }
  .svcA-flag { left: auto; right: 24px; transform: translateY(-50%); }
}

/* ════════════════════════════════════════════════════════════
   FOOTER (simple strip)
   ════════════════════════════════════════════════════════════ */
.footer {
  background: var(--ink); color: var(--paper);
  padding: 32px var(--gutter);
  border-top: 2px solid var(--acid);
}
/* Last section before the footer: drop its own bottom rule so it doesn't
   stack with the footer's top border into a doubled, thicker line. */
*:has(+ .footer) { border-bottom: none !important; }
.footer-strip {
  max-width: var(--max); margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px; flex-wrap: wrap;
}
.nav-right .btn { font-weight: 650; font-size: 16px; padding: 19px 30px; }
.nav-right .btn-arrow { width: 31px; height: 31px; font-size: 16px; }
.ft-logo { height: 50px; width: auto; }
.ft-meta {
  font-family: var(--f-mono); font-size: 12px;
  letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap;
  color: rgba(244,241,234,0.6); font-weight: 500;
}
.ft-lc { text-transform: none; }
.ft-meta a { color: inherit; transition: opacity .15s, color .15s; }
.ft-meta a:hover { opacity: 1; color: var(--acid); }

/* ════════════════════════════════════════════════════════════
   CONTACT PAGE
   ════════════════════════════════════════════════════════════ */
.sec-contact { min-height: calc(100vh - 80px); }
.contact-h1 {
  font-family: var(--f-sans); font-weight: 600;
  font-size: clamp(56px, 10vw, 168px);
  line-height: 0.9; letter-spacing: -0.04em;
  margin: 24px 0 32px;
}
.contact-h1 .serif-it { font-weight: 400; }
.contact-deck {
  max-width: 720px; font-size: clamp(16px, 1.6vw, 20px); line-height: 1.5;
  margin-bottom: clamp(40px, 5vw, 60px);
}
.contact-grid {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 0;
  border: 2px solid var(--ink);
}
.contact-form {
  padding: clamp(28px, 3.5vw, 44px);
  display: flex; flex-direction: column; gap: 26px;
  background: var(--acid); border-right: 2px solid var(--ink);
}
.cf-row { display: flex; flex-direction: column; gap: 10px; }
.cf-label {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 600; color: var(--ink);
}
.cf-num {
  font-weight: 700; padding: 2px 6px;
  background: var(--ink); color: var(--acid);
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  font: inherit; font-family: var(--f-sans); font-size: 17px;
  color: var(--ink); background: transparent;
  border: 0; border-bottom: 2px solid var(--ink);
  padding: 10px 0 10px;
  outline: none; transition: border-color .15s;
  border-radius: 0; -webkit-appearance: none; appearance: none;
}
.contact-form select { padding-right: 28px; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 12px) center, calc(100% - 6px) center; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.contact-form textarea { resize: vertical; min-height: 120px; font-family: var(--f-sans); }
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--ink-faint); }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-bottom-color: var(--ink); background: rgba(10,10,10,0.04);
}
.cf-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-top: 12px;
}

/* Aside */
.contact-aside {
  padding: clamp(28px, 3.5vw, 44px);
  display: flex; flex-direction: column; gap: 32px;
}
.ca-block { display: flex; flex-direction: column; gap: 14px; }
.ca-block-invert {
  background: var(--ink); color: var(--acid);
  padding: 24px; margin: 0 calc(-1 * clamp(28px, 3.5vw, 44px));
  border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
}
.ca-block-invert .mono-label { color: var(--acid); }
.ca-block-invert .mono-label .bar { background: var(--acid); }
.ca-line {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 18px; padding: 10px 0; border-bottom: 1px dashed currentColor;
  transition: opacity .15s;
}
.ca-line:hover { opacity: 0.65; }
.ca-line:last-of-type { border-bottom: 0; }
.ca-line-static:hover { opacity: 1; }
.ca-line-k {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-soft); font-weight: 600;
}
.ca-line-v { font-size: 15px; font-weight: 500; }
.ca-door { display: flex; flex-direction: column; gap: 6px; }
.ca-door-tier {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.22em; font-weight: 700; opacity: 0.7;
}
.ca-door-name { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; }
.ca-door-blurb { font-size: 13px; line-height: 1.5; opacity: 0.85; }
.ca-urgency {
  font-size: 13px; line-height: 1.5;
  padding: 14px 16px; border: 1px solid var(--ink);
  font-family: var(--f-cn);
}

/* ════════════════════════════════════════════════════════════
   RESULTS PAGE · HERO (Receipt)
   full-viewport hero: label top · headline left · ledger right
   ════════════════════════════════════════════════════════════ */
.rh-accent { font-family: var(--f-serif); font-style: italic; font-weight: 400; color: var(--ink); }
.rhD { padding: clamp(40px,6vw,80px) var(--gutter) clamp(40px,5vw,64px); border-bottom: 2px solid var(--ink); position: relative;
  display: grid; grid-template-columns: 1.02fr 0.98fr; grid-template-rows: auto 1fr;
  column-gap: clamp(36px,5vw,80px); row-gap: clamp(28px,4vw,52px);
  min-height: calc(100vh - 80px); box-sizing: border-box;
  background-image: var(--grid-bg); background-size: var(--grid-bs); }
.rhD .sec-num { top: clamp(20px,3vw,36px); right: var(--gutter); }
.rhD-eyebrow { grid-column: 1 / -1; align-self: start; white-space: nowrap; }
.rhD-eyebrow .bar { display: none; }
.rhD-headcol { grid-column: 1; grid-row: 2; align-self: center; min-width: 0; }
.rhD-h1 { font-family: var(--f-sans); font-weight: 600; font-size: clamp(56px,7.6vw,128px); line-height: 0.9; letter-spacing: -0.045em; }
.rhD-deck { max-width: 460px; margin-top: clamp(20px,2.4vw,32px); font-size: clamp(17px,1.6vw,22px); line-height: 1.45; font-weight: 500; }
.rhD-receipt { grid-column: 2; grid-row: 2; align-self: center; min-width: 0;
  transform: scale(1.07); transform-origin: right center;
  transition: transform .4s cubic-bezier(.34,1.5,.6,1);
  background: var(--paper); border: 2px solid var(--ink); padding: clamp(20px,2vw,28px) clamp(24px,2.4vw,32px) clamp(16px,1.8vw,22px);
  box-shadow: 10px 10px 0 var(--ink); }
.rhD-receipt:hover { transform: scale(1.07) rotate(-1.8deg); }
.rhD-lines { flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; margin-top: clamp(8px,1.2vw,16px); }
.rhD-rhead { display: flex; align-items: center; justify-content: space-between; padding-bottom: 20px;
  border-bottom: 2px dashed var(--ink); font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; }
.rhD-line { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: clamp(9px,1.1vw,14px) 0;
  border-bottom: 1px dashed var(--rule); font-family: var(--f-mono); }
.rhD-line .k { font-size: 11.5px; letter-spacing: 0.05em; color: var(--ink-soft); text-transform: uppercase; line-height: 1.3; }
.rhD-line .v { font-family: var(--f-sans); font-weight: 700; font-size: clamp(24px,2.4vw,32px); letter-spacing: -0.02em; white-space: nowrap; }
.rhD-receipt .rhD-lines .rhD-line:last-child { border-bottom: none; }
.rhD-total { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: clamp(10px,1.2vw,14px); padding-top: clamp(10px,1.2vw,14px);
  border-top: 2px solid var(--ink); font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.rhD-total > span { white-space: nowrap; color: var(--ink-soft); }
.rhD-total b { font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: clamp(19px,1.9vw,24px); letter-spacing: 0; text-transform: none; white-space: nowrap; }
@media (max-width: 1024px) {
  .rhD { grid-template-columns: 1fr; grid-template-rows: auto auto auto; min-height: 0; row-gap: clamp(28px,5vw,44px); }
  .rhD-headcol, .rhD-receipt { grid-column: 1; grid-row: auto; }
  .rhD-receipt { transform: none; justify-self: start; }
  .rhD-receipt:hover { transform: rotate(-1.8deg); }
}

/* ════════════════════════════════════════════════════════════
   STUB-PAGE PLACEHOLDER STYLES
   (used on Results / Services / About / Contact while we build)
   ════════════════════════════════════════════════════════════ */
.stub-hero {
  padding: clamp(80px, 10vw, 140px) var(--gutter);
  border-bottom: 2px solid var(--ink); position: relative;
  background-image: var(--grid-bg); background-size: var(--grid-bs);
}
.stub-hero .sec-num { top: clamp(20px, 3vw, 36px); right: var(--gutter); }
.stub-h1 {
  font-family: var(--f-sans); font-weight: 600;
  font-size: clamp(64px, 11vw, 200px);
  line-height: 0.88; letter-spacing: -0.045em;
  margin-top: 32px;
}
.stub-h1 .serif-it { font-weight: 400; color: var(--ink-soft); }
.stub-deck {
  max-width: 760px; margin-top: 32px;
  font-size: clamp(16px, 1.6vw, 20px); line-height: 1.5;
}
.stub-placeholder {
  max-width: var(--max); margin: 80px auto 0;
  border: 2px dashed var(--ink); padding: 60px;
  text-align: center;
}
.stub-placeholder h2 {
  font-size: clamp(28px, 3vw, 40px); font-weight: 600; letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.stub-placeholder p {
  font-size: 15px; color: var(--ink-soft); max-width: 540px; margin: 0 auto;
}
.stub-toc {
  max-width: var(--max); margin: 40px auto 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0;
  border: 2px solid var(--ink);
}
.stub-toc-item {
  padding: 26px 22px;
  border-right: 2px solid var(--ink);
  display: flex; flex-direction: column; gap: 8px;
  background: var(--acid);
}
.stub-toc-item:last-child { border-right: none; }
.stub-toc-idx {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em;
  font-weight: 700;
}
.stub-toc-name { font-size: 20px; font-weight: 500; letter-spacing: -0.015em; }
.stub-toc-blurb { font-size: 13px; line-height: 1.5; color: var(--ink-soft); }

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1180px) {
  .ro-grid, .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .svc:nth-child(2n) { border-right: none; }
  .svc:nth-child(-n+1) { border-bottom: 2px solid var(--ink); }
}
@media (max-width: 960px) {
  .nav-links { display: none; }
  .hero-foot { grid-template-columns: 1fr; gap: 32px; align-items: stretch; }
  .hero-cta { align-items: flex-start; }
  .hero-tagline .line-b { text-align: left; }
  .pain { grid-template-columns: 1fr; gap: 18px; }
  .ideology-spread { grid-template-columns: 1fr; gap: 24px; }
  .ro-grid, .svc-grid { grid-template-columns: 1fr; }
  .svc { border-right: none; border-bottom: 2px solid var(--ink); }
  .svc:last-child { border-bottom: none; }
  .ro-anchor { grid-template-columns: 1fr; gap: 10px; text-align: center; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-form { border-right: 0; border-bottom: 2px solid var(--ink); }
  .ca-block-invert { margin: 0; }
}
@media (max-width: 640px) {
  .nav-right .btn { display: none; }
  .hero-stamp { font-size: 20px; top: clamp(100px, 22vw, 200px); }
  .footer-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════
   PAGE-LOAD ENTRANCE · subtle fade-up (all pages)
   Visible end-state is the base; we animate FROM hidden, gated on
   motion preference so print / reduced-motion show content normally.
   ════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════
   PAGE-LOAD ENTRANCE · row-by-row reveal (driven by main.js)
   main.js tags content blocks with .rv (hidden) and .rv-in (shown),
   grouped by visual row so same-row items rise together and rows
   cascade top-to-bottom. .rv is only added when motion is allowed;
   print + reduced-motion always show content.
   ════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  .rv {
    opacity: 0; transform: translateY(30px);
    will-change: opacity, transform;
  }
  /* Keyframe animation (not transition): plays from 0% even when the element is
     revealed in the same paint frame, so the first/above-the-fold section fades
     up reliably. `backwards` fill keeps it hidden during the stagger delay but
     releases control after, so resting/hover transforms (e.g. the raised feature
     card) are NOT clobbered by the animation end-state. */
  .rv-in {
    opacity: 1; transform: none;
    animation: rvRise 1.15s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
  }
}
@keyframes rvRise {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: none; }
}
@media print { .rv { opacity: 1 !important; transform: none !important; } }

/* ════════════════════════════════════════════════════════════
   CUSTOM CURSOR · registration target (fine-pointer only)
   A compact crosshair ring with a live coordinate readout. Colour
   adapts to the background under the pointer (ink on light, paper
   on dark) and the ring snaps open with an action label over
   anything clickable. JS adds .ss-cursor-ready on a fine pointer.
   ════════════════════════════════════════════════════════════ */
@media (pointer: fine) {
  html.ss-cursor-ready, html.ss-cursor-ready * { cursor: none !important; }
  html.ss-cursor-ready input, html.ss-cursor-ready textarea,
  html.ss-cursor-ready select, html.ss-cursor-ready [contenteditable="true"] { cursor: auto !important; }

  .ss-cursor {
    position: fixed; top: 0; left: 0; z-index: 99999;
    pointer-events: none; opacity: 0;
    transition: opacity 0.22s ease;
    --cc: #0a0a0a; --cc-ink: #f4f1ea;
  }
  .ss-cursor.on { opacity: 1; }

  .reg { position: fixed; top: 0; left: 0; transform: translate(-50%,-50%); transition: transform .16s cubic-bezier(.34,1.4,.5,1); }
  .reg-ring { position: absolute; left: 50%; top: 50%; width: 13px; height: 13px; border: 1.5px solid var(--cc); border-radius: 50%; transform: translate(-50%,-50%); transition: width .16s, height .16s, border-color .12s; }
  .reg-tick { position: absolute; left: 50%; top: 50%; background: var(--cc); transition: background .12s; }
  .reg-tick.h { width: 20px; height: 1.2px; transform: translate(-50%,-50%); }
  .reg-tick.v { width: 1.2px; height: 20px; transform: translate(-50%,-50%); }
  .reg-dot { position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: var(--cc); transform: translate(-50%,-50%); }
  .reg-read {
    position: fixed; transform: translate(13px, 11px);
    background: var(--cc); color: var(--cc-ink);
    font-family: var(--f-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.07em;
    padding: 3px 6px; border-radius: 4px; white-space: nowrap;
    transition: background .12s, color .12s, opacity .12s;
  }
  .reg.hot .reg-ring { width: 20px; height: 20px; }
  .reg.hot + .reg-read { opacity: 0.62; }
}
@media (prefers-reduced-motion: reduce) {
  .reg, .reg-ring, .reg-tick { transition: none; }
}

/* ════════════════════════════════════════════════════════════
   MOBILE NAV · hamburger (injected by main.js, shown ≤960px)
   Desktop (>960px) is untouched — the burger stays display:none.
   ════════════════════════════════════════════════════════════ */
.nav-burger {
  display: none; flex: none;
  width: 40px; height: 40px;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  border: 0; border-radius: 0; background: none; padding: 0;
}
.nav-burger span {
  display: block; width: 21px; height: 2px; background: var(--ink);
  transition: transform .25s ease, opacity .2s ease;
}
.nav-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity: 0; }
.nav-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@keyframes navFadeIn { from { opacity: 0; } to { opacity: 1; } }
.nav-mobile-backdrop {
  position: fixed; inset: 0; z-index: 58;
  background: rgba(10,10,10,0.45);
  opacity: 0; pointer-events: none;
}
.nav-mobile-backdrop.is-open { opacity: 1; pointer-events: auto; animation: navFadeIn .26s ease; }
.nav-mobile {
  position: fixed; top: 0; right: 0; bottom: 0; left: 52px; z-index: 60;
  background: var(--ink); color: var(--paper);
  padding: 26px 26px 30px;
  display: flex; flex-direction: column;
  overflow-y: auto;
  box-shadow: -18px 0 50px rgba(0,0,0,0.35);
  transform: translateX(101%); pointer-events: none;
}
.nav-mobile.is-open { transform: translateX(0); pointer-events: auto; animation: navFadeIn .28s ease; }
.nav-mobile-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 40px; }
.nav-mobile-head .nav-brand { display: inline-flex; align-items: center; }
.nav-mobile-head .nav-logo { height: 24px; width: auto; }
.nav-mobile-close { position: relative; width: 40px; height: 40px; border: 0; background: none; padding: 0; flex: none; cursor: pointer; }
.nav-mobile-close span { position: absolute; left: 9px; top: 19px; width: 22px; height: 2px; background: var(--acid); }
.nav-mobile-close span:nth-child(1) { transform: rotate(45deg); }
.nav-mobile-close span:nth-child(2) { transform: rotate(-45deg); }
.nav-mobile-links { display: flex; flex-direction: column; gap: 6px; }
.nav-mobile .m-link {
  display: block; font-family: var(--f-sans); font-weight: 600;
  font-size: 32px; letter-spacing: -0.015em; line-height: 1.12;
  color: var(--paper); padding: 13px 0;
  transition: color .15s ease;
}
.nav-mobile .m-link:hover,
.nav-mobile .m-link.is-active { color: var(--acid); }
.nav-mobile-cta {
  align-self: stretch; width: 100%; margin-top: 26px;
  justify-content: space-between;
  font-size: 16px; font-weight: 650; padding: 18px 24px;
}
.nav-mobile-cta .btn-arrow { width: 31px; height: 31px; font-size: 16px; }
/* match the section-02 .c-btn: acid pill -> paper on hover, ink arrow-circle */
.nav-mobile .nav-mobile-cta.btn-dark { background: var(--acid); color: var(--ink); border-color: var(--acid); }
.nav-mobile .nav-mobile-cta.btn-dark:hover { background: var(--paper); }
.nav-mobile .nav-mobile-cta.btn-dark .btn-arrow,
.nav-mobile .nav-mobile-cta.btn-dark:hover .btn-arrow { background: var(--ink); color: var(--acid); }

@media (max-width: 960px) {
  .nav-burger { display: inline-flex; }
  .nav-right .btn { display: none; }
  /* nav-links is display:none here, which collapses the 3-col grid and strands
     the burger in the middle 1fr track. Use a 2-col edge-to-edge layout so the
     logo sits at the left gutter and the burger at the right gutter. */
  .nav { grid-template-columns: auto auto; justify-content: space-between; }
}
@media (min-width: 961px) {
  .nav-mobile, .nav-mobile-backdrop { display: none; }
}

/* ════════════════════════════════════════════════════════════
   MOBILE DESIGN SYSTEM (≤640px) · mobile-only — desktop untouched.
   One consistent type scale + spacing rhythm across every page.
   Display 38 · Section title 27 · Card title 21 · Body 16 · Label 11
   ════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  :root {
    --gutter: 22px;
    --sec-py: 56px;
  }

  /* page background under the footer (bottom overscroll / fast scroll) reads as
     the acid body bg behind the sections. Paint ink below the footer so the
     overscroll strip matches the footer instead of flashing yellow. */
  /* mobile: IP Gravity System™ label beside the header logo (header nav only,
     not the drawer's cloned brand) */
  .nav > .nav-brand::after {
    content: "IP Gravity System\2122";
    margin-left: 11px; padding-left: 11px;
    border-left: 1.5px solid rgba(10,10,10,0.28);
    font-family: var(--f-mono); font-weight: 600; font-size: 9.5px;
    letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.3;
    color: var(--ink); max-width: 96px; white-space: normal; align-self: center;
  }
  .footer { box-shadow: 0 100vh 0 var(--ink); padding-bottom: 56px; }

  /* ---- ghost section numerals: smaller, quieter ---- */
  .sec-num { font-size: 74px; top: 20px; opacity: 0.05; }

  /* ---- section heading system (shared on every page) ---- */
  .sec-eyebrow { margin-bottom: 22px; gap: 14px; }
  .sec-head { gap: 14px; margin-bottom: 28px; }
  .sec-head-row { gap: 12px; }
  .sec-title { font-size: 27px; line-height: 1.12; letter-spacing: -0.02em; }
  .sec-deck {
    font-size: 16px !important; line-height: 1.55;
    max-width: 100% !important; white-space: normal !important;
  }
  .mono-meta { font-size: 10.5px; }

  /* ---- HOME · 01 hero ---- */
  /* fit one screen below the sticky nav and centre the content vertically */
  .sec-hero { min-height: calc(100svh - 102px); justify-content: center; padding-top: 24px; padding-bottom: 24px; }
  .sec-hero .hero-body { gap: 26px; }
  .sec-hero .mono-meta { display: none; }
  .hero-tagline .line-a {
    font-size: 44px !important; line-height: 1.0; letter-spacing: -0.03em;
  }
  /* stamp removed on mobile (kept on desktop only) */
  .hero-stamp {
    display: none !important;
  }
  .hero-foot { gap: 22px; }
  .hero-promise { font-size: 16.5px; line-height: 1.5; }
  .hero-cta { align-items: stretch; width: 100%; }
  .hero-cta .btn-lg { width: 100%; justify-content: space-between; padding: 17px 22px; }

  /* ---- HOME · 02 stat cards ---- */
  .ro-card { min-height: 0; padding: 24px 22px; gap: 12px; border-radius: 16px; }
  .ro-v { font-size: 38px; }
  .ro-l { font-size: 10.5px; }

  /* ---- shared barred CTA ---- */
  .c-bar { padding: 24px 22px; border-radius: 18px; align-items: stretch; }
  .c-bar .c-l { align-items: flex-start; text-align: left; width: 100%; }
  .c-bar .c-h { font-size: 20px; }
  .c-bar .c-btn { width: 100%; justify-content: center; }

  /* ---- HOME · 03 problem ---- */
  .pain { padding: 26px 0; gap: 14px; }
  .pain-title { font-size: 22px; }
  .pain-body { font-size: 15px; }
  .pain-counter { padding: 20px; border-radius: 12px; }

  /* ---- HOME · 05 service teaser cards ---- */
  /* mobile-only: drop the right-aligned section caption ("Choose your path.") */
  .svc-caption { display: none; }
  .svcA-grid { gap: 30px; }
  .svcA { min-height: 0; padding: 26px 22px; gap: 14px; border-radius: 16px; box-shadow: 5px 5px 0 var(--ink); }
  .svcA-name { font-size: 23px; }
  .svcA-line { font-size: 18px; }
  .svcA-idx { font-size: 28px; }

  /* HOME headlines bumped slightly (home only, mobile only) */
  [data-page="home"] .sec-title { font-size: 30px; }

  /* ---- HOME · 04 framework diagrams ----
     Fit the orbit + journey diagrams edge-to-edge at phone width (no horizontal
     scroll). The block goes full-bleed and the JS scales the 1440px stage to
     the available width. */
  [data-page="home"] .fw-diagram {
    overflow: hidden;
    margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter));
  }
  /* §04 spacing: the desktop whitespace-compensation hacks don't hold at mobile
     scale, leaving the timeline almost touching the bottom rule. Reset to clean
     symmetric spacing and give both diagrams breathing room. */
  .sec-framework { padding-bottom: 30px; }
  .sec-framework > .sec-head:not(.fw-journey-head) { margin-bottom: 30px; }
  .sec-framework .fw-orbit { margin-top: 6px; margin-bottom: 20px; }
  .sec-framework .fw-journey-head { margin-top: 30px; margin-bottom: 16px; }
  .sec-framework .fw-flow { margin-top: 6px; margin-bottom: 26px; }

  /* ---- FOOTER (finalized: centered, one contact line per row) ---- */
  .footer-strip { flex-direction: column; align-items: center; text-align: center; gap: 16px; }
  .ft-meta,
  [data-page] .ft-meta { white-space: normal !important; line-height: 1.75; font-size: 11.5px; }
  .footer .ft-sep { display: none; }
  .footer .ft-item { display: block; }

  /* ---- mobile menu links (drawer, B-style large) ---- */
  .nav-mobile .m-link { font-size: 32px; }
}

/* ════════════════════════════════════════════════════════════
   SITE WIDTH CAP
   Above --site-max the content band stops growing and centers;
   the section background/borders stay full-bleed. Below the cap,
   the normal --gutter applies (so mobile/tablet are untouched).
   ════════════════════════════════════════════════════════════ */
.nav,
.sec,
.footer,
.rhD,
.stub-hero {
  padding-inline: max(var(--gutter), calc((100% - var(--site-max)) / 2));
}