/* ============================================================
   Founda — main.css
   Shared styles for every page. Page-specific styles live in
   their own files (menu.css, checkout.css).

   Source of truth for design tokens: /docs/01-design-tokens.md
   Source of truth for component markup: /docs/04-components.md
   ============================================================ */

/* ---------- 1. Design tokens ------------------------------- */
:root {
  /* paper (backgrounds) */
  --paper:        #F4F1EA;
  --paper-light:  #FBF9F4;
  --paper-warm:   #EAE4D5;

  /* ink (text + dark surfaces) */
  --ink:          #0F0F0F;
  --ink-soft:     #5A5550;
  --ink-line:     rgba(15, 15, 15, 0.12);

  /* pop colours */
  --pop-acid:     #DBFF4C;
  --pop-coral:    #FF7A55;
  --pop-lilac:    #C4B0FF;

  /* supporting pastels */
  --pastel-cream: #FFF3D6;
  --pastel-mist:  #E8DFE8;
  --pastel-sky:   #DCE8F0;

  /* type families */
  --font-display: 'Geist', sans-serif;
  --font-serif:   'Instrument Serif', serif;
  --font-mono:    'Geist Mono', monospace;

  /* spacing */
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  80px;
  --space-10: 100px;

  /* radii */
  --radius-sm:   4px;
  --radius-md:  16px;
  --radius-lg:  24px;
  --radius-pill: 999px;
}

/* ---------- 2. Reset + base -------------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* SVG noise overlay — sits above everything but doesn't intercept events */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.05 0 0 0 0 0.05 0 0 0 0 0.05 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 50;
  opacity: 0.5;
}

main { position: relative; z-index: 1; }

a { color: inherit; }

/* ---------- 3. Container ----------------------------------- */
.container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 32px;
}

@media (max-width: 600px) {
  .container { padding: 0 20px; }
}

/* ---------- 4. Typography ---------------------------------- */
h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(44px, 7vw, 128px);
  line-height: 0.95;
  letter-spacing: -0.05em;
  margin-bottom: 0;
}
h1 .serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink);
}
@media (max-width: 600px) {
  h1 { font-size: clamp(40px, 11vw, 64px); }
}

h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(44px, 7vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  max-width: 1100px;
}
h2 .serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
}

h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -0.03em;
}
h3 .serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

.lede {
  font-size: 19px;
  line-height: 1.5;
  max-width: 720px;
  margin-bottom: 56px;
}

/* Pepper — italic-emphasised tagline. Used in ~3 places per the doc. */
.pepper {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink-soft);
  margin-bottom: 24px;
  max-width: 720px;
}
.pepper strong {
  color: var(--ink);
  font-weight: 400;
}
.pepper em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.2em;
  letter-spacing: -0.01em;
}
.pepper-dark {
  color: rgba(244, 241, 234, 0.65);
}
.pepper-dark strong {
  color: var(--paper);
}

/* ---------- 5. Highlight system ---------------------------- */

/* Slim acid bar across the bottom 30% of the type — the default. */
.hl-under {
  position: relative;
  display: inline-block;
  z-index: 1;
}
.hl-under::before {
  content: '';
  position: absolute;
  left: -0.04em;
  right: -0.04em;
  bottom: 0.08em;
  height: 0.32em;
  background: var(--pop-acid);
  border-radius: 999px;
  z-index: -1;
}
.hl-under-coral::before { background: var(--pop-coral); }

/* Pill highlight — full block, thin dark border. Used sparingly. */
.hl {
  position: relative;
  display: inline-block;
  z-index: 1;
  padding: 0 0.18em;
}
.hl::before {
  content: '';
  position: absolute;
  inset: 0.08em -0.02em 0.04em -0.02em;
  background: var(--pop-acid);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  z-index: -1;
}
.hl-coral::before { background: var(--pop-coral); }
.hl-lilac::before { background: var(--pop-lilac); }

/* ---------- 6. Buttons ------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 24px;
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  border-radius: 100px;
  border: 1px solid var(--ink);
  transition: all 0.2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn::after {
  font-family: var(--font-mono);
  font-size: 18px;
}

.btn-primary {
  background: var(--ink);
  color: var(--paper);
}
.btn-primary:hover {
  background: var(--pop-acid);
  color: var(--ink);
  border-color: var(--ink);
}

.btn-secondary {
  background: var(--paper);
  color: var(--ink);
}
.btn-secondary:hover { background: var(--paper-warm); }

.btn-waitlist {
  background: var(--paper-warm);
  color: var(--ink);
}
.btn-waitlist:hover { background: var(--ink); color: var(--paper); }

/* ---------- 7. Marquee ------------------------------------- */
.marquee {
  background: var(--ink);
  color: var(--paper);
  padding: 14px 0;
  overflow: hidden;
  border-bottom: 1px solid var(--ink);
}
.marquee-track {
  display: flex;
  gap: 48px;
  white-space: nowrap;
  animation: scroll 40s linear infinite;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.marquee-item {
  display: flex;
  align-items: center;
  gap: 48px;
}
.marquee-item .serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--pop-acid);
  font-size: 1.15em;
  letter-spacing: -0.02em;
}
.marquee-item .coral-serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--pop-coral);
  font-size: 1.15em;
  letter-spacing: -0.02em;
}
.marquee-item::after {
  content: '✦';
  color: var(--pop-acid);
  font-size: 12px;
}
@keyframes scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ---------- 8. Availability bar ---------------------------- */
.availability-bar {
  background: var(--paper-warm);
  border-bottom: 1px solid var(--ink);
  padding: 14px 0;
}
.availability-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.avail-left {
  display: flex;
  align-items: center;
  gap: 16px;
}
/* Availability segments — six slots forming a single progress bar.
   Touching segments with a 1px ink hairline between them so the row
   reads as one bar (full = solid coral) but you can still see 6 slots. */
.avail-dots {
  display: flex;
  gap: 1px;
  align-items: center;
  flex-shrink: 0;
  padding: 2px;
  border: 1px solid rgba(15, 15, 15, 0.22);
  border-radius: 3px;
  background: var(--paper);
}
.avail-dot {
  width: 14px;
  height: 9px;
  background: transparent;
  transition: background 0.2s ease;
}
.avail-dot.filled {
  background: var(--pop-coral);
}
/* When the whole bar is filled, run a slow shimmer across so the
   "fully booked" state still feels live. Pure CSS, no JS. */
.avail-dots.full {
  position: relative;
  overflow: hidden;
}
.avail-dots.full::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 100%
  );
  animation: bar-shimmer 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes bar-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Legacy dial styles — kept in case any reference renders the old SVG */
.avail-dial { width: 32px; height: 32px; flex-shrink: 0; position: relative; }
.avail-dial svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.avail-dial .track { fill: none; stroke: var(--ink-line); stroke-width: 4; }
.avail-dial .progress {
  fill: none; stroke: var(--pop-coral); stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: 88; stroke-dashoffset: 29;
}
.avail-text {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.avail-text strong {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.01em;
  font-size: 14px;
  margin-right: 4px;
}
.avail-text .low {
  color: var(--pop-coral);
  font-weight: 600;
}
.avail-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ink);
  color: var(--paper);
  padding: 8px 16px;
  border-radius: 100px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: background 0.2s;
}
.avail-cta:hover { background: var(--pop-coral); color: var(--ink); }
.avail-cta::after { content: '→'; }

@media (max-width: 700px) {
  .availability-bar { padding: 10px 0; }
  .avail-text { font-size: 11px; }
  .avail-text strong { font-size: 13px; }
  .avail-cta { padding: 6px 12px; font-size: 11px; }
}

/* ---------- 9. Nav ----------------------------------------- */
nav {
  padding: 24px 0;
  border-bottom: 1px solid var(--ink);
  position: sticky;
  top: 0;
  background: var(--paper);
  z-index: 40;
}
.nav-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -0.04em;
  line-height: 1;
  text-decoration: none;
  color: var(--ink);
}
.wordmark .serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--pop-coral);
  margin-left: 0.06em;
  padding-right: 0.04em;
}
.nav-links {
  display: flex;
  gap: 32px;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
}
.nav-links a {
  color: var(--ink);
  text-decoration: none;
  transition: opacity 0.2s;
}
.nav-links a:hover { opacity: 0.6; }
.nav-links a.active { font-weight: 700; }
/* "intelligence" link — italic-coral, lowercase, matches the
   pepper styling used inside the Founda Intelligence app. */
.nav-links a.nav-intelligence,
.footer-links a.nav-intelligence {
  color: var(--pop-coral);
}
.nav-intelligence em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.35em;
  letter-spacing: 0;
  vertical-align: -0.05em;
}
/* Inline italic-coral "intelligence" treatment — used in body copy
   wherever we reference the Intelligence suite. Mirrors the .pepper
   rule in the Intelligence app (Instrument Serif italic 400) exactly,
   so the wordmark renders identically across both sites. */
.intel-em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--pop-coral);
  font-size: 1.15em;
  letter-spacing: 0;
}

/* Intelligence intro band — sits between the brand wall and reviews
   on the homepage. Uses the existing .feature-block card chrome and
   adds two-up layout for text + CTA. */
.intel-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}
.intel-band-text { flex: 1 1 480px; }
.intel-band-h {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.05;
  margin-bottom: 16px;
}
.intel-band-cta { flex-shrink: 0; }
@media (max-width: 700px) {
  .intel-band { gap: 24px; }
  .intel-band-cta { align-self: flex-start; }
}
/* .nav-links a sets color: var(--ink), so we have to be specific
   enough to win — descendant + class beats descendant alone. */
.nav-links a.nav-cta,
.nav-cta {
  background: var(--ink);
  color: var(--paper);
  padding: 10px 20px;
  border-radius: 100px;
  font-weight: 600;
  font-size: 13px;
}
.nav-links a.nav-cta:hover,
.nav-cta:hover {
  opacity: 1;
  background: var(--pop-acid);
  color: var(--ink);
}
/* Hamburger button — only shown below 800px (mobile media query
   below). Sits between wordmark and nav-links. Three lines, ink,
   pill border. NOTE: the default `display: none` MUST come before
   the @media override or source order will hide it on mobile. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 100px;
  padding: 9px 12px;
  margin-right: 8px;
  cursor: pointer;
  flex-direction: column;
  gap: 4px;
  transition: background 0.2s;
}
.nav-toggle:hover { background: var(--paper-warm); }
.nav-toggle span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--ink);
  border-radius: 2px;
}

@media (max-width: 800px) {
  .nav-links a:not(.nav-cta) { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* Mobile menu drawer — full-screen takeover with all nav links.
   Uses the same open/close pattern as the waitlist modal. */
.nav-drawer {
  position: fixed;
  inset: 0;
  background: var(--ink);
  color: var(--paper);
  z-index: 200;
  display: none;
  overflow-y: auto;
}
.nav-drawer.open { display: block; }
.nav-drawer-inner {
  padding: 32px;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.nav-drawer-close {
  align-self: flex-end;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--paper);
  background: transparent;
  color: var(--paper);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  font-family: var(--font-display);
}
.nav-drawer-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pop-acid);
  margin-top: 24px;
  margin-bottom: 32px;
}
.nav-drawer-links {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  /* Reset the bare `nav { ... }` rule from the top nav, which would
     otherwise paint the drawer's link container cream and hide the
     paper-coloured anchor text against its own background. */
  background: transparent;
  padding: 0;
  border-bottom: none;
  position: static;
}
.nav-drawer-links a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 36px;
  letter-spacing: -0.025em;
  color: var(--paper);
  text-decoration: none;
  padding: 18px 0;
  border-bottom: 1px solid rgba(244, 241, 234, 0.18);
  line-height: 1;
}
.nav-drawer-links a:last-child { border-bottom: none; }
.nav-drawer-links a.nav-intelligence { color: var(--pop-coral); }
.nav-drawer-links a.nav-intelligence em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.15em;
  letter-spacing: 0;
  vertical-align: -0.05em;
}
.nav-drawer-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--pop-acid);
  color: var(--ink);
  border: 1.5px solid var(--ink);
  padding: 18px 24px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 17px;
  text-decoration: none;
  margin-top: 32px;
}
.nav-drawer-cta::after {
  /* ↗ + Variation Selector-15 (\FE0E) forces text presentation on iOS
     and Android, where the bare U+2197 codepoint defaults to a
     colour-emoji glyph. */
  content: '\2197\FE0E';
  font-family: var(--font-mono);
  font-size: 18px;
}

/* ---------- 10. Footer ------------------------------------- */
footer {
  background: var(--paper);
  padding: 80px 0 32px;
  color: var(--ink-soft);
}
.footer-mega {
  display: inline-block;        /* shrink to content width so it stays left-aligned */
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin-bottom: 32px;
  white-space: nowrap;
}
.footer-mega .serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--pop-coral);
  margin-left: 0.06em;          /* breathe away from the "a" */
  padding-right: 0.04em;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
  padding-top: 40px;
  border-top: 1px solid var(--ink);
}
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-tag {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  color: var(--ink);
  margin: 8px 0;
}
.footer-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.footer-col-head {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 16px;
}
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-links a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
}
.footer-links a:hover { color: var(--pop-coral); }
.footer-bottom {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--ink);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.footer-bottom-ar {
  font-family: inherit;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.65;
  margin-left: 4px;
  display: inline-block;
}

@media (max-width: 700px) {
  footer { padding: 56px 0 24px; }
  .footer-mega { font-size: clamp(36px, 11vw, 56px); margin-bottom: 20px; }
  .footer-grid { gap: 24px; padding-top: 24px; }
  .footer-bottom { margin-top: 32px; flex-direction: column; align-items: flex-start; }
}

/* ---------- 11. Modal (waitlist + reviews) ----------------
   Hidden by default. JS toggles `.open`. Used by Tally embeds.
   See /docs/05-integrations.md.
   ----------------------------------------------------------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 15, 15, 0.7);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal-backdrop.open { display: flex; }
.modal {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: 40px;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}
.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
}
.modal h2 { font-size: 36px; margin-bottom: 12px; }
.modal-sub { font-size: 16px; color: var(--ink-soft); margin-bottom: 24px; }

/* ============================================================
   LANDING PAGE STYLES
   Used by /index.html only, but we keep them here so all shared
   sections live in one stylesheet. Page-specific (menu, checkout)
   sit in their own files.
   ============================================================ */

/* ---------- 12. Hero --------------------------------------- */
.hero {
  padding: 80px 0 100px;
  position: relative;
  border-bottom: 1px solid var(--ink);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr auto;  /* H1 left (fluid), meta right (auto) */
  gap: 24px 64px;
  align-items: start;
  margin-bottom: 32px;
}
@media (max-width: 800px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-meta { display: none; }
}

.hero-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-top: 12px;
  text-align: right;
  min-width: 140px;
}
.hero-meta strong {
  color: var(--ink);
  font-weight: 500;
}
.hero-meta-divider {
  width: 28px;
  height: 1px;
  background: var(--ink);
  margin: 14px 0 14px auto;  /* divider sits at the right edge of the column */
}

.hero-bottom {
  display: grid;
  grid-template-columns: 1.2fr 1fr;  /* sub left, ctas right */
  gap: 24px 80px;
  align-items: start;                /* body copy + ctas top-aligned */
  margin-top: 32px;
}
@media (max-width: 900px) {
  .hero-bottom { grid-template-columns: 1fr; gap: 40px; }
}

/* Hero CTA hover pop: acid → coral → lilac, top to bottom.
   Defaults stay standard; only the hover state lights up.
   Scoped to .hero-ctas so other pages keep their hover behaviour. */
.hero-ctas .btn-primary:hover {
  background: var(--pop-acid);
  color: var(--ink);
  border-color: var(--ink);
}
.hero-ctas .btn-secondary:hover {
  background: var(--pop-coral);
  color: var(--ink);
  border-color: var(--ink);
}
.hero-ctas .btn-waitlist:hover {
  background: var(--pop-lilac);
  color: var(--ink);
  border-color: var(--ink);
}

.hero-sub {
  font-size: 22px;
  line-height: 1.4;
  font-weight: 400;
  max-width: 580px;
  color: var(--ink);
}
.hero-sub p { margin-bottom: 12px; }
.hero-sub p:last-child { margin-bottom: 0; }

.hero-ctas {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}

/* Secondary row under the main CTAs — for the demoted On-Call link.
   Sits as plain text, not a button, so the visual hierarchy reads
   intelligence-first per the level-up brief. */
.hero-ctas-secondary {
  margin-top: 12px;
}
.hero-text-link {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.hero-text-link:hover {
  color: var(--ink);
  border-bottom-color: var(--pop-coral);
}

/* Credentials line — pipe-separated brand names treated as typeset
   prose. Names sit at heading weight, italic-coral accents punctuate
   the rhythm, and the "·" separators are muted so the names sit
   forward and the dots recede.

   Each name is wrapped in its own <span class="cred-name"> so we
   can use white-space:nowrap to keep multi-word names ("Hugo Boss",
   "Post Office", "Fortnum & Mason") on a single line. Separators
   are wrapped too so we can mute them with a less heavy weight.
   The literal spaces between spans are the wrap opportunities. */
.credentials-line {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 3vw, 34px);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 1080px;
  margin: 0;
  word-spacing: 0.04em;
}
.credentials-line .cred-name {
  white-space: nowrap;
}
.credentials-line .cred-sep {
  color: rgba(15, 15, 15, 0.28);
  font-weight: 400;
  margin: 0 0.15em;
}
.credentials-line .cred-accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--pop-coral);
  letter-spacing: 0;
}
.credentials-caption {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 32px;
}

/* Nav Live pill — small acid pill with a coral dot, sits next to the
   Intelligence link to signal the suite is live. Mirrors the
   AvailabilityBar treatment inside the Intelligence app. */
.nav-live {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding: 2px 7px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--pop-acid);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  vertical-align: 2px;
}
.nav-live::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--pop-coral);
}

/* ---------- 13. Section structure -------------------------- */
.section {
  padding: 100px 0;
  border-bottom: 1px solid var(--ink);
}

.section-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 32px;
  align-items: end;
  padding-bottom: 32px;
  margin-bottom: 56px;
  border-bottom: 1px solid var(--ink);
}
@media (max-width: 800px) {
  .section-head { grid-template-columns: 1fr; align-items: start; }
}
.section-head .number {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  padding-bottom: 12px;
}
.section-head .meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: right;
  padding-bottom: 12px;
}
@media (max-width: 800px) {
  .section-head .meta { text-align: left; }
}

/* ---------- 14. The Sponge ---------------------------------
   Brief: Strategy/sponge-framework-deployment.md. Three audience
   states (Absorbing / Saturated / Overflowing) with a route in for
   each. Visual gets heavier as the sponge gets fuller — paper-light
   → paper-warm → ink — so the gradient itself reads as a metaphor. */
/* First sentence sits in the regular display face at body weight so
   it reads as plain context. The second half — Founda's promise —
   lifts in serif italic terracotta so the eye lands on it. */
.sponge-sub {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 760px;
  margin: 0 0 56px;
}
.sponge-sub em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--pop-coral);
  font-size: 1.06em;
}

.sponge-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
}
@media (max-width: 1000px) { .sponge-cards { grid-template-columns: 1fr 1fr; gap: 20px; } }
@media (max-width: 700px)  { .sponge-cards { grid-template-columns: 1fr; gap: 16px; } }

.sponge-card {
  padding: 40px 32px 36px;
  border: 1px solid var(--ink);
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  min-height: 420px;
  transition: transform 0.3s ease;
}
.sponge-card:hover { transform: translateY(-4px); }

/* Gradient: lightest → mid → ink. The metaphor is that the visual
   gets heavier as the sponge fills up. */
.sponge-card-1 { background: var(--paper-light); }
.sponge-card-2 { background: var(--paper-warm); }
.sponge-card-3 { background: var(--ink); color: var(--paper); }

.sponge-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 24px;
}
.sponge-card-3 .sponge-eyebrow { color: rgba(244, 241, 234, 0.6); }

.sponge-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(32px, 3.6vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-bottom: 20px;
}
.sponge-title .serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--pop-coral);
}

.sponge-body {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 32px;
  flex: 1;
}
.sponge-card-3 .sponge-body { color: rgba(244, 241, 234, 0.85); }

.sponge-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: 100px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  background: var(--ink);
  color: var(--paper);
  border: 1.5px solid var(--ink);
  transition: all 0.2s ease;
  align-self: flex-start;
}
.sponge-cta:hover { background: var(--paper); color: var(--ink); }
.sponge-card-3 .sponge-cta {
  background: var(--pop-acid);
  color: var(--ink);
  border-color: var(--ink);
}
.sponge-card-3 .sponge-cta:hover { background: var(--paper); }

@media (max-width: 700px) {
  .sponge-sub { margin-bottom: 32px; font-size: 18px; }
  .sponge-card { padding: 32px 24px 28px; min-height: 0; }
  .sponge-title { font-size: 32px; }
}

/* ---------- 14b. Three doors (legacy, kept for /menu /on-call) ---- */
.doors {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
}
@media (max-width: 1000px) { .doors { grid-template-columns: 1fr 1fr; gap: 20px; } }
@media (max-width: 700px) { .doors { grid-template-columns: 1fr; gap: 16px; } }

.door {
  padding: 48px 40px;
  border: 1px solid var(--ink);
  border-radius: 28px;
  transition: transform 0.3s ease;
  position: relative;
  min-height: 480px;
  display: flex;
  flex-direction: column;
}
.door:hover { transform: translateY(-6px); }

.door-1 { background: var(--paper-light); border: 1.5px solid var(--ink); }
.door-2 { background: var(--pop-acid); }
.door-3 { background: var(--ink); color: var(--paper); }

/* Intelligence wordmark inside Door 1 — coral italic to match the
   brand mark used everywhere intelligence is referenced. */
.door-intel {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--pop-coral);
}

.door-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ink);
  color: var(--paper);
  padding: 6px 14px;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 32px;
  align-self: flex-start;
}
.door-tag::before {
  content: '●';
  color: var(--pop-coral);
  font-size: 8px;
}
.door-3 .door-tag {
  background: var(--paper);
  color: var(--ink);
}
.door-3 .door-tag::before { color: var(--pop-coral); }

.door-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
  opacity: 0.6;
}

.door-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 64px;
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin-bottom: 24px;
}
.door-title .serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.door-body {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 32px;
  flex: 1;
}
.door-price-row {
  display: flex;
  justify-content: space-between;
  align-items: end;
  padding-top: 24px;
  border-top: 1px solid currentColor;
  gap: 16px;
  flex-wrap: wrap;
}
.door-price {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}
.door-price .serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}
.door-price .small {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  display: block;
  margin-top: 4px;
  opacity: 0.7;
  letter-spacing: 0.05em;
}
.door-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 100px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.2s;
  background: var(--ink);
  color: var(--paper);
}
.door-cta:hover { background: var(--paper); color: var(--ink); }
/* Door 3 sits on the dark ink card so its CTA inverts to acid. */
.door-3 .door-cta { background: var(--pop-acid); color: var(--ink); }
.door-3 .door-cta:hover { background: var(--paper); }

/* ---------- 15. Menu shelf --------------------------------- */
.shelf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--ink);
  border: 1px solid var(--ink);
}
@media (max-width: 900px) { .shelf-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .shelf-grid { grid-template-columns: 1fr; } }

.shelf-item {
  background: var(--paper-light);
  padding: 36px 32px 32px;
  transition: background 0.3s;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.shelf-item:hover { background: var(--paper-warm); }
.shelf-item:nth-child(1):hover { background: var(--pastel-cream); }
.shelf-item:nth-child(2):hover { background: var(--pop-acid); }
.shelf-item:nth-child(3):hover { background: var(--pastel-mist); }
.shelf-item:nth-child(4):hover { background: var(--pop-coral); color: var(--paper); }
.shelf-item:nth-child(5):hover { background: var(--pastel-sky); }
.shelf-item:nth-child(6):hover { background: var(--pop-lilac); }

.shelf-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  margin-bottom: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.shelf-item:hover .shelf-num { color: inherit; opacity: 0.7; }
.shelf-num .arrow-mini {
  width: 28px;
  height: 28px;
  border: 1px solid currentColor;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  font-size: 12px;
}
.shelf-item:hover .arrow-mini {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.shelf-item:nth-child(4):hover .arrow-mini {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.shelf-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 38px;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 12px;
}
.shelf-title .serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}
.shelf-desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 32px;
  flex: 1;
}
.shelf-item:hover .shelf-desc { color: inherit; opacity: 0.85; }
.shelf-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-top: 16px;
  border-top: 1px solid currentColor;
  opacity: 1;
}
.shelf-foot .price {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  text-transform: none;
  letter-spacing: -0.01em;
}

/* ---------- 16. How it works ------------------------------- */
.how-intro-grid {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  gap: 32px 64px;
  margin-bottom: 56px;
  align-items: start;  /* body copy aligns with the top of the black promise card */
}
@media (max-width: 800px) {
  .how-intro-grid { grid-template-columns: 1fr; gap: 32px; }
  .how-intro-spacer { display: none; }
}

.how-promise {
  background: var(--ink);
  color: var(--paper);
  padding: 32px;
  border-radius: 24px;
  border: 1px solid var(--ink);
}
.how-promise-head {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 16px;
  color: var(--pop-acid);
}
.how-promise-list { list-style: none; }
.how-promise-list li {
  padding: 12px 0;
  font-size: 16px;
  font-weight: 500;
  border-bottom: 1px solid rgba(244, 241, 234, 0.18);
  display: flex;
  gap: 12px;
  align-items: baseline;
  color: var(--paper);
}
.how-promise-list li:last-child { border-bottom: none; }
.how-promise-list li::before {
  content: '✦';
  color: var(--pop-acid);
  flex-shrink: 0;
  font-size: 14px;
}
.how-promise-list .serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.1em;
  color: var(--pop-acid);
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 24px;
  overflow: hidden;
}
@media (max-width: 800px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .steps { grid-template-columns: 1fr; } }

.step {
  background: var(--paper-light);
  padding: 36px 28px 32px;
  transition: background 0.3s;
}
.step:hover { background: var(--pastel-cream); }
.step-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 80px;
  line-height: 0.9;
  margin-bottom: 24px;
  letter-spacing: -0.06em;
  color: var(--ink);
}
.step:hover .step-num { color: var(--pop-coral); }
.step-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.step-title .serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}
.step-desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* ---------- 17. Portfolio ---------------------------------- */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) { .portfolio-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .portfolio-grid { grid-template-columns: 1fr; } }

.case {
  background: var(--paper-light);
  border: 1px solid var(--ink);
  border-radius: 24px;
  overflow: hidden;
  transition: transform 0.3s ease;
  cursor: pointer;
}
.case:hover { transform: translateY(-4px); }

.case-image {
  aspect-ratio: 4/3;
  background: var(--pop-acid);
  border-bottom: 1px solid var(--ink);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.case:nth-child(2) .case-image { background: var(--pastel-cream); }
.case:nth-child(3) .case-image { background: var(--pop-coral); }
.case:nth-child(4) .case-image { background: var(--pastel-sky); }
.case:nth-child(5) .case-image { background: var(--pop-lilac); }
.case:nth-child(6) .case-image { background: var(--ink); }

.case-image-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(48px, 6vw, 80px);
  font-weight: 400;
  line-height: 0.95;
  text-align: center;
  color: var(--ink);
  padding: 24px;
  letter-spacing: -0.03em;
}
.case:nth-child(3) .case-image-text { color: var(--paper); }
.case:nth-child(6) .case-image-text { color: var(--pop-acid); }

/* ============================================================
   Branded logo lockups for case images
   ----------------------------------------------------------
   Each .case-logo sits where .case-image-text sits, but
   carries a brand-coloured panel + SVG logo lockup. To swap
   in a real logo file later, replace the inner SVG/img with
   <img src="assets/logos/[brand].svg" alt="[Brand]">.
   ============================================================ */
.case-logo {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.case-logo svg,
.case-logo img {
  max-width: 78%;
  max-height: 70%;
  height: auto;
  display: block;
}

/* Override .case-image background per brand. The existing nth-child
   colours fight against per-brand colours, so we use class-targeted
   backgrounds for cards that have explicit brand colour. */
.case-image.brand-amg     { background: #000000; border-bottom-color: #000000; }
.case-image.brand-dunelm  { background: #0DB14B; border-bottom-color: var(--ink); }
.case-image.brand-samsung { background: #1428A0; border-bottom-color: var(--ink); }
.case-image.brand-royal   { background: #1B2D54; border-bottom-color: var(--ink); }
.case-image.brand-rexona  { background: #003B7A; border-bottom-color: var(--ink); }
.case-image.brand-emirates { background: #D71921; border-bottom-color: var(--ink); }

/* ============================================================
   Brand wall — homepage replacement for the /work portfolio.
   8 brand tiles, 4 columns × 2 rows, each tile branded.
   ============================================================ */
/* Brand wall — one large white box on the cream page, with every logo
   sitting inside the same border. No per-tile boxes; the wall itself
   is the only frame. Logos that ship with their own coloured
   backgrounds (Emirates red, Unilever blue, Coca-Cola disc, Fortnum
   teal) appear as coloured labels inside the single white container. */
.brand-wall {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #FFFFFF;
  border: 1px solid var(--ink);
  border-radius: 16px;
  overflow: hidden;
}
@media (max-width: 900px) { .brand-wall { grid-template-columns: 1fr 1fr; } }

.brand-tile {
  aspect-ratio: 4 / 3;
  padding: 24px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: transparent;
}
.brand-tile-logo {
  width: 70%;
  max-width: 180px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  transition: transform 0.2s ease;
}
.brand-tile:hover .brand-tile-logo { transform: scale(1.03); }
.brand-tile-logo svg {
  width: 100%;
  height: auto;
  max-height: 90px;
}
.brand-tile-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.brand-tile-caption {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-soft);
}

/* Mobile: keep two columns even on small phones (single column would
   stack 8 tiles into 8 screen-heights of scroll). Logo sized so the
   1:1 logo box plus margin plus caption fit inside the tile's content
   area without the logo overlapping the caption — earlier 78% pushed
   the logo box height past what the tile could contain. */
@media (max-width: 600px) {
  .brand-tile { padding: 16px 10px 14px; }
  .brand-tile-logo {
    width: 60%;
    max-width: none;
    margin-bottom: 10px;
  }
  .brand-tile-logo svg { max-height: 80px; }
}

/* On dark brand panels the .case-image-overlay pill needs more contrast */
.case-image.brand-amg .case-image-overlay,
.case-image.brand-samsung .case-image-overlay,
.case-image.brand-royal .case-image-overlay,
.case-image.brand-rexona .case-image-overlay,
.case-image.brand-emirates .case-image-overlay {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.case-image.brand-dunelm .case-image-overlay {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--ink);
}

.case-image-overlay {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--paper);
  color: var(--ink);
  padding: 6px 12px;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
}

.case-content { padding: 24px 24px 28px; }
.case-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.case-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.case-title .serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}
.case-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin-bottom: 16px;
}
.case-result {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--pop-acid);
  color: var(--ink);
  padding: 5px 12px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.portfolio-cta-row {
  margin-top: 48px;
  text-align: center;
}
.portfolio-cta-row a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  border-bottom: 2px solid var(--pop-coral);
  padding-bottom: 4px;
}
.portfolio-cta-row .serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.1em;
}

/* ---------- 18. Reviews ------------------------------------ */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 24px;
  overflow: hidden;
}
@media (max-width: 900px) { .reviews-grid { grid-template-columns: 1fr; } }

.review {
  background: var(--paper-light);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: background 0.3s;
}
.review:nth-child(2) { background: var(--pastel-cream); }
.review:nth-child(3) { background: var(--pastel-mist); }

.review-stars {
  display: flex;
  gap: 4px;
  color: var(--pop-coral);
  font-size: 18px;
  letter-spacing: 0.1em;
}
.review-quote {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.45;
  font-weight: 500;
  flex: 1;
}
.review-quote .serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.1em;
}
.review-attribution {
  border-top: 1px solid var(--ink);
  padding-top: 20px;
}
.review-name { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.review-role {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.review-bought { margin-top: 12px; font-size: 12px; color: var(--ink-soft); }
.review-bought strong { color: var(--ink); font-weight: 500; }

.logo-strip {
  margin-top: 56px;
  padding: 32px;
  border: 1px solid var(--ink);
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 5vw, 64px);
  flex-wrap: wrap;
  background: var(--paper);
}
.logo-strip-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.logo-mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(16px, 2vw, 22px);
  letter-spacing: -0.02em;
  opacity: 0.7;
}
.logo-mark .serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

/* ---------- 19. Credibility (black section) ---------------- */
.cred-section {
  background: var(--ink);
  color: var(--paper);
  margin: 0 -32px;
  padding: 100px 32px;
  border-bottom: 1px solid var(--ink);
}
.cred-section .section-head { border-bottom-color: var(--paper); }
.cred-section .section-head .number,
.cred-section .section-head .meta { color: rgba(244, 241, 234, 0.6); }
/* All highlights in the credibility section render in coral */
.cred-section h2 .hl::before { background: var(--pop-coral); }
.cred-section h2 .hl-coral::before { background: var(--pop-coral); }
.cred-section h2 .hl-under::before { background: var(--pop-coral); }
.cred-section .stat-number .accent::after { background: var(--pop-coral); }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--paper);
  border-bottom: 1px solid var(--paper);
  margin-bottom: 40px;
}
@media (max-width: 800px) { .stats-grid { grid-template-columns: 1fr 1fr; } }

.stat {
  padding: 32px 24px;
  border-right: 1px solid var(--paper);
  text-align: left;
}
.stat:last-child { border-right: none; }
@media (max-width: 800px) {
  .stat:nth-child(2n) { border-right: none; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--paper); }
}

.stat-number {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(48px, 6vw, 80px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin-bottom: 12px;
}
.stat-number .accent {
  color: var(--paper);
  position: relative;
  display: inline-block;
  z-index: 1;
}
.stat-number .accent::after {
  content: '';
  position: absolute;
  left: -0.04em;
  right: -0.04em;
  bottom: 0.06em;
  height: 0.18em;
  background: var(--pop-acid);
  z-index: -1;
  border-radius: 999px;
}
.stat-number .serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--pop-coral);
}
.stat-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, 0.7);
}

.cred-quote {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.35;
  max-width: 1100px;
  letter-spacing: -0.02em;
}
.cred-quote .serif {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--pop-acid);
  font-weight: 400;
}

/* ---------- 20. Final CTA (acid yellow) -------------------- */
.final {
  background: var(--pop-acid);
  text-align: center;
  border-bottom: 1px solid var(--ink);
}
.final h2 { margin: 0 auto 32px; max-width: 1000px; }
.final-sub {
  font-size: 21px;
  margin-bottom: 48px;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}
.final-ctas {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.final .btn-primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.final .btn-primary:hover { background: var(--paper); color: var(--ink); }
.final .btn-secondary {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--ink);
}
.final .btn-waitlist {
  background: var(--paper-warm);
  color: var(--ink);
  border-color: var(--ink);
}

/* ---------- 21. Mobile overrides for landing sections ------ */
@media (max-width: 700px) {
  .section { padding: 64px 0; }
  .hero { padding: 72px 0 64px; }
  .page-hero { padding: 56px 0 36px; }
  .section-head { gap: 16px; padding-bottom: 20px; margin-bottom: 32px; }
  .section-head .meta { display: none; }
  .lede { font-size: 16px; margin-bottom: 32px; }
  h2 { font-size: clamp(36px, 9vw, 56px); }

  .hero-bottom { gap: 32px; }
  .hero-sub { font-size: 18px; }
  .hero-ctas { flex-direction: row; flex-wrap: wrap; }
  .hero-ctas .btn {
    flex: 1 1 auto;
    min-width: 140px;
    padding: 14px 18px;
    font-size: 13px;
    justify-content: center;
  }

  .door { padding: 32px 24px; min-height: auto; }
  .door-title { font-size: 44px; }
  .door-tag { margin-bottom: 20px; }
  .door-num { margin-bottom: 12px; }
  .door-body { font-size: 15px; margin-bottom: 24px; }
  .door-price { font-size: 28px; }
  .door-price-row { flex-direction: column; align-items: flex-start; gap: 16px; }

  .shelf-item { padding: 28px 24px; }
  .shelf-title { font-size: 32px; }

  .how-intro-grid { gap: 24px; }
  .how-promise { padding: 24px; }
  .step { padding: 28px 22px 24px; }
  .step-num { font-size: 56px; margin-bottom: 16px; }

  .case-content { padding: 20px 20px 24px; }
  .case-title { font-size: 20px; }

  .review { padding: 28px 24px; }
  .review-quote { font-size: 17px; }

  .logo-strip { padding: 24px; gap: 16px; border-radius: 32px; margin-top: 32px; }

  .cred-section { padding: 64px 32px; }
  .stats-grid { display: grid; grid-template-columns: 1fr 1fr; }
  .stat { padding: 24px 16px; }

  .final h2 { margin-bottom: 24px; }
  .final-sub { font-size: 17px; margin-bottom: 32px; }
  .final-ctas { flex-direction: column; align-items: stretch; }
  .final-ctas .btn { justify-content: center; }

  .pepper { font-size: 17px; margin-bottom: 16px; }
}

/* ============================================================
   INTERIOR PAGE SHARED STYLES
   Used by menu, on-call, how-it-works, work, reviews, faq.
   ============================================================ */

/* ---------- Page hero (interior pages) --------------------
   Markup order: H1 column first, then .page-hero-meta.
   Grid is 1fr auto so content takes all but the meta column,
   which sits hard right and right-aligns to match the landing. */
.page-hero {
  padding: 60px 0 48px;
  border-bottom: 1px solid var(--ink);
}
.page-hero-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px 64px;
  align-items: start;
}
.page-hero-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-top: 12px;
  text-align: right;
  min-width: 140px;
}
.page-hero-meta strong { color: var(--ink); font-weight: 500; }
.page-hero-divider {
  width: 28px;
  height: 1px;
  background: var(--ink);
  margin: 14px 0 14px auto;  /* divider sits at the right edge */
}
@media (max-width: 800px) {
  .page-hero-grid { grid-template-columns: 1fr; }
  .page-hero-meta { display: none; }
}
.page-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 24px;
}
.page-sub {
  font-size: 19px;
  line-height: 1.5;
  max-width: 680px;
  margin-top: 32px;
}

/* ============================================================
   ON-CALL PAGE
   ============================================================ */

.oncall-hero {
  background: var(--ink);
  color: var(--paper);
  border-bottom: 1px solid var(--ink);
  padding: 80px 0;
}
.oncall-hero .page-eyebrow { color: rgba(244, 241, 234, 0.6); }
.oncall-hero h1 .serif { color: var(--paper); }
.oncall-hero h1 .hl-under::before { background: var(--pop-acid); }
.oncall-hero .page-sub { color: rgba(244, 241, 234, 0.85); }
.oncall-hero .page-hero-meta { color: rgba(244, 241, 234, 0.6); }
.oncall-hero .page-hero-meta strong { color: var(--paper); }
.oncall-hero .page-hero-divider { background: rgba(244, 241, 234, 0.4); }

.oncall-hero-cta-row {
  display: flex;
  gap: 12px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.oncall-hero-cta-row .btn { border-color: var(--paper); }
.oncall-hero-cta-row .btn-primary {
  background: var(--pop-acid);
  color: var(--ink);
  border-color: var(--ink);
}
.oncall-hero-cta-row .btn-secondary {
  background: transparent;
  color: var(--paper);
  border-color: var(--paper);
}
.oncall-hero-cta-row .btn-secondary:hover {
  background: var(--paper);
  color: var(--ink);
}

.price-block {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 24px 32px;
  background: var(--pop-acid);
  color: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  margin-top: 32px;
}
.price-block .amount {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 36px;
  letter-spacing: -0.04em;
}
.price-block .meta {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.05em;
}

.included-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 24px;
  overflow: hidden;
}
@media (max-width: 700px) {
  .included-grid { grid-template-columns: 1fr; }
}
.included-item {
  background: var(--paper-light);
  padding: 32px 28px;
  transition: background 0.3s;
}
.included-item:nth-child(odd):hover { background: var(--pastel-cream); }
.included-item:nth-child(even):hover { background: var(--pastel-mist); }
.included-icon {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 48px;
  line-height: 1;
  color: var(--pop-coral);
  margin-bottom: 16px;
}
.included-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.included-title .serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}
.included-desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.compare-table {
  background: var(--paper-light);
  border: 1px solid var(--ink);
  border-radius: 24px;
  overflow: hidden;
}
.compare-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 24px;
  padding: 20px 32px;
  align-items: center;
  border-bottom: 1px solid var(--ink-line);
}
.compare-row:last-child { border-bottom: none; }
.compare-row.head {
  background: var(--ink);
  color: var(--paper);
  border-bottom: none;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.compare-row .scenario { font-size: 15px; font-weight: 500; }
.compare-row .price {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}
.compare-row.win { background: var(--pop-acid); }
.compare-row.win .price.oncall {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
}
@media (max-width: 600px) {
  .compare-row { grid-template-columns: 1fr; gap: 8px; padding: 16px 20px; }
  .compare-row.head { display: none; }
}

.capacity-card {
  background: var(--ink);
  color: var(--paper);
  padding: 48px 40px;
  border-radius: 24px;
  text-align: center;
}
.capacity-card .pepper { color: rgba(244, 241, 234, 0.7); }
.capacity-card .pepper strong { color: var(--paper); }
.capacity-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(80px, 12vw, 160px);
  line-height: 0.9;
  letter-spacing: -0.06em;
  margin-bottom: 16px;
  color: var(--pop-acid);
}
.capacity-label {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.faq-mini {
  display: grid;
  gap: 24px;
}
.faq-mini-item {
  padding: 24px 32px;
  background: var(--paper-light);
  border: 1px solid var(--ink);
  border-radius: 16px;
}
.faq-mini-q {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  margin-bottom: 8px;
}
.faq-mini-a {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.final-cta {
  background: var(--pop-acid);
  padding: 100px 0;
  text-align: center;
  border-bottom: 1px solid var(--ink);
}
.final-cta h2 { margin-bottom: 24px; }
.final-cta-sub {
  font-size: 19px;
  max-width: 560px;
  margin: 0 auto 32px;
}
.final-cta-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.final-cta-row .btn-primary {
  background: var(--ink);
  color: var(--paper);
}

/* ============================================================
   THEME: CORAL (On-Call page only)
   Replaces acid with coral throughout the body. Footer untouched.
   Activated by: <body class="theme-coral">
   ============================================================ */

body.theme-coral main > section:not(footer) .hl-under::before { background: var(--pop-coral); }
body.theme-coral main > section:not(footer) .hl::before { background: var(--pop-coral); }
body.theme-coral .marquee-item .serif { color: var(--pop-coral); }
body.theme-coral .marquee-item::after { color: var(--pop-coral); }

body.theme-coral .oncall-hero h1 .hl-under::before { background: var(--pop-coral); }
body.theme-coral .price-block { background: var(--pop-coral); }
body.theme-coral .oncall-hero-cta-row .btn-primary { background: var(--pop-coral); }
body.theme-coral .oncall-hero-cta-row .btn-primary:hover { background: var(--paper); }
body.theme-coral .included-icon { color: var(--pop-coral); }
body.theme-coral .oncall-hero .page-eyebrow { color: rgba(255, 122, 85, 0.85); }
body.theme-coral .capacity-num { color: var(--pop-coral); }
body.theme-coral .compare-row.win { background: var(--pop-coral); color: var(--ink); }
body.theme-coral .compare-row.win .price.oncall { color: var(--ink); }
body.theme-coral .final-cta { background: var(--pop-coral); }
body.theme-coral .final-cta .btn-primary { background: var(--ink); color: var(--paper); }
body.theme-coral .final-cta .btn-primary:hover { background: var(--paper); color: var(--ink); }

/* ============================================================
   FAQ PAGE
   ============================================================ */
.faq-group { margin-bottom: 64px; }
.faq-group-head {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ink);
}
.faq-item {
  background: var(--paper-light);
  border: 1px solid var(--ink);
  border-radius: 16px;
  margin-bottom: 12px;
  overflow: hidden;
}
.faq-q {
  padding: 20px 28px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  user-select: none;
  transition: background 0.15s;
}
.faq-q:hover { background: var(--paper-warm); }
.faq-q-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
}
.faq-q-icon {
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  transition: transform 0.2s, background 0.2s;
}
.faq-item.open .faq-q-icon {
  transform: rotate(45deg);
  background: var(--pop-acid);
}
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0 28px;
}
.faq-item.open .faq-a {
  max-height: 800px;
  padding: 0 28px 24px;
}
.faq-a p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.faq-a p + p { margin-top: 12px; }

/* ============================================================
   WORK / PORTFOLIO PAGE
   ============================================================ */
.filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 48px;
  padding: 16px 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  align-items: center;
}
.filter-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-right: 16px;
}
.filter-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--ink);
  background: var(--paper-light);
  color: var(--ink);
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
}
.filter-pill:hover { background: var(--paper-warm); }
.filter-pill.active { background: var(--ink); color: var(--paper); }

/* ============================================================
   REVIEWS PAGE
   ============================================================ */
.review-stat-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  margin-bottom: 64px;
}
@media (max-width: 800px) { .review-stat-band { grid-template-columns: 1fr 1fr; } }
.review-stat {
  padding: 32px 24px;
  border-right: 1px solid var(--ink);
}
.review-stat:last-child { border-right: none; }
@media (max-width: 800px) {
  .review-stat:nth-child(2n) { border-right: none; }
  .review-stat:nth-child(-n+2) { border-bottom: 1px solid var(--ink); }
}
.review-stat-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(48px, 5vw, 64px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin-bottom: 8px;
}
.review-stat-num .accent {
  position: relative;
  display: inline-block;
  z-index: 1;
}
.review-stat-num .accent::after {
  content: '';
  position: absolute;
  left: -0.04em;
  right: -0.04em;
  bottom: 0.06em;
  height: 0.18em;
  background: var(--pop-acid);
  z-index: -1;
  border-radius: 999px;
}
.review-stat-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.reviews-page-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 800px) { .reviews-page-grid { grid-template-columns: 1fr; } }

/* ============================================================
   HOW IT WORKS PAGE
   ============================================================ */
.deep-steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 24px;
  overflow: hidden;
}
@media (max-width: 700px) { .deep-steps { grid-template-columns: 1fr; } }
.deep-step {
  background: var(--paper-light);
  padding: 48px 40px;
  transition: background 0.3s;
}
.deep-step:nth-child(1):hover { background: var(--pastel-cream); }
.deep-step:nth-child(2):hover { background: var(--pop-acid); }
.deep-step:nth-child(3):hover { background: var(--pastel-mist); }
.deep-step:nth-child(4):hover { background: var(--pastel-sky); }
.deep-step-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 96px;
  line-height: 0.9;
  letter-spacing: -0.06em;
  color: var(--ink);
  margin-bottom: 24px;
}
.deep-step-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: 12px;
}
.deep-step-title .serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}
.deep-step-body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.deep-step-body p + p { margin-top: 12px; }

.feature-block {
  padding: 48px;
  border: 1px solid var(--ink);
  border-radius: 24px;
}
.feature-block.dark {
  background: var(--ink);
  color: var(--paper);
}
.feature-block.dark .pepper { color: rgba(244, 241, 234, 0.65); }
.feature-block.dark .pepper strong { color: var(--paper); }
.feature-block + .feature-block { margin-top: 24px; }
.feature-block h3 { margin-bottom: 16px; }
.feature-block p {
  font-size: 16px;
  line-height: 1.6;
}
.feature-block p + p { margin-top: 12px; }
.feature-block.dark p { color: rgba(244, 241, 234, 0.85); }
.feature-block ul {
  list-style: none;
  margin-top: 16px;
}
.feature-block li {
  padding: 10px 0;
  font-size: 15px;
  border-bottom: 1px solid var(--ink-line);
  display: flex;
  gap: 12px;
}
.feature-block.dark li { border-color: rgba(244, 241, 234, 0.18); }
.feature-block li:last-child { border-bottom: none; }
.feature-block li::before {
  content: '✦';
  color: var(--pop-coral);
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .feature-block { padding: 32px 24px; }
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */

/* "A little bit about us" block — long-form copy slot */
.about-block {
  max-width: 780px;
  background: var(--paper-light);
  border: 1px solid var(--ink);
  border-radius: 24px;
  padding: 48px 56px;
}
@media (max-width: 600px) {
  .about-block { padding: 32px 24px; }
}
.about-paragraph {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 18px;
  color: var(--ink);
}
.about-paragraph:last-of-type { margin-bottom: 24px; }
.about-paragraph em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.1em;
  color: var(--ink-soft);
}
.about-signoff {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-top: 20px;
  border-top: 1px solid var(--ink-line);
  display: flex;
  gap: 12px;
  align-items: baseline;
}
.about-signoff .serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* Contact options grid (email card + form card) */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 800px) {
  .contact-grid { grid-template-columns: 1fr; }
}
.contact-card {
  background: var(--paper-light);
  border: 1px solid var(--ink);
  border-radius: 24px;
  padding: 40px;
  display: flex;
  flex-direction: column;
}
@media (max-width: 600px) {
  .contact-card { padding: 28px 24px; }
}
.contact-card-email {
  background: var(--pop-acid);
}
.contact-card-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 12px;
}
.contact-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
}
.contact-card-title .serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}
.contact-card-body {
  font-size: 16px;
  line-height: 1.55;
  margin-bottom: 24px;
  color: var(--ink);
}
.contact-card-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: auto;
}
.contact-email-link {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 4px;
  align-self: flex-start;
  margin-bottom: 16px;
  transition: opacity 0.15s;
}
.contact-email-link:hover { opacity: 0.7; }
@media (max-width: 600px) {
  .contact-email-link { font-size: 22px; }
}

/* Tally form placeholder */
.contact-form-placeholder {
  margin-top: 8px;
  padding: 32px 24px;
  border: 1px dashed var(--ink-line);
  border-radius: 12px;
  background: var(--paper);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-soft);
  letter-spacing: 0.05em;
}
.contact-form-placeholder p { margin: 0; }
.contact-form-placeholder p + p {
  margin-top: 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  opacity: 0.7;
}

/* Crisis Lane card — coral accent for urgency */
.crisis-card {
  background: var(--ink);
  color: var(--paper);
  border-radius: 24px;
  padding: 48px 56px;
  max-width: 920px;
}
@media (max-width: 600px) {
  .crisis-card { padding: 32px 24px; }
}
.crisis-card-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--pop-coral);
  margin-bottom: 16px;
}
.crisis-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
}
.crisis-card-title .serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--pop-coral);
}
.crisis-card-body {
  font-size: 17px;
  line-height: 1.6;
  margin-bottom: 16px;
  color: rgba(244, 241, 234, 0.85);
}
.crisis-card-body strong { color: var(--paper); font-weight: 600; }
.crisis-card-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, 0.55);
}

/* Whole-card link variant — when the card itself is an <a> (menu path) */
a.contact-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
a.contact-card:hover {
  transform: translateY(-3px);
}

/* Hiring note — small, side-bar feel rather than full section */
.hiring-card {
  background: var(--paper-warm);
  border: 1px solid var(--ink);
  border-radius: 24px;
  padding: 32px 40px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  max-width: 920px;
  margin-top: 32px;  /* space from the about-block sign-off above */
}
@media (max-width: 600px) {
  .hiring-card { padding: 24px; flex-direction: column; align-items: flex-start; gap: 16px; }
}
.hiring-card-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--pop-coral);
  flex-shrink: 0;
  font-weight: 600;
}
.hiring-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  margin: 0;
}
.hiring-card-title .serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}
.hiring-card-body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  flex: 1;
  min-width: 220px;
  margin: 0;
}