/*
 * main.css — boar'ed component & layout styles
 * Tokens live in tokens.css (imported first).
 * Design source of truth: DESIGN.md
 */

/* ═══════════════════════════════════════════════════════════════════════════
   BASE RESET
   ═══════════════════════════════════════════════════════════════════════════ */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 88px; /* compensates for sticky header height */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  min-width: 320px;
  overflow-x: hidden;
}

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

/* Remove default list styles for navigation */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOCUS — DESIGN.md §12
   ═══════════════════════════════════════════════════════════════════════════ */

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT PRIMITIVES
   ═══════════════════════════════════════════════════════════════════════════ */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Single section spacing class — keeps all padding on one selector (DESIGN.md §6) */
.section {
  padding-block: var(--section-y);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════════════════ */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.0;
  color: inherit;
}

.fs-display { font-size: var(--fs-display); }
.fs-h1      { font-size: var(--fs-h1); }
.fs-h2      { font-size: var(--fs-h2); }
.fs-h3      { font-size: var(--fs-h3); }
.fs-lead    { font-size: var(--fs-lead); line-height: 1.5; }

/* Eyebrow / label pill */
.eyebrow {
  display: inline-block;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy-900);
  background: var(--yellow-500);
  padding: 4px 14px;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
  /* Sticker tilt */
  transform: rotate(-1.5deg);
  transform-origin: left center;
}

/* Brand logo — SVG marks (square, transparent-bg) */
.brand-logo { display: inline-flex; text-decoration: none; }
.brand-logo img { display: block; width: auto; height: 36px; }
.site-header .brand-logo img        { height: 64px; }  /* square black SVG inside 88px header */
.nav-overlay-header .brand-logo img { height: 56px; }  /* square white SVG in overlay */
.footer-brand .brand-logo img       { height: 144px; } /* square white SVG in footer — 2× */

/* Squiggle emphasis (inline SVG underline) */
.squiggle {
  position: relative;
  display: inline;
}
.squiggle::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 100%;
  height: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 8' preserveAspectRatio='none'%3E%3Cpath d='M0 4 Q10 0 20 4 Q30 8 40 4 Q50 0 60 4' fill='none' stroke='%23FF6B5B' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x center / auto 100%;
}

/* Pull quote */
.pull-quote {
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--text);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DECORATIVE: blobs + sparkles (aria-hidden per DESIGN.md §12)
   ═══════════════════════════════════════════════════════════════════════════ */

.blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}

.sparkle {
  position: absolute;
  pointer-events: none;
  color: var(--yellow-500);
  font-size: 1.25rem;
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS — DESIGN.md §6
   ═══════════════════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: none;
  border-radius: var(--r-pill);
  padding: 14px 28px;
  min-height: 44px; /* a11y tap target */
  transition:
    background var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}

/* Primary: coral fill + navy label */
.btn-primary {
  background: var(--coral-500);
  color: var(--on-coral); /* navy — DESIGN.md §2.3 */
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
  background: var(--coral-600);
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
}
.btn-primary:active {
  background: var(--coral-700);
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

/* Secondary: transparent, navy border */
.btn-secondary {
  background: transparent;
  color: var(--navy-900);
  border: 2px solid var(--navy-900);
  box-shadow: none;
}
.btn-secondary:hover {
  background: var(--yellow-100);
}

/* Secondary on dark sections */
.section-navy .btn-secondary,
.section-footer .btn-secondary {
  color: var(--cream-50);
  border-color: var(--cream-50);
}
.section-navy .btn-secondary:hover {
  background: rgba(255,255,255,.1);
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DATA CHIPS — DESIGN.md §6
   ═══════════════════════════════════════════════════════════════════════════ */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-chip);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--navy-900);
  background: var(--cream-50);
  border: 1px solid var(--border);
  border-radius: var(--r-chip);
  padding: 4px 10px;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HEADER + HAMBURGER NAVIGATION — DESIGN.md §8
   ═══════════════════════════════════════════════════════════════════════════ */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--yellow-500);
  transition: box-shadow var(--dur) var(--ease-out);
}

.site-header.scrolled {
  box-shadow: var(--shadow-sm);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88px;
}

/* Focus ring on hamburger must be navy on yellow (yellow-500 focus-ring disappears) */
.site-header .hamburger:focus-visible {
  outline: 3px solid var(--navy-900);
  outline-offset: 3px;
}

/* Desktop top-bar nav — hidden on mobile, revealed at ≥768px */
.nav-desktop {
  display: none;
}

@media (min-width: 768px) {
  .nav-desktop {
    display: flex;
    align-items: center;
    gap: var(--space-4);  /* 16px — keeps full labels on one line at 768px */
  }

  .nav-desktop ul {
    display: flex;
    align-items: center;
    gap: var(--space-3);  /* 12px — snug but readable at tablet widths */
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .nav-desktop ul a {
    font-size: 1.0625rem;  /* 17px — slightly above --fs-body for readability */
    font-weight: 600;
    color: var(--navy-900);   /* navy on yellow — §2.3 */
    text-decoration: none;
    padding: 4px 4px;
    border-bottom: 2px solid transparent;
    transition: border-color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
  }

  .nav-desktop ul a:hover {
    border-bottom-color: var(--navy-900);
  }

  .nav-desktop ul a:focus-visible {
    outline: 3px solid var(--navy-900);
    outline-offset: 3px;
    border-radius: 2px;
  }

  /* Hide hamburger on tablet+ — .site-header scope wins over the base .hamburger rule below */
  .site-header .hamburger {
    display: none;
  }
}

@media (min-width: 1024px) {
  /* Restore wider gaps at desktop — more breathing room */
  .nav-desktop {
    gap: var(--space-6);
  }

  .nav-desktop ul {
    gap: var(--space-5);
  }
}

/* Compact button variant for tight spaces (e.g. the header CTA) */
.btn-sm {
  font-size: var(--fs-label);
  padding: 10px 20px;
  min-height: 40px;
}

/* Hamburger button */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: var(--r-chip);
}

.hamburger-line {
  width: 24px;
  height: 2px;
  background: var(--navy-900);
  border-radius: 2px;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
  transform-origin: center;
}

/* Morph to × when open */
.hamburger[aria-expanded="true"] .hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger[aria-expanded="true"] .hamburger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.hamburger[aria-expanded="true"] .hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Full-screen nav overlay */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-hamburger);
  background: var(--navy-900);
  display: flex;
  flex-direction: column;
  padding: var(--space-5) var(--gutter);
  transform: scale(1.04);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

.nav-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.nav-overlay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  flex-shrink: 0;
}

.nav-close {
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cream-50);
  font-size: 1.5rem;
  border-radius: var(--r-chip);
}

.nav-links {
  list-style: none;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-5);
  padding-block: var(--space-8);
}

.nav-link-item {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  /* Stagger animation — each item has --i set via style attr */
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--dur) var(--ease-out) calc(var(--i, 0) * 60ms),
    transform var(--dur) var(--ease-out) calc(var(--i, 0) * 60ms);
}

.nav-overlay.is-open .nav-link-item {
  opacity: 1;
  transform: translateY(0);
}

.nav-num {
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--coral-500);
  letter-spacing: 0.08em;
  min-width: 2ch;
}

.nav-link {
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--cream-50);
  text-decoration: none;
  line-height: 1;
  letter-spacing: -0.01em;
  transition: color var(--dur-fast) var(--ease-out);
}

.nav-link:hover {
  color: var(--coral-500);
}

.nav-cta {
  flex-shrink: 0;
  padding-bottom: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-start;
}

.nav-handle {
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--navy-400);
  letter-spacing: 0.06em;
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .nav-overlay { transition: none; }
  .nav-link-item { transition: none; opacity: 1; transform: none; }
  .hamburger-line { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION BACKGROUNDS — DESIGN.md §9
   ═══════════════════════════════════════════════════════════════════════════ */

.section-cream  { background: var(--cream-50); color: var(--navy-900); }
.section-navy   { background: var(--navy-900); color: var(--cream-50); }
.section-coral  { background: var(--coral-500); color: var(--navy-900); }
.section-teal   { background: var(--teal-500); color: var(--teal-900); }
.section-footer { background: var(--navy-900); color: var(--cream-50); }

/* Ensure headings inherit section color */
.section-navy h2, .section-navy h3, .section-footer h2, .section-footer h3 {
  color: var(--cream-50);
}
.section-coral h2, .section-coral h3 {
  color: var(--navy-900);
}
.section-teal h2, .section-teal h3 {
  color: var(--teal-900);
}

/* Map-path divider */
.map-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--space-5);
  overflow: hidden;
}

.map-divider svg {
  width: 100%;
  max-width: 640px;
  height: 24px;
  color: var(--coral-500);
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO SECTION — DESIGN.md §10 §1
   ═══════════════════════════════════════════════════════════════════════════ */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-12) var(--space-8);
}

.hero-inner {
  display: grid;
  gap: var(--space-10);
  align-items: center;
}

@media (min-width: 1024px) {
  .hero-inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
  }
}

.hero-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.hero-eyebrow {
  margin-bottom: var(--space-2);
}

.hero-headline {
  font-size: clamp(3.25rem, 15vw, 5rem); /* larger vw fills phone width; same 5rem desktop cap */
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.97;
  color: var(--navy-900);
}

.hero-lead {
  font-size: var(--fs-lead);
  color: var(--navy-600);
  max-width: 48ch;
}

.hero-ctas {
  display: flex;
  flex-direction: column;
  align-items: stretch;  /* buttons fill the column width */
  gap: var(--space-4);
}

.hero-micro {
  font-size: var(--fs-label);
  color: var(--text-muted);
  margin-top: var(--space-2);
}

/* Background blobs */
.hero-blob-1 {
  width: 400px;
  height: 400px;
  background: var(--coral-100);
  opacity: 0.6;
  top: -100px;
  right: -80px;
}
.hero-blob-2 {
  width: 250px;
  height: 250px;
  background: var(--yellow-100);
  opacity: 0.8;
  bottom: -40px;
  left: -60px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO DEMO — the signature element (DESIGN.md §13)
   ═══════════════════════════════════════════════════════════════════════════ */

.hero-demo {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  position: relative;
}

.demo-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.demo-input-card {
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--r-input);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: border-color var(--dur) var(--ease-out);
}

.demo-input-card:focus-within {
  border-color: var(--coral-500);
  box-shadow: 0 0 0 3px var(--coral-100);
}

.demo-input-label {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.demo-input-value {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.demo-input-primary {
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--navy-900);
  letter-spacing: -0.02em;
}

.demo-input-helper {
  font-size: var(--fs-label);
  color: var(--text-muted);
}

/* Range slider */
.demo-range {
  width: 100%;
  accent-color: var(--coral-500);
  cursor: pointer;
  height: 4px;
}

/* Budget stepper */
.demo-stepper {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-1);
}

.demo-stepper-btn {
  width: 32px;
  height: 32px;
  min-height: 32px; /* override for these small controls — paired with min 44px on their container */
  background: var(--cream-50);
  border: 1.5px solid var(--border);
  border-radius: var(--r-chip);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--navy-900);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast) var(--ease-out);
}
.demo-stepper-btn:hover { background: var(--yellow-100); }

/* Cards grid */
.demo-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Suggestion card — DESIGN.md §6 */
.suggestion-card {
  background: var(--white);
  border-radius: var(--r-card);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-md);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: var(--space-3);
  border: 1px solid var(--border);
  /* Stagger drop animation */
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}

.suggestion-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.suggestion-card:hover {
  transform: rotate(-0.5deg) translateY(-3px);
  box-shadow: var(--shadow-lift);
}

.suggestion-card-title {
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--navy-900);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.suggestion-card-desc {
  font-size: var(--fs-body);
  color: var(--navy-600);
  margin-top: var(--space-1);
}

.suggestion-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.suggestion-card-sticker {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: var(--yellow-500);
  border-radius: var(--r-pill);
  font-size: var(--fs-chip);
  font-weight: 700;
  color: var(--navy-900);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transform: rotate(2deg);
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
  align-self: flex-start;
}

.demo-empty {
  display: none;
  padding: var(--space-6);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-body);
  background: var(--white);
  border-radius: var(--r-card);
  border: 2px dashed var(--border);
}

.demo-empty.visible { display: block; }

/* Placeholder label */
.demo-placeholder-note {
  font-size: var(--fs-label);
  color: var(--text-muted);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .suggestion-card { transition: none; opacity: 1; transform: none; }
  .suggestion-card:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOW IT WORKS — DESIGN.md §10 §2
   ═══════════════════════════════════════════════════════════════════════════ */

.how-it-works-grid {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-10);
}

@media (min-width: 768px) {
  .how-it-works-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.step-card {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-card);
  padding: var(--space-8) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.step-num {
  font-size: var(--fs-display);
  font-weight: 800;
  color: var(--coral-500);
  line-height: 1;
  letter-spacing: -0.04em;
}

.step-title {
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--cream-50);
  letter-spacing: -0.01em;
}

.step-body {
  font-size: var(--fs-body);
  color: rgba(255,248,240,.7);
  line-height: 1.6;
}

.how-kicker {
  margin-top: var(--space-10);
  font-size: var(--fs-lead);
  color: rgba(255,248,240,.8);
  max-width: 40ch;
}

/* ═══════════════════════════════════════════════════════════════════════════
   WHY THREE — DESIGN.md §10 §3
   ═══════════════════════════════════════════════════════════════════════════ */

.why-three-inner {
  display: grid;
  gap: var(--space-10);
  align-items: center;
}

@media (min-width: 768px) {
  .why-three-inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
  }
}

.why-three-body {
  font-size: var(--fs-lead);
  color: var(--navy-600);
  line-height: 1.65;
  max-width: 52ch;
  margin-top: var(--space-5);
}

.why-three-quote {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-10);
  background: var(--yellow-100);
  border-radius: var(--r-card);
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MEET BO — DESIGN.md §10 §4
   ═══════════════════════════════════════════════════════════════════════════ */

.meet-bo-inner {
  display: grid;
  gap: var(--space-10);
  align-items: center;
}

@media (min-width: 768px) {
  .meet-bo-inner {
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--space-12);
  }
}

.meet-bo-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Meet Bo eyebrow — uses global .eyebrow default (no override) */
/* Prevent the eyebrow pill from stretching full-width inside the flex column */
.meet-bo-text > .eyebrow {
  align-self: flex-start;
}

.meet-bo-sub {
  font-size: var(--fs-lead);
  font-weight: 600;
  color: var(--navy-600);
}

.meet-bo-body {
  font-size: var(--fs-body);
  color: var(--navy-900);
  line-height: 1.7;
  max-width: 52ch;
}

/* Polaroid — DESIGN.md §6 */
.polaroid-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.polaroid {
  background: var(--white);
  border-radius: var(--r-photo);
  padding: var(--space-4) var(--space-4) var(--space-8);
  box-shadow: var(--shadow-md);
  transform: rotate(2deg);
  max-width: 280px;
  width: 100%;
}

.polaroid-img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: calc(var(--r-photo) - 4px);
  background: var(--yellow-100);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.polaroid-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Placeholder when bo.png is absent */
.polaroid-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  height: 100%;
  min-height: 220px;
  color: var(--navy-400);
  font-size: var(--fs-label);
  text-align: center;
  padding: var(--space-5);
}

.polaroid-placeholder-icon {
  font-size: 3rem;
  display: block;
}

.polaroid-caption {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--navy-400);
  text-align: center;
  margin-top: var(--space-3);
  letter-spacing: 0.04em;
}

/* Speech bubble — DESIGN.md §6 */
.speech-bubble {
  position: relative;
  background: var(--yellow-500);
  color: var(--on-yellow);
  border-radius: var(--r-card);
  padding: var(--space-5) var(--space-6);
  font-size: var(--fs-lead);
  font-weight: 600;
  font-style: italic;
  max-width: 320px;
  box-shadow: var(--shadow-sm);
  margin-top: var(--space-5);
  transform: rotate(-1.5deg);
}

.speech-bubble::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 32px;
  border: 8px solid transparent;
  border-bottom-color: var(--yellow-500);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MEET THE TEAM — DESIGN.md §10 §5 (team section)
   ═══════════════════════════════════════════════════════════════════════════ */

.team-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.team-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  justify-items: center;
  max-width: 640px;
}

@media (max-width: 480px) {
  .team-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

.team-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Override polaroid tilt with per-card custom property */
.polaroid-team {
  transform: rotate(var(--tilt, -2deg));
}

.team-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 180px;
  background: var(--coral-100);
}

.team-initials {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--coral-500);
  letter-spacing: -0.02em;
}

.team-role {
  font-size: var(--fs-label);
  font-weight: 500;
  color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOR LOCAL SPOTS — DESIGN.md §10 §6
   ═══════════════════════════════════════════════════════════════════════════ */

.local-spots-inner {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

@media (min-width: 768px) {
  .local-spots-inner {
    grid-template-columns: 1fr auto;
    gap: var(--space-12);
  }
}

.local-spots-body {
  font-size: var(--fs-lead);
  color: var(--teal-900);
  line-height: 1.65;
  max-width: 50ch;
  margin-top: var(--space-4);
}

/* ═══════════════════════════════════════════════════════════════════════════
   EARLY ACCESS — DESIGN.md §10 §7
   ═══════════════════════════════════════════════════════════════════════════ */

.early-access-inner {
  max-width: 580px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  align-items: center;
}

.early-access-sub {
  font-size: var(--fs-lead);
  color: var(--navy-600);
  max-width: 46ch;
  line-height: 1.6;
}

.email-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
  max-width: 440px;
}

@media (min-width: 480px) {
  .email-form {
    flex-direction: row;
  }
}

.email-input {
  flex: 1;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--navy-900);
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--r-pill);
  padding: 13px 20px;
  min-height: 44px;
  outline: none;
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.email-input::placeholder {
  color: var(--text-muted);
}

.email-input:focus {
  border-color: var(--coral-500);
  box-shadow: 0 0 0 3px var(--coral-100);
}

/* Success state */
.form-success {
  display: none;
  font-size: var(--fs-lead);
  font-weight: 600;
  color: var(--navy-900);
}

.form-success.visible { display: block; }
.email-form.hidden    { display: none; }

/* Error state */
.form-error {
  display: none;
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--navy-900);
}

.form-error.visible { display: block; }

.form-error a {
  color: var(--coral-500);
  font-weight: 600;
  text-decoration: none;
}

.form-error a:hover {
  text-decoration: underline;
}

.early-access-follow {
  font-size: var(--fs-label);
  color: var(--text-muted);
  margin-top: var(--space-2);
}

.early-access-follow a {
  color: var(--coral-500);
  font-weight: 600;
  text-decoration: none;
}

.early-access-follow a:hover {
  text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FAQ ACCORDION — DESIGN.md §15
   ═══════════════════════════════════════════════════════════════════════════ */

.faq {
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
  margin-top: var(--space-10);
  text-align: left;
}

.faq-title {
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--navy-900);
  margin-bottom: var(--space-5);
  text-align: center;
}

.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq-question {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy-900);
  text-align: left;
  min-height: 44px;
}

.faq-icon {
  font-size: 1.25rem;
  color: var(--coral-500);
  flex-shrink: 0;
  transition: transform var(--dur) var(--ease-out);
}

.faq-question[aria-expanded="true"] .faq-icon {
  transform: rotate(45deg);
}

.faq-answer {
  display: none;
  padding-bottom: var(--space-5);
  color: var(--navy-600);
  font-size: var(--fs-body);
  line-height: 1.65;
  max-width: 56ch;
}

.faq-answer.is-open { display: block; }

@media (prefers-reduced-motion: reduce) {
  .faq-icon { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER — DESIGN.md §10 footer
   ═══════════════════════════════════════════════════════════════════════════ */

.site-footer {
  padding-block: var(--space-10);
}

.site-footer .container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
}

@media (min-width: 768px) {
  .site-footer .container {
    flex-wrap: nowrap;
  }
  .footer-center {
    order: 0;
    flex-basis: 0;
    flex: 1;
    align-items: center;
    text-align: center;
    padding-inline: var(--space-6);
  }
}


.footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: flex-start;
}

/* Center column: slogan + copyright */
.footer-center {
  order: 1;          /* push below logo + social on mobile */
  flex-basis: 100%;  /* force onto its own row */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  text-align: left;
  padding-inline: 0;
}

.footer-tagline {
  font-size: var(--fs-body);
  color: rgba(255,248,240,.75);
  font-style: italic;
  max-width: 46ch;
}

.footer-social {
  display: flex;
  flex-direction: column;  /* stacked on all breakpoints */
  align-items: center;
  gap: var(--space-3);
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-chip);
  color: rgba(255,248,240,.75);
  transition: color var(--dur-fast) var(--ease-out);
}

.footer-social a:hover {
  color: var(--cream-50);
}

.footer-social svg {
  width: 28px;
  height: 28px;
}

.footer-meta {
  font-size: var(--fs-body);
  color: rgba(255,248,240,.5);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCROLL REVEAL (IntersectionObserver — set by JS)
   ═══════════════════════════════════════════════════════════════════════════ */

[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children inside a reveal group */
[data-reveal-group] > * {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--dur-slow) var(--ease-out) calc(var(--i, 0) * 80ms),
    transform var(--dur-slow) var(--ease-out) calc(var(--i, 0) * 80ms);
}

[data-reveal-group].revealed > * {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal-group] > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}