/* ==========================================================================
   Kovenant Kids — styles.css
   Faith. Fun. Friends. Future.
   --------------------------------------------------------------------------
   1. Design tokens
   2. Reset & base
   3. Shared components (header, buttons, sections, cards, waves, footer)
   4. Home page sections
   5. Motion & utilities
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
  /* ---- Color: core brand (sampled from flyer) ---- */
  --navy:        #1e2a5a;  /* deep navy — headings, dark sections, footer */
  --navy-soft:   #3a4675;  /* softened navy — body text on light bg */
  --yellow:      #ffc21a;  /* sunshine yellow — primary CTA / accent */
  --yellow-deep: #e6a800;  /* yellow hover / borders */

  /* ---- Color: supporting accents (one per card, like the flyer) ---- */
  --pink:        #e8486e;  /* hearts, location pin, Arts & Crafts */
  --sky:         #2493d1;  /* Bible Lessons, hours icon */
  --green:       #3f9c47;  /* Sports & Games, ages icon */
  --purple:      #6a3fa0;  /* Music / "And Much More!" */

  /* ---- Color: accent tints (icon-chip backgrounds) ---- */
  --pink-tint:   #fdedf1;
  --sky-tint:    #e9f4fb;
  --green-tint:  #ecf6ed;
  --purple-tint: #f2edf8;
  --yellow-tint: #fff6dc;

  /* ---- Color: surfaces ---- */
  --white:       #ffffff;
  --cream:       #fdf8ee;  /* warm alternating section bg */
  --navy-line:   #e5e2d8;  /* hairline borders on light surfaces */
  --on-navy:     #cdd4ee;  /* body text on navy sections */

  /* ---- Color: form states ---- */
  --error:       #c62f45;
  --error-tint:  #fdeff1;
  --success:     #2c7a34;
  --success-tint:#ecf6ed;

  /* ---- Typography ---- */
  --font-display: "Baloo 2", "Nunito", sans-serif;
  --font-body:    "Nunito", "Segoe UI", sans-serif;

  /* Fluid type scale (mobile → desktop) */
  --text-xs:   0.8125rem;                          /* 13px — badges, captions */
  --text-sm:   0.9375rem;                          /* 15px — meta, footer */
  --text-base: 1.0625rem;                          /* 17px — body */
  --text-md:   clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);   /* leads */
  --text-lg:   clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);   /* card titles, h3 */
  --text-xl:   clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);     /* h2 section titles */
  --text-2xl:  clamp(2.25rem, 1.7rem + 2.8vw, 3.5rem);     /* page-hero h1 */
  --text-hero: clamp(2.5rem, 1.8rem + 3.6vw, 4.25rem);     /* home hero h1 */

  --leading-tight: 1.12;
  --leading-body:  1.65;

  /* ---- Spacing scale ---- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --section-pad: clamp(3.5rem, 2.5rem + 4vw, 6.5rem); /* vertical rhythm between blocks */

  /* ---- Radii ---- */
  --radius-sm:   10px;
  --radius-md:   18px;
  --radius-lg:   28px;
  --radius-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-card:  0 6px 24px rgba(30, 42, 90, 0.10);
  --shadow-lift:  0 12px 32px rgba(30, 42, 90, 0.16);
  --shadow-header:0 2px 16px rgba(30, 42, 90, 0.08);

  /* ---- Layout ---- */
  --container: 72rem;       /* 1152px content width */
  --header-h: 5rem;

  /* ---- Motion ---- */
  --ease-pop: cubic-bezier(0.34, 1.4, 0.64, 1);
  --speed: 220ms;
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--navy-soft);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--navy);
  line-height: var(--leading-tight);
  font-weight: 700;
}

h1 { font-size: var(--text-hero); font-weight: 800; }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }

p + p { margin-top: var(--space-4); }

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

a {
  color: var(--navy);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

ul[class] {
  list-style: none;
  padding: 0;
}

button {
  font: inherit;
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid var(--sky);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection {
  background: var(--yellow);
  color: var(--navy);
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2rem);
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 200;
  background: var(--navy);
  color: var(--white);
  padding: var(--space-3) var(--space-5);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus {
  top: 0;
}

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

/* ==========================================================================
   3. SHARED COMPONENTS
   ========================================================================== */

/* ---- Buttons: chunky, candy-pressed ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  padding: 0.8em 1.9em;
  border: 0;
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: transform var(--speed) var(--ease-pop),
              box-shadow var(--speed) ease;
  will-change: transform;
}

.btn--yellow {
  background: var(--yellow);
  color: var(--navy);
  box-shadow: 0 4px 0 var(--yellow-deep);
}

.btn--navy {
  background: var(--navy);
  color: var(--white);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.28);
}

.btn--ghost {
  background: transparent;
  color: var(--navy);
  box-shadow: inset 0 0 0 3px var(--navy);
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-3px);
}

.btn--yellow:hover,
.btn--yellow:focus-visible {
  box-shadow: 0 7px 0 var(--yellow-deep), var(--shadow-lift);
}

.btn--navy:hover,
.btn--navy:focus-visible {
  box-shadow: 0 7px 0 rgba(0, 0, 0, 0.28), var(--shadow-lift);
}

.btn:active {
  transform: translateY(1px);
  box-shadow: none;
}

.btn--lg {
  font-size: var(--text-md);
  padding: 0.9em 2.2em;
}

/* ---- Header ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  transition: box-shadow var(--speed) ease;
}

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

.site-header__bar {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: var(--header-h);
}

.site-header__logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.site-header__logo img {
  height: 4.5rem;
  width: auto;
}

.site-nav {
  margin-left: auto;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(var(--space-3), 1.4vw, var(--space-5));
}

.site-nav__link {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--navy);
  text-decoration: none;
  padding: var(--space-2) 0;
  border-bottom: 3px solid transparent;
  transition: border-color var(--speed) ease;
}

.site-nav__link:hover {
  border-bottom-color: var(--yellow);
}

.site-nav__link[aria-current="page"] {
  border-bottom-color: var(--yellow);
}

.site-header__cta {
  flex-shrink: 0;
}

/* ---- Programs dropdown ---- */
.site-nav__item.has-dropdown {
  position: relative;
}

/* The toggle is a <button> made to look exactly like a nav link.
   It carries .site-nav__link too (font family/size/weight come from there);
   here we only reset the button chrome and inherit line-height so it sits on
   the same baseline as the sibling <a> links — without clobbering weight. */
.site-nav__dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  line-height: inherit;
  cursor: pointer;
}

.site-nav__dropdown-toggle[aria-current="true"] {
  border-bottom-color: var(--yellow);
}

.site-nav__caret {
  width: 0.85rem;
  height: 0.85rem;
  transition: transform var(--speed) ease;
}

.site-nav__menu {
  list-style: none;
  margin: 0;
  padding: var(--space-2);
  min-width: 15rem;
}

.site-nav__sublink {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--navy);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: background var(--speed) ease, color var(--speed) ease;
}

.site-nav__sublink:hover,
.site-nav__sublink:focus-visible {
  background: var(--yellow-tint);
}

.site-nav__sublink[aria-current="page"] {
  background: var(--yellow-tint);
  color: var(--sky);
}

@media (min-width: 1024px) {
  /* Desktop: menu floats below the toggle, shown on hover or when open. */
  .site-nav__menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    background: var(--white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--speed) ease, transform var(--speed) ease, visibility var(--speed) ease;
    z-index: 120;
  }

  .site-nav__item.has-dropdown:hover .site-nav__menu,
  .site-nav__item.has-dropdown:focus-within .site-nav__menu,
  .site-nav__dropdown-toggle[aria-expanded="true"] + .site-nav__menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }

  .site-nav__item.has-dropdown:hover .site-nav__caret,
  .site-nav__dropdown-toggle[aria-expanded="true"] .site-nav__caret {
    transform: rotate(180deg);
  }
}

/* Hamburger (hidden on desktop) */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: var(--yellow-tint);
  border: 0;
  border-radius: var(--radius-sm);
  margin-left: auto;
}

.nav-toggle__line {
  display: block;
  width: 1.375rem;
  height: 3px;
  margin-inline: auto;
  border-radius: 2px;
  background: var(--navy);
  transition: transform var(--speed) ease, opacity var(--speed) ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

@media (max-width: 1023px) {
  .nav-toggle {
    display: flex;
  }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-left: 0;
    background: var(--white);
    border-top: 1px solid var(--navy-line);
    box-shadow: var(--shadow-header);
    padding: var(--space-4) clamp(1.25rem, 4vw, 2rem) var(--space-5);
    display: none;
  }

  .site-nav.is-open {
    display: block;
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .site-nav__link {
    display: block;
    padding: var(--space-3) var(--space-2);
    border-bottom: 1px solid var(--navy-line);
    border-radius: var(--radius-sm);
  }

  .site-nav__link:hover,
  .site-nav__link[aria-current="page"] {
    background: var(--yellow-tint);
    border-bottom-color: var(--navy-line);
  }

  /* Mobile dropdown: full-width toggle, menu expands inline below it. */
  .site-nav__dropdown-toggle {
    width: 100%;
    justify-content: space-between;
    padding: var(--space-3) var(--space-2);
    border-bottom: 1px solid var(--navy-line);
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    color: var(--navy);
  }

  .site-nav__menu {
    padding: 0 0 0 var(--space-3);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--speed) ease;
  }

  .site-nav__dropdown-toggle[aria-expanded="true"] + .site-nav__menu {
    max-height: 24rem;
  }

  .site-nav__dropdown-toggle[aria-expanded="true"] .site-nav__caret {
    transform: rotate(180deg);
  }

  .site-nav__sublink {
    padding: var(--space-3) var(--space-2);
    border-bottom: 1px solid var(--navy-line);
    border-radius: 0;
  }

  .site-nav__cta-row {
    padding-top: var(--space-4);
  }

  .site-header__cta {
    display: none;
  }
}

@media (min-width: 1024px) {
  .site-nav__cta-row {
    display: none;
  }
}

/* ---- Wave dividers ----
   Sits BETWEEN two sections: background = section above, fill = section below.
   e.g. <div class="wave from-cream to-white" aria-hidden="true">…</div> */
.wave {
  line-height: 0;
}

.wave svg {
  display: block;
  width: 100%;
  height: clamp(2.25rem, 5.5vw, 4.5rem);
  fill: currentColor;
}

.wave--flip svg {
  transform: scaleX(-1);
}

.from-white  { background: var(--white); }
.from-cream  { background: var(--cream); }
.from-tint   { background: var(--yellow-tint); }
.from-navy   { background: var(--navy); }
.from-yellow { background: var(--yellow); }
.to-white    { color: var(--white); }
.to-cream    { color: var(--cream); }
.to-tint     { color: var(--yellow-tint); }
.to-navy     { color: var(--navy); }
.to-yellow   { color: var(--yellow); }

/* ---- Sections ---- */
.section {
  padding-block: var(--section-pad);
}

.section--white  { background: var(--white); }
.section--cream  { background: var(--cream); }
.section--tint   { background: var(--yellow-tint); }
.section--navy   { background: var(--navy); }
.section--yellow { background: var(--yellow); }

/* Section heading pattern: eyebrow + title + squiggle */
.section-head {
  max-width: 44rem;
  margin-bottom: var(--space-7);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--pink);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-3);
}

.eyebrow--sky    { color: var(--white); background: var(--sky); }
.eyebrow--green  { color: var(--white); background: var(--green); }
.eyebrow--purple { color: var(--white); background: var(--purple); }

.squiggle {
  display: block;
  width: 8.5rem;
  height: 0.75rem;
  margin-top: var(--space-3);
  color: var(--yellow);
}

.section-head--center .squiggle {
  margin-inline: auto;
}

.section-head .lead {
  margin-top: var(--space-4);
}

.lead {
  font-size: var(--text-md);
}

/* ---- Cards & accent system ---- */
.accent-yellow { --accent: var(--yellow-deep); --accent-tint: var(--yellow-tint); }
.accent-pink   { --accent: var(--pink);        --accent-tint: var(--pink-tint); }
.accent-sky    { --accent: var(--sky);         --accent-tint: var(--sky-tint); }
.accent-green  { --accent: var(--green);       --accent-tint: var(--green-tint); }
.accent-purple { --accent: var(--purple);      --accent-tint: var(--purple-tint); }

.card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
}

.chip {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-md);
  background: var(--accent-tint, var(--yellow-tint));
  color: var(--accent, var(--navy));
  transition: background var(--speed) ease, color var(--speed) ease;
  flex-shrink: 0;
}

.chip svg {
  width: 1.75rem;
  height: 1.75rem;
}

/* Card grids */
.grid {
  display: grid;
  gap: var(--space-5);
}

.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 959px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 599px) {
  .grid--4,
  .grid--3,
  .grid--2 { grid-template-columns: 1fr; }
}

/* The fee selector holds a variable number of program tabs, so it wraps to
   fit rather than locking to a fixed column count. */
.fee-selector {
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
}

@media (max-width: 599px) {
  .fee-selector { grid-template-columns: 1fr; }
}

/* ---- CTA band ---- */
.cta-band {
  text-align: center;
}

.cta-band h2 {
  font-size: var(--text-xl);
}

.cta-band .lead {
  max-width: 38rem;
  margin: var(--space-3) auto var(--space-6);
  color: var(--navy);
}

.cta-band__note {
  margin-top: var(--space-4);
  font-weight: 700;
  color: var(--navy);
}

.cta-band__note a {
  white-space: nowrap;
}

/* ---- Footer ---- */
.site-footer {
  background: var(--navy);
  color: var(--on-navy);
  padding-block: var(--space-8) var(--space-5);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr;
  gap: var(--space-7);
  padding-bottom: var(--space-7);
}

@media (max-width: 859px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

.site-footer h2 {
  color: var(--white);
  font-size: var(--text-base);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

.site-footer__logo img {
  /* Square full-colour logo (white bg) on a white chip so it reads on navy. */
  width: 10rem;
  height: 10rem;
  background: var(--white);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

.site-footer__tagline {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--yellow);
  margin-bottom: var(--space-3);
}

.site-footer__social {
  display: flex;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
}

.site-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--radius-pill);
  background: var(--yellow);
  color: var(--navy);
  transition: background var(--speed) ease, transform var(--speed) ease;
}

.site-footer__social a:hover {
  background: var(--yellow-deep);
  transform: translateY(-2px);
  text-decoration: none;
}

.site-footer__social svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Contact page — "Follow along" social row under the contact cards */
.contact-social {
  margin-top: var(--space-7);
  text-align: center;
}

.contact-social__label {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--navy);
  margin-bottom: var(--space-3);
}

.contact-social__list {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.contact-social__list a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--cream);
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--speed) ease, transform var(--speed) ease;
}

.contact-social__list a:hover {
  background: var(--yellow-tint);
  transform: translateY(-2px);
}

.contact-social__list svg {
  width: 1.35rem;
  height: 1.35rem;
}

.site-footer a {
  color: var(--white);
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
  text-decoration-color: var(--yellow);
}

.site-footer__links li + li {
  margin-top: var(--space-2);
}

.site-footer__contact li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.site-footer__contact li + li {
  margin-top: var(--space-3);
}

.site-footer__contact svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--yellow);
  flex-shrink: 0;
  margin-top: 0.2em;
}

.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  font-size: var(--text-sm);
}

/* ==========================================================================
   4. HOME PAGE SECTIONS
   ========================================================================== */

/* ---- Hero ---- */
.hero {
  background: var(--cream);
  padding-block: clamp(2.5rem, 2rem + 3vw, 5rem) clamp(2rem, 1.5rem + 2vw, 3.5rem);
  overflow: hidden;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(var(--space-6), 4vw, var(--space-8));
  align-items: center;
}

@media (max-width: 859px) {
  .hero__grid {
    grid-template-columns: 1fr;
  }
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--navy);
  background: var(--white);
  border: 2px dashed var(--yellow-deep);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-5);
}

.hero__badge svg {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--pink);
}

.hero h1 .u-mark {
  position: relative;
  white-space: nowrap;
}

/* yellow crayon highlight behind one hero word */
.u-mark::after {
  content: "";
  position: absolute;
  left: -0.1em;
  right: -0.1em;
  bottom: 0.02em;
  height: 0.38em;
  background: var(--yellow);
  border-radius: var(--radius-pill);
  z-index: -1;
  transform: rotate(-1deg);
}

.hero .lead {
  max-width: 34rem;
  margin-block: var(--space-5) var(--space-6);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-6);
  padding: 0;
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--navy);
}

.hero__meta li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.hero__meta svg {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--green);
}

/* Hero photo: rotated frame + doodles */
.hero__media {
  position: relative;
  justify-self: center;
  max-width: 33rem;
}

.hero__photo {
  border-radius: var(--radius-lg);
  border: 8px solid var(--white);
  box-shadow: var(--shadow-lift);
  transform: rotate(2deg);
  width: 100%;
}

.hero__doodle {
  position: absolute;
  color: var(--yellow-deep);
}

.hero__doodle--sun {
  width: 3.5rem;
  height: 3.5rem;
  top: -1.5rem;
  left: -1.25rem;
  transform: rotate(-12deg);
}

.hero__doodle--heart {
  width: 2.75rem;
  height: 2.75rem;
  bottom: -0.75rem;
  right: -0.5rem;
  color: var(--pink);
  transform: rotate(10deg);
}

@media (max-width: 859px) {
  .hero__media {
    max-width: 28rem;
  }
}

/* ---- Quick facts ---- */
.fact-card {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.fact-card h3 {
  font-size: var(--text-base);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.fact-card p {
  font-size: var(--text-sm);
  margin-top: var(--space-1);
}

/* ---- Value cards (Faith / Fun / Friends) ---- */
.value-card {
  text-align: center;
  padding: var(--space-6) var(--space-5);
  border-top: 6px solid var(--accent);
}

.value-card .chip {
  margin: 0 auto var(--space-4);
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 50%;
}

.value-card .chip svg {
  width: 2.125rem;
  height: 2.125rem;
}

.value-card h3 {
  margin-bottom: var(--space-2);
}

/* ---- Activity cards ---- */
.activity-card {
  display: block;
  text-decoration: none;
  transition: transform var(--speed) var(--ease-pop),
              box-shadow var(--speed) ease;
}

.activity-card:hover,
.activity-card:focus-visible {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lift);
}

.activity-card:hover .chip,
.activity-card:focus-visible .chip {
  background: var(--accent);
  color: var(--white);
}

.activity-card .chip {
  margin-bottom: var(--space-4);
}

.activity-card h3 {
  font-size: var(--text-md);
  margin-bottom: var(--space-2);
}

.activity-card p {
  font-size: var(--text-sm);
}

.activity-card__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--accent);
}

.activity-card__more svg {
  width: 1rem;
  height: 1rem;
  transition: transform var(--speed) var(--ease-pop);
}

.activity-card:hover .activity-card__more svg {
  transform: translateX(4px);
}

.section__footer-cta {
  text-align: center;
  margin-top: var(--space-7);
}

/* ---- Gallery strip ---- */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}

.gallery__item {
  background: var(--white);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  transition: transform var(--speed) var(--ease-pop);
}

.gallery__item:nth-child(odd)  { transform: rotate(-1.5deg); }
.gallery__item:nth-child(even) { transform: rotate(1.5deg); }

.gallery__item:hover {
  transform: rotate(0deg) translateY(-4px);
}

.gallery__item img {
  border-radius: var(--radius-sm);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}

@media (max-width: 959px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 479px) {
  .gallery { grid-template-columns: 1fr; }
}

/* ---- Mission band ---- */
.mission {
  text-align: center;
}

.mission__cross {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--yellow);
  margin: 0 auto var(--space-4);
}

.mission__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: var(--space-3);
}

.mission blockquote {
  max-width: 46rem;
  margin: 0 auto;
}

.mission blockquote p {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  line-height: 1.4;
  color: var(--white);
}

/* ==========================================================================
   4b. SUBPAGE COMPONENTS
   ========================================================================== */

/* ---- Page hero (About / Activities / Registration / Contact) ---- */
.page-hero {
  position: relative;
  background: var(--navy);
  color: var(--on-navy);
  text-align: center;
  padding-block: clamp(2.75rem, 2rem + 3vw, 4.5rem);
  overflow: hidden;
}

.page-hero__kicker {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: var(--space-2);
}

.page-hero h1 {
  color: var(--white);
  font-size: var(--text-2xl);
}

.page-hero .lead {
  max-width: 40rem;
  margin: var(--space-3) auto 0;
}

.page-hero .squiggle {
  margin-inline: auto;
}

/* faint corner doodles */
.page-hero__doodle {
  position: absolute;
  color: var(--yellow);
  opacity: 0.35;
}

.page-hero__doodle--left {
  width: 4.5rem;
  height: 4.5rem;
  left: 4vw;
  bottom: -0.75rem;
  transform: rotate(-14deg);
}

.page-hero__doodle--right {
  width: 3.5rem;
  height: 3.5rem;
  right: 5vw;
  top: 1.25rem;
  transform: rotate(12deg);
  color: var(--pink);
}

@media (max-width: 599px) {
  .page-hero__doodle { display: none; }
}

/* ---- Feature rows (Activities page, About story) ---- */
.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--space-6), 4vw, var(--space-8));
  align-items: center;
}

.feature__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 8px solid var(--white);
  box-shadow: var(--shadow-card);
  transform: rotate(-1.5deg);
}

.feature--flip .feature__media {
  order: 2;
}

.feature--flip .feature__media img {
  transform: rotate(1.5deg);
}

.feature .chip {
  margin-bottom: var(--space-4);
}

.feature h2,
.feature h3 {
  margin-bottom: var(--space-3);
}

.feature__list {
  margin-top: var(--space-4);
}

.feature__list li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-weight: 600;
}

.feature__list li + li {
  margin-top: var(--space-2);
}

.feature__list svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  margin-top: 0.25em;
  color: var(--accent, var(--green));
}

/* Centered, two-column checklist for full-width sections */
.strive-list {
  max-width: 820px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3) var(--space-5);
}

.strive-list li {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-card);
}

.strive-list li + li {
  margin-top: 0;
}

@media (max-width: 639px) {
  .strive-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .feature {
    grid-template-columns: 1fr;
  }

  .feature__media,
  .feature--flip .feature__media {
    order: -1;
    max-width: 28rem;
  }
}

/* ---- Day schedule (About) ---- */
.schedule {
  max-width: 40rem;
  margin-inline: auto;
}

.schedule li {
  display: flex;
  gap: var(--space-5);
  position: relative;
  padding-bottom: var(--space-5);
}

.schedule li::before {
  content: "";
  position: absolute;
  left: 5.35rem;
  top: 1.4rem;
  bottom: -0.25rem;
  border-left: 3px dashed var(--navy-line);
}

.schedule li:last-child::before {
  display: none;
}

.schedule__time {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--navy);
  width: 4.5rem;
  flex-shrink: 0;
  text-align: right;
}

.schedule__dot {
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  background: var(--accent, var(--yellow));
  flex-shrink: 0;
  margin-top: 0.45rem;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 4px var(--white);
}

.schedule__body strong {
  display: block;
  font-family: var(--font-display);
  color: var(--navy);
}

.schedule__body p {
  font-size: var(--text-sm);
}

@media (max-width: 479px) {
  .schedule li { gap: var(--space-3); }
  .schedule li::before { left: 4.1rem; }
  .schedule__time { width: 3.5rem; }
}

/* ---- Team cards (About) ---- */
.team-card {
  text-align: center;
  padding-bottom: var(--space-6);
}

.team-card img {
  width: 8.5rem;
  height: 8.5rem;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto var(--space-4);
  border: 6px solid var(--accent-tint, var(--yellow-tint));
}

.team-card h3 {
  font-size: var(--text-md);
}

.team-card__role {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--accent, var(--pink));
  margin-bottom: var(--space-2);
}

.team-card p {
  font-size: var(--text-sm);
  padding-inline: var(--space-4);
}

/* ---- Forms (Registration + Contact) ---- */
.form-card {
  max-width: 46rem;
  margin-inline: auto;
  padding: clamp(var(--space-5), 4vw, var(--space-7));
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-5);
}

@media (max-width: 599px) {
  .form-row { grid-template-columns: 1fr; }
}

.field {
  margin-bottom: var(--space-5);
}

.field label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--navy);
  margin-bottom: var(--space-2);
}

.field .req {
  color: var(--pink);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  color: var(--navy);
  background: var(--white);
  border: 2px solid var(--navy-line);
  border-radius: var(--radius-sm);
  padding: 0.7em 0.9em;
  transition: border-color var(--speed) ease;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--navy-soft);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--sky);
  outline: none;
  box-shadow: 0 0 0 3px var(--sky-tint);
}

.field textarea {
  min-height: 7.5rem;
  resize: vertical;
}

.field__hint {
  font-size: var(--text-sm);
  margin-top: var(--space-1);
}

.field__error {
  display: none;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--error);
  margin-top: var(--space-1);
}

.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea {
  border-color: var(--error);
  background: var(--error-tint);
}

.field.is-invalid .field__error {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.form-required-note {
  font-size: var(--text-sm);
  margin-bottom: var(--space-5);
}

/* form-level alert (network / server failure) */
.form-alert {
  display: none;
  background: var(--error-tint);
  border: 2px solid var(--error);
  border-radius: var(--radius-sm);
  color: var(--error);
  font-weight: 700;
  padding: var(--space-4);
  margin-bottom: var(--space-5);
}

.form-alert.is-visible {
  display: block;
}

/* success panel (replaces the form) */
.form-success {
  display: none;
  text-align: center;
  padding: var(--space-6);
}

.form-success.is-visible {
  display: block;
}

.form-success__icon {
  display: grid;
  place-items: center;
  width: 4.25rem;
  height: 4.25rem;
  margin: 0 auto var(--space-4);
  border-radius: 50%;
  background: var(--success-tint);
  color: var(--success);
}

.form-success__icon svg {
  width: 2.25rem;
  height: 2.25rem;
}

.form-success h3 {
  margin-bottom: var(--space-2);
}

.btn[disabled] {
  opacity: 0.6;
  cursor: wait;
  transform: none;
}

/* Honeypot: moved off-screen (not display:none, so bots still "see" it) */
.hp {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Turnstile widget mount point (empty + zero-height until a site key is set) */
.turnstile-slot:not(:empty) {
  margin-bottom: var(--space-5);
}

/* ---- Contact page ---- */
.contact-card {
  text-align: center;
}

.contact-card .chip {
  margin: 0 auto var(--space-3);
}

.contact-card h3 {
  font-size: var(--text-md);
  margin-bottom: var(--space-1);
}

.contact-card a {
  font-weight: 700;
}

.map-embed {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 8px solid var(--white);
}

.map-embed iframe {
  display: block;
  width: 100%;
  height: clamp(18rem, 40vw, 26rem);
  border: 0;
}

/* ---- Hours strip (Contact) ---- */
.hours-strip {
  text-align: center;
}

.hours-strip .chip {
  margin: 0 auto var(--space-3);
}

.hours-strip h2 {
  font-size: var(--text-lg);
}

.hours-strip p {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-md);
  color: var(--navy);
}

/* ==========================================================================
   4b. PROGRAM / SUPPORT / FEES COMPONENTS
   ========================================================================== */

/* ---- Pill lists (the "children enjoy / includes" bulleted lists) ---- */
.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
}

.pill-list li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--accent-tint, var(--sky-tint));
  color: var(--navy);
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: var(--text-sm);
  line-height: 1.3;
}

.pill-list li svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--accent, var(--sky));
}

/* Pills on a navy background (support page dark bands) */
.section--navy .pill-list li {
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
}

/* ---- Program summary cards (Programs page overview grid) ---- */
.program-card {
  display: flex;
  flex-direction: column;
  border-top: 6px solid var(--accent);
  height: 100%;
  text-decoration: none;
}

.program-card .chip {
  margin-bottom: var(--space-4);
}

.program-card__age {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-1);
}

.program-card h3 {
  font-size: var(--text-md);
  margin-bottom: var(--space-2);
}

.program-card p {
  font-size: var(--text-sm);
}

.program-card__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: auto;
  padding-top: var(--space-4);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--accent);
}

.program-card__more span {
  text-decoration: underline;
  text-decoration-color: var(--accent);
}

.program-card__more svg {
  width: 1rem;
  height: 1rem;
}

/* ---- Fee service selector (tabs) ---- */
/* Buttons styled to match the program cards, but clearly interactive:
   pointer cursor, hover lift, and a persistent selected state. */
.program-card--select {
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--white);
  border: 0;
  border-top: 6px solid var(--accent);
  transition: transform var(--speed) ease, box-shadow var(--speed) ease;
}

.program-card--select:hover,
.program-card--select:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-lg, 0 14px 30px rgba(0, 0, 0, 0.12));
}

/* Selected card: filled accent bar + tinted background so it's obvious
   which service's fees are currently showing. */
.program-card--select.is-active {
  background: var(--accent-tint, var(--yellow-tint));
  box-shadow: 0 0 0 3px var(--accent), var(--shadow-card);
}

.program-card--select.is-active .program-card__more span {
  text-decoration: none;
}

/* Fee panels — only the active one is shown (progressive enhancement:
   without JS, html:not(.js) leaves them all visible). */
.js .fee-panel {
  display: none;
}

.js .fee-panel.is-active {
  display: block;
}

/* ---- Fee tables ---- */
.fee-table-wrap {
  max-width: 46rem;
  margin: var(--space-5) auto 0;
  overflow-x: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.fee-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  font-size: var(--text-base);
}

.fee-table caption {
  caption-side: top;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--navy);
  padding: var(--space-4) var(--space-5) 0;
}

.fee-table th,
.fee-table td {
  padding: var(--space-3) var(--space-5);
  text-align: left;
  border-bottom: 1px solid var(--navy-line);
}

.fee-table thead th {
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  border-bottom: none;
}

.fee-table tbody tr:last-child td {
  border-bottom: none;
}

.fee-table tbody tr:nth-child(even) td {
  background: var(--cream);
}

.fee-table td.fee-price,
.fee-table th.fee-price {
  text-align: right;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
}

/* Small print under a table (policies, footnotes) */
.fee-note {
  max-width: 46rem;
  margin: var(--space-4) auto 0;
  font-size: var(--text-sm);
  color: var(--navy-soft);
}

.fee-note em {
  font-style: italic;
}

/* ---- Step process (Special Support "How it works") ---- */
.steps {
  counter-reset: step;
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.step {
  position: relative;
  padding: var(--space-6) var(--space-6) var(--space-6) var(--space-8);
  border-left: 6px solid var(--accent);
}

.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: var(--space-6);
  left: calc(var(--space-8) * -0.5 - 3px);
  transform: translateX(-50%);
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 800;
  box-shadow: var(--shadow-card);
}

.step h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

@media (max-width: 639px) {
  .step {
    padding-left: var(--space-7);
  }
  .step::before {
    left: 0;
    transform: translateX(-50%);
  }
}

/* ---- Founder feature (About page directors block) ---- */
.founder__body h2,
.founder__body h3 {
  margin-bottom: var(--space-3);
}

.founder__body p + p {
  margin-top: var(--space-3);
}

.founder__cred {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-4) 0;
  padding: 0;
}

.founder__cred li {
  padding: var(--space-1) var(--space-3);
  background: var(--sky-tint);
  color: var(--navy);
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: var(--text-xs);
}

/* Collapsible extended bio */
.founder__more[hidden] {
  display: none;
}

.founder__more p + p {
  margin-top: var(--space-3);
}

.founder__toggle {
  margin-top: var(--space-4);
}

.founder__toggle::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  margin-left: 0.6em;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--speed) ease;
}

.founder__toggle[aria-expanded="true"]::after {
  transform: translateY(2px) rotate(-135deg);
}

/* ==========================================================================
   5. MOTION & UTILITIES
   ========================================================================== */

/* Scroll reveal — only when JS is running (html.js set in main.js) */
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 500ms ease, transform 500ms var(--ease-pop);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

.js .reveal--delay-1 { transition-delay: 80ms; }
.js .reveal--delay-2 { transition-delay: 160ms; }
.js .reveal--delay-3 { transition-delay: 240ms; }

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

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }
}

.hidden {
  display: none !important;
}

/* ==========================================================================
   TOP CONTACT BAR (above the navbar)
   A slim navy strip with phone, email, and social links. It sits in the
   sticky stack with the header so it scrolls away naturally, then the header
   sticks to the top on its own.
   ========================================================================== */
.topbar {
  background: var(--navy);
  color: var(--on-navy);
  font-size: var(--text-sm);
}

.topbar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 2.75rem;
  padding-block: var(--space-2);
  flex-wrap: wrap;
}

.topbar__contact {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.topbar__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--on-navy);
  text-decoration: none;
  font-weight: 600;
  transition: color var(--speed) ease;
}

.topbar__link:hover {
  color: var(--white);
}

.topbar__link svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.topbar__social {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.topbar__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: var(--radius-pill);
  color: var(--navy);
  background: var(--yellow);
  transition: background var(--speed) ease, transform var(--speed) ease;
}

.topbar__social-link:hover {
  background: var(--yellow-deep);
  transform: translateY(-1px);
}

.topbar__social-link svg {
  width: 1.05rem;
  height: 1.05rem;
}

@media (max-width: 600px) {
  .topbar__inner {
    justify-content: center;
  }

  .topbar__link-label {
    display: none;
  }

  .topbar__link svg {
    width: 1.1rem;
    height: 1.1rem;
  }

  .topbar__social {
    margin-left: 0;
  }
}

/* ==========================================================================
   FLOATING CONTACT DOCK (bottom-right)
   One launcher button; clicking it opens a chat-widget-style panel that lists
   the contact actions (call / form / email / WhatsApp). Not a live chat —
   each option is a direct contact link.
   ========================================================================== */
.contact-dock {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-3);
}

/* ---- Launcher button ---- */
.contact-dock__launcher {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.75rem;
  height: 3.75rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--yellow);
  color: var(--navy);
  cursor: pointer;
  box-shadow: var(--shadow-lift);
  transition: transform var(--speed) ease, background var(--speed) ease;
}

.contact-dock__launcher:hover {
  transform: scale(1.06);
  background: var(--yellow-deep);
}

.contact-dock__launcher:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
}

.contact-dock__launcher-icon {
  width: 1.7rem;
  height: 1.7rem;
}

/* Swap chat ↔ close icon based on the launcher's expanded state */
.contact-dock__launcher-icon--close { display: none; }
.contact-dock__launcher[aria-expanded="true"] .contact-dock__launcher-icon--chat  { display: none; }
.contact-dock__launcher[aria-expanded="true"] .contact-dock__launcher-icon--close { display: block; }

/* ---- Popup panel ---- */
.contact-dock__panel {
  width: min(20rem, calc(100vw - 2 * clamp(1rem, 3vw, 2rem)));
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
  transform-origin: bottom right;
  animation: dock-pop var(--speed) ease;
}

.contact-dock__panel[hidden] {
  display: none;
}

@keyframes dock-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.contact-dock__panel-head {
  position: relative;
  background: var(--navy);
  color: var(--white);
  padding: var(--space-5) var(--space-5) var(--space-4);
}

.contact-dock__panel-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
}

.contact-dock__panel-sub {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--on-navy);
}

.contact-dock__panel-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.15);
  color: var(--white);
  cursor: pointer;
  transition: background var(--speed) ease;
}

.contact-dock__panel-close:hover {
  background: rgba(255, 255, 255, 0.28);
}

.contact-dock__panel-close svg {
  width: 1.1rem;
  height: 1.1rem;
}

/* ---- Contact option rows ---- */
.contact-dock__option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-5);
  border: 0;
  border-top: 1px solid var(--navy-line);
  background: var(--white);
  color: var(--navy);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--speed) ease;
}

.contact-dock__option:first-of-type {
  border-top: 0;
}

.contact-dock__option:hover {
  background: var(--cream);
}

.contact-dock__option:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: -3px;
}

.contact-dock__option-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: var(--radius-pill);
  color: var(--white);
}

.contact-dock__option-icon svg {
  width: 1.4rem;
  height: 1.4rem;
}

.contact-dock__option--call     .contact-dock__option-icon { background: var(--sky); }
.contact-dock__option--form     .contact-dock__option-icon { background: var(--pink); }
.contact-dock__option--email    .contact-dock__option-icon { background: var(--purple); }
.contact-dock__option--whatsapp .contact-dock__option-icon { background: #25d366; }

.contact-dock__option-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.contact-dock__option-text strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
}

.contact-dock__option-text span {
  font-size: var(--text-sm);
  color: var(--navy-soft);
}

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

  .contact-dock__panel {
    animation: none;
  }
}

/* ==========================================================================
   CONTACT MODAL (opened by the floating "message" button)
   Reuses the shared .form-card / [data-validate] markup so main.js validates
   and submits it exactly like the contact-page form.
   ========================================================================== */
.contact-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.contact-modal.is-open {
  display: flex;
}

.contact-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(30, 42, 90, 0.55);
}

.contact-modal__dialog {
  position: relative;
  width: min(34rem, 100%);
  max-height: calc(100dvh - 2 * var(--space-4));
  overflow-y: auto;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

.contact-modal__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--cream);
  color: var(--navy);
  cursor: pointer;
  transition: background var(--speed) ease;
}

.contact-modal__close:hover {
  background: var(--navy-line);
}

.contact-modal__close svg {
  width: 1.25rem;
  height: 1.25rem;
}

.contact-modal__title {
  margin-top: 0;
  margin-bottom: var(--space-2);
}

.contact-modal__intro {
  margin-bottom: var(--space-5);
  color: var(--navy-soft);
}