/* Self-hosted webfonts. Fraunces and Inter, both SIL Open Font License.
   Served from this site so no request is made to Google. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/fraunces-normal-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/fraunces-normal-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/fraunces-italic-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/fraunces-italic-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =========================================================
   Mama Yoga Liverpool, postnatal yoga
   Warm, calm, wellness-style stylesheet
   ========================================================= */

:root {
  /* Colour palette — from client mood board (Sage / Sand / Pearl / Peach) */
  --color-bg: #F4E5D9;        /* Pearl */
  --color-bg-alt: #EBDFCE;    /* Sand */
  --color-white: #FFFFFF;
  --color-primary: #C67039;        /* brand clay, for decorative use (dots, rules, focus rings) */
  --color-primary-dark: #A65F30;   /* text-safe clay: white text on this passes WCAG AA (4.88:1) */
  --color-primary-darker: #8D5129; /* hover/active state (6.28:1) */
  --color-sage: #B2BDA3;      /* mood-board Sage, used at full strength for small accents */
  --color-sage-light: #DEE4D6;
  --color-peach: #F8D3BB;
  /* Festive accent, used only by the Christmas event card. 5.26:1 on white. */
  --color-festive: #B04A5F;     /* mood-board Peach, soft accent */
  --color-text: #3C3630;
  --color-text-muted: #6B625A;
  --color-border: #E1D3BE;

  /* Type */
  --font-heading: "Fraunces", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Spacing / shape */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 32px;
  --shadow-soft: 0 10px 30px rgba(60, 54, 48, 0.08);
  --shadow-softer: 0 4px 14px rgba(60, 54, 48, 0.06);
  --max-width: 1160px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 600; line-height: 1.2; margin: 0 0 0.6em; color: var(--color-text); }
p { margin: 0 0 1em; }
button { font-family: inherit; cursor: pointer; }

/* Focus visibility for accessibility */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
}

.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;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--color-primary-dark);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  z-index: 200;
}
.skip-link:focus {
  left: 16px;
  top: 16px;
}

/* ---------- Layout helpers ---------- */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}
.container.narrow { max-width: 760px; }
section {
  padding: 88px 0;
}
.section-alt { background: var(--color-bg-alt); }
.section-intro {
  max-width: 640px;
  margin: 0 auto 56px;
  text-align: center;
}
.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
  font-weight: 600;
  margin-bottom: 14px;
}
.section-intro h2 { font-size: clamp(1.8rem, 3.2vw, 2.4rem); }
.section-intro p { color: var(--color-text-muted); font-size: 1.05rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 30px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  border: 2px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--color-primary-dark);
  color: #fff;
  box-shadow: var(--shadow-softer);
}
.btn-primary:hover { background: var(--color-primary-darker); transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.btn-secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn-secondary:hover { border-color: var(--color-primary-dark); color: var(--color-primary-darker); transform: translateY(-1px); }
.btn-block { width: 100%; }
.btn-sm { padding: 10px 22px; font-size: 0.9rem; }
.cta-short { display: none; }

/* ---------- Header / Nav ---------- */
/* FESTIVE BAR: delete this block after 16 December 2026. */
.festive-bar {
  background: var(--color-festive);
  text-align: center;
  font-size: 0.9rem;
}
.festive-bar a {
  display: block;
  padding: 12px 24px;
  color: #fff;
  text-decoration: none;
}
.festive-bar a:hover { text-decoration: underline; }
.festive-bar strong { font-weight: 600; }
.festive-bar-detail::before { content: " "; }

/* Anchors would otherwise land underneath the sticky header. */
section[id] { scroll-margin-top: 88px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(244, 229, 217, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  max-width: var(--max-width);
  margin: 0 auto;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-text);
}
.logo-mark {
  height: 40px;
  width: auto;
  display: block;
}
.nav-links {
  display: flex;
  gap: 32px;
  align-items: center;
}
.nav-links a {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-text-muted);
  transition: color 0.15s ease;
}
.nav-links a:hover { color: var(--color-primary-dark); }
.nav-cta { display: flex; align-items: center; gap: 20px; }
.nav-cta-mobile { display: none; }
.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 8px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-text);
  margin: 5px 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* ---------- Hero ---------- */
.hero {
  padding: 64px 0 96px;
}
.hero .container {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  /* stretch, not center: the image matches the height of the text beside it,
     so the hero reads as one block with no dead space above and below. */
  align-items: stretch;
}
.hero-eyebrow {
  display: inline-block;
  background: var(--color-sage-light);
  color: var(--color-primary-dark);
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  margin-bottom: 20px;
}
.hero h1 {
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  margin-bottom: 0.4em;
}
.hero-lede {
  font-size: 1.15rem;
  color: var(--color-text-muted);
  max-width: 50ch;
}
.hero-reassurance {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 28px 0 32px;
  font-size: 0.95rem;
  color: var(--color-text);
  font-weight: 500;
}
.hero-reassurance .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-primary);
  flex-shrink: 0;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-meta {
  margin-top: 32px;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 0.88rem;
  color: var(--color-text-muted);
}
.hero-meta strong { color: var(--color-text); }

.image-placeholder {
  border-radius: var(--radius-lg);
  background: linear-gradient(155deg, var(--color-sage-light), var(--color-peach));
  border: 1.5px dashed rgba(60,54,48,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #5a5348;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 24px;
  min-height: 320px;
}
.image-placeholder span { max-width: 220px; }
.image-placeholder.has-photo {
  border: none;
  padding: 0;
  overflow: hidden;
}
.image-placeholder.has-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* No fixed ratio on desktop: the image takes its height from the text column
   via the stretch above, capped so a long paragraph cannot blow it up.
   min-height is reset because .image-placeholder sets 320px. */
.hero-image {
  min-height: 0;
  max-height: 620px;
  box-shadow: var(--shadow-soft);
}
/* When the box is wider than the photo the crop takes from top and bottom.
   Bias it upward so the window and the mat rows stay in frame, rather than
   centring on the floor. */
.hero-image img { object-position: center 22%; }

/* ---------- Meet the teacher ---------- */
.teacher-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 56px;
  align-items: start;
}
.teacher-image { min-height: 460px; aspect-ratio: 3/4; }

/* Two photos: the portrait sits as the main image, with the yoga shot
   tucked into the bottom corner. The border matches the page background
   so the smaller photo reads as sitting on top. */
.teacher-photos { position: relative; }
.teacher-photo-inset {
  position: absolute;
  right: -48px;
  /* Both photos are 3:4, so inset height == width% of the main photo height.
     Top edge therefore sits at (1 - width% + bottom%) down the photo.
     The baby's chin is at ~75%, so this keeps the inset below it at any
     screen size: 1 - 0.46 + 0.27 = 0.81. */
  bottom: -27%;
  width: 46%;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 6px solid var(--color-bg);
  box-shadow: var(--shadow-soft);
}
.teacher-photo-inset img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.teacher-name { font-size: 1.9rem; margin-bottom: 0.2em; }
.teacher-role { color: var(--color-primary-dark); font-weight: 600; margin-bottom: 24px; display: block; }
.teacher-quote {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--color-text);
  border-left: 3px solid var(--color-primary);
  padding-left: 20px;
  margin: 28px 0;
}

/* ---------- Class detail page ---------- */
.class-layout {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 48px;
  /* Top-aligned beside the prose. Deliberately smaller than the hero so the
     hierarchy reads: the hero is the picture, this one supports the text. */
  align-items: start;
  max-width: 1060px;
  margin: 0 auto;
}
.class-photo img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
.class-prose { max-width: 700px; margin: 0 auto; }
.class-prose p { font-size: 1.05rem; color: var(--color-text-muted); }

.detail-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.95rem;
}
.detail-row:last-of-type { border-bottom: none; }
.detail-row dt { color: var(--color-text-muted); flex-shrink: 0; }
.detail-row dd { margin: 0; font-weight: 600; text-align: right; }

/* ---------- Booking ---------- */
/* Auto-fit means a lone card stretches to full width, and adding the January
   course turns the courses into a two-up row with no further CSS changes. */
.date-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  align-items: start;
  max-width: 880px;
  margin: 0 auto;
}
.date-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 32px 34px;
  box-shadow: var(--shadow-soft);
}
.date-card h3 { margin-bottom: 16px; font-size: 1.35rem; }
/* Gap between the last detail row and the booking button. */
.date-card dl { margin: 0 0 26px; }
.date-card-flag {
  display: block;
  margin-bottom: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* The one-off Christmas event: spans the grid, carries the festive accent. */
.date-card--featured {
  grid-column: 1 / -1;
  border-top: 4px solid var(--color-festive);
  overflow: hidden;
}
.date-card--featured .date-card-flag { color: var(--color-festive); }
/* The featured card occupies both tracks, so a single course card above it
   would otherwise sit in one half with the other half empty. This matches only
   while there are exactly two cards; uncommenting the January card makes it
   stop matching, and the two courses pair up side by side. */
.date-card:first-child:nth-last-child(2) { grid-column: 1 / -1; }
/* The festive bar links straight to this card. */
.date-card[id] { scroll-margin-top: 88px; }
/* Full-bleed inside the card: the negative margins cancel the card padding,
   and overflow:hidden on the card clips the image to its rounded corners. */
.date-card-banner {
  display: block;
  /* Beats the global img{max-width:100%}, which would otherwise clamp the
     banner back to the card's content width and undo the full bleed. */
  max-width: none;
  width: calc(100% + 68px);
  /* The width/height attributes map to presentational hints, so height must be
     reset to auto for the ratio to drive the box. */
  height: auto;
  margin: -32px -34px 26px;
  aspect-ratio: 1672 / 941;
  object-fit: cover;
}
.date-cards-note {
  max-width: 620px;
  margin: 32px auto 0;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--color-text-muted);
}
/* Sticky header would otherwise sit over the anchor target. */
.booking-divider {
  position: relative;
  max-width: 560px;
  margin: 44px auto 28px;
  text-align: center;
  scroll-margin-top: 88px;
}
.booking-divider::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px solid var(--color-border);
}
.booking-divider span {
  position: relative;
  padding: 0 16px;
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
  font-size: 0.9rem;
}
.enquiry-intro {
  max-width: 560px;
  margin: 0 auto 24px;
  text-align: center;
  color: var(--color-text-muted);
}

/* ---------- Enquiry / forms ---------- */
.enquiry-form {
  max-width: 560px;
  margin: 0 auto;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-soft);
}
.form-group { margin-bottom: 20px; }
.form-group:last-of-type { margin-bottom: 0; }
.form-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 8px;
}
.form-control {
  width: 100%;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border);
  font-family: inherit;
  /* Must stay at 16px or larger: iOS Safari auto-zooms the page when a
     visitor taps an input with smaller text. */
  font-size: 1rem;
  background: var(--color-bg);
  color: var(--color-text);
}
.form-control:focus { border-color: var(--color-primary); outline: none; }
textarea.form-control { resize: vertical; min-height: 120px; }
.enquiry-form .btn { margin-top: 4px; }
.form-note {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-align: center;
  margin-top: 20px;
}
.form-feedback { font-size: 0.92rem; font-weight: 600; color: var(--color-primary-dark); min-height: 1.2em; }

/* ---------- FAQ ---------- */
.faq-list { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 6px 28px;
  box-shadow: var(--shadow-softer);
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 0;
  font-weight: 600;
  font-size: 1.02rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .plus {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--color-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--color-primary-dark);
  transition: transform 0.2s ease;
}
.faq-item[open] summary .plus { transform: rotate(45deg); }
.faq-item p {
  color: var(--color-text-muted);
  padding-bottom: 20px;
  margin: 0;
  font-size: 0.97rem;
}

/* ---------- Coming soon ---------- */
.coming-soon { background: linear-gradient(155deg, var(--color-bg-alt), var(--color-sage-light)); text-align: center; }
.coming-soon .section-intro { margin-bottom: 28px; }

/* ---------- Footer ---------- */
.site-footer {
  padding: 64px 0 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--color-border);
}
.footer-brand .logo { margin-bottom: 14px; }
.footer-brand p { color: var(--color-text-muted); font-size: 0.92rem; max-width: 32ch; }
.footer-col h5 {
  font-family: var(--font-body);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: 16px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 0.94rem; color: var(--color-text); }
.footer-col a:hover { color: var(--color-primary-dark); }
.footer-col li { font-size: 0.94rem; color: var(--color-text-muted); }
.social-links { display: flex; gap: 12px; margin-top: 4px; }
.social-links a {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--color-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}
.social-links a:hover { background: var(--color-sage-light); }
.footer-bottom {
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.footer-bottom .legal-links { display: flex; gap: 20px; }

/* ---------- Simple sub-pages (privacy/terms/class) ---------- */
.legal-page { padding: 64px 0 96px; }
.legal-page .container { max-width: 760px; }
.legal-page h1 { margin-bottom: 0.3em; }
.legal-page .updated { color: var(--color-text-muted); font-size: 0.9rem; margin-bottom: 40px; }
.legal-page h2 { font-size: 1.3rem; margin-top: 2em; }
.legal-page p, .legal-page li { color: var(--color-text-muted); }
.legal-page ul { list-style: disc; padding-left: 22px; margin: 0 0 1em; }
.legal-page li { margin-bottom: 10px; }
.legal-page li strong { color: var(--color-text); }
.back-link { display: inline-block; margin-bottom: 32px; font-weight: 600; color: var(--color-primary-dark); }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1200px) {
  .nav-links, .nav-cta .btn-secondary { display: none; }
  .nav-toggle { display: block; }
  .nav.open .nav-links {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-bg);
    padding: 12px 24px 20px;
    gap: 4px;
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-soft);
  }
  /* Bigger tap targets in the mobile menu. The CTA button keeps its own
     padding, so it is excluded here. */
  .nav.open .nav-links li:not(.nav-cta-mobile) a {
    display: block;
    padding: 13px 0;
  }
}

@media (max-width: 960px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero-image { order: -1; min-height: 0; aspect-ratio: 4 / 3; max-height: none; }
  .class-layout { grid-template-columns: 1fr; gap: 32px; }
  /* Once stacked, both photos would otherwise run the full container width and
     dominate the screen. Cap them and centre instead. */
  .hero-image, .class-photo img { max-width: 560px; margin-left: auto; margin-right: auto; }
  .teacher-grid { grid-template-columns: 1fr; }
  .teacher-image { min-height: 340px; }
  /* Once stacked, keep the inset inside the column so it cannot cause
     sideways scrolling, and leave room for its overhang. */
  .teacher-photos { margin-bottom: 104px; }
  /* 1 - 0.42 + 0.24 = 0.82 down the photo, so still clear of the baby's face. */
  .teacher-photo-inset { right: 10px; bottom: -24%; width: 42%; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  section { padding: 64px 0; }
  .date-card { padding: 26px 24px; }
  .date-card-banner { width: calc(100% + 48px); margin: -26px -24px 22px; }
  .enquiry-form { padding: 28px 24px; }

  /* Booking stays in the sticky header rather than a scroll down to the hero,
     so it is one tap away anywhere on the page. The logo shrinks and the label
     drops to "Book" to make all three fit on one line at 375px. */
  .logo { font-size: 1.02rem; gap: 7px; }
  .logo-mark { height: 30px; }
  .nav { padding: 12px 16px; }
  .nav-cta { gap: 10px; }
  .nav-cta .btn-primary { padding: 9px 16px; font-size: 0.85rem; }
  .cta-long { display: none; }
  .cta-short { display: inline; }
  .nav-cta-mobile a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-dark);
    color: #fff;
    padding: 12px 26px;
    border-radius: 999px;
    font-weight: 600;
  }
  .nav-cta-mobile a:hover { background: var(--color-primary-darker); color: #fff; }
}

@media (max-width: 560px) {
  .festive-bar { font-size: 0.82rem; }
  .festive-bar-detail { display: none; }

  .hero-ctas { flex-direction: column; align-items: stretch; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .detail-row { flex-direction: column; gap: 2px; }
  .detail-row dd { text-align: left; }
}