/* ═══════════════════════════════════════════════════════════════════════
   Embassy Kids — its own world, built from the same tokens.

   Same fonts, same three brand colours (--color-accent, --color-accent-2,
   --color-process-yellow), same underlying components (.btn, .em-link,
   .em-mask) — but used at far higher density and with a rounder, more
   playful local radius scale that lives only inside .kids-main, so the
   rest of the site's near-square language is untouched.
   ═══════════════════════════════════════════════════════════════════════ */

.kids-main {
  --kids-radius-lg: 34px;
  --kids-radius-md: 20px;
  --kids-radius-sm: 12px;
  background: var(--color-bg);
  color: var(--color-text);
}

.kids-section { position: relative; overflow: hidden; }
.kids-wash-accent { background: color-mix(in srgb, var(--color-accent) 7%, var(--color-bg)); }
.kids-wash-accent2 { background: color-mix(in srgb, var(--color-accent-2) 6%, var(--color-bg)); }
.kids-wash-yellow { background: color-mix(in srgb, var(--color-process-yellow) 10%, var(--color-bg)); }
.kids-wash-ink { background: var(--color-text); color: var(--color-bg); }

.kids-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
}
.kids-eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent-2); display: inline-block; }

/* — playful floating shapes, sparse and decorative — */
.kids-shape { position: absolute; pointer-events: none; z-index: 0; opacity: 0.9; }
.kids-shape-circle { border-radius: 50%; }
.kids-shape-blob { border-radius: 62% 38% 55% 45% / 45% 55% 42% 58%; }
.kids-shape-star {
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.kids-shape-accent { background: color-mix(in srgb, var(--color-accent) 55%, transparent); }
.kids-shape-accent2 { background: color-mix(in srgb, var(--color-accent-2) 55%, transparent); }
.kids-shape-yellow { background: color-mix(in srgb, var(--color-process-yellow) 70%, transparent); }
.kids-shape-outline { background: none; border: 2px solid color-mix(in srgb, var(--color-text) 25%, transparent); }

@keyframes kids-float-a { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(6px, -14px) rotate(6deg); } }
@keyframes kids-float-b { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(-8px, 10px) rotate(-5deg); } }
.kids-float-a { animation: kids-float-a 7s ease-in-out infinite; }
.kids-float-b { animation: kids-float-b 8.5s ease-in-out infinite; }

/* — a hand-felt underline for one word per big headline — */
.kids-scribble {
  text-decoration: underline wavy color-mix(in srgb, var(--color-accent-2) 80%, transparent);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.1em;
}

/* — small rotated sticker badge — */
.kids-sticker {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.2;
  width: 92px; height: 92px; border-radius: 50%;
  background: var(--color-accent-2); color: var(--color-bg);
  transform: rotate(-8deg);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--color-accent-2) 35%, transparent);
}

/* — buttons: same component, rounder and bigger here — */
.kids-main .btn { border-radius: var(--kids-radius-sm); font-size: 15px; padding: 14px 26px; }
.kids-main .btn-primary { background: var(--color-accent-2); }
.kids-main .btn-primary:hover { background: color-mix(in srgb, var(--color-accent-2) 82%, black); }

/* — hero — */
.kids-hero {
  padding: clamp(120px, 15vw, 190px) clamp(20px, 5vw, 72px) clamp(70px, 9vw, 120px);
  min-height: 92svh;
  display: flex; align-items: center;
}
/* — panels used by age groups, the journey and the experience pillars — */
.kids-panel {
  border-radius: var(--kids-radius-lg);
  padding: clamp(28px, 3.4vw, 44px);
  position: relative; overflow: hidden;
}
.kids-panel-num {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(52px, 6vw, 80px); line-height: 1; letter-spacing: -0.02em;
  opacity: 0.28;
}

/* — the journey strip (Arrive -> Pick up) — */
.kids-journey { display: flex; gap: clamp(0px, 0vw, 0px); overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 10px; -webkit-overflow-scrolling: touch; }
.kids-journey::-webkit-scrollbar { height: 6px; }
.kids-journey-step {
  scroll-snap-align: start; flex: 0 0 clamp(220px, 26vw, 300px);
  display: flex; flex-direction: column; gap: 14px;
  padding: clamp(22px, 2.6vw, 30px) clamp(20px, 2.4vw, 26px);
  border-radius: var(--kids-radius-md);
  margin-right: clamp(14px, 2vw, 22px);
}
.kids-journey-step:last-child { margin-right: 0; }
/* — team grid — */
.kids-team { display: grid; gap: clamp(24px, 3vw, 40px); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.kids-team-photo {
  border-radius: var(--kids-radius-lg); overflow: hidden; aspect-ratio: 4/5; margin-bottom: 16px;
  box-shadow: 0 18px 40px color-mix(in srgb, var(--color-text) 16%, transparent);
}
.kids-team-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* — events row — */
.kids-event-card {
  border-radius: var(--kids-radius-md);
  padding: clamp(20px, 2.4vw, 28px);
  display: flex; flex-direction: column; gap: 10px;
}

@media (max-width: 900px) {
  .kids-hero { text-align: left; }
}

@media (max-width: 640px) {
  .kids-journey-step { flex-basis: 78vw; }
}

@media (prefers-reduced-motion: reduce) {
  .kids-float-a, .kids-float-b { animation: none !important; }
}