/* ──────────────────────────────────────────────────────────────────────
   Steady State — shared theme
   Steve Hopkins · Talent Strategy
   ────────────────────────────────────────────────────────────────────── */

:root {
  --paper:        #f3efe7;
  --paper-deep:   #ece6da;
  --bone:         #faf7f0;
  --sage:         #4a5b50;
  --sage-mid:     #5d6f63;
  --sage-deep:    #2a342d;
  --sage-darker:  #1a2220;
  --stone:        #a8a194;
  --stone-soft:   #c7bfb0;
  --clay:         oklch(58% 0.09 38);
  --clay-soft:    oklch(66% 0.085 38);
  --ink:          #1d201d;
  --ink-mid:      #4a4d47;
  --ink-soft:     #79786f;
  --rule:         rgba(29,32,29,0.10);
  --rule-soft:    rgba(29,32,29,0.05);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--paper); color: var(--ink); }
body {
  font-family: 'DM Sans', -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
p { text-wrap: pretty; }

.mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem; letter-spacing: 0.20em; text-transform: uppercase;
  font-weight: 500; color: var(--sage);
}
.serif { font-family: 'Newsreader', serif; }

/* ── NAV ──────────────────────────────────────────────────────────── */
.nav {
  position: relative; z-index: 5;
  padding: 22px 56px;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--paper);
  border-bottom: 1px solid var(--rule-soft);
}
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.brand-mark {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
}
.brand-mark .ring {
  width: 24px; height: 24px;
  border: 1.5px solid var(--sage);
  border-radius: 50%;
  position: relative;
}
.brand-mark .ring::before {
  content: ''; position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--clay);
}
.brand-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.05; }
.brand-text .name {
  font-family: 'Newsreader', serif;
  font-size: 19px; font-weight: 500; color: var(--ink);
  letter-spacing: 0.005em;
}
.brand-text .role {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem; letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--ink-soft);
}

.nav-links { display: flex; gap: 30px; list-style: none; align-items: center; }
.nav-links a {
  color: var(--ink-mid); text-decoration: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px; font-weight: 400;
  position: relative;
}
.nav-links a:hover { color: var(--clay); }
.nav-links a.nav-active { color: var(--sage-deep); font-weight: 500; }
.nav-links a.nav-active::after {
  content: ''; position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1.5px; background: var(--clay);
}
.nav-links .cta {
  border: 1px solid var(--sage);
  padding: 8px 18px;
  border-radius: 999px;
  color: var(--sage);
  font-weight: 500;
}
.nav-links .cta:hover { background: var(--sage); color: var(--bone); }
.nav-links .cta.nav-active { background: var(--sage); color: var(--bone); }
.nav-links .cta.nav-active::after { display: none; }

.nav-hamburger {
  display: none; flex-direction: column; gap: 5px;
  cursor: pointer; background: none; border: none; padding: 4px;
}
.nav-hamburger span {
  display: block; width: 22px; height: 1.5px;
  background: var(--sage); border-radius: 2px;
}

.nav-mobile-menu {
  display: none; position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding: 1rem 2rem 1.5rem;
  flex-direction: column; z-index: 10;
}
.nav-mobile-menu.is-open { display: flex; }
.nav-mobile-menu a {
  color: var(--ink-mid); text-decoration: none;
  font-size: 15px; padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.nav-mobile-menu a:last-child { border-bottom: none; color: var(--clay); }

/* ── HERO (homepage) ─────────────────────────────────────────────── */
.hero {
  padding: 96px 56px 112px;
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 70% 50% at 85% 35%, rgba(74,91,80,0.05), transparent 60%),
    var(--paper);
}
.hero .inner {
  max-width: 1180px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 64px;
  align-items: end;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 36px;
  padding: 8px 16px;
  background: var(--bone);
  border: 1px solid var(--rule);
  border-radius: 999px;
}
.hero-eyebrow .pill-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--clay);
}
.hero-eyebrow .pill-text { font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--ink-mid); font-weight: 500; }
.hero-eyebrow .pill-sep { color: var(--stone); }
.hero-eyebrow .pill-tag { font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sage); font-weight: 500; }

.hero-title {
  font-family: 'Newsreader', serif;
  font-size: clamp(54px, 6.6vw, 96px);
  font-weight: 400; line-height: 1.03;
  letter-spacing: -0.018em;
  color: var(--sage-deep);
  margin-bottom: 28px;
  text-wrap: balance;
}
.hero-title em {
  font-style: italic;
  color: var(--clay);
  font-weight: 400;
}
.hero-tagline {
  font-size: 19px; line-height: 1.6; color: var(--ink-mid);
  max-width: 520px;
  font-weight: 400;
  margin-bottom: 44px;
}
.hero-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--sage-deep); color: var(--bone);
  border: 1px solid var(--sage-deep);
  padding: 14px 26px;
  border-radius: 999px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px; font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
.btn-primary:hover { background: var(--sage); border-color: var(--sage); }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: var(--sage-deep);
  border: 1px solid var(--rule);
  padding: 14px 22px;
  border-radius: 999px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px; font-weight: 500;
  text-decoration: none;
}
.btn-ghost:hover { border-color: var(--sage); color: var(--sage); }
.btn-clay {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--clay); color: var(--bone);
  border: 1px solid var(--clay);
  padding: 12px 22px;
  border-radius: 999px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px; font-weight: 500;
  text-decoration: none;
}
.btn-clay:hover { background: var(--clay-soft); border-color: var(--clay-soft); }

/* ── BREATH ELEMENT (still center, moving world) ─────────────────── */
.breath {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 360px;
  display: flex; align-items: center; justify-content: center;
}
.breath-orbit {
  position: absolute;
  width: 78%; height: 78%;
  border-radius: 50%;
  border: 1px dashed rgba(74,91,80,0.40);
  animation: orbitSpin 48s linear infinite;
  z-index: 1;
}
.breath-orbit.r2 {
  width: 92%; height: 92%;
  border: 1px dashed rgba(74,91,80,0.20);
  animation-duration: 78s;
  animation-direction: reverse;
}
@keyframes orbitSpin { to { transform: rotate(360deg); } }

.breath-ripple {
  position: absolute;
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 1px solid var(--sage);
  opacity: 0;
  animation: rippleOut 9s linear infinite;
  z-index: 2;
}
.breath-ripple.r2 { animation-delay: -2.25s; }
.breath-ripple.r3 { animation-delay: -4.5s; }
.breath-ripple.r4 { animation-delay: -6.75s; }
@keyframes rippleOut {
  0%   { transform: scale(0.18); opacity: 0; border-color: var(--clay); border-width: 1.4px; }
  10%  { opacity: 0.6; border-color: var(--clay); }
  45%  { opacity: 0.35; border-color: var(--sage-mid); }
  92%  { opacity: 0; border-color: var(--sage); border-width: 1px; }
  100% { transform: scale(1); opacity: 0; }
}

.breath-still {
  position: absolute;
  width: 30%; height: 30%;
  border-radius: 50%;
  border: 1.5px solid var(--sage-deep);
  z-index: 3;
  background: rgba(26,34,32,0.50);
  backdrop-filter: blur(2px);
}
.breath-core {
  position: absolute;
  width: 16%; height: 16%;
  border-radius: 50%;
  background: var(--clay);
  z-index: 4;
  box-shadow: 0 0 28px rgba(184,102,68,0.35), inset 0 0 0 2px rgba(250,247,240,0.10);
}
.breath-label {
  position: absolute;
  bottom: -36px; left: 0; right: 0;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem; letter-spacing: 0.30em; text-transform: uppercase;
  color: var(--ink-soft);
}
.breath-label-top {
  position: absolute; top: -36px; left: 0; right: 0;
  text-align: center;
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 17px;
  color: var(--sage);
}

.horizon {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--rule) 12%, var(--rule) 88%, transparent 100%);
}

/* ── HERO (inner pages) ──────────────────────────────────────────── */
.hero-inner-page {
  padding: 88px 56px 80px;
  background:
    radial-gradient(ellipse 65% 50% at 80% 40%, rgba(74,91,80,0.05), transparent 60%),
    var(--paper);
  border-bottom: 1px solid var(--rule-soft);
}
.hero-inner {
  max-width: 880px; margin: 0 auto;
}
.hero-inner .kicker {
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 26px;
  padding: 8px 16px;
  background: var(--bone);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--sage); font-weight: 500;
}
.hero-inner .kicker::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--clay);
}
.hero-inner .kicker-chip {
  background: rgba(184,102,68,0.10);
  color: var(--clay);
  padding: 3px 9px;
  border-radius: 4px;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  margin-right: 6px;
}
.hero-inner h1 {
  font-family: 'Newsreader', serif;
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 400; line-height: 1.08;
  letter-spacing: -0.014em;
  color: var(--sage-deep);
  margin-bottom: 22px;
  text-wrap: balance;
}
.hero-inner h1 em { font-style: italic; color: var(--clay); }
.hero-inner .hero-sub {
  font-size: 19px;
  color: var(--ink-mid);
  line-height: 1.6;
  max-width: 640px;
}
.hero-inner .hero-meta {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 32px;
}
.hero-inner .hero-meta-item {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sage); font-weight: 500;
  padding: 6px 12px;
  background: var(--bone);
  border: 1px solid var(--rule);
  border-radius: 4px;
}

/* ── PAGE CONTENT ────────────────────────────────────────────────── */
.page-content {
  max-width: 880px; margin: 0 auto;
  padding: 80px 56px 32px;
}
.page-section {
  padding: 0 0 72px;
  border-bottom: 1px solid var(--rule-soft);
  margin-bottom: 72px;
}
.page-section:last-of-type { border-bottom: none; margin-bottom: 32px; }
.section-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--sage); font-weight: 500;
}
.section-kicker::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--clay);
}
.page-section h2 {
  font-family: 'Newsreader', serif;
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.15;
  color: var(--sage-deep);
  margin-bottom: 22px;
  text-wrap: balance;
}
.page-section h2 em { font-style: italic; color: var(--clay); }
.page-section h3 {
  font-family: 'Newsreader', serif;
  font-size: 21px;
  font-weight: 500;
  color: var(--sage-deep);
  letter-spacing: -0.005em;
  line-height: 1.3;
  margin-bottom: 8px;
}
.page-section p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-mid);
  margin-bottom: 18px;
  max-width: 720px;
}
.page-section p strong {
  color: var(--ink);
  font-weight: 500;
}

/* ── TLDR ────────────────────────────────────────────────────────── */
.tldr-block {
  margin-bottom: 56px;
  padding: 28px 32px;
  background: var(--bone);
  border-radius: 14px;
  border: 1px solid var(--rule);
  position: relative;
}
.tldr-label {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--clay); font-weight: 500;
  margin-bottom: 12px;
  padding: 4px 10px;
  background: rgba(184,102,68,0.08);
  border-radius: 4px;
}
.tldr-block p {
  font-family: 'Newsreader', serif;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-mid);
  font-weight: 400;
  max-width: none;
  margin-bottom: 0;
}

/* ── PULL QUOTE ──────────────────────────────────────────────────── */
.pull-quote {
  margin: 32px 0;
  padding: 28px 36px;
  border-left: 2px solid var(--clay);
  background: var(--bone);
  border-radius: 0 14px 14px 0;
}
.pull-quote p {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 22px;
  line-height: 1.45;
  color: var(--sage-deep);
  margin: 0;
  text-wrap: pretty;
  max-width: none;
}

/* ── FIGURES (story / family) ────────────────────────────────────── */
.story-figure, .family-figure {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: center;
  margin: 36px 0;
}
.story-figure .photo, .family-figure .photo {
  background: var(--paper-deep);
  border-radius: 14px;
  border: 1px solid var(--rule);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.story-figure .photo img, .family-figure .photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.story-figure figcaption,
.family-figure figcaption {
  display: flex; flex-direction: column; gap: 10px;
}
.story-figure figcaption .kicker,
.family-figure figcaption .figcap-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem; letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--clay); font-weight: 500;
}
.story-figure figcaption .text,
.family-figure figcaption .figcap-body {
  font-family: 'Newsreader', serif;
  font-size: 18px;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink-mid);
}
.family-figure figcaption .figcap-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 6px;
}

/* ── VALUES GRID ─────────────────────────────────────────────────── */
.values-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 36px 0;
}
.value-card {
  background: var(--bone);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 24px 26px;
}
.value-card h3 {
  font-family: 'Newsreader', serif;
  font-size: 21px;
  font-weight: 500;
  color: var(--sage-deep);
  margin-bottom: 8px;
}
.value-card p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-mid);
  margin: 0;
}

/* ── CREDENTIALS ─────────────────────────────────────────────────── */
.credentials {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 24px;
}
.credential-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sage); font-weight: 500;
  padding: 10px 16px;
  background: var(--bone);
  border: 1px solid var(--rule);
  border-radius: 4px;
}

/* ── PRINCIPLE LIST (philosophy page) ────────────────────────────── */
.principle-list {
  display: flex; flex-direction: column;
  gap: 12px;
  margin: 32px 0;
}
.principle-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  background: var(--bone);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 22px 28px;
  align-items: start;
}
.principle-num {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 28px;
  color: var(--clay);
  line-height: 1;
}
.principle-text {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-mid);
}
.principle-text strong {
  display: block;
  font-family: 'Newsreader', serif;
  font-size: 19px;
  font-weight: 500;
  color: var(--sage-deep);
  margin-bottom: 4px;
}

/* ── CLOSING BLOCK (philosophy page) ─────────────────────────────── */
.closing-block {
  background: var(--sage-darker);
  color: var(--bone);
  padding: 44px 48px;
  border-radius: 18px;
  margin: 40px 0;
  position: relative; overflow: hidden;
}
.closing-block::before {
  content: '';
  position: absolute;
  top: 50%; right: -100px;
  transform: translateY(-50%);
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184,102,68,0.10) 0%, transparent 60%);
  pointer-events: none;
}
.closing-block p {
  font-family: 'Newsreader', serif;
  font-size: 22px;
  font-style: italic;
  color: var(--bone);
  line-height: 1.5;
  max-width: 620px;
  margin: 0;
  position: relative;
}

/* ── FLOW STEPS (AI tool pages) ─────────────────────────────────── */
.flow-steps {
  display: flex; flex-direction: column;
  gap: 0;
  margin: 32px 0;
}
.flow-step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 24px;
  padding: 24px 0;
  align-items: start;
  position: relative;
}
.flow-step-line {
  position: absolute;
  left: 27px; top: 56px; bottom: -24px;
  width: 1px;
  background: var(--rule);
}
.flow-step:last-child .flow-step-line { display: none; }
.flow-step-num {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--clay);
  color: var(--bone);
  border-radius: 50%;
  font-family: 'Newsreader', serif;
  font-size: 17px;
  font-weight: 500;
  flex-shrink: 0;
  z-index: 1;
  position: relative;
  margin-left: 4px;
}
.flow-step-body { padding-top: 6px; }
.flow-step-title {
  font-family: 'Newsreader', serif;
  font-size: 21px;
  font-weight: 500;
  color: var(--sage-deep);
  margin-bottom: 8px;
}
.flow-step-desc {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-mid);
}

/* ── AI GRID (case-ai pages) ─────────────────────────────────────── */
.ai-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 28px 0;
}
.ai-card {
  background: var(--bone);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 22px 24px;
}
.ai-card h3 {
  font-family: 'Newsreader', serif;
  font-size: 19px;
  font-weight: 500;
  color: var(--sage-deep);
  margin-bottom: 8px;
  letter-spacing: -0.005em;
}
.ai-card p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-mid);
  margin: 0;
}

/* ── OUTCOME BLOCK ───────────────────────────────────────────────── */
.outcome-block {
  background: var(--sage-darker);
  color: var(--bone);
  padding: 44px 48px;
  border-radius: 18px;
  margin: 48px 0;
  position: relative; overflow: hidden;
}
.outcome-block::before {
  content: '';
  position: absolute;
  top: 50%; right: -100px;
  transform: translateY(-50%);
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184,102,68,0.10) 0%, transparent 60%);
  pointer-events: none;
}
.outcome-block .section-kicker {
  color: var(--clay-soft);
}
.outcome-block .section-kicker::before { background: var(--clay-soft); }
.outcome-block h2 {
  color: var(--bone);
  position: relative;
}
.outcome-block h2 em { color: var(--clay-soft); }
.outcome-block p {
  color: rgba(250,247,240,0.85);
  position: relative;
  max-width: 640px;
}
.outcome-block p strong { color: var(--bone); }

/* ── FEATURE ROWS ────────────────────────────────────────────────── */
.feature-rows {
  display: flex; flex-direction: column;
  margin: 28px 0;
  border-top: 1px solid var(--rule);
}
.feature-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 28px;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.feature-row-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sage); font-weight: 500;
  padding-top: 3px;
}
.feature-row-desc {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-mid);
}

/* ── CONFIDENTIALITY CALLOUT ─────────────────────────────────────── */
.confidentiality-callout {
  margin: 0 0 48px;
  padding: 22px 28px;
  background: rgba(184,102,68,0.06);
  border: 1px solid rgba(184,102,68,0.20);
  border-radius: 14px;
}
.confidentiality-callout-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--clay); font-weight: 500;
  margin-bottom: 10px;
  display: inline-block;
}
.confidentiality-callout p {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-mid);
  margin: 0;
}
.confidentiality-callout a {
  color: var(--clay);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(184,102,68,0.30);
}
.confidentiality-callout a:hover { border-bottom-color: var(--clay); }

/* ── CONTACT ITEMS ───────────────────────────────────────────────── */
.contact-links {
  display: flex; flex-direction: column;
  gap: 12px;
  margin: 32px 0;
  max-width: 640px;
}
.contact-item {
  display: flex; align-items: baseline; gap: 18px;
  padding: 22px 26px;
  background: var(--bone);
  border: 1px solid var(--rule);
  border-radius: 14px;
}
.contact-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sage); font-weight: 500;
  flex-shrink: 0;
  width: 96px;
}
.contact-value {
  font-size: 16px;
  color: var(--ink-mid);
}
.contact-value a {
  color: var(--sage-deep);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid var(--rule);
}
.contact-value a:hover {
  color: var(--clay);
  border-bottom-color: var(--clay);
}

/* ── BACK LINK ───────────────────────────────────────────────────── */
.back-link {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 32px;
  padding: 12px 22px;
  background: var(--bone);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--sage-deep);
  text-decoration: none;
}
.back-link:hover { border-color: var(--sage); color: var(--sage); }

/* ── STAT BAR (case study impact strip) ──────────────────────────── */
.stat-bar {
  background: var(--sage-darker);
  color: var(--bone);
  padding: 44px 56px;
  position: relative; overflow: hidden;
}
.stat-bar::before {
  content: '';
  position: absolute;
  top: 50%; left: -150px;
  transform: translateY(-50%);
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184,102,68,0.08) 0%, transparent 60%);
  pointer-events: none;
}
.stat-bar-inner {
  max-width: 1180px; margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  position: relative;
}
.stat-item {
  display: flex; flex-direction: column;
  gap: 8px;
}
.stat-number {
  font-family: 'Newsreader', serif;
  font-size: clamp(40px, 4vw, 56px);
  font-weight: 400;
  color: var(--clay-soft);
  letter-spacing: -0.012em;
  line-height: 1;
}
.stat-label {
  font-size: 14px;
  color: rgba(250,247,240,0.65);
  line-height: 1.55;
}

/* ── OUTCOME GRID / OUTCOME CARD (3-col endpoints) ───────────────── */
.outcome-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 32px 0;
}
.outcome-card {
  background: var(--bone);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 26px 28px;
  display: flex; flex-direction: column;
  gap: 10px;
}
.outcome-label {
  font-family: 'Newsreader', serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--sage-deep);
  letter-spacing: -0.005em;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule-soft);
  position: relative;
}
.outcome-label::before {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  width: 32px; height: 1.5px;
  background: var(--clay);
}
.outcome-desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-mid);
}

/* ── OUTCOME HIGHLIGHT (impact section with embedded stats) ──────── */
.outcome-highlight {
  background: var(--sage-darker);
  color: var(--bone);
  padding: 56px 48px;
  border-radius: 18px;
  margin: 48px 0;
  position: relative; overflow: hidden;
}
.outcome-highlight::before {
  content: '';
  position: absolute;
  top: 50%; right: -150px;
  transform: translateY(-50%);
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184,102,68,0.10) 0%, transparent 60%);
  pointer-events: none;
}
.outcome-highlight > * { position: relative; }
.outcome-highlight .section-kicker { color: var(--clay-soft); }
.outcome-highlight .section-kicker::before { background: var(--clay-soft); }
.outcome-highlight h2 { color: var(--bone); }
.outcome-highlight h2 em { color: var(--clay-soft); }
.outcome-highlight p {
  color: rgba(250,247,240,0.85);
  max-width: 640px;
}
.outcome-highlight p strong { color: var(--bone); }
.outcome-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 36px;
  padding-top: 32px;
  border-top: 1px solid rgba(250,247,240,0.14);
}
.outcome-stat .number {
  font-family: 'Newsreader', serif;
  font-size: clamp(36px, 3.4vw, 48px);
  font-weight: 400;
  color: var(--clay-soft);
  letter-spacing: -0.012em;
  line-height: 1;
  margin-bottom: 10px;
}
.outcome-stat .label {
  font-size: 13.5px;
  color: rgba(250,247,240,0.65);
  line-height: 1.5;
}

/* ── O3 LIST (numbered conversation list) ────────────────────────── */
.o3-list {
  display: flex; flex-direction: column;
  margin: 28px 0;
  border-top: 1px solid var(--rule);
}
.o3-item {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule-soft);
  align-items: start;
}
.o3-num {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--sage-deep);
  color: var(--bone);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Newsreader', serif;
  font-size: 17px;
  font-weight: 500;
  flex-shrink: 0;
}
.o3-text {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-mid);
}
.o3-text strong {
  display: block;
  font-family: 'Newsreader', serif;
  font-size: 19px;
  font-weight: 500;
  color: var(--sage-deep);
  margin-bottom: 6px;
}

/* ── RATING SCALE ────────────────────────────────────────────────── */
.rating-scale {
  display: flex; flex-direction: column;
  margin: 28px 0;
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
}
.rating-item {
  display: grid;
  grid-template-columns: 160px 1fr;
}
.rating-item + .rating-item { border-top: 1px solid var(--rule-soft); }
.rating-badge {
  padding: 28px 24px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
  border-right: 1px solid var(--rule-soft);
}
.rating-num {
  font-family: 'Newsreader', serif;
  font-size: 44px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.012em;
}
.rating-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.rating-desc {
  padding: 28px 32px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-mid);
  display: flex; align-items: center;
  background: var(--bone);
}
.rating-item.developing .rating-badge { background: var(--paper-deep); }
.rating-item.developing .rating-num { color: var(--clay); }
.rating-item.developing .rating-label { color: var(--clay); }
.rating-item.performing .rating-badge { background: rgba(74,91,80,0.08); }
.rating-item.performing .rating-num { color: var(--sage-deep); }
.rating-item.performing .rating-label { color: var(--sage); }
.rating-item.exceeding .rating-badge { background: var(--sage-deep); }
.rating-item.exceeding .rating-num { color: var(--bone); }
.rating-item.exceeding .rating-label { color: var(--clay-soft); }
.rating-item.exceeding .rating-desc { background: rgba(74,91,80,0.04); }

/* ── SMART GRID ──────────────────────────────────────────────────── */
.smart-grid {
  display: flex; flex-direction: column;
  margin: 28px 0;
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
}
.smart-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  border-bottom: 1px solid var(--rule-soft);
}
.smart-row:last-child { border-bottom: none; }
.smart-letter {
  display: flex; align-items: center; justify-content: center;
  font-family: 'Newsreader', serif;
  font-size: 32px;
  font-weight: 500;
  color: var(--stone);
  border-right: 1px solid var(--rule-soft);
  background: var(--paper-deep);
}
.smart-row.highlight .smart-letter {
  background: var(--sage-deep);
  color: var(--clay-soft);
}
.smart-body { padding: 20px 26px; }
.smart-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 6px;
}
.smart-row.highlight {
  background: rgba(184,102,68,0.04);
}
.smart-row.highlight .smart-title { color: var(--clay); }
.smart-desc {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-mid);
}

/* ── CONNECTION GRID (2-col cards inside page-section) ───────────── */
.connection-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 28px 0;
}
.connection-card {
  background: var(--bone);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 22px 26px;
}
.connection-card h3 {
  font-family: 'Newsreader', serif;
  font-size: 19px;
  font-weight: 500;
  color: var(--sage-deep);
  margin-bottom: 8px;
  letter-spacing: -0.005em;
}
.connection-card p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-mid);
  margin: 0;
}

/* ── PRINCIPLES LIST (case study design principles) ──────────────── */
.principles-list {
  display: flex; flex-direction: column;
  margin: 24px 0;
  border-top: 1px solid var(--rule);
}
.principles-list .principle-item {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule-soft);
  align-items: start;
  background: transparent;
  border-radius: 0;
}
.principles-list .principle-num {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 24px;
  color: var(--clay);
  padding-top: 2px;
  line-height: 1;
}
.principles-list .principle-text {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-mid);
}
.principles-list .principle-text strong {
  color: var(--sage-deep);
  display: inline;
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  margin-bottom: 0;
}

/* responsive */
@media (max-width: 640px) {
  .stat-bar-inner { grid-template-columns: 1fr; gap: 24px; }
  .outcome-grid { grid-template-columns: 1fr; }
  .outcome-stats { grid-template-columns: 1fr; gap: 18px; padding-top: 24px; }
  .rating-item { grid-template-columns: 1fr; }
  .rating-badge { padding: 16px; border-right: none; border-bottom: 1px solid var(--rule-soft); }
  .connection-grid { grid-template-columns: 1fr; }
  .outcome-highlight { padding: 36px 28px; }
  .stat-bar { padding: 32px 24px; }
}

/* ── EPIGRAPH (homepage intro strip) ─────────────────────────────── */
.epigraph {
  background: var(--paper);
  padding: 96px 56px;
  border-bottom: 1px solid var(--rule-soft);
}
.epigraph .inner {
  max-width: 980px; margin: 0 auto;
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 48px;
  align-items: start;
}
.epi-label {
  padding-top: 14px;
  border-top: 1px solid var(--clay);
}
.epi-label .mono { display: block; color: var(--clay); margin-bottom: 8px; }
.epi-label-sub {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
}
.epi-quote {
  font-family: 'Newsreader', serif;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.34;
  font-weight: 400;
  color: var(--sage-deep);
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.epi-quote em { font-style: italic; color: var(--clay); }
.epi-attr {
  margin-top: 30px;
  display: flex; gap: 16px; align-items: center;
}
.epi-attr-dash { width: 28px; height: 1px; background: var(--clay); }
.epi-attr-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px; color: var(--ink-mid);
}
.epi-attr-text strong {
  font-family: 'Newsreader', serif;
  font-weight: 500;
  color: var(--sage-deep);
  font-size: 16px;
  display: block;
}

/* ── HOMEPAGE SECTIONS (Foundation/Principles/Work/AI/Testimonials/Practice/Closing) ── */
.foundation,
.principles-section,
.work-section,
.ai-section,
.testimonials-section,
.practice-section,
.closing-section {
  padding: 110px 56px;
  border-top: 1px solid var(--rule-soft);
}
.foundation { background: var(--paper-deep); }
.principles-section { background: var(--paper); }
.work-section { background: var(--paper-deep); }
.ai-section { background: var(--paper); }
.testimonials-section { background: var(--paper-deep); }

.foundation .inner,
.principles-section .inner,
.work-section .inner,
.ai-section .inner,
.testimonials-section .inner { max-width: 1180px; margin: 0 auto; }

.section-head { margin-bottom: 64px; max-width: 720px; }
.section-head .section-kicker-pill {
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 22px;
  padding: 6px 14px;
  background: var(--bone);
  border-radius: 999px;
  border: 1px solid var(--rule);
}
.section-head .section-kicker-pill .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--clay);
  box-shadow: 0 0 0 3px rgba(184,102,68,0.12);
}
.section-head .section-kicker-pill .mono { color: var(--sage); }
.section-head .section-heading {
  font-family: 'Newsreader', serif;
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 400; line-height: 1.08;
  letter-spacing: -0.014em;
  color: var(--sage-deep);
  margin-bottom: 16px;
  text-wrap: balance;
}
.section-head .section-heading em { font-style: italic; color: var(--clay); }
.section-head .section-intro {
  font-size: 18px;
  color: var(--ink-mid);
  line-height: 1.6;
}

/* PILLARS */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.pillar {
  background: var(--bone);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 30px 28px 32px;
  display: flex; flex-direction: column;
  gap: 14px;
  position: relative; overflow: hidden;
}
.pillar-top {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule-soft);
  margin-bottom: 4px;
}
.pillar-label { color: var(--sage); }
.pillar-glyph { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; }
.pillar-glyph svg { width: 100%; height: 100%; }
.pillar h3 {
  font-family: 'Newsreader', serif;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.15;
  color: var(--sage-deep);
}
.pillar-gloss {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 15px; color: var(--clay);
  line-height: 1.45;
}
.pillar-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.pillar-list li {
  font-size: 15px; line-height: 1.55; color: var(--ink-mid);
  padding-left: 18px; position: relative;
}
.pillar-list li::before {
  content: ''; position: absolute;
  left: 0; top: 0.7em;
  width: 10px; height: 1px;
  background: var(--sage);
}

/* PRINCIPLES (4-stage) */
.principles-grid {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--rule);
  margin-top: 8px;
}
.principle {
  display: grid;
  grid-template-columns: 132px 1fr 120px;
  gap: 48px;
  align-items: center;
  padding: 36px 0;
  border-bottom: 1px solid var(--rule);
  position: relative;
  transition: background 0.25s;
}
.principle:hover { background: rgba(74,91,80,0.025); }
.principle-stage { display: flex; align-items: center; gap: 14px; }
.principle-stage .num {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 38px;
  color: var(--clay);
  font-weight: 400;
  line-height: 1;
}
.principle-stage .label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--sage); line-height: 1.4;
}
.principle-body { display: flex; flex-direction: column; gap: 8px; }
.principle-title {
  font-family: 'Newsreader', serif;
  font-size: 24px; font-weight: 500;
  color: var(--sage-deep);
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.principle-lede {
  font-size: 16px; color: var(--ink-mid);
  line-height: 1.65; max-width: 620px;
}
.principle-flow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-soft);
  text-align: right; opacity: 0.65;
  font-style: italic;
}
.principle-flow.loop { color: var(--clay); opacity: 0.85; font-style: normal; }

/* CASE GRID (homepage Work + AI sections, and portfolio) */
.case-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.case-grid > :last-child:nth-child(odd) {
  grid-column: 1 / -1;
  max-width: calc(50% - 8px);
  justify-self: center;
}
.case-card {
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  background: var(--bone);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 30px 30px 28px;
  position: relative;
  min-height: 230px;
  transition: border-color 0.22s, transform 0.22s, box-shadow 0.22s;
}
.case-card:hover {
  border-color: var(--sage);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px -10px rgba(29,32,29,0.15);
}
.case-card-meta { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.case-card-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem; font-weight: 500;
  letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--sage);
}
.case-card-tag::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--sage);
}
.case-card-tag.ai { color: var(--clay); }
.case-card-tag.ai::before { background: var(--clay); }
.case-card-id {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-soft); opacity: 0.55;
}
.case-card-title {
  font-family: 'Newsreader', serif;
  font-size: 22px; font-weight: 500;
  color: var(--sage-deep);
  letter-spacing: -0.005em;
  line-height: 1.25;
  margin-bottom: 12px;
}
.case-card-desc {
  font-size: 15px; line-height: 1.65;
  color: var(--ink-mid);
  margin-bottom: 20px;
}
.case-card-foot {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.case-card-link {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px; font-weight: 500;
  color: var(--clay);
  display: inline-flex; align-items: center; gap: 6px;
  transition: gap 0.2s;
}
.case-card:hover .case-card-link { gap: 10px; }
.case-card-live {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.56rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--clay);
  background: rgba(184,102,68,0.10);
  border: 1px solid rgba(184,102,68,0.22);
  padding: 4px 9px;
  border-radius: 4px;
}

/* AI cards have a thumb */
.ai-section .case-card { background: var(--paper-deep); padding: 0 30px 28px; overflow: hidden; }
.ai-section .case-card .case-thumb {
  display: block;
  margin: 0 -30px 24px;
  aspect-ratio: 16 / 10;
  background: var(--sage-darker);
  border-bottom: 1px solid var(--rule);
}
.ai-section .case-card .case-thumb svg { width: 100%; height: 100%; display: block; }
.ai-section .case-card .case-card-meta { margin-top: 4px; }

/* TESTIMONIALS */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.testimonial {
  background: var(--bone);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 36px 34px 30px;
  display: flex; flex-direction: column;
  gap: 18px;
  position: relative;
}
.testimonial::before {
  content: '“';
  position: absolute;
  top: 16px; right: 28px;
  font-family: 'Newsreader', serif;
  font-size: 72px; line-height: 1;
  color: var(--clay);
  opacity: 0.20;
  font-weight: 500;
}
.testimonial-quote {
  font-family: 'Newsreader', serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-mid);
  letter-spacing: -0.003em;
  text-wrap: pretty;
}
.testimonial-quote em {
  font-style: italic;
  color: var(--sage-deep);
  font-weight: 500;
}
.testimonial-attr {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--rule-soft);
  display: flex; flex-direction: column; gap: 4px;
}
.testimonial-name {
  font-family: 'Newsreader', serif;
  font-size: 17px; font-weight: 500;
  color: var(--sage-deep);
  letter-spacing: -0.005em;
}
.testimonial-role {
  font-size: 13px;
  color: var(--ink-mid);
  line-height: 1.5;
}
.testimonial-relation {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--clay);
  margin-top: 6px;
}

/* PRACTICE INTERLUDE */
.practice-section {
  background: var(--sage-darker);
  color: var(--bone);
  position: relative; overflow: hidden;
}
.practice-section::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 800px; height: 800px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184,102,68,0.08) 0%, transparent 60%);
  pointer-events: none;
}
.practice-section .inner {
  max-width: 880px; margin: 0 auto;
  text-align: center; position: relative;
}
.practice-eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  margin-bottom: 36px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem; letter-spacing: 0.30em; text-transform: uppercase;
  color: var(--clay-soft);
}
.practice-eyebrow::before, .practice-eyebrow::after {
  content: ''; width: 32px; height: 1px; background: rgba(212,175,155,0.4);
}
.practice-text {
  font-family: 'Newsreader', serif;
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 400;
  line-height: 1.45;
  color: var(--bone);
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.practice-text em { font-style: italic; color: var(--clay-soft); }

/* CLOSING */
.closing-section {
  background: var(--paper);
  text-align: center;
}
.closing-section .inner { max-width: 720px; margin: 0 auto; }
.closing-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 32px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--clay);
}
.closing-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--clay);
}
.closing-quote {
  font-family: 'Newsreader', serif;
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 400;
  line-height: 1.22;
  color: var(--sage-deep);
  letter-spacing: -0.012em;
  margin-bottom: 22px;
  text-wrap: balance;
}
.closing-quote em { font-style: italic; color: var(--clay); }
.closing-sub {
  font-size: 18px;
  color: var(--ink-mid);
  line-height: 1.6;
  margin-bottom: 44px;
}
.closing-cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--sage-deep); color: var(--bone);
  padding: 14px 28px; border-radius: 999px;
  text-decoration: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px; font-weight: 500;
}
.closing-cta:hover { background: var(--clay); }

/* ── FOOTER ──────────────────────────────────────────────────────── */
.foot {
  background: var(--sage-darker);
  color: var(--bone);
  padding: 80px 56px 64px;
  text-align: center;
}
.foot h2 {
  font-family: 'Newsreader', serif;
  font-size: 40px; font-weight: 400;
  letter-spacing: -0.012em;
  margin-bottom: 12px;
}
.foot p { color: rgba(250,247,240,0.55); margin-bottom: 32px; font-size: 16px; }
.foot-links {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.foot-links a {
  text-decoration: none; color: var(--bone);
  border: 1px solid rgba(250,247,240,0.20);
  padding: 12px 24px;
  border-radius: 999px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px; font-weight: 500;
}
.foot-links a:hover { background: rgba(250,247,240,0.06); border-color: var(--bone); }
.foot-mark {
  margin-top: 38px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem; letter-spacing: 0.30em; text-transform: uppercase;
  color: rgba(250,247,240,0.36);
  display: inline-flex; align-items: center; gap: 12px;
}
.foot-mark .breath-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--clay);
}

/* ── RESPONSIVE ──────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .hero { padding: 72px 32px 80px; }
  .hero .inner { grid-template-columns: 1fr; gap: 40px; }
  .breath { max-width: 280px; justify-self: center; }
  .hero-inner-page { padding: 64px 32px 60px; }
  .page-content { padding: 60px 32px 24px; }
  .foundation, .principles-section, .work-section, .ai-section,
  .testimonials-section, .practice-section, .closing-section { padding: 80px 32px; }
  .pillars { grid-template-columns: 1fr; }
  .case-grid { grid-template-columns: 1fr; }
  .case-grid > :last-child:nth-child(odd) { max-width: none; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .ai-grid { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr; }
  .principle { grid-template-columns: 1fr; gap: 12px; }
  .principle-flow { display: none; }
  .epigraph .inner { grid-template-columns: 1fr; gap: 24px; }
  .epigraph { padding: 64px 32px; }
  .story-figure, .family-figure { grid-template-columns: 1fr; }
  .feature-row { grid-template-columns: 1fr; gap: 8px; }
}
@media (max-width: 640px) {
  .nav { padding: 18px 24px; }
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  .closing-block, .outcome-block { padding: 32px 28px; }
  .foot { padding: 64px 32px 56px; }
  .hero-title { font-size: 42px; }
  .hero { padding: 64px 24px 80px; }
  .hero-eyebrow .pill-sep,
  .hero-eyebrow .pill-tag { display: none; }
  .hero-eyebrow { padding: 7px 14px; }
}