/* Jonny's Angels - site styles
   Theme: LIGHT, locked page-wide (client preference, dark mode removed).
   Radius system (documented lock): buttons = pill, cards/panels = 16px,
   inputs = 10px, media thumbs = 12px, avatars = circle.
   Type: Bitter (display, self-hosted), Source Sans 3 (body). Palette: see the
   baseline block below. */

:root {
  /* ==========================================================
     JONNY'S ANGELS BASELINE PALETTE   |   BLUE AND GOLD
     Kathryn's brief: blue and gold. Blue carries the sky, gold
     carries the light through it. The neutrals are blue-tinted
     so nothing on the page sits outside the family.
     Every text pairing in use is verified WCAG AA.
     Change colour HERE and nowhere else.
     ========================================================== */

  /* Blue ramp: night sky down to daylight */
  --blue-900: #102138;   /* Midnight    deepest ground, footer base */
  --blue-800: #1d3a5f;   /* Navy        headings and dark panels */
  --blue-700: #235684;   /* Ocean       hovers and deep accents */
  --blue-600: #2f6da8;   /* Sky         PRIMARY BLUE, links, labels */
  --blue-400: #6ba6d8;   /* Cornflower  hero sky, illustration */
  --blue-200: #a8cbe8;   /* Mist        soft fills */
  --blue-100: #d8e8f9;   /* Haze        section grounds */
  --blue-50:  #edf5fd;   /* Whisper     lightest tint */

  /* Gold ramp: sunrise light through the cloud */
  --gold-700: #e9975f;   /* Amber       warm edge, horizon */
  --gold-600: #f2c268;   /* Sunlit      button hover */
  --gold-500: #ffd98f;   /* Heaven Gold PRIMARY GOLD, buttons */
  --gold-300: #ffe6b4;   /* Honey       warm section grounds */
  --gold-100: #fff6e8;   /* Cream       warm white, text on dark */

  /* Neutrals, tinted toward the blue so they belong to the family */
  --ink:     #22364f;    /* body text            11.6:1 on page */
  --muted:   #5c6b7f;    /* secondary text        5.1:1 on page */
  --line:    #dbe4ec;    /* borders and rules */
  --bg:      #fbf8f3;    /* Ivory Sand, page ground */
  --surface: #ffffff;    /* cards and panels */

  /* ---- Roles. Components reference these, never raw hexes ---- */
  --accent:      var(--blue-600);
  --accent-deep: var(--blue-700);
  --accent-soft: var(--blue-50);
  --on-accent:   var(--gold-100);
  --gold:        var(--gold-500);
  --gold-deep:   var(--gold-600);
  --navy:        var(--blue-800);
  --plum:        var(--blue-800);  /* legacy name, kept so old rules resolve */
  --surface-tint: var(--blue-50);
  --sky-hi:   var(--blue-100);
  --sky-mid:  var(--blue-200);
  --sky-deep: var(--blue-600);
  --sky-ink:  var(--blue-800);
  --peach:    #ffdcb8;
  --coral:    var(--gold-700);
  --cream:    var(--gold-100);

  --shadow: 0 14px 40px rgba(40, 70, 110, 0.12);
  --r-card: 16px;
  --r-input: 10px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}


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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, .display {
  font-family: "Bitter", Georgia, serif; font-variant-ligatures: none;
  font-weight: 700;
  /* Bitter is a slab serif: its J and f are the most upright of the bold
     serifs, which is why it replaced Fraunces. Ligatures stay off so no
     ft/fi pair ever joins into a curl. */
  line-height: 1.12;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.4rem, 5.2vw, 3.9rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); }
h3 { font-size: 1.45rem; line-height: 1.25; }

p { max-width: 65ch; }
.lede { font-size: 1.2rem; color: var(--muted); }

a { color: var(--accent-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }

.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 760px; margin-inline: auto; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  height: 68px; display: flex; align-items: center; gap: 28px;
  max-width: 1180px; margin: 0 auto; padding: 0 24px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-family: "Bitter", Georgia, serif; font-variant-ligatures: none;
  font-weight: 700; font-size: 1.3rem; color: var(--ink);
  text-decoration: none; white-space: nowrap;
}
.brand svg { width: 30px; height: 28px; flex: none; }
.nav-links { display: flex; gap: 22px; margin-left: auto; align-items: center; }
.nav-links a {
  color: var(--muted); text-decoration: none; font-size: 0.95rem; font-weight: 500;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); }
.nav-links a.btn-primary, .nav-links a.btn-primary:hover, .nav-links a.btn-primary[aria-current="page"] { color: var(--plum); }
.nav-toggle { display: none; }

/* ---------- Buttons (pill lock) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 999px; padding: 13px 26px;
  font-family: "Source Sans 3", sans-serif; font-weight: 600; font-size: 1rem;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(0.98); }
.btn-primary { background: var(--gold); color: var(--plum); }
.btn-primary:hover { background: var(--gold-deep); color: var(--plum); box-shadow: var(--shadow); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-deep); }
.btn-sm { padding: 10px 20px; font-size: 0.92rem; }

/* ---------- Hero ---------- */
.hero { padding: 72px 0 88px; }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: center;
}
.hero h1 { margin: 0 0 18px; }
.hero .lede { margin-bottom: 30px; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-media { position: relative; }
.hero-media img {
  width: 100%; border-radius: var(--r-card); aspect-ratio: 4 / 5; object-fit: cover;
  box-shadow: var(--shadow);
}
.hero-caption { margin-top: 12px; font-size: 0.9rem; color: var(--muted); }

/* ---------- Sections ---------- */
.section { padding: 84px 0; }
.section-tint { background: var(--surface-tint); }
.section-head { margin-bottom: 44px; }
.section-head p { color: var(--muted); margin-top: 12px; }

.eyebrow {
  display: inline-block; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-deep);
  margin-bottom: 12px;
}

/* ---------- Cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 30px;
}
.card h3 { margin-bottom: 10px; }
.card .price {
  font-family: "Bitter", Georgia, serif; font-variant-ligatures: none; font-weight: 700;
  font-size: 2rem; color: var(--ink); margin: 8px 0 2px;
}
.card .price small { font-family: "Source Sans 3", sans-serif; font-size: 0.9rem; font-weight: 500; color: var(--muted); }
.card p { color: var(--muted); font-size: 0.98rem; }
.card .btn { margin-top: 18px; }
.card-note { font-size: 0.88rem; color: var(--muted); margin-top: 10px; }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.grid-asym { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); gap: 26px; }

.feature-card { border-top: 3px solid var(--accent); }

/* ---------- Split rows ---------- */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 60px; align-items: center; }
.split img { width: 100%; border-radius: var(--r-card); aspect-ratio: 4 / 3; object-fit: cover; box-shadow: var(--shadow); }
.split h2 { margin-bottom: 16px; }
.split p + p { margin-top: 14px; }
.split .btn { margin-top: 24px; }

/* ---------- Rhythm / schedule ---------- */
.rhythm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.rhythm-item {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 30px; display: flex; flex-direction: column; gap: 8px;
}
.rhythm-when {
  font-weight: 700; color: var(--accent-deep); font-size: 0.95rem;
}

/* ---------- Accent band ---------- */
.band { background: var(--accent); color: var(--on-accent); }
.band .section-head p, .band p { color: color-mix(in srgb, var(--on-accent) 82%, transparent); }
.band h2 { color: var(--on-accent); }
.band-inner { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 48px; align-items: center; }
.band form { display: flex; gap: 12px; flex-wrap: wrap; }
.band input[type="email"] {
  flex: 1 1 240px; padding: 13px 18px; border-radius: var(--r-input);
  border: 1px solid color-mix(in srgb, var(--on-accent) 40%, transparent);
  background: color-mix(in srgb, var(--on-accent) 12%, transparent);
  color: var(--on-accent); font-size: 1rem; font-family: inherit;
}
.band input[type="email"]::placeholder { color: color-mix(in srgb, var(--on-accent) 65%, transparent); }
.band .btn-invert { background: var(--gold); color: var(--plum); }
.band .btn-invert:hover { box-shadow: var(--shadow); }

/* ---------- Quote / story ---------- */
.story { max-width: 820px; margin: 0 auto; text-align: center; }
.story blockquote {
  font-family: "Bitter", Georgia, serif; font-variant-ligatures: none;
  font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 500; line-height: 1.35;
}
.story cite { display: block; margin-top: 20px; font-style: normal; color: var(--muted); font-size: 1rem; }

/* ---------- Books ---------- */
.book-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.book-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  overflow: hidden; display: flex; flex-direction: column;
}
.book-cover {
  aspect-ratio: 3 / 4; background: linear-gradient(160deg, #c2d8ec 0%, #f2ddba 55%, #ffd9ae 100%);
  display: flex; align-items: center; justify-content: center; padding: 18px;
  font-family: "Bitter", Georgia, serif; font-variant-ligatures: none; font-weight: 700; font-size: 1.2rem;
  color: var(--plum); line-height: 1.2;
}
/* Never crop a book cover: they arrive in every ratio from square to
   2:3, so they sit whole on a soft ground instead. */
.book-cover { background: linear-gradient(180deg, var(--blue-50) 0%, #fdf6ec 100%); }
.book-cover img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.book-body { padding: 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.book-body p { font-size: 0.92rem; color: var(--muted); flex: 1; }
.book-price { font-weight: 700; }

/* ---------- FAQ ---------- */
.faq { max-width: 780px; margin: 0 auto; }
.faq details {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 4px 26px; margin-bottom: 14px;
}
.faq summary {
  cursor: pointer; font-weight: 600; padding: 18px 0; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.3rem; color: var(--accent-deep); flex: none; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { color: var(--muted); padding-bottom: 20px; }

/* ---------- Forms ---------- */
.form-grid { display: grid; gap: 18px; max-width: 640px; }
.form-field { display: grid; gap: 8px; }
.form-field label { font-weight: 600; font-size: 0.95rem; }
.form-field input, .form-field textarea, .form-field select {
  padding: 13px 16px; border-radius: var(--r-input); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font-family: inherit; font-size: 1rem;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
.form-help { font-size: 0.88rem; color: var(--muted); }

/* ---------- Notice ---------- */
.notice {
  border: 1px solid var(--line); border-left: 4px solid var(--accent);
  background: var(--surface); border-radius: var(--r-card);
  padding: 20px 24px; font-size: 0.95rem; color: var(--muted); max-width: 780px;
}
.notice strong { color: var(--ink); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 60px; align-items: start; }
.contact-list { display: grid; gap: 18px; }
.contact-list div { display: grid; gap: 2px; }
.contact-list dt { font-weight: 700; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.contact-list dd { font-size: 1.05rem; }

/* ---------- Footer ---------- */
footer {
  border-top: 1px solid var(--line); padding: 56px 0 40px; margin-top: 40px;
  background: var(--surface-tint);
}
.footer-grid { display: grid; grid-template-columns: 2fr repeat(4, minmax(0, 1fr)); gap: 40px; margin-bottom: 40px; }
.footer-grid h4 { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 14px; color: var(--muted); }
.footer-grid ul { list-style: none; display: grid; gap: 10px; }
.footer-grid a { color: var(--ink); text-decoration: none; font-size: 0.98rem; }
.footer-grid a:hover { color: var(--accent-deep); }
.footer-note { font-size: 0.88rem; color: var(--muted); max-width: 72ch; }
.footer-legal { font-size: 0.85rem; color: var(--muted); margin-top: 24px; }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(22px); }
.reveal.in {
  opacity: 1; transform: none;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Page hero (interior) ---------- */
.page-hero { padding: 72px 0 24px; }
.page-hero h1 { margin-bottom: 14px; }
.page-hero .lede { max-width: 62ch; }

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  .hero-grid, .split, .band-inner, .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .grid-3 { grid-template-columns: 1fr; }
  .book-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero { padding: 48px 0 64px; }
  .section { padding: 60px 0; }
}
@media (max-width: 640px) {
  .grid-2, .grid-asym, .rhythm, .book-grid, .footer-grid { grid-template-columns: 1fr; }
  .nav-links {
    display: none; position: absolute; top: 68px; left: 0; right: 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: flex-start; padding: 20px 24px; gap: 16px;
  }
  .nav-links.open { display: flex; }
  .nav-toggle {
    display: inline-flex; margin-left: auto; background: none; border: 1px solid var(--line);
    border-radius: 999px; padding: 8px 14px; color: var(--ink); font: inherit; cursor: pointer;
  }
}

/* ---------- Heaven sky (from the book cover palette) ---------- */
:root {
  --sky-top: #a9c8e4;
  --sky-mid: #c9dceb;
  --sky-low: #ffd9ae;
  --sky-glow: rgba(255, 205, 140, 0.9);
  --cloud-a: rgba(255, 246, 238, 0.92);
  --cloud-b: rgba(250, 220, 175, 0.80);
  --sky-ink: #1e3c5e;
}

.sky {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--blue-100) 0%, #eff6fd 56%, #fdf5ea 100%);
  color: var(--sky-ink);
}
.sky h1, .sky h2 { color: var(--sky-ink); }
.sky .lede { color: color-mix(in srgb, var(--sky-ink) 78%, transparent); }
.sky > .container { position: relative; z-index: 2; }

.sky-sun {
  position: absolute; z-index: 0; pointer-events: none;
  width: 60vw; height: 60vw; max-width: 900px; max-height: 900px;
  right: -10vw; bottom: -28vw;
  background: radial-gradient(circle, var(--sky-glow) 0%, rgba(255, 214, 160, 0) 65%);
  animation: sunPulse 9s ease-in-out infinite alternate;
}

.sky-clouds { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.sky-clouds span {
  position: absolute; border-radius: 50%;
  filter: blur(22px); will-change: transform;
  background: radial-gradient(closest-side, var(--cloud-a) 0%, rgba(255,255,255,0) 72%);
  animation: billow 18s ease-in-out infinite alternate;
  transform-origin: 50% 100%;
}
.sky-clouds span:nth-child(2n) {
  background: radial-gradient(closest-side, var(--cloud-b) 0%, rgba(255,255,255,0) 72%);
}
.sky-clouds .c1 { width: 55vw; height: 26vw; left: -12vw; bottom: -12vw; animation-duration: 21s; }
.sky-clouds .c2 { width: 48vw; height: 24vw; left: 16vw;  bottom: -14vw; animation-duration: 17s; animation-delay: -6s; }
.sky-clouds .c3 { width: 60vw; height: 28vw; right: -14vw; bottom: -13vw; animation-duration: 24s; animation-delay: -11s; }
.sky-clouds .c4 { width: 34vw; height: 17vw; left: 4vw;   bottom: -4vw;  animation-duration: 14s; animation-delay: -3s; }
.sky-clouds .c5 { width: 30vw; height: 15vw; right: 8vw;  bottom: -3vw;  animation-duration: 16s; animation-delay: -9s; }
.sky-clouds .c6 { width: 24vw; height: 12vw; left: 40vw;  bottom: -2vw;  animation-duration: 12s; animation-delay: -5s; }
.sky-clouds .c7 { width: 20vw; height: 11vw; right: 30vw; bottom: 2vw;   animation-duration: 19s; animation-delay: -14s; }

@keyframes billow {
  from { transform: translate3d(0, 3vw, 0) scale(0.94); }
  to   { transform: translate3d(0, -2vw, 0) scale(1.16); }
}
@keyframes sunPulse {
  from { opacity: 0.75; transform: scale(0.96); }
  to   { opacity: 1;    transform: scale(1.06); }
}

.sky-lite { padding: 84px 0; }
.sky-lite .sky-clouds span { filter: blur(26px); }

/* ---------- Entrance + ambient motion ---------- */
.rise { opacity: 0; transform: translateY(26px); animation: riseIn 0.9s var(--ease) forwards; }
.rise.d1 { animation-delay: 0.08s; }
.rise.d2 { animation-delay: 0.18s; }
.rise.d3 { animation-delay: 0.30s; }
.rise.d4 { animation-delay: 0.44s; }
@keyframes riseIn { to { opacity: 1; transform: none; } }

.float-slow { animation: floatY 7s ease-in-out infinite alternate; }
@keyframes floatY { from { transform: translateY(6px); } to { transform: translateY(-8px); } }

.card { transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.book-card { transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.book-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

@media (prefers-reduced-motion: reduce) {
  .sky-clouds span, .sky-sun, .float-slow { animation: none; }
  .rise { animation: none; opacity: 1; transform: none; }
  .card:hover, .book-card:hover { transform: none; }
}

/* ---------- Stan-style offer rows ---------- */
.offer { display: flex; gap: 18px; align-items: flex-start; }
.offer .thumb {
  width: 76px; height: 76px; border-radius: 12px; object-fit: cover; flex: none;
  box-shadow: 0 6px 18px rgba(34, 62, 105, 0.16);
}
.offer > div { min-width: 0; }

.avatar-chip { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.avatar-chip img {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none;
  border: 2px solid var(--surface); box-shadow: 0 4px 12px rgba(34, 62, 105, 0.2);
}
.avatar-chip span { font-size: 0.9rem; font-weight: 600; color: var(--muted); }

.portrait-frame { position: relative; }
.portrait-frame img {
  width: 100%; border-radius: var(--r-card); aspect-ratio: 4 / 5; object-fit: cover;
  box-shadow: 0 24px 60px rgba(34, 48, 74, 0.30);
}

/* ---------- Group finder ---------- */
.finder { max-width: 640px; }
.finder-result {
  margin-top: 18px; padding: 22px 26px; border-radius: var(--r-card);
  background: var(--surface); border: 1px solid var(--line); color: var(--muted);
}
.finder-result strong { color: var(--ink); }
.finder-result[hidden] { display: none; }

@media (max-width: 640px) {
  .offer { flex-direction: row; }
  .sky-clouds span { filter: blur(16px); }
}

/* ---------- Mega nav ---------- */
.nav-item { display: inline-flex; align-items: center; }
.nav-drop {
  background: none; border: none; cursor: pointer; font: inherit;
  color: var(--muted); font-size: 0.95rem; font-weight: 500; padding: 0;
  display: inline-flex; align-items: center; gap: 6px;
}
.nav-drop::after {
  content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px);
  transition: transform 0.25s var(--ease);
}
.nav-drop:hover, .nav-drop[aria-expanded="true"], .nav-links a.active { color: var(--ink); }
.nav-drop[aria-expanded="true"]::after { transform: rotate(225deg) translateY(-2px); }

.mega {
  display: none; position: absolute; left: 0; right: 0; top: 68px;
  background: var(--surface); border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow); padding: 30px 0 34px;
}
.nav-item.open .mega { display: block; }
.mega-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 30px;
}
.mega-title {
  grid-column: 1 / -1; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
.mega-link {
  display: flex; gap: 14px; align-items: flex-start; text-decoration: none;
  padding: 12px 14px; border-radius: 12px; color: var(--ink);
  transition: background 0.2s var(--ease);
}
.mega-link:hover { background: var(--surface-tint); color: var(--ink); }
.mega-link img { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; flex: none; }
.mega-link > span:last-child { flex: 1; min-width: 0; }
.mega-link strong { display: block; font-size: 0.98rem; color: var(--ink); }
.mega-link span { display: block; font-size: 0.86rem; color: var(--muted); line-height: 1.45; }

@media (min-width: 901px) {
  .nav-item:hover .mega, .nav-item:focus-within .mega { display: block; }
}

/* ---------- Blog ---------- */
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.post-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: var(--ink);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.post-card img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.post-card-body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.post-cat { font-size: 0.8rem; font-weight: 700; color: var(--accent-deep); }
.post-card h3 { font-size: 1.25rem; }
.post-card p { font-size: 0.94rem; color: var(--muted); flex: 1; }
.post-meta { font-size: 0.85rem; color: var(--muted); }

.post-card-featured { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); }
.post-card-featured img { height: 100%; aspect-ratio: auto; }
.post-card-featured .post-card-body { padding: 34px 38px; justify-content: center; }
.post-card-featured h3 { font-size: 1.9rem; }

.post-hero { padding: 64px 0 36px; }
.post-hero h1 { max-width: 22ch; margin-bottom: 14px; }
.post-hero .post-meta { margin-top: 6px; }
.post-cover { border-radius: var(--r-card); aspect-ratio: 21 / 9; object-fit: cover; width: 100%; box-shadow: var(--shadow); }

.prose { max-width: 720px; margin: 0 auto; }
.prose h2 { margin: 44px 0 14px; font-size: 1.7rem; }
.prose p { margin-bottom: 16px; }
.prose ul, .prose ol { margin: 0 0 16px 22px; }
.prose li { margin-bottom: 8px; }
.prose blockquote {
  font-family: "Bitter", Georgia, serif; font-variant-ligatures: none; font-size: 1.4rem; line-height: 1.4;
  border-left: 3px solid var(--accent); padding: 6px 0 6px 22px; margin: 26px 0; color: var(--ink);
}
.prose .cta-box {
  background: var(--surface-tint); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 26px 30px; margin: 40px 0 8px;
}
.prose .cta-box p { color: var(--muted); }
.prose .cta-box .btn { margin-top: 6px; }

@media (max-width: 900px) {
  .post-grid { grid-template-columns: 1fr 1fr; }
  .post-card-featured { grid-template-columns: 1fr; }
  .post-card-featured img { aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) {
  .post-grid { grid-template-columns: 1fr; }
  .nav-item { display: block; width: 100%; }
  .nav-drop { width: 100%; justify-content: space-between; padding: 4px 0; font-size: 1rem; }
  .mega { position: static; display: none; box-shadow: none; border: none; padding: 6px 0 10px; background: transparent; }
  .mega .container { padding: 0; }
  .mega-grid { grid-template-columns: 1fr; gap: 2px; }
  .mega-link { padding: 8px 6px; }
  .mega-link img { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- Sunset hero (Kathryn's photo palette: dusk blue over golden cloud sea) ---------- */
.sky-sunset {
  position: relative; overflow: hidden;
  background:
    linear-gradient(180deg,
      #3f5170 0%, #56688c 22%, #8d92ac 40%,
      #cf9f79 58%, #f3c48e 72%, #ffe3b3 86%, #f6d9b4 100%);
  color: #fdf6ea;
}
.sky-sunset h1 { color: #fffdf7; text-shadow: 0 2px 24px rgba(30, 40, 70, 0.45); }
.sky-sunset .lede { color: rgba(253, 246, 234, 0.92); text-shadow: 0 1px 14px rgba(30, 40, 70, 0.4); }
.sky-sunset > .container { position: relative; z-index: 6; }
.sky-sunset .btn-ghost { color: #fffdf7; border-color: rgba(255, 253, 247, 0.55); }
.sky-sunset .btn-ghost:hover { border-color: #fffdf7; color: #fffdf7; background: rgba(255, 253, 247, 0.12); }
.sky-sunset .btn-primary { background: #fffdf7; color: #22548f; }
.sky-sunset .btn-primary:hover { background: #ffffff; color: #22548f; box-shadow: 0 14px 40px rgba(30, 40, 70, 0.35); }

/* sun + halo */
.sunset-sun {
  position: absolute; z-index: 1; pointer-events: none;
  width: 46vw; height: 46vw; max-width: 720px; max-height: 720px;
  left: 50%; top: 58%; transform: translate(-50%, -50%);
  background:
    radial-gradient(circle, rgba(255,250,235,0.95) 0%, rgba(255,224,166,0.75) 18%, rgba(255,203,133,0.35) 40%, rgba(255,203,133,0) 68%);
  animation: sunPulse 8s ease-in-out infinite alternate;
}

/* god rays: two counter-rotating conic fans from the sun */
.sunset-rays, .sunset-rays::after {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  width: 160vw; height: 160vw; left: 50%; top: 58%;
  margin: -80vw 0 0 -80vw;
  background: repeating-conic-gradient(from 0deg,
    rgba(255, 240, 210, 0.0) 0deg 9deg,
    rgba(255, 240, 210, 0.10) 12deg 15deg,
    rgba(255, 240, 210, 0.0) 18deg 24deg);
  -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.35) 35%, transparent 62%);
  mask-image: radial-gradient(circle, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.35) 35%, transparent 62%);
  animation: raysTurn 90s linear infinite;
}
.sunset-rays::after { animation: raysTurnBack 120s linear infinite; opacity: 0.7; margin: 0; left: 0; top: 0; }
@keyframes raysTurn { to { transform: rotate(360deg); } }
@keyframes raysTurnBack { to { transform: rotate(-360deg); } }

/* cloud sea: warm lit clouds + blue shadow clouds */
.sky-sunset .sky-clouds { z-index: 2; }
.sky-sunset .sky-clouds span {
  background: radial-gradient(closest-side, rgba(255, 240, 218, 0.95) 0%, rgba(255, 240, 218, 0) 72%);
}
.sky-sunset .sky-clouds span:nth-child(2n) {
  background: radial-gradient(closest-side, rgba(122, 138, 176, 0.38) 0%, rgba(122, 138, 176, 0) 72%);
}
.sky-sunset .sky-clouds span:nth-child(3n) {
  background: radial-gradient(closest-side, rgba(255, 214, 165, 0.85) 0%, rgba(255, 214, 165, 0) 72%);
}

/* doves */
.doves { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.dove {
  position: absolute; top: 0; left: 0;
  width: 54px; height: auto; fill: rgba(255, 253, 247, 0.95);
  filter: drop-shadow(0 2px 6px rgba(60, 70, 100, 0.25));
  offset-rotate: auto 0deg;
  animation: flyAcross 30s linear infinite;
}
.dove .wingL, .dove .wingR { transform-box: fill-box; }
.dove .wingL { transform-origin: 90% 85%; animation: flapL 0.85s ease-in-out infinite alternate; }
.dove .wingR { transform-origin: 10% 85%; animation: flapR 0.85s ease-in-out infinite alternate; }
@keyframes flapL { from { transform: rotate(6deg); } to { transform: rotate(-38deg); } }
@keyframes flapR { from { transform: rotate(-6deg); } to { transform: rotate(38deg); } }
@keyframes flyAcross { from { offset-distance: 0%; } to { offset-distance: 100%; } }

.dove.dv1 { offset-path: path("M -80 170 C 300 90, 700 200, 1100 110 C 1300 70, 1450 120, 1600 90"); width: 60px; animation-duration: 34s; }
.dove.dv2 { offset-path: path("M -60 690 C 350 620, 800 720, 1250 620 C 1400 580, 1500 610, 1600 590"); width: 40px; opacity: 0.85; animation-duration: 42s; animation-delay: -14s; }
.dove.dv2 .wingL, .dove.dv2 .wingR { animation-duration: 0.7s; }
.dove.dv3 { offset-path: path("M -70 100 C 250 170, 650 60, 1050 150 C 1250 200, 1450 140, 1600 170"); width: 30px; opacity: 0.7; animation-duration: 50s; animation-delay: -30s; }
.dove.dv3 .wingL, .dove.dv3 .wingR { animation-duration: 0.6s; }
.dove.dv4 { offset-path: path("M -80 710 C 60 680, 200 730, 400 690 C 800 610, 1200 720, 1600 640"); width: 24px; opacity: 0.55; animation-duration: 58s; animation-delay: -8s; }
.dove.dv4 .wingL, .dove.dv4 .wingR { animation-duration: 0.55s; }

/* rising angel lights */
.motes { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.motes i {
  position: absolute; bottom: -30px; display: block;
  width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,250,230,0.95), rgba(255,250,230,0));
  filter: blur(1px);
  animation: moteRise 16s linear infinite;
}
.motes i:nth-child(1) { left: 8%;  animation-duration: 19s; animation-delay: -3s;  width: 10px; height: 10px; }
.motes i:nth-child(2) { left: 22%; animation-duration: 15s; animation-delay: -9s; }
.motes i:nth-child(3) { left: 37%; animation-duration: 22s; animation-delay: -6s;  width: 6px;  height: 6px; }
.motes i:nth-child(4) { left: 52%; animation-duration: 17s; animation-delay: -12s; }
.motes i:nth-child(5) { left: 64%; animation-duration: 21s; animation-delay: -1s;  width: 12px; height: 12px; }
.motes i:nth-child(6) { left: 78%; animation-duration: 14s; animation-delay: -7s; }
.motes i:nth-child(7) { left: 90%; animation-duration: 20s; animation-delay: -11s; width: 6px; height: 6px; }
@keyframes moteRise {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  8%   { opacity: 0.9; }
  60%  { opacity: 0.6; transform: translateY(-46vh) translateX(14px); }
  100% { transform: translateY(-82vh) translateX(-10px); opacity: 0; }
}

.sky-sunset::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; z-index: 5;
  background: linear-gradient(180deg, rgba(246, 248, 251, 0), var(--bg));
  pointer-events: none;
}
.sky-sunset .portrait-frame img {
  box-shadow: 0 30px 80px rgba(30, 40, 70, 0.45);
  border: 3px solid rgba(255, 253, 247, 0.6);
}

@media (prefers-reduced-motion: reduce) {
  .sunset-rays, .sunset-rays::after, .sunset-sun, .motes i,
  .dove, .dove .wingL, .dove .wingR { animation: none; }
  .dove { offset-distance: 40%; }
  .dove.dv4 { offset-distance: 60%; }
}
@media (max-width: 900px) {
  .dove { width: 34px; }
  .dove.dv3, .dove.dv4 { display: none; }
  .sunset-sun { width: 90vw; height: 90vw; }
}

/* ---------- Children's collection strip ---------- */
.kids-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.kids-tile {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 4px; padding: 14px 14px 18px; border-radius: var(--r-card);
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.95rem;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.kids-tile img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: contain; border-radius: 10px;
  background: linear-gradient(180deg, var(--blue-50) 0%, #fdf6ec 100%); margin-bottom: 10px;
}
.kids-tile strong { display: block; line-height: 1.25; }
.kids-tile:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(38, 86, 138, 0.16); }
.kids-tile span { font-family: "Source Sans 3", sans-serif; font-weight: 400; font-size: 0.82rem; color: var(--muted); }
@media (max-width: 640px) { .kids-strip { grid-template-columns: 1fr 1fr; } }

/* ---------- Twilight flight hero (ported from the Claude Design export) ---------- */
.hero-dc {
  position: relative; width: 100%; min-height: 100dvh; overflow: hidden;
  background: linear-gradient(180deg, var(--blue-400) 0%, #8dbce2 16%, #b7d5ec 32%, #dcebf5 46%, #f6e8cf 60%, var(--gold-300) 72%, #ffdda2 84%, #ffd694 100%);
  color: var(--ink);
  display: flex; align-items: center;
}
.hero-dc .glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(130% 55% at 50% 80%, rgba(255, 195, 115, 0.5) 0%, rgba(255, 200, 130, 0.16) 45%, rgba(0, 0, 0, 0) 70%);
  animation: dcSkyGlow 9s ease-in-out infinite;
}
.hero-dc .stars { position: absolute; inset: 0; pointer-events: none; }
.hero-dc .stars i { position: absolute; border-radius: 50%; background: #ffffff; animation: dcTwinkle 4s ease-in-out infinite; }
.hero-dc .dc-sun {
  position: absolute; left: 71%; top: 52%; transform: translateX(-50%);
  width: 52vmin; height: 52vmin; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff3d6 0%, #ffd98a 26%, rgba(255, 170, 90, 0.5) 52%, rgba(255, 140, 90, 0) 72%);
  animation: dcSunPulse 7s ease-in-out infinite;
}
.hero-dc .dc-core {
  position: absolute; left: 71%; top: 60%; transform: translateX(-50%);
  width: 14vmin; height: 14vmin; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fffdf4 0%, #ffedb6 55%, #ffc46e 100%);
  box-shadow: 0 0 110px 40px rgba(255, 205, 120, 0.7); filter: blur(1px);
}
.hero-dc .sea { position: absolute; left: 0; bottom: 0; width: 100%; height: 58%; pointer-events: none; }
.hero-dc .layer { position: absolute; left: 0; width: 200%; }
.hero-dc .layer.far  { bottom: 16%; height: 70%; animation: dcDrift 170s linear infinite; }
.hero-dc .layer.mid  { bottom: 6%;  height: 80%; animation: dcDrift 105s linear infinite; }
.hero-dc .layer.near { bottom: -4%; height: 85%; animation: dcDrift 60s linear infinite; }
.hero-dc .layer i { position: absolute; border-radius: 50%; display: block; }
.hero-dc .sea .floor {
  position: absolute; bottom: 0; left: 0; width: 100%; height: 30%;
  background: linear-gradient(180deg, rgba(255, 214, 170, 0) 0%, rgba(250, 205, 150, 0.55) 30%, #eec39b 62%, #e8b48a 100%);
}
.hero-dc .sea .haze {
  position: absolute; bottom: 0; left: 0; width: 100%; height: 45%;
  background: linear-gradient(180deg, rgba(255, 205, 160, 0) 0%, rgba(255, 210, 160, 0.12) 40%, rgba(244, 195, 140, 0.35) 100%);
  filter: blur(8px);
}

.hero-dc .dc-content {
  position: relative; z-index: 4; width: 100%;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: clamp(32px, 5vw, 80px); padding: 110px 6vw 60px;
}
.hero-dc .dc-copy { flex: 1 1 420px; max-width: 620px; }
.hero-dc .dc-eyebrow {
  font-size: 14px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--blue-700); margin-bottom: 20px; animation: dcRise 1s ease-out 0.15s both;
}
.hero-dc h1 {
  font-weight: 600; font-size: clamp(44px, 5.6vw, 84px); line-height: 1.05; color: #16293f;
  margin: 0 0 22px; max-width: 15ch; text-wrap: balance;
  text-shadow: 0 4px 40px rgba(255, 255, 255, 0.5); animation: dcRise 1.1s ease-out 0.3s both;
}
.hero-dc .dc-sub {
  font-size: clamp(17px, 1.4vw, 21px); line-height: 1.6; color: #2c4a6b; max-width: 52ch;
  margin: 0 0 30px; text-wrap: pretty;
  text-shadow: 0 1px 16px rgba(255, 255, 255, 0.55), 0 1px 4px rgba(255, 255, 255, 0.35);
  animation: dcRise 1.1s ease-out 0.45s both;
}
.hero-dc .dc-ctas { display: flex; gap: 18px; flex-wrap: wrap; animation: dcRise 1.1s ease-out 0.75s both; }
.hero-dc .dc-ctas .btn-primary { box-shadow: 0 8px 30px rgba(255, 180, 100, 0.4); padding: 16px 34px; font-size: 17px; }
.hero-dc .dc-ctas .btn-ghost {
  border: 1.5px solid rgba(29, 58, 95, 0.45); background: rgba(255, 255, 255, 0.35);
  color: var(--blue-800); padding: 16px 34px; font-size: 17px; backdrop-filter: blur(4px);
}
.hero-dc .dc-ctas .btn-ghost:hover { border-color: var(--blue-800); color: #12253c; background: rgba(255, 255, 255, 0.55); }

.hero-dc .dc-capture {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
  max-width: 560px; margin: 0 0 14px; animation: dcRise 1.1s ease-out 0.6s both;
}
.hero-dc .dc-capture input[type="email"] {
  flex: 1 1 240px; padding: 15px 22px; font-size: 16.5px; font-family: inherit;
  border: 1.5px solid rgba(29, 58, 95, 0.35); border-radius: 999px;
  background: rgba(255, 255, 255, 0.82); color: #16293f; outline: none;
  backdrop-filter: blur(4px); transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.hero-dc .dc-capture input[type="email"]::placeholder { color: var(--muted); }
.hero-dc .dc-capture input[type="email"]:focus {
  border-color: var(--blue-600); box-shadow: 0 0 0 4px rgba(47, 109, 168, 0.18); background: #ffffff;
}
.hero-dc .dc-capture .btn-primary {
  box-shadow: 0 8px 30px rgba(255, 180, 100, 0.45); padding: 15px 32px; font-size: 16.5px;
}
.hero-dc .dc-note {
  font-size: 14.5px; color: #3f5170; max-width: 46ch; margin: 0 0 26px;
  animation: dcRise 1.1s ease-out 0.68s both;
}

.hero-dc .dc-portrait { flex: 0 0 auto; position: relative; animation: dcRise 1.2s ease-out 0.5s both; }
.hero-dc .dc-portrait::before {
  content: ""; position: absolute; inset: 4% 10%; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 240, 200, 0.55) 0%, rgba(255, 220, 160, 0.22) 50%, rgba(255, 220, 160, 0) 72%);
  animation: dcSunPulse 8s ease-in-out infinite; transform: none;
}
.hero-dc .dc-portrait img {
  display: block; width: clamp(290px, 31vw, 440px); height: auto;
  border-radius: 0; border: none; box-shadow: none;
  animation: dcFloat 9s ease-in-out infinite;
}
@keyframes dcFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes dcDrift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes dcSunPulse { 0%, 100% { opacity: 0.75; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.06); } }
@keyframes dcTwinkle { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.9; } }
@keyframes dcSkyGlow { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.7; } }
@keyframes dcRise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }

/* overlay nav on the home hero */
.nav-clear {
  position: fixed; top: 0; left: 0; right: 0;
  background: transparent; border-bottom-color: transparent; backdrop-filter: none;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease);
}
.nav-clear .brand, .nav-clear .nav-links a, .nav-clear .nav-drop { color: var(--blue-800); }
.nav-clear .nav-links a:hover, .nav-clear .nav-drop:hover, .nav-clear .nav-drop[aria-expanded="true"] { color: #0d2138; }
.nav-clear .nav-links a.btn-primary { color: var(--plum); }
.nav-clear.nav-solid {
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  border-bottom-color: var(--line); backdrop-filter: blur(12px);
}
.nav-clear.nav-solid .brand, .nav-clear.nav-solid .nav-links a, .nav-clear.nav-solid .nav-drop { color: var(--muted); }
.nav-clear.nav-solid .brand { color: var(--ink); }
.nav-clear.nav-solid .nav-links a:hover, .nav-clear.nav-solid .nav-drop:hover { color: var(--ink); }
.nav-clear.nav-solid .nav-links a.btn-primary { color: var(--plum); }

@media (prefers-reduced-motion: reduce) {
  .hero-dc .glow, .hero-dc .stars i, .hero-dc .dc-sun, .hero-dc .layer, .hero-dc .dc-portrait::before, .hero-dc .dc-portrait img { animation: none; }
  .hero-dc [class*="dc-"], .hero-dc .dc-eyebrow, .hero-dc h1, .hero-dc .dc-sub, .hero-dc .dc-ctas, .hero-dc .dc-capture, .hero-dc .dc-note, .hero-dc .dc-portrait { animation: none; opacity: 1; }
}
@media (max-width: 900px) {
  .hero-dc .dc-content { padding-top: 130px; }
}

.hero-dc::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70px; z-index: 5;
  background: linear-gradient(180deg, rgba(251, 248, 243, 0), var(--bg));
  pointer-events: none;
}

/* ---------- Motion pass 3 ---------- */
.mega { animation: megaIn 0.28s var(--ease); transform-origin: top center; }
@keyframes megaIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.post-card { overflow: hidden; }
.post-card img { transition: transform 0.6s var(--ease); }
.post-card:hover img { transform: scale(1.05); }

.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -75%; width: 50%;
  background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-20deg); transition: left 0.55s var(--ease); pointer-events: none;
}
.btn-primary:hover::after { left: 125%; }

.faq details { transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.faq details:hover { border-color: var(--accent); }
.faq details[open] { box-shadow: var(--shadow); }
.faq details p { animation: faqIn 0.35s var(--ease); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.kids-tile, .offer .thumb { transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.offer:hover .thumb { transform: scale(1.06) rotate(-1.5deg); }

@media (prefers-reduced-motion: reduce) {
  .mega, .faq details p { animation: none; }
  .post-card:hover img, .offer:hover .thumb { transform: none; }
  .btn-primary::after { display: none; }
}

/* ---------- Color flow pass: twilight page headers, plum footer, tinted cards ---------- */
.page-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #152c47 0%, var(--blue-800) 30%, #2e5f93 58%, var(--blue-600) 92%);
  padding: 88px 0 64px; color: var(--gold-100);
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 90% at 85% 115%, rgba(255, 189, 119, 0.5) 0%, rgba(240, 180, 124, 0.22) 45%, rgba(0, 0, 0, 0) 70%);
  animation: dcSkyGlow 9s ease-in-out infinite;
}
.page-hero > .container { position: relative; z-index: 2; }
.page-hero h1 { color: #fff9ef; text-shadow: 0 3px 30px rgba(15, 30, 50, 0.5); }
.page-hero .lede { color: rgba(255, 243, 228, 0.9); }
.page-hero .avatar-chip span { color: rgba(255, 243, 228, 0.9); }
.page-hero .post-cat a, .page-hero .post-cat { color: var(--gold-500); }
.page-hero .sky-sun {
  background: radial-gradient(circle, rgba(255, 217, 143, 0.55) 0%, rgba(255, 170, 110, 0.25) 45%, rgba(255, 170, 110, 0) 70%);
}
.page-hero .sky-clouds span { opacity: 0.45; }

.post-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #152c47 0%, var(--blue-800) 30%, #2e5f93 58%, var(--blue-600) 92%);
  padding: 80px 0 52px; color: var(--gold-100);
}
.post-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 90% at 85% 115%, rgba(255, 189, 119, 0.45) 0%, rgba(0, 0, 0, 0) 65%);
}
.post-hero > .container { position: relative; z-index: 2; }
.post-hero h1 { color: #fff9ef; }
.post-hero .post-meta { color: rgba(255, 243, 228, 0.8); }
.post-hero .post-cat a { color: var(--gold-500); }

/* dark plum footer */
footer { background: #152c47; border-top: none; color: #e9f1f7; }
footer .brand { color: var(--gold-100); }
.footer-note { color: rgba(232, 240, 247, 0.72); }
.footer-grid h4 { color: var(--gold-500); }
.footer-grid a { color: rgba(255, 246, 232, 0.88); }
.footer-grid a:hover { color: #ffffff; }
.footer-legal { color: rgba(232, 240, 247, 0.55); }

/* tinted cards and rows */
.feature-card { background: linear-gradient(165deg, #ffffff 0%, #eef4f9 100%); }
.rhythm-item { background: linear-gradient(165deg, #ffffff 0%, #edf3f9 100%); border-color: #d5e3f0; }
.prose .cta-box { background: linear-gradient(165deg, #eef4f9 0%, #fdf3e3 100%); border-color: #d9e5ee; }
.card .price { color: var(--accent-deep); }
.finder-result { background: linear-gradient(165deg, #ffffff 0%, #eef4f9 100%); }
.notice { border-left-color: var(--gold-deep); }

/* stronger tint band */
.section-tint { background: linear-gradient(180deg, #eef3f8 0%, #eef4fa 100%); }

@media (max-width: 1150px) and (min-width: 641px) {
  .nav-links { gap: 15px; }
  .nav-links a, .nav-drop { font-size: 0.88rem; }
}

/* ============================================================
   NAV HOVER BRIDGE
   The mega panel starts at the header's bottom edge (68px) but the
   trigger is only text height, so the pointer crossed a dead gap on
   its way down and the panel snapped shut. Padding expands the hover
   box to the full header height; the negative margin keeps layout put.
   ============================================================ */
@media (min-width: 901px) {
  .nav-item { padding: 24px 0; margin: 24px 0; margin-top: -24px; margin-bottom: -24px; }
  .nav-item.hover-open > .mega { display: block; }
}

/* ============================================================
   COLOUR RHYTHM
   Colour is punctuation here, not wallpaper. Most sections rest on
   the ivory page ground; the tinted ones (already alternating in the
   markup, roughly one in three) give the page its beat; and the CTA
   band is the one deliberately loud moment. Nothing paints over a
   section's own background, which is what bleached the band before.
   ============================================================ */

/* The quiet majority: no treatment at all, just the page ground. */

/* The beat: one soft blue wash, warming very slightly at the foot so
   it hands back to the ivory below it. */
.section-tint {
  background: linear-gradient(180deg, var(--blue-50) 0%, #f4f9fd 62%, #fdf6ec 100%);
  border-top: 1px solid #e4eef7;
  border-bottom: 1px solid #efe6d8;
}

/* The loud moment: the sign-up band, deep enough that cream type on it
   clears AA comfortably. */
.band {
  background: linear-gradient(135deg, var(--blue-800) 0%, var(--blue-700) 55%, #2c6796 100%);
  color: var(--gold-100);
}
.band h2, .band p, .band .section-head p { color: var(--gold-100); }
.band .btn-invert { background: var(--gold); color: var(--blue-800); }

/* Cards stay clean. One accent bar, and only where it means something:
   the feature card in each group carries it, the rest earn it on hover. */
.card, .post-card, .book-card, .rhythm-item {
  background: var(--surface);
  border-color: var(--line);
}
.card { position: relative; overflow: hidden; }
.card::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--gold));
  opacity: 0; transition: opacity 0.35s var(--ease);
}
.card:hover::after { opacity: 1; }
.feature-card { border-top: none; }
.feature-card::after { opacity: 1; }
.card:hover, .post-card:hover, .book-card:hover {
  box-shadow: 0 16px 40px rgba(38, 86, 138, 0.14);
}

/* Small marks of colour where they carry meaning */
.price, .book-price { color: var(--accent-deep); }
.rhythm-when { color: var(--accent); }
.post-cat, .post-cat a { color: var(--accent); }

/* Footer closes the page on the deep end of the ramp, with the warm
   horizon line the sky has been heading toward all the way down. */
footer { position: relative; background: linear-gradient(180deg, var(--blue-800) 0%, #152c47 60%, var(--blue-900) 100%); }
footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--gold) 45%, var(--gold-700) 70%, var(--accent));
}

/* ============================================================
   HOME PAGE NARRATIVE SECTIONS
   The home page runs recognition, then the problem, then Kathryn,
   then the mission, then how it works, then the free door, and only
   then what else is available. Nothing here carries a price: money
   lives on Services and Pricing, and in the nav, never in the story.
   ============================================================ */

/* The list of grief responses. Not bullets: a soft rule down the side
   reads as a quiet inventory rather than a checklist of symptoms. */
.feelings { list-style: none; margin: 20px 0 24px; padding: 4px 0 4px 22px;
  border-left: 2px solid var(--blue-100); display: grid; gap: 11px; }
.feelings li { color: var(--muted); }

/* Problem statements carry a coloured rule instead of card chrome, so
   they read as parts of one argument rather than three separate objects. */
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; }
.problem { border-top: 3px solid var(--accent); padding-top: 18px; }
.problem:nth-child(2) { border-top-color: var(--blue-400); }
.problem:nth-child(3) { border-top-color: var(--gold-600); }
.problem h3 { font-size: 1.18rem; margin-bottom: 8px; }
.problem p { color: var(--muted); }

/* The four reassurances before someone joins a meeting. */
.assurances { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 40px; }
.assurances p { color: var(--muted); padding-left: 26px; position: relative; }
.assurances p::before {
  content: ""; position: absolute; left: 0; top: 0.62em; width: 12px; height: 12px;
  border-radius: 50%; background: var(--gold-500); box-shadow: 0 0 0 4px var(--gold-100);
}
.assurances strong { color: var(--ink); }

/* "The other ways we walk with you": whole panels are the link. */
.ways-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.way {
  display: block; padding: 26px 26px 22px; border-radius: var(--r-card);
  background: var(--surface); border: 1px solid var(--line); text-decoration: none;
  color: var(--ink); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.way h3 { font-size: 1.14rem; margin-bottom: 8px; }
.way p { color: var(--muted); font-size: 0.97rem; margin-bottom: 14px; }
.way-more { font-size: 0.9rem; font-weight: 600; color: var(--accent); }
.way-more::after { content: " \2192"; transition: margin-left 0.25s var(--ease); }
.way:hover { transform: translateY(-3px); border-color: var(--blue-200);
  box-shadow: 0 16px 40px rgba(38, 86, 138, 0.14); }
.way:hover .way-more::after { margin-left: 4px; }
.way:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (max-width: 900px) {
  .grid-3, .ways-grid { grid-template-columns: 1fr 1fr; }
  .assurances { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .grid-3, .ways-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .way, .way:hover { transition: none; transform: none; }
}

/* ---- ordination certificate on the About page ---- */
.credential { margin: 0; }
.credential img {
  width: 100%; height: auto; display: block; border-radius: 10px;
  border: 1px solid var(--line); box-shadow: var(--shadow);
  background: var(--surface);
}
.credential figcaption {
  margin-top: 12px; font-size: 0.86rem; color: var(--muted);
  text-align: center; line-height: 1.5;
}


/* ================================================================
   "YOU ARE NOT ALONE": the hero's sky carried down, and a staged
   arrival. The pacing is deliberate. This is the moment the visitor
   decides whether the site understands them, so the words land one
   at a time rather than all at once.
   ================================================================ */

/* This section used to carry a full sky gradient of its own. It was a
   second hero, bigger than the real one, and because it opened warm and
   crossfaded to cool blue there was a strip of dead neutral grey under the
   sunrise where the two interpolated through desaturation. The sky belongs
   to the hero. This section now takes the page's standard tint like any
   other, and earns its weight from the type instead. */
.sky-section { position: relative; overflow: hidden; }
.sky-section > .container { position: relative; z-index: 1; }

/* Slow cloud drift, echoing the hero without competing with it. */
.sky-drift { display: none; }
.sky-drift i {
  position: absolute; display: block; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 35%,
    rgba(255, 253, 248, 0.95) 0%, rgba(243, 249, 255, 0.5) 46%, rgba(225, 239, 252, 0) 74%);
  filter: blur(20px);
  animation: sky-drift linear infinite;
}
/* Kept faint on purpose. They are texture in the sky, not a white veil
   over it: anything above roughly 0.35 bleaches the blue out entirely. */
.sky-drift i:nth-child(1) { left: -14%; top: 5%;  width: 30vw; height: 7.5vw; opacity: 0.34; animation-duration: 96s; }
.sky-drift i:nth-child(2) { left: 58%;  top: 16%; width: 24vw; height: 6vw;   opacity: 0.26; animation-duration: 124s; animation-delay: -30s; }
.sky-drift i:nth-child(3) { left: 12%;  top: 40%; width: 34vw; height: 9vw;   opacity: 0.22; animation-duration: 150s; animation-delay: -70s; }
.sky-drift i:nth-child(4) { left: 66%;  top: 58%; width: 26vw; height: 7vw;   opacity: 0.18; animation-duration: 112s; animation-delay: -18s; }
.sky-drift i:nth-child(5) { left: -8%;  top: 74%; width: 32vw; height: 8vw;   opacity: 0.15; animation-duration: 168s; animation-delay: -95s; }
@keyframes sky-drift {
  from { transform: translate3d(-12vw, 0, 0); }
  to   { transform: translate3d(112vw, 0, 0); }
}

/* The heading arrives first, on its own, with the blur clearing like
   something coming into focus. */
.sky-section .section-head { opacity: 0; transform: translateY(18px); filter: blur(6px); }
.sky-section .section-head.in {
  opacity: 1; transform: none; filter: blur(0);
  transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease);
}

/* Then the block below it, one piece at a time. */
.cascade .c-step,
.cascade .feelings li {
  opacity: 0; transform: translateY(14px); filter: blur(4px);
}
.cascade.in .c-step,
.cascade.in .feelings li {
  opacity: 1; transform: none; filter: blur(0);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease), filter 0.8s var(--ease);
  transition-delay: var(--d, 0s);
}
.cascade .c-step:nth-of-type(1) { --d: 0.15s; }
.cascade .c-step:nth-of-type(2) { --d: 0.85s; }
.cascade .feelings li:nth-child(1) { --d: 1.25s; }
.cascade .feelings li:nth-child(2) { --d: 1.39s; }
.cascade .feelings li:nth-child(3) { --d: 1.53s; }
.cascade .feelings li:nth-child(4) { --d: 1.67s; }
.cascade .feelings li:nth-child(5) { --d: 1.81s; }
.cascade .feelings li:nth-child(6) { --d: 1.95s; }
.cascade .feelings li:nth-child(7) { --d: 2.09s; }
.cascade .feelings li:nth-child(8) { --d: 2.23s; }
.cascade .c-last { --d: 2.55s; }

/* The rule beside the list draws itself downward as the items appear. */
.cascade .feelings { position: relative; border-left-color: transparent; }
.cascade .feelings::before {
  content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--blue-700), rgba(35, 86, 132, 0.35));
  transform: scaleY(0); transform-origin: top center;
}
.cascade.in .feelings::before {
  transform: scaleY(1);
  transition: transform 1.5s cubic-bezier(0.33, 0.9, 0.25, 1) 1.1s;
}

/* Type in this section is a step up in scale and weight on purpose. It was
   set at body size and it read as small print floating on the sky, which is
   the opposite of the intent: these lines are the ones a grieving parent is
   meant to recognise themselves in, so they carry like statements. */
.sky-section .c-step:nth-of-type(1) {
  font-size: 1.16rem; font-weight: 500; line-height: 1.58;
  color: var(--ink); margin-bottom: 26px;
}
.sky-section .c-step:nth-of-type(2) {
  font-family: "Bitter", Georgia, serif; font-variant-ligatures: none;
  font-size: clamp(1.35rem, 2.2vw, 1.6rem); font-weight: 700; line-height: 1.3;
  color: var(--ink); max-width: 34ch; margin-bottom: 6px;
}
.sky-section .feelings { gap: 14px; padding-left: 24px; margin: 22px 0 26px; }
.sky-section .feelings li {
  font-size: 1.08rem; font-weight: 600; line-height: 1.4;
  color: var(--ink);
}
.sky-section .c-last { font-size: 1.18rem; font-weight: 500; line-height: 1.5; color: var(--ink); }
.sky-section .c-last strong { font-weight: 700; }

@media (max-width: 700px) {
  .sky-drift i { filter: blur(14px); }
  .sky-section .c-step:nth-of-type(1) { font-size: 1.15rem; }
  .sky-section .feelings li { font-size: 1.06rem; }
  .sky-section .c-last { font-size: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sky-drift { display: none; }
  .sky-section .section-head,
  .cascade .c-step,
  .cascade .feelings li {
    opacity: 1; transform: none; filter: none; transition: none;
  }
  .cascade .feelings { border-left-color: var(--blue-100); }
  .cascade .feelings::before { display: none; }
}


/* ---- The feelings reel: one line at a time, big and centred ---- */

/* The list stays in normal flow and keeps the block at its final height,
   so the takeover cannot shift the page. The stage sits on top of it. */
.reel { position: relative; }
.reel > .feelings { position: relative; }
.reel-stage { display: none; }
.reel.armed .feelings { opacity: 0; visibility: hidden; }
.reel.armed .reel-stage {
  display: grid; position: absolute; inset: 0; place-items: center;
  min-height: 260px; text-align: center; cursor: pointer;
}
.reel-line {
  grid-area: 1 / 1;
  font-family: "Bitter", Georgia, serif; font-variant-ligatures: none;
  font-size: clamp(1.55rem, 3.2vw, 2.4rem); font-weight: 700; line-height: 1.22;
  color: var(--reel-ink, var(--blue-900));
  max-width: 19ch; margin: 0 auto; text-wrap: balance;
  opacity: 0; transform: translateY(20px) scale(0.98); filter: blur(7px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease), filter 0.55s var(--ease);
}
.reel-line.show { opacity: 1; transform: none; filter: blur(0); }

/* A hairline that fills across the sequence, so it reads as something with
   an end rather than something stuck. */
.reel-bar {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  width: min(220px, 40%); height: 2px; border-radius: 2px;
  background: rgba(35, 86, 132, 0.18); overflow: hidden;
}
.reel-bar::after {
  content: ""; display: block; height: 100%; width: 0;
  background: var(--reel-ink, var(--blue-900)); opacity: 0.5;
  transition: width var(--dur, 7s) linear;
}
.reel.running .reel-bar::after { width: 100%; }

.reel.settled .reel-stage { opacity: 0; pointer-events: none; transition: opacity 0.5s var(--ease); }
.reel.settled .feelings {
  opacity: 1; visibility: visible;
  transition: opacity 0.8s var(--ease);
}

/* While a line is on screen, the words around it step back. That is what
   makes it a takeover rather than a list item that happens to be large. */
.cascade.reel-focus .c-step {
  opacity: 0.16;
  transition: opacity 0.6s var(--ease);
  transition-delay: 0s;
}
.cascade.reel-done .c-step { --d: 0s; }

@media (max-width: 700px) {
  .reel.armed .reel-stage { min-height: 220px; }
  .reel-line { max-width: 15ch; }
}

@media (prefers-reduced-motion: reduce) {
  .reel-stage { display: none !important; }
  .reel .feelings { opacity: 1 !important; visibility: visible !important; }
}


/* ================================================================
   COLOUR LOCK AND RHYTHM LOCK
   Everything below overrides earlier rules on purpose. Read the
   header comment in flow_fix.py before changing any of it.
   ================================================================ */

/* ---- 1. One cool family, no cool-to-warm wipes ---- */

/* The alternating tint is now a single flat tone. It was a gradient
   running blue to cream, three times down the page, which is what made
   the colour read as unsettled. Flat, and no hairline borders either:
   the tone change is the separation. */
.section-tint {
  background: #f0f5fb;
  border-top: none;
  border-bottom: none;
}

/* The page closes on the ground it has been resting on, straight into
   the navy footer. */
.section-close { background: var(--bg); }

/* Panels: white to a whisper of blue. No cream stop anywhere. */
.feature-card,
.rhythm-item,
.finder-result { background: linear-gradient(168deg, #ffffff 0%, #f2f7fc 100%); }
.prose .cta-box { background: #f0f5fb; border-color: #dfe9f3; }
.rhythm-item { border-color: #dde8f3; }

/* One accent on the problem blocks. They are three parts of one
   argument, so they take one colour, not three. */
.problem { border-top-color: var(--accent); }
.problem:nth-child(2),
.problem:nth-child(3) { border-top-color: var(--accent); }

/* The reassurance markers keep the brand gold but lose the halo ring,
   which was the only glow left on the page. */
.assurances p::before {
  width: 9px; height: 9px; top: 0.72em;
  background: var(--gold-600); box-shadow: none;
}

/* ---- 2. One left edge, all the way down ---- */

/* .narrow and .prose each centre their content inside the container, so
   a narrow section started 210px further right than a wide one and the
   page's left edge jumped six times on the way down. On the home page
   every section shares the container's edge; the reading measure is
   capped in ch on the children instead. */
/* Two widths on this page and no others: full container for anything that
   uses the width, and ONE centred reading measure for anything that is a
   single column of prose. The earlier fault was three different measures
   (760, 720, 780) so the column shifted slightly from section to section.
   Forcing everything hard left instead was worse: it left a single narrow
   ribbon of text with a dead field beside it. A centred measure is
   symmetrical, so there is no lopsided side. */
.home .container.narrow,
.home .prose,
.home .faq { max-width: 760px; margin-inline: auto; }
.home .prose > *,
.home .container.narrow > * { max-width: none; }

/* ---- 3. Kathryn's message, with her face on the page ---- */
.k-split {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 56px; align-items: start;
}
.k-portrait { margin: 0; position: sticky; top: 96px; }
.k-portrait img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 22%;
  border-radius: var(--r-card); box-shadow: var(--shadow);
}
.k-portrait figcaption {
  margin-top: 14px; font-size: 0.9rem; line-height: 1.5; color: var(--muted);
  max-width: 34ch;
}
.k-words > * { max-width: 66ch; }
/* This block used to sit inside .prose, which supplied its paragraph
   rhythm and quote styling. Moving it into the split took that with it,
   so the typography is restated here rather than left to run together. */
.k-words p { margin-bottom: 16px; }
.k-words p:last-child { margin-bottom: 0; }
.k-words blockquote {
  font-family: "Bitter", Georgia, serif; font-variant-ligatures: none;
  font-size: 1.32rem; line-height: 1.4; color: var(--ink);
  border-left: 3px solid var(--accent);
  padding: 4px 0 4px 22px; margin: 26px 0 24px;
}
.k-words .section-head { margin-bottom: 28px; }

@media (max-width: 900px) {
  .k-split { grid-template-columns: 1fr; gap: 32px; }
  .k-portrait { position: static; max-width: 320px; }
}


/* ---- Chapter break between the story half and the practical half ---- */
.light-band {
  position: relative;
  height: clamp(180px, 24vw, 300px);
  overflow: hidden;
  background: var(--bg);
}
.light-band img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%;
  display: block;
}
/* Feathered top and bottom so it reads as a breath in the page rather than
   a rectangle dropped into it. */
.light-band::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
    var(--bg) 0%, rgba(251, 248, 243, 0) 26%,
    rgba(251, 248, 243, 0) 74%, var(--bg) 100%);
}

/* ---- Page heroes on the other pages join the same cool family ---- */
.sky { background: linear-gradient(180deg, var(--blue-100) 0%, #e7f0fa 58%, #f0f5fb 100%); }
.sky-sun { opacity: 0.55; }

/* ---- The mission quote was shouting over everything around it ---- */
.home #mission blockquote { font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.45; }
.home .k-words > * { max-width: 70ch; }


/* ---- The second beat of the recognition section ---- */
/* Three points that used to be a whole section of their own, compressed to
   one line each. Same argument, a third of the words, no extra colour
   block. */
.recognition-more { margin-top: 46px; }
.recognition-more h3 {
  font-size: 1.28rem; line-height: 1.3; margin-bottom: 14px;
}
.recognition-more > p { color: var(--muted); margin-bottom: 20px; }
.plain-points { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 16px; }
.plain-points li {
  color: var(--muted); line-height: 1.6; padding-left: 20px;
  border-left: 2px solid var(--blue-200);
}
.plain-points strong { color: var(--ink); }


/* The three points sit two-up inside the reading column rather than as a
   third long stack, so the second beat reads as a short coda. */
@media (min-width: 760px) {
  .plain-points { grid-template-columns: 1fr 1fr; gap: 22px 28px; }
  .plain-points li:first-child { grid-column: 1 / -1; }
}

/* ================================================================
   MEETING CALENDAR
   Follows the page system: ivory ground, one flat tint, blue as the
   only accent. The two dot colours are a legend, not decoration:
   gold marks the free Tuesday programme, blue the members' Thursday.
   ================================================================ */

.cal-layout {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 52px; align-items: start;
}
.cal-side h2 { margin-bottom: 10px; }
.cal-tz { color: var(--muted); font-size: 0.95rem; margin-bottom: 26px; }

/* ---- upcoming meetings ---- */
.cal-list { display: grid; gap: 18px; }
.cal-item {
  display: grid; grid-template-columns: 178px minmax(0, 1fr); gap: 22px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 22px 24px;
}
.cal-when { display: grid; gap: 3px; align-content: start; }
.cal-when-day { font-size: 0.86rem; color: var(--muted); line-height: 1.35; }
.cal-when-time { font-size: 1.18rem; color: var(--ink); line-height: 1.25; }
.cal-when-home { font-size: 0.78rem; color: var(--muted); line-height: 1.4; }
.cal-body h3 { font-size: 1.16rem; margin-bottom: 8px; }
.cal-body p { color: var(--muted); font-size: 0.95rem; margin-bottom: 14px; }
.cal-tag {
  display: inline-block; font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent-deep); background: var(--blue-50);
  border-radius: 999px; padding: 4px 11px; margin-bottom: 10px;
}
.cal-tag-free { color: #7a5410; background: var(--gold-100); }
.cal-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cal-actions .btn { font-size: 0.92rem; padding: 10px 18px; }
.cal-note { font-size: 0.86rem; color: var(--muted); margin-top: 12px; }
.cal-empty-note { color: var(--muted); }

/* ---- month grid ---- */
.cal-wrap {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 20px 20px 24px;
}
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.cal-month { font-size: 1.12rem; margin: 0; }
.cal-nav {
  font: inherit; font-size: 0.84rem; color: var(--accent-deep);
  background: none; border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 14px; cursor: pointer;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.cal-nav:hover { border-color: var(--accent); background: var(--blue-50); }
.cal-nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow {
  text-align: center; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
  color: var(--muted); padding-bottom: 8px;
}
.cal-cell {
  position: relative; aspect-ratio: 1 / 1; border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  font-size: 0.88rem; color: var(--muted);
}
.cal-cell.cal-empty { visibility: hidden; }
.cal-cell.has-meeting { background: var(--blue-50); color: var(--ink); font-weight: 600; }
.cal-cell.is-today { box-shadow: inset 0 0 0 2px var(--accent); color: var(--ink); }
.cal-marks { display: flex; gap: 4px; }
.cal-mark { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.cal-free { background: var(--gold-600); }
.cal-members { background: var(--accent); }

.cal-key { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.cal-key li { display: flex; align-items: center; gap: 10px; font-size: 0.88rem; color: var(--muted); }

@media (max-width: 900px) {
  .cal-layout { grid-template-columns: 1fr; gap: 40px; }
  .cal-item { grid-template-columns: 1fr; gap: 12px; padding: 20px; }
  .cal-when { grid-auto-flow: row; }
}
@media (max-width: 420px) {
  .cal-wrap { padding: 16px 14px 20px; }
  .cal-cell { font-size: 0.8rem; }
}