/* ============================================================
   MELLOW STUDIO · LANDING v5
   Editorial redesign — index nav, manifesto ticker,
   workflow diagram, oversized footer anchor.
   Built on Mellow DS-001 (Aubergine, Orchid, Paper, Bone).
   ============================================================ */

:root {
  /* Foundation — warm paper system */
  --paper:        #EEE6D5;
  --paper-50:     #F4EDDF;
  --paper-200:    #E4DAC4;
  --paper-300:    #D6C9AE;
  --paper-400:    #C2B49B;
  --bone:         #F7F1E4;
  --white:        #FFFFFF;

  --ink:          #141414;
  --ink-soft:     #3A3633;
  --muted:        #706C66;

  /* Aubergine */
  --auber-100:    #E2D2DC;
  --auber-200:    #C9AEBD;
  --auber-300:    #9F7B95;
  --auber-400:    #6E4E68;
  --auber:        #3E2A3E;
  --auber-700:    #2A1A2A;
  --auber-800:    #1F141F;
  --auber-900:    #150D15;

  /* Orchid */
  --orchid-100:   #E8DCF0;
  --orchid-200:   #D5C0E5;
  --orchid:       #B89BD9;
  --orchid-600:   #8E6FB5;
  --orchid-deep:  #3E2A5C;

  /* Quiet supports */
  --sage-300:     #C5CFB3;
  --sage:         #8A9B7C;
  --sage-500:     #73836E;
  --sage-600:     #5C6B50;
  --sage-deep:    #3E4A36;
  --sage-ink:     #1F2619;
  --apricot:      #D49F7B;
  --apricot-200:  #E8C7AD;
  --apricot-deep: #5E3826;

  --line:         rgba(20,20,20,0.10);
  --line-strong:  rgba(20,20,20,0.20);
  --line-light:   rgba(255,255,255,0.14);

  /* Named tints — frequently re-used color-mix expressions */
  --bone-soft:            color-mix(in oklab, var(--bone) 80%, transparent);
  --bone-dim:             color-mix(in oklab, var(--bone) 12%, transparent);
  --orchid-overlay:       color-mix(in oklab, var(--orchid-deep) 22%, transparent);
  --orchid-overlay-strong: color-mix(in oklab, var(--orchid-deep) 70%, transparent);

  --r-sm: 6px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-full: 9999px;

  /* Prose / body text scale */
  --t-lede:     clamp(18px, 1.5vw, 22px);   /* intro paragraphs, hero lede */
  --t-prose:    20px;                        /* canonical long-form body */
  --t-prose-sm: clamp(16px, 1.2vw, 18px);    /* compact body (lists, codas) */

  /* Mono label scale (kickers, meta tags, in-card metadata) */
  --t-label:    11px;
  --t-label-sm: 10px;

  --max: 1520px;
  --gutter: 40px;

  --f-primary: 'Archivo', system-ui, sans-serif;
  --f-emph:    'Instrument Serif', Georgia, serif;
  --f-mono:    'JetBrains Mono', ui-monospace, monospace;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--f-primary);
  background: var(--paper);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.5;
  font-feature-settings: "ss01","tnum";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
::selection { background: var(--orchid); color: var(--orchid-deep); }
img { display: block; max-width: 100%; }

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
@media (max-width: 768px) {
  .wrap { padding-left: 24px; padding-right: 24px; }
}

/* ─────────── Reusable type ─────────── */

.kicker {
  font-family: var(--f-mono);
  font-size: var(--t-label); font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
}
.kicker .dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--orchid); margin-right: 12px; vertical-align: 1px;
}
.kicker--light { color: var(--auber-200); }
.kicker--light .dot { background: var(--orchid); }
.kicker--sage .dot { background: var(--sage); }
.kicker--apricot .dot { background: var(--apricot); }

.italic {
  font-family: var(--f-emph);
  font-style: italic; font-weight: 400;
  letter-spacing: -0.01em;
}

/* ─────────── INDEX NAV ─────────── */
/* Two-row: brand + index. Sits as a thin liquid-glass strip. */

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  background: transparent;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.nav .brand-logo,
.nav .nav-cta {
  transition: filter 280ms var(--ease),
              background 280ms var(--ease),
              color 280ms var(--ease),
              border-color 280ms var(--ease);
}
.nav.nav--dark .brand-logo {
  filter: invert(1);
}
.nav.nav--dark .nav-cta {
  background: var(--white);
  color: var(--auber);
  border-color: var(--white);
}
.nav.nav--dark .nav-cta:hover {
  background: var(--orchid-100);
  color: var(--auber);
}
.nav-row1 {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
}
.nav-row2 {
  display: flex; align-items: center; justify-content: space-between;
  height: 40px;
  border-top: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.brand {
  display: inline-flex; align-items: center;
  text-decoration: none; color: var(--ink);
}
.brand-logo {
  height: 17px;
  width: auto;
  display: block;
}
.nav-status {
  display: flex; align-items: center; gap: 14px;
}
.nav-status .pill {
  padding: 5px 12px; border-radius: var(--r-full);
  background: var(--white); border: 1px solid var(--paper-300);
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink);
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.nav-status .pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--sage); position: relative;
}
.nav-status .pulse::after {
  content: ""; position: absolute; inset: -3px;
  border-radius: 50%; border: 1px solid var(--sage);
  animation: pulse 2.4s ease-out infinite; opacity: 0;
}
@keyframes pulse {
  0%   { transform: scale(0.8); opacity: 0.8; }
  70%  { transform: scale(1.7); opacity: 0; }
  100% { opacity: 0; }
}
.nav-cta {
  text-decoration: none;
  font-family: var(--f-primary); font-size: 14px; font-weight: 500;
  padding: 9px 18px; border-radius: var(--r-full);
  background: var(--auber); color: var(--white);
  border: 1px solid var(--auber);
  transition: background 280ms var(--ease), color 280ms var(--ease);
  display: inline-flex; align-items: center; gap: 8px;
}
.nav-cta:hover { background: var(--auber-700); }
.nav-cta .arrow { transition: transform 320ms var(--ease); }
.nav-cta:hover .arrow { transform: translateX(4px); }

.nav-index {
  display: flex; align-items: center; gap: 28px;
  list-style: none;
}
.nav-index li { display: flex; align-items: center; gap: 8px; }
.nav-index a {
  text-decoration: none; color: var(--muted);
  display: flex; align-items: center; gap: 8px;
  transition: color 280ms var(--ease);
}
.nav-index a:hover { color: var(--ink); }
.nav-index .num { color: var(--paper-400); font-weight: 500; }
.nav-meta-right { display: flex; gap: 28px; }
@media (max-width: 880px) {
  .nav-row2 { display: none; }
  .nav-status .pill { display: none; }
}

/* ─────────── HERO ─────────── */

.hero {
  position: relative;
  padding: 132px 0 0;
  background: var(--paper);
  overflow: hidden;
}
@media (max-width: 768px) { .hero { padding-top: 80px; } }

.hero-meta {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 24px; align-items: center;
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
  padding: 16px 0 28px;
}
.hero-meta .id { color: var(--ink); font-weight: 500; }
.hero-meta .rule { height: 1px; background: var(--line); }
.hero-meta .seal {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink);
}
.hero-meta .seal .star {
  display: inline-block; width: 10px; height: 10px;
  background: var(--auber);
  clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
@media (max-width: 720px) {
  .hero-meta { grid-template-columns: auto auto; }
  .hero-meta .rule, .hero-meta .seal { display: none; }
}

.hero-display {
  position: relative;
  padding: 32px 0 48px;
}
.hero-headline {
  font-family: var(--f-primary);
  font-weight: 800;
  font-size: clamp(56px, 11vw, 144px);
  line-height: 0.86;
  letter-spacing: -0.045em;
  color: var(--ink);
  text-wrap: balance;
}
.hero-headline .row { display: block; position: relative; }
.hero-headline .italic {
  font-weight: 400;
  font-size: 1.04em;
  line-height: 0.84;
  display: inline-block;
  vertical-align: -0.04em;
  letter-spacing: -0.012em;
}
.hero-headline .underline {
  position: relative; display: inline-block;
  white-space: nowrap;
}
.hero-headline .underline::after {
  content: ""; position: absolute;
  left: -0.04em; right: -0.04em; bottom: 0.05em;
  height: 0.18em;
  background: var(--orchid);
  z-index: -1;
  border-radius: 4px;
}

.hero-bottom {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(48px, 6vw, 120px);
  align-items: center;
  padding-top: 48px;
  border-top: 1px solid var(--line);
}
@media (max-width: 880px) {
  .hero-bottom { grid-template-columns: 1fr; gap: 40px; align-items: start; }
}
@media (max-width: 720px) {
  .hero { margin-bottom: 20px; }
  .hero-display { padding-bottom: 24px; }
  .hero-bottom { padding-top: 24px; }
}

.hero-lede {
  font-size: var(--t-lede);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 56ch;
}
.hero-lede p + p { margin-top: 18px; }
.hero-lede strong {
  font-weight: 700; color: var(--ink);
}

.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.hero-actions .row {
  display: flex; gap: 12px; align-items: center;
  flex-wrap: wrap;
}

/* ─────────── BUTTONS ─────────── */
.btn {
  font-family: var(--f-primary);
  font-weight: 500; font-size: 16px;
  letter-spacing: -0.005em;
  padding: 16px 26px;
  border-radius: var(--r-full);
  border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 10px;
  transition: transform 480ms var(--ease),
              background 280ms var(--ease),
              color 280ms var(--ease),
              border-color 280ms var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn .arrow { transition: transform 480ms var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn-primary { background: var(--auber); color: var(--white); }
.btn-primary:hover { background: var(--auber-700); }
.btn-orchid { background: var(--orchid); color: var(--orchid-deep); }
.btn-orchid:hover { background: var(--orchid-600); color: var(--white); }
.btn-ghost {
  background: transparent; color: var(--ink);
  border-color: var(--line-strong);
}
.btn-ghost:hover { background: var(--white); border-color: var(--ink); }
.btn-ghost-dark {
  background: transparent; color: var(--white);
  border-color: rgba(255,255,255,0.30);
}
.btn-ghost-dark:hover { border-color: var(--white); background: rgba(255,255,255,0.05); }
.hint {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
  display: flex; align-items: center; gap: 10px;
}
.hint .dash { width: 18px; height: 1px; background: var(--line-strong); }

/* ─────────── MANIFESTO TICKER ─────────── */

.ticker {
  background: var(--auber);
  color: var(--bone);
  padding: 36px 0;
  overflow: hidden;
  position: relative;
  border-top: 1px solid var(--auber-700);
  border-bottom: 1px solid var(--auber-700);
}
.ticker-track {
  display: flex; gap: 64px;
  width: max-content;
  animation: tickerScroll 56s linear infinite;
  align-items: center;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-item {
  display: inline-flex; align-items: center; gap: 32px;
  font-family: var(--f-primary);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 48px);
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--bone);
}
.ticker-item .em {
  font-family: var(--f-emph); font-style: italic; font-weight: 400;
  color: var(--orchid);
  letter-spacing: -0.01em;
}
.ticker-sep {
  color: var(--orchid);
  font-family: var(--f-emph); font-style: italic;
  font-size: 0.7em;
  display: inline-block; padding: 0 4px;
}
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
}

/* ─────────── LOGO STRIP ─────────── */

.proof {
  background: var(--paper);
  padding: clamp(56px, 7vw, 88px) 0 0;
  border-bottom: none;
}
.proof-head {
  display: flex; justify-content: space-between;
  align-items: end; flex-wrap: wrap;
  gap: 16px; margin-bottom: clamp(48px, 6vw, 72px);
}
.proof-head .lhs {
  display: flex; flex-direction: column; gap: 18px;
  max-width: 56ch;
}
.proof-head .heading {
  font-family: var(--f-primary);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.022em;
  color: var(--ink);
  text-wrap: balance;
}
.logos {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--paper-300);
  border-bottom: 1px solid var(--paper-300);
}
@media (max-width: 880px) { .logos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .logos { grid-template-columns: 1fr; } }
.logo {
  display: flex; align-items: center; justify-content: center;
  padding: clamp(36px, 5vw, 56px) clamp(20px, 3vw, 40px);
  border-right: 1px solid var(--paper-300);
  min-height: 140px;
  opacity: 0.78;
  transition: opacity 280ms var(--ease);
}
.logo:hover { opacity: 1; }
.logo:last-child { border-right: none; }
@media (max-width: 880px) {
  .logo:nth-child(2n) { border-right: none; }
  .logo { border-bottom: 1px solid var(--paper-300); }
  .logo:nth-last-child(-n+2) { border-bottom: none; }
}
@media (max-width: 480px) {
  .logo { border-right: none; border-bottom: 1px solid var(--paper-300); }
  .logo:last-child { border-bottom: none; }
}
.logo-mark {
  font-family: var(--f-primary);
  font-weight: 700;
  font-size: clamp(20px, 1.7vw, 24px);
  letter-spacing: -0.018em;
  color: var(--ink); line-height: 1.05;
  text-align: center;
}
.logo-mark .sub {
  display: block; font-weight: 400;
  font-size: 0.7em; letter-spacing: 0.02em;
  margin-top: 4px; color: var(--ink-soft);
  font-family: var(--f-mono); text-transform: uppercase;
}
.logo-mark.serif {
  font-family: var(--f-emph); font-style: italic;
  font-weight: 400; letter-spacing: -0.01em;
  font-size: clamp(26px, 2.4vw, 32px);
}

/* ─────────── ANIMATED LOGO GRID (two-row) ─────────── */

.logo-grid {
  position: relative;
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  gap: 1px;
  background: var(--paper-300);
  border-top: 1px solid var(--paper-300);
  border-bottom: 1px solid var(--paper-300);
  margin-top: clamp(32px, 4vw, 48px);
  overflow: hidden;
}
.logo-row {
  background: var(--paper);
  overflow: hidden;
  position: relative;
  height: clamp(106px, 11vw, 145px);
}
.logo-row-inner {
  display: flex;
  align-items: center;
  height: 100%;
  width: max-content;
  /* The marquee scroll is driven by requestAnimationFrame in script.js
     (see "Logo wall marquee"), not a CSS animation: iOS Safari de-
     accelerates CSS animations under "Reduce Motion" and mis-renders
     this wide overflow row. will-change keeps it on its own GPU layer. */
  will-change: transform;
}
.lcell {
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 clamp(207px, 20.7vw, 299px);
  height: 100%;
  padding: 0 clamp(24px, 3vw, 48px);
  border-right: 1px solid var(--paper-300);
  opacity: 0.78;
  transition: opacity 280ms var(--ease);
}
.lcell:hover { opacity: 1; }
.lcell img {
  max-height: 38px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
/* Per-logo optical size tweaks (base 38px) */
.lcell img[src$="WW.svg"]            { max-height: 32.3px; } /* −15% */
.lcell img[src$="TB.svg"]            { max-height: 23.4px; } /* −38% */
.lcell img[src$="aberdeen.svg"]      { max-height: 32.3px; } /* −15% */
.lcell img[src$="standard-life.svg"] { max-height: 29.1px; } /* −24% */
.lcell img[src$="designit.svg"]      { max-height: 34.2px; } /* −10% */
.lcell img[src$="SW.svg"]            { max-height: 34.2px; } /* −10% */
.lcell img[src$="ii.svg"]            { max-height: 34.2px; } /* −10% */
.lcell img[src$="skyscanner.svg"]    { max-height: 41.8px; } /* +10% */
.lcell img[src$="lloyds.svg"]        { max-height: 41.8px; } /* +10% */
.lcell img[src$="cinc.svg"]          { max-height: 41.0px; } /* +8% */
.lcell img[src$="wipro.svg"]         { max-height: 45.6px; } /* +20% */

.logo-grid-edge {
  position: absolute; top: 0; bottom: 0;
  width: clamp(48px, 8vw, 140px);
  pointer-events: none;
  z-index: 2;
}
.logo-grid-edge--l {
  left: 0;
  background: linear-gradient(90deg, var(--paper) 0%, transparent 100%);
}
.logo-grid-edge--r {
  right: 0;
  background: linear-gradient(270deg, var(--paper) 0%, transparent 100%);
}

/* ─────────── WHAT WE REBUILD (workflow diagram + cards) ─────────── */

.rebuild {
  background: var(--paper);
  padding: clamp(96px, 12vw, 160px) 0;
  position: relative;
}

.rebuild-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
.rebuild-head .kicker { margin-bottom: 20px; display: block; }
.rebuild-title {
  font-family: var(--f-primary);
  font-weight: 700;
  font-size: clamp(40px, 6vw, 92px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-wrap: balance;
  max-width: 17ch;
}
.rebuild-title .italic {
  font-weight: 400;
  font-size: 1.05em; line-height: 0.9;
  display: inline-block; vertical-align: -0.02em;
}

.rebuild-lede {
  font-family: var(--f-emph); font-style: italic;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.3;
  color: var(--ink-soft);
  max-width: 38ch;
  letter-spacing: -0.005em;
}

.rebuild-head-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: end;
}
@media (max-width: 880px) { .rebuild-head-grid { grid-template-columns: 1fr; gap: 32px; } }

/* The diagram */
.diagram {
  margin-bottom: clamp(64px, 8vw, 112px);
  position: relative;
}
.diagram-frame {
  position: relative;
  border: 1px solid var(--paper-300);
  border-radius: var(--r-lg);
  background: var(--bone);
  padding: clamp(32px, 4vw, 56px);
  overflow: hidden;
}
.diagram-frame::before { display: none; }

.diagram-header {
  position: relative; z-index: 1;
  display: flex; justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.diagram-header .label {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted);
}
.diagram-header .label .num { color: var(--ink); font-weight: 500; }
.diagram-header .legend {
  display: flex; gap: 18px; flex-wrap: wrap;
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
}
.diagram-header .legend span { display: inline-flex; align-items: center; gap: 8px; }
.diagram-header .legend .swatch {
  width: 10px; height: 10px; border-radius: 50%;
}
.swatch.in   { background: var(--auber); }
.swatch.flow { background: var(--orchid); }
.swatch.out  { background: var(--sage); }

/* Three-column input → flow → output */
.flow-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 5fr 4fr 5fr;
  gap: 24px;
  align-items: stretch;
}
@media (max-width: 960px) {
  .flow-grid { grid-template-columns: 1fr; gap: 32px; }
}

.flow-col {
  display: flex; flex-direction: column;
  gap: 12px;
}
.flow-col-label {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
  display: flex; align-items: center; gap: 10px;
}
.flow-col-label .dot {
  width: 6px; height: 6px; border-radius: 50%;
}
.flow-col-label.in   .dot { background: var(--auber); }
.flow-col-label.out  .dot { background: var(--sage); }

.flow-card {
  background: var(--white);
  border: 1px solid var(--paper-300);
  border-radius: var(--r-md);
  padding: 16px 18px;
  display: flex; align-items: center; gap: 14px;
  font-family: var(--f-primary);
  font-weight: 500; font-size: 15px;
  letter-spacing: -0.005em;
  color: var(--ink);
  transition: border-color 280ms var(--ease), transform 280ms var(--ease);
  position: relative;
}
.flow-card:hover { border-color: var(--ink); transform: translateY(-1px); }
.flow-card .ic {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
  background: var(--paper-50);
  color: var(--auber);
  flex-shrink: 0;
}
.flow-card .ic svg {
  width: 16px; height: 16px;
  display: block;
}
.flow-card .meta {
  margin-left: auto;
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
}

.flow-center {
  background: var(--auber);
  color: var(--white);
  border-radius: var(--r-md);
  padding: 28px 24px;
  display: flex; flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--auber);
  min-height: 100%;
}
.flow-center > * { position: relative; }
.flow-center .head {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--orchid-200);
  display: flex; align-items: center; gap: 10px;
}
.flow-center .head .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--orchid);
}
.flow-center .title {
  font-family: var(--f-primary); font-weight: 700;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.0;
  letter-spacing: -0.025em;
}
.flow-center .title .italic {
  font-weight: 400;
}
.flow-center .stack {
  display: grid; gap: 8px;
}
.flow-pill {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--r-full);
  padding: 8px 14px;
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--bone);
}
.flow-pill .num {
  color: var(--orchid-200); font-weight: 500;
}

/* ─────────── REBUILD CARDS ─────────── */

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 960px) {
  .cards { grid-template-columns: 1fr; }
  .card-title br { display: none; }
  .card-body { max-width: 60ch; }
}

.card {
  background: var(--bone);
  border: 1px solid var(--paper-300);
  border-radius: var(--r-lg);
  padding: clamp(32px, 4vw, 44px);
  display: flex; flex-direction: column;
  position: relative;
  overflow: hidden;
  min-height: 360px;
  transition: transform 480ms var(--ease), border-color 280ms var(--ease);
}
.card:hover { transform: translateY(-4px); border-color: var(--auber-200); }

.card-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 36px;
}
@media (max-width: 768px) {
  .card-top { display: none; }
}
.card-num {
  display: none;
  font-family: var(--f-emph); font-style: italic; font-weight: 400;
  font-size: 56px; line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--auber);
}
.card-tag {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
  padding: 5px 10px;
  border: 1px solid var(--paper-300);
  border-radius: var(--r-full);
  background: var(--white);
}
.card-title {
  font-family: var(--f-primary);
  font-weight: 700;
  font-size: clamp(28px, 2.6vw, 38px);
  line-height: 1.0;
  letter-spacing: -0.028em;
  margin-bottom: 18px;
  color: var(--ink);
  text-wrap: balance;
}
.card-title .italic { font-weight: 400; }
.card-body {
  font-size: 16px; line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: auto;
  padding-bottom: 28px;
  max-width: 36ch;
}
.card-foot {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink);
  padding-top: 22px;
  border-top: 1px solid var(--paper-300);
}
.card-foot .arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--auber); color: var(--paper-50);
  font-size: 11px;
}

.card.is-orchid {
  background: var(--orchid);
  border-color: var(--orchid-600);
  color: var(--ink);
}
.card.is-orchid .card-num { color: var(--ink); }
.card.is-orchid .card-tag {
  background: color-mix(in oklab, var(--ink) 8%, transparent);
  border-color: color-mix(in oklab, var(--ink) 22%, transparent);
  color: var(--ink);
}
.card.is-orchid .card-title { color: var(--ink); }
.card.is-orchid .card-title .italic { color: var(--ink); }
.card.is-orchid .card-body { color: color-mix(in oklab, var(--ink) 80%, transparent); }
.card.is-orchid .card-foot {
  border-top-color: color-mix(in oklab, var(--ink) 25%, transparent);
  color: var(--ink);
}
.card.is-orchid .card-foot .arrow { background: var(--ink); color: var(--orchid); }

.card.is-dark {
  background: var(--auber);
  border-color: var(--auber-700);
  color: var(--white);
}
.card.is-dark .card-num { color: var(--orchid-200); }
.card.is-dark .card-tag {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
  color: var(--auber-200);
}
.card.is-dark .card-title { color: var(--white); }
.card.is-dark .card-title .italic { color: var(--orchid-200); }
.card.is-dark .card-body { color: var(--auber-100); }
.card.is-dark .card-foot {
  border-top-color: rgba(255,255,255,0.18);
  color: var(--white);
}
.card.is-dark .card-foot .arrow { background: var(--orchid); color: var(--orchid-deep); }

/* ─────────── SELECTED WORK / SLIDESHOW ─────────── */
.work {
  background: var(--paper);
  padding: clamp(96px, 12vw, 140px) 0 clamp(72px, 9vw, 120px);
}
.work .wrap { position: relative; }
.work-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px; align-items: end;
  padding-bottom: 28px;
  margin-bottom: clamp(40px, 5vw, 56px);
  border-bottom: 1px solid var(--line);
}
.work-head .left { display: flex; flex-direction: column; gap: 14px; }
.work-title {
  font-family: var(--f-primary);
  font-weight: 800;
  font-size: clamp(40px, 6vw, 92px);
  line-height: 0.95;
  letter-spacing: -0.038em;
  color: var(--ink);
  text-wrap: balance;
}
.work-controls {
  position: absolute;
  right: -32px;
  top: 0;
  z-index: 10;
  display: flex; align-items: center; gap: 14px;
  transform: translateY(-50%);
  pointer-events: none;
}
.work-controls .work-arrow { pointer-events: auto; }
.work-arrow {
  width: clamp(72px, 6vw, 96px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.32);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.06),
    0 12px 32px rgba(20, 20, 20, 0.14),
    0 2px 6px rgba(20, 20, 20, 0.08);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition:
    transform 360ms cubic-bezier(.2,.7,.2,1),
    background 360ms var(--ease),
    border-color 360ms var(--ease),
    box-shadow 360ms var(--ease),
    opacity 240ms var(--ease);
}
.work-arrow svg {
  width: 32%;
  height: 32%;
}
/* Only apply hover styling on devices that actually hover (mouse/trackpad).
   On touch, the first tap would otherwise trigger this :hover state — the
   button grows to scale(1.06) and stays there — which reads as the carousel
   "jumping" on the first arrow tap. */
@media (hover: hover) {
  .work-arrow:hover:not([disabled]) {
    transform: scale(1.06);
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.85),
      inset 0 -1px 0 rgba(0, 0, 0, 0.06),
      0 18px 44px rgba(20, 20, 20, 0.18),
      0 2px 8px rgba(20, 20, 20, 0.1);
  }
}
.work-arrow:active:not([disabled]) { transform: scale(0.98); }
.work-arrow[disabled] { opacity: 0.32; cursor: not-allowed; }

.work-lede {
  font-family: var(--f-emph); font-style: italic;
  font-size: var(--t-lede);
  line-height: 1.4;
  color: var(--ink-soft);
  max-width: 76ch;
}

.slides-viewport {
  position: relative;
  /* left edge sits at the wrap's gutter; right edge bleeds to the screen */
  margin-right: calc(50% - 50vw);
  overflow: hidden;
}
@media (max-width: 960px) {
  .work .wrap { padding-right: 0; }
  .slides-viewport { margin-right: 0; }
  .work-controls { right: 16px; gap: 10px; }
  .work-arrow { width: 56px; }
}

.slides-track {
  display: flex;
  gap: 24px;
  /* Span the full content width so the track's box always covers its slides.
     Without this the track is only viewport-wide and the slides overflow it;
     once translated, the track's box moves off-screen and iOS stops routing
     touches to it (carousel goes dead after the first swipe). */
  width: max-content;
  /* Movement is animated by requestAnimationFrame in script.js (not a CSS
     transition) so it still animates under the OS "Reduce Motion" setting. */
  will-change: transform;
}

.slide {
  flex: 0 0 auto;
  width: clamp(320px, 44vw, 720px);
  display: flex; flex-direction: column;
  gap: 24px;
}
@media (max-width: 768px) {
  .slide { width: 380px; }
}
.slide-media {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--bone);
  border: 1px solid var(--paper-300);
}
.slide-media .media-l {
  position: relative;
  background: var(--paper-50);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.slide-media .media-l .device-frame {
  width: 60%;
  aspect-ratio: 9 / 19;
  border-radius: 26px;
  background: var(--auber);
  border: 6px solid var(--ink);
  position: relative;
  box-shadow: 0 30px 60px -20px rgba(20,20,20,0.4);
  transform: translateY(8%);
}
.slide-media .media-l .device-frame::before {
  content: ""; position: absolute;
  top: 8px; left: 50%; transform: translateX(-50%);
  width: 38%; height: 16px;
  background: var(--ink); border-radius: 0 0 12px 12px;
}
.slide-media .media-l .device-screen {
  position: absolute; inset: 16px 6px 6px 6px;
  border-radius: 16px;
  background: linear-gradient(180deg, var(--paper-50), var(--bone));
  display: flex; flex-direction: column; padding: 18px 14px; gap: 10px;
}
.slide-media .media-l .device-screen .bar {
  height: 8px; border-radius: 4px;
  background: color-mix(in oklab, var(--auber) 18%, transparent);
}
.slide-media .media-l .device-screen .bar.short { width: 50%; }
.slide-media .media-l .device-screen .bar.long  { width: 90%; }
.slide-media .media-l .device-screen .bar.med   { width: 72%; }
.slide-media .media-l .device-screen .row {
  display: flex; gap: 6px; margin-top: 6px;
}
.slide-media .media-l .device-screen .pill {
  flex: 1; height: 22px;
  border-radius: var(--r-full);
  border: 1px solid color-mix(in oklab, var(--auber) 25%, transparent);
}
.slide-media .media-l .device-screen .pill.fill {
  background: var(--orchid);
  border-color: var(--orchid);
}
.slide-media .media-l .slide-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.slide-media .media-r {
  position: relative;
  background: var(--orchid);
  color: var(--auber);
  display: flex; flex-direction: column;
  justify-content: space-between;
  padding: clamp(8px, 3.2vw, 32px);
}
.slide.is-orchid  .slide-media .media-r { background: var(--orchid); }
.slide.is-sage    .slide-media .media-r { background: var(--sage-300); }
.slide.is-apricot .slide-media .media-r { background: color-mix(in oklab, var(--apricot) 75%, var(--paper-50)); }
.slide.is-mauve   .slide-media .media-r { background: var(--auber-200); }
.slide.is-bone    .slide-media .media-r { background: var(--bone); }

.slide.is-sage .slide-media .media-r { color: var(--sage-600); }
.slide.is-sage .slide-media .stat-num { color: var(--sage-ink); }
.slide.is-sage .slide-media .stat-label { color: var(--sage-deep); }

.slide.is-mauve .slide-media .stat-label { color: var(--auber); }
.slide.is-bone .slide-media .stat-label { color: var(--auber); }

.slide-media .brand-mark {
  align-self: flex-start;
  height: clamp(24px, 2.4vw, 32px);
  width: auto;
  max-width: 70%;
  display: block;
  object-fit: contain;
}
.slide-media .stat-num {
  font-family: var(--f-primary);
  font-weight: 800;
  font-style: normal;
  font-size: clamp(28px, 3.4vw, 54px);
  line-height: 0.9;
  letter-spacing: -0.025em;
  color: var(--auber);
}
.slide-media .stat-num .stat-pct {
  font-size: 0.6em;
  font-weight: 700;
  margin-left: 0.05em;
  vertical-align: 0.08em;
}
.slide-media .stat-num .stat-unit {
  font-family: var(--f-primary);
  font-weight: 700;
  font-style: normal;
  font-size: 0.49em;
  text-transform: none;
  margin-left: 0.18em;
  vertical-align: 0.06em;
  color: inherit;
  opacity: 1;
}
.slide-media .stat-num--multi {
  display: flex; flex-direction: column;
}
.slide-media .stat-num--multi .stat-line {
  display: block;
  white-space: nowrap;
}
.slide-media .stat-num--multi .stat-arrow {
  display: inline-block;
  margin-right: 0.04em;
  vertical-align: middle;
}
.slide-media .stat-num--multi .stat-arrow img,
.slide-media .stat-num--multi .stat-arrow svg {
  height: 0.75em;
  width: auto;
  display: block;
}
.slide-media .stat-label {
  font-family: var(--f-primary);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  max-width: 35ch;
  margin-top: 12px;
  letter-spacing: 0;
  color: var(--orchid-deep);
  opacity: 1;
}

.slide-body {
  display: flex; flex-direction: column;
  gap: 18px;
}
.slide-meta {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
}
.slide-meta .num { color: var(--ink); font-weight: 500; }
.slide-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--paper-400); }
@media (max-width: 768px) {
  .slide-meta { display: none; }
}

.slide-title {
  font-family: var(--f-primary); font-weight: 700;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.slide-text {
  font-size: 16px; line-height: 1.55;
  color: var(--ink-soft);
  max-width: 60ch;
}
@media (max-width: 768px) {
  .slide-text { display: none; }
}
.slide-cta {
  margin-top: 4px;
  align-self: flex-start;
}

@media (max-width: 1024px) and (min-width: 641px) {
  .slide-media .media-r > div { display: none; }
  .slide-media .media-r { justify-content: center; align-items: center; }
  .slide-media .brand-mark { align-self: center; }
}
@media (max-width: 640px) {
  .slide-media {
    aspect-ratio: 16 / 11;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }
  .slide-media .media-r { display: none; }
  .slide-title { font-size: 20px; }
}

.btn-pill {
  font-family: var(--f-primary); font-weight: 500;
  font-size: 14px; letter-spacing: -0.005em;
  padding: 12px 20px;
  border-radius: var(--r-full);
  border: 1px solid var(--ink); color: var(--ink);
  background: transparent; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background 240ms var(--ease), color 240ms var(--ease);
  white-space: nowrap;
}
.btn-pill:hover { background: var(--ink); color: var(--paper-50); }

/* ─────────── PRINCIPLES ─────────── */

.principles {
  background: var(--paper);
  padding: clamp(96px, 12vw, 160px) 0;
}
.principles-head {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(32px, 5vw, 80px);
  margin-bottom: clamp(64px, 8vw, 96px);
  align-items: end;
}
@media (max-width: 880px) { .principles-head { grid-template-columns: 1fr; gap: 32px; } }
.principles-head .kicker { margin-bottom: 20px; display: block; }
.principles-title {
  font-family: var(--f-primary);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 72px);
  line-height: 1.0;
  letter-spacing: -0.028em;
  color: var(--ink);
  text-wrap: balance;
}
.principles-title .italic {
  font-weight: 400;
}
.principles-pre {
  font-size: var(--t-lede);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 44ch;
}

.prin-list {
  list-style: none;
  border-top: 1px solid var(--paper-300);
}
.prin-list li {
  display: grid;
  grid-template-columns: 80px 5fr 7fr;
  gap: clamp(24px, 4vw, 64px);
  padding: clamp(28px, 3.5vw, 44px) 0;
  border-bottom: 1px solid var(--paper-300);
  align-items: baseline;
}
@media (max-width: 720px) {
  .prin-list li { grid-template-columns: 1fr; gap: 12px; }
}
.prin-num {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
}
.prin-title {
  font-family: var(--f-primary);
  font-weight: 600;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
.prin-title .italic {
  font-weight: 400;
}
.prin-body {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 56ch;
}

/* ─────────── CLOSING ─────────── */

footer {
  background: var(--auber-800); color: var(--auber-100);
  position: relative; overflow: hidden;
}
.foot-top {
  position: relative; z-index: 1;
  padding: clamp(72px, 9vw, 120px) 0 clamp(56px, 7vw, 96px);
  border-bottom: 1px solid color-mix(in oklab, var(--auber-200) 16%, transparent);
}
.foot-head {
  display: grid; grid-template-columns: 5fr 7fr;
  gap: clamp(32px, 5vw, 80px); align-items: end;
  margin-bottom: clamp(56px, 7vw, 96px);
}
@media (max-width: 880px) { .foot-head { grid-template-columns: 1fr; gap: 24px; } }
.foot-head .kicker { display: block; margin-bottom: 28px; }
.foot-mark {
  font-family: var(--f-primary); font-weight: 800;
  font-size: clamp(56px, 8vw, 128px); line-height: 0.92;
  letter-spacing: -0.04em; color: var(--white); text-wrap: balance;
}
.foot-mark .italic {
  color: var(--orchid-200); font-weight: 400;
  font-size: 1.05em; line-height: 0.85;
  display: inline-block; vertical-align: -0.025em;
}
.foot-head-aside {
  padding-bottom: clamp(8px, 1.5vw, 18px);
  display: flex; flex-direction: column; gap: 20px;
  align-items: flex-start;
}
.foot-head-aside .text {
  font-family: var(--f-emph); font-style: italic;
  font-size: clamp(22px, 1.9vw, 28px); line-height: 1.3;
  color: var(--auber-100); max-width: 28ch; letter-spacing: -0.005em;
}

.foot-grid {
  display: grid;
  grid-template-columns: 4fr 4fr 4fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 960px) { .foot-grid { grid-template-columns: 1fr 1fr; row-gap: 56px; } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; row-gap: 48px; } }

.foot-col-label {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--auber-300); margin-bottom: clamp(28px, 3vw, 40px);
  display: flex; align-items: center; gap: 10px;
}
.foot-col-label::before {
  content: ""; width: 24px; height: 1px;
  background: color-mix(in oklab, var(--auber-200) 35%, transparent);
  display: inline-block;
}

.offices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(20px, 3vw, 48px);
}
.office { display: flex; flex-direction: column; font-style: normal; }
.office-flag {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--orchid-200); margin-bottom: 14px;
  display: flex; align-items: center; gap: 10px;
}
.office-flag .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--orchid); display: inline-block;
}
.office-name {
  font-family: var(--f-primary); font-weight: 600;
  font-size: clamp(20px, 1.6vw, 24px); line-height: 1.15;
  letter-spacing: -0.015em; color: var(--white); margin-bottom: 10px;
}
.office-addr {
  font-family: var(--f-primary); font-size: 15px; line-height: 1.55;
  color: var(--auber-100); font-weight: 400;
}
.office-addr span { display: block; }

.foot-list {
  list-style: none; display: flex; flex-direction: column; gap: 14px;
}
.foot-list a, .foot-list .item {
  font-family: var(--f-primary); font-size: clamp(16px, 1.2vw, 18px);
  color: var(--white); text-decoration: none; font-weight: 500;
  letter-spacing: -0.005em; line-height: 1.3;
  display: inline-flex; align-items: baseline; gap: 12px;
  transition: color 200ms ease;
}
.foot-list a:hover { color: var(--orchid-200); }
.foot-list .tag {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--auber-300); font-weight: 500; min-width: 28px;
}
.foot-cta-row {
  margin-top: clamp(28px, 3vw, 36px);
  display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
}
.foot-cta-sub {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--auber-300);
}

.foot-bottom {
  position: relative; z-index: 1;
  padding-block: 28px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px;
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--auber-300);
}
.foot-bottom a { color: var(--auber-300); text-decoration: none; transition: color 200ms ease; }
.foot-bottom a:hover { color: var(--white); }
.foot-bottom .lhs { display: flex; align-items: center; gap: 10px; }
.foot-bottom .lhs .dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--orchid);
}
.foot-bottom .rhs { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }

/* ─────────── REVEAL ─────────── */
.js-reveal .fade-up { opacity: 0; transform: translateY(20px); animation: fadeUp 1100ms var(--ease) forwards; }
.js-reveal .fade-up.d1 { animation-delay: 80ms; }
.js-reveal .fade-up.d2 { animation-delay: 220ms; }
.js-reveal .fade-up.d3 { animation-delay: 380ms; }
.js-reveal .fade-up.d4 { animation-delay: 560ms; }
.js-reveal .fade-up.d5 { animation-delay: 740ms; }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
.js-reveal .reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity 1000ms var(--ease), transform 1000ms var(--ease);
}
.js-reveal .reveal.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js-reveal .fade-up, .js-reveal .reveal { opacity: 1; transform: none; }
}

/* ─────────── PRACTICE — sage two-column ─────────── */
.practice {
  padding: clamp(56px, 7vw, 88px) 0;
  position: relative;
  overflow: hidden;
}
.practice-tag {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: clamp(28px, 3vw, 40px);
  opacity: 0.7;
}
.practice-h {
  font-family: var(--f-primary);
  font-weight: 600;
  font-size: clamp(32px, 4.4vw, 60px);
  line-height: 1.0;
  letter-spacing: -0.028em;
  color: var(--ink);
  text-wrap: balance;
  margin: 0;
}
.practice-h .italic {
  font-weight: 400;
}
.practice-body {
  font-family: var(--f-primary);
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-width: 56ch;
}

.btn-ink {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--ink);
  color: var(--paper-50);
  padding: 14px 22px;
  border-radius: var(--r-full);
  border: 1px solid var(--ink);
  font-family: var(--f-primary);
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  transition: background 280ms var(--ease), color 280ms var(--ease);
}
.btn-ink:hover { background: var(--auber-700); }
.btn-ink .arrow { transition: transform 320ms var(--ease); }
.btn-ink:hover .arrow { transform: translateX(4px); }

.practice--v1 {
  background: var(--sage-300);
  color: var(--ink);
}
.practice--v1 .practice-tag { color: var(--sage-deep); opacity: 1; }
.practice--v1 .practice-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: normal;
}
.practice--v1 .practice-h { max-width: 16ch; }
.practice--v1 .practice-r {
  display: flex; flex-direction: column;
  gap: clamp(20px, 2.4vw, 28px);
  align-items: flex-start;
}
.practice--v1 .practice-body { color: var(--sage-ink); max-width: 48ch; }
@media (max-width: 880px) {
  .practice--v1 .practice-grid { grid-template-columns: 1fr; gap: 28px; align-items: start; }
}

/* ─────────── TIMELINE — V3 RAIL WITH CARDS ─────────── */
.qtl {
  background: var(--auber);
  color: var(--bone);
  padding: clamp(72px, 7vw, 110px) 0 clamp(48px, 5vw, 80px);
  position: relative;
  overflow: hidden;
}
.qtl::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 40% at 50% 0%, color-mix(in oklab, var(--orchid) 8%, transparent), transparent 65%),
    radial-gradient(50% 30% at 0% 100%, color-mix(in oklab, var(--apricot) 5%, transparent), transparent 60%);
  pointer-events: none;
}
.qtl .wrap { position: relative; z-index: 1; }

.qtl-head {
  text-align: center;
  margin-bottom: clamp(48px, 5vw, 72px);
}
.qtl-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--bone) 55%, transparent);
  margin-bottom: 22px;
}
.qtl-kicker .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--orchid);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--orchid) 18%, transparent);
}
.qtl-title {
  font-family: var(--f-emph);
  font-weight: 400;
  font-size: clamp(48px, 6.2vw, 92px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--bone);
  margin: 0;
  text-wrap: balance;
}
.qtl-title .qtl-l2 {
  display: block;
  font-style: italic;
  color: var(--auber-200);
  margin-top: 6px;
}

.qtl-timeline {
  position: relative;
  max-width: 960px;
  margin-inline: auto;
  padding-block: clamp(20px, 3vw, 40px);
}

.qtl-rail {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%; transform: translateX(-50%);
  width: 1px;
  background: color-mix(in oklab, var(--bone) 10%, transparent);
}
.qtl-rail-fill {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 0;
  background: linear-gradient(180deg,
    var(--orchid) 0%,
    var(--apricot) 50%,
    var(--orchid-200) 100%);
  opacity: 0.85;
  transition: height .35s ease-out;
}

.qtl-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 64px 1fr;
  align-items: center;
  min-height: 160px;
  padding-block: clamp(8px, 1.2vw, 16px);
}
.qtl-row + .qtl-row { margin-top: clamp(-8px, -0.4vw, 0px); }

.qtl-ghost {
  position: absolute;
  top: 23%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--f-emph);
  font-style: italic;
  font-weight: 400;
  font-size: 132px;
  line-height: 1;
  color: color-mix(in oklab, var(--bone) 4%, transparent);
  letter-spacing: -0.04em;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.qtl-card {
  position: relative;
  background: color-mix(in oklab, var(--auber-700) 70%, transparent);
  border: 1px solid color-mix(in oklab, var(--bone) 8%, transparent);
  border-radius: 18px;
  padding: 22px 26px 24px;
  z-index: 2;
  transition: transform .35s ease, border-color .35s ease, background .35s ease, box-shadow .35s ease;
  backdrop-filter: blur(2px);
}
.qtl-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--qtl-seg, var(--orchid)) 55%, transparent);
  box-shadow: 0 20px 50px -20px rgba(0,0,0,0.5),
              0 0 0 1px color-mix(in oklab, var(--qtl-seg, var(--orchid)) 18%, transparent);
}

.qtl-row[data-i="0"] .qtl-card { grid-column: 1; justify-self: end;   text-align: right; max-width: 420px; }
.qtl-row[data-i="1"] .qtl-card { grid-column: 3; justify-self: start; text-align: left;  max-width: 420px; }
.qtl-row[data-i="2"] .qtl-card { grid-column: 1; justify-self: end;   text-align: right; max-width: 420px; }
.qtl-row[data-i="3"] .qtl-card { grid-column: 3; justify-self: start; text-align: left;  max-width: 420px; }

.qtl-row[data-i="0"] .qtl-ghost,
.qtl-row[data-i="2"] .qtl-ghost {
  left: calc(50% + 50px);
  transform: translateY(-50%);
}
.qtl-row[data-i="1"] .qtl-ghost,
.qtl-row[data-i="3"] .qtl-ghost {
  left: auto;
  right: calc(50% + 60px);
  transform: translateY(-50%);
}

.qtl-row[data-i="0"] { --qtl-seg: var(--orchid); }
.qtl-row[data-i="1"] { --qtl-seg: var(--apricot); }
.qtl-row[data-i="2"] { --qtl-seg: var(--apricot-200); }
.qtl-row[data-i="3"] { --qtl-seg: var(--orchid-200); }

.qtl-week {
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--qtl-seg);
  display: inline-block;
  margin-bottom: 10px;
}
.qtl-row[data-i="2"] .qtl-week { color: var(--sage-300); }
.qtl-row[data-i="3"] .qtl-week { color: var(--white); }
.qtl-card-title {
  font-family: var(--f-primary);
  font-weight: 700;
  font-size: clamp(30px, 3.2vw, 32px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--white);
  margin: 0 0 12px;
}
.qtl-card-body {
  font-family: var(--f-primary);
  font-size: 14.5px;
  line-height: 1.5;
  color: color-mix(in oklab, var(--bone) 72%, transparent);
  margin: 0;
}

.qtl-node {
  grid-column: 2;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--auber-800);
  border: 1px solid color-mix(in oklab, var(--qtl-seg) 35%, transparent);
  display: grid; place-items: center;
  color: var(--qtl-seg);
  position: relative;
  z-index: 3;
  margin-inline: auto;
  transition: transform .35s ease, background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.qtl-node svg { width: 20px; height: 20px; }
.qtl-node::after {
  content: "";
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--qtl-seg) 0%, transparent);
  transition: border-color .35s ease;
}
.qtl-row.is-on .qtl-node {
  background: color-mix(in oklab, var(--qtl-seg) 22%, var(--auber-800));
  border-color: var(--qtl-seg);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--qtl-seg) 12%, transparent);
}
.qtl-row.is-on .qtl-node::after {
  border-color: color-mix(in oklab, var(--qtl-seg) 35%, transparent);
}
.qtl-row.is-on .qtl-ghost {
  color: color-mix(in oklab, var(--qtl-seg) 8%, transparent);
}

.qtl-card, .qtl-ghost, .qtl-node {
  opacity: 0; transform: translateY(14px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1), border-color .35s ease, background .35s ease, box-shadow .35s ease;
}
.qtl-row.is-in .qtl-card,
.qtl-row.is-in .qtl-ghost,
.qtl-row.is-in .qtl-node {
  opacity: 1; transform: translateY(0);
}
.qtl-row.is-in .qtl-ghost { transition-delay: .05s; }
.qtl-row.is-in .qtl-node  { transition-delay: .12s; }
.qtl-row.is-in .qtl-card  { transition-delay: .18s; }

@media (max-width: 760px) {
  .qtl-timeline { max-width: none; padding-block: 8px; }
  .qtl-rail { left: 24px; transform: none; }
  .qtl-row {
    grid-template-columns: 48px 1fr;
    column-gap: 14px;
    align-items: center;
    min-height: auto;
    padding-block: 0;
  }
  .qtl-row + .qtl-row { margin-top: 14px; }
  .qtl-row[data-i] .qtl-card {
    grid-column: 2;
    grid-row: 1;
    justify-self: stretch;
    max-width: none;
    text-align: left;
  }
  .qtl-row .qtl-node {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }
  .qtl-row .qtl-ghost { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .qtl-card, .qtl-ghost, .qtl-node { opacity: 1; transform: none; }
  .qtl-rail-fill { transition: none; }
}

/* ─────────── CONTACT LIGHTBOX ─────────── */
/* One shared "Get in touch" form, injected into <body> by script.js on
   every page and opened by any [data-contact-open] trigger. Centred on
   desktop, full-screen on phones; dismissed via the ×, the backdrop, or
   Escape. The triggers keep their mailto: href as a no-JS fallback, and
   the open/close transitions fall back to instant under Reduce Motion via
   the global rule above. */

body.contact-open { overflow: hidden; }

.contact-modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(20px, 4vw, 48px);
}
.contact-modal[hidden] { display: none; }

.contact-backdrop {
  position: absolute; inset: 0;
  background: color-mix(in oklab, var(--auber-900) 66%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 320ms var(--ease);
}
.contact-modal.is-open .contact-backdrop { opacity: 1; }

.contact-dialog {
  position: relative;
  width: 100%; max-width: 560px;
  max-height: calc(100dvh - 2 * clamp(20px, 4vw, 48px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bone);
  color: var(--ink);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  box-shadow: 0 40px 90px -24px rgba(21,13,21,0.55);
  padding: clamp(28px, 4vw, 48px);
  opacity: 0; transform: translateY(14px) scale(0.98);
  transition: opacity 380ms var(--ease), transform 380ms var(--ease);
}
.contact-modal.is-open .contact-dialog { opacity: 1; transform: none; }

.contact-close {
  position: absolute; top: 14px; right: 14px;
  width: 42px; height: 42px; border-radius: var(--r-full);
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--ink);
  border: 2px solid var(--ink); cursor: pointer;
  transition: background 240ms var(--ease), color 240ms var(--ease),
              border-color 240ms var(--ease), transform 240ms var(--ease);
}
.contact-close:hover { background: var(--ink); color: var(--bone); transform: scale(1.06); }
.contact-close:hover svg { transform: rotate(90deg); }
.contact-close:active { transform: scale(0.95); }
.contact-close svg {
  width: 18px; height: 18px;
  transition: transform 320ms var(--ease);
}

.contact-head { margin-bottom: clamp(22px, 3vw, 30px); padding-right: 44px; }
.contact-title {
  font-family: var(--f-primary); font-weight: 800;
  font-size: clamp(34px, 5.4vw, 52px); line-height: 0.94;
  letter-spacing: -0.03em; color: var(--ink); text-wrap: balance;
}

/* Fields */
.contact-form { display: flex; flex-direction: column; gap: 18px; }
.contact-field { display: flex; flex-direction: column; gap: 7px; }
.contact-field label {
  font-family: var(--f-mono); font-size: var(--t-label); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.contact-field label .req { color: var(--auber-400); margin-left: 1px; }
.contact-input {
  font-family: var(--f-primary); font-size: 16px; color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line-strong); border-radius: 10px;
  padding: 13px 15px; width: 100%;
  transition: border-color 220ms var(--ease), box-shadow 220ms var(--ease);
}
.contact-input::placeholder { color: var(--paper-400); }
.contact-input:focus {
  outline: none; border-color: var(--auber-400);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--orchid) 42%, transparent);
}
textarea.contact-input { resize: vertical; min-height: 168px; line-height: 1.5; }

.contact-input[aria-invalid="true"] {
  border-color: #B0413A;
  box-shadow: 0 0 0 3px color-mix(in oklab, #B0413A 20%, transparent);
}
.contact-error {
  font-family: var(--f-primary); font-size: 13px; line-height: 1.4;
  color: #9A332C;
}
.contact-error:empty { display: none; }

.contact-actions {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin-top: 4px;
}
.contact-submit { font-size: 15px; padding: 14px 24px; }
.contact-submit:disabled { opacity: 0.6; cursor: default; transform: none; }

/* Honeypot — kept in the layout but off-screen so real users never see or
   tab to it; bots that fill it are dropped (client- and server-side) */
.contact-hp {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* Submission-level error (network / provider), distinct from field errors */
.contact-formerror {
  font-family: var(--f-primary); font-size: 13px; line-height: 1.4;
  color: #9A332C; margin-top: 12px;
}
.contact-formerror:empty { display: none; }

/* Success state */
.contact-success-mark {
  width: 54px; height: 54px; border-radius: var(--r-full);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sage); color: var(--white); margin-bottom: 22px;
}
.contact-success-mark svg { width: 26px; height: 26px; }
.contact-success h3 {
  font-family: var(--f-primary); font-weight: 800;
  font-size: clamp(26px, 3.4vw, 34px); line-height: 1; text-wrap: balance;
  letter-spacing: -0.02em; color: var(--ink); margin-bottom: 12px;
}
.contact-success p {
  font-size: var(--t-prose-sm); line-height: 1.55; color: var(--ink-soft);
  max-width: 42ch;
}
.contact-success a {
  color: var(--auber-400); text-decoration: underline; text-underline-offset: 3px;
}

/* Phones — full screen */
@media (max-width: 768px) {
  .contact-modal { padding: 0; }
  .contact-dialog {
    max-width: none; width: 100%;
    height: 100dvh; max-height: none;
    border-radius: 0; border: none;
    padding: 76px 24px 36px;
  }
  .contact-close { top: 16px; right: 16px; }
}