/* =========================================================================
   Puppeteria - single stylesheet
   Fully self-contained: self-hosted variable fonts, no CDN, no external CSS.
   Design tokens live at the top - change there to rebrand.
   ========================================================================= */

/* ---------- Self-hosted variable fonts (SIL OFL 1.1) ---------- */
@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-variable.woff2") format("woff2-variations"),
       url("/assets/fonts/fraunces-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-variable.woff2") format("woff2-variations"),
       url("/assets/fonts/inter-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design tokens ----------
   Palette drawn directly from the Puppeteria logo:
   royal blue background, burnt-orange letters, warm cream accents.
   ------------------------------------ */
:root {
  --color-blue:      #1E5AAB;   /* logo blue (primary) */
  --color-blue-2:    #164787;   /* deeper blue (hover / depth) */
  --color-blue-deep: #0B2A5B;   /* deepest navy (hero / footer / dark sections) */
  --color-orange:    #E8572C;   /* burnt orange (accent, from logo letters) */
  --color-orange-2:  #C94617;   /* darker orange for hover */
  --color-ink:       #0F1E3A;   /* body text - deep navy */
  --color-ink-soft:  #46526B;   /* muted body text */
  --color-cream:     #FBF6EC;   /* warm page background */
  --color-cream-2:   #F1E7D0;   /* deeper warm ivory (alt bg) */
  --color-line:      rgba(15,30,58,0.12);
  --color-shadow:    rgba(15,30,58,0.12);

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;

  --shadow-sm: 0 2px 6px var(--color-shadow);
  --shadow-md: 0 10px 30px -12px var(--color-shadow);
  --shadow-lg: 0 24px 60px -20px rgba(15,30,58,0.25);

  --content-max: 1180px;
  --content-max-wide: 1360px;

  --curtain-height: 32px;   /* theatre pelmet that hangs a little bit down from the very top of the page and is absolutely positioned in front of the site-header, so the Puppeteria logo sits flush at top: 0 and the pelmet just overlaps its top slightly */
  --curtain-scallop: 16px;  /* kept for the footer mirror curtain only */
  --header-height: 208px;   /* approximate site-header height: main-header + top-bar only (JS re-syncs from the real element on load/resize); kept for anchor scroll-margin math even though the header is no longer sticky) */
}

/* ---------- Reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--color-ink);
  background: var(--color-cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--color-blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--color-blue-2); }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 72, "SOFT" 60, "WONK" 1;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 0.4em;
  color: var(--color-ink);
}
h1 { font-size: clamp(2.2rem, 4.2vw + 1rem, 4rem); }
h2 { font-size: clamp(1.7rem, 2vw + 1rem, 2.6rem); }
h3 { font-size: clamp(1.25rem, 0.8vw + 1rem, 1.6rem); }
p  { margin: 0 0 1em; }
p + p { margin-top: 1em; }
:focus-visible {
  outline: 3px solid var(--color-orange);
  outline-offset: 2px;
  border-radius: 4px;
}
::selection { background: var(--color-orange); color: var(--color-ink); }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--color-ink); color: var(--color-cream);
  padding: 0.75rem 1rem; font-weight: 600; z-index: 1000;
}
.skip-link:focus { left: 1rem; top: 1rem; }

.container { max-width: var(--content-max); margin: 0 auto; padding: 0 1.25rem; }
.container--wide { max-width: var(--content-max-wide); }
@media (max-width: 540px) {
  .container { padding: 0 1rem; }
}

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

/* ---------- Top bar ---------- */
.top-bar {
  background: var(--color-blue);
  color: var(--color-cream);
  font-size: 13px;
  letter-spacing: 0.02em;
}
.top-bar-inner {
  max-width: var(--content-max-wide);
  margin: 0 auto;
  padding: 0.5rem 1.25rem;
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.55rem;
}
.top-bar-spacer { flex: 1; }
.top-bar-link,
.top-bar-social {
  color: var(--color-cream);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.35rem;
}
.top-bar-link:hover,
.top-bar-social:hover { color: var(--color-orange); }
.top-bar-link--phone { font-weight: 600; color: var(--color-cream); }
.top-bar-link--phone:hover { color: #BDD6F5; } /* soft light-blue hover, keeps it readable on the blue bar */
.top-bar-text { color: rgba(251,246,236,0.85); }
.top-bar-sep { color: rgba(251,246,236,0.35); }
.top-bar-icon {
  width: 14px; height: 14px;
}
.top-bar-social svg { width: 20px; height: 20px; }
.top-bar-social {
  padding: 0.15rem 0.3rem;
  border-radius: 4px;
}
/* Book Online CTA in the top-bar: phones only — sits to the left of the
   PH link so the primary action is always one tap away when the quick-nav
   is hidden. Desktop/tablet keep their usual CTAs in the hero & primary
   nav, so this button only surfaces at <=720px. */
.top-bar-cta { display: none; }
@media (max-width: 720px) {
  .top-bar-sep--hide-sm,
  .top-bar-text--hide-sm,
  .top-bar-link--hide-sm { display: none; }
  .top-bar-cta--mobile-only {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.8rem;
    background: var(--color-orange);
    color: var(--color-cream);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 999px;
    min-height: 36px;
    line-height: 1;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease;
  }
  .top-bar-cta--mobile-only:hover,
  .top-bar-cta--mobile-only:focus-visible {
    background: #FF6B3D;
    color: var(--color-cream);
  }
  .top-bar-inner {
    justify-content: center;
    padding: 0.4rem 1rem;
    gap: 0.75rem;
    font-size: 12.5px;
  }
  .top-bar-spacer { display: none; }
}
@media (min-width: 721px) {
  /* Right-lean the PH text chunk: push it past centre while keeping the
     social icons flush to the far right. 2:1 ratio = chunk sits ~2/3 across. */
  .top-bar-inner::before {
    content: "";
    flex: 2 1 0;
    order: -1;
  }
}

/* ---------- Stage curtain ----------
   Illustrated theatre pelmet that hangs from the very top of the viewport:
   three red velvet swags suspended from a gold braided rope, with four
   gold tassels at the pin-points (outer corners + each swag junction).
   The pelmet is ABSOLUTELY POSITIONED in front of the site-header, so the
   Puppeteria logo behind it sits flush at the very top of the page (0
   padding / 0 border) and the pelmet + tassels only drape over the top
   strip of the logo — right where the painted puppet strings are — making
   the strings read as descending from behind the curtain. No side
   curtain legs. */
.stage-curtain {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: var(--curtain-height);
  line-height: 0;
  pointer-events: none;
  /* Transparent background so the Puppeteria logo can shine through the
     triangular gaps between the swag arches — the gold rope + red swags
     read as a curtain draped in front of the logo rather than a solid
     blue pelmet sitting on top of it. */
  background: transparent;
  z-index: 51;
  /* overflow: visible so the tassels can dangle down past the pelmet bottom
     and drape in front of the top of the Puppeteria logo below. */
  overflow: visible;
}
.stage-curtain-art {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.28));
}
/* Tassels are separate SVGs so they keep their aspect ratio even though
   the pelmet stretches horizontally. They hang from the rope line at the
   top of the pelmet and dangle down well past the pelmet bottom so that
   each tassel drapes in front of the top of the logo — right over the
   painted puppet strings — making the strings read as descending from
   behind the curtain. Width/height share the tassel SVG's 32:74 aspect
   so the tassels stay in proportion at every breakpoint. Sizing is
   decoupled from --curtain-height now that the pelmet is a short hanger
   (≈32px); the tassels get their own --tassel-width and derive their
   height from the 32:74 aspect ratio. */
.stage-curtain-tassel {
  position: absolute;
  top: 2px;
  width: var(--tassel-width, 28px);
  height: calc(var(--tassel-width, 28px) * 74 / 32);
  overflow: visible;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,0.40));
}
/* Only the two outer tassels remain — the many small scallop drops along
   the pelmet provide all the decorative rhythm in between. */
.stage-curtain-tassel--1 { left: 0; }
.stage-curtain-tassel--4 { left: 100%; transform: translateX(-100%); }

/* ---------- Main header ----------
   Layout: logo sits directly under the stage curtain, phone / hours /
   social bar sits BELOW the logo. The logo PNG carries painted puppet
   strings at the top of each letter, which read as dangling down from
   under the curtain. */
.site-header {
  position: relative; z-index: 50;
  background: var(--color-blue);
}
.main-header {
  background: var(--color-blue);
}
.main-header-inner {
  max-width: var(--content-max-wide);
  margin: 0 auto;
  padding: 0 1.25rem 0.75rem; /* no top padding — logo sits flush */
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 0.75rem;
}
.brand {
  display: inline-flex;
  align-items: flex-start;
  text-decoration: none;
  min-width: 0; /* let the logo shrink with the viewport */
  flex: 0 1 auto;
}
.brand-logo {
  width: auto;
  max-width: 100%;
  max-height: 160px;
  image-rendering: auto;
}

/* ---------- Header tagline (desktop only) ----------
   Fills the empty blue space to the right of the logo on wide screens.
   Hidden at the same breakpoint the hamburger appears (<=960px), so
   mobile is untouched. The "kicker" (Castle Cove · Sydney) is a separate
   flex item so it can sit in the blue space BETWEEN the logo and the
   tagline block, clear of the curtain pelmet / right-edge tassel that
   obscures the top-right corner. */
.header-tagline,
.header-tagline-kicker {
  display: none;
}
@media (min-width: 961px) {
  .header-tagline {
    display: block;
    flex: 0 1 auto;
    min-width: 0;
    text-align: right;
    color: var(--color-cream);
    /* Extra top padding shifts the tagline block down clear of the
       stage-curtain pelmet, which drapes over the top ~70px of the header
       on desktop and was clipping the first line. */
    padding: 1.75rem 0 0 1.5rem;
    align-self: center;
  }
  .header-tagline-kicker {
    display: block;
    align-self: center;
    flex: 0 0 auto;
    /* Nudge off-centre: bigger left margin than right pulls the kicker
       away from the logo and closer to the tagline block on wide screens. */
    margin: 0 1rem 0 clamp(4rem, 12vw, 10rem);
    padding: 0;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: #FFD9B5;
    text-align: center;
    white-space: nowrap;
  }
  .header-tagline-line {
    margin: 0 0 0.55rem;
    font-family: var(--font-display);
    font-variation-settings: "opsz" 72, "SOFT" 60, "WONK" 1;
    font-weight: 600;
    font-size: clamp(1.05rem, 1vw + 0.45rem, 1.5rem);
    line-height: 1.1;
    color: var(--color-cream);
  }
  .header-tagline-line em {
    font-style: italic;
    color: #FFD9B5;
    font-variation-settings: "opsz" 72, "SOFT" 100, "WONK" 1;
    position: relative;
    display: inline-block;
  }
  .header-tagline-line em::after {
    content: "";
    position: absolute;
    left: 6%; right: 6%;
    bottom: -4px;
    height: 2px;
    background: var(--color-orange);
    border-radius: 2px;
    opacity: 0.85;
  }
  .header-tagline-meta {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(251, 246, 236, 0.78);
  }
}
@media (min-width: 1200px) {
  /* Wide screens: break out of the centered content column so the logo
     hugs the left edge of the viewport and the tagline sits to the right. */
  .main-header-inner {
    max-width: none;
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .header-tagline {
    padding-left: 2.5rem;
  }
  .header-tagline-line {
    font-size: 1.6rem;
  }
}
@media (min-width: 1600px) {
  .main-header-inner {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

@media (max-width: 1080px) {
  .brand-logo { max-height: 140px; }
  :root {
    --curtain-height: 28px;
    --header-height: 188px;
  }
}
@media (max-width: 720px) {
  .brand-logo { max-height: 112px; }
  .main-header-inner { padding: 0 1rem 0.6rem; }
  :root {
    --curtain-height: 24px;
    --curtain-scallop: 12px;
    --tassel-width: 24px;
    --header-height: 156px;
  }
}
@media (max-width: 480px) {
  .brand-logo { max-height: 92px; }
  .main-header-inner { padding: 0 0.9rem 0.5rem; }
  :root {
    --curtain-height: 20px;
    --curtain-scallop: 10px;
    --tassel-width: 20px;
    --header-height: 136px;
  }
}
@media (max-width: 380px) {
  .brand-logo { max-height: 78px; }
  .main-header-inner { padding: 0 0.75rem 0.4rem; gap: 0.5rem; }
  :root {
    --curtain-height: 18px;
    --curtain-scallop: 8px;
    --tassel-width: 18px;
    --header-height: 122px;
  }
}

/* Hamburger */
.menu-toggle {
  display: none;
  background: none; border: 0; cursor: pointer;
  padding: 0.6rem;
  width: 48px; height: 48px;
  flex-direction: column; justify-content: center; gap: 5px;
  border-radius: 10px;
  position: relative;
  z-index: 110;
}
.menu-toggle:hover { background: rgba(251,246,236,0.12); }
.menu-toggle span {
  display: block; width: 26px; height: 3px; border-radius: 3px;
  background: var(--color-cream);
  transition: transform .25s ease, opacity .2s ease;
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
@media (max-width: 960px) {
  .menu-toggle {
    display: inline-flex;
    align-self: center; /* vertically centre opposite the logo, not flush to top */
    /* Tablet sizes have plenty of header height next to the big logo,
       so bump the hamburger up so it reads as a proper control — larger
       than the phone size below, to match the taller iPad-width logo. */
    width: 84px;
    height: 84px;
    padding: 1rem;
    gap: 9px;
    border-radius: 16px;
  }
  .menu-toggle span {
    width: 48px;
    height: 6px;
    border-radius: 4px;
  }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(15px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-15px) rotate(-45deg); }
}
@media (max-width: 720px) {
  /* On phones the logo is shorter; keep the hamburger slightly smaller than
     the tablet size but still large enough to feel like a proper tap target,
     and nudge it off the top edge. */
  .menu-toggle {
    width: 60px;
    height: 60px;
    padding: 0.75rem;
    gap: 6px;
    border-radius: 12px;
    margin-top: 0.35rem;
  }
  .menu-toggle span {
    width: 34px;
    height: 4px;
    border-radius: 3px;
  }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }
}

/* ---------- Quick nav (compact categorized menu, small screens only) ----------
   A secondary nav sitting under the top-bar on tablets & phones. Three
   category chips open a mini "mega-menu" panel underneath, giving one-tap
   access to the most booked pages without opening the hamburger drawer.
   The full sitemap still lives in the hamburger. Hidden on desktop where
   the primary horizontal nav already surfaces every page.
   ------------------------------------------------------------------------ */
.quick-nav {
  display: none;
  position: relative; /* anchor for absolutely-positioned panels */
}
@media (max-width: 960px) {
  .quick-nav {
    display: block;
    background: var(--color-blue-deep);
    color: var(--color-cream);
    border-top: 1px solid rgba(251,246,236,0.08);
    border-bottom: 3px solid var(--color-orange);
    z-index: 48;
  }
  .quick-nav-inner {
    max-width: var(--content-max-wide);
    margin: 0 auto;
    flex-wrap: wrap;
    padding: 0.4rem 0.5rem;
    display: flex;
    gap: 0.4rem;
    align-items: stretch;
    justify-content: stretch;
  }
  .quick-nav-group,
  .quick-nav-link {
    flex: 1 1 0;
    min-width: 0;
    position: static; /* panel is absolute to .quick-nav so it spans full width */
  }
  .quick-nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.55rem 0.5rem;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-cream);
    background: rgba(251,246,236,0.08);
    border-radius: 10px;
    white-space: nowrap;
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
  }
  .quick-nav-link:hover { background: rgba(251,246,236,0.16); color: var(--color-cream); }
  .quick-nav-link[aria-current="page"] {
    background: var(--color-orange);
    color: var(--color-cream);
  }
  .quick-nav-link--cta {
    background: var(--color-orange);
    color: var(--color-cream);
  }
  .quick-nav-link--cta:hover {
    background: #FF6B3D;
    color: var(--color-cream);
  }
  .quick-nav-summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.55rem 0.5rem;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-cream);
    background: rgba(251,246,236,0.08);
    border-radius: 10px;
    white-space: nowrap;
    user-select: none;
    transition: background .2s ease, color .2s ease;
  }
  .quick-nav-summary::-webkit-details-marker,
  .quick-nav-summary::marker { display: none; content: ""; }
  .quick-nav-summary:hover { background: rgba(251,246,236,0.16); }
  .quick-nav-group[open] > .quick-nav-summary {
    background: var(--color-orange);
    color: var(--color-cream);
  }
  .quick-nav-caret {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    transition: transform .2s ease;
  }
  .quick-nav-group[open] > .quick-nav-summary .quick-nav-caret {
    transform: rotate(180deg);
  }

  .quick-nav-panel {
    position: absolute;
    top: 100%;
    left: 0.5rem;
    right: 0.5rem;
    margin-top: 0.4rem;
    background: var(--color-cream);
    color: var(--color-ink);
    border-radius: 14px;
    box-shadow: 0 18px 38px -10px rgba(0,0,0,0.45);
    padding: 0.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.25rem;
    z-index: 60;
  }
  .quick-nav-panel a {
    display: block;
    padding: 0.7rem 0.85rem;
    text-decoration: none;
    color: var(--color-ink);
    font-weight: 500;
    font-size: 0.95rem;
    border-radius: 10px;
    transition: background .15s ease, color .15s ease;
  }
  .quick-nav-panel a:hover {
    background: rgba(30,90,171,0.10);
    color: var(--color-blue-2);
  }
  .quick-nav-panel a[aria-current="page"] {
    background: rgba(232,87,44,0.14);
    color: var(--color-orange);
    font-weight: 600;
  }
  .quick-nav-panel .quick-nav-cta {
    background: var(--color-orange);
    color: var(--color-cream);
    font-weight: 700;
    text-align: center;
    grid-column: 1 / -1;
  }
  .quick-nav-panel .quick-nav-cta:hover {
    background: #FF6B3D;
    color: var(--color-cream);
  }
}
@media (max-width: 720px) {
  /* On actual phones, hide the quick-nav entirely — the hamburger is the
     single nav affordance so the header stays uncluttered. The quick-nav
     remains visible on tablets (721px–960px) where there's horizontal room
     for both the category chips and the hamburger. */
  .quick-nav { display: none; }
}
@media (max-width: 540px) {
  .quick-nav-inner { padding: 0.35rem 0.4rem; gap: 0.3rem; }
  .quick-nav-group,
  .quick-nav-link {
    flex: 1 1 calc(33.333% - 0.3rem);
  }
  .quick-nav-summary,
  .quick-nav-link {
    font-size: 0.72rem;
    padding: 0.5rem 0.3rem;
    gap: 0.2rem;
    letter-spacing: 0.03em;
  }
  .quick-nav-caret { width: 12px; height: 12px; }
  .quick-nav-panel {
    left: 0.4rem;
    right: 0.4rem;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  }
  .quick-nav-panel a { font-size: 0.92rem; padding: 0.6rem 0.7rem; }
}
@media (max-width: 380px) {
  .quick-nav-group,
  .quick-nav-link {
    flex: 1 1 calc(50% - 0.3rem);
  }
  .quick-nav-summary,
  .quick-nav-link { font-size: 0.68rem; }
  .quick-nav-panel { grid-template-columns: 1fr 1fr; }
}

/* ---------- Primary nav ---------- */
.primary-nav {
  background: linear-gradient(180deg, var(--color-blue) 0%, var(--color-blue-deep) 100%);
  color: var(--color-cream);
  position: relative; z-index: 49;
  border-bottom: 3px solid var(--color-orange);
}
.primary-nav-inner {
  max-width: var(--content-max-wide);
  margin: 0 auto;
  padding: 0 0.5rem;
}
.primary-nav-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
}
.primary-nav-list a {
  display: block;
  padding: 0.85rem 0.75rem;
  color: var(--color-cream);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-transform: none;
  position: relative;
}
.primary-nav-list a::after {
  content: ""; position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0.4rem;
  height: 2px; background: var(--color-orange);
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease;
}
.primary-nav-list a:hover::after,
.primary-nav-list a[aria-current="page"]::after { transform: scaleX(1); }
.primary-nav-list a[aria-current="page"] { color: var(--color-orange); }

.primary-nav-list .nav-cta {
  background: var(--color-orange);
  color: var(--color-cream);
  margin: 0.35rem 0.4rem;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: 0 2px 0 rgba(0,0,0,0.12);
}
.primary-nav-list .nav-cta::after { display: none; }
.primary-nav-list .nav-cta:hover { background: #FF6B3D; color: var(--color-cream); }

/* Nav close button & backdrop (mobile drawer only) */
.nav-close {
  display: none;
  position: absolute;
  top: 0.6rem; right: 0.6rem;
  width: 44px; height: 44px;
  background: transparent;
  border: 0; border-radius: 50%;
  color: var(--color-cream);
  cursor: pointer;
  padding: 0;
  align-items: center; justify-content: center;
}
.nav-close:hover { background: rgba(251,246,236,0.12); }
.nav-close svg { width: 24px; height: 24px; }
.nav-backdrop { display: none; }

@media (max-width: 960px) {
  /* Side-drawer mobile nav */
  .primary-nav {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(320px, 86vw);
    max-height: none;
    z-index: 100;
    background: var(--color-blue-deep);
    border-bottom: 0;
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.22,.61,.36,1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: -12px 0 40px rgba(0,0,0,0.35);
    padding: 0;
  }
  .primary-nav.is-open { transform: translateX(0); }

  .nav-close { display: inline-flex; }

  .nav-backdrop {
    display: block;
    position: fixed; inset: 0;
    background: rgba(8,20,44,0.55);
    z-index: 90;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
  }
  .nav-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }
  body.nav-open { overflow: hidden; }

  .primary-nav-inner { padding: 0; }
  .primary-nav-list {
    flex-direction: column;
    align-items: stretch;
    padding: 4rem 0 1.5rem;
  }
  .primary-nav-list a {
    padding: 1rem 1.5rem;
    font-size: 1.02rem;
    border-bottom: 1px solid rgba(251,246,236,0.08);
  }
  .primary-nav-list a::after { display: none; }
  .primary-nav-list a[aria-current="page"] {
    background: rgba(232,87,44,0.12);
    color: var(--color-orange);
  }
  .primary-nav-list .nav-cta {
    margin: 1.1rem 1.25rem 0.5rem;
    text-align: center;
    padding: 0.9rem 1rem;
    border-bottom: 0;
  }
}

/* ---------- Main content wrapper ---------- */
#main {
  min-height: 50vh;
}

/* ---------- Hero (home) ----------
   Stacked layout: solid deep-blue text panel on top, puppet slideshow
   below as its own image block. Text never sits on top of imagery.
   ---------------------------------- */
.hero {
  display: flex;
  flex-direction: column;
  background: var(--color-blue-deep);
  color: var(--color-cream);
  overflow: hidden;
}
.hero-inner {
  order: 2;
  max-width: none;
  margin: 0;
  width: 100%;
  padding: clamp(2.25rem, 5vw, 4.5rem) 1.25rem clamp(2rem, 4vw, 3.5rem);
  text-align: center;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Whimsical, puppet-show / party backdrop: soft stage spotlights
     tinted with the brand orange, blue, and cream, layered over the
     deep navy so the cream text keeps strong contrast. */
  background:
    radial-gradient(ellipse 55% 70% at 18% 18%, rgba(232,87,44,0.32), transparent 60%),
    radial-gradient(ellipse 55% 70% at 82% 20%, rgba(30,90,171,0.55), transparent 60%),
    radial-gradient(ellipse 60% 60% at 12% 88%, rgba(251,246,236,0.10), transparent 65%),
    radial-gradient(ellipse 55% 65% at 88% 92%, rgba(232,87,44,0.28), transparent 60%),
    radial-gradient(ellipse 70% 55% at 50% 55%, rgba(11,42,91,0.85), rgba(11,42,91,0.55) 55%, transparent 85%),
    var(--color-blue-deep);
}
/* Confetti + sparkle layer: tiled SVG of little dots, stars and
   streamers scattered around the panel, masked out behind the text
   so nothing competes with the headline. */
.hero-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'><g fill='%23E8572C'><circle cx='26' cy='40' r='5'/><circle cx='258' cy='64' r='3.5'/><circle cx='176' cy='258' r='4.5'/><circle cx='118' cy='158' r='2.5'/></g><g fill='%23FBF6EC'><circle cx='72' cy='224' r='3'/><circle cx='212' cy='148' r='4'/><circle cx='42' cy='142' r='2'/><circle cx='266' cy='206' r='2.5'/><circle cx='150' cy='46' r='2'/></g><g fill='%231E5AAB'><circle cx='140' cy='92' r='3.5'/><circle cx='102' cy='60' r='2.5'/><circle cx='234' cy='112' r='3'/></g><g stroke='%23FBF6EC' stroke-width='1.6' stroke-linecap='round' fill='none'><path d='M132 200 v14 M125 207 h14'/><path d='M52 72 v10 M47 77 h10'/><path d='M244 214 v12 M238 220 h12'/><path d='M88 20 v8 M84 24 h8'/></g><g stroke='%23E8572C' stroke-width='1.6' stroke-linecap='round' fill='none'><path d='M200 86 v10 M195 91 h10'/><path d='M20 260 v10 M15 265 h10'/></g><g><rect x='192' y='28' width='12' height='4.5' rx='1.5' fill='%23FBF6EC' transform='rotate(22 198 30)'/><rect x='76' y='262' width='14' height='4.5' rx='1.5' fill='%23E8572C' transform='rotate(-18 83 264)'/><rect x='256' y='168' width='12' height='4.5' rx='1.5' fill='%231E5AAB' transform='rotate(40 262 170)'/><rect x='14' y='100' width='12' height='4.5' rx='1.5' fill='%23E8572C' transform='rotate(-35 20 102)'/></g></svg>");
  background-size: 300px 300px;
  background-repeat: repeat;
  opacity: 0.55;
  /* Hide the confetti behind the text block so readability is preserved. */
  -webkit-mask-image: radial-gradient(ellipse 58% 62% at 50% 55%, transparent 0%, rgba(0,0,0,0.35) 45%, #000 85%);
          mask-image: radial-gradient(ellipse 58% 62% at 50% 55%, transparent 0%, rgba(0,0,0,0.35) 45%, #000 85%);
  pointer-events: none;
  z-index: 0;
}
/* Gentle pulsing "stage-light" overlay - adds life without motion
   sickness; disabled below via prefers-reduced-motion. */
.hero-inner::after {
  content: "";
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(circle at 20% 30%, rgba(232,87,44,0.18), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(30,90,171,0.22), transparent 50%);
  filter: blur(8px);
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
  animation: heroGlow 14s ease-in-out infinite alternate;
}
@keyframes heroGlow {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(1.5%, -1.5%, 0) scale(1.05); }
}
.hero-inner > * { position: relative; z-index: 1; }
.hero-stage {
  order: 1;
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  border-bottom: 3px solid var(--color-orange);
  background: var(--color-blue-deep);
}
.hero-stage picture,
.hero-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: heroFade 40s infinite;
}
.hero-stage img:nth-child(1) { animation-delay: 0s; }
.hero-stage img:nth-child(2) { animation-delay: 8s; }
.hero-stage img:nth-child(3) { animation-delay: 16s; }
.hero-stage img:nth-child(4) { animation-delay: 24s; }
.hero-stage img:nth-child(5) { animation-delay: 32s; }
@keyframes heroFade {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  20%  { opacity: 1; }
  25%  { opacity: 0; }
  100% { opacity: 0; }
}
.hero-scrim { display: none; }
.hero-eyebrow {
  display: inline-block;
  background: var(--color-orange);
  color: var(--color-ink);
  font-weight: 700;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  text-transform: uppercase;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  margin-bottom: 1.2rem;
}
.hero-title {
  color: var(--color-cream);
  font-size: clamp(2.1rem, 9vw, 6.5rem);
  margin: 0 0 0.25em;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  font-weight: 700;
  line-height: 1.05;
  word-break: keep-all;
  hyphens: none;
}
@media (max-width: 540px) {
  .hero-title {
    font-variation-settings: "opsz" 72, "SOFT" 80, "WONK" 0;
    letter-spacing: -0.015em;
  }
}
.hero-lede {
  font-size: clamp(1rem, 1vw + 0.7rem, 1.35rem);
  max-width: 680px;
  margin: 0 auto 1.75rem;
  color: rgba(251,246,236,0.92);
  line-height: 1.55;
}
.hero-tagline {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--color-cream);
  padding: 0.55rem 1rem;
  border-radius: var(--radius-md);
  margin-bottom: 1.75rem;
  font-size: 0.9rem;
  text-transform: uppercase;
  border: 1px solid rgba(232,87,44,0.7);
  background: rgba(11,42,91,0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  max-width: 100%;
}
.hero-actions {
  display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center;
}

@media (max-width: 540px) {
  .hero-tagline {
    font-size: 0.78rem;
    padding: 0.5rem 0.85rem;
    letter-spacing: 0.03em;
  }
  .hero-actions {
    display: block;
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }
  .hero-actions > .btn {
    display: block;
    width: 100%;
    margin-bottom: 0.65rem;
    text-align: center;
    line-height: 1.3;
  }
  .hero-actions > .btn:last-child { margin-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-stage img { animation: none; opacity: 1; }
  .hero-stage img:not(:first-child) { display: none; }
  .hero-inner::after { animation: none; }
}

/* Curtain valance under the hero */
.curtain-valance {
  display: block;
  height: 6px;
  width: 100%;
  background: var(--color-blue);
  border-bottom: 3px solid var(--color-orange);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.85rem 1.4rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary {
  background: var(--color-orange);
  color: var(--color-cream);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--color-orange-2); color: var(--color-cream); }
.btn--secondary {
  background: var(--color-blue);
  color: var(--color-cream);
}
.btn--secondary:hover { background: var(--color-blue-2); color: var(--color-cream); }
.btn--ghost {
  background: transparent;
  color: var(--color-cream);
  border-color: rgba(251,246,236,0.55);
}
.btn--ghost:hover { background: rgba(251,246,236,0.1); color: var(--color-cream); }
.btn--dark {
  background: var(--color-ink);
  color: var(--color-cream);
}
.btn--dark:hover { background: var(--color-blue); }
.btn--outline {
  background: transparent;
  color: var(--color-blue);
  border-color: var(--color-blue);
}
.btn--outline:hover { background: var(--color-blue); color: var(--color-cream); }

/* Spacing for centered button rows (.text-center wrappers with multiple .btn children).
   Gives consistent horizontal gap when side-by-side and vertical gap when they wrap. */
.text-center > .btn { margin: 0.35rem 0.3rem; }

/* ---------- Page header (non-home pages) ---------- */
.page-header {
  background: var(--color-cream-2);
  border-bottom: 1px solid var(--color-line);
  padding: clamp(2.25rem, 5vw, 4rem) 1.25rem clamp(1.75rem, 4vw, 3rem);
  text-align: center;
  position: relative;
}
.page-header h1 {
  font-size: clamp(1.9rem, 5.5vw + 0.5rem, 4rem);
  overflow-wrap: break-word;
}
.page-header::after {
  content: ""; display: block;
  position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%);
  width: 120px; height: 4px;
  background: var(--color-orange);
  border-radius: 2px;
}
.page-header-eyebrow {
  display: inline-block;
  color: var(--color-blue);
  font-weight: 700;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  text-transform: uppercase;
  margin-bottom: 0.65rem;
}
.page-header h1 {
  margin: 0;
  font-variation-settings: "opsz" 144, "SOFT" 80, "WONK" 1;
}
.page-header-lede,
.page-header .btn {
  margin-top: 1rem;
}
.page-header-lede {
  max-width: 680px;
  margin: 1rem auto 0;
  font-size: 1.1rem;
  color: var(--color-ink-soft);
}

/* ---------- Sections ---------- */
.section {
  padding: clamp(2.5rem, 5vw, 5rem) 0;
}
.section--alt {
  background: var(--color-cream-2);
}
.section--dark {
  background: var(--color-blue-deep);
  color: var(--color-cream);
}
.section--dark h1, .section--dark h2, .section--dark h3 {
  color: var(--color-cream);
}
.section-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(1.5rem, 3vw, 3rem);
}
.section-eyebrow {
  display: inline-block;
  color: var(--color-blue);
  font-weight: 700;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.section--dark .section-eyebrow { color: var(--color-orange); }

/* ---------- Cards ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 1.4rem;
}
.card-grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.card {
  background: var(--color-cream);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.4rem;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  transition: transform .15s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.card--link { text-decoration: none; color: inherit; }
.card h3 { margin-top: 0; }
.card p { color: var(--color-ink-soft); margin-bottom: 1em; }
.card-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--color-cream-2);
  color: var(--color-blue);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
}
.card-icon svg { width: 26px; height: 26px; }
.card-cta {
  margin-top: auto;
  font-weight: 700;
  color: var(--color-blue);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.35rem;
}
.card-cta::after {
  content: "\2192";
  transition: transform .2s ease;
}
.card:hover .card-cta::after { transform: translateX(4px); }

/* ---------- Themed cards (home "what we do" grid) ---------- */
.card-grid--themed { gap: 1.6rem; }

.card--themed {
  --card-accent: var(--color-blue);
  --card-accent-2: var(--color-blue-2);
  --card-tint: rgba(30,90,171,0.10);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-line);
  background:
    radial-gradient(120% 80% at 100% 0%, var(--card-tint) 0%, transparent 55%),
    var(--color-cream);
}
.card--themed::before {
  content: "";
  position: absolute;
  top: -60px; right: -60px;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: var(--card-accent);
  opacity: 0.10;
  z-index: 0;
  transition: transform .35s ease, opacity .3s ease;
}
.card--themed::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--card-accent) 0%, var(--card-accent-2) 100%);
  z-index: 1;
}
.card--themed > * { position: relative; z-index: 2; }

.card--themed .card-icon {
  width: 58px; height: 58px;
  border-radius: 16px;
  background: var(--card-accent);
  color: var(--color-cream);
  box-shadow: 0 10px 22px -10px var(--card-accent);
  transition: transform .35s cubic-bezier(.2,.9,.3,1.4), box-shadow .25s ease;
}
.card--themed .card-icon svg { width: 30px; height: 30px; }
.card--themed h3 { color: var(--color-blue-deep); }
.card--themed .card-cta { color: var(--card-accent-2); }

.card--themed:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -18px var(--card-accent);
  border-color: transparent;
}
.card--themed:hover::before { transform: scale(1.15) rotate(15deg); opacity: 0.16; }
.card--themed:hover .card-icon { transform: rotate(-6deg) scale(1.06); }

/* Per-theme palettes */
.card--themed[data-theme="show"] {
  --card-accent: #E8572C;
  --card-accent-2: #C94617;
  --card-tint: rgba(232,87,44,0.14);
}
.card--themed[data-theme="party"] {
  --card-accent: #D6407A;
  --card-accent-2: #A92A5C;
  --card-tint: rgba(214,64,122,0.14);
}
.card--themed[data-theme="preschool"] {
  --card-accent: #E6A617;
  --card-accent-2: #B98011;
  --card-tint: rgba(230,166,23,0.16);
}
.card--themed[data-theme="vacation"] {
  --card-accent: #2FA39A;
  --card-accent-2: #1F7E77;
  --card-tint: rgba(47,163,154,0.14);
}
.card--themed[data-theme="school"] {
  --card-accent: #6D4BAE;
  --card-accent-2: #4E338A;
  --card-tint: rgba(109,75,174,0.14);
}
.card--themed[data-theme="about"] {
  --card-accent: #1E5AAB;
  --card-accent-2: #0B2A5B;
  --card-tint: rgba(30,90,171,0.14);
}

@media (prefers-reduced-motion: reduce) {
  .card--themed,
  .card--themed::before,
  .card--themed .card-icon { transition: none; }
  .card--themed:hover .card-icon { transform: none; }
}

/* ---------- Featured video (home Seven News) ---------- */
.featured-video {
  background: var(--color-blue-deep);
  color: var(--color-cream);
  padding: clamp(2.5rem, 5vw, 4.5rem) 0;
}
.featured-video .section-header h2 { color: var(--color-cream); }
.featured-video .video-frame {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 3px solid var(--color-orange);
  background: #000;
}
.featured-video video {
  display: block;
  width: 100%;
  height: auto;
  background: #000;
}
.news-badge {
  display: inline-block;
  background: var(--color-orange);
  color: var(--color-ink);
  font-weight: 800;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  text-transform: uppercase;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  margin-bottom: 0.6rem;
}

/* ---------- Poster / image showcase ---------- */
.poster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 2rem;
}
.poster {
  background: var(--color-cream);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow-sm);
  padding: 1.4rem;
  text-align: center;
  display: flex; flex-direction: column;
}
.poster-period {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--color-blue);
  margin: 0 0 0.75rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.poster-thumb {
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 1.2rem;
  background: var(--color-cream-2);
  border: 1px solid var(--color-line);
}
.poster-thumb img {
  width: 100%; height: auto; display: block;
  transition: transform .3s ease;
}
.poster-thumb:hover img { transform: scale(1.02); }
.poster-actions {
  display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center;
  margin-top: auto;
}

.poster-single {
  max-width: 860px;
  margin: 0 auto;
}
.poster-single .poster-thumb img { width: 100%; }

/* Full-bleed image with caption (for single-image pages like Schools) */
.image-feature {
  max-width: 960px;
  margin: 0 auto;
  background: var(--color-cream);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow-md);
  padding: 1.25rem;
  text-align: center;
}
.image-feature img {
  width: 100%; height: auto; border-radius: var(--radius-md);
}
.image-feature-caption {
  margin-top: 1rem;
  color: var(--color-ink-soft);
  font-size: 0.95rem;
}

/* ---------- About / prose page ---------- */
.prose {
  max-width: 780px;
  margin: 0 auto;
  font-size: 1.08rem;
}
.prose p { margin: 0 0 1.2em; }
.prose em { color: var(--color-blue); font-style: italic; }
.prose strong { color: var(--color-ink); }
.prose h2 { margin-top: 2em; }
.prose blockquote {
  margin: 2em 0;
  padding: 1.2em 1.4em;
  border-left: 4px solid var(--color-orange);
  background: var(--color-cream-2);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-style: italic;
}

.about-award {
  background: var(--color-blue);
  color: var(--color-cream);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.75rem;
  max-width: 820px;
  margin: 0 auto 2.5rem;
  text-align: center;
  box-shadow: var(--shadow-md);
  position: relative;
}
.about-award::before {
  content: "\2605";
  position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
  width: 38px; height: 38px; line-height: 38px;
  background: var(--color-orange);
  color: var(--color-ink);
  border-radius: 50%;
  font-size: 1.15rem;
  box-shadow: var(--shadow-sm);
}
.about-award-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0.5rem 0 0.3rem;
}
.about-award-sub {
  margin: 0;
  color: rgba(251,246,236,0.9);
  font-size: 0.95rem;
}

/* ---------- Contact / info blocks ---------- */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 1.5rem;
  max-width: 920px;
  margin: 0 auto;
}
.info-card {
  background: var(--color-cream);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
}
.info-card h3 { margin-top: 0; color: var(--color-blue); }
.info-card a { color: var(--color-blue); font-weight: 600; }
.info-card address { font-style: normal; color: var(--color-ink); line-height: 1.7; }
.info-card-label {
  display: block;
  font-weight: 700;
  color: var(--color-ink);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.2rem;
}
.info-card p { margin-bottom: 0.75rem; }

/* ---------- Map images ---------- */
.map-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}
.map-card {
  background: var(--color-cream);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.map-card img { width: 100%; height: auto; display: block; background: #fff; }
.map-card-caption {
  padding: 0.85rem 1.1rem;
  border-top: 1px solid var(--color-line);
  font-weight: 600;
  color: var(--color-ink);
}

/* ---------- References / testimonials ---------- */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 1.25rem;
  max-width: 1100px;
  margin: 0 auto;
}
.testimonial {
  background: var(--color-cream);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.5rem 1.35rem;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.testimonial::before {
  content: "\201C";
  position: absolute;
  top: 0.3rem; left: 1rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 4rem;
  color: var(--color-orange);
  line-height: 1;
  opacity: 0.9;
}
.testimonial blockquote {
  margin: 1.25rem 0 0.75rem 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-style: italic;
  color: var(--color-ink);
  font-size: 1.02rem;
  line-height: 1.55;
}
.testimonial cite {
  display: block;
  font-style: normal;
  font-weight: 700;
  color: var(--color-blue);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.82rem;
  margin-top: 0.65rem;
}

/* ---------- Press clipping grid ---------- */
.press-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 1.1rem;
  max-width: 1200px;
  margin: 0 auto;
}
.press-item {
  display: block;
  background: var(--color-cream);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .2s ease;
}
.press-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.press-item img {
  width: 100%; height: clamp(200px, 42vw, 260px); object-fit: cover; display: block; background: #eee;
}
.press-item-caption {
  padding: 0.75rem 1rem;
  font-size: 0.88rem;
  color: var(--color-ink-soft);
  border-top: 1px solid var(--color-line);
}

/* ---------- CTA band ---------- */
.cta-band {
  background: linear-gradient(135deg, var(--color-blue) 0%, var(--color-blue-2) 100%);
  color: var(--color-cream);
  position: relative;
  overflow: hidden;
}
.cta-band::before,
.cta-band::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 120px;
  pointer-events: none;
  background: radial-gradient(circle at 60px 20px, rgba(232,87,44,0.18) 40px, transparent 42px) 0 0 / 120px 80px;
  opacity: 0.5;
}
.cta-band::before { left: 0; }
.cta-band::after { right: 0; }
.cta-band-inner {
  position: relative; z-index: 1;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 3.5rem) 1.25rem;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 1.5rem;
}
.cta-band-text { flex: 1; min-width: 260px; }
.cta-band-title {
  color: var(--color-cream);
  margin: 0 0 0.3em;
  font-size: clamp(1.5rem, 2.5vw, 2.2rem);
}
.cta-band-lead { color: rgba(251,246,236,0.9); margin: 0; max-width: 520px; }
.cta-band-actions {
  display: flex; gap: 0.75rem; flex-wrap: wrap;
}
.cta-band-actions .btn {
  position: relative;
  padding: 0.9rem 1.6rem;
  letter-spacing: 0.01em;
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
.cta-band-actions .btn--primary {
  background: var(--color-orange);
  border-color: transparent;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    0 1px 0 rgba(255,255,255,0.08),
    0 6px 14px rgba(5,20,45,0.35),
    0 2px 4px rgba(5,20,45,0.28);
  text-shadow: 0 1px 1px rgba(90,25,0,0.35);
}
.cta-band-actions .btn--primary:hover {
  background: var(--color-orange-2);
  color: var(--color-cream);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.32),
    0 1px 0 rgba(255,255,255,0.1),
    0 10px 20px rgba(5,20,45,0.4),
    0 3px 6px rgba(5,20,45,0.3);
}
.cta-band-actions .btn--primary:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2),
    0 3px 8px rgba(5,20,45,0.32);
}
.cta-band-actions .btn--ghost {
  background: rgba(11,42,91,0.25);
  border-color: rgba(251,246,236,0.85);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 6px 14px rgba(5,20,45,0.32),
    0 2px 4px rgba(5,20,45,0.22);
  text-shadow: 0 1px 1px rgba(5,20,45,0.4);
}
.cta-band-actions .btn--ghost:hover {
  background: rgba(251,246,236,0.12);
  border-color: var(--color-cream);
  color: var(--color-cream);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    0 10px 20px rgba(5,20,45,0.38),
    0 3px 6px rgba(5,20,45,0.26);
}
.cta-band-actions .btn--ghost:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 3px 8px rgba(5,20,45,0.3);
}
@media (max-width: 540px) {
  .cta-band-inner { flex-direction: column; align-items: stretch; text-align: center; }
  .cta-band-text { min-width: 0; }
  .cta-band-actions { flex-direction: column; align-items: stretch; }
  .cta-band-actions .btn { width: 100%; }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-blue);
  color: rgba(251,246,236,0.9);
  padding: 0 1.25rem 0;
  position: relative;
  overflow: hidden;
}
/* Theatre-marquee footlight band at the top of the footer. Completes the
   proscenium metaphor started by the stage curtain at the top of the page
   (curtain up top, footlights down bottom). A row of warm incandescent
   bulbs hang from a thin gold rail, casting an amber glow pool onto the
   blue footer. Rendered as one inline SVG with a 64×72 <pattern> tile, so
   each bulb stays perfectly circular and evenly spaced at any width — the
   number of bulbs on screen naturally scales with viewport. */
.footer-marquee {
  position: relative;
  height: 72px;
  margin: 0 -1.25rem 0;
  overflow: hidden;
}
.footer-marquee-art {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* Gentle twinkle is driven by SMIL <animate> elements inside the SVG
   <pattern>, not CSS keyframes — Chromium does not reliably re-rasterize
   pattern tiles when pattern-child CSS animations update, but SMIL inside
   patterns does force a pattern refresh each tick. Reduced-motion is
   handled by a tiny inline script at the end of the footer include that
   strips the <animate> elements on pages viewed with that preference. */
@media (max-width: 1100px) { .footer-marquee { height: 64px; } }
@media (max-width: 720px)  { .footer-marquee { height: 56px; } }
@media (max-width: 540px)  { .footer-marquee { height: 48px; } }
@media (max-width: 360px)  { .footer-marquee { height: 42px; } }
.site-footer-inner {
  max-width: var(--content-max-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr 1fr;
  gap: 2rem;
  padding-top: 2.25rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(251,246,236,0.18);
}
@media (max-width: 920px) {
  .site-footer-inner { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}
@media (max-width: 540px) {
  .site-footer-inner { grid-template-columns: 1fr; }
}
.footer-col-title {
  color: var(--color-cream);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 0.6rem;
  letter-spacing: 0.04em;
}
.footer-brand {
  min-width: 0;
}
/* Polaroid-style keepsake photo in the footer. Slightly tilted, with a
   cream mat, deckle shadow, and a bit of sticky-tape at the top so it
   reads as something pinned to a dressing-room mirror. */
.footer-polaroid {
  --tilt: -2.5deg;
  position: relative;
  display: inline-block;
  margin: 0 0 1.25rem;
  padding: 0.55rem 0.55rem 0.55rem;
  background: var(--color-cream);
  border-radius: 2px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.25) inset,
    0 10px 22px rgba(0,0,0,0.38),
    0 2px 6px rgba(0,0,0,0.25);
  transform: rotate(var(--tilt));
  transition: transform .3s ease;
  max-width: 260px;
}
.footer-polaroid:hover {
  transform: rotate(0deg) translateY(-2px);
}
.footer-polaroid img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 1px;
}
.footer-polaroid figcaption {
  font-family: var(--font-display);
  font-style: italic;
  color: #4a2e18;
  text-align: center;
  font-size: 0.95rem;
  padding: 0.55rem 0.25rem 0.2rem;
  letter-spacing: 0.01em;
}
.footer-polaroid::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  width: 62px;
  height: 18px;
  transform: translateX(-50%) rotate(calc(var(--tilt) * -1));
  background: rgba(232, 195, 106, 0.55);
  border: 1px solid rgba(138, 106, 31, 0.35);
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.footer-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  max-width: 320px;
}
.footer-stats li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0.55rem 0.35rem;
  background: rgba(251,246,236,0.06);
  border: 1px solid rgba(251,246,236,0.12);
  border-radius: 6px;
  min-width: 0; /* let long labels shrink/wrap instead of overflowing */
}
.footer-stats strong {
  font-family: var(--font-display);
  color: var(--color-cream);
  font-size: 1.05rem;
  line-height: 1.1;
  letter-spacing: 0.01em;
}
.footer-stats span {
  font-size: 0.68rem;
  color: rgba(251,246,236,0.65);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 0.2rem;
  line-height: 1.2;
  overflow-wrap: anywhere; /* safety net: break "CHARACTERS" rather than overflow */
}
.footer-address, .footer-contact {
  color: rgba(251,246,236,0.9);
  font-style: normal;
  line-height: 1.75;
}
.footer-contact a,
.site-footer a {
  color: var(--color-cream);
  text-decoration: none;
}
.footer-contact a:hover,
.site-footer a:hover { text-decoration: underline; color: var(--color-cream); }
.footer-socials {
  display: flex; gap: 0.5rem; margin-bottom: 1rem;
}
.footer-socials a {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(251,246,236,0.08);
  color: var(--color-cream);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color .2s ease;
}
.footer-socials a:hover { background: rgba(251,246,236,0.18); color: var(--color-cream); }
.footer-socials svg { width: 16px; height: 16px; }
.footer-awards {
  font-size: 0.85rem;
  color: rgba(251,246,236,0.6);
  margin: 0.5rem 0 0;
  line-height: 1.5;
}
.site-footer-legal {
  max-width: var(--content-max-wide);
  margin: 0 auto;
  padding: 1.1rem 0;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem;
  font-size: 0.85rem;
  color: rgba(251,246,236,0.55);
}
.site-footer-legal a { color: rgba(251,246,236,0.75); text-decoration: none; }
.site-footer-legal a:hover { color: var(--color-cream); }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(8, 20, 44, 0.92);
  z-index: 200;
  display: none;
  align-items: center; justify-content: center;
  padding: 1.5rem;
}
.lightbox.is-open {
  display: flex;
  animation: fadeIn .2s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  background: #fff;
}
.lightbox-close {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--color-cream);
  color: var(--color-ink);
  border: 0;
  font-size: 1.4rem;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
}
.lightbox-close:hover { background: var(--color-orange); }

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.lead { font-size: 1.15rem; color: var(--color-ink-soft); }
.muted { color: var(--color-ink-soft); }
.tag {
  display: inline-block;
  background: var(--color-cream-2);
  color: var(--color-blue);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
}
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.75rem; }
.mb-0 { margin-bottom: 0; }

/* =========================================================================
   Mobile refinements
   Consolidated tap-target, typography, and spacing adjustments for phones.
   Desktop styles above stay untouched; everything here only kicks in at
   smaller breakpoints.
   ========================================================================= */

/* ---------- Tap targets (>=44px) ---------- */
@media (max-width: 720px) {
  .top-bar-social {
    padding: 0.45rem 0.55rem;
  }
  .top-bar-social svg { width: 22px; height: 22px; }
  .top-bar-link--phone {
    padding: 0.35rem 0.4rem;
    min-height: 36px;
  }
  .top-bar-inner {
    gap: 0.35rem;
    padding: 0.2rem 0.75rem;
  }
}

/* Lightbox close slightly bigger */
.lightbox-close { width: 48px; height: 48px; }

/* ---------- Page header (inner pages) on phones ---------- */
@media (max-width: 540px) {
  .page-header {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .page-header h1 {
    font-variation-settings: "opsz" 72, "SOFT" 80, "WONK" 0;
    letter-spacing: -0.015em;
  }
  .page-header-eyebrow {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    margin-bottom: 0.5rem;
  }
  .page-header-lede { font-size: 1rem; line-height: 1.55; }
}

/* ---------- Hero: change slideshow aspect ratio on phones ---------- */
@media (max-width: 720px) {
  .hero-stage { aspect-ratio: 4 / 3; }
}
@media (max-width: 540px) {
  .hero-inner {
    padding-top: clamp(1.75rem, 6vw, 2.75rem);
    padding-bottom: clamp(1.75rem, 6vw, 2.75rem);
  }
  .hero-eyebrow {
    font-size: 0.7rem;
    padding: 0.3rem 0.75rem;
    margin-bottom: 1rem;
    letter-spacing: 0.1em;
  }
  .hero-lede {
    font-size: 0.98rem;
    line-height: 1.5;
    margin-bottom: 1.1rem;
  }
  .hero-tagline { margin-bottom: 1.25rem; }
  .hero-stage { aspect-ratio: 5 / 4; }
}

/* ---------- Section spacing ---------- */
@media (max-width: 540px) {
  .section { padding: 2.25rem 0; }
  .section-header { margin-bottom: 1.5rem; }
}

/* ---------- Cards / grids ---------- */
@media (max-width: 540px) {
  .card-grid { gap: 1rem; }
  .card-grid--themed { gap: 1.15rem; }
  .card { padding: 1.25rem 1.15rem; }
  .card-icon { width: 44px; height: 44px; margin-bottom: 0.75rem; }
  .card-icon svg { width: 22px; height: 22px; }
  .card--themed .card-icon { width: 50px; height: 50px; }
  .card--themed .card-icon svg { width: 26px; height: 26px; }
  .card--themed::before { width: 140px; height: 140px; top: -50px; right: -50px; }
  .card h3 { font-size: 1.2rem; }
  .card p { font-size: 0.96rem; line-height: 1.55; }
}

/* ---------- Poster grid on phones ---------- */
@media (max-width: 540px) {
  .poster { padding: 1rem; }
  .poster-period { font-size: 1.2rem; letter-spacing: 0.03em; margin-bottom: 0.55rem; }
  .poster-thumb { margin-bottom: 1rem; }
  .poster-actions { flex-direction: column; gap: 0.55rem; align-items: stretch; }
  .poster-actions > .btn { width: 100%; display: block; text-align: center; }
}

/* ---------- Info cards on phones ---------- */
@media (max-width: 540px) {
  .info-card { padding: 1.3rem 1.2rem; }
  .info-card-label { font-size: 0.74rem; }
}

/* ---------- Testimonials on phones ---------- */
@media (max-width: 540px) {
  .testimonial { padding: 1.35rem 1.25rem 1.1rem; }
  .testimonial::before { font-size: 3rem; top: 0.15rem; left: 0.75rem; }
  .testimonial blockquote { font-size: 0.98rem; line-height: 1.55; margin-top: 1rem; }
  .testimonial cite { font-size: 0.78rem; }
}

/* ---------- Press clippings on phones ---------- */
@media (max-width: 540px) {
  .press-item img { height: clamp(180px, 50vw, 240px); }
  .press-item-caption { padding: 0.6rem 0.8rem; font-size: 0.82rem; }
}

/* ---------- About / prose ---------- */
@media (max-width: 540px) {
  .prose { font-size: 1.02rem; line-height: 1.65; }
  .prose p { margin-bottom: 1em; }
  .prose blockquote { padding: 1em 1.1em; margin: 1.5em 0; font-size: 1rem; }
  .about-award { padding: 1.25rem 1.1rem; margin-bottom: 1.75rem; }
  .about-award-title { font-size: 0.98rem; letter-spacing: 0.06em; }
  .about-award-sub { font-size: 0.88rem; }
}

/* ---------- Map + image-feature ---------- */
@media (max-width: 540px) {
  .map-card-caption { padding: 0.7rem 0.9rem; font-size: 0.92rem; }
  .image-feature { padding: 0.75rem; }
  .image-feature-caption { margin-top: 0.75rem; font-size: 0.9rem; }
}

/* ---------- Featured video on phones ---------- */
@media (max-width: 540px) {
  .featured-video { padding: 2.25rem 0; }
  .featured-video .video-frame { border-width: 2px; border-radius: var(--radius-md); }
  .news-badge { font-size: 0.72rem; padding: 0.3rem 0.65rem; }
}

/* ---------- CTA band title sizing ---------- */
@media (max-width: 540px) {
  .cta-band-inner { padding: 2rem 1rem; gap: 1.1rem; }
  .cta-band-title { font-size: 1.4rem; }
  .cta-band-lead { font-size: 0.98rem; line-height: 1.5; }
}

/* ---------- Footer on phones ---------- */
@media (max-width: 540px) {
  .site-footer { padding: 0 1rem 0; }
  .footer-marquee { margin: 0 -1rem 0; }
  .site-footer-inner {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
    gap: 1.5rem;
    text-align: left;
  }
  .footer-col-title { font-size: 1rem; margin-bottom: 0.4rem; }
  .footer-polaroid { max-width: 220px; margin-bottom: 1rem; }
  .footer-stats { max-width: 340px; }
  .footer-socials a { width: 44px; height: 44px; }
  .footer-socials svg { width: 18px; height: 18px; }
  .site-footer-legal {
    padding: 1rem 0 1.25rem;
    flex-direction: column;
    gap: 0.35rem;
    text-align: center;
    font-size: 0.8rem;
  }
}

/* ---------- Buttons: allow wrapping on very narrow screens ---------- */
@media (max-width: 380px) {
  .btn {
    white-space: normal;
    padding: 0.78rem 1.1rem;
    font-size: 0.95rem;
    line-height: 1.3;
  }
}

/* ---------- Mobile drawer polish ---------- */
@media (max-width: 960px) {
  .primary-nav {
    padding-bottom: env(safe-area-inset-bottom);
  }
  .primary-nav-list {
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
  }
  /* Primary/phone items larger tap area on tiny screens */
  .primary-nav-list a { min-height: 48px; display: flex; align-items: center; }
}

/* =========================================================================
   Tablet / iPad refinements
   iPad portrait  ~ 768 / 820 / 834 / 1024 CSS px wide
   iPad landscape ~ 1024 / 1180 / 1194 / 1366 CSS px wide
   The 721-960px range covers iPad Mini/Air/10th-gen portrait; the
   1024-1200px range catches smaller iPad landscape as well as iPad Pro
   portrait. We keep the phone drawer nav, but restore a compact tagline
   in the main header so the blue space next to the logo doesn't feel
   bare, and give the hero / sections breathing room appropriate to a
   tablet screen.
   ========================================================================= */

/* --- Hero: taller, less panoramic on narrow / tablet portraits.
   21:9 is gorgeous at desktop widths but squashes the puppet portraits
   on iPad portrait and phones. 16:9 gives the characters room. --- */
@media (max-width: 1080px) {
  .hero-stage { aspect-ratio: 16 / 9; }
}
@media (max-width: 960px) {
  /* On phones and tablet-portrait, sandwich the hero image between two thin
     orange rules — the bottom border is always on; this mirrors it on top so
     the photo reads as a framed block tucked under the header, and the top
     rule doubles as a crisp separator directly under the phone-number strip
     now that the drawer nav replaces the desktop primary-nav (which normally
     carries that orange line). */
  .hero-stage { border-top: 3px solid var(--color-orange); }
}
@media (max-width: 540px) {
  .hero-stage { aspect-ratio: 5 / 4; } /* phones: near-square framing */
}

/* --- Tablet portrait + mobile (<=960px): header tagline stays hidden ---
   "Sydney's home of live puppet theatre" is a desktop/landscape-tablet
   flourish only; on narrower screens the Puppeteria logo and hamburger
   carry the header on their own. The base `.header-tagline { display: none }`
   already handles this, so there's nothing to override here apart from
   giving the main header a touch of gap so the logo and hamburger breathe. */
@media (min-width: 721px) and (max-width: 960px) {
  .main-header-inner { gap: 1rem; }
}

/* --- Tablet landscape / small desktop (961-1200): gentle spacing tune
   so content doesn't feel stretched near the max-width ceiling and the
   sticky nav stays tidy when all 12 items are on one row. --- */
@media (min-width: 961px) and (max-width: 1200px) {
  .primary-nav-list a {
    padding: 0.85rem 0.55rem;
    font-size: 0.82rem;
  }
  .primary-nav-list a::after { left: 0.55rem; right: 0.55rem; }
  .primary-nav-list .nav-cta {
    margin: 0.35rem 0.3rem;
    padding: 0.5rem 0.85rem;
  }
  .section { padding: clamp(2.75rem, 5vw, 4.5rem) 0; }
  .page-header { padding: clamp(2.5rem, 5vw, 3.75rem) 1.25rem clamp(2rem, 4vw, 3rem); }
}

/* --- Page header h1 word-break cleanup ---
   At iPad widths, long hyphenated titles (e.g. "Mobile Performances in
   Pre-Schools") will break after the hard hyphen and leave a lonely
   "Schools" on its own line. Prefer a soft wrap between whole words. */
@media (min-width: 721px) and (max-width: 1200px) {
  .page-header h1 {
    hyphens: manual;
    word-break: normal;
    overflow-wrap: normal;
  }
}

/* --- Card / info / press grids: prefer 2-up on iPad portrait so the
   thumbnails stay legible instead of squeezing four columns of 170px. */
@media (min-width: 721px) and (max-width: 960px) {
  .press-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
  }
  .press-item img {
    height: clamp(180px, 28vw, 240px);
  }
  .info-grid { gap: 1.25rem; }
  .poster-grid { gap: 1.75rem; }
}

/* --- Hero inner padding: more generous vertical rhythm on iPad. --- */
@media (min-width: 721px) and (max-width: 1080px) {
  .hero-inner {
    padding-top: clamp(2.5rem, 5.5vw, 4rem);
    padding-bottom: clamp(2.25rem, 4.5vw, 3.25rem);
  }
  .hero-title { font-size: clamp(3rem, 7.5vw, 5rem); }
  .hero-lede  { font-size: clamp(1.05rem, 1.2vw + 0.75rem, 1.25rem); }
}

/* --- Footer grid tightens up on iPad landscape so the 4 columns don't
   stretch into big empty gaps. --- */
@media (min-width: 961px) and (max-width: 1200px) {
  .site-footer-inner { gap: 2rem; }
}