/* ═══════════════════════════════════════════════════════════
   UXLABS — AX Proposal Landing
   Editorial monochrome. Restrained. Type-driven.
   ═══════════════════════════════════════════════════════════ */

/* ── tokens ────────────────────────────────────────────── */
:root {
  /* palette — warm paper + deep ink, no saturation */
  --paper:        oklch(97.2% 0.006 85);
  --paper-dim:    oklch(94.5% 0.006 85);
  --paper-line:   oklch(88%   0.006 85);
  --ink:          oklch(18%   0.015 270);
  --ink-soft:     oklch(34%   0.012 270);
  --ink-mute:     oklch(52%   0.010 270);
  --ink-faint:    oklch(74%   0.008 270);

  --dark-paper:   oklch(14%   0.012 270);
  --dark-line:    oklch(30%   0.012 270);
  --dark-text:    oklch(96%   0.006 85);
  --dark-mute:    oklch(80%   0.008 85);
  --dark-faint:   oklch(56%   0.010 270);

  /* type */
  --f-sans:   'Pretendard Variable', Pretendard, ui-sans-serif, system-ui, sans-serif;
  --f-serif:  'Fraunces', 'Noto Serif KR', 'Nanum Myeongjo', ui-serif, Georgia, serif;
  --f-mono:   'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-micro:  clamp(10.5px, 0.72vw, 11.5px);
  --fs-small:  clamp(12px,   0.82vw, 13px);
  --fs-body:   clamp(14.5px, 0.98vw, 16px);
  --fs-lede:   clamp(17px,   1.4vw,  22px);
  --fs-h4:     clamp(18px,   1.45vw, 22px);
  --fs-h3:     clamp(22px,   1.9vw,  30px);
  --fs-h2:     clamp(34px,   4.2vw,  68px);
  --fs-hero:   clamp(30px,   4vw,    64px);
  --fs-num-sm: clamp(32px,   3.8vw,  56px);
  --fs-num-md: clamp(48px,   5.6vw,  96px);
  --fs-num-lg: clamp(64px,   8vw,   140px);

  /* layout */
  --page-px:    clamp(20px,  4vw, 72px);
  --col-max:    1440px;
  --rail:       clamp(60px, 9vw, 140px); /* left gutter carrying section nums */

  /* motion */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo:  cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── reset ─────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

html, body { margin: 0; padding: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.005em;
  font-feature-settings: 'ss01','ss02','cv01','cv02','kern';
  overflow-wrap: break-word;
  overflow-x: hidden;
}

/* Korean line-break sanity: keep words together in prose */
h1, h2, h3, h4, h5, p, li, blockquote,
.section-title, .hero-display, .contact-statement,
.section-lede, .hero-kicker, .stat-body, .cause-body,
.korea-context p, .two-col-item p, .steps p,
.services p, .principles-list p, .arch-layers p,
.phase-body li, .selection-list li, .reframe-col li,
.usecases-grid li, .two-col-list li {
  word-break: keep-all;
  line-break: strict;
}

img, svg, video { display: block; max-width: 100%; }

button { font: inherit; cursor: pointer; }

a {
  color: inherit;
  text-decoration: none;
}

em {
  font-family: var(--f-serif);
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.02em;
}
/* latin-only emphasis inside headlines uses italic */
em[lang="en"] { font-style: italic; }

::selection {
  background: var(--ink);
  color: var(--paper);
}

/* ══════════════════════════════════════════════════════════
   MASTHEAD
   ══════════════════════════════════════════════════════════ */

.masthead {
  position: sticky;
  top: 0;
  z-index: 80;
  background: color-mix(in oklch, oklch(13% 0.018 275) 72%, transparent);
  backdrop-filter: saturate(140%) blur(18px);
  -webkit-backdrop-filter: saturate(140%) blur(18px);
  border-bottom: 1px solid oklch(100% 0 0 / 0.08);
  transition: background 0.4s var(--ease-out),
              border-color 0.4s var(--ease-out);
}
/* over dark hero: match the hero's exact dark color so the bar blends in.
   Must be solid (not a translucent blend) because the body beneath is
   light paper — a transparent masthead would reveal paper, not hero. */
.masthead.is-over-dark {
  background: oklch(13% 0.018 275);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
/* over dark hero: dark tinted bar + off-white text */
.masthead.is-over-dark .wordmark,
.masthead.is-over-dark .primary-nav a {
  color: oklch(96% 0.006 85);
}
.masthead.is-over-dark .wordmark-en {
  color: oklch(68% 0.008 85);
  border-left-color: oklch(38% 0.010 270);
}
.masthead.is-over-dark .nav-cta {
  background: oklch(96% 0.006 85);
  border-color: oklch(96% 0.006 85);
  color: oklch(14% 0.012 270) !important;
}
.masthead.is-over-dark .nav-cta:hover {
  background: oklch(88% 0.006 85);
  border-color: oklch(88% 0.006 85);
  color: oklch(14% 0.012 270) !important;
}
.masthead.is-over-dark .nav-toggle span { background: oklch(96% 0.006 85); }

/* after scrolling onto paper, flip bar to paper tint */
.masthead.is-scrolled:not(.is-over-dark) {
  background: color-mix(in oklch, oklch(97.2% 0.006 85) 88%, transparent);
  border-bottom-color: oklch(88% 0.006 85);
}

.masthead-inner {
  max-width: var(--col-max);
  margin: 0 auto;
  padding: 16px var(--page-px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
}
.wordmark-img {
  display: block;
  width: auto;
  height: 18px;
}
/* default state: show dark-on-light logo */
.wordmark-img--on-dark { display: none; }
/* over dark hero: swap to white logo */
.masthead.is-over-dark .wordmark-img--on-light { display: none; }
.masthead.is-over-dark .wordmark-img--on-dark { display: block; }

.primary-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 32px);
}
.primary-nav a {
  font-size: 15px;
  letter-spacing: -0.005em;
  color: var(--ink-soft);
  position: relative;
  padding: 4px 0;
  transition: color .3s var(--ease-out);
}
.primary-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -1px;
  height: 1px;
  background: currentColor;
  transition: right .4s var(--ease-expo);
}
.primary-nav a:hover { color: var(--ink); }
.primary-nav a:hover::after { right: 0; }

.nav-cta {
  color: var(--paper) !important;
  font-weight: 600;
  background: var(--ink);
  border: 1px solid var(--ink);
  padding: 8px 16px !important;
  border-radius: 999px;
  transition: background .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out);
}
.nav-cta::after { display: none !important; }
.nav-cta:hover {
  background: oklch(28% 0.015 270);
  border-color: oklch(28% 0.015 270);
  color: var(--paper) !important;
}

.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  position: relative;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--ink);
  position: absolute;
  left: 5px;
  transition: transform .3s var(--ease-out);
}
.nav-toggle span:nth-child(1) { top: 12px; }
.nav-toggle span:nth-child(2) { top: 19px; }

@media (max-width: 860px) {
  /* backdrop-filter creates a containing block for position:fixed descendants,
     which breaks the full-screen mobile nav. kill it on mobile — the blur
     isn't load-bearing here anyway. */
  .masthead {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .primary-nav {
    position: fixed;
    top: 65px;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--paper);
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 40px var(--page-px);
    gap: 24px;
    border-bottom: 1px solid var(--paper-line);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transform: translateY(-8px);
    transition:
      opacity .3s var(--ease-out),
      transform .4s var(--ease-expo),
      visibility 0s linear .3s;
    z-index: 70;
    overflow-y: auto;
  }
  .primary-nav.is-open {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translateY(0);
    transition:
      opacity .3s var(--ease-out),
      transform .4s var(--ease-expo),
      visibility 0s linear 0s;
  }
  .primary-nav a { font-size: 20px; }
  .primary-nav .nav-cta { margin-top: 8px; }
  /* mobile panel always has paper bg; force readable colors regardless of is-over-dark */
  .masthead .primary-nav a,
  .masthead.is-over-dark .primary-nav a {
    color: var(--ink-soft);
  }
  .masthead .primary-nav a:hover,
  .masthead.is-over-dark .primary-nav a:hover {
    color: var(--ink);
  }
  .masthead.is-over-dark .primary-nav .nav-cta {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper) !important;
  }
  .nav-toggle { display: block; }
  .nav-toggle.is-open span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }
}

/* ══════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════ */

.hero {
  min-height: calc(100vh - 65px);
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 0 var(--page-px);
  border-bottom: 1px solid var(--paper-line);
  position: relative;
  overflow: hidden;
}

/* dark hero palette: deep warm ink, not black */
.hero--dark {
  --paper: oklch(13% 0.018 275);
  --paper-line: oklch(26% 0.018 275);
  --ink: oklch(96% 0.006 85);
  --ink-soft: oklch(80% 0.008 85);
  --ink-mute: oklch(62% 0.010 270);
  --ink-faint: oklch(48% 0.014 270);

  background: oklch(13% 0.018 275);
  color: var(--ink);
  border-bottom-color: oklch(22% 0.018 275);
}

/* ensure descendants inherit the flipped palette */
.hero--dark .hero-display,
.hero--dark .hero-kicker,
.hero--dark .hero-rotator,
.hero--dark .link-cta,
.hero--dark .hero-proof-list li,
.hero--dark .contact-text {
  color: var(--ink);
}

/* bottom proof strip */
.hero-proof {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: clamp(14px, 2vw, 20px);
  padding: 28px 0 36px;
  border-top: 1px solid var(--paper-line);
  align-items: center;
  max-width: var(--col-max);
  margin: 0 auto;
  width: 100%;
  text-align: center;
}
.hero-proof .hero-proof-list { justify-content: center; }
.hero-proof-label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.hero-proof-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 2vw, 36px) clamp(20px, 2.6vw, 48px);
  align-items: center;
}
.hero-proof-list li {
  display: flex;
  align-items: center;
  height: 22px;
  word-break: normal;
}
.hero-proof-list img {
  height: 22px;
  width: auto;
  max-width: 110px;
  object-fit: contain;
  /* source logos may be any color — normalize to white on dark hero */
  filter: brightness(0) invert(1);
  opacity: 0.82;
  transition: opacity .25s var(--ease-out);
}
.hero-proof-list li:hover img { opacity: 1; }

/* text fallback styling (when logo PNG is missing) */
.hero-proof-list li.is-textfallback {
  font-size: clamp(14px, 1.05vw, 17px);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
  height: auto;
}
.hero-proof-list li.is-textfallback + li.is-textfallback::before {
  content: "·";
  margin-right: clamp(18px, 2.4vw, 40px);
  color: var(--ink-faint);
  font-weight: 400;
}
@media (max-width: 720px) {
  .hero-proof { grid-template-columns: 1fr; gap: 12px; padding: 20px 0 28px; }
  .hero-proof-list li { font-size: 13px; }
  .hero-proof-list { gap: 4px 16px; }
  .hero-proof-list li + li::before { margin-right: 16px; }
}

/* ══════════════════════════════════════════════════════════
   HERO — AMBIENT LAYERS
   grain texture, drifting hairlines. restrained motion.
   ══════════════════════════════════════════════════════════ */

.hero-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

/* ambient glow: dim champagne radial — candlelight on cool ink */
.hero-glow {
  position: absolute;
  top: -30%;
  left: -20%;
  width: 90%;
  height: 140%;
  background: radial-gradient(
    ellipse at center,
    oklch(52% 0.024 85 / 0.30) 0%,
    oklch(30% 0.012 85 / 0.14) 32%,
    transparent 66%
  );
  filter: blur(70px);
  animation: glow-drift 28s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  will-change: transform;
}
@keyframes glow-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(22%, 6%, 0) scale(1.05); }
  66%      { transform: translate3d(45%, -4%, 0) scale(0.98); }
}

/* grain: SVG feTurbulence noise — screen-blend on dark for paper effect */
.hero-grain {
  position: absolute;
  inset: -20%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.9'/></svg>");
  opacity: 0.09;
  mix-blend-mode: screen;
  animation: grain-drift 14s steps(6) infinite;
  will-change: transform;
}
@keyframes grain-drift {
  0%   { transform: translate3d(0, 0, 0); }
  20%  { transform: translate3d(-2%, 1%, 0); }
  40%  { transform: translate3d(1.5%, -1.5%, 0); }
  60%  { transform: translate3d(-1%, 2%, 0); }
  80%  { transform: translate3d(2%, -1%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* (hairlines removed — the single glow + grain carry the atmosphere) */

/* ── data grid: generative pulse-from-center bed ──────────
   Sits between the warm glow and the grain. Mouse mask creates
   a soft spotlight that follows the cursor; baseline opacity keeps
   the grid visible everywhere. */
.hero-datagrid {
  position: absolute;
  inset: 0;
  display: grid;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
  --mouse-x: 50%;
  --mouse-y: 42%;
  -webkit-mask-image: radial-gradient(
    circle 420px at var(--mouse-x) var(--mouse-y),
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.55) 55%,
    rgba(0, 0, 0, 0.32) 100%
  );
          mask-image: radial-gradient(
    circle 420px at var(--mouse-x) var(--mouse-y),
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.55) 55%,
    rgba(0, 0, 0, 0.32) 100%
  );
}
.hero-datagrid .cell {
  background-color: oklch(92% 0.012 85);
  opacity: var(--opacity-min, 0.03);
  border-radius: 1px;
  animation: hero-cell-pulse var(--dur, 5.5s) ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
  will-change: opacity;
}
@keyframes hero-cell-pulse {
  from { opacity: var(--opacity-min, 0.04); }
  to   { opacity: var(--opacity-max, 0.38); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-datagrid .cell {
    animation: none;
    opacity: calc((var(--opacity-min, 0.04) + var(--opacity-max, 0.38)) / 2);
  }
}

/* ══════════════════════════════════════════════════════════
   HERO — LOAD SEQUENCE
   elements stagger in, one shot on first paint.
   ══════════════════════════════════════════════════════════ */

[data-hero-in] {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  animation: hero-in 1.1s var(--ease-expo) forwards;
  will-change: opacity, transform;
}
[data-hero-in="1"] { animation-delay: 0.04s; }
[data-hero-in="2"] { animation-delay: 0.14s; }
[data-hero-in="3"] { animation-delay: 0.26s; }
[data-hero-in="4"] { animation-delay: 0.46s; }
[data-hero-in="5"] { animation-delay: 0.58s; }
[data-hero-in="6"] { animation-delay: 0.70s; }

@keyframes hero-in {
  to { opacity: 1; transform: none; }
}

.hero-proof {
  opacity: 0;
  animation: hero-in 1.1s var(--ease-expo) forwards;
  animation-delay: 0.85s;
}

/* hero-grid children must sit above the ambient layer */
.hero-grid,
.hero-proof { position: relative; z-index: 2; }

/* the hero-display spans become block-level so they stack */
.hero-display .hero-line {
  display: block;
}

/* ══════════════════════════════════════════════════════════
   HERO — ROTATING TAGLINE
   editorial serif italic word cycles in place.
   ══════════════════════════════════════════════════════════ */

.hero-rotating {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0;
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 1.6vw, 24px);
  letter-spacing: -0.012em;
  color: var(--ink);
  line-height: 1.3;
  padding: 10px 0;
  border-top: 1px solid color-mix(in oklch, var(--ink) 18%, transparent);
  border-bottom: 1px solid color-mix(in oklch, var(--ink) 18%, transparent);
  max-width: 60ch;
}

.hero-rotating-prefix {
  font-family: var(--f-mono);
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
  white-space: nowrap;
  padding-right: 6px;
  border-right: 1px solid var(--paper-line);
  transform: translateY(-2px);
}

.hero-rotator {
  position: relative;
  display: inline-block;
  min-height: 1.3em;
  flex: 1 1 auto;
}

.hero-rotator-word {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  color: var(--ink);
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity 0.65s var(--ease-expo),
    transform 0.8s var(--ease-expo);
  pointer-events: none;
  will-change: opacity, transform;
  word-break: normal;
}
.hero-rotator-word.is-active {
  opacity: 1;
  transform: none;
  position: relative;
  pointer-events: auto;
}
.hero-rotator-word.is-leaving {
  opacity: 0;
  transform: translate3d(0, -14px, 0);
}

@media (max-width: 720px) {
  .hero-rotating {
    font-size: 17px;
    gap: 8px;
    padding: 10px 0;
  }
  .hero-rotating-prefix {
    border-right: 0;
    padding-right: 0;
    transform: none;
  }
}

/* accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-grain,
  .hero-glow { animation: none !important; }
  [data-hero-in],
  .hero-proof {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .hero-rotator-word {
    transition: opacity 0.3s linear !important;
    transform: none !important;
  }
}

.hero-grid {
  max-width: var(--col-max);
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vh, 56px);
  position: relative;
  align-content: center;
  justify-items: center;
  text-align: center;
  padding: clamp(60px, 10vh, 120px) 0;
}
.hero-grid .hero-display,
.hero-grid .hero-kicker,
.hero-grid .hero-rotating { margin-left: auto; margin-right: auto; }
.hero-grid .hero-rotating { justify-content: center; }
.hero-grid .hero-actions { justify-content: center; }

.hero-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0;
}
.hero-eyebrow-text {
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: oklch(84% 0.006 260 / 0.72);
  font-weight: 500;
  padding: 5px 14px;
  border: 1px solid oklch(78% 0.004 260 / 0.22);
  border-radius: 999px;
}
.hero-eyebrow .tag-sep { opacity: 0.5; }

.hero-display {
  font-size: var(--fs-hero);
  line-height: 1.14;
  letter-spacing: -0.025em;
  font-weight: 700;
  margin: 0;
  max-width: 100%;
  text-wrap: balance;
}
.hero-display em {
  font-weight: 400;
  letter-spacing: -0.045em;
}

.hero-kicker {
  font-size: var(--fs-lede);
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 0;
  font-weight: 400;
}
.hero-num {
  font-family: var(--f-mono);
  font-size: 0.88em;
  font-weight: 500;
  color: var(--ink);
  font-feature-settings: 'tnum';
  padding: 0 1px;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* ─────────────────────── BUTTONS (prominent CTA) ─────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background .25s var(--ease-out),
              color .25s var(--ease-out),
              border-color .25s var(--ease-out),
              gap .3s var(--ease-out),
              transform .25s var(--ease-out);
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { gap: 14px; }
.btn-arrow {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 17px;
}
/* primary — filled, light pill on dark hero */
.btn--primary {
  background: oklch(96% 0.006 85);
  color: oklch(14% 0.012 270);
  border-color: oklch(96% 0.006 85);
}
.btn--primary:hover {
  background: oklch(100% 0 0);
  border-color: oklch(100% 0 0);
}
/* ghost — outlined pill */
.btn--ghost {
  background: transparent;
  color: oklch(96% 0.006 85);
  border-color: color-mix(in oklch, oklch(96% 0.006 85) 45%, transparent);
}
.btn--ghost:hover {
  background: color-mix(in oklch, oklch(96% 0.006 85) 10%, transparent);
  border-color: oklch(96% 0.006 85);
}
/* light-section variants (if btn used outside dark hero later) */
.section:not(.section--dark) .btn--primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.section:not(.section--dark) .btn--ghost {
  color: var(--ink);
  border-color: color-mix(in oklch, var(--ink) 40%, transparent);
}
.section:not(.section--dark) .btn--ghost:hover {
  background: color-mix(in oklch, var(--ink) 8%, transparent);
  border-color: var(--ink);
}

.link-cta {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 0;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  transition: gap .3s var(--ease-out);
}
.link-cta:hover { gap: 16px; }
.link-cta .arrow {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 300;
}

.link-ghost {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  padding: 12px 0;
  border-bottom: 1px solid color-mix(in oklch, var(--ink) 30%, transparent);
  transition: color .25s var(--ease-out),
              border-color .25s var(--ease-out),
              gap .3s var(--ease-out);
}
.link-ghost:hover {
  color: var(--ink);
  border-color: var(--ink);
  gap: 14px;
}
/* dark sections: lift contrast — ink-mute is too dim on dark */
.section--dark .link-ghost,
.hero--dark .link-ghost {
  color: oklch(92% 0.005 85);
  border-bottom-color: color-mix(in oklch, oklch(92% 0.005 85) 35%, transparent);
}
.section--dark .link-ghost:hover,
.hero--dark .link-ghost:hover {
  color: oklch(98% 0.005 85);
  border-bottom-color: oklch(98% 0.005 85);
}

.section--dark .link-cta,
.hero--dark .link-cta {
  color: oklch(96% 0.005 85);
  border-bottom-color: oklch(96% 0.005 85);
}
.section--dark .link-cta:hover,
.hero--dark .link-cta:hover {
  color: oklch(99% 0.003 85);
  border-bottom-color: oklch(99% 0.003 85);
}

.hero-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding-top: 24px;
  border-top: 1px solid var(--paper-line);
  max-width: 780px;
  font-size: var(--fs-small);
  color: var(--ink-soft);
}
.hero-meta div { display: flex; flex-direction: column; gap: 4px; }
.meta-label {
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
}
@media (max-width: 720px) {
  .hero-meta { grid-template-columns: 1fr; gap: 14px; }
}

.hero-footer {
  position: absolute;
  bottom: 32px;
  left: var(--page-px);
  right: var(--page-px);
  max-width: var(--col-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: var(--fs-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.scroll-rule {
  flex: 1;
  height: 1px;
  background: var(--paper-line);
}
@media (max-width: 720px) {
  .hero-footer { display: none; }
}

/* ══════════════════════════════════════════════════════════
   SECTION FRAMEWORK
   ══════════════════════════════════════════════════════════ */

.section {
  padding: clamp(80px, 12vh, 180px) var(--page-px);
  border-bottom: 1px solid var(--paper-line);
  position: relative;
}

.section--dark {
  background: var(--dark-paper);
  color: var(--dark-text);
  border-bottom-color: var(--dark-line);
}
.section--dark em { color: var(--dark-text); }
.section--dark ::selection { background: var(--dark-text); color: var(--dark-paper); }

.section-head {
  max-width: var(--col-max);
  margin: 0 auto clamp(40px, 6vh, 72px);
  display: block;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--paper-line);
}
.section--dark .section-head { border-bottom-color: var(--dark-line); }

.section-num {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(56px, 8vw, 120px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--ink);
  align-self: start;
  white-space: nowrap;
  word-break: normal;
  font-variant-numeric: lining-nums;
}
.section--dark .section-num { color: var(--dark-text); }

.section-label {
  font-size: var(--fs-micro);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
  padding-bottom: 12px;
}
.section--dark .section-label { color: var(--dark-mute); }

.section-body {
  max-width: var(--col-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  gap: 16px;
}

.section-body > * { grid-column: 2; }

.section-title {
  font-size: var(--fs-h2);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 700;
  margin: 0 0 clamp(28px, 3vh, 40px);
  max-width: 22ch;
  word-break: keep-all;
  line-break: strict;
}
.hero-display,
.contact-statement {
  word-break: keep-all;
  line-break: strict;
}
.section-title em {
  font-weight: 400;
  letter-spacing: -0.04em;
}

.section-lede {
  font-size: var(--fs-lede);
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 0 0 clamp(36px, 5vh, 56px);
  font-weight: 400;
}
.section--dark .section-lede { color: var(--dark-mute); }

.note-label {
  display: inline-block;
  font-size: 10.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--paper-line);
  margin-bottom: 20px;
}
.section--dark .note-label {
  color: var(--dark-mute);
  border-bottom-color: var(--dark-line);
}

/* ══════════════════════════════════════════════════════════
   STATS STRIP
   ══════════════════════════════════════════════════════════ */

.stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--paper-line);
  margin: clamp(24px, 3vh, 40px) 0 clamp(48px, 6vh, 80px);
}
.stats-strip--three { grid-template-columns: repeat(3, 1fr); }

.section--dark .stats-strip { border-top-color: var(--dark-line); }

.stat {
  padding: clamp(28px, 3.5vh, 48px) 24px clamp(28px, 3.5vh, 48px) 0;
  border-right: 1px solid var(--paper-line);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.section--dark .stat { border-right-color: var(--dark-line); }
.stat:last-child { border-right: 0; }
.stats-strip .stat:first-child { padding-left: 0; }
.stats-strip .stat:not(:first-child) { padding-left: 24px; }

.stat-num {
  font-family: var(--f-mono);
  font-size: var(--fs-num-md);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
  font-feature-settings: 'tnum';
}
.stat-num small {
  font-size: 0.42em;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin-left: 2px;
  vertical-align: 14%;
  color: var(--ink-mute);
}
.section--dark .stat-num { color: var(--dark-text); }
.section--dark .stat-num small { color: var(--dark-mute); }

.stat-body {
  font-size: var(--fs-body);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--ink-soft);
  max-width: 28ch;
}
.section--dark .stat-body { color: var(--dark-text); opacity: 0.9; }

.stat-src {
  margin-top: auto;
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.section--dark .stat-src { color: var(--dark-mute); }

@media (max-width: 860px) {
  .stats-strip,
  .stats-strip--three { grid-template-columns: 1fr; }
  .stat {
    border-right: 0;
    border-bottom: 1px solid var(--paper-line);
    padding: 28px 0 !important;
  }
  .section--dark .stat { border-bottom-color: var(--dark-line); }
  .stat:last-child { border-bottom: 0; }
}

/* ══════════════════════════════════════════════════════════
   KOREA CONTEXT · PULLQUOTE · CAUSES
   ══════════════════════════════════════════════════════════ */

.korea-context {
  max-width: 68ch;
  padding: 32px 0;
  border-top: 1px solid var(--paper-line);
}
.korea-context p {
  font-family: var(--f-serif);
  font-size: var(--fs-lede);
  line-height: 1.6;
  letter-spacing: -0.012em;
  color: var(--ink-soft);
  margin: 0;
  font-weight: 300;
}

.pullquote {
  margin: clamp(48px, 6vh, 80px) 0;
  padding: 0;
  max-width: 80%;
}
.pullquote--center {
  text-align: left;
  margin-left: 0;
  max-width: 70%;
}
.pullquote blockquote {
  font-family: var(--f-serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(28px, 3.6vw, 56px);
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--dark-text);
}
.section:not(.section--dark) .pullquote blockquote { color: var(--ink); }
.pullquote blockquote em {
  font-style: italic;
  font-family: var(--f-serif);
}
.pullquote figcaption {
  margin-top: 20px;
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dark-mute);
  font-family: var(--f-mono);
  font-weight: 400;
}
.section:not(.section--dark) .pullquote figcaption { color: var(--ink-mute); }

.causes {
  margin-top: clamp(56px, 7vh, 96px);
}
.causes-head { margin-bottom: 32px; }
.causes-title {
  font-size: var(--fs-h3);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 12px 0 0;
  font-weight: 500;
}

.causes-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--dark-line);
}
.section:not(.section--dark) .causes-list { border-top-color: var(--paper-line); }
.causes-list li {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 32px;
  align-items: baseline;
  padding: 24px 0;
  border-bottom: 1px solid var(--dark-line);
}
.section:not(.section--dark) .causes-list li { border-bottom-color: var(--paper-line); }
.cause-num {
  font-family: var(--f-mono);
  font-size: var(--fs-num-sm);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1;
  font-feature-settings: 'tnum';
}
.cause-num small {
  font-size: 0.5em;
  color: var(--dark-mute);
  margin-left: 2px;
}
.section:not(.section--dark) .cause-num small { color: var(--ink-mute); }
.cause-body {
  font-size: var(--fs-lede);
  line-height: 1.4;
  letter-spacing: -0.012em;
  color: var(--dark-text);
}
.section:not(.section--dark) .cause-body { color: var(--ink); }

@media (max-width: 720px) {
  .causes-list li { grid-template-columns: 1fr; gap: 10px; }
}

/* ══════════════════════════════════════════════════════════
   REFRAME (03)
   ══════════════════════════════════════════════════════════ */

.reframe {
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  gap: 24px;
  padding: clamp(32px, 4vh, 56px) 0;
  border-top: 1px solid var(--paper-line);
  border-bottom: 1px solid var(--paper-line);
  margin-bottom: clamp(48px, 6vh, 80px);
  align-items: start;
}

.reframe-col { display: flex; flex-direction: column; gap: 16px; }
.reframe-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.reframe-col li {
  font-size: var(--fs-lede);
  line-height: 1.35;
  letter-spacing: -0.012em;
  padding: 10px 0;
  border-bottom: 1px dashed var(--paper-line);
}
.reframe-col--old li {
  color: var(--ink-mute);
  text-decoration: line-through;
  text-decoration-color: var(--ink-faint);
  text-decoration-thickness: 1px;
}
.reframe-col--new li {
  color: var(--ink);
  font-weight: 500;
}
.reframe-label {
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
}

.reframe-divider {
  align-self: center;
  display: flex;
  justify-content: center;
  padding-top: 40px;
}
.reframe-divider span {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(32px, 4vw, 52px);
  color: var(--ink-mute);
}

@media (max-width: 720px) {
  .reframe {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .reframe-divider { padding: 8px 0; transform: rotate(90deg); }
}

/* ══════════════════════════════════════════════════════════
   PRINCIPLES
   ══════════════════════════════════════════════════════════ */

.principles { margin-top: clamp(56px, 7vh, 96px); }

.principles-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--paper-line);
}
.principles-list li {
  padding: 32px 24px 32px 0;
  border-right: 1px solid var(--paper-line);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.principles-list li:last-child { border-right: 0; }
.principles-list li:not(:first-child) { padding-left: 24px; }
.principle-num {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  font-weight: 400;
}
.principles-list h4 {
  font-size: var(--fs-h4);
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 0;
}
.principles-list p {
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  max-width: 30ch;
}

@media (max-width: 860px) {
  .principles-list { grid-template-columns: 1fr; }
  .principles-list li {
    border-right: 0;
    border-bottom: 1px solid var(--paper-line);
    padding: 28px 0 !important;
  }
  .principles-list li:last-child { border-bottom: 0; }
}

/* ══════════════════════════════════════════════════════════
   PHASES (METHODOLOGY TIMELINE)
   ══════════════════════════════════════════════════════════ */

.phases {
  list-style: none;
  padding: 0;
  margin: clamp(40px, 5vh, 64px) 0 clamp(64px, 8vh, 96px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--dark-line);
  position: relative;
}

.phase {
  padding: 32px 24px 40px 0;
  border-right: 1px solid var(--dark-line);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.phase::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 36px;
  height: 1px;
  background: var(--dark-text);
}
.phase:first-child { padding-left: 0; }
.phase:not(:first-child) { padding-left: 24px; }
.phase:last-child { border-right: 0; }

.phase-week {
  font-family: var(--f-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.1em;
  color: var(--dark-mute);
  text-transform: uppercase;
}
.phase-name {
  font-size: clamp(26px, 2.6vw, 40px);
  line-height: 1;
  letter-spacing: -0.025em;
  font-weight: 600;
  margin: 0;
}
.phase-body {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.phase-body li {
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--dark-text);
  opacity: 0.85;
  padding-left: 16px;
  position: relative;
}
.phase-body li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--dark-faint);
}

@media (max-width: 860px) {
  .phases { grid-template-columns: 1fr; }
  .phase {
    border-right: 0;
    border-bottom: 1px solid var(--dark-line);
    padding: 28px 0 !important;
  }
  .phase::before { display: none; }
  .phase:last-child { border-bottom: 0; }
}

/* ══════════════════════════════════════════════════════════
   ARCHITECTURE
   ══════════════════════════════════════════════════════════ */

.architecture {
  margin-top: clamp(48px, 6vh, 80px);
  padding-top: 32px;
  border-top: 1px solid var(--dark-line);
}
.arch-title {
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 500;
  margin: 12px 0 32px;
  max-width: 40ch;
}

.arch-layers {
  list-style: none;
  padding: 0;
  margin: 0;
}
.arch-layers li {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--dark-line);
  align-items: baseline;
}
.arch-layers li:last-child { border-bottom: 0; }
.arch-tag {
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--dark-mute);
  font-weight: 400;
}
.arch-layers h5 {
  font-size: var(--fs-h4);
  letter-spacing: -0.018em;
  font-weight: 600;
  margin: 0 0 6px;
}
.arch-layers p {
  font-size: var(--fs-body);
  color: var(--dark-text);
  opacity: 0.8;
  margin: 0;
  line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════
   TWO-COL (DIFFERENTIATION)
   ══════════════════════════════════════════════════════════ */

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 64px);
  padding-bottom: clamp(48px, 6vh, 80px);
  margin-bottom: clamp(48px, 6vh, 80px);
  border-bottom: 1px solid var(--paper-line);
}
.two-col-item {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--ink);
}
.two-col-tag {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  font-weight: 400;
}
.two-col-title {
  font-size: clamp(24px, 2.2vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: 600;
  margin: 0;
}
.two-col-item p {
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-width: 40ch;
}
.two-col-list {
  list-style: none;
  padding: 16px 0 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px dashed var(--paper-line);
}
.two-col-list li {
  font-size: var(--fs-small);
  color: var(--ink-soft);
  padding-left: 16px;
  position: relative;
  line-height: 1.5;
}
.two-col-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--ink-faint);
}

@media (max-width: 860px) {
  .two-col { grid-template-columns: 1fr; gap: 32px; }
}

/* ══════════════════════════════════════════════════════════
   POSITION TABLE
   ══════════════════════════════════════════════════════════ */

.positioning { padding-top: 16px; }
.positioning-title {
  font-size: var(--fs-h3);
  letter-spacing: -0.02em;
  font-weight: 500;
  margin: 12px 0 24px;
}

.position-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body);
}
.position-table thead th {
  text-align: left;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 400;
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--ink);
}
.position-table tbody td {
  padding: 20px 16px 20px 0;
  border-bottom: 1px solid var(--paper-line);
  vertical-align: top;
  line-height: 1.5;
  color: var(--ink-soft);
}
.position-table tbody td:first-child {
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.position-ours td {
  background: color-mix(in oklch, var(--ink) 4%, transparent);
  color: var(--ink) !important;
  font-weight: 500;
  border-bottom-color: var(--ink) !important;
}

@media (max-width: 720px) {
  .position-table { font-size: 13px; }
  .position-table thead { display: none; }
  .position-table tbody tr {
    display: grid;
    grid-template-columns: 1fr;
    padding: 16px 0;
    border-bottom: 1px solid var(--paper-line);
  }
  .position-table tbody td {
    padding: 4px 0;
    border-bottom: 0;
  }
  .position-table tbody td:first-child { font-size: 16px; padding-bottom: 8px; }
}

/* ══════════════════════════════════════════════════════════
   SERVICES (06)
   ══════════════════════════════════════════════════════════ */

.services {
  list-style: none;
  padding: 0;
  margin: clamp(24px, 3vh, 40px) 0 clamp(72px, 9vh, 120px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--dark-line);
}
.services li {
  padding: 36px 28px 48px 0;
  border-right: 1px solid var(--dark-line);
  border-bottom: 1px solid var(--dark-line);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.services li:nth-child(3n) { border-right: 0; }
.services li:nth-child(n+4) { /* last row will be bottom-borderless via JS? keep simple */ }
.services li:first-child,
.services li:nth-child(2),
.services li:nth-child(3) { padding-top: 32px; }
.services li:nth-child(n+4) { padding-top: 32px; }
.services li:nth-child(4),
.services li:nth-child(5),
.services li:nth-child(6) { border-bottom: 0; }
.services li:not(:nth-child(3n+1)) { padding-left: 28px; }

.service-num {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--dark-mute);
}
.services h4 {
  font-size: var(--fs-h4);
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 0;
  line-height: 1.25;
}
.services p {
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--dark-text);
  opacity: 0.78;
  margin: 0;
  max-width: 32ch;
}

@media (max-width: 860px) {
  .services { grid-template-columns: 1fr; }
  .services li {
    border-right: 0 !important;
    border-bottom: 1px solid var(--dark-line) !important;
    padding: 28px 0 !important;
  }
  .services li:last-child { border-bottom: 0 !important; }
}

/* use cases */

.usecases { margin-top: clamp(56px, 7vh, 96px); }
.usecases-title {
  font-size: var(--fs-h3);
  letter-spacing: -0.02em;
  font-weight: 500;
  margin: 12px 0 32px;
}

.usecases-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--dark-line);
}
.usecases-grid > div {
  padding: 24px 20px 32px 0;
  border-right: 1px solid var(--dark-line);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.usecases-grid > div:last-child { border-right: 0; }
.usecases-grid > div:not(:first-child) { padding-left: 20px; }
.usecase-tag {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--dark-mute);
}
.usecases-grid h5 {
  font-size: var(--fs-h4);
  letter-spacing: -0.018em;
  font-weight: 600;
  margin: 0 0 6px;
}
.usecases-grid ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.usecases-grid li {
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--dark-text);
  opacity: 0.78;
  padding-left: 14px;
  position: relative;
}
.usecases-grid li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--dark-faint);
}

@media (max-width: 860px) {
  .usecases-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .usecases-grid { grid-template-columns: 1fr; }
  .usecases-grid > div {
    border-right: 0;
    border-bottom: 1px solid var(--dark-line);
    padding: 20px 0 !important;
  }
  .usecases-grid > div:last-child { border-bottom: 0; }
}

/* ══════════════════════════════════════════════════════════
   SELECTION (07)
   ══════════════════════════════════════════════════════════ */

.selection {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(32px, 4vw, 80px);
  padding: clamp(32px, 4vh, 56px) 0;
  border-top: 1px solid var(--paper-line);
}
.selection-head .selection-title {
  font-size: var(--fs-h3);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 500;
  margin: 12px 0 12px;
}
.selection-head p {
  font-size: var(--fs-body);
  color: var(--ink-soft);
  margin: 0;
  max-width: 36ch;
}

.selection-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.selection-list li {
  font-size: var(--fs-lede);
  line-height: 1.45;
  letter-spacing: -0.012em;
  padding: 18px 0 18px 40px;
  border-bottom: 1px solid var(--paper-line);
  position: relative;
  font-weight: 400;
}
.selection-list li:first-child { border-top: 1px solid var(--paper-line); }
.selection-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 18px;
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 1.1em;
  color: var(--ink);
}

@media (max-width: 720px) {
  .selection { grid-template-columns: 1fr; gap: 24px; }
}

/* ══════════════════════════════════════════════════════════
   STEPS (08)
   ══════════════════════════════════════════════════════════ */

.steps {
  list-style: none;
  padding: 0;
  margin: clamp(32px, 4vh, 56px) 0 24px;
  display: flex;
  flex-direction: column;
}
.steps li {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(20px, 2vw, 48px);
  padding: 32px 0;
  border-top: 1px solid var(--dark-line);
  align-items: baseline;
}
.steps li:last-child { border-bottom: 1px solid var(--dark-line); }

.step-meta { display: flex; flex-direction: column; gap: 8px; }
.step-num {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(36px, 4vw, 64px);
  line-height: 1;
  color: var(--dark-text);
  letter-spacing: -0.03em;
}
.step-dur {
  font-family: var(--f-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  color: var(--dark-mute);
}

.steps h4 {
  font-size: clamp(22px, 2vw, 32px);
  letter-spacing: -0.022em;
  font-weight: 600;
  margin: 0 0 10px;
}
.steps p {
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--dark-text);
  opacity: 0.82;
  margin: 0;
  max-width: 50ch;
}

.steps-note {
  font-size: var(--fs-small);
  color: var(--dark-mute);
  margin: 20px 0 0;
  letter-spacing: -0.005em;
}

@media (max-width: 720px) {
  .steps li { grid-template-columns: 1fr; gap: 12px; }
}

/* ══════════════════════════════════════════════════════════
   CONTACT (09)
   ══════════════════════════════════════════════════════════ */

.contact-section { padding-bottom: clamp(60px, 8vh, 120px); }

.contact-statement {
  font-family: var(--f-sans);
  font-size: clamp(32px, 4.8vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 700;
  margin: 0 0 clamp(48px, 6vh, 80px);
  max-width: 18ch;
}
.contact-statement em {
  font-weight: 400;
  letter-spacing: -0.045em;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--paper-line);
  margin-bottom: clamp(40px, 5vh, 64px);
}
.contact-block {
  padding: 32px 20px 32px 0;
  border-right: 1px solid var(--paper-line);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.contact-block:last-child { border-right: 0; }
.contact-block:not(:first-child) { padding-left: 20px; }
.contact-label {
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
}
.contact-link,
.contact-text {
  font-size: var(--fs-h4);
  letter-spacing: -0.012em;
  line-height: 1.3;
  color: var(--ink);
}
.contact-link {
  font-weight: 500;
  border-bottom: 1px solid var(--ink-faint);
  display: inline;
  align-self: flex-start;
  transition: border-color .25s;
}
.contact-link:hover { border-bottom-color: var(--ink); }

@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr 1fr; }
  .contact-block:nth-child(2) { border-right: 0; }
  .contact-block:nth-child(3),
  .contact-block:nth-child(4) { border-top: 1px solid var(--paper-line); }
}
@media (max-width: 540px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-block {
    border-right: 0;
    border-bottom: 1px solid var(--paper-line);
    padding: 24px 0 !important;
  }
  .contact-block:last-child { border-bottom: 0; }
}

.big-cta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(24px, 3vh, 40px) 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  font-weight: 600;
  letter-spacing: -0.025em;
  transition: padding .4s var(--ease-expo);
}
.big-cta:hover { padding-left: 18px; padding-right: 0; }
.big-cta-label {
  font-size: clamp(24px, 3vw, 44px);
  line-height: 1.1;
}
.big-cta-arrow {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(32px, 4vw, 64px);
  line-height: 1;
  transition: transform .4s var(--ease-expo);
}
.big-cta:hover .big-cta-arrow { transform: translateX(8px); }

/* ══════════════════════════════════════════════════════════
   COLOPHON / FOOTER
   ══════════════════════════════════════════════════════════ */

.colophon {
  background: var(--dark-paper);
  color: var(--dark-text);
  padding: clamp(56px, 7vh, 88px) var(--page-px) 32px;
}

.colophon-inner {
  max-width: var(--col-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.colophon-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  letter-spacing: 0.04em;
  gap: 24px;
}
.colophon-mark {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.colophon-brand {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--dark-text);
}
.colophon-legal {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dark-mute);
  font-weight: 400;
}
.colophon-year {
  font-family: var(--f-mono);
  color: var(--dark-mute);
}

.colophon-etymology {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(14px, 1.1vw, 17px);
  letter-spacing: -0.012em;
  color: var(--dark-mute);
  line-height: 1.55;
  max-width: 56ch;
  padding: 20px 0 4px;
}
.colophon-etymology em {
  font-family: var(--f-serif);
  font-style: italic;
  color: var(--dark-faint);
  padding: 0 4px;
}
@media (max-width: 720px) {
  .colophon-top { flex-direction: column; gap: 12px; align-items: flex-start; }
}

.colophon-copy {
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--dark-mute);
  font-family: var(--f-mono);
}

.colophon-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--dark-line);
}
.colophon-grid > div { display: flex; flex-direction: column; gap: 10px; }
.colophon-key {
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--dark-mute);
  font-weight: 500;
}
.colophon-grid > div span:last-child,
.colophon-grid > div a {
  font-size: 14px;
  color: var(--dark-text);
  line-height: 1.55;
  letter-spacing: -0.005em;
}
.colophon-grid a { border-bottom: 1px solid var(--dark-faint); transition: border-color .25s; align-self: flex-start; display: inline; }
.colophon-grid a:hover { border-bottom-color: var(--dark-text); }

.colophon-rule { height: 1px; background: var(--dark-line); }

.colophon-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dark-mute);
  gap: 16px;
}
.colophon-bottom a {
  color: var(--dark-mute);
  letter-spacing: 0.18em;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.colophon-bottom a:hover {
  color: var(--dark-text);
  border-bottom-color: var(--dark-text);
}

@media (max-width: 820px) {
  .colophon-grid { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 720px) {
  .colophon-bottom { flex-direction: column; gap: 12px; align-items: flex-start; }
}

/* ══════════════════════════════════════════════════════════
   SECTION-BODY — mobile rail collapse
   ══════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .section-head { grid-template-columns: 1fr; gap: 12px; }
  .section-body { grid-template-columns: 1fr; }
  .section-body > * { grid-column: 1; }
  .section-num { font-size: 72px; }
}

/* ══════════════════════════════════════════════════════════
   SCROLL REVEAL
   ══════════════════════════════════════════════════════════ */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity .9s var(--ease-expo),
    transform .9s var(--ease-expo);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
.reveal[data-delay="1"] { transition-delay: .06s; }
.reveal[data-delay="2"] { transition-delay: .12s; }
.reveal[data-delay="3"] { transition-delay: .18s; }
.reveal[data-delay="4"] { transition-delay: .24s; }
.reveal[data-delay="5"] { transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

/* ══════════════════════════════════════════════════════════
   REVISED LAYOUT v2 — firm-style components
   ══════════════════════════════════════════════════════════ */

/* ── work list (services) ─────────────────────────────── */
.work-list {
  list-style: none;
  padding: 0;
  margin: clamp(32px, 4vh, 56px) 0 0;
  border-top: 1px solid var(--paper-line);
}
.work-list li {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: clamp(16px, 3vw, 48px);
  padding: clamp(32px, 4vh, 56px) 0;
  border-bottom: 1px solid var(--paper-line);
  align-items: baseline;
}
.work-num {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(32px, 3.4vw, 52px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink-mute);
  white-space: nowrap;
  word-break: normal;
}
.work-body { max-width: 72ch; }
.work-body h3 {
  font-size: clamp(26px, 2.6vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 600;
  margin: 0 0 12px;
}
.work-body p {
  font-size: var(--fs-lede);
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: var(--ink-soft);
  margin: 0;
  max-width: 56ch;
}

@media (max-width: 720px) {
  .work-list li { grid-template-columns: 1fr; gap: 12px; padding: 32px 0; }
}

/* dark sections: ensure work-list contrast */
.section--dark .work-list { border-top-color: var(--dark-line); }
.section--dark .work-list li { border-bottom-color: var(--dark-line); }
.section--dark .work-body h3 { color: var(--dark-text); }
.section--dark .work-body p { color: var(--dark-mute); }
.section--dark .work-num { color: var(--dark-faint); }

/* ── approach (4-step timeline, compact) ──────────────── */
.approach {
  list-style: none;
  padding: 0;
  margin: clamp(40px, 5vh, 64px) 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--dark-line);
}
.approach li {
  padding: 28px 20px 36px 0;
  border-right: 1px solid var(--dark-line);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.approach li::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 28px;
  height: 1px;
  background: var(--dark-text);
}
.approach li:first-child { padding-left: 0; }
.approach li:not(:first-child) { padding-left: 20px; }
.approach li:last-child { border-right: 0; }

.approach-week {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--dark-mute);
  text-transform: uppercase;
}
.approach h4 {
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 0;
}
.approach p {
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--dark-text);
  opacity: 0.78;
  margin: 0;
  max-width: 26ch;
}

@media (max-width: 860px) {
  .approach { grid-template-columns: 1fr; }
  .approach li {
    border-right: 0;
    border-bottom: 1px solid var(--dark-line);
    padding: 24px 0 !important;
  }
  .approach li::before { display: none; }
  .approach li:last-child { border-bottom: 0; }
}

/* ── clients logos (typographic) ──────────────────────── */
.clients-logos {
  list-style: none;
  padding: clamp(28px, 3.5vh, 48px) 0;
  margin: clamp(16px, 2vh, 24px) 0 clamp(56px, 7vh, 96px);
  border-top: 1px solid var(--paper-line);
  border-bottom: 1px solid var(--paper-line);
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 24px 16px;
  align-items: center;
}
.clients-logos li {
  display: flex;
  align-items: center;
  min-height: 40px;
  word-break: normal;
}
.clients-logos img {
  height: 32px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  /* on paper: force to ink (grayscale) for consistent tone */
  filter: grayscale(1) brightness(0);
  opacity: 0.78;
  transition: opacity .25s var(--ease-out);
}
.clients-logos li:hover img { opacity: 1; }

/* text fallback when logo PNG is missing */
.clients-logos li.is-textfallback {
  font-size: clamp(18px, 1.8vw, 28px);
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--ink);
  min-height: auto;
  line-height: 1;
}

@media (max-width: 1020px) {
  .clients-logos { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 540px) {
  .clients-logos { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

/* ── fit (client selection) ───────────────────────────── */
.fit {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: clamp(24px, 4vw, 80px);
  padding-top: clamp(16px, 2vh, 24px);
  border-top: 1px solid var(--paper-line);
}
.fit-title {
  font-size: var(--fs-h3);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 500;
  margin: 12px 0 0;
}
.fit-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.fit-list li {
  font-size: var(--fs-lede);
  line-height: 1.5;
  letter-spacing: -0.012em;
  padding: 20px 0 20px 40px;
  border-bottom: 1px solid var(--paper-line);
  position: relative;
}
.fit-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 20px;
  font-family: var(--f-serif);
  font-weight: 300;
  color: var(--ink);
}

@media (max-width: 720px) {
  .fit { grid-template-columns: 1fr; gap: 20px; }
}

/* ── team split ────────────────────────────────────────── */
.team-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--dark-line);
  margin-top: clamp(32px, 4vh, 56px);
}
.team-split article {
  padding: clamp(32px, 4vh, 48px) clamp(20px, 3vw, 40px) clamp(32px, 4vh, 48px) 0;
  border-right: 1px solid var(--dark-line);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.team-split article:last-child {
  border-right: 0;
  padding-left: clamp(20px, 3vw, 40px);
  padding-right: 0;
}
.team-tag {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dark-mute);
}
.team-split h4 {
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.022em;
  font-weight: 600;
  margin: 0;
}
.team-split p {
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--dark-text);
  opacity: 0.82;
  margin: 0;
  max-width: 42ch;
}

@media (max-width: 720px) {
  .team-split { grid-template-columns: 1fr; }
  .team-split article {
    border-right: 0;
    border-bottom: 1px solid var(--dark-line);
    padding: 28px 0 !important;
  }
  .team-split article:last-child { border-bottom: 0; padding-top: 28px !important; }
}

/* ══════════════════════════════════════════════════════════
   MULTI-PAGE ADDITIONS
   Compact hero for subpages, services grid, education feature,
   manifesto block (home), active-nav styling.
   ══════════════════════════════════════════════════════════ */

/* ── compact hero variant for subpages ─────────────────── */
.hero.hero--compact {
  min-height: 56vh;
  grid-template-rows: 1fr;
}
.hero--compact .hero-grid {
  padding: clamp(80px, 14vh, 140px) 0 clamp(40px, 6vh, 72px);
  gap: clamp(20px, 3vh, 36px);
}
.hero--compact .hero-display {
  font-size: clamp(28px, 3.2vw, 52px);
}

/* ── page-number eyebrow for subpages (reuses .hero-eyebrow) ─ */
.hero-eyebrow.hero-eyebrow--page .hero-eyebrow-text {
  padding: 5px 14px;
}
.hero-eyebrow-num {
  font-weight: 500;
  color: oklch(92% 0.008 85);
  margin-right: 6px;
}
.hero-eyebrow-sep {
  opacity: 0.4;
  margin-right: 6px;
}

/* ── active nav item ───────────────────────────────────── */
.primary-nav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 500;
}
.primary-nav a[aria-current="page"]::after {
  right: 0;
}
.masthead.is-over-dark .primary-nav a[aria-current="page"] {
  color: oklch(96% 0.006 85);
}
.nav-cta[aria-current="page"] { font-weight: 600; }

/* ── services grid (2×2) ───────────────────────────────── */
.services-section {
  padding: clamp(64px, 10vh, 120px) var(--page-px);
}
.services-grid {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: var(--col-max);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(20px, 2.4vw, 40px);
}
.services-grid > li { grid-column: span 2; }
.services-grid > li:nth-child(4),
.services-grid > li:nth-child(5) { grid-column: span 3; }
@media (max-width: 980px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .services-grid > li,
  .services-grid > li:nth-child(4),
  .services-grid > li:nth-child(5) { grid-column: auto; }
  .services-grid > li:nth-child(5):last-child { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .services-grid { grid-template-columns: 1fr; }
  .services-grid > li,
  .services-grid > li:nth-child(4),
  .services-grid > li:nth-child(5),
  .services-grid > li:nth-child(5):last-child { grid-column: auto; }
}
.service-card {
  padding: clamp(28px, 3.4vw, 44px);
  border: 1px solid var(--paper-line);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color .3s var(--ease-out), transform .3s var(--ease-out);
}
.service-card:hover {
  border-color: var(--ink-mute);
  transform: translateY(-2px);
}
.service-num {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.service-title {
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: 0;
  color: var(--ink);
}
.service-body {
  font-size: var(--fs-lede);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}

/* ── services featured block (education) ──────────────── */
.service-feature {
  padding: clamp(72px, 10vh, 120px) var(--page-px);
  background: var(--paper);
  border-top: 1px solid var(--paper-line);
  border-bottom: 1px solid var(--paper-line);
}
.service-feature-inner {
  max-width: var(--col-max);
  margin: 0 auto;
}
.service-feature-tag {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 14px;
}
.service-feature-title {
  font-size: clamp(28px, 3vw, 44px);
  letter-spacing: -0.028em;
  font-weight: 700;
  line-height: 1.12;
  margin: 0 0 18px;
  color: var(--ink);
}
.service-feature-lede {
  max-width: 64ch;
  color: var(--ink-soft);
  font-size: var(--fs-lede);
  line-height: 1.55;
  margin: 0 0 clamp(32px, 4.4vh, 56px);
}
.service-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 3vw, 44px);
}
@media (max-width: 720px) {
  .service-feature-list { grid-template-columns: 1fr; gap: 24px; }
}
.service-feature-list li {
  padding-top: 16px;
  border-top: 1px solid var(--paper-line);
}
.service-feature-list h3 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.012em;
  margin: 0 0 8px;
  color: var(--ink);
}
.service-feature-list p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}

/* ── home manifesto (replaces 5 removed sections) ──────── */
.manifesto {
  padding: clamp(96px, 14vh, 180px) var(--page-px);
  text-align: center;
  border-top: 1px solid var(--paper-line);
  background: var(--paper);
}
.manifesto-statement {
  font-size: clamp(32px, 4vw, 64px);
  letter-spacing: -0.03em;
  font-weight: 700;
  line-height: 1.08;
  margin: 0 0 clamp(28px, 3.6vh, 44px);
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
}
.manifesto-statement em {
  font-style: normal;
  font-weight: 700;
}
.manifesto-proof {
  list-style: none;
  padding: 0;
  margin: 0 auto clamp(40px, 6vh, 64px);
  max-width: 44em;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 14px;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
}
.manifesto-proof li::before {
  content: "— ";
  color: var(--ink-faint);
  margin-right: 6px;
}
.manifesto-cta-wrap {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
.manifesto-definition {
  max-width: 36em;
  margin: 0 auto clamp(48px, 7vh, 72px);
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.6;
  letter-spacing: -0.012em;
  color: var(--ink-soft);
  text-align: center;
}
.manifesto-definition em {
  font-style: normal;
  font-weight: 600;
  color: var(--ink);
}

/* ══════════════════════════════════════════════════════════
   LOGO MARQUEE — infinite scrolling with edge fade
   (vanilla port of ibelick/infinite-slider + ProgressiveBlur)
   ══════════════════════════════════════════════════════════ */
.logo-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
          mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
}
.logo-marquee-track {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  width: max-content;
  gap: clamp(40px, 5vw, 80px);
  animation: logo-marquee 40s linear infinite;
  will-change: transform;
}
@keyframes logo-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.logo-marquee:hover .logo-marquee-track {
  animation-play-state: paused;
}
.logo-marquee-track li {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(160px, 14vw, 210px);
  height: 80px;
}
.logo-marquee-track img {
  max-width: 100%;
  max-height: 42px;
  width: auto;
  height: auto;
  object-fit: contain;
  /* hero-dark context: normalize varied logos to white */
  filter: brightness(0) invert(1);
  opacity: 0.82;
  transition: opacity .25s var(--ease-out);
}
.logo-marquee-track li:hover img { opacity: 1; }
/* padded logos — scale up to compensate for canvas whitespace */
.logo-marquee-track li img[src$="lg-electronics.png"],
.logo-marquee-track li img[src$="hanwha-life.png"] {
  max-height: 64px;
  max-width: 108%;
}
/* tightly-cropped logos — restrain to match visual weight */
.logo-marquee-track li img[src$="sk-networks.png"],
.logo-marquee-track li img[src$="shinsegae.png"],
.logo-marquee-track li img[src$="ls.png"] {
  max-height: 30px;
}
/* samsung-card: extra-tight crop — needs further reduction */
.logo-marquee-track li img[src$="samsung-card.png"] {
  max-height: 22px;
}
/* LG 전자: filled-circle logo — flatten-invert merges letters into blob.
   Use plain invert to preserve internal contrast. */
.logo-marquee-track li img[src$="lg-electronics.png"] {
  filter: invert(1);
}

/* text fallback when image fails to load (handled by main.js) */
.logo-marquee-track li.is-textfallback {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  height: auto;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .logo-marquee-track { animation: none; }
}

/* ══════════════════════════════════════════════════════════
   AX POSITIONING — Flagship badge + emphasis
   ══════════════════════════════════════════════════════════ */

/* FLAGSHIP badge for .service-card (services 2×2 grid) */
.service-card.is-flagship {
  border-color: oklch(82% 0.04 75 / 0.55);
  border-width: 1.5px;
  position: relative;
}
.service-card.is-flagship::before {
  content: "FLAGSHIP";
  position: absolute;
  top: 16px;
  right: 16px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.26em;
  font-weight: 500;
  color: oklch(78% 0.06 75);
  padding: 3px 10px;
  border: 1px solid oklch(78% 0.06 75 / 0.4);
  border-radius: 999px;
  background: oklch(72% 0.04 75 / 0.05);
}

/* FLAGSHIP inline badge for .work-list (home services list) */
.work-list li.is-flagship .work-num::after {
  content: "FLAGSHIP";
  display: inline-block;
  margin-left: 10px;
  padding: 2px 8px;
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.24em;
  font-weight: 500;
  color: oklch(78% 0.06 75);
  border: 1px solid oklch(78% 0.06 75 / 0.4);
  border-radius: 999px;
  vertical-align: middle;
}
.work-list li.is-flagship .work-body h3 em {
  color: oklch(78% 0.06 75);
}

/* AX Pillar label — subtle framing on section-head */
.section-head .section-ax-pillar {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 8px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  font-weight: 500;
  color: var(--ink-faint);
  border: 1px solid var(--paper-line);
  border-radius: 999px;
  vertical-align: middle;
}

/* ══════════════════════════════════════════════════════════
   AX Ops — 3-Zone framework + essay callout
   ══════════════════════════════════════════════════════════ */

.zone-grid {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: var(--col-max);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2vw, 32px);
}
@media (max-width: 900px) { .zone-grid { grid-template-columns: 1fr; } }

.zone-card {
  padding: clamp(28px, 3.2vw, 40px);
  border: 1px solid var(--paper-line);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color .3s var(--ease-out), transform .3s var(--ease-out);
}
.zone-icon {
  width: 32px;
  height: 32px;
  margin-bottom: 4px;
  color: oklch(78% 0.06 75);
  flex-shrink: 0;
}
.zone-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.section--dark .zone-icon { color: oklch(82% 0.05 75); }
.zone-card:hover {
  border-color: var(--ink-mute);
  transform: translateY(-2px);
}
.zone-tag {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.26em;
  color: var(--ink-faint);
  text-transform: uppercase;
  margin-bottom: 2px;
}
.zone-card h3 {
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin: 0;
  color: var(--ink);
}
.zone-card h3 em {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
}
.zone-card p {
  font-size: var(--fs-lede);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}
.zone-examples {
  list-style: none;
  padding: 14px 0 0;
  margin: auto 0 0;
  border-top: 1px solid var(--paper-line);
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--ink-mute);
  letter-spacing: 0.03em;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.section--dark .zone-card {
  background: oklch(16% 0.018 275);
  border-color: var(--dark-line);
}
.section--dark .zone-card h3 { color: var(--dark-text); }
.section--dark .zone-card p { color: var(--dark-mute); }
.section--dark .zone-tag { color: oklch(58% 0.01 270); }
.section--dark .zone-examples {
  border-top-color: var(--dark-line);
  color: oklch(62% 0.01 270);
}

/* essay callout — Sagrada Familia-style literary block */
.essay-callout {
  max-width: 48em;
  margin: 0 auto;
  padding: clamp(32px, 5vh, 56px) clamp(20px, 3vw, 40px);
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(20px, 1.8vw, 28px);
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: var(--ink);
  text-align: center;
  border-top: 1px solid var(--paper-line);
  border-bottom: 1px solid var(--paper-line);
}
.section--dark .essay-callout {
  border-top-color: var(--dark-line);
  border-bottom-color: var(--dark-line);
  color: var(--dark-text);
}
.essay-callout-cite {
  display: block;
  margin-top: 18px;
  font-family: var(--f-mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.26em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.section--dark .essay-callout-cite { color: var(--dark-mute); }

/* ─────────────────────── TEAM PROFILES ─────────────────────── */
.team-roster {
  display: flex;
  flex-direction: column;
  gap: clamp(56px, 7vh, 96px);
  margin-top: clamp(40px, 5vh, 64px);
}
.team-profile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
  padding-top: clamp(40px, 5vh, 64px);
  border-top: 1px solid color-mix(in oklch, var(--ink) 12%, transparent);
}
.team-profile:first-child {
  border-top: 0;
  padding-top: 0;
}
.section--dark .team-profile {
  border-top-color: color-mix(in oklch, var(--dark-ink) 18%, transparent);
}
.team-profile-photo {
  position: relative;
  aspect-ratio: 3 / 4;
  margin: 0;
  background: oklch(94% 0.005 75);
  overflow: hidden;
}
.team-profile-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: grayscale(1) contrast(1.02);
  display: block;
}
.team-profile-photo-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--ink) 35%, transparent);
}
.team-profile-body {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.team-profile-name {
  display: inline-flex;
  align-self: flex-start;
  padding: 10px 18px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
  font-size: clamp(20px, 1.6vw, 24px);
  letter-spacing: -0.02em;
  border-radius: 4px;
  margin-bottom: 4px;
}
.team-profile-positions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: clamp(14.5px, 1.05vw, 16px);
  line-height: 1.55;
  color: color-mix(in oklch, var(--ink) 70%, transparent);
}
.team-profile-positions li.is-current {
  color: var(--ink);
  font-weight: 600;
}
.team-profile-positions .role-prefix {
  display: inline-block;
  width: 22px;
  font-weight: 600;
  color: color-mix(in oklch, var(--ink) 45%, transparent);
}
.team-profile-positions li.is-current .role-prefix {
  color: var(--ink);
}
.team-profile-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.team-profile-section-title {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--ink) 60%, transparent);
}
.team-profile-section ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: clamp(14px, 1vw, 15.5px);
  line-height: 1.6;
  color: color-mix(in oklch, var(--ink) 78%, transparent);
}
.team-profile-section li {
  position: relative;
  padding-left: 14px;
}
.team-profile-section li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.7em;
  width: 4px;
  height: 1px;
  background: color-mix(in oklch, var(--ink) 45%, transparent);
}
@media (max-width: 880px) {
  .team-profile {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .team-profile-photo {
    order: -1;
    max-width: 280px;
  }
}

/* ─────────────────────── HOMEPAGE TEAM MINI-CARDS ─────────────────────── */
.team-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 44px);
  margin-top: clamp(32px, 4vh, 56px);
  align-items: stretch;
}
.team-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.team-card-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  margin: 0;
  background: oklch(94% 0.005 75);
  overflow: hidden;
  border: none;
}
.team-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: grayscale(1) contrast(1.02);
  display: block;
}
.team-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.team-card-name {
  margin: 0;
  font-family: var(--f-sans);
  font-size: clamp(20px, 1.5vw, 24px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: oklch(18% 0.015 270);
}
.team-card-role {
  margin: 0;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: oklch(45% 0.012 270);
}
.team-card-meta {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  line-height: 1.55;
  color: oklch(32% 0.012 270);
}
.team-card-meta li::before {
  content: "·";
  display: inline-block;
  width: 12px;
  font-weight: 700;
  color: oklch(55% 0.012 270);
}
/* dark section — push text to high-contrast light */
.section--dark .team-card-name { color: oklch(98% 0.005 85); }
.section--dark .team-card-role { color: oklch(78% 0.008 85); }
.section--dark .team-card-meta { color: oklch(86% 0.006 85); }
.section--dark .team-card-meta li::before { color: oklch(64% 0.010 85); }
@media (max-width: 820px) {
  .team-cards { grid-template-columns: 1fr; gap: 36px; }
  .team-card-photo { max-width: 320px; }
}

/* ════════════════════════════════════════════════════════════════
   CONTACT FORM
   ════════════════════════════════════════════════════════════════ */

.contact-form {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4vh, 52px);
  max-width: 840px;
  margin-top: clamp(16px, 2vh, 24px);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 40px);
}
.form-row--single { grid-template-columns: 1fr; }
@media (max-width: 720px) {
  .form-row,
  .form-row--single { grid-template-columns: 1fr; gap: 28px; }
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.form-required {
  color: oklch(55% 0.18 25);
  font-weight: 600;
}
.form-optional {
  font-weight: 400;
  font-size: 12px;
  color: var(--ink-mute);
  letter-spacing: 0.01em;
}

.form-help {
  font-size: 13px;
  color: var(--ink-mute);
  margin: 0;
  line-height: 1.5;
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field textarea {
  font: inherit;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid color-mix(in oklch, var(--ink) 18%, transparent);
  padding: 12px 0;
  outline: 0;
  width: 100%;
  transition: border-color .2s var(--ease-out);
  font-family: var(--f-sans);
  letter-spacing: -0.005em;
}
.form-field input:focus,
.form-field textarea:focus {
  border-bottom-color: var(--ink);
}
.form-field input::placeholder,
.form-field textarea::placeholder {
  color: color-mix(in oklch, var(--ink) 28%, transparent);
}
.form-field textarea {
  resize: vertical;
  min-height: 140px;
  padding: 14px 0;
}

/* Checkbox grid */
.form-fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.form-fieldset legend { padding: 0; }

.form-checks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 4px;
}
@media (max-width: 720px) {
  .form-checks { grid-template-columns: 1fr; }
}

.form-check {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 2px;
  padding: 16px 18px;
  border: 1px solid color-mix(in oklch, var(--ink) 14%, transparent);
  background: var(--paper);
  cursor: pointer;
  transition: border-color .2s var(--ease-out), background .2s var(--ease-out);
  align-items: start;
}
.form-check:hover {
  border-color: color-mix(in oklch, var(--ink) 40%, transparent);
  background: var(--paper-dim);
}
.form-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid color-mix(in oklch, var(--ink) 40%, transparent);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  margin: 0;
  grid-row: 1 / span 2;
  align-self: start;
  margin-top: 2px;
  transition: background .2s, border-color .2s;
  position: relative;
  flex-shrink: 0;
}
.form-check input[type="checkbox"]:checked {
  background: var(--ink);
  border-color: var(--ink);
}
.form-check input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0;
  width: 5px;
  height: 10px;
  border: solid var(--paper);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.form-check:has(input:checked) {
  border-color: var(--ink);
  background: var(--paper-dim);
}
.form-check-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  grid-column: 2;
}
.form-check-desc {
  font-size: 13px;
  color: var(--ink-mute);
  line-height: 1.4;
  grid-column: 2;
}

.form-check--inline {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid color-mix(in oklch, var(--ink) 12%, transparent);
  background: var(--paper);
}
.form-check--inline .form-check-title { grid-column: auto; font-weight: 500; font-size: 14px; }
.form-check--inline input[type="checkbox"] { grid-row: auto; margin-top: 0; }

.form-legal {
  font-size: 13px;
  color: var(--ink-mute);
  line-height: 1.6;
  margin: 0;
}
.form-legal-link {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.form-submit {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out), transform .2s var(--ease-out);
}
.form-submit:hover:not(:disabled) {
  background: oklch(28% 0.015 270);
  border-color: oklch(28% 0.015 270);
  transform: translateY(-1px);
}
.form-submit:disabled {
  opacity: 0.55;
  cursor: wait;
}
.form-submit.is-loading .form-submit-arrow {
  animation: formSubmitSpin 0.9s linear infinite;
}
@keyframes formSubmitSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.form-submit-arrow {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 18px;
  display: inline-block;
}

.form-status {
  font-size: 14px;
  line-height: 1.6;
  padding: 14px 18px;
  border-left: 3px solid transparent;
  background: transparent;
  border-radius: 2px;
  min-height: 0;
  display: none;
}
.form-status.is-loading,
.form-status.is-success,
.form-status.is-error {
  display: block;
}
.form-status.is-loading {
  border-left-color: color-mix(in oklch, var(--ink) 30%, transparent);
  background: var(--paper-dim);
  color: var(--ink-soft);
}
.form-status.is-success {
  border-left-color: oklch(48% 0.13 150);
  background: oklch(96% 0.03 150);
  color: oklch(28% 0.08 150);
}
.form-status.is-error {
  border-left-color: oklch(55% 0.18 25);
  background: oklch(96% 0.03 25);
  color: oklch(34% 0.14 25);
}

/* ════════════════════════════════════════════════════════════════
   FLOW STEPS (vertical timeline — used on contact page)
   ════════════════════════════════════════════════════════════════ */

.flow-steps {
  list-style: none;
  padding: 0;
  margin: clamp(32px, 4vh, 56px) 0 0;
  position: relative;
  counter-reset: flow;
}

.flow-step {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: clamp(20px, 2.4vw, 32px);
  padding: clamp(20px, 2.4vh, 32px) 0;
  align-items: start;
}

.flow-step::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: color-mix(in oklch, var(--ink) 14%, transparent);
}
.flow-step:first-child::before { top: 28px; }
.flow-step:last-child::before { bottom: 50%; }

.section--dark .flow-step::before { background: color-mix(in oklch, var(--dark-text) 22%, transparent); }

.flow-step-dot {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  color: var(--ink);
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.section--dark .flow-step-dot {
  background: var(--dark-paper);
  border-color: var(--dark-text);
  color: var(--dark-text);
}

.flow-step-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 10px;
  max-width: 56ch;
}

.flow-step-when {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.section--dark .flow-step-when { color: var(--dark-mute); }

.flow-step-title {
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.25;
}

.flow-step-desc {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
.section--dark .flow-step-desc { color: var(--dark-mute); }

@media (max-width: 640px) {
  .flow-step { grid-template-columns: 44px 1fr; gap: 16px; }
  .flow-step-dot { width: 44px; height: 44px; font-size: 18px; }
  .flow-step::before { left: 21px; }
  .flow-step:first-child::before { top: 22px; }
}

/* ════════════════════════════════════════════════════════════════
   LEGAL DOCUMENT (privacy / terms pages)
   ════════════════════════════════════════════════════════════════ */

.legal-doc {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4vh, 52px);
}

.legal-intro {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0;
  padding: 20px 24px;
  border-left: 3px solid color-mix(in oklch, var(--ink) 18%, transparent);
  background: var(--paper-dim);
}

.legal-article {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.legal-article-title {
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--paper-line);
  color: var(--ink);
}

.legal-article p {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0;
}

.legal-article ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.legal-article ul li {
  position: relative;
  padding-left: 18px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.legal-article ul li::before {
  content: "·";
  position: absolute;
  left: 4px;
  top: -1px;
  color: var(--ink-mute);
  font-weight: 700;
}

.legal-article strong {
  color: var(--ink);
  font-weight: 600;
}

.legal-article a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal-article a:hover { color: var(--ink-mute); }

.legal-dl {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 10px 24px;
  margin: 0;
  padding: 18px 24px;
  background: var(--paper-dim);
  border: 1px solid var(--paper-line);
}
.legal-dl dt {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.legal-dl dd {
  font-size: 14.5px;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.6;
}
@media (max-width: 640px) {
  .legal-dl { grid-template-columns: 1fr; gap: 2px 0; padding: 16px 18px; }
  .legal-dl dd { margin-bottom: 8px; }
}

.legal-table-wrap { overflow-x: auto; }
.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  border-top: 1px solid var(--paper-line);
  border-bottom: 1px solid var(--paper-line);
}
.legal-table th,
.legal-table td {
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--paper-line);
  vertical-align: top;
}
.legal-table th {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
  background: var(--paper-dim);
}
.legal-table tbody tr:last-child td { border-bottom: 0; }
.legal-table td { color: var(--ink-soft); }
.legal-table td:first-child { font-weight: 600; color: var(--ink); }

.legal-note {
  font-size: 13px !important;
  color: var(--ink-mute) !important;
  line-height: 1.6;
  padding-top: 4px;
}

.legal-footer {
  padding: 24px 0 0;
  border-top: 1px solid var(--paper-line);
  margin-top: 12px;
}
.legal-footer p {
  font-size: 13.5px;
  color: var(--ink-mute);
  line-height: 1.8;
  margin: 0;
}
.legal-footer strong {
  font-weight: 600;
  color: var(--ink);
}