/* ================================================================
   NUVŌ — MAIN.CSS
   Philosophy B: Warm Dark | Emotion: CERTAINTY
   §12 Template — exact values
   ================================================================ */

/* ───────────────────────────────────────────────────────────────
   1. CUSTOM PROPERTIES
─────────────────────────────────────────────────────────────── */
:root {
  /* Colors — Philosophy B (§2.1 / §12 EXACT) */
  --bg-primary:   #1C1A18;
  --bg-secondary: #242220;
  --bg-elevated:  #2E2C2A;
  --text-primary:   #F5F0E8;
  --text-secondary: rgba(245,240,232,0.6);
  --text-tertiary:  rgba(245,240,232,0.35);
  --accent: #C9A227;   /* Gold — 3 locations only */

  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'DM Sans', -apple-system, sans-serif;

  /* Type scale */
  --text-xs:   clamp(10px, 0.7vw,  12px);
  --text-sm:   clamp(12px, 0.85vw, 14px);
  --text-base: clamp(14px, 1vw,    16px);
  --text-lg:   clamp(16px, 1.25vw, 20px);
  --text-xl:   clamp(20px, 1.75vw, 28px);
  --text-2xl:  clamp(30px, 3.4vw,  56px);
  --text-3xl:  clamp(40px, 5.2vw,  88px);
  --text-hero: clamp(46px, 7.4vw, 132px);
  --text-mega: clamp(72px, 17vw,  300px);

  /* Spacing — cinematic breathing room */
  --section-pad: clamp(80px, 12vw, 200px);
  --hero-pad:    clamp(88px, 11vw, 150px);

  /* Translucent section fills — content floats over the 3D field.
     Slightly opaque so text stays crisp WITHOUT costly backdrop blur. */
  --glass-secondary: rgba(34, 32, 30, 0.9);
  --glass-elevated:  rgba(46, 44, 42, 0.9);
  --glass-card:      rgba(44, 42, 40, 0.82);

  /* Content widths */
  --content-w:    1080px;
  --content-wide: 1280px;

  /* Borders */
  --border-subtle: 1px solid rgba(245,240,232,0.08);

  /* Radius — all 0 for formal/agency */
  --radius-none: 0;
  --radius-full: 9999px;

  /* Motion (§7.1 / §12 exact) */
  --dur-fast:      200ms;
  --dur-reveal:    700ms;
  --dur-dramatic:  1000ms;
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --stagger:       120ms;

  /* Z-index layers */
  --z-base:   0;
  --z-card:   10;
  --z-sticky: 100;
  --z-nav:    1000;
  --z-modal:  3000;
  --z-cursor: 9999;
}

/* ───────────────────────────────────────────────────────────────
   2. RESET & BASE
─────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  width: 100%;
  overflow-x: hidden;   /* belt-and-braces: stop any element widening the viewport */
  /* Stop mobile browsers (Android Chrome / iOS Safari) from auto-inflating
     text — this is what made fonts look huge & disproportionate on a real
     phone but fine in the emulator. Respect the exact CSS sizes. */
  -webkit-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
          text-size-adjust: 100%;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 0;
  overflow-x: hidden;
  cursor: none;
}

/* Film grain overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: var(--z-modal);
  opacity: 0.35;
  mix-blend-mode: overlay;
}
/* Grain is costly to recomposite on scroll — drop it on phones */
@media (max-width: 768px) {
  body::after { display: none; }
}

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

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

ul {
  list-style: none;
}

button {
  background: none;
  border: none;
  cursor: none;
  font-family: inherit;
}

/* Scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: rgba(245,240,232,0.2); }

/* Focus visible */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  padding: 8px 16px;
  background: var(--accent);
  color: var(--bg-primary);
  font-size: var(--text-sm);
  font-weight: 500;
  z-index: calc(var(--z-cursor) + 1);
  transition: top var(--dur-fast);
}
.skip-link:focus { top: 16px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ───────────────────────────────────────────────────────────────
   2.5  GLOBAL THREE.JS BACKGROUND + CINEMATIC LETTERBOX
─────────────────────────────────────────────────────────────── */
/* The particle field is fixed behind the whole document.
   All content floats above it on z-index:1+. */
.site-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0;            /* faded in by GSAP after curtain */
  pointer-events: none;
}

/* Content layer sits above the field */
#main-content,
.footer {
  position: relative;
  z-index: 1;
}

/* Footer keeps a near-solid base so copy stays calm */
.footer {
  background: var(--glass-secondary);
}

/* Cinematic 21:9 letterbox — soft vignette top & bottom */
.letterbox {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-nav) - 1);
  pointer-events: none;
}
.letterbox::before,
.letterbox::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: clamp(40px, 7vh, 90px);
  background: linear-gradient(var(--bg-primary), rgba(28,26,24,0));
}
.letterbox::before { top: 0; }
.letterbox::after  { bottom: 0; transform: scaleY(-1); }

/* ───────────────────────────────────────────────────────────────
   3. SCROLL PROGRESS BAR
─────────────────────────────────────────────────────────────── */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgba(245,240,232,0.08);
  z-index: calc(var(--z-nav) + 1);
  transform-origin: left;
  transform: scaleX(0);
}
.scroll-progress::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--text-secondary);
  transform-origin: left;
  transform: scaleX(var(--progress, 0));
}

/* ───────────────────────────────────────────────────────────────
   4. CURTAIN
─────────────────────────────────────────────────────────────── */
.curtain {
  position: fixed;
  inset: 0;
  background: var(--bg-primary);
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  clip-path: inset(0 0 0% 0);
  will-change: clip-path;
}

.curtain__logo {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 900;
  letter-spacing: 0.25em;
  color: var(--text-primary);
  opacity: 0;
}
.curtain__logo span {
  color: var(--text-secondary);
}
.curtain__sub {
  margin-top: 20px;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  text-align: center;
  padding: 0 24px;
  opacity: 0;
}

/* ───────────────────────────────────────────────────────────────
   5. CUSTOM CURSOR
─────────────────────────────────────────────────────────────── */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: var(--z-cursor);
}

.cursor__dot {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--text-primary);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
}

.cursor__ring {
  position: absolute;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(245,240,232,0.4);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width var(--dur-fast), height var(--dur-fast), border-color var(--dur-fast);
}

.cursor--hover .cursor__ring {
  width: 60px;
  height: 60px;
  border-color: rgba(245,240,232,0.7);
}

@media (max-width: 768px) {
  .cursor { display: none; }
  body { cursor: auto; }
  button { cursor: pointer; }
}

/* ───────────────────────────────────────────────────────────────
   6. NAVIGATION
─────────────────────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: var(--z-nav);
  transition: background var(--dur-reveal) var(--ease-out),
              padding var(--dur-reveal) var(--ease-out),
              transform var(--dur-reveal) var(--ease-out);
}

.nav.scrolled {
  background: rgba(28,26,24,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: var(--border-subtle);
}

.nav.hidden {
  transform: translateY(-100%);
}

.nav__inner {
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: 20px 32px;
  display: flex;
  align-items: center;
  gap: 32px;
  transition: padding var(--dur-reveal) var(--ease-out);
}

.nav.scrolled .nav__inner {
  padding: 12px 32px;
}

.nav__logo {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 900;
  letter-spacing: 0.2em;
  color: var(--text-primary);
  flex-shrink: 0;
}
.nav__logo span {
  color: var(--text-secondary);
}

.nav__links {
  display: none;
  align-items: center;
  gap: 32px;
  margin-left: auto;
}

@media (min-width: 1024px) {
  .nav__links { display: flex; }
}

.nav__link {
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  position: relative;
  transition: color var(--dur-fast);
}
.nav__link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--text-primary);
  transition: width 350ms var(--ease-out);
}
.nav__link:hover {
  color: var(--text-primary);
}
.nav__link:hover::after {
  width: 100%;
}

.nav__cta {
  margin-left: auto;
}
/* .nav__cta also carries .btn (display:inline-flex), which is defined later
   and would override a plain `display:none`. Use .nav__cta.btn so the hide
   wins on mobile — otherwise the desktop "Book a Call" shows on phones. */
.nav__cta.btn { display: none; }

@media (min-width: 1024px) {
  .nav__cta.btn { display: inline-flex; }
}

/* Hamburger */
.nav__hamburger {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 32px;
  padding: 4px;
}

@media (min-width: 1024px) {
  .nav__hamburger { display: none; }
}

.bar {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--text-primary);
  transition: transform var(--dur-reveal) var(--ease-out),
              opacity var(--dur-fast);
  transform-origin: center;
}

.nav__hamburger.open .bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav__hamburger.open .bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav__hamburger.open .bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Mobile menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--bg-secondary);
  z-index: calc(var(--z-nav) - 1);
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: circle(0% at 95% 5%);
  transition: clip-path 600ms var(--ease-out);
  pointer-events: none;
}

.mobile-menu.open {
  clip-path: circle(150% at 95% 5%);
  pointer-events: all;
}

.mobile-menu__links {
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-align: center;
}

.mobile-link {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-primary);
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity var(--dur-reveal) var(--ease-out),
              transform var(--dur-reveal) var(--ease-out),
              color var(--dur-fast);
}
.mobile-link:hover { color: var(--text-secondary); }

.mobile-menu.open .mobile-link {
  opacity: 1;
  transform: translateX(0);
}

.mobile-link--cta {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: 500;
  margin-top: 16px;
  color: var(--text-secondary);
}

/* ───────────────────────────────────────────────────────────────
   7. BUTTONS
─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius-none);
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast),
              color var(--dur-fast),
              border-color var(--dur-fast),
              filter var(--dur-fast);
  min-height: 44px;
  min-width: 44px;
  white-space: nowrap;
}

/* PRIMARY — Gold (Location 1 of 3) */
.btn--primary {
  background: #C9A227;
  color: #1C1A18;
  border: 1px solid #C9A227;
}
.btn--primary:hover {
  filter: brightness(1.12);
  transform: translateY(-2px);
}
.btn--primary:active {
  transform: scale(0.98) translateY(0);
}

/* GHOST */
.btn--ghost {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid rgba(245,240,232,0.3);
}
.btn--ghost:hover {
  background: var(--text-primary);
  color: var(--bg-primary);
  border-color: var(--text-primary);
}

/* TEXT + ARROW */
.btn--text {
  background: none;
  border: none;
  padding: 14px 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.btn--text:hover { color: var(--text-primary); }
.btn__arrow {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-out);
}
.btn--text:hover .btn__arrow { transform: translateX(4px); }

/* ───────────────────────────────────────────────────────────────
   8. SECTION LABELS
─────────────────────────────────────────────────────────────── */
.section-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-tertiary);   /* NEVER gold — §Rule 3 */
  margin-bottom: 24px;
  display: block;
}

/* ───────────────────────────────────────────────────────────────
   9. HERO — §8.2 Type D, three-plane composition
─────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;   /* dynamic viewport — no snap when the URL bar moves */
  display: flex;
  align-items: center;
  padding: var(--hero-pad) 0;
  overflow: hidden;
}

/* Plane 1: Decorative background */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Giant watermark word — 5–8% opacity */
.hero__wordmark {
  position: absolute;
  right: -8%;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: var(--text-mega);
  font-weight: 900;
  color: var(--text-primary);
  opacity: 0.05;
  letter-spacing: -0.02em;
  user-select: none;
  line-height: 1;
  white-space: nowrap;
  will-change: transform;
}

/* Subtle grid lines */
.hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(245,240,232,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,240,232,0.03) 1px, transparent 1px);
  background-size: 80px 80px;
}

/* Plane 3: Foreground text — left-aligned, 70% max width */
.hero__body {
  position: relative;
  z-index: 2;
  max-width: var(--content-wide);
  width: 100%;
  margin: 0 auto;
  padding: 0 32px;
}

.hero__eyebrow {
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 24px;
  opacity: 0;
}

.hero__headline {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--text-primary);
  max-width: 16ch;
  margin-bottom: 28px;
}

/* Word cascade mask — §3.4 / §7.2 System E
   Padding gives glyphs (descenders, italic overhang) room inside the
   overflow box so nothing gets clipped; negative margin cancels it so
   layout + the rise animation stay pixel-identical. */
.word-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding: 0.06em 0.08em 0.2em;
  margin: -0.06em -0.08em -0.2em;
}
.word {
  display: inline-block;
  transform: translateY(120%);
}

/* Hero accent word — Gold (Location 2 of 3) */
.hero__headline .accent {
  color: var(--accent);
  font-style: italic;
}

.hero__sub {
  font-size: var(--text-lg);
  font-weight: 300;
  color: var(--text-secondary);
  line-height: 1.55;
  max-width: 520px;
  margin-bottom: 36px;
  opacity: 0;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 32px;
  opacity: 0;
  flex-wrap: wrap;
}

/* Vertical side text */
.hero__side {
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  opacity: 0;
}
.hero__side-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: var(--text-xs);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* Scroll indicator — Gold gradient (Location 3 of 3) */
.hero__scroll {
  position: absolute;
  bottom: 48px;
  left: 32px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0;
}
.hero__scroll-line {
  width: 1px;
  height: 64px;
  background: linear-gradient(to bottom, var(--accent), transparent);
}
.hero__scroll-label {
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

/* ───────────────────────────────────────────────────────────────
   10. TRUST BAR — thin transitional
─────────────────────────────────────────────────────────────── */
.trust {
  border-top: var(--border-subtle);
  border-bottom: var(--border-subtle);
  padding: 24px 32px;
}
.trust__inner {
  max-width: var(--content-wide);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.trust__prefix {
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.trust__locations {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.trust__locations span {
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.trust__dot {
  color: var(--text-tertiary);
}

/* ───────────────────────────────────────────────────────────────
   11. STATS — thin right-to-left marquee strip
─────────────────────────────────────────────────────────────── */
.stats {
  padding: 0;
  background: var(--glass-secondary);
  border-top: var(--border-subtle);
  border-bottom: var(--border-subtle);
  overflow: hidden;
}
.stats__marquee {
  position: relative;
  overflow: hidden;
  /* Soft fade at both edges so items glide in/out */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.stats__track {
  display: flex;
  width: max-content;
  animation: stats-scroll 38s linear infinite;
  will-change: transform;
}
.stats:hover .stats__track {
  animation-play-state: paused;
}
.stats__group {
  display: flex;
  flex-shrink: 0;
}
.stats__item {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  padding: 20px 44px;
  white-space: nowrap;
}
.stats__item::before {
  content: '·';
  margin-right: 44px;
  color: var(--text-tertiary);
  font-size: var(--text-lg);
}
.stats__num {
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 900;
  line-height: 1;
  color: var(--text-primary);   /* size = emphasis, NOT color */
  letter-spacing: -0.02em;
}
.stats__lbl {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--text-tertiary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@keyframes stats-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

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

@media (max-width: 768px) {
  .stats__item { padding: 16px 28px; }
  .stats__item::before { margin-right: 28px; }
}

/* ───────────────────────────────────────────────────────────────
   12. METHOD / DIAGNOSTIC — 65/35 asymmetric
─────────────────────────────────────────────────────────────── */
.method {
  padding: var(--section-pad) 32px;
}
.method__inner {
  max-width: var(--content-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 65fr 35fr;
  gap: 80px;
  align-items: start;
}
.method__headline {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 32px;
}
.method__headline em {
  font-style: italic;
  color: var(--text-secondary);
}
.method__body {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 20px;
}
.method__quote {
  margin-top: 40px;
  padding-left: 24px;
  border-left: 2px solid rgba(245,240,232,0.15);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--text-secondary);
  line-height: 1.5;
}
.method__domains-title {
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 24px;
}
.domain-list {
  display: flex;
  flex-direction: column;
}
.domain-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: var(--border-subtle);
  cursor: none;
  transition: padding-left var(--dur-fast) var(--ease-out);
}
.domain-item:hover {
  padding-left: 8px;
}
.domain-item:hover .domain-name {
  color: var(--text-primary);
}
.domain-item:hover .domain-arrow {
  opacity: 1;
  transform: translateX(4px);
}
.domain-num {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-weight: 400;
  letter-spacing: 0.1em;
  flex-shrink: 0;
  width: 24px;
}
.domain-name {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-weight: 300;
  flex: 1;
  transition: color var(--dur-fast);
}
.domain-arrow {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  opacity: 0;
  transition: opacity var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}

@media (max-width: 1024px) {
  .method__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

/* ───────────────────────────────────────────────────────────────
   13. ENGINE — horizontal illuminated stepper (one-view build)
─────────────────────────────────────────────────────────────── */
.engine {
  padding: clamp(72px, 9vw, 140px) 32px;
  background: var(--glass-secondary);
}
.engine__inner {
  max-width: var(--content-wide);
  margin: 0 auto;
}
.engine__header {
  margin-bottom: 56px;
  text-align: center;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.engine__headline {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

/* Horizontal flow — five stages across, seen at once */
.engine__flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 32px;
  padding-top: 34px;   /* room for the rail + nodes above */
}

/* The rail the build travels along */
.engine__rail {
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  height: 1px;
  background: rgba(245,240,232,0.12);
}
.engine__rail-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(201,162,39,0.5), var(--accent));
  transform: scaleX(0);
  transform-origin: left center;
  box-shadow: 0 0 12px rgba(201,162,39,0.45);
}

.engine__stage {
  position: relative;
  padding-top: 28px;   /* clears the node sitting on the rail */
}

/* Node sits on the rail at the start of each column */
.engine__node {
  position: absolute;
  top: -29px;          /* lands centred on the rail */
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid rgba(245,240,232,0.3);
  transition: background 0.4s var(--ease-out),
              border-color 0.4s var(--ease-out),
              box-shadow 0.4s var(--ease-out),
              transform 0.4s var(--ease-spring);
}
.engine__node--lit {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.35);
  box-shadow: 0 0 16px rgba(201,162,39,0.6);
}

.engine__num {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 900;
  color: rgba(245,240,232,0.14);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 14px;
  transition: color 0.4s var(--ease-out);
}
.engine__stage--lit .engine__num {
  color: rgba(245,240,232,0.35);
}
.engine__stage-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.engine__stage-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.6;
}
.engine__footer-quote {
  margin-top: 56px;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--text-tertiary);
  text-align: center;
}

/* Tablet: two-up rows, rail hidden */
@media (max-width: 1024px) {
  .engine__flow {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 32px;
    padding-top: 0;
  }
  .engine__rail { display: none; }
  .engine__stage { padding-top: 0; padding-left: 24px; border-left: 1px solid rgba(245,240,232,0.12); }
  .engine__node { top: 4px; left: -6px; }
}

/* Mobile: single column, vertical build */
@media (max-width: 600px) {
  .engine__flow { grid-template-columns: 1fr; gap: 32px; }
}

/* ───────────────────────────────────────────────────────────────
   14. PACKS — 58/42 featured / roadmap
─────────────────────────────────────────────────────────────── */
.packs {
  padding: var(--section-pad) 32px;
}
.packs__inner {
  max-width: var(--content-wide);
  margin: 0 auto;
}
.packs__header {
  margin-bottom: 64px;
  max-width: 640px;
}
/* Asymmetric split — heavy headline left, lighter counterweight right */
.packs__header--split {
  max-width: none;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: end;
}
.packs__header-r {
  padding-bottom: 8px;
}
.packs__headline {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 0;
}
.packs__sub {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.7;
}
@media (max-width: 768px) {
  .packs__header--split {
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
  }
}
/* ── FOUNDATION block — the one live pack ──────────────────────── */
.pack-block {
  margin-bottom: clamp(64px, 9vw, 112px);
}
.pack-block__head {
  margin-bottom: 40px;
  padding-bottom: 28px;
  border-bottom: var(--border-subtle);
}
.pack-block__title {
  display: flex;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.pack-block__name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 900;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.pack-block__status {
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 14px;
  border: var(--border-subtle);
  color: var(--text-tertiary);
}
/* Status badge for the live pack — the one decorative gold touch here */
.pack-block__status--live {
  color: var(--accent);
  border-color: rgba(201,162,39,0.4);
}
.pack-block__line {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 720px;
}

/* Three variants — equal weight, ascending heights (a staircase) */
.variants__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  align-items: start;   /* tops align; each card grows downward as it climbs */
}
.variant {
  background: var(--glass-card);
  border: var(--border-subtle);
  padding: 40px 36px;
  position: relative;
  display: flex;
  flex-direction: column;
  perspective: 800px;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.variant:hover {
  background: var(--glass-elevated);
}
/* The number of the rung — a thin gold rising marker on the left edge */
.variant::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 0;
  background: linear-gradient(var(--accent), rgba(201,162,39,0));
  transition: height 0.5s var(--ease-out);
}
.variant:nth-child(1)::before { opacity: 0.4; }
.variant:nth-child(2)::before { opacity: 0.7; }
.variant:hover::before,
.variant:focus-within::before { height: 100%; }

.variant__essence {
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.85;
  margin-bottom: 14px;
}
.variant__tier {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 900;
  color: var(--text-primary);
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}
.variant__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 14px;
}
.variant__currency {
  font-size: var(--text-lg);
  color: var(--text-secondary);
}
.variant__amount {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.6vw, 52px);
  font-weight: 900;
  color: var(--text-primary);
  line-height: 1;
  letter-spacing: -0.03em;
}
.variant__tagline {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.6;
}
.variant__rule {
  height: 1px;
  background: rgba(245,240,232,0.08);
  margin: 28px 0;
}
.variant__deliverables {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 36px;
}

/* Group divider labels inside a card */
.deliv__group {
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding-bottom: 4px;
  border-bottom: var(--border-subtle);
  margin-top: 6px;
}
.deliv__group:first-child { margin-top: 0; }
.deliv__group--new {
  color: var(--accent);
  opacity: 0.85;
  border-bottom-color: rgba(201,162,39,0.25);
}

/* A deliverable row */
.deliv {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* New items — full brightness */
.deliv--new .deliv__service {
  color: var(--text-primary);
}
/* Inherited items — the previous card replicated verbatim. Rendered as
   real rows (name + description), just a touch recessed so the tier's own
   new additions below stay the focus. */
.deliv--inherited {
  opacity: 0.78;
  transition: opacity var(--dur-reveal) var(--ease-out);
}
.variant:hover .deliv--inherited,
.variant:focus-within .deliv--inherited {
  opacity: 0.92;
}

/* Rolled-up inheritance — one quiet line at rest, full list on hover.
   Keeps Growth & Authority compact; the ladder reveals on intent. */
.deliv__rolled {
  display: block;
}
.deliv__rolled-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding-bottom: 4px;
  border-bottom: var(--border-subtle);
  cursor: default;
}
.deliv__rolled-tag {
  flex: none;
  letter-spacing: 0.12em;
  color: var(--accent);
  opacity: 0.7;
  position: relative;
  padding-right: 14px;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.deliv__rolled-tag::after {
  content: '⌄';
  position: absolute;
  right: 0;
  top: -0.15em;
  font-size: 1.1em;
  line-height: 1;
  transition: transform var(--dur-reveal) var(--ease-out);
}
.variant:hover .deliv__rolled-tag,
.variant:focus-within .deliv__rolled-tag { opacity: 1; }
.variant:hover .deliv__rolled-tag::after,
.variant:focus-within .deliv__rolled-tag::after { transform: rotate(180deg); }

.deliv__rolled-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height var(--dur-reveal) var(--ease-out),
              opacity var(--dur-reveal) var(--ease-out),
              margin-top var(--dur-reveal) var(--ease-out);
}
.variant:hover .deliv__rolled-list,
.variant:focus-within .deliv__rolled-list {
  max-height: 1600px;
  opacity: 1;
  margin-top: 14px;
}

/* "4 new" tally on the gold additions label */
.deliv__group-count {
  float: right;
  letter-spacing: 0.12em;
  color: var(--accent);
  opacity: 0.6;
}

.deliv__service {
  font-size: var(--text-sm);
  color: var(--text-primary);
  font-weight: 400;
  line-height: 1.45;
}
.deliv__desc {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  letter-spacing: 0.05em;
}
.variant__cta {
  width: 100%;
  margin-top: auto;
}
/* "Read more" toggle — only used on the mobile card slider */
.variant__more { display: none; }
.pack__cta--sm {
  font-size: var(--text-xs);
  padding: 12px 20px;
  letter-spacing: 0.1em;
}

/* Slider dots — hidden on desktop, shown under the mobile slider */
.variants__dots { display: none; }
.variants__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(245,240,232,0.2);
  transition: width var(--dur-fast) var(--ease-out),
              background var(--dur-fast);
}
.variants__dot--active {
  width: 20px;
  border-radius: 4px;
  background: var(--accent);
}

/* ── THE ROADMAP — dimmed future packs ─────────────────────────── */
.roadmap {
  opacity: 0.9;
}
.roadmap__label {
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 24px;
}
.roadmap__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-bottom: 40px;
}
.roadmap-pack {
  background: rgba(36,34,32,0.55);
  border: var(--border-subtle);
  padding: 36px 32px;
  transition: opacity var(--dur-fast), background var(--dur-fast);
  opacity: 0.62;
}
.roadmap-pack:hover {
  opacity: 1;
  background: rgba(46,44,42,0.7);
}
.roadmap-pack__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.roadmap-pack__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.roadmap-pack__status {
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  border: var(--border-subtle);
  padding: 4px 10px;
  white-space: nowrap;
}
.roadmap-pack__goal {
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--text-secondary);
  margin-bottom: 12px;
  font-family: var(--font-display);
}
.roadmap-pack__desc {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  line-height: 1.65;
}
.roadmap__note {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.5;
  max-width: 760px;
  margin: 0 auto;
}
.roadmap__note-em {
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-primary);
}

/* ── THE CONSULTING CORE — philosophy band above the variants ───── */
.core-note {
  max-width: 760px;
  margin-bottom: 48px;
  margin-left: auto;          /* push the band to the right edge */
  padding-right: 22px;
  border-right: 2px solid rgba(201,162,39,0.4);
  text-align: right;
}
.core-note__label {
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.85;
  margin-bottom: 14px;
}
.core-note__headline {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 900;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}
.core-note__body {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 14px;
}
.core-note__body em {
  font-style: italic;
  color: var(--text-primary);
}
.core-note__truth {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ── Docs-vs-services footnote under the variants ───────────────── */
.variants__footnote {
  margin-top: 28px;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.7;
  text-align: center;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
.variants__footnote-em {
  color: var(--text-primary);
  font-weight: 500;
}

/* ── COMPOSE MODE — switch above the variants ───────────────────── */
.packs__mode {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.packs__mode-label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.packs__mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.packs__mode-track {
  position: relative;
  flex: 0 0 auto;
  width: 46px;
  height: 24px;
  border: 1px solid rgba(245,240,232,0.3);
  border-radius: var(--radius-full);
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.packs__mode-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-secondary);
  transition: transform var(--dur-fast) var(--ease-spring), background var(--dur-fast);
}
.packs__mode-toggle:hover .packs__mode-track { border-color: rgba(245,240,232,0.5); }
.packs__mode-toggle[aria-pressed="true"] .packs__mode-track {
  background: rgba(201,162,39,0.22);
  border-color: var(--accent);
}
.packs__mode-toggle[aria-pressed="true"] .packs__mode-thumb {
  transform: translateX(22px);
  background: var(--accent);
}
.packs__mode-toggle[aria-pressed="true"] .packs__mode-text { color: var(--accent); }

/* ── Selectable deliverable rows — checkbox + price reveal in compose ─ */
.deliv__row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.deliv__main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}
.deliv__input { position: absolute; opacity: 0; width: 0; height: 0; }
.deliv__box {
  display: none;   /* hidden until compose mode */
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  border: 1px solid rgba(245,240,232,0.3);
  position: relative;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.deliv__box::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 4px;
  height: 9px;
  border: solid var(--bg-primary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform var(--dur-fast) var(--ease-spring);
}
.deliv__input:checked ~ .deliv__box { background: var(--accent); border-color: var(--accent); }
.deliv__input:checked ~ .deliv__box::after { transform: rotate(45deg) scale(1); }
.deliv__price {
  display: none;   /* hidden until compose mode */
  flex: 0 0 auto;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-fast);
}
.deliv__input:checked ~ .deliv__price { color: var(--accent); }

/* Compose mode active on the Foundation block */
.pack-block.is-composing .deliv--new .deliv__box,
.pack-block.is-composing .deliv--new .deliv__price { display: block; }
.pack-block.is-composing .deliv--new:not(.deliv--core) .deliv__row { cursor: pointer; }
.pack-block.is-composing .deliv--new:not(.deliv--core) .deliv__row:hover .deliv__box {
  border-color: rgba(201,162,39,0.7);
}
/* Locked Core rows — pre-checked, muted gold, never toggled */
.deliv--core .deliv__row { cursor: default; }
.pack-block.is-composing .deliv--core .deliv__box {
  background: rgba(201,162,39,0.5);
  border-color: rgba(201,162,39,0.5);
}
.deliv--core .deliv__input:checked ~ .deliv__price { color: var(--text-tertiary); }

/* In compose mode: inherited lines, "everything in X" labels, bundle price & CTA step aside */
.pack-block.is-composing .deliv--inherited,
.pack-block.is-composing .deliv__rolled,
.pack-block.is-composing .deliv__group:not(.deliv__group--new),
.pack-block.is-composing .variant__price,
.pack-block.is-composing .variant__cta,
.pack-block.is-composing .variant__more { display: none; }
/* Keep every selectable row visible on mobile while composing */
.pack-block.is-composing .variant__deliverables { max-height: none; }
.pack-block.is-composing .variant__deliverables::after { opacity: 0; }

/* ── Compose summary — one integrated bar, only while composing ──── */
.compose-summary { display: none; }
.pack-block.is-composing .compose-summary {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 32px;
  padding: 26px 32px;
  background: var(--glass-elevated);
  border: var(--border-subtle);
  border-top: 2px solid rgba(201,162,39,0.45);
}
.compose-summary__lead { flex: 0 0 auto; }
.compose-summary__label {
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 6px;
}
.compose-summary__count {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.compose-summary__total {
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex: 0 0 auto;
}
.compose-summary__currency {
  font-size: var(--text-lg);
  color: var(--text-secondary);
}
.compose-summary__amount {
  font-family: var(--font-display);
  font-size: clamp(34px, 3.4vw, 48px);
  font-weight: 900;
  color: var(--text-primary);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.compose-summary__docs {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  flex: 0 0 auto;
}
.compose-summary__docs-input { position: absolute; opacity: 0; width: 0; height: 0; }
.compose-summary__docs-box {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(245,240,232,0.3);
  position: relative;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.compose-summary__docs-box::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid var(--bg-primary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform var(--dur-fast) var(--ease-spring);
}
.compose-summary__docs-input:checked ~ .compose-summary__docs-box {
  background: var(--accent);
  border-color: var(--accent);
}
.compose-summary__docs-input:checked ~ .compose-summary__docs-box::after { transform: rotate(45deg) scale(1); }
.compose-summary__docs-text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.compose-summary__docs-add { color: var(--accent); white-space: nowrap; }
.compose-summary__cta { margin-left: auto; flex: 0 0 auto; }

@media (max-width: 1024px) {
  .variants__grid { grid-template-columns: 1fr; }
  .roadmap__grid  { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  /* Compose on phones: stack the cards so every service is pickable by
     thumb without swiping. The swipe-slider returns the instant compose
     is switched off. (Higher specificity than the slider rules below, so
     order is irrelevant.) */
  .pack-block.is-composing .variants__grid {
    display: block;
    overflow: visible;
  }
  .pack-block.is-composing .variant {
    width: auto;
    margin-bottom: 12px;
    scroll-snap-align: none;
  }
  .pack-block.is-composing .variants__dots { display: none; }
  /* Roomier tap rows while selecting */
  .pack-block.is-composing .deliv__row { padding: 5px 0; }

  /* Summary collapses into a clean vertical card */
  .pack-block.is-composing .compose-summary {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 20px;
  }
  .compose-summary__cta { margin-left: 0; width: 100%; justify-content: center; }

  /* Mode switch sits comfortably above the stack */
  .packs__mode { gap: 14px; margin-bottom: 28px; }
}

/* ───────────────────────────────────────────────────────────────
   15. PROCESS — 4-step timeline
─────────────────────────────────────────────────────────────── */
.process {
  padding: var(--section-pad) 32px;
  background: var(--glass-secondary);
}
.process__inner {
  max-width: var(--content-wide);
  margin: 0 auto;
}
.process__header {
  margin-bottom: 64px;
  max-width: 520px;
  margin-left: auto;
  text-align: right;
}
@media (max-width: 768px) {
  .process__header { text-align: left; margin-left: 0; }
}
.process__headline {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.process__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.process__step {
  padding: 40px 32px 40px 0;
  border-right: var(--border-subtle);
  padding-left: 0;
}
.process__step:last-child { border-right: none; }
.process__step:not(:first-child) { padding-left: 32px; }

.process__day {
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 20px;
}
.process__num {
  font-family: var(--font-display);
  font-size: clamp(40px, 4vw, 64px);
  font-weight: 900;
  color: rgba(245,240,232,0.06);
  line-height: 1;
  margin-bottom: 16px;
  letter-spacing: -0.03em;
}
.process__step-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}
.process__step-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.7;
}

@media (max-width: 1024px) {
  .process__steps {
    grid-template-columns: repeat(2, 1fr);
  }
  .process__step:nth-child(2) { border-right: none; }
  .process__step:nth-child(3) { border-right: var(--border-subtle); border-top: var(--border-subtle); padding-left: 0; }
  .process__step:nth-child(4) { border-right: none; border-top: var(--border-subtle); padding-left: 32px; }
}
@media (max-width: 768px) {
  .process__steps { grid-template-columns: 1fr; }
  .process__step { border-right: none; border-bottom: var(--border-subtle); padding: 32px 0; }
  .process__step:last-child { border-bottom: none; }
  .process__step:not(:first-child) { padding-left: 0; }
}

/* ───────────────────────────────────────────────────────────────
   16. TESTIMONIALS — 60/40
─────────────────────────────────────────────────────────────── */
.testimonials {
  padding: var(--section-pad) 32px;
}
.testimonials__inner {
  max-width: var(--content-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 60fr 40fr;
  gap: 80px;
  align-items: start;
}

/* Testimonial card */
.testimonial-card {
  background: var(--glass-card);
  border: var(--border-subtle);
  padding: 48px;
  perspective: 800px;
}
.testimonial-card__mark {
  font-family: var(--font-display);
  font-size: 80px;
  line-height: 0.6;
  color: rgba(245,240,232,0.1);
  margin-bottom: 24px;
  font-weight: 900;
}
.testimonial-card__quote {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: 32px;
}
.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: 16px;
}
.testimonial-card__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg-secondary);
  border: var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  font-weight: 500;
  flex-shrink: 0;
}
.testimonial-card__name {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.testimonial-card__role {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  letter-spacing: 0.05em;
}

/* Honesty block */
.honesty-block {
  padding-top: 40px;
}
.honesty-block__label {
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 24px;
  display: block;
}
.honesty-block__headline {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 24px;
}
.honesty-block__body {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 16px;
}
.honesty-block__sig {
  margin-top: 32px;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  font-style: italic;
  padding-top: 24px;
  border-top: var(--border-subtle);
}

@media (max-width: 1024px) {
  .testimonials__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

/* ───────────────────────────────────────────────────────────────
   17. CTA BANNER
─────────────────────────────────────────────────────────────── */
.cta-banner {
  padding: clamp(64px, 10vw, 120px) 32px;
  background: var(--glass-elevated);
  border-top: var(--border-subtle);
  border-bottom: var(--border-subtle);
}
.cta-banner__inner {
  max-width: var(--content-w);
  margin: 0 auto;
  text-align: center;
}
.cta-banner__headline {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  margin-bottom: 24px;
}
.cta-banner__sub {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 48px;
}

/* ───────────────────────────────────────────────────────────────
   18. CONTACT / FINAL CTA
─────────────────────────────────────────────────────────────── */
.contact {
  padding: var(--section-pad) 32px;
  background: var(--glass-secondary);
}
.contact__inner {
  max-width: var(--content-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.contact__headline {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 24px;
}
.contact__body {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 40px;
}
.contact__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.contact__note {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  letter-spacing: 0.05em;
}

/* Form */
.contact__form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-label {
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.form-input {
  background: var(--bg-elevated);
  border: var(--border-subtle);
  border-radius: var(--radius-none);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 300;
  padding: 14px 16px;
  min-height: 44px;
  width: 100%;
  transition: border-color var(--dur-fast);
}
.form-input:focus {
  outline: none;
  border-color: rgba(245,240,232,0.3);
}
.form-input::placeholder {
  color: var(--text-tertiary);
}
.form-textarea {
  resize: vertical;
  min-height: 120px;
}
.form-submit {
  width: 100%;
  padding: 16px;
}

@media (max-width: 1024px) {
  .contact__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

/* ───────────────────────────────────────────────────────────────
   19. FOOTER
─────────────────────────────────────────────────────────────── */
.footer {
  padding: clamp(48px, 8vw, 80px) 32px 0;
  background: var(--bg-primary);
  border-top: var(--border-subtle);
}
.footer__inner {
  max-width: var(--content-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
}
.footer__logo {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.2em;
  color: var(--text-primary);
  display: inline-block;
  margin-bottom: 20px;
}
.footer__logo span {
  color: var(--text-tertiary);
}
.footer__desc {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  line-height: 1.7;
  margin-bottom: 28px;
  max-width: 280px;
}
.footer__social {
  display: flex;
  gap: 12px;
}
.footer__social-link {
  width: 36px;
  height: 36px;
  border: var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.footer__social-link:hover {
  color: var(--text-primary);
  border-color: rgba(245,240,232,0.3);
}
.footer__col-title {
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 20px;
}
.footer__link {
  display: block;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: 12px;
  transition: color var(--dur-fast);
}
.footer__link:hover { color: var(--text-primary); }
.footer__address {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-bottom: 8px;
  line-height: 1.6;
}
.footer__bottom {
  border-top: var(--border-subtle);
  padding: 20px 0;
  max-width: var(--content-wide);
  margin: 0 auto;
}
.footer__copy {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  letter-spacing: 0.05em;
}

@media (max-width: 1024px) {
  .footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
  .footer__col--brand {
    grid-column: 1 / -1;
  }
}
@media (max-width: 768px) {
  .footer__inner {
    grid-template-columns: 1fr;
  }
}

/* ───────────────────────────────────────────────────────────────
   20. MOBILE STICKY CTA
─────────────────────────────────────────────────────────────── */
.mobile-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px;
  background: var(--bg-elevated);
  border-top: var(--border-subtle);
  z-index: var(--z-sticky);
}
.mobile-cta .btn {
  width: 100%;
  justify-content: center;
}

@media (max-width: 768px) {
  .mobile-cta { display: block; }
  body { padding-bottom: 76px; }
}

/* ───────────────────────────────────────────────────────────────
   21. TILT CARD
─────────────────────────────────────────────────────────────── */
.tilt-card {
  transform-style: preserve-3d;
  will-change: transform;
}

/* ───────────────────────────────────────────────────────────────
   22. SCROLL REVEAL — initial states for GSAP
─────────────────────────────────────────────────────────────── */
.reveal-up {
  opacity: 0;
  transform: translateY(48px);
}

/* ───────────────────────────────────────────────────────────────
   23. RESPONSIVE HELPERS
─────────────────────────────────────────────────────────────── */
.break--desktop { display: none; }
@media (min-width: 1024px) { .break--desktop { display: block; } }
.break--lg { display: none; }
@media (min-width: 1024px) { .break--lg { display: block; } }

/* ───────────────────────────────────────────────────────────────
   24. HERO RESPONSIVE
─────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero__headline { max-width: 90%; }
  .hero__side { display: none; }
}
@media (max-width: 768px) {
  .hero__headline { max-width: 100%; }
  .hero__scroll { left: 16px; }
  .hero__body { padding: 0 20px; }
  .hero__actions { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ───────────────────────────────────────────────────────────────
   25. MOBILE EXPERIENCE — less text, more life  (PHONE-ONLY ≤768px)
   Desktop is never affected; every rule below is inside this query.
─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* ── PACKS: a horizontal swipe slider — one full card owns the screen,
        the next one peeking to invite the swipe. Full desktop content is
        kept (inherited rows included), since each card has the viewport
        to itself now — no stacked wall of text. */
  .variants__grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    align-items: stretch;          /* equal-height cards = clean slider */
    gap: 12px;
    padding: 8px 0 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .variants__grid::-webkit-scrollbar { display: none; }
  /* align-items:start so each card keeps its OWN height — expanding one
     card must not stretch the others */
  .variants__grid { align-items: start; }
  .variant {
    flex: 0 0 86%;                 /* one card + a peek, with side margin */
    scroll-snap-align: center;
    padding: 26px 22px;
  }
  /* Collapsed preview — "Read more" expands the whole card */
  .variant__deliverables {
    max-height: 232px;
    overflow: hidden;
    position: relative;
    margin-bottom: 0;
    transition: max-height 0.45s var(--ease-out);
  }
  /* fade hint so it's obvious there's more below */
  .variant__deliverables::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 64px;
    background: linear-gradient(rgba(36,34,32,0), rgba(36,34,32,0.96));
    pointer-events: none;
    transition: opacity 0.3s var(--ease-out);
  }
  .variant--expanded .variant__deliverables { max-height: 2200px; }
  .variant--expanded .variant__deliverables::after { opacity: 0; }
  .variant__rule { margin: 22px 0; }

  /* Read more / Read less toggle */
  .variant__more {
    display: inline-block;
    margin: 14px 0 18px;
    padding: 4px 0;
    background: none;
    border: none;
    color: var(--accent);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .variant__more::after { content: ' ↓'; }
  .variant--expanded .variant__more::after { content: ' ↑'; }

  /* Slider dots */
  .variants__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
  }

  /* Permanent gold rung (no hover on touch) so each card reads lit */
  .variant::before { height: 100%; width: 3px; }
  .variant:nth-child(1)::before { opacity: 0.45; }
  .variant:nth-child(2)::before { opacity: 0.7; }
  .variant:nth-child(3)::before { opacity: 1; }

  /* The personality line gets a beat more presence */
  .variant__essence {
    font-size: var(--text-sm);
    letter-spacing: 0.16em;
    margin-bottom: 12px;
  }

  /* Inherited rows can't brighten on hover (no hover on touch) — lift them
     so the full ladder list actually stays readable on a phone */
  .deliv--inherited { opacity: 0.6; }

  /* No hover on touch, so the rolled inheritance can't expand on intent.
     Open it permanently — the existing "Read more" governs card length. */
  .deliv__rolled-list {
    max-height: none;
    opacity: 1;
    margin-top: 14px;
  }
  .deliv__rolled-tag::after { display: none; }

  /* ── ROADMAP: lift the dim future packs a touch so they don't read
        as dead weight at the bottom on a small screen */
  .roadmap-pack { opacity: 0.78; padding: 28px 24px; }

  /* ── Trim breathing room a little so sections don't feel like endless
        scrolling columns of paragraphs */
  .method__body { margin-bottom: 16px; }
  .method__quote { margin-top: 28px; }
  .engine__footer-quote { margin-top: 40px; }
  .pack-block__line { font-size: var(--text-sm); }
}

/* ───────────────────────────────────────────────────────────────
   26. MOBILE SAFETY NET — make horizontal blowout structurally impossible
   Defensive only. Desktop (>768px) never sees any of this.
   Deploy marker: v6-readmore
─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Flex & grid children default to min-width:auto and refuse to shrink
     below their content — the #1 hidden cause of mobile sideways scroll.
     Letting them shrink kills the overflow at its source. */
  *, *::before, *::after { min-width: 0; }

  /* Nothing may be wider than the screen (canvas excluded — it's the fixed bg) */
  img, svg, video, iframe, table { max-width: 100%; }

  /* Long unbroken words / URLs wrap instead of forcing the page wider */
  p, h1, h2, h3, a, span, li, blockquote { overflow-wrap: break-word; }

  /* Hard-cap the page and its wrappers to the viewport width */
  html, body, #main-content, .footer, section { max-width: 100%; }
}