/* ==========================================================================
   KARIN'S EVENTS - "Editorial Playground"
   A magazine-quality design system for a children's events venue in Băneasa.
   Fraunces (display, variable serif) + DM Sans (body) + Caveat (handwritten).
   ========================================================================== */

:root {
  /* PALETTE - anchored to Karin's brand colors from the Canva reference */
  --paper:        #F3F1E4;   /* page background - brand cream (matches canva) */
  --paper-2:      #EBE7D2;   /* section alt */
  --paper-3:      #DFD9BD;   /* deeper sand - accents on alt sections */
  --ink:          #111418;   /* primary text - almost black */
  --ink-2:        #3A3D40;   /* secondary text */
  --ink-3:        #646569;   /* tertiary text / labels - matches canva gray */
  --line:         rgba(17,20,24,0.10);
  --line-strong:  rgba(17,20,24,0.20);

  /* Brand program colors (color-coded program system) */
  --moss:         #76B947;   /* SUMMER CAMP lime - brand green */
  --moss-deep:    #2F5233;   /* deep forest - for text on green */
  --moss-soft:    #D6E5BD;   /* soft green tint for backgrounds */

  --sun:          #FBC800;   /* primary yellow */
  --sun-deep:     #E0AE00;
  --sun-soft:     #FFEDCE;

  --coral:        #E36329;   /* SLEEPOVER orange - brand */
  --coral-deep:   #B14829;
  --coral-soft:   #F8D9C7;

  --sky:          #28B8DA;   /* B-DAYS cyan - brand blue */
  --sky-deep:     #1B8AB0;
  --sky-soft:     #C2EAF3;

  --berry:        #8E3A52;

  /* TYPE SCALE - modular 1.25 */
  --t-12:  0.75rem;
  --t-14:  0.875rem;
  --t-16:  1rem;
  --t-18:  1.125rem;
  --t-20:  1.25rem;
  --t-24:  1.5rem;
  --t-30:  1.875rem;
  --t-36:  2.25rem;
  --t-48:  3rem;
  --t-60:  3.75rem;
  --t-72:  4.5rem;
  --t-96:  6rem;
  --t-128: 8rem;

  /* SPACING - 4/8/16/24/32/48/64/96/128 */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  16px;
  --s-4:  24px;
  --s-5:  32px;
  --s-6:  48px;
  --s-7:  64px;
  --s-8:  96px;
  --s-9:  128px;
  --s-10: 192px;

  /* RADII */
  --r-sm: 6px;
  --r-md: 14px;
  --r-lg: 24px;
  --r-xl: 36px;
  --r-pill: 999px;

  /* SHADOWS - paper feel, never harsh */
  --sh-sm: 0 1px 2px rgba(31,42,34,0.06), 0 2px 6px rgba(31,42,34,0.04);
  --sh-md: 0 4px 12px rgba(31,42,34,0.08), 0 12px 32px rgba(31,42,34,0.06);
  --sh-lg: 0 12px 24px rgba(31,42,34,0.10), 0 32px 64px rgba(31,42,34,0.10);
  --sh-photo: 0 30px 60px -20px rgba(31,42,34,0.35), 0 8px 18px rgba(31,42,34,0.10);
  --sh-inset: inset 0 1px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.05);

  /* MOTION - Emil-tier easings */
  --ease: cubic-bezier(0.23, 1, 0.32, 1);          /* strong ease-out */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);  /* strong ease-in-out */
  --ease-ios: cubic-bezier(0.32, 0.72, 0, 1);      /* iOS drawer */

  --container: 1280px;
  --container-narrow: 920px;
}

/* SCROLL PROGRESS INDICATOR — removed per design request. Keep a
   display:none rule so any stale element from browser cache stays hidden. */
.scroll-progress { display: none !important; }

/* PAPER GRAIN TEXTURE - fixed background for tactile depth ------------ */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.045;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
}

/* RESET ---------------------------------------------------------------- */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: var(--t-16);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  font-weight: 400;
}
img,svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; margin: 0; }
input,textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--moss); outline-offset: 3px; border-radius: 3px; }
/* Dark-on-light surfaces get ink outline for better contrast */
.hero-bleed :focus-visible, .countdown :focus-visible, .footer :focus-visible, .tagline-band :focus-visible {
  outline-color: var(--sun);
}

/* SELECTION COLOR - brand moss with ink text --------------------- */
::selection { background: var(--sun); color: var(--ink); }
::-moz-selection { background: var(--sun); color: var(--ink); }

/* Ensure all interactive elements meet mobile tap target recommendation */
@media (max-width: 768px) {
  a, button, .btn, [role="button"] {
    min-height: 44px;
  }
  /* Exclude small decorative buttons that are paired with siblings and sized intentionally */
  .hero-bleed__dot, .hero-bleed__nav, .form__chip,
  .top-marquee__item, .top-marquee__icon, .nav__mobile-foot a,
  .cookie-banner button, .age-pill a, .kpi-card button,
  .btn-reset, .btn-icon, [data-noclamp],
  .footer__col a, .footer__contact-list a, .footer__contact-list li,
  .footer__socials a {
    min-height: 0;
  }
  a:not([class]), .footer__col a, .footer__contact-list a {
    padding: 2px 0;
  }
}

/* CUSTOM SCROLLBAR - brand-colored thumb -------------------------- */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--moss) var(--paper-2);
}
*::-webkit-scrollbar { width: 12px; height: 10px; }
*::-webkit-scrollbar-track {
  background: var(--paper-2);
  border-left: 1px solid var(--line);
}
*::-webkit-scrollbar-corner { background: var(--paper-2); }
*::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, var(--moss), var(--moss-deep));
  border-radius: 999px;
  border: 3px solid var(--paper-2);
  min-height: 40px;
}
*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, var(--coral), var(--coral-deep));
}

/* GLOBAL TYPE REFINEMENTS --------------------------------------- */
html {
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  scroll-padding-top: 100px;
  -webkit-tap-highlight-color: rgba(251,200,0,0.3);
  color-scheme: light;
}
body { font-feature-settings: "kern" 1, "liga" 1, "calt" 1; }
h1, h2, h3, .chunky, .hero-bleed__title, .eyebrow, .legal-hero__title {
  text-wrap: balance;
  font-kerning: normal;
  font-optical-sizing: auto;
}
p, li { text-wrap: pretty; }
.stat-cell__num, .kpi-card__num, .age-pill__num, .pricing-card__price, .stats-row,
.event-card__badge, .top-marquee__item, .ticker, .countdown__num, [class*="price"], [class*="__num"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* PAGE FADE-IN ON LOAD ------------------------------------------ */
@keyframes pageFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
body { animation: pageFadeIn .5s ease-out both; }
body.is-leaving {
  opacity: 0;
  animation: none;
  transition: opacity .22s ease-in;
}
@media (prefers-reduced-motion: reduce) { body { animation: none; } body.is-leaving { transition: none; } }

/* TYPOGRAPHY ----------------------------------------------------------- */
.serif {
  font-family: "Anton", "Bebas Neue", "Fraunces", sans-serif;
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1.0;
  text-transform: uppercase;
}
.script {
  font-family: "Caveat", cursive;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.1;
}
.eyebrow {
  font-family: "DM Sans", sans-serif;
  font-size: var(--t-12);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.eyebrow .dot {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--coral);
  border-radius: 50%;
  margin-right: 10px;
  vertical-align: middle;
  margin-top: -2px;
}

h1,h2,h3,h4,h5,h6 { margin: 0; }

/* LAYOUT --------------------------------------------------------------- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--s-4); }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--s-4); }
@media (min-width: 768px) { .container, .container-narrow { padding: 0 var(--s-6); } }

.section { padding: var(--s-8) 0; }
.section--tight { padding: var(--s-7) 0; }
.section--alt {
  background-color: var(--paper-2);
  background-image: radial-gradient(circle at center, rgba(17,20,24,0.04) 1px, transparent 1.5px);
  background-size: 18px 18px;
}
/* Pages where the body background should match the section--alt paper-2 tone
   (so the area behind the fixed nav blends seamlessly with the content below). */
html:has(body.body--paper-2),
body.body--paper-2 {
  background-color: var(--paper-2) !important;
  background-image: radial-gradient(circle at center, rgba(17,20,24,0.04) 1px, transparent 1.5px) !important;
  background-size: 18px 18px !important;
}
.section--ink { background: var(--ink); color: var(--paper); }
.section--ink .eyebrow { color: rgba(248,241,228,0.55); }

/* TOP MARQUEE - hot info bar above nav --------------------------- */
.top-marquee {
  background: var(--ink);
  color: var(--paper);
  padding: 10px 0;
  position: sticky;
  top: 0;
  z-index: 51;
  overflow: hidden;
  border-bottom: 1px solid rgba(248,241,228,0.1);
  /* Keep the sticky container on its own paint layer so the animated
     child underneath doesn't cause repaints every scroll frame. */
  contain: layout paint;
}
.top-marquee::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--coral), var(--sun), var(--moss), var(--sky), var(--coral));
  opacity: 0.6;
}
/* Marquee math: the JS duplicates innerHTML once, then translateX(-50%)
   loops. For that to land EXACTLY at each cycle (no "half-gap jump"), the
   spacing between items has to travel WITH the item — so we use
   margin-right on each item instead of flex `gap` on the track. Flex gap
   is applied between items but NOT after the last item, so -50% ends up
   off by half a gap and you see a visible jump every loop. */
.top-marquee__track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  width: max-content;
  animation: tmscroll 38s linear infinite;
  font-size: var(--t-12);
  letter-spacing: 0.06em;
  font-weight: 500;
  font-family: "DM Sans", sans-serif;
  /* Force the animated track onto its own GPU layer so scroll-induced
     repaints on the sticky parent don't reset the animation tick. */
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}
.top-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(248,241,228,0.92);
  /* Margin-right replaces track's flex gap so the spacing exists AFTER
     every item, including the last original — makes the -50% loop seamless. */
  margin-right: var(--s-5);
  flex-shrink: 0;
}
.top-marquee__item .dot {
  width: 4px; height: 4px;
  background: var(--sun);
  border-radius: 50%;
}
.top-marquee__item svg { width: 18px; height: 18px; flex-shrink: 0; }
.top-marquee__icon {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
}
.top-marquee__icon svg { width: 12px; height: 12px; }
.top-marquee__icon--phone { background: var(--moss); color: #fff; }
.top-marquee__icon--whatsapp {
  background: #25D366;
  color: #fff;
  box-shadow: 0 0 0 0 rgba(37,211,102,0.5);
  animation: whatsappNudge 4s ease-in-out infinite;
}
@keyframes whatsappNudge {
  0%, 92%, 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0.5); }
  96% { box-shadow: 0 0 0 6px rgba(37,211,102,0); }
}
@media (prefers-reduced-motion: reduce) { .top-marquee__icon--whatsapp { animation: none; } }
.top-marquee__icon--insta { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); color: #fff; }
.top-marquee__icon--fb { background: #1877F2; color: #fff; }
.top-marquee__icon--tiktok { background: #010101; color: #fff; position: relative; }
.top-marquee__icon--tiktok::after { content: ""; position: absolute; inset: 0; border-radius: 999px; background: radial-gradient(circle at 30% 30%, rgba(37,244,238,0.45) 0%, transparent 55%), radial-gradient(circle at 70% 70%, rgba(254,44,85,0.45) 0%, transparent 55%); mix-blend-mode: screen; pointer-events: none; }
.top-marquee__item a { color: var(--sun); border-bottom: 1px dotted rgba(251,200,0,0.4); }
.top-marquee__item--logo {
  font-family: "Anton", sans-serif;
  letter-spacing: 0.12em;
  font-size: var(--t-14);
  color: var(--paper);
  text-transform: uppercase;
}
.top-marquee__item .pill {
  background: var(--coral);
  color: #fff;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(227,99,41,0.4);
  animation: pillNudge 4s ease-in-out infinite;
}
@keyframes pillNudge {
  0%, 90%, 100% { transform: scale(1) rotate(0); }
  95% { transform: scale(1.12) rotate(-3deg); }
}
@media (prefers-reduced-motion: reduce) { .top-marquee__item .pill { animation: none; } }
@keyframes tmscroll { to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .top-marquee__track { animation: none; } }

/* When top marquee exists, nav sticks below it */
.top-marquee + .nav { top: 36px; }
/* Marquee removed globally — make sure any leftover .top-marquee never paints */
.top-marquee { display: none !important; }

/* NAVIGATION ----------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  /* Parent is fully transparent so the pill alone is the frosted-glass
     surface — eliminates the double backdrop-filter stack that was
     causing composite-layer flicker during scroll. */
  background: transparent;
  border-bottom: 0;
  /* No more animated background / box-shadow on the PARENT — the scroll
     state only swaps the pill's fill, which happens on a stable GPU layer. */
  transition: padding .35s var(--ease);
}
.nav.is-scrolled {
  /* All previous "paint" changes moved down to .nav__pill so the parent
     never triggers a repaint on scroll. Kept empty for symmetry / hooks. */
}
/* Logo size stays FIXED across scroll states — was jumping from 100→110px
   which caused a visible layout shift the moment the scroll threshold
   fired. Single canonical size keeps scrolling butter-smooth. */
@media (max-width: 768px) {
}
/* Nav logo stays the same size on scroll */
.nav__inner {
  max-width: 100%;
  margin: 0;
  padding: 0 var(--s-4);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4);
}
@media (min-width: 768px) { .nav__inner { padding: 0 var(--s-5); } }

.nav__brand {
  display: flex; align-items: center; gap: 12px;
  font-family: "Anton", "Bebas Neue", sans-serif;
  font-weight: 600;
  font-size: var(--t-20);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.nav__brand {
  display: flex;
  align-items: center;
  align-self: center;
  height: 130px;
}
.nav__brand img {
  position: relative;
  height: 150px; width: 150px;
  object-fit: contain;
  margin: -10px 0;
  filter: drop-shadow(0 8px 20px rgba(17,20,24,0.25));
  transition: height .3s var(--ease), width .3s var(--ease), transform .4s var(--ease), filter .3s var(--ease);
  cursor: pointer;
}
.nav__brand:hover img {
  transform: rotate(-6deg) scale(1.05);
  filter: drop-shadow(0 12px 28px rgba(17,20,24,0.35));
}
@media (max-width: 768px) { .nav__brand img { height: 110px; width: 110px; } }
/* Nav stays the same size on scroll */
.nav__brand small {
  display: block;
  font-family: "DM Sans", sans-serif;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 2px;
  font-weight: 500;
}

.nav__menu { display: none; gap: var(--s-6); align-items: center; margin-right: auto; margin-left: var(--s-6); }
@media (min-width: 960px) { .nav__menu { display: flex; } }
.nav__link {
  font-size: var(--t-18);
  font-weight: 600;
  color: var(--ink);
  position: relative;
  padding: 8px 0;
  transition: color .2s var(--ease);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.nav__link::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: 0; height: 3px; border-radius: 2px;
  background: linear-gradient(to right, var(--coral), var(--moss));
  transition: width .3s var(--ease), left .3s var(--ease);
  transform: translateY(1px);
}
.nav__link:hover {
  color: var(--ink);
  letter-spacing: 0.06em;
}
.nav__link:hover::after, .nav__link.is-active::after { width: 100%; left: 0; }
.nav__link.is-active::after { background: linear-gradient(to right, var(--moss), var(--coral)); }
.nav__link.is-active { color: var(--ink); }

.nav__cta {
  display: none;
  background: var(--coral);
  color: #fff;
  padding: 12px 22px;
  border-radius: var(--r-pill);
  font-size: var(--t-14);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease), gap .3s var(--ease);
  box-shadow: 0 6px 18px rgba(227,99,41,0.4), 0 1px 0 rgba(255,255,255,0.2) inset;
  white-space: nowrap;
}
@media (min-width: 960px) { .nav__cta { display: inline-flex; align-items: center; gap: 10px; } }
.nav__cta:hover {
  background: var(--coral-deep);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(227,99,41,0.55), 0 1px 0 rgba(255,255,255,0.2) inset;
  gap: 14px;
}
.nav__cta:active { transform: translateY(0) scale(0.97); }
.nav__cta__dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--sun);
  box-shadow: 0 0 0 0 rgba(251,200,0,0.55);
  animation: navCtaPulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes navCtaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(251,200,0,0.6); }
  50% { box-shadow: 0 0 0 6px rgba(251,200,0,0); }
}
.nav__cta svg {
  width: 14px; height: 14px;
  transition: transform .3s var(--ease);
}
.nav__cta:hover svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .nav__cta__dot { animation: none; } }

.nav__hamburger {
  display: inline-flex; flex-direction: column; gap: 6px;
  padding: 10px;
  background: transparent;
  border-radius: 10px;
  position: relative;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  transition: background .25s var(--ease);
}
.nav__hamburger:hover { background: rgba(17,20,24,0.05); }
@media (min-width: 960px) { .nav__hamburger { display: none; } }
.nav__hamburger span {
  width: 28px; height: 3px; background: var(--ink); border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s var(--ease), top .3s var(--ease), width .3s var(--ease), margin .3s var(--ease);
}
.nav__hamburger span:nth-child(2) { width: 22px; margin-left: 6px; }
.nav__hamburger:hover span:nth-child(2) { width: 28px; margin-left: 0; }

/* OPEN state → clean centered X. Spans become absolutely positioned so the two
   diagonals cross perfectly at the button center instead of being offset. */
.nav.is-open .nav__hamburger,
.nav__mobile.is-open ~ .nav .nav__hamburger {
  /* keep flex layout, but absolute-position the spans */
}
.nav.is-open .nav__hamburger span,
.nav__mobile.is-open ~ .nav .nav__hamburger span {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  width: 28px;
  height: 3px;
  transform-origin: center center;
}
.nav.is-open .nav__hamburger span:nth-child(1),
.nav__mobile.is-open ~ .nav .nav__hamburger span:nth-child(1) {
  transform: translate(-50%, -50%) rotate(45deg);
}
.nav.is-open .nav__hamburger span:nth-child(2),
.nav__mobile.is-open ~ .nav .nav__hamburger span:nth-child(2) {
  opacity: 0;
  transform: translate(-50%, -50%) scaleX(0.2);
}
.nav.is-open .nav__hamburger span:nth-child(3),
.nav__mobile.is-open ~ .nav .nav__hamburger span:nth-child(3) {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.nav__mobile {
  display: none;
}
@media (max-width: 959px) {
  .nav__mobile {
    /* Sits BELOW the fixed nav+marquee so HOME (first item) isn't hidden.
       Nav (120px) + top-marquee (~32px) = ~152px total bar height. */
    position: fixed; inset: 152px 0 0 0;
    background: var(--paper);
    padding: var(--s-5) var(--s-4) var(--s-7);
    transform: translateY(-110%);
    visibility: hidden;
    opacity: 0;
    transition: transform .4s var(--ease), visibility .4s, opacity .3s;
    display: flex; flex-direction: column; gap: var(--s-3);
    z-index: 40;
    overflow-y: auto;
    background-image:
      radial-gradient(circle at 90% 10%, rgba(118,185,71,0.08) 0, transparent 40%),
      radial-gradient(circle at 10% 90%, rgba(227,99,41,0.08) 0, transparent 40%);
  }
  .nav.is-open .nav__mobile,
  .nav__mobile.is-open { transform: translateY(0); visibility: visible; opacity: 1; }
}
/* Ultra-narrow screens: ever-so-slightly tighter nav => smaller top offset */
@media (max-width: 380px) {
  .nav__mobile { inset: 132px 0 0 0; }
}
.nav__mobile a {
  font-family: "Anton", "Bebas Neue", sans-serif;
  font-size: var(--t-30);
  letter-spacing: -0.02em;
  padding: 14px 4px;
  border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
  position: relative;
  transition: color .25s var(--ease), padding-left .25s var(--ease), border-color .25s var(--ease);
}
.nav__mobile a::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 0; height: 3px;
  border-radius: 2px;
  background: var(--coral);
  transform: translateY(-50%);
  transition: width .3s var(--ease);
}
.nav__mobile a:hover,
.nav__mobile a:active {
  color: var(--coral);
  padding-left: 14px;
  border-bottom-color: var(--line-strong);
}
.nav__mobile a:hover::before,
.nav__mobile a:active::before { width: 6px; }
.nav__mobile a span { font-family: "DM Sans", sans-serif; font-size: var(--t-14); color: var(--ink-3); font-weight: 500; }
.nav__mobile-foot {
  margin-top: auto;
  display: flex; justify-content: space-between; align-items: center;
  padding-top: var(--s-4);
  font-size: var(--t-14);
  color: var(--ink-2);
}

/* Mobile-menu socials row - simple filled brand circles, sits right after the
   last nav link (not pushed to the bottom with margin-top:auto). */
.nav__mobile-socials {
  margin-top: var(--s-4);
  padding: var(--s-4) 0 var(--s-3);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  width: 100%;
}
/* Full reset of inherited .nav__mobile a styles. */
.nav__mobile a.nav__mobile-social {
  width: 50px !important;
  height: 50px !important;
  min-height: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 0 !important;
  color: #fff !important;
  text-shadow: none !important;
  overflow: hidden;
  flex: 0 0 auto;
  transition: transform .2s var(--ease);
}
.nav__mobile a.nav__mobile-social::before,
.nav__mobile a.nav__mobile-social::after { display: none !important; }
.nav__mobile a.nav__mobile-social svg {
  width: 22px;
  height: 22px;
  display: block;
  margin: 0 auto;
}
.nav__mobile a.nav__mobile-social:hover {
  transform: scale(1.1);
  padding-left: 0 !important;
  color: #fff !important;
}

/* Platform-standard brand colors */
.nav__mobile-social--phone { background: var(--moss); }
.nav__mobile-social--whatsapp { background: #25D366; }
.nav__mobile-social--maps {
  background: #FFFFFF;  /* White tile so the multi-color Google Maps logo reads properly */
  border: 1px solid rgba(17, 20, 24, 0.08) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px -2px rgba(17, 20, 24, 0.12) !important;
}
/* The Google Maps SVG uses explicit per-path fills (#EA4335, #FFFFFF, etc.);
   no extra rules needed — HTML fill attributes win over inherited currentColor. */
.nav__mobile-social--fb { background: #1877F2; }
.nav__mobile-social--instagram {
  background: linear-gradient(45deg, #feda75 0%, #fa7e1e 25%, #d62976 50%, #962fbf 75%, #4f5bd5 100%);
}
.nav__mobile-social--tiktok {
  background: #010101;
  position: relative;
  overflow: hidden;
}
.nav__mobile-social--tiktok::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 30% 30%, rgba(37,244,238,0.5) 0%, transparent 55%), radial-gradient(circle at 70% 70%, rgba(254,44,85,0.5) 0%, transparent 55%);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* ==========================================================================
   STORY SECTIONS on /about (Taberele, Sleepovers, Petreceri, Voluntariat).
   Each section shares the same rhythm: eyebrow → title → big stat → intro
   paragraph → "checklist" with brand-colored bullets → callout quote.
   Theme color is controlled per-section via a --theme CSS variable.
   ========================================================================== */
.story-section {
  --theme: var(--moss);
  --theme-deep: var(--moss-deep, #3C7F24);
  --theme-soft: rgba(92, 166, 56, 0.12);
}
.story-section__head {
  text-align: center;
  margin-bottom: var(--s-6);
}
.story-section__eyebrow {
  display: inline-block;
  font-family: "Caveat", cursive;
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--theme-deep);
  margin-bottom: var(--s-2);
  letter-spacing: 0;
}
.story-section__eyebrow--moss  { color: var(--moss-deep, #3C7F24); }
.story-section__eyebrow--coral { color: var(--coral-deep, #C24A20); }
.story-section__eyebrow--sky   { color: var(--sky-deep, #1E88C6); }
.story-section__eyebrow--sun   { color: var(--sun-deep, #C99200); }
.story-section__title {
  font-size: clamp(2rem, 5.5vw, 3.6rem);
  color: var(--ink);
  line-height: 1.05;
}
.story-section__body {
  font-size: var(--t-18);
  line-height: 1.75;
  color: var(--ink-2);
}
.story-section__intro {
  margin: 0 0 var(--s-4);
}
.story-section__intro + .story-section__intro { margin-top: 0; }
.story-section__h {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin: var(--s-5) 0 var(--s-3);
}

/* --- Big stat card at the top of each story --- */
.story-stat {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-5);
  background: linear-gradient(135deg, #fff 0%, var(--theme-soft) 100%);
  border: 1px solid rgba(17, 20, 24, 0.06);
  border-radius: var(--r-lg);
  box-shadow: 0 14px 30px -18px rgba(17, 20, 24, 0.2);
  position: relative;
  overflow: hidden;
}
.story-stat::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: var(--theme);
}
.story-stat--moss  { --theme: #5CA638; --theme-soft: rgba(92, 166, 56, 0.10); }
.story-stat--coral { --theme: #E36329; --theme-soft: rgba(227, 99, 41, 0.10); }
.story-stat--sky   { --theme: #28B8DA; --theme-soft: rgba(40, 184, 218, 0.10); }
.story-stat--sun   { --theme: #FBC800; --theme-soft: rgba(251, 200, 0, 0.14); }
.story-stat__num {
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  color: var(--ink);
  line-height: 1;
  flex-shrink: 0;
}
.story-stat__num span {
  font-size: 0.55em;
  color: var(--theme);
  margin-left: 4px;
  vertical-align: top;
}
.story-stat__lab {
  font-size: var(--t-16);
  color: var(--ink-2);
  font-weight: 500;
  line-height: 1.35;
}

/* --- Checklist with colored circular check icons --- */
.story-checks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 640px) {
  .story-checks { grid-template-columns: 1fr 1fr; gap: 14px 24px; }
}
.story-checks li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid rgba(17, 20, 24, 0.06);
  border-radius: var(--r-pill);
  font-size: var(--t-16);
  color: var(--ink);
  font-weight: 500;
  box-shadow: 0 4px 10px -4px rgba(17, 20, 24, 0.08);
}
.story-checks__dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  flex-shrink: 0;
  background: var(--theme);
}
.story-checks__dot svg { width: 14px; height: 14px; }
.story-checks--moss  { --theme: #5CA638; }
.story-checks--coral { --theme: #E36329; }
.story-checks--sky   { --theme: #28B8DA; }
.story-checks--sun   { --theme: #FBC800; }

/* --- Callout quote block --- */
.story-quote {
  margin-top: var(--s-6);
  padding: var(--s-5) var(--s-5);
  background: var(--paper);
  border: 1px solid rgba(17, 20, 24, 0.06);
  border-left: 5px solid var(--theme, var(--moss));
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  position: relative;
  overflow: hidden;
}
.story-quote::before {
  content: "\201C";
  position: absolute;
  top: -24px; left: 12px;
  font-family: "Anton", sans-serif;
  font-size: 160px;
  line-height: 1;
  color: var(--theme, var(--moss));
  opacity: 0.12;
}
.story-quote__script {
  display: block;
  font-family: "Caveat", cursive;
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--theme-deep, var(--moss-deep, #3C7F24));
  margin-bottom: 6px;
}
.story-quote p {
  margin: 0;
  color: var(--ink);
  font-size: var(--t-18);
  line-height: 1.6;
  font-weight: 500;
}
.story-quote--moss  { --theme: #5CA638; --theme-deep: #3C7F24; }
.story-quote--coral { --theme: #E36329; --theme-deep: #C24A20; }
.story-quote--sky   { --theme: #28B8DA; --theme-deep: #1E88C6; }
.story-quote--sun   { --theme: #FBC800; --theme-deep: #C99200; }

/* --- Sleepovers split (Pentru părinți / Pentru copii) --- */
.story-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
  margin-top: var(--s-6);
}
@media (min-width: 640px) { .story-split { grid-template-columns: 1fr 1fr; gap: var(--s-4); } }
.story-split__card {
  position: relative;
  padding: var(--s-5) var(--s-4);
  background: #fff;
  border: 1px solid rgba(17, 20, 24, 0.06);
  border-radius: var(--r-lg);
  text-align: center;
  box-shadow: 0 12px 28px -16px rgba(17, 20, 24, 0.25);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.story-split__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -16px rgba(17, 20, 24, 0.3);
}
.story-split__icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--theme, var(--coral));
  box-shadow: 0 8px 18px -8px var(--theme, var(--coral));
}
.story-split__icon svg { width: 24px; height: 24px; }
.story-split__card--coral { --theme: #E36329; }
.story-split__card--sun   { --theme: #F2A613; }
.story-split__card--moss  { --theme: #5CA638; }
.story-split__card--sky   { --theme: #28B8DA; }
.story-split__script {
  font-family: "Caveat", cursive;
  font-size: var(--t-24);
  color: var(--theme, var(--coral-deep, #C24A20));
  line-height: 1;
}
.story-split__card p {
  margin: 0;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
}

/* --- Voluntariat journey (Copil → Voluntar → Echipă) --- */
.story-journey {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: var(--s-6);
  padding: var(--s-5) var(--s-3);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), var(--paper));
  border: 1px solid rgba(17, 20, 24, 0.06);
  border-radius: var(--r-lg);
  box-shadow: 0 14px 30px -18px rgba(17, 20, 24, 0.2);
}
.story-journey__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 90px;
  flex: 1 1 auto;
}
.story-journey__icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 10px 22px -10px rgba(17, 20, 24, 0.3),
              inset 0 0 0 2px currentColor;
}
.story-journey__icon svg { width: 28px; height: 28px; }
.story-journey__icon--moss  { color: #5CA638; }
.story-journey__icon--coral { color: #E36329; }
.story-journey__icon--sun   { color: #F2A613; }
.story-journey__icon--sky   { color: #28B8DA; }
.story-journey__label {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(0.95rem, 2.2vw, 1.1rem);
  letter-spacing: 0.06em;
  color: var(--ink);
  text-transform: uppercase;
  text-align: center;
}
.story-journey__arrow {
  display: grid;
  place-items: center;
  color: var(--ink-3);
  flex-shrink: 0;
}
.story-journey__arrow svg { width: 24px; height: 24px; }
@media (max-width: 520px) {
  .story-journey { padding: 18px 10px; gap: 4px; }
  .story-journey__icon { width: 50px; height: 50px; }
  .story-journey__icon svg { width: 22px; height: 22px; }
  .story-journey__arrow svg { width: 18px; height: 18px; }
}


/* ==========================================================================
   PROMISE GRID — the 4 "Pentru noi, copilăria trebuie să fie" cards on
   /about. Each card has a brand-colored icon, the keyword in Anton, and
   a micro-caption for texture. Frosted-glass panel over the coral hero.
   ========================================================================== */
.promise-grid {
  margin-top: var(--s-7);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 768px) {
  .promise-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }
}
.promise-card {
  position: relative;
  padding: 22px 16px 18px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 100%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 14px 30px -16px rgba(17, 20, 24, 0.35);
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.promise-card::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% -20%, rgba(255, 255, 255, 0.25) 0%, transparent 55%);
  pointer-events: none;
}
.promise-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 22px 44px -18px rgba(17, 20, 24, 0.45);
}
.promise-card__icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  flex-shrink: 0;
  box-shadow:
    0 8px 20px -10px rgba(17, 20, 24, 0.4),
    inset 0 0 0 2px rgba(255, 255, 255, 0.95);
  position: relative;
  z-index: 1;
}
.promise-card__icon svg { width: 26px; height: 26px; }
.promise-card--sun   .promise-card__icon { color: var(--sun-deep, #E8A700); }
.promise-card--moss  .promise-card__icon { color: var(--moss, #5CA638); }
.promise-card--sky   .promise-card__icon { color: var(--sky-deep, #1E88C6); }
.promise-card--coral .promise-card__icon { color: var(--coral-deep, #C24A20); }
.promise-card__word {
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  color: #fff;
  line-height: 1;
  letter-spacing: 0.01em;
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 8px rgba(17, 20, 24, 0.25);
}
.promise-card__sub {
  font-family: "Caveat", cursive;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.2;
  position: relative;
  z-index: 1;
}
.promise-card:nth-child(4) .promise-card__word {
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  line-height: 1.1;
}
@media (max-width: 520px) {
  .promise-card { padding: 18px 12px 14px; }
  .promise-card__icon { width: 46px; height: 46px; }
  .promise-card__icon svg { width: 22px; height: 22px; }
  .promise-card__sub { font-size: 14px; }
}

/* ==========================================================================
   LIVE SOCIAL EMBEDS — 3 containers that hold Instagram / TikTok / Facebook
   official embeds. Each embed is rendered by the platform's own JS SDK
   so likes/comments/views are always live. The containers size the cards
   consistently while letting each platform paint its own content inside.
   ========================================================================== */
.social-embeds {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: start;
  justify-items: center;
}
@media (max-width: 960px) {
  .social-embeds {
    grid-template-columns: 1fr;
    max-width: 420px;
    gap: 20px;
  }
}
.social-embed {
  width: 100%;
  max-width: 400px;
  /* Uniform card height tuned to the shortest native iframe (IG/FB) so
     there's no white padding at the bottom. TikTok's vertical player is
     taller — we clip its lower edge slightly so the row stays the same
     visual height across all three platforms. */
  height: 620px;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 30px -14px rgba(17, 20, 24, 0.25);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.social-embed:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 44px -16px rgba(17, 20, 24, 0.32);
}
/* Any iframe the platform's SDK injects fills its card completely */
.social-embed > iframe {
  width: 100% !important;
  height: 100% !important;
  display: block;
  border: 0;
}
/* TikTok card is dark (native player background). Slightly taller than
   the other two so the native Player v1 controls — including the mute
   toggle — stay fully visible at the bottom of the video. */
.social-embed--tiktok {
  background: #000;
  height: 720px;
}
/* Skeleton shimmer while the platform's embed script initialises */
.social-embed[data-state="loading"]::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(110deg, #f5f5f5 8%, #ececec 18%, #f5f5f5 33%);
  background-size: 200% 100%;
  animation: socialShimmer 1.6s linear infinite;
  z-index: 1;
  pointer-events: none;
}
.social-embed--tiktok[data-state="loading"]::before {
  background: linear-gradient(110deg, #151515 8%, #1e1e1e 18%, #151515 33%);
  background-size: 200% 100%;
}
@keyframes socialShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/* Empty state: no URL configured for this platform yet */
.social-embed[data-state="empty"] {
  display: grid;
  place-items: center;
  padding: 40px 22px;
  color: var(--ink-3);
  text-align: center;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  min-height: 280px;
  background: #f9f6ea;
  border: 1px dashed #dcd6bf;
}
.social-embed[data-state="empty"] .social-embed__empty-title {
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}
/* Let the platform widgets occupy the card fully */
.social-embed iframe,
.social-embed blockquote { max-width: 100% !important; margin: 0 auto !important; }
.social-embed .instagram-media,
.social-embed .tiktok-embed,
.social-embed .fb-post,
.social-embed .fb_iframe_widget { width: 100% !important; }

/* HERO BLEED - full-bleed photo with overlay (Canva style) ----------- */
.hero-bleed {
  position: relative;
  min-height: clamp(560px, 90vh, 880px);
  overflow: hidden;
  isolation: isolate;
  box-shadow: inset 0 -8px 24px -10px rgba(17,20,24,0.15);
}

/* Floating CSS sparkles drifting across the hero */
.hero-bleed::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  /* Sparkles removed - they were rendering as distracting dots on photo subjects */
  display: none;
}
@keyframes heroSparkleDrift {
  0%, 100% { opacity: 0.5; transform: translate(0, 0); }
  33% { opacity: 1; transform: translate(4px, -6px); }
  66% { opacity: 0.7; transform: translate(-5px, 4px); }
}
@media (prefers-reduced-motion: reduce) { .hero-bleed::after { animation: none; opacity: 0.6; } }
.hero-bleed__bg, .hero-bleed__slideshow {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: -2;
}
.hero-bleed__bg { object-fit: cover; }

/* Bottom gradient shade for text legibility */
.hero-bleed__shade-bottom {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 55%;
  background: linear-gradient(to bottom, transparent 0, rgba(17,20,24,0.55) 100%);
  pointer-events: none;
  z-index: 1;
}

/* SLIDESHOW - JS-controlled crossfade (zoom/Ken Burns disabled per user) */
.hero-bleed__slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  transform: none;
  transition: opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
  pointer-events: none;
  /* Highest-quality scaling when the browser scales these large source JPGs */
  image-rendering: high-quality;
  image-rendering: -webkit-optimize-contrast;
}
.hero-bleed__slide.is-active {
  opacity: 1;
  animation: none;
  transform: none;
}

/* Slide indicator dots */
/* MINIMAL slide indicator — no container, no glow, no progress fill.
   Just clean dots. Active = white pill, inactive = soft white dot.
   A subtle drop-shadow keeps them legible on bright photos. */
.hero-bleed__dots {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 4;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 0;
  box-shadow: none;
}
.hero-bleed__dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  position: relative;
  border: 0;
  padding: 0;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
  transition:
    background .35s cubic-bezier(.22, 1, .36, 1),
    width .45s cubic-bezier(.22, 1, .36, 1),
    opacity .3s var(--ease);
}
.hero-bleed__dot:hover { background: rgba(255, 255, 255, 0.85); }
.hero-bleed__dot.is-active {
  width: 22px;
  background: #fff;
}
/* Kill the old yellow progress fill */
.hero-bleed__dot.is-active::before { display: none; }

@media (max-width: 600px) {
  .hero-bleed__dots { bottom: 18px; gap: 8px; }
  .hero-bleed__dot { width: 6px; height: 6px; }
  .hero-bleed__dot.is-active { width: 18px; }
}

/* Slide navigation arrows */
/* MINIMAL nav arrows — just thin white chevrons floating on the photo,
   no circle, no glass background. Drop shadow keeps them legible. */
.hero-bleed__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  background: transparent;
  backdrop-filter: none;
  color: rgba(255, 255, 255, 0.85);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 4;
  border: 0;
  padding: 0;
  opacity: 0.55;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
  transition:
    opacity .35s cubic-bezier(.22, 1, .36, 1),
    transform .35s cubic-bezier(.22, 1, .36, 1),
    color .25s var(--ease);
}
.hero-bleed:hover .hero-bleed__nav { opacity: 0.9; }
.hero-bleed__nav:hover { color: #fff; opacity: 1; }
.hero-bleed__nav--prev { left: 28px; }
.hero-bleed__nav--next { right: 28px; }
.hero-bleed__nav--prev:hover { transform: translateY(-50%) translateX(-3px); }
.hero-bleed__nav--next:hover { transform: translateY(-50%) translateX(3px); }
.hero-bleed__nav svg {
  width: 24px;
  height: 24px;
  stroke-width: 2 !important;
}
@media (max-width: 768px) { .hero-bleed__nav { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .hero-bleed__slide.is-active { animation: none; }
  .hero-bleed__dot.is-active::before { animation: none; transform: scaleX(1); }
}
/* Smooth shade overlay on hero */
.hero-bleed__shade-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(17,20,24,0.25) 100%);
  pointer-events: none;
  z-index: 1;
}

.hero-bleed__shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(17,20,24,0.10) 0%, rgba(17,20,24,0.20) 50%, rgba(17,20,24,0.65) 100%);
  z-index: -1;
}

.hero-bleed__inner {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--s-7) var(--s-5) var(--s-7);
  max-width: var(--container);
  margin: 0 auto;
  display: flex; flex-direction: column; gap: var(--s-4);
  align-items: flex-start;
  z-index: 2;
}
@media (min-width: 768px) { .hero-bleed__inner { padding: var(--s-8) var(--s-7); } }

.hero-bleed__title {
  font-size: clamp(2.6rem, 8vw, 6rem);
  line-height: 1;
  color: #fff;
  text-shadow: 0 4px 24px rgba(17,20,24,0.5), 0 1px 3px rgba(17,20,24,0.35);
  letter-spacing: 0.005em;
  font-weight: 400;
}
.hero-bleed__title-script {
  display: inline-block;
  font-family: "Caveat", cursive;
  font-weight: 700;
  font-size: 0.92em;
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--sun);
  transform: rotate(-2deg);
  margin-top: 0.05em;
  position: relative;
  animation: scriptSway 5s ease-in-out infinite;
}
.hero-bleed__title-script::after {
  content: "";
  position: absolute;
  bottom: 0.05em; left: 2%;
  width: 96%; height: 0.14em;
  background: linear-gradient(90deg, var(--coral) 0%, var(--sun) 50%, var(--coral) 100%);
  background-size: 200% 100%;
  border-radius: 999px;
  opacity: 0.75;
  transform: scaleX(0) skewX(-12deg);
  transform-origin: left center;
  animation: scriptUnderlineIn 1.2s var(--ease) 2.6s forwards, underlineShine 6s linear infinite 4s;
}
@keyframes underlineShine {
  to { background-position: 200% center; }
}
@keyframes scriptSway {
  0%, 100% { transform: rotate(-2deg) translateY(0); }
  50% { transform: rotate(-1.4deg) translateY(-3px); }
}
@keyframes scriptUnderlineIn {
  to { transform: scaleX(1) skewX(-12deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bleed__title-script { animation: none; }
  .hero-bleed__title-script::after { animation: none; transform: scaleX(1) skewX(-12deg); }
}

.btn-pill {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--sun);
  color: var(--ink);
  padding: 16px 32px;
  border-radius: var(--r-pill);
  font-size: var(--t-16);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease), gap .3s var(--ease);
  box-shadow: 0 8px 28px rgba(251,200,0,0.35), 0 1px 0 rgba(0,0,0,0.05) inset;
}
.btn-pill svg, .btn-pill .arrow {
  transition: transform .35s var(--ease);
}
.btn-pill:hover {
  background: #ffd83a;
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(251,200,0,0.55), 0 1px 0 rgba(0,0,0,0.05) inset;
  gap: 14px;
}
.btn-pill:hover svg, .btn-pill:hover .arrow { transform: translateX(4px); }
.btn-pill:active { transform: translateY(0) scale(0.97); }
.btn-pill:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
}
/* Subtle inner highlight for depth */
.btn-pill { box-shadow: 0 8px 28px rgba(251,200,0,0.35), 0 1px 0 rgba(255,255,255,0.4) inset, 0 -1px 0 rgba(0,0,0,0.05) inset; }

/* Ripple container - for click feedback on CTAs */
.btn-pill, .btn, .form__submit, .form__submit button {
  position: relative;
  overflow: hidden;
}
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  transform: scale(0);
  animation: rippleSpread .6s ease-out forwards;
  pointer-events: none;
}
.btn--primary .ripple, .form__submit .ripple { background: rgba(251,200,0,0.5); }
.btn-pill .ripple { background: rgba(17,20,24,0.2); }
@keyframes rippleSpread {
  to { transform: scale(3.5); opacity: 0; }
}

/* Loading state for submit buttons */
.is-loading {
  pointer-events: none;
  position: relative;
  color: transparent !important;
}
.is-loading::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 20px; height: 20px;
  margin: -10px 0 0 -10px;
  border: 2.5px solid rgba(17,20,24,0.25);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Glow variant for hero CTAs */
.btn-pill--glow {
  position: relative;
  overflow: hidden;
}
.btn-pill--glow::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: var(--r-pill);
  background: conic-gradient(from 0deg, var(--coral), var(--sun), var(--moss), var(--sky), var(--coral));
  z-index: -1;
  opacity: 0;
  animation: ctaGlow 4s linear infinite;
  filter: blur(4px);
  transition: opacity .4s var(--ease);
}
.btn-pill--glow:hover::before { opacity: 0.8; }
@keyframes ctaGlow { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn-pill--glow::before { animation: none; } }

/* Photo card overlay (top right) */
.hero-bleed__card {
  position: absolute;
  top: 8%; right: 22%;
  width: clamp(180px, 24vw, 320px);
  aspect-ratio: 4/3;
  background: #fff;
  padding: 12px 12px 18px;
  border-radius: 4px;
  transform: rotate(2deg);
  box-shadow: 0 30px 60px -10px rgba(0,0,0,0.4), 0 12px 22px rgba(0,0,0,0.18);
  z-index: 2;
  animation: heroCardFloat 6.5s ease-in-out infinite;
}
/* Washi tape strip at top-left corner */
.hero-bleed__card::before {
  content: "";
  position: absolute;
  top: -10px; left: 20%;
  width: 64px; height: 22px;
  background: rgba(251,200,0,0.75);
  border: 1px solid rgba(17,20,24,0.1);
  transform: rotate(-8deg);
  box-shadow: 0 2px 6px rgba(17,20,24,0.2);
  z-index: 3;
  background-image: repeating-linear-gradient(45deg, transparent 0, transparent 4px, rgba(255,255,255,0.25) 4px, rgba(255,255,255,0.25) 6px);
}
@keyframes heroCardFloat {
  0%, 100% { transform: rotate(2deg) translateY(0); }
  50% { transform: rotate(2.4deg) translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bleed__card { animation: none; }
}
.hero-bleed__card img { width: 100%; height: 100%; object-fit: cover; }
.hero-bleed__card-label {
  position: absolute;
  bottom: -58px; left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(1.35rem, 2.8vw, 1.9rem);
  color: #fff;
  text-shadow:
    0 0 1px rgba(17,20,24,0.9),
    0 2px 0 rgba(17,20,24,0.85),
    0 3px 10px rgba(0,0,0,0.65),
    0 6px 22px rgba(0,0,0,0.5);
  white-space: nowrap;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  -webkit-text-stroke: 1px rgba(17,20,24,0.4);
}
.hero-bleed__card-label::after {
  content: "";
  display: block;
  width: 70%;
  height: 4px;
  margin: 4px auto 0;
  background: var(--sun);
  border-radius: 999px;
  transform: skewX(-10deg);
  box-shadow: 0 2px 6px rgba(0,0,0,0.45);
  opacity: 0.92;
}
@media (max-width: 768px) {
  .hero-bleed__card { display: none; }
}

/* 10,000 m² outdoor annotation */
.hero-bleed__annotation {
  position: absolute;
  top: 10%; right: 5%;
  width: clamp(240px, 28vw, 320px);
  aspect-ratio: 280 / 240;
  color: #fff;
  z-index: 3;
  display: block;
  pointer-events: none;
}

/* Hand-drawn SVG arrow curving from label-area over to the polaroid */
.hero-bleed__annotation-arrow {
  position: absolute;
  top: 0; right: 0;
  width: 100%;
  height: auto;
  overflow: visible;
}
.anno-arrow__line,
.anno-arrow__head,
.anno-arrow__shadow {
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  animation: annoDraw 1.6s cubic-bezier(.65,.05,.36,1) 2.2s forwards;
}
.anno-arrow__shadow { animation-delay: 2.1s; }
.anno-arrow__highlight {
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  animation: annoDraw 1.6s cubic-bezier(.65,.05,.36,1) 2.5s forwards;
}
.anno-arrow__head {
  stroke-dasharray: 90;
  stroke-dashoffset: 90;
  animation: annoDrawHead .4s cubic-bezier(.2,.8,.3,1) 3.65s forwards;
}
@keyframes annoDraw {
  to { stroke-dashoffset: 0; }
}
@keyframes annoDrawHead {
  to { stroke-dashoffset: 0; }
}

.anno-arrow__burst {
  transform-origin: 20px 50px;
  transform: scale(0);
  animation: annoBurstPop .5s cubic-bezier(.2,.8,.3,1.5) 4s forwards, annoBurstSpin 8s linear 5s infinite;
}
@keyframes annoBurstPop {
  0% { transform: scale(0) rotate(-30deg); }
  70% { transform: scale(1.25) rotate(15deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes annoBurstSpin {
  from { transform: rotate(0); }
  to { transform: rotate(360deg); }
}
.anno-arrow__tail-dot {
  opacity: 0;
  animation: annoDotAppear .3s ease-out 2s forwards;
}
@keyframes annoDotAppear { to { opacity: 1; } }

/* Sticker label - tilted pill with soft ink background for legibility */
.hero-bleed__annotation-label {
  position: absolute;
  bottom: 4px; right: 4px;
  text-align: center;
  transform: rotate(-3deg);
  animation: annotationNudge 6s ease-in-out infinite 4.5s;
  opacity: 0;
  animation: annoLabelIn .7s cubic-bezier(.2,.8,.3,1) 4.2s forwards, annotationNudge 6s ease-in-out infinite 5s;
}
@keyframes annoLabelIn {
  from { opacity: 0; transform: rotate(-3deg) translateY(12px) scale(.9); }
  to { opacity: 1; transform: rotate(-3deg) translateY(0) scale(1); }
}

.hero-bleed__annotation-sticker {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 18px 12px;
  background: rgba(17,20,24,0.55);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  border: 1.5px solid rgba(251,200,0,0.5);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(17,20,24,0.4), 0 2px 4px rgba(17,20,24,0.25);
  position: relative;
}

.hero-bleed__annotation-spark {
  position: absolute;
  top: -18px; right: -14px;
  font-family: "Caveat", cursive;
  font-size: 1.75rem;
  color: var(--sun);
  text-shadow: 0 2px 8px rgba(17,20,24,0.6);
  animation: annoSparkTwinkle 2.5s ease-in-out infinite;
  line-height: 1;
}
.hero-bleed__annotation-text {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--sun);
  text-shadow: 0 3px 10px rgba(17,20,24,0.55);
  white-space: nowrap;
  display: inline-block;
}
/* Highlighter-style coral underline under the number */
.hero-bleed__annotation-num {
  position: relative;
  display: inline-block;
  color: #fff;
}
.hero-bleed__annotation-num::after {
  content: "";
  position: absolute;
  left: -4%; right: -4%;
  bottom: 0.04em; height: 0.24em;
  background: var(--coral);
  border-radius: 999px;
  transform: skewX(-10deg) scaleX(0);
  transform-origin: left center;
  animation: annoHighlight .9s cubic-bezier(.65,.05,.36,1) 4.2s forwards;
  z-index: -1;
}
@keyframes annoHighlight {
  to { transform: skewX(-10deg) scaleX(1); }
}
.hero-bleed__annotation-unit {
  color: var(--sun);
  font-weight: 400;
  font-size: 0.75em;
  vertical-align: 0.12em;
  letter-spacing: 0.02em;
}
.hero-bleed__annotation-sub {
  font-family: "Caveat", cursive;
  font-weight: 500;
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  color: rgba(255,255,255,0.9);
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

@keyframes annotationNudge {
  0%, 92%, 100% { transform: rotate(-3deg); }
  96% { transform: rotate(-5.5deg) scale(1.03); }
}
@keyframes annoSparkTwinkle {
  0%, 100% { transform: scale(1) rotate(0); opacity: 0.85; }
  50% { transform: scale(1.3) rotate(25deg); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bleed__annotation-label,
  .hero-bleed__annotation-spark,
  .anno-arrow__burst { animation: none; }
  .anno-arrow__line, .anno-arrow__head, .anno-arrow__shadow, .anno-arrow__highlight {
    animation: none; stroke-dashoffset: 0;
  }
  .hero-bleed__annotation-num::after { animation: none; transform: skewX(-10deg) scaleX(1); }
  .hero-bleed__annotation-label { opacity: 1; }
  .anno-arrow__burst { transform: scale(1); }
}
@media (max-width: 900px) {
  .hero-bleed__annotation { display: none; }
}

/* Second annotation: EST 2010 sticker top-left */
.hero-bleed__annotation--est {
  top: 14%;
  left: 12%;
  right: auto;
  width: clamp(200px, 22vw, 260px);
  aspect-ratio: 220 / 190;
}
.anno2-arrow {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: auto;
  overflow: visible;
}
.anno2-arrow__line, .anno2-arrow__shadow, .anno2-arrow__head {
  stroke-dasharray: 380;
  stroke-dashoffset: 380;
  animation: annoDraw 1.6s cubic-bezier(.65,.05,.36,1) 2.6s forwards;
}
.anno2-arrow__shadow { animation-delay: 2.5s; }
.anno2-arrow__head {
  stroke-dasharray: 80; stroke-dashoffset: 80;
  animation: annoDrawHead .4s cubic-bezier(.2,.8,.3,1) 4s forwards;
}
.anno2-arrow__burst {
  transform-origin: 28px 152px;
  transform: scale(0);
  animation: annoBurstPop .5s cubic-bezier(.2,.8,.3,1.5) 4.3s forwards, annoBurstSpin 10s linear 5.3s infinite;
}
.anno2-label {
  position: absolute;
  top: -10px; right: 8px;
  text-align: center;
  transform: rotate(4deg);
  opacity: 0;
  animation: anno2LabelIn .7s cubic-bezier(.2,.8,.3,1) 4.5s forwards, anno2Nudge 6.5s ease-in-out infinite 5.3s;
}
@keyframes anno2LabelIn {
  from { opacity: 0; transform: rotate(4deg) translateY(-12px) scale(.9); }
  to { opacity: 1; transform: rotate(4deg) translateY(0) scale(1); }
}
@keyframes anno2Nudge {
  0%, 92%, 100% { transform: rotate(4deg); }
  96% { transform: rotate(6.5deg) scale(1.03); }
}
.anno2-sticker {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 9px 16px 11px;
  background: rgba(17,20,24,0.55);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  border: 1.5px solid rgba(118,185,71,0.55);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(17,20,24,0.4), 0 2px 4px rgba(17,20,24,0.25);
  position: relative;
}
.anno2-spark {
  position: absolute;
  top: -16px; left: -14px;
  font-family: "Caveat", cursive;
  font-size: 1.6rem;
  color: var(--moss);
  text-shadow: 0 2px 8px rgba(17,20,24,0.6);
  animation: annoSparkTwinkle 2.8s ease-in-out infinite 0.4s;
  line-height: 1;
}
.anno2-text {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  line-height: 1;
  letter-spacing: 0.06em;
  color: #fff;
  text-shadow: 0 3px 10px rgba(17,20,24,0.55);
  white-space: nowrap;
}
.anno2-year {
  color: var(--moss);
  letter-spacing: 0.01em;
  position: relative;
}
.anno2-year::after {
  content: "";
  position: absolute;
  left: -4%; right: -4%;
  bottom: 0.05em; height: 0.22em;
  background: var(--sun);
  border-radius: 999px;
  transform: skewX(-10deg) scaleX(0);
  transform-origin: left center;
  animation: annoHighlight .9s cubic-bezier(.65,.05,.36,1) 4.7s forwards;
  z-index: -1;
}
.anno2-sub {
  font-family: "Caveat", cursive;
  font-weight: 500;
  font-size: clamp(0.9rem, 1.2vw, 1rem);
  color: rgba(255,255,255,0.88);
  line-height: 1;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .anno2-arrow__line, .anno2-arrow__shadow, .anno2-arrow__head { animation: none; stroke-dashoffset: 0; }
  .anno2-arrow__burst { transform: scale(1); animation: none; }
  .anno2-label { opacity: 1; animation: none; }
  .anno2-year::after { animation: none; transform: skewX(-10deg) scaleX(1); }
}
@media (max-width: 900px) {
  .hero-bleed__annotation--est { display: none; }
}

/* HERO ----------------------------------------------------------------- */
.hero {
  position: relative;
  padding: 0;
  overflow: hidden;
}
.hero__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--s-6) var(--s-4) var(--s-7);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  align-items: end;
}
@media (min-width: 960px) {
  .hero__inner {
    grid-template-columns: 1.05fr 1fr;
    padding: var(--s-7) var(--s-6) var(--s-9);
    gap: var(--s-7);
  }
}

.hero__copy { position: relative; z-index: 2; }
.hero__welcome {
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: var(--s-4);
}
.hero__welcome::before {
  content: ""; width: 36px; height: 1px; background: var(--ink-3);
}
.hero__welcome span {
  font-size: var(--t-12); letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 600;
}

.hero h1 {
  font-family: "Anton", "Bebas Neue", sans-serif;
  
  font-weight: 400;
  font-size: clamp(2.6rem, 8vw, 5.4rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--ink);
}
.hero h1 .accent {
  text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 0.08em; text-underline-offset: 0.06em;
  font-weight: 500;
  color: var(--moss);
  background: linear-gradient(120deg, var(--moss) 0%, var(--moss-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero h1 .stamp {
  display: inline-block;
  font-family: "Caveat", cursive;
  font-size: 0.45em;
  color: var(--coral);
  transform: rotate(-6deg) translateY(-0.3em);
  margin: 0 0.1em;
  font-weight: 600;
  letter-spacing: 0;
}

.hero__sub {
  margin-top: var(--s-4);
  max-width: 38ch;
  font-size: var(--t-18);
  color: var(--ink-2);
  line-height: 1.6;
}

.hero__cta-row {
  margin-top: var(--s-5);
  display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center;
}

/* PRIMARY BUTTON ------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px;
  border-radius: var(--r-pill);
  font-size: var(--t-14);
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: all .25s var(--ease);
  cursor: pointer;
}
.btn--primary {
  background: var(--ink);
  color: var(--paper);
  transition: background .18s var(--ease), transform .14s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--moss-deep); transform: translateY(-1px); }
}
.btn--primary:active { transform: scale(0.97); }
.btn-pill:active { transform: scale(0.97); }
.btn--ghost {
  color: var(--ink);
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  padding: 6px 0;
  gap: 12px;
}
.btn--ghost svg { transition: transform .25s var(--ease); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--ghost:hover svg { transform: translateX(4px); }

.btn--accent {
  background: var(--sun);
  color: var(--ink);
}
.btn--accent:hover { background: var(--sun-deep); }

.btn--outline {
  border: 1.5px solid var(--ink);
  color: var(--ink);
  background: transparent;
}
.btn--outline:hover { background: var(--ink); color: var(--paper); }

/* HERO COLLAGE --------------------------------------------------------- */
.hero__collage {
  position: relative;
  aspect-ratio: 1 / 1.05;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: var(--s-2);
}
.hero__photo {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-photo);
  background: var(--paper-3);
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.hero__photo:hover img { transform: scale(1.04); }

.hero__photo--main {
  grid-column: 1 / 5; grid-row: 1 / 6;
}
.hero__photo--side {
  grid-column: 5 / 7; grid-row: 1 / 4;
}
.hero__photo--bottom {
  grid-column: 3 / 7; grid-row: 5 / 7;
}
.hero__photo--tag {
  grid-column: 1 / 3; grid-row: 6 / 7;
  background: var(--ink); color: var(--paper);
  display: flex; flex-direction: column;
  justify-content: center; align-items: flex-start;
  padding: var(--s-3);
  box-shadow: var(--sh-md);
}
.hero__photo--tag .num {
  font-family: "Anton", "Bebas Neue", sans-serif;
  font-size: var(--t-36);
  font-weight: 500;
  letter-spacing: -0.04em;
  font-feature-settings: "tnum";
}
.hero__photo--tag .lab {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(248,241,228,0.7);
  margin-top: 2px;
}

.hero__scribble {
  position: absolute;
  font-family: "Caveat", cursive;
  font-size: var(--t-24);
  color: var(--coral);
  transform: rotate(-8deg);
  pointer-events: none;
}

/* HERO MARQUEE BELT --------------------------------------------------- */
.belt {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
  overflow: hidden;
  padding: var(--s-5) 0;
  background-image:
    radial-gradient(circle at 10% 50%, rgba(118,185,71,0.08) 0, transparent 30%),
    radial-gradient(circle at 90% 50%, rgba(227,99,41,0.08) 0, transparent 30%);
}

/* Summer Camp page: belt gets the SAME sunburst as the section above,
   but with its center positioned far above the belt - so the rays appear
   to continue fanning outward from the section above. No visible seam. */
body.body--green-top .belt {
  background: var(--moss);
  background-image: none;
  border-top: 0;
  border-bottom: 0;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* No conic ray overlay — keep the belt a flat var(--moss) green so it
   reads as a continuation of the section above. The previous ::before
   anchored its conic-gradient center 800px above the belt, which on the
   actual narrow strip produced tall vertical bands rather than rays —
   visibly mismatched against the proper sunburst above. */
body.body--green-top .belt::before { display: none; }
body.body--green-top .belt__track { position: relative; z-index: 1; }
/* Birthdays / Sleepovers: belt inherits the event-section color above */
body.body--event-top .belt {
  background: var(--sky);
  background-image: none;
  border-top: 0;
  border-bottom: 0;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
body.body--event-top .belt::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.18) 0%, transparent 12%),
    radial-gradient(circle at 80% 70%, rgba(255,237,206,0.15) 0%, transparent 14%),
    radial-gradient(circle at 60% 20%, rgba(255,255,255,0.12) 0%, transparent 10%),
    radial-gradient(circle at 10% 80%, rgba(255,237,206,0.18) 0%, transparent 14%);
  background-size: 400px 400px;
  opacity: 0.8;
  pointer-events: none;
  z-index: -1;
}
body.body--event-top .belt__track { position: relative; z-index: 1; }
/* Sleepovers override: continue the bottom color of the section above
   (which ends at var(--night-2)) so the boundary is seamless. The earlier
   gradient restarted at the darker var(--night) creating a visible step. */
body.body--event-top:has(.event-section--sleep) .belt {
  background: var(--night-2);
}
body.body--event-top:has(.event-section--sleep) .belt::before {
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,217,61,0.12) 0%, transparent 12%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,0.08) 0%, transparent 14%),
    radial-gradient(circle at 60% 20%, rgba(255,217,61,0.08) 0%, transparent 10%);
  opacity: 0.7;
}
/* Same seamless-loop math as top-marquee: no flex gap on the track,
   margin-right on each item so the half-copy -50% translate lands exactly
   on the loop point (was "half a gap off" causing a visible jump). */
.belt__track {
  display: flex;
  align-items: center;
  animation: scroll 18s linear infinite;
  white-space: nowrap;
  width: max-content;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}
.belt__item {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: "Anton", "Bebas Neue", sans-serif;
  font-size: var(--t-24);
  letter-spacing: -0.02em;
  color: var(--ink);
  flex-shrink: 0;
  margin-right: var(--s-6);
}
/* Inflatable PNGs scrolling in the belt */
.belt__item img {
  height: 170px;
  width: auto;
  max-width: none;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 6px 12px rgba(17,20,24,0.18));
  transition: transform .3s var(--ease);
}
.belt__item:hover img { transform: scale(1.06); }
.belt__item .star {
  width: 18px; height: 18px;
  color: var(--coral);
  animation: starSpin 8s linear infinite;
}
.belt__item:nth-child(4n+1) .star { color: var(--coral); }
.belt__item:nth-child(4n+2) .star { color: var(--moss); }
.belt__item:nth-child(4n+3) .star { color: var(--sky-deep); }
.belt__item:nth-child(4n) .star { color: var(--sun-deep); }
@keyframes starSpin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) { .belt__item .star { animation: none; } }
@keyframes scroll {
  /* Explicit `from` so iOS Safari establishes the composite layer at frame 0
     instead of mid-cycle (avoids "jump on first iteration" glitch). */
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* SECTION HEADER ------------------------------------------------------- */
.s-head {
  display: grid; grid-template-columns: 1fr; gap: var(--s-3);
  align-items: end;
  margin-bottom: var(--s-6);
}
@media (min-width: 768px) {
  .s-head { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
}
.s-head h2 {
  font-family: "Anton", "Bebas Neue", sans-serif;
  font-weight: 400;
  
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  max-width: 16ch;
}
.s-head h2 em { text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 0.08em; text-underline-offset: 0.06em; color: var(--moss); }
.s-head__intro {
  font-size: var(--t-18);
  color: var(--ink-2);
  max-width: 42ch;
}

/* PROGRAMS ------------------------------------------------------------ */
.programs {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  perspective: 1200px;
}
@media (min-width: 768px) { .programs { grid-template-columns: repeat(3, 1fr); gap: var(--s-4); } }
.program {
  position: relative;
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: var(--r-lg);
  overflow: hidden;
  /* isolation + will-change prevents corner-clipping artifacts when the image
     inside scales on hover (the browser otherwise briefly paints outside the
     border-radius during the scale transition). */
  isolation: isolate;
  will-change: transform;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  display: flex; flex-direction: column;
  box-shadow: 6px 6px 0 var(--ink);
}
/* Micro-tilt brochure-sticker feel, alternating by position */
.program:nth-child(3n+1) { transform: rotate(-0.8deg); }
.program:nth-child(3n+2) { transform: rotate(0.5deg); }
.program:nth-child(3n+3) { transform: rotate(-0.4deg); }
.program:hover {
  transform: translateY(-6px) rotate(0);
  box-shadow: 10px 12px 0 var(--ink);
}
/* (Removed dashed inner frame - the thick outer border + offset shadow is the frame) */
.program__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.25) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform .8s var(--ease);
  pointer-events: none;
}
.program:hover .program__media::after { transform: translateX(100%); }
@media (prefers-reduced-motion: reduce) {
  .program:hover { transform: translateY(-4px); }
}
.program__media {
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--r-lg) - 3px) calc(var(--r-lg) - 3px) 0 0;
  /* Force GPU layer and round corners before scaling the inner image - fixes
     the corner glitch where the scaled image briefly pokes through. */
  transform: translateZ(0);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.program__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .9s var(--ease);
  display: block;
  /* Slight base scale so scale(1.05) hover doesn't expose edges */
  transform: scale(1.01);
}
.program:hover .program__media img { transform: scale(1.06); }
.program__badge {
  position: absolute;
  top: var(--s-3); left: var(--s-3);
  background: var(--paper);
  color: var(--ink);
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-size: var(--t-12);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
}
.program__badge .pip {
  width: 6px; height: 6px; border-radius: 50%;
  animation: pipPulse 2s ease-in-out infinite;
}
@keyframes pipPulse {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,0.6); }
  50% { opacity: 0.85; transform: scale(1.25); box-shadow: 0 0 0 4px rgba(255,255,255,0.15); }
}
@media (prefers-reduced-motion: reduce) { .program__badge .pip { animation: none; } }

.program__body { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.program__date {
  font-size: var(--t-14);
  color: var(--ink-3);
  letter-spacing: 0.04em;
  font-feature-settings: "tnum";
  text-transform: uppercase;
  font-weight: 600;
}
.program__name {
  font-family: "Anton", "Bebas Neue", sans-serif;
  font-weight: 500;
  font-size: var(--t-30);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.program__cta {
  margin-top: auto;
  padding-top: var(--s-3);
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--t-14);
  font-weight: 500;
  color: var(--ink);
}
.program__cta svg { transition: transform .3s var(--ease); }
.program:hover .program__cta svg { transform: translateX(6px); }
.program__cta {
  position: relative;
}
.program__cta::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px; width: 0;
  background: currentColor;
  transition: width .3s var(--ease);
}
.program:hover .program__cta::after { width: 28px; }

/* Color-coded program system - matches Canva brand: SUMMER=green, SLEEPOVER=orange, B-DAYS=blue */
.program--summer .program__badge { background: var(--moss); color: #fff; }
.program--summer .program__badge .pip { background: #fff; }
.program--summer .program__cta { color: var(--moss-deep); }

.program--sleep .program__badge { background: var(--coral); color: #fff; }
.program--sleep .program__badge .pip { background: #fff; }
.program--sleep .program__cta { color: var(--coral-deep); }

.program--bday .program__badge { background: var(--sky); color: #fff; }
.program--bday .program__badge .pip { background: #fff; }
.program--bday .program__cta { color: var(--sky-deep); }

/* Big block-color call buttons under each program (matches Canva big colored buttons) */
.program__bigbutton {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: "Anton", "Bebas Neue", "Fraunces", sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
  padding: 18px 14px 16px;
  color: #fff;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  margin: -1px;
  gap: 2px;
}
/* Kicker: small italic script at top */
.program__kicker {
  font-family: "Caveat", cursive;
  font-weight: 500;
  font-size: clamp(0.95rem, 1.6vw, 1.25rem);
  letter-spacing: 0;
  text-transform: lowercase;
  color: rgba(255,255,255,0.88);
  margin-bottom: 2px;
  line-height: 1;
}
/* Main name: big uppercase Anton with strong contrast shadow */
.program__name {
  font-family: "Anton", "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: clamp(1.4rem, 3vw, 2rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1;
  text-shadow:
    0 2px 0 rgba(0,0,0,0.35),
    0 4px 12px rgba(0,0,0,0.45);
  position: relative;
  z-index: 2;
}
.program__kicker,
.program__sub {
  position: relative;
  z-index: 2;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
/* Sub caption: small uppercase price/offer line */
.program__sub {
  font-family: "DM Sans", sans-serif;
  font-size: clamp(10px, 1vw, 12px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255,255,255,0.72);
  margin-top: 4px;
  padding: 3px 10px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px;
}
/* Per-variant accent colors for kicker/sub on solid backgrounds */
.program--summer .program__kicker { color: rgba(255,255,255,0.95); }
.program--summer .program__sub { color: rgba(255,255,255,0.8); border-color: rgba(255,255,255,0.35); }
.program--bday .program__kicker { color: rgba(255,255,255,0.95); }
.program--bday .program__sub { color: rgba(255,255,255,0.8); border-color: rgba(255,255,255,0.35); }
/* Force white name on every program variant - preserves contrast regardless of accent color */
.program .program__name,
.program--summer .program__name,
.program--sleep .program__name,
.program--bday .program__name,
.program--crazy .program__name,
.program--mothers .program__name { color: #fff !important; }
.program--mothers .program__kicker { color: rgba(255,255,255,0.95); }
.program--mothers .program__sub { color: rgba(255,255,255,0.82); border-color: rgba(255,255,255,0.4); }
.program--crazy .program__cta { color: var(--coral-deep); }
.program--mothers .program__cta { color: var(--berry); }

/* "Click me" arrow button on each program card - transparent default, yellow on hover */
.program__arrow {
  position: absolute;
  top: 14px; right: 14px;
  width: 46px; height: 46px;
  border-radius: 999px;
  background: rgba(255,255,255,0.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1.5px solid rgba(255,255,255,0.6);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  z-index: 2;
}
.program__arrow svg { width: 20px; height: 20px; }
.program:hover .program__arrow {
  transform: translate(3px, -3px) rotate(-8deg);
  background: var(--sun);
  color: var(--ink);
  border-color: var(--sun);
  box-shadow: 0 14px 28px rgba(251,200,0,0.55);
}

/* Event-section texture matches for each program banner */
.program__bigbutton { position: relative; overflow: hidden; isolation: isolate; }
/* Subtle dark vignette overlay for text contrast on patterned backgrounds */
.program__bigbutton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(0,0,0,0.28) 0%,
    rgba(0,0,0,0.12) 40%,
    transparent 75%);
  pointer-events: none;
  z-index: 1;
}
.program__bigbutton::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* SUMMER - subtle repeating moss sun rays (tileable) */
.program--summer .program__bigbutton { background: var(--moss); }
.program--summer .program__bigbutton::before {
  background-image: repeating-conic-gradient(
    from 0deg at 50% 50%,
    var(--moss-deep) 0deg 8deg,
    transparent 8deg 18deg
  );
  opacity: 0.28;
}

/* SLEEPOVER - night navy gradient; decorations rendered via HTML spans so the
   ::before/::after slots are free for background gradient + text vignette. */
.program--sleep .program__bigbutton {
  background: linear-gradient(180deg, var(--night) 0%, var(--night-2) 100%);
}
.program--sleep .program__bigbutton::before { display: none; }

/* Decorative icon slots - tent on the left, moon on the right */
.program__deco {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  line-height: 1;
  pointer-events: none;
  z-index: 2;
  user-select: none;
}
.program__deco--left { left: 18px; transform: translateY(-50%) rotate(-6deg); }
.program__deco--right {
  right: 18px;
  transform: translateY(-50%) rotate(-14deg);
  filter: drop-shadow(0 0 12px rgba(255,217,61,0.55));
  animation: moonGlow 4s ease-in-out infinite;
}
@keyframes moonGlow {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(255,217,61,0.45)); }
  50% { filter: drop-shadow(0 0 20px rgba(255,217,61,0.7)); }
}
@media (prefers-reduced-motion: reduce) { .program__deco--right { animation: none; } }

/* BIRTHDAYS - sky with confetti dots along top & bottom only */
.program--bday .program__bigbutton { background: var(--sky); }
.program--bday .program__bigbutton::before { display: none; }

/* CRAZY WEEK - red with subtle yellow diagonal stripes */
.program--crazy .program__bigbutton {
  background: linear-gradient(135deg, var(--crazy) 0%, var(--crazy-deep) 100%);
}
.program--crazy .program__bigbutton::before {
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0 14px,
    rgba(255,216,58,0.22) 14px 24px
  );
}

/* MOTHER'S DAY - solid rose, no bokeh texture */
.program--mothers .program__bigbutton {
  background: linear-gradient(135deg, var(--rose) 0%, var(--rose-deep) 100%);
  color: #fff;
}
.program--mothers .program__bigbutton::before { display: none; }

/* Centered 2-card variant */
.programs--duo {
  grid-template-columns: 1fr;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 768px) {
  .programs--duo { grid-template-columns: repeat(2, 1fr); }
}

/* ABOUT - WHERE EVERY DAY IS A CELEBRATION --------------------------- */
.celebrate {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  align-items: center;
}
@media (min-width: 960px) {
  .celebrate { grid-template-columns: 1fr 1.05fr; gap: var(--s-8); }
}
.celebrate__media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-photo);
  transition: transform .5s var(--ease);
}
.celebrate__media:hover { transform: translateY(-6px) scale(1.015); }
.celebrate__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .9s var(--ease);
}
.celebrate__media:hover img { transform: scale(1.05); }
.celebrate__media::before {
  content: "";
  position: absolute; inset: auto -8% -8% auto;
  width: 35%; aspect-ratio: 1;
  background: var(--sun);
  border-radius: 50%;
  z-index: -1;
}
.celebrate__copy h2 {
  font-family: "Anton", "Bebas Neue", sans-serif;
  font-weight: 400;
  
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-bottom: var(--s-4);
}
.celebrate__copy h2 em {
  text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 0.08em; text-underline-offset: 0.06em;
  background: linear-gradient(120deg, var(--coral), var(--sun-deep));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.celebrate__copy p {
  font-size: var(--t-18);
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 50ch;
}
.celebrate__trust {
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  display: flex; align-items: baseline; gap: var(--s-4);
}
.celebrate__trust .num {
  font-family: "Anton", "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: clamp(3.5rem, 9vw, 6rem);
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: var(--moss);
  font-feature-settings: "tnum";
}
.celebrate__trust .lab {
  font-size: var(--t-14);
  color: var(--ink-3);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  max-width: 12ch;
  line-height: 1.3;
}

/* FEATURE CHIPS - Active Learning, etc. ------------------------------- */
.chips {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: var(--s-5);
}
.chip {
  padding: 10px 18px;
  border-radius: var(--r-pill);
  font-size: var(--t-14);
  font-weight: 500;
  letter-spacing: 0.04em;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  background: var(--paper);
  transition: all .2s var(--ease);
}
.chip:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: translateY(-1px); }

/* COUNTDOWN SECTION --------------------------------------------------- */
.countdown {
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-xl);
  padding: var(--s-7) var(--s-5);
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) { .countdown { padding: var(--s-8); } }
.countdown::before {
  content: "";
  position: absolute; right: -120px; top: -120px;
  width: 360px; height: 360px;
  background: radial-gradient(circle at center, var(--coral) 0%, transparent 65%);
  opacity: 0.5;
  z-index: 0;
}
.countdown::after {
  content: "";
  position: absolute; left: -100px; bottom: -100px;
  width: 300px; height: 300px;
  background: radial-gradient(circle at center, var(--moss) 0%, transparent 65%);
  opacity: 0.45;
  z-index: 0;
}
.countdown__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr; gap: var(--s-5);
}
@media (min-width: 960px) {
  .countdown__inner { grid-template-columns: 1fr 1fr; gap: var(--s-7); align-items: center; }
}
.countdown__head h3 {
  font-family: "Anton", "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: var(--s-3);
}
.countdown__head p { color: rgba(248,241,228,0.78); font-size: var(--t-16); max-width: 42ch; }
.countdown__head .eyebrow { color: var(--sun); margin-bottom: var(--s-3); }

.timer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}
.timer__cell {
  background: rgba(248,241,228,0.06);
  border: 1px solid rgba(248,241,228,0.12);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-2);
  text-align: center;
  position: relative;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.timer__cell:hover {
  background: rgba(248,241,228,0.1);
  border-color: rgba(251,200,0,0.35);
}
.timer__cell::after {
  content: "";
  position: absolute;
  left: 10%; right: 10%; bottom: 4px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(251,200,0,0.35), transparent);
}
.timer__num {
  font-family: "Anton", "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: clamp(2rem, 6vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.04em;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums;
  color: var(--sun);
  text-shadow: 0 2px 10px rgba(251,200,0,0.3);
}
.timer__lab {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(248,241,228,0.55);
  margin-top: 6px;
  font-weight: 500;
}

/* FORM ON DARK -------------------------------------------------------- */
.form {
  display: grid; gap: var(--s-3);
}
.form__row { display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
@media (min-width: 480px) { .form__row { grid-template-columns: 1fr 1fr; } }
.form__field { display: flex; flex-direction: column; gap: 6px; transition: transform .3s var(--ease); }
.form__field:focus-within { transform: translateY(-1px); }
.form__field:focus-within label { color: var(--sun); }
.form__field label {
  font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; font-weight: 500;
  color: rgba(248,241,228,0.55);
}
.form__field input, .form__field textarea {
  background: rgba(248,241,228,0.06);
  border: 1px solid rgba(248,241,228,0.16);
  border-radius: var(--r-md);
  padding: 14px 16px;
  color: var(--paper);
  font-size: var(--t-16);
  transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.form__field input::placeholder, .form__field textarea::placeholder {
  color: rgba(248,241,228,0.4);
  transition: opacity .3s var(--ease);
}
.form__field input:focus::placeholder, .form__field textarea:focus::placeholder { opacity: 0.7; }
.form__field input:hover, .form__field textarea:hover {
  border-color: rgba(248,241,228,0.3);
  background: rgba(248,241,228,0.08);
}
.form__field input:focus, .form__field textarea:focus {
  outline: none;
  border-color: var(--sun);
  background: rgba(248,241,228,0.12);
  box-shadow: 0 0 0 4px rgba(251,200,0,0.22);
}
.form__field textarea { min-height: 120px; resize: vertical; }
.form__submit {
  background: var(--sun); color: var(--ink);
  padding: 14px 28px;
  border-radius: var(--r-pill);
  font-weight: 500; font-size: var(--t-14);
  letter-spacing: 0.04em;
  margin-top: var(--s-2);
  transition: background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
  box-shadow: 0 6px 18px rgba(251,200,0,0.35);
}
.form__submit:hover {
  background: #FFD557;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(251,200,0,0.5);
}
.form__submit:active { transform: translateY(0) scale(0.96); transition: transform .1s ease-out; }
.form__submit:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
}

/* Light variant (used on contact page) ------------------------------ */
.form--light {
  background: #fff;
  padding: clamp(var(--s-5), 3vw, var(--s-7));
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  box-shadow: 0 22px 48px -28px rgba(17,20,24,0.28), 0 8px 20px rgba(17,20,24,0.08);
  gap: var(--s-4);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.form--light:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 28px 56px -24px rgba(17,20,24,0.32), 0 14px 28px rgba(17,20,24,0.1);
}
.form--light .form__field { gap: 8px; position: relative; }
.form--light .form__field label {
  color: var(--ink);
  font-size: var(--t-14);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
}
.form--light .form__field .form__hint {
  font-size: var(--t-12);
  color: var(--ink-3);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
}
.form--light .form__field input,
.form--light .form__field textarea {
  background: var(--paper-2);
  border: 1.5px solid transparent;
  color: var(--ink);
  padding: 14px 16px 14px 46px;
  border-radius: var(--r-md);
  font-size: var(--t-16);
  transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.form--light .form__field textarea {
  padding-left: 46px;
  padding-top: 16px;
  min-height: 140px;
}
.form--light .form__field input::placeholder,
.form--light .form__field textarea::placeholder {
  color: rgba(17,20,24,0.35);
}
.form--light .form__field input:hover,
.form--light .form__field textarea:hover {
  background: #fff;
  border-color: var(--line-strong);
}
.form--light .form__field input:focus,
.form--light .form__field textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--moss);
  box-shadow: 0 0 0 4px rgba(118,185,71,0.18);
}

/* Validation states - valid/invalid after user interaction */
.form__field input:user-invalid,
.form__field textarea:user-invalid,
.form--light .form__field input:user-invalid,
.form--light .form__field textarea:user-invalid {
  border-color: var(--coral);
  box-shadow: 0 0 0 4px rgba(227,99,41,0.15);
}
.form__field input:user-valid,
.form__field textarea:user-valid,
.form--light .form__field input:user-valid,
.form--light .form__field textarea:user-valid {
  border-color: var(--moss);
}
.form__field input:user-valid + .form__field-check,
.form__field textarea:user-valid + .form__field-check {
  opacity: 1;
  transform: scale(1);
}
.form__field-check {
  position: absolute;
  right: 16px; top: 50%;
  width: 20px; height: 20px;
  transform: translateY(-50%) scale(0.6);
  opacity: 0;
  color: var(--moss);
  pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}

.form__field--with-icon { position: relative; }
.form__field--with-icon .form__icon {
  position: absolute;
  left: 16px;
  top: 42px;
  width: 18px; height: 18px;
  color: var(--ink-3);
  pointer-events: none;
}
.form__field--with-icon:focus-within .form__icon { color: var(--moss-deep); }
.form__field--textarea .form__icon { top: 44px; }

/* Visual program chips - replaces select dropdown */
.form__chips {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
@media (min-width: 520px) { .form__chips { grid-template-columns: repeat(3, 1fr); } }
.form__chip {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 12px;
  background: var(--paper-2);
  border: 1.5px solid transparent;
  border-radius: var(--r-pill);
  font-size: var(--t-14);
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: all .2s var(--ease);
  text-align: center;
  min-height: 42px;
}
.form__chip:hover {
  background: #fff;
  border-color: var(--line-strong);
  transform: translateY(-1px);
}
.form__chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.form__chip__dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.5;
  flex-shrink: 0;
}
.form__chip:has(input:checked) {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  box-shadow: 0 8px 18px rgba(17,20,24,0.25);
}
.form__chip:has(input:checked) .form__chip__dot { opacity: 1; background: var(--sun); }

/* Character counter */
.form__counter {
  position: absolute;
  bottom: 10px; right: 14px;
  font-size: var(--t-12);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* Submit button */
.form--light .form__submit {
  background: var(--ink);
  color: var(--paper);
  padding: 16px 32px;
  border-radius: var(--r-pill);
  font-size: var(--t-16);
  font-weight: 600;
  letter-spacing: 0.02em;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  box-shadow: 0 12px 24px rgba(17,20,24,0.25);
  transition: transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
  position: relative;
  overflow: hidden;
  margin-top: var(--s-2);
  width: 100%;
}
.form--light .form__submit:hover {
  background: var(--moss-deep);
  transform: translateY(-2px);
  box-shadow: 0 18px 32px rgba(47,82,51,0.35);
}
.form--light .form__submit:active { transform: translateY(0); }
.form--light .form__submit.is-sent {
  background: var(--moss);
  color: #fff;
}
.form--light .form__submit svg { width: 18px; height: 18px; }

.form__legal {
  font-size: var(--t-12);
  color: var(--ink-3);
  text-align: center;
  line-height: 1.5;
  margin-top: -8px;
}
.form__legal a { color: var(--ink-2); border-bottom: 1px solid var(--line); }
.form__legal a:hover { color: var(--moss-deep); border-color: var(--moss-deep); }

/* FEATURES GRID ------------------------------------------------------- */
.features {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
}
@media (min-width: 640px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .features { grid-template-columns: repeat(3, 1fr); } }

.feature {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  transition: transform .3s var(--ease), border-color .3s var(--ease);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.feature:hover { transform: translateY(-3px); border-color: var(--ink); }
.feature__icon {
  width: 56px; height: 56px;
  border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--paper-2);
  color: var(--moss-deep);
}
.feature__icon svg { width: 28px; height: 28px; }
.feature__title {
  font-family: "Anton", "Bebas Neue", sans-serif;
  font-weight: 500;
  font-size: var(--t-24);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.feature__desc {
  color: var(--ink-2);
  font-size: var(--t-16);
  line-height: 1.55;
}

/* Color rotation for icons */
.feature:nth-child(1) .feature__icon { background: var(--moss-soft); color: var(--moss-deep); }
.feature:nth-child(2) .feature__icon { background: #BCDDEC; color: var(--sky-deep); }
.feature:nth-child(3) .feature__icon { background: #F5DDB6; color: var(--coral-deep); }
.feature:nth-child(4) .feature__icon { background: var(--moss-soft); color: var(--moss-deep); }
.feature:nth-child(5) .feature__icon { background: #F0CCBC; color: var(--coral-deep); }
.feature:nth-child(6) .feature__icon { background: #FAE7A0; color: var(--ink); }

/* STATS BAR --------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
  margin-top: var(--s-6);
}
@media (min-width: 768px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat {
  border-top: 1px solid var(--line-strong);
  padding-top: var(--s-3);
}
.stat__num {
  font-family: "Anton", "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: clamp(2.4rem, 4.5vw, 3.5rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--ink);
  font-feature-settings: "tnum";
}
.stat__lab {
  font-size: var(--t-14);
  color: var(--ink-3);
  letter-spacing: 0.04em;
  margin-top: 8px;
}

/* GALLERY GRID - refined hover with zoom cue --------------------- */
.masonry {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
  grid-auto-flow: dense;
}
@media (min-width: 640px) { .masonry { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .masonry { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1280px) { .masonry { grid-template-columns: repeat(5, 1fr); } }

/* Home preview masonry: desktop shows first 20, mobile shows first 6 (see mobile overhaul block) */
@media (min-width: 601px) {
  .masonry--preview .masonry__item:nth-child(n+21) { display: none; }
}
.masonry__item {
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: zoom-in;
  position: relative;
  background: var(--paper-3);
  aspect-ratio: 1;
  box-shadow: 0 2px 8px rgba(17,20,24,0.06);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
  will-change: transform;
}
.masonry__item:hover {
  transform: translateY(-5px) scale(1.02) rotate(0.8deg);
  box-shadow: 0 20px 40px -14px rgba(17,20,24,0.4), 0 8px 18px rgba(17,20,24,0.18);
  z-index: 2;
}
.masonry__item:focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: 3px;
  z-index: 3;
}
.masonry__item:nth-child(even):hover {
  transform: translateY(-5px) scale(1.02) rotate(-0.8deg);
}
.masonry__item img {
  width: 100%; height: 100%; display: block;
  object-fit: cover;
  transition: transform .9s var(--ease), filter .4s var(--ease);
}
.masonry__item:hover img {
  transform: scale(1.08);
  filter: brightness(0.85);
}
.masonry__item::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 50%, rgba(17,20,24,0.55) 100%);
  opacity: 0;
  transition: opacity .4s var(--ease);
  pointer-events: none;
}
.masonry__item:hover::after { opacity: 1; }
.masonry__item::before {
  content: "";
  position: absolute;
  bottom: 12px; right: 12px;
  width: 40px; height: 40px;
  border-radius: 999px;
  background: var(--sun);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23111418" stroke-width="2.5" stroke-linecap="round"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/><path d="M11 8v6M8 11h6"/></svg>');
  background-size: 20px;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(0.6) rotate(-20deg);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
  z-index: 3;
  pointer-events: none;
}
.masonry__item:hover::before {
  opacity: 1;
  transform: scale(1) rotate(0);
}

/* LIGHTBOX ---------------------------------------------------------- */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(31,42,34,0.94);
  display: none; align-items: center; justify-content: center;
  z-index: 100;
  padding: var(--s-4);
  cursor: zoom-out;
}
.lightbox.is-open { display: flex; }
.lightbox img {
  max-width: 92vw; max-height: 88vh;
  object-fit: contain;
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
}
.lightbox__close {
  position: absolute; top: 24px; right: 24px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(248,241,228,0.1);
  color: var(--paper);
  display: grid; place-items: center;
  font-size: 24px;
}
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(248,241,228,0.1);
  color: var(--paper);
  display: grid; place-items: center;
}
.lightbox__nav--prev { left: 24px; }
.lightbox__nav--next { right: 24px; }
.lightbox__nav:hover, .lightbox__close:hover { background: rgba(248,241,228,0.2); }

.lightbox__counter {
  position: absolute;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  padding: 8px 18px;
  background: rgba(17,20,24,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 999px;
  color: var(--paper);
  font-family: "Anton", sans-serif;
  font-size: 13px;
  letter-spacing: 0.14em;
  pointer-events: none;
  border: 1px solid rgba(248,241,228,0.1);
}
.lightbox__counter b {
  color: var(--sun);
  font-weight: 400;
}

/* BLOG --------------------------------------------------------------- */
.blog {
  display: grid; grid-template-columns: 1fr; gap: var(--s-5);
}
@media (min-width: 768px) { .blog { grid-template-columns: repeat(3, 1fr); gap: var(--s-4); } }
.post {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  display: flex; flex-direction: column;
}
.post:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.post__media { aspect-ratio: 16 / 11; overflow: hidden; }
.post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.post:hover .post__media img { transform: scale(1.06); }
.post__body { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.post__date {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-size: var(--t-12); letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-3);
}
.post__date .day {
  font-family: "Anton", "Bebas Neue", sans-serif;
  font-size: var(--t-30);
  letter-spacing: -0.03em;
  color: var(--ink);
  font-weight: 400;
  text-transform: none;
}
.post__title {
  font-family: "Anton", "Bebas Neue", sans-serif;
  font-weight: 500;
  font-size: var(--t-24);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.post__excerpt { color: var(--ink-2); font-size: var(--t-14); }
.post__byline { font-size: var(--t-12); color: var(--ink-3); margin-top: auto; }

/* NEWSLETTER STRIP --------------------------------------------------- */
.newsletter {
  background: var(--paper-3);
  border-radius: var(--r-xl);
  padding: var(--s-7) var(--s-5);
  display: grid; grid-template-columns: 1fr; gap: var(--s-4);
  align-items: center;
}
@media (min-width: 768px) {
  .newsletter { padding: var(--s-7) var(--s-7); grid-template-columns: 1fr 1fr; gap: var(--s-7); }
}
.newsletter h3 {
  font-family: "Anton", "Bebas Neue", sans-serif; font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.newsletter form { display: flex; gap: 10px; flex-wrap: wrap; }
.newsletter input {
  flex: 1 1 220px;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 14px 22px;
  font-size: var(--t-14);
}
.newsletter input:focus { outline: none; border-color: var(--ink); }
.newsletter button {
  background: var(--ink); color: var(--paper);
  border-radius: var(--r-pill);
  padding: 14px 26px;
  font-size: var(--t-14); font-weight: 500;
  transition: background .2s var(--ease);
}
.newsletter button:hover { background: var(--moss-deep); }

/* MAP STRIP --------------------------------------------------------- */
.map-strip {
  border-radius: var(--r-xl); overflow: hidden;
  position: relative; aspect-ratio: 16 / 9;
  background: var(--paper-3);
}
.map-strip iframe { width: 100%; height: 100%; border: 0; filter: saturate(0.8) contrast(0.95); }
.map-strip__pin {
  position: absolute; bottom: var(--s-4); left: var(--s-4);
  background: var(--paper);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
  max-width: 320px;
}
.map-strip__pin h4 {
  font-family: "Anton", "Bebas Neue", sans-serif;
  font-weight: 500; font-size: var(--t-18);
  margin-bottom: 4px;
}
.map-strip__pin p { font-size: var(--t-14); color: var(--ink-2); }
.map-strip__pin a {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 8px;
  font-size: var(--t-14); font-weight: 500;
  color: var(--moss); border-bottom: 1px solid var(--moss);
  padding-bottom: 1px;
}

/* FOOTER ------------------------------------------------------------- */
.footer {
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-8) 0 var(--s-4);
  position: relative;
  overflow: hidden;
}
.footer::before {
  content: "";
  position: absolute;
  top: -160px; right: -160px;
  width: 360px; height: 360px;
  background: radial-gradient(circle at center, var(--moss) 0%, transparent 60%);
  opacity: 0.5;
  pointer-events: none;
}
.footer::after {
  content: "";
  position: absolute;
  bottom: -160px; left: -160px;
  width: 360px; height: 360px;
  background: radial-gradient(circle at center, var(--coral) 0%, transparent 60%);
  opacity: 0.45;
  pointer-events: none;
}
.footer .container { position: relative; z-index: 1; }

/* Subtle dashed underline for in-paragraph emphasis */
.dashed-underline {
  background-image: linear-gradient(to right, currentColor 60%, transparent 60%);
  background-size: 6px 2px;
  background-position: left bottom;
  background-repeat: repeat-x;
  padding-bottom: 2px;
}

/* "Hand-drawn" wavy underline */
.wavy-underline {
  text-decoration: underline wavy var(--coral);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1.5px;
}

/* No-select utility */
.no-select { user-select: none; -webkit-user-select: none; }

/* Fade-in animation utility class - for on-scroll manual triggers */
.fade-in { animation: pageFadeIn .8s var(--ease) both; }

/* Subtle glow-on-focus for interactive elements */
.glow-on-focus:focus-visible {
  box-shadow: 0 0 0 3px rgba(251,200,0,0.5), 0 0 20px rgba(251,200,0,0.3);
  outline: none;
}

/* Hand-drawn circle around a word */
.highlight-circle {
  position: relative;
  display: inline-block;
  padding: 0 0.15em;
}
.highlight-circle::before {
  content: "";
  position: absolute;
  inset: -4px -10px;
  border: 2.5px solid var(--coral);
  border-radius: 50% 45% 55% 50% / 50% 55% 45% 50%;
  opacity: 0.75;
  transform: rotate(-2deg);
  pointer-events: none;
}

/* Highlight word - hand-painted color block behind text */
.highlight-word {
  position: relative;
  display: inline-block;
  z-index: 0;
  padding: 0 0.1em;
}
.highlight-word::before {
  content: "";
  position: absolute;
  left: -0.02em; right: -0.05em;
  top: 0.25em; bottom: 0.15em;
  background: var(--sun);
  border-radius: 4px;
  transform: skewX(-6deg) rotate(-1deg);
  z-index: -1;
  opacity: 0.9;
}
.highlight-word--moss::before { background: var(--moss); opacity: 0.7; }
.highlight-word--coral::before { background: var(--coral); opacity: 0.7; }
.highlight-word--sky::before { background: var(--sky); opacity: 0.7; }

/* Party mode - triggered by 3x click on logo: brief confetti vibe */
body.party-mode {
  animation: partyHueShift 1s ease-in-out 3;
}
@keyframes partyHueShift {
  0%, 100% { filter: none; }
  50% { filter: hue-rotate(25deg) saturate(1.25); }
}

/* Subtle entrance for stats block */
.stats-block {
  animation: none;
}
.stats-block__wrap {
  transition: box-shadow .4s var(--ease);
}
.stats-block__wrap:hover {
  box-shadow: 0 32px 64px -28px rgba(17,20,24,0.35), 0 12px 28px rgba(17,20,24,0.12);
}

/* Subtle gradient on stats-block divider */
.stats-block__group + .stats-block__group {
  position: relative;
}
.stats-block__group + .stats-block__group::before {
  content: "";
  position: absolute;
  top: 0; left: 15%; right: 15%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--line-strong), transparent);
}

/* Refined list bullets inside sections */
.section ul:not([class]) {
  padding-left: 1.5em;
}
.section ul:not([class]) li::marker {
  color: var(--coral);
  font-weight: 700;
}

/* Sticker burst - starburst CSS shape for "NEW" / "SPECIAL" markers */
.sticker-burst {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 56px; height: 56px;
  font-family: "Anton", sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ink);
  background: var(--sun);
  clip-path: polygon(
    50% 0%, 60% 18%, 80% 12%, 75% 32%, 95% 38%,
    80% 50%, 100% 60%, 80% 68%, 90% 85%, 68% 80%,
    62% 100%, 50% 85%, 38% 100%, 32% 80%, 10% 90%,
    20% 68%, 0% 60%, 20% 50%, 5% 38%, 25% 32%,
    20% 12%, 40% 18%
  );
  transform: rotate(-8deg);
  animation: burstSpin 12s linear infinite;
}
@keyframes burstSpin {
  to { transform: rotate(352deg); }
}
@media (prefers-reduced-motion: reduce) { .sticker-burst { animation: none; } }

/* Highlight emphasis - drop shadow on ink for readability over photos */
.text-shadow-deep {
  text-shadow: 0 4px 24px rgba(17,20,24,0.5), 0 1px 3px rgba(17,20,24,0.35);
}

/* Polish fonts for specific languages */
[lang="ro"] body,
html[lang="ro"] body {
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
}

/* Subtle backdrop on success states */
.subtle-success {
  background: color-mix(in srgb, var(--moss) 8%, transparent);
  border-left: 3px solid var(--moss);
  padding: 10px 14px;
  border-radius: 6px;
}

/* Light hover lift for simple items */
.hover-lift {
  transition: transform .3s var(--ease);
}
.hover-lift:hover { transform: translateY(-2px); }

/* Rainbow gradient text */
.rainbow-text {
  background: linear-gradient(90deg, var(--coral), var(--sun), var(--moss), var(--sky), var(--coral));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rainbowShift 8s linear infinite;
}
@keyframes rainbowShift {
  to { background-position: 200% center; }
}
@keyframes rainbowDividerShift {
  to { background-position: 160px 0; }
}
@media (prefers-reduced-motion: reduce) { .rainbow-text { animation: none; } }

/* Title accent - underline-scribble flourish */
.title-flourish {
  display: inline-block;
  position: relative;
}
.title-flourish::after {
  content: "";
  position: absolute;
  left: 5%; bottom: -6px;
  width: 90%; height: 6px;
  background: var(--sun);
  border-radius: 999px;
  opacity: 0.85;
  transform: skewX(-12deg);
}

/* Form-success state overlay */
.form-success {
  display: none;
  text-align: center;
  padding: var(--s-6) var(--s-4);
}
.form-success.is-visible { display: block; animation: pageFadeIn .5s ease-out both; }
.form-success__icon {
  width: 72px; height: 72px;
  margin: 0 auto var(--s-4);
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--moss-soft);
  color: var(--moss-deep);
}
.form-success__icon svg { width: 36px; height: 36px; }
.form-success__title {
  font-family: "Anton", sans-serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--ink);
  margin-bottom: var(--s-2);
}
.form-success__body {
  color: var(--ink-2);
  line-height: 1.55;
  max-width: 40ch;
  margin: 0 auto;
}

/* COOKIE CONSENT BANNER - bottom-center slim */
.cookie-banner {
  position: fixed;
  bottom: 20px; left: 50%;
  transform: translateX(-50%) translateY(120%);
  background: var(--ink);
  color: var(--paper);
  padding: 14px 18px 14px 24px;
  border-radius: 999px;
  box-shadow: 0 18px 42px -14px rgba(17,20,24,0.6), 0 4px 16px rgba(17,20,24,0.25);
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 85;
  max-width: calc(100vw - 32px);
  flex-wrap: nowrap;
  transition: transform .5s var(--ease);
}
.cookie-banner.is-visible { transform: translateX(-50%) translateY(0); }
.cookie-banner__text {
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.01em;
}
.cookie-banner__text a {
  color: var(--sun);
  border-bottom: 1px dotted var(--sun);
}
.cookie-banner__accept {
  flex-shrink: 0;
  background: var(--sun);
  color: var(--ink);
  padding: 8px 18px;
  border-radius: 999px;
  font-family: "Anton", sans-serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 400;
  border: 0;
  cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.cookie-banner__accept:focus-visible {
  outline: 3px solid var(--paper);
  outline-offset: 2px;
}
.cookie-banner__accept:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(251,200,0,0.5);
}
@media (max-width: 640px) {
  .cookie-banner {
    border-radius: 14px;
    padding: 10px 14px;
    flex-wrap: nowrap;
    bottom: 14px;
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    gap: 10px;
  }
  .cookie-banner__text { font-size: 12px; line-height: 1.35; }
  .cookie-banner__accept {
    padding: 10px 18px;
    font-size: 11px;
    min-height: 40px;
    min-width: 52px;
  }
}

/* Universal utility - subtle lift on hover for any card-like element */
.lift-on-hover {
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  will-change: transform;
}
.lift-on-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px -14px rgba(17,20,24,0.28);
}

/* Oversized watermark "KARIN'S" behind footer content */
.footer__watermark {
  position: absolute;
  bottom: -18%;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(8rem, 26vw, 20rem);
  line-height: 0.85;
  letter-spacing: 0.01em;
  color: rgba(248,241,228,0.04);
  pointer-events: none;
  white-space: nowrap;
  z-index: 0;
  user-select: none;
  background: linear-gradient(to bottom, rgba(248,241,228,0.05), rgba(248,241,228,0.02));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
}
@media (min-width: 768px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }

.footer__brand { display: flex; flex-direction: column; gap: var(--s-3); max-width: 36ch; }
.footer__brand-logo { display: flex; align-items: center; gap: 14px; }
.footer__brand-logo img { height: 120px; width: 120px; object-fit: contain; transition: transform .5s var(--ease); }
.footer__brand-logo:hover img { transform: rotate(-8deg) scale(1.05); }
.footer__brand-logo h4 {
  font-family: "Anton", sans-serif;
  font-size: var(--t-24);
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--paper);
}
.footer__brand-logo small {
  display: block;
  font-family: "DM Sans", sans-serif;
  font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(248,241,228,0.55);
  font-weight: 600;
  margin-top: 2px;
}
.footer__brand-tagline {
  font-family: "Caveat", cursive;
  font-size: var(--t-24);
  color: var(--sun);
  line-height: 1.1;
  margin-top: 4px;
  display: inline-block;
  transform: rotate(-1.5deg);
  text-shadow: 1px 1px 0 rgba(17,20,24,0.3);
  animation: footerTaglineSway 6s ease-in-out infinite;
}
@keyframes footerTaglineSway {
  0%, 100% { transform: rotate(-1.5deg); }
  50% { transform: rotate(0.5deg); }
}
@media (prefers-reduced-motion: reduce) { .footer__brand-tagline { animation: none; } }
.footer__brand p {
  color: rgba(248,241,228,0.72);
  font-size: var(--t-14);
  line-height: 1.7;
}

.footer__col h5 {
  font-family: "Anton", sans-serif;
  font-size: var(--t-14); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--sun);
  font-weight: 400; margin-bottom: var(--s-3);
  position: relative;
  padding-bottom: 8px;
}
.footer__col h5::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 24px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--sun), var(--coral));
}
.footer__col li { margin-bottom: 10px; }
.footer__col a {
  font-size: var(--t-14);
  color: rgba(248,241,228,0.85);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), padding-left .25s var(--ease);
  display: inline-block;
  position: relative;
}
.footer__col a::before {
  content: "→";
  position: absolute;
  left: -18px; top: 0;
  opacity: 0;
  color: var(--sun);
  transition: opacity .25s var(--ease), left .25s var(--ease);
}
.footer__col a:hover {
  color: var(--sun);
  border-color: var(--sun);
  padding-left: 18px;
}
.footer__col a:hover::before {
  opacity: 1;
  left: 0;
}

/* Contact column with icons */
.footer__contact-list { display: flex; flex-direction: column; gap: 12px; }
.footer__contact-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: var(--t-14);
  color: rgba(248,241,228,0.85);
  margin: 0;
}
.footer__contact-list svg {
  width: 16px; height: 16px;
  color: var(--sun);
  margin-top: 4px;
  flex-shrink: 0;
}
.footer__contact-list a { color: rgba(248,241,228,0.85); border-bottom: 1px solid transparent; }
.footer__contact-list a:hover { color: var(--sun); border-color: var(--sun); }

.footer__bottom {
  margin-top: var(--s-7);
  padding-top: var(--s-4);
  border-top: 1px solid rgba(248,241,228,0.12);
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  align-items: center; justify-content: space-between;
  font-size: var(--t-12); color: rgba(248,241,228,0.55);
}
.footer__bottom-tagline {
  font-family: "Caveat", cursive;
  color: var(--sun);
  font-size: var(--t-18);
  color: var(--sun);
  letter-spacing: 0.02em;
}
.footer__socials { display: flex; gap: var(--s-2); }
.footer__socials a {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(248,241,228,0.22);
  display: grid; place-items: center;
  color: var(--paper);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.footer__socials a:hover {
  background: var(--sun);
  color: var(--ink);
  border-color: var(--sun);
  transform: translateY(-3px) rotate(-6deg);
  box-shadow: 0 8px 18px rgba(251,200,0,0.35);
}
.footer__socials svg { width: 16px; height: 16px; }

/* Footer legal row - SRL + CUI + J40 on a single compact line */
.footer__legal {
  font-size: var(--t-12);
  color: rgba(248,241,228,0.55);
  letter-spacing: 0.02em;
}
.footer__legal b {
  color: rgba(248,241,228,0.85);
  font-weight: 600;
}
/* Legal links row - full-width strip below socials */
.footer__legal-links {
  flex-basis: 100%;
  display: flex;
  gap: var(--s-4);
  justify-content: center;
  padding-top: var(--s-3);
  margin-top: 4px;
  border-top: 1px dashed rgba(248,241,228,0.1);
}
.footer__legal-links a {
  color: rgba(248,241,228,0.55);
  font-size: var(--t-12);
  letter-spacing: 0.04em;
  transition: color .2s var(--ease), border-color .2s var(--ease);
  border-bottom: 1px solid transparent;
}
.footer__legal-links a:hover {
  color: var(--sun);
  border-bottom-color: var(--sun);
}
@media (max-width: 600px) {
  .footer__legal { font-size: 10px; line-height: 1.4; text-align: center; }
  .footer__legal b { display: inline; }
  .footer__legal-links {
    flex-direction: column;
    gap: 8px;
    align-items: center;
    padding-top: var(--s-3);
  }
  .footer__legal-links a { font-size: 11px; }
}

/* PAGE HEADERS (about/contact/events/gallery) ----------------------- */
.page-head {
  padding: var(--s-7) 0 var(--s-6);
  border-bottom: 1px solid var(--line);
}
.page-head__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--s-4);
  display: grid; grid-template-columns: 1fr; gap: var(--s-4);
}
@media (min-width: 768px) {
  .page-head__inner { grid-template-columns: 2fr 1fr; padding: 0 var(--s-6); align-items: end; }
}
.page-head h1 {
  font-family: "Anton", "Bebas Neue", sans-serif; font-weight: 400;
  font-size: clamp(2.6rem, 8vw, 5.5rem);
  line-height: 1; letter-spacing: -0.035em;
  color: var(--ink);
}
.page-head h1 em { text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 0.08em; text-underline-offset: 0.06em; color: var(--moss); }
.page-head__breadcrumb {
  font-size: var(--t-12); letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 500;
}

/* ABOUT - three program cards (different layout from home) ---------- */
.three-up {
  display: grid; grid-template-columns: 1fr; gap: var(--s-4);
}
@media (min-width: 768px) { .three-up { grid-template-columns: repeat(3, 1fr); } }
.three-up__card {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  display: flex; align-items: flex-end;
  padding: var(--s-4);
  color: var(--paper);
  transition: transform .35s var(--ease);
}
.three-up__card:hover { transform: translateY(-4px); }
.three-up__card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; z-index: -2;
  transition: transform .9s var(--ease);
}
.three-up__card:hover img { transform: scale(1.05); }
.three-up__card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(31,42,34,0.85) 0%, rgba(31,42,34,0.15) 60%, transparent 100%);
  z-index: -1;
}
.three-up__card h3 {
  font-family: "Anton", "Bebas Neue", sans-serif; font-weight: 500;
  font-size: var(--t-30);
  letter-spacing: -0.025em; line-height: 1.05;
  margin-bottom: 8px;
}
.three-up__card p { font-size: var(--t-14); color: rgba(248,241,228,0.85); line-height: 1.5; }
.three-up__card__inner { position: relative; z-index: 1; }

/* PROSE for about copy ---------------------------------------------- */
.prose {
  max-width: 60ch;
}
.prose p {
  font-size: var(--t-18);
  line-height: 1.7;
  color: var(--ink);
  margin-bottom: var(--s-3);
}
.prose p + p { margin-top: var(--s-2); }

.prose-head {
  font-family: "Anton", "Bebas Neue", sans-serif; font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.05; letter-spacing: -0.03em;
  margin-bottom: var(--s-4);
  max-width: 18ch;
}
.prose-head em { text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 0.08em; text-underline-offset: 0.06em; color: var(--moss); }

/* LEGAL-PROSE - refined typography for privacy/terms pages -------- */
.legal-prose {
  counter-reset: legal-section;
  max-width: none;
}
.legal-prose h2 {
  position: relative;
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(1.6rem, 3.4vw, 2.15rem);
  line-height: 1.15;
  letter-spacing: 0.005em;
  color: var(--ink);
  margin-top: var(--s-7);
  margin-bottom: var(--s-3);
  padding-left: 0;
  padding-top: 18px;
  counter-increment: legal-section;
  border-top: 1px solid var(--line);
}
.legal-prose h2::before {
  content: "§" counter(legal-section, decimal-leading-zero);
  display: inline-block;
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  font-weight: 600;
  color: var(--coral);
  background: rgba(227,99,41,0.08);
  padding: 4px 9px;
  border-radius: 999px;
  margin-right: 12px;
  vertical-align: middle;
  text-transform: uppercase;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.legal-prose h2:hover::before {
  background: var(--coral);
  color: #fff;
}
.legal-prose h3 {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  color: var(--ink);
  margin-top: var(--s-5);
  margin-bottom: var(--s-2);
  letter-spacing: 0.005em;
}
.legal-prose p {
  font-size: clamp(0.95rem, 1.15vw, 1.05rem);
  line-height: 1.75;
  color: var(--ink-2);
  margin-bottom: var(--s-3);
}
.legal-prose p + p { margin-top: 0; }
.legal-prose strong { color: var(--ink); font-weight: 600; }
.legal-prose ul,
.legal-prose ol {
  margin: var(--s-2) 0 var(--s-3) 0;
  padding-left: 0;
  list-style: none;
}
.legal-prose ul li,
.legal-prose ol li {
  position: relative;
  padding-left: 26px;
  font-size: clamp(0.95rem, 1.15vw, 1.05rem);
  line-height: 1.7;
  margin-bottom: 10px;
  color: var(--ink-2);
}
.legal-prose ul li::before {
  content: "";
  position: absolute;
  left: 6px; top: 13px;
  width: 7px; height: 7px;
  border-radius: 2px;
  background: var(--coral);
  transform: rotate(45deg);
}
.legal-prose ol {
  counter-reset: legal-item;
}
.legal-prose ol li {
  counter-increment: legal-item;
}
.legal-prose ol li::before {
  content: counter(legal-item);
  position: absolute;
  left: 0; top: 3px;
  width: 20px; height: 20px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-family: "Anton", sans-serif;
  font-size: 11px;
  display: flex; align-items: center; justify-content: center;
}
.legal-prose a {
  color: var(--moss-deep);
  border-bottom: 1px solid rgba(47,82,51,0.3);
  transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
  padding: 0 2px;
  margin: 0 -2px;
  border-radius: 2px;
}
.legal-prose a:hover {
  color: var(--coral-deep);
  border-color: var(--coral);
  background: rgba(251,200,0,0.25);
}

/* Info boxes */
.legal-prose table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: var(--s-3) 0 var(--s-4);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(17,20,24,0.06);
  font-size: 0.95rem;
}
.legal-prose table thead th {
  background: var(--ink) !important;
  color: var(--paper);
  text-align: left;
  padding: 12px 14px !important;
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 0 !important;
}
.legal-prose table tbody td {
  padding: 12px 14px !important;
  border: 0 !important;
  border-top: 1px solid var(--line) !important;
  background: #fff;
  color: var(--ink-2);
  line-height: 1.6;
}
.legal-prose table tbody tr:nth-child(even) td { background: #FCFBF3; }

/* Callout - info / warning / company card */
.legal-prose .callout {
  padding: var(--s-4) var(--s-4) var(--s-4) calc(var(--s-4) + 6px);
  border-radius: var(--r-md);
  margin-bottom: var(--s-4);
  position: relative;
  background: #FFF4E0;
  box-shadow: 0 2px 8px rgba(227,99,41,0.08);
}
.legal-prose .callout::before {
  content: "";
  position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(to bottom, var(--coral), var(--sun));
}

/* ==========================================================================
   404 PAGE - brand-personality not-found. Oversized "404" with rainbow
   digits, floating sparkles, and a quick-link chip grid at the bottom.
   ========================================================================== */
.page-404 {
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - 88px);
  display: grid;
  place-items: center;
  padding: var(--s-7) var(--s-4);
  background:
    radial-gradient(ellipse at 20% 15%, rgba(118,185,71,0.15) 0, transparent 50%),
    radial-gradient(ellipse at 85% 25%, rgba(227,99,41,0.13) 0, transparent 50%),
    radial-gradient(ellipse at 50% 90%, rgba(40,184,218,0.13) 0, transparent 50%),
    radial-gradient(ellipse at 10% 80%, rgba(251,200,0,0.15) 0, transparent 50%);
}
.page-404__decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.page-404__sparkle {
  position: absolute;
  font-family: "Caveat", cursive;
  font-size: clamp(2rem, 4vw, 3.5rem);
  opacity: 0.5;
  animation: sparkleTwinkle 3.6s ease-in-out infinite;
}
.page-404__sparkle--1 { top: 10%; left: 12%; color: var(--moss); animation-delay: 0s; }
.page-404__sparkle--2 { top: 22%; right: 14%; color: var(--coral); animation-delay: 0.8s; font-size: clamp(2.5rem, 5vw, 4rem); }
.page-404__sparkle--3 { bottom: 18%; left: 18%; color: var(--sky-deep); animation-delay: 1.6s; }
.page-404__sparkle--4 { bottom: 28%; right: 10%; color: var(--sun-deep); animation-delay: 2.4s; font-size: clamp(2.2rem, 4.5vw, 3.8rem); }
.page-404__sparkle--5 { top: 50%; left: 50%; color: var(--coral); animation-delay: 1.2s; opacity: 0.3; }

/* Confetti utility - CSS-only confetti pattern */
.confetti-bg {
  position: relative;
}
.confetti-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 10% 20%, var(--coral) 0 3px, transparent 3.5px),
    radial-gradient(circle at 30% 50%, var(--moss) 0 2px, transparent 2.5px),
    radial-gradient(circle at 60% 30%, var(--sun) 0 2.5px, transparent 3px),
    radial-gradient(circle at 80% 60%, var(--sky) 0 2px, transparent 2.5px),
    radial-gradient(circle at 45% 80%, var(--coral) 0 2.5px, transparent 3px);
  background-size: 200px 200px;
  background-position: 0 0;
  opacity: 0.25;
  pointer-events: none;
  animation: confettiDrift 12s linear infinite;
}
@keyframes confettiDrift {
  to { background-position: 200px 200px; }
}
@media (prefers-reduced-motion: reduce) { .confetti-bg::before { animation: none; } }
@keyframes sparkleTwinkle {
  0%, 100% { transform: scale(1) rotate(0); opacity: 0.5; }
  50% { transform: scale(1.3) rotate(15deg); opacity: 0.9; }
}
@media (prefers-reduced-motion: reduce) {
  .page-404__sparkle { animation: none; }
}

.page-404__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 720px;
}

.page-404__eyebrow {
  font-family: "Caveat", cursive;
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--coral);
  margin-bottom: var(--s-3);
  line-height: 1;
}

.page-404__num {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(7rem, 22vw, 16rem);
  line-height: 0.85;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-4);
  display: flex;
  justify-content: center;
  gap: 0.02em;
}
.page-404__digit {
  display: inline-block;
  text-shadow: 4px 5px 0 rgba(17,20,24,0.12);
  animation: digitWiggle 4s ease-in-out infinite;
}
.page-404__digit--1 { color: var(--coral); animation-delay: 0s; transform: rotate(-3deg); }
.page-404__digit--0 { color: var(--sun-deep); animation-delay: 0.3s; transform: rotate(2deg); }
.page-404__digit--4 { color: var(--moss); animation-delay: 0.6s; transform: rotate(-2deg); }
@keyframes digitWiggle {
  0%, 100% { transform: rotate(var(--r, 0deg)) translateY(0); }
  50% { transform: rotate(var(--r, 0deg)) translateY(-6px); }
}
.page-404__digit--1 { --r: -3deg; }
.page-404__digit--0 { --r: 2deg; }
.page-404__digit--4 { --r: -2deg; }
@media (prefers-reduced-motion: reduce) {
  .page-404__digit { animation: none; }
}

.page-404__title {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  color: var(--ink);
  margin-bottom: var(--s-3);
  line-height: 1.15;
}

.page-404__body {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: var(--ink-2);
  line-height: 1.6;
  margin: 0 auto var(--s-5);
  max-width: 48ch;
}

.page-404__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  justify-content: center;
  align-items: center;
  margin-bottom: var(--s-7);
}
.page-404__link {
  font-family: "Caveat", cursive;
  font-size: 1.3rem;
  color: var(--moss-deep);
  border-bottom: 2px solid transparent;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.page-404__link:hover {
  border-bottom-color: var(--moss);
  color: var(--coral);
}

.page-404__quick {
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
.page-404__quick-label {
  font-family: "Anton", sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s-3);
}
.page-404__quick-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.page-404__chip {
  padding: 8px 16px;
  border-radius: 999px;
  font-family: "Anton", sans-serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  text-decoration: none;
}
.page-404__chip:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--ink);
}
.page-404__chip--moss { background: var(--moss); color: #fff; border-color: var(--moss-deep); box-shadow: 3px 3px 0 var(--moss-deep); }
.page-404__chip--moss:hover { box-shadow: 5px 5px 0 var(--moss-deep); }
.page-404__chip--coral { background: var(--coral); color: #fff; border-color: var(--coral-deep); box-shadow: 3px 3px 0 var(--coral-deep); }
.page-404__chip--coral:hover { box-shadow: 5px 5px 0 var(--coral-deep); }
.page-404__chip--sky { background: var(--sky); color: #fff; border-color: var(--sky-deep); box-shadow: 3px 3px 0 var(--sky-deep); }
.page-404__chip--sky:hover { box-shadow: 5px 5px 0 var(--sky-deep); }
.page-404__chip--crazy { background: #D0342C; color: #fff; border-color: #A4281F; box-shadow: 3px 3px 0 #A4281F; }
.page-404__chip--crazy:hover { box-shadow: 5px 5px 0 #A4281F; }

/* Legal-prose hero eyebrow/title styles */
.legal-hero {
  margin-bottom: var(--s-6);
  position: relative;
}
.legal-hero::before {
  content: "";
  position: absolute;
  top: -20px; left: 0;
  width: 80px; height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, var(--coral), var(--sun));
}
.legal-hero__eyebrow {
  font-family: "Caveat", cursive;
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--coral);
  margin-bottom: var(--s-2);
  line-height: 1;
}
.legal-hero__title {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: 0.005em;
  color: var(--ink);
  margin-top: var(--s-2);
}
.legal-hero__meta {
  display: inline-block;
  margin-top: var(--s-4);
  padding: 6px 12px;
  background: var(--paper-2);
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ink-2);
  font-family: "Anton", sans-serif;
  font-weight: 400;
}

/* Legal layout wrapper - TOC + content on desktop */
.legal-layout {
  display: block;
}
@media (min-width: 1080px) {
  .legal-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: var(--s-6);
    align-items: start;
  }
}

/* Sticky table-of-contents sidebar */
.legal-toc {
  display: none;
}
@media (min-width: 1080px) {
  .legal-toc {
    display: block;
    position: sticky;
    top: 120px;
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    padding: var(--s-4) var(--s-3);
    background: var(--paper-2);
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    box-shadow: 0 4px 14px -8px rgba(17,20,24,0.12);
  }
}
.legal-toc__title {
  font-family: "Anton", sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.legal-toc__title::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 24px; height: 2px;
  border-radius: 2px;
  background: var(--coral);
}
.legal-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.legal-toc__list li {
  margin-bottom: 4px;
  line-height: 1.3;
}
.legal-toc__list a {
  display: block;
  padding: 6px 8px;
  font-size: 13px;
  color: var(--ink-2);
  border-radius: 6px;
  border-left: 3px solid transparent;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
  text-decoration: none;
}
.legal-toc__list a:hover {
  background: #fff;
  color: var(--ink);
  border-left-color: var(--coral);
}
.legal-toc__list a.is-active {
  background: #fff;
  color: var(--ink);
  border-left-color: var(--coral);
  font-weight: 600;
  box-shadow: 2px 2px 8px -3px rgba(17,20,24,0.15);
}
.legal-toc__num {
  font-family: "Anton", sans-serif;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--coral);
  margin-right: 6px;
  font-weight: 400;
}

/* CONTACT GRID ------------------------------------------------------- */
.contact-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--s-6);
}
@media (min-width: 960px) { .contact-grid { grid-template-columns: 1fr 1.2fr; gap: var(--s-7); } }
.contact-info h2 {
  font-family: "Anton", "Bebas Neue", sans-serif; font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  letter-spacing: -0.025em;
  margin-bottom: var(--s-4);
}
.contact-info ul li {
  display: flex; align-items: flex-start; gap: 14px;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
}
.contact-info ul li:last-child { border-bottom: 0; }
.contact-info svg {
  width: 20px; height: 20px; color: var(--moss); flex-shrink: 0; margin-top: 2px;
}
.contact-info a, .contact-info span {
  font-size: var(--t-16); color: var(--ink); line-height: 1.4;
}
.contact-info a:hover { color: var(--moss-deep); }

/* SCROLL ANIMATIONS ------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .85s cubic-bezier(0.22, 1, 0.36, 1), transform .85s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal--delay-1 { transition-delay: 0.08s; }
.reveal--delay-2 { transition-delay: 0.16s; }
.reveal--delay-3 { transition-delay: 0.24s; }
.reveal--delay-4 { transition-delay: 0.32s; }
.reveal--delay-5 { transition-delay: 0.40s; }
.reveal--delay-6 { transition-delay: 0.48s; }

/* Blur-in variant */
.reveal--blur { filter: blur(6px); }
.reveal--blur.is-visible { filter: blur(0); transition: filter .9s var(--ease), opacity .9s var(--ease), transform .9s var(--ease); }

/* Reveal variants - tilt-in, scale-in, slide-from-left/right */
.reveal--tilt { transform: translateY(28px) rotate(-2deg); }
.reveal--tilt.is-visible { transform: translateY(0) rotate(0); }
.reveal--scale { transform: translateY(28px) scale(0.96); }
.reveal--scale.is-visible { transform: translateY(0) scale(1); }
.reveal--from-left { transform: translateX(-40px); }
.reveal--from-left.is-visible { transform: translateX(0); }
.reveal--from-right { transform: translateX(40px); }
.reveal--from-right.is-visible { transform: translateX(0); }

/* Child-stagger - auto-staggers direct children with .reveal-child */
.reveal-stagger > .reveal-child {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal-stagger.is-visible > .reveal-child:nth-child(1) { transition-delay: .05s; }
.reveal-stagger.is-visible > .reveal-child:nth-child(2) { transition-delay: .12s; }
.reveal-stagger.is-visible > .reveal-child:nth-child(3) { transition-delay: .19s; }
.reveal-stagger.is-visible > .reveal-child:nth-child(4) { transition-delay: .26s; }
.reveal-stagger.is-visible > .reveal-child:nth-child(5) { transition-delay: .33s; }
.reveal-stagger.is-visible > .reveal-child:nth-child(6) { transition-delay: .40s; }
.reveal-stagger.is-visible > .reveal-child:nth-child(7) { transition-delay: .47s; }
.reveal-stagger.is-visible > .reveal-child {
  opacity: 1; transform: translateY(0);
}
.reveal-stagger.is-visible > .reveal-child:nth-child(8) { transition-delay: .54s; }
.reveal-stagger.is-visible > .reveal-child:nth-child(9) { transition-delay: .61s; }
.reveal-stagger.is-visible > .reveal-child:nth-child(10) { transition-delay: .68s; }

/* PAGE LOAD STAGGER - for hero overlay elements ------------------- */
.hero-bleed__card { opacity: 0; transform: translateY(-12px) rotate(2deg); animation: cardIn .9s cubic-bezier(.22,1,.36,1) 1.6s forwards, heroCardFloat 6.5s ease-in-out 2.8s infinite; }
.hero-bleed__annotation { opacity: 0; transform: translateY(-8px); animation: annoIn .9s cubic-bezier(.22,1,.36,1) 1.9s forwards; }
.hero-bleed__inner { opacity: 0; transform: translateY(20px); animation: heroIn .9s cubic-bezier(.22,1,.36,1) 1.4s forwards; }
@keyframes cardIn { to { opacity: 1; transform: translateY(0) rotate(2deg); } }
@keyframes annoIn { to { opacity: 1; transform: translateY(0); } }
@keyframes heroIn { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .hero-bleed__card, .hero-bleed__annotation, .hero-bleed__inner { opacity: 1; transform: none; animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .belt__track { animation: none; }
}

/* HERO SCROLL INDICATOR ------------------------------------------ */
.hero-scroll-hint {
  position: absolute;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: rgba(255,255,255,0.85);
  font-family: "Caveat", cursive;
  font-size: var(--t-18);
  letter-spacing: 0.04em;
  pointer-events: none;
  z-index: 4;
}
.hero-scroll-hint svg {
  width: 26px; height: 26px;
  animation: bobbing 1.6s ease-in-out infinite;
  filter: drop-shadow(0 2px 4px rgba(17,20,24,0.4));
}
@keyframes bobbing { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .hero-scroll-hint svg { animation: none; } }

/* FAQ DETAILS ----------------------------------------------------- */
details summary { cursor: pointer; transition: color .25s var(--ease); }
details summary::marker, details summary::-webkit-details-marker { display: none; }
details:hover summary { color: var(--coral); }

/* SPONSORS STRIP - refined with container card ------------------- */
.sponsors {
  padding: var(--s-7) var(--s-4);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: relative;
}
.sponsors__inner {
  max-width: var(--container);
  margin: 0 auto;
  text-align: center;
}
.sponsors__label {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: var(--t-12);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-3);
  margin-bottom: var(--s-6);
  transition: color .3s var(--ease), letter-spacing .3s var(--ease);
}
.sponsors:hover .sponsors__label {
  color: var(--ink);
  letter-spacing: 0.28em;
}
.sponsors__label::before, .sponsors__label::after {
  content: ""; display: block;
  width: 60px; height: 1px;
  background: linear-gradient(to right, transparent, var(--line-strong), transparent);
}
.sponsors__label-star {
  color: var(--coral);
  font-family: "Caveat", cursive;
  font-size: var(--t-16);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
  display: inline-block;
}
.sponsors__row {
  display: flex; flex-wrap: nowrap;
  align-items: center; justify-content: space-between;
  gap: clamp(16px, 3vw, 48px);
  max-width: 1200px;
  margin: 0 auto;
  transition: opacity .3s var(--ease);
}
.sponsors__row:hover .sponsors__logo:not(:hover) img {
  opacity: 0.5;
  filter: saturate(0.7);
}
.sponsors__logo {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .35s var(--ease);
  /* Uniform visual box: every sponsor gets the same bounding area, and each
     logo is scaled with object-fit:contain to fit inside - this makes them
     appear the same visual size regardless of intrinsic aspect ratio. */
  height: clamp(96px, 13vw, 150px);
  width: clamp(120px, 18vw, 200px);
  padding: 10px;
}
.sponsors__logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform .4s var(--ease), filter .4s var(--ease);
  filter: saturate(0.95);
  animation: none;
  background: transparent;
}
/* Desktop: Yugo (4th) and Scandia (5th) fill their box more than others due
   to aspect ratio - shrink them so all 5 feel the same visual weight.
   (Mobile uses the opposite approach - scale TEDI/TYMBARK/SLOOP up - see @media below) */
@media (min-width: 641px) {
  .sponsors__row > .sponsors__logo:nth-child(4) img,
  .sponsors__row > .sponsors__logo:nth-child(5) img {
    transform: scale(0.75);
    transform-origin: center;
  }
}
.sponsors__logo:hover img {
  transform: translateY(-4px) scale(1.08);
  filter: saturate(1.15) drop-shadow(0 4px 12px rgba(17,20,24,0.18));
}
@media (max-width: 640px) {
  /* Two-row layout on mobile: 3 on top + 2 centered on bottom */
  .sponsors__row {
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 10px;
  }
  .sponsors__logo {
    flex: 0 0 calc(33.333% - 8px);
    max-width: calc(33.333% - 8px);
    height: 84px;
    width: auto;
    padding: 6px;
  }
  /* TEDI / TYMBARK / SLOOP are intrinsically smaller inside their boxes -
     scale them up visually so all five logos feel the same size. */
  .sponsors__row > .sponsors__logo:nth-child(1) img,
  .sponsors__row > .sponsors__logo:nth-child(2) img,
  .sponsors__row > .sponsors__logo:nth-child(3) img {
    transform: scale(1.5);
    transform-origin: center;
  }
  /* YUGO (4th) and SCANDIA (5th) keep their natural fit inside the box */
}

/* STATS BLOCK - refined two-group layout ("the space" + "the experience") */
.stats-block { margin: var(--s-7) 0; }
.stats-block__wrap {
  max-width: 1200px;
  margin: 0 auto;
  background: var(--paper-2);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 22px 48px -28px rgba(17,20,24,0.28), 0 8px 20px rgba(17,20,24,0.08);
  border: 1px solid var(--line);
}
.stats-block__group {
  padding: var(--s-5) var(--s-4);
  position: relative;
}
.stats-block__group + .stats-block__group {
  border-top: 1px dashed var(--line-strong);
}
.stats-block__eyebrow {
  font-family: "Caveat", cursive;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  color: var(--coral);
  text-align: center;
  margin-bottom: var(--s-3);
  letter-spacing: 0.01em;
  line-height: 1;
  display: block;
}
.stats-block__group--experience .stats-block__eyebrow { color: var(--moss-deep); }

.stats-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
}
@media (min-width: 520px) { .stats-block__group--space .stats-row { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 520px) { .stats-block__group--experience .stats-row { grid-template-columns: repeat(3, 1fr); } }

.stat-cell {
  position: relative;
  background: var(--paper);
  padding: var(--s-4) var(--s-3) var(--s-4) calc(var(--s-3) + 4px);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-height: 128px;
  transition: background .3s var(--ease), transform .3s var(--ease);
  isolation: isolate;
  overflow: hidden;
}
/* Colored top-bar for each cell (brochure tag strip) */
.stat-cell::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--ink);
  z-index: 1;
}
.stat-cell--moss::before { background: var(--moss); }
.stat-cell--sky::before { background: var(--sky); }
.stat-cell--coral::before { background: var(--coral); }
.stat-cell--sun::before { background: var(--sun); }

/* Soft radial tint behind the number */
.stat-cell::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  opacity: 0.45;
  transition: opacity .3s var(--ease);
}
.stat-cell--moss::after { background: radial-gradient(ellipse at center top, rgba(118,185,71,0.22) 0, transparent 55%); }
.stat-cell--sky::after { background: radial-gradient(ellipse at center top, rgba(40,184,218,0.22) 0, transparent 55%); }
.stat-cell--coral::after { background: radial-gradient(ellipse at center top, rgba(227,99,41,0.20) 0, transparent 55%); }
.stat-cell--sun::after { background: radial-gradient(ellipse at center top, rgba(251,200,0,0.28) 0, transparent 55%); }

.stat-cell:hover { background: #faf6e5; transform: translateY(-3px); }
.stat-cell:hover::after { opacity: 0.85; }
.stat-cell:hover .stat-cell__lab { color: var(--ink); letter-spacing: 0.2em; }

.stat-cell__num {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(2.25rem, 4.6vw, 3.2rem);
  line-height: 0.9;
  letter-spacing: 0.005em;
  font-feature-settings: "tnum";
  display: flex;
  align-items: baseline;
  gap: 4px;
  text-shadow: 1px 2px 0 rgba(17,20,24,0.08);
}
.stat-cell--moss .stat-cell__num { color: var(--moss-deep); }
.stat-cell--sky .stat-cell__num { color: var(--sky-deep); }
.stat-cell--coral .stat-cell__num { color: var(--coral); }
.stat-cell--sun .stat-cell__num { color: var(--sun-deep); }

.stat-cell__unit {
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  font-size: 0.45em;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  text-transform: lowercase;
}
.stat-cell__lab {
  font-family: "Anton", sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.3;
  transition: color .3s var(--ease);
}
/* Accent colors - cycle through brand palette for visual interest, no meaning beyond differentiation */
.stat-cell--moss .stat-cell__num { color: var(--moss-deep); }
.stat-cell--sky .stat-cell__num { color: var(--sky-deep); }
.stat-cell--coral .stat-cell__num { color: var(--coral-deep); }
.stat-cell--sun .stat-cell__num { color: var(--sun-deep); }
.stat-cell--ink .stat-cell__num { color: var(--ink); }
.stat-cell--berry .stat-cell__num { color: var(--berry); }

/* AGE TRACK — refined Canva-style sticker cards. Same gradient + sticker
   outline + theme-colored drop shadow as the homepage value-ribbon items
   so the two sections feel like part of the same design system.
   Replaces an earlier brutalist version (heavy black border, hard 6px
   shadow, random rotations, conic sunburst rays) that read as out-of-band
   compared to the rest of the site. */
.age-track {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--s-4) 0;
}
@media (min-width: 600px) { .age-track { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
@media (min-width: 1080px) { .age-track { grid-template-columns: repeat(7, 1fr); gap: 14px; } }

.age-pill {
  --theme:      var(--moss);
  --theme-dark: var(--moss-deep);
  --on-theme:   #fff;

  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  text-align: center;
  padding: 22px 14px 18px;
  border-radius: 20px;
  color: var(--on-theme);
  background:
    radial-gradient(circle at 80% -10%, rgba(255,255,255,0.22) 0%, transparent 55%),
    linear-gradient(160deg, var(--theme) 0%, var(--theme-dark) 100%);
  /* White sticker outline + layered theme-colored drop shadow + inner top gloss
     — identical pattern to .value-ribbon__item so the two sections rhyme. */
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,0.35),
    inset 0 1px 0 rgba(255,255,255,0.55),
    0 1px 0 rgba(17,20,24,0.12),
    0 14px 28px -12px color-mix(in srgb, var(--theme) 70%, transparent),
    0 4px 10px -4px rgba(17,20,24,0.22);
  overflow: hidden;
  isolation: isolate;
  transition:
    transform .45s cubic-bezier(.22, 1, .36, 1),
    box-shadow .45s var(--ease);
  cursor: pointer;
}

/* Specular shine bloom in the top-right (matches value-ribbon item). */
.age-pill::before {
  content: "";
  position: absolute;
  right: -30px;
  top: -30px;
  width: 130px;
  height: 130px;
  background: radial-gradient(circle at center, rgba(255,255,255,0.28) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: soft-light;
}

/* Subtle confetti dots — same vocabulary as value-ribbon, slightly fewer
   so the smaller card doesn't feel busy. */
.age-pill::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 82% 70%, rgba(255,255,255,0.65) 2px, transparent 2.6px),
    radial-gradient(circle at 14% 24%, rgba(255,255,255,0.45) 1.6px, transparent 2.2px);
  pointer-events: none;
  z-index: 0;
}

.age-pill > * { position: relative; z-index: 1; }

/* Per-variant theme. The order on /events is moss / coral / sky / sun /
   moss / coral / sky — matches the existing class names. */
.age-pill--moss  { --theme: var(--moss);  --theme-dark: var(--moss-deep);  --on-theme: #fff; }
.age-pill--coral { --theme: var(--coral); --theme-dark: var(--coral-deep); --on-theme: #fff; }
.age-pill--sky   { --theme: var(--sky);   --theme-dark: var(--sky-deep);   --on-theme: #fff; }
.age-pill--sun   { --theme: var(--sun);   --theme-dark: var(--sun-deep);   --on-theme: var(--ink); }

/* On the yellow card, white confetti would disappear — switch to ink. */
.age-pill--sun::after {
  background-image:
    radial-gradient(circle at 82% 70%, rgba(17,20,24,0.20) 2px, transparent 2.6px),
    radial-gradient(circle at 14% 24%, rgba(17,20,24,0.14) 1.6px, transparent 2.2px);
}

.age-pill:hover {
  transform: translateY(-6px);
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,0.55),
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 1px 0 rgba(17,20,24,0.15),
    0 24px 40px -16px color-mix(in srgb, var(--theme) 75%, transparent),
    0 8px 18px -6px rgba(17,20,24,0.32);
}

.age-pill__num {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(1.85rem, 3.4vw, 2.5rem);
  letter-spacing: 0.02em;
  line-height: 1;
}
.age-pill__sep { opacity: 0.7; margin: 0 4px; }

.age-pill__lab {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 3px 12px;
  border: 1px solid currentColor;
  border-radius: 999px;
  opacity: 0.85;
}

.age-pill__hint {
  font-family: "Caveat", cursive;
  font-size: clamp(1.1rem, 2.1vw, 1.4rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  opacity: 0.96;
  margin-top: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .age-pill { transition: none; }
  .age-pill:hover { transform: none; }
}

/* INSTAGRAM STRIP - hover Instagram overlay ---------------------- */
.ig-strip-wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
  max-width: 1200px;
  margin: 0 auto;
}
@media (min-width: 768px) { .ig-strip-wrap { grid-template-columns: repeat(6, 1fr); gap: var(--s-3); } }
.ig-tile {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--r-md);
  display: block;
  box-shadow: var(--sh-sm);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.ig-tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
  z-index: 2;
}
.ig-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease), filter .3s var(--ease);
}
.ig-tile:hover img {
  transform: scale(1.1);
  filter: brightness(0.6);
}
.ig-tile__overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity .3s var(--ease);
  pointer-events: none;
}
.ig-tile:hover .ig-tile__overlay { opacity: 1; }
.ig-tile__overlay svg {
  width: 32px; height: 32px;
  color: #fff;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.6));
  transform: scale(0.8);
  transition: transform .4s var(--ease);
}
.ig-tile:hover .ig-tile__overlay svg { transform: scale(1); }
/* First tile - slightly offset for polaroid feel */
.ig-tile:nth-child(1) { transform: rotate(-1deg); }
.ig-tile:nth-child(2) { transform: rotate(0.6deg); }
.ig-tile:nth-child(3) { transform: rotate(-0.4deg); }
.ig-tile:nth-child(4) { transform: rotate(0.8deg); }
.ig-tile:nth-child(5) { transform: rotate(-0.6deg); }
.ig-tile:nth-child(1):hover { transform: rotate(0) translateY(-5px) scale(1.02); }
.ig-tile:nth-child(2):hover { transform: rotate(0) translateY(-5px) scale(1.02); }
.ig-tile:nth-child(3):hover { transform: rotate(0) translateY(-5px) scale(1.02); }
.ig-tile:nth-child(4):hover { transform: rotate(0) translateY(-5px) scale(1.02); }
.ig-tile:nth-child(5):hover { transform: rotate(0) translateY(-5px) scale(1.02); }

/* CONTACT CARDS - 6-card quick action grid (2 rows x 3 at desktop) --- */
.contact-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
  max-width: 1100px;
  margin: var(--s-7) auto 0;
}
@media (min-width: 760px) { .contact-cards { grid-template-columns: repeat(3, 1fr); gap: var(--s-4); } }
.contact-card {
  position: relative;
  padding: var(--s-5) var(--s-4) var(--s-4);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  text-align: center;
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.contact-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--coral);
  transform: scaleX(0.3);
  transform-origin: center;
  transition: transform .4s var(--ease);
}
.contact-card:hover,
.contact-card:focus-within {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: 0 16px 36px -20px rgba(17,20,24,0.3), 0 6px 16px rgba(17,20,24,0.1);
}
.contact-card:hover::before { transform: scaleX(1); }
.contact-card--address::before { background: var(--coral); }
.contact-card--phone::before { background: var(--moss); }
.contact-card--whatsapp::before { background: #25D366; }
.contact-card--social::before { background: var(--sky-deep); }
.contact-card--tiktok::before { background: #010101; }
.contact-card--facebook::before { background: #1877F2; }

.contact-card__icon {
  width: 56px; height: 56px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper-2);
  color: var(--coral);
  transition: background .3s var(--ease), color .3s var(--ease), transform .4s var(--ease);
}
.contact-card--phone .contact-card__icon { color: var(--moss-deep); }
.contact-card--whatsapp .contact-card__icon { color: #25D366; }
.contact-card--social .contact-card__icon { color: var(--sky-deep); }
.contact-card--tiktok .contact-card__icon { color: #010101; }
.contact-card--facebook .contact-card__icon { color: #1877F2; }
.contact-card:hover .contact-card__icon {
  transform: rotate(-10deg) scale(1.08);
}
.contact-card--address:hover .contact-card__icon { background: var(--coral); color: #fff; }
.contact-card--phone:hover .contact-card__icon { background: var(--moss); color: #fff; }
.contact-card--whatsapp:hover .contact-card__icon { background: #25D366; color: #fff; }
.contact-card--social:hover .contact-card__icon { background: var(--sky); color: #fff; }
.contact-card--tiktok:hover .contact-card__icon { background: #010101; color: #fff; }
.contact-card--facebook:hover .contact-card__icon { background: #1877F2; color: #fff; }
.contact-card__icon svg { width: 24px; height: 24px; }

.contact-card__title {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: var(--t-18);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1;
}
.contact-card__value {
  font-size: var(--t-14);
  color: var(--ink-2);
  line-height: 1.5;
  font-weight: 500;
}
.contact-card__hint {
  font-size: var(--t-12);
  color: var(--ink-3);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  margin-top: 2px;
}

/* FAQ - premium card style --------------------------------------- */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  max-width: 880px;
  margin: 0 auto;
  counter-reset: faq-counter;
}
details.faq-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
  counter-increment: faq-counter;
}
details.faq-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--coral);
  transform: scaleY(0.3);
  transform-origin: center;
  transition: transform .4s var(--ease), background .3s var(--ease);
}
details.faq-card:nth-of-type(5n+1)::before { background: var(--coral); }
details.faq-card:nth-of-type(5n+2)::before { background: var(--moss); }
details.faq-card:nth-of-type(5n+3)::before { background: var(--sky); }
details.faq-card:nth-of-type(5n+4)::before { background: var(--sun-deep); }
details.faq-card:nth-of-type(5n)::before { background: var(--berry); }

details.faq-card:hover {
  border-color: var(--line-strong);
  box-shadow: 0 10px 30px -18px rgba(17,20,24,0.25);
}
details.faq-card:hover::before { transform: scaleY(0.7); }
details.faq-card[open] {
  border-color: var(--line-strong);
  box-shadow: 0 14px 40px -20px rgba(17,20,24,0.3);
}
details.faq-card[open]::before { transform: scaleY(1); }

details.faq-card summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  padding-left: calc(var(--s-5) + 4px);
  position: relative;
}
details.faq-card summary::-webkit-details-marker { display: none; }

.faq-card__num {
  font-family: "Anton", sans-serif;
  font-size: var(--t-14);
  letter-spacing: 0.12em;
  color: var(--ink-3);
  flex-shrink: 0;
  width: 30px;
  line-height: 1;
}
.faq-card__num::before {
  content: "0" counter(faq-counter);
}
.faq-card__q {
  flex: 1;
  font-family: "Anton", sans-serif;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: 400;
  letter-spacing: 0.005em;
  color: var(--ink);
  line-height: 1.3;
}
.faq-card__toggle {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 999px;
  background: #F3F1E4;
  border: 1.5px solid rgba(17,20,24,0.12);
  display: flex; align-items: center; justify-content: center;
  transition: background .3s var(--ease), transform .4s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  color: var(--ink);
}
.faq-card__toggle svg {
  width: 16px; height: 16px;
  transition: transform .4s var(--ease);
}
details.faq-card:hover .faq-card__toggle { background: var(--ink); color: #fff; border-color: var(--ink); }
details.faq-card[open] .faq-card__toggle { background: var(--ink); color: var(--sun); border-color: var(--ink); }
details.faq-card[open] .faq-card__toggle svg { transform: rotate(180deg); }

.faq-card__body {
  padding: 0 var(--s-5) var(--s-5);
  padding-left: calc(var(--s-5) + 4px + 30px + var(--s-4));
  color: var(--ink-2);
  font-size: var(--t-16);
  line-height: 1.7;
  animation: faqFadeIn .4s var(--ease);
}
.faq-card__body > * + * { margin-top: var(--s-3); }
.faq-card__body strong { color: var(--ink); font-weight: 600; }

@keyframes faqFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 560px) {
  details.faq-card summary { padding-left: calc(var(--s-4) + 4px); gap: var(--s-3); }
  .faq-card__num { display: none; }
  .faq-card__body { padding-left: calc(var(--s-4) + 4px); }
}

/* HAND-DRAWN DIVIDER - unique scribble + dots ------------------- */
.wave-divider {
  display: block;
  width: 100%;
  height: 100px;
  position: relative;
  z-index: 2;
  line-height: 0;
  pointer-events: none;
  overflow: hidden;
}
.wave-divider svg { width: 100%; height: 100%; display: block; }
.wave-divider--down { margin-top: -1px; }
.wave-divider--up { margin-bottom: -1px; }

.scribble-divider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: var(--s-6) var(--s-4);
  pointer-events: none;
}
.scribble-divider svg { display: block; height: 28px; width: auto; color: var(--coral); }
.scribble-divider .scribble-dot {
  width: 8px; height: 8px;
  background: var(--coral);
  border-radius: 50%;
}
.scribble-divider .scribble-dot:nth-child(2) { background: var(--moss); }
.scribble-divider .scribble-dot:nth-child(4) { background: var(--sky); }
.scribble-divider .scribble-dot:nth-child(6) { background: var(--sun); }
.scribble-divider .scribble-line {
  flex: 1;
  height: 2px;
  background-image: radial-gradient(circle, var(--ink-3) 1px, transparent 1.5px);
  background-size: 12px 2px;
  background-repeat: repeat-x;
  background-position: 0 50%;
  max-width: 200px;
  opacity: 0.5;
}

/* PHOTO STRIP BLEED - editorial transition between sections */
.photo-strip-bleed {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  padding: 4px;
  margin: 0;
  background: var(--paper-2);
  position: relative;
  overflow: hidden;
}
.photo-strip-bleed img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  display: block;
}
@media (max-width: 600px) {
  .photo-strip-bleed { grid-template-columns: repeat(3, 1fr); }
  .photo-strip-bleed img:nth-child(n+4) { display: none; }
}

/* SECTION SCROLL-TRIGGER GRADIENT BG (subtle) */
.section--mesh {
  position: relative;
  overflow: hidden;
}
.section--mesh::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(118,185,71,0.10) 0%, transparent 40%),
    radial-gradient(ellipse at 80% 80%, rgba(227,99,41,0.08) 0%, transparent 40%),
    radial-gradient(ellipse at 50% 30%, rgba(40,184,218,0.06) 0%, transparent 50%);
  z-index: 0;
}
.section--mesh > * { position: relative; z-index: 1; }

/* WHATSAPP FAB --------------------------------------------------- */
.whatsapp-fab {
  position: fixed; bottom: 24px; right: 24px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #25D366; color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 12px 32px rgba(37,211,102,0.4);
  z-index: 80;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.whatsapp-fab:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 16px 40px rgba(37,211,102,0.55); }
.whatsapp-fab::before {
  content: "Chat · +40 768 312 448";
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) scale(0.9);
  background: var(--ink);
  color: var(--paper);
  font-family: "Anton", sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 999px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.whatsapp-fab:hover::before {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}
.whatsapp-fab svg { width: 28px; height: 28px; }
.whatsapp-fab::after {
  content: "";
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(37,211,102,0.4);
  animation: wapulse 2s ease-out infinite;
  pointer-events: none;
}
@keyframes wapulse {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .whatsapp-fab::after { animation: none; } }

/* Back-to-top alt glow variant */
@keyframes scrollTopReveal {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

/* SCROLL-TO-TOP FAB --------------------------------------------- */
.scroll-top {
  position: fixed; bottom: 24px; left: 24px;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--ink); color: var(--paper);
  display: grid; place-items: center;
  box-shadow: 0 12px 32px rgba(17,20,24,0.25);
  cursor: pointer;
  opacity: 0; pointer-events: none;
  transform: translateY(12px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), background .2s var(--ease);
  z-index: 80;
}
.scroll-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.scroll-top:hover {
  background: var(--moss-deep);
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 18px 40px rgba(47,82,51,0.45);
}
.scroll-top::before {
  content: "Sus";
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) scale(0.85);
  background: var(--ink);
  color: var(--sun);
  padding: 6px 12px;
  border-radius: 999px;
  font-family: "Anton", sans-serif;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  white-space: nowrap;
}
.scroll-top:hover::before {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}
.scroll-top svg {
  width: 22px; height: 22px;
  transition: transform .3s var(--ease);
}
.scroll-top:hover svg { transform: translateY(-3px); }
.scroll-top:active svg { transform: translateY(-5px) scale(0.9); }

/* PROGRAMS GRID ON MOBILE - single column stack (no horizontal scroll) */
@media (max-width: 768px) {
  .programs {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    gap: var(--s-3);
    overflow: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }
  .program { scroll-snap-align: none; width: 100%; }
}

/* AGE GROUP HOVER ------------------------------------------------ */
.age-group {
  transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.age-group:hover { transform: translateY(-4px); }

/* DECORATIVE ACCENTS ---------------------------------------------- */
.deco-star {
  display: inline-block;
  width: 1em; height: 1em;
  vertical-align: middle;
  color: var(--coral);
}
.scribble-underline {
  position: relative;
  display: inline-block;
}
.scribble-underline::after {
  content: "";
  position: absolute;
  left: -4%; bottom: -0.18em;
  width: 108%; height: 0.22em;
  background: var(--sun);
  border-radius: 50%;
  z-index: -1;
  transform: skew(-2deg);
  opacity: 0.85;
}

.deco-floating-star {
  position: absolute;
  font-size: 32px;
  color: var(--coral);
  pointer-events: none;
  animation: twinkle 3s ease-in-out infinite alternate, drift 8s ease-in-out infinite alternate;
}
@keyframes drift {
  0% { translate: 0 0; }
  100% { translate: 12px -16px; }
}
@keyframes twinkle {
  0% { opacity: 0.4; transform: scale(0.85) rotate(0deg); }
  100% { opacity: 1; transform: scale(1.15) rotate(15deg); }
}
@media (prefers-reduced-motion: reduce) {
  .deco-floating-star { animation: none; }
}

/* PROGRAM CARDS - sophisticated hover ----------------------------- */
.program {
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.program:hover {
  transform: translateY(-6px) rotate(-0.5deg);
  box-shadow: 0 30px 60px -20px rgba(17,20,24,0.4), 0 12px 22px rgba(17,20,24,0.18);
}
.program__media { position: relative; overflow: hidden; }
.program__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(17,20,24,0.12) 100%);
}
.program__bigbutton {
  position: relative;
  overflow: hidden;
  transition: letter-spacing .35s var(--ease);
}
.program:hover .program__bigbutton { letter-spacing: 0.06em; }

/* SECTION DIVIDERS - small handmade accents ----------------------- */
.divider-stars {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  color: var(--coral);
  margin: var(--s-4) 0;
}
.divider-stars svg { width: 18px; height: 18px; }
.divider-stars::before, .divider-stars::after {
  content: ""; display: block;
  width: 60px; height: 1px;
  background: var(--line-strong);
}

/* BTN-PILL shimmer -------------------------------------------------- */
.btn-pill { position: relative; overflow: hidden; }
.btn-pill::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 25%, rgba(255,255,255,0.5) 50%, transparent 75%);
  transform: translateX(-150%);
  transition: transform .8s var(--ease);
  pointer-events: none;
}
.btn-pill:hover::after { transform: translateX(150%); }

/* SUNBURST BACKGROUND - signature Canva element --------------------- */
.sunburst {
  position: relative;
  background: var(--moss);
  overflow: hidden;
  isolation: isolate;
}
.sunburst::before {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 200%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    var(--moss-deep) 0deg, transparent 12deg,
    var(--moss-deep) 30deg, transparent 42deg,
    var(--moss-deep) 60deg, transparent 72deg,
    var(--moss-deep) 90deg, transparent 102deg,
    var(--moss-deep) 120deg, transparent 132deg,
    var(--moss-deep) 150deg, transparent 162deg,
    var(--moss-deep) 180deg, transparent 192deg,
    var(--moss-deep) 210deg, transparent 222deg,
    var(--moss-deep) 240deg, transparent 252deg,
    var(--moss-deep) 270deg, transparent 282deg,
    var(--moss-deep) 300deg, transparent 312deg,
    var(--moss-deep) 330deg, transparent 342deg,
    var(--moss-deep) 360deg
  );
  opacity: 0.35;
  z-index: -1;
  animation: spin 90s linear infinite;
}
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.sunburst--coral { background: var(--coral); }
.sunburst--coral::before {
  background: conic-gradient(
    var(--coral-deep) 0deg, transparent 12deg,
    var(--coral-deep) 30deg, transparent 42deg,
    var(--coral-deep) 60deg, transparent 72deg,
    var(--coral-deep) 90deg, transparent 102deg,
    var(--coral-deep) 120deg, transparent 132deg,
    var(--coral-deep) 150deg, transparent 162deg,
    var(--coral-deep) 180deg, transparent 192deg,
    var(--coral-deep) 210deg, transparent 222deg,
    var(--coral-deep) 240deg, transparent 252deg,
    var(--coral-deep) 270deg, transparent 282deg,
    var(--coral-deep) 300deg, transparent 312deg,
    var(--coral-deep) 330deg, transparent 342deg,
    var(--coral-deep) 360deg
  );
}
.sunburst--sky { background: var(--sky); }
.sunburst--sky::before {
  background: conic-gradient(
    var(--sky-deep) 0deg, transparent 12deg,
    var(--sky-deep) 30deg, transparent 42deg,
    var(--sky-deep) 60deg, transparent 72deg,
    var(--sky-deep) 90deg, transparent 102deg,
    var(--sky-deep) 120deg, transparent 132deg,
    var(--sky-deep) 150deg, transparent 162deg,
    var(--sky-deep) 180deg, transparent 192deg,
    var(--sky-deep) 210deg, transparent 222deg,
    var(--sky-deep) 240deg, transparent 252deg,
    var(--sky-deep) 270deg, transparent 282deg,
    var(--sky-deep) 300deg, transparent 312deg,
    var(--sky-deep) 330deg, transparent 342deg,
    var(--sky-deep) 360deg
  );
}
@media (prefers-reduced-motion: reduce) {
  .sunburst::before { animation: none; }
}

/* WHERE IT ALL BEGINS - signature Canva tagline band ----------------- */
.tagline-band {
  background: var(--moss);
  color: var(--paper);
  padding: var(--s-7) var(--s-4);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.tagline-band--sun::before, .tagline-band--sun::after {
  content: "";
  position: absolute;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: rgba(17,20,24,0.04);
  z-index: 0;
  animation: circleFloat 14s ease-in-out infinite;
}
.tagline-band--sun::before { top: -140px; left: -60px; }
.tagline-band--sun::after { bottom: -140px; right: -60px; animation-delay: -7s; }
@keyframes circleFloat {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(20px, 10px); }
}
@media (prefers-reduced-motion: reduce) {
  .tagline-band--sun::before, .tagline-band--sun::after { animation: none; }
}

/* Subtle scattered sparkles in every tagline band */
.tagline-band {
  background-image:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,0.14) 0, rgba(255,255,255,0.14) 2px, transparent 3px),
    radial-gradient(circle at 85% 80%, rgba(255,255,255,0.1) 0, rgba(255,255,255,0.1) 1.8px, transparent 2.8px),
    radial-gradient(circle at 50% 10%, rgba(255,255,255,0.08) 0, rgba(255,255,255,0.08) 2.2px, transparent 3.2px);
  background-size: 100% 100%;
  background-position: center;
}
.tagline-band--sun {
  background-image:
    radial-gradient(circle at 15% 20%, rgba(17,20,24,0.08) 0, rgba(17,20,24,0.08) 2px, transparent 3px),
    radial-gradient(circle at 85% 80%, rgba(17,20,24,0.06) 0, rgba(17,20,24,0.06) 1.8px, transparent 2.8px),
    radial-gradient(circle at 50% 10%, rgba(17,20,24,0.05) 0, rgba(17,20,24,0.05) 2.2px, transparent 3.2px);
}
.tagline-band > * { position: relative; z-index: 1; }
.tagline-band__inner {
  font-family: "Anton", "Bebas Neue", "Fraunces", sans-serif;
  font-weight: 400;
  font-size: clamp(2.5rem, 9vw, 7rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: rgba(243,241,228,0.95);
  -webkit-text-stroke: 0;
  text-shadow: 4px 5px 0 rgba(17,20,24,0.08);
}
.tagline-band--sun .tagline-band__inner {
  text-shadow: 3px 4px 0 rgba(17,20,24,0.12);
}
.tagline-band--coral { background: var(--coral); }
.tagline-band--sky { background: var(--sky); }
.tagline-band--sun { background: var(--sun); color: var(--ink); }
.tagline-band--ink { background: var(--ink); }

.tagline-band__sub {
  font-family: "Caveat", cursive;
  font-size: var(--t-30);
  margin-top: var(--s-3);
  color: var(--paper);
  line-height: 1.3;
}
.tagline-band--sun .tagline-band__sub { color: var(--ink); }

/* ============================================================
   TAGLINE BAND -INK (where it all begins) enhanced visual treatment
   ============================================================ */
.tagline-band--ink {
  padding: var(--s-8) var(--s-5);
  background:
    /* soft vignette so edges feel framed */
    radial-gradient(ellipse at 50% 50%, rgba(251,200,0,0.08) 0%, transparent 55%),
    /* subtle radiating rays emanating from center */
    conic-gradient(from 0deg at 50% 50%,
      rgba(251,200,0,0.055) 0deg, transparent 8deg,
      rgba(251,200,0,0.055) 22deg, transparent 30deg,
      rgba(251,200,0,0.055) 44deg, transparent 52deg),
    var(--ink);
}
.tagline-band--ink::before,
.tagline-band--ink::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(70%, 520px);
  height: 2px;
  background-image: linear-gradient(to right,
    transparent 0%,
    rgba(251,200,0,0.55) 15%,
    rgba(251,200,0,0.55) 50%,
    rgba(251,200,0,0.55) 85%,
    transparent 100%);
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.tagline-band--ink::before {
  top: 28px;
  background-image:
    repeating-linear-gradient(90deg, rgba(251,200,0,0.55) 0 8px, transparent 8px 16px);
}
.tagline-band--ink::after {
  bottom: 28px;
  background-image:
    repeating-linear-gradient(90deg, rgba(251,200,0,0.55) 0 8px, transparent 8px 16px);
}

/* Scattered sparkles */
.tagline-band__spark {
  position: absolute;
  color: var(--sun);
  font-family: "DM Sans", sans-serif;
  opacity: 0.55;
  pointer-events: none;
  animation: sparkTwinkle 4s ease-in-out infinite;
  user-select: none;
}
.tagline-band__spark--1 { top: 18%; left: 8%; font-size: 18px; animation-delay: 0s; }
.tagline-band__spark--2 { top: 22%; right: 10%; font-size: 14px; color: var(--coral); animation-delay: 0.8s; }
.tagline-band__spark--3 { bottom: 22%; left: 14%; font-size: 16px; color: var(--moss); animation-delay: 1.6s; }
.tagline-band__spark--4 { bottom: 18%; right: 8%; font-size: 22px; animation-delay: 2.4s; }
@keyframes sparkTwinkle {
  0%, 100% { opacity: 0.35; transform: scale(0.9) rotate(0deg); }
  50% { opacity: 0.85; transform: scale(1.15) rotate(180deg); }
}
@media (prefers-reduced-motion: reduce) { .tagline-band__spark { animation: none; } }

/* Kicker eyebrow above the main line */
.tagline-band__kicker {
  position: relative;
  z-index: 2;
  display: inline-block;
  font-family: "DM Sans", sans-serif;
  font-size: clamp(11px, 1.2vw, 13px);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(251,200,0,0.85);
  margin: 0 0 var(--s-4);
  padding: 6px 18px;
  border: 1px solid rgba(251,200,0,0.4);
  border-radius: 999px;
  background: rgba(251,200,0,0.06);
}

/* Main headline - yellow accent + underline on "begins" */
.tagline-band--ink .tagline-band__inner {
  color: rgba(243,241,228,0.97);
  text-shadow:
    0 2px 0 rgba(0,0,0,0.35),
    0 8px 24px rgba(0,0,0,0.4);
  letter-spacing: -0.005em;
}
.tagline-band__accent {
  position: relative;
  color: var(--sun);
  display: inline-block;
  padding: 0 2px;
}
.tagline-band__accent::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.04em;
  height: 0.12em;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--coral) 10%,
    var(--sun) 50%,
    var(--coral) 90%,
    transparent 100%);
  border-radius: 999px;
  opacity: 0.85;
  transform: skewX(-14deg);
}
.tagline-band__dot {
  color: var(--coral);
  display: inline-block;
  transform: translateY(0.02em);
}

/* Sub caption below */
.tagline-band--ink .tagline-band__sub {
  margin-top: var(--s-4);
  font-family: "DM Sans", sans-serif;
  font-size: clamp(12px, 1.3vw, 14px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(243,241,228,0.5);
  font-weight: 500;
}

/* Mobile: tighter padding, smaller kicker/sub, sparkles closer in */
@media (max-width: 600px) {
  .tagline-band--ink { padding: var(--s-7) var(--s-3) !important; }
  .tagline-band--ink::before { top: 20px; }
  .tagline-band--ink::after { bottom: 20px; }
  .tagline-band__kicker {
    font-size: 10px;
    padding: 5px 14px;
    letter-spacing: 0.22em;
  }
  .tagline-band--ink .tagline-band__sub {
    font-size: 11px;
    letter-spacing: 0.2em;
    margin-top: var(--s-3);
  }
  .tagline-band__spark--1 { top: 14%; left: 6%; font-size: 14px; }
  .tagline-band__spark--2 { top: 18%; right: 7%; font-size: 12px; }
  .tagline-band__spark--3 { bottom: 18%; left: 8%; font-size: 14px; }
  .tagline-band__spark--4 { bottom: 14%; right: 6%; font-size: 18px; }
}

/* Display chunky font helper */
.chunky {
  font-family: "Anton", "Bebas Neue", "Fraunces", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  line-height: 0.95;
  font-feature-settings: "kern" 1, "liga" 1, "ss01" 1;
  word-spacing: 0.03em;
}
@media (min-width: 768px) {
  .chunky { letter-spacing: 0.005em; }
}
.chunky--outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--ink);
  text-stroke: 2px var(--ink);
}

/* PHOTO LOAD SKELETONS -------------------------------------------- */
img { background: linear-gradient(110deg, var(--paper-2) 8%, var(--paper-3) 18%, var(--paper-2) 33%); background-size: 200% 100%; animation: shimmer 1.6s linear infinite; }
img[src] { animation: none; background: transparent; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { img { animation: none; background: var(--paper-2); } }

/* Lazy-load fade-in - images fade smoothly once they finish loading */
.masonry img, .about-photo-strip img, .team-grid img, .event-photos img, .ig-tile img {
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease);
  filter: blur(6px);
}
.masonry img.is-loaded, .about-photo-strip img.is-loaded, .team-grid img.is-loaded,
.event-photos img.is-loaded, .ig-tile img.is-loaded,
img[data-loaded="true"] {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

/* PHOTO POLISH UTILITIES ----------------------------------------- */
/* Apply to any <img> that should feel like a gallery photo: subtle
   shadow, hover lift with shadow deepen, rounded corners. Cheap to add
   per-image without needing structural changes. */
.photo-polish {
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), filter .45s var(--ease);
  will-change: transform;
}
.photo-polish:hover {
  transform: translateY(-4px) scale(1.015);
  box-shadow: var(--sh-md);
  filter: saturate(1.1) brightness(1.02);
}

/* EDITORIAL TYPOGRAPHY - drop-caps & pull quotes ----------------- */
/* Drop-cap on the first standard paragraph after a pullquote/intro */
.story-body > p:not(.story-pullquote):first-of-type::first-letter,
.story-body > .story-pullquote + p::first-letter {
  float: left;
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: 5em;
  line-height: 0.85;
  padding: 4px 12px 0 0;
  color: var(--moss);
  text-shadow: 2px 2px 0 rgba(17,20,24,0.06);
}
/* First line emphasis on story paragraphs */
.story-body > .story-pullquote + p::first-line {
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.005em;
}
.story-pullquote {
  position: relative;
  font-family: "Caveat", cursive;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  color: var(--moss-deep);
  text-align: center;
  line-height: 1.2;
  margin: var(--s-5) auto;
  padding: var(--s-4) var(--s-5);
  max-width: 44ch;
}
.story-pullquote::before,
.story-pullquote::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 48px; height: 2px;
  background: linear-gradient(to right, transparent, var(--moss), transparent);
  transform: translateX(-50%);
}
.story-pullquote::before { top: 0; }
.story-pullquote::after { bottom: 0; }

/* Polaroid wrapper - tilted photo card (for About-page strip etc.) */
.polaroid {
  position: relative;
  background: #fff;
  padding: 10px 10px 36px;
  border-radius: 4px;
  box-shadow: 0 14px 28px -12px rgba(17,20,24,0.35), 0 4px 10px rgba(17,20,24,0.1);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  display: block;
  cursor: pointer;
}
.polaroid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 2px;
  display: block;
}
.polaroid__cap {
  position: absolute;
  bottom: 8px; left: 0; right: 0;
  text-align: center;
  font-family: "Caveat", cursive;
  font-size: 1.05rem;
  color: var(--ink-3);
  line-height: 1;
}
.polaroid:nth-child(1) { transform: rotate(-1.8deg); }
.polaroid:nth-child(2) { transform: rotate(1.2deg); }
.polaroid:nth-child(3) { transform: rotate(-0.8deg); }
.polaroid:nth-child(4) { transform: rotate(2deg); }

/* Washi tape at the top of each polaroid */
.polaroid::before {
  content: "";
  position: absolute;
  top: -8px; left: 50%;
  width: 48px; height: 18px;
  transform: translateX(-50%) rotate(-4deg);
  background-image: repeating-linear-gradient(45deg, transparent 0, transparent 4px, rgba(255,255,255,0.25) 4px, rgba(255,255,255,0.25) 6px);
  border: 1px solid rgba(17,20,24,0.08);
  box-shadow: 0 2px 5px rgba(17,20,24,0.15);
  z-index: 3;
}
.polaroid:nth-child(1)::before { background-color: rgba(251,200,0,0.75); }
.polaroid:nth-child(2)::before { background-color: rgba(227,99,41,0.7); }
.polaroid:nth-child(3)::before { background-color: rgba(40,184,218,0.7); }
.polaroid:nth-child(4)::before { background-color: rgba(118,185,71,0.75); }
.polaroid:hover {
  transform: rotate(0) translateY(-6px) scale(1.02);
  box-shadow: 0 24px 48px -16px rgba(17,20,24,0.45), 0 8px 18px rgba(17,20,24,0.15);
  z-index: 2;
}

/* IMPROVED FOCUS STATES ------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 4px;
  border-radius: var(--r-sm);
}
.btn-pill:focus-visible, .nav__link:focus-visible, .program:focus-visible {
  outline-offset: 6px;
}

/* MOBILE POLISH -------------------------------------------------- */
@media (max-width: 600px) {
  .hero-bleed__title { font-size: clamp(2rem, 11vw, 3.6rem); }
  .hero-bleed__inner { padding: var(--s-5) var(--s-4) var(--s-6); }
  .belt__item { font-size: var(--t-18); }
  .nav__menu { display: none; }
  .section { padding: var(--s-7) 0; }
  .tagline-band__inner { font-size: clamp(2rem, 13vw, 4rem); }
}

/* SCROLL-LINKED BG TINT ------------------------------------------- */
@keyframes paperTint { 0%, 100% { background-color: var(--paper); } 50% { background-color: #F5EFDC; } }
body { animation: pageFadeIn .5s ease-out both, paperTint 28s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { body { animation: none; } }

/* SR ONLY ------------------------------------------------------------ */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* SKIP LINK ---------------------------------------------------------- */
/* Skip-to-content removed - per user request */
.skip { display: none !important; }

/* ACCESSIBILITY ENHANCEMENTS -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .deco-floating-star, .belt__track, body, .hero-bleed__bg, .hero-scroll-hint svg, * { animation: none !important; }
}
[role="button"], button, a { cursor: pointer; }
.lightbox img { cursor: zoom-out; }
.masonry__item { cursor: zoom-in; }

/* ==========================================================================
   EVENTS PAGE V2 - structured 6-phase redesign
   ========================================================================== */

/* Token extensions for new themes */
:root {
  --night:        #0B1628;   /* sleepover deep navy */
  --night-2:      #152843;
  --night-soft:   #2A3F5F;
  --rose:         #E8B4BC;   /* mother's day soft pink */
  --rose-soft:    #F9E3E6;
  --rose-deep:    #C67C88;
  --crazy:        #D63027;   /* crazy week urgency red */
  --crazy-deep:   #9A1E18;
}

/* PHASE 5 - EVENTS LANDING HERO ------------------------------------- */
.events-page-hero {
  padding: var(--s-7) 0 var(--s-5);
  position: relative;
  overflow: hidden;
}
.events-page-hero__top {
  text-align: center;
  max-width: 820px;
  margin: 0 auto var(--s-6);
}
.events-page-hero__eyebrow {
  font-family: "Caveat", cursive;
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--coral);
  margin-bottom: var(--s-2);
}
.events-page-hero__title {
  font-size: clamp(3rem, 9vw, 6rem);
  color: var(--ink);
  line-height: 0.95;
  letter-spacing: -0.02em;
}
.events-page-hero__subtitle {
  margin-top: var(--s-3);
  font-size: var(--t-18);
  color: var(--ink-2);
  line-height: 1.6;
}

/* =========================================================================
   ANNOUNCEMENTS SLIDESHOW (/events, above the 4-card grid)
   Driven by /api/blog/featured. Same max-width as the card grid below.
   ========================================================================= */
.announce {
  position: relative;
  max-width: 1440px;
  margin: var(--s-6) auto var(--s-6);
}
/* Section heading — centered Anton display title, with a subtle underline
   accent matching the brand. Replaces the old "ce e nou" pill. */
.announce__heading {
  margin: 0 auto 22px;
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink);
  text-align: center;
  position: relative;
  width: fit-content;
  padding-bottom: 10px;
}
.announce__heading::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 64px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sun), var(--coral));
}

/* Dark-theme variant — used on /sleepovers' night-sky section. White title,
   glass arrows, softer dot contrast. Toggled by adding `announce--dark`. */
.announce--dark .announce__heading { color: #fff; }
.announce--dark .announce__heading::after {
  background: linear-gradient(90deg, var(--sun), #fff);
  opacity: 0.85;
}
.announce--dark .announce__nav {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow:
    0 14px 30px -10px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.announce--dark .announce__nav:hover {
  background: var(--sun);
  color: var(--ink);
  border-color: var(--sun);
  box-shadow: 0 18px 38px -10px rgba(251, 200, 0, 0.55);
}
.announce--dark .announce__dot {
  background: rgba(255, 255, 255, 0.25);
}
.announce--dark .announce__dot.is-active {
  background: var(--sun);
}

.announce__viewport {
  position: relative;
  overflow: hidden;
  border-radius: clamp(16px, 2vw, 24px);
  background: #0e1016;
  box-shadow:
    0 28px 60px -24px rgba(17, 20, 24, 0.45),
    0 10px 24px -10px rgba(17, 20, 24, 0.2);
  aspect-ratio: 8 / 3;
  isolation: isolate;
}
@media (max-width: 720px) {
  .announce__viewport { aspect-ratio: 4 / 5; }
}

.announce__track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.announce-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: block;
  color: #fff;
  text-decoration: none;
  overflow: hidden;
}
.announce-slide__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.announce-slide__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.announce-slide:hover .announce-slide__media img {
  transform: scale(1.04);
}
.announce-slide__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg,
      rgba(10, 12, 16, 0.82) 0%,
      rgba(10, 12, 16, 0.55) 35%,
      rgba(10, 12, 16, 0.2)  65%,
      rgba(10, 12, 16, 0.05) 100%),
    linear-gradient(180deg,
      rgba(10, 12, 16, 0.15) 0%,
      rgba(10, 12, 16, 0.55) 100%);
  pointer-events: none;
}
@media (max-width: 720px) {
  .announce-slide__shade {
    background: linear-gradient(180deg,
      rgba(10, 12, 16, 0.25) 0%,
      rgba(10, 12, 16, 0.35) 45%,
      rgba(10, 12, 16, 0.88) 100%);
  }
}
.announce-slide__body {
  position: absolute;
  left: clamp(22px, 4vw, 56px);
  right: clamp(22px, 4vw, 56px);
  bottom: clamp(22px, 4vw, 48px);
  z-index: 2;
  max-width: 620px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 721px) {
  .announce-slide__body {
    top: 50%;
    transform: translateY(-50%);
    bottom: auto;
  }
}
.announce-slide__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.02em;
}
.announce-slide__category {
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--sun);
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(251, 200, 0, 0.35);
}
.announce-slide__meta-sep { opacity: 0.55; }
.announce-slide__title {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(1.8rem, 4.4vw, 3.2rem);
  /* Generous leading — Anton is tall and Romanian diacritics (Ț's cedilla
     below, Ă / Î accents above) each eat into neighbour lines. 1.3 gives
     safe vertical separation at every viewport size. */
  line-height: 1.3;
  letter-spacing: 0.012em;
  color: #fff;
  margin: 0;
  /* Small padding so the top of a capital accent (Ă, Î) never collides
     with the meta row above. */
  padding: 0.08em 0;
  text-transform: uppercase;
  text-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
  text-wrap: balance;
}
.announce-slide__excerpt {
  color: rgba(255, 255, 255, 0.85);
  font-size: clamp(0.95rem, 1.3vw, 1.08rem);
  line-height: 1.55;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.announce-slide__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px 10px 20px;
  border-radius: 999px;
  background: var(--sun);
  color: var(--ink);
  font-family: "Anton", sans-serif;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(251, 200, 0, 0.35);
  align-self: flex-start;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  margin-top: 4px;
}
.announce-slide:hover .announce-slide__cta {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 14px 28px rgba(251, 200, 0, 0.5);
}

/* Stage wraps the viewport so we can absolutely position the prev/next
   arrows OUTSIDE the clipped viewport (like the reference design).
   The viewport keeps its full width — only the arrows sit outside. */
.announce__stage {
  position: relative;
}

/* `.announce__nav` sets display: grid; the HTML [hidden] attribute (set by
   JS when there's only one slide) would otherwise be overridden. Force
   display: none so the arrows disappear entirely. */
.announce__nav[hidden],
.announce__dots[hidden] { display: none !important; }

/* Prev / next arrows */
.announce__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  border: 1.5px solid rgba(17, 20, 24, 0.12);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow:
    0 14px 30px -10px rgba(17, 20, 24, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: background 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
  z-index: 3;
}
.announce__nav:hover {
  background: var(--coral);
  border-color: var(--coral);
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 18px 38px -10px rgba(227, 99, 41, 0.55);
}
.announce__nav:active { transform: translateY(-50%) scale(0.96); }

/* Desktop: arrows sit entirely outside the viewport (negative left/right
   relative to the stage = negative relative to the slideshow box). */
@media (min-width: 980px) {
  .announce__nav--prev { left: clamp(-72px, -4vw, -56px); }
  .announce__nav--next { right: clamp(-72px, -4vw, -56px); }
}

/* Mid widths: outside but tighter */
@media (min-width: 721px) and (max-width: 979px) {
  .announce__nav--prev { left: -26px; }
  .announce__nav--next { right: -26px; }
}

/* Under 720px the arrows become glass overlays on top of the slide
   (viewport flips to 4:5 portrait so there's no horizontal room). */
@media (max-width: 720px) {
  .announce__nav {
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  }
  .announce__nav:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.4);
  }
  .announce__nav--prev { left: 10px; }
  .announce__nav--next { right: 10px; }
}

/* Dots */
.announce__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}
.announce__dot {
  width: 24px;
  height: 6px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(17, 20, 24, 0.18);
  cursor: pointer;
  transition: background 0.3s var(--ease), width 0.4s var(--ease);
}
.announce__dot.is-active {
  background: var(--coral);
  width: 44px;
}

@media (prefers-reduced-motion: reduce) {
  .announce__track { transition: none; }
  .announce-slide__media img { transition: none; }
  .announce__label-dot { animation: none; }
}

.events-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  max-width: 1440px;
  margin: 0 auto;
  justify-content: center;
  justify-items: stretch;
}
@media (min-width: 640px) {
  .events-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-4);
  }
}
@media (min-width: 1024px) {
  .events-cards-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-3);
  }
  .events-cards-grid > * { width: 100%; max-width: none; }
}

.event-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  min-height: 520px;
  width: 100%;
  text-decoration: none;
  background: var(--paper-2);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), filter .4s var(--ease);
  box-shadow: 0 10px 28px -12px rgba(17,20,24,0.22), 0 3px 10px rgba(17,20,24,0.10);
  isolation: isolate;
  will-change: transform;
}
.event-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px -20px rgba(17,20,24,0.45), 0 10px 24px rgba(17,20,24,0.14);
  filter: saturate(1.08);
}
/* Color stripe bottom accent that expands on hover */
.event-card::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: var(--moss);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .5s var(--ease);
  z-index: 3;
}
.event-card:hover::after { transform: scaleX(1); }
.event-card--summer::after { background: var(--moss); }
.event-card--bday::after { background: var(--sky); }
.event-card--sleep::after { background: var(--coral); }
.event-card--community::after { background: var(--sun, #FBC800); }
.event-card--crazy::after { background: var(--crazy, #D0342C); }
.event-card--mothers::after { background: var(--rose, #E36396); }
.event-card:focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: 4px;
}
.event-card__media {
  position: absolute; inset: 0;
  overflow: hidden;
}
.event-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .9s var(--ease);
}
.event-card:hover .event-card__media img { transform: scale(1.08); }
.event-card__shade {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(17,20,24,0.78) 0%, rgba(17,20,24,0.35) 55%, rgba(17,20,24,0.12) 100%);
  z-index: 1;
}
.event-card__body {
  position: relative; z-index: 2;
  padding: var(--s-5);
  margin-top: auto;
  color: #fff;
}
.event-card__date {
  font-family: "Caveat", cursive;
  font-size: var(--t-24);
  color: var(--sun);
  line-height: 1;
  margin-bottom: 6px;
}
.event-card__price {
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.8);
  margin-top: 2px;
}
.event-card__name {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: 0.01em;
  line-height: 1;
}
.event-card__price {
  margin-top: 8px;
  font-size: var(--t-14);
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.event-card__arrow {
  position: absolute; top: var(--s-3); right: var(--s-3);
  width: 42px; height: 42px;
  border-radius: 999px;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  transition: transform .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
  z-index: 2;
  border: 1px solid rgba(255,255,255,0.25);
}
.event-card:hover .event-card__arrow {
  background: var(--sun);
  color: var(--ink);
  transform: translate(6px, -6px) rotate(-15deg);
  border-color: var(--sun);
  box-shadow: 0 8px 24px rgba(251,200,0,0.5);
}
.event-card__arrow svg {
  width: 18px; height: 18px;
  transition: transform .3s var(--ease);
}
.event-card:hover .event-card__arrow svg {
  transform: scale(1.1);
}

/* Accent per event */
.event-card--summer .event-card__date { color: #BAE45A; }
.event-card--bday   .event-card__date { color: #8FE3F5; }
.event-card--sleep  .event-card__date { color: #FFA270; }
.event-card--community .event-card__date { color: #FFD83A; }
.event-card--crazy  .event-card__date { color: #FFD83A; }
.event-card--mothers .event-card__date { color: var(--rose-soft); }

/* PHASE 1 - STICKY EVENTS SUBNAV ------------------------------------ */
.events-subnav {
  position: sticky; top: 80px;
  z-index: 40;
  background: rgba(243,241,228,0.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
  transition: box-shadow .3s var(--ease);
}
.events-subnav.is-scrolled {
  box-shadow: 0 6px 20px -10px rgba(17,20,24,0.25);
}
.top-marquee ~ * .events-subnav { top: 116px; }
.events-subnav__track {
  display: flex; gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 var(--s-4);
  max-width: var(--container); margin: 0 auto;
  mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.events-subnav__track::-webkit-scrollbar { display: none; }
.events-subnav__link {
  flex-shrink: 0;
  padding: 8px 16px;
  font-size: var(--t-14);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  white-space: nowrap;
  transition: all .3s var(--ease);
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none;
}
.events-subnav__link:hover {
  color: var(--ink);
  background: rgba(17,20,24,0.04);
  border-color: var(--line-strong);
  transform: translateY(-1px);
}
.events-subnav__link .dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.5;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.events-subnav__link:hover .dot { opacity: 0.8; transform: scale(1.2); }
.events-subnav__link.is-active {
  color: #fff;
  background: var(--ink);
  border-color: var(--ink);
  box-shadow: 0 6px 16px -6px rgba(17,20,24,0.35);
}
.events-subnav__link.is-active .dot {
  opacity: 1;
  background: var(--sun);
  animation: subnavDotPulse 1.6s ease-in-out infinite;
}
@keyframes subnavDotPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(251,200,0,0.6); }
  50% { transform: scale(1.3); box-shadow: 0 0 0 4px rgba(251,200,0,0); }
}
@media (prefers-reduced-motion: reduce) { .events-subnav__link.is-active .dot { animation: none; } }

/* PHASE 2 - PRICING CARDS V2 + CTAs --------------------------------- */
.event-section {
  position: relative;
  padding: var(--s-9) 0;
  scroll-margin-top: 100px;
}
.event-section__header { animation-duration: 1.2s; }
.event-section__header {
  text-align: center;
  max-width: 820px;
  margin: 0 auto var(--s-6);
}
.event-section__eyebrow {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.event-section--summer .event-section__eyebrow {
  background: rgba(118,185,71,0.15);
  border-color: rgba(118,185,71,0.35);
  color: var(--moss);
}
.event-section--mothers .event-section__eyebrow {
  background: rgba(227,99,41,0.12);
  border-color: rgba(227,99,41,0.3);
  color: var(--coral-deep);
}
.event-section__title {
  margin-top: var(--s-3);
  font-size: clamp(3rem, 11vw, 7.5rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-wrap: balance;
  text-shadow: 4px 5px 0 rgba(17,20,24,0.08);
}
.event-section--bday .event-section__title,
.event-section--sleep .event-section__title,
.event-section--crazy .event-section__title {
  text-shadow: 4px 5px 0 rgba(17,20,24,0.25);
}
.event-section__tagline {
  font-family: "Caveat", cursive;
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  margin: var(--s-3) auto var(--s-4);
  line-height: 1.15;
  display: block;
  width: fit-content;
  transform: rotate(-0.8deg);
}

/* PRICING TICKET - the big pricing card per event */
.pricing-ticket {
  position: relative;
  max-width: 620px;
  margin: 0 auto;
  padding: var(--s-6) var(--s-5);
  background: rgba(255,255,255,0.96);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.pricing-ticket:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -24px rgba(17,20,24,0.4), 0 12px 28px rgba(17,20,24,0.12);
}
.pricing-ticket:hover .pricing-ticket__price {
  animation: ticketPriceBounce .5s var(--ease);
}
@keyframes ticketPriceBounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) { .pricing-ticket:hover .pricing-ticket__price { animation: none; } }
.pricing-ticket::before,
.pricing-ticket::after {
  content: "";
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px;
  border-radius: 999px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px rgba(17,20,24,0.08);
}
.pricing-ticket::before { left: -12px; }
.pricing-ticket::after { right: -12px; }
.pricing-ticket__label {
  font-family: "Caveat", cursive;
  font-size: var(--t-24);
  line-height: 1;
  margin-bottom: var(--s-2);
}
.pricing-ticket__price {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(3.5rem, 9vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin: var(--s-3) 0;
}
.pricing-ticket__price small { font-size: 0.4em; font-family: "DM Sans", sans-serif; font-weight: 500; opacity: 0.65; }
.pricing-ticket__meta {
  font-size: var(--t-14);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  margin-bottom: var(--s-4);
}
.pricing-ticket__includes {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center;
  max-width: 520px;
  margin: 0 auto var(--s-5);
}
/* When a hero pill is present, give it its own row above the rest */
.pricing-ticket__includes:has(.pricing-ticket__hero) {
  row-gap: 12px;
}
.pricing-ticket__includes:has(.pricing-ticket__hero) .pricing-ticket__hero {
  order: -2;
}
.pricing-ticket__includes:has(.pricing-ticket__hero)::before {
  content: "";
  order: -1;
  flex-basis: 100%;
  height: 0;
  margin: 0;
}
.pricing-ticket__includes span {
  font-size: var(--t-12);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(17,20,24,0.06);
  color: var(--ink-2);
  font-weight: 500;
}
/* Hero pill - the star-value inclusion that sells the package */
.pricing-ticket__includes span.pricing-ticket__hero {
  position: relative;
  font-size: var(--t-13);
  font-weight: 800;
  letter-spacing: 0.01em;
  padding: 6px 16px 6px 28px;
  color: var(--ink);
  background: linear-gradient(135deg, var(--sun) 0%, #FFD447 55%, var(--sun) 100%);
  background-size: 200% 100%;
  box-shadow:
    0 6px 14px rgba(251,200,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -2px 0 rgba(17,20,24,0.08);
  border: 1.5px solid rgba(17,20,24,0.12);
  animation: heroPillShine 3.5s ease-in-out infinite;
  text-shadow: 0 1px 0 rgba(255,255,255,0.35);
}
.pricing-ticket__includes span.pricing-ticket__hero::before {
  content: "✦";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--coral);
  font-size: 1em;
  animation: heroPillSpin 4s linear infinite;
}
@keyframes heroPillShine {
  0%, 100% { background-position: 0% 50%; box-shadow: 0 6px 14px rgba(251,200,0,0.45), inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -2px 0 rgba(17,20,24,0.08); }
  50% { background-position: 100% 50%; box-shadow: 0 8px 20px rgba(251,200,0,0.6), inset 0 1px 0 rgba(255,255,255,0.65), inset 0 -2px 0 rgba(17,20,24,0.08); }
}
@keyframes heroPillSpin {
  0% { transform: translateY(-50%) rotate(0); }
  100% { transform: translateY(-50%) rotate(360deg); }
}
.pricing-ticket__dual {
  max-width: 960px;
  display: grid; grid-template-columns: 1fr;
  gap: var(--s-5);
  margin: 0 auto;
}
.pricing-ticket__dual > .pricing-ticket {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
}
@media (min-width: 720px) {
  .pricing-ticket__dual { grid-template-columns: 1fr 1fr; gap: var(--s-5); }
}
@media (min-width: 1000px) {
  .pricing-ticket__dual { gap: var(--s-6); }
}
.pricing-ticket--compact { padding: var(--s-5) var(--s-4); max-width: none; }
.pricing-ticket--compact .pricing-ticket__price { font-size: clamp(2.5rem, 6vw, 3.5rem); }

.event-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 28px;
  background: #25D366;
  color: #fff;
  font-weight: 700;
  font-size: var(--t-16);
  letter-spacing: 0.02em;
  border-radius: var(--r-pill);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  box-shadow: 0 10px 24px rgba(37,211,102,0.35);
}
.event-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(37,211,102,0.45); }
.event-cta svg { width: 18px; height: 18px; }
.event-cta--alt {
  background: var(--sun); color: var(--ink);
  box-shadow: 0 10px 24px rgba(251,200,0,0.45);
}
.event-cta--alt:hover { box-shadow: 0 16px 36px rgba(251,200,0,0.55); }

/* BROCHURE-STYLE 3-COLUMN LIST (Summer Camp facilities/zone/activități) */
.brochure-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--s-3);
  align-items: stretch;
}
@media (min-width: 820px) { .brochure-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); } }

.brochure-col {
  position: relative;
  padding: var(--s-5) var(--s-4);
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--r-lg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
}
.brochure-col:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.2);
}
.brochure-col .brochure-list { flex: 1; }

/* Comic-book burst "⚡" accent decoration */
.brochure-col::before {
  content: "⚡";
  position: absolute;
  top: -8px; right: 18px;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));
  animation: brochureZap 3s ease-in-out infinite;
  animation-delay: 0s;
}
.brochure-col:nth-child(2)::before { content: "✦"; color: var(--sun); animation-delay: 0.8s; }
.brochure-col:nth-child(3)::before { content: "⚡"; animation-delay: 1.6s; }
@keyframes brochureZap {
  0%, 100% { transform: rotate(-6deg) scale(1); }
  50% { transform: rotate(8deg) scale(1.15); }
}
@media (prefers-reduced-motion: reduce) { .brochure-col::before { animation: none; } }

.brochure-col__title {
  font-family: "Anton", "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: clamp(3rem, 7vw, 4.8rem);
  line-height: 0.9;
  letter-spacing: 0.01em;
  color: var(--sun);
  text-transform: uppercase;
  margin-bottom: var(--s-5);
  text-shadow:
    4px 4px 0 rgba(17,20,24,0.28),
    -1px 1px 0 rgba(0,0,0,0.15),
    0 0 20px rgba(251,200,0,0.25);
  transform: rotate(-2deg);
  display: inline-block;
  position: relative;
}
.brochure-col:nth-child(2) .brochure-col__title { transform: rotate(1.4deg); }
.brochure-col:nth-child(3) .brochure-col__title { transform: rotate(-1deg); }

/* Handwritten underline stroke under each title */
.brochure-col__title::after {
  content: "";
  position: absolute;
  bottom: -10px; left: 8%;
  width: 80%; height: 8px;
  background: var(--sun);
  border-radius: 999px;
  opacity: 0.85;
  transform: rotate(-1deg);
  box-shadow: 2px 2px 0 rgba(17,20,24,0.2);
}
.brochure-col:nth-child(2) .brochure-col__title::after { transform: rotate(1.2deg); background: var(--coral); }
.brochure-col:nth-child(3) .brochure-col__title::after { transform: rotate(-0.8deg); background: #fff; }

.brochure-list {
  list-style: none;
  padding: 0;
  margin: var(--s-4) 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.brochure-list li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: clamp(var(--t-16), 1.6vw, var(--t-18));
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.005em;
  line-height: 1.35;
  text-shadow: 0 1px 2px rgba(17,20,24,0.25);
  transition: transform .25s var(--ease);
}
.brochure-list li::before {
  content: "";
  flex-shrink: 0;
  margin-top: 2px;
  width: 26px; height: 26px;
  border-radius: 6px;
  background: var(--sun);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23111418" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>');
  background-size: 16px;
  background-position: center;
  background-repeat: no-repeat;
  border: 2px solid rgba(17,20,24,0.8);
  box-shadow: 3px 3px 0 rgba(17,20,24,0.35);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.brochure-list li:hover {
  transform: translateX(4px);
}
.brochure-list li:hover::before {
  transform: scale(1.15) rotate(-8deg);
  box-shadow: 4px 4px 0 rgba(17,20,24,0.45);
}

/* Optional: subtle scattered decor sparkles in the column */
.brochure-col__decor {
  position: absolute;
  color: rgba(255,255,255,0.45);
  font-family: "Caveat", cursive;
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  pointer-events: none;
  line-height: 1;
}
.brochure-col__decor--1 { bottom: 18px; left: -8px; transform: rotate(-12deg); }
.brochure-col__decor--2 { top: 60%; right: -4px; transform: rotate(18deg); color: var(--sun); }

/* PHASE 3 - ICON FEATURE GRID (compact chip-style) ------------------ */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  max-width: 1200px;
  margin: 0 auto;
}
@media (min-width: 520px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 760px) { .feature-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1000px) { .feature-grid { grid-template-columns: repeat(5, 1fr); gap: 10px; } }
/* Balanced variant for grids where item count divides evenly into 4 */
.feature-grid--balanced { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 520px) { .feature-grid--balanced { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1000px) { .feature-grid--balanced { grid-template-columns: repeat(4, 1fr); } }

/* Center variant - flexbox so incomplete last row auto-centers */
.feature-grid--center {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.feature-grid--center .feature-item {
  flex: 0 1 auto;
}

.feature-item {
  display: flex; flex-direction: row; align-items: center; gap: 10px;
  padding: 8px 12px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  transition: transform .2s var(--ease), background .2s var(--ease);
  min-height: 44px;
}
.feature-item:hover { transform: translateY(-2px); background: rgba(255,255,255,0.2); }
.feature-item__icon {
  width: 28px; height: 28px;
  border-radius: 999px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.22);
  color: #fff;
}
.feature-item__icon svg { width: 16px; height: 16px; }
.feature-item__label {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feature-item--light { background: var(--paper-2); border: 1px solid var(--line); }
.feature-item--light:hover { background: var(--paper-3); }
.feature-item--light .feature-item__label { color: var(--ink); }
.feature-item--light .feature-item__icon { background: rgba(17,20,24,0.08); color: var(--ink); }

.feature-cluster {
  max-width: 1080px; margin: 0 auto;
}
.feature-cluster__title {
  text-align: center;
  font-family: "Caveat", cursive;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin-bottom: var(--s-4);
}

/* PHASE 4 - SECTION THEMES ------------------------------------------ */

/* Summer Camp: keep moss sunburst (already themed) */

/* Birthdays: "white-card-on-sky" - cleaner photo-forward */
.event-section--bday {
  background: var(--sky);
  color: #fff;
  overflow: hidden;
}
.event-section--bday::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.18) 0%, transparent 12%),
    radial-gradient(circle at 80% 70%, rgba(255,237,206,0.15) 0%, transparent 14%),
    radial-gradient(circle at 60% 20%, rgba(255,255,255,0.12) 0%, transparent 10%),
    radial-gradient(circle at 10% 80%, rgba(255,237,206,0.18) 0%, transparent 14%);
  background-size: 400px 400px;
  opacity: 0.8;
  pointer-events: none;
}
.event-section--bday .event-section__eyebrow { color: rgba(255,255,255,0.85); }
.event-section--bday .event-section__title { color: #fff; }
.event-section--bday .event-section__tagline { color: var(--sun); }
.event-section--bday .pricing-ticket { color: var(--ink); }
.event-section--bday .pricing-ticket__label { color: var(--sky-deep); }

/* Sleepover: deep navy night sky */
.event-section--sleep {
  background: linear-gradient(180deg, var(--night) 0%, var(--night-2) 100%);
  color: #fff;
  overflow: hidden;
}
.event-section--sleep::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 10% 20%, #fff 100%, transparent 0),
    radial-gradient(1.5px 1.5px at 25% 65%, #fff 100%, transparent 0),
    radial-gradient(1px 1px at 40% 15%, rgba(255,255,255,0.7) 100%, transparent 0),
    radial-gradient(2px 2px at 55% 80%, #fff 100%, transparent 0),
    radial-gradient(1px 1px at 70% 35%, rgba(255,255,255,0.8) 100%, transparent 0),
    radial-gradient(1.5px 1.5px at 85% 55%, #fff 100%, transparent 0),
    radial-gradient(1px 1px at 95% 20%, rgba(255,255,255,0.6) 100%, transparent 0),
    radial-gradient(1px 1px at 15% 85%, rgba(255,255,255,0.9) 100%, transparent 0),
    radial-gradient(1.5px 1.5px at 45% 45%, #fff 100%, transparent 0),
    radial-gradient(2px 2px at 62% 10%, #FFD93D 100%, transparent 0),
    radial-gradient(1px 1px at 78% 75%, rgba(255,255,255,0.7) 100%, transparent 0);
  background-size: 600px 600px;
  animation: twinkle 6s ease-in-out infinite alternate;
  pointer-events: none;
}
.event-section--sleep::after {
  content: "🌙";
  position: absolute;
  top: 8%; right: 6%;
  font-size: clamp(3rem, 7vw, 5rem);
  line-height: 1;
  filter: drop-shadow(0 0 16px rgba(255,217,61,0.5));
  animation: moonFloat 8s ease-in-out infinite;
}
@keyframes twinkle { to { opacity: 0.5; } }
@keyframes moonFloat { 50% { transform: translateY(-12px) rotate(-6deg); } }
.event-section--sleep .event-section__eyebrow { color: rgba(255,255,255,0.7); }
.event-section--sleep .event-section__tagline { color: var(--sun); }
.event-section--sleep .pricing-ticket { background: rgba(255,255,255,0.96); color: var(--ink); }
.event-section--sleep .pricing-ticket__label { color: var(--coral-deep); }
.event-section--sleep .pricing-ticket::before,
.event-section--sleep .pricing-ticket::after { background: var(--night); }

/* Crazy Week: urgency red */
.event-section--crazy {
  background: linear-gradient(135deg, var(--crazy) 0%, var(--crazy-deep) 100%);
  color: #fff;
  overflow: hidden;
}
.event-section--crazy::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0 40px,
    rgba(255,216,58,0.07) 40px 80px
  );
  pointer-events: none;
}
.event-section--crazy .event-section__eyebrow { color: var(--sun); }
.event-section--crazy .event-section__tagline { color: var(--sun); }
.event-section--crazy .pricing-ticket { color: var(--ink); }
.event-section--crazy .pricing-ticket__label { color: var(--crazy-deep); }
.event-section--crazy .pricing-ticket::before,
.event-section--crazy .pricing-ticket::after { background: var(--crazy-deep); }

.urgency-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  background: var(--sun); color: var(--ink);
  font-weight: 800; font-size: var(--t-14);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  animation: pulseFast 2s ease-in-out infinite;
}
.urgency-badge .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--crazy); animation: pulseFast 1s ease-in-out infinite; }
@keyframes pulseFast { 50% { transform: scale(1.06); } }

/* Mother's Day: pastel rose */
.event-section--mothers {
  background: linear-gradient(165deg, var(--rose-soft) 0%, #FFFFFF 60%, var(--paper-2) 100%);
  overflow: hidden;
}
.event-section--mothers::before {
  content: "";
  position: absolute; top: -80px; right: -80px;
  width: 400px; height: 400px;
  border-radius: 999px;
  background: radial-gradient(circle, var(--rose) 0%, transparent 70%);
  opacity: 0.35;
  pointer-events: none;
}
.event-section--mothers::after {
  content: "";
  position: absolute; bottom: -100px; left: -80px;
  width: 360px; height: 360px;
  border-radius: 999px;
  background: radial-gradient(circle, var(--sun-soft) 0%, transparent 70%);
  opacity: 0.6;
  pointer-events: none;
}
.event-section--mothers .event-section__eyebrow { color: var(--rose-deep); }
.event-section--mothers .event-section__title { color: var(--ink); }
.event-section--mothers .event-section__tagline { color: var(--rose-deep); }

/* PHASE 6 - PHOTO GRID: clean symmetrical layout (all 8-count sections render in clean rows) */
.event-photos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
  margin-top: var(--s-7);
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 900px) { .event-photos { grid-template-columns: repeat(4, 1fr); } }

.event-photos__item {
  overflow: hidden;
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
  aspect-ratio: 1;
}
.event-photos__item:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
}
.event-photos__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s var(--ease);
}
.event-photos__item:hover img { transform: scale(1.06); }

/* Justify last orphan row center if not full */
.event-photos {
  justify-content: center;
}

/* HOMEPAGE PRICING CARDS - refined ---------------------------- */
.pricing-card {
  position: relative;
  padding: var(--s-6) var(--s-5);
  border-radius: var(--r-xl);
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 18px 40px -24px rgba(17,20,24,0.45), 0 8px 20px rgba(17,20,24,0.12);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
/* Subtle shine on hover */
.pricing-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 1s var(--ease);
  pointer-events: none;
  z-index: 2;
}
.pricing-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 36px 72px -24px rgba(17,20,24,0.55), 0 14px 28px rgba(17,20,24,0.16);
}
.pricing-card:hover::before { transform: translateX(100%); }
.pricing-card:focus-within {
  box-shadow: 0 36px 72px -24px rgba(17,20,24,0.55), 0 14px 28px rgba(17,20,24,0.16), 0 0 0 3px var(--sun);
}
.pricing-card--summer { background: linear-gradient(135deg, var(--moss) 0%, #6BAB3E 100%); color: #fff; }
.pricing-card--sleep { background: linear-gradient(135deg, var(--coral) 0%, #D0561F 100%); color: #fff; }
.pricing-card--bday { background: linear-gradient(135deg, var(--sky) 0%, #1DA8CC 100%); color: #fff; }

.pricing-card__head {
  text-align: center;
  position: relative;
}
.pricing-card__eyebrow {
  font-family: "Caveat", cursive;
  font-size: var(--t-20);
  color: rgba(255,255,255,0.92);
  line-height: 1;
  margin-bottom: 4px;
}
.pricing-card__price {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(2.6rem, 6vw, 3.8rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  margin: 6px 0 4px;
}
.pricing-card__tag {
  font-size: var(--t-12);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
}

.pricing-card__programs {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
}
@media (min-width: 520px) { .pricing-card__programs { grid-template-columns: 1fr 1fr; } }

.pricing-program {
  padding: var(--s-5) var(--s-4);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.08));
  border: 1.5px solid rgba(255,255,255,0.3);
  border-radius: 20px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2),
    0 12px 28px -12px rgba(17,20,24,0.25);
  position: relative;
  overflow: hidden;
}
.pricing-program::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--sun) 0%, rgba(251,200,0,0.3) 100%);
  border-radius: 20px 20px 0 0;
}
.pricing-program__head {
  text-align: center;
  border-bottom: 1.5px dashed rgba(255,255,255,0.28);
  padding-bottom: 14px;
  margin-bottom: 14px;
}
.pricing-program__name {
  display: block;
  font-family: "Anton", sans-serif;
  font-size: var(--t-18);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.pricing-program__hours {
  display: inline-block;
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  color: rgba(255,255,255,0.9);
  line-height: 1;
  margin-top: 8px;
  padding: 4px 10px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
}

.pricing-program__tiers {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pricing-program__tier {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: var(--t-14);
  gap: 8px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.pricing-program__tier:hover {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.28);
  transform: translateX(2px);
}
.pricing-program__tier .tier-weeks {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.92;
  color: #fff;
}
.pricing-program__tier .tier-price {
  font-family: "Anton", sans-serif;
  font-size: clamp(1.3rem, 2.5vw, 1.6rem);
  letter-spacing: 0.02em;
  font-weight: 400;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.pricing-program__tier.is-best {
  background: var(--sun);
  color: var(--ink);
}
.pricing-program__tier.is-best .tier-weeks { opacity: 1; color: var(--ink); }
.pricing-program__tier.is-best::after {
  content: "best";
  position: absolute;
  top: -8px; right: 8px;
  background: var(--ink);
  color: var(--sun);
  font-family: "DM Sans", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  animation: bestWobble 2s ease-in-out infinite;
  box-shadow: 0 2px 8px rgba(17,20,24,0.4);
}
@keyframes bestWobble {
  0%, 100% { transform: rotate(0); }
  50% { transform: rotate(-5deg); }
}
@media (prefers-reduced-motion: reduce) { .pricing-program__tier.is-best::after { animation: none; } }

.pricing-card__foot {
  text-align: center;
  font-size: var(--t-12);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  padding-top: var(--s-3);
  border-top: 1px dashed rgba(255,255,255,0.2);
}

/* ==========================================================================
   SPONSORS MARQUEE - scrolling logo strip with soft gradient fades
   ========================================================================== */
.sponsors-marquee {
  padding: var(--s-7) 0 var(--s-6);
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.sponsors-marquee__label {
  text-align: center;
  font-size: var(--t-12);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-3);
  margin: 0 auto var(--s-5);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  justify-content: center;
}
.sponsors-marquee__star {
  color: var(--coral);
  font-family: "Caveat", cursive;
  font-size: var(--t-16);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
}
.sponsors-marquee__viewport {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0, black 6%, black 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 6%, black 94%, transparent 100%);
}
.sponsors-marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: sponsorsScroll 50s linear infinite;
  will-change: transform;
  /* Force a composite layer so the infinite transform keeps running on
     iOS Safari after scrolling / backgrounding the tab. Fixes the
     "marquee frozen with 2 logos visible" bug on mobile. */
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.sponsors-marquee:hover .sponsors-marquee__track {
  animation-play-state: paused;
}
.sponsors-marquee__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(58px, 7vw, 86px);
  flex-shrink: 0;
  /* Margin-right replaces the track's flex-gap so the -50% loop lands
     exactly on the seam without the "half a gap off" jump bug. */
  margin-right: clamp(32px, 5vw, 64px);
}
.sponsors-marquee__logo img {
  height: 100%;
  width: auto;
  max-width: clamp(120px, 14vw, 190px);
  object-fit: contain;
  filter: saturate(0.95);
  transition: filter .3s var(--ease), transform .3s var(--ease);
  animation: none;
  background: transparent;
}
.sponsors-marquee__logo:hover img {
  filter: saturate(1.15) drop-shadow(0 6px 14px rgba(17,20,24,0.2));
  transform: translateY(-3px) scale(1.06);
}
@keyframes sponsorsScroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .sponsors-marquee__track { animation: none; }
}
@media (max-width: 600px) {
  .sponsors-marquee { padding: var(--s-6) 0 var(--s-5); }
  .sponsors-marquee__track {
    animation-duration: 55s;
  }
  .sponsors-marquee__logo {
    height: 48px;
    margin-right: 28px;  /* matches the desktop pattern, tighter for phones */
  }
  .sponsors-marquee__logo img { max-width: 120px; }
}

/* MAP EMBED - Google map iframe + info card ------------------------- */
.map-embed {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-md);
  background: var(--paper-2);
}
.map-embed__frame {
  position: relative;
  aspect-ratio: 21 / 9;
  overflow: hidden;
}
.map-embed__frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: saturate(0.9) contrast(0.95);
  display: block;
}
.map-embed__card {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: var(--paper);
  padding: 14px 18px 14px 12px;
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
  max-width: 360px;
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 2;
}
.map-embed__card img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 10px rgba(17,20,24,0.2));
}
.map-embed__name {
  font-family: "Anton", sans-serif;
  font-size: var(--t-18);
  color: var(--ink);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.map-embed__addr {
  font-size: var(--t-14);
  color: var(--ink-2);
  line-height: 1.5;
  margin-top: 4px;
}

/* Mobile: stack the info card BELOW the map, and give the map a taller frame */
@media (max-width: 760px) {
  .map-embed__frame { aspect-ratio: 4 / 3; }
  .map-embed__card {
    position: static;
    max-width: 100%;
    border-radius: 0;
    box-shadow: none;
    border-top: 1px solid var(--line);
    padding: 14px;
    gap: 12px;
  }
  .map-embed__card img { width: 60px; height: 60px; }
  .map-embed__name { font-size: 16px; }
  .map-embed__addr { font-size: 13px; }
}

/* COSTURI ADIȚIONALE - birthdays extras block ------------------------ */
/* ==========================================================================
   EXTRAS BLOCK - "Costuri adiționale" card (birthdays)
   Polished glass-morphism card with:
   - subtle animated gradient stripe on top
   - large pill-style price badges with yellow→coral gradient
   - staggered hover lift + sun-tinted border glow
   - ornate dashed warning note with icon
   ========================================================================== */
.extras-block {
  padding: var(--s-7) var(--s-6);
  background:
    radial-gradient(circle at 85% 15%, rgba(251,200,0,0.08) 0%, transparent 45%),
    radial-gradient(circle at 15% 85%, rgba(227,99,41,0.08) 0%, transparent 45%),
    linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.04) 100%);
  border: 1.5px solid rgba(255,255,255,0.22);
  border-radius: 24px;
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow:
    0 18px 44px -18px rgba(17,20,24,0.42),
    0 4px 14px -6px rgba(17,20,24,0.15),
    inset 0 1px 0 rgba(255,255,255,0.18);
  position: relative;
  overflow: hidden;
}
.extras-block::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--sun) 0%, var(--coral) 50%, var(--sun) 100%);
  background-size: 200% 100%;
  border-radius: 24px 24px 0 0;
  animation: extrasStripe 6s linear infinite;
}
@keyframes extrasStripe {
  0%   { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}
@media (prefers-reduced-motion: reduce) { .extras-block::before { animation: none; } }

.extras-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.extras-list__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.06) 100%);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 16px;
  transition:
    background .3s var(--ease),
    transform .3s cubic-bezier(.22,1,.36,1),
    border-color .3s var(--ease),
    box-shadow .3s var(--ease);
  overflow: hidden;
}
.extras-list__item::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--sun) 0%, var(--coral) 100%);
  opacity: 0;
  transition: opacity .25s var(--ease);
}
.extras-list__item:hover {
  background: linear-gradient(180deg, rgba(251,200,0,0.12) 0%, rgba(227,99,41,0.08) 100%);
  border-color: rgba(251,200,0,0.4);
  transform: translateX(6px);
  box-shadow: 0 10px 24px -12px rgba(251,200,0,0.28);
}
.extras-list__item:hover::after { opacity: 1; }

.extras-list__price {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  padding: 10px 18px;
  background: linear-gradient(135deg, var(--sun) 0%, #FFB300 100%);
  color: var(--ink);
  font-family: "Anton", sans-serif;
  font-size: 1.3rem;
  letter-spacing: 0.03em;
  border-radius: 999px;
  box-shadow:
    0 6px 14px rgba(251,200,0,0.42),
    inset 0 1px 0 rgba(255,255,255,0.5),
    inset 0 -2px 0 rgba(17,20,24,0.08);
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.extras-list__item:hover .extras-list__price {
  transform: scale(1.06) rotate(-2deg);
  box-shadow:
    0 10px 22px rgba(251,200,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.6);
}
.extras-list__text {
  font-size: var(--t-15);
  line-height: 1.5;
  color: rgba(255,255,255,0.94);
}
.extras-list__text b {
  color: #fff;
  font-family: "Anton", sans-serif;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.95em;
  padding: 2px 9px;
  margin: 0 2px;
  background: linear-gradient(135deg, rgba(251,200,0,0.28) 0%, rgba(227,99,41,0.22) 100%);
  border: 1px solid rgba(251,200,0,0.35);
  border-radius: 6px;
}

/* =========================================================================
   EXTRAS-NOTE - "Când se adaugă un animator extra" info card
   Icon + eyebrow + title header, lead paragraph, then two numbered reason
   tiles. Glass-morphism with warm sun/coral accents + sparkle ornaments.
   ========================================================================= */
.extras-note {
  position: relative;
  margin-top: var(--s-6);
  padding: clamp(22px, 3vw, 32px) clamp(22px, 3vw, 32px);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(251, 200, 0, 0.14) 0%, transparent 55%),
    radial-gradient(120% 140% at 100% 100%, rgba(227, 99, 41, 0.12) 0%, transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-xl);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow:
    0 22px 48px -22px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  overflow: hidden;
  isolation: isolate;
}
/* Animated sun→coral stripe along the top edge */
.extras-note::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--sun) 25%,
    var(--coral) 50%,
    var(--sun) 75%,
    transparent 100%);
  background-size: 200% 100%;
  animation: extrasNoteStripe 5s linear infinite;
}
@keyframes extrasNoteStripe {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Floating sparkle ornaments */
.extras-note__spark {
  position: absolute;
  color: var(--sun);
  opacity: 0.4;
  font-size: 18px;
  pointer-events: none;
  animation: extrasNoteSpark 4.5s ease-in-out infinite;
}
.extras-note__spark--1 { top: 14px; right: 20px; }
.extras-note__spark--2 {
  bottom: 20px; left: 24px;
  color: var(--coral);
  animation-delay: 1.8s;
  font-size: 14px;
}
@keyframes extrasNoteSpark {
  0%, 100% { opacity: 0.25; transform: scale(0.85) rotate(0); }
  50%      { opacity: 0.8; transform: scale(1.15) rotate(20deg); }
}

/* Header: icon chip + eyebrow + title */
.extras-note__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: var(--s-3);
}
.extras-note__icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--sun) 0%, #ffd83a 100%);
  color: var(--ink);
  box-shadow:
    0 10px 22px -6px rgba(251, 200, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -2px 4px rgba(192, 150, 0, 0.25);
  animation: extrasNoteIconPulse 3.2s ease-in-out infinite;
}
.extras-note__icon svg {
  width: 24px;
  height: 24px;
}
@keyframes extrasNoteIconPulse {
  0%, 100% { box-shadow: 0 10px 22px -6px rgba(251,200,0,0.5), inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -2px 4px rgba(192,150,0,0.25); }
  50%      { box-shadow: 0 14px 30px -6px rgba(251,200,0,0.7), inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -2px 4px rgba(192,150,0,0.25); }
}
.extras-note__head-text { min-width: 0; }
.extras-note__eyebrow {
  font-family: "Caveat", cursive;
  font-size: 1.1rem;
  color: var(--sun);
  line-height: 1;
  margin: 0 0 4px;
}
.extras-note__title {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
}

/* Lead paragraph */
.extras-note__lead {
  margin: 0 0 var(--s-4);
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--t-15);
  line-height: 1.6;
  max-width: 640px;
}
.extras-note__lead b {
  color: var(--sun);
  font-weight: 700;
}

/* Two reason tiles — side-by-side on desktop, stacked on mobile */
.extras-note__reasons {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 720px) {
  .extras-note__reasons { grid-template-columns: 1fr 1fr; gap: 14px; }
}
.extras-note__reason {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px 14px 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), background 0.35s var(--ease);
}
.extras-note__reason:hover {
  transform: translateY(-2px);
  border-color: rgba(251, 200, 0, 0.4);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(251, 200, 0, 0.04) 100%);
}
.extras-note__num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.3) 0%, transparent 50%),
    linear-gradient(135deg, var(--sun) 0%, var(--coral) 100%);
  color: var(--ink);
  font-family: "Anton", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  box-shadow:
    0 6px 14px -4px rgba(251, 200, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -2px 3px rgba(0, 0, 0, 0.15);
}
.extras-note__reason-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.extras-note__reason-title {
  font-family: "DM Sans", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
  letter-spacing: 0.005em;
}
.extras-note__reason-desc {
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}

@media (prefers-reduced-motion: reduce) {
  .extras-note::before,
  .extras-note__spark,
  .extras-note__icon { animation: none; }
}

@media (max-width: 600px) {
  .extras-block { padding: var(--s-5) var(--s-4); border-radius: 18px; }
  .extras-list__item { flex-wrap: wrap; gap: 12px; padding: 14px 16px; }
  .extras-list__price { min-width: 80px; font-size: 1.1rem; padding: 8px 14px; }
  .extras-list__text { flex: 1 1 100%; font-size: 14px; }
  .extras-note__head { gap: 12px; }
  .extras-note__icon { width: 44px; height: 44px; }
  .extras-note__icon svg { width: 20px; height: 20px; }
}

/* Brochure download button shared style (pricing cards + events page) */
.pricing-card__brochure,
.event-section__brochure {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  margin: var(--s-4) auto 0;
  padding: 14px 26px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  border: 1.5px solid rgba(255,255,255,0.38);
  color: #fff;
  font-family: "Anton", sans-serif;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
  transition: transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: relative;
}
.pricing-card__brochure svg,
.event-section__brochure svg {
  width: 18px;
  height: 18px;
  transition: transform .3s var(--ease);
}
.pricing-card__brochure:hover,
.event-section__brochure:hover {
  background: var(--sun);
  color: var(--ink);
  border-color: var(--sun);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(251,200,0,0.4);
}
.pricing-card__brochure:hover svg,
.event-section__brochure:hover svg {
  transform: translateY(2px);
}
/* Display as a block row in pricing cards - centered above footer */
.pricing-card__brochure { display: flex; }

/* Primary variant - solid sun-yellow button, much more visible */
.pricing-card__brochure--primary,
.event-section__brochure--primary {
  background: var(--sun);
  color: var(--ink);
  border-color: var(--sun);
  font-size: 16px;
  padding: 16px 30px 16px 26px;
  letter-spacing: 0.15em;
  font-weight: 400;
  box-shadow:
    0 8px 22px rgba(251,200,0,0.5),
    0 2px 0 rgba(17,20,24,0.35),
    inset 0 1px 0 rgba(255,255,255,0.4);
  margin-top: var(--s-5);
  animation: brochurePulse 2.4s ease-in-out infinite;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.pricing-card__brochure--primary svg,
.event-section__brochure--primary svg {
  width: 20px; height: 20px;
  stroke: var(--ink);
}
.pricing-card__brochure--primary:hover,
.event-section__brochure--primary:hover {
  background: #ffd83a;
  color: var(--ink);
  border-color: #ffd83a;
  transform: translateY(-3px) scale(1.03);
  box-shadow:
    0 14px 32px rgba(251,200,0,0.65),
    0 2px 0 rgba(17,20,24,0.35),
    inset 0 1px 0 rgba(255,255,255,0.4);
  animation: none;
}
@keyframes brochurePulse {
  0%, 100% { box-shadow: 0 8px 22px rgba(251,200,0,0.5), 0 2px 0 rgba(17,20,24,0.35), inset 0 1px 0 rgba(255,255,255,0.4); }
  50% { box-shadow: 0 10px 28px rgba(251,200,0,0.7), 0 2px 0 rgba(17,20,24,0.35), inset 0 1px 0 rgba(255,255,255,0.4); }
}
@media (prefers-reduced-motion: reduce) {
  .pricing-card__brochure--primary,
  .event-section__brochure--primary { animation: none; }
}
/* PDF badge pill inside the button */
.pricing-card__brochure-badge,
.event-section__brochure-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--sun);
  font-family: "DM Sans", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1;
}
.pricing-card__brochure--primary:hover .pricing-card__brochure-badge,
.event-section__brochure--primary:hover .event-section__brochure-badge {
  background: var(--coral);
  color: #fff;
}
/* Dark variant for light backgrounds (birthdays section has light sky bg) */
.event-section__brochure--dark {
  background: var(--ink);
  color: var(--sun);
  border-color: var(--ink);
  box-shadow:
    0 8px 22px rgba(17,20,24,0.35),
    0 2px 0 rgba(17,20,24,0.2),
    inset 0 1px 0 rgba(255,255,255,0.08);
  animation: none;
}
.event-section__brochure--dark svg { stroke: var(--sun); }
.event-section__brochure--dark:hover {
  background: var(--coral);
  color: #fff;
  border-color: var(--coral);
  box-shadow: 0 14px 32px rgba(227,99,41,0.5);
}
.event-section__brochure--dark svg { stroke: var(--sun); }
.event-section__brochure--dark:hover svg { stroke: #fff; }
.event-section__brochure--dark .event-section__brochure-badge {
  background: var(--sun);
  color: var(--ink);
}

/* CTA row - two brochure buttons side by side with wrap on mobile */
.event-section__cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: var(--s-5);
}
.event-section__cta-row .event-section__brochure {
  margin: 0;
}

/* Menu variant - secondary button: coral gradient solid, warm pair with sun primary */
.event-section__brochure--menu {
  background: linear-gradient(135deg, var(--coral) 0%, var(--coral-deep) 100%);
  color: #fff;
  border-color: var(--coral);
  font-size: 16px;
  padding: 16px 30px 16px 26px;
  letter-spacing: 0.15em;
  font-weight: 400;
  box-shadow:
    0 8px 22px rgba(227,99,41,0.5),
    0 2px 0 rgba(17,20,24,0.35),
    inset 0 1px 0 rgba(255,255,255,0.25);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  animation: menuButtonPulse 2.8s ease-in-out infinite;
}
.event-section__brochure--menu svg {
  width: 20px; height: 20px;
  stroke: #fff;
}
.event-section__brochure--menu:hover {
  background: linear-gradient(135deg, #F07A3D 0%, var(--coral) 100%);
  color: #fff;
  border-color: var(--coral-deep);
  transform: translateY(-3px) scale(1.03);
  box-shadow:
    0 14px 32px rgba(227,99,41,0.65),
    0 2px 0 rgba(17,20,24,0.35),
    inset 0 1px 0 rgba(255,255,255,0.35);
  animation: none;
}
.event-section__brochure--menu:hover svg { stroke: #fff; }
.event-section__brochure--menu .event-section__brochure-badge {
  background: #fff;
  color: var(--coral-deep);
}
.event-section__brochure--menu:hover .event-section__brochure-badge {
  background: var(--sun);
  color: var(--ink);
}
@keyframes menuButtonPulse {
  0%, 100% { box-shadow: 0 8px 22px rgba(227,99,41,0.5), 0 2px 0 rgba(17,20,24,0.35), inset 0 1px 0 rgba(255,255,255,0.25); }
  50% { box-shadow: 0 10px 28px rgba(227,99,41,0.7), 0 2px 0 rgba(17,20,24,0.35), inset 0 1px 0 rgba(255,255,255,0.25); }
}
@media (prefers-reduced-motion: reduce) {
  .event-section__brochure--menu { animation: none; }
}

/* Sleepover single-hero sub-cards */
.pricing-card__duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
.pricing-card__duo > div {
  text-align: center;
  padding: var(--s-4) 10px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--r-md);
}
.pricing-card__duo-name {
  font-family: "Anton", sans-serif;
  font-size: var(--t-14);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.85;
}
.pricing-card__duo-amount {
  font-family: "Anton", sans-serif;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  line-height: 1;
  margin-top: 6px;
  letter-spacing: 0.02em;
}
.pricing-card__duo-meta {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.72;
  margin-top: 6px;
}

/* Bday extras block */
.pricing-card__extras {
  text-align: center;
  padding: var(--s-3) var(--s-3);
  background: rgba(0,0,0,0.15);
  border: 1px dashed rgba(255,255,255,0.3);
  border-radius: var(--r-md);
  font-size: var(--t-14);
  line-height: 1.5;
}
.pricing-card__extras b { color: var(--sun); font-family: "Anton", sans-serif; letter-spacing: 0.02em; }

/* PRICING TIERS inside a ticket (Summer Camp) ------------------- */
.pricing-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: var(--s-4) 0 var(--s-3);
}
.pricing-tier {
  position: relative;
  padding: 12px 8px;
  border-radius: var(--r-md);
  background: rgba(17,20,24,0.04);
  text-align: center;
  border: 1.5px solid transparent;
  transition: transform .2s var(--ease);
}
.pricing-tier--best {
  background: var(--moss-soft);
  border-color: var(--moss);
  transform: translateY(-2px);
}
.pricing-tier__weeks {
  display: block;
  font-size: var(--t-12);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.pricing-tier--best .pricing-tier__weeks { color: var(--moss-deep); }
.pricing-tier__price {
  display: block;
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(1.3rem, 2.8vw, 1.8rem);
  color: var(--ink);
  letter-spacing: 0.01em;
  line-height: 1;
}
.pricing-tier__price small {
  font-size: 0.5em;
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
  opacity: 0.6;
}
.pricing-tier__badge {
  display: block;
  font-family: "Caveat", cursive;
  font-size: var(--t-14);
  color: var(--moss-deep);
  margin-top: 4px;
  line-height: 1;
}

/* AGE GROUPS - brochure poster style ---------------------------- */
.age-groups { max-width: 1240px; margin: 0 auto; padding: 0 var(--s-3); }
.age-groups__head {
  text-align: center;
  margin-bottom: var(--s-6);
  position: relative;
}
.age-groups__eyebrow {
  font-family: "Caveat", cursive;
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  color: rgba(255,255,255,0.85);
  line-height: 1.3;
  margin-bottom: 18px;
}
.age-groups__title {
  font-family: "Anton", "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: clamp(2.6rem, 6vw, 4rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--sun);
  text-transform: uppercase;
  text-shadow:
    4px 4px 0 rgba(17,20,24,0.28),
    -1px 1px 0 rgba(0,0,0,0.15),
    0 0 22px rgba(251,200,0,0.3);
  display: inline-block;
  transform: rotate(-1deg);
  margin: 0;
}
.age-groups__title::after {
  content: "";
  display: block;
  width: 70%; height: 8px;
  background: var(--sun);
  margin: 10px auto 0;
  border-radius: 999px;
  transform: rotate(-0.6deg);
  opacity: 0.85;
  box-shadow: 2px 2px 0 rgba(17,20,24,0.2);
}

.age-groups__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 1180px;
  margin: 0 auto;
}
@media (min-width: 520px) { .age-groups__grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
@media (min-width: 900px) { .age-groups__grid { grid-template-columns: repeat(6, 1fr); gap: 16px; } }
@media (min-width: 900px) {
  .age-groups__grid:has(> .age-group:nth-child(7)) {
    grid-template-columns: repeat(7, 1fr);
    gap: 14px;
  }
}

/* 7th item (8·12 ani school-age) — sky-themed like Karinți. The other
   per-child theme assignments live in the main block further down. */

/* School-age group - neutral hand-drawn divider */
.age-groups__school-break {
  display: flex; align-items: center; gap: 18px;
  max-width: 520px;
  margin: var(--s-6) auto var(--s-4);
  color: rgba(255,255,255,0.95);
}
.age-groups__school-break::before,
.age-groups__school-break::after {
  content: "";
  flex: 1; height: 2px;
  background-image: linear-gradient(to right, transparent, rgba(251,200,0,0.6), transparent);
  border-radius: 2px;
}
.age-groups__school-break-label {
  font-family: "Caveat", cursive;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--sun);
  text-shadow: 0 2px 6px rgba(17,20,24,0.3);
}
.age-groups__school-grid {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 320px;
  margin: 0 auto;
}

/* AGE GROUPS — refined Canva-sticker cards. The whole card is the colored
   tile (was: cream paper card with a small colored circle inside). Same
   sticker-outline + theme-colored shadow vocabulary as .value-ribbon__item
   on the homepage and the .age-pill row on /events, so the three sections
   feel like one design family.

   Replaces an earlier brutalist version (heavy black border, hard 5px
   offset shadow, random per-child rotations, weak radial tint) that
   read as out-of-band against the rest of the site. */
.age-group {
  --theme:      var(--moss);
  --theme-dark: var(--moss-deep);
  --on-theme:   #fff;

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 12px 16px;
  min-height: 124px;
  border-radius: 18px;
  color: var(--on-theme);
  background:
    radial-gradient(circle at 80% -10%, rgba(255,255,255,0.22) 0%, transparent 55%),
    linear-gradient(160deg, var(--theme) 0%, var(--theme-dark) 100%);
  /* White inset sticker outline + layered theme-colored drop shadow + inner
     top gloss — same recipe as the homepage value-ribbon items. */
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,0.35),
    inset 0 1px 0 rgba(255,255,255,0.55),
    0 1px 0 rgba(17,20,24,0.12),
    0 14px 28px -12px color-mix(in srgb, var(--theme) 70%, transparent),
    0 4px 10px -4px rgba(17,20,24,0.22);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  cursor: default;
  transition:
    transform .45s cubic-bezier(.22, 1, .36, 1),
    box-shadow .45s var(--ease);
}

/* Specular shine bloom in the top-right (matches .value-ribbon__item). */
.age-group::before {
  content: "";
  position: absolute;
  right: -25px;
  top: -25px;
  width: 110px;
  height: 110px;
  background: radial-gradient(circle at center, rgba(255,255,255,0.28) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: soft-light;
}

/* Subtle confetti dots — 2 per card to keep the small footprint clean. */
.age-group::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 82% 70%, rgba(255,255,255,0.55) 2px, transparent 2.6px),
    radial-gradient(circle at 14% 24%, rgba(255,255,255,0.4)  1.6px, transparent 2.2px);
  pointer-events: none;
  z-index: 0;
}

.age-group > * { position: relative; z-index: 1; }

.age-group:hover {
  transform: translateY(-5px);
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,0.55),
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 1px 0 rgba(17,20,24,0.15),
    0 22px 38px -16px color-mix(in srgb, var(--theme) 75%, transparent),
    0 8px 18px -6px rgba(17,20,24,0.32);
}

/* Per-child theme — same rainbow rhythm as before, but driven via custom
   props so the gradient + shadow + text color all stay in sync. */
.age-groups__grid .age-group:nth-child(1) { --theme: var(--moss);  --theme-dark: var(--moss-deep);  --on-theme: #fff; }
.age-groups__grid .age-group:nth-child(2) { --theme: var(--coral); --theme-dark: var(--coral-deep); --on-theme: #fff; }
.age-groups__grid .age-group:nth-child(3) { --theme: var(--sky);   --theme-dark: var(--sky-deep);   --on-theme: #fff; }
.age-groups__grid .age-group:nth-child(4) { --theme: var(--sun);   --theme-dark: var(--sun-deep);   --on-theme: var(--ink); }
.age-groups__grid .age-group:nth-child(5) { --theme: var(--moss);  --theme-dark: var(--moss-deep);  --on-theme: #fff; }
.age-groups__grid .age-group:nth-child(6) { --theme: var(--coral); --theme-dark: var(--coral-deep); --on-theme: #fff; }
.age-groups__grid .age-group:nth-child(7) { --theme: var(--sky);   --theme-dark: var(--sky-deep);   --on-theme: #fff; }
.age-groups__school-grid    .age-group    { --theme: var(--sky);   --theme-dark: var(--sky-deep);   --on-theme: #fff; }

/* On the yellow card the white confetti vanishes — switch to ink-tinted. */
.age-groups__grid .age-group:nth-child(4)::after {
  background-image:
    radial-gradient(circle at 82% 70%, rgba(17,20,24,0.20) 2px, transparent 2.6px),
    radial-gradient(circle at 14% 24%, rgba(17,20,24,0.14) 1.6px, transparent 2.2px);
}

/* Number badge — translucent white pill on the gradient. Reads like a
   sticker label rather than a separate UI chip, which is the look we want. */
.age-group__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  font-family: "Anton", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.22);
  color: var(--on-theme);
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 2px 6px rgba(17, 20, 24, 0.18);
  transition: transform .3s var(--ease);
}
.age-group:hover .age-group__num { transform: scale(1.08); }

/* On the yellow card a translucent-white badge would disappear — use an
   ink tint so the number stays legible. */
.age-groups__grid .age-group:nth-child(4) .age-group__num {
  background: rgba(17, 20, 24, 0.12);
  border-color: rgba(17, 20, 24, 0.25);
  color: var(--ink);
}

/* Age range text — the second span inside each card. */
.age-group > span:last-child {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-theme);
  line-height: 1.1;
  opacity: 0.96;
}

@media (prefers-reduced-motion: reduce) {
  .age-group { transition: none; }
  .age-group:hover { transform: none; }
}

/* TEAMS (FRUNZA, TURCA...) ------------------------------------- */
.teams { max-width: 1080px; margin: 0 auto; }
.teams__title {
  text-align: center;
  font-family: "Anton", sans-serif;
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--sun);
  letter-spacing: -0.01em;
  margin-bottom: var(--s-4);
}
.teams__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
}
@media (min-width: 600px) { .teams__grid { grid-template-columns: 1fr 1fr; } }
.team {
  position: relative;
  padding: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  text-align: center;
  transform: rotate(-1.2deg);
  box-shadow: 0 14px 28px rgba(17,20,24,0.22);
  /* Flag PNGs are 2000×1333 = 3:2 aspect ratio - match exactly so the image fills perfectly. */
  aspect-ratio: 3 / 2;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.team:nth-child(2n) { transform: rotate(1.2deg); }

/* Hide all text children - the PNGs ARE the design, nothing overlays them. */
.team__eyebrow,
.team__name,
.team__motto { display: none; }

/* Flag backgrounds - solid color shows only on image-load failure. */
.team--frunza {
  background-color: var(--moss);
  background-image: url("../images/flags/1.png");
}
.team--turca {
  background-color: var(--coral);
  background-image: url("../images/flags/3.png");
}

/* ==========================================================================
   KARINȚI BLOCK - Grupa 8-12 ani · strategie & echipă (Summer Camp page)
   Sits inside the green sunburst event-section with white text on moss-tinted
   cards. Cream-to-transparent gradient backgrounds + sun/coral accents.
   ========================================================================== */
/* =========================================================================
   PARENTS ZONE - amenity cards (Birthdays)
   8 glass-morphism tiles, each cycling through the 4 brand colours so the
   grid reads as a lively bouquet rather than a monotone row of pills.
   ========================================================================= */

.parents-zone {
  max-width: 1040px;
  margin: 0 auto;
  text-align: center;
  padding: 0 var(--s-3);
}
.parents-zone__eyebrow {
  font-family: "Caveat", cursive;
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--sun);
  margin: 0 0 var(--s-2);
  line-height: 1;
}
.parents-zone__title {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.02;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 var(--s-3);
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
}
.parents-zone__sub {
  max-width: 560px;
  margin: 0 auto var(--s-6);
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  line-height: 1.55;
}

.parents-zone__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 1000px;
  margin: 0 auto;
}
@media (min-width: 520px) { .parents-zone__grid { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
@media (min-width: 820px) { .parents-zone__grid { grid-template-columns: repeat(4, 1fr); gap: 14px; } }

.parents-zone__card {
  --zone-rgb: 251, 200, 0;
  position: relative;
  padding: 22px 16px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.12) 0%,
      rgba(255, 255, 255, 0.03) 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  box-shadow:
    0 12px 30px -16px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 0.4s var(--ease),
    border-color 0.4s var(--ease),
    box-shadow 0.4s var(--ease);
}
/* Top edge accent — fades in from the card's cycling brand colour */
.parents-zone__card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(var(--zone-rgb), 0) 0%,
    rgba(var(--zone-rgb), 0.9) 22%,
    rgba(var(--zone-rgb), 0.9) 78%,
    rgba(var(--zone-rgb), 0) 100%);
}
/* Bloom glow on hover */
.parents-zone__card::after {
  content: "";
  position: absolute;
  inset: -30%;
  background: radial-gradient(
    circle at 50% 100%,
    rgba(var(--zone-rgb), 0.32) 0%,
    transparent 55%);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  z-index: -1;
  pointer-events: none;
}
.parents-zone__card:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--zone-rgb), 0.55);
  box-shadow:
    0 22px 44px -18px rgba(0, 0, 0, 0.55),
    0 10px 22px -10px rgba(var(--zone-rgb), 0.4);
}
.parents-zone__card:hover::after { opacity: 1; }

/* Brand-colour cycle across all 8 cards (moss → sun → coral → sky, repeat) */
.parents-zone__card:nth-child(4n+1) { --zone-rgb: 118, 185, 71; }  /* moss   */
.parents-zone__card:nth-child(4n+2) { --zone-rgb: 251, 200, 0;  }  /* sun    */
.parents-zone__card:nth-child(4n+3) { --zone-rgb: 227, 99, 41;  }  /* coral  */
.parents-zone__card:nth-child(4n+4) { --zone-rgb: 40, 184, 218; }  /* sky    */

.parents-zone__emoji {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  font-size: 30px;
  line-height: 1;
  background:
    radial-gradient(circle at 30% 30%,
      rgba(var(--zone-rgb), 0.38) 0%,
      rgba(var(--zone-rgb), 0.12) 55%,
      transparent 100%);
  border: 1.5px solid rgba(var(--zone-rgb), 0.45);
  box-shadow:
    0 6px 16px rgba(var(--zone-rgb), 0.3),
    inset 0 -3px 6px rgba(0, 0, 0, 0.12);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
  transition:
    transform 0.45s var(--ease),
    box-shadow 0.45s var(--ease);
}
.parents-zone__card:hover .parents-zone__emoji {
  transform: scale(1.1) rotate(-8deg);
  box-shadow:
    0 12px 24px rgba(var(--zone-rgb), 0.48),
    inset 0 -3px 6px rgba(0, 0, 0, 0.12);
}

.parents-zone__label {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.15;
}

@media (prefers-reduced-motion: reduce) {
  .parents-zone__card,
  .parents-zone__emoji { transition: none !important; }
}

/* =========================================================================
   BONUS ACTIVITY + COCKTAIL BAR ADD-ON (Birthdays)
   Premium "upsell" moment — 3-card bonus-activity grid + horizontal
   glass cocktail add-on.
   ========================================================================= */

.bonus-activity {
  max-width: 1120px;
  margin: var(--s-8) auto 0;
  text-align: center;
  padding: 0 var(--s-3);
}
.bonus-activity__eyebrow {
  font-family: "Caveat", cursive;
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--sun);
  margin: 0 0 var(--s-2);
  line-height: 1;
}
.bonus-activity__title {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(2.2rem, 5.6vw, 3.8rem);
  line-height: 1.02;
  letter-spacing: 0.015em;
  color: #fff;
  text-transform: uppercase;
  margin: 0 0 var(--s-3);
  text-shadow: 0 6px 22px rgba(0, 0, 0, 0.25);
}
.bonus-activity__sub {
  max-width: 560px;
  margin: 0 auto var(--s-6);
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  line-height: 1.55;
}

.bonus-activity__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  max-width: 960px;
  margin: 0 auto;
}
@media (min-width: 720px)  { .bonus-activity__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .bonus-activity__grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } }

.bonus-card {
  --bonus-rgb: 251, 200, 0;
  position: relative;
  padding: clamp(28px, 3.5vw, 40px) clamp(22px, 3vw, 32px);
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.14) 0%,
      rgba(255, 255, 255, 0.04) 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--r-lg);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  box-shadow:
    0 22px 48px -22px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 0.45s var(--ease),
    border-color 0.45s var(--ease),
    box-shadow 0.45s var(--ease);
}
/* Top-edge accent bar */
.bonus-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    rgba(var(--bonus-rgb), 0) 0%,
    rgba(var(--bonus-rgb), 1) 20%,
    rgba(var(--bonus-rgb), 1) 80%,
    rgba(var(--bonus-rgb), 0) 100%);
}
/* Accent glow that fades in on hover */
.bonus-card::after {
  content: "";
  position: absolute;
  inset: -30%;
  background: radial-gradient(
    circle at 50% 100%,
    rgba(var(--bonus-rgb), 0.25) 0%,
    transparent 55%);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  z-index: -1;
  pointer-events: none;
}
.bonus-card:hover {
  transform: translateY(-8px);
  border-color: rgba(var(--bonus-rgb), 0.55);
  box-shadow:
    0 32px 60px -24px rgba(0, 0, 0, 0.5),
    0 12px 24px -10px rgba(var(--bonus-rgb), 0.35);
}
.bonus-card:hover::after { opacity: 1; }

.bonus-card--sun   { --bonus-rgb: 251, 200, 0; }
.bonus-card--coral { --bonus-rgb: 227, 99, 41; }
.bonus-card--moss  { --bonus-rgb: 118, 185, 71; }

/* Icon — emoji inside a ringed halo */
.bonus-card__icon {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 auto var(--s-4);
  display: grid;
  place-items: center;
}
.bonus-card__icon-emoji {
  position: relative;
  z-index: 2;
  font-size: 42px;
  line-height: 1;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.3));
  transition: transform 0.45s var(--ease);
}
.bonus-card__icon-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%,
      rgba(var(--bonus-rgb), 0.35) 0%,
      rgba(var(--bonus-rgb), 0.12) 50%,
      rgba(var(--bonus-rgb), 0.02) 100%);
  border: 1.5px solid rgba(var(--bonus-rgb), 0.45);
  box-shadow:
    0 8px 22px rgba(var(--bonus-rgb), 0.3),
    inset 0 -4px 10px rgba(0, 0, 0, 0.12);
  transition:
    transform 0.5s var(--ease),
    box-shadow 0.5s var(--ease);
}
.bonus-card:hover .bonus-card__icon-emoji {
  transform: scale(1.12) rotate(-8deg);
}
.bonus-card:hover .bonus-card__icon-ring {
  transform: scale(1.06);
  box-shadow:
    0 14px 30px rgba(var(--bonus-rgb), 0.45),
    inset 0 -4px 10px rgba(0, 0, 0, 0.12);
}

.bonus-card__name {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(1.35rem, 2.3vw, 1.65rem);
  line-height: 1.05;
  color: #fff;
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.bonus-card__desc {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
  max-width: 280px;
  margin-left: auto;
  margin-right: auto;
}

/* =========================================================================
   COCKTAIL BAR — premium horizontal add-on card
   ========================================================================= */

.cocktail-addon {
  position: relative;
  max-width: 880px;
  margin: var(--s-8) auto 0;
  padding: clamp(26px, 3.5vw, 36px) clamp(26px, 4vw, 44px);
  background:
    radial-gradient(circle at 0% 0%, rgba(251, 200, 0, 0.14) 0%, transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(227, 99, 41, 0.14) 0%, transparent 50%),
    linear-gradient(135deg,
      rgba(20, 20, 28, 0.55) 0%,
      rgba(20, 20, 28, 0.35) 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-xl);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow:
    0 32px 70px -28px rgba(0, 0, 0, 0.55),
    0 12px 30px -12px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  overflow: hidden;
  isolation: isolate;
}

/* Sun→coral animated stripe along the top edge */
.cocktail-addon__stripe {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--sun) 20%,
    var(--coral) 50%,
    var(--sun) 80%,
    transparent 100%);
  background-size: 200% 100%;
  animation: cocktailStripe 5s linear infinite;
  z-index: 3;
}
@keyframes cocktailStripe {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Floating cocktail emoji ornaments */
.cocktail-addon__ornament {
  position: absolute;
  font-size: 28px;
  opacity: 0.15;
  pointer-events: none;
  filter: blur(0.5px);
  animation: cocktailFloat 6s ease-in-out infinite;
}
.cocktail-addon__ornament--1 {
  top: 18px;
  right: 18%;
  transform: rotate(-12deg);
  font-size: 34px;
}
.cocktail-addon__ornament--2 {
  bottom: 14px;
  left: 8%;
  transform: rotate(14deg);
  font-size: 30px;
  animation-delay: 2s;
}
.cocktail-addon__ornament--3 {
  top: 45%;
  right: 6%;
  transform: rotate(-4deg);
  font-size: 24px;
  animation-delay: 4s;
  opacity: 0.12;
}
@keyframes cocktailFloat {
  0%, 100% { transform: translateY(0) rotate(-12deg); opacity: 0.12; }
  50%      { transform: translateY(-8px) rotate(-6deg); opacity: 0.22; }
}

.cocktail-addon__layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  align-items: center;
  text-align: center;
}
@media (min-width: 720px) {
  .cocktail-addon__layout {
    grid-template-columns: auto 1fr auto;
    gap: clamp(18px, 3vw, 32px);
    text-align: left;
  }
}

/* Left — big cocktail glass icon w/ halo */
.cocktail-addon__icon {
  position: relative;
  width: 86px;
  height: 86px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
@media (min-width: 720px) { .cocktail-addon__icon { margin: 0; } }

.cocktail-addon__icon-emoji {
  position: relative;
  z-index: 2;
  font-size: 46px;
  line-height: 1;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.35));
  animation: cocktailTilt 5s ease-in-out infinite;
}
@keyframes cocktailTilt {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(6deg); }
}
.cocktail-addon__icon-halo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%,
      rgba(251, 200, 0, 0.45) 0%,
      rgba(227, 99, 41, 0.25) 50%,
      transparent 80%);
  border: 1.5px solid rgba(251, 200, 0, 0.5);
  box-shadow:
    0 12px 30px rgba(251, 200, 0, 0.35),
    inset 0 -4px 10px rgba(0, 0, 0, 0.18);
  animation: cocktailHaloPulse 3.2s ease-in-out infinite;
}
@keyframes cocktailHaloPulse {
  0%, 100% { box-shadow: 0 12px 30px rgba(251, 200, 0, 0.35), inset 0 -4px 10px rgba(0, 0, 0, 0.18); }
  50%      { box-shadow: 0 18px 40px rgba(251, 200, 0, 0.55), inset 0 -4px 10px rgba(0, 0, 0, 0.18); }
}

/* Center — badge + title + desc */
.cocktail-addon__body {
  min-width: 0;
}
.cocktail-addon__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px 5px 10px;
  background: rgba(251, 200, 0, 0.16);
  border: 1px solid rgba(251, 200, 0, 0.45);
  color: var(--sun);
  border-radius: 999px;
  font-family: "DM Sans", sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.cocktail-addon__badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sun);
  box-shadow: 0 0 0 3px rgba(251, 200, 0, 0.28);
  animation: cocktailDot 1.8s ease-in-out infinite;
}
@keyframes cocktailDot {
  0%, 100% { box-shadow: 0 0 0 3px rgba(251, 200, 0, 0.28); }
  50%      { box-shadow: 0 0 0 5px rgba(251, 200, 0, 0.15); }
}
.cocktail-addon__title {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1.02;
  color: #fff;
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}
.cocktail-addon__desc {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0;
  max-width: 420px;
}
@media (min-width: 720px) { .cocktail-addon__desc { max-width: none; } }

/* Right — big price block */
.cocktail-addon__price {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  padding: 14px 22px;
  background:
    linear-gradient(135deg,
      rgba(251, 200, 0, 0.18) 0%,
      rgba(227, 99, 41, 0.15) 100%);
  border: 1.5px solid rgba(251, 200, 0, 0.4);
  border-radius: 20px;
  box-shadow:
    0 12px 28px -10px rgba(251, 200, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: var(--sun);
  font-family: "Anton", sans-serif;
  font-weight: 400;
  line-height: 0.95;
  flex-shrink: 0;
}
.cocktail-addon__price-plus {
  font-size: 1.6rem;
  opacity: 0.75;
  padding-top: 4px;
}
.cocktail-addon__price-val {
  font-size: clamp(2rem, 4vw, 2.8rem);
  letter-spacing: 0.01em;
  text-shadow: 0 3px 14px rgba(251, 200, 0, 0.4);
}
.cocktail-addon__price-curr {
  font-size: 1rem;
  letter-spacing: 0.12em;
  align-self: flex-end;
  margin-bottom: 4px;
  margin-left: 4px;
  opacity: 0.9;
}

@media (prefers-reduced-motion: reduce) {
  .bonus-card,
  .bonus-card__icon-emoji,
  .bonus-card__icon-ring,
  .cocktail-addon__stripe,
  .cocktail-addon__ornament,
  .cocktail-addon__icon-emoji,
  .cocktail-addon__icon-halo,
  .cocktail-addon__badge-dot { animation: none !important; transition: none !important; }
}

/* =========================================================================
   THEME-CHOICE BLOCK - Birthdays "Tematică la alegere"
   Glass-morphism card w/ animated top stripe, sparkle ornaments,
   and a cluster of themed chips (sun / coral / moss accent colors).
   ========================================================================= */

.theme-choice {
  position: relative;
  max-width: 900px;
  margin: var(--s-7) auto 0;
  padding: clamp(36px, 5vw, 56px) clamp(24px, 4vw, 48px) clamp(30px, 4.5vw, 44px);
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.14) 0%, transparent 55%),
    radial-gradient(circle at 88% 82%, rgba(251, 200, 0, 0.12) 0%, transparent 55%),
    rgba(255, 255, 255, 0.07);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-xl);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow:
    0 30px 70px -24px rgba(0, 0, 0, 0.4),
    0 10px 22px -12px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}

/* Animated top-edge stripe - pulses between sun and coral */
.theme-choice::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--sun) 25%,
    var(--coral) 50%,
    var(--sun) 75%,
    transparent 100%);
  background-size: 200% 100%;
  animation: themeChoiceStripe 5s linear infinite;
  z-index: 3;
}
@keyframes themeChoiceStripe {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Subtle radial shimmer behind the content */
.theme-choice::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(
    circle at center,
    rgba(251, 200, 0, 0.08) 0%,
    transparent 50%);
  opacity: 0;
  animation: themeChoiceBreathe 7s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}
@keyframes themeChoiceBreathe {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}

/* Sparkle ornaments */
.theme-choice__ornament {
  position: absolute;
  color: var(--sun);
  opacity: 0.4;
  pointer-events: none;
  animation: themeSpark 4.5s ease-in-out infinite;
  z-index: 1;
}
.theme-choice__ornament--1 {
  top: 24px;
  left: 32px;
  font-size: 22px;
}
.theme-choice__ornament--2 {
  bottom: 32px;
  right: 38px;
  font-size: 16px;
  color: var(--coral);
  animation-delay: 1.5s;
}
.theme-choice__ornament--3 {
  top: 45%;
  right: 24px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  animation-delay: 3s;
}
@keyframes themeSpark {
  0%, 100% { opacity: 0.25; transform: scale(0.85) rotate(0); }
  50%      { opacity: 0.85; transform: scale(1.2) rotate(25deg); }
}

.theme-choice > *:not(.theme-choice__ornament) {
  position: relative;
  z-index: 2;
}

/* Eyebrow + title + body */
.theme-choice__eyebrow {
  font-family: "Caveat", cursive;
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--sun);
  margin: 0 0 var(--s-2);
  line-height: 1;
}
.theme-choice__title {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(2rem, 5.4vw, 3.4rem);
  line-height: 1.02;
  color: #fff;
  margin: 0 0 var(--s-4);
  text-transform: uppercase;
  letter-spacing: 0.015em;
  text-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
}
.theme-choice__body {
  max-width: 620px;
  margin: 0 auto var(--s-5);
  color: rgba(255, 255, 255, 0.94);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.65;
}
.theme-choice__body b {
  color: var(--sun);
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* Chip cluster */
.theme-choice__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
  margin: var(--s-3) auto var(--s-4);
  max-width: 760px;
}
.theme-chip {
  --chip-rgb: 255, 255, 255;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px 10px 14px;
  font-family: "DM Sans", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #fff;
  background: rgba(var(--chip-rgb), 0.12);
  border: 1.5px solid rgba(var(--chip-rgb), 0.4);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition:
    transform 0.35s var(--ease),
    background 0.35s var(--ease),
    border-color 0.35s var(--ease),
    box-shadow 0.35s var(--ease);
  cursor: default;
  user-select: none;
}
.theme-chip:hover {
  transform: translateY(-3px) scale(1.04);
  background: rgba(var(--chip-rgb), 0.24);
  border-color: rgba(var(--chip-rgb), 0.75);
  box-shadow: 0 10px 22px -6px rgba(var(--chip-rgb), 0.4);
}
.theme-chip__emoji {
  font-size: 1.15em;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}

.theme-chip--sun   { --chip-rgb: 251, 200, 0; }
.theme-chip--coral { --chip-rgb: 227, 99, 41; }
.theme-chip--moss  { --chip-rgb: 118, 185, 71; }
.theme-chip--sky   { --chip-rgb: 40, 184, 218; }

/* Stagger chip entrance on reveal */
.theme-choice.is-visible .theme-chip,
.theme-choice.revealed .theme-chip {
  animation: themeChipIn 0.55s var(--ease) backwards;
}
.theme-choice .theme-chip:nth-child(1) { animation-delay: 0.08s; }
.theme-choice .theme-chip:nth-child(2) { animation-delay: 0.14s; }
.theme-choice .theme-chip:nth-child(3) { animation-delay: 0.20s; }
.theme-choice .theme-chip:nth-child(4) { animation-delay: 0.26s; }
.theme-choice .theme-chip:nth-child(5) { animation-delay: 0.32s; }
.theme-choice .theme-chip:nth-child(6) { animation-delay: 0.38s; }
.theme-choice .theme-chip:nth-child(7) { animation-delay: 0.44s; }
.theme-choice .theme-chip:nth-child(8) { animation-delay: 0.50s; }
@keyframes themeChipIn {
  0%   { opacity: 0; transform: translateY(12px) scale(0.8); }
  60%  { opacity: 1; transform: translateY(-2px) scale(1.05); }
  100% { opacity: 1; transform: none; }
}

/* Footnote — highlighted pill so it reads as the punchline of the section
   ("anything else you can imagine"). Sun-yellow gradient with a soft glow,
   inline-block so it sits as its own badge centered under the chip grid. */
.theme-choice__footnote {
  font-family: "Caveat", cursive;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  color: var(--ink);
  margin: var(--s-5) auto 0;
  line-height: 1.25;
  display: inline-block;
  padding: 10px 22px;
  background: linear-gradient(135deg, var(--sun) 0%, #FFD447 55%, var(--sun) 100%);
  background-size: 200% 100%;
  border-radius: 999px;
  border: 1.5px solid rgba(17,20,24,0.12);
  box-shadow:
    0 8px 22px rgba(251,200,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -2px 0 rgba(17,20,24,0.08);
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
  font-weight: 500;
  letter-spacing: 0.005em;
  animation: themeFootnoteShine 4s ease-in-out infinite;
  /* keep its own line, centered, regardless of parent text-align */
  position: relative;
  z-index: 1;
}
/* Wrap the footnote so the inline-block pill centers cleanly even when the
   parent flows other content — works with any container text-align. */
.theme-choice .theme-choice__footnote {
  display: block;
  width: max-content;
  max-width: calc(100% - var(--s-3));
}
@keyframes themeFootnoteShine {
  0%, 100% { background-position: 0% 50%; box-shadow: 0 8px 22px rgba(251,200,0,0.55), inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -2px 0 rgba(17,20,24,0.08); }
  50%      { background-position: 100% 50%; box-shadow: 0 12px 28px rgba(251,200,0,0.7), inset 0 1px 0 rgba(255,255,255,0.65), inset 0 -2px 0 rgba(17,20,24,0.08); }
}
@media (prefers-reduced-motion: reduce) {
  .theme-choice__footnote { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .theme-choice::before,
  .theme-choice::after,
  .theme-choice__ornament,
  .theme-choice.is-visible .theme-chip,
  .theme-choice.revealed .theme-chip { animation: none; }
}

/* =========================================================================
   KARINTI BLOCK - Summer Camp "8-12 ani" editorial deep-dive
   Refined layout: dramatic two-part age pill, per-card brand accents
   (moss / sun / coral), icon-chip activity list, sparkle-ornamented finale.
   ========================================================================= */

.karinti-block {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  color: #fff;
  padding: 0 var(--s-3);
}

/* Floating sparkles behind the block for a touch of magic */
.karinti-block__spark {
  position: absolute;
  color: var(--sun);
  opacity: 0.35;
  font-size: 22px;
  pointer-events: none;
  animation: karintiSpark 5s ease-in-out infinite;
}
.karinti-block__spark--1 { top: 2%;  left: 4%;  animation-delay: 0s;   }
.karinti-block__spark--2 { top: 18%; right: 6%; animation-delay: 1.4s; font-size: 16px; }
.karinti-block__spark--3 { bottom: 14%; left: 10%; animation-delay: 2.8s; font-size: 18px; }
@keyframes karintiSpark {
  0%, 100% { opacity: 0.18; transform: scale(0.85) rotate(0deg); }
  50%      { opacity: 0.7;  transform: scale(1.1)  rotate(12deg); }
}

.karinti-block__head {
  text-align: center;
  max-width: 780px;
  margin: 0 auto var(--s-8);
  position: relative;
  z-index: 1;
}
.karinti-block__kicker {
  font-family: "Caveat", cursive;
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--sun);
  margin: 0 0 var(--s-3);
  line-height: 1;
}

/* ---------- AGE PILL: school-age (Grupa 7) callout ---------- */
/* Same Canva-sticker vocabulary as .age-group / .value-ribbon__item — solid
   theme gradient, white sticker outline, layered theme-colored drop shadow,
   specular shine, subtle confetti — just laid out horizontally as a pill
   instead of a vertical card. Sky theme picks up the rainbow rhythm slot
   that "Grupa 7" would have occupied in the main grid (moss / coral / sky /
   sun / moss / coral / sky), and contrasts nicely with the green section
   it sits on. */
.karinti-agepill {
  --theme:      var(--sky);
  --theme-dark: var(--sky-deep);
  --on-theme:   #fff;

  position: relative;
  /* Match the rectangular .age-group card shape: vertical column,
     rounded-rect corners (not pill ends), centered content */
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 28px 16px;
  min-width: 168px;
  min-height: 124px;
  margin: 0 auto var(--s-5);
  border-radius: 20px;
  color: var(--on-theme);
  background:
    radial-gradient(circle at 80% -10%, rgba(255, 255, 255, 0.22) 0%, transparent 55%),
    linear-gradient(160deg, var(--theme) 0%, var(--theme-dark) 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 1px 0 rgba(17, 20, 24, 0.12),
    0 14px 28px -12px color-mix(in srgb, var(--theme) 70%, transparent),
    0 4px 10px -4px rgba(17, 20, 24, 0.22);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  transition:
    transform .45s cubic-bezier(.22, 1, .36, 1),
    box-shadow .45s var(--ease);
}

/* Specular shine bloom in the top-right (matches .value-ribbon__item / .age-group). */
.karinti-agepill::before {
  content: "";
  position: absolute;
  right: -25px;
  top: -25px;
  width: 110px;
  height: 110px;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.28) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: soft-light;
}

/* Two confetti dots — same vocabulary, lighter density to fit the pill shape. */
.karinti-agepill::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 88% 70%, rgba(255, 255, 255, 0.55) 2px, transparent 2.6px),
    radial-gradient(circle at 22% 30%, rgba(255, 255, 255, 0.4)  1.6px, transparent 2.2px);
  pointer-events: none;
  z-index: 0;
}

.karinti-agepill > * { position: relative; z-index: 1; }

.karinti-agepill:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 1px 0 rgba(17, 20, 24, 0.15),
    0 22px 38px -16px color-mix(in srgb, var(--theme) 75%, transparent),
    0 8px 18px -6px rgba(17, 20, 24, 0.32);
}

/* Number disc — translucent-white badge identical in feel to .age-group__num. */
.karinti-agepill__num {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.22);
  color: var(--on-theme);
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 2px 6px rgba(17, 20, 24, 0.18);
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: 0.02em;
}

/* Stack: small label above + bigger range below, both centered */
.karinti-agepill__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  line-height: 1;
}

.karinti-agepill__label {
  font-family: "DM Sans", sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

.karinti-agepill__range {
  font-family: "Anton", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-theme);
}

@media (prefers-reduced-motion: reduce) {
  .karinti-agepill { transition: none; }
  .karinti-agepill:hover { transform: none; }
}

/* ---------- HEADLINE + INTROS ---------- */
.karinti-block__title {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(2.2rem, 5.4vw, 3.8rem);
  /* Generous leading — Anton is tall and Romanian diacritics (Ț's cedilla
     below, Ă / Î accents above, Ș below) eat into neighbour lines at
     tight leading. 1.25 gives safe vertical separation at every size. */
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: #fff;
  margin: 0 0 var(--s-4);
  padding: 0.08em 0;
  text-transform: uppercase;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}
.karinti-block__intro {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 var(--s-3);
}
.karinti-block__intro b {
  color: var(--sun);
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* ---------- TROPHY CALLOUT: richer, animated glow ---------- */
.karinti-block__trophy {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: var(--s-5);
  padding: 14px 26px 14px 14px;
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(251, 200, 0, 0.22) 0%, rgba(227, 99, 41, 0.16) 100%);
  border: 1.5px solid rgba(251, 200, 0, 0.45);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: karintiTrophyPulse 3.4s ease-in-out infinite;
}
@keyframes karintiTrophyPulse {
  0%, 100% { box-shadow: 0 8px 22px rgba(251, 200, 0, 0.22); }
  50%      { box-shadow: 0 14px 40px rgba(251, 200, 0, 0.48); }
}
.karinti-block__trophy-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sun) 0%, #ffd83a 100%);
  font-size: 1.4em;
  line-height: 1;
  flex-shrink: 0;
  box-shadow:
    inset 0 -3px 6px rgba(0, 0, 0, 0.18),
    0 6px 14px rgba(251, 200, 0, 0.45);
  animation: karintiTrophyWobble 4s ease-in-out infinite;
}
@keyframes karintiTrophyWobble {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-8deg); }
  75%      { transform: rotate(8deg); }
}
.karinti-block__trophy-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  line-height: 1.15;
  text-align: left;
}
.karinti-block__trophy-eyebrow {
  font-family: "DM Sans", sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sun);
}
.karinti-block__trophy-body {
  font-family: "Anton", sans-serif;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  letter-spacing: 0.04em;
  color: #fff;
  font-weight: 400;
  text-transform: none;
}

/* ---------- 3-CARD GRID ---------- */
.karinti-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  position: relative;
  z-index: 1;
}
@media (min-width: 720px)  { .karinti-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .karinti-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } }

.karinti-card {
  --karinti-accent: var(--sun);
  --karinti-accent-rgb: 251, 200, 0;
  position: relative;
  padding: var(--s-6) var(--s-5) var(--s-5);
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.10) 0%,
      rgba(255, 255, 255, 0.03) 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-lg);
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 0.4s var(--ease),
    box-shadow 0.4s var(--ease),
    border-color 0.4s var(--ease),
    background 0.4s var(--ease);
}
/* Accent bar across the top of each card */
.karinti-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    rgba(var(--karinti-accent-rgb), 0) 0%,
    rgba(var(--karinti-accent-rgb), 0.9) 20%,
    rgba(var(--karinti-accent-rgb), 0.9) 80%,
    rgba(var(--karinti-accent-rgb), 0) 100%);
  z-index: 2;
}
/* Soft radial glow tinted with the card's accent */
.karinti-card::after {
  content: "";
  position: absolute;
  top: -60px; right: -60px;
  width: 220px; height: 220px;
  background: radial-gradient(
    circle at center,
    rgba(var(--karinti-accent-rgb), 0.25) 0%,
    transparent 70%);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  z-index: 0;
  pointer-events: none;
}
.karinti-card:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--karinti-accent-rgb), 0.5);
  box-shadow:
    0 24px 48px -20px rgba(0, 0, 0, 0.5),
    0 10px 22px -10px rgba(var(--karinti-accent-rgb), 0.3);
}
.karinti-card:hover::after { opacity: 1; }

/* Per-card accent colors */
.karinti-card--moss  { --karinti-accent: var(--moss);  --karinti-accent-rgb: 118, 185, 71; }
.karinti-card--sun   { --karinti-accent: var(--sun);   --karinti-accent-rgb: 251, 200, 0;  }
.karinti-card--coral { --karinti-accent: var(--coral); --karinti-accent-rgb: 227, 99, 41;  }

/* Featured (middle) card gets a slight size bump */
@media (min-width: 1024px) {
  .karinti-card--featured {
    transform: translateY(-8px);
    border-color: rgba(251, 200, 0, 0.28);
    box-shadow: 0 22px 44px -18px rgba(0, 0, 0, 0.45);
  }
  .karinti-card--featured:hover { transform: translateY(-14px); }
}

/* Number badge in the corner */
.karinti-card__badge {
  position: absolute;
  top: 18px;
  right: 20px;
  font-family: "Anton", sans-serif;
  font-size: 3.2rem;
  line-height: 1;
  color: rgba(var(--karinti-accent-rgb), 0.3);
  letter-spacing: -0.02em;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  transition: color 0.4s var(--ease), transform 0.4s var(--ease);
}
.karinti-card:hover .karinti-card__badge {
  color: rgba(var(--karinti-accent-rgb), 0.5);
  transform: scale(1.05) rotate(-3deg);
}
/* Moss green on the page's green backdrop disappears — use an off-white
   tint for the numeric badge and hover state on the moss card specifically. */
.karinti-card--moss .karinti-card__badge {
  color: rgba(255, 255, 255, 0.3);
}
.karinti-card--moss:hover .karinti-card__badge {
  color: rgba(255, 255, 255, 0.55);
}

.karinti-card > *:not(.karinti-card__badge) {
  position: relative;
  z-index: 1;
}

.karinti-card__label {
  font-family: "Caveat", cursive;
  font-size: var(--t-20);
  color: rgba(var(--karinti-accent-rgb), 1);
  line-height: 1;
  margin-bottom: 10px;
  text-shadow: 0 2px 10px rgba(var(--karinti-accent-rgb), 0.3);
}
/* Moss needs a lighter shade for legibility on dark bg */
.karinti-card--moss .karinti-card__label { color: #a9d880; }
.karinti-card--coral .karinti-card__label { color: #ffb999; }

.karinti-card__title {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(1.45rem, 2.4vw, 1.8rem);
  line-height: 1.05;
  color: #fff;
  margin: 0 0 var(--s-4);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

/* ---------- LISTS: checkmark-in-pill bullets ---------- */
.karinti-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.karinti-card__list li {
  position: relative;
  padding-left: 30px;
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--t-15);
  line-height: 1.5;
}
.karinti-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(var(--karinti-accent-rgb), 0.18);
  border: 1.5px solid rgba(var(--karinti-accent-rgb), 0.5);
}
.karinti-card__list li::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 10px;
  width: 6px;
  height: 3px;
  border-left: 2px solid rgba(var(--karinti-accent-rgb), 1);
  border-bottom: 2px solid rgba(var(--karinti-accent-rgb), 1);
  transform: rotate(-45deg);
}
/* Moss checkmarks also lose against the green page backdrop — swap their
   tint to off-white on the moss card so each check stays readable. */
.karinti-card--moss .karinti-card__list li::before {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.7);
}
.karinti-card--moss .karinti-card__list li::after {
  border-left-color: #fff;
  border-bottom-color: #fff;
}

/* ---------- ACTIVITY CHIPS (middle card) ---------- */
.karinti-card__activities {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.karinti-card__activities li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 16px 11px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-md);
  color: rgba(255, 255, 255, 0.95);
  font-size: var(--t-15);
  font-weight: 500;
  overflow: hidden;
  transition:
    background 0.3s var(--ease),
    border-color 0.3s var(--ease),
    transform 0.3s var(--ease);
}
.karinti-card__activities li::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(251, 200, 0, 0.12) 0%,
    transparent 60%);
  transform: translateX(-100%);
  transition: transform 0.6s var(--ease);
  pointer-events: none;
}
.karinti-card__activities li:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(251, 200, 0, 0.38);
  transform: translateX(6px);
}
.karinti-card__activities li:hover::before {
  transform: translateX(0);
}
.karinti-act__emoji {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg,
    rgba(251, 200, 0, 0.2) 0%,
    rgba(227, 99, 41, 0.15) 100%);
  border: 1px solid rgba(251, 200, 0, 0.3);
  font-size: 1.3em;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
  transition: transform 0.3s var(--ease);
}
.karinti-card__activities li:hover .karinti-act__emoji {
  transform: scale(1.1) rotate(-6deg);
}
.karinti-act__text {
  letter-spacing: 0.01em;
}

/* ---------- CARD FOOTNOTE ---------- */
.karinti-card__footnote {
  margin: var(--s-5) 0 0;
  padding: var(--s-3) var(--s-4);
  background: rgba(var(--karinti-accent-rgb), 0.1);
  border: 1px solid rgba(var(--karinti-accent-rgb), 0.25);
  border-radius: var(--r-md);
  font-family: "Caveat", cursive;
  font-size: var(--t-18);
  color: #fff;
  line-height: 1.3;
  text-align: center;
}

/* =========================================================================
   FINALE BANNER - sentimental closer
   ========================================================================= */
.karinti-finale {
  position: relative;
  margin-top: var(--s-7);
  padding: var(--s-7) var(--s-5);
  text-align: center;
  background:
    radial-gradient(circle at 20% 25%, rgba(251, 200, 0, 0.18) 0%, transparent 60%),
    radial-gradient(circle at 80% 75%, rgba(227, 99, 41, 0.18) 0%, transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-xl);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  overflow: hidden;
  box-shadow: 0 22px 48px -20px rgba(0, 0, 0, 0.45);
}
.karinti-finale::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--sun) 30%,
    var(--coral) 50%,
    var(--sun) 70%,
    transparent 100%);
}
.karinti-finale__ornament {
  position: absolute;
  color: rgba(251, 200, 0, 0.35);
  font-size: 1.6rem;
  animation: karintiSpark 4.5s ease-in-out infinite;
}
.karinti-finale__ornament--left {
  top: 24px;
  left: 32px;
}
.karinti-finale__ornament--right {
  bottom: 30px;
  right: 40px;
  color: rgba(227, 99, 41, 0.35);
  animation-delay: 2s;
  font-size: 1.2rem;
}
.karinti-finale__eyebrow {
  font-family: "Caveat", cursive;
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--sun);
  margin: 0 0 var(--s-2);
  line-height: 1;
}
.karinti-finale__title {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(1.7rem, 3.8vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 var(--s-4);
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
}
.karinti-finale__body {
  max-width: 640px;
  margin: 0 auto var(--s-3);
  color: rgba(255, 255, 255, 0.94);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.6;
}
.karinti-finale__body:last-child { margin-bottom: 0; }
.karinti-finale__body b {
  color: var(--sun);
  font-weight: 700;
}

/* Distinct wave dividers - Phase 6 */
.wave-divider--summer svg path:first-child { fill: var(--sky); }
.wave-divider--bday svg path:first-child { fill: var(--night); }
.wave-divider--sleep svg path:first-child { fill: var(--crazy); }
.wave-divider--crazy svg path:first-child { fill: var(--paper); }

/* ELEGANT SECTION DIVIDERS - between event sections ----------------- */
/* ==========================================================================
   EVENT DIVIDERS - minimalist editorial section break.
   Four centered brand-colored dots on a clean paper bg. No waves, gradients,
   or textures. Like a magazine chapter break ornament.
   ========================================================================== */
.event-divider {
  position: relative;
  height: 80px;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0;
  overflow: hidden;
}

/* Four small dots - one per brand color, evenly spaced */
.event-divider__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  opacity: 0.9;
  animation: dot-breath 3.2s ease-in-out infinite;
}
.event-divider__dot--1 { background: var(--moss);   animation-delay: 0s; }
.event-divider__dot--2 { background: var(--sun);    animation-delay: 0.4s; }
.event-divider__dot--3 { background: var(--coral);  animation-delay: 0.8s; }
.event-divider__dot--4 { background: var(--sky);    animation-delay: 1.2s; }

@keyframes dot-breath {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.4); opacity: 1; }
}

/* Subtle hairline connecting the dots */
.event-divider::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 160px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(17,20,24,0.18) 50%, transparent);
  z-index: 0;
}
.event-divider__dot { position: relative; z-index: 1; }

/* Legacy modifier reset - all dividers share the same clean break regardless */
.event-divider--ink, .event-divider--night, .event-divider--crazy, .event-divider--rose,
.event-divider--to-bday, .event-divider--to-sleep, .event-divider--to-crazy, .event-divider--to-mothers {
  background: var(--paper);
}

@media (prefers-reduced-motion: reduce) {
  .event-divider__dot { animation: none; }
}

/* ==========================================================================
   KPI CARDS - "Karin's în cifre" - brochure-style stat stickers
   Used on /about.html. Four tilted sticker-cards on a thick ink border with
   offset shadow, themed radial tint, chip, big Anton number, Caveat caption.
   ========================================================================== */
.kpi-head { text-align: center; margin-bottom: var(--s-6); }
.kpi-head__title {
  font-size: clamp(2.25rem, 5.5vw, 3.75rem);
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin-top: var(--s-2);
}
.kpi-head__caveat {
  font-family: "Caveat", cursive;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  color: var(--ink-3);
  margin-top: var(--s-3);
  letter-spacing: 0.01em;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--s-4) 0;
}
@media (min-width: 500px) { .kpi-grid { gap: 20px; } }
@media (min-width: 820px) {
  .kpi-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; }
}

.kpi-card {
  position: relative;
  isolation: isolate;
  padding: 46px 18px 22px;
  background: #FFFCEE;
  border: 2.5px solid var(--ink);
  border-radius: 22px;
  box-shadow: 6px 6px 0 var(--ink);
  text-align: center;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
  overflow: hidden;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
/* Micro-tilts - gives the brochure sticker feel */
.kpi-card:nth-child(1) { transform: rotate(-1.4deg); }
.kpi-card:nth-child(2) { transform: rotate(0.9deg); }
.kpi-card:nth-child(3) { transform: rotate(-0.7deg); }
.kpi-card:nth-child(4) { transform: rotate(1.4deg); }
.kpi-card:hover,
.kpi-card:focus-within {
  transform: rotate(0) translateY(-6px);
  box-shadow: 10px 12px 0 var(--ink);
}
.kpi-card:hover .kpi-card__num {
  animation: kpiNumPop .5s var(--ease);
}
@keyframes kpiNumPop {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) { .kpi-card:hover .kpi-card__num { animation: none; } }

/* Soft themed radial glow inside */
.kpi-card::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
}
/* Faint dot pattern on top of the glow */
.kpi-card::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background-image: radial-gradient(circle at center, rgba(17,20,24,0.08) 1.2px, transparent 1.5px);
  background-size: 14px 14px;
  opacity: 0.35;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
}

.kpi-card--moss::before {
  background:
    radial-gradient(circle at 18% 12%, rgba(118,185,71,0.38) 0, transparent 45%),
    radial-gradient(circle at 85% 88%, rgba(118,185,71,0.22) 0, transparent 45%);
}
.kpi-card--coral::before {
  background:
    radial-gradient(circle at 18% 12%, rgba(227,99,41,0.30) 0, transparent 45%),
    radial-gradient(circle at 85% 88%, rgba(227,99,41,0.18) 0, transparent 45%);
}
.kpi-card--sky::before {
  background:
    radial-gradient(circle at 18% 12%, rgba(40,184,218,0.32) 0, transparent 45%),
    radial-gradient(circle at 85% 88%, rgba(40,184,218,0.20) 0, transparent 45%);
}
.kpi-card--sun::before {
  background:
    radial-gradient(circle at 18% 12%, rgba(251,200,0,0.42) 0, transparent 45%),
    radial-gradient(circle at 85% 88%, rgba(251,200,0,0.26) 0, transparent 45%);
}

/* Corner asterisk ornament */
.kpi-card__corner {
  position: absolute;
  top: 10px; right: 14px;
  font-family: "Caveat", cursive;
  font-size: 1.6rem;
  line-height: 1;
  opacity: 0.55;
  pointer-events: none;
  animation: cornerTwinkle 4s ease-in-out infinite;
  z-index: 2;
}
@keyframes cornerTwinkle {
  0%, 100% { opacity: 0.55; transform: scale(1) rotate(0); }
  50% { opacity: 0.9; transform: scale(1.15) rotate(12deg); }
}
@media (prefers-reduced-motion: reduce) { .kpi-card__corner { animation: none; } }
.kpi-card--moss .kpi-card__corner { color: var(--moss-deep); }
.kpi-card--coral .kpi-card__corner { color: var(--coral-deep); }
.kpi-card--sky .kpi-card__corner { color: var(--sky-deep); }
.kpi-card--sun .kpi-card__corner { color: var(--sun-deep); }

/* Context chip (ink pill with small caps) */
.kpi-card__chip {
  position: absolute;
  top: 14px; left: 14px;
  padding: 4px 10px 3px;
  border-radius: 999px;
  font-family: "Anton", sans-serif;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: #fff;
  background: var(--ink);
  line-height: 1.3;
  white-space: nowrap;
  transition: transform .3s var(--ease);
}
.kpi-card:hover .kpi-card__chip {
  transform: scale(1.05);
}
.kpi-card--moss .kpi-card__chip { background: var(--moss-deep); }
.kpi-card--coral .kpi-card__chip { background: var(--coral-deep); }
.kpi-card--sky .kpi-card__chip { background: var(--sky-deep); }
.kpi-card--sun .kpi-card__chip { background: var(--ink); color: var(--sun); }

/* Big Anton number */
.kpi-card__num {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(3.25rem, 8vw, 5.25rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 8px 0 10px;
  text-shadow: 2px 2px 0 rgba(17,20,24,0.08);
}
.kpi-card--moss .kpi-card__num { color: var(--moss); }
.kpi-card--coral .kpi-card__num { color: var(--coral); }
.kpi-card--sky .kpi-card__num { color: var(--sky-deep); }
.kpi-card--sun .kpi-card__num { color: var(--sun-deep); }

.kpi-card__plus {
  font-size: 0.55em;
  vertical-align: 0.55em;
  letter-spacing: 0;
  margin-left: 2px;
}
.kpi-card__num-gap { display: inline-block; width: 0.12em; }

/* Label (Anton small caps) */
.kpi-card__label {
  font-family: "Anton", sans-serif;
  font-size: clamp(0.85rem, 1.3vw, 1rem);
  letter-spacing: 0.15em;
  color: var(--ink);
  margin-bottom: 8px;
  line-height: 1.2;
}

/* Caveat caption */
.kpi-card__caption {
  font-family: "Caveat", cursive;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--ink-2);
  line-height: 1.25;
  margin-top: auto;
  transition: color .3s var(--ease);
}
.kpi-card:hover .kpi-card__caption { color: var(--ink); }

/* On narrower screens scale numbers down a bit */
@media (max-width: 520px) {
  .kpi-card { padding-top: 42px; padding-bottom: 18px; min-height: 230px; }
  .kpi-card__num { font-size: clamp(2.75rem, 11vw, 4rem); }
  .kpi-card__chip { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .kpi-card { transform: none !important; }
  .kpi-card:hover { transform: translateY(-4px) !important; }
}

/* ==========================================================================
   VALUE RIBBON BAND — premium poster strip. Each stat is a sticker-style
   card with a gradient brand-color face, layered white stroke, floating
   confetti dots, a wavy hand-drawn underline under the number, and an idle
   icon bounce. On hover the card takes a subtle 3D tilt.
   ========================================================================== */
.value-ribbon {
  background: var(--paper-2, #F3EFDF);
  color: var(--ink);
  padding: var(--s-7) var(--s-4) var(--s-8);
  position: relative;
  overflow: hidden;
}
/* Subtle paper grain + radial color washes in the section bg */
.value-ribbon::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 8% 12%, rgba(118, 185, 71, 0.10) 0, transparent 40%),
    radial-gradient(circle at 92% 88%, rgba(227, 99, 41, 0.10) 0, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(251, 200, 0, 0.06) 0, transparent 55%);
  pointer-events: none;
}
/* Floating Caveat-style sparkles in the section background */
.value-ribbon__spark {
  position: absolute;
  color: var(--coral);
  font-size: 22px;
  animation: sparkDrift 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
  opacity: 0.55;
}
@keyframes sparkDrift {
  0%, 100% { transform: translateY(0) rotate(0); opacity: 0.45; }
  50%      { transform: translateY(-10px) rotate(15deg); opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) { .value-ribbon__spark { animation: none; } }

.value-ribbon__inner {
  position: relative;
  z-index: 2;
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  perspective: 1000px; /* enables 3D tilt on hover */
}
@media (min-width: 768px) {
  .value-ribbon__inner { grid-template-columns: repeat(4, 1fr); gap: 22px; }
}

.value-ribbon__item {
  --theme: #5FA637;
  --theme-dark: #4C8A28;
  --text-on-theme: #fff;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 22px 22px;
  /* Gradient sticker face */
  background:
    radial-gradient(circle at 80% 0%, rgba(255, 255, 255, 0.22) 0%, transparent 55%),
    linear-gradient(135deg, var(--theme) 0%, var(--theme-dark) 100%);
  color: var(--text-on-theme);
  border-radius: 22px;
  overflow: hidden;
  /* White sticker outline, layered theme-colored drop shadow, inner top gloss */
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 1px 0 rgba(17, 20, 24, 0.12),
    0 16px 32px -14px color-mix(in srgb, var(--theme) 70%, transparent),
    0 4px 10px -4px rgba(17, 20, 24, 0.25);
  transition:
    transform .45s cubic-bezier(.22, 1, .36, 1),
    box-shadow .45s var(--ease);
  transform-style: preserve-3d;
  isolation: isolate;
}
/* Specular shine sweep — 2 overlapping radial blooms in the top-right */
.value-ribbon__item::before {
  content: "";
  position: absolute;
  right: -30px; top: -30px;
  width: 180px; height: 180px;
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.28) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: soft-light;
}
/* Confetti dots arranged in a diagonal band across the card */
.value-ribbon__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 82% 68%, rgba(255, 255, 255, 0.75) 2px, transparent 2.5px),
    radial-gradient(circle at 90% 78%, rgba(255, 255, 255, 0.55) 1.4px, transparent 2px),
    radial-gradient(circle at 75% 82%, rgba(255, 255, 255, 0.55) 1.4px, transparent 2px),
    radial-gradient(circle at 14% 22%, rgba(255, 255, 255, 0.5) 1.6px, transparent 2.2px),
    radial-gradient(circle at 8% 14%, rgba(255, 255, 255, 0.35) 1px, transparent 1.4px);
  pointer-events: none;
  z-index: 0;
}
.value-ribbon__item:hover {
  transform: translateY(-6px) rotateX(3deg) rotateY(-2deg);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 1px 0 rgba(17, 20, 24, 0.15),
    0 28px 48px -18px color-mix(in srgb, var(--theme) 75%, transparent),
    0 8px 18px -6px rgba(17, 20, 24, 0.35);
}

/* Per-item brand gradient */
.value-ribbon__item:nth-child(1) { --theme: #5FA637; --theme-dark: #3F7A20; }
.value-ribbon__item:nth-child(2) { --theme: #E36329; --theme-dark: #B94914; }
.value-ribbon__item:nth-child(3) { --theme: #2CADD0; --theme-dark: #1A7B97; }
.value-ribbon__item:nth-child(4) {
  --theme: #FDCE22;
  --theme-dark: #E0A800;
  --text-on-theme: #1A1D21;
}
.value-ribbon__item:nth-child(4)::after {
  background-image:
    radial-gradient(circle at 82% 68%, rgba(26, 29, 33, 0.55) 2px, transparent 2.5px),
    radial-gradient(circle at 90% 78%, rgba(26, 29, 33, 0.35) 1.4px, transparent 2px),
    radial-gradient(circle at 75% 82%, rgba(26, 29, 33, 0.35) 1.4px, transparent 2px),
    radial-gradient(circle at 14% 22%, rgba(26, 29, 33, 0.3) 1.6px, transparent 2.2px),
    radial-gradient(circle at 8% 14%, rgba(26, 29, 33, 0.2) 1px, transparent 1.4px);
}
.value-ribbon__item:nth-child(4)::before {
  background: radial-gradient(circle at center, rgba(26, 29, 33, 0.14) 0%, transparent 60%);
  mix-blend-mode: multiply;
}

/* Icon chip — beveled white tile with a subtle gradient and idle float */
.value-ribbon__icon {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 15px;
  background:
    radial-gradient(circle at 30% 20%, #fff 0%, #F6F2E6 100%);
  color: var(--theme-dark);
  box-shadow:
    0 8px 18px -6px rgba(17, 20, 24, 0.3),
    inset 0 -2px 0 rgba(17, 20, 24, 0.08),
    inset 0 1px 0 #fff;
  transition: transform .4s var(--ease);
  animation: iconBob 4.5s ease-in-out infinite;
}
.value-ribbon__item:nth-child(2) .value-ribbon__icon { animation-delay: 0.6s; }
.value-ribbon__item:nth-child(3) .value-ribbon__icon { animation-delay: 1.2s; }
.value-ribbon__item:nth-child(4) .value-ribbon__icon { animation-delay: 1.8s; }
@keyframes iconBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) { .value-ribbon__icon { animation: none; } }
.value-ribbon__icon svg { width: 24px; height: 24px; }
.value-ribbon__item:hover .value-ribbon__icon {
  transform: scale(1.1) rotate(-6deg);
  animation-play-state: paused;
}

.value-ribbon__num {
  position: relative;
  z-index: 1;
  font-family: "Anton", sans-serif;
  font-size: clamp(2.3rem, 3.6vw, 3.2rem);
  line-height: 1;
  letter-spacing: 0.01em;
  font-weight: 400;
  color: var(--text-on-theme);
  transition: transform .4s var(--ease);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.12), 0 6px 18px rgba(0, 0, 0, 0.15);
  display: inline-block;
  padding-bottom: 10px;  /* space for the wavy underline */
}
.value-ribbon__item:nth-child(4) .value-ribbon__num {
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}
.value-ribbon__item:hover .value-ribbon__num {
  transform: scale(1.04) translateY(-1px);
}
/* Hand-drawn wavy underline under each number */
.value-ribbon__num::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 6' preserveAspectRatio='none'><path d='M0 3 Q 10 0 20 3 T 40 3 T 60 3 T 80 3' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/></svg>");
  background-repeat: repeat-x;
  background-size: 80px 6px;
  opacity: 0.55;
}
.value-ribbon__item:nth-child(4) .value-ribbon__num::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 6' preserveAspectRatio='none'><path d='M0 3 Q 10 0 20 3 T 40 3 T 60 3 T 80 3' fill='none' stroke='%231A1D21' stroke-width='2' stroke-linecap='round'/></svg>");
  opacity: 0.5;
}

.value-ribbon__text {
  position: relative;
  z-index: 1;
  font-size: clamp(0.82rem, 1.25vw, 0.95rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text-on-theme) 92%, transparent);
  font-weight: 600;
  line-height: 1.35;
}
.value-ribbon__item:nth-child(4) .value-ribbon__text {
  color: rgba(26, 29, 33, 0.84);
}

/* Safari fallback when color-mix isn't supported */
@supports not (color: color-mix(in srgb, red, blue)) {
  .value-ribbon__item {
    box-shadow:
      inset 0 0 0 1.5px rgba(255, 255, 255, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.55),
      0 16px 32px -14px rgba(17, 20, 24, 0.4),
      0 4px 10px -4px rgba(17, 20, 24, 0.25);
  }
  .value-ribbon__text { color: rgba(255, 255, 255, 0.94); }
  .value-ribbon__item:nth-child(4) .value-ribbon__text { color: rgba(26, 29, 33, 0.86); }
}

/* Mobile: tighten padding and reduce ornament intensity */
@media (max-width: 520px) {
  .value-ribbon { padding: var(--s-5) 14px var(--s-6); }
  .value-ribbon__inner { gap: 14px; perspective: none; }
  .value-ribbon__item { padding: 20px 16px 18px; gap: 10px; }
  .value-ribbon__item::before { width: 120px; height: 120px; right: -20px; top: -20px; }
  .value-ribbon__icon { width: 44px; height: 44px; border-radius: 12px; }
  .value-ribbon__icon svg { width: 22px; height: 22px; }
  /* Disable 3D tilt on touch devices — feels strange on tap */
  .value-ribbon__item:hover { transform: translateY(-3px); }
}

/* ==========================================================================
   RAINBOW SECTION DIVIDER - brand-color dashed strip as hr replacement
   ========================================================================== */
.rainbow-divider {
  display: block;
  height: 6px;
  width: min(280px, 70%);
  margin: var(--s-6) auto;
  border-radius: 3px;
  background:
    repeating-linear-gradient(90deg,
      var(--coral) 0 40px,
      var(--sun) 40px 80px,
      var(--moss) 80px 120px,
      var(--sky) 120px 160px);
  background-size: 160px 6px;
  box-shadow: 0 2px 8px rgba(17,20,24,0.08);
  position: relative;
  animation: rainbowDividerShift 8s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .rainbow-divider { animation: none; } }
.rainbow-divider::before,
.rainbow-divider::after {
  content: "✦";
  position: absolute;
  top: 50%;
  font-family: "Caveat", cursive;
  font-size: 1.4rem;
  transform: translateY(-50%);
  color: var(--coral);
  background: var(--paper);
  padding: 0 10px;
}
.rainbow-divider::before { left: -18px; }
.rainbow-divider::after { right: -18px; color: var(--moss); }

/* ==========================================================================
   TESTIMONIALS STRIP - parent quotes in hand-drawn speech bubbles
   ========================================================================== */
.testimonials {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  max-width: 1180px;
  margin: 0 auto;
}
@media (min-width: 768px) { .testimonials { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } }

.testimonial {
  position: relative;
  padding: var(--s-5) var(--s-4) var(--s-5);
  background: #FFFCEE;
  border: 2px solid var(--ink);
  border-radius: 22px;
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.testimonial:nth-child(1) { transform: rotate(-1deg); }
.testimonial:nth-child(2) { transform: rotate(0.8deg); }
.testimonial:nth-child(3) { transform: rotate(-0.4deg); }
.testimonial:hover {
  transform: rotate(0) translateY(-5px) scale(1.015);
  box-shadow: 9px 11px 0 var(--ink);
}
.testimonial__quote {
  font-family: "Caveat", cursive;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: var(--s-4);
  position: relative;
  padding-top: 18px;
}
.testimonial__quote::before {
  content: "\201C";
  position: absolute;
  top: -16px; left: -4px;
  font-family: "Anton", sans-serif;
  font-size: 4.5rem;
  line-height: 1;
  color: var(--coral);
  opacity: 0.85;
  transition: transform .35s var(--ease);
}
.testimonial:nth-child(2) .testimonial__quote::before { color: var(--moss); }
.testimonial:nth-child(3) .testimonial__quote::before { color: var(--sky-deep); }
.testimonial:hover .testimonial__quote::before {
  transform: scale(1.2) rotate(-6deg);
}

.testimonial__attribution {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: var(--s-3);
  border-top: 1px dashed var(--line-strong);
  transition: border-color .3s var(--ease);
}
.testimonial:hover .testimonial__attribution {
  border-top-color: var(--coral);
}
.testimonial:nth-child(2):hover .testimonial__attribution { border-top-color: var(--moss); }
.testimonial:nth-child(3):hover .testimonial__attribution { border-top-color: var(--sky-deep); }
.testimonial__avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--moss);
  display: grid; place-items: center;
  color: #fff;
  font-family: "Anton", sans-serif;
  font-size: 14px;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px #FFFCEE, 0 0 0 4px var(--moss);
  position: relative;
  transition: transform .3s var(--ease);
}
.testimonial:hover .testimonial__avatar { transform: scale(1.1) rotate(-4deg); }
.testimonial:nth-child(2) .testimonial__avatar { box-shadow: 0 0 0 3px #FFFCEE, 0 0 0 4px var(--coral); }
.testimonial:nth-child(3) .testimonial__avatar { box-shadow: 0 0 0 3px #FFFCEE, 0 0 0 4px var(--sky-deep); }
.testimonial:nth-child(2) .testimonial__avatar { background: var(--coral); }
.testimonial:nth-child(3) .testimonial__avatar { background: var(--sky-deep); }

.testimonial__name {
  font-family: "Anton", sans-serif;
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  color: var(--ink);
  letter-spacing: 0.02em;
  line-height: 1.2;
  transition: color .3s var(--ease);
}
.testimonial:hover .testimonial__name { color: var(--moss-deep); }
.testimonial:nth-child(2):hover .testimonial__name { color: var(--coral-deep); }
.testimonial:nth-child(3):hover .testimonial__name { color: var(--sky-deep); }
.testimonial__role {
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  margin-top: 2px;
  font-style: italic;
}

@media (prefers-reduced-motion: reduce) { .testimonial { transform: none !important; } }

/* ==========================================================================
   DECADE TIMELINE - About page. Zigzag path of milestone cards connected by
   a rainbow vertical spine on desktop, single-column stack on mobile.
   ========================================================================== */
.timeline {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  padding: var(--s-4) 0;
}
.timeline__line {
  position: absolute;
  top: 0; bottom: 0; left: 24px;
  width: 4px;
  background: linear-gradient(to bottom, var(--moss), var(--coral), var(--sky), var(--sun), var(--moss), var(--coral));
  border-radius: 2px;
  opacity: 0.85;
}
@media (min-width: 820px) {
  .timeline__line { left: 50%; transform: translateX(-50%); }
}

.timeline__step {
  position: relative;
  padding: var(--s-4) var(--s-4) var(--s-4) 72px;
  margin-bottom: var(--s-5);
  background: #FFFCEE;
  border: 2px solid var(--ink);
  border-radius: 18px;
  box-shadow: 5px 5px 0 var(--ink);
  max-width: 92%;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.timeline__step:hover {
  transform: translateY(-4px) rotate(0deg);
  box-shadow: 8px 10px 0 var(--ink);
}
.timeline__step:hover .timeline__year {
  animation: yearPop .4s var(--ease);
}
@keyframes yearPop {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) { .timeline__step:hover .timeline__year { animation: none; } }
@media (min-width: 820px) {
  .timeline__step {
    max-width: 44%;
    padding: var(--s-4);
  }
  .timeline__step:nth-child(odd) {
    margin-left: 0;
    margin-right: auto;
    transform: rotate(-0.8deg);
  }
  .timeline__step:nth-child(even) {
    margin-left: auto;
    margin-right: 0;
    transform: rotate(0.6deg);
  }
  .timeline__step:nth-child(odd):hover { transform: translateY(-4px) rotate(-1.3deg); }
  .timeline__step:nth-child(even):hover { transform: translateY(-4px) rotate(1deg); }
}

/* Dot on the spine */
.timeline__step::before {
  content: "";
  position: absolute;
  left: 18px; top: 24px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--ink);
  border: 3px solid var(--paper);
  box-shadow: 0 0 0 3px var(--ink);
  z-index: 1;
  transition: transform .3s var(--ease);
}
.timeline__step:hover::before {
  transform: scale(1.25);
}
.timeline__step--moss::before { background: var(--moss); box-shadow: 0 0 0 3px var(--moss-deep); }
.timeline__step--coral::before { background: var(--coral); box-shadow: 0 0 0 3px var(--coral-deep); }
.timeline__step--sky::before { background: var(--sky); box-shadow: 0 0 0 3px var(--sky-deep); }
.timeline__step--sun::before { background: var(--sun); box-shadow: 0 0 0 3px var(--sun-deep); }

@media (min-width: 820px) {
  .timeline__step:nth-child(odd)::before {
    left: auto; right: -36px;
  }
  .timeline__step:nth-child(even)::before {
    left: -36px;
  }
}

.timeline__year {
  display: inline-block;
  font-family: "Anton", sans-serif;
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  letter-spacing: 0.01em;
  margin-bottom: 6px;
  line-height: 1;
  transform-origin: left center;
}
.timeline__step--moss .timeline__year { color: var(--moss-deep); }
.timeline__step--coral .timeline__year { color: var(--coral-deep); }
.timeline__step--sky .timeline__year { color: var(--sky-deep); }
.timeline__step--sun .timeline__year { color: var(--sun-deep); }

.timeline__title {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  line-height: 1.2;
  margin-bottom: 6px;
  color: var(--ink);
}
.timeline__body {
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  line-height: 1.6;
  color: var(--ink-2);
}

@media (prefers-reduced-motion: reduce) {
  .timeline__step { transform: none !important; }
}

/* ==========================================================================
   GREENBOOKS-INSPIRED FLOATING PILL NAV (desktop only)
   Single unified rounded capsule: [logo] [nav centered] [CTA right].
   Floats below the top marquee with a comfortable 24px gap.
   ========================================================================== */
@media (min-width: 960px) {
  /* Both the marquee and the nav are `position: fixed` - neither takes flow
     space. Body padding compensates so content starts below them.
     Pages WITH marquee: nav at 60px + 86px pill + 7px overflow ≈ 153px → 165.
     Pages WITHOUT marquee (404): nav at 24px + 86px pill + 7px overflow ≈ 117px → 130. */
  body { padding-top: 0; }
  body:not(:has(.hero-bleed)) { padding-top: 122px; }
  body:has(.top-marquee):not(:has(.hero-bleed)) { padding-top: 158px; }

  /* Tighten the first section/element of main - body padding already clears
     the nav, so the first section doesn't need its own big top padding.
     Excludes top-hero pages (yellow/green/event) whose first section extends
     behind the nav and has its own calibrated top padding. */
  body:not(:has(.hero-bleed)):not(.body--yellow-top):not(.body--green-top):not(.body--event-top) main > section:first-child,
  body:not(:has(.hero-bleed)):not(.body--yellow-top):not(.body--green-top):not(.body--event-top) main > div:first-child,
  body:not(:has(.hero-bleed)):not(.body--yellow-top):not(.body--green-top):not(.body--event-top) main > header:first-child {
    padding-top: var(--s-3) !important;
  }
  /* Contact/paper-2 pages: tight top padding so the CONTACT eyebrow sits
     right below the nav on page load (no big empty strip above the content). */
  body.body--paper-2 main > section:first-child,
  body.body--paper-2 main > div:first-child {
    padding-top: var(--s-3) !important;
  }
  /* Reduce body padding on paper-2 pages so content is higher in the viewport. */
  body.body--paper-2 { padding-top: 140px !important; }

  /* Pin the marquee to the very top so it doesn't sit in flow behind/below the nav */
  .top-marquee {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
  }

  /* Nav container - fixed, centered, floating above all content.
     Default top (no marquee): 24px. With marquee: 60px (42px marquee + 18px gap). */
  .nav {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    width: calc(100% - 48px);
    max-width: 1320px;
    margin: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    border-bottom: 0;
    box-shadow: none;
  }
  .top-marquee + .nav { top: 60px; }
  .nav.is-scrolled { background: transparent; box-shadow: none; border: 0; border-bottom: 0; }

  /* Inner wrapper is a flex row that fills the pill - pill does the visual work */
  .nav__inner {
    padding: 0;
    margin: 0;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    gap: 0;
  }
  .nav__hamburger { display: none !important; }

  /* THE PILL - one capsule, three zones inside: logo | menu (centered) | CTA
     Liquid-glass / frosted translucent surface: backdrop-blur so the page
     shows through, very soft paper tint for brand warmth, subtle inner
     highlights for a refractive "wet glass" feel.
     Glitch-free scroll:
       - isolate the pill on its own GPU layer via translateZ(0)
       - keep EVERY structural property constant across scroll states
         (padding, border, backdrop-filter values) — only background tint
         and outer shadow change, so the browser only has to repaint paint
         layers, never re-layout.
       - contain: paint scopes the repaint area to the pill itself. */
  .nav__pill {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 14px 14px 14px 22px;
    /* Pill frame is almost INVISIBLE — nearly no paper tint, just a hint
       of blur so you can tell there's glass there, a subtle top
       catch-light, and a delicate hairline border. Each nav link has its
       own readability halo (see .nav__link below), so the pill doesn't
       need to obscure anything itself.
       At scroll (opaque = 1) we still let it gain a bit of body so the
       floating capsule shape stays recognisable. */
    background:
      radial-gradient(130% 160% at 15% 0%,
        rgba(255, 255, 255, calc(0.18 + 0.22 * var(--nav-opaque, 0))) 0%,
        rgba(255, 255, 255, 0) 55%),
      linear-gradient(180deg,
        rgba(247, 243, 232, calc(0.02 + 0.32 * var(--nav-opaque, 0))) 0%,
        rgba(247, 243, 232, calc(0.01 + 0.28 * var(--nav-opaque, 0))) 100%);
    /* Gentle blur — enough to keep the "glass" read but softened so the
       scene behind is clearly visible through the pill. */
    backdrop-filter: blur(14px) saturate(170%);
    -webkit-backdrop-filter: blur(14px) saturate(170%);
    border: 1px solid rgba(255, 255, 255, calc(0.12 + 0.22 * var(--nav-opaque, 0)));
    border-radius: 999px;
    position: relative;
    /* Shadows also interpolate — the pill lifts off the page as the user
       scrolls, gaining weight. */
    box-shadow:
      0 calc(14px + 10px * var(--nav-opaque, 0))
        calc(32px + 18px * var(--nav-opaque, 0))
        -18px rgba(17, 20, 24, calc(0.14 + 0.16 * var(--nav-opaque, 0))),
      0 calc(3px + 3px * var(--nav-opaque, 0))
        calc(10px + 6px * var(--nav-opaque, 0))
        -4px rgba(17, 20, 24, calc(0.06 + 0.1 * var(--nav-opaque, 0))),
      inset 0 1px 0 rgba(255, 255, 255, calc(0.5 + 0.3 * var(--nav-opaque, 0))),
      inset 0 -1px 0 rgba(17, 20, 24, calc(0.02 + 0.05 * var(--nav-opaque, 0)));
    /* GPU-promote the pill so its backdrop-filter doesn't get invalidated
       on every scroll frame. No `contain: paint` / `isolation` here — both
       would clip the dropdown menu that anchors inside the pill. */
    transform: translateZ(0);
    will-change: background, box-shadow, border-color;
  }
  /* Specular streak along the top edge — the "liquid" catch-light. */
  .nav__pill::before {
    content: "";
    position: absolute;
    inset: 1px 1px auto 1px;
    height: 60%;
    border-radius: 999px 999px 140px 140px / 999px 999px 40px 40px;
    background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.45) 0%,
      rgba(255, 255, 255, 0.08) 40%,
      rgba(255, 255, 255, 0) 75%);
    pointer-events: none;
    z-index: -1;
  }
  /* The `.is-scrolled` state is no longer needed for the glass fade —
     --nav-opaque drives that continuously via scroll. Left empty as a
     stable hook for any future tweaks. */
  .nav.is-scrolled .nav__pill { }
  /* Graceful fallback: when the browser can't composite backdrop-filter
     (old Safari, Firefox w/o flag), swap in a denser solid so the nav
     stays readable. */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .nav__pill {
      background: rgba(247, 243, 232, 0.9);
    }
  }

  /* Logo - LEFT zone, bare (no background).
     Uses negative vertical margins to let the logo visually overflow the pill
     without expanding the pill's flex cross-axis height. Pill content height
     stays at 58px; logo renders at 100px, overflowing ~21px top/bottom. */
  .nav__brand {
    flex: 0 0 auto;
    height: auto;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    display: flex;
    align-items: center;
    margin: 0;
    overflow: visible;
  }
  .nav__brand:hover { background: transparent; box-shadow: none; transform: none; }
  .nav__brand img,
  .nav.is-scrolled .nav__brand img {
    height: 100px; width: 100px;
    margin: -21px 0;  /* overflow above/below the pill without growing it */
    filter: drop-shadow(0 4px 10px rgba(17,20,24,0.18));
    transition: transform .4s var(--ease), filter .3s var(--ease);
    position: relative;
    z-index: 2;
  }
  .nav__brand:hover img { transform: rotate(-6deg) scale(1.05); }
  /* Allow logo to overflow the pill's rounded clip area */
  .nav__pill { overflow: visible; }

  /* Menu - CENTER zone, visually centered between logo and CTA.
     `margin: 0 auto` with `flex: 0 0 auto` pushes it to true center of pill. */
  .nav__menu {
    flex: 0 0 auto;
    position: relative;
    display: flex;
    align-items: center;
    margin: 0 auto;
    /* Wider gap so the magnetic hover effect (JS translates each link
       ~7px toward the cursor, strength 0.28) never causes adjacent
       button halos to overlap visually. */
    gap: 14px;
    padding: 0;
  }
  .nav__hover-pill { display: none !important; }

  /* Nav items (dropdown parent containers) */
  .nav__item {
    position: relative;
    display: inline-flex;
    align-items: center;
  }

  .nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    padding: 10px 16px;
    letter-spacing: 0.02em;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    cursor: pointer;
    /* Rich crystal-glass pill — still no colour tint, but now on a
       noticeably MORE opaque base so the button stands out clearly as
       its own chip instead of melting into the transparent frame.
       Five background layers composited top-to-bottom:
         1. Bright top specular (the main "catch-light")
         2. Diagonal swept shine streak (mid-highlight, simulates motion)
         3. Soft bottom rim bounce (ambient reflection)
         4. Thin radial concentrator at centre-top for extra dimension
         5. Solid-ish white base fill (~45%) — this is the new layer that
            bumps overall opacity so the pill reads as a clear object */
    background:
      linear-gradient(180deg,
        rgba(255, 255, 255, 0.65) 0%,
        rgba(255, 255, 255, 0.22) 38%,
        rgba(255, 255, 255, 0.08) 58%),
      linear-gradient(115deg,
        rgba(255, 255, 255, 0) 30%,
        rgba(255, 255, 255, 0.28) 50%,
        rgba(255, 255, 255, 0) 70%),
      linear-gradient(0deg,
        rgba(255, 255, 255, 0.4) 0%,
        rgba(255, 255, 255, 0.08) 50%),
      radial-gradient(100% 120% at 50% 0%,
        rgba(255, 255, 255, 0.3) 0%,
        rgba(255, 255, 255, 0) 65%),
      linear-gradient(180deg,
        rgba(255, 255, 255, 0.48),
        rgba(255, 255, 255, 0.38));
    border: 1px solid rgba(255, 255, 255, 0.48);
    border-radius: 999px;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
    /* Inset shadows sculpt the pill into a convex jewel:
         - bright top edge   (primary highlight line)
         - dark bottom edge  (weight)
         - side refraction glints (crystalline feel) */
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.75),
      inset 0 -1px 0 rgba(17, 20, 24, 0.1),
      inset 2px 0 3px -2px rgba(255, 255, 255, 0.35),
      inset -2px 0 3px -2px rgba(255, 255, 255, 0.35),
      0 6px 18px -6px rgba(17, 20, 24, 0.22);
    transition:
      color 0.22s var(--ease),
      background 0.35s var(--ease),
      border-color 0.22s var(--ease),
      box-shadow 0.28s var(--ease);
  }
  /* Hover: all layers intensify, base lifts to near-solid white — the
     jewel "wakes up" and catches more light. No colour tint; stays pure
     crystal. */
  .nav__link:hover {
    color: var(--coral);
    letter-spacing: 0.02em;
    background:
      linear-gradient(180deg,
        rgba(255, 255, 255, 0.80) 0%,
        rgba(255, 255, 255, 0.3) 38%,
        rgba(255, 255, 255, 0.12) 58%),
      linear-gradient(115deg,
        rgba(255, 255, 255, 0) 28%,
        rgba(255, 255, 255, 0.38) 50%,
        rgba(255, 255, 255, 0) 72%),
      linear-gradient(0deg,
        rgba(255, 255, 255, 0.55) 0%,
        rgba(255, 255, 255, 0.12) 50%),
      radial-gradient(100% 120% at 50% 0%,
        rgba(255, 255, 255, 0.4) 0%,
        rgba(255, 255, 255, 0) 65%),
      linear-gradient(180deg,
        rgba(255, 255, 255, 0.65),
        rgba(255, 255, 255, 0.55));
    border-color: rgba(255, 255, 255, 0.82);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.95),
      inset 0 -1px 0 rgba(17, 20, 24, 0.14),
      inset 2px 0 4px -2px rgba(255, 255, 255, 0.65),
      inset -2px 0 4px -2px rgba(255, 255, 255, 0.65),
      0 14px 30px -6px rgba(17, 20, 24, 0.32);
  }

  /* Caret icon on dropdown parents */
  .nav__caret {
    display: inline-flex;
    align-items: center;
    margin-left: 2px;
    transition: transform .28s cubic-bezier(.22,1,.36,1);
    opacity: 0.6;
  }
  .nav__caret svg { width: 11px; height: 11px; }
  .nav__item--dropdown:hover .nav__caret,
  .nav__item--dropdown:focus-within .nav__caret {
    transform: rotate(180deg);
    opacity: 1;
  }

  /* Kill all base pseudo-element underlines - we use native text-decoration */
  .nav__link::after,
  .nav__link::before,
  .nav__link:hover::after,
  .nav__link.is-active::after { content: none !important; }

  /* ACTIVE STATE - native underline: always matches text width exactly,
     positioned just below the text by the browser's typography. */
  .nav__link.is-active {
    color: var(--coral);
    text-decoration: underline;
    text-decoration-color: var(--coral);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
  }

  /* ========= DROPDOWN ========= */
  /* Same liquid-glass texture as the main .nav__pill so the dropdown feels
     like part of the same surface. Translucent paper tint over a
     backdrop-blurred view of the page behind it. */
  .nav__dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    min-width: 220px;
    padding: 8px;
    background:
      radial-gradient(120% 140% at 20% 0%, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 55%),
      linear-gradient(180deg, rgba(247, 243, 232, 0.72) 0%, rgba(247, 243, 232, 0.58) 100%);
    /* EXTRA-strong blur (40px vs the pill's 28px) — the dropdown always
       covers page content (headlines, images, lists), so it needs heavier
       obscuration than the navbar pill to keep its menu items sharp.
       Brightness +8% lifts dark text behind so it can't punch through. */
    backdrop-filter: blur(40px) saturate(190%) brightness(1.08);
    -webkit-backdrop-filter: blur(40px) saturate(190%) brightness(1.08);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 18px;
    box-shadow:
      0 22px 48px -18px rgba(17, 20, 24, 0.38),
      0 8px 18px -4px rgba(17, 20, 24, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.8),
      inset 0 -1px 0 rgba(17, 20, 24, 0.06);
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity .22s var(--ease),
      transform .28s cubic-bezier(.22,1,.36,1),
      visibility 0s linear .22s;
    z-index: 51;
  }
  /* Fallback for browsers without backdrop-filter support */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .nav__dropdown { background: rgba(247, 243, 232, 0.95); }
  }
  /* Small invisible bridge between link and dropdown so hover doesn't drop */
  .nav__dropdown::before {
    content: "";
    position: absolute;
    top: -14px; left: 0; right: 0;
    height: 14px;
  }
  .nav__item--dropdown:hover .nav__dropdown,
  .nav__item--dropdown:focus-within .nav__dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition:
      opacity .22s var(--ease),
      transform .28s cubic-bezier(.22,1,.36,1),
      visibility 0s linear 0s;
  }

  /* Dropdown link — same per-item readability pattern as top-level nav
     links. Soft paper tint on each item so menu entries read clearly
     even if something bold is behind the dropdown. */
  .nav__dropdown-link {
    /* Same rich crystal-glass recipe as the top-level nav buttons — four
       highlight layers stacked on a solid-ish white base so each menu
       entry reads as its own luminous chip, not melting into the
       dropdown surface. */
    background:
      linear-gradient(180deg,
        rgba(255, 255, 255, 0.55) 0%,
        rgba(255, 255, 255, 0.18) 38%,
        rgba(255, 255, 255, 0.06) 58%),
      linear-gradient(115deg,
        rgba(255, 255, 255, 0) 32%,
        rgba(255, 255, 255, 0.22) 50%,
        rgba(255, 255, 255, 0) 68%),
      linear-gradient(0deg,
        rgba(255, 255, 255, 0.32) 0%,
        rgba(255, 255, 255, 0.06) 50%),
      linear-gradient(180deg,
        rgba(255, 255, 255, 0.42),
        rgba(255, 255, 255, 0.34));
    border: 1px solid rgba(255, 255, 255, 0.4);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.65),
      inset 0 -1px 0 rgba(17, 20, 24, 0.08),
      0 4px 10px -4px rgba(17, 20, 24, 0.15);
    display: flex;
    align-items: center;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    border-radius: 12px;
    white-space: nowrap;
    transition:
      background .22s var(--ease),
      color .22s var(--ease),
      border-color .22s var(--ease),
      box-shadow .22s var(--ease),
      padding-left .22s var(--ease);
  }
  .nav__dropdown-link:hover {
    color: var(--coral);
    padding-left: 18px;
    background:
      linear-gradient(180deg,
        rgba(255, 255, 255, 0.72) 0%,
        rgba(255, 255, 255, 0.28) 38%,
        rgba(255, 255, 255, 0.1) 58%),
      linear-gradient(115deg,
        rgba(255, 255, 255, 0) 28%,
        rgba(255, 255, 255, 0.32) 50%,
        rgba(255, 255, 255, 0) 72%),
      linear-gradient(0deg,
        rgba(255, 255, 255, 0.48) 0%,
        rgba(255, 255, 255, 0.1) 50%),
      linear-gradient(180deg,
        rgba(255, 255, 255, 0.58),
        rgba(255, 255, 255, 0.48));
    border-color: rgba(255, 255, 255, 0.65);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.85),
      inset 0 -1px 0 rgba(17, 20, 24, 0.1),
      0 8px 18px -4px rgba(17, 20, 24, 0.2);
  }
  .nav__dropdown-link::before,
  .nav__dropdown-link::after { content: none; }
  .nav__link.is-active { color: var(--coral); }
  .nav__link::before { content: none; }

  /* CTA - RIGHT zone, rounded green-style pill nested inside the main pill */
  .nav__cta {
    flex: 0 0 auto;
    margin: 0;
    padding: 14px 26px;
    font-size: 14px;
    letter-spacing: 0.02em;
    font-weight: 600;
    border-radius: 999px;
    background: var(--coral);
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
    box-shadow: 0 4px 14px rgba(227,99,41,0.35);
  }
  .nav__cta:hover {
    transform: translateY(-1px);
    background: var(--coral-deep);
    box-shadow: 0 10px 24px rgba(227,99,41,0.45);
    gap: 10px;  /* override base rule's 14px gap that widened the button */
    letter-spacing: 0.02em;
  }
  .nav__cta:hover svg { transform: none; }  /* lock the arrow in place */
  .nav__cta svg { width: 16px; height: 16px; }
  .nav__cta__dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,0.25); }

  /* Hero pages: let the nav float naturally - no extra body padding needed */
  body:has(.hero-bleed) { padding-top: 0; }

  /* Pages where the first section is a full-bleed colored hero
     (like about.html's yellow "Over 10 Years" or summer-camp.html's
     green sunburst). The section extends up behind the nav so the
     whole top strip fills with color. */
  /* Top-hero pages: body keeps its standard nav-clearance padding, but the
     first colored section uses negative margin to bleed up behind the nav,
     plus extra padding-top to push its CONTENT below the nav. */
  body.body--yellow-top .tagline-band--top-hero,
  body.body--green-top .event-section--top-hero,
  body.body--event-top .event-section--top-hero {
    margin-top: -158px !important;
    padding-top: calc(158px + var(--s-5, 48px)) !important;
    padding-bottom: var(--s-8, 100px) !important;
  }
}

/* Mobile/tablet fallback for top-hero pages — bleed the colored hero up
   behind the navbar so the cream gap between nav and hero disappears. */
@media (max-width: 959px) {
  body.body--yellow-top .tagline-band--top-hero,
  body.body--green-top .event-section--top-hero,
  body.body--event-top .event-section--top-hero {
    margin-top: -120px !important;
    padding-top: calc(120px + 24px) !important;
    padding-bottom: var(--s-8, 100px) !important;
  }
  /* Non-hero pages (gallery, blog, contact, legal, 404): the body already
     has padding-top for the fixed nav, so the first <section>'s own
     padding-top shouldn't be gigantic. Tighten it to remove the empty
     cream stripe between the nav pill and the first heading. */
  body:not(:has(.hero-bleed)):not(.body--yellow-top):not(.body--green-top):not(.body--event-top) main > section:first-child,
  body:not(:has(.hero-bleed)):not(.body--yellow-top):not(.body--green-top):not(.body--event-top) main > div:first-child,
  body:not(:has(.hero-bleed)):not(.body--yellow-top):not(.body--green-top):not(.body--event-top) main > header:first-child {
    padding-top: 14px !important;
  }
}
@media (max-width: 480px) {
  body.body--yellow-top .tagline-band--top-hero,
  body.body--green-top .event-section--top-hero,
  body.body--event-top .event-section--top-hero {
    margin-top: -100px !important;
    padding-top: calc(100px + 24px) !important;
  }
}

/* Magnetic-ish hover on buttons and cards (works everywhere) */
.btn-pill,
.event-cta,
.nav__cta,
.pricing-card__brochure,
.event-section__brochure {
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s cubic-bezier(.22,1,.36,1), background .25s ease, color .25s ease;
}
.program,
.event-card,
.pricing-card,
.masonry__item,
.contact-card,
.kpi-card {
  transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .35s cubic-bezier(.22,1,.36,1);
}

/* ==========================================================================
   MOBILE OVERHAUL - comprehensive responsive fixes (≤600px and ≤380px)
   Fix: hero overflow, section heading sizing, grid collapse, nav height,
        floating FAB overlap, cookie banner sizing, overflow-x prevention.
   ========================================================================== */
@media (max-width: 600px) {
  /* Prevent horizontal overflow anywhere */
  html, body { overflow-x: hidden; max-width: 100vw; }

  /* --- NAV + LOGO: compact vertical footprint. Logo size is IDENTICAL
     across scroll states so there's no layout shift glitch when the
     is-scrolled class toggles. */
  .nav__brand { height: 100px; }
  .nav__brand img,
  .nav.is-scrolled .nav__brand img { height: 100px; width: 100px; margin: 0; }

  /* --- Mobile: keep nav pinned to viewport top on scroll (fixed) --- */
  .nav {
    position: fixed !important;
    top: 0 !important;  /* marquee removed — nav sits at the very top */
    left: 0; right: 0;
    width: 100%;
    z-index: 50;
  }
  .top-marquee {
    position: fixed !important;
    top: 0 !important;
    left: 0; right: 0;
    width: 100%;
    z-index: 51;
  }
  /* Add body padding so content isn't hidden behind the fixed nav.
     Marquee removed — only the nav pill needs clearance now. */
  body { padding-top: 120px; }
  body.nav-scrolled { padding-top: 100px; }
  .nav__inner { padding: 0 14px; gap: 8px; }
  html { scroll-padding-top: 96px; }

  /* Top marquee: much thinner on mobile — tighter padding, compact gaps,
     smaller icons/text. Keeps the bar functional without taking screen real estate. */
  .top-marquee { padding: 3px 0; }
  .top-marquee__track { font-size: 10.5px; gap: 14px; }
  .top-marquee__item { padding: 0; }
  .top-marquee__icon { width: 16px; height: 16px; }
  .top-marquee__icon svg { width: 9px; height: 9px; }
  .top-marquee .pill { font-size: 9px; padding: 2px 7px; }
  .top-marquee .dot { width: 4px; height: 4px; margin-right: 4px; }
  .top-marquee + .nav { top: 32px; }

  /* Hamburger button size */
  .nav__hamburger { width: 44px; height: 44px; }

  /* --- HERO — big bold headline, centered, with a textured shadow so it
     reads strongly over the photo background. On mobile the inner
     content rises higher from the bottom (~32% up) so it doesn't hug
     the dots pagination, and the script word gets its own real scale. */
  .hero-bleed__inner {
    padding: var(--s-5) 18px calc(var(--s-8) + 24px);
    align-items: center;        /* horizontally center the stacked content */
    text-align: center;
    gap: 18px;
    bottom: 0;
  }
  .hero-bleed__title {
    font-size: clamp(2.6rem, 13vw, 4.4rem);
    line-height: 1.04;
    font-weight: 400;
    letter-spacing: -0.015em;
    word-break: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
    max-width: 100%;
    align-self: stretch;
    width: 100%;
    text-align: center;
    /* Dual shadow: a soft halo for legibility + a bit of depth */
    text-shadow:
      0 2px 0 rgba(17, 20, 24, 0.25),
      0 10px 30px rgba(17, 20, 24, 0.35);
  }
  .hero-bleed__title-script {
    /* inline-block so the span hugs its text — the JS typewriter caret
       (border-right) then sits right next to the last typed character
       instead of floating at the right edge of the container. */
    display: inline-block;
    font-size: 0.88em;
    line-height: 1.15;
    max-width: 100%;
    width: auto;
    margin: 8px auto 0;
    text-align: center;
    letter-spacing: 0;
    /* Slight glow so the sun-colored cursive reads on light photos too */
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  }
  .hero-bleed__annotation { display: none; }  /* Too cramped at <600px */
  .hero-bleed__card { display: none; }
  .hero-bleed__card-label { display: none; }
  /* Make the CTA feel tied to the headline, not an afterthought */
  .hero-bleed__inner .btn-pill,
  .hero-bleed__inner .btn-pill--glow {
    align-self: center;
    margin-top: 6px;
    padding: 16px 28px;
    font-size: 15px;
  }

  /* --- SECTION HEADINGS: keep inside viewport --- */
  .chunky,
  .section-title,
  .events-page-hero__title,
  .legal-hero__title,
  .page-404__title,
  .tagline-band__inner,
  .stats-row,
  h1.chunky, h2.chunky {
    font-size: clamp(1.75rem, 8vw, 2.75rem);
    line-height: 1.05;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .tagline-band__inner { font-size: clamp(1.75rem, 9vw, 3rem); }

  /* Over 10 years block */
  .stats-block__headline { font-size: clamp(2rem, 9vw, 3.2rem); line-height: 1.05; }

  /* --- VALUE RIBBON STATS: 2-col grid on mobile (reads as a 2×2 poster). --- */
  .value-ribbon__inner { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .value-ribbon__item {
    padding: 16px 14px 14px;
    gap: 8px;
  }
  .value-ribbon__num { font-size: clamp(1.6rem, 7vw, 2.2rem); padding-bottom: 8px; }
  .value-ribbon__text { font-size: 11px; letter-spacing: 0.06em; line-height: 1.3; }
  .value-ribbon__icon { width: 40px; height: 40px; border-radius: 11px; }
  .value-ribbon__icon svg { width: 20px; height: 20px; }

  /* --- AGE GROUPS: always 2-col for symmetry, no orphan cells --- */
  .age-groups__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }

  /* --- FEATURE GRID: 2-col at mobile, keep items full-width friendly --- */
  .feature-grid,
  .feature-grid--balanced {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  /* --- STATS ROWS (about page) - prevent blank cells --- */
  .stats-block__group--experience .stats-row {
    grid-template-columns: repeat(3, 1fr);  /* 3 items: keep 3-col compact */
  }
  .stats-block__group--experience .stat-cell {
    padding: 18px 8px;
  }
  .stats-block__group--space .stats-row {
    grid-template-columns: repeat(2, 1fr);  /* 4 items: 2x2 */
  }
  /* Stat numbers (like "10 000") must stay on a single line; scale down to fit */
  .stat-cell__num {
    font-size: clamp(1.75rem, 7vw, 2.4rem);
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
    justify-content: center;
  }
  .stat-cell { padding: 18px 10px; }

  /* --- AGE GROUPS last-item spans full row width when orphaned --- */
  .age-groups__grid .age-group:last-child:nth-child(odd),
  .age-track .age-pill:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  /* --- KPI GRID (stats at bottom of page) --- */
  .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .kpi-card { padding: 32px 14px 18px; }

  /* --- CONTAINER PADDING --- */
  .container, .container-narrow { padding: 0 16px; }
  .section { padding: var(--s-6) 0; }

  /* --- FLOATING FABS: compact, smaller, clearer spacing --- */
  .whatsapp-fab {
    width: 50px; height: 50px;
    bottom: 14px; right: 14px;
  }
  .whatsapp-fab svg { width: 24px; height: 24px; }
  .whatsapp-fab::before { display: none; }  /* Hide hover tooltip on touch */

  .scroll-top {
    width: 42px; height: 42px;
    bottom: 14px; left: 14px;
  }
  .scroll-top svg { width: 18px; height: 18px; }
  .scroll-top::before { display: none; }

  /* When cookie banner visible, lift FABs above it (JS-driven class + CSS :has fallback) */
  body.has-cookie-banner .whatsapp-fab,
  body.has-cookie-banner .scroll-top,
  body:has(.cookie-banner.is-visible) .whatsapp-fab,
  body:has(.cookie-banner.is-visible) .scroll-top {
    bottom: 80px;
  }

  /* Footer uses its default padding; FABs auto-hide near page bottom (see JS) */
  body.near-footer .whatsapp-fab,
  body.near-footer .scroll-top {
    opacity: 0;
    transform: translateY(20px) scale(0.85);
    pointer-events: none;
  }

  /* --- COOKIE BANNER --- */
  .cookie-banner { max-width: calc(100vw - 24px); font-size: 13px; }

  /* --- BROCHURE COLUMNS: stack cleanly --- */
  .brochure-grid { grid-template-columns: 1fr; gap: 14px; }

  /* --- HOMEPAGE MASONRY PREVIEW: show only first 6 photos on mobile (less scroll).
     Gallery page uses plain .masonry without the --preview modifier, so it shows all. */
  .masonry--preview .masonry__item:nth-child(n+7) { display: none; }

  /* --- FOOTER: compact, symmetric layout on mobile --- */
  .footer { padding-top: var(--s-6); padding-bottom: var(--s-5); text-align: center; }
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-5) 16px;
    justify-items: center;
  }

  /* Brand: centered at top, spans full width */
  .footer__brand {
    grid-column: 1 / -1;
    max-width: 100%;
    gap: 8px;
    align-items: center;
    text-align: center;
  }
  .footer__brand-logo { flex-direction: column; align-items: center; gap: 12px; }
  .footer__brand-logo img { height: 140px; width: 140px; }
  .footer__brand-logo > div { text-align: center; }
  .footer__brand-logo h4 { font-size: 28px; }
  .footer__brand-logo small { letter-spacing: 0.18em; font-size: 12px; }
  .footer__brand-tagline { font-size: 26px; margin-top: 4px; }
  /* Keep the "where it all begins ✦" Caveat script tagline; hide only long description */
  .footer__brand > p:not(.footer__brand-tagline) { display: none; }

  /* Keep the "Explore" column visible on mobile — user-requested blog link
     and site-wide nav list must be globally present in the footer. The
     drawer is fine but the footer is the canonical sitemap. */

  /* Programs + Get in touch: symmetric 2-col with ALIGNED ROWS --- */
  .footer__grid > .footer__col { text-align: center; width: 100%; }
  .footer__col h5 { display: inline-block; font-size: 14px; margin-bottom: 14px; }
  .footer__col h5::after { left: 50%; transform: translateX(-50%); }

  /* Both lists share identical row rhythm so items line up horizontally */
  .footer__col > ul,
  .footer__contact-list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    gap: 14px;
    list-style: none;
  }
  .footer__col > ul > li,
  .footer__contact-list > li {
    margin: 0;
    min-height: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
  }
  .footer__contact-list svg {
    margin: 0;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }
  .footer__contact-list a { font-size: 13px; border-bottom: 0; }
  /* Address row: allow wrapping to 2 lines; icon stays centered vertically */
  .footer__contact-list li:nth-child(4) { white-space: normal; align-items: center; }
  .footer__contact-list li:nth-child(4) a {
    font-size: 12px;
    white-space: normal;
    text-align: left;
    line-height: 1.35;
  }
  /* Shorter Programs font so Summer Camp fits one line in narrow mobile column */
  .footer__col > ul > li > a { font-size: 13px; }

  /* Bottom row: centered, stacked symmetrically */
  .footer__bottom {
    padding-top: var(--s-4);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
  }
  .footer__bottom > span:first-child { font-size: 11px; }
  .footer__bottom-tagline { font-size: 18px; }
  .footer__socials { justify-content: center; }
  .footer__socials a { width: 40px; height: 40px; }
  /* KARIN'S watermark: subtle, aesthetic, positioned behind the socials row */
  .footer__watermark {
    font-size: 42vw !important;
    left: 50% !important;
    bottom: -4% !important;
    transform: translateX(-50%) !important;
    letter-spacing: 0.005em !important;
    color: rgba(248,241,228,0.035) !important;
    background: linear-gradient(to bottom,
      rgba(248,241,228,0.08) 0%,
      rgba(248,241,228,0.03) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
  }
  .footer { position: relative; overflow: hidden; }
  /* WHERE IT ALL BEGINS tagline band - bigger on mobile (sits above footer) */
  .tagline-band__inner { font-size: clamp(2.4rem, 13vw, 4rem) !important; }
  .tagline-band { padding: var(--s-8) var(--s-4) !important; }

  /* --- EVENT DIVIDERS: reduce vertical space on mobile --- */
  .event-divider { padding: 28px 0; }

  /* --- FORMS: inputs 16px to prevent iOS auto-zoom --- */
  input, select, textarea { font-size: 16px !important; }

  /* Programs column stack (horizontal scroll disabled on mobile above) */

  /* Activities marquee on mobile — slow enough to read each inflatable
     (7s was too fast and looked chaotic). 32s ≈ smooth glide. */
  .belt__track { animation-duration: 32s !important; }

  /* --- Btn-pill: compact, full-width feel on narrow --- */
  .btn-pill { padding: 14px 22px; font-size: 14px; }
}

/* Ultra-narrow iPhone SE (≤380px) */
@media (max-width: 380px) {
  .hero-bleed__title { font-size: clamp(2rem, 10vw, 2.8rem); }
  .nav__brand img { height: 100px; width: 100px; }
  .nav__brand { height: 100px; }
  .top-marquee__track { font-size: 10px; gap: 22px; }
  .chunky, .section-title, .events-page-hero__title,
  .legal-hero__title, .tagline-band__inner {
    font-size: clamp(1.55rem, 7.4vw, 2.3rem);
  }
  .container, .container-narrow { padding: 0 12px; }
  .whatsapp-fab { width: 46px; height: 46px; }
  .scroll-top { width: 38px; height: 38px; }
}

/* ==========================================================================
   PRINT STYLES - clean paper output for legal / contact pages
   ========================================================================== */
@media print {
  body { background: #fff; color: #000; animation: none; }
  body::before { display: none; }
  .top-marquee, .nav, .footer, .whatsapp-fab, .scroll-top, .scroll-progress,
  .hero-bleed__nav, .hero-bleed__dots, .legal-toc, .page-404__decor,
  .testimonials { display: none !important; }
  .container { max-width: 100% !important; padding: 0 !important; }
  section { padding: 20pt 0 !important; page-break-inside: avoid; }
  h1, h2, h3 { color: #000 !important; text-shadow: none !important; }
  a { color: #000 !important; text-decoration: underline; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #555; }
  a[href^="#"]::after, a[href^="javascript:"]::after { content: ""; }
  img { max-width: 100% !important; page-break-inside: avoid; box-shadow: none !important; }
  .legal-prose h2 { border-top: 1px solid #000 !important; page-break-after: avoid; }
  .legal-prose table { page-break-inside: avoid; box-shadow: none !important; }
  .callout { background: #f5f5f5 !important; border-left: 2px solid #000 !important; }
  .hero-bleed::after { display: none !important; }
  .age-pill, .kpi-card, .pricing-card, .timeline__step, .program {
    box-shadow: none !important;
    transform: none !important;
    border: 1px solid #ccc !important;
    break-inside: avoid;
  }
}

/* ==========================================================================
   MOBILE PILL NAV — same liquid-glass aesthetic as the desktop pill,
   scaled down so just the logo + hamburger fit in one compact capsule.
   All styles scoped to the mobile breakpoints so desktop stays untouched.
   ========================================================================== */
@media (max-width: 959px) {
  /* The .nav__inner becomes the visible pill frame. It holds .nav__pill
     (which just wraps the brand on mobile) and .nav__hamburger as siblings. */
  .nav__inner {
    margin: 10px 14px 0;
    padding: 6px 8px 6px 10px;
    gap: 8px;
    border-radius: 999px;
    position: relative;
    /* Exact same layered-tint / highlight recipe as the desktop pill. */
    background:
      radial-gradient(130% 160% at 15% 0%,
        rgba(255, 255, 255, calc(0.35 + 0.22 * var(--nav-opaque, 0))) 0%,
        rgba(255, 255, 255, 0) 55%),
      linear-gradient(180deg,
        rgba(247, 243, 232, calc(0.22 + 0.48 * var(--nav-opaque, 0))) 0%,
        rgba(247, 243, 232, calc(0.16 + 0.42 * var(--nav-opaque, 0))) 100%);
    backdrop-filter: blur(20px) saturate(180%) brightness(1.05);
    -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(1.05);
    border: 1px solid rgba(255, 255, 255, calc(0.28 + 0.22 * var(--nav-opaque, 0)));
    box-shadow:
      0 calc(12px + 8px * var(--nav-opaque, 0))
        calc(28px + 12px * var(--nav-opaque, 0))
        -16px rgba(17, 20, 24, calc(0.2 + 0.12 * var(--nav-opaque, 0))),
      inset 0 1px 0 rgba(255, 255, 255, calc(0.55 + 0.2 * var(--nav-opaque, 0))),
      inset 0 -1px 0 rgba(17, 20, 24, 0.06);
    transform: translateZ(0);
    will-change: background, box-shadow;
    transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
  }

  /* The pill container on mobile is now just a positioning wrapper for the
     brand logo — it loses all of its own chrome (no background / border /
     backdrop-filter, no ::before specular). The .nav__inner carries the
     glass look instead. */
  .nav__pill {
    padding: 0;
    background: none !important;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: none;
    flex: 0 0 auto;
    min-width: 0;
    width: auto;
  }
  .nav__pill::before,
  .nav__pill::after { display: none !important; }

  /* Oversized logo: bigger than the pill height so it spills slightly above
     and below the pill's top/bottom edges — gives the brand prominence
     without enlarging the navbar itself. overflow:visible on .nav__inner
     and .nav__pill allow the spill. The brand link itself stays at 40px
     (matching the pill interior) but the img has negative vertical margins
     so it doesn't push the flex row taller. */
  .nav__brand {
    height: 50px;
    padding: 0;
    margin-left: -14px;  /* push the logo left, letting it overflow the pill's left edge slightly */
    display: flex;
    align-items: center;
    overflow: visible;
  }
  .nav__brand img,
  .nav.is-scrolled .nav__brand img {
    height: 88px;
    width: 88px;
    margin: -19px 0;  /* overflow top/bottom without adding to the pill height */
    max-width: none;
    filter: drop-shadow(0 8px 18px rgba(17, 20, 24, 0.32));
  }

  /* Hamburger — circular button that lives inside the pill on the right. */
  .nav__hamburger {
    width: 42px;
    height: 42px;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
    background: transparent;
    border-radius: 999px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: background 0.25s var(--ease);
  }
  .nav__hamburger:hover,
  .nav__hamburger:active { background: rgba(17, 20, 24, 0.08); }
  .nav__hamburger span {
    width: 20px;
    height: 2.2px;
    background: var(--ink);
    border-radius: 2px;
  }
  .nav__hamburger span:nth-child(2) { width: 14px; margin-left: 6px; }
  .nav__hamburger:hover span:nth-child(2) { width: 20px; margin-left: 0; }

  /* Body offset matches the desktop pattern:
     - Pages WITH a full-bleed hero (.hero-bleed) let the hero fill to the
       very top of the viewport; the glassy nav floats over it. No padding.
     - Pages WITHOUT a hero-bleed need enough top padding so content
       starts below the fixed marquee + nav pill. */
  body { padding-top: 0; }
  body:not(:has(.hero-bleed)) { padding-top: 108px; }
  body:has(.top-marquee):not(:has(.hero-bleed)) { padding-top: 108px; }
  .nav__mobile { inset: 108px 0 0 0; }
}

/* Phone-tight: reclaim every pixel we can on narrow screens. */
@media (max-width: 480px) {
  .nav__inner { margin: 8px 10px 0; padding: 5px 7px 5px 9px; gap: 6px; }
  .nav__brand img,
  .nav.is-scrolled .nav__brand img { height: 82px; width: 82px; margin: -16px 0; }
  .nav__hamburger { width: 40px; height: 40px; }
  .nav__hamburger span { width: 18px; }
  .nav__hamburger span:nth-child(2) { width: 13px; }
  body:not(:has(.hero-bleed)) { padding-top: 100px; }
  body:has(.top-marquee):not(:has(.hero-bleed)) { padding-top: 100px; }
  .nav__mobile { inset: 100px 0 0 0; }
}

/* ==========================================================================
   MOBILE DRAWER v2 — glass-pill aesthetic matching the nav.
   Each nav item is its own translucent glass pill, mirroring the
   pill navbar. Items gain a sun-yellow fill on tap (mirroring the
   primary "SEE THE EVENTS" CTA). Numbers become stamp-style badges.
   Social icons unified in one glass pill at the bottom.
   ========================================================================== */
@media (max-width: 959px) {
  /* --- Drawer surface: fully transparent — no background, no blur.
     Pills float directly over the page content behind. --- */
  .nav__mobile {
    padding: 20px 14px 24px !important;
    gap: 9px !important;
    max-height: calc(100vh - 108px);
    -webkit-overflow-scrolling: touch;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-top: 0;
    box-shadow: none;
  }

  /* --- Each nav row becomes a glass pill card mirroring the nav pill --- */
  .nav__mobile a:not(.nav__mobile-social) {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 18px 14px 20px !important;
    font-family: "Anton", "Bebas Neue", sans-serif !important;
    font-size: clamp(1.4rem, 5.2vw, 1.8rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.01em !important;
    color: var(--ink) !important;
    border-radius: 16px !important;
    border: 1px solid rgba(17, 20, 24, 0.08) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(247, 243, 232, 0.92) 100%) !important;
    backdrop-filter: blur(10px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(140%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.8),
      0 4px 12px -4px rgba(17, 20, 24, 0.15) !important;
    transition:
      transform .25s var(--ease),
      background .25s var(--ease),
      box-shadow .3s var(--ease),
      color .25s var(--ease),
      border-color .25s var(--ease) !important;
    position: relative !important;
    overflow: hidden !important;
  }

  /* Kill the old left-dash indicator */
  .nav__mobile a:not(.nav__mobile-social)::before {
    display: none !important;
  }

  /* Hover / tap: Sun-yellow CTA treatment — mirrors "SEE THE EVENTS" */
  .nav__mobile a:not(.nav__mobile-social):hover,
  .nav__mobile a:not(.nav__mobile-social):active,
  .nav__mobile a:not(.nav__mobile-social):focus-visible {
    transform: translateX(4px) !important;
    background:
      linear-gradient(180deg, rgba(251, 200, 0, 0.9) 0%, rgba(251, 200, 0, 0.65) 100%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.8),
      0 10px 24px -8px rgba(251, 200, 0, 0.55) !important;
    color: var(--ink) !important;
    border-color: rgba(251, 200, 0, 0.5) !important;
  }

  /* Number badge: stamp-style pill, not plain text */
  .nav__mobile a span {
    font-family: "DM Sans", sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    color: var(--ink-3) !important;
    background: rgba(17, 20, 24, 0.05) !important;
    padding: 5px 9px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(17, 20, 24, 0.06) !important;
    min-width: 30px;
    text-align: center;
    transition: all .25s var(--ease);
  }
  .nav__mobile a:hover span,
  .nav__mobile a:active span,
  .nav__mobile a:focus-visible span {
    background: rgba(17, 20, 24, 0.14) !important;
    color: var(--ink) !important;
    border-color: rgba(17, 20, 24, 0.18) !important;
  }

  /* --- Social icons: unified glass pill container at drawer bottom --- */
  .nav__mobile-socials {
    margin-top: 14px !important;
    padding: 10px 16px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(247, 243, 232, 0.92) 100%) !important;
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    border: 1px solid rgba(17, 20, 24, 0.08);
    border-radius: 999px;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.8),
      0 4px 12px -4px rgba(17, 20, 24, 0.15);
    gap: 14px !important;
  }

  /* Smaller social circles inside the unified pill */
  .nav__mobile a.nav__mobile-social {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 auto;
  }
  .nav__mobile a.nav__mobile-social svg {
    width: 18px !important;
    height: 18px !important;
  }
  .nav__mobile a.nav__mobile-social:hover {
    transform: translateY(-2px) scale(1.06) !important;
  }
}

/* ==========================================================================
   MOBILE TYPOGRAPHY — Romanian-diacritic-safe leading for every Anton
   display heading. Ă/Î accents above and Ț/Ș cedillas below overlap
   adjacent lines at tight leading; 1.18 minimum fixes it everywhere.
   ========================================================================== */
@media (max-width: 720px) {
  .chunky,
  .hero-bleed__title,
  .events-page-hero__title,
  .event-section__title,
  .blog-hero__title,
  .post-header__title,
  .karinti-block__title,
  .announce-slide__title,
  .bonus-activity__title,
  .cocktail-addon__title,
  .theme-choice__title,
  .extras-note__title,
  .parents-zone__title,
  .karinti-finale__title,
  .s-head h2,
  .age-groups__title,
  .section__title,
  .footer__col h5 {
    line-height: 1.18;
  }
  /* Tighter section padding on mobile — desktop rhythm is too generous
     for a phone viewport. */
  .section { padding: clamp(36px, 8vw, 56px) 0; }
  .container { padding-left: 16px; padding-right: 16px; }

  /* Body copy: constrain line-length so paragraphs don't stretch full
     viewport width (harder to read on a phone). */
  p { max-width: 58ch; }
  p:not([style]) { margin-left: auto; margin-right: auto; }
}

/* ==========================================================================
   MOBILE GRID STACKING — collapse multi-column grids into single column on
   phones (≤520 px) for legibility + tap-target reach.
   ========================================================================== */
@media (max-width: 520px) {
  .events-cards-grid,
  .event-cards-grid,
  .bonus-activity__grid,
  .karinti-grid,
  .features,
  .feature-grid,
  .pricing-ticket__dual,
  .program-cards,
  .programs {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  /* Photo masonry stays 2-up on phones — reads as a real gallery rather
     than a stack of full-width photos. */
  .masonry {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  /* Parents Zone keeps 2 cols on phone — they're small chip cards, 1 col
     would feel wasteful. */
  .parents-zone__grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Event-photos grid: 2 cols looks better than 3 on phones. */
  .event-photos { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ==========================================================================
   MOBILE CARDS — general polish: inner padding, font sizes, button widths.
   ========================================================================== */
@media (max-width: 520px) {
  .pricing-ticket,
  .pricing-card,
  .event-section__header {
    padding-left: 18px;
    padding-right: 18px;
  }
  /* Both tickets in a dual-pricing block render identically — no width
     drift from auto-sizing to content. */
  .pricing-ticket__dual > .pricing-ticket {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
  }
  /* CTAs become full-width on phones so they're easy to tap. */
  .event-section__brochure,
  .pricing-ticket__cta,
  .btn-pill,
  .pricing-card__cta {
    width: 100%;
    max-width: 100%;
    justify-content: center;
  }
  /* ...unless the page explicitly opted into a pair (cta-row = two side by side) */
  .event-section__cta-row { flex-direction: column; gap: 10px; }
  .event-section__cta-row .event-section__brochure { width: 100%; }
}

/* ==========================================================================
   MOBILE MARQUEE STABILITY — solid backgrounds, slower speed, GPU-friendly
   composite, and stops paint-competition with rotating sunburst pseudos
   above. Targets the inflatables belt + sponsors marquee. Fixes:
     • "rays look bad on phone" → kill the conic ::before that reads as
       harsh vertical stripes on narrow viewports; use a single solid
       color matching the section above.
     • "scrolls way too fast" → 7s → 32s so per-frame movement is small
       enough for iOS Safari to render smoothly.
     • "glitches" → contain repaint, force composite at frame 0, drop
       lazy-load shifts by reserving aspect-ratio space, and pause the
       big rotating sunburst pseudo on phones (it competes for GPU).
   ========================================================================== */
@media (max-width: 720px) {
  /* --- BELT (inflatables) --- */
  /* Kill the heavy conic-gradient ::before on themed pages — on a narrow
     viewport it renders as visible vertical stripes, not radiating rays. */
  body.body--green-top .belt::before,
  body.body--event-top .belt::before { display: none !important; }

  /* Solid backgrounds, no image gradients on phones — clean & continuous
     with the section above. */
  body.body--green-top .belt {
    background: var(--moss) !important;
    background-image: none !important;
  }
  body.body--event-top .belt {
    background: var(--sky) !important;
    background-image: none !important;
  }
  body.body--event-top:has(.event-section--sleep) .belt {
    background: var(--night) !important;
    background-image: none !important;
  }
  /* Plain belt (events.html, no body class) — match the page rhythm with
     a clean paper background, no radial gradient noise. */
  .belt {
    background: var(--moss) !important;
    background-image: none !important;
    border-top: 0;
    border-bottom: 0;
    /* Scope all paint inside the belt so the rotating sunburst on the
       section ABOVE doesn't trigger repaints inside this strip. */
    contain: layout paint;
  }

  /* Smaller, snappier on phones */
  .belt { padding: var(--s-4) 0; }
  .belt__item img { height: 130px; }
  .belt__item { margin-right: var(--s-5); }

  /* Force a stable, isolated composite layer for the scrolling track
     so iOS Safari doesn't drop frames when the long track is partly
     off-screen, and so the half-translate doesn't seam. */
  .belt__track {
    transform: translate3d(0, 0, 0);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  /* On themed pages, freeze the rotating sunburst pseudo on mobile. It's
     a 200vmax×200vmax conic-gradient layer rotating every 90s — on phones
     that's a huge memory pull that competes with the marquee animation. */
  .sunburst::before {
    animation: none !important;
  }

  /* --- SPONSORS MARQUEE --- */
  .sponsors-marquee__track {
    animation-duration: 60s !important;
    transform: translate3d(0, 0, 0);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
  .sponsors-marquee {
    contain: layout paint;
  }
}

/* ==========================================================================
   MOBILE FLOATING UI — respect safe-area, avoid overlap.
   ========================================================================== */
.whatsapp-fab,
.scroll-top {
  bottom: max(16px, env(safe-area-inset-bottom, 16px));
}
@media (max-width: 520px) {
  .whatsapp-fab { right: 14px; width: 54px; height: 54px; }
  .scroll-top { left: 14px; width: 42px; height: 42px; }
}

/* ==========================================================================
   MOBILE FOOTER — compact 2-column layout so it fits in ~one scroll instead
   of three. Brand spans both columns; Explore + Programs + Get in Touch
   stack as 2×2 with the third column wrapping centered underneath.
   ========================================================================== */
@media (max-width: 720px) {
  .footer {
    padding-top: 36px !important;
    /* Extra bottom space so the KARIN'S watermark and the legal row
       (Termeni + Cookies) clear the fixed WhatsApp FAB and scroll-top button. */
    padding-bottom: 96px !important;
  }

  .footer__grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px 18px !important;
    text-align: center;
    justify-items: center;
    align-items: start;
  }

  /* Brand sits centered at top, across both columns. Compact logo, no long copy. */
  .footer__brand {
    grid-column: 1 / -1 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px !important;
    max-width: 100%;
    margin-bottom: 4px;
  }
  .footer__brand-logo { flex-direction: column; align-items: center; gap: 8px !important; }
  .footer__brand-logo img { height: 88px !important; width: 88px !important; }
  .footer__brand-logo h4 { font-size: 22px !important; margin: 0; }
  .footer__brand-logo small { font-size: 11px !important; letter-spacing: 0.16em; }
  .footer__brand-tagline { font-size: 20px !important; margin: 0 !important; }

  /* Each column: compact column — heading 12px, list items stacked tight */
  .footer__grid > .footer__col {
    text-align: center;
    width: 100%;
    max-width: 170px;
  }
  .footer__col h5 {
    font-size: 12px !important;
    letter-spacing: 0.14em;
    margin-bottom: 10px !important;
  }
  .footer__col > ul,
  .footer__contact-list {
    display: flex;
    flex-direction: column;
    gap: 8px !important;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .footer__col > ul > li,
  .footer__contact-list > li {
    margin: 0;
    min-height: 0;
    font-size: 13px;
    line-height: 1.25;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  .footer__col > ul > li > a,
  .footer__contact-list a {
    font-size: 13px;
    border-bottom: 0;
  }
  .footer__contact-list svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
  }

  /* Mobile footer layout: Explore (left) | Programs (right). Get in Touch
     is hidden on mobile — the address/phone already live in the top marquee
     + drawer + CONTACT page link, so this column is redundant on phones. */
  .footer__grid > .footer__col:nth-of-type(2) {  /* Explore */
    grid-column: 1;
    grid-row: 2;
  }
  .footer__grid > .footer__col:nth-of-type(3) {  /* Programs */
    grid-column: 2;
    grid-row: 2;
  }
  .footer__grid > .footer__col:last-child {  /* Get in Touch — hide on mobile */
    display: none;
  }
  .footer__grid > .footer__col:last-child .footer__contact-list li:last-child {
    flex-direction: row;
    align-items: flex-start;
    white-space: normal;
    text-align: left;
  }

  /* Bottom legal row: compact centered stack */
  .footer__bottom {
    flex-direction: column;
    gap: 10px;
    text-align: center;
    margin-top: 20px;
    padding-top: 14px;
  }
  .footer__socials { gap: 12px; }
  .footer__socials a {
    min-width: 36px;
    min-height: 36px;
    display: grid;
    place-items: center;
  }
  .footer__legal-links {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px 12px;
    justify-content: center;
    font-size: 11px;
  }
  .footer__watermark {
    font-size: 22vw !important;
    /* On mobile, sit flush at the footer bottom (instead of hanging -18% off)
       so the full KARIN'S word is readable inside the scroll viewport. */
    bottom: 8px !important;
  }
}

/* ==========================================================================
   MOBILE ANNOUNCEMENTS SLIDESHOW — arrows inside the viewport as glass
   overlays (already had a max-width:720px branch — ensure it's applied).
   ========================================================================== */
@media (max-width: 720px) {
  .announce { margin: var(--s-4) 14px var(--s-5); }
  .announce__heading { font-size: clamp(1.4rem, 5vw, 1.8rem); }
}

/* ==========================================================================
   MOBILE EXTRAS-NOTE — stack reason tiles, keep icon + title row tight.
   ========================================================================== */
@media (max-width: 520px) {
  .extras-note__reasons { grid-template-columns: 1fr; }
  .extras-note__head { flex-direction: row; gap: 12px; }
  .extras-note__icon { width: 44px; height: 44px; }
  .extras-note__icon svg { width: 20px; height: 20px; }
}

/* ==========================================================================
   MOBILE COCKTAIL-ADDON — ensure stacked layout has breathing room.
   ========================================================================== */
@media (max-width: 720px) {
  .cocktail-addon { margin: var(--s-6) 14px 0; padding: 26px 22px; }
  .cocktail-addon__layout { gap: 18px; }
  .cocktail-addon__price { width: 100%; justify-content: center; }
}

/* ==========================================================================
   MOBILE THEME-CHOICE — chip grid wraps tighter
   ========================================================================== */
@media (max-width: 480px) {
  .theme-choice { margin: var(--s-6) 14px 0; padding: 32px 22px; }
  .theme-choice__chips { gap: 8px; }
  .theme-chip { padding: 8px 14px 8px 12px; font-size: 0.9rem; }
}

/* ==========================================================================
   MOBILE FORM INPUTS — iOS zooms any focused input under 16px font-size,
   which jumps the layout. Force 16px on phones across every text input
   on the public site so focus never zooms. Desktop unchanged.
   ========================================================================== */
@media (max-width: 720px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="url"],
  input[type="number"],
  input[type="tel"],
  input[type="search"],
  input[type="date"],
  select,
  textarea { font-size: 16px; }
}

/* ==========================================================================
   MOBILE MARQUEE — keep readable but compact.
   ========================================================================== */
@media (max-width: 520px) {
  .top-marquee { padding: 3px 0; }
  .top-marquee__track { font-size: 10.5px; gap: 14px; }
  .top-marquee__item--logo { font-size: 11px; }
  .top-marquee__item .pill { font-size: 9px; padding: 1px 6px; }
  .top-marquee__icon { width: 18px; height: 18px; }
  .top-marquee__icon svg { width: 10px; height: 10px; }
  /* Marquee icon links must NOT inherit the 36px tap-target floor from
     the mobile guards — they stay compact inside the thin bar. */
  .top-marquee a.top-marquee__item--icon {
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
  }
}

/* ==========================================================================
   MOBILE TAGLINE-BAND ("Where it all begins") — tighter on phones.
   ========================================================================== */
@media (max-width: 520px) {
  .tagline-band {
    padding: clamp(40px, 10vw, 70px) 20px;
  }
  .tagline-band__inner {
    font-size: clamp(2rem, 11vw, 3.4rem) !important;
    line-height: 1.05;
  }
}

/* ==========================================================================
   MOBILE EVENT CARDS — proper aspect + full-width on phones.
   ========================================================================== */
@media (max-width: 520px) {
  .event-card {
    aspect-ratio: 4 / 5;
    min-height: 0;
  }
  .event-card__name { font-size: clamp(1.8rem, 8vw, 2.6rem); }
  .event-card__body { padding: 20px 18px; }
}

/* ==========================================================================
   MOBILE BLOG CARDS — single column, slightly shorter aspect.
   ========================================================================== */
@media (max-width: 520px) {
  .blog-grid { grid-template-columns: 1fr !important; }
  .blog-card {
    aspect-ratio: 4 / 5;
  }
  .blog-card__title { font-size: clamp(1.1rem, 5vw, 1.4rem); }
  .blog-hero { padding: clamp(60px, 14vw, 100px) 0 clamp(20px, 5vw, 40px); }
  .blog-hero__title { font-size: clamp(3.2rem, 20vw, 5rem); }
}

/* ==========================================================================
   MOBILE GLOBAL GUARDS — belt + suspenders.
   ========================================================================== */
@media (max-width: 720px) {
  /* Kill accidental horizontal scroll from over-wide content / images.
     Applied to <html> only so position:sticky inside <body> still works. */
  html { overflow-x: hidden; max-width: 100%; }
  img, video, iframe, svg { max-width: 100%; height: auto; }

  /* Snappier scrolling / smoother transforms on mobile GPUs. */
  body { -webkit-overflow-scrolling: touch; }

  /* Fix any long unbreakable strings (Romanian compounds, URLs) so they
     wrap instead of pushing the layout wider than the viewport. */
  h1, h2, h3, h4, h5, p, li, a, span { word-wrap: break-word; overflow-wrap: break-word; }
}

/* ==========================================================================
   MOBILE TAP-TARGETS — every interactive element at least 40×40 on phones.
   ========================================================================== */
@media (max-width: 720px) {
  a[href], button, [role="button"] {
    min-height: 36px;  /* gentle floor — some inline links stay smaller */
  }
  /* But critical actions (CTAs, close buttons, nav items, icon buttons)
     strictly ≥ 44px for accessibility. NOTE: decorative dots
     (.hero-bleed__dot, .announce__dot) are EXCLUDED — they're small
     circular indicators; forcing them to 44px turns them into vertical bars. */
  .btn-pill,
  .nav__cta,
  .event-section__brochure,
  .pricing-ticket__cta,
  .pricing-card__cta,
  .whatsapp-fab,
  .scroll-top,
  .nav__mobile-social,
  .blog-filter,
  .announce__nav {
    min-height: 44px;
  }
}

/* ==========================================================================
   MOBILE CONTACT CARDS — ensure last row of the 6-card quick-action grid
   can't have text obscured by the floating WhatsApp FAB at bottom-right.
   Strategy: reserve right-side padding on the bottom cards so centered
   text stays clear of the FAB's 68px footprint (54px + 14px right offset).
   The FAB only overlaps while the cookie banner is visible (bottom:80px);
   after dismiss it drops to bottom:14px (below the card's content box).
   ========================================================================== */
@media (max-width: 720px) {
  /* The bottom-right card is always the overlap target — pad it so its
     text label (e.g. "LIKE & SHARE") wraps above the FAB's zone. */
  body.has-cookie-banner .contact-cards .contact-card:last-child,
  body:has(.cookie-banner.is-visible) .contact-cards .contact-card:last-child {
    padding-right: 56px;
  }
}

/* =============================================================================
   WHAT'S IN THE DAY — three program cards on /events
   --------------------------------------------------------------------------
   Same Canva-sticker vocabulary as .age-group / .value-ribbon__item /
   .karinti-agepill: solid theme gradient, white sticker outline, layered
   theme-colored drop shadow, specular shine, confetti dots. The trio gets
   moss / coral / sun for SCURT / LUNG / Full Day, building visual hierarchy
   from "starter" → "main offering" → "premium".

   Replaces an earlier inline-styled block (cream paper background with a
   1px line border) that was nearly invisible against the page background.
============================================================================= */
.day-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  max-width: 1140px;
  margin: 0 auto;
}
@media (min-width: 880px) {
  .day-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; }
}

.day-card {
  --theme:      var(--moss);
  --theme-dark: var(--moss-deep);
  --on-theme:   #fff;

  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px 26px 26px;
  border-radius: 22px;
  color: var(--on-theme);
  background:
    radial-gradient(circle at 80% -10%, rgba(255, 255, 255, 0.22) 0%, transparent 55%),
    linear-gradient(160deg, var(--theme) 0%, var(--theme-dark) 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 1px 0 rgba(17, 20, 24, 0.12),
    0 18px 36px -16px color-mix(in srgb, var(--theme) 70%, transparent),
    0 6px 14px -6px rgba(17, 20, 24, 0.22);
  overflow: hidden;
  isolation: isolate;
  transition:
    transform .45s cubic-bezier(.22, 1, .36, 1),
    box-shadow .45s var(--ease);
}

/* Specular shine bloom in the top-right (matches .value-ribbon__item / .age-group). */
.day-card::before {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.28) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: soft-light;
}

/* Confetti dots — three per card since the surface is larger than the age cards. */
.day-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 88% 78%, rgba(255, 255, 255, 0.55) 2px, transparent 2.6px),
    radial-gradient(circle at 18% 28%, rgba(255, 255, 255, 0.4)  1.6px, transparent 2.2px),
    radial-gradient(circle at 92% 22%, rgba(255, 255, 255, 0.32) 1.4px, transparent 1.9px);
  pointer-events: none;
  z-index: 0;
}

.day-card > * { position: relative; z-index: 1; }

.day-card:hover {
  transform: translateY(-6px);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 1px 0 rgba(17, 20, 24, 0.15),
    0 28px 50px -20px color-mix(in srgb, var(--theme) 75%, transparent),
    0 10px 22px -8px rgba(17, 20, 24, 0.32);
}

/* Per-card themes — moss for the starter tier, coral for the main, sun for premium. */
.day-card--scurt { --theme: var(--moss);  --theme-dark: var(--moss-deep);  --on-theme: #fff; }
.day-card--lung  { --theme: var(--coral); --theme-dark: var(--coral-deep); --on-theme: #fff; }
.day-card--full  { --theme: var(--sun);   --theme-dark: var(--sun-deep);   --on-theme: var(--ink); }

/* On the yellow card, white confetti would vanish — use ink-tinted instead. */
.day-card--full::after {
  background-image:
    radial-gradient(circle at 88% 78%, rgba(17, 20, 24, 0.20) 2px, transparent 2.6px),
    radial-gradient(circle at 18% 28%, rgba(17, 20, 24, 0.14) 1.6px, transparent 2.2px),
    radial-gradient(circle at 92% 22%, rgba(17, 20, 24, 0.10) 1.4px, transparent 1.9px);
}

/* "Premium" badge in the top-right of the Full Day card. */
.day-card__badge {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 5px 12px;
  font-family: "DM Sans", sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.4);
  border: 1.5px solid rgba(17, 20, 24, 0.22);
  border-radius: 999px;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(17, 20, 24, 0.18);
}

/* Header: handwritten label + bold time + price chip stacked together. */
.day-card__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.day-card__eyebrow {
  font-family: "Caveat", cursive;
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  font-weight: 600;
  line-height: 1;
  color: var(--on-theme);
  opacity: 0.95;
}

.day-card__time {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(1.9rem, 3.4vw, 2.4rem);
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--on-theme);
  text-shadow: 0 1px 2px rgba(17, 20, 24, 0.14);
}

.day-card__price {
  display: inline-block;
  margin-top: 8px;
  padding: 5px 14px;
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-theme);
  background: rgba(255, 255, 255, 0.22);
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
}
.day-card--full .day-card__price {
  background: rgba(17, 20, 24, 0.12);
  border-color: rgba(17, 20, 24, 0.28);
}

/* Bullet list — custom round check bullets instead of the ugly · prefix. */
.day-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.day-card__list li {
  position: relative;
  padding-left: 30px;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--on-theme);
  opacity: 0.96;
}
.day-card__list li::before {
  /* Translucent disc */
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  border: 1.5px solid rgba(255, 255, 255, 0.5);
}
.day-card__list li::after {
  /* Check mark drawn with two borders rotated 45° */
  content: "";
  position: absolute;
  left: 5px;
  top: 5px;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--on-theme);
  border-bottom: 2px solid var(--on-theme);
  transform: rotate(-45deg);
}
.day-card--full .day-card__list li::before {
  background: rgba(17, 20, 24, 0.12);
  border-color: rgba(17, 20, 24, 0.32);
}

@media (prefers-reduced-motion: reduce) {
  .day-card { transition: none; }
  .day-card:hover { transform: none; }
}

/* =============================================================================
   AGE-GROUPS TIERS — sleepovers access policy split
   --------------------------------------------------------------------------
   Two visually distinct tiers:
     Tier 1 "Acces liber"   — moss/green, open lock/people icon, friendly
     Tier 2 "Karin's only"  — sun/yellow, star icon, premium feel
   A scribbled ✦ separator divides them; the karins tier cards get a subtle
   gold ring + corner star so the "members only" feel reads at a glance.
   Lives only on sleepovers.html for now.
============================================================================= */

.age-groups__tier {
  margin-top: var(--s-6);
  position: relative;
}
.age-groups__tier--open  { margin-top: var(--s-5); }

/* ---- Tier head: icon disc + bold title + handwritten sub ---------------- */
.age-groups__tier-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: var(--s-5);
  text-align: center;
}
@media (min-width: 640px) {
  .age-groups__tier-head {
    flex-direction: row;
    justify-content: center;
    gap: 22px;
    text-align: left;
  }
}

.age-groups__tier-icon {
  --icon-theme: var(--moss);
  --icon-theme-dark: var(--moss-deep);
  --icon-on: #fff;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  flex-shrink: 0;
  color: var(--icon-on);
  background:
    radial-gradient(circle at 80% -10%, rgba(255, 255, 255, 0.28) 0%, transparent 55%),
    linear-gradient(160deg, var(--icon-theme) 0%, var(--icon-theme-dark) 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 10px 22px -8px color-mix(in srgb, var(--icon-theme) 70%, transparent),
    0 4px 10px -3px rgba(17, 20, 24, 0.3);
  transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}
.age-groups__tier-icon svg {
  width: 28px;
  height: 28px;
}
.age-groups__tier-icon--open {
  --icon-theme: var(--moss);
  --icon-theme-dark: var(--moss-deep);
}
.age-groups__tier-icon--karins {
  --icon-theme: var(--sun);
  --icon-theme-dark: var(--sun-deep);
  --icon-on: var(--ink);
}
.age-groups__tier:hover .age-groups__tier-icon {
  transform: scale(1.05) rotate(-3deg);
}

.age-groups__tier-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.age-groups__tier-title {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  letter-spacing: 0.005em;
  line-height: 1.05;
  color: #fff;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.35),
    0 4px 12px rgba(0, 0, 0, 0.45);
  margin: 0;
}
.age-groups__tier--open .age-groups__tier-title {
  color: #fff;
}
.age-groups__tier--karins .age-groups__tier-title {
  /* Sun-tinted heading to reinforce the exclusive feel */
  color: var(--sun);
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.4),
    0 4px 14px rgba(251, 200, 0, 0.4);
}

.age-groups__tier-sub {
  font-family: "Caveat", cursive;
  font-size: clamp(1.1rem, 1.9vw, 1.35rem);
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 500;
  margin: 0;
}

/* ---- Decorative separator between the two tiers ------------------------- */
.age-groups__tier-sep {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: var(--s-7) auto var(--s-6);
  max-width: min(72%, 580px);
  pointer-events: none;
}
.age-groups__tier-sep-line {
  flex: 1;
  height: 1px;
  background-image: repeating-linear-gradient(90deg,
    rgba(251, 200, 0, 0.45) 0 8px,
    transparent 8px 16px);
  -webkit-mask-image: linear-gradient(to right, transparent, black 18%, black 100%);
          mask-image: linear-gradient(to right, transparent, black 18%, black 100%);
}
.age-groups__tier-sep-line:last-child {
  -webkit-mask-image: linear-gradient(to left, transparent, black 18%, black 100%);
          mask-image: linear-gradient(to left, transparent, black 18%, black 100%);
}
.age-groups__tier-sep-mark {
  font-size: 18px;
  color: var(--sun);
  text-shadow: 0 0 14px rgba(251, 200, 0, 0.5);
  animation: sleepoverSepTwinkle 3.5s ease-in-out infinite;
}
@keyframes sleepoverSepTwinkle {
  0%, 100% { opacity: 0.7; transform: scale(1) rotate(0deg); }
  50%      { opacity: 1; transform: scale(1.15) rotate(180deg); }
}
@media (prefers-reduced-motion: reduce) {
  .age-groups__tier-sep-mark { animation: none; }
}

/* ---- Karin's-only tier: subtle gold accent on the cards + corner star --- */
.age-groups__tier--karins .age-group {
  /* Adds a soft sun-colored ring on top of the existing card shadow stack */
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 0 0 2.5px color-mix(in srgb, var(--sun) 18%, transparent),
    0 1px 0 rgba(17, 20, 24, 0.12),
    0 14px 28px -12px color-mix(in srgb, var(--theme) 70%, transparent),
    0 4px 10px -4px rgba(17, 20, 24, 0.22),
    0 0 0 1px rgba(251, 200, 0, 0.18);
  transition:
    transform .45s cubic-bezier(.22, 1, .36, 1),
    box-shadow .45s var(--ease);
}
.age-groups__tier--karins .age-group:hover {
  transform: translateY(-5px);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 0 0 2.5px color-mix(in srgb, var(--sun) 28%, transparent),
    0 1px 0 rgba(17, 20, 24, 0.15),
    0 22px 38px -16px color-mix(in srgb, var(--theme) 75%, transparent),
    0 8px 18px -6px rgba(17, 20, 24, 0.32),
    0 0 0 1px rgba(251, 200, 0, 0.32);
}

/* Corner sun-star ornament marking each Karin's-only card */
.age-groups__tier--karins .age-group {
  position: relative;
}
.age-groups__tier--karins .age-group::before {
  /* Existing ::before is the specular shine bloom from .age-group; we let
     that stay. The corner star uses the .age-groups__tier--karins .age-group
     element's existing layout but adds a new stacked SVG via background. */
}
.age-groups__tier--karins .age-group__num {
  /* Subtle gold accent ring on the number badge for the karins tier */
  background: rgba(255, 255, 255, 0.26);
  border: 1.5px solid rgba(251, 200, 0, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 2px 8px rgba(251, 200, 0, 0.22);
}

/* =============================================================================
   AGE-GROUPS TIERS — layout centering + color rhythm remix
   --------------------------------------------------------------------------
   1. Center the cards as a group instead of left-aligning into a 6/7-col grid
   2. Reverse the color rhythm in the karins tier so the two tiers don't
      visually rhyme (tier 1 starts moss → coral → sky;
                      tier 2 starts sun → sky → coral → moss)
============================================================================= */

/* ---- LAYOUT: center each tier's grid (override default 6-col rule) ------ */
.age-groups__tier .age-groups__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 200px));
  justify-content: center;
  gap: 14px;
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 600px) {
  .age-groups__tier .age-groups__grid { gap: 16px; }
}
@media (min-width: 900px) {
  .age-groups__tier .age-groups__grid { gap: 18px; }
}

/* ---- COLOR REMIX: tier 2 reverses the rhythm ---------------------------- */
/* Tier 2: position 1 leads with SUN (matches the karins icon disc), then
   sky → coral → moss. Different starting color and different ending color
   from tier 1, so the boundary between tiers reads as two distinct groups. */
.age-groups__tier--karins .age-groups__grid .age-group:nth-child(1) {
  --theme: var(--sun); --theme-dark: var(--sun-deep); --on-theme: var(--ink);
}
.age-groups__tier--karins .age-groups__grid .age-group:nth-child(2) {
  --theme: var(--sky); --theme-dark: var(--sky-deep); --on-theme: #fff;
}
.age-groups__tier--karins .age-groups__grid .age-group:nth-child(3) {
  --theme: var(--coral); --theme-dark: var(--coral-deep); --on-theme: #fff;
}
.age-groups__tier--karins .age-groups__grid .age-group:nth-child(4) {
  --theme: var(--moss); --theme-dark: var(--moss-deep); --on-theme: #fff;
}

/* Confetti remix — tier 2 position 1 is yellow, needs ink confetti
   (default rule paints white at this position, which would vanish on yellow) */
.age-groups__tier--karins .age-groups__grid .age-group:nth-child(1)::after {
  background-image:
    radial-gradient(circle at 82% 70%, rgba(17, 20, 24, 0.22) 2px, transparent 2.6px),
    radial-gradient(circle at 14% 24%, rgba(17, 20, 24, 0.15) 1.6px, transparent 2.2px);
}
/* Tier 2 position 4 is now moss — restore white confetti (default rule
   for nth-child(4) was painting ink-tinted, but now this slot is green) */
.age-groups__tier--karins .age-groups__grid .age-group:nth-child(4)::after {
  background-image:
    radial-gradient(circle at 82% 70%, rgba(255, 255, 255, 0.55) 2px, transparent 2.6px),
    radial-gradient(circle at 14% 24%, rgba(255, 255, 255, 0.40) 1.6px, transparent 2.2px);
}

/* Number badge remix to match the new colors */
/* Yellow card (now position 1): ink-tinted num badge, gold border */
.age-groups__tier--karins .age-groups__grid .age-group:nth-child(1) .age-group__num {
  background: rgba(17, 20, 24, 0.18);
  border: 1.5px solid rgba(17, 20, 24, 0.32);
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 2px 6px rgba(17, 20, 24, 0.18);
}
/* Moss card (now position 4): default white-translucent badge */
.age-groups__tier--karins .age-groups__grid .age-group:nth-child(4) .age-group__num {
  background: rgba(255, 255, 255, 0.22);
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 2px 6px rgba(17, 20, 24, 0.18);
}

/* =============================================================================
   HERO POLISH — refined depth on title, script, and CTA
   --------------------------------------------------------------------------
   Not maximalist. The photo stays the visual hero; the text + button get
   cinematic typography depth + a richer CTA so they read better against the
   busy photo without pulling focus.
   No HTML/text changes — pure presentation.
============================================================================= */

/* ---- TITLE: deeper multi-layer shadow stack for chunky paper-cut depth -- */
.hero-bleed__title {
  font-size: clamp(2.8rem, 8.4vw, 6.4rem) !important;
  letter-spacing: -0.015em !important;
  line-height: 0.96 !important;
  color: #fff !important;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.45),
    0 2px 0 rgba(0, 0, 0, 0.35),
    0 3px 0 rgba(0, 0, 0, 0.25),
    0 6px 14px rgba(0, 0, 0, 0.55),
    0 14px 36px rgba(0, 0, 0, 0.45),
    0 24px 56px rgba(0, 0, 0, 0.3) !important;
}

/* ---- SCRIPT: stronger sun-glow halo + dimensional brush underline ------- */
.hero-bleed__title-script {
  font-size: 0.96em !important;
  letter-spacing: -0.005em !important;
  color: var(--sun) !important;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.4),
    0 3px 0 rgba(0, 0, 0, 0.3),
    0 6px 14px rgba(251, 200, 0, 0.55),
    0 12px 30px rgba(251, 200, 0, 0.35),
    0 18px 50px rgba(0, 0, 0, 0.5) !important;
}

/* Slim brush underline — delicate, dimensional, with subtle drop */
.hero-bleed__title-script::after {
  height: 0.08em !important;
  background: linear-gradient(90deg, var(--coral-deep) 0%, var(--sun) 35%, var(--sun-deep) 65%, var(--coral) 100%) !important;
  background-size: 220% 100% !important;
  opacity: 0.9 !important;
  border-radius: 999px !important;
  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.22),
    0 4px 10px rgba(251, 200, 0, 0.32) !important;
}

/* A small decorative sparkle anchored to the script line — single ornament,
   not a field. Adds character without crowding the text. */
.hero-bleed__title-script::before {
  content: "✦";
  position: absolute;
  top: -0.32em;
  right: -0.55em;
  font-family: "DM Sans", sans-serif;
  font-size: 0.45em;
  color: var(--sun);
  text-shadow: 0 0 18px rgba(251, 200, 0, 0.7);
  animation: heroSparkPulse 3.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes heroSparkPulse {
  0%, 100% { opacity: 0.6; transform: scale(0.92) rotate(0deg); }
  50%      { opacity: 1; transform: scale(1.18) rotate(180deg); }
}

/* ---- CTA: gradient + layered depth + delightful hover ------------------- */
.hero-bleed .btn-pill {
  background: linear-gradient(135deg, #FFD835 0%, var(--sun) 45%, var(--sun-deep) 100%) !important;
  background-size: 180% 180% !important;
  background-position: 0% 0% !important;
  padding: 18px 36px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.55),
    inset 0 -2px 0 rgba(17, 20, 24, 0.08),
    0 1px 0 rgba(17, 20, 24, 0.18),
    0 8px 18px rgba(251, 200, 0, 0.45),
    0 14px 36px rgba(251, 200, 0, 0.35),
    0 22px 48px rgba(0, 0, 0, 0.32) !important;
  transition:
    transform 0.55s cubic-bezier(.22, 1, .36, 1),
    box-shadow 0.55s cubic-bezier(.22, 1, .36, 1),
    background-position 0.6s ease-out !important;
  position: relative;
  isolation: isolate;
}

/* White shine sweep — flat overlay (no mix-blend-mode), idle off-screen,
   triggered by hover. Cleaner than the constant loop, no rainbow flashes. */
.hero-bleed .btn-pill::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    115deg,
    transparent 38%,
    rgba(255, 255, 255, 0.65) 50%,
    transparent 62%
  );
  background-size: 220% 100%;
  background-position: -120% 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition:
    background-position 0.85s cubic-bezier(.22, 1, .36, 1),
    opacity 0.2s ease-out;
}
.hero-bleed .btn-pill > * { position: relative; z-index: 1; }

.hero-bleed .btn-pill:hover {
  transform: translateY(-5px) scale(1.05) !important;
  background-position: 100% 100% !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.75),
    inset 0 -2px 0 rgba(17, 20, 24, 0.12),
    0 1px 0 rgba(17, 20, 24, 0.22),
    0 16px 30px rgba(251, 200, 0, 0.58),
    0 26px 56px rgba(251, 200, 0, 0.45),
    0 34px 64px rgba(0, 0, 0, 0.4) !important;
}
.hero-bleed .btn-pill:hover::after {
  opacity: 1;
  background-position: 220% 0;
}
.hero-bleed .btn-pill:active {
  transform: translateY(-2px) scale(1.02) !important;
  transition-duration: 0.12s !important;
}

/* Arrow icon — slides further with smoother easing on hover */
.hero-bleed .btn-pill svg,
.hero-bleed .btn-pill .arrow {
  transition: transform 0.5s cubic-bezier(.22, 1, .36, 1) !important;
}
.hero-bleed .btn-pill:hover svg,
.hero-bleed .btn-pill:hover .arrow {
  transform: translateX(8px) !important;
}

@media (prefers-reduced-motion: reduce) {
  .hero-bleed__title-script::before { animation: none; }
  .hero-bleed .btn-pill,
  .hero-bleed .btn-pill::after,
  .hero-bleed .btn-pill svg { transition: none !important; }
  .hero-bleed .btn-pill:hover { transform: none !important; }
}