:root {
  /* Pastel palette: badges, curriculum/routine cards, and the week-schedule
     dots all pull from these softened tones. --purple stays at its original,
     stronger value since it also does double duty as readable text color
     (logo, Contact Us button, card-pink copy) — --purple-pastel is the
     background-only counterpart. */
  --orange: #F8B76B;
  --orange-dark: #EF9B78;
  --purple: #5B3E9B;
  --purple-pastel: #9B85CC;
  --purple-light: #A594D9;
  --blue: #7FA8DE;
  --blue-light: #A8CBF0;
  --teal: #4FA88F;
  --teal-light: #6FBBA8;
  --pink: #F6BFD6;
  --pink-light: #FAD4E4;
  --cream: #FBE8D3;
  --sky: #BEE7FB;
  --sky-light: #EAF7FD;
  --bg: #FFFFFF;
  --bg-alt: #F7F5F1;
  --text: #2B2620;
  --text-soft: #6B6459;
  --radius: 18px;
  --logo-w: clamp(160px, 20vw, 230px);
  --logo-h: clamp(120px, 15vw, 170px);
}

* { box-sizing: border-box; }

/* Screen-reader/SEO-only text: keeps section headings and the H1's
   location tagline in the accessibility tree and page source without
   changing anything visually. */
.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;
}

/* Fairy-dust cursor trail — a fixed full-viewport canvas drawn by
   script.js. Purely decorative (aria-hidden) and sits above everything,
   but never intercepts clicks. Only created on fine-pointer devices
   without prefers-reduced-motion set (see script.js). */
#fairyDustCanvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
}

/* Browsers give <button> its own UA font by default instead of inheriting
   the page font — this keeps every button on Happy Monkey/DynaPuff too,
   with no third font sneaking in even if one ever gets a text label. */
button { font: inherit; color: inherit; }

/* Fluid base size: every rem-based font-size in this file scales off this,
   so type stays comfortably readable from small phones up to wide desktops
   without needing separate overrides at every breakpoint. */
html {
  font-size: clamp(16px, 0.85vw + 14.5px, 19px);
}

body {
  margin: 0;
  font-family: "Happy Monkey", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3 { font-family: "Life Savers", serif; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 16px; }
h2 { font-size: clamp(1.7rem, 2.6vw, 2.4rem); }
p { font-family: "Happy Monkey", system-ui; color: var(--text-soft); font-size: 1.05rem; }

a { color: inherit; text-decoration: none; }

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--sky) 0%, var(--sky-light) 55%, #fff 100%);
  padding-bottom: 4px;
}
.hero-clouds { pointer-events: none; }
.hero-clouds svg { position: absolute; fill: #fff; }
.hero-clouds .cloud-1 { top: 8px; left: 6%; width: 100px; opacity: 0.9; }
.hero-clouds .cloud-2 { top: 36px; right: 10%; width: 76px; opacity: 0.85; }
.hero-clouds .cloud-3 { bottom: 6px; left: 34%; width: 64px; opacity: 0.75; }

/* Header */
.site-header {
  /* Sits in normal flow above the hero photo — on desktop it no longer
     overlays meadow.png at all, matching the mobile/tablet treatment
     instead of the old absolute-positioned overlay. */
  position: static;
  padding: 20px 0;
}
.header-grid {
  /* Desktop default: logo top-left, badges stacked top-right beside it
     (matching the PDF mockup). The overlap bug wasn't caused
     by badges sitting beside the logo — it was caused by forcing them onto
     one nowrap line in a too-narrow column. Now that each badge wraps its
     own text safely (see .badge below) and sits in its own row, this is a
     simple vertical list that can't force itself wider than its column.
     The nav links live outside this grid entirely now, below the meadow
     photo, so there's no "nav" row here anymore. */
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "brand-row badges";
  align-items: start;
  column-gap: 24px;
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0 24px;
}
.header-grid .brand-row { grid-area: brand-row; }
.header-grid .badges { grid-area: badges; }
.brand-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0;
}
.logo-mark {
  /* logo-round.png is pre-padded (square canvas, yellow background baked
     in) so the full logo art — including the "y" in Sudbury — sits safely
     inside the inscribed circle at every size. No CSS padding needed here;
     that approach was too fragile to guarantee pixel-perfect clearance. */
  width: var(--logo-h);
  height: var(--logo-h);
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid #fff;
  box-shadow: 0 0 0 4px var(--orange), 0 6px 14px rgba(0,0,0,0.18);
}
.logo {
  width: var(--logo-w);
  height: var(--logo-h);
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  font-weight: 800;
  font-size: calc(var(--logo-h) / 3.15);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--purple);
}
.badges {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.badge {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: "Life Savers", serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.3;
  padding: 10px 18px;
  border-radius: 999px;
  /* Dark text reads reliably on the whole pastel palette — white on light
     pastel backgrounds (orange/pink especially) lost too much contrast. */
  color: var(--purple);
  /* Wraps onto a second line rather than forcing its row wider — this is
     what actually stops a long badge from overflowing, regardless of which
     layout (beside the logo or in a mobile list) it's placed in.
     max-width scales with the viewport (like the PDF mockup, where the
     widest badge spans roughly a third of the header) instead of a flat
     280px — a flat cap left a huge empty gap next to the logo on wide
     desktop monitors since it never grew with the screen. */
  white-space: normal;
  max-width: min(480px, 32vw);
  box-shadow: 0 3px 8px rgba(0,0,0,0.16);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.22);
}
.badge-orange { background: linear-gradient(135deg, var(--orange), var(--orange-dark)); }
.badge-purple { background: linear-gradient(135deg, var(--purple-light), var(--purple-pastel)); }
.badge-blue { background: linear-gradient(135deg, var(--blue-light), var(--blue)); }
.badge-teal { background: linear-gradient(135deg, var(--teal-light), var(--teal)); }
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text);
  padding: 10px;
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
}
.site-nav {
  /* Wraps onto as many lines as needed instead of forcing a single row
     with horizontal scroll — that's what was clipping the last button
     and its shadow. This way every button always fits fully on screen,
     on every device. Uses the same left-edge treatment as .header-grid
     (no centered max-width) so the buttons sit at the true left edge,
     not centered under the page. */
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
  font-family: "Life Savers", serif;
  font-size: 1.15rem;
  font-weight: 800;
  margin-top: 24px;
  margin-bottom: 8px;
}
.site-nav a {
  display: inline-block;
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 10px 24px;
  border-radius: 999px;
  color: #fff;
  background: var(--blue);
  box-shadow: 0 4px 10px rgba(0,0,0,0.16);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* Each link gets its own bright color from the palette instead of one
   uniform tint — a livelier, more playful nav row. */
.site-nav a:nth-child(1) { background: var(--orange); }
.site-nav a:nth-child(2) { background: var(--purple-pastel); }
.site-nav a:nth-child(3) { background: var(--blue); }
.site-nav a:nth-child(4) { background: var(--teal); }
.site-nav a:nth-child(5) { background: var(--pink); color: var(--purple); }
.site-nav a:nth-child(6) { background: var(--orange-dark); }
.site-nav a:nth-child(7) { background: var(--teal-light); }
.site-nav a:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 8px 16px rgba(0,0,0,0.24);
}

/* Sections */
.section { padding: 72px 0; }
.section-alt { background: var(--bg-alt); }

.eyebrow-row {
  width: 100%;
  padding-left: 24px;
}
.eyebrow-tab {
  display: inline-block;
  border: 1.5px solid #ddd;
  border-radius: 999px;
  padding: 10px 22px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 20px;
  color: var(--text-soft);
}

/* About */
#about {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, var(--sky-light) 100%);
}
.about-decor { pointer-events: none; }
.about-decor svg { position: absolute; }
.star-1 { top: 20px; right: 6%; width: 34px; transform: rotate(12deg); }
.star-2 { bottom: 24px; left: 4%; width: 26px; transform: rotate(-15deg); }
.about-copy h2 { color: var(--blue); }
.about-flex {
  display: flex;
  align-items: center;
  gap: 48px;
  padding-left: 24px;
  padding-right: 24px;
}
.about-image { position: relative; flex: 1 1 50%; }
.about-copy { flex: 1 1 50%; max-width: 560px; }
/* Same organic "blob" shape and wide aspect ratio about.jpg always had —
   the carousel just plays additional photos inside that same frame. The
   ID keeps this pinned above the generic .carousel rules regardless of
   source order. */
#aboutCarousel.carousel {
  aspect-ratio: 1400 / 689;
  border-radius: 63% 37% 54% 46% / 55% 45% 55% 45%;
}
blockquote {
  font-size: 1.15rem;
  font-style: italic;
  font-weight: 600;
  border-left: 4px solid var(--orange);
  padding-left: 20px;
  margin: 0 0 24px;
  color: var(--text);
}
blockquote cite { display: block; font-style: normal; font-size: 0.85rem; color: var(--text-soft); margin-top: 8px; }

/* Curriculum — continues the same white/sky-light gradient as #about,
   just running the opposite direction, so the two sections meet at the
   same sky-light tone instead of a hard seam. */
#curriculum {
  position: relative;
  overflow: hidden;
  background-color: var(--bg-alt);
  background-image: url('background.jpg');
  background-size: cover;
  background-position: center bottom;
}
#curriculum > .container > h2 { color: var(--purple); }
.curriculum-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 32px;
  /* Grid rows default to stretching every item to match the tallest one —
     without this, opening one card (making it taller) would visibly grow
     its siblings in the same row too, even though their own text stays
     collapsed. align-items:start lets each card size to its own content
     instead, so only the card you actually opened grows. */
  align-items: start;
}
.curriculum-card {
  position: relative;
  border-radius: var(--radius);
  padding: 16px;
  color: var(--purple);
  min-height: 220px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 3px 8px rgba(0,0,0,0.16);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}
.curriculum-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.22);
}
.card-orange { background: linear-gradient(135deg, var(--orange), var(--orange-dark)); }
.card-purple { background: linear-gradient(135deg, var(--purple-light), var(--purple-pastel)); }
.card-blue { background: linear-gradient(135deg, var(--blue-light), var(--blue)); }
.card-teal { background: linear-gradient(135deg, var(--teal-light), var(--teal)); }
.card-pink { background: linear-gradient(135deg, var(--pink-light), var(--pink)); }
.card-photo {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
  border-radius: 12px;
  margin-top: 10px;
}
.curriculum-card h3 { font-weight: 800; margin: 12px 0 10px; font-size: 1.25rem; }
/* Collapsed by default — clicking (or Enter/Space when focused) the card
   toggles .open and reveals the description, instead of always showing it. */
.curriculum-card p {
  color: rgba(91,62,155,0.85);
  font-size: 1rem;
  margin: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.3s ease, margin-top 0.35s ease;
}
.curriculum-card.open p {
  max-height: 300px;
  opacity: 1;
  margin-top: 4px;
}
.card-toggle {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  line-height: 1;
  transition: transform 0.3s ease;
}
.curriculum-card.open .card-toggle { transform: rotate(45deg); }

/* Curriculum at a glance */
#curriculum-glance {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, var(--sky-light) 100%);
}
#curriculum-glance > .container > h2 { color: var(--purple-pastel); }

/* 3D carousel: 6 cards arranged in a hexagonal ring via rotateY+translateZ
   on each card, with the whole ring rotated by JS in 60deg steps so a
   different card faces the viewer each time. backface-visibility:hidden
   hides whichever half of the ring is currently facing away, and .active
   (the front-facing card) is the only one at full opacity. */
.glance-carousel {
  position: relative;
  margin-top: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.glance-stage {
  perspective: 1300px;
  width: 100%;
  max-width: 620px;
  height: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.glance-ring {
  position: relative;
  width: 300px;
  height: 400px;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.4, 0.1, 0.2, 1);
}
.glance-ring .glance-card {
  position: absolute;
  inset: 0;
  width: 300px;
  min-height: 400px;
  opacity: 0.3;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: opacity 0.5s ease;
  cursor: pointer;
  perspective: 2000px;
}
.glance-ring .glance-card.active {
  opacity: 1;
  z-index: 2;
}
.glance-ring .glance-card:nth-child(1) { transform: rotateY(0deg) translateZ(300px); }
.glance-ring .glance-card:nth-child(2) { transform: rotateY(60deg) translateZ(300px); }
.glance-ring .glance-card:nth-child(3) { transform: rotateY(120deg) translateZ(300px); }
.glance-ring .glance-card:nth-child(4) { transform: rotateY(180deg) translateZ(300px); }
.glance-ring .glance-card:nth-child(5) { transform: rotateY(240deg) translateZ(300px); }
.glance-ring .glance-card:nth-child(6) { transform: rotateY(300deg) translateZ(300px); }

.glance-flip {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 400px;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0.1, 0.2, 1);
}
.glance-card.flipped .glance-flip { transform: rotateY(180deg); }
.glance-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--radius);
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
  overflow: hidden;
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.glance-card.active .glance-face { box-shadow: 0 16px 32px rgba(0,0,0,0.24); }
.glance-face-front { display: flex; flex-direction: column; }
.glance-face-front img {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  object-fit: cover;
  display: block;
}
.glance-face-caption { flex: 0 0 auto; padding: 10px 16px 14px; text-align: center; }
.glance-face-caption h3 { margin: 0 0 2px; font-size: 1.15rem; }
.glance-tap-hint { display: block; font-size: 0.75rem; color: var(--text-soft); opacity: 0.8; }
.glance-face-back {
  padding: 24px;
  border-top: 6px solid var(--orange);
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* iOS Safari won't enable touch-scrolling on an element whose
     overflow-x and overflow-y resolve to different values (here,
     -x was inheriting "hidden" from .glance-face while only -y was
     overridden) — setting both explicitly avoids that, and `scroll`
     (not `auto`) is the more reliable one for iOS to actually pick up
     inside a 3D-transformed ancestor like .glance-flip. */
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
.glance-face-back h3 { margin: 0 0 10px; font-size: 1.2rem; }
.glance-face-back p { margin: 0; font-size: 0.98rem; }
.glance-face-back .glance-tap-hint { margin-top: 10px; }

.glance-orange .glance-face-back { border-top-color: var(--orange); }
.glance-orange .glance-face-caption h3, .glance-orange .glance-face-back h3 { color: var(--orange-dark); }
.glance-purple .glance-face-back { border-top-color: var(--purple-pastel); }
.glance-purple .glance-face-caption h3, .glance-purple .glance-face-back h3 { color: var(--purple); }
.glance-blue .glance-face-back { border-top-color: var(--blue); }
.glance-blue .glance-face-caption h3, .glance-blue .glance-face-back h3 { color: var(--blue); }
.glance-teal .glance-face-back { border-top-color: var(--teal); }
.glance-teal .glance-face-caption h3, .glance-teal .glance-face-back h3 { color: var(--teal); }
.glance-pink .glance-face-back { border-top-color: var(--pink); }
.glance-pink .glance-face-caption h3, .glance-pink .glance-face-back h3 { color: var(--pink); }
.glance-orange-dark .glance-face-back { border-top-color: var(--orange-dark); }
.glance-orange-dark .glance-face-caption h3, .glance-orange-dark .glance-face-back h3 { color: var(--orange-dark); }

.glance-nav {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(91, 62, 155, 0.55);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  position: relative;
  z-index: 5;
  transition: background 0.2s ease, transform 0.2s ease;
}
.glance-nav:hover { background: rgba(91, 62, 155, 0.8); transform: scale(1.08); }

#week-schedule {
  position: relative;
  background: linear-gradient(180deg, var(--sky-light) 0%, #fff 100%);
}

/* Week schedule */
.week-list { display: flex; flex-direction: column; }
.week-row {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid #eee;
  align-items: start;
}
.week-row:last-child { border-bottom: none; }
.week-day { display: flex; align-items: center; gap: 18px; }
.week-day h3 { margin: 0; font-size: 1.2rem; }
.dot {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.dot svg { width: 42px; height: 42px; }
.dot-orange { background: var(--orange); }
.dot-purple { background: var(--purple-pastel); }
.dot-blue { background: var(--blue); }
.dot-teal { background: var(--teal); }
.dot-pink { background: var(--pink); }
.week-row ul { margin: 0; padding-left: 18px; color: var(--text-soft); font-size: 1.05rem; }
.week-row li { margin-bottom: 4px; }
/* Monday/Wednesday/Friday each carry a big polaroid-style photo on the
   right, positioned relative to that day's own row but tall enough to
   spill past its top/bottom edge into the neighboring Tuesday/Thursday
   row — position:relative (not overflow:hidden) is what lets that
   overflow show instead of getting clipped. Each keeps its own real
   aspect ratio (no cropped square) so the whole photo is visible.
   The photo (z-index 1) sits behind text everywhere — every row's own
   text gets z-index 2 (not just has-photo rows), since a neighboring
   photo can spill into Tuesday/Thursday's row too and would otherwise
   render on top of their plain static text. On tablet and up the plain
   text is left as-is (no panel); only phones — where the photo covers
   more of the row — get a bright pastel card behind the activity list so
   it stays legible (see the phone breakpoint below). The day heading
   ("Monday" etc.) never gets a panel at any size. */
.week-row.has-photo { position: relative; }
.week-row .week-day,
.week-row > ul {
  position: relative;
  z-index: 2;
}
.week-day-photo {
  position: absolute;
  right: 0;
  z-index: 1;
  border: 10px solid #fff;
  border-bottom-width: 24px;
  border-radius: 6px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.22);
  object-fit: cover;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.week-day-photo:hover {
  transform: scale(1.05);
  box-shadow: 0 14px 28px rgba(0,0,0,0.3);
}
.mon-photo {
  width: 340px;
  aspect-ratio: 1400 / 965;
  top: 6px;
  transform: rotate(-4deg);
}
.wed-photo {
  width: 260px;
  aspect-ratio: 3 / 4;
  top: -20px;
  right: -50px;
  transform: rotate(3deg);
}
.fri-photo {
  width: 260px;
  aspect-ratio: 3 / 4;
  bottom: 6px;
  right: 0;
  transform: rotate(-3deg);
}

/* Routine grid */
#daycare-routine {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, var(--sky-light) 100%);
}
#daycare-routine > .container > h2 { color: var(--teal); }
.routine-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 28px;
}
.routine-card {
  border-radius: 14px;
  padding: 18px;
  color: var(--purple);
  min-height: 110px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.95rem;
}
.routine-time { font-weight: 800; font-size: 0.85rem; }
.routine-card span:not(.routine-time) { font-size: 1.1rem; }
.lunch-menu-thumb-wrap {
  position: relative;
  display: block;
  margin-top: 2px;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 3px 8px rgba(0,0,0,0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lunch-menu-thumb-wrap:hover, .lunch-menu-thumb-wrap:focus-visible {
  transform: scale(1.04);
  box-shadow: 0 6px 14px rgba(0,0,0,0.26);
}
.lunch-menu-thumb {
  display: block;
  width: 100%;
  height: 70px;
  object-fit: cover;
}
.lunch-menu-thumb-tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(248,183,107,0.85), rgba(239,155,120,0.85));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Life Savers", serif;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Facilities */
#facilities { position: relative; overflow: hidden; }
.facilities-columns {
  display: flex;
  gap: 32px;
  margin-top: 28px;
}
.facilities-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.facilities-row {
  display: flex;
  gap: 20px;
}
.facilities-row .facility-photo-small { flex: 1; }
.facility-photo img,
.facility-photo svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}
.facility-photo-big svg,
.facility-photo-big img { aspect-ratio: 4 / 5; object-fit: cover; }
.facility-photo-medium svg,
.facility-photo-medium img { aspect-ratio: 4 / 3; object-fit: cover; }
.facility-photo-small svg,
.facility-photo-small img { aspect-ratio: 3 / 4; object-fit: cover; }
.facility-caption { font-size: 0.98rem; margin-top: 10px; }

/* Facilities presentation carousel */
.carousel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 4 / 5;
}
.carousel-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.7s ease;
}
.carousel-slide.active { opacity: 1; }
/* The playground photos are landscape shots in this portrait-cropped
   carousel — contain (with a white letterbox) keeps the whole photo
   visible instead of cover cropping the sides off. */
.carousel-slide.carousel-slide-contain { object-fit: contain; background: #fff; }
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.45);
  color: #fff;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  transition: background 0.2s ease;
}
.carousel-arrow:hover { background: rgba(0,0,0,0.7); }
.carousel-arrow-prev { left: 10px; }
.carousel-arrow-next { right: 10px; }
.carousel-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 2;
}
.carousel-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.carousel-dot.active {
  background: #fff;
  transform: scale(1.2);
}

/* Owner */
#owner {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--sky-light) 0%, #fff 100%);
}
.owner-copy h2 { color: var(--orange-dark); }
.owner-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.4fr;
  gap: 48px;
  align-items: center;
}
.owner-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 140 / 151;
  object-fit: cover;
  border-radius: 55% 45% 46% 54% / 45% 55% 45% 55%;
}

/* Footer */
.site-footer {
  background-image: url('meadow.png');
  background-size: cover;
  background-position: center;
  padding: 48px 0;
}
/* The photo stays untinted and full-color; a dark glass-style panel behind
   the text is what keeps it readable, instead of dimming the whole photo. */
.footer-inner {
  background: rgba(20, 18, 15, 0.6);
  border-radius: 24px;
  padding: 36px 32px 24px;
  color: #fff;
}
.site-footer h2 { color: #fff; }
.footer-columns {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 24px;
  margin: 20px 0 40px;
}
.footer-columns p { color: rgba(255,255,255,0.85); margin: 4px 0; }
.contact-button {
  display: inline-block;
  margin-top: 16px;
  padding: 10px 24px;
  border-radius: 999px;
  background: #fff;
  color: var(--purple);
  font-family: "Life Savers", serif;
  font-weight: 700;
  font-size: 1rem;
}
.contact-button:hover { background: var(--cream); }
.footer-social {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.footer-social-label {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
.social-icons {
  display: flex;
  gap: 10px;
}
.social-icon {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  transition: background 0.2s ease, transform 0.2s ease;
}
.social-icon:hover {
  background: rgba(255,255,255,0.28);
  transform: translateY(-2px);
}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.2);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  font-size: 0.88rem;
  color: rgba(255,255,255,0.7);
  flex-wrap: wrap;
  gap: 8px;
}

/* Responsive */
@media (max-width: 1140px) {
  /* Below 1140px the .container itself stops being width-constrained (that's
     its own max-width). The header still overlays the hero photo on desktop;
     stack it above the photo instead so it never overlaps the section below.
     .site-header and .header-grid become display:contents here, so their
     children (.brand-row, .badges) become direct flex items of .hero
     alongside .site-nav. That's what lets the opened nav render between the
     logo and the badges list via flex `order` — same single nav markup,
     just reflowed for this breakpoint, no duplication. */
  .hero {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 0;
  }
  .site-header,
  .header-grid {
    display: contents;
  }
  .owner-grid { grid-template-columns: 1fr; }
  .about-flex { flex-direction: column; padding-left: 24px; padding-right: 24px; }
  .about-image { flex: 1 1 auto; }
  .about-copy { max-width: none; }
  .curriculum-grid { grid-template-columns: repeat(2, 1fr); }
  .routine-grid { grid-template-columns: repeat(2, 1fr); }
  .glance-stage { height: 480px; }
  .glance-ring { width: 240px; height: 480px; }
  .glance-ring .glance-card { width: 240px; min-height: 480px; }
  .glance-flip { min-height: 480px; }
  .glance-ring .glance-card:nth-child(1) { transform: rotateY(0deg) translateZ(240px); }
  .glance-ring .glance-card:nth-child(2) { transform: rotateY(60deg) translateZ(240px); }
  .glance-ring .glance-card:nth-child(3) { transform: rotateY(120deg) translateZ(240px); }
  .glance-ring .glance-card:nth-child(4) { transform: rotateY(180deg) translateZ(240px); }
  .glance-ring .glance-card:nth-child(5) { transform: rotateY(240deg) translateZ(240px); }
  .glance-ring .glance-card:nth-child(6) { transform: rotateY(300deg) translateZ(240px); }
  .week-row { grid-template-columns: 1fr; }

  /* Stacking order inside .hero: logo/hamburger row, then the nav (only
     rendered once opened), then the badges list. */
  .brand-row {
    order: 1;
    position: relative;
    width: 100%;
    box-sizing: border-box;
  }
  .nav-toggle {
    display: flex;
    position: absolute;
    top: 10px;
    right: 10px;
    color: var(--teal);
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.35));
  }
  .site-nav { order: 2; display: none; }
  .site-nav.open {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .site-nav.open a {
    white-space: normal;
    text-align: center;
  }

  /* Badges become a simple, cute full-width list instead of a stack of
     right-aligned pills, with a small bullet dot per row. */
  .badges {
    order: 3;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
    padding-left: 24px;
    padding-right: 24px;
  }
  .badge {
    justify-content: flex-start;
    text-align: left;
    max-width: none;
    border-radius: 14px;
    padding: 12px 16px;
    gap: 10px;
  }
  .badge::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(91,62,155,0.55);
    flex-shrink: 0;
  }
}

/* Lunch menu lightbox */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
.lightbox.open { display: flex; }
.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 18, 15, 0.82);
}
.lightbox-content {
  position: relative;
  max-width: min(92vw, 900px);
  max-height: 90vh;
}
.lightbox-content img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
}
.lightbox-close {
  position: absolute;
  top: -18px;
  right: -18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: #fff;
  color: var(--text);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

@media (max-width: 1140px) {
  .brand-row {
    padding: 12px 24px;
    box-sizing: border-box;
  }
}

@media (max-width: 640px) {
  /* Smaller pill buttons so the nav list fits comfortably on a phone screen. */
  .site-nav { font-size: 0.95rem; }
  .site-nav a { padding: 8px 16px; }

  .curriculum-grid, .routine-grid { grid-template-columns: 1fr; }
  .glance-carousel { gap: 8px; }
  .glance-stage { height: 560px; }
  .glance-ring { width: 220px; height: 560px; }
  .glance-ring .glance-card { width: 220px; min-height: 560px; }
  .glance-flip { min-height: 560px; }
  .glance-face-back { padding: 18px; }
  .glance-face-back p { font-size: 0.9rem; line-height: 1.45; }
  .glance-ring .glance-card:nth-child(1) { transform: rotateY(0deg) translateZ(220px); }
  .glance-ring .glance-card:nth-child(2) { transform: rotateY(60deg) translateZ(220px); }
  .glance-ring .glance-card:nth-child(3) { transform: rotateY(120deg) translateZ(220px); }
  .glance-ring .glance-card:nth-child(4) { transform: rotateY(180deg) translateZ(220px); }
  .glance-ring .glance-card:nth-child(5) { transform: rotateY(240deg) translateZ(220px); }
  .glance-ring .glance-card:nth-child(6) { transform: rotateY(300deg) translateZ(220px); }
  .glance-nav { width: 36px; height: 36px; font-size: 0.95rem; }
  .facilities-columns { flex-direction: column; }

  .footer-inner { padding: 24px 20px 18px; border-radius: 18px; }

  /* Phones only: a translucent card behind the activity list keeps it
     readable against the day's photo — tinted the same sky-blue family as
     the section's own background, just darker/more saturated for
     contrast, rather than an unrelated dark panel. Tablet and up leave
     the text plain. */
  .week-row.has-photo > ul {
    background: rgba(127, 168, 222, 0.55);
    border-radius: 14px;
    padding: 10px 14px;
    color: #fff;
    /* Default outside-positioned bullet markers aren't guaranteed to be
       contained inside the element's own background box — Safari on
       iOS is especially inconsistent about it, letting the dots hang
       past the panel's rounded edge. Inside positioning keeps the
       marker as part of the text flow, fully inside the tint. */
    list-style-position: inside;
  }
  /* Monday and Friday's glass panel is tinted to match their own dot
     color instead of the shared sky-blue default; Wednesday keeps it. */
  .week-list .week-row-monday.has-photo > ul {
    background: rgba(248, 183, 107, 0.65);
  }
  .week-list .week-row-friday.has-photo > ul {
    background: rgba(246, 191, 214, 0.65);
  }

  /* The single-column stack on phones puts the day heading where the
     desktop offsets never expected it to be — push Monday's and
     Friday's photos down past their heading (and shrink them to fit a
     narrow screen) instead of overlapping it or the neighboring row. */
  .mon-photo {
    top: 90px;
    width: 250px;
  }
  .wed-photo {
    top: 40px;
    right: 0;
    width: 220px;
  }
  .fri-photo {
    top: 40px;
    bottom: auto;
    width: 220px;
  }
}

@media (max-width: 400px) {
  /* logo-mark (logo-h) + the "TOT FAMILY DAYCARE" wordmark (logo-w) sit in
     one unwrapped row — their combined minimum width can just barely
     outgrow the smallest phone screens, so shrink both a bit further here. */
  :root {
    --logo-w: clamp(130px, 34vw, 160px);
    --logo-h: clamp(95px, 25vw, 120px);
  }
  .badge { font-size: 0.92rem; padding: 10px 14px; }
  .site-nav.open { grid-template-columns: repeat(2, 1fr); }
}