/* ==========================================================================
   Kaleidoscope Kids
   1. Tokens
   2. Base & layout
   3. Header / navigation
   4. Typography & shared blocks
   5. Components
   6. Page-specific
   7. Footer
   8. Motion & responsive
   ========================================================================== */

/* 1. Tokens ============================================================== */

:root {
  --bg:          #f3f2f2;
  --bg-alt:      #eae9e9;
  --bg-cream:    #fbf3e9;
  --bg-tint:     #fff2ef;

  --ink:         #201e1d;
  --ink-80:      rgba(32, 30, 29, .8);
  --ink-78:      rgba(32, 30, 29, .78);
  --ink-70:      rgba(32, 30, 29, .7);
  --ink-60:      rgba(32, 30, 29, .6);
  --ink-50:      rgba(32, 30, 29, .5);
  --rule:        rgba(32, 30, 29, .4);
  --rule-soft:   rgba(32, 30, 29, .15);

  --brand:       #ec3013;
  --brand-dark:  #dd2b0f;
  --brand-deep:  #ae1800;
  --paper:       #f3f2f2;

  --navy:        #16305b;
  --teal-deep:   #1b8a8f;

  --pink:        #e63e6d;
  --orange:      #f0932b;
  --yellow:      #f2b705;
  --green:       #4c9a2a;
  --teal:        #1da1a1;
  --blue:        #2e7bc4;
  --purple:      #7a4fa0;

  --sans:        'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif:       'Cormorant Garamond', Georgia, serif;
  --script:      'Parisienne', cursive;
  --mono:        ui-monospace, Menlo, Consolas, monospace;

  --wrap:        1200px;
  --gutter:      clamp(20px, 5vw, 72px);
  --header-h:    64px;

  --ease:        cubic-bezier(.2, .8, .2, 1);
}

/* Spectrum helpers — used by [data-color] markers and rules. */
[data-color="pink"]   { --c: var(--pink); }
[data-color="orange"] { --c: var(--orange); }
[data-color="yellow"] { --c: var(--yellow); }
[data-color="green"]  { --c: var(--green); }
[data-color="teal"]   { --c: var(--teal); }
[data-color="blue"]   { --c: var(--blue); }
[data-color="purple"] { --c: var(--purple); }

/* 2. Base & layout ======================================================= */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.6 var(--sans);
  text-wrap: pretty;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; }
img { height: auto; }

a { color: var(--brand-deep); }

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 16px;
  font: 700 14px var(--sans);
  text-decoration: none;
}
.skip-link:focus { left: 8px; top: 8px; }

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 900px; }
.wrap--reading { max-width: 840px; }

.section { padding-block: 64px; }
.section--tight { padding-block: 48px; }
.section--flush-top { padding-block: 24px 64px; }
.section--alt { background: var(--bg-alt); }
.section--cream { background: var(--bg-cream); }

.rule {
  height: 2px;
  border: 0;
  margin: 0;
  background: var(--rule);
}

/* 3. Header / navigation ================================================= */

.spectrum-bar {
  display: flex;
  height: 4px;
}
.spectrum-bar span { flex: 1; }
.spectrum-bar span:nth-child(1) { background: var(--pink); }
.spectrum-bar span:nth-child(2) { background: var(--orange); }
.spectrum-bar span:nth-child(3) { background: var(--yellow); }
.spectrum-bar span:nth-child(4) { background: var(--green); }
.spectrum-bar span:nth-child(5) { background: var(--teal); }
.spectrum-bar span:nth-child(6) { background: var(--blue); }
.spectrum-bar span:nth-child(7) { background: var(--purple); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--bg);
  border-bottom: 2px solid var(--rule);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px var(--gutter);
  max-width: var(--wrap);
  margin-inline: auto;
  /* Without this a flex item cannot shrink below its content, so the nav
     overflows into the wordmark instead of the row staying intact. */
  min-width: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  text-decoration: none;
  color: var(--ink);
  flex: 0 1 auto;
  min-width: 0;
}
.brand img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  display: block;
  flex: none;
}
.brand__name {
  font: 800 14px var(--sans);
  letter-spacing: .3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-desktop {
  min-width: 0;
  flex: 0 1 auto;
}
.nav-desktop ul {
  display: flex;
  align-items: center;
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}
.nav-link {
  font: 600 13px var(--sans);
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color .2s ease, border-color .2s ease;
}

/* Grouped entries ------------------------------------------------------- */

.nav-desktop .has-menu { position: relative; }

.nav-link--group {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 0 0 3px;
  cursor: pointer;
  font: 600 13px var(--sans);
}
.nav-chev { transition: transform .2s ease; flex: none; }
.has-menu.is-open > .nav-link--group { color: var(--brand); }
.has-menu.is-open .nav-chev { transform: rotate(180deg); }

.nav-menu {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  left: -18px;
  z-index: 50;
  min-width: 268px;
  background: var(--bg);
  border: 2px solid var(--rule);
  box-shadow: 0 14px 34px rgba(32, 30, 29, .16);
}
/* The spectrum stripe repeats the brand cue at the top of each panel. */
.nav-menu::before {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(to right,
    var(--pink) 0 14.28%, var(--orange) 14.28% 28.56%, var(--yellow) 28.56% 42.84%,
    var(--green) 42.84% 57.12%, var(--teal) 57.12% 71.4%, var(--blue) 71.4% 85.68%,
    var(--purple) 85.68% 100%);
}
/* An invisible bridge, so moving the pointer down to the panel does not
   cross a gap and close it. */
.nav-menu::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}
.nav-menu ul {
  display: block;
  gap: 0;
  padding: 6px 0;
}
.nav-menu li { display: block; }
.nav-menu a {
  display: block;
  padding: 10px 18px;
  text-decoration: none;
  color: var(--ink);
  border-left: 3px solid transparent;
  transition: background .15s ease, border-color .15s ease;
}
.nav-menu a:hover,
.nav-menu a:focus-visible { background: rgba(32, 30, 29, .05); border-left-color: var(--brand); }
.nav-menu a.is-active { border-left-color: var(--brand); }
.nav-menu a.is-active .nav-menu__label { color: var(--brand); }
.nav-menu__label {
  display: block;
  font: 700 13.5px var(--sans);
  letter-spacing: -.005em;
}
.nav-menu__blurb {
  display: block;
  font: 400 12px/1.45 var(--sans);
  color: var(--ink-60);
  margin-top: 2px;
}

/* Open on hover and on focus. With JavaScript the script adds .is-open, which
   also covers click and keyboard; without it, these two still work. */
.nav-desktop .has-menu:hover > .nav-menu,
.nav-desktop .has-menu:focus-within > .nav-menu,
.nav-desktop .has-menu.is-open > .nav-menu { display: block; }

/* Once JS is running, hover/focus are driven through .is-open instead, so a
   click can close a panel the pointer is still resting on. */
.js .nav-desktop .has-menu:hover > .nav-menu,
.js .nav-desktop .has-menu:focus-within > .nav-menu { display: none; }
.js .nav-desktop .has-menu.is-open > .nav-menu { display: block; }
.nav-link:hover { color: var(--brand); border-bottom-color: rgba(236, 48, 19, .4); }
.nav-link.is-active { color: var(--brand); border-bottom-color: var(--brand); }

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: transparent;
  border: 1px solid var(--rule);
  cursor: pointer;
}
.nav-toggle span {
  width: 18px;
  height: 2px;
  background: var(--ink);
  display: block;
  transition: transform .25s var(--ease), opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child  { transform: translateY(-3.5px) rotate(-45deg); }

.nav-mobile {
  border-bottom: 2px solid var(--rule);
  background: var(--bg);
}
.nav-mobile[hidden] { display: none; }
.nav-mobile ul {
  margin: 0;
  padding: 0 var(--gutter) 18px;
  list-style: none;
  max-width: var(--wrap);
  margin-inline: auto;
}
.nav-mobile a {
  display: block;
  font: 600 15px var(--sans);
  color: var(--ink);
  text-decoration: none;
  padding: 14px 0;
  border-top: 1px solid var(--rule-soft);
}
.nav-mobile a.is-active { color: var(--brand); }

/* 4. Typography & shared blocks ========================================== */

.eyebrow {
  font: 700 13px var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand-deep);
  margin: 0 0 14px;
}

.page-head { padding: 72px 0 48px; }
.page-head h1 {
  font: 800 clamp(32px, 5vw, 56px)/1.1 var(--sans);
  letter-spacing: -.02em;
  margin: 0;
}
.page-head p {
  font: 400 16px/1.6 var(--sans);
  color: rgba(32, 30, 29, .75);
  max-width: 60ch;
  margin: 18px 0 0;
}
.page-head p.lead {
  font-size: 18px;
  color: var(--ink-80);
}

.section-title {
  font: 800 32px/1.2 var(--sans);
  letter-spacing: -.015em;
  margin: 0 0 16px;
}
.section-title--sm { font-size: 28px; line-height: 1.25; }

.prose {
  font: 400 16px/1.6 var(--sans);
  color: var(--ink-78);
  max-width: 48ch;
  margin: 0 0 20px;
}

.link-arrow {
  font: 700 14px var(--sans);
  color: var(--brand-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 5. Components ========================================================== */

/* Buttons ---------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 700 14px var(--sans);
  padding: 11px 20px;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.btn--primary { background: var(--brand); color: var(--paper); }
.btn--primary:hover { background: var(--brand-dark); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn--ghost:hover { background: rgba(32, 30, 29, .06); }
.btn--onbrand { background: transparent; color: var(--paper); border-color: var(--paper); }
.btn--onbrand:hover { background: rgba(243, 242, 242, .15); }

/* Numbered list — the design's repeating 01 / 02 / 03 rows ---------------- */

.numbered {
  border-bottom: 2px solid var(--rule);
}
.numbered__item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 16px 28px;
  align-items: baseline;
  padding: 22px 0;
  border-top: 2px solid var(--rule);
  transition: transform .25s ease;
}
.numbered--nudge .numbered__item:hover { transform: translateX(6px); }
.numbered__marker {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 800 14px var(--sans);
}
.numbered__marker::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--c, var(--pink));
  flex: none;
}
.numbered__title {
  font: 800 20px var(--sans);
  letter-spacing: -.01em;
  margin: 0 0 6px;
}
.numbered__body {
  font: 400 15px/1.6 var(--sans);
  color: var(--ink-78);
  margin: 0;
  max-width: 56ch;
}
.numbered--lg .numbered__title { font-size: 21px; }
.numbered--lg .numbered__item { padding: 24px 0; }
.numbered--sm .numbered__title { font-size: 18px; margin-bottom: 4px; }
.numbered--sm .numbered__item { padding: 20px 0; }

/* Stat row --------------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px 24px;
}
.stat__value {
  font: 800 clamp(26px, 3.4vw, 42px) var(--sans);
  color: var(--c, var(--pink));
  margin: 0;
}
.stat__label {
  font: 600 12px var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin-top: 8px;
}

/* Cohort row ------------------------------------------------------------- */

.cohorts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.cohort {
  padding: 32px 24px;
  border-top: 2px solid var(--rule);
  border-left: 2px solid var(--rule);
}
.cohort:first-child { padding-left: 0; border-left: 0; }
.cohort:last-child { padding-right: 0; }
.cohorts--bare .cohort { padding-block: 0; border-top: 0; }
.cohort__range {
  font: 800 30px var(--sans);
  border-bottom: 3px solid var(--c, var(--pink));
  display: inline-block;
  padding-bottom: 4px;
}
.cohort__label {
  font: 600 11px var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin-top: 8px;
}

/* Split (media + text) --------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 40px;
  align-items: center;
}
.split--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.split--start { align-items: start; }

/* Photos ----------------------------------------------------------------- */

.photo {
  display: block;
  width: 100%;
  object-fit: cover;
  background: var(--bg-alt);
  transition: transform .5s var(--ease);
}
.photo--zoom { will-change: transform; }
.photo--zoom:hover { transform: scale(1.03); }
.photo--empty {
  background: repeating-linear-gradient(45deg, #d7d3d3 0 8px, #eae7e7 8px 16px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 14px;
}
.photo--empty span {
  font: 11px var(--mono);
  color: #7d7979;
}
.photo--plain { background: #f8f4f4; object-fit: contain; }

figure { margin: 0; }
figcaption {
  font: 600 11px var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(32, 30, 29, .55);
  margin-top: 10px;
}

/* Pills ------------------------------------------------------------------ */

.pill {
  display: inline-flex;
  font: 700 11px var(--sans);
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 5px 12px;
  margin-bottom: 14px;
}
.pill--brand { color: #7c1405; background: var(--bg-tint); }
.pill--muted { color: #605d5d; background: #eae7e7; }

.plain-list {
  font: 400 15px/1.7 var(--sans);
  color: var(--ink-80);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* CTA band --------------------------------------------------------------- */

.cta-band {
  background: var(--brand);
  color: var(--paper);
  padding: 64px 0;
}
.cta-band h2 {
  font: 800 clamp(26px, 3.6vw, 42px)/1.15 var(--sans);
  letter-spacing: -.015em;
  margin: 0 0 24px;
}

/* Kaleidoscope dial ------------------------------------------------------ */

.dial {
  --dial-size: clamp(300px, 46vw, 480px);
  --node:      clamp(70px, 11vw, 100px);
  --core:      clamp(104px, 17vw, 152px);
  --radius:    calc((var(--dial-size) - var(--node)) / 2);
  --spin:      64s;

  position: relative;
  width: var(--dial-size);
  height: var(--dial-size);
  margin: 0 auto;
  isolation: isolate;
}

/* The child, at the centre. */
.dial__core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--core);
  height: var(--core);
  margin: calc(var(--core) / -2);
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font: 800 clamp(14px, 2.1vw, 19px)/1.15 var(--sans);
  letter-spacing: -.01em;
  z-index: 3;
}

/* Soft halo that breathes behind the core. */
.dial__core::after {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 1.5px solid rgba(32, 30, 29, .18);
  animation: dialHalo 4.5s ease-in-out infinite;
}

/* Two nested rings: one carries the ambient spin, one the drag offset. */
.dial__spin,
.dial__ring {
  position: absolute;
  inset: 0;
}
.dial__spin { animation: dialSpin var(--spin) linear infinite; }
.dial__ring { transform: rotate(var(--drag, 0deg)); }

.dial__node {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--node);
  height: var(--node);
  margin: calc(var(--node) / -2);
  border-radius: 50%;
  border: 2.5px solid var(--c, var(--pink));
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* Sit on the circle at --angle, then undo the rotation so the disc is upright. */
  transform: rotate(var(--angle)) translate(var(--radius)) rotate(calc(-1 * var(--angle)));
  animation: dialFloat 5s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  transition: box-shadow .3s var(--ease), border-width .3s var(--ease);
  z-index: 2;
}
.dial__node::before {
  content: "";
  position: absolute;
  inset: -2.5px;
  border-radius: 50%;
  background: var(--c, var(--pink));
  opacity: 0;
  transition: opacity .3s var(--ease);
  z-index: -1;
}
.dial__node:hover { box-shadow: 0 8px 22px rgba(32, 30, 29, .18); }
.dial__node:hover::before { opacity: .12; }

/* Label: outer element undoes the ambient spin, inner undoes the drag. */
.dial__label {
  display: block;
  animation: dialSpinBack var(--spin) linear infinite;
}
.dial__label > span {
  display: block;
  font: 800 clamp(10px, 1.35vw, 13px)/1.2 var(--sans);
  letter-spacing: .01em;
  color: var(--ink);
  transform: rotate(calc(-1 * var(--drag, 0deg)));
}

.dial--interactive { touch-action: none; cursor: grab; }
.dial--interactive:active { cursor: grabbing; }
.dial--interactive:focus-visible { outline-offset: 10px; }

/* Pause the drift while someone is reading or dragging. */
.dial:hover .dial__spin,
.dial:hover .dial__label,
.dial:focus-within .dial__spin,
.dial:focus-within .dial__label,
.dial.is-dragging .dial__spin,
.dial.is-dragging .dial__label { animation-play-state: paused; }

.dial:hover .dial__node,
.dial.is-dragging .dial__node { animation-play-state: paused; }

@keyframes dialSpin {
  to { transform: rotate(360deg); }
}
@keyframes dialSpinBack {
  to { transform: rotate(-360deg); }
}
@keyframes dialFloat {
  0%, 100% { scale: 1; }
  50%      { scale: 1.06; }
}
@keyframes dialHalo {
  0%, 100% { transform: scale(1);    opacity: .8; }
  50%      { transform: scale(1.09); opacity: .25; }
}

.dial-hint {
  text-align: center;
  font: italic 400 13px var(--sans);
  color: var(--ink-50);
  margin-top: 22px;
}

/* Experience grid -------------------------------------------------------- */

.experience-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.experience-head h2 {
  font: 800 clamp(26px, 3.4vw, 38px) var(--sans);
  letter-spacing: -.02em;
  color: var(--navy);
  margin: 0;
  text-align: center;
}
.rays { display: flex; align-items: center; gap: 4px; }
.rays span { height: 4px; transform: skewX(-25deg); }
.rays span:nth-child(1) { width: 14px; background: var(--pink); }
.rays span:nth-child(2) { width: 22px; background: var(--yellow); }
.rays span:nth-child(3) { width: 14px; background: var(--teal); }
.rays--right span { transform: skewX(25deg); }
.rays--right span:nth-child(1) { background: var(--teal); }
.rays--right span:nth-child(3) { background: var(--pink); }

.experience-sub {
  font: 400 15px var(--sans);
  color: var(--ink-60);
  text-align: center;
  margin: 0 0 44px;
}
.experience-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 44px 28px;
}
.experience-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform .25s ease;
}
.experience-item:hover { transform: translateY(-6px); }
.experience-item__num {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--c, var(--pink));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 800 21px var(--sans);
  margin-bottom: 16px;
}
.experience-item__title {
  font: 800 13px var(--sans);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c, var(--pink));
  margin: 0 0 10px;
  filter: brightness(.88);
}
.experience-item__body {
  font: 400 13px/1.55 var(--sans);
  color: var(--ink-70);
  margin: 0;
}

/* FAQ -------------------------------------------------------------------- */

.faq { border-bottom: 2px solid var(--rule); }
.faq__item { border-top: 2px solid var(--rule); }
.faq__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 22px 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font: 800 17px var(--sans);
  color: var(--ink);
}
.faq__chev {
  font: 800 16px var(--sans);
  color: var(--brand);
  flex: none;
  transition: transform .3s ease;
}
.faq__q[aria-expanded="true"] .faq__chev { transform: rotate(180deg); }
.faq__a { overflow: hidden; }
.js .faq__a {
  height: 0;
  visibility: hidden;
  transition: height .3s var(--ease), visibility 0s linear .3s;
}
.js .faq__a.is-open {
  visibility: visible;
  transition: height .3s var(--ease), visibility 0s;
}
.faq__a > p {
  font: 400 15px/1.6 var(--sans);
  color: var(--ink-78);
  margin: 0 0 22px;
  max-width: 64ch;
}

/* Forms ------------------------------------------------------------------ */

.form { display: flex; flex-direction: column; gap: 16px; }
.field { display: block; }
.field__label {
  display: block;
  font: 600 12px var(--sans);
  color: var(--ink-70);
  margin-bottom: 5px;
}
.field__label .req { color: var(--brand); }
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  font: 15px var(--sans);
  color: var(--ink);
  background: var(--bg-alt);
  border: 1px solid var(--rule);
  border-radius: 0;
  transition: border-color .2s ease, background .2s ease;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus { background: #fff; }
.field--error input,
.field--error select,
.field--error textarea { border-color: var(--brand); background: var(--bg-tint); }
.field__error {
  display: block;
  font: 600 12px var(--sans);
  color: #a5220c;
  margin-top: 5px;
}
.field--honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.alert {
  padding: 16px 18px;
  font: 400 15px/1.55 var(--sans);
  border-left: 4px solid;
  margin: 0 0 20px;
}
.alert--ok    { background: #eef6ea; border-color: var(--green); color: #24501a; }
.alert--error { background: var(--bg-tint); border-color: var(--brand); color: #7c1405; }
.alert strong { display: block; font-weight: 800; margin-bottom: 2px; }

.form__note {
  font: 400 13px/1.5 var(--sans);
  color: var(--ink-60);
  margin: 0;
}

.map-embed {
  width: 100%;
  aspect-ratio: 16 / 7;
  border: 1px solid var(--rule);
  margin-top: 28px;
  display: block;
}

/* 6. Page-specific ======================================================= */

/* Home hero -------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: calc(100vh - var(--header-h));
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px var(--gutter);
  text-align: center;
}
.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.hero__eyebrow {
  font: 700 13px var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand-deep);
}
.hero h1 {
  font: 800 clamp(36px, 7vw, 80px)/1.06 var(--sans);
  letter-spacing: -.02em;
  margin: 14px 0 0;
}
.hero h1 span { display: block; }
.hero__lead {
  font: 400 16px/1.6 var(--sans);
  color: rgba(32, 30, 29, .75);
  max-width: 52ch;
  margin: 20px 0 0;
}
.hero__actions { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; justify-content: center; }

.lens {
  width: 240px;
  height: 240px;
  border-radius: 50%;
  overflow: hidden;
  margin-top: 32px;
  flex: none;
  box-shadow:
    0 0 0 6px var(--pink),
    0 0 0 12px var(--yellow),
    0 0 0 18px var(--teal),
    0 12px 32px rgba(45, 43, 43, .22);
  will-change: transform, border-radius;
}
.lens .photo, .lens .photo--empty {
  width: 100%;
  height: 100%;
  aspect-ratio: auto !important;
}

/* Prayer ----------------------------------------------------------------- */

.prayer { padding: 80px 0 88px; }
.prayer__inner { max-width: 720px; margin-inline: auto; text-align: center; }
.prayer__title {
  font: 700 clamp(44px, 7vw, 76px)/1 var(--serif);
  color: var(--navy);
}
.prayer__subtitle {
  font: 400 clamp(34px, 5.4vw, 58px)/1.15 var(--script);
  color: var(--teal-deep);
  margin: 2px 0 44px;
}
.prayer__body {
  font: 400 clamp(20px, 2.4vw, 27px)/1.85 var(--serif);
  color: var(--navy);
  margin: 0;
}
.prayer__body .amen { color: var(--teal-deep); }
.prayer__body b { font-weight: 700; }
.prayer__body .safe   { color: #c2185b; }
.prayer__body .curious{ color: #5a8a2a; }
.prayer__body .kind   { color: #e07b24; }
.prayer__body .loved  { color: #1b6fa8; }

/* Quote ------------------------------------------------------------------ */

.pull-quote {
  font: 800 clamp(24px, 3vw, 34px)/1.4 var(--sans);
  letter-spacing: -.015em;
  margin: 0;
}
.pull-quote + .attribution {
  font: 400 15px/1.6 var(--sans);
  color: var(--ink-60);
  margin: 16px 0 0;
}
.long-form {
  font: 400 17px/1.7 var(--sans);
  color: var(--ink-80);
  max-width: 64ch;
  margin: 32px 0 0;
}

/* Contact cards ---------------------------------------------------------- */

.contact-value {
  font: 400 15px var(--sans);
  color: var(--ink-78);
  margin: 0;
}
.contact-value a { color: var(--brand-deep); }

/* 404 -------------------------------------------------------------------- */

.error-page { padding: 96px 0 112px; text-align: center; }
.error-page h1 { font: 800 clamp(40px, 8vw, 84px)/1 var(--sans); margin: 0 0 12px; }
.error-page p { font: 400 17px/1.6 var(--sans); color: var(--ink-70); margin: 0 auto 28px; max-width: 46ch; }

/* WhatsApp floating button ----------------------------------------------- */

.whatsapp-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 45;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(32, 30, 29, .28);
  transition: transform .2s ease;
}
.whatsapp-fab:hover { transform: scale(1.07); }

/* 7. Footer ============================================================== */

.site-footer {
  background: var(--ink);
  color: rgba(243, 242, 242, .85);
  padding: 48px 0 28px;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  font: 400 13px/1.9 var(--sans);
}
.footer-heading {
  font: 700 11px var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 0 8px;
  color: var(--paper);
}
.footer-links { list-style: none; margin: 0; padding: 0; }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: var(--paper); text-decoration: underline; }
.site-footer p { margin: 0; }
.footer-base {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(243, 242, 242, .15);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-copy {
  font: 11px var(--sans);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(243, 242, 242, .5);
}
.spectrum-dots { display: flex; gap: 3px; }
.spectrum-dots span { width: 7px; height: 7px; }
.spectrum-dots span:nth-child(1) { background: var(--pink); }
.spectrum-dots span:nth-child(2) { background: var(--yellow); }
.spectrum-dots span:nth-child(3) { background: var(--teal); }
.spectrum-dots span:nth-child(4) { background: var(--green); }
.spectrum-dots span:nth-child(5) { background: var(--purple); }
.spectrum-dots span:nth-child(6) { background: var(--blue); }

/* 8. Motion & responsive ================================================= */

@keyframes lineIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
@keyframes revealUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

/* Hero lines animate in on load. */
.js .anim-line { opacity: 0; animation: lineIn .7s ease forwards; }
.anim-line:nth-child(1) { animation-delay: .10s; }
.hero h1 span:nth-child(1) { animation-delay: .25s; }
.hero h1 span:nth-child(2) { animation-delay: .40s; }
.hero__lead    { animation-delay: .55s; }
.hero__actions { animation-delay: .70s; }
.lens.anim-line { animation-delay: .85s; }

/* Scroll reveal — only hidden once JS confirms it can reveal them again. */
.js [data-reveal].is-hidden { opacity: 0; }
[data-reveal].is-revealed { animation: revealUp .8s var(--ease) both; }

@media (max-width: 1024px) {
  .experience-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Four grouped entries fit comfortably, so the drop-down menu is only needed
   on genuinely narrow screens. */
@media (max-width: 900px) {
  .nav-desktop { display: none; }
  .nav-toggle { display: flex; }
}

@media (max-width: 860px) {
  .split,
  .split--flip,
  .split--even { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .split--media-last { display: flex; flex-direction: column; }
  .split--media-last > :first-child { order: 2; }

  .section { padding-block: 48px; }
  .page-head { padding: 48px 0 36px; }
  .section-title { font-size: 26px; }
}

@media (max-width: 640px) {
  .experience-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .stats { grid-template-columns: minmax(0, 1fr); gap: 24px; }

  .cohorts { grid-template-columns: minmax(0, 1fr); }
  .cohort {
    padding: 20px 0;
    border-left: 0;
    border-top: 2px solid var(--rule);
  }
  .cohort:first-child { padding-top: 20px; }

  .numbered__item { grid-template-columns: minmax(0, 1fr); gap: 8px; }

  .hero { min-height: 0; padding-block: 56px; }
  .lens { width: 190px; height: 190px; }

  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }

  .prayer { padding: 56px 0 64px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .anim-line { opacity: 1; }
  .js [data-reveal].is-hidden { opacity: 1; }
}

@media print {
  .site-header, .whatsapp-fab, .cta-band, .skip-link { display: none !important; }
  body { background: #fff; }
}

/* 9. Announcement banner ================================================= */

.banner {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--ink);
  color: var(--paper);
  font: 400 14px/1.45 var(--sans);
}

.banner__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--brand);
  flex: none;
  animation: bannerPulse 2.2s ease-in-out infinite;
}

.banner__text { margin: 0; font-weight: 700; }

.banner__cta {
  color: var(--paper);
  font: 700 13px var(--sans);
  text-decoration: none;
  border: 1.5px solid rgba(243, 242, 242, .55);
  padding: 7px 14px;
  white-space: nowrap;
  flex: none;
  transition: background .2s ease, border-color .2s ease;
}
.banner__cta:hover { background: rgba(243, 242, 242, .16); border-color: var(--paper); }

.banner__close {
  background: transparent;
  border: 0;
  color: rgba(243, 242, 242, .6);
  cursor: pointer;
  padding: 6px;
  flex: none;
  display: flex;
  transition: color .2s ease;
}
.banner__close:hover { color: var(--paper); }

/* Full-width strip, above the header. */
.banner--top {
  padding: 11px var(--gutter);
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
}

/* Floating card, bottom-left so it clears the WhatsApp button. */
.banner--floating {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 44;
  max-width: min(30rem, calc(100vw - 100px));
  padding: 14px 16px;
  border-top: 3px solid var(--brand);
  box-shadow: 0 14px 40px rgba(32, 30, 29, .32);
  animation: bannerIn .55s var(--ease) .8s both;
}
.banner--floating .banner__text { font-size: 14.5px; }

@keyframes bannerIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes bannerPulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.5); opacity: .45; }
}

@media (max-width: 620px) {
  .banner--floating {
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: none;
    flex-wrap: wrap;
  }
  .banner--floating .banner__cta { width: 100%; text-align: center; justify-content: center; }
  .banner--floating .banner__close { position: absolute; top: 8px; right: 8px; }
  .whatsapp-fab { bottom: auto; top: calc(100vh - 76px); }
}

@media print { .banner { display: none !important; } }

/* 10. Public forms ======================================================= */

.form-block { border: 0; padding: 0; margin: 0 0 8px; }
.form-block legend { padding: 0; }

.field-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font: 400 14px/1.55 var(--sans);
  color: var(--ink-78);
  padding: 14px 16px;
  background: var(--bg-alt);
  border-left: 3px solid var(--rule);
}
.consent input { margin-top: 2px; flex: none; width: 17px; height: 17px; min-height: 0; }
.consent--error { border-left-color: var(--brand); background: var(--bg-tint); }

.side-note { position: sticky; top: calc(var(--header-h) + 24px); }
.side-note__box {
  margin-top: 28px;
  padding: 20px;
  background: var(--bg-cream);
  border-top: 3px solid var(--yellow);
}

.req { color: var(--brand); }

/* 11. Schedule & fees ==================================================== */

.schedule { border-bottom: 2px solid var(--rule); }
.schedule__row {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 8px 28px;
  padding: 18px 0;
  border-top: 2px solid var(--rule);
  align-items: baseline;
}
.schedule__time {
  font: 800 15px var(--sans);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.schedule__time::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--c, var(--pink));
  flex: none;
}
.schedule__what { font: 800 17px var(--sans); margin: 0 0 4px; }
.schedule__detail { font: 400 15px/1.6 var(--sans); color: var(--ink-78); margin: 0; max-width: 58ch; }

.fee-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2px;
  background: var(--rule);
  border: 2px solid var(--rule);
}
.fee {
  background: var(--bg);
  padding: 24px 22px;
}
.fee__label {
  font: 600 11px var(--sans);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin: 0 0 10px;
}
.fee__amount {
  font: 800 clamp(24px, 3.2vw, 34px) var(--sans);
  letter-spacing: -.02em;
  margin: 0;
  color: var(--ink);
}
.fee__note { font: 400 14px/1.55 var(--sans); color: var(--ink-70); margin: 10px 0 0; }

.includes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.includes li {
  font: 400 15px/1.5 var(--sans);
  color: var(--ink-80);
  padding-left: 26px;
  position: relative;
}
.includes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 12px;
  height: 7px;
  border-left: 2.5px solid var(--green);
  border-bottom: 2.5px solid var(--green);
  transform: rotate(-45deg);
}

@media (max-width: 860px) {
  .side-note { position: static; }
  .schedule__row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* Parent Portal link in the header --------------------------------------- */

.nav-portal {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 700 12.5px var(--sans);
  color: var(--ink);
  text-decoration: none;
  padding: 7px 13px;
  border: 1.5px solid var(--rule);
  white-space: nowrap;
  flex: none;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.nav-portal:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.nav-portal svg { flex: none; }

/* Below this it lives in the drop-down menu instead. */
@media (max-width: 900px) {
  .nav-portal { display: none; }
}

/* Grouped headings in the mobile menu ------------------------------------ */

.nav-mobile__group {
  font: 700 10.5px var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand-deep);
  padding: 16px 0 2px;
  border-top: 2px solid var(--rule);
  margin-top: 6px;
}
.nav-mobile__group:first-child { margin-top: 0; border-top: 0; padding-top: 8px; }
.nav-mobile a.nav-mobile__child { border-top: 0; padding: 11px 0 11px 14px; font-size: 14.5px; }