/* ==========================================================
   Carnival Play — site stylesheet
   Extracted from the homepage on 4 August 2026 (plan item A-02;
   that file was page.html, renamed index.html on 13 Aug)
   so the 8 inner pages share one stylesheet instead of
   carrying nine copies of it.

   Lives in css/. The three url() references below are relative
   to THIS file, so they step up a level: ../img/line.jpg,
   ../img/star-left.png, ../img/star-right.png. If this file is
   ever moved again, those three paths must move with it.

   Load order in every page:
     <link rel="stylesheet" href="css/fonts.css">
     <link rel="stylesheet" href="css/style.css">
   ========================================================== */ :root {
  --sand: #F3CF83;
  --red: #B92D15;
  --orange: #E57D26;
  --teal: #6BA19C;
  --paper: #FFF6E5;
  --cream: #FBEBC6;
  --ink: #3A2118;
  --ink-soft: #6B4A38;
  --redink: #8C1F0C;
  --night: #17403D;
  --night-2: #0E2B29;
  /* --orange (#E57D26) on --night measures 3.97:1, under AA for the 20px
     footer headings. Lifted 35% toward --sand: 5.01:1, orange cast kept. */
  --orange-on-night: #EA9A47;
  --r-lg: 22px;
  --r-md: 16px;
  --header-stuck: 96px;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--header-stuck);
  scroll-behavior: smooth;
}
body {
  width: 100%;
  font-family: 'Nunito Sans', system-ui, sans-serif;
  font-size: 17.5px;
  line-height: 1.72;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
}
img {
  display: block;
  max-width: 100%
}
a {
  color: inherit;
  text-decoration: none
}
.wrap {
  width: 1180px;
  max-width: calc(100% - 48px);
  margin: 0 auto;
  position: relative
}
.wrap-narrow {
  width: 940px;
  max-width: calc(100% - 48px);
  margin: 0 auto;
  position: relative
}
/* ---------- type ---------- */
.display {
  font-family: 'Rye', serif;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--red)
}
.h2 {
  font-family: 'Rye', serif;
  font-size: 52px;
  line-height: 1.08;
  color: var(--red)
}
.h2-sm {
  font-family: 'Rye', serif;
  font-size: 38px;
  line-height: 1.12;
  color: var(--red)
}
.h3 {
  font-family: 'Chicle', cursive;
  font-size: 26px;
  line-height: 1.2;
  color: var(--redink);
  font-weight: 400
}
.lede {
  font-size: 19.5px;
  line-height: 1.68;
  color: var(--ink-soft);
  max-width: 100%
}
.body-p {
  color: var(--ink-soft);
  max-width: 100%;
}
.small {
  font-size: 14.5px;
  line-height: 1.6
}
.eyebrow {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--orange);
  display: flex;
  align-items: center;
  gap: 9px
}
.eyebrow.on-dark {
  color: var(--sand)
}
.eyebrow svg {
  flex: none
}
/* ---------- signature: hanging marquee plaque ---------- */
.plaque-hang {
  position: relative;
  display: inline-block;
  margin-bottom: 22px
}
.plaque-hang .rope {
  position: absolute;
  top: 0;
  width: 2px;
  height: 42px;
  background: var(--redink);
  opacity: .55
}
.plaque-hang .rope.l {
  left: 26px;
  transform: rotate(7deg)
}
.plaque-hang .rope.r {
  right: 26px;
  transform: rotate(-7deg)
}
.plaque {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--red);
  color: var(--cream);
  font-family: 'Chicle', cursive;
  font-size: 21px;
  line-height: 1;
  padding: 14px 30px 15px;
  border-radius: 12px;
  border: 3px solid var(--teal);
  box-shadow: 0 6px 0 rgba(140, 31, 12, .35);
}
.plaque::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 7px;
  background: radial-gradient(circle at center, var(--sand) 2.1px, transparent 2.5px) repeat-x left top /16px 7px, radial-gradient(circle at center, var(--sand) 2.1px, transparent 2.5px) repeat-x left bottom /16px 7px, radial-gradient(circle at center, var(--sand) 2.1px, transparent 2.5px) repeat-y left top /7px 16px, radial-gradient(circle at center, var(--sand) 2.1px, transparent 2.5px) repeat-y right top /7px 16px;
  pointer-events: none;
}
.plaque span {
  position: relative;
  z-index: 2
}
.plaque.on-dark {
  background: var(--sand);
  color: var(--redink);
  border-color: var(--orange)
}
.plaque.on-dark::after {
  background: radial-gradient(circle at center, var(--redink) 2.1px, transparent 2.5px) repeat-x left top /16px 7px, radial-gradient(circle at center, var(--redink) 2.1px, transparent 2.5px) repeat-x left bottom /16px 7px, radial-gradient(circle at center, var(--redink) 2.1px, transparent 2.5px) repeat-y left top /7px 16px, radial-gradient(circle at center, var(--redink) 2.1px, transparent 2.5px) repeat-y right top /7px 16px;
}
/* ---------- signature: the sensory trail ---------- */
.trail {
  height: 86px;
  position: relative
}
.trail::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 3px dashed rgba(229, 125, 38, .55);
}
.trail .node {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--paper);
  padding: 6px;
  line-height: 0;
  border-radius: 50%;
}
.trail.on-sand .node {
  background: var(--sand)
}
/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: .02em;
  padding: 16px 30px;
  border-radius: 999px;
  border: 3px solid transparent;
  cursor: pointer;
}
.btn-primary {
  background: var(--red);
  color: var(--cream);
  border-color: var(--redink);
  box-shadow: 0 5px 0 var(--redink)
}
.btn-secondary {
  background: transparent;
  color: var(--redink);
  border-color: var(--redink)
}
.btn-sun {
  background: var(--orange);
  color: #4A1D06;
  border-color: #A85312;
  box-shadow: 0 5px 0 #A85312
}
.btn-sand {
  background: var(--sand);
  color: var(--redink);
  border-color: var(--orange);
  box-shadow: 0 5px 0 rgba(0, 0, 0, .18)
}
/* ---------- image frames ---------- */
.frame {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 5px solid var(--red);
  box-shadow: 0 0 0 3px var(--cream) inset, 0 14px 30px rgba(58, 33, 24, .13);
  background: var(--cream);
}
.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover
}
.frame-teal {
  border-color: var(--teal)
}
.frame-bulbs::after {
  content: '';
  position: absolute;
  inset: 7px;
  border-radius: 12px;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(251, 235, 198, .95) 2.2px, transparent 2.6px) repeat-x left top /20px 8px, radial-gradient(circle at center, rgba(251, 235, 198, .95) 2.2px, transparent 2.6px) repeat-x left bottom /20px 8px, radial-gradient(circle at center, rgba(251, 235, 198, .95) 2.2px, transparent 2.6px) repeat-y left top /8px 20px, radial-gradient(circle at center, rgba(251, 235, 198, .95) 2.2px, transparent 2.6px) repeat-y right top /8px 20px;
}
.caption {
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-soft);
  margin-top: 12px
}
/* ---------- carousel ---------- */
.carousel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 60px;
  margin-bottom: 38px;
}
.carousel-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
  padding-bottom: 4px;
}
.carousel-count {
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .16em;
  color: var(--ink-soft);
  margin-right: 6px;
}
.carousel-count b {
  font-family: 'Rye', serif;
  font-weight: 400;
  font-size: 22px;
  color: var(--red);
  letter-spacing: 0;
}
.carousel-btn {
  width: 54px;
  height: 54px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--paper);
  border: 3px solid var(--red);
  color: var(--red);
  box-shadow: 0 4px 0 var(--redink);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .12s ease, box-shadow .2s ease, opacity .2s ease;
}
.carousel-btn svg {
  width: 20px;
  height: 20px;
}
.carousel-btn:hover:not(:disabled) {
  background: var(--red);
  color: var(--cream);
}
.carousel-btn:active:not(:disabled) {
  transform: translateY(4px);
  box-shadow: 0 0 0 var(--redink);
}
.carousel-btn:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}
.carousel-btn:disabled {
  opacity: .32;
  box-shadow: none;
  cursor: default;
}
.carousel-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 6px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carousel-track::-webkit-scrollbar {
  display: none;
}
.carousel-track:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 6px;
  border-radius: var(--r-lg);
}
.carousel-slide {
  flex: 0 0 calc(58% - 12px);
  scroll-snap-align: start;
  margin: 0;
}
.carousel-slide .frame {
  height: 430px;
}
.carousel-slide:nth-child(even) .frame {
  border-color: var(--teal);
}
.carousel-slide .caption {
  margin-top: 14px;
}
@media (prefers-reduced-motion: reduce) {
  .carousel-track {
    scroll-behavior: auto
  }
  .carousel-btn {
    transition: none
  }
}
@media (max-width:1100px) {
  .carousel-head {
    gap: 30px
  }
  .carousel-slide {
    flex: 0 0 calc(72% - 12px)
  }
  .carousel-slide .frame {
    height: 360px
  }
}
@media (max-width:900px) {
  .carousel-head {
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 26px
  }
  .carousel-nav {
    width: 100%;
    justify-content: flex-end
  }
  .carousel-btn {
    width: 46px;
    height: 46px
  }
  .carousel-slide {
    flex: 0 0 88%
  }
  .carousel-slide .frame {
    height: 260px
  }
}
/* ---------- sunbursts ---------- */
.sunburst {
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(from 0deg at 50% 42%, rgba(229, 125, 38, .16) 0deg 7deg, rgba(229, 125, 38, 0) 7deg 14deg);
  pointer-events: none;
}
.sunburst-red {
  background: repeating-conic-gradient(from 0deg at 50% 46%, rgba(0, 0, 0, .10) 0deg 7deg, rgba(0, 0, 0, 0) 7deg 14deg);
}
.sunburst-night {
  background: repeating-conic-gradient(from 0deg at 50% 40%, rgba(243, 207, 131, .07) 0deg 7deg, rgba(243, 207, 131, 0) 7deg 14deg);
}
/* ---------- layout ---------- */
.sec {
  padding: 92px 0;
  position: relative
}
.sec-sand {
  background: var(--sand);
  position: relative;
  overflow: hidden
}
.sec-g {
  background: var(--sand);
  position: relative;
  overflow: hidden
}
.sec-cream {
  background: var(--cream)
}
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center
}
.grid-2-wide {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 60px;
  align-items: center
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px
}
.stack-sm > * + * {
  margin-top: 16px
}
.stack-md > * + * {
  margin-top: 24px
}
.center {
  text-align: center
}
.center .eyebrow {
  justify-content: center
}
.center .lede {
  margin-left: auto;
  margin-right: auto
}
/* ---------- feature list ---------- */
.flist {
  list-style: none;
  display: grid;
  gap: 14px;
  margin-top: 8px
}
.flist li {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  font-size: 16.5px;
  color: var(--ink)
}
.flist .dot {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--sand);
  border: 2px solid var(--orange);
  display: grid;
  place-items: center;
  margin-top: 3px
}
.flist .dot i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
  display: block
}
/* ---------- ticket ---------- */
.ticket {
  position: relative;
  background: var(--cream);
  border: 3px solid var(--redink);
  border-radius: 18px;
  padding: 30px 32px;
  box-shadow: 0 12px 0 rgba(140, 31, 12, .14);
}
.ticket::before, .ticket::after {
  content: '';
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--paper);
  border: 3px solid var(--redink);
}
.ticket::before {
  left: -16px;
  top: 50%;
  transform: translateY(-50%);
  clip-path: inset(0 0 0 50%)
}
.ticket::after {
  right: -16px;
  top: 50%;
  transform: translateY(-50%);
  clip-path: inset(0 50% 0 0)
}
.ticket-on-sand::before, .ticket-on-sand::after {
  background: var(--sand)
}
.ticket-on-cream::before, .ticket-on-cream::after {
  background: var(--cream)
}
.ticket-price {
  font-family: 'Rye', serif;
  font-size: 46px;
  line-height: 1;
  color: var(--red)
}
.ticket-cur {
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: .16em;
  /* same 2.44:1 as .ptable-age. The featured card on red overrides this
     via .u-x18 below, so only the light cards are affected here. */
  color: var(--orange-ink)
}
.rule-dash {
  border: none;
  border-top: 2px dashed rgba(140, 31, 12, .3);
  margin: 20px 0
}
/* ---------- cards ---------- */
.card {
  background: var(--paper);
  border: 3px solid var(--red);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 10px 0 rgba(140, 31, 12, .12);
}
.card .card-body {
  padding: 24px 26px 28px
}
.card .card-img {
  height: 210px;
  border-bottom: 3px solid var(--red)
}
.card .card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover
}
.card-cream {
  background: var(--cream)
}
.tag {
  display: inline-block;
  background: var(--teal);
  color: #0E2B29;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 6px 13px;
  border-radius: 999px
}
.tag-red {
  background: var(--red);
  color: var(--cream)
}
.tag-sand {
  background: var(--sand);
  color: var(--redink)
}
/* ---------- stat chips ---------- */
.chips {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--cream);
  border: 2.5px solid var(--orange);
  border-radius: 999px;
  padding: 9px 18px;
  font-weight: 700;
  font-size: 15px;
  color: var(--redink)
}
.chip b {
  font-family: 'Rye', serif;
  font-weight: 400;
  font-size: 19px;
  color: var(--red)
}
/* ================================================================
   HEADER: transparent over the hero, solid paper once scrolled
   Requires the JS at the bottom to toggle .is-stuck
   ================================================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}
.topbar {
  background: var(--red);
  color: var(--sand);
  position: relative;
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  height: 44px;
  transition: height .3s ease, opacity .3s ease;
}
/* topbar folds away on scroll so the sticky nav stays slim */
.site-header.is-stuck .topbar {
  height: 0;
  opacity: 0;
}
.topbar .tb-dots {
  position: absolute;
  left: 0;
  right: 0;
  height: 100%;
  background: radial-gradient(circle at center, rgba(243, 207, 131, .5) 1.8px, transparent 2.2px) repeat-x left 6px /26px 6px, radial-gradient(circle at center, rgba(243, 207, 131, .5) 1.8px, transparent 2.2px) repeat-x left bottom 6px /26px 6px;
}
.topbar span {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px
}
.nav {
  position: relative;
  background: transparent;
  border-bottom: 3px solid transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px 60px;
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, padding .3s ease;
}
.nav-logo img {
  height: 100px;
  width: auto;
  filter: drop-shadow(0 3px 12px rgba(58, 20, 8, .45));
  transition: height .3s ease, filter .3s ease;
}
.nav-links {
  display: flex;
  gap: 34px;
  font-weight: 700;
  font-size: 15.5px;
  color: #fff;
}
.nav-links a {
  padding-bottom: 3px;
  border-bottom: 2.5px solid transparent;
  text-shadow: 0 2px 8px rgba(58, 20, 8, .55);
  transition: color .3s ease, border-color .25s ease, text-shadow .3s ease;
}
.nav-links a.is-active {
  border-color: var(--orange)
}
.nav-links a:hover {
  border-color: var(--sand)
}
/* scrolled state */
.site-header.is-stuck .nav {
  background: var(--paper);
  border-bottom-color: var(--red);
  box-shadow: 0 6px 22px rgba(58, 33, 24, .16);
  padding: 8px 60px;
}
.site-header.is-stuck .nav-logo img {
  height: 68px;
  filter: none;
}
.site-header.is-stuck .nav-links {
  color: var(--redink);
}
.site-header.is-stuck .nav-links a {
  text-shadow: none;
}
.site-header.is-stuck .nav-links a:hover {
  border-color: var(--orange)
}
/* burger toggle */
.nav-burger {
  display: none;
  position: relative;
  width: 48px;                 /* 48px hit area, clear of the 44 minimum */
  height: 48px;
  flex: none;
  padding: 0;
  cursor: pointer;
  color: #fff;
  background: transparent;
  border: 2.5px solid transparent;
  border-radius: 14px;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--t-hover) var(--e-quart),
              border-color var(--t-hover) var(--e-quart),
              transform var(--t-micro) var(--e-quart);
}
.site-header.is-stuck .nav-burger {
  color: var(--redink);
}
/* ---------- hero: video background ---------- */
.hero--video {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--night) url('../img/line.webp') center/cover no-repeat;
  border-bottom: 6px solid var(--red);
}
.videoBanner {
  position: absolute;
  inset: 0
}
.videoBanner__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
  display: block;
}
/* light vignette, plus a top band so the transparent nav stays legible */
.videoBanner__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0.16) 12%, rgba(0, 0, 0, 0) 26%), radial-gradient(ellipse 62% 58% at 50% 48%, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.12) 55%, rgba(0, 0, 0, 0.05) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.08) 35%, rgba(0, 0, 0, 0.20) 100%);
}
/* ---------- marquee bulb frame: two interleaved sets that blink in alternation ----------
   ::after holds the odd bulbs and the frame line, ::before holds the even bulbs,
   offset half a bulb along each edge and half a cycle out of phase. */
.videoBanner::before, .videoBanner::after {
  content: '';
  position: absolute;
  inset: 10px;
  z-index: 2;
  pointer-events: none;
  border-radius: 14px;
  border: 2px solid transparent;
  animation: bulbBlink 1.4s ease-in-out infinite;
  will-change: opacity;
}
/* odd bulbs, on the beat */
.videoBanner::after {
  border-color: rgba(243, 207, 131, .30);
  background: radial-gradient(circle at center, rgba(255, 246, 222, .98) 0 1.6px, rgba(243, 207, 131, .92) 1.6px 2.7px, rgba(243, 207, 131, .30) 2.7px 3.6px, rgba(243, 207, 131, 0) 4.4px) repeat-x left top /26px 9px, radial-gradient(circle at center, rgba(255, 246, 222, .98) 0 1.6px, rgba(243, 207, 131, .92) 1.6px 2.7px, rgba(243, 207, 131, .30) 2.7px 3.6px, rgba(243, 207, 131, 0) 4.4px) repeat-x left bottom /26px 9px, radial-gradient(circle at center, rgba(255, 246, 222, .98) 0 1.6px, rgba(243, 207, 131, .92) 1.6px 2.7px, rgba(243, 207, 131, .30) 2.7px 3.6px, rgba(243, 207, 131, 0) 4.4px) repeat-y left top /9px 26px, radial-gradient(circle at center, rgba(255, 246, 222, .98) 0 1.6px, rgba(243, 207, 131, .92) 1.6px 2.7px, rgba(243, 207, 131, .30) 2.7px 3.6px, rgba(243, 207, 131, 0) 4.4px) repeat-y right top /9px 26px;
}
/* even bulbs, shifted 13px along the edge and half a cycle behind */
.videoBanner::before {
  animation-delay: -.7s;
  background: radial-gradient(circle at center, rgba(255, 246, 222, .98) 0 1.6px, rgba(243, 207, 131, .92) 1.6px 2.7px, rgba(243, 207, 131, .30) 2.7px 3.6px, rgba(243, 207, 131, 0) 4.4px) repeat-x left 13px top 0 /26px 9px, radial-gradient(circle at center, rgba(255, 246, 222, .98) 0 1.6px, rgba(243, 207, 131, .92) 1.6px 2.7px, rgba(243, 207, 131, .30) 2.7px 3.6px, rgba(243, 207, 131, 0) 4.4px) repeat-x left 13px bottom 0 /26px 9px, radial-gradient(circle at center, rgba(255, 246, 222, .98) 0 1.6px, rgba(243, 207, 131, .92) 1.6px 2.7px, rgba(243, 207, 131, .30) 2.7px 3.6px, rgba(243, 207, 131, 0) 4.4px) repeat-y left 0 top 13px /9px 26px, radial-gradient(circle at center, rgba(255, 246, 222, .98) 0 1.6px, rgba(243, 207, 131, .92) 1.6px 2.7px, rgba(243, 207, 131, .30) 2.7px 3.6px, rgba(243, 207, 131, 0) 4.4px) repeat-y right 0 top 13px /9px 26px;
}
/* lit for ~0.6s, a fast filament fade, then dim for ~0.6s */
@keyframes bulbBlink {
  0%, 42% {
    opacity: 1
  }
  50%, 92% {
    opacity: .2
  }
  100% {
    opacity: 1
  }
}
.hero--video .bunting {
  position: absolute;
  top: 150px;
  left: 0;
  width: 100%;
  z-index: 3
}
.hero--video .hero-inner {
  position: absolute;
  inset: 0;
  z-index: 4;
  padding: 0 0px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
}
/* ---------- rotating text slides: 4 slides x 5s = 20s cycle ---------- */
.hero-slides {
  position: relative;
  min-height: 3.5em;
  margin: 0 0 34px;
  display: block;
}
.hero-slide {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: 'Rye', serif;
  font-weight: 400;
  font-size: 54px;
  line-height: 0.98;
  letter-spacing: -0.5px;
  color: var(--cream);
  text-shadow: 0 4px 20px rgba(58, 20, 8, .50);
  opacity: 0;
  animation: heroSlide 20s cubic-bezier(.22, .61, .36, 1) infinite;
  will-change: opacity, transform;
}
.hero-slide:nth-child(1) {
  animation-delay: 0s
}
.hero-slide:nth-child(2) {
  animation-delay: 5s
}
.hero-slide:nth-child(3) {
  animation-delay: 10s
}
.hero-slide:nth-child(4) {
  animation-delay: 15s
}
/* 0.6s in, 3.8s hold, 0.6s out = 5s per slide, 4 slides = 20s cycle */
@keyframes heroSlide {
  0% {
    opacity: 0;
    transform: translateY(28px)
  }
  3% {
    opacity: 1;
    transform: translateY(0)
  }
  22% {
    opacity: 1;
    transform: translateY(0)
  }
  25% {
    opacity: 0;
    transform: translateY(-20px)
  }
  100% {
    opacity: 0;
    transform: translateY(28px)
  }
}
.hero-meta {
  display: flex;
  gap: 26px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--redink);
  flex-wrap: wrap
}
.hero-meta i {
  color: var(--orange);
  font-style: normal;
  margin-right: 7px
}
.hero--video .hero-meta {
  justify-content: center;
  color: var(--sand);
  position: relative;
  z-index: 4;
  text-shadow: 0 2px 10px rgba(58, 20, 8, .5);
}
.hero--video .hero-meta i {
  color: var(--orange)
}
.hero--video .hero-skyline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  z-index: 3;
  line-height: 0;
  margin: 0;
}
/* ---------- big red band ---------- */
.band-red {
  background: var(--red);
  color: var(--cream);
  position: relative;
  overflow: hidden;
  padding: 160px 0 96px;
  text-align: center;
}
.band-red .bunting {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%
}
.band-red::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 30px;
  z-index: 4;
  background: radial-gradient(circle at 50% 100%, var(--cream) 25px, transparent 26px) repeat-x left bottom /58px 30px;
}
.band-title {
  font-family: 'Rye', serif;
  font-size: 132px;
  line-height: .94;
  color: var(--cream);
  text-transform: uppercase;
  letter-spacing: 2px;
  position: relative;
  z-index: 2;
  text-shadow: 0 6px 0 rgba(0, 0, 0, .18);
}
.band-sub {
  position: relative;
  z-index: 2;
  font-family: 'Chicle', cursive;
  font-size: 27px;
  color: var(--sand);
  margin-top: 22px
}
/* ---------- zone nav strip ---------- */
.zone-nav {
  background: var(--cream);
  border-bottom: 3px solid var(--red);
  padding: 28px 0;
  position: relative;
  z-index: 5;
}
.zone-nav .wrap {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.zone-nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Chicle', cursive;
  font-size: 19px;
  line-height: 1;
  color: var(--redink);
  background: var(--paper);
  border: 2.5px solid var(--red);
  border-radius: 999px;
  padding: 12px 22px 13px;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
  box-shadow: 0 3px 0 rgba(140, 31, 12, .18);
}
.zone-nav a:hover {
  background: var(--red);
  color: var(--cream);
  box-shadow: 0 3px 0 var(--redink);
}
.zone-nav a svg {
  flex: none;
}
/* ---------- founders board ---------- */
.board {
  background: var(--night-2);
  border: 8px solid #6B4A2A;
  border-radius: 20px;
  padding: 56px 60px;
  color: var(--cream);
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 0 rgba(0, 0, 0, .18);
}
.board .sunburst {
  opacity: .5
}
.ph {
  display: inline-block;
  border: 2px dashed rgba(243, 207, 131, .5);
  border-radius: 12px;
  padding: 14px 20px;
  font-family: 'Chicle', cursive;
  font-size: 23px;
  line-height: 1.45;
  color: var(--sand)
}
.pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  position: relative;
  z-index: 2
}
.pillar-name {
  font-family: 'Chicle', cursive;
  font-size: 30px;
  color: var(--sand);
  margin: 12px 0 6px
}
.pillar-text {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(251, 235, 198, .78)
}
/* ---------- footer ---------- */
.footer {
  background: var(--night);
  color: var(--cream);
  position: relative;
  overflow: hidden;
  padding: 0 0 34px
}
.footer .bulbs {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2
}
.footer-inner {
  position: relative;
  z-index: 3;
  padding-top: 110px
}
.f-title {
  font-family: 'Rye', serif;
  font-size: 66px;
  line-height: 1.02;
  color: var(--sand)
}
.f-grid {
  display: grid;
  grid-template-columns: 1.3fr .7fr .7fr .9fr;
  gap: 46px;
  margin-top: 64px;
  padding-top: 44px;
  border-top: 2px dashed rgba(243, 207, 131, .28)
}
.f-head {
  font-family: 'Chicle', cursive;
  font-size: 20px;
  color: var(--orange-on-night);
  margin-bottom: 16px
}
.f-list {
  list-style: none;
  display: grid;
  gap: 10px;
  font-size: 15.5px;
  color: rgba(251, 235, 198, .82)
}
.f-note {
  font-size: 14px;
  color: rgba(251, 235, 198, .6);
  margin-top: 12px
}
.signup {
  display: flex;
  gap: 12px;
  margin-top: 22px
}
.signup .field {
  flex: 1;
  background: rgba(251, 235, 198, .1);
  border: 2.5px solid rgba(243, 207, 131, .45);
  border-radius: 999px;
  padding: 15px 24px;
  color: rgba(251, 235, 198, .6);
  font-size: 15.5px
}
.f-bottom {
  position: relative;
  z-index: 3;
  margin-top: 54px;
  padding-top: 24px;
  border-top: 2px dashed rgba(243, 207, 131, .28);
  display: flex;
  justify-content: space-between;
  font-size: 13.5px;
  color: rgba(251, 235, 198, .62)
}
.f-logo img {
  height: 96px;
  width: auto
}
/* ---------- responsive grid helpers ---------- */
.board-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 56px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.footer-intro {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 70px;
  align-items: center;
}
.artist-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 56px;
  align-items: center;
}
.artist-sub-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: center;
}
/* ---------- scroll to top ---------- */
.scroll-top {
  position: fixed;
  bottom: 100px;
  right: 28px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--red);
  color: var(--cream);
  border: 3px solid var(--redink);
  box-shadow: 0 4px 0 var(--redink);
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease, transform .15s ease;
}
.scroll-top.is-visible {
  opacity: 1;
  visibility: visible;
}
.scroll-top:hover {
  background: var(--redink);
}
.scroll-top:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 var(--redink);
}
/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .site-header, .topbar, .nav, .nav-logo img, .nav-links a {
    transition: none
  }
  .videoBanner__media {
    display: none
  }
  /* bulbs hold steady, every one lit */
  .videoBanner::before, .videoBanner::after {
    animation: none;
    opacity: 1
  }
  .hero-slide {
    animation: none
  }
  .hero-slide:nth-child(1) {
    opacity: 1;
    transform: none
  }
  .hero-slide:nth-child(n+2) {
    display: none
  }
  /* --- motion system: neutralised, content stays fully visible --- */
  .js-anim .reveal, .js-anim .reveal.is-in, .js-anim .hero-inner .wrap, .js-anim .nav-logo, .js-anim .nav-links a, .js-anim.is-loaded .nav-logo, .js-anim.is-loaded .nav-links a, .js-anim.is-loaded .hero-inner .wrap {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
  }
  .btn, .card, .zone-card, .tier, .ptable-card, .class-card, .ticket, .frame, .frame img, .zone-card-img img, .ig-cell img, .plaque, .zone-nav a, .eyebrow svg, .pillars svg, .flist .dot, .scroll-top, .wa-float, .nav-links, .nav-links a::after, .signup .field {
    transition: none !important;
  }
  .btn:hover, .card:hover, .zone-card:hover, .tier:hover, .ptable-card:hover, .class-card:hover, .frame:hover, .plaque-hang:hover .plaque, .zone-nav a:hover, .scroll-top:hover, .wa-float:hover, .btn:active, .scroll-top:active, .wa-float:active {
    transform: none !important;
  }
  .frame:hover img, .zone-card:hover .zone-card-img img, .ig-cell:hover img, .eyebrow:hover svg, .pillars > div:hover svg, .flist li:hover .dot {
    transform: none !important;
  }
  .nav-links a::after {
    transition: none !important;
  }
}
/* ---------- tablet ---------- */
@media (max-width:1100px) {
  .nav {
    padding: 14px 32px
  }
  .site-header.is-stuck .nav {
    padding: 8px 32px
  }
  .nav-logo img {
    height: 76px
  }
  .site-header.is-stuck .nav-logo img {
    height: 58px
  }
  .nav-links {
    gap: 22px;
    font-size: 14.5px
  }
  .topbar {
    gap: 20px;
    font-size: 11.5px;
    letter-spacing: .14em
  }
  .grid-2, .grid-2-wide {
    grid-template-columns: 1fr;
    gap: 40px
  }
  .grid-3 {
    grid-template-columns: 1fr;
    gap: 24px
  }
  .pillars {
    grid-template-columns: repeat(2, 1fr)
  }
  .f-grid {
    grid-template-columns: 1fr 1fr
  }
  .zone-nav a {
    font-size: 17px;
    padding: 10px 18px 11px;
  }
  .band-title {
    font-size: 96px;
  }
  .board-grid {
    grid-template-columns: 1fr;
    gap: 36px;
    text-align: center;
  }
  .footer-intro {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .artist-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .board {
    padding: 44px 40px;
  }
}
/* ---------- mobile ---------- */
@media (max-width:900px) {
  :root {
    --header-stuck: 80px
  }
  .nav {
    padding: 12px 20px
  }
  .site-header.is-stuck .nav {
    padding: 8px 20px
  }
  .nav-logo img {
    height: 60px
  }
  .site-header.is-stuck .nav-logo img {
    height: 50px
  }
  .nav-burger {
    display: grid;
    place-items: center;
  }
  /* mobile panel: absolutely positioned, so animating it costs no layout */
  .nav-links {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--paper);
    padding: 12px 24px;
    gap: 0;
    border-bottom: 3px solid var(--red);
    box-shadow: 0 8px 24px rgba(58, 33, 24, .16);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, -10px, 0);
    transition: opacity .34s var(--e-quart), transform .34s var(--e-expo), visibility .34s linear;
  }
  .nav.nav-open .nav-links {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }
  /* each row eases in behind the panel */
  .nav-links a {
    opacity: 0;
    transform: translate3d(0, -6px, 0);
    transition: opacity .3s var(--e-quart), transform .3s var(--e-expo);
  }
  .nav.nav-open .nav-links a {
    opacity: 1;
    transform: none;
    transition-delay: calc(.06s + var(--i, 0) * 42ms);
  }
  /* The desktop hero entrance animates nav links in on load. Inside the
   mobile panel that is wrong: rows must reveal when the panel opens,
   not on page load. Cancel the animation and hand control back to the
   transition above. Specificity matches the hero rule and this block
   comes later, so it wins. */
  html.js-anim.is-loaded .nav-links a {
    animation: none;
    opacity: 0;
    transform: translate3d(0, -6px, 0);
  }
  html.js-anim.is-loaded .nav.nav-open .nav-links a {
    opacity: 1;
    transform: none;
    transition-delay: calc(.06s + var(--i, 0) * 42ms);
  }
  .nav-links a::after {
    display: none;
  }
  .nav-links a {
    padding: 14px 0;
    border-bottom: 1px solid rgba(140, 31, 12, .12);
    text-shadow: none;
    color: var(--redink);
  }
  .nav-links a:last-child {
    border-bottom: none;
  }
  .topbar {
    display: none
  }
  .hero--video {
    height: 100svh;
    min-height: 500px
  }
  .hero--video .hero-inner {
    position: absolute;
    padding: 0 24px 40px
  }
  .hero--video .bunting {
    top: 90px
  }
  .hero-slides {
    min-height: 1.5em;
    margin-bottom: 26px
  }
  .hero-slide {
    font-size: 38px
  }
  .videoBanner__scrim {
    background: linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .28) 45%, rgba(0, 0, 0, .40) 100%);
  }
  .videoBanner::before, .videoBanner::after {
    inset: 10px
  }
  .hero--video .hero-meta {
    gap: 12px;
    font-size: 13px
  }
  .h2 {
    font-size: 36px
  }
  .band-title {
    font-size: 52px
  }
  .f-title {
    font-size: 42px
  }
  .sec {
    padding: 64px 0
  }
  .board {
    padding: 36px 26px
  }
  .zone-nav a {
    font-size: 15px;
    padding: 9px 14px 10px;
    gap: 6px;
  }
  .zone-nav .wrap {
    gap: 10px;
  }
  .zone-nav a svg {
    width: 14px;
    height: 14px;
  }
  .pillars {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
  .f-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .f-bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
  .signup {
    flex-direction: column;
  }
  .footer-intro {
    gap: 36px;
  }
  .board-grid {
    text-align: center;
  }
  .artist-sub-grid {
    grid-template-columns: 1fr;
  }
  .bgblur {
    height: auto !important;
    min-height: 0;
  }
  .band-red {
    padding: 120px 0 72px;
  }
  .band-sub {
    font-size: 22px;
  }
  .f-title {
    font-size: 36px;
  }
  .f-logo img {
    height: 72px;
  }
  .scroll-top {
    bottom: 20px;
    right: 20px;
    width: 46px;
    height: 46px;
  }
}
.tent {
  width: 100%;
  display: flex;
  text-align: center;
  justify-content: center;
}
.tent img {
  width: 250px;
}
.star {
  position: relative;
  overflow: hidden;
}
.star {
  position: relative;
}
.star::before {
  content: "";
  position: absolute;
  top: 20%;
  left: 5%;
  width: 80%; /* 20% of .star's width */
  height: 80%; /* 20% of .star's height */
  background: url("../img/star-left.png") no-repeat center left;
  background-size: contain;
  filter: blur(1px);
}
.star::after {
  content: "";
  position: absolute;
  top: 0%;
  right: 5%;
  width: 80%; /* 20% of .star's width */
  height: 80%; /* 20% of .star's height */
  background: url("../img/star-right.png") no-repeat center right;
  background-size: contain;
  filter: blur(1px);
}
.aboutLogo {
  width:
}
.aboutLogo {
  width: 100%;
  display: flex;
  text-align: center;
  justify-content: center;
}
.aboutLogo img {
  width: 250px;
}
.bgblur {
  width: 100%;
  padding: 0 !important;
  overflow: hidden;
}
.bgblur-img {
  width: 100%;
  max-height: 70vh;
  overflow: hidden;
}
.bgblur-img img {
  width: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
}
.bgblur-content {
  padding: 60px 0 80px;
}
.pillars-light .pillar-name {
  color: var(--redink);
}
.pillars-light .pillar-text {
  color: var(--ink-soft);
}
@media (max-width:769px) {
  .bgblur-img img {
    aspect-ratio: 1/1;
  }
}
@media (max-width:600px) {
  .hero--video {
    height: 40vh;
    min-height: auto;
  }
  .hero-slides {
    margin-bottom: 0;
  }
  .hero-slide {
    font-size: 30px;
  }
}
/* ================= ROUND 2: HOME PAGE COMPONENTS ================= */
/* ---------- zone grid cards ---------- */
.zone-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}

.zone-cards.threecard{  grid-template-columns: repeat(3, 1fr);}

.zone-card {
  background: var(--cream);
  border: 3px solid var(--redink);
  border-radius: 18px;
  box-shadow: 0 6px 0 var(--redink);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.zone-card-img {
  height: 190px;
  overflow: hidden;
  border-bottom: 3px solid var(--redink);
}
.zone-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.zone-card-body {
  padding: 22px 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.zone-card-age {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--teal);
}
.zone-card-name {
  font-family: 'Rye', serif;
  font-size: 21px;
  line-height: 1.14;
  color: var(--redink);
}
.zone-card-line {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}
/* ---------- pricing tables ---------- */
.ptable-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px;
}
.ptable-card {
  background: var(--cream);
  border: 3px solid var(--redink);
  border-radius: 20px;
  box-shadow: 0 6px 0 var(--redink);
  padding: 30px 28px 32px;
}
.ptable-head {
  font-family: 'Rye', serif;
  font-size: 24px;
  color: var(--redink);
  line-height: 1.15;
}
.ptable-age {
  font-family: Chicle, cursive;
  font-size: 19px;
  /* was --orange: 2.44:1 on cream. --orange-ink is 4.55:1 there, 5.00 on paper */
  color: var(--orange-ink);
  margin-top: 4px;
}
.ptable {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}
.ptable th {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: right;
  padding: 0 0 10px;
}
.ptable th:first-child {
  text-align: left;
}
.ptable td {
  padding: 12px 0;
  border-top: 2px dashed rgba(140, 31, 12, .24);
  font-size: 15.5px;
  text-align: right;
  color: var(--ink);
  font-weight: 700;
}
.ptable td:first-child {
  text-align: left;
  font-weight: 800;
  color: var(--redink);
}
.ptable .aed {
  font-size: 11px;
  font-weight: 800;
  color: var(--ink-soft);
  margin-left: 3px;
}
.pnote {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 16px;
  font-style: italic;
}
/* ---------- birthday tiers ---------- */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.tier {
  background: var(--cream);
  border: 3px solid var(--redink);
  border-radius: 20px;
  box-shadow: 0 6px 0 var(--redink);
  padding: 32px 28px 34px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  align-items: self-start;
}
.tier-featured {
  background: var(--red);
}
.tier-name {
  font-family: 'Rye', serif;
  font-size: 26px;
  color: var(--redink);
  margin-top: 14px;
  line-height: 1.12;
}
.tier-featured .tier-name {
  color: var(--sand);
}
.tier-prices {
  margin-top: 18px;
  display: grid;
  gap: 10px;
  position: relative;
  z-index: 2;
}
.tier-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink-soft);
}
.tier-featured .tier-row {
  color: var(--cream);
}
.tier-row b {
  font-family: 'Rye', serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--redink);
}
.tier-featured .tier-row b {
  color: var(--cream);
}
.tier-per {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--teal);
  margin-top: 16px;
}
.tier-featured .tier-per {
  color: var(--sand);
}
.tier-desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-top: 10px;
}
.tier-featured .tier-desc {
  color: var(--cream);
}
/* ---------- classes & workshops teaser ---------- */
.class-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.class-card {
  background: var(--paper);
  border: 3px dashed rgba(140, 31, 12, .35);
  border-radius: 18px;
  padding: 26px 24px 28px;
}
.is-placeholder {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--teal);
  border-radius: 999px;
  padding: 5px 11px 6px;
}
/* ---------- café gallery ---------- */
.cafe-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
/* ---------- instagram feed (filled by js/main.js from instagram.php) ---------- */
.ig-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.ig-cell {
  display: block;
  position: relative;
  aspect-ratio: 1;
  border: 3px solid var(--redink);
  border-radius: 14px;
  overflow: hidden;
  background: var(--sand);
}
.ig-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* reels and videos show their cover still, marked with a small play badge */
.ig-cell[data-type="video"]::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent #fff;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5));
  pointer-events: none;
}
/* ---------- floating action buttons ---------- */
.wa-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #25D366;
  border: 3px solid #0f7a3d;
  box-shadow: 0 4px 0 #0f7a3d;
  display: grid;
  place-items: center;
  z-index: 90;
  transition: transform .15s ease;
}
.wa-float:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 #0f7a3d;
}
.wa-float svg {
  width: 28px;
  height: 28px;
  fill: #fff;
}
.sticky-cta {
  display: none;
}
/* ================================================================
   MOTION SYSTEM
   Tuned to the carnival brand: warm, physical, a little bit of
   settle. Signature is the hard offset shadow, so interactive
   motion behaves like a pressed tin sign rather than a flat card.
   Everything animates transform/opacity only. Gated behind
   html.js-anim so a JS failure leaves content fully visible.
   ================================================================ */ :root {
  /* premium easing curves */
  --e-expo: cubic-bezier(.16, 1, .3, 1);
  --e-quart: cubic-bezier(.25, 1, .5, 1);
  --e-cubic: cubic-bezier(.33, 1, .68, 1);
  /* a touch of overshoot, for interactive elements only */
  --e-settle: cubic-bezier(.34, 1.36, .64, 1);
  --t-micro: .18s;
  --t-hover: .26s;
  --t-reveal: .78s;
}
/* ---------- scroll reveal ----------
   Driven by @keyframes, not transition, on purpose. A transition here
   would occupy the transition property on cards and buttons and beat
   their hover rules on specificity, making hovers sluggish and killing
   shadow transitions. animation-fill-mode: backwards holds the start
   frame through the stagger delay, and once the animation ends the
   plain .is-in declarations take over, leaving transition free for
   interaction. */
@keyframes revealUp {
  from {
    opacity: 0;
    transform: translate3d(0, 26px, 0)
  }
  to {
    opacity: 1;
    transform: none
  }
}
@keyframes revealScale {
  from {
    opacity: 0;
    transform: translate3d(0, 20px, 0) scale(.972)
  }
  to {
    opacity: 1;
    transform: none
  }
}
@keyframes revealLeft {
  from {
    opacity: 0;
    transform: translate3d(-28px, 0, 0)
  }
  to {
    opacity: 1;
    transform: none
  }
}
@keyframes revealRight {
  from {
    opacity: 0;
    transform: translate3d(28px, 0, 0)
  }
  to {
    opacity: 1;
    transform: none
  }
}
.js-anim .reveal {
  opacity: 0;
  will-change: transform, opacity;
}
.js-anim .reveal.is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
  animation: revealUp var(--t-reveal) var(--e-expo) backwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}
.js-anim .reveal-scale.is-in {
  animation-name: revealScale;
}
.js-anim .reveal-left.is-in {
  animation-name: revealLeft;
}
.js-anim .reveal-right.is-in {
  animation-name: revealRight;
}
/* ---------- hero entrance ---------- */
@keyframes heroDrop {
  from {
    opacity: 0;
    transform: translate3d(0, -12px, 0)
  }
  to {
    opacity: 1;
    transform: none
  }
}
@keyframes heroRise {
  from {
    opacity: 0;
    transform: translate3d(0, 30px, 0)
  }
  to {
    opacity: 1;
    transform: none
  }
}
.js-anim .hero-inner .wrap, .js-anim .nav-logo, .js-anim .nav-links a {
  opacity: 0;
}
.js-anim.is-loaded .nav-logo, .js-anim.is-loaded .nav-links a, .js-anim.is-loaded .hero-inner .wrap {
  opacity: 1;
  animation: heroDrop .9s var(--e-expo) backwards;
}
.js-anim.is-loaded .nav-logo {
  animation-delay: .1s;
}
.js-anim.is-loaded .nav-links a {
  animation-delay: calc(.2s + var(--i, 0) * 55ms);
}
.js-anim.is-loaded .hero-inner .wrap {
  animation: heroRise 1.1s var(--e-expo) .34s backwards;
}
/* ---------- buttons: soft lift, physical press ---------- */
.btn {
  transition: transform var(--t-hover) var(--e-settle), box-shadow var(--t-hover) var(--e-quart), background-color var(--t-hover) var(--e-quart), color var(--t-hover) var(--e-quart);
  will-change: transform;
}
.btn:hover {
  transform: translate3d(0, -3px, 0) scale(1.025);
}
.btn:active {
  transform: translate3d(0, 2px, 0) scale(.995);
  transition-duration: var(--t-micro);
}
.btn:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
}
/* deepen the signature hard shadow on hover, per variant */
.btn-sun:hover {
  box-shadow: 0 8px 0 #A85312;
}
.btn-sun:active {
  box-shadow: 0 2px 0 #A85312;
}
/* ---------- image frames ----------
   Card elevation now lives in one place, in the CARD SYSTEM block
   below. The -5px / 0 11px 0 rules that used to sit here were
   superseded by it and have been removed rather than left dead. */
.frame {
  transition: transform var(--t-hover) var(--e-quart), box-shadow var(--t-hover) var(--e-quart);
}
.frame:hover {
  transform: translate3d(0, -4px, 0);
  box-shadow: 0 0 0 3px var(--cream) inset, 0 22px 40px rgba(58, 33, 24, .20);
}
/* ---------- images: minimal hover zoom ---------- */
.frame img, .zone-card-img img, .ig-cell img {
  transition: transform .62s var(--e-quart);
  will-change: transform;
}
.frame:hover img, .zone-card:hover .zone-card-img img, .ig-cell:hover img {
  transform: scale(1.045);
}
/* ---------- plaques and pills ---------- */
.plaque {
  transition: transform var(--t-hover) var(--e-settle), box-shadow var(--t-hover) var(--e-quart);
}
.plaque-hang:hover .plaque {
  transform: translate3d(0, -2px, 0) rotate(-.6deg);
  box-shadow: 0 9px 0 rgba(140, 31, 12, .35);
}
.zone-nav a:hover {
  transform: translate3d(0, -2px, 0);
  box-shadow: 0 6px 0 rgba(140, 31, 12, .22);
}
.zone-nav a {
  transition: background var(--t-hover) var(--e-quart), color var(--t-hover) var(--e-quart), box-shadow var(--t-hover) var(--e-quart), transform var(--t-hover) var(--e-settle);
}
/* ---------- icons: tiny, never exaggerated ---------- */
.eyebrow svg, .flist .dot {
  transition: transform .4s var(--e-settle);
}
/* 72deg suits a five-pointed star. Pillar icons are books, tents and
   sprouts now, so they get their own restrained motion further down. */
.eyebrow:hover svg {
  transform: rotate(72deg) scale(1.1);
}
.flist li:hover .dot {
  transform: scale(1.18);
}
/* ---------- nav: active link indicator ---------- */
.nav-links a {
  position: relative;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2.5px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .38s var(--e-expo);
}
.nav-links a:hover::after, .nav-links a.is-active::after {
  transform: scaleX(1);
}
/* ---------- signup field ---------- */
.signup .field {
  transition: border-color var(--t-hover) var(--e-quart), background var(--t-hover) var(--e-quart), transform var(--t-hover) var(--e-quart);
}
.signup:hover .field, .signup .field:focus-within {
  border-color: rgba(243, 207, 131, .9);
  background: rgba(251, 235, 198, .16);
}
/* ---------- floating buttons ---------- */
.scroll-top, .wa-float {
  transition: opacity .3s var(--e-quart), visibility .3s var(--e-quart), transform var(--t-hover) var(--e-settle), background-color var(--t-hover) var(--e-quart);
}
.scroll-top:hover, .wa-float:hover {
  transform: translate3d(0, -3px, 0) scale(1.06);
}
.scroll-top:active, .wa-float:active {
  transform: translate3d(0, 2px, 0) scale(.98);
}
/* ---------- parallax target ---------- */
.js-anim .bgblur-img img {
  will-change: transform;
}
/* ================================================================
   NAV DROPDOWNS
   Two levels where the content justifies it. Hover on desktop,
   click/tap everywhere, keyboard via :focus-within plus Escape.
   ================================================================ */
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
}
.nav-caret {
  width: 11px;
  height: 11px;
  flex: none;
  margin-left: 6px;
  transition: transform .3s var(--e-expo);
}
.nav-item.is-open > .nav-top .nav-caret, .nav-item:hover > .nav-top .nav-caret {
  transform: rotate(180deg);
}
.nav-sub {
  position: absolute;
  top: 100%;
  left: 50%;
  min-width: 254px;
  background: var(--paper);
  border: 3px solid var(--red);
  border-radius: var(--r-md);
  box-shadow: 0 16px 36px rgba(58, 33, 24, .22);
  padding: 9px;
  display: grid;
  gap: 1px;
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(-50%, -8px, 0);
  transition: opacity .26s var(--e-quart), transform .32s var(--e-expo), visibility .32s linear;
}
/* bridges the gap so the pointer can travel from link to panel */
.nav-sub::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}
.nav-item:hover > .nav-sub, .nav-item:focus-within > .nav-sub, .nav-item.is-open > .nav-sub {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(-50%, 0, 0);
}
.nav-sub a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--redink);
  text-shadow: none;
  padding: 11px 13px;
  border: none;
  border-radius: 10px;
  transition: background var(--t-hover) var(--e-quart), color var(--t-hover) var(--e-quart), transform var(--t-hover) var(--e-expo);
}
.nav-sub a:hover, .nav-sub a:focus-visible {
  background: var(--cream);
  color: var(--red);
  transform: translate3d(3px, 0, 0);
}
.nav-sub a::after {
  display: none;
}
.nav-sub .nav-sub-label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal);
  padding: 10px 13px 5px;
}
/* third level, flies out to the side */
.nav-sub .nav-item {
  display: block;
}
.nav-sub-2 {
  position: absolute;
  top: -12px;
  left: calc(100% + 6px);
  min-width: 190px;
  background: var(--paper);
  border: 3px solid var(--red);
  border-radius: var(--r-md);
  box-shadow: 0 16px 36px rgba(58, 33, 24, .22);
  padding: 9px;
  display: grid;
  gap: 1px;
  z-index: 61;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(-8px, 0, 0);
  transition: opacity .24s var(--e-quart), transform .3s var(--e-expo), visibility .3s linear;
}
.nav-sub .nav-item:hover > .nav-sub-2, .nav-sub .nav-item:focus-within > .nav-sub-2, .nav-sub .nav-item.is-open > .nav-sub-2 {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
}
.nav-sub-2::before {
  content: "";
  position: absolute;
  top: 0;
  left: -10px;
  width: 10px;
  bottom: 0;
}
.sub-caret {
  width: 10px;
  height: 10px;
  flex: none;
  opacity: .55;
  transition: transform var(--t-hover) var(--e-expo);
}
.nav-sub .nav-item:hover .sub-caret {
  transform: translate3d(3px, 0, 0);
}
/* ================================================================
   ZONE CARD CTA
   ================================================================ */
.zone-cta {
  margin-top: auto;
  padding-top: 16px;
}
.btn-discover {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--redink);
  background: transparent;
  border: 2.5px solid var(--teal);
  border-radius: 999px;
  padding: 10px 17px 11px;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(107, 161, 156, .55);
  transition: background var(--t-hover) var(--e-quart), color var(--t-hover) var(--e-quart), transform var(--t-hover) var(--e-settle), box-shadow var(--t-hover) var(--e-quart);
}
.btn-discover svg {
  width: 14px;
  height: 14px;
  flex: none;
  transition: transform .3s var(--e-expo);
}
.btn-discover:hover {
  background: var(--teal);
  color: var(--paper);
  transform: translate3d(0, -3px, 0);
  box-shadow: 0 6px 0 #4D7D78;
}
.btn-discover:hover svg {
  transform: translate3d(4px, 0, 0);
}
.btn-discover:active {
  transform: translate3d(0, 2px, 0);
  box-shadow: 0 1px 0 #4D7D78;
}
.btn-discover:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}
/* ================================================================
   BIRTHDAY SLIDER
   ================================================================ */
.bday-slider {
  position: relative;
}
.bday-viewport {
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
}
.bday-viewport.is-dragging {
  cursor: grabbing;
}
.bday-track {
  display: flex;
  height: 100%;
  will-change: transform;
  transition: transform .72s var(--e-expo);
}
.bday-viewport.is-dragging .bday-track {
  transition: none;
}
.bday-slide {
  position: relative;
  min-width: 100%;
  height: 100%;
  flex: none;
}
.bday-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
/* the generic .frame hover would zoom and lift mid-slide */
.bday-viewport:hover {
  transform: none;
}
.bday-viewport:hover img {
  transform: none;
}
.bday-arrow {
  position: absolute;
  top: 50%;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--paper);
  color: var(--redink);
  border: 3px solid var(--redink);
  box-shadow: 0 4px 0 var(--redink);
  cursor: pointer;
  z-index: 4;
  transition: transform var(--t-hover) var(--e-settle), background var(--t-hover) var(--e-quart), color var(--t-hover) var(--e-quart), opacity var(--t-hover) linear;
}
.bday-arrow svg {
  width: 18px;
  height: 18px;
}
.bday-prev {
  left: 16px;
}
.bday-next {
  right: 16px;
}
.bday-arrow:hover {
  background: var(--red);
  color: var(--cream);
  transform: scale(1.08);
}
.bday-arrow:active {
  transform: translate3d(0, 3px, 0) scale(1);
  box-shadow: 0 1px 0 var(--redink);
}
.bday-arrow:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}
.bday-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
}
.bday-dot {
  width: 11px;
  height: 11px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  border: 2.5px solid var(--redink);
  cursor: pointer;
  transition: transform var(--t-hover) var(--e-settle), background var(--t-hover) var(--e-quart), width var(--t-hover) var(--e-quart);
}
.bday-dot:hover {
  transform: scale(1.2);
}
.bday-dot[aria-current="true"] {
  background: var(--red);
  border-color: var(--redink);
  transform: scale(1.16);
}
.bday-dot:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}
/* ================================================================
   PILLARS, REDESIGNED
   Same grid, now real cards with a two-tone icon per pillar and a
   per-position accent drawn from the brand palette.
   ================================================================ */
.pillar {
  --accent: #E57D26;
  --accent-soft: rgba(229, 125, 38, .14);
  --accent-line: rgba(229, 125, 38, .42);
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  border: 3px solid var(--redink);
  border-radius: 20px;
  box-shadow: 0 6px 0 var(--redink);
  padding: 26px 24px 28px;
  overflow: hidden;
  transition: transform var(--t-hover) var(--e-quart), box-shadow var(--t-hover) var(--e-quart);
}
/* a soft accent wash that grows on hover, purely decorative */
.pillar::before {
  content: "";
  position: absolute;
  top: -46px;
  right: -46px;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .1;
  transform: scale(.7);
  transition: transform .5s var(--e-expo), opacity .4s var(--e-quart);
  pointer-events: none;
}
.pillar:hover {
  transform: translate3d(0, -6px, 0);
  box-shadow: 0 12px 0 var(--redink);
}
.pillar:hover::before {
  transform: scale(1);
  opacity: .17;
}
.pillar-icon {
  position: relative;
  width: 60px;
  height: 60px;
  flex: none;
  border-radius: 17px;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: var(--accent-soft);
  border: 2.5px solid var(--accent-line);
  transition: transform .46s var(--e-settle), background .34s var(--e-quart), border-color .34s var(--e-quart);
}
.pillar:hover .pillar-icon {
  transform: rotate(-5deg) scale(1.07);
  background: var(--accent-line);
  border-color: var(--accent);
}
.pillar-icon svg {
  width: 32px;
  height: 32px;
  display: block;
}
.pillar-icon .ic-2 {
  transition: opacity .34s var(--e-quart), transform .46s var(--e-settle);
  transform-origin: center;
}
.pillar:hover .pillar-icon .ic-2 {
  opacity: .68;
  transform: scale(1.06);
}
.pillars .pillar .pillar-name {
  font-family: 'Chicle', cursive;
  font-size: 25px;
  line-height: 1.14;
  color: var(--redink);
  margin: 20px 0 0;
}
.pillars .pillar .pillar-text {
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--ink-soft);
  margin-top: 9px;
}
/* accent per position, brand palette only */
.pillars .pillar:nth-child(1) {
  --accent: #E57D26;
  --accent-soft: rgba(229, 125, 38, .14);
  --accent-line: rgba(229, 125, 38, .42);
}
.pillars .pillar:nth-child(2) {
  --accent: #6BA19C;
  --accent-soft: rgba(107, 161, 156, .16);
  --accent-line: rgba(107, 161, 156, .45);
}
.pillars .pillar:nth-child(3) {
  --accent: #B92D15;
  --accent-soft: rgba(185, 45, 21, .12);
  --accent-line: rgba(185, 45, 21, .38);
}
.pillars .pillar:nth-child(4) {
  --accent: #17403D;
  --accent-soft: rgba(23, 64, 61, .11);
  --accent-line: rgba(23, 64, 61, .34);
}
/* dark variant, used on the founders board */
.pillars:not(.pillars-light) .pillar {
  background: var(--night);
  border-color: rgba(243, 207, 131, .34);
  box-shadow: 0 6px 0 rgba(14, 43, 41, .55);
}
.pillars:not(.pillars-light) .pillar:hover {
  border-color: rgba(243, 207, 131, .6);
  box-shadow: 0 12px 0 rgba(14, 43, 41, .55);
}
.pillars:not(.pillars-light) .pillar .pillar-name {
  color: var(--sand);
}
.pillars:not(.pillars-light) .pillar .pillar-text {
  color: rgba(251, 235, 198, .78);
}
/* tints need more presence on night, and red/deep-teal do not read at
   all there, so positions 3 and 4 shift to orange and sand */

.pillars:not(.pillars-light) .pillar:nth-child(1) {
  --accent-soft: rgba(229, 125, 38, .2);
  --accent-line: rgba(229, 125, 38, .5);
	
}
.pillars:not(.pillars-light) .pillar:nth-child(2) {
  --accent-soft: rgba(107, 161, 156, .24);
  --accent-line: rgba(107, 161, 156, .56);
}
.pillars:not(.pillars-light) .pillar:nth-child(3) {
  --accent: #E57D26;
  --accent-soft: rgba(229, 125, 38, .2);
  --accent-line: rgba(229, 125, 38, .5);
}
.pillars:not(.pillars-light) .pillar:nth-child(4) {
  --accent: #F3CF83;
  --accent-soft: rgba(243, 207, 131, .18);
  --accent-line: rgba(243, 207, 131, .48);
}
@media (max-width:1100px) {
  .zone-cards {
    grid-template-columns: 1fr 1fr;
  }
  .ptable-grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .tier-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .class-grid {
    grid-template-columns: 1fr;
  }
  .ig-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width:900px) {
  .zone-cards {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .cafe-gallery {
    grid-template-columns: 1fr 1fr;
  }
  .wa-float {
    bottom: 96px;
    right: 20px;
    width: 46px;
    height: 46px;
  }
  .wa-float svg {
    width: 24px;
    height: 24px;
  }
  .scroll-top {
    bottom: 150px;
  }
  .sticky-cta {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 95;
    background: var(--paper);
    border-top: 3px solid var(--red);
    padding: 10px 16px;
    box-shadow: 0 -6px 20px rgba(58, 33, 24, .18);
  }
  .sticky-cta .btn {
    display: block;
    width: 100%;
    text-align: center;
  }
  body {
    padding-bottom: 76px;
  }
}
/* ================================================================
   DESIGN TOKENS
   The audit found 10 border radii, 12 shadows and 24 font sizes in
   use with no system behind them. These tokens collapse that into
   scales. Values were chosen to match what was already on the page,
   so the refinement is in the consistency, not in a new look.
   ================================================================ */ :root {
  /* radius scale */
  --r-xs: 10px;
  --r-sm: 14px;
  --r-card: 20px;
  --r-pill: 999px;
  /* hard offset shadow, the brand signature: rest / raised / pressed */
  --sh-press: 0 3px 0;
  --sh-rest: 0 6px 0;
  --sh-lift: 0 12px 0;
  /* soft ambient shadow, two steps only */
  --sh-soft: 0 8px 24px rgba(58, 33, 24, .14);
  --sh-soft-lg: 0 16px 36px rgba(58, 33, 24, .20);
  /* accessible text shades of the brand accents.
       --teal at #6BA19C measures 2.47:1 on cream and cannot carry
       small text. --orange measures 2.68:1. These darker shades of
       the same hues clear WCAG AA; #A85312 already existed in the
       palette as the btn-sun border. */
  --teal-ink: #3C6862; /* 5.32:1 on cream, 5.84:1 on paper */
  --orange-ink: #A85312; /* 4.55:1 on cream, 5.00:1 on paper */
}
/* ---------- contrast fixes, measured not guessed ---------- */
.zone-card-age, .tier-per, .nav-sub .nav-sub-label {
  color: var(--teal-ink);
}
.eyebrow {
  color: var(--orange-ink);
}
.is-placeholder {
  background: var(--teal-ink);
}
/* sand on red measured 4.08:1, cream on red measures 5.16:1 */
.tier-featured .tier-per {
  color: var(--cream);
}
/* the eyebrow on night backgrounds already had enough contrast and
   must keep its lighter tone, so restore it after the fix above */
.eyebrow.on-dark {
  color: var(--sand);
}
/* ---------- radius, normalised to the scale ---------- */
.zone-card, .ptable-card, .tier, .pillar, .class-card, .ticket {
  border-radius: var(--r-card);
}
.pillar-icon {
  border-radius: var(--r-md);
}
.nav-burger {
  border-radius: var(--r-xs);
}
.ig-cell {
  border-radius: var(--r-sm);
}
.nav-sub a {
  border-radius: var(--r-xs);
}
/* ---------- one shared button size, replacing 10 inline copies ---------- */
.btn-sm {
  padding: 13px 26px;
  font-size: 15px;
}
/* ---------- one shared section-header rhythm ---------- */
.sec-head {
  margin-bottom: 44px;
}
/* ---------- visible focus for every interactive element ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}
.nav-links a:focus-visible, .zone-nav a:focus-visible {
  outline-offset: 5px;
}
/* ---------- newsletter form ---------- */
.signup {
  align-items: stretch;
}
.signup-field {
  position: relative;
  flex: 1;
  min-width: 0;
}
/* the label exists for assistive tech; the placeholder carries the
   visual, so the footer layout is unchanged */
.signup-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.signup input {
  width: 100%;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 15.5px;
  color: var(--paper);
  background: rgba(251, 235, 198, .1);
  border: 2.5px solid rgba(243, 207, 131, .45);
  border-radius: var(--r-pill);
  padding: 15px 24px;
  transition: border-color var(--t-hover) var(--e-quart), background var(--t-hover) var(--e-quart), box-shadow var(--t-hover) var(--e-quart);
}
.signup input::placeholder {
  color: rgba(251, 235, 198, .62);
}
.signup input:hover {
  border-color: rgba(243, 207, 131, .7);
}
.signup input:focus {
  outline: none;
  border-color: var(--sand);
  background: rgba(251, 235, 198, .16);
  box-shadow: 0 0 0 4px rgba(243, 207, 131, .22);
}
/* validation only after a real attempt, never while still typing */
.signup input:not(:placeholder-shown):invalid {
  border-color: #E8683F;
}
/* out of flow, so revealing it cannot shift the footer */
.signup-error {
  position: absolute;
  top: 100%;
  left: 24px;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #F0A98C;
  opacity: 0;
  transform: translate3d(0, -4px, 0);
  pointer-events: none;
  transition: opacity var(--t-hover) var(--e-quart), transform var(--t-hover) var(--e-expo);
}
.signup input:not(:placeholder-shown):invalid ~ .signup-error {
  opacity: 1;
  transform: none;
}
/* quiet confirmation, no layout impact */
.signup.is-sent .signup-sent {
  opacity: 1;
  transform: none;
}
.signup-sent {
  position: absolute;
  top: 100%;
  left: 24px;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--sand);
  opacity: 0;
  transform: translate3d(0, -4px, 0);
  pointer-events: none;
  transition: opacity var(--t-hover) var(--e-quart), transform var(--t-hover) var(--e-expo);
}
/* ================================================================
   CARD SYSTEM
   The pillar card is the benchmark. The audit found the other cards
   drifting from it: hover lifts of -5px vs -6px, shadow depths of
   11px vs 12px, one card with a dashed border and no shadow at all,
   one carrying the hover shadow depth at rest, five padding recipes
   and three body line-heights. This unifies all of it.

   Two padding densities rather than one, because a pricing table
   genuinely needs more room than a feature card. Two is a system;
   five was not.
   ================================================================ */ :root {
  --pad-card: 26px 24px 28px;
  --pad-card-lg: 30px 28px 32px;
}
/* ---------- shared foundation ---------- */
.pillar, .zone-card, .ptable-card, .tier, .class-card, .ticket {
  position: relative;
  border: 3px solid var(--redink);
  border-radius: var(--r-card);
  box-shadow: var(--sh-rest) var(--redink);
  transition: transform var(--t-hover) var(--e-quart), box-shadow var(--t-hover) var(--e-quart), border-color var(--t-hover) var(--e-quart);
}
/* ---------- one elevation change for every card ---------- */
.pillar:hover, .zone-card:hover, .ptable-card:hover, .tier:hover, .class-card:hover, .ticket:hover {
  transform: translate3d(0, -6px, 0);
  box-shadow: var(--sh-lift) var(--redink);
}
/* ---------- padding densities ---------- */
.ptable-card, .tier, .ticket {
  padding: var(--pad-card-lg);
}
.class-card {
  padding: var(--pad-card);
}
/* the wash needs the radius to clip it */
.ptable-card, .class-card {
  overflow: hidden;
}
/* ---------- the placeholder card joins the family ---------- */
.class-card {
  background: var(--cream);
  border-style: solid;
  border-color: var(--redink);
}
/* ---------- accent wash, matching .pillar::before exactly ----------
   .ticket is excluded on purpose: its ::before and ::after draw the
   notch cutouts, so borrowing them would destroy the ticket shape. */
.zone-card-body::before, .ptable-card::before, .tier::before, .class-card::before {
  content: "";
  position: absolute;
  top: -46px;
  right: -46px;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .1;
  transform: scale(.7);
  transition: transform .5s var(--e-expo), opacity .4s var(--e-quart);
  pointer-events: none;
}
.zone-card:hover .zone-card-body::before, .ptable-card:hover::before, .tier:hover::before, .class-card:hover::before {
  transform: scale(1);
  opacity: .17;
}
/* image cards wash the body, never the photograph */
.zone-card-body {
  position: relative;
  overflow: hidden;
}
/* ---------- accent rhythm extended to every card grid ----------
   One rule per position, so the accent set stays a single source of
   truth instead of being repeated per component. */
.zone-cards > :nth-child(1), .tier-grid > :nth-child(1), .ptable-grid > :nth-child(1), .class-grid > :nth-child(1), #carnival-pass > :nth-child(1) {
  --accent: #E57D26;
  --accent-soft: rgba(229, 125, 38, .14);
  --accent-line: rgba(229, 125, 38, .42);
}
.zone-cards > :nth-child(2), .tier-grid > :nth-child(2), .ptable-grid > :nth-child(2), .class-grid > :nth-child(2), #carnival-pass > :nth-child(2) {
  --accent: #6BA19C;
  --accent-soft: rgba(107, 161, 156, .16);
  --accent-line: rgba(107, 161, 156, .45);
}
.zone-cards > :nth-child(3), .tier-grid > :nth-child(3), .class-grid > :nth-child(3), #carnival-pass > :nth-child(3) {
  --accent: #B92D15;
  --accent-soft: rgba(185, 45, 21, .12);
  --accent-line: rgba(185, 45, 21, .38);
}
.zone-cards > :nth-child(4) {
  --accent: #17403D;
  --accent-soft: rgba(23, 64, 61, .11);
  --accent-line: rgba(23, 64, 61, .34);
}
/* on the red featured tier the wash must lighten to stay visible.
   Deliberately not applied to the red Carnival Pass: on .ticket,
   ::before is a notch cutout, not a wash. */
.tier-featured::before {
  background: var(--sand);
}
/* ---------- card body copy, one line-height ---------- */
.zone-card-line, .tier-desc, .pillars .pillar .pillar-text {
  line-height: 1.62;
}
/* ---------- image cards: consistent media treatment ---------- */
.zone-card-img {
  border-bottom-width: 3px;
}
.ig-cell {
  box-shadow: var(--sh-press) var(--redink);
  transition: transform var(--t-hover) var(--e-quart), box-shadow var(--t-hover) var(--e-quart);
}
.ig-cell:hover {
  transform: translate3d(0, -3px, 0);
  box-shadow: var(--sh-rest) var(--redink);
}
/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .pillar, .zone-card, .ptable-card, .tier, .class-card, .ticket, .ig-cell, .zone-card-body::before, .ptable-card::before, .tier::before, .class-card::before {
    transition: none !important;
  }
  .pillar:hover, .zone-card:hover, .ptable-card:hover, .tier:hover, .class-card:hover, .ticket:hover, .ig-cell:hover {
    transform: none !important;
  }
  .zone-card:hover .zone-card-body::before, .ptable-card:hover::before, .tier:hover::before, .class-card:hover::before {
    transform: scale(.7) !important;
  }
}
/* ================================================================
   RESPONSIVE: nav dropdowns, slider, pillars
   Appended last so it wins on source order over the base rules.
   ================================================================ */
.bday-viewport {
  height: 400px;
}
@media (max-width:1100px) {
  .nav-sub {
    min-width: 224px;
  }
  .nav-sub a {
    font-size: 13.5px;
    padding: 10px 12px;
  }
  .bday-viewport {
    height: 330px;
  }
}
@media (max-width:900px) {
  /* nav becomes an accordion inside the burger panel */
  .nav-item {
    display: block;
  }
  .nav-item > .nav-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  .nav-caret {
    width: 14px;
    height: 14px;
    margin-left: 10px;
  }
  .nav-sub, .nav-sub-2 {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    display: block;
    min-width: 0;
    background: transparent;
    border: none;
    border-left: 2.5px solid rgba(140, 31, 12, .18);
    border-radius: 0;
    box-shadow: none;
    padding: 0 0 0 15px;
    margin: 0 0 0 2px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    max-height: 0;
    overflow: hidden;
    /* max-height is a layout property, but this is one small
       user-triggered element and the alternatives need JS height
       measurement, which is more fragile than it is worth here */
    transition: max-height .44s var(--e-expo);
  }
  /* only an explicit toggle opens a panel: :hover sticks after a tap */
  .nav-item:hover > .nav-sub, .nav-item:focus-within > .nav-sub, .nav-sub .nav-item:hover > .nav-sub-2, .nav-sub .nav-item:focus-within > .nav-sub-2 {
    max-height: 0;
    transform: none;
  }
  .nav-item.is-open > .nav-sub, .nav-sub .nav-item.is-open > .nav-sub-2 {
    max-height: 640px;
    transform: none;
  }
  .nav-item.is-open > .nav-top .nav-caret {
    transform: rotate(180deg);
  }
  .nav-item:hover > .nav-top .nav-caret {
    transform: none;
  }
  .nav-sub a {
    font-size: 15px;
    padding: 12px 0;
    border-bottom: none;
    border-radius: 0;
  }
  .nav-sub a:hover {
    background: transparent;
    transform: translate3d(4px, 0, 0);
  }
  .nav-sub .nav-sub-label {
    padding: 12px 0 4px;
  }
  .nav-sub-2 {
    border-left-color: rgba(140, 31, 12, .12);
  }
  /* slider */
  .bday-viewport {
    height: 250px;
  }
  .bday-arrow {
    width: 38px;
    height: 38px;
    margin-top: -19px;
  }
  .bday-arrow svg {
    width: 15px;
    height: 15px;
  }
  .bday-prev {
    left: 10px;
  }
  .bday-next {
    right: 10px;
  }
}
/* pillar cards need full width once the grid gets tight */
@media (max-width:700px) {
  .pillars {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .pillar {
    padding: 24px 22px 26px;
  }
}
/* ================================================================
   H-02: ABOUT PILLARS AS CLEAN ICONS
   Meeting decision: "the description boxes and paragraphs underneath
   each pillar will be removed... styled purely as clean icons with
   their four-word titles."

   Scoped to .pillars-light only. The founders board group (Play,
   Learn, Discover, Grow) was not named in the meeting and keeps its
   cards and descriptions until confirmed.

   The icon badge stays: it is what makes these read as an icon set
   rather than loose glyphs. Card chrome, wash and lift come off.
   ================================================================ */
.pillars-light .pillar {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  overflow: visible;
  align-items: center;
  text-align: center;
  gap: 0;
}
.pillars-light .pillar::before {
  display: none;
}
.pillars-light .pillar:hover {
  transform: none;
  box-shadow: none;
}
.pillars-light .pillar-icon {
  width: 74px;
  height: 74px;
  border-radius: var(--r-card);
}
.pillars-light .pillar-icon svg {
  width: 38px;
  height: 38px;
}
/* the micro-interaction moves to the icon, since there is no card */
.pillars-light .pillar:hover .pillar-icon {
  transform: translate3d(0, -4px, 0) rotate(-5deg) scale(1.06);
}
.pillars .pillars-light .pillar .pillar-name, .pillars-light .pillar .pillar-name {
  margin: 18px 0 0;
  font-size: 23px;
  line-height: 1.2;
  max-width: 100%;
}
@media (max-width:700px) {
  .pillars-light .pillar {
    padding: 0;
  }
  .pillars-light .pillar-icon {
    width: 66px;
    height: 66px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pillars-light .pillar:hover .pillar-icon {
    transform: none !important;
  }
}
/* ---------- reduced motion: new components ---------- */
@media (prefers-reduced-motion: reduce) {
  .nav-sub, .nav-sub-2, .nav-caret, .sub-caret, .nav-sub a, .btn-discover, .btn-discover svg, .bday-track, .bday-arrow, .bday-dot, .pillar, .pillar::before, .pillar-icon, .pillar-icon .ic-2, .bday-viewport {
    transition: none !important;
    animation: none !important;
  }
  .btn-discover:hover, .btn-discover:hover svg, .btn-discover:active, .bday-arrow:hover, .bday-arrow:active, .bday-dot:hover, .pillar:hover, .pillar:hover .pillar-icon, .pillar:hover .pillar-icon .ic-2, .nav-sub a:hover, .nav-sub .nav-item:hover .sub-caret {
    transform: none !important;
  }
  .pillar:hover::before {
    transform: scale(.7) !important;
  }
}
/* ==========================================================
   INLINE STYLE MIGRATION — 4 August 2026
   71 style="" attributes moved off the markup into these
   classes. Declarations are byte-for-byte what was inline.
   Appended last so they win over earlier same-specificity
   rules, matching the precedence the inline styles had.
   ========================================================== */
.u-x01 {
  font-size: 30px;
  line-height: 1.2em;
  color: #1F1F1F;
  width: calc(100%);
  padding: 0;
}
.u-x02 {
  font-size: 16px;
  color: #1F1F1F;
  width: calc(100%);
  padding: 0;
  margin-top: 16px;
}
.u-x03 {
  font-size: 16px;
  color: #1F1F1F;
  width: calc(100%);
  padding: 0;
  margin-top: 14px;
}
.u-mt-44 {
  margin-top: 44px;
}
.u-mt-12 {
  margin-top: 12px;
}
.u-mt-14 {
  margin-top: 14px;
}
.u-x07 {
  position: relative;
  z-index: 2;
}
.u-x08 {
  margin-top: 56px;
  margin-bottom: 30px;
}
.u-fs-38 {
  font-size: 38px;
}
.u-x10 {
  gap: 30px;
}
.u-x11 {
  background: var(--cream);
}
.u-x12 {
  margin-top: 14px;
  font-size: 26px;
}
.u-x13 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 14px;
}
.u-ink-soft {
  color: var(--ink-soft);
}
.u-mt-22 {
  margin-top: 22px;
}
.u-x16 {
  background: var(--red);
  border-color: var(--redink);
  color: var(--cream);
  position: relative;
  overflow: hidden;
}
.u-x17 {
  margin-top: 14px;
  font-size: 26px;
  color: var(--sand);
}
/* sand on red measures 4.08:1, the same defect already fixed on
   .tier-featured .tier-per. cream on red is 5.16:1. */
.u-x18 {
  color: var(--cream);
}
.u-x19 {
  color: var(--cream);
}
.u-x20 {
  border-color: rgba(251, 235, 198, .35);
}
/* cream at .85 over red composites to 4.10:1; at full strength, 5.16:1 */
.u-x21 {
  color: var(--cream);
}
.u-x22 {
  align-items: center;
  margin-bottom: 52px;
}
.u-mt-18 {
  margin-top: 18px;
}
.u-mt-48 {
  margin-top: 48px;
}
.u-mt-26 {
  margin-top: 26px;
}
.u-x26 {
  margin-top: 14px;
  font-size: 24px;
}
.u-x27 {
  color: var(--ink-soft);
  margin-top: 10px;
}
.u-mt-24 {
  margin-top: 24px;
}
.u-x29 {
  height: 260px;
}
.u-ta-center {
  text-align: center;
}
.u-x31 {
  width: 100%;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .45));
}
.u-x32 {
  margin-top: 16px;
  display: inline-block;
  border: 2px dashed rgba(243, 207, 131, .5);
  border-radius: 12px;
  padding: 14px 20px;
  line-height: 1.45;
}
.u-x33 {
  border-color: rgba(243, 207, 131, .3);
  margin: 40px 0 34px;
}
.u-x34 {
  align-items: center;
}
.u-mt-28 {
  margin-top: 28px;
}
.u-x36 {
  height: 420px;
}
.u-mt-16 {
  margin-top: 16px;
}
.u-x38 {
  color: rgba(251, 235, 198, .8);
}
.u-mw-34ch {
  max-width: 34ch;
}
/* ==========================================================
   ZONE PAGE SYSTEM  (.zp)   rev 2 — 11 Aug 2026

   Changes this revision:
   - breadcrumb and zone-pill nav removed at client request
   - the chunky plaque in the hero replaced by a typographic
     eyebrow, which is lighter and carries the same orientation
   - the statement band re-set: Rye at 40px was shouting a
     30-word sentence. Rye is a 2-5 word display face. The
     sentence now reads in Nunito with the "statement" quality
     coming from composition (dark ground, rules, space) rather
     than size
   - the pull quote was repeating the hero tagline verbatim.
     Removed, and the lead paragraph gets a Rye drop cap instead
   - star rule motif added under section headings for rhythm

   Scoped under .zp throughout so the homepage is untouchable.
   ========================================================== */
.zp {
  --zone: #E57D26;
  --zone-soft: rgba(229, 125, 38, .13);
  --zone-line: rgba(229, 125, 38, .42);
  --zone-ink: #A85312;
}
.zp-orange {
  --zone: #E57D26;
  --zone-soft: rgba(229, 125, 38, .13);
  --zone-line: rgba(229, 125, 38, .42);
  --zone-ink: #A85312;
}
.zp-red {
  --zone: #B92D15;
  --zone-soft: rgba(185, 45, 21, .12);
  --zone-line: rgba(185, 45, 21, .40);
  --zone-ink: #8C1F0C;
}
.zp-teal {
  --zone: #6BA19C;
  --zone-soft: rgba(107, 161, 156, .16);
  --zone-line: rgba(107, 161, 156, .46);
  --zone-ink: #3C6862;
}
.zp-green {
  --zone: #17403D;
  --zone-soft: rgba(23, 64, 61, .11);
  --zone-line: rgba(23, 64, 61, .34);
  --zone-ink: #0E2B29;
}
/* ---------- craft pass: one spacing scale, four line-heights ----------
   Audit found 10 different margin values (including a fractional 23.94px
   from a vw clamp), 9 line-height ratios, two near-identical section
   paddings (92px and 96px), and duplicate type sizes 16/16.5 and
   19.5/20.5/21. All snapped to the scales below. */
.zp {
  --s1: 8px;
  --s2: 12px;
  --s3: 16px;
  --s4: 20px;
  --s5: 24px;
  --s6: 32px;
  --s7: 40px;
  --s8: 48px;
  --s9: 64px;
  --s10: 96px;
  --lh-display: 1.05; /* Rye, large */
  --lh-head: 1.18; /* Chicle sub-heads */
  --lh-lead: 1.6;
  --lh-body: 1.7;
}
/* one section rhythm, replacing the 92/96 mismatch */
.zp .sec, .zp-statement, .zp-cta {
  padding-top: var(--s10);
  padding-bottom: var(--s10);
}
/* headings should never leave a single word stranded */
.zp-title, .zp-h2, .zp-tagline, .zp-feat-name, .zp-quote p, .zp-say, .zp-cta h2, .zp-cta p {
  text-wrap: balance;
}
/* ---------- fluid type ---------- */
.zp-title {
  font-family: 'Rye', serif;
  font-size: clamp(34px, 5.9vw, 68px);
  line-height: var(--lh-display);
  color: var(--redink);
  letter-spacing: -.015em;
  margin: 0;
}
.zp-tagline {
  font-family: Chicle, cursive;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: var(--lh-head);
  color: var(--zone-ink);
  margin: var(--s3) 0 0;
}
.zp-h2 {
  font-family: 'Rye', serif;
  font-size: clamp(26px, 3.3vw, 40px);
  line-height: var(--lh-display);
  color: var(--redink);
  letter-spacing: -.01em;
  margin: 0;
}
.zp-kicker {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .3em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--orange-ink);
}
/* eyebrow replaces the plaque: same orientation, lighter voice */
.zp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .3em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--zone-ink);
}
.zp-eyebrow svg {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--zone);
}
.zp-eyebrow::after {
  content: "";
  width: 34px;
  height: 2px;
  border-radius: 1px;
  background: var(--zone-line);
}
/* star rule, used under section headings */
.zp-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  margin-top: var(--s3);
}
.zp-rule::before, .zp-rule::after {
  content: "";
  height: 2px;
  width: clamp(28px, 6vw, 54px);
  border-radius: 1px;
  background: var(--zone-line);
}
.zp-rule svg {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--zone);
}
/* ---------- header on inner pages ----------
   The site header is position:fixed and transparent with WHITE links until
   you scroll 40px. Over the homepage's dark video that is correct. Over a
   light inner-page hero, white on paper measures 1.07:1, so the nav was
   effectively invisible at the top of every zone page. Inner pages therefore
   carry the solid treatment from the start. Colours only, so the header still
   shrinks on scroll exactly as it does on the homepage. */
/* No background bar. The nav stays transparent over the hero exactly as it
   does on the homepage; only the ink changes, because white on paper measures
   1.07:1 and redink measures 8.45:1. Once scrolled, the existing .is-stuck
   rules take over and give it the solid paper bar, same as the homepage. */
.zp .site-header .nav-links {
  color: var(--redink);
}
.zp .site-header .nav-links a {
  text-shadow: none;
}
.zp .site-header .nav-burger {
  color: var(--redink);
}
.zp .site-header .nav-logo img {
  filter: none;
}
/* ---------- 1. hero ----------
   Restored split composition, with three changes:
   - an accent rule between title and tagline, for hierarchy
   - fact chips gain a hover lift so they read as considered
   - top padding reserves the fixed header's height, per breakpoint

   A bunting strip was tried across the top and removed again: the fixed
   header is 183px tall and the bunting is 95px, so none of it was ever
   visible. It cost a request and rendered nothing. */
.zp-hero {
  position: relative;
  background: var(--paper);
  /* The header is position:fixed, so the hero must reserve its height or the
     eyebrow sits behind the nav. Heights are derived from the header's own
     breakpoints, not guessed:
       >1100px  40 + logo 100 + 40 + 3px border = 183px
       <=1100px 14 + logo  76 + 14 + 3          = 107px
       <=900px  12 + logo  60 + 12 + 3          =  87px
     Each value below is that height plus 24px of breathing room. */
  padding: 207px 0 var(--s10);
}
.zp-hero .sunburst {
  z-index: 0;
}
.zp-hero-grid {
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  gap: var(--s9);
  align-items: center;
  position: relative;
  z-index: 2;
}
.zp-hero .zp-eyebrow {
  margin-bottom: var(--s4);
}
.zp-accent-rule {
  width: 56px;
  height: 4px;
  border-radius: 2px;
  background: var(--zone);
  margin: var(--s4) 0 0;
}
.zp-hero .zp-tagline {
  margin-top: var(--s3);
}
.zp-media {
  position: relative;
}
.zp-media .frame {
  height: clamp(300px, 41vw, 462px);
  transform: rotate(.9deg);
}
.zp-media .frame img {
  transition: transform .8s var(--e-quart);
}
.zp-media:hover .frame img {
  transform: scale(1.04);
}
.zp-media::before {
  content: "";
  position: absolute;
  inset: -16px -16px 12px 6px;
  border-radius: 26px;
  background: var(--zone);
  opacity: .13;
  transform: rotate(-2deg);
  pointer-events: none;
}
/* a second, smaller frame overlapping the main photo: a composed photo stack
   reads as designed where a single rectangle reads as a placeholder */
.zp-media-inset {
  position: absolute;
  left: -26px;
  bottom: -34px;
  width: 38%;
  z-index: 3;
  transform: rotate(-3deg);
}
.zp-media-inset .frame {
  height: 150px;
  box-shadow: 0 0 0 3px var(--cream) inset, 0 16px 30px rgba(58, 33, 24, .24);
}
/* ---------- fact chips ---------- */
.zp-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s5);
}
.zp-fact {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--redink);
  background: var(--cream);
  border: 2.5px solid var(--zone-line);
  border-radius: var(--r-pill);
  padding: 10px 17px 11px;
  box-shadow: var(--sh-press) var(--zone-line);
  transition: transform var(--t-hover) var(--e-quart), box-shadow var(--t-hover) var(--e-quart);
}
.zp-fact:hover {
  transform: translate3d(0, -2px, 0);
  box-shadow: 0 5px 0 var(--zone-line);
}
.zp-fact svg {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--zone);
}
/* ---------- pull quote, restored ----------
   A strong visual anchor so the editorial section is not just centred body
   text. Star badge, accent border, hard offset shadow. */
.zp-quote {
  position: relative;
  max-width: 54ch;
  margin: var(--s8) auto 0;
  padding: var(--s7) var(--s6) var(--s6);
  text-align: center;
  background: var(--cream);
  border: 3px solid var(--redink);
  border-radius: var(--r-card);
  box-shadow: var(--sh-rest) var(--redink);
}
.zp-quote p {
  font-family: Chicle, cursive;
  font-size: clamp(21px, 2.6vw, 30px);
  line-height: var(--lh-head);
  color: var(--redink);
  margin: 0;
}
.zp-quote::before {
  content: "";
  position: absolute;
  top: -19px;
  left: 50%;
  margin-left: -19px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--zone);
  border: 3px solid var(--redink);
}
.zp-quote::after {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  margin-left: -9px;
  width: 18px;
  height: 18px;
  background: var(--cream);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
/* ---------- 2. editorial: two-tone story ----------
   The deck, inline chip and tag pills were removed at client request. What
   remains is the two-tone treatment: opening clause in --redink, remainder in
   --ink-soft, set in Nunito Sans because Rye is a 2-5 word display face.
   ================================================================ */
.zp-read {
  position: relative;
}
.zp-story {
  position: relative;
  max-width: 75%;
  margin: 0 auto;
  text-align: center;
}
.zp-story-lead {
  font-size: clamp(22px, 3.4vw, 34px);
  line-height: 1.24;
  letter-spacing: -.01em;
  max-width: 100%;
  margin: 0 auto;
  font-family: 'Rye', serif;
}
.zp-ink {
  color: var(--redink);
  font-weight: 600;
}
.zp-muted {
  color: var(--ink-soft);
  font-weight: 600;
  opacity: .72;
}
/* --- remaining paragraphs --- */
.zp-prose {
  max-width: 100%;
  margin: 20px 0 0;
  padding: 0 6%;
}
.zp-prose p {
  font-size: 16.5px;
  line-height: var(--lh-body);
  color: var(--ink-soft);
}
.zp-prose p + p {
  margin-top: var(--s4);
}
/* ---------- 3. what's inside ----------
   Rebuilt so the STATIC state carries the design. The cards are not links,
   so the old lift-on-hover was a false affordance, and it did nothing at all
   on touch, which is the primary audience here. Hover is now decoration only.

   Added: a numbered index via CSS counters (no markup change), a hard offset
   shadow on the icon tile so it reads as a physical badge, and an accent rule
   under the label echoing .zp-accent-rule in the hero.
   ---------------------------------------------------------------- */
.zp-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s5);
  counter-reset: feat;
}
.zp-feat {
  counter-increment: feat;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: hidden;
  background: var(--cream);
  border: 3px solid var(--redink);
  border-radius: var(--r-card);
  box-shadow: var(--sh-rest) var(--redink);
  padding: var(--s7) var(--s5) var(--s6);
}
/* the accent wash, now anchored behind the badge rather than the corner */
.zp-feat::before {
  content: "";
  position: absolute;
  top: -54px;
  left: 50%;
  width: 150px;
  height: 150px;
  margin-left: -75px;
  border-radius: 50%;
  background: var(--zone);
  opacity: .1;
  pointer-events: none;
}
/* numbered index, generated so the markup does not have to change */
.zp-feat::after {
  content: counter(feat, decimal-leading-zero);
  position: absolute;
  top: var(--s4);
  right: var(--s4);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1;
  /* full opacity, not a faded watermark: at .55 this blended to 2.17:1
     against cream, failing AA for 12px text. --zone-ink at full strength
     measures 4.55:1 on cream and 5.00:1 on paper. */
  color: var(--zone-ink);
}
.zp-feat .pillar-icon {
  position: relative;
  z-index: 2;
  width: 72px;
  height: 72px;
  color: var(--zone);
  background: var(--cream);
  border: 3px solid var(--zone);
  /* the brand's signature hard offset, so the tile reads as physical */
  box-shadow: var(--sh-press) var(--zone-ink);
  transition: transform .45s var(--e-settle);
}
.zp-feat .pillar-icon svg {
  width: 36px;
  height: 36px;
}
.zp-feat-name {
  position: relative;
  z-index: 2;
  font-family: Chicle, cursive;
  font-size: 20px;
  line-height: var(--lh-head);
  color: var(--redink);
  margin-top: var(--s4);
  max-width: 15ch;
}
/* accent rule under the label, tying back to the hero */
.zp-feat-name::after {
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  border-radius: 2px;
  margin: var(--s2) auto 0;
  background: var(--zone);
  opacity: .5;
}
/* pointer-only decoration: no card lift, so nothing implies a link */
@media (hover: hover) {
  .zp-feat:hover .pillar-icon {
    transform: rotate(-6deg) scale(1.06);
  }
}
/* ---------- 4. the statement: composition, not size ---------- */
.zp-statement {
  position: relative;
  overflow: hidden;
  background: var(--night);
  color: var(--cream);
}
.zp-statement .bulbs {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
}
.zp-statement .wrap {
  position: relative;
  z-index: 3;
  text-align: center;
}
.zp-statement .zp-kicker {
  color: var(--sand);
}
.zp-statement .zp-rule::before, .zp-statement .zp-rule::after {
  background: rgba(243, 207, 131, .4);
}
.zp-statement .zp-rule svg {
  color: var(--sand);
}
.zp-say {
  max-width: 100ch;
  margin: var(--s5) auto 0;
  font-size: clamp(22px, 1.9vw, 28px);
  line-height: var(--lh-body);
  color: var(--sand);
  font-family: 'Chicle', cursive;
}
.zp-say b, .zp-say strong {
  color: var(--paper);
  font-weight: 800;
}
/* ---------- 5. gallery mosaic ---------- */
.zp-mosaic {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  grid-template-rows: 172px 172px;
  gap: var(--s4);
}
.zp-mosaic .frame:nth-child(1) {
  grid-row: span 2;
}
.zp-mosaic .frame {
  height: 100%;
}
/* ---------- 6. CTA band ---------- */
.zp-cta {
  position: relative;
  overflow: hidden;
  background: var(--red);
  text-align: center;
}
.zp-cta .wrap {
  position: relative;
  z-index: 3;
}
.zp-cta h2 {
  font-family: 'Rye', serif;
  font-size: clamp(30px, 4.6vw, 54px);
  line-height: var(--lh-display);
  color: var(--sand);
  letter-spacing: -.01em;
  margin: 0;
}
.zp-cta p {
  color: var(--cream);            /* .9 alpha composited to 4.45:1 on red */
  margin: var(--s3) auto 0;
  max-width: 46ch;
  font-size: 16.5px;
  line-height: var(--lh-body);
}
.zp-cta .btn {
  margin-top: var(--s6);
}
.zp-cta .bunting {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
}
/* ---------- responsive: recomposed, not shrunk ---------- */
@media (max-width:1100px) {
  .zp .sec, .zp-statement, .zp-cta {
    padding-top: var(--s9);
    padding-bottom: var(--s9);
  }
  .zp-hero {
    padding-top: 131px;
    padding-bottom: var(--s9);
  }
  .zp-hero-grid {
    grid-template-columns: 1fr;
    gap: var(--s6);
  }
  .zp-media .frame {
    transform: none;
    height: clamp(260px, 46vw, 380px);
  }
  .zp-media::before {
    inset: -13px -13px 10px 4px;
  }
  .zp-media-inset {
    display: none;
  } /* crowds the frame once stacked */
  .zp-story-lead {
    max-width: 100%;
  }
  .zp-features {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s5);
  }
  .zp-mosaic {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 180px 180px;
    gap: var(--s4);
  }
  .zp-mosaic .frame:nth-child(1) {
    grid-column: span 2;
    grid-row: auto;
   
  }
	.zp-story{    max-width: 100%;:}
	.zp-prose{padding:0;}	
	
}
@media (max-width:700px) {
  .zp .sec, .zp-statement, .zp-cta {
    padding-top: var(--s8);
    padding-bottom: var(--s8);
  }
  .zp-hero {
    padding-top: 111px;
    padding-bottom: var(--s8);
  }
  .zp-story-lead {
    max-width: none;
  }
  .zp-prose {
    margin-top: var(--s7);
  }
  .zp-features {
    grid-template-columns: 1fr 1fr;
    gap: var(--s3);
  }
  .zp-feat {
    padding: var(--s5) var(--s3);
  }
  .zp-quote {
    padding: var(--s6) var(--s4);
  }
  .zp-feat-name {
    font-size: 18px;
  }
  .zp-mosaic {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .zp-mosaic .frame, .zp-mosaic .frame:nth-child(1) {
    grid-column: auto;
    height: 210px;
  }
  .zp-facts {
    gap: var(--s1);
  }
  .zp-fact {
    font-size: 12.5px;
    padding: 9px var(--s3) 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .zp-media .frame img, .zp-feat, .zp-feat::before, .zp-feat .pillar-icon, .zp-fact {
    transition: none !important;
  }
  .zp-media:hover .frame img, .zp-feat:hover, .zp-feat:hover .pillar-icon, .zp-fact:hover {
    transform: none !important;
  }
}
/* on-scale spacing helpers, so the template stops reaching for off-scale
   shared utilities like u-mt-14 and u-mt-26 */
.zp-mt-3 {
  margin-top: var(--s3);
}
.zp-mt-5 {
  margin-top: var(--s5);
}
/* ==========================================================
   ABOUT PAGE  (.ab)   11 Aug 2026

   Built from scratch. The first attempt reused .zp-hero,
   .zp-feat, .board and .zp-cta and had zero classes of its
   own, so it was the inner-page template with new text.

   Different job, different composition. A homepage sells a
   visit; an About page earns trust, so this one is a narrative
   you walk down rather than a grid you scan:

     a continuous vertical spine with star nodes, the midway
     ....... the site owns a .trail/.node motif but only as a
     6px divider. Here it becomes the page's structure.

   Devices deliberately NOT reused: split hero, feature cards,
   the dark board, the red CTA band, plaques, fact chips.
   ========================================================== */
.ab {
  --ab-rule: rgba(140,31,12,.16);
  --s1:8px; --s2:12px; --s3:16px; --s4:20px; --s5:24px;
  --s6:32px; --s7:40px; --s8:48px; --s9:64px; --s10:96px; --s11:128px;
}
/* same header ink fix the inner pages need: white on paper is 1.07:1 */
.ab .site-header .nav-links { color: var(--redink); }
.ab .site-header .nav-links a { text-shadow: none; }
.ab .site-header .nav-burger { color: var(--redink); }
.ab .site-header .nav-logo img { filter: none; }

/* ---------- 1. opening: type only, no image, no split ---------- */
.ab-open {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  padding: 207px 0 var(--s10);
  text-align: center;
}
.ab-open .wrap { position: relative; z-index: 2; }
.ab-meta {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--orange-ink);
}
.ab-statement {
  font-family: 'Rye', serif;
  font-size: clamp(32px, 6.4vw, 78px);
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--redink);
  max-width: 17ch;
  margin: var(--s5) auto 0;
  text-wrap: balance;
}
.ab-statement em {
  font-style: normal;
  color: var(--orange-ink);
}
.ab-sub {
  font-family: Chicle, cursive;
  font-size: clamp(18px, 2.1vw, 25px);
  line-height: 1.3;
  color: var(--ink-soft);
  max-width: 34ch;
  margin: var(--s5) auto 0;
}

/* ---------- 2. the chapters: full-bleed alternating bands ----------
   Was a centred container with a dashed spine and alternating text/image
   cells: a standard timeline, which is what read as basic. Now each chapter
   is a full-width band where the photograph runs edge to edge on one side
   and the words sit in the other, alternating down the page. No container,
   no spine, and the chapter numeral is part of the type stack rather than a
   ghost sitting behind it.
   ---------------------------------------------------------------- */
.ab-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: var(--paper);
}
/* the bands are siblings of the header and footer, so nth-child must be
   scoped to .ab-chapters or it counts the wrong elements. And the media is
   already first in source order, so pushing it right needs a positive
   order, not -1. */
.ab-chapters > .ab-band:nth-child(even) { background: var(--cream); }
.ab-chapters > .ab-band:nth-child(even) .ab-band-media { order: 2; }

.ab-band-media { position: relative; min-height: clamp(380px, 44vw, 620px); overflow: hidden; }
.ab-band-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: transform 1s var(--e-quart);
}
.ab-band:hover .ab-band-media img { transform: scale(1.06); }
/* a thin brand edge where the photo meets the words */
.ab-band-media::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 0 solid var(--redink);
  border-right-width: 4px;
  pointer-events: none;
}
.ab-chapters > .ab-band:nth-child(even) .ab-band-media::after {
  border-right-width: 0;
  border-left-width: 4px;
}

.ab-band-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(44px, 6vw, 92px);
  max-width: 640px;
}
.ab-chap {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--orange-ink);
}
.ab-chap b {
  font-family: 'Rye', serif;
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--accent-bar);
}
.ab-band h2 {
  font-family: Chicle, cursive;
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.1;
  color: var(--redink);
  margin: var(--s4) 0 0;
  text-wrap: balance;
}
.ab-band p {
  font-size: 16.5px;
  line-height: 1.76;
  color: var(--ink-soft);
  max-width: 44ch;
  margin: var(--s4) 0 0;
}
.ab-chapters > .ab-band:nth-child(1) { --accent-bar: #A85312; }
.ab-chapters > .ab-band:nth-child(2) { --accent-bar: #3C6862; }
.ab-chapters > .ab-band:nth-child(3) { --accent-bar: #8C1F0C; }
.ab-chapters > .ab-band:nth-child(4) { --accent-bar: #0E2B29; }

/* ---------- 3. the creed ----------
   The 82px numeral sat at left:0 inside a 96px gutter, so it collided with
   the title. It now has its own grid column with real space, and the sticky
   heading is kept because it is what gives the section a sense of place.
   ---------------------------------------------------------------- */
.ab-believe { background: var(--paper); padding: var(--s10) 0; }
.ab-believe-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(48px, 6vw, 104px);
  align-items: start;
}
.ab-believe-head { position: sticky; top: 210px; }
.ab-lede {
  font-family: 'Rye', serif;
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1.06;
  letter-spacing: -.015em;
  color: var(--redink);
  margin: var(--s4) 0 0;
  text-wrap: balance;
}
.ab-believe-note {
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--ink-soft);
  max-width: 28ch;
  margin: var(--s5) 0 0;
}
.ab-creed { list-style: none; counter-reset: creed; margin: 0; padding: 0; }
.ab-creed li {
  counter-increment: creed;
  display: grid;
  grid-template-columns: 3.4rem 1fr;   /* the numeral finally has its own room */
  column-gap: clamp(20px, 2.4vw, 34px);
  align-items: start;
  padding: clamp(26px, 3vw, 38px) 0;
  border-top: 2px solid rgba(140,31,12,.14);
}
.ab-creed li:last-child { border-bottom: 2px solid rgba(140,31,12,.14); }
.ab-creed li::before {
  content: counter(creed, decimal-leading-zero);
  grid-column: 1;
  grid-row: 1 / -1;
  font-family: 'Rye', serif;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.1;
  color: var(--accent-bar);
}
/* both text children must be pinned to column 2. Without this, auto-placement
   drops the paragraph into the narrow numeral column and it wraps one word
   per line. */
.ab-creed h3, .ab-creed p { grid-column: 2; }
.ab-creed h3 {
  font-family: Chicle, cursive;
  font-weight: 400;
  font-size: clamp(23px, 2.7vw, 33px);
  line-height: 1.14;
  color: var(--redink);
  margin: 0;
}
.ab-creed p {
  font-size: 16px;
  line-height: 1.74;
  color: var(--ink-soft);
  max-width: 46ch;
  margin: var(--s2) 0 0;
}
.ab-creed li:nth-child(1) { --accent-bar: #A85312; }
.ab-creed li:nth-child(2) { --accent-bar: #3C6862; }
.ab-creed li:nth-child(3) { --accent-bar: #8C1F0C; }
.ab-creed li:nth-child(4) { --accent-bar: #0E2B29; }
.ab-creed li:nth-child(5) { --accent-bar: #A85312; }

/* ---------- 4. the letter ----------
   Was a kicker and two flat paragraphs. Now the opening sentence is pulled
   out at display size so the block has a hierarchy, with an oversized
   quote mark anchoring it.
   ---------------------------------------------------------------- */
.ab-letter {
  position: relative;
  overflow: hidden;
  background: var(--night);
  color: var(--cream);
  padding: var(--s10) 0;
}
.ab-letter .wrap {
  position: relative;
  z-index: 2;
  /* the base .wrap is width:1180px + max-width:calc(100% - 48px); that
     max-width is what both shrinks it and supplies the side gutters, so a
     narrower measure has to keep it rather than replace it. */
  max-width: min(820px, calc(100% - 48px));
}
.ab-letter p.ab-letter-kicker {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--sand);
}
/* Rye has no usable quote glyph at display size: at 115px the &ldquo; rendered
   as two small specks. A short brand rule carries the same "letter opens
   here" beat without the debris. */
.ab-letter-rule {
  display: block;
  width: 56px;
  height: 4px;
  border-radius: 2px;
  background: var(--orange);
  margin: var(--s5) 0 0;
}
.ab-letter p.ab-letter-lead {
  font-family: Chicle, cursive;
  font-size: clamp(24px, 3.2vw, 40px);
  line-height: 1.2;
  color: var(--sand);
  margin: var(--s4) 0 0;
  max-width: 30ch;
}
.ab-letter p {
  font-size: clamp(16.5px, 1.8vw, 19px);
  line-height: 1.8;
  color: rgba(251,235,198,.88);
  margin: var(--s5) 0 0;
  max-width: 62ch;
}
.ab-sign {
  display: flex;
  align-items: center;
  gap: var(--s4);
  margin-top: var(--s8);
  padding-top: var(--s6);
  border-top: 2px dashed rgba(243,207,131,.32);
}
.ab-sign-name { font-family: Chicle, cursive; font-size: 28px; color: var(--sand); }
.ab-sign-role {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(251,235,198,.72);
}

/* ---------- 5. the invitation ----------
   Was centred text with pill links. Now an asymmetric close: the statement
   holds the left, the four zones read as an editorial index on the right,
   each a full row with a rule and an arrow that travels on hover.
   ---------------------------------------------------------------- */
.ab-invite { background: var(--cream); padding: var(--s10) 0 var(--s11); }
.ab-invite-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
}
.ab-invite h2 {
  font-family: 'Rye', serif;
  font-size: clamp(28px, 4vw, 54px);
  line-height: 1.04;
  letter-spacing: -.015em;
  color: var(--redink);
  margin: var(--s4) 0 0;
  text-wrap: balance;
}
.ab-invite p {
  color: var(--ink-soft);
  font-size: 16.5px;
  line-height: 1.72;
  margin: var(--s5) 0 0;
  max-width: 34ch;
}
.ab-invite .btn { margin-top: var(--s7); align-self: start; }
.ab-index { display: block; }
.ab-index a {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--s4);
  padding: clamp(18px, 2.2vw, 26px) 0;
  border-top: 2px solid rgba(140,31,12,.14);
  font-family: Chicle, cursive;
  font-size: clamp(19px, 2.1vw, 26px);
  line-height: 1.16;
  color: var(--redink);
}
.ab-index a:last-child { border-bottom: 2px solid rgba(140,31,12,.14); }
.ab-index svg {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--orange-ink);
  transition: transform .3s var(--e-expo);
}
@media (hover: hover) {
  .ab-index a:hover { color: var(--red); }
  .ab-index a:hover svg { transform: translate3d(7px, 0, 0); }
}

/* ---------- responsive: recomposed, not scaled ---------- */
@media (max-width: 1100px) {
  .ab-open { padding-top: 131px; }
  /* bands stack, and the image always leads so the rhythm stays readable */
  .ab-band { grid-template-columns: 1fr; }
  .ab-chapters > .ab-band:nth-child(even) .ab-band-media { order: 0; }
  .ab-band-media { min-height: clamp(280px, 46vw, 420px); }
  .ab-band-media::after,
  .ab-chapters > .ab-band:nth-child(even) .ab-band-media::after {
    border-right-width: 0;
    border-left-width: 0;
    border-bottom-width: 4px;
  }
  .ab-band-text { max-width: none; padding: clamp(36px, 6vw, 64px); }
  .ab-believe-grid { grid-template-columns: 1fr; gap: var(--s7); }
  .ab-believe-head { position: static; top: auto; }
  .ab-believe-note { max-width: 46ch; }
  .ab-invite-grid { grid-template-columns: 1fr; gap: var(--s7); }
}
@media (max-width: 700px) {
  .ab-open { padding-top: 111px; padding-bottom: var(--s8); }
  .ab-believe, .ab-letter, .ab-invite { padding: var(--s8) 0; }
  .ab-creed li { grid-template-columns: 2.6rem 1fr; column-gap: var(--s4); }
  .ab-band-text { padding: var(--s7) var(--s5); }
  .ab-letter-rule { width: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-band-media img, .ab-index svg { transition: none !important; }
  .ab-band:hover .ab-band-media img { transform: scale(1.02) !important; }
  .ab-index a:hover svg { transform: none !important; }
}

/* ==========================================================================
   MOBILE NAVIGATION
   --------------------------------------------------------------------------
   A right-hand sheet rather than a dropdown, with a scrim, a scroll lock and
   an animated button. Everything below is inside the 900px query except the
   button's own bars, so the desktop nav is untouched.

   It restyles the same three-level markup the desktop uses
   (.nav-top / .nav-sub / .nav-sub-2) rather than adding a second menu, so
   there is nothing to keep in sync and the existing tap-to-expand JS still
   drives it.
   ========================================================================== */

/* ---------- the button: three bars that become a cross ---------- */
.nav-burger-box {
  position: relative;
  display: block;
  width: 22px;
  height: 16px;
  margin: 0 auto;
  pointer-events: none;
}
.nav-burger-box > span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .34s var(--e-expo), opacity .18s linear, width .34s var(--e-expo);
}
.nav-burger-box > span:nth-child(1) { top: 0; }
.nav-burger-box > span:nth-child(2) { top: 50%; margin-top: -1.25px; width: 72%; }
.nav-burger-box > span:nth-child(3) { bottom: 0; }
/* open: the outer bars meet in the middle and cross, the middle one leaves */
.nav.nav-open .nav-burger-box > span { width: 100%; }
.nav.nav-open .nav-burger-box > span:nth-child(1) { transform: translateY(6.75px) rotate(45deg); }
.nav.nav-open .nav-burger-box > span:nth-child(2) { opacity: 0; transform: translateX(-10px); }
.nav.nav-open .nav-burger-box > span:nth-child(3) { transform: translateY(-6.75px) rotate(-45deg); }

@media (hover: hover) {
  .nav-burger:hover { background: rgba(140, 31, 12, .1); border-color: rgba(140, 31, 12, .24); }
}
.nav-burger:active { transform: scale(.94); }
.nav-burger:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.nav.nav-open .nav-burger { background: var(--cream); border-color: var(--redink); color: var(--redink); }

/* the sheet footer exists only in the mobile sheet; on desktop .nav-links is
   a horizontal row and this block has no place in it */
.nav-sheet-foot { display: none; }

/* ---------- the scrim ---------- */
.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 98;                 /* below the header (100), above everything else */
  background: rgba(14, 43, 41, .55);
  opacity: 0;
  pointer-events: none;
  transition: opacity .34s var(--e-quart);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.nav-scrim.is-on { opacity: 1; pointer-events: auto; }

@media (max-width: 900px) {
  /* ---------- the sheet ---------- */
  .nav-links {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(92vw, 380px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: calc(env(safe-area-inset-top, 0px) + 88px) 0
             calc(env(safe-area-inset-bottom, 0px) + 28px);
    background: var(--paper);
    border: none;
    border-left: 3px solid var(--redink);
    border-radius: 0;
    box-shadow: -18px 0 44px rgba(58, 33, 24, .28);
    overflow-y: auto;
    overscroll-behavior: contain;   /* sheet scrolling never chains to the page */
    -webkit-overflow-scrolling: touch;
    opacity: 1;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(100%, 0, 0);
    transition: transform .42s var(--e-expo), visibility .42s linear;
  }
  .nav.nav-open .nav-links { visibility: visible; pointer-events: auto; transform: none; }

  /* rows arrive just behind the sheet */
  .nav-links > a, .nav-links > .nav-item {
    opacity: 0;
    transform: translate3d(14px, 0, 0);
    transition: opacity .3s var(--e-quart), transform .34s var(--e-expo);
  }
  .nav.nav-open .nav-links > a, .nav.nav-open .nav-links > .nav-item {
    opacity: 1;
    transform: none;
    transition-delay: calc(.1s + var(--i, 0) * 40ms);
  }
  /* the hero entrance animates nav links in on load; inside the sheet the rows
     must wait for the sheet, so that animation is handed back to the
     transitions above. */
  html.js-anim.is-loaded .nav-links > a,
  html.js-anim.is-loaded .nav-links > .nav-item { animation: none; }
  html.js-anim.is-loaded .nav-links a { animation: none; opacity: 1; transform: none; }

  /* ---------- top-level rows ---------- */
  .nav-links .nav-top {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    margin: 0;
    padding: 14px 24px 14px 26px;
    font-family: Chicle, cursive;
    font-weight: 400;
    font-size: 21px;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    text-shadow: none;
    color: var(--redink);
    background: transparent;
    border-bottom: 2px solid rgba(140, 31, 12, .1);
    border-radius: 0;
  }
  .nav-links .nav-top.is-active { background: var(--cream); color: var(--red); }
  .nav-links .nav-top.is-active::before {
    content: "";
    position: absolute;
    left: 0; top: 8px; bottom: 8px;
    width: 5px;
    border-radius: 0 3px 3px 0;
    background: var(--orange);
  }
  .nav-links a::after { display: none; }
  .nav-caret { width: 16px; height: 16px; margin: 0; opacity: .75; transition: transform .32s var(--e-expo); }

  /* ---------- expanded sub-lists ---------- */
  .nav-sub, .nav-sub-2 {
    position: static;
    display: block;
    width: auto;
    min-width: 0;
    background: rgba(243, 207, 131, .2);
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height .38s var(--e-expo);
  }
  .nav-item.is-open > .nav-sub,
  .nav-sub .nav-item.is-open > .nav-sub-2 { max-height: 760px; }

  .nav-sub a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 48px;
    padding: 11px 24px 11px 42px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ink-soft);
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(140, 31, 12, .08);
    border-radius: 0;
    transform: none;
  }
  /* a hairline down the indent, so the nesting is legible */
  .nav-sub > a, .nav-sub > .nav-sub-label, .nav-sub > .nav-item {
    box-shadow: inset 3px 0 0 -1px rgba(140, 31, 12, .16);
  }
  .nav-sub a:hover, .nav-sub a:focus-visible {
    background: rgba(251, 235, 198, .7);
    color: var(--redink);
    transform: none;
  }
  .nav-sub .nav-sub-label {
    padding: 14px 24px 6px 42px;
    font-size: 11.5px;              /* was 10.5px, under the legible floor */
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--teal-ink);
    box-shadow: inset 3px 0 0 -1px rgba(140, 31, 12, .16);
  }
  .nav-sub .nav-item > a { padding-left: 42px; }
  .nav-sub-2 { background: rgba(243, 207, 131, .34); }
  .nav-sub-2 a { padding-left: 58px; font-size: 14.5px; }
  .sub-caret { width: 14px; height: 14px; opacity: .7; }
  .nav-sub .nav-item.is-open > a .sub-caret { transform: rotate(90deg); }

  /* the sheet is fixed, so the page behind it must not scroll under it */
  html.nav-locked, body.nav-locked { overflow: hidden; touch-action: none; }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .nav-links, .nav-sub, .nav-sub-2, .nav-burger-box > span,
  .nav-links > a, .nav-links > .nav-item, .nav-scrim { transition: none !important; }
}

/* ==========================================================================
   TOUCH TARGETS AND SMALL TEXT
   Found by measuring every interactive element at 320 to 1920. WCAG 2.5.8
   asks for 24px minimum; 44px is the platform guidance and what is used here.
   ========================================================================== */

/* the birthday slider controls measured 38x38 and the dots 11-13px */
.bday-arrow { width: 44px; height: 44px; }
/* The dot was an 11px button, so the tap target was the dot itself. The
   button is now the target and the dot is drawn inside it. 28px clears the
   24px WCAG 2.5.8 minimum this site targets; going to 44 (2.5.5, AAA) would
   space the dots four times their own width apart and read as broken. */
.bday-dot {
  width: 28px;
  height: 28px;
  padding: 0;
  display: grid;
  place-items: center;
  background: none;
  border: none;
  border-radius: 50%;
  transform: none;
}
.bday-dot::before {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: transparent;
  border: 2.5px solid var(--redink);
  transition: transform var(--t-hover) var(--e-settle),
              background-color var(--t-hover) var(--e-quart);
}
.bday-dot[aria-current="true"] { background: none; transform: none; }
.bday-dot[aria-current="true"]::before { background: var(--red); transform: scale(1.16); }
.bday-dot:hover { transform: none; }
.bday-dot:hover::before { transform: scale(1.2); }
.bday-dots { gap: 2px; }

/* "Book Your Visit" sits inside a .zp-fact chip but was only 91x22 itself,
   so the tappable area was smaller than the thing that looks tappable */
.zp-fact a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: -11px 0;            /* fill the chip without changing its height */
}

/* AED is a unit beside a large figure, but 11px is below the floor. The
   original declaration is .ptable .aed, so this has to match that weight. */
.ptable .aed, .aed { font-size: 11.5px; }

/* Between the burger breakpoint and the desktop layout the full nav shows on
   what is usually a touch screen, where 30px rows are too small to hit. */
@media (min-width: 901px) and (max-width: 1100px) {
  .nav-links .nav-top {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .nav-sub a { min-height: 44px; }
}

/* --------------------------------------------------------------------------
   Safety net above the burger breakpoint.
   The scroll lock is applied by JS as an inline style on <body>, and the
   burger is display:none from 901px up. If a viewport change ever fails to
   reach the resize handler, the page would be left dimmed and unscrollable
   with nothing on screen to close it. CSS undoes all of it at that width, so
   the stuck state cannot exist regardless of what JS did or did not hear.
   -------------------------------------------------------------------------- */
@media (min-width: 901px) {
  html.nav-locked, body.nav-locked {
    overflow: visible !important;
    position: static !important;
    top: auto !important;
    width: auto !important;
    touch-action: auto !important;
  }
  .nav-scrim { display: none !important; }
}

@media (max-width: 900px) {
  /* pushed to the foot of the sheet, so the empty lower half becomes the
     place the two things people actually want live: booking and contact */
  .nav-sheet-foot {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-top: auto;                /* sits at the bottom however short the list */
    padding: 26px 24px 6px 26px;
  }
  .nav-sheet-foot::before {
    content: "";
    align-self: stretch;
    height: 2px;
    margin-bottom: 12px;
    background: repeating-linear-gradient(90deg,
      rgba(140, 31, 12, .28) 0 7px, transparent 7px 14px);
  }
  .nav-sheet-foot .btn {
    width: 100%;
    justify-content: center;
    min-height: 52px;
  }
  .nav-sheet-contact {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ink-soft);
    border: none;
    padding: 0;
  }
  .nav-sheet-contact:hover, .nav-sheet-contact:focus-visible { color: var(--redink); }
  /* the footer animates in with the rows */
  .nav-links > .nav-sheet-foot {
    opacity: 0;
    transform: translate3d(14px, 0, 0);
    transition: opacity .3s var(--e-quart), transform .34s var(--e-expo);
  }
  .nav.nav-open .nav-links > .nav-sheet-foot {
    opacity: 1;
    transform: none;
    transition-delay: .34s;
  }
  html.js-anim.is-loaded .nav-links > .nav-sheet-foot { animation: none; }
}

/* ==========================================================================
   FOOTER LINKS
   These twelve items always looked like navigation but were plain <li> text.
   Nine now have real destinations; three (Accessibility, the Instagram handle,
   Careers) have no page yet and stay as text. Because the two kinds sit side
   by side, the links need to be visibly clickable, and at 21px they were under
   the 24px minimum for a pointer target.
   ========================================================================== */
.f-list a {
  display: inline-block;
  padding: 4px 0;                    /* 21px -> 29px, clear of the 24px floor */
  color: inherit;
  text-decoration: none;
  /* a resting underline is what separates the nine links from the three plain
     items. Dimming the plain ones instead was tried and measured 4.47:1,
     just under AA, so the distinction is carried by the links gaining
     something rather than the text losing contrast. */
  border-bottom: 1.5px solid rgba(243, 207, 131, .34);
  transition: color var(--t-hover) var(--e-quart),
              border-color var(--t-hover) var(--e-quart);
}
@media (hover: hover) {
  .f-list a:hover { color: var(--sand); border-bottom-color: var(--sand); }
}
.f-list a:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ==========================================================================
   PRE-LAUNCH: BOOKING NOT YET OPEN
   --------------------------------------------------------------------------
   Client asked for the site to read as "coming soon" rather than "book now"
   while online booking is still being set up.

   Only the transactional buttons change: Book Now, Buy a pass, Book Your
   Space. Navigation (Discover More, See tickets and passes, See Our Packages)
   and the enquiry buttons still work and still matter, so they are untouched.

   These are rendered as <span>, not <a>, so they are not clickable, not
   focusable and not announced as links. They keep the exact geometry of .btn
   so no layout shifts: same padding, radius, border width and font. What
   changes is emphasis — a dashed edge and a flat fill read as "not yet"
   rather than "press me".

   To switch booking on: delete this block and revert the spans to anchors.
   Every one is marked data-soon so they are trivial to find.
   ========================================================================== */
.btn-soon {
  background: var(--paper);
  color: var(--redink);
  border-color: var(--redink);
  border-style: dashed;
  box-shadow: none;
  cursor: default;
  transform: none;
}
/* the hover and press states belong to something you can press */
.btn-soon:hover,
.btn-soon:active {
  transform: none;
  box-shadow: none;
  background: var(--paper);
  color: var(--redink);
}
/* a small dot, so the label is not the only signal */
.btn-soon::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--orange);
}
/* The dash stays redink on every ground. Against the red band and the dark
   sheet it is the paper fill, not the border, that separates the shape from
   what is behind it, and an orange dash there measured 2.11:1 — muddy, and
   below the 3:1 boundary threshold. Redink on paper is 7.68:1 throughout. */
/* the sticky bar exists only to drive booking, so while booking is closed it
   is a notice rather than a button */
/* .sticky-cta .btn is display:block, which would drop the flex context and
   collapse the ::before dot to zero. Keep flex and centre it instead. */
.sticky-cta .btn-soon {
  display: flex;
  width: 100%;
  justify-content: center;
}

/* ==========================================================================
   PRE-LAUNCH: PLACEHOLDER IMAGERY HIDDEN
   --------------------------------------------------------------------------
   Two grids are hidden, for two different reasons.

   .cafe-gallery — waiting on real café photography.

   .ig-grid — the section heading links to @carnival.play, so the grid below it
   must only ever show that account's actual posts. It ships empty and hidden;
   js/main.js fills it from instagram.php (the official Instagram API, cached
   server side) and adds .is-live to #instagram once the images have loaded.
   If the feed is unavailable the section stays as heading only, never as a
   grid of stand-in pictures pretending to be a feed.

   These hide the grid CONTAINERS, not the <img> elements. The cells carry
   their own fill, border and shadow, so hiding only the images would leave
   empty coloured squares rather than nothing.

   Markup is untouched. To bring either back, drop its selector from both rules
   below. When .ig-grid returns, its .sec-head override must go too, or the
   heading will sit flush against the grid.
   ========================================================================== */
#instagram .ig-grid,
#cafe .cafe-gallery {
  display: none;
}
/* .sec-head's 44px margin-bottom separates the heading from the grid beneath
   it. With the grid gone that margin is an orphaned gap on top of the
   section's own 64px padding, so the section reads as a hole. Zero it. */
#instagram .sec-head,
#cafe .sec-head {
  margin-bottom: 0;
}
/* the live Instagram feed has arrived: show the grid, give the heading its gap back */
#instagram.is-live .ig-grid {
  display: grid;
}
#instagram.is-live .sec-head {
  margin-bottom: 44px;
}
/* under six posts: one row of three, kept to roughly the width it would
   have as half of the full six-across grid so the tiles do not balloon */
#instagram.is-live .ig-grid--short {
  grid-template-columns: repeat(3, 1fr);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   FORM SPAM PROTECTION
   --------------------------------------------------------------------------
   The honeypot field. Deliberately NOT display:none — that is the first thing
   a scraper checks before deciding whether to fill a field. Moving it out of
   the viewport keeps it in the layout tree and in the form's field list, so a
   bot reading the DOM sees an ordinary text input. Humans never see or reach
   it: it is off-screen, aria-hidden, and tabindex="-1".
   ========================================================================== */
.cv-hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   reCAPTCHA badge.
   Google's badge is fixed bottom-right, where the WhatsApp button and the
   sticky bar already sit. Their terms allow hiding it provided the notice
   below appears in the form, which it does (.pg-form-legal).
   -------------------------------------------------------------------------- */
.grecaptcha-badge {
  visibility: hidden;
}

.pg-form-legal {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.pg-form-legal a {
  color: var(--redink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (hover: hover) {
  .pg-form-legal a:hover { color: var(--orange-ink); }
}
.pg-form-legal a:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Submit button while the request is in flight. */
.btn[aria-busy="true"] {
  opacity: .72;
  cursor: progress;
}

/* Server-side error message, shown above the submit button. */
.pg-form-error,
.signup-fail {
  display: none;
  margin: 12px 0 0;
  padding: 10px 14px;
  border: 2px dashed var(--redink);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--redink);
  font-size: 14px;
  font-weight: 700;
}
.pg-form.has-error .pg-form-error,
.signup.has-error .signup-fail {
  display: block;
}

/* .signup is a flex ROW: the field and the button sit side by side. Anything
   else added as a child becomes a third column and squeezes them, which is what
   happened when the notice went in. Both the notice and the error message are
   therefore forced onto their own full-width lines, and `order` keeps the
   field and button together on the first line regardless of source order.
   .signup-fail had the same latent problem: it is display:none until an error
   appears, so it would only have broken the layout at the worst moment. */
.signup {
  flex-wrap: wrap;
}
.signup-field,
.signup .btn {
  order: 1;
}
.signup-fail {
  order: 2;
  flex: 0 0 100%;
}
.signup-legal {
  order: 3;
  flex: 0 0 100%;
}

/* Notice required wherever the reCAPTCHA badge is hidden. The signup sits on
   the dark footer band, so it needs its own colours rather than .pg-form-legal's. */
.signup-legal {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--sand);
  opacity: .9;
}
.signup-legal a {
  color: var(--sand);
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (hover: hover) {
  .signup-legal a:hover { color: var(--orange-on-night); }
}
.signup-legal a:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Address line under the map button on Visit Us. */
.pg-map-note {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.pg-map-note a {
  color: var(--redink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (hover: hover) {
  .pg-map-note a:hover { color: var(--orange-ink); }
}
.pg-map-note a:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
  border-radius: 3px;
}

/* The @carnival.play heading on the home page is now a link to Instagram.
   The global `a { color: inherit }` keeps it looking exactly like the heading,
   which is right at rest but gives no sign it can be clicked. An underline on
   hover supplies that without touching the resting design. */
#instagram .h2 a {
  text-decoration-color: transparent;
  text-underline-offset: 6px;
  transition: text-decoration-color var(--t-hover) var(--e-quart);
}
@media (hover: hover) {
  #instagram .h2 a:hover {
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-decoration-color: var(--orange);
  }
}
#instagram .h2 a:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 6px;
  border-radius: 6px;
}