/* ===========================================================================
   AI on Maternity Leave — site.css (v02)
   Site-level layout + motion on top of brand_kit_ai_on_mat_leave tokens.
   Progressive enhancement: everything reads correctly with JS off /
   prefers-reduced-motion; site.js layers the choreography on top.
   =========================================================================== */

/* smooth in-page anchor scrolling (e.g. "sign up to our newsletter" -> #newsletter) */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- Layout primitives ---------- */
.container       { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container-tight { max-width: var(--container-tight); margin-inline: auto; padding-inline: var(--gutter); }

.band       { background: var(--surface-base); }
.band-deep  { background: var(--crema-deep); }
.band-ink   { background: var(--claret); color: var(--text-on-ink); }
.band-ink-deep { background: var(--claret-900); color: var(--text-on-ink); }

.section { padding-block: var(--space-9); }
@media (min-width: 900px) { .section { padding-block: var(--space-10); } }

.band-ink h2, .band-ink h3, .band-ink-deep h2, .band-ink-deep h3 { color: var(--text-on-ink); }
.band-ink p, .band-ink-deep p { color: var(--text-on-ink-mut); }
.band-ink a, .band-ink-deep a { color: var(--text-on-ink); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

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

/* ---------- Reveal-on-scroll system ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--ease-settle), transform 0.7s var(--ease-settle);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-in { opacity: 1; transform: translateY(0); }
.reveal-tilt.is-in { transform: translateY(0) rotate(var(--tilt, 0deg)); }
.no-motion .reveal { opacity: 1; transform: none; transition: none; }

/* ---------- Hand-drawn squiggles (draw on reveal) ---------- */
.squiggle-wrap { position: relative; display: inline-block; white-space: nowrap; }
.squiggle {
  position: absolute; left: -2%; right: -2%; bottom: -0.35em;
  width: 104%; height: 0.5em; overflow: visible; pointer-events: none;
}
.squiggle path { fill: none; stroke-linecap: round; }
.squiggle .sq-anchor { stroke: var(--claret); stroke-width: 7; }
.squiggle .sq-ink    { stroke: var(--neon); stroke-width: 3.5; }
.band-ink .squiggle .sq-anchor, .band-ink-deep .squiggle .sq-anchor { stroke: var(--claret-900); }
.squiggle path {
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
}
.is-in .squiggle path, .no-motion .squiggle path {
  animation: sq-draw 0.9s var(--ease-out) 0.35s forwards;
}
@keyframes sq-draw { to { stroke-dashoffset: 0; } }

/* ---------- Nav ---------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(245, 239, 232, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--keyline-soft);
}
.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
}
.site-nav__brand { display: flex; align-items: center; gap: var(--space-2); text-decoration: none; flex: none; }
.site-nav__brand img { height: 44px; width: auto; }
.site-nav__links {
  display: flex; align-items: center; gap: var(--space-6);
  list-style: none; margin: 0; padding: 0;
}
.site-nav__links a {
  position: relative;
  text-decoration: none; color: var(--claret);
  font-weight: var(--fw-semibold); font-size: var(--fs-body-sm);
  padding-block: 4px;
  transition: color var(--dur-fast) var(--ease-out);
}
.site-nav__links a:hover { color: var(--claret-700); }
/* hand-drawn circle: drawn on hover (like someone sketching it),
   already drawn on the current page. SVG injected by site.js. */
.nav-circle {
  position: absolute; inset: -7px -12px;
  width: calc(100% + 24px); height: calc(100% + 14px);
  overflow: visible;
  pointer-events: none;
}
.nav-circle path {
  fill: none;
  stroke: var(--claret);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 330;
  stroke-dashoffset: 330;
  transition: stroke-dashoffset 0.5s var(--ease-out);
}
.site-nav__links a:hover .nav-circle path,
.site-nav__links a[aria-current="page"] .nav-circle path { stroke-dashoffset: 0; }
.site-nav__links a[aria-current="page"] .nav-circle path { transition: none; }
/* static circled link (used in body copy) */
.circle-link::after {
  content: "";
  position: absolute; inset: -10px -17px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 44' preserveAspectRatio='none'%3E%3Cpath d='M10 22 C 9 10 36 5 62 6 C 92 7 111 12 111 21 C 111 33 86 40 57 39 C 29 38 11 33 10 22 Z' fill='none' stroke='%23601A2F' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  pointer-events: none;
}
.circle-link {
  position: relative;
  text-decoration: none;
  font-weight: var(--fw-bold);
  padding-inline: 4px;
}
.site-nav__actions { display: flex; align-items: center; gap: var(--space-4); flex: none; }
/* narrow screens: links share the bar; the CTA moves to the side tab
   instead of stacking the nav taller */
@media (max-width: 760px) {
  .site-nav__inner { justify-content: space-between; }
  .site-nav__links { gap: var(--space-5); }
  .site-nav__actions { display: none; }
}

/* mobile-only sticky side tab — the one neon charge on small screens */
.side-cta {
  display: none;
  position: fixed;
  right: 0; top: 50%;
  transform: translateY(-50%);
  z-index: 55;
  writing-mode: vertical-rl;
  padding: 18px 11px;
  background: var(--neon);
  color: var(--claret);
  border: var(--border-keyline);
  border-right: none;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  box-shadow: var(--shadow-sticker);
  font: var(--fw-bold) 0.8125rem/1 var(--font-body);
  letter-spacing: 0.05em;
  text-decoration: none;
  white-space: nowrap;
}
.side-cta:active { transform: translateY(-50%) translateX(2px); box-shadow: none; }
@media (max-width: 760px) { .side-cta { display: inline-flex; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 24px; border-radius: var(--radius-pill);
  font: var(--fw-bold) 0.9375rem/1 var(--font-body);
  letter-spacing: 0.01em; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.btn:active { transform: translateY(2px); box-shadow: none !important; }
.btn--sm { padding: 8px 16px; font-size: 0.8125rem; }
.btn--lg { padding: 16px 30px; font-size: 1.0625rem; }
.btn--primary { background: var(--claret); color: var(--crema); border: var(--keyline-w) solid var(--claret); box-shadow: var(--shadow-sticker); }
.btn--primary:hover { background: var(--claret-700); border-color: var(--claret-700); color: var(--crema); }
.btn--secondary { background: var(--crema-pure); color: var(--claret); border: var(--border-keyline); box-shadow: var(--shadow-sticker); }
.btn--secondary:hover { background: var(--crema-deep); color: var(--claret); }
.btn--charge { background: var(--neon); color: var(--claret); border: var(--border-keyline); box-shadow: var(--shadow-sticker); }
.btn--charge:hover { background: var(--neon-deep); color: var(--claret); }
.btn--ghost { background: transparent; color: var(--claret); border: var(--keyline-w) solid transparent; box-shadow: none; }
.btn--ghost:hover { background: var(--claret-060); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }

/* ---------- Pills & stickers ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--radius-pill); border: var(--border-keyline);
  text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap;
  font: var(--fw-bold) 0.8125rem/1 var(--font-body); padding: 7px 14px;
}
.pill--olive   { background: var(--olive-100); color: var(--olive-600); }
.pill--neutral { background: var(--crema-pure); color: var(--claret); }
.pill--charge  { background: var(--neon); color: var(--claret); }
.pill--ink     { background: var(--claret); color: var(--crema); }
.pill--sm { font-size: 0.6875rem; padding: 5px 11px; }
a.pill { text-decoration: none; transition: background var(--dur-fast) var(--ease-out); }
a.pill--olive:hover { background: var(--olive); color: var(--crema); }
.pill-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.sticker {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: var(--radius-pill);
  font: var(--fw-bold) 0.9375rem/1 var(--font-body); letter-spacing: 0.02em;
  box-shadow: var(--shadow-sticker); white-space: nowrap;
}
.sticker--charge  { background: var(--neon); color: var(--claret); border: var(--border-keyline); }
.sticker--neutral { background: var(--crema-pure); color: var(--claret); border: var(--border-keyline); }
.sticker--olive   { background: var(--olive); color: var(--crema); border: var(--border-keyline); }
.sticker--ink     { background: var(--claret); color: var(--neon); border: var(--keyline-w) solid var(--neon); }

/* ---------- Cards ---------- */
.card {
  border-radius: var(--radius-lg); padding: var(--space-6);
  background: var(--surface-card); border: var(--border-soft); box-shadow: var(--shadow-card);
}
.card--keyline { border: var(--border-keyline); box-shadow: var(--shadow-sticker-lg); }
.card--ink { background: var(--claret); color: var(--text-on-ink); border: var(--keyline-w) solid var(--claret); }
.card--tilt { transform: rotate(var(--tilt-3)); }
.card--tilt:hover { transform: rotate(0deg); transition: transform var(--dur-base) var(--ease-settle); }

/* ---------- Photo sticker frames ---------- */
.photo-sticker {
  border-radius: var(--radius-lg);
  border: var(--border-keyline);
  box-shadow: var(--shadow-sticker-lg);
  overflow: hidden;
  background: var(--crema-deep);
}
.photo-sticker img { width: 100%; height: 100%; object-fit: cover; }
.photo-sticker--tilt1 { transform: rotate(var(--tilt-1)); }
.photo-sticker--tilt2 { transform: rotate(var(--tilt-2)); }
.photo-caption {
  font-size: var(--fs-body-sm); color: var(--text-faint);
  margin-top: var(--space-3);
}

/* =========================================================================
   HERO STAGE — scroll choreography (photo expand → roundel → orbit)
   Default (no .motion class): calm static layout.
   ========================================================================= */
.hero-stage { position: relative; }
.hero-stage.motion { height: 240vh; }
.hero-sticky { position: relative; }
.hero-stage.motion .hero-sticky {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
}

/* landing: headline left, photo right */
.hero-landing {
  position: relative; z-index: 5;
  display: grid;
  gap: var(--space-7);
  align-items: center;
  max-width: var(--container); margin-inline: auto;
  padding: var(--space-8) var(--gutter) var(--space-7);
}
@media (min-width: 860px) { .hero-landing { grid-template-columns: 1.15fr 0.85fr; } }
.hero-stage.motion .hero-landing {
  min-height: 100vh;
  padding-block: 0;
  will-change: opacity, transform;
}
.hero-cluster h1 {
  font-size: clamp(2.8rem, 3.7vw + 0.5rem, 4.4rem);
  max-width: 15ch;
  margin-bottom: var(--space-5);
}
.hero-cluster .hero-sub { margin: 0 0 var(--space-6); max-width: 40ch; }
.hero-cluster .hero-sub {
  font: var(--text-lead); color: var(--text-muted);
  max-width: 44ch; margin: 0 auto var(--space-6);
}
.hero-cluster .btn-row { justify-content: center; }

/* hero photos — a deck of sticker cards, dealt one on top of the other */
.hero-deck {
  position: relative; z-index: 2;
  width: 100%;
  max-width: 440px;
  justify-self: center;
  aspect-ratio: 4 / 3;
}
.deck-card {
  position: absolute; inset: 0;
  margin: 0;
  border-radius: var(--radius-xl);
  border: var(--border-keyline);
  box-shadow: var(--shadow-sticker-lg);
  overflow: hidden;
  background: var(--crema-deep);
  transition: transform 0.8s var(--ease-settle), opacity 0.5s var(--ease-out);
  will-change: transform;
}
.deck-card img { width: 100%; height: 100%; object-fit: cover; }
.deck-card.is-top  { transform: rotate(1.5deg); z-index: 3; }
.deck-card.is-mid  { transform: rotate(-5deg) translate(-16px, 10px); z-index: 2; }
.deck-card.is-back { transform: rotate(6deg) translate(18px, 16px); z-index: 1; }
/* the sticker rides with the IRL-events descriptor */
/* perches top-right of the "s" in "IRL events", inverse tilt */
.hero-irl-sticker {
  position: absolute;
  top: -46px; right: -60px;
  transform: rotate(4deg);
}
.hero-stage:not(.motion) .hero-irl-sticker {
  position: static;
  display: block;
  width: fit-content;
  margin-bottom: var(--space-4);
  transform: rotate(4deg);
}

/* Saturn-ring letters (positions set per-frame by site.js) */
.hero-ring {
  position: absolute; z-index: 4; left: 50%; top: 50%;
  width: 0; height: 0;
  transform: rotate(-18deg);
  opacity: 0;
  pointer-events: none;
}
.ring-char {
  position: absolute; left: 0; top: 0;
  font: var(--fw-bold) 21px/1 var(--font-body);
  letter-spacing: 0;
  white-space: pre;
  color: var(--claret);
  text-shadow: -1.5px -1.5px 0 var(--crema), 1.5px -1.5px 0 var(--crema),
               -1.5px 1.5px 0 var(--crema), 1.5px 1.5px 0 var(--crema);
  will-change: transform, opacity;
}
.ring-char--olive { color: var(--olive-600); }
/* on mobile the globe sits in flow inside this wrap; on desktop the wrap
   dissolves (display: contents) so the pieces anchor to the sticky stage */
.hero-stage.motion .hero-globe-wrap { display: contents; }
.hero-stage:not(.motion) .hero-globe-wrap {
  position: relative;
  width: 100%;
  height: min(96vw, 430px);
  margin-top: var(--space-6);
}
.hero-stage:not(.motion) .hero-ring,
.hero-stage:not(.motion) .globe-lines { opacity: 1; }

/* squiggly hand-drawn underline link */
.squiggle-link {
  position: relative;
  text-decoration: none;
  font-weight: var(--fw-bold);
  padding-bottom: 2px;
}
.squiggle-link::after {
  content: "";
  position: absolute; left: -2%; right: -2%; bottom: -7px;
  height: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C 30 3, 55 13, 82 8 S 135 3, 160 9 S 215 12, 237 6' fill='none' stroke='%23601A2F' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  pointer-events: none;
}

/* flanking display words — globe phase only, on two levels (asymmetric) */
.hero-word {
  position: absolute; z-index: 10;
  isolation: isolate;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
  line-height: var(--lh-display); letter-spacing: var(--ls-display);
  color: var(--claret);
  max-width: 13ch;
  will-change: transform, opacity;
  opacity: 0;
}
.hero-word--left  { left: 5vw; top: 32%; text-align: left; }
.hero-word--right { right: 5vw; top: 56%; text-align: right; }
.hero-word .hero-word-sub {
  display: block; font: var(--fw-medium) 0.95rem/1.45 var(--font-body);
  letter-spacing: 0; color: var(--text-muted); margin-top: var(--space-2);
  max-width: 26ch;
  opacity: 0; transition: opacity 0.4s var(--ease-out) 0.1s;
}
.hero-word--right .hero-word-sub { margin-left: auto; }
.hero-word .hero-word-cta {
  display: block; margin-top: var(--space-4);
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.4s var(--ease-out) 0.25s, transform 0.4s var(--ease-settle) 0.25s;
}
.hero-word.show-sub .hero-word-sub,
.hero-word.show-sub .hero-word-cta { opacity: 1; transform: none; }

.hero-stage.motion .hero-words-static { display: contents; }

/* static fallback: words become a simple two-column strip under the photo */
.hero-stage:not(.motion) .hero-word {
  position: static; opacity: 1; max-width: none;
}
.hero-stage:not(.motion) .hero-words-static {
  display: grid; gap: var(--space-6); grid-template-columns: 1fr 1fr;
  max-width: 52rem; margin: var(--space-8) auto 0; padding-inline: var(--gutter);
}
@media (max-width: 700px) { .hero-stage:not(.motion) .hero-words-static { grid-template-columns: 1fr; } }
.hero-stage:not(.motion) .hero-word .hero-word-sub { opacity: 1; }
.hero-stage:not(.motion) .hero-word--left { text-align: left; }
.hero-stage:not(.motion) .hero-word--right { text-align: left; }
.hero-stage:not(.motion) .hero-word--right .hero-word-sub { margin-left: 0; }
.hero-stage:not(.motion) .hero-word-cta { display: none; }

/* orbit scene */
.hero-orbit {
  position: absolute; z-index: 3; left: 50%; top: 50%;
  translate: -50% -50%;
  width: 0; height: 0;
  perspective: 1100px;
  opacity: 0;
  pointer-events: none;
}
/* the ring rides the globe's equator: tip the plane (rotateX) then tilt the
   whole thing (rotateZ) to match the drawn equator's -18° lean */
.hero-orbit-tilt {
  position: absolute; left: 0; top: 0;
  transform: rotateZ(-18deg) rotateX(21deg);
  transform-style: preserve-3d;
}
.hero-orbit-ring { transform-style: preserve-3d; position: absolute; left: 0; top: 0; }
.orbit-pill {
  position: absolute; left: 0; top: 0;
  translate: -50% -50%;
  will-change: transform, opacity;
}
/* arched label that bows with the equator (dips at the front of the sphere) */
.orbit-arc { width: clamp(150px, 15vw, 220px); height: auto; overflow: visible; display: block; }
.orbit-arc text {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: 24px;
  letter-spacing: 1.5px;
  fill: var(--claret);
  stroke: var(--crema);
  stroke-width: 5px;
  paint-order: stroke fill;
}
.orbit-pill:nth-child(even) .orbit-arc text { fill: var(--olive-600); }
.orbit-arc--long text { font-size: 17px; letter-spacing: 1px; }
.orbit-arc--xlong text { font-size: 14.5px; letter-spacing: 0.5px; }
.globe-lines {
  position: absolute; z-index: 3; left: 50%; top: 50%; translate: -50% -50%;
  pointer-events: none; opacity: 0;
}
.globe-lines path, .globe-lines ellipse, .globe-lines circle { fill: none; stroke-linecap: round; }
.hero-stage:not(.motion) .hero-orbit,
.hero-stage.motion .hero-pills-static { display: none; }
/* when the static ring is running, the badges are drawn on the globe —
   keep them for screen readers only */
.hero-stage.ring-static .hero-pills-static {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.hero-pills-static { justify-content: center; margin-top: var(--space-6); }

.hero-scroll-hint {
  position: absolute; z-index: 6; left: 50%; bottom: 3vh; translate: -50% 0;
  font: var(--fw-semibold) var(--fs-body-xs)/1 var(--font-body);
  text-transform: uppercase; letter-spacing: var(--ls-overline);
  color: var(--text-faint);
  display: none;
}
.hero-stage.motion .hero-scroll-hint { display: block; }

/* ---------- Testimonials — sticky stage, scroll reads them ---------- */
.quotes-stage { position: relative; }
.quotes-viewport { position: relative; }
.quotes-stage.motion .quotes-viewport {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; justify-content: flex-start;
  overflow: hidden;
  /* clear the sticky nav so the heading always reads while stuck */
  padding-top: calc(96px + var(--space-6));
  padding-bottom: var(--space-6);
}
.quotes-stage:not(.motion) .quotes-viewport { padding-block: var(--space-9); }
/* cards run full-bleed off the window edge — no fade, no clip at the container */
.quote-marquee {
  overflow: visible;
  margin-top: var(--space-7);
}
/* scroll-driven: site.js maps page scroll to the track's X position */
.quote-track {
  display: flex;
  gap: var(--space-6);
  width: max-content;
  padding-block: var(--space-3); /* room for the tilt + shadow */
  will-change: transform;
}
.quote-track .quote-card {
  width: min(340px, 78vw);
  flex: none;
  transform: rotate(var(--tilt, 0deg));
}
/* static (mobile): stay a left-to-right carousel — swipe through the cards */
.no-motion .quote-track, .quote-track.static {
  width: max-content;
  flex-wrap: nowrap;
  transform: none !important;
}
.quotes-stage:not(.motion) .quote-marquee {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  /* bleed to the screen edges so cards swipe from under the gutter */
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
  scrollbar-width: none;
}
.quotes-stage:not(.motion) .quote-marquee::-webkit-scrollbar { display: none; }
.quotes-stage:not(.motion) .quote-card { scroll-snap-align: start; }
.quote-grid {
  display: grid; gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  margin-top: var(--space-7);
}
.quote-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: var(--radius-lg);
  background: var(--crema-pure);
  border: var(--border-keyline);
  box-shadow: var(--shadow-sticker);
  padding: var(--space-6);
}
.quote-card blockquote {
  margin: 0;
  font: var(--fw-medium) 1.0625rem/1.55 var(--font-body);
  color: var(--claret);
}
/* opening and closing marks, matching breathing room top and bottom */
.quote-card blockquote::before {
  content: "\201C";
  display: block;
  font: var(--fw-regular) 3.75rem/0.5 var(--font-display);
  color: var(--olive);
  margin: var(--space-3) 0 var(--space-5);
}
.quote-card blockquote::after {
  content: "\201D";
  display: block;
  text-align: right;
  font: var(--fw-regular) 3.75rem/0.5 var(--font-display);
  color: var(--olive);
  margin: var(--space-5) 0 var(--space-3);
}
.quote-card figcaption {
  margin-top: var(--space-2);
  font: var(--fw-semibold) var(--fs-body-xs)/1 var(--font-body);
  text-transform: uppercase; letter-spacing: var(--ls-overline);
  color: var(--text-faint);
}
.quote-note { margin-top: var(--space-5); font-size: var(--fs-body-sm); color: var(--text-faint); }

/* ---------- Copy + photo split (What this is / Come to an event) ---------- */
.what-split { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 900px) {
  .what-split { grid-template-columns: 1.2fr 0.8fr; }
  /* reversed: photo left (narrower), text right */
  .what-split--reverse { grid-template-columns: 0.8fr 1.2fr; }
}
.what-photo { max-width: 420px; justify-self: center; }
.what-deck { max-width: 420px; }
/* Come to an event: the source photos are portrait, so this deck keeps a
   portrait frame instead of the landscape 4:3 used elsewhere */
.what-deck--portrait { max-width: 300px; aspect-ratio: 2 / 3; }
.text-right { text-align: right; }
.section-head--right { margin-left: auto; }
.section-head--right p { margin-left: auto; }
/* on mobile the reversed block stacks photo-first; keep text left-aligned there */
@media (max-width: 899px) {
  .text-right { text-align: left; }
  .section-head--right p { margin-left: 0; }
  .what-split--reverse .btn-row { justify-content: flex-start !important; }
}

/* sticker banner — LinkedIn-cover style row of promises, centred */
.sticker-banner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-4) var(--space-5);
  margin-top: var(--space-8);
}
.sticker-banner .sticker {
  transform: rotate(var(--a, 0deg));
  font-size: 1.0625rem;
  padding: 13px 24px;
}

/* ---------- Section head ---------- */
.section-head { max-width: 52rem; }
.section-head h2 { margin-bottom: var(--space-4); }
.section-head p { font: var(--text-lead); color: var(--text-body); max-width: 60ch; }
.band-ink .section-head p, .band-ink-deep .section-head p { color: var(--text-on-ink-mut); }
.prose p { font: var(--text-default); font-size: var(--fs-body-lg); max-width: 64ch; }

/* ---------- Fear / fix (ink section, fix slides in over the fear) ---------- */
.fearfix { position: relative; }
.fearfix-viewport { position: relative; }
.fearfix.motion { height: 220vh; }
.fearfix.motion .fearfix-viewport {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
}
.fearfix:not(.motion) .fearfix-viewport { padding-block: var(--space-9); }

.stat-duo {
  display: grid;
  gap: var(--space-8);
  margin-top: var(--space-8);
  align-items: center;
}
@media (min-width: 900px) { .stat-duo { grid-template-columns: 1fr 1fr; } }
.stat-num {
  font-family: var(--font-display);
  font-size: clamp(5rem, 11vw, 9.5rem);
  line-height: 0.9; letter-spacing: -0.02em;
  color: var(--neon);
  transform: scale(0.6); transform-origin: left center;
  transition: transform 0.9s var(--ease-settle);
}
.is-in .stat-num, .no-motion .stat-num { transform: scale(1); }
.stat-copy {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: var(--fw-medium);
  color: var(--text-on-ink);
  line-height: 1.45;
  margin: var(--space-4) 0 0;
  max-width: 26ch;
}
.stat-src { display: block; margin-top: var(--space-2); font-size: var(--fs-body-sm); font-weight: var(--fw-regular); color: var(--text-on-ink-mut); }
.stat-line { font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: var(--fw-medium); color: var(--text-on-ink); max-width: 22ch; line-height: 1.45; margin: 0; }

/* the fix: crema panel that slides over the fear */
.fix-panel {
  background: var(--crema-pure);
  color: var(--text-body);
  border: var(--border-keyline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sticker-lg);
  padding: var(--space-7);
  max-width: 34rem;
}
.fearfix.motion .fix-panel {
  position: absolute;
  right: 4vw; top: 50%;
  margin-top: -190px;
  width: min(540px, 58vw);
  transform: translateX(115%) rotate(3deg);
  will-change: transform;
}
.fearfix:not(.motion) .fix-panel { margin: var(--space-8) auto 0; }
.fix-panel .overline { color: var(--olive-600); display: block; margin-bottom: var(--space-3); }
.fix-panel .fix-line {
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  font-weight: var(--fw-medium);
  color: var(--claret);
  line-height: 1.5;
  margin: 0 0 var(--space-5);
}
.fix-founder {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  border-top: var(--border-soft);
  padding-top: var(--space-5);
  text-align: left;
}
.fix-founder img {
  width: 76px; height: 76px;
  border-radius: 50%;
  object-fit: cover;
  border: var(--border-keyline);
  flex: none;
}
.founder-kicker {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--olive);
  display: block;
  margin-bottom: var(--space-1);
}
.fix-founder p { margin: 0; font-size: var(--fs-body-sm); }
/* the panel is crema — beat the ink-section text colours */
.band-ink .fix-panel p { color: var(--claret); }
.band-ink .fix-panel .fix-founder p { color: var(--text-muted); }
.band-ink .fix-panel .stat-src { color: var(--text-faint); }

/* ---------- Feature grid ---------- */
.feature-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-6); margin-top: var(--space-8);
}
.feature-grid__item h3 { font-size: var(--fs-display-md); color: var(--text-on-ink); }
.feature-grid__item p { color: var(--text-on-ink-mut); margin: 0; }

/* light-ground variant */
.band .feature-grid__item h3, .band-deep .feature-grid__item h3 { color: var(--claret); }
.band .feature-grid__item p, .band-deep .feature-grid__item p { color: var(--text-body); }

/* =========================================================================
   EVENTS TIMELINE — horizontal, scroll-driven beam (desktop)
   Default: vertical stacked cards.
   ========================================================================= */
.timeline { position: relative; }
.timeline.motion { height: auto; }
.timeline-viewport { position: relative; }
.timeline.motion .timeline-viewport {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  /* pad past the sticky nav, then centre the block in the space that's left,
     so neither the H1 (top) nor the cards (bottom) clip */
  padding-top: 96px;
  padding-bottom: var(--space-5);
  overflow: hidden;
}
.timeline-head { margin-bottom: var(--space-5); }
.timeline-track-wrap { position: relative; }
.timeline-beam {
  position: absolute; left: 0; right: 0; top: 34px;
  height: 3px; background: var(--claret-012); border-radius: 2px;
  display: none;
}
.timeline.motion .timeline-beam { display: block; }
/* run the beam and cards to the window edge — the timeline reads as endless */
.timeline.motion .timeline-track-wrap { margin-right: calc((100% - 100vw) / 2); }
.timeline-beam-fill {
  position: absolute; inset: 0 auto 0 0; width: 0%;
  background: linear-gradient(90deg, var(--claret), var(--neon));
  border-radius: 2px;
  box-shadow: 0 0 0 1px var(--claret-012);
}
.timeline-row {
  display: grid; gap: var(--space-6);
  will-change: transform;
}
.timeline.motion .timeline-row {
  display: flex; gap: var(--space-7); align-items: flex-start;
  width: max-content; padding-top: var(--space-7);
}
.timeline-item { position: relative; }
.timeline.motion .timeline-item { width: min(400px, 78vw); flex: none; }
.timeline-dot {
  display: none;
  position: absolute; top: -13px; left: 28px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--neon); border: var(--border-keyline);
}
.timeline.motion .timeline-dot { display: block; }
.timeline-card { height: 100%; display: flex; flex-direction: column; gap: var(--space-3); }
.timeline-when {
  font: var(--fw-semibold) var(--fs-body-xs)/1.7 var(--font-body);
  text-transform: uppercase; letter-spacing: var(--ls-overline);
  color: var(--text-muted);
}
.timeline-head h1 { font-size: var(--fs-display-xl); max-width: 16ch; margin-bottom: var(--space-3); }
.timeline-head .hero-sub { font: var(--text-lead); color: var(--text-muted); max-width: 40ch; }
.timeline-card h3 { margin-bottom: 0; }
.timeline-card p { margin: 0; }
/* event thumbnail rendered from events.json images[0] — fixed, compact height
   so a card with a photo never blows past the sticky viewport */
.timeline-thumb {
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: var(--border-soft);
  height: 150px;
  flex: none;
}
.timeline-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* graceful empty state when there are no current speakers yet */
.speaker-empty { margin-top: var(--space-6); font-size: var(--fs-body-lg); color: var(--text-muted); max-width: 46ch; }
.timeline-note { margin-top: var(--space-6); font-size: var(--fs-body-md); color: var(--text-muted); }

/* ---------- Speakers ---------- */
.speaker-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--space-6); margin-top: var(--space-7);
}
.speaker-card { display: flex; flex-direction: column; gap: var(--space-4); }
.speaker-card__head { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: 50%;
  border: var(--border-keyline); background: var(--olive); color: var(--crema);
  font: var(--fw-bold) 1.3rem/1 var(--font-body); flex: none; overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.speaker-card__name { font: var(--fw-regular) 1.375rem/1.15 var(--font-display); color: var(--claret); }
.speaker-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.speaker-facts li { position: relative; padding-left: 24px; font-size: var(--fs-body-md); }
.speaker-facts li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--olive); border: 1.5px solid var(--claret);
}

/* ---------- Checklist ---------- */
.check-list { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); }
.check-list li { position: relative; padding-left: 34px; font-size: var(--fs-body-lg); }
/* hand-drawn olive tick */
.check-list li::before {
  content: ""; position: absolute; left: 0; top: 4px;
  width: 24px; height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 26'%3E%3Cpath d='M4 15 C 7 17 10 21 12 23 C 15 16 21 7 27 3' fill='none' stroke='%2384894A' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  transform: rotate(-4deg);
}

/* ---------- FAQ ---------- */
.faq { margin-top: var(--space-7); display: grid; gap: var(--space-4); max-width: var(--container-tight); }
.faq-item { border: var(--border-keyline); border-radius: var(--radius-md); background: var(--surface-card); overflow: hidden; }
.faq-item summary {
  cursor: pointer; list-style: none;
  padding: var(--space-4) var(--space-5);
  font: var(--fw-bold) 1.0625rem/1.3 var(--font-body); color: var(--claret);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; flex: none;
  font: var(--fw-bold) 1.5rem/1 var(--font-body); color: var(--olive-600);
  transition: transform var(--dur-fast) var(--ease-out);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-answer { padding: 0 var(--space-5) var(--space-5); font-size: var(--fs-body-lg); }

/* =========================================================================
   PROOF — sticky photo reveal (ORYZO-style)
   Default: simple grid.
   ========================================================================= */
.proof { position: relative; }
.proof.motion { height: 300vh; }
.proof-viewport { position: relative; }
.proof.motion .proof-viewport {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  background: var(--claret-900);
}
.proof-media { position: relative; }
.proof.motion .proof-media { position: absolute; inset: 0; }
.proof-frame { position: relative; }
.proof.motion .proof-frame {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}
.proof.motion .proof-frame img { width: 100%; height: 100%; object-fit: cover; }
.proof.motion .proof-frame.is-active { opacity: 1; }
.proof-plate-frame {
  display: flex; align-items: center; justify-content: center;
  background: var(--claret-900);
}
.proof-plate-inner {
  border: 1.5px dashed rgba(245,239,232,0.35);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  max-width: 30rem; text-align: center;
  color: var(--text-on-ink-mut);
  font: var(--fw-semibold) var(--fs-body-sm)/1.6 var(--font-body);
  text-transform: uppercase; letter-spacing: var(--ls-overline);
}
.proof-panel {
  position: relative; z-index: 3;
  background: rgba(251, 248, 243, 0.8); /* translucent crema — see the room through it */
  color: var(--text-body);
  border-right: var(--border-keyline);
  padding: var(--space-6);
}
.proof.motion .proof-panel h2 { color: var(--claret); }
.proof.motion .proof-panel .proof-caption { color: var(--text-muted); }
.proof.motion .proof-panel {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: min(380px, 44vw);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--space-7);
  transform: translateX(-101%);
  will-change: transform;
}
.proof-panel h2 { color: var(--text-on-ink); }
.proof-caption { color: var(--text-on-ink-mut); font-size: var(--fs-body-lg); min-height: 3.2em; }
.proof.motion .proof-caption span { display: none; }
.proof.motion .proof-caption span.is-active { display: inline; }
.proof:not(.motion) .proof-caption span { display: block; margin-bottom: var(--space-3); }
.proof-static-grid {
  display: grid; gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  padding: var(--space-7) var(--gutter);
  max-width: var(--container); margin-inline: auto;
}
.proof.motion .proof-static-grid { display: none; }
.proof:not(.motion) .proof-viewport { background: var(--claret-900); padding-block: var(--space-8); }
.proof:not(.motion) .proof-media { display: none; }
.proof:not(.motion) .proof-panel { background: transparent; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

/* (founder card now lives inside the fix panel — see .fix-founder) */

/* ---------- Venue ---------- */
.venue-split { display: grid; gap: var(--space-7); align-items: start; }
@media (min-width: 900px) { .venue-split { grid-template-columns: 1.1fr 1fr; } }
.venue-media { display: grid; gap: var(--space-6); }
.venue-carousel {
  position: relative;
  aspect-ratio: 4 / 3;
}
.venue-carousel .photo-sticker {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 0.8s var(--ease-out);
}
.venue-carousel .photo-sticker.is-on { opacity: 1; }
.venue-carousel .photo-sticker img { height: 100%; }
.map-card {
  border-radius: var(--radius-lg);
  border: var(--border-keyline);
  box-shadow: var(--shadow-sticker);
  background: var(--crema-pure);
  overflow: hidden;
  transform: rotate(var(--tilt-2));
}
.map-card svg { display: block; width: 100%; height: auto; }
.map-caption { padding: var(--space-3) var(--space-4); font-size: var(--fs-body-sm); color: var(--text-faint); }

/* ---------- Olive band (solid brand olive) + doodles + tally ---------- */
.band-olive { background: var(--olive); color: var(--crema); }
.band-olive h2, .band-olive h3 { color: var(--crema); }
.band-olive .section-head p, .band-olive p { color: rgba(245, 239, 232, 0.88); }
.band-olive strong { color: var(--crema); }

/* babies-welcome photo bullets */
.baby-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin-top: var(--space-7);
}
.baby-card { display: flex; flex-direction: column; gap: var(--space-4); }
.baby-card .photo-sticker { height: 190px; }
.baby-card .photo-sticker img { height: 100%; }
.baby-card-text { position: relative; padding-left: 34px; font-size: var(--fs-body-lg); }
.baby-card-text::before {
  content: ""; position: absolute; left: 0; top: 4px;
  width: 24px; height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 26'%3E%3Cpath d='M4 15 C 7 17 10 21 12 23 C 15 16 21 7 27 3' fill='none' stroke='%23F5EFE8' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  transform: rotate(-4deg);
}

.doodle {
  display: inline-block;
  width: 44px; height: 44px;
  margin-bottom: var(--space-3);
  transform: rotate(-4deg);
  transition: transform var(--dur-base) var(--ease-settle);
}
.doodle svg { width: 100%; height: 100%; display: block; }
.doodle path, .doodle circle, .doodle rect, .doodle ellipse { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.feature-grid__item:hover .doodle, .doodle:hover { transform: rotate(7deg) scale(1.08); }
/* light grounds: olive ink with a claret accent */
.band .doodle path, .band-deep .doodle path, .band-olive .doodle path,
.band .doodle circle, .band-deep .doodle circle, .band-olive .doodle circle { stroke: var(--olive-600); }
.band .doodle .doodle-accent, .band-deep .doodle .doodle-accent, .band-olive .doodle .doodle-accent { stroke: var(--claret); }
/* ink ground: crema ink with a neon accent */
.band-ink .doodle path, .band-ink .doodle circle { stroke: var(--crema); }
.band-ink .doodle .doodle-accent { stroke: var(--neon); }

.tally {
  display: flex; align-items: center; gap: var(--space-4);
  margin-top: var(--space-6);
}
.tally-num {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 4.5rem);
  line-height: 0.95;
  color: var(--claret);
  flex: none;
}
.tally-label {
  font: var(--fw-semibold) var(--fs-body-md)/1.35 var(--font-body);
  color: var(--text-muted);
  white-space: nowrap;
}
@media (max-width: 560px) { .tally-label { white-space: normal; } }

/* ---------- Events hero ---------- */
.events-hero { position: relative; overflow: hidden; padding-block: var(--space-9); }
.events-hero__grid { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 900px) { .events-hero__grid { grid-template-columns: 1.3fr 0.9fr; } }
.events-hero h1 { font-size: var(--fs-display-xl); max-width: 14ch; }
.events-hero .hero-sub { font: var(--text-lead); color: var(--text-muted); max-width: 36ch; }

/* ---------- Decorative blob ---------- */
.decor-blob { position: absolute; pointer-events: none; opacity: 0.07; z-index: 0; }

/* ---------- Footer ---------- */
.site-footer { padding-block: var(--space-9); }
.site-footer__inner { display: grid; gap: var(--space-7); grid-template-columns: 1fr; }
@media (min-width: 720px) { .site-footer__inner { grid-template-columns: 1.2fr 1fr 1fr; } }
.site-footer__brand { display: flex; align-items: center; gap: var(--space-4); }
.site-footer__brand img { width: 64px; height: 64px; }
.site-footer__wordmark { font: var(--fw-regular) 1.5rem/1 var(--font-display); color: var(--crema); }
.site-footer__tagline { max-width: 32ch; color: var(--text-on-ink-mut); }
.site-footer h4 {
  font: var(--fw-semibold) var(--fs-body-xs)/1 var(--font-body);
  text-transform: uppercase; letter-spacing: var(--ls-overline);
  color: var(--text-on-ink-mut); margin: 0 0 var(--space-4);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.site-footer a { text-decoration: none; color: var(--crema); font-weight: var(--fw-medium); }
.site-footer a:hover { color: var(--neon); }
.site-footer__join { color: var(--neon) !important; font-weight: var(--fw-bold) !important; }
.site-footer__bottom {
  margin-top: var(--space-8); padding-top: var(--space-5);
  border-top: 1px solid rgba(245,239,232,0.16);
  color: var(--text-on-ink-mut); font-size: var(--fs-body-sm);
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-4); flex-wrap: wrap;
}
.site-footer__note { text-align: right; }

/* ---------- Newsletter (beehiiv embed) ----------
   The form's own inputs/IDs are left untouched — beehiiv injects and owns
   them. We only give the embed room and centre it under our heading. */
/* full-bleed olive band, flush to the footer, matching the beehiiv card fill */
.newsletter-band {
  background: var(--olive);
  /* the beehiiv iframe carries its own generous top whitespace, so trim the
     section's own top padding to avoid a double gap above the heading */
  padding-top: var(--space-5);
  padding-bottom: 0;      /* meet the footer with no gap */
}
.newsletter-embed {
  display: flex;
  justify-content: center;
}
.newsletter-embed > * { max-width: 100% !important; }
.newsletter-embed iframe { max-width: 100% !important; }

/* ---------- News (hidden page, future-proofing) ---------- */
.news-list { display: grid; gap: var(--space-7); margin-top: var(--space-7); }
.news-post h2 { margin-top: var(--space-2); }
.news-post__img { max-height: 280px; margin-bottom: var(--space-5); }
.news-post__img img { height: 100%; }
.news-post__summary { font: var(--text-lead); color: var(--text-muted); }

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