/* ==========================================================================
   CircleTime Al Karama — Page sections
   Built so far: Header, Hero (Section 1), Section 2
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header — H2 behaviour: hides on scroll down, reappears on scroll up.
   Logo + "Book a Free Trial Class" only (no section links for now).
   -------------------------------------------------------------------------- */
.site-header {
  --header-cloud: 4.45vw; /* depth of the cloud edge — scales with width (64px at 1440px) */

  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  transition: transform var(--dur) var(--ease-out);
}

/* Large scalloped cloud edge under the white bar — about seven deep, gently
   varied scallops across the width (original SVG artwork, scales with width) */
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% - 1px);
  height: var(--header-cloud);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64'%3E%3Cpath fill='%23fff' d='M-180 0H1500V10A137.4 137.4 0 0 1 1288 10A140.6 140.6 0 0 1 1080 10A134 134 0 0 1 868 10A136.4 136.4 0 0 1 662 10A135.3 135.3 0 0 1 452 10A142.7 142.7 0 0 1 244 10A135.7 135.7 0 0 1 32 10A140.8 140.8 0 0 1 -178 10Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

/* Hide fully, including the cloud edge */
.site-header.is-hidden {
  transform: translateY(calc(-100% - var(--header-cloud)));
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: var(--header-height);
}

/* Main navigation — six links between the logo and the CTA */
.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.25rem + 1.4vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__link {
  position: relative;
  display: inline-block;
  padding: 0.375rem 0;
  color: var(--navy);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}

/* Quiet underline that grows from the left on hover */
.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}

@media (hover: hover) {
  .site-nav__link:hover {
    color: var(--ct-blue-deep);
  }

  .site-nav__link:hover::after {
    transform: scaleX(1);
  }
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Menu button — hidden on desktop */
.nav-toggle {
  display: none;
  flex: none;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--white);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--navy);
  transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}

.nav-toggle__bars {
  position: relative;
  margin: 0 auto;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
  transform: translateY(-6px) rotate(-45deg);
}

.site-header__logo {
  display: block;
  flex: none;
  border-radius: 8px;
}

.site-header__logo img {
  width: auto;
  height: 46px;
}

/* Tablet & mobile: links collapse into a menu panel under the bar */
@media (max-width: 1023px) {
  .nav-toggle {
    display: grid;
    place-items: center;
  }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 2;
    display: none;
    padding: var(--space-3) var(--gutter) var(--space-5);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    background: var(--white);
    box-shadow: var(--shadow-lift);
  }

  .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-4) var(--space-2);
    font-size: 1rem;
  }

  .site-nav__list li + li .site-nav__link {
    border-top: 1px solid var(--color-border);
  }

  .site-nav__link::after {
    display: none;
  }
}

@media (max-width: 767px) {
  .site-header__logo img {
    height: 34px;
  }
}

/* On very narrow phones keep the full approved CTA text, just tighter —
   but keep the tap target at 46px and clear of the logo */
@media (max-width: 480px) {
  .site-header__inner {
    gap: var(--space-2);
  }

  .site-header__actions {
    gap: var(--space-2);
  }

  .site-header .btn--sm {
    gap: var(--space-2);
    min-height: 46px;
    padding: 0.25rem 0.875rem;
    font-size: 0.8125rem;
  }

  /* the arrow gives way to the menu button on small screens */
  .site-header .btn--sm .btn__icon {
    display: none;
  }

  .nav-toggle {
    width: 44px;
    height: 44px;
  }

  .site-header__logo img {
    height: 28px;
  }
}

/* Smallest phones: the CTA label wraps so the bar keeps its edges */
@media (max-width: 359px) {
  .site-header .btn--sm {
    max-width: 118px;
    padding: 0.375rem 0.625rem;
    font-size: 0.75rem;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
  }

  .site-header__logo img {
    height: 24px;
  }

  .nav-toggle {
    width: 40px;
    height: 40px;
  }
}

/* --------------------------------------------------------------------------
   Section 1 — Hero (Option A: split layout with tall arch photo)
   Text on the left, portrait photo in an arch frame on the right.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow-x: clip;
  /* Clear the header's cloud edge (4.45vw deep) plus breathing room */
  padding-top: max(3rem, calc(4.45vw + 1rem));
  padding-bottom: clamp(3.5rem, 2rem + 4vw, 5.5rem);
  /* Soft sky shade that holds through the top of the hero, then melts into
     the warm off-white page background */
  background: linear-gradient(
    180deg,
    var(--sky-soft) 0%,
    var(--sky-soft) 40%,
    var(--sky-tint) 68%,
    var(--off-white) 100%
  );
}

/* Decorative sky: soft clouds drifting behind the hero content -------------- */
.hero__sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Content always sits above the decoration */
.hero > .container {
  position: relative;
  z-index: 1;
}

.hero-cloud {
  position: absolute;
  left: -280px;
  display: block;
  color: var(--white);
  will-change: transform;
  /* each cloud crosses the hero, then loops back to the left edge */
  animation: hero-drift 64s linear infinite;
}

.hero-cloud svg {
  width: 100%;
  height: auto;
}

.hero-cloud--1 { top: 6%;  width: clamp(120px, 13vw, 190px); opacity: 0.62;  animation-duration: 58s; animation-delay: -6s; }
.hero-cloud--2 { top: 24%; width: clamp(140px, 16vw, 230px); opacity: 0.5; animation-duration: 82s; animation-delay: -46s; }
.hero-cloud--3 { top: 13%; width: clamp(80px, 9vw, 130px);   opacity: 0.46; animation-duration: 48s; animation-delay: -30s; }
.hero-cloud--4 { top: 62%; width: clamp(100px, 11vw, 165px); opacity: 0.44;  animation-duration: 94s; animation-delay: -18s; }
.hero-cloud--5 { top: 74%; width: clamp(90px, 10vw, 145px);  opacity: 0.4; animation-duration: 70s; animation-delay: -58s; }
.hero-cloud--6 { top: 40%; width: clamp(110px, 12vw, 175px); opacity: 0.44;  animation-duration: 64s; animation-delay: -38s; }
.hero-cloud--7 { top: 3%;  width: clamp(70px, 8vw, 115px);   opacity: 0.48; animation-duration: 52s; animation-delay: -21s; }
.hero-cloud--8 { top: 86%; width: clamp(120px, 14vw, 200px); opacity: 0.36; animation-duration: 88s; animation-delay: -70s; }
.hero-cloud--9 { top: 52%; width: clamp(60px, 7vw, 100px);   opacity: 0.38; animation-duration: 44s; animation-delay: -11s; }

@keyframes hero-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(100vw + 300px), 0, 0); }
}

/* A few quiet sparkles ------------------------------------------------------ */
.hero-sparkle {
  position: absolute;
  display: block;
  opacity: 0.45;
  animation: hero-twinkle 9s ease-in-out infinite;
}

.hero-sparkle svg {
  width: 100%;
  height: auto;
}

.hero-sparkle--1 { top: 17%; left: 46%; width: 14px; color: var(--yellow); animation-duration: 8s; }
.hero-sparkle--2 { top: 9%;  right: 31%; width: 11px; color: var(--sky);   animation-duration: 11s; animation-delay: -4s; }
.hero-sparkle--3 { top: 57%; left: 3%;   width: 10px; color: var(--pink);  animation-duration: 13s; animation-delay: -7s; }

@keyframes hero-twinkle {
  0%, 100% { opacity: 0.22; transform: scale(0.9); }
  50%      { opacity: 0.6;  transform: scale(1.06); }
}

/* Decoration holds still for anyone who prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-cloud,
  .hero-sparkle {
    animation: none !important;
  }
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
}

.hero__content {
  max-width: 600px;
}

.hero__title {
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: 1.08;
}

.hero__title .accent {
  white-space: nowrap;
}

.hero__subhead {
  max-width: 500px; /* editorial line length beside the larger headline */
  margin-top: var(--space-5);
  font-size: var(--fs-lead);
  line-height: 1.65;
  color: var(--charcoal);
}

.hero__cta {
  margin-top: var(--space-7);
}

.hero__media {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 500px;
}

/* On short desktop windows (e.g. 1366 × 625) the photo steps down in size so
   the hero CTA stays above the fold. Tall windows keep the full 500px. */
@media (min-width: 900px) {
  .hero__media {
    max-width: min(500px, max(340px, calc((100vh - 300px) * 0.8)));
    max-width: min(500px, max(340px, calc((100svh - 300px) * 0.8)));
  }
}

.hero__frame {
  position: relative;
  z-index: 1;
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-lift);
  transition: box-shadow var(--dur-slow) var(--ease-out);
}

/* The shadow fades in only once the blob reveal has finished */
.js .hero__frame[data-blob-reveal]:not(.is-revealed) {
  box-shadow: none;
}

/* Keep the faces and the hug in view when the portrait photo is cropped */
.hero__frame img {
  object-position: 50% 28%;
}

/* Small brand details around the photo — kept deliberately quiet */
.hero__deco-glow {
  width: 125%;
  aspect-ratio: 1;
  left: -12%;
  top: 2%;
}

.hero__deco-yellow {
  z-index: 2;
  width: 22px;
  height: 22px;
  left: -5%;
  top: 14%;
}

.hero__deco-pink {
  z-index: 2;
  width: 14px;
  height: 14px;
  right: -4%;
  bottom: 18%;
}

/* Trust band — the four approved trust items inside one solid CircleTime-blue
   panel that rises out of a cloud edge, echoing the header's clouds. */
.trust-row {
  --trust-cloud: clamp(20px, 3vw, 44px);
  --trust-cloud-tile: clamp(120px, 18vw, 264px);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* the deeper cloud edge eats into the space below, so the hero keeps its height */
  margin: clamp(1.75rem, 2vw, 2rem) 0 min(0px, calc(26px - var(--trust-cloud)));
  padding: 0 0 var(--trust-cloud);
  list-style: none;
  border-radius: var(--radius-xl);
  background: var(--ct-blue-deep);
}

/* Cloud edge along the bottom of the band, in the page background colour */
.trust-row::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: -1px;
  height: var(--trust-cloud);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='27' viewBox='0 0 160 27'%3E%3Cpath fill='%23fbf8f3' d='M0 27A26.67 26.67 0 0 1 53.33 27A26.67 26.67 0 0 1 106.67 27A26.67 26.67 0 0 1 160 27Z'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: bottom center;
  background-size: var(--trust-cloud-tile) 100%;
  pointer-events: none;
}

.trust-row > li {
  position: relative;
  display: flex;
  justify-content: center;
  padding: clamp(0.75rem, 0.4rem + 0.55vw, 0.9375rem) clamp(0.75rem, 0.25rem + 1.2vw, 1.75rem);
}

/* Slim divider in the panel's own light */
.trust-row > li + li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 52px;
  background: rgba(255, 255, 255, 0.28);
  transform: translateY(-50%);
}

/* White label on the blue band — same approved wording */
.trust-row .trust-item {
  gap: var(--space-4);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--white);
}

.trust-row .trust-item__icon {
  width: 44px;
  height: 44px;
}

.trust-row .trust-item__icon svg {
  width: 21px;
  height: 21px;
}

/* Tablet: still one row of four inside the band, icon above each label */
@media (max-width: 1023px) {
  .trust-row > li {
    padding: clamp(1.25rem, 0.75rem + 1vw, 1.75rem) var(--space-3);
  }

  .trust-row .trust-item {
    flex-direction: column;
    gap: var(--space-3);
    text-align: center;
    font-size: 0.9375rem;
  }

  .trust-row > li + li::before {
    height: 68px;
  }
}

/* Mobile: a 2 × 2 inside the same blue band */
@media (max-width: 599px) {
  .trust-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: var(--space-2) var(--space-3) calc(var(--trust-cloud) + var(--space-2));
    border-radius: var(--radius-lg);
  }

  .trust-row > li {
    justify-content: flex-start;
    padding: var(--space-4) 0 var(--space-4) var(--space-3);
  }

  .trust-row .trust-item {
    flex-direction: row;
    gap: var(--space-2);
    text-align: left;
    font-size: 0.875rem;
    line-height: 1.35;
  }

  /* Inside the narrower band, let this label wrap like the others */
  .trust-row .nowrap {
    white-space: normal;
  }

  .trust-row .trust-item__icon {
    width: 32px;
    height: 32px;
  }

  .trust-row .trust-item__icon svg {
    width: 17px;
    height: 17px;
  }

  /* Dividers: vertical between the two columns, horizontal between rows */
  .trust-row > li + li::before {
    display: none;
  }

  .trust-row > li:nth-child(even)::before {
    display: block;
    height: 40px;
  }

  .trust-row > li:nth-child(n + 3) {
    border-top: 1px solid rgba(255, 255, 255, 0.22);
  }

  .trust-row > li:nth-child(odd) {
    padding-left: 0;
  }
}

/* Tablet & mobile: text first, then the photo */
@media (max-width: 899px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero__content {
    max-width: 640px;
  }

  .hero__media {
    justify-self: center;
    max-width: 460px;
  }
}

@media (max-width: 767px) {
  .hero__title {
    text-wrap: wrap; /* reads "…Begins With / a Hug" on phones */
  }

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

  .hero__cta {
    margin-top: var(--space-6);
  }

  .hero__media {
    max-width: 100%;
  }

  .hero__frame {
    aspect-ratio: 4 / 4.6;
  }

  .hero__deco-yellow {
    left: 2%;
  }

  .hero__deco-pink {
    right: 1%;
  }
}

@media (max-width: 380px) {
  .hero .btn {
    white-space: normal;
  }
}

/* --------------------------------------------------------------------------
   Section 2 — Supporting Young Minds in Al Karama
   Circular photo + heading and the approved paragraph.
   -------------------------------------------------------------------------- */
.intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: clamp(3rem, 7vw, 7rem);
}

.intro__media {
  position: relative;
  width: 100%;
  max-width: 480px;
  justify-self: center;
}

.intro__media .frame {
  position: relative;
  z-index: 1;
}

/* Square crop already centres the faces; nothing more to nudge */
.intro__media .frame img {
  object-position: 50% 50%;
}

.intro__deco-glow {
  width: 118%;
  aspect-ratio: 1;
  left: -9%;
  top: -9%;
}

.intro__deco-yellow {
  z-index: 2;
  width: 22px;
  height: 22px;
  right: 9%;
  top: 6%;
}

.intro__deco-pink {
  z-index: 2;
  width: 12px;
  height: 12px;
  left: 4%;
  bottom: 16%;
}

.intro__title {
  max-width: 18ch;
}

.intro__content .heading-rule {
  margin-top: var(--space-5);
}

.intro__text {
  max-width: var(--measure);
  margin-top: var(--space-6);
  font-size: var(--fs-lead);
  color: var(--charcoal);
}

@media (max-width: 899px) {
  .intro__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }

  .intro__media {
    max-width: 340px;
  }
}

/* --------------------------------------------------------------------------
   Section 3 — Explore Our Learning Programs
   Centred editorial block on the soft sky background it shares with Section 4.
   -------------------------------------------------------------------------- */
.section--intro-programs {
  padding-bottom: clamp(3rem, 1.75rem + 3vw, 4.5rem);
}

.programs-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.programs-intro__title {
  max-width: 20ch;
}

.programs-intro__rule {
  margin-top: var(--space-5);
}

.programs-intro__text {
  max-width: 720px;
  margin-top: var(--space-6);
  font-size: var(--fs-lead);
  color: var(--charcoal);
}

/* --------------------------------------------------------------------------
   Section 4 — Programs by Age Group
   Shares Section 3's background; a hairline and extra space keep it a
   clearly separate section.
   -------------------------------------------------------------------------- */
.section--programs {
  padding-top: 0;
}

.programs__rule {
  display: block;
  height: 1px;
  background: rgba(15, 47, 87, 0.09);
}

.programs__title {
  margin-top: clamp(3rem, 1.75rem + 3vw, 4.5rem);
  text-align: center;
}

.programs__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  margin-top: clamp(2.5rem, 1.5rem + 2.5vw, 3.5rem);
}

.program-card {
  display: flex;
  flex-direction: column;
  padding: clamp(1rem, 0.75rem + 0.6vw, 1.25rem);
  border: 1px solid rgba(15, 47, 87, 0.07);
  border-radius: var(--radius-xl);
  background: var(--white);
  transition:
    transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}

@media (hover: hover) {
  .program-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-soft);
  }
}

.program-card__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
}

.program-card__body {
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem) clamp(0.75rem, 0.5rem + 1vw, 1.5rem)
    clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
}

.program-card__name {
  color: var(--navy);
}

/* Soft age pill — butter for Buds, blush for Blossom */
.program-card__age {
  display: inline-block;
  margin-top: var(--space-3);
  padding: 0.375rem 0.875rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.005em;
}

.program-card--buds .program-card__age {
  background: var(--butter);
  color: #7d5600;
}

.program-card--blossom .program-card__age {
  background: var(--pink-tint);
  color: #97405a;
}

.program-card__text {
  margin-top: var(--space-5);
  color: var(--charcoal);
}

/* A quiet accent line along the top of each card's photo area */
.program-card__media::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 0;
  width: 64px;
  height: 4px;
  border-radius: var(--radius-pill) var(--radius-pill) 0 0;
  transform: translateX(-50%);
}

.program-card--buds .program-card__media::after {
  background: var(--yellow);
}

.program-card--blossom .program-card__media::after {
  background: var(--pink);
}

/* Below the two-column breakpoint the cards stack, kept to a comfortable
   reading width rather than stretching across the page */
@media (max-width: 899px) {
  .programs__grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 560px;
    margin-inline: auto;
  }

  .program-card__media {
    aspect-ratio: 4 / 3.2;
  }
}

/* --------------------------------------------------------------------------
   Section 5 — The CircleTime Experience
   Editorial split: approved text on the left, large rounded photo on the right.
   -------------------------------------------------------------------------- */
.experience__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(3rem, 6vw, 6.5rem);
}

.experience__title {
  max-width: 16ch;
}

.experience__rule {
  margin-top: var(--space-5);
}

.experience__text {
  max-width: 54ch;
  margin-top: var(--space-6);
  font-size: var(--fs-lead);
  color: var(--charcoal);
}

.experience__media {
  position: relative;
  width: 100%;
  max-width: 620px;
  justify-self: end;
}

.experience__frame {
  position: relative;
  z-index: 1;
  aspect-ratio: 5 / 4;
}

.experience__deco-glow {
  width: 62%;
  aspect-ratio: 1;
  right: -8%;
  bottom: -12%;
}

.experience__deco-yellow {
  z-index: 2;
  width: 20px;
  height: 20px;
  left: -4%;
  top: 12%;
}

@media (max-width: 899px) {
  .experience__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }

  .experience__media {
    justify-self: center;
    max-width: 560px;
  }

  .experience__title,
  .experience__text {
    max-width: none;
  }
}

/* --------------------------------------------------------------------------
   Section 6 — Learning Through Play & Discovery
   Photography-led: intro, then the four activities named in the approved text.
   -------------------------------------------------------------------------- */
.play__intro {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: start;
  gap: clamp(2rem, 5vw, 5rem);
}

.play__title {
  max-width: 14ch;
}

.play__text {
  max-width: 62ch;
  font-size: var(--fs-lead);
  color: var(--charcoal);
}

.play__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 1rem + 1.4vw, 2rem);
  margin: clamp(3rem, 2rem + 3vw, 4.5rem) 0 0;
  padding: 0;
  list-style: none;
}

/* Gentle vertical rhythm rather than a flat row */
.play__item:nth-child(even) {
  margin-top: clamp(1.5rem, 3vw, 3rem);
}

.play__figure {
  margin: 0;
}

.play__frame {
  aspect-ratio: 3 / 4;
}

.play__caption {
  margin-top: var(--space-4);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.005em;
}

@media (max-width: 899px) {
  .play__intro {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }

  .play__title,
  .play__text {
    max-width: none;
  }

  .play__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .play__item:nth-child(even) {
    margin-top: 0;
  }

  .play__item:nth-child(n + 3) {
    margin-top: clamp(0.5rem, 2vw, 1.5rem);
  }
}

/* Phones: one panel per row so each photo has real presence */
@media (max-width: 599px) {
  .play__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.5rem, 5vw, 2rem);
  }

  .play__item,
  .play__item:nth-child(n + 3) {
    margin-top: 0;
  }

  .play__frame {
    aspect-ratio: 4 / 3;
  }
}

/* --------------------------------------------------------------------------
   Section 7 — Facilities Designed for Children
   Heading column stays in place while the five approved facility cards
   stack over each other on scroll (KidsFly-inspired).
   -------------------------------------------------------------------------- */
.facilities__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(3rem, 6vw, 6.5rem);
  align-items: start;
}

.facilities__intro {
  position: sticky;
  top: calc(var(--header-height) + clamp(2rem, 6vw, 5rem));
}

.facilities__title {
  max-width: 14ch;
}

.facilities__rule {
  margin-top: var(--space-5);
}

.facilities__lead {
  margin-top: var(--space-6);
  font-size: var(--fs-lead);
  color: var(--charcoal);
}

.facilities__closing {
  max-width: 46ch;
  margin-top: var(--space-5);
  color: var(--color-muted);
}

.facilities__cards {
  margin: 0;
  padding: 0;
  list-style: none;
}

.facility-card {
  position: sticky;
  top: calc(var(--header-height) + clamp(1.5rem, 4vw, 3rem));
  padding-bottom: clamp(1.25rem, 2vw, 2rem);
}

/* Each card settles a little lower than the one before, like a soft deck */
.facility-card:nth-child(2) { top: calc(var(--header-height) + clamp(1.5rem, 4vw, 3rem) + 18px); }
.facility-card:nth-child(3) { top: calc(var(--header-height) + clamp(1.5rem, 4vw, 3rem) + 36px); }
.facility-card:nth-child(4) { top: calc(var(--header-height) + clamp(1.5rem, 4vw, 3rem) + 54px); }
.facility-card:nth-child(5) { top: calc(var(--header-height) + clamp(1.5rem, 4vw, 3rem) + 72px); }

.facility-card__inner {
  padding: clamp(1rem, 0.75rem + 0.6vw, 1.25rem);
  border: 1px solid rgba(15, 47, 87, 0.07);
  border-radius: var(--radius-xl);
  background: var(--white);
  box-shadow: var(--shadow-soft);
}

.facility-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: clamp(0.75rem, 0.5rem + 0.8vw, 1.25rem) clamp(0.5rem, 0.25rem + 0.8vw, 1rem)
    clamp(1rem, 0.75rem + 0.8vw, 1.5rem);
}

.facility-card__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--sky-tint);
  color: var(--ct-blue-deep);
}

.facility-card__icon svg {
  width: 22px;
  height: 22px;
}

.facility-card__icon--butter { background: var(--butter); color: #7d5600; }
.facility-card__icon--pink   { background: var(--pink-tint); color: #97405a; }
.facility-card__icon--cyan   { background: #e3f7fd; color: #0e87ad; }

.facility-card__text {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: var(--tracking-heading);
  color: var(--navy);
  text-wrap: balance;
}

.facility-card__media {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-lg);
}

/* Tablet & mobile: no stacking, just a clean vertical list */
@media (max-width: 899px) {
  .facilities__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }

  .facilities__intro {
    position: static;
  }

  .facilities__title,
  .facilities__closing {
    max-width: none;
  }

  .facility-card,
  .facility-card:nth-child(n) {
    position: static;
    padding-bottom: clamp(1.25rem, 3vw, 1.75rem);
  }

  .facility-card:last-child {
    padding-bottom: 0;
  }

  .facility-card__media {
    aspect-ratio: 16 / 11;
  }
}

/* --------------------------------------------------------------------------
   Section 8 — Celebrating Every Child's Milestones
   Warm, centred moment: circular photo, then the approved text.
   -------------------------------------------------------------------------- */
.milestones__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.milestones__media {
  position: relative;
  width: min(100%, 420px);
}

.milestones__frame {
  position: relative;
  z-index: 1;
}

.milestones__deco-glow {
  width: 124%;
  aspect-ratio: 1;
  left: -12%;
  top: -8%;
}

.milestones__deco-yellow {
  z-index: 2;
  width: 20px;
  height: 20px;
  right: 8%;
  top: 4%;
}

.milestones__deco-pink {
  z-index: 2;
  width: 12px;
  height: 12px;
  left: 3%;
  bottom: 18%;
}

.milestones__badge {
  position: absolute;
  z-index: 3;
  right: -6px;
  bottom: 12%;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--white);
  color: var(--ct-blue-deep);
  box-shadow: var(--shadow-soft);
}

.milestones__badge svg {
  width: 26px;
  height: 26px;
}

.milestones__content {
  margin-top: clamp(2.5rem, 1.5rem + 2.5vw, 3.5rem);
}

.milestones__title {
  max-width: 22ch;
  margin-inline: auto;
}

.milestones__rule {
  margin: var(--space-5) auto 0;
}

.milestones__text {
  max-width: 720px; /* same editorial measure as Section 3 */
  margin-top: var(--space-6);
  font-size: var(--fs-lead);
  color: var(--charcoal);
}

@media (max-width: 599px) {
  .milestones__media {
    width: min(100%, 320px);
  }

  .milestones__badge {
    width: 54px;
    height: 54px;
    right: 0;
  }

  .milestones__badge svg {
    width: 22px;
    height: 22px;
  }
}

/* --------------------------------------------------------------------------
   Section 9 — Gallery
   Editorial mosaic: one large tile, one tall tile and four supporting tiles.
   -------------------------------------------------------------------------- */
.gallery__title {
  max-width: 20ch;
}

.gallery__rule {
  margin-top: var(--space-5);
}

.gallery__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(130px, 11.5vw, 190px);
  gap: clamp(1rem, 0.75rem + 1vw, 1.75rem);
  margin: clamp(2.5rem, 1.5rem + 2.5vw, 3.5rem) 0 0;
  padding: 0;
  list-style: none;
}

.gallery__item--a { grid-column: span 2; grid-row: span 2; }
.gallery__item--c { grid-column: 4; grid-row: span 2; }
.gallery__item--e { grid-column: span 2; }
.gallery__item--f { grid-column: span 2; }

.gallery__frame {
  height: 100%;
  border-radius: var(--radius-lg);
}

.gallery__item--a .gallery__frame {
  border-radius: var(--radius-xl);
}

/* Tablet: simpler two-column mosaic */
@media (max-width: 899px) {
  .gallery__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: clamp(140px, 20vw, 200px);
  }

  .gallery__item--a { grid-column: span 2; grid-row: span 2; }
  .gallery__item--c { grid-column: auto; grid-row: span 2; }
  .gallery__item--e,
  .gallery__item--f { grid-column: auto; }
}

/* Phones: one clean column */
@media (max-width: 599px) {
  .gallery__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
    gap: clamp(1rem, 4vw, 1.5rem);
  }

  .gallery__item,
  .gallery__item--a,
  .gallery__item--c,
  .gallery__item--e,
  .gallery__item--f {
    grid-column: auto;
    grid-row: auto;
  }

  .gallery__frame {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .gallery__item--a .gallery__frame {
    aspect-ratio: 4 / 3.4;
  }
}

/* --------------------------------------------------------------------------
   Section 10 — What Parents Say
   Layout only: every field is a clearly marked placeholder until the
   approved testimonials are supplied.
   -------------------------------------------------------------------------- */
.testimonials__title {
  max-width: 20ch;
}

.testimonials__rule {
  margin-top: var(--space-5);
}

.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 1rem + 1.4vw, 2rem);
  margin: clamp(2.5rem, 1.5rem + 2.5vw, 3.5rem) 0 0;
  padding: 0;
  list-style: none;
}

.testimonial-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: clamp(1.75rem, 1.25rem + 1.4vw, 2.5rem);
  border: 1px solid rgba(15, 47, 87, 0.07);
  border-radius: var(--radius-xl);
  background: var(--white);
}

.testimonial-card__mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--sky-tint);
  color: var(--ct-blue-deep);
}

.testimonial-card__mark svg {
  width: 20px;
  height: 20px;
}

.testimonial-card__quote {
  display: grid;
  place-items: center;
  min-height: 132px;
  padding: var(--space-5);
  border: 1.5px dashed rgba(15, 47, 87, 0.18);
  border-radius: var(--radius-md);
  background: var(--off-white);
  text-align: center;
}

.testimonial-card__person {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.testimonial-card__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1.5px dashed rgba(15, 47, 87, 0.18);
  border-radius: 50%;
  color: var(--color-muted);
}

.testimonial-card__avatar svg {
  width: 20px;
  height: 20px;
}

/* Shared marker for text that is still to be supplied */
.placeholder-label {
  color: var(--color-muted);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.45;
}

.placeholder-label--sm {
  font-size: var(--fs-xs);
}

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

@media (max-width: 599px) {
  .testimonials__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .testimonial-card__quote {
    min-height: 112px;
  }
}

/* --------------------------------------------------------------------------
   Section 11 — Common Questions (FAQ)
   Heading column on the left, expandable questions on the right.
   -------------------------------------------------------------------------- */
.faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2.5rem, 6vw, 6.5rem);
  align-items: start;
}

.faq__intro {
  position: sticky;
  top: calc(var(--header-height) + clamp(2rem, 6vw, 5rem));
}

.faq__title {
  max-width: 14ch;
}

.faq__rule {
  margin-top: var(--space-5);
}

.faq__item {
  border-bottom: 1px solid var(--color-border);
}

.faq__item:first-child {
  border-top: 1px solid var(--color-border);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: clamp(1.25rem, 1rem + 0.8vw, 1.75rem) 0;
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: var(--tracking-heading);
  color: var(--navy);
  cursor: pointer;
  list-style: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.faq__question::-webkit-details-marker {
  display: none;
}

@media (hover: hover) {
  .faq__question:hover {
    color: var(--ct-blue-deep);
  }
}

.faq__question:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 4px;
  border-radius: 8px;
}

/* Quiet +/− marker */
.faq__toggle {
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sky-tint);
  transition: background-color var(--dur-fast) var(--ease-out);
}

.faq__toggle::before,
.faq__toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--ct-blue-deep);
  transform: translate(-50%, -50%);
  transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}

.faq__toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq__item[open] .faq__toggle {
  background: var(--butter);
}

.faq__item[open] .faq__toggle::before,
.faq__item[open] .faq__toggle::after {
  background: #7d5600;
}

.faq__item[open] .faq__toggle::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.faq__answer {
  padding: 0 clamp(3rem, 8vw, 4rem) clamp(1.25rem, 1rem + 0.8vw, 1.75rem) 0;
  color: var(--charcoal);
}

.faq__answer p {
  max-width: 62ch;
}

@media (max-width: 899px) {
  .faq__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-7);
  }

  .faq__intro {
    position: static;
  }

  .faq__title {
    max-width: none;
  }

  .faq__question {
    font-size: 1.125rem;
    gap: var(--space-4);
  }

  .faq__toggle {
    width: 34px;
    height: 34px;
  }

  .faq__answer {
    padding-right: 0;
  }
}

/* --------------------------------------------------------------------------
   Section 12 — Find Our Al Karama Branch
   Details on one side, map placeholder on the other, inside one soft card.
   -------------------------------------------------------------------------- */
.location__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  padding: clamp(1.5rem, 1rem + 2vw, 3rem);
  border-radius: var(--radius-xl);
  background: var(--white);
}

.location__rule {
  margin-top: var(--space-5);
}

.location__text {
  max-width: 52ch;
  margin-top: var(--space-6);
  color: var(--charcoal);
}

.location__details {
  margin: clamp(2rem, 1.5rem + 1.5vw, 2.75rem) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-border);
}

.location__detail {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-border);
}

.location__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--sky-tint);
  color: var(--ct-blue-deep);
}

.location__icon svg {
  width: 19px;
  height: 19px;
}

.location__icon--butter { background: var(--butter); color: #7d5600; }
.location__icon--pink   { background: var(--pink-tint); color: #97405a; }

.location__detail-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.location__label {
  color: var(--color-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.location__value {
  color: var(--navy);
  font-weight: 600;
}

.location__media {
  align-self: stretch;
  display: flex;
}

.location__frame {
  width: 100%;
  min-height: 320px;
  border-radius: var(--radius-lg);
}

@media (max-width: 899px) {
  .location__card {
    grid-template-columns: minmax(0, 1fr);
  }

  .location__text {
    max-width: none;
  }

  .location__frame {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 599px) {
  .location__frame {
    aspect-ratio: 4 / 3.4;
  }
}

/* --------------------------------------------------------------------------
   Section 13 — Book a Visit Today
   Navy panel, approved text as the focus, three approved CTAs.
   -------------------------------------------------------------------------- */
.final-cta__panel {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: clamp(2.5rem, 5vw, 5rem);
  padding: clamp(2rem, 1.25rem + 3vw, 4.5rem);
  border-radius: var(--radius-xl);
  background: var(--navy);
  color: var(--white);
}

.final-cta__glow {
  width: clamp(360px, 42vw, 620px);
  aspect-ratio: 1;
  right: -8%;
  top: -34%;
  background: radial-gradient(circle, rgba(62, 195, 236, 0.32), rgba(62, 195, 236, 0) 68%);
}

.final-cta__dot {
  z-index: 1;
  width: 16px;
  height: 16px;
  left: clamp(1.5rem, 3vw, 3rem);
  bottom: clamp(1.5rem, 3vw, 3rem);
}

.final-cta__content {
  position: relative;
  z-index: 2;
}

.final-cta__title {
  max-width: 18ch;
  color: var(--white);
}

.final-cta__text {
  max-width: 54ch;
  margin-top: var(--space-5);
  font-size: var(--fs-lead);
  color: rgba(255, 255, 255, 0.86);
}

.final-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-7);
}

.final-cta__note {
  margin-top: var(--space-5);
  color: rgba(255, 255, 255, 0.55);
}

.final-cta__media {
  position: relative;
  z-index: 2;
  justify-self: end;
  width: 100%;
  max-width: 360px;
}

.final-cta__frame {
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.45);
}

@media (max-width: 899px) {
  .final-cta__panel {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }

  .final-cta__title,
  .final-cta__text {
    max-width: none;
  }

  .final-cta__media {
    order: -1;
    justify-self: center;
    max-width: 300px;
  }
}

@media (max-width: 599px) {
  .final-cta__actions {
    gap: var(--space-3);
  }

  .final-cta__actions .btn {
    width: 100%;
    justify-content: space-between;
  }

  .final-cta__media {
    max-width: 240px;
  }
}

/* --------------------------------------------------------------------------
   Section 13 — decorative night sky
   Three orbit rings turn around the photo, with a scatter of soft stars
   behind the text. Purely decorative: no layout impact, no reader output.
   -------------------------------------------------------------------------- */
.final-cta__space {
  --sun-x: 80.5%;
  --sun-y: 52%;
  --orbit-1: clamp(300px, 34vw, 480px);
  --orbit-2: clamp(440px, 50vw, 700px);
  --orbit-3: clamp(600px, 66vw, 940px);

  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.cta-orbit {
  position: absolute;
  left: var(--sun-x);
  top: var(--sun-y);
  width: var(--d);
  height: var(--d);
  margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  animation: cta-orbit-spin var(--dur) linear infinite;
}

.cta-orbit--1 { --d: var(--orbit-1); --dur: 20s; }
.cta-orbit--2 { --d: var(--orbit-2); --dur: 34s; animation-direction: reverse; }
.cta-orbit--3 { --d: var(--orbit-3); --dur: 52s; }

/* The planet rides the top of its ring, so the ring's spin carries it round */
.cta-planet {
  position: absolute;
  top: calc(var(--size) / -2);
  left: 50%;
  width: var(--size);
  height: var(--size);
  margin-left: calc(var(--size) / -2);
  border-radius: 50%;
  background: var(--tint);
  box-shadow: 0 0 10px var(--tint), 0 0 26px var(--tint);
}

.cta-orbit--1 .cta-planet { --size: 13px; --tint: var(--yellow); }
.cta-orbit--2 .cta-planet { --size: 11px; --tint: var(--sky); }
.cta-orbit--3 .cta-planet { --size: 16px; --tint: var(--pink); }

@keyframes cta-orbit-spin {
  to { transform: rotate(360deg); }
}

.cta-star {
  position: absolute;
  width: var(--size, 2px);
  height: var(--size, 2px);
  border-radius: 50%;
  background: var(--white);
  opacity: var(--dim, 0.45);
  animation: cta-twinkle var(--dur, 4s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

.cta-star--1  { left: 6%;  top: 18%; --size: 4px; --dim: 0.9; --dur: 4.2s; --delay: -0.4s; }
.cta-star--2  { left: 13%; top: 62%; --size: 3px; --dim: 0.68; --dur: 5.1s; --delay: -1.7s; }
.cta-star--3  { left: 19%; top: 11%; --size: 3px; --dim: 0.54; --dur: 3.8s; --delay: -2.6s; }
.cta-star--4  { left: 24%; top: 84%; --size: 4px; --dim: 0.82; --dur: 5.6s; --delay: -0.9s; }
.cta-star--5  { left: 31%; top: 30%; --size: 3px; --dim: 0.51; --dur: 4.7s; --delay: -3.1s; }
.cta-star--6  { left: 37%; top: 72%; --size: 3px; --dim: 0.65; --dur: 4.0s; --delay: -1.2s; }
.cta-star--7  { left: 43%; top: 14%; --size: 4px; --dim: 0.88; --dur: 5.9s; --delay: -2.2s; }
.cta-star--8  { left: 49%; top: 90%; --size: 3px; --dim: 0.58; --dur: 4.4s; --delay: -0.2s; }
.cta-star--9  { left: 56%; top: 26%; --size: 3px; --dim: 0.71; --dur: 5.3s; --delay: -3.6s; }
.cta-star--10 { left: 62%; top: 66%; --size: 4px; --dim: 0.85; --dur: 3.9s; --delay: -1.5s; }
.cta-star--11 { left: 69%; top: 8%;  --size: 3px; --dim: 0.61; --dur: 5.5s; --delay: -2.9s; }
.cta-star--12 { left: 74%; top: 88%; --size: 3px; --dim: 0.75; --dur: 4.6s; --delay: -0.7s; }
.cta-star--13 { left: 83%; top: 20%; --size: 4px; --dim: 0.78; --dur: 5.0s; --delay: -2.4s; }
.cta-star--14 { left: 89%; top: 58%; --size: 3px; --dim: 0.56; --dur: 4.1s; --delay: -1.9s; }
.cta-star--15 { left: 94%; top: 34%; --size: 3px; --dim: 0.68; --dur: 5.8s; --delay: -3.3s; }
.cta-star--16 { left: 97%; top: 78%; --size: 4px; --dim: 0.51; --dur: 4.9s; --delay: -0.5s; }

@keyframes cta-twinkle {
  0%, 100% { opacity: var(--dim); transform: scale(1); }
  50%      { opacity: calc(var(--dim) * 0.35); transform: scale(0.7); }
}

/* Tablet & mobile: the photo moves to the top, so the rings follow it.
   The centre is measured from the top edge (panel padding + half the photo)
   because the panel gets much taller here, which makes a percentage drift. */
@media (max-width: 899px) {
  .final-cta__space {
    --sun-x: 50%;
    --sun-y: calc(clamp(2rem, 1.25rem + 3vw, 4.5rem) + 150px);
    --orbit-1: clamp(260px, 62vw, 380px);
    --orbit-2: clamp(380px, 88vw, 540px);
    --orbit-3: clamp(520px, 118vw, 720px);
  }
}

@media (max-width: 599px) {
  .final-cta__space {
    --sun-y: calc(clamp(2rem, 1.25rem + 3vw, 4.5rem) + 120px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cta-orbit,
  .cta-star {
    animation: none !important;
  }
}

/* --------------------------------------------------------------------------
   Page-wide gentle motion
   The same language as the hero: photos settle in with a soft blob reveal,
   then breathe very slowly. Decorations live in the empty band above a
   heading, never beside content, so they cannot collide with text.
   -------------------------------------------------------------------------- */

/* Feature photos keep the float slow and slightly out of step with each other */
.intro__media .ct-float     { --float-dur: 10s; }
.milestones__frame          { --float-dur: 9s; }
.milestones__badge.ct-float { --float-dur: 9s; }

/* Decorative band: zero height, so it adds nothing to the layout */
.ct-deco-band {
  position: relative;
  z-index: 0;
  height: 0;
}

.ct-deco {
  position: absolute;
  display: block;
  pointer-events: none;
}

.ct-deco svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Without an explicit ratio an inline <svg> falls back to a 150px box, which
   would make these tiny shapes occupy far more space than they show */
.ct-deco--spark svg { aspect-ratio: 1; }
.ct-deco--cloud svg { aspect-ratio: 160 / 70; }

/* Section 3 — clouds drifting sideways above "Explore Our Learning Programs" */
.ct-deco--cloud {
  color: var(--white);
  animation: ct-deco-drift 19s ease-in-out infinite alternate;
}

.ct-deco--cloud-a {
  left: 5%;
  top: -60px;
  width: clamp(44px, 6vw, 68px);
  opacity: 0.8;
}

.ct-deco--cloud-b {
  right: 7%;
  top: -38px;
  width: clamp(30px, 4.5vw, 46px);
  opacity: 0.6;
  animation-duration: 26s;
  animation-delay: -9s;
}

/* Section 8 — sparkles above "Celebrating Every Child's Milestones" */
.ct-deco--spark {
  opacity: var(--dim, 0.5);
  animation: ct-deco-twinkle var(--dur, 10s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

.ct-deco--spark-a { left: 8%;  top: -52px; width: 14px; color: var(--yellow);      --dim: 0.75; --dur: 9s; }
.ct-deco--spark-b { right: 12%; top: -56px; width: 11px; color: var(--sky);         --dim: 0.6;  --dur: 12s; --delay: -5s; }
.ct-deco--spark-c { left: 46%;  top: -32px; width: 9px;  color: var(--ct-blue);     --dim: 0.45; --dur: 14s; --delay: -8s; }

/* Section 11 — two soft dots bobbing above the FAQ heading */
.ct-deco--dot {
  border-radius: 50%;
  animation: ct-float var(--dur, 7s) ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
}

.ct-deco--dot-a { left: 6%;  top: -48px; width: 12px; height: 12px; background: var(--sky-soft); --dur: 8s; }
.ct-deco--dot-b { right: 9%; top: -30px; width: 8px;  height: 8px;  background: var(--yellow); opacity: 0.55; --dur: 6s; --delay: -3s; }

@keyframes ct-deco-drift {
  from { transform: translate3d(-12px, 0, 0); }
  to   { transform: translate3d(12px, -4px, 0); }
}

@keyframes ct-deco-twinkle {
  0%, 100% { opacity: var(--dim, 0.5); transform: scale(1); }
  50%      { opacity: calc(var(--dim, 0.5) * 0.3); transform: scale(0.7); }
}

/* Photos lift very slightly under the pointer. Touch devices skip this. */
@media (hover: hover) {
  .program-card__media img,
  .play__frame img,
  .gallery__frame img,
  .facility-card__media img {
    transition: transform 0.7s var(--ease-out);
  }

  .program-card:hover .program-card__media img,
  .play__figure:hover .play__frame img,
  .gallery__item:hover .gallery__frame img,
  .facility-card:hover .facility-card__media img {
    transform: scale(1.04);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ct-deco,
  .ct-deco--cloud,
  .ct-deco--spark,
  .ct-deco--dot {
    animation: none !important;
  }

  .program-card__media img,
  .play__frame img,
  .gallery__frame img,
  .facility-card__media img {
    transition: none !important;
    transform: none !important;
  }
}