/* ==========================================================================
   KAOS.Agency — Unified Stylesheet  v3
   ==========================================================================
   Sections:
      1.  Design Tokens
      2.  Reset & Base
      3.  Animations
      4.  Navigation
      5.  Mobile Menu
      6.  Breadcrumb
      7.  Shared Hero Patterns
      8.  Section Label
      9.  Scroll Reveal
     10.  Homepage Components
     11.  About Page Components
     12.  Contact Page Components
     13.  Grow Page Components
     14.  Hours Page Components
     15.  Launch Page Components
     16.  Buttons & CTA
     17.  Footer
     18.  Ticker Strip
     19.  Vertical Badge
     20.  Other Verticals Block
     21.  Promise Strip
     22.  Style Guide Components
     23.  Light Mode
     24.  Responsive
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Design Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Brand */
  --accent:       #D4F53C;
  --accent-text:  #D4F53C;   /* accent as text on dark bg */

  /* Surfaces */
  --bg:           #0c0c0c;
  --bg-mid:       #1a1a1a;
  --border:       #222;

  /* Text scale — use these instead of raw hex throughout */
  --text-1:       #f2f0ea;   /* primary */
  --text-2:       #999;      /* secondary — readable at all sizes */
  --text-3:       #666;      /* tertiary — use ≥ 14px */
  --text-ghost:   #3a3a3a;   /* decorative labels, barely-there — use ≥ 13px */

  /* Legacy aliases kept for backward compat with inline styles */
  --black:        var(--bg);
  --white:        var(--text-1);
  --mid:          var(--bg-mid);
  --muted:        var(--text-2);

  /* Typography */
  --font-display: 'Bebas Neue', sans-serif;
  --font-serif:   'DM Serif Display', serif;
  --font-mono:    'DM Mono', monospace;

  /* Spacing */
  --pad-x:        48px;
  --pad-section:  80px;
}


/* --------------------------------------------------------------------------
   2. Reset & Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background:  var(--bg);
  color:       var(--text-1);
  font-family: var(--font-mono);
  font-size:   14px;
  line-height: 1.6;
  overflow-x:  hidden;
}


/* --------------------------------------------------------------------------
   3. Animations
   -------------------------------------------------------------------------- */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 1;   }
}
@keyframes blink {
  0%, 100% { opacity: 1;   }
  50%       { opacity: 0.3; }
}
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes pulse-fill {
  0%, 100% { opacity: 0.2; }
  50%       { opacity: 0.5; }
}
@keyframes hamburger-open {
  0%   { transform: rotate(0deg);   }
  100% { transform: rotate(45deg);  }
}


/* --------------------------------------------------------------------------
   4. Navigation
   -------------------------------------------------------------------------- */

nav {
  position:        fixed;
  top: 0; left: 0; right: 0;
  z-index:         100;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         20px var(--pad-x);
  border-bottom:   1px solid var(--border);
  background:      rgba(12,12,12,0.92);
  backdrop-filter: blur(12px);
}

.nav-logo {
  font-family:     var(--font-mono);
  font-weight:     500;
  font-size:       15px;
  letter-spacing:  0.08em;
  color:           var(--text-1);
  text-decoration: none;
}
.nav-logo span { color: var(--accent-text); }

.nav-links {
  display:     flex;
  align-items: center;
  gap:         40px;
}
.nav-links a {
  color:           var(--text-2);
  text-decoration: none;
  font-size:       12px;
  letter-spacing:  0.1em;
  text-transform:  uppercase;
  transition:      color 0.2s;
}
.nav-links a:hover  { color: var(--text-1); }
.nav-links a.active { color: var(--accent-text); }

.nav-actions {
  display:     flex;
  align-items: center;
  gap:         12px;
}

.nav-cta {
  background:     var(--accent) !important;
  color:          #111          !important;
  padding:        9px 20px      !important;
  font-weight:    500           !important;
  transition:     opacity 0.2s  !important;
}
.nav-cta:hover { opacity: 0.85; }

/* Theme toggle */
.theme-toggle {
  background:  none;
  border:      none;
  cursor:      pointer;
  color:       var(--text-2);
  display:     flex;
  align-items: center;
  justify-content: center;
  width:       36px;
  height:      36px;
  border-radius: 2px;
  transition:  color 0.2s, background 0.2s;
  flex-shrink: 0;
}
.theme-toggle:hover {
  color:      var(--text-1);
  background: rgba(128,128,128,0.1);
}

[data-theme="dark"]  .icon-moon { display: none;  }
[data-theme="dark"]  .icon-sun  { display: block; }
[data-theme="light"] .icon-sun  { display: none;  }
[data-theme="light"] .icon-moon { display: block; }

/* Hamburger */
.hamburger {
  display:        none;
  flex-direction: column;
  justify-content: center;
  align-items:    center;
  gap:            5px;
  width:          36px;
  height:         36px;
  background:     none;
  border:         none;
  cursor:         pointer;
  padding:        0;
  flex-shrink:    0;
}
.hamburger span {
  display:    block;
  width:      20px;
  height:     1.5px;
  background: var(--text-2);
  transition: transform 0.32s cubic-bezier(0.16,1,0.3,1),
             opacity   0.32s ease,
             background 0.2s;
}
.hamburger:hover span { background: var(--text-1); }
.hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg);   }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0);             }
.hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }


/* --------------------------------------------------------------------------
   5. Mobile Menu
   -------------------------------------------------------------------------- */

.mobile-menu {
  position:        fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index:         99;
  background:      var(--bg);
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  align-items:     flex-start;
  padding:         80px var(--pad-x) 48px;
  gap:             4px;
  transform:       translateX(100%);
  transition:      transform 0.4s cubic-bezier(0.16,1,0.3,1);
  border-left:     1px solid var(--border);
  pointer-events:  none;
  visibility:      hidden;
}
.mobile-menu.open {
  transform:      translateX(0);
  pointer-events: auto;
  visibility:     visible;
}
.mobile-menu a {
  font-family:     var(--font-display);
  font-size:       clamp(38px, 10vw, 60px);
  color:           var(--text-2);
  text-decoration: none;
  line-height:     1.1;
  padding:         10px 0;
  transition:      color 0.2s;
}
.mobile-menu a:hover,
.mobile-menu a.active { color: var(--text-1); }
.mobile-menu .nav-cta {
  font-family:    var(--font-mono)  !important;
  font-size:      11px              !important;
  letter-spacing: 0.12em            !important;
  text-transform: uppercase         !important;
  padding:        14px 36px         !important;
  margin-top:     24px;
}
.mobile-menu-footer {
  position:       absolute;
  bottom:         40px;
  left:           var(--pad-x);
  font-size:      11px;
  color:          var(--text-ghost);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
body.menu-open { overflow: hidden; }


/* --------------------------------------------------------------------------
   6. Breadcrumb
   -------------------------------------------------------------------------- */

.breadcrumb {
  padding:        16px var(--pad-x);
  border-bottom:  1px solid var(--border);
  display:        flex;
  gap:            8px;
  align-items:    center;
  font-size:      11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--text-3);
  margin-top:     80px;  /* height of fixed nav */
}
.breadcrumb a {
  color:           var(--text-3);
  text-decoration: none;
  transition:      color 0.2s;
}
.breadcrumb a:hover   { color: var(--text-1); }
.breadcrumb .sep      { color: var(--border); }
.breadcrumb .current  { color: var(--accent-text); }


/* --------------------------------------------------------------------------
   7. Shared Hero Patterns
   -------------------------------------------------------------------------- */

.hero {
  position:   relative;
  overflow:   hidden;
  border-bottom: 1px solid var(--border);
}

/* Accent span inside headlines */
.accent-line,
.hero-headline .accent,
.hero-headline .line2 { color: var(--accent-text); }

/* Shared hero headline — inner pages */
.hero-headline {
  font-family: var(--font-display);
  font-size:   clamp(64px, 10vw, 140px);
  line-height: 0.9;
  opacity:     0;
  animation:   fadeUp 0.8s ease forwards 0.4s;
}

/* Shared hero lede — italic serif (used on inner pages) */
.hero-lede-p {
  font-family: var(--font-serif);
  font-style:  italic;
  font-size:   clamp(17px, 2vw, 22px);
  color:       var(--text-2);
  line-height: 1.45;
  opacity:     0;
  animation:   fadeUp 0.7s ease forwards 0.7s;
}

/* hero-sub on inner pages (Hours/Grow) is the italic lede text */
.hero-sub {
  font-family: var(--font-serif);
  font-style:  italic;
  font-size:   clamp(17px, 2vw, 22px);
  color:       var(--text-2);
  line-height: 1.45;
  opacity:     0;
  animation:   fadeUp 0.7s ease forwards 0.7s;
}

/* Hero stat rows — used on Launch, About, Hours/Grow */
.hstat-row {
  display:     flex;
  align-items: baseline;
  gap:         16px;
  padding:     18px 0;
  border-bottom: 1px solid var(--border);
}
.hstat-row:first-child { padding-top: 0; }
.hstat-val {
  font-family: var(--font-display);
  font-size:   48px;
  line-height: 1;
  color:       var(--text-1);
  flex-shrink: 0;
}
.hstat-key {
  font-size:      11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--text-2);
  line-height:    1.4;
}

/* Hero kicker line (eyebrow above headline) */
.hero-kicker {
  font-size:      11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--accent-text);
  margin-bottom:  32px;
  opacity:        0;
  animation:      fadeUp 0.6s ease forwards 0.2s;
}


/* --------------------------------------------------------------------------
   8. Section Label
   -------------------------------------------------------------------------- */

.section-label {
  font-size:      11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--accent-text);
  margin-bottom:  24px;
}


/* --------------------------------------------------------------------------
   9. Scroll Reveal
   -------------------------------------------------------------------------- */

.reveal {
  opacity:   0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
  opacity:   1;
  transform: translateY(0);
}


/* --------------------------------------------------------------------------
   10. Homepage Components
   -------------------------------------------------------------------------- */

/* Homepage Hero */
.hero-homepage {
  min-height:      100vh;
  display:         flex;
  flex-direction:  column;
  justify-content: flex-end;
  padding:         80px var(--pad-x) 64px;
  position:        relative;
  overflow:        hidden;
  border-bottom:   1px solid var(--border);
}
.hero-homepage .hero-headline {
  font-size:      clamp(44px, 9vw, 130px);
  line-height:    0.92;
  letter-spacing: -0.01em;
}
.hero-noise {
  position:         absolute;
  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.035'/%3E%3C/svg%3E");
  pointer-events:   none;
  opacity:          0.4;
}
.hero-tag {
  font-size:      11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom:  32px;
  opacity:        0;
  animation:      fadeUp 0.7s ease forwards 0.3s;
}
.hero-sub--layout {
  font-family: var(--font-mono) !important;
  font-style:  normal !important;
  font-size:   14px !important;
  color:       var(--text-1) !important;
  margin-top:  48px;
  display:     grid;
  grid-template-columns: 1fr auto;
  gap:         64px;
  align-items: end;
  opacity:     0;
  animation:   fadeUp 0.7s ease forwards 0.8s;
}
.hero-sub--layout p { max-width: 420px; color: var(--text-2); font-size: 14px; line-height: 1.7; }
.hero-sub-right { text-align: right; }
.hero-sub-right .stat {
  font-family: var(--font-display);
  font-size:   48px;
  line-height: 1;
  color:       var(--text-1);
}
.hero-sub-right .stat-label {
  font-size:      11px;
  color:          var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.hero-scroll {
  position:       absolute;
  bottom:         32px;
  left:           50%;
  transform:      translateX(-50%);
  font-size:      11px;
  letter-spacing: 0.15em;
  color:          var(--muted);
  text-transform: uppercase;
  animation:      pulse 2s ease-in-out infinite;
}

/* Shift Section */
.shift { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--border); }
.shift-left { padding: var(--pad-section) var(--pad-x); border-right: 1px solid var(--border); }
.shift-right { padding: var(--pad-section) var(--pad-x); display: flex; flex-direction: column; justify-content: center; }
.shift-headline { font-family: var(--font-serif); font-size: clamp(36px, 4vw, 56px); line-height: 1.1; color: var(--text-1); }
.shift-headline em { font-style: italic; color: var(--accent-text); }
.old-new { display: grid; grid-template-columns: 1fr 1fr; margin-top: 24px; }
.old-col, .new-col { padding: 24px; }
.old-col { border: 1px solid var(--border); border-right: none; }
.new-col { border: 1px solid var(--border); background: rgba(212,245,60,0.04); }
.col-head { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 16px; color: var(--muted); }
.new-col .col-head { color: var(--accent-text); }
.col-items { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.col-items li { font-size: 13px; color: var(--text-3); padding-left: 12px; position: relative; }
.col-items li::before { content: '—'; position: absolute; left: 0; color: var(--border); }
.new-col .col-items li         { color: var(--text-1); }
.new-col .col-items li::before { color: var(--accent-text); }

/* Verticals Section */
.verticals { border-bottom: 1px solid var(--border); }
.verticals-header {
  padding:         var(--pad-section) var(--pad-x) 56px;
  border-bottom:   1px solid var(--border);
  display:         flex;
  align-items:     flex-end;
  justify-content: space-between;
}
.verticals-headline { font-family: var(--font-serif); font-size: clamp(40px, 5vw, 64px); line-height: 1.05; max-width: 600px; }
.verticals-note { font-size: 13px; color: var(--muted); max-width: 280px; text-align: right; line-height: 1.6; }
.verticals-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.vertical-card {
  padding:    56px var(--pad-x);
  border-right: 1px solid var(--border);
  position:   relative;
  overflow:   hidden;
  transition: background 0.3s;
}
.vertical-card:last-child { border-right: none; }
.vertical-card:hover      { background: rgba(255,255,255,0.02); }
.card-number {
  font-family:    var(--font-display);
  font-size:      100px;
  line-height:    0.9;
  color:          rgba(255,255,255,0.04);
  position:       absolute;
  top:            32px;
  right:          24px;
  pointer-events: none;
  transition:     color 0.3s;
}
.vertical-card:hover .card-number { color: rgba(212,245,60,0.06); }
.card-tag  { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-bottom: 20px; }
.card-name { font-family: var(--font-display); font-size: 48px; letter-spacing: 0.02em; line-height: 1; margin-bottom: 8px; }
.card-sub  { font-family: var(--font-serif); font-style: italic; font-size: 18px; color: var(--accent-text); margin-bottom: 32px; }
.card-divider { width: 32px; height: 1px; background: var(--border); margin-bottom: 32px; }
.card-for  { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.card-audience { font-size: 15px; color: var(--text-1); line-height: 1.6; margin-bottom: 28px; }
.card-details { display: flex; flex-direction: column; gap: 12px; margin-bottom: 36px; }
.card-detail { display: flex; flex-direction: column; gap: 2px; padding: 12px; border: 1px solid var(--border); }
.detail-key { font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); }
.detail-val { font-size: 13px; color: var(--text-1); line-height: 1.5; }
.card-pill {
  display:         inline-block;
  padding:         10px 20px;
  border:          1px solid var(--border);
  font-size:       11px;
  letter-spacing:  0.1em;
  text-transform:  uppercase;
  color:           var(--muted);
  text-decoration: none;
  transition:      all 0.2s;
}
.card-pill:hover { border-color: var(--accent-text); color: var(--accent-text); }

/* Pillars Section */
.pillars { border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 280px 1fr; }
.pillars-left { padding: var(--pad-section) var(--pad-x); border-right: 1px solid var(--border); display: flex; flex-direction: column; justify-content: space-between; }
.pillars-headline { font-family: var(--font-serif); font-size: 36px; line-height: 1.15; }
.pillars-right { padding: var(--pad-section) var(--pad-x); display: grid; grid-template-columns: 1fr 1fr; gap: 32px 40px; }
.pillar { display: flex; flex-direction: column; gap: 12px; padding: 28px; border: 1px solid var(--border); transition: border-color 0.2s; }
.pillar:hover { border-color: rgba(212,245,60,0.3); }
.pillar-num  { font-family: var(--font-display); font-size: 32px; color: rgba(212,245,60,0.3); line-height: 1; }
.pillar-name { font-family: var(--font-serif); font-size: 22px; color: var(--text-1); }
.pillar-desc { font-size: 13px; color: var(--text-2); line-height: 1.6; }

/* Not / Fit Section */
.not-section { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--border); }
.not-left { padding: var(--pad-section) var(--pad-x); border-right: 1px solid var(--border); display: flex; flex-direction: column; justify-content: center; }
.not-headline { font-family: var(--font-display); font-size: clamp(64px, 8vw, 120px); line-height: 0.9; color: rgba(255,255,255,0.06); margin-bottom: 40px; }
.not-list { list-style: none; display: flex; flex-direction: column; }
.not-list li { padding: 18px 0; border-bottom: 1px solid var(--border); font-size: 15px; color: var(--text-2); display: flex; align-items: center; gap: 16px; }
.not-list li::before { content: '✕'; color: var(--text-ghost); font-size: 12px; flex-shrink: 0; }
.fit-right { padding: var(--pad-section) var(--pad-x); display: flex; flex-direction: column; justify-content: center; }
.fit-headline { font-family: var(--font-serif); font-size: 32px; line-height: 1.2; margin-bottom: 40px; }
.fit-list { list-style: none; display: flex; flex-direction: column; }
.fit-list li { padding: 18px 0; border-bottom: 1px solid var(--border); font-size: 15px; color: var(--text-1); display: flex; align-items: center; gap: 16px; }
.fit-list li::before { content: '→'; color: var(--accent-text); font-size: 14px; flex-shrink: 0; }


/* --------------------------------------------------------------------------
   11. About Page Components
   -------------------------------------------------------------------------- */

/* About Hero */
.hero-about {
  min-height: 75vh;
  padding: 140px var(--pad-x) 80px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 100% 60% at 100% 0%, rgba(212,245,60,0.025) 0%, transparent 60%); pointer-events: none; }
.hero-lede { margin-top: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; opacity: 0; animation: fadeUp 0.8s ease forwards 0.7s; }
.hero-stats { display: flex; flex-direction: column; }

/* Part Divider */
.part-divider { display: flex; align-items: center; padding: 20px var(--pad-x); border-bottom: 1px solid var(--border); background: var(--bg-mid); gap: 16px; }
.pd-marker { font-family: var(--font-display); font-size: 11px; color: var(--accent-text); background: rgba(212,245,60,0.1); padding: 4px 12px; letter-spacing: 0.12em; }
.pd-title { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }

/* Chapter */
.chapter { border-bottom: 1px solid var(--border); }
.chapter-header { padding: 64px var(--pad-x) 0; display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: end; }
.chapter-year { font-family: var(--font-display); font-size: clamp(80px, 10vw, 140px); line-height: 0.85; color: rgba(255,255,255,0.04); transition: color 0.4s; white-space: nowrap; }
.chapter:hover .chapter-year { color: rgba(212,245,60,0.06); }
.chapter-label { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 12px; }
.chapter-title { font-family: var(--font-serif); font-size: clamp(26px, 3vw, 40px); line-height: 1.15; color: var(--text-1); }
.chapter-body { display: grid; grid-template-columns: 300px 1fr; gap: 64px; padding: 48px var(--pad-x) 72px; }
.aside-note { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-ghost); border-top: 1px solid var(--border); padding-top: 16px; line-height: 1.65; }
.aside-quote { margin-top: 28px; border-left: 2px solid rgba(212,245,60,0.2); padding: 14px 20px; }
.aside-quote p { font-family: var(--font-serif); font-style: italic; font-size: 15px; color: var(--text-3); line-height: 1.55; }
.chapter-text { font-size: 16px; line-height: 1.9; color: var(--text-2); }
.chapter-text p { margin-bottom: 24px; }
.chapter-text p:last-child { margin-bottom: 0; }
.chapter-text strong { color: var(--text-1); font-weight: 500; }
.chapter-text em { font-style: italic; color: var(--accent-text); }

/* Pull Quote */
.pull-quote { padding: 96px var(--pad-x); text-align: center; border-bottom: 1px solid var(--border); position: relative; overflow: hidden; }
.pq-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 50% 80% at 50% 50%, rgba(212,245,60,0.03) 0%, transparent 70%); pointer-events: none; }
.pq-eyebrow { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-ghost); margin-bottom: 40px; }
.pq-text { font-family: var(--font-serif); font-style: italic; font-size: clamp(24px, 3.5vw, 46px); line-height: 1.25; color: var(--text-1); max-width: 860px; margin: 0 auto; }
.pq-text em { color: var(--accent-text); font-style: normal; }
.pq-attr { margin-top: 40px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #2a2a2a; }

/* Timeline Strip */
.timeline-strip { border-bottom: 1px solid var(--border); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.timeline-inner { display: flex; min-width: max-content; }
.tl-event { padding: 36px 40px; border-right: 1px solid var(--border); min-width: 200px; flex-shrink: 0; transition: background 0.2s; }
.tl-event:hover { background: rgba(255,255,255,0.02); }
.tl-event:last-child { border-right: none; }
.tl-year { font-family: var(--font-display); font-size: 28px; color: rgba(212,245,60,0.3); line-height: 1; margin-bottom: 8px; }
.tl-event-name { font-size: 13px; color: var(--text-1); margin-bottom: 4px; line-height: 1.4; }
.tl-event-note { font-size: 11px; color: var(--muted); line-height: 1.5; }

/* Values Section */
.values-section { display: grid; grid-template-columns: 280px 1fr; border-bottom: 1px solid var(--border); }
.values-left { padding: var(--pad-section) var(--pad-x); border-right: 1px solid var(--border); display: flex; flex-direction: column; justify-content: space-between; }
.values-headline { font-family: var(--font-serif); font-size: 30px; line-height: 1.2; margin-bottom: 24px; }
.values-note { font-size: 13px; color: var(--muted); line-height: 1.7; }
.values-right { padding: var(--pad-section) var(--pad-x); display: flex; flex-direction: column; }
.value-row { display: grid; grid-template-columns: 48px 1fr; gap: 28px; padding: 24px 0; border-bottom: 1px solid var(--border); align-items: start; }
.value-row:first-child { padding-top: 0; }
.value-row:last-child { border-bottom: none; padding-bottom: 0; }
.value-num { font-family: var(--font-display); font-size: 26px; color: rgba(212,245,60,0.2); line-height: 1; padding-top: 4px; }
.value-name { font-family: var(--font-serif); font-size: 19px; color: var(--text-1); margin-bottom: 6px; }
.value-desc { font-size: 13px; color: var(--muted); line-height: 1.7; }

/* Today Section */
.today-section { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--border); }
.today-left { padding: var(--pad-section) var(--pad-x); border-right: 1px solid var(--border); }
.today-right { padding: var(--pad-section) var(--pad-x); background: rgba(212,245,60,0.01); }
.today-headline { font-family: var(--font-display); font-size: clamp(52px, 7vw, 88px); line-height: 0.92; margin-bottom: 32px; }
.today-body { font-size: 14px; color: var(--muted); line-height: 1.85; }
.today-body p { margin-bottom: 20px; }
.today-body p:last-child { margin-bottom: 0; }
.today-ctas { margin-top: 40px; display: flex; gap: 16px; flex-wrap: wrap; }
.metrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--border); margin-bottom: 40px; }
.metric-cell { background: var(--bg); padding: 28px 24px; }
.metric-val { font-family: var(--font-display); font-size: 48px; line-height: 1; color: var(--text-1); margin-bottom: 4px; }
.metric-key { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.metric-note { font-size: 12px; color: var(--text-2); margin-top: 4px; line-height: 1.4; }


/* --------------------------------------------------------------------------
   12. Contact Page Components
   -------------------------------------------------------------------------- */

/* Contact Hero */
.hero-contact {
  min-height: 60vh;
  padding: 140px var(--pad-x) 80px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
}
.hero-contact .hero-bg {
  background: radial-gradient(ellipse 70% 70% at 80% 50%, rgba(212,245,60,0.03) 0%, transparent 60%);
}

/* Main Contact Grid */
.contact-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--border);
}

/* Contact Left - Form Side */
.contact-left {
  padding: var(--pad-section) var(--pad-x);
  border-right: 1px solid var(--border);
}
.contact-left-label { margin-bottom: 40px; }

/* Form */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 2px;
}
.form-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 16px 16px 0;
  background: var(--bg-mid);
  border: 1px solid var(--border);
  border-bottom: none;
}
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  background: var(--bg-mid);
  border: 1px solid var(--border);
  border-top: none;
  color: var(--text-1);
  font-family: var(--font-mono);
  font-size: 14px;
  padding: 12px 16px 16px;
  outline: none;
  transition: border-color 0.2s;
  appearance: none;
  -webkit-appearance: none;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--accent-text);
}
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23555' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
  cursor: pointer;
}
.form-select option {
  background: var(--bg-mid);
  color: var(--text-1);
}
.form-textarea {
  resize: vertical;
  min-height: 160px;
  line-height: 1.6;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.form-submit-row {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.form-note {
  font-size: 12px;
  color: var(--text-ghost);
  line-height: 1.6;
}
/* Field stack: label sits inside the bordered box */
.field-block {
  display: flex;
  flex-direction: column;
  background: var(--bg-mid);
  border: 1px solid var(--border);
  margin-bottom: 2px;
  transition: border-color 0.2s;
}
.field-block:focus-within { border-color: rgba(212,245,60,0.4); }
.field-block label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 14px 16px 0;
  pointer-events: none;
}
.field-block input,
.field-block select,
.field-block textarea {
  background: transparent;
  border: none;
  color: var(--text-1);
  font-family: var(--font-mono);
  font-size: 14px;
  padding: 4px 16px 14px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
}
.field-block textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.6;
}
.field-block select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23555' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
  cursor: pointer;
}
.field-block select option { background: #1a1a1a; color: var(--text-1); }
.field-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

/* Contact Right - Info Side */
.contact-right {
  padding: var(--pad-section) var(--pad-x);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.contact-right-top { }
.contact-info-headline {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.15;
  margin-bottom: 32px;
}
.contact-info-body {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 40px;
}
/* Direct contacts */
.contact-methods {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 48px;
}
.contact-method {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--border);
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
}
.contact-method:hover {
  border-color: var(--accent-text);
  background: rgba(212,245,60,0.02);
}
.cm-icon {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--accent-text);
  width: 32px;
  flex-shrink: 0;
  line-height: 1;
}
.cm-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}
.cm-value {
  font-size: 14px;
  color: var(--text-1);
}
/* What happens next */
.next-steps {
  border-top: 1px solid var(--border);
  padding-top: 40px;
}
.next-steps-label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 20px;
}
.next-step {
  display: flex;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
}
.next-step:last-child { border-bottom: none; }
.ns-num {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--accent-text);
  line-height: 1;
  flex-shrink: 0;
  width: 28px;
}
.ns-text {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  padding-top: 2px;
}
.ns-text strong { color: var(--text-1); font-weight: 500; }

/* Verticals Reminder */
.verticals-reminder {
  border-bottom: 1px solid var(--border);
}
.vr-header {
  padding: 56px var(--pad-x) 40px;
  border-bottom: 1px solid var(--border);
}
.vr-label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.vr-headline {
  font-family: var(--font-serif);
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.1;
  max-width: 640px;
  color: var(--text-1);
}
.vr-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.vr-card {
  padding: 40px var(--pad-x);
  border-right: 1px solid var(--border);
  text-decoration: none;
  display: block;
  transition: background 0.2s;
}
.vr-card:last-child { border-right: none; }
.vr-card:hover { background: rgba(255,255,255,0.02); }
.vr-card-num {
  font-family: var(--font-display);
  font-size: 56px;
  color: var(--accent-text);
  line-height: 0.9;
  margin-bottom: 16px;
}
.vr-card-name {
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--text-1);
  line-height: 1;
  margin-bottom: 6px;
}
.vr-card-sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--accent-text);
  margin-bottom: 16px;
}
.vr-card-note {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.6;
}


/* --------------------------------------------------------------------------
   13. Grow Page Components
   -------------------------------------------------------------------------- */

/* Grow Hero */
.hero-grow {
  min-height: 80vh;
  padding: 80px var(--pad-x);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
}
.hero-grow .hero-bg {
  background: radial-gradient(ellipse 80% 60% at 0% 100%, rgba(212,245,60,0.03) 0%, transparent 60%);
}
.hero-top { display: grid; grid-template-columns: 1fr 1fr; align-items: end; }
.hero-right-stat { border-left: 1px solid var(--border); padding-left: 64px; opacity: 0; animation: fadeUp 0.8s ease forwards 0.6s; }
.pulse-row { display: flex; gap: 2px; margin-bottom: 40px; }
.pulse-bar { height: 32px; flex: 1; background: var(--border); position: relative; overflow: hidden; }
.pulse-bar::after { content: ''; position: absolute; inset: 0; background: var(--accent); animation: pulse-fill 2.4s ease-in-out infinite; }
.pulse-bar:nth-child(1)::after { animation-delay: 0s;    opacity: 0.25; }
.pulse-bar:nth-child(2)::after { animation-delay: 0.2s;  opacity: 0.2; }
.pulse-bar:nth-child(3)::after { animation-delay: 0.4s;  opacity: 0.35; }
.pulse-bar:nth-child(4)::after { animation-delay: 0.1s; opacity: 0.15; }
.pulse-bar:nth-child(5)::after { animation-delay: 0.3s; opacity: 0.4; }
.pulse-bar:nth-child(6)::after { animation-delay: 0.5s; opacity: 0.2; }
.pulse-bar:nth-child(7)::after { animation-delay: 0.15s; opacity: 0.3; }
.pulse-label { font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); margin-bottom: 24px; }
.rhythm-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.rstat { padding: 16px; border: 1px solid var(--border); }
.rstat-val { font-family: var(--font-display); font-size: 36px; line-height: 1; color: var(--text-1); margin-bottom: 4px; }
.rstat-key { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

/* Core Section */
.core-section { border-bottom: 1px solid var(--border); }
.core-inner { display: grid; grid-template-columns: 1fr 1fr; }
.core-left { padding: var(--pad-section) var(--pad-x); border-right: 1px solid var(--border); }
.core-right { padding: var(--pad-section) var(--pad-x); }
.core-headline { font-family: var(--font-display); font-size: clamp(56px, 7vw, 96px); line-height: 0.9; color: rgba(255,255,255,0.05); margin-bottom: 20px; }
.core-sub { font-family: var(--font-serif); font-size: 28px; line-height: 1.3; color: var(--text-1); }
.core-sub em { font-style: italic; color: var(--accent-text); }
.never-frozen { display: flex; flex-direction: column; gap: 2px; margin-top: 32px; }
.frozen-row { padding: 16px 20px; border: 1px solid var(--border); display: flex; align-items: center; gap: 16px; font-size: 13px; color: var(--muted); transition: border-color 0.2s; }
.frozen-row:hover { border-color: rgba(212,245,60,0.2); }
.frozen-icon { color: var(--accent-text); flex-shrink: 0; }
.core-body { font-size: 14px; color: var(--muted); line-height: 1.8; }

/* Weekly Rhythm */
.rhythm-section { border-bottom: 1px solid var(--border); }
.rhythm-header { padding: var(--pad-section) var(--pad-x) 56px; border-bottom: 1px solid var(--border); }
.rhythm-headline { font-family: var(--font-serif); font-size: clamp(36px, 4vw, 56px); line-height: 1.1; }
.week-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.week-cell { padding: 48px 40px; border-right: 1px solid var(--border); }
.week-cell:last-child { border-right: none; }
.week-day { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.week-name { font-family: var(--font-serif); font-size: 24px; color: var(--text-1); margin-bottom: 16px; }
.week-activity { display: flex; flex-direction: column; gap: 8px; }
.activity { font-size: 13px; color: var(--muted); display: flex; gap: 10px; align-items: flex-start; }
.activity::before { content: '·'; color: var(--accent-text); flex-shrink: 0; font-size: 18px; line-height: 1; }

/* Backlog */
.backlog-section { display: grid; grid-template-columns: 280px 1fr; border-bottom: 1px solid var(--border); }
.backlog-left { padding: var(--pad-section) var(--pad-x); border-right: 1px solid var(--border); display: flex; flex-direction: column; justify-content: space-between; }
.backlog-headline { font-family: var(--font-serif); font-size: 32px; line-height: 1.15; }
.backlog-note { font-size: 13px; color: var(--muted); line-height: 1.7; }
.backlog-right { padding: var(--pad-section) var(--pad-x); display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--border); }
.backlog-item { background: var(--bg); padding: 28px 24px; transition: background 0.2s; }
.backlog-item:hover { background: #111; }
.bi-tag { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 10px; }
.bi-name { font-family: var(--font-serif); font-size: 18px; color: var(--text-1); margin-bottom: 8px; }
.bi-desc { font-size: 13px; color: var(--muted); line-height: 1.5; }

/* Compare */
.compare-section { border-bottom: 1px solid var(--border); padding: var(--pad-section) var(--pad-x); }
.compare-headline { font-family: var(--font-serif); font-size: clamp(32px, 4vw, 52px); line-height: 1.1; max-width: 700px; margin-bottom: 56px; }
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--border); }
.compare-col { background: var(--bg); padding: 40px; }
.compare-col.good { background: #0e110a; }
.col-head { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 24px; color: var(--muted); }
.compare-col.good .col-head { color: var(--accent-text); }
.compare-items { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.compare-items li { font-size: 14px; display: flex; gap: 12px; align-items: flex-start; color: var(--text-2); }
.compare-items li::before { content: '✕'; color: #2a2a2a; flex-shrink: 0; font-size: 12px; margin-top: 2px; }
.compare-col.good .compare-items li { color: var(--text-1); }
.compare-col.good .compare-items li::before { content: '→'; color: var(--accent-text); font-size: 13px; margin-top: 1px; }

/* Engagement */
.engagement-section { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--border); }
.eng-left { padding: var(--pad-section) var(--pad-x); border-right: 1px solid var(--border); }
.eng-right { padding: var(--pad-section) var(--pad-x); }
.eng-headline { font-family: var(--font-serif); font-size: clamp(28px, 3vw, 42px); line-height: 1.1; margin-bottom: 32px; }
.detail-rows { display: flex; flex-direction: column; }
.detail-row { display: grid; grid-template-columns: 140px 1fr; border-bottom: 1px solid var(--border); padding: 16px 0; gap: 24px; }
.detail-k { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.detail-v { font-size: 14px; color: var(--text-1); line-height: 1.5; }
.month-visual { margin-top: 32px; display: flex; flex-direction: column; gap: 2px; }
.month-row { display: flex; align-items: center; gap: 12px; }
.month-label { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); width: 56px; flex-shrink: 0; }
.month-dots { display: flex; gap: 4px; flex: 1; }
.mdot { width: 8px; height: 8px; background: var(--border); }
.mdot.filled { background: rgba(212,245,60,0.3); }
.mdot.ship   { background: var(--accent); }
.month-note { font-size: 11px; color: var(--muted); }


/* --------------------------------------------------------------------------
   14. Hours Page Components
   -------------------------------------------------------------------------- */

/* Hours Hero */
.hero-hours {
  min-height: 80vh;
  padding: 140px var(--pad-x) 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-bottom: 1px solid var(--border);
  position: relative;
  align-items: end;
}
.hero-left { padding-right: 80px; }
.hero-right { border-left: 1px solid var(--border); padding-left: 64px; display: flex; flex-direction: column; justify-content: flex-end; }
.hero-scroll-hint { margin-top: 56px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-ghost); opacity: 0; animation: fadeUp 0.6s ease forwards 1s; }
.hero-right-content { opacity: 0; animation: fadeUp 0.8s ease forwards 0.6s; }
.hero-stat-block { margin-bottom: 40px; }
.stat-big { font-family: var(--font-display); font-size: 96px; line-height: 0.9; color: var(--text-1); }
.stat-label { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.availability-tag { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--border); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 32px; }
.hero-desc { font-size: 14px; color: var(--text-3); line-height: 1.8; }

/* What Section */
.what-section { display: grid; grid-template-columns: 1fr 2fr; border-bottom: 1px solid var(--border); }
.what-left { padding: var(--pad-section) var(--pad-x); border-right: 1px solid var(--border); display: flex; flex-direction: column; justify-content: space-between; }
.what-headline { font-family: var(--font-serif); font-size: clamp(32px, 3.5vw, 48px); line-height: 1.1; }
.what-note { font-size: 13px; color: var(--muted); line-height: 1.7; margin-top: 32px; }
.what-right { padding: var(--pad-section) var(--pad-x); display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--border); }
.topic-cell { background: var(--bg); padding: 32px 28px; transition: background 0.2s; }
.topic-cell:hover { background: #111; }
.topic-icon { font-family: var(--font-display); font-size: 32px; color: rgba(212,245,60,0.2); line-height: 1; margin-bottom: 16px; }
.topic-name { font-family: var(--font-serif); font-size: 20px; color: var(--text-1); margin-bottom: 10px; }
.topic-desc { font-size: 13px; color: var(--muted); line-height: 1.6; }

/* How Section */
.how-section { border-bottom: 1px solid var(--border); }
.how-header { padding: var(--pad-section) var(--pad-x) 56px; border-bottom: 1px solid var(--border); }
.how-headline { font-family: var(--font-serif); font-size: clamp(36px, 4vw, 56px); line-height: 1.1; max-width: 600px; }
.how-steps { display: grid; grid-template-columns: repeat(4, 1fr); }
.step { padding: 48px 40px; border-right: 1px solid var(--border); }
.step:last-child { border-right: none; }
.step-num { font-family: var(--font-display); font-size: 64px; color: rgba(212,245,60,0.12); line-height: 0.9; margin-bottom: 20px; }
.step-name { font-family: var(--font-serif); font-size: 22px; color: var(--text-1); margin-bottom: 12px; }
.step-desc { font-size: 13px; color: var(--muted); line-height: 1.6; }

/* Who Section */
.who-section { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--border); }
.who-left { padding: var(--pad-section) var(--pad-x); border-right: 1px solid var(--border); }
.who-right { padding: var(--pad-section) var(--pad-x); }
.profile-cards { display: flex; flex-direction: column; gap: 2px; margin-top: 32px; }
.profile-card { padding: 24px; border: 1px solid var(--border); transition: border-color 0.2s; }
.profile-card:hover { border-color: rgba(212,245,60,0.3); }
.profile-title { font-family: var(--font-serif); font-size: 18px; color: var(--text-1); margin-bottom: 8px; }
.profile-desc { font-size: 13px; color: var(--muted); line-height: 1.6; }
.clarity-quote { border-left: 2px solid var(--accent-text); padding: 24px 28px; margin-top: 32px; }
.quote-text { font-family: var(--font-serif); font-style: italic; font-size: 22px; color: var(--text-1); line-height: 1.4; }
.quote-sub { font-size: 12px; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 16px; }

/* Capacity Section */
.capacity-section { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--border); }
.capacity-left { padding: var(--pad-section) var(--pad-x); border-right: 1px solid var(--border); background: rgba(212,245,60,0.02); }
.capacity-right { padding: var(--pad-section) var(--pad-x); }
.capacity-headline { font-family: var(--font-display); font-size: clamp(56px, 7vw, 100px); line-height: 0.9; margin-bottom: 24px; }
.capacity-detail { font-size: 14px; color: var(--muted); line-height: 1.8; }
.capacity-detail strong { color: var(--text-1); }
.what-headline-sub { font-family: var(--font-serif); font-size: 32px; line-height: 1.15; margin-bottom: 32px; }
.include-list { list-style: none; display: flex; flex-direction: column; }
.include-list li { padding: 16px 0; border-bottom: 1px solid var(--border); font-size: 14px; color: var(--text-1); display: flex; gap: 16px; align-items: flex-start; }
.include-list li::before { content: '→'; color: var(--accent-text); flex-shrink: 0; }


/* --------------------------------------------------------------------------
   15. Launch Page Components
   -------------------------------------------------------------------------- */

/* Launch Hero */
.hero-launch {
  min-height: 80vh;
  padding: 80px var(--pad-x);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.hero-inner { display: grid; grid-template-columns: 1fr 1fr; align-items: end; }
.hero-right { border-left: 1px solid var(--border); padding-left: 64px; opacity: 0; animation: fadeUp 0.8s ease forwards 0.6s; }
.timeline-visual { margin-bottom: 40px; }
.timeline-row { display: flex; align-items: center; gap: 12px; margin-bottom: 2px; }
.tl-week { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); width: 80px; flex-shrink: 0; }
.tl-bar { height: 24px; background: var(--border); flex: 1; position: relative; overflow: hidden; }
.tl-fill { height: 100%; background: rgba(212,245,60,0.15); }
.tl-fill.ship { background: rgba(212,245,60,0.35); }
.tl-label { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 10px; color: var(--muted); letter-spacing: 0.08em; }
.hero-stat-row { display: flex; gap: 40px; margin-top: 32px; }
.hstat { display: flex; flex-direction: column; gap: 4px; }

/* Statement Section */
.statement-section { padding: var(--pad-section) var(--pad-x); border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.statement-headline { font-family: var(--font-display); font-size: clamp(56px, 7vw, 96px); line-height: 0.9; color: rgba(255,255,255,0.06); margin-bottom: 24px; }
.statement-text { font-family: var(--font-serif); font-size: 28px; line-height: 1.3; color: var(--text-1); }
.statement-text em { font-style: italic; color: var(--accent-text); }
.statement-body { font-size: 14px; color: var(--muted); line-height: 1.8; margin-top: 24px; }

/* Process Section */
.process-section { border-bottom: 1px solid var(--border); }
.process-header { padding: var(--pad-section) var(--pad-x) 56px; border-bottom: 1px solid var(--border); }
.process-headline { font-family: var(--font-serif); font-size: clamp(36px, 4vw, 56px); line-height: 1.1; }
.process-phases { display: grid; grid-template-columns: repeat(3, 1fr); }
.phase { padding: 48px 40px; border-right: 1px solid var(--border); }
.phase:last-child { border-right: none; }
.phase-num { font-family: var(--font-display); font-size: 80px; color: rgba(212,245,60,0.08); line-height: 0.9; margin-bottom: 20px; }
.phase-name { font-family: var(--font-serif); font-size: 26px; color: var(--text-1); margin-bottom: 4px; }
.phase-time { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 20px; }
.phase-items { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.phase-items li { font-size: 13px; color: var(--muted); display: flex; gap: 10px; align-items: flex-start; }
.phase-items li::before { content: '·'; color: var(--accent-text); flex-shrink: 0; font-size: 18px; line-height: 1; }

/* Build Section */
.build-section { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--border); }
.build-left { padding: var(--pad-section) var(--pad-x); border-right: 1px solid var(--border); }
.build-right { padding: var(--pad-section) var(--pad-x); }
.build-headline { font-family: var(--font-serif); font-size: clamp(32px, 3.5vw, 48px); line-height: 1.1; margin-bottom: 32px; }
.tech-stack { display: flex; flex-direction: column; gap: 2px; margin-top: 24px; }
.tech-row { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border: 1px solid var(--border); transition: border-color 0.2s; }
.tech-row:hover { border-color: rgba(212,245,60,0.3); }
.tech-name { font-size: 13px; color: var(--text-1); flex: 1; }
.tech-role { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.principles-list { display: flex; flex-direction: column; gap: 20px; margin-top: 32px; }
.principle { display: flex; gap: 16px; }
.principle-icon { font-family: var(--font-display); font-size: 24px; color: var(--accent-text); flex-shrink: 0; line-height: 1; margin-top: 2px; }
.principle-name { font-size: 14px; color: var(--text-1); margin-bottom: 4px; }
.principle-desc { font-size: 13px; color: var(--muted); line-height: 1.6; }

/* Deliverable Section */
.deliverable-section { padding: var(--pad-section) var(--pad-x); border-bottom: 1px solid var(--border); }
.deliverable-headline { font-family: var(--font-serif); font-size: clamp(32px, 4vw, 52px); line-height: 1.1; margin-bottom: 56px; max-width: 700px; }
.deliverable-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--border); }
.deliverable-item { background: var(--bg); padding: 28px 24px; }
.di-icon { font-family: var(--font-display); font-size: 28px; color: rgba(212,245,60,0.25); line-height: 1; margin-bottom: 12px; }
.di-name { font-size: 14px; color: var(--text-1); margin-bottom: 6px; }
.di-desc { font-size: 12px; color: var(--muted); line-height: 1.5; }


/* --------------------------------------------------------------------------
   16. Buttons & CTA
   -------------------------------------------------------------------------- */

.btn-primary {
  display:         inline-block;
  background:      var(--accent);
  color:           #111;
  padding:         16px 40px;
  font-family:     var(--font-mono);
  font-size:       12px;
  font-weight:     500;
  letter-spacing:  0.1em;
  text-transform:  uppercase;
  text-decoration: none;
  border:          none;
  cursor:          pointer;
  transition:      opacity 0.2s;
}
.btn-primary:hover { opacity: 0.85; }

.btn-secondary {
  display:         inline-block;
  background:      transparent;
  color:           var(--text-1);
  padding:         16px 40px;
  font-family:     var(--font-mono);
  font-size:       12px;
  letter-spacing:  0.1em;
  text-transform:  uppercase;
  text-decoration: none;
  border:          1px solid var(--border);
  cursor:          pointer;
  transition:      border-color 0.2s, color 0.2s;
}
.btn-secondary:hover { border-color: var(--text-1); }

.cta-section {
  padding:    120px var(--pad-x);
  text-align: center;
  position:   relative;
  overflow:   hidden;
}
.cta-bg {
  position:       absolute;
  inset:          0;
  background:     radial-gradient(ellipse 60% 60% at 50% 50%, rgba(212,245,60,0.04) 0%, transparent 70%);
  pointer-events: none;
}
.cta-eyebrow {
  font-size:      11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--accent-text);
  margin-bottom:  32px;
}
.cta-headline {
  font-family:   var(--font-display);
  font-size:     clamp(60px, 9vw, 120px);
  line-height:   0.9;
  margin-bottom: 48px;
}
.cta-buttons { display: flex; gap: 16px; justify-content: center; }


/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */

footer {
  padding:         40px var(--pad-x);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  border-top:      1px solid var(--border);
}
.footer-logo { font-family: var(--font-mono); font-size: 13px; color: var(--text-2); }
.footer-logo span { color: var(--accent-text); }
.footer-tagline { font-size: 12px; color: var(--text-ghost); letter-spacing: 0.05em; }
.footer-links { display: flex; gap: 24px; }
.footer-links a {
  font-size:       11px;
  color:           var(--text-2);
  text-decoration: none;
  letter-spacing:  0.1em;
  text-transform:  uppercase;
  transition:      color 0.2s;
}
.footer-links a:hover { color: var(--text-1); }


/* --------------------------------------------------------------------------
   18. Ticker Strip
   -------------------------------------------------------------------------- */

.ticker-wrap {
  overflow:      hidden;
  border-bottom: 1px solid var(--border);
  background:    var(--bg-mid);
  padding:       12px 0;
}
.ticker-inner {
  display:   flex;
  animation: ticker 22s linear infinite;
  width:     max-content;
}
.ticker-item {
  font-size:      11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          var(--text-2);
  padding:        0 40px;
  white-space:    nowrap;
  border-right:   1px solid var(--border);
}
.ticker-item span { color: var(--accent-text); }


/* --------------------------------------------------------------------------
   19. Vertical Badge
   -------------------------------------------------------------------------- */

.vertical-badge {
  display:     inline-flex;
  align-items: center;
  gap:         12px;
  margin-bottom: 40px;
  opacity:     0;
  animation:   fadeUp 0.6s ease forwards 0.2s;
}
.badge-num {
  font-family:    var(--font-display);
  font-size:      13px;
  color:          var(--accent-text);
  background:     rgba(212,245,60,0.1);
  padding:        4px 10px;
}
.badge-text {
  font-size:      11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--text-2);
}
.dot {
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    var(--accent);
  animation:     blink 1.8s ease-in-out infinite;
}


/* --------------------------------------------------------------------------
   20. Other Verticals Block
   -------------------------------------------------------------------------- */

.other-verticals  { border-top: 1px solid var(--border); }
.other-header     { padding: 64px var(--pad-x) 40px; border-bottom: 1px solid var(--border); }
.other-label      { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-2); }
.other-grid       { display: grid; grid-template-columns: 1fr 1fr; }
.other-card {
  padding:         48px;
  border-right:    1px solid var(--border);
  text-decoration: none;
  display:         block;
  position:        relative;
  overflow:        hidden;
  transition:      background 0.2s;
}
.other-card:last-child { border-right: none; }
.other-card:hover      { background: rgba(255,255,255,0.025); }
.other-card-tag  { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-2); margin-bottom: 16px; }
.other-card-name { font-family: var(--font-display); font-size: 48px; line-height: 1; color: var(--text-1); margin-bottom: 8px; }
.other-card-sub  { font-family: var(--font-serif); font-style: italic; font-size: 16px; color: var(--accent-text); margin-bottom: 24px; }
.other-card-desc { font-size: 13px; color: var(--text-2); line-height: 1.7; }
.other-arrow {
  position:   absolute;
  bottom:     48px;
  right:      48px;
  font-family: var(--font-display);
  font-size:  24px;
  color:      var(--border);
  transition: color 0.2s, transform 0.2s;
}
.other-card:hover .other-arrow { color: var(--accent-text); transform: translate(4px,-4px); }


/* --------------------------------------------------------------------------
   21. Promise Strip
   -------------------------------------------------------------------------- */

.promise-strip {
  border-top:    1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding:       0 var(--pad-x);
  display:       flex;
}
.promise-item {
  flex:         1;
  padding:      32px 0;
  border-right: 1px solid var(--border);
  text-align:   center;
}
.promise-item:last-child { border-right: none; }
.promise-val {
  font-family:   var(--font-serif);
  font-size:     22px;
  color:         var(--text-1);
  margin-bottom: 4px;
}
.promise-key {
  font-size:      10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--text-2);
}


/* --------------------------------------------------------------------------
   22. Style Guide Components
   -------------------------------------------------------------------------- */

.sg-nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 0 var(--pad-x);
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.sg-nav::-webkit-scrollbar { display: none; }
.sg-nav a {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  text-decoration: none;
  padding: 16px 20px;
  border-right: 1px solid var(--border);
  white-space: nowrap;
  transition: color 0.2s, background 0.2s;
  flex-shrink: 0;
}
.sg-nav a:hover { color: var(--text-1); background: rgba(128,128,128,0.05); }
.sg-nav a:first-child { border-left: 1px solid var(--border); }

.sg-section {
  border-bottom: 1px solid var(--border);
  scroll-margin-top: 44px;
}
.sg-header {
  padding: 64px var(--pad-x) 40px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
}
.sg-section-title {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 1;
  color: var(--text-1);
}
.sg-section-num {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-ghost);
}
.sg-body {
  padding: 48px var(--pad-x);
}
.sg-row {
  display: grid;
  gap: 2px;
  margin-bottom: 40px;
}
.sg-row:last-child { margin-bottom: 0; }
.sg-label {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-ghost);
  margin-bottom: 16px;
}
.sg-sub {
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.05em;
  margin-top: 8px;
}


/* --------------------------------------------------------------------------
   23. Light Mode
   -------------------------------------------------------------------------- */

[data-theme="light"] {
  /* Surfaces */
  --bg:         #f0ede5;
  --bg-mid:     #e3e0d8;
  --border:     #ccc9bf;

  /* Text — must all pass WCAG AA on #f0ede5 bg */
  --text-1:     #111111;   /* 17:1 — always fine */
  --text-2:     #555555;   /* 7:1  — fine at all sizes */
  --text-3:     #777777;   /* 4.6:1 — fine at 14px+ */
  --text-ghost: #aaaaaa;   /* 2.4:1 — decorative only, never body text */

  /* Accent as background: softer chartreuse on cream */
  --accent:      #c8e82a;

  /* Accent as text: chartreuse is unreadable on cream, use dark olive */
  --accent-text: #5a7000;

  color-scheme: light;
}

/* Buttons - use darker olive for light mode */
[data-theme="light"] .btn-primary {
  background: #5a7000 !important;
  color: #fff !important;
}
[data-theme="light"] .btn-primary:hover {
  opacity: 0.8;
}

/* Nav */
[data-theme="light"] nav { background: rgba(240,237,229,0.93); }

/* Hero bg gradients */
[data-theme="light"] .hero-bg,
[data-theme="light"] .pq-bg,
[data-theme="light"] .cta-bg {
  background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(90,112,0,0.03) 0%, transparent 70%);
}

/* Chapter and big decorative numbers — adjust for light mode */
[data-theme="light"] .chapter-year { color: rgba(0,0,0,0.1); }
[data-theme="light"] .chapter:hover .chapter-year { color: rgba(90,112,0,0.15); }
[data-theme="light"] .step-num      { color: rgba(90,112,0,0.12); }
[data-theme="light"] .phase-num     { color: rgba(90,112,0,0.12); }
[data-theme="light"] .core-headline { color: rgba(0,0,0,0.05); }
[data-theme="light"] .stat-big      { color: rgba(0,0,0,0.06); }
[data-theme="light"] .card-number    { color: rgba(0,0,0,0.04); }
[data-theme="light"] .not-headline  { color: rgba(0,0,0,0.1); }
[data-theme="light"] .statement-headline { color: rgba(0,0,0,0.06); }
[data-theme="light"] .section-label  { color: #5a7000; }
[data-theme="light"] .hero-noise     { opacity: 0.2; }

/* Progress bars - darker in light mode */
[data-theme="light"] .tl-fill { background: rgba(90,112,0,0.3); }
[data-theme="light"] .tl-fill.ship { background: rgba(90,112,0,0.7); }
[data-theme="light"] .mdot.filled   { background: rgba(90,112,0,0.6); }
[data-theme="light"] .mdot.ship     { background: #5a7000; }
[data-theme="light"] .pulse-bar::after { background: rgba(90,112,0,0.5); }

/* Hover states */
[data-theme="light"] .topic-cell:hover    { background: rgba(0,0,0,0.04); }
[data-theme="light"] .backlog-item:hover  { background: rgba(0,0,0,0.04); }
[data-theme="light"] .other-card:hover    { background: rgba(0,0,0,0.03); }
[data-theme="light"] .frozen-row:hover    { border-color: rgba(90,112,0,0.3); }
[data-theme="light"] .profile-card:hover  { border-color: rgba(90,112,0,0.3); }
[data-theme="light"] .pillar:hover        { border-color: rgba(90,112,0,0.2); }
[data-theme="light"] .vertical-card:hover { background: rgba(0,0,0,0.02); }

/* Comparisons */
[data-theme="light"] .compare-col.good { background: rgba(90,112,0,0.05); }

/* Dark mode footer and visibility fixes */
[data-theme="dark"] .footer-links a { color: var(--text-2) !important; }
[data-theme="dark"] .footer-links a:hover { color: var(--text-1) !important; }
[data-theme="dark"] .ns-num,
[data-theme="dark"] .vr-card-num { color: var(--accent-text) !important; }

/* Activity dots & progress bars */
[data-theme="light"] .mdot { background: #ccc; }
[data-theme="light"] .mdot.ship { background: #5a7000; }
[data-theme="light"] .pulse-bar { background: #d5d2ca; }
[data-theme="light"] .pulse-bar::after { background: rgba(90,112,0,0.5); }
[data-theme="light"] .pulse-fill { background: rgba(90,112,0,0.4) !important; }

/* Decorative numbers (step-num, phase-num, etc.) - darker in light mode */
[data-theme="light"] .topic-icon,
[data-theme="light"] .pillar-num,
[data-theme="light"] .di-icon {
  color: rgba(90,112,0,0.3) !important;
}

/* Buttons */
[data-theme="light"] .btn-primary,
[data-theme="light"] .nav-cta {
  background: #5a7000 !important;
  color: #fff !important;
}
[data-theme="light"] .btn-primary:hover,
[data-theme="light"] .nav-cta:hover {
  opacity: 0.8;
}

/* Buttons */
[data-theme="light"] .btn-primary,
[data-theme="light"] .nav-cta {
  background: #5a7000 !important;
  color: #fff !important;
}
[data-theme="light"] .btn-primary:hover,
[data-theme="light"] .nav-cta:hover {
  opacity: 0.8;
}
[data-theme="light"] .form-input::placeholder,
[data-theme="light"] .form-textarea::placeholder { color: #999 !important; }
[data-theme="light"] .form-label  { color: var(--text-2) !important; }
[data-theme="light"] .field-block { background: #e8e5dd; }
[data-theme="light"] .field-block input,
[data-theme="light"] .field-block select,
[data-theme="light"] .field-block textarea { color: #111 !important; }
[data-theme="light"] .field-block label { color: var(--text-2); }
[data-theme="light"] .form-note   { color: var(--text-3) !important; }

/* Text elements */
[data-theme="light"] .hero-lede-p,
[data-theme="light"] .hero-sub:not(.hero-sub--layout) { color: var(--text-2); }
[data-theme="light"] .chapter-text { color: #444; }
[data-theme="light"] .aside-quote p { color: #888; }
[data-theme="light"] .aside-note    { color: #bbb; }
[data-theme="light"] .value-desc   { color: var(--text-2); }
[data-theme="light"] .today-body   { color: var(--text-2); }
[data-theme="light"] .metric-note  { color: var(--text-3); }
[data-theme="light"] .not-list li  { color: #444; }
[data-theme="light"] .not-list li::before { color: #bbb; }
[data-theme="light"] .tl-event-note { color: var(--text-2); }
[data-theme="light"] .tl-year       { color: rgba(90,112,0,0.35); }
[data-theme="light"] .hstat-key { color: var(--text-2); }

/* Various inline colored text targets */
[data-theme="light"] .pillars-left p,
[data-theme="light"] .card-desc,
[data-theme="light"] .hero-desc,
[data-theme="light"] .what-note,
[data-theme="light"] .availability-tag { color: var(--text-2) !important; }
[data-theme="light"] .availability-tag { border-color: rgba(90,112,0,0.4) !important; }
[data-theme="light"] .part-divider { background: var(--bg-mid); }
[data-theme="light"] .pd-marker { background: rgba(90,112,0,0.12); }
[data-theme="light"] .pq-attr    { color: #ccc; }
[data-theme="light"] .pq-eyebrow { color: #ccc; }


/* --------------------------------------------------------------------------
   24. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  :root { --pad-x: 24px; --pad-section: 48px; }

  /* Nav */
  nav        { padding: 18px var(--pad-x); }
  .nav-links { display: none; }
  .hamburger { display: flex; }

  /* Breadcrumb */
  .breadcrumb { padding: 12px var(--pad-x); }

  /* Homepage */
  .hero-homepage { padding: 100px var(--pad-x) 48px; min-height: 100svh; }
  .hero-sub--layout { grid-template-columns: 1fr; gap: 32px; }
  .hero-sub-right { text-align: left; }
  .shift { grid-template-columns: 1fr; }
  .shift-left { border-right: none; border-bottom: 1px solid var(--border); }
  .shift-left, .shift-right { padding: 48px var(--pad-x); }
  .verticals-grid { grid-template-columns: 1fr; }
  .vertical-card { border-right: none; border-bottom: 1px solid var(--border); }
  .verticals-header { flex-direction: column; gap: 24px; align-items: flex-start; padding: 48px var(--pad-x) 32px; }
  .verticals-note { text-align: left; max-width: 100%; }
  .pillars { grid-template-columns: 1fr; }
  .pillars-left { border-right: none; border-bottom: 1px solid var(--border); padding: 48px var(--pad-x); }
  .pillars-right { padding: 48px var(--pad-x); grid-template-columns: 1fr; }
  .not-section { grid-template-columns: 1fr; }
  .not-left { border-right: none; border-bottom: 1px solid var(--border); }
  .not-left, .fit-right { padding: 48px var(--pad-x); }

  /* About Page */
  .hero-about { padding: 120px var(--pad-x) 56px; min-height: auto; }
  .hero-lede { grid-template-columns: 1fr; gap: 40px; }
  .chapter-header { grid-template-columns: 1fr; gap: 8px; padding: 48px var(--pad-x) 0; }
  .chapter-year { font-size: clamp(60px, 18vw, 100px); }
  .chapter-body { grid-template-columns: 1fr; gap: 32px; padding: 32px var(--pad-x) 56px; }
  .pull-quote { padding: 64px var(--pad-x); }
  .values-section { grid-template-columns: 1fr; }
  .values-left { border-right: none; border-bottom: 1px solid var(--border); }
  .today-section, .timeline-strip { grid-template-columns: 1fr; }
  .today-left { border-right: none; border-bottom: 1px solid var(--border); }
  .metrics-grid { grid-template-columns: 1fr; }

  /* Contact Page */
  .hero-contact { padding: 120px var(--pad-x) 56px; min-height: auto; }
  .contact-main { grid-template-columns: 1fr; }
  .contact-left { border-right: none; border-bottom: 1px solid var(--border); }
  .field-row-2 { grid-template-columns: 1fr; }
  .vr-grid { grid-template-columns: 1fr; }
  .vr-card { border-right: none; border-bottom: 1px solid var(--border); padding: 32px var(--pad-x); }
  .vr-header { padding: 48px var(--pad-x) 32px; }

  /* Grow Page */
  .hero-grow { padding: 120px var(--pad-x) 56px; }
  .hero-top { grid-template-columns: 1fr; }
  .hero-right-stat { border-left: none; border-top: 1px solid var(--border); padding-left: 0; padding-top: 32px; margin-top: 32px; }
  .core-inner { grid-template-columns: 1fr; }
  .core-left { border-right: none; border-bottom: 1px solid var(--border); }
  .core-left, .core-right { padding: 48px var(--pad-x); }
  .week-grid { grid-template-columns: 1fr 1fr; }
  .week-cell { border-bottom: 1px solid var(--border); padding: 32px var(--pad-x); }
  .backlog-section { grid-template-columns: 1fr; }
  .backlog-left { border-right: none; border-bottom: 1px solid var(--border); }
  .backlog-left, .backlog-right { padding: 48px var(--pad-x); }
  .backlog-right { grid-template-columns: 1fr; }
  .compare-grid { grid-template-columns: 1fr; }
  .engagement-section { grid-template-columns: 1fr; }
  .eng-left { border-right: none; border-bottom: 1px solid var(--border); }
  .eng-left, .eng-right { padding: 48px var(--pad-x); }
  .rhythm-header { padding: 48px var(--pad-x) 32px; }

  /* Hours Page */
  .hero-hours { grid-template-columns: 1fr; padding: 120px var(--pad-x) 56px; }
  .hero-left { padding-right: 0; }
  .hero-right { border-left: none; border-top: 1px solid var(--border); padding-left: 0; padding-top: 40px; margin-top: 40px; }
  .what-section { grid-template-columns: 1fr; }
  .what-left { border-right: none; border-bottom: 1px solid var(--border); }
  .what-right { grid-template-columns: 1fr; }
  .how-steps { grid-template-columns: 1fr 1fr; }
  .step { border-bottom: 1px solid var(--border); }
  .who-section, .capacity-section { grid-template-columns: 1fr; }
  .who-left, .capacity-left { border-right: none; border-bottom: 1px solid var(--border); }
  .what-left, .what-right, .who-left, .who-right, .capacity-left, .capacity-right, .how-header, .step { padding: 40px var(--pad-x); }

  /* Launch Page */
  .hero-launch { padding: 120px var(--pad-x) 56px; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-right { border-left: none; border-top: 1px solid var(--border); padding-left: 0; padding-top: 40px; margin-top: 40px; }
  .statement-section { grid-template-columns: 1fr; gap: 0; padding: 48px var(--pad-x); }
  .process-phases { grid-template-columns: 1fr; }
  .phase { border-right: none; border-bottom: 1px solid var(--border); padding: 40px var(--pad-x); }
  .build-section { grid-template-columns: 1fr; }
  .build-left { border-right: none; border-bottom: 1px solid var(--border); }
  .build-left, .build-right { padding: 48px var(--pad-x); }
  .deliverable-grid { grid-template-columns: 1fr 1fr; }
  .deliverable-section { padding: 48px var(--pad-x); }
  .process-header { padding: 48px var(--pad-x) 32px; }

  /* CTA */
  .cta-section { padding: 80px var(--pad-x); }
  .cta-buttons { flex-direction: column; align-items: center; }

  /* Footer */
  footer {
    flex-direction: column;
    gap:   20px;
    text-align: center;
    padding: 32px var(--pad-x);
  }

  /* Other verticals */
  .other-grid { grid-template-columns: 1fr; }
  .other-card {
    border-right:  none;
    border-bottom: 1px solid var(--border);
    padding:       40px var(--pad-x);
  }
  .other-header { padding: 48px var(--pad-x) 32px; }
}