/* ============================================================
   Wonder Spark — Design System
   Pastel kids-party landing. Source of truth: _design/Wondet Spark.pdf
   ============================================================ */

:root {
  /* ── Palette (sampled from the Figma PDF) ─────────────────── */
  --ws-sky:        #80D8E8;       /* primary blue: sections + CTAs */
  --ws-sky-dark:   #5DC4D8;       /* hover/border */
  --ws-sky-soft:   #B6E8F2;
  --ws-pink:       #F8C0D8;       /* spa card */
  --ws-pink-dark:  #EFA6C2;
  --ws-cream:      #F3E3CC;       /* hero band only */
  --ws-cream-soft: #FBF1DE;
  --ws-surface:    #FAF8F5;       /* MAIN page background (per Figma) */
  --ws-white:      #FFFFFF;
  --ws-plum:       #400028;       /* dark headings + footer */
  --ws-plum-soft:  #5A1A40;
  --ws-ink:        #1E1E1E;       /* body text */
  --ws-ink-soft:   #4A4A4A;       /* secondary text */
  --ws-muted:      #8A7A6E;
  --ws-line:       rgba(64, 0, 40, .12);
  --ws-line-soft:  rgba(64, 0, 40, .06);
  --ws-yellow:     #FFD66B;       /* star accent */
  --ws-orange:     #FF8023;       /* "Seattle" + decorative swooshes */
  --ws-orange-soft:#FFC59A;

  /* ── Typography ──────────────────────────────────────────── */
  --font-display: 'Fredoka One', 'Fredoka', system-ui, sans-serif;
  --font-ui:      'Fredoka', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Lora', Georgia, 'Times New Roman', serif;

  /* Type scale (mobile baseline; desktop scaled below) */
  --fs-hero:    clamp(36px, 7.6vw, 64px);
  --fs-h2:      clamp(28px, 4.4vw, 40px);
  --fs-h3:      clamp(22px, 2.8vw, 28px);
  --fs-lg:      18px;
  --fs-body:    16px;
  --fs-sm:      14px;
  --fs-xs:      12px;

  /* ── Radii & shadows ─────────────────────────────────────── */
  --r-sm:  10px;
  --r-md:  18px;
  --r-lg:  28px;
  --r-xl:  44px;
  --r-pill: 999px;

  --shadow-soft:   0 12px 36px -18px rgba(64, 0, 40, .18);
  --shadow-card:   0 18px 50px -22px rgba(64, 0, 40, .22);
  --shadow-pop:    0 30px 70px -28px rgba(64, 0, 40, .30);

  /* ── Layout ──────────────────────────────────────────────── */
  --container:   1280px;
  --gutter:      24px;
  --section-y:   clamp(56px, 9vw, 96px);
  --section-y-sm:clamp(40px, 6vw, 64px);

  --tx-spring: cubic-bezier(.34, 1.56, .64, 1);
  --tx-base:   cubic-bezier(.2, .8, .2, 1);
}

/* ── Reset / base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ws-ink);
  background: var(--ws-surface);  /* off-white main bg per Figma */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; display: block; height: auto; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }
p { margin: 0 0 1em; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;        /* Fredoka One has no other weights */
  color: var(--ws-plum);
  line-height: 1.08;
  margin: 0 0 .4em;
  letter-spacing: -.005em;
}
h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-lg); }
hr { border: 0; border-top: 1px solid var(--ws-line); margin: 32px 0; }
::selection { background: var(--ws-sky); color: var(--ws-plum); }

/* ── Layout primitives ───────────────────────────────────── */
.ws-container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.ws-section {
  padding: var(--section-y) 0;
  position: relative;
}
.ws-section--cream { background: var(--ws-cream); }
.ws-section--sky   { background: var(--ws-sky); }
.ws-section--pink  { background: var(--ws-pink); }
.ws-section--white { background: var(--ws-white); }

.ws-eyebrow {
  display: inline-block;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ws-plum-soft);
  padding: 6px 14px;
  background: rgba(255,255,255,.6);
  border-radius: var(--r-pill);
  margin-bottom: 14px;
}

/* ── Buttons ─────────────────────────────────────────────── */
.ws-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 18px;
  padding: 14px 28px;
  border-radius: var(--r-pill);
  transition: transform .25s var(--tx-spring), box-shadow .25s var(--tx-base), background .2s, color .2s;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.ws-btn--primary {
  background: var(--ws-sky);
  color: var(--ws-plum);
  box-shadow: 0 8px 22px -10px rgba(64,0,40,.35);
}
.ws-btn--primary:hover {
  background: var(--ws-sky-dark);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 14px 30px -10px rgba(64,0,40,.45);
}
.ws-btn--ghost {
  background: rgba(255,255,255,.85);
  color: var(--ws-plum);
  backdrop-filter: blur(6px);
}
.ws-btn--ghost:hover { background: var(--ws-white); transform: translateY(-2px); }
.ws-btn--plum {
  background: var(--ws-plum);
  color: var(--ws-white);
}
.ws-btn--plum:hover { background: var(--ws-plum-soft); transform: translateY(-2px); }
.ws-btn--lg { padding: 18px 36px; font-size: var(--fs-lg); }

/* ── Header (floating white pill island) ─────────────────── */
.ws-header {
  position: sticky; top: 0; z-index: 50;
  padding: 16px 0 0;
  pointer-events: none;     /* let click pass through gutters */
  background: var(--ws-cream);   /* cream band at the very top — matches the hero so there's
                                    no colour seam above the h1. */
  transition: background .3s ease;
}
/* Once the page is scrolled, the cream band fades to transparent so ONLY the white pill
   keeps floating (class toggled by the scroll listener in templates/partials/header.php). */
.ws-header.is-scrolled { background: transparent; }
.ws-header > .ws-container { pointer-events: none; }
.ws-header__island {
  pointer-events: auto;
  background: var(--ws-white);
  border-radius: var(--r-pill);
  padding: 12px 14px 12px 22px;
  display: flex; align-items: center; gap: 24px;
  box-shadow: 0 14px 36px -20px rgba(64, 0, 40, .25), 0 2px 8px -2px rgba(64,0,40,.08);
}
.ws-logo {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none;
  flex: 0 0 auto;
}
.ws-logo__mark {
  width: 72px; height: 52px;
  display: block;
  flex-shrink: 0;
}
.ws-logo__wordmark {
  display: inline-flex; flex-direction: column;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.0;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ws-plum);
}
.ws-nav {
  display: flex; align-items: center; gap: 28px;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 18px;
  margin: 0 auto;
}
.ws-nav a {
  color: var(--ws-plum);
  padding: 6px 2px;
  position: relative;
  transition: color .2s;
  text-decoration: none;
}
.ws-nav a::after {
  content: ''; position: absolute;
  left: 50%; bottom: 0; width: 0; height: 2px;
  background: var(--ws-plum);
  border-radius: 2px;
  transition: width .25s var(--tx-base), left .25s var(--tx-base);
}
.ws-nav a:hover::after,
.ws-nav a[aria-current="page"]::after { width: 100%; left: 0; }

.ws-header__right {
  display: flex; align-items: center; gap: 12px;
}
.ws-social {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--ws-plum);
  color: var(--ws-white);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s, transform .2s var(--tx-spring);
}
.ws-social:hover { background: var(--ws-sky-dark); transform: translateY(-1px); }
.ws-header__cta {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 18px;
  color: var(--ws-plum);
  background: var(--ws-sky);
  border: 1.5px solid var(--ws-plum);
  border-radius: var(--r-pill);
  padding: 10px 22px;
  text-decoration: none;
  box-shadow: 0 3px 0 0 var(--ws-plum);   /* candy lip — matches the site's buttons */
  transition: transform .16s var(--tx-spring), box-shadow .16s var(--tx-spring), background .2s;
  white-space: nowrap;
}
.ws-header__cta:hover  { background: var(--ws-sky-dark); transform: translateY(-1px); box-shadow: 0 4px 0 0 var(--ws-plum); }
.ws-header__cta:active { transform: translateY(2px); box-shadow: 0 1px 0 0 var(--ws-plum); }

.ws-burger {
  display: none;
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: transparent;          /* integrate into the white pill — no separate cream chip */
  align-items: center; justify-content: center;
  border: 0;
  padding: 0;
  flex: 0 0 auto;                   /* never grow/shrink → stays inside the pill */
  transition: background .2s;
}
.ws-burger:hover { background: rgba(64, 0, 40, .07); }
.ws-burger span {
  display: block; width: 20px; height: 2px;
  background: var(--ws-plum); border-radius: 2px;
  position: relative;
}
.ws-burger span::before,
.ws-burger span::after {
  content: ''; position: absolute; left: 0; width: 100%; height: 2px;
  background: var(--ws-plum); border-radius: 2px;
}
.ws-burger span::before { top: -6px; }
.ws-burger span::after  { top: 6px; }
/* Mobile drawer — white panel sliding in from the RIGHT over a dimmed backdrop */
.ws-drawer {
  position: fixed; inset: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .62);   /* soft frosted-white scrim (was plum — read as pink/purple) */
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  opacity: 0; visibility: hidden;
  pointer-events: none;     /* CRITICAL: never intercept clicks while closed. This was the bug —
                               a full-screen pe:auto overlay kept eating EVERY click during the
                               .3s visibility transition after closing (or indefinitely while a
                               backgrounded tab paused that transition). pe:none fixes it instantly. */
  transition: opacity .3s ease, visibility 0s linear .3s;
}
.ws-drawer[aria-hidden="false"] {
  opacity: 1; visibility: visible;
  pointer-events: auto;
  transition: opacity .3s ease, visibility 0s linear 0s;
}
.ws-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(340px, 86vw);
  background: var(--ws-white);
  border-radius: 24px 0 0 24px;
  box-shadow: -24px 0 60px -24px rgba(64, 0, 40, .4), -1px 0 0 rgba(64, 0, 40, .08);
  padding: 26px 28px 36px;
  display: flex; flex-direction: column; align-items: center;
  transform: translateX(100%);
  transition: transform .34s var(--tx-spring);
  overflow-y: auto;
}
.ws-drawer[aria-hidden="false"] .ws-drawer__panel { transform: translateX(0); }
.ws-drawer__close {
  position: absolute; top: 22px; right: 22px;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--ws-cream); color: var(--ws-plum);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; line-height: 1; border: 0; cursor: pointer;
  transition: background .2s, transform .25s var(--tx-spring);
}
.ws-drawer__close:hover { background: var(--ws-sky); transform: rotate(90deg); }
.ws-drawer__title {
  font-family: var(--font-display); color: var(--ws-plum);
  font-size: 30px; line-height: 1; margin: 14px 0 0; text-align: center;
}
.ws-drawer__rule {
  display: block; width: 210px; max-width: 72%; height: 1px;
  background: rgba(64, 0, 40, .18); margin: 22px 0 10px;
}
.ws-drawer__nav {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 100%; font-family: var(--font-ui); font-size: 21px; margin-top: 8px;
}
.ws-drawer__nav a {
  display: block; width: 100%; text-align: center;
  padding: 14px 16px; color: var(--ws-plum); border-radius: var(--r-md);
  transition: background .2s, color .2s;
}
.ws-drawer__nav a:hover { background: var(--ws-cream); }
.ws-drawer__cta {
  margin: 26px auto 6px; min-width: 210px;
  border: 1.5px solid var(--ws-plum);
  box-shadow: 0 3px 0 0 var(--ws-plum);   /* candy lip — matches the site's buttons */
}
.ws-drawer__cta:hover  { transform: translateY(-1px); box-shadow: 0 4px 0 0 var(--ws-plum); }
.ws-drawer__cta:active { transform: translateY(2px);  box-shadow: 0 1px 0 0 var(--ws-plum); }
.ws-drawer__social { display: flex; gap: 24px; justify-content: center; margin-top: 28px; }
.ws-drawer__social a { color: var(--ws-plum); display: inline-flex; transition: color .2s, transform .2s var(--tx-spring); }
.ws-drawer__social a:hover { color: var(--ws-orange); transform: translateY(-2px); }

/* ── Breadcrumbs — clean horizontal trail (blog post, CMS pages) ───────────
   render_breadcrumbs() emits <nav class="breadcrumb"><ol>…; without these rules
   the browser shows a raw bulleted/indented list (the "ugly" state). */
.breadcrumb { margin: 0 0 20px; }
.breadcrumb ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px 7px;
  font-family: var(--font-ui);
  font-size: 14px; line-height: 1.3;
}
.breadcrumb li { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.breadcrumb a {
  color: var(--ws-plum); opacity: .6;
  text-decoration: none; transition: opacity .2s;
}
.breadcrumb a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb .sep { color: var(--ws-plum); opacity: .28; user-select: none; }
.breadcrumb [aria-current="page"] {
  color: var(--ws-plum); opacity: .9;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42ch;
}

/* ── HERO (centered, cream bg) ───────────────────────────── */
.ws-hero {
  position: relative;
  padding: clamp(28px, 4vw, 52px) 0 clamp(60px, 6vw, 96px);
  overflow: hidden;
  text-align: center;
  background: var(--ws-cream);
}
.ws-hero__inner {
  display: flex; flex-direction: column; align-items: center; gap: 32px;
  position: relative;
}
.ws-hero__text {
  max-width: 880px;
  margin: 0 auto;
}
.ws-hero__title {
  font-size: var(--fs-hero);
  letter-spacing: -.012em;
  color: var(--ws-plum);
  margin-bottom: 18px;
  line-height: 1.05;
}
/* "Unforgettable" — wavy sky-blue underline as an SVG background */
.ws-hero__title .ws-wave {
  position: relative;
  display: inline-block;
  padding-bottom: 6px;
}
.ws-hero__title .ws-wave::after {
  content: '';
  position: absolute;
  left: -2%; right: -2%; bottom: -12px;
  height: 20px;
  /* Smooth sine period that tiles seamlessly — thicker stroke, shorter wavelength
     → more frequent rounded humps (per Figma Unforgettable…2.svg). */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' fill='none' preserveAspectRatio='none'><path d='M0 10 Q 25 2 50 10 T 100 10' stroke='%2388DDED' stroke-width='5' stroke-linecap='round' fill='none'/></svg>");
  background-repeat: repeat-x;
  background-position: center;
  background-size: 50px 18px;   /* shorter wavelength = more frequent waves */
}
/* "Seattle" — orange accent in Fredoka Expanded SemiBold (wdth 125, wght 600) */
.ws-hero__title em {
  font-style: normal;
  color: var(--ws-orange);
  font-family: 'Fredoka', var(--font-ui), sans-serif;
  font-weight: 600;
  font-stretch: expanded; /* Fredoka Expanded */
  margin-left: .1em;
}
.ws-hero__sub {
  font-size: var(--fs-lg);
  color: var(--ws-plum-soft);
  max-width: 560px;
  margin: 0 auto;
}

/* Cream → off-white background divider arc, running THROUGH the photo middle */
.ws-hero { position: relative; }
.ws-hero__split {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 38%;          /* divider sits ~through the middle of the photo */
  background: var(--ws-surface);
  /* Concave (hammock) top edge — the boundary sags LOW in the middle so the
     cream dips down behind the photo. SVG mask = region BELOW a ∪ curve. */
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400' preserveAspectRatio='none'><path d='M0 0 C 420 70 1020 70 1440 0 L 1440 400 L 0 400 Z' fill='white'/></svg>") top center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400' preserveAspectRatio='none'><path d='M0 0 C 420 70 1020 70 1440 0 L 1440 400 L 0 400 Z' fill='white'/></svg>") top center / 100% 100% no-repeat;
  z-index: 0;
}
.ws-hero__inner { position: relative; z-index: 1; }

/* Hero photo collage — EXACT Figma "Frame 90225" geometry (viewBox 880×575).
   Three layers share the same coordinate space so everything lines up:
     .ws-collage__shape  white fill + outset stroke  → uniform white border + shadow
     .ws-collage__cloud  the photo, masked to the cloud outline
     .ws-collage__arcs   orange (left) + sky (right) 5px decorative strokes      */
.ws-collage {
  position: relative;
  width: 100%;
  max-width: 1000px;
  aspect-ratio: 880 / 575;
  margin: 0 auto;
  --cloud-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 880 575'><path d='M364.498 99.713C435.84 42.2715 522.544 25.1484 586.308 63.7619C614.955 81.1098 635.445 107.573 647.491 139.474C696.209 101.384 749.618 88.4773 787.133 111.195C843.942 145.597 842.794 248.653 784.57 341.378C726.346 434.103 633.092 481.384 576.284 446.983C571.216 443.914 566.611 440.299 562.465 436.194C487.341 510.898 387.316 537.444 315.992 494.252C292.874 480.253 275.068 460.318 262.725 436.38C204.605 485.76 140.396 504.233 96.5913 477.707C32.6913 439.011 36.415 319.215 104.909 210.136C173.402 101.057 280.728 43.9999 344.628 82.6955C352.199 87.2802 358.82 93.0041 364.498 99.713Z' fill='white'/></svg>");
}
.ws-collage__shape,
.ws-collage__arcs {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.ws-collage__shape { z-index: 0; filter: drop-shadow(0 18px 36px rgba(64, 0, 40, .12)); }
.ws-collage__arcs  { z-index: 2; overflow: visible; }
/* Pre-shaped designer PNG (cloud + white border baked in) */
.ws-collage__photo {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  object-fit: contain; display: block;
  filter: drop-shadow(0 18px 36px rgba(64, 0, 40, .12));
}
.ws-collage__cloud {
  position: absolute; inset: 0; z-index: 1;
  background: var(--ws-cream-soft);
  -webkit-mask: var(--cloud-mask) center / 100% 100% no-repeat;
          mask: var(--cloud-mask) center / 100% 100% no-repeat;
  display: grid;
  grid-template-columns: repeat(var(--ws-cols, 1), 1fr);
  gap: 0;
}
.ws-collage__cloud > img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* Designer crop = vertical centre; nudge a touch lower so kids stay in frame */
  object-position: center 54%;
}
.ws-collage__cloud--single { grid-template-columns: 1fr; }

/* ── Feature badges (2x2 grid, outline icons) ────────────── */
.ws-features {
  background: var(--ws-surface);
  padding-bottom: var(--section-y);
}
.ws-features__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px 48px;
  max-width: 720px;
}
.ws-feature {
  display: flex; flex-direction: column; gap: 8px;
  text-align: left;
}
.ws-feature__icon {
  width: 64px; height: 64px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ws-plum);
  margin-bottom: 6px;
}
.ws-feature__icon svg { width: 48px; height: 48px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ws-feature__icon img { width: 48px; height: 48px; object-fit: contain; display: block; }
.ws-feature__title {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--ws-plum);
  line-height: 1.1;
  margin: 0;
}
.ws-feature__text { font-size: 15px; color: var(--ws-plum); margin: 6px 0 0; max-width: 280px; line-height: 1.55; }
@media (min-width: 720px) {
  .ws-features__grid { grid-template-columns: 1fr 1fr; max-width: 760px; margin-left: auto; }
}

/* ── Intro (photo + heading + 2x2 features) — Figma-accurate ── */
.ws-intro {
  background: var(--ws-surface); /* off-white, NOT cream */
  padding: clamp(40px, 6vw, 80px) 0;
}
.ws-intro__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}
.ws-intro__left {
  display: flex; flex-direction: column; gap: 16px;
  max-width: 440px; margin-inline: auto;
  text-align: center; /* Figma: centered heading + body under the photo */
}

/* Layered photo slider: front card 406×230 + a slice of the NEXT photo peeking
   below (361×233, rotated -2°). Proportions taken from Figma node 56:3368. */
.ws-intro__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 406 / 230;
  margin-bottom: clamp(20px, 3.4vw, 30px); /* room for the peek that overflows below */
}
.ws-intro__photo-peek {
  position: absolute;
  left: 4.6%; top: 12.6%;
  width: 88.9%; height: 101.3%;
  border-radius: 24px; overflow: hidden;
  z-index: 0;
  transform: rotate(-2deg);
  transform-origin: top left;
  box-shadow: 0 16px 30px -22px rgba(64,3,45,.45);
}
.ws-intro__photo-peek img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: opacity .3s ease;
}
.ws-intro__photo-frame {
  position: relative;
  z-index: 1;
  width: 100%; height: 100%;
  border-radius: 24px; overflow: hidden;
  background: var(--ws-white);
  box-shadow: 0 0 0 3px var(--ws-white), 0 18px 38px -22px rgba(64,3,45,.40);
}
.ws-intro__photo-track { position: absolute; inset: 0; }
.ws-intro__photo-ph { position: absolute; inset: 0; background: linear-gradient(135deg, var(--ws-sky-soft), var(--ws-pink)); }
.ws-intro__slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  opacity: 0; transform: scale(1.06);
  transition: opacity .7s ease, transform 1.4s ease;
  will-change: opacity, transform;
}
.ws-intro__slide.is-active { opacity: 1; transform: scale(1); }
.ws-intro__photo:not(.is-slider) .ws-intro__slide { position: relative; opacity: 1; transform: none; transition: none; }

.ws-intro__photo-nav {
  position: absolute;
  right: 14px; bottom: 14px;
  display: flex; gap: 8px;
  z-index: 3;
}
.ws-intro__photo-nav button {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--ws-white);
  color: var(--ws-plum);
  border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 18px -6px rgba(64,3,45,.45);
  transition: transform .2s var(--tx-spring), background .2s, color .2s;
}
.ws-intro__photo-nav button:hover { background: var(--ws-sky); transform: translateY(-1px) scale(1.05); }
.ws-intro__photo-nav button:active { transform: scale(.95); }

.ws-intro__title {
  font-size: clamp(30px, 3.6vw, 40px);
  color: var(--ws-plum);
  line-height: 1.05;
  margin: 6px 0 4px;
}
.ws-intro__body {
  color: var(--ws-plum);
  font-size: var(--fs-lg);
  line-height: 1.6;
  margin: 0;
}
.ws-intro__features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  text-align: left;
}
@media (min-width: 640px) {
  .ws-intro__features { grid-template-columns: 1fr 1fr; gap: 36px 32px; }
}
@media (min-width: 960px) {
  .ws-intro__grid { grid-template-columns: minmax(360px, 440px) 1fr; gap: 56px; align-items: start; }
  .ws-intro__left { margin-inline: 0; }
}
@media (min-width: 1100px) {
  .ws-intro__grid { gap: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .ws-intro__slide { transition: opacity .2s ease; transform: none; }
  .ws-intro__slide.is-active { transform: none; }
}

/* ── About strip ─────────────────────────────────────────── */
.ws-about {
  display: grid; grid-template-columns: 1fr; gap: 16px;
  padding: var(--section-y-sm) 0;
}
.ws-about h2 { margin-bottom: 14px; }
.ws-about p { font-size: var(--fs-lg); color: var(--ws-plum); max-width: 640px; }

/* Inline accent words (Seattle/Eastside) with wavy underlines */
.ws-accent {
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
  font-weight: 600;
}
.ws-accent::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 8px;
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 100%;
}
.ws-accent--orange { color: var(--ws-orange); }
.ws-accent--orange::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 8' fill='none'><path d='M2 5 Q 8 1 14 5 T 26 5 T 38 5 T 50 5 T 62 5 T 74 5 T 78 5' stroke='%23FF8023' stroke-width='2.4' stroke-linecap='round' fill='none'/></svg>");
}
.ws-accent--sky { color: var(--ws-sky-dark); }
.ws-accent--sky::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 8' fill='none'><path d='M2 5 Q 8 1 14 5 T 26 5 T 38 5 T 50 5 T 62 5 T 74 5 T 78 5' stroke='%2387DDED' stroke-width='2.4' stroke-linecap='round' fill='none'/></svg>");
}

/* ── Best programs (Spa + K-Pop, large cards) ────────────── */
.ws-programs__head { text-align: center; margin-bottom: 36px; }
.ws-programs__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
.ws-program {
  border-radius: 32px; /* Figma card radius */
  padding: clamp(24px, 5vw, 32px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.ws-program--pink { background: var(--ws-pink); }
.ws-program--cream { background: var(--ws-cream-soft); }
.ws-program--sky { background: #88DDEE; } /* exact Figma k-pop-party card */
.ws-program--white { background: var(--ws-white); }
/* Media = layered photo slider (same treatment as the intro block). The card
   behind shows the NEXT photo, tilted -2°, so a slice peeks below the main photo.
   Photo size per Figma ≈ 520×552 (slightly taller than square). */
.ws-program__media {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 520 / 552;
  margin-left: auto;
  margin-bottom: clamp(24px, 4vw, 40px); /* reserves room for the peek below */
}
.ws-program--reverse .ws-program__media { margin-left: 0; margin-right: auto; }

.ws-program__peek {
  position: absolute;
  left: 5%; top: 6%;
  width: 90%; height: 100%;
  border-radius: 24px; overflow: hidden;
  z-index: 0;
  transform: rotate(-2deg);
  transform-origin: top left;
  box-shadow: 0 18px 30px -22px rgba(64,3,45,.50);
}
.ws-program__peek img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .3s ease; }

.ws-program__frame {
  position: relative;
  z-index: 1;
  width: 100%; height: 100%;
  border-radius: 24px; overflow: hidden;
  background: var(--ws-white);
  box-shadow: 0 0 0 6px var(--ws-white), 0 20px 40px -22px rgba(64,3,45,.45);
}
.ws-program__track { position: absolute; inset: 0; }
.ws-program__ph {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.55);
  color: var(--ws-plum); font-family: var(--font-display); font-size: 24px; opacity: .6;
}
.ws-program__slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  opacity: 0; transform: scale(1.06);
  transition: opacity .7s ease, transform 1.4s ease;
  will-change: opacity, transform;
}
.ws-program__slide.is-active { opacity: 1; transform: scale(1); }
.ws-program__media:not(.is-slider) .ws-program__slide { position: relative; opacity: 1; transform: none; transition: none; }

.ws-program__nav {
  position: absolute; right: 16px; bottom: 16px;
  display: flex; gap: 8px;
  z-index: 3;
}
.ws-program__nav button {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--ws-white);
  color: var(--ws-plum);
  border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 18px -6px rgba(64,3,45,.45);
  transition: transform .2s var(--tx-spring), background .2s, color .2s;
}
.ws-program__nav button:hover { background: var(--ws-sky); transform: translateY(-1px) scale(1.05); }
.ws-program__nav button:active { transform: scale(.95); }
.ws-program__body h3 { font-size: clamp(32px, 3.8vw, 44px); margin-bottom: 20px; color: var(--ws-plum); }
.ws-program__body p  { color: var(--ws-plum); line-height: 1.65; font-size: var(--fs-lg); margin: 0; }
.ws-program__body p + p { margin-top: 16px; }
.ws-program__includes {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  color: var(--ws-plum);
  margin: 24px 0 12px; /* paragraph → includes → list rhythm (Figma) */
}
.ws-program__list {
  list-style: none; padding: 0; margin: 6px 0 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 30px; /* 32px row pitch, ~30px columns */
}
.ws-program__list li {
  padding-left: 30px; position: relative;
  font-size: 17px; color: var(--ws-plum);
  line-height: 1.35;
}
.ws-program__list li::before {
  content: ''; position: absolute; left: 0; top: 3px;
  width: 18px; height: 16px;
  background: no-repeat left center / 18px 13px
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 13' fill='none'><path d='M2 7L7 11L16 2' stroke='%2341042D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.ws-program__price-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-top: clamp(28px, 4vw, 44px); /* generous gap before price + button (Figma) */
  flex-wrap: wrap; gap: 16px;
}
.ws-program__price {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 40px);
  color: var(--ws-plum);
  line-height: 1;
}
.ws-program__duration {
  font-family: var(--font-body); /* Lora (serif), like the screenshot */
  font-size: 16px;
  color: var(--ws-plum);
  margin-top: 10px;
}
/* "Book a party" — book-party svg.svg: 184×64 pill, 1.5px plum border, and a HARD
   2px plum offset shadow (feOffset dy=2, no blur) = a candy-button lip, not a soft glow. */
.ws-program__cta {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 18px;
  color: var(--ws-plum);
  background: var(--ws-white);
  border: 1.5px solid var(--ws-plum);
  border-radius: var(--r-pill);
  line-height: 1.2;
  padding: 20px 38px; /* ≈ Figma 184×64 pill */
  text-decoration: none;
  box-shadow: 0 2px 0 0 var(--ws-plum);
  transition: transform .15s var(--tx-spring), box-shadow .15s var(--tx-spring), background .2s;
  white-space: nowrap;
}
.ws-program__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 0 0 var(--ws-plum);
}
.ws-program__cta:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 0 var(--ws-plum);
}

/* ── Entertainment slider ─────────────────────────────────── */
/* Kids birthday party entertainment — cream section, convex "hill" divider on top */
.ws-entertainment {
  position: relative;
  background: #F3E3CC; /* Figma section bg */
  padding-top: clamp(48px, 7vw, 92px);
  padding-bottom: clamp(40px, 5vw, 64px);
}
.ws-entertainment::before { /* the cream bulges UP into the section above (a hill/mound) */
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 100%;
  height: clamp(28px, 4vw, 56px);
  background: #F3E3CC;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0 100 C 470 -10 970 -10 1440 100 Z' fill='white'/></svg>") bottom center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0 100 C 470 -10 970 -10 1440 100 Z' fill='white'/></svg>") bottom center / 100% 100% no-repeat;
  pointer-events: none;
}
.ws-entertainment__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 24px;
  margin-bottom: 36px;
}
.ws-entertainment__intro { max-width: 800px; }
.ws-entertainment__head p { color: var(--ws-plum); font-size: var(--fs-lg); margin: 0; line-height: 1.55; }
.ws-entertainment__nav { display: flex; gap: 12px; flex-shrink: 0; }
.ws-entertainment__arrow {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--ws-white);
  color: var(--ws-plum);
  border: 1px solid rgba(64, 0, 40, .15);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px -8px rgba(64,0,40,.18);
  transition: background .2s, transform .2s var(--tx-spring), border-color .2s;
}
.ws-entertainment__arrow:hover {
  background: var(--ws-sky);
  border-color: var(--ws-plum);
  transform: translateY(-1px);
}
.ws-entertainment__arrow[aria-disabled="true"] { opacity: .35; cursor: not-allowed; }

/* Horizontal scroll-snap slider */
.ws-cards {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 60px 0 22px; /* top room for the character pop-out beyond the card */
}
.ws-cards::-webkit-scrollbar { display: none; }
.ws-cards .ws-card {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: min(82vw, 320px);   /* mobile: one readable card + a peek of the next */
}
@media (min-width: 720px) {
  .ws-cards .ws-card { width: calc((100% - 40px) / 3); }
}
@media (min-width: 1024px) {
  .ws-cards .ws-card { width: calc((100% - 60px) / 4); }
}
@media (min-width: 1280px) {
  .ws-cards .ws-card { width: calc((100% - 80px) / 4.5); }
}

/* Progress bar under the slider */
.ws-entertainment__progress {
  position: relative;
  height: 2px;
  background: rgba(64, 0, 40, .15);
  border-radius: 2px;
  margin: 28px auto 0;
  max-width: 720px;
  overflow: hidden;
}
.ws-entertainment__progress-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--ws-plum);
  border-radius: 2px;
  width: 30%;
  transition: width .25s var(--tx-base), transform .25s var(--tx-base);
  transform-origin: left;
}
/* Card = rounded photo (3:2) + title/desc/meta + sky pill button, on the cream
   section (no white box). Matches Figma "slider party". */
/* Card = WHITE card (rounded + shadow) with a colored "stage" at the top; the
   character PNG sits on the stage and pops out the top (3D look). Figma "card". */
.ws-card {
  background: var(--ws-white);
  border-radius: 24px;
  display: flex; flex-direction: column;
  overflow: visible;              /* lets the character image rise above the card */
  padding-bottom: 24px;
  transition: transform .3s var(--tx-spring);
}
.ws-card:hover { transform: translateY(-4px); }

.ws-card__media {
  position: relative;
  margin: 0;                      /* edge-to-edge colour fill (Figma) */
  aspect-ratio: 300 / 200;
  border-radius: 24px 24px 0 0;   /* top corners match the card; flat bottom */
  background: var(--ws-sky);      /* per-card accent colour — set inline */
}
/* Cover mode — a rectangular photo fills the stage (clipped, rounded). */
.ws-card__media--cover { overflow: hidden; }
.ws-card__media--cover img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform .6s var(--tx-base);
}
.ws-card:hover .ws-card__media--cover img { transform: scale(1.05); }
/* Pop-out mode — a transparent character PNG, bottom-anchored + taller than the
   stage so the head rises above it. */
.ws-card__media--pop { overflow: visible; }
.ws-card__media--pop img {
  position: absolute; left: 50%; bottom: 0;
  width: auto; height: 120%; max-width: 115%;  /* rises a bit above the card; capped horizontal spread */
  object-fit: contain; object-position: bottom center;
  transform: translateX(-50%);
  transform-origin: bottom center;   /* scale grows up from the floor, stays anchored */
  filter: drop-shadow(0 12px 16px rgba(64,3,45,.24));
  transition: transform .45s var(--tx-spring);
}
/* No separate lift (avoids double animation with the card) — just gently enlarge. */
.ws-card:hover .ws-card__media--pop img { transform: translateX(-50%) scale(1.06); }

.ws-card__body { padding: 18px 24px 0; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ws-card__title {
  font-family: var(--font-ui);    /* Fredoka Medium — lighter than Fredoka One */
  font-weight: 500;
  font-size: 26px;
  color: var(--ws-plum);
  margin: 0; line-height: 1.1;
}
.ws-card__desc { font-family: var(--font-body); font-size: 16px; color: var(--ws-plum); margin: 0; line-height: 1.55; flex: 1; }
.ws-card__price {
  display: flex; align-items: baseline; gap: 6px;
  font-family: var(--font-ui); color: var(--ws-plum);
  margin-top: 8px;
}
.ws-card__price-from { font-size: 17px; font-weight: 500; }
.ws-card__price-amt  { font-size: 26px; font-weight: 600; }
.ws-card__meta { font-family: var(--font-body); font-size: 16px; color: var(--ws-plum); }
.ws-card__cta {
  margin: 16px 8px 0;
  display: flex; align-items: center; justify-content: center;
  padding: 11px 20px;             /* slimmer → more elongated pill */
  background: #88DDEE;
  color: var(--ws-plum);
  border: 1.5px solid var(--ws-plum);
  border-radius: var(--r-pill);
  box-shadow: 0 3px 0 0 var(--ws-plum);   /* thick plum bottom line (candy lip) */
  font-family: var(--font-ui); font-weight: 600; font-size: 17px;
  cursor: pointer;
  transition: transform .2s var(--tx-spring), box-shadow .2s var(--tx-spring);
}
.ws-card__cta:hover { transform: translateY(-2px); box-shadow: 0 5px 0 0 var(--ws-plum); }
.ws-card__cta:active { transform: translateY(1px); box-shadow: 0 1px 0 0 var(--ws-plum); }

/* ── Modal (entertainment "More info") ───────────────────── */
.ws-modal {
  position: fixed; inset: 0;
  z-index: 200;
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
}
.ws-modal[aria-hidden="false"] { display: flex; animation: ws-modal-in .2s var(--tx-base); }
.ws-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(255, 255, 255, .62);   /* soft frosted white (not plum) */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.ws-modal__panel {
  position: relative;
  background: var(--ws-white);
  border-radius: 28px;
  max-width: 1040px;
  width: 100%;
  max-height: calc(100vh - 48px);
  overflow: auto;
  box-shadow: 0 40px 80px -30px rgba(64,3,45,.5);
  display: flex; flex-direction: column;
  padding: clamp(22px, 3vw, 38px);
  gap: clamp(16px, 2.2vw, 24px);
  animation: ws-modal-pop .25s var(--tx-spring);
}
.ws-modal__close {
  position: absolute; top: 16px; right: 16px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--ws-white);
  color: var(--ws-plum);
  border: 1.5px solid var(--ws-plum);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background .2s, transform .2s var(--tx-spring);
}
.ws-modal__close:hover { background: var(--ws-sky); transform: scale(1.05); }
.ws-modal__head { padding-right: 44px; }
.ws-modal__title {
  font-family: var(--font-display);
  color: var(--ws-plum);
  font-size: clamp(28px, 3.4vw, 40px);
  margin: 0; line-height: 1.05;
}
.ws-modal__subtitle {
  font-family: var(--font-body);
  color: var(--ws-sky-dark);
  font-size: clamp(16px, 1.9vw, 20px);
  margin: 6px 0 0;
}
.ws-modal__cols { display: grid; grid-template-columns: 1fr; gap: clamp(18px, 2.6vw, 34px); align-items: start; }
@media (min-width: 760px) { .ws-modal__cols { grid-template-columns: minmax(0, 430px) 1fr; } }

/* popup gallery slider */
.ws-modal__gallery { position: relative; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; background: var(--ws-cream-soft); }
.ws-modal__gallery-track { position: absolute; inset: 0; }
.ws-modal__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease; }
.ws-modal__slide.is-active { opacity: 1; }
.ws-modal__gnav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.92); color: var(--ws-plum); border: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 6px 16px -6px rgba(64,3,45,.4);
  transition: background .2s, transform .2s var(--tx-spring);
}
.ws-modal__gnav:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.ws-modal__gnav--prev { left: 12px; }
.ws-modal__gnav--next { right: 12px; }
.ws-modal__gdots { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; gap: 6px; justify-content: center; }
.ws-modal__gdot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.55); cursor: pointer; transition: background .2s, transform .2s; }
.ws-modal__gdot.is-active { background: #fff; transform: scale(1.2); }

/* popup info column */
.ws-modal__info { display: flex; flex-direction: column; gap: 10px; }
.ws-modal__desc { font-family: var(--font-body); color: var(--ws-plum); font-size: 16px; line-height: 1.6; margin: 0; }
.ws-modal__included-title { font-family: var(--font-body); font-weight: 700; color: var(--ws-plum); font-size: 17px; margin-top: 4px; }
.ws-modal__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ws-modal__list li { position: relative; padding-left: 28px; color: var(--ws-plum); font-family: var(--font-body); font-size: 16px; line-height: 1.4; }
.ws-modal__list li::before {
  content: ''; position: absolute; left: 0; top: 3px; width: 18px; height: 13px;
  background: no-repeat left center / 18px 13px
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 13' fill='none'><path d='M2 7L7 11L16 2' stroke='%2341042D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.ws-modal__closing { font-family: var(--font-body); font-weight: 700; color: var(--ws-plum); font-size: 16px; line-height: 1.5; margin-top: 6px; }
.ws-modal__metaline { font-family: var(--font-ui); color: var(--ws-plum-soft); font-size: 15px; margin-top: 4px; }

/* rates / extras / book banner */
.ws-modal__banner {
  background: #F8EEA6;
  border-radius: 22px;
  padding: clamp(18px, 2.4vw, 28px);
  display: grid; grid-template-columns: 1fr; gap: 18px; align-items: center;
}
@media (min-width: 760px) { .ws-modal__banner { grid-template-columns: 1fr 1fr auto; gap: 28px; } }
.ws-modal__banner-title { font-family: var(--font-ui); font-weight: 700; color: var(--ws-plum); font-size: 18px; margin-bottom: 8px; }
.ws-modal__rates { position: relative; }
@media (min-width: 760px) { .ws-modal__rates::after { content: ''; position: absolute; top: 2px; bottom: 2px; right: -14px; width: 2px; background: rgba(64,3,45,.18); } }
.ws-modal__rate { color: var(--ws-plum); font-family: var(--font-body); font-size: 16px; line-height: 1.6; }
.ws-modal__rate strong { font-weight: 700; }
.ws-modal__book {
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  background: #88DDEE; color: var(--ws-plum);
  font-family: var(--font-ui); font-weight: 600; font-size: 18px;
  padding: 14px 30px; border-radius: var(--r-pill);
  text-decoration: none; cursor: pointer;
  border: 1.5px solid var(--ws-plum);
  box-shadow: 0 3px 0 0 var(--ws-plum);   /* sky candy button (site style) */
  transition: transform .2s var(--tx-spring), box-shadow .2s var(--tx-spring);
}
.ws-modal__book:hover { transform: translateY(-2px); box-shadow: 0 5px 0 0 var(--ws-plum); }
.ws-modal__book:active { transform: translateY(1px); box-shadow: 0 1px 0 0 var(--ws-plum); }

/* shared RATES grid + EXTRAS — compact two-column banner (table left, extras right, CTA below) */
.ws-modal__banner--table { grid-template-columns: 1fr; justify-items: center; gap: 12px 28px; padding: clamp(16px, 2vw, 24px); }
@media (min-width: 720px) {
  .ws-modal__banner--table {
    grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
    align-items: start;
    justify-items: start;
    column-gap: 30px;
    row-gap: 14px;
  }
  .ws-modal__banner--table .ws-modal__extras .ws-modal__banner-title { text-align: left; }
}
/* right column: EXTRAS + the Book button stacked. The button sits directly under
   EXTRAS, filling the space the taller table leaves — so the banner is only as
   tall as the table (no separate full-width button row). */
.ws-modal__side { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; min-width: 0; }
.ws-modal__side .ws-modal__book { margin-top: 2px; }
/* min-width:0 lets both columns shrink inside the capped modal panel (no overflow) */
.ws-modal__banner--table .ws-modal__rate-grid,
.ws-modal__banner--table .ws-modal__side { min-width: 0; }
.ws-modal__rate-grid { width: 100%; max-width: 440px; }
.ws-modal__banner--table .ws-modal__banner-title { text-align: center; margin-bottom: 6px; }
.ws-rate-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 6px;
  table-layout: fixed;
  font-family: var(--font-ui);
}
.ws-rate-table th, .ws-rate-table td {
  border-radius: 11px;
  padding: 7px 5px;
  text-align: center;
  line-height: 1.12;
}
.ws-rate-table thead th, .ws-rate-table tbody th {
  background: #88DDEE;
  color: var(--ws-plum);
  font-weight: 700;
  font-size: 13px;
}
.ws-rate-table__corner { background: transparent !important; }
.ws-rate-table td {
  background: #fff;
  color: var(--ws-plum);
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 1px 0 rgba(64,3,45,.05);
}
.ws-rate-table__na { color: rgba(64,3,45,.32); font-weight: 600; }
.ws-modal__banner--table .ws-modal__extras .ws-modal__rate { font-size: 15px; line-height: 1.5; }
@media (max-width: 520px) {
  .ws-rate-table { border-spacing: 5px; }
  .ws-rate-table th, .ws-rate-table td { padding: 6px 3px; border-radius: 9px; }
  .ws-rate-table thead th, .ws-rate-table tbody th { font-size: 12px; }
  .ws-rate-table td { font-size: 14px; }
}

@keyframes ws-modal-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ws-modal-pop {
  from { opacity: 0; transform: translateY(20px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Decorations cards (2 large) ─────────────────────────── */
.ws-decorations__head { text-align: center; max-width: 760px; margin: 0 auto 36px; }
.ws-decorations__head p { color: var(--ws-ink-soft); font-size: var(--fs-lg); }
/* Decorations — cream section, layered photo slider + fixed white info block */
.ws-decorations { position: relative; padding-bottom: clamp(92px, 10vw, 140px); }
/* Decorations gallery — one large photo + a thumbnail strip to browse every photo. */
.ws-decogallery { display: flex; flex-direction: column; gap: clamp(44px, 5.5vw, 72px); max-width: 720px; margin-inline: auto; }

.ws-decogal { position: relative; }
.ws-decogal__stage { position: relative; margin-bottom: clamp(26px, 3.2vw, 44px); }

.ws-decogal__frame {
  position: relative;
  aspect-ratio: 4 / 3;                          /* full photo via contain + soft blurred fill */
  border-radius: 28px; overflow: hidden;
  background: var(--ws-cream-soft);
  box-shadow: 0 0 0 3px #fff, 0 26px 48px -30px rgba(64,3,45,.34);
}
.ws-decogal__track { position: absolute; inset: 0; }
.ws-decogal__ph { position: absolute; inset: 0; background: linear-gradient(135deg, var(--ws-sky-soft), var(--ws-pink)); }
.ws-decogal__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.ws-decogal__slide.is-active { opacity: 1; }
.ws-decogal__blur { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.15); filter: blur(22px) brightness(.92) saturate(1.05); }
.ws-decogal__img  { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

.ws-decogal__info {                            /* compact white block over the photo bottom */
  position: absolute; left: clamp(14px, 1.8vw, 24px); right: clamp(14px, 1.8vw, 24px); bottom: clamp(14px, 1.8vw, 22px); z-index: 2;
  background: var(--ws-white);
  border-radius: 18px;
  padding: clamp(11px, 1.3vw, 15px) clamp(16px, 2vw, 24px);
  box-shadow: 0 16px 30px -22px rgba(64,3,45,.32);
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.ws-decogal__name { margin: 0; font-family: var(--font-ui); font-weight: 500; font-size: clamp(20px, 2.2vw, 27px); color: var(--ws-plum); line-height: 1.05; }
.ws-decogal__desc { margin: 3px 0 0; font-family: var(--font-body); font-size: clamp(13px, 1vw, 15px); line-height: 1.4; color: var(--ws-ink-soft); max-width: 52ch; }
.ws-decogal__info-side { display: flex; flex-direction: row; align-items: center; gap: 14px; flex-shrink: 0; }
.ws-decogal__price { display: flex; align-items: baseline; gap: 6px; font-family: var(--font-ui); color: var(--ws-plum); white-space: nowrap; }
.ws-decogal__price-from { font-size: 15px; font-weight: 500; }
.ws-decogal__price-amt  { font-size: clamp(20px, 2vw, 26px); font-weight: 600; }
.ws-decogal__nav { display: flex; gap: 9px; }
.ws-decogal__nav button {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--ws-sky); color: var(--ws-plum); border: 1.5px solid var(--ws-plum); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 0 0 var(--ws-plum);
  transition: transform .15s var(--tx-spring), background .2s;
}
.ws-decogal__nav button:hover { background: var(--ws-sky-dark); }
.ws-decogal__nav button:active { transform: translateY(3px); box-shadow: 0 0 0 0 var(--ws-plum); }

.ws-decogal__thumbs { display: grid; grid-template-columns: repeat(auto-fit, minmax(62px, 84px)); justify-content: center; gap: clamp(8px, 1vw, 12px); }
.ws-decogal__thumb {
  position: relative; aspect-ratio: 1; border-radius: 16px; overflow: hidden; cursor: pointer;
  padding: 0; border: 3px solid transparent; background: var(--ws-cream-soft);
  box-shadow: 0 0 0 1.5px rgba(64,3,45,.12);
  transition: transform .15s var(--tx-spring), border-color .2s, box-shadow .2s;
}
.ws-decogal__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ws-decogal__thumb:hover { transform: translateY(-3px); }
.ws-decogal__thumb.is-active { border-color: var(--ws-sky-dark); box-shadow: 0 0 0 2px var(--ws-sky-dark), 0 10px 20px -12px rgba(64,3,45,.5); }
.ws-decogal__thumb:focus-visible { outline: 2px solid var(--ws-plum); outline-offset: 2px; }

@media (max-width: 760px) {
  .ws-decogal__info { flex-direction: column; align-items: flex-start; gap: 10px; }
  .ws-decogal__info-side { width: 100%; justify-content: space-between; }
}

/* Phones: the desktop overlay covered the photo on small screens. Stack the
   white info card BELOW the photo instead — photo (4:3 card) on top, info card
   under it, both rounded. The thumbnail strip stays below as before. */
@media (max-width: 600px) {
  .ws-decogal__frame {
    aspect-ratio: auto;
    overflow: visible;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
  }
  .ws-decogal__track {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 24px;
    overflow: hidden;
    background: var(--ws-cream-soft);
    box-shadow: 0 0 0 3px #fff, 0 20px 40px -28px rgba(64,3,45,.34);
  }
  .ws-decogal__info {
    position: static;
    margin-top: 14px;
    box-shadow: 0 14px 30px -24px rgba(64,3,45,.30), 0 0 0 1.5px rgba(64,3,45,.06);
  }
}

/* Hammock (∪) divider blending into the sky "Our works" section below */
.ws-decorations::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: clamp(44px, 5vw, 80px);
  background: var(--ws-sky);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0 0 C 460 92 980 92 1440 0 L1440 100 L0 100 Z' fill='white'/></svg>") top center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0 0 C 460 92 980 92 1440 0 L1440 100 L0 100 Z' fill='white'/></svg>") top center / 100% 100% no-repeat;
  pointer-events: none; z-index: 0;
}

/* ── Works gallery (sky bg, double-row marquee) ──────────── */
.ws-works {
  background: var(--ws-sky);
  color: var(--ws-plum);
  overflow: hidden;
  position: relative;
}
.ws-works__head { text-align: center; max-width: 880px; margin: 0 auto 40px; padding: 0 var(--gutter); }
.ws-works__head h2 { color: var(--ws-plum); }
.ws-works__head p { color: var(--ws-plum); font-size: var(--fs-lg); line-height: 1.55; }

.ws-marquee { display: flex; flex-direction: column; gap: 18px; }
.ws-marquee__row {
  display: flex;
  overflow: hidden;                               /* JS animates the track via transform */
  cursor: grab; touch-action: pan-y;              /* vertical = page scroll, horizontal = drag */
  padding: 10px 0;                                /* room for the white frame */
  /* Mask out edges so images fade in/out smoothly */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.ws-marquee__row.is-grabbing { cursor: grabbing; }
.ws-marquee__track {
  display: flex; flex-shrink: 0; gap: 18px; width: max-content;
  /* GPU-composited transform = sub-pixel smooth, no scrollLeft rounding jitter */
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}
.ws-marquee__item {
  flex: 0 0 auto;
  width: 280px;
  aspect-ratio: 4 / 3;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 0 0 3px #fff, 0 10px 22px -12px rgba(64,3,45,.30);  /* 3px white frame */
}
.ws-marquee__item img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  pointer-events: none; /* so drag works over the photos */
}
@media (min-width: 720px)  { .ws-marquee__item { width: 320px; } }
@media (min-width: 1024px) { .ws-marquee__item { width: 360px; } }

/* ── Reviews (sky bg, per Figma) ─────────────────────────── */
.ws-reviews {
  background: var(--ws-sky);
  position: relative;
  padding-bottom: clamp(64px, 8vw, 104px);
}
.ws-reviews > .ws-container { position: relative; z-index: 2; }
.ws-reviews h2 { color: var(--ws-plum); }
.ws-reviews__layout {
  display: grid; grid-template-columns: 1fr; gap: 32px;
  align-items: start;
}

/* Google rating card (Figma: 312×432, #FAF8F5, soft plum shadow) */
.ws-google {
  background: var(--ws-surface);
  border-radius: 32px;
  padding: 40px 32px 32px;
  text-align: center;
  box-shadow: 0 8px 48px rgba(64, 4, 45, .10);
  align-self: start;
  display: flex; flex-direction: column; align-items: center;
  gap: 26px;
}
/* "5.0" — Fredoka (regular), NOT Fredoka One: the heavy display face read as
   chunky vs Figma. Lighter weight + open tracking matches the macOS-clean look. */
.ws-google__rating { font-family: var(--font-ui); font-weight: 500; font-size: clamp(68px, 7.5vw, 88px); color: var(--ws-plum); line-height: 1; letter-spacing: .5px; }
.ws-google__stars { color: var(--ws-orange); font-size: 24px; letter-spacing: 6px; }
.ws-google__count { font-family: var(--font-ui); font-weight: 400; color: var(--ws-plum); font-size: 18px; }
.ws-google__logo { display: flex; justify-content: center; }
.ws-google__logo svg { width: 104px; height: auto; display: block; }
.ws-google__btn {
  display: block; width: 100%;
  font-family: var(--font-ui); font-weight: 500; font-size: 16px;
  color: var(--ws-plum); text-align: center; text-decoration: none;
  background: var(--ws-sky);
  border: 1.5px solid var(--ws-plum);
  border-radius: var(--r-pill);
  padding: 17px 24px;
  box-shadow: 0 3px 0 0 var(--ws-plum);             /* hard candy lip */
  transition: transform .14s var(--tx-spring), box-shadow .14s var(--tx-spring);
}
.ws-google__btn:hover  { transform: translateY(-1px); box-shadow: 0 4px 0 0 var(--ws-plum); }
.ws-google__btn:active { transform: translateY(2px);  box-shadow: 0 1px 0 0 var(--ws-plum); }

/* Mobile: compact, HORIZONTAL rating cluster — the big "5.0" sits beside the
   stars + count (like Google's own widget), with the logo + full-width button
   below. Roughly halves the card height vs the stacked layout (client feedback). */
@media (max-width: 600px) {
  .ws-google {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    justify-items: start;
    column-gap: 16px;
    row-gap: 2px;
    text-align: left;
    padding: 22px 24px 24px;
    border-radius: 28px;
  }
  .ws-google__rating { grid-column: 1; grid-row: 1 / span 2; align-self: center; font-size: 52px; letter-spacing: 0; line-height: .9; }
  .ws-google__stars  { grid-column: 2; grid-row: 1; align-self: end;   font-size: 22px; letter-spacing: 4px; }
  .ws-google__count  { grid-column: 2; grid-row: 2; align-self: start; font-size: 14px; color: var(--ws-muted); }
  .ws-google__logo   { grid-column: 1 / -1; grid-row: 3; justify-self: center; margin-top: 14px; }
  .ws-google__logo svg { width: 84px; }
  .ws-google__btn    { grid-column: 1 / -1; grid-row: 4; width: 100%; margin-top: 12px; padding: 14px 24px; }
}

/* Testimonials: a card-less list separated by thin hairlines (per Figma) */
.ws-testimonials { display: block; }
.ws-testimonial { padding: 32px 0; border-top: 1px solid rgba(64, 0, 40, .14); }
.ws-testimonial:first-child { border-top: 0; padding-top: 4px; }
.ws-testimonial__head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.ws-testimonial__avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--ws-sky-soft);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  color: var(--ws-plum);
  font-size: 22px;
  overflow: hidden; flex-shrink: 0;
}
.ws-testimonial__avatar img { width: 100%; height: 100%; object-fit: cover; }
.ws-testimonial__name { font-family: var(--font-display); color: var(--ws-plum); font-size: 20px; line-height: 1.2; }
.ws-testimonial__role { font-family: var(--font-ui); color: var(--ws-muted); font-size: 14px; margin-top: 2px; }
.ws-testimonial__stars { color: var(--ws-plum); letter-spacing: 4px; margin-bottom: 14px; font-size: 20px; }
.ws-testimonial__text { font-family: var(--font-body); font-size: 16px; line-height: 1.65; color: var(--ws-plum); margin: 0; max-width: 64ch; }

/* ── Booking section ("We create impressions") ───────────── */
/* Figma: full-bleed party photo background + gradient overlay, white form card on top. */
.ws-booking {
  position: relative;
  isolation: isolate;
  padding-top: clamp(80px, 10vw, 160px);
  padding-bottom: clamp(40px, 6vw, 80px);
  background-image: var(--ws-booking-bg, none);
  background-size: cover;
  background-position: center;
  color: var(--ws-plum);
}
.ws-booking > .ws-container { position: relative; z-index: 2; }
.ws-booking::before {
  content: '';
  position: absolute; inset: 0;
  /* deep plum bottom — the photo melts down into the plum footer */
  background: linear-gradient(180deg, transparent 50%, rgba(64, 0, 40, .30) 72%, rgba(64, 0, 40, .74) 90%, var(--ws-plum) 100%);
  z-index: -1;
  pointer-events: none;
}
/* Hammock (∪): the sky from Reviews dips into the photo at the top, so the photo
   itself is cut on the arc ("фотография идёт дугой"). Same sky as the section above. */
.ws-booking::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: clamp(48px, 6vw, 96px);
  background: var(--ws-sky);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0 0 H1440 V8 C 980 92 460 92 0 8 Z' fill='white'/></svg>") top center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0 0 H1440 V8 C 980 92 460 92 0 8 Z' fill='white'/></svg>") top center / 100% 100% no-repeat;
  z-index: 1; pointer-events: none;
}
.ws-booking__inner {
  position: relative;
  background: var(--ws-white);
  border-radius: 32px;
  padding: clamp(28px, 4vw, 48px);
  box-shadow: 0 16px 64px rgba(30, 67, 107, .12);
  /* Mobile-first conversion order: promise (head) → form (action) → founder/trust (about).
     DOM order matches this, so the form is never buried under the bio on small screens. */
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "head"
    "form"
    "about";
  gap: 32px;
  align-items: start;
}
.ws-booking__head  { grid-area: head;  }
.ws-form           { grid-area: form;  }
.ws-booking__about { grid-area: about; }
/* >=720px: restore the original two-column look — intro stack (head over about) on the
   left, form spanning the right column. Row-gap is kept tight so the H2→bio rhythm matches
   the pre-split single-column intro; the large gap is column-only (intro ↔ form). */
@media (min-width: 720px) {
  .ws-booking__inner {
    grid-template-columns: 1fr 1.2fr;
    grid-template-areas:
      "head  form"
      "about form";
    grid-template-rows: auto 1fr;
    gap: 18px 48px;
  }
  .ws-booking__about { align-self: start; }
}
@media (min-width: 960px) {
  .ws-booking__inner {
    grid-template-columns: 472px 1fr;
    gap: 18px 96px;
    padding: 48px;
  }
}
.ws-booking__head h2 { font-size: clamp(36px, 5vw, 48px); line-height: 1.15; margin-bottom: 0; color: var(--ws-plum); }
.ws-booking__about p { color: var(--ws-plum); font-size: 18px; line-height: 32px; max-width: 472px; }
.ws-booking__about p + p { margin-top: 18px; }
.ws-founder {
  display: flex; align-items: center; gap: 24px;
  margin-top: 28px;
}
.ws-founder__pic {
  width: 160px; height: 160px; border-radius: 50%;
  background: var(--ws-pink-dark); overflow: hidden; flex-shrink: 0;
}
.ws-founder__pic img { width: 100%; height: 100%; object-fit: cover; }
.ws-founder__name { font-family: var(--font-display); color: var(--ws-plum); font-size: 28px; line-height: 1.05; margin-bottom: 6px; }
.ws-founder__role { font-family: var(--font-ui); color: var(--ws-muted); font-size: 16px; }
.ws-form {
  /* Unified single white surface — flush on the booking card, no nested card. */
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}
.ws-form__grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
.ws-input, .ws-textarea {
  width: 100%;
  font: 400 18px/1.33 var(--font-body);
  color: var(--ws-plum);
  background: rgba(243, 227, 204, .2);
  border: 1px solid rgba(65, 4, 45, .5);
  border-radius: 16px;
  padding: 24px;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.ws-input:focus, .ws-textarea:focus {
  outline: none;
  border-color: var(--ws-plum);
  background: rgba(243, 227, 204, .35);
  box-shadow: 0 0 0 3px rgba(128, 216, 232, .35);
}

/* ── Accessibility: skip link + global keyboard focus ring ─────────── */
.ws-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  padding: 12px 18px;
  background: var(--ws-plum);
  color: var(--ws-white);
  font: 600 16px/1 var(--font-ui);
  text-decoration: none;
  border-radius: 0 0 12px 0;
}
.ws-skip-link:focus {
  left: 16px;
  top: 16px;
  border-radius: 12px;
  outline: 3px solid var(--ws-sky);
  outline-offset: 2px;
}
/* Visible focus ring for keyboard users on all interactive elements.
   Form fields keep their bespoke ring above (outline:none + box-shadow). */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible,
.ws-btn:focus-visible,
.ws-nav a:focus-visible,
.ws-header__cta:focus-visible {
  outline: 3px solid var(--ws-sky);
  outline-offset: 2px;
  border-radius: 4px;
}
.ws-input::placeholder, .ws-textarea::placeholder { color: var(--ws-plum); opacity: .55; }
.ws-textarea { min-height: 200px; resize: vertical; }
.ws-form__row { display: contents; }
.ws-form__submit-row {
  display: flex; justify-content: stretch;
  margin-top: 8px;
}
.ws-form__submit-row > button {
  /* Send request button — Figma: full-width sky pill with plum border + 2px solid drop shadow */
  width: 100%;
  background: var(--ws-sky);
  color: var(--ws-plum);
  border: 1.5px solid var(--ws-plum);
  border-radius: 64px;
  padding: 20px 40px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 18px;
  box-shadow: 0 2px 0 var(--ws-plum);
  cursor: pointer;
  transition: transform .15s var(--tx-spring), box-shadow .15s var(--tx-base);
}
.ws-form__submit-row > button:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 0 var(--ws-plum);
}
.ws-form__submit-row > button:active {
  transform: translateY(1px);
  box-shadow: 0 0 0 var(--ws-plum);
}
.ws-form__msg { padding: 12px 16px; border-radius: var(--r-md); font-size: 14px; margin-bottom: 12px; }
.ws-form__msg--ok { background: rgba(128,216,232,.25); color: var(--ws-plum); border: 1px solid var(--ws-sky-dark); }
.ws-form__msg--err { background: rgba(248,192,216,.4); color: var(--ws-plum-soft); border: 1px solid var(--ws-pink-dark); }
.ws-booking__connect {
  margin-top: 28px; padding-top: 24px;
  border-top: 1px solid rgba(64, 0, 40, .12);
  display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
}
.ws-socials { display: flex; gap: 16px; }
.ws-socials a { color: var(--ws-plum); display: inline-flex; transition: color .2s, transform .2s var(--tx-spring); }
.ws-socials a:hover { color: var(--ws-orange); transform: translateY(-2px); }
.ws-email {
  color: var(--ws-plum); font-family: var(--font-ui); font-weight: 600; font-size: 18px;
  text-decoration: underline; text-decoration-color: var(--ws-orange);
  text-underline-offset: 5px; text-decoration-thickness: 2px;
}
.ws-email:hover { text-decoration-color: var(--ws-plum); }
.ws-phone { color: var(--ws-plum); font-family: var(--font-ui); font-weight: 600; font-size: 18px; }
.ws-phone:hover { color: var(--ws-orange); }

/* ── Booking: mobile conversion polish (single column, < two-col breakpoint) ─────
   Order is head → form → about. Here we make the trust block readable & tappable
   without altering the desktop two-column layout above. */
@media (max-width: 719px) {
  /* The "about" trust block reads as a distinct, calmer section below the form. */
  .ws-booking__about {
    margin-top: 4px;
    padding-top: 28px;
    border-top: 1px solid rgba(64, 0, 40, .12);
  }
  /* Founder: smaller portrait so the name/role sit neatly beside it on narrow screens. */
  .ws-founder { gap: 18px; margin-top: 22px; }
  .ws-founder__pic { width: 96px; height: 96px; }
  .ws-founder__name { font-size: 24px; }
  /* The connect block no longer needs its own divider (about already has one). */
  .ws-booking__connect { margin-top: 22px; padding-top: 22px; }
  /* Comfortable, >=44px tap targets for email / phone / social icons. */
  .ws-booking__connect .ws-email,
  .ws-booking__connect .ws-phone {
    display: inline-flex; align-items: center;
    min-height: 44px;
  }
  .ws-socials { gap: 12px; }
  .ws-socials a {
    width: 44px; height: 44px;
    align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(135, 221, 237, .18);
  }
}

/* ── Footer ──────────────────────────────────────────────── */
.ws-footer {
  background: var(--ws-plum);
  color: rgba(255,255,255,.85);
  padding: clamp(48px, 7vw, 72px) 0 24px;
  font-family: var(--font-ui);
}
.ws-footer__grid {
  display: grid; grid-template-columns: 1fr; gap: 32px;
  margin-bottom: 32px;
}
.ws-footer h4 { color: var(--ws-white); font-family: var(--font-display); font-size: 18px; margin: 0 0 14px; }
.ws-footer a { color: rgba(255,255,255,.78); transition: color .2s; }
.ws-footer a:hover { color: var(--ws-sky); }
.ws-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.ws-footer__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; color: var(--ws-white); font-family: var(--font-ui); font-weight: 700; text-transform: uppercase; font-size: 18px; letter-spacing: .04em; }
.ws-footer__brand .ws-logo__mark { width: 50px; height: 35px; filter: brightness(1.1); }
.ws-footer__brand-text { display: inline-flex; flex-direction: column; line-height: 1.05; }
.ws-footer__about { color: rgba(255,255,255,.70); font-size: 14px; max-width: 320px; line-height: 1.6; }
.ws-footer__contact { display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: rgba(255,255,255,.78); }
.ws-footer__contact a { color: rgba(255,255,255,.92); }
.ws-footer__social { display: flex; gap: 10px; margin-top: 14px; }
.ws-footer__social a {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
}
.ws-footer__social a:hover { background: var(--ws-sky); color: var(--ws-plum); }
.ws-footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 14px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.10);
  font-size: 13px;
  color: rgba(255,255,255,.55);
}
.ws-footer__bottom a:hover { color: var(--ws-sky); }

/* ── Service / legal page wrapper ────────────────────────── */
.ws-page {
  background: var(--ws-cream);
  padding: clamp(64px, 8vw, 112px) 0 var(--section-y);
}
.ws-page__inner {
  max-width: 820px;
  margin: 0 auto;
  background: var(--ws-white);
  padding: clamp(28px, 4vw, 52px);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-soft);
}
.ws-page__inner h1 { font-size: clamp(32px, 4.5vw, 48px); margin-bottom: 24px; }
.ws-page__inner h2 { margin-top: 36px; }
.ws-page__inner h3 { margin-top: 24px; }
.ws-page__inner p, .ws-page__inner li { color: var(--ws-ink-soft); font-size: 16px; line-height: 1.75; }
.ws-page__inner ul, .ws-page__inner ol { padding-left: 22px; }
.ws-page__inner a { color: var(--ws-plum); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ws-sky); }
.ws-page__inner a:hover { text-decoration-color: var(--ws-plum); }

/* ── Blog list / post ────────────────────────────────────── */
.ws-blog { padding: clamp(64px, 7vw, 96px) 0; }
.ws-blog__head { text-align: center; margin-bottom: 40px; }
.ws-blog__head h1 { margin-bottom: 12px; }
.ws-bloglist { display: grid; grid-template-columns: 1fr; gap: 22px; }
.ws-blogcard {
  background: var(--ws-white); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-soft);
  display: flex; flex-direction: column;
  transition: transform .3s var(--tx-spring), box-shadow .3s var(--tx-base);
}
.ws-blogcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-pop); }
.ws-blogcard__media { aspect-ratio: 16/10; overflow: hidden; background: var(--ws-cream-soft); }
.ws-blogcard__media img { width: 100%; height: 100%; object-fit: cover; }
.ws-blogcard__body { padding: 22px 22px 26px; }
.ws-blogcard__cat { display: inline-block; font-family: var(--font-ui); font-size: 12px; color: var(--ws-plum); background: var(--ws-sky-soft); padding: 4px 10px; border-radius: var(--r-pill); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px; }
.ws-blogcard h3 { font-size: 20px; margin: 0 0 8px; }
.ws-blogcard__excerpt { color: var(--ws-ink-soft); font-size: 15px; margin: 0; }
.ws-blogcard__meta { font-family: var(--font-ui); font-size: 12px; color: var(--ws-muted); margin-top: 12px; }

.ws-post { background: var(--ws-cream); padding: clamp(64px, 8vw, 96px) 0; }
.ws-post__article { max-width: 760px; margin: 0 auto; }
.ws-post__hero { aspect-ratio: 16/9; border-radius: var(--r-lg); overflow: hidden; margin-bottom: 28px; box-shadow: var(--shadow-soft); }
.ws-post__hero img { width: 100%; height: 100%; object-fit: cover; }
.ws-post__title { font-size: clamp(32px, 4.4vw, 48px); margin-bottom: 14px; }
.ws-post__meta { font-family: var(--font-ui); color: var(--ws-muted); margin-bottom: 30px; font-size: 14px; }
.ws-post__body { background: var(--ws-white); padding: clamp(24px, 4vw, 48px); border-radius: var(--r-xl); box-shadow: var(--shadow-soft); }
.ws-post__body p, .ws-post__body li { font-size: 17px; line-height: 1.75; color: var(--ws-ink-soft); }
.ws-post__body h2, .ws-post__body h3 { margin-top: 28px; }
.ws-post__body img { border-radius: var(--r-md); margin: 14px 0; }

/* ── Responsive ──────────────────────────────────────────── */
@media (min-width: 720px) {
  .ws-features__grid { grid-template-columns: repeat(4, 1fr); }
  .ws-cards          { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .ws-gallery        { grid-template-columns: repeat(3, 1fr); }
  .ws-form__grid     { grid-template-columns: 1fr 1fr; }
  .ws-form__textarea-wrap { grid-column: 1 / -1; }
  .ws-bloglist       { grid-template-columns: 1fr 1fr; }
  .ws-program        { grid-template-columns: 1.15fr 1fr; padding: clamp(36px, 4.5vw, 56px); gap: clamp(32px, 4vw, 56px); }
  .ws-program--reverse { grid-template-columns: 1fr 1.15fr; }
  .ws-program--reverse .ws-program__media { order: -1; } /* photo LEFT, text RIGHT */
  .ws-reviews__layout { grid-template-columns: 312px 1fr; gap: clamp(48px, 6vw, 96px); }
  /* Match the Figma card exactly: 312×432, content distributed top→bottom */
  .ws-google { min-height: 432px; padding: 44px 32px 36px; justify-content: space-between; }
  /* .ws-booking__inner two-column layout is defined with its grid-template-areas above. */
  .ws-footer__grid    { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
}
@media (min-width: 960px) {
  .ws-hero__inner   { grid-template-columns: 1fr 1.05fr; gap: 60px; align-items: center; }
  .ws-cards         { grid-template-columns: repeat(3, 1fr); }
  .ws-gallery       { grid-template-columns: repeat(4, 1fr); }
  .ws-bloglist      { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1180px) {
  .ws-cards { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 880px) {
  /* Mobile pill = logo · Book a party · burger. Nav + socials move into the drawer.
     Sizes tuned so logo + CTA + burger always fit INSIDE the pill (the burger no
     longer overflows past the rounded right edge). */
  .ws-nav, .ws-social { display: none; }
  .ws-burger { display: flex; width: 40px; height: 40px; }
  .ws-header__island { gap: 10px; justify-content: space-between; padding: 8px 10px 8px 16px; min-width: 0; }
  .ws-logo { flex: 0 1 auto; min-width: 0; }
  .ws-logo__mark { width: 50px; height: 36px; }
  .ws-logo__wordmark { font-size: 15px; }
  .ws-header__right { gap: 8px; margin-left: 0; flex: 0 0 auto; }
  .ws-header__cta { display: inline-flex; padding: 9px 16px; font-size: 14px; flex: 0 0 auto; }
}
@media (max-width: 400px) {
  .ws-logo__wordmark { display: none; }      /* very small phones: logo mark only, keeps the CTA roomy */
  .ws-header__cta { padding: 10px 16px; }
}

/* ── Motion: reduced ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

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