/* Smile Factory, brand at full volume.
   Idea: the logo's own world, blown up into a party. Its signature
   "Less screen. More wonder." is set big in the mark's rounded letters,
   and the result children leave with, a painted, smiling face, sits
   inside the mark's orange smile, drawn exactly as the logo draws it.
   Ground: warm butter, so all four logo colours read on it.
   Purple leads (type, the button, deep bands); pink carries the second
   half of every two-part heading; orange is the smile and the sparkle;
   teal is drawn detail and small links. Lead message: wonder brought to
   your child's party, shaped around your group. */

/* ---------- tokens ---------- */
:root {
  --ground: #fff4dc;
  --ground-deep: #fbe7bf;
  --paper: #ffffff;
  --ink: #2e2236;
  --ink-soft: #5b4d63;
  --purple: #6d2788;
  --purple-deep: #561d6c;
  --purple-night: #3d1450;
  --pink: #c4307f;
  --pink-bright: #df46a4;
  --pink-soft: #fde3f0;
  --orange: #f5a13b;
  --orange-light: #ffbe6b;
  --teal: #44c4c0;
  --teal-deep: #0e6866;
  --teal-soft: #dcf4f2;
  --on-dark: #fff4dc;
  --on-dark-line: rgba(255, 244, 220, .2);
  --on-dark-edge: rgba(255, 244, 220, .5);
  --on-dark-wash: rgba(255, 244, 220, .12);
  --line: #e6d6b8;

  --font: 'Baloo 2', 'Arial Rounded MT Bold', 'Trebuchet MS', system-ui, sans-serif;

  --s1: .5rem; --s2: .75rem; --s3: 1rem; --s4: 1.5rem; --s5: 2rem; --s6: 3rem; --s7: 4.5rem; --s8: 6.5rem;
  --t-xs: .85rem; --t-sm: .95rem; --t-md: 1.0625rem; --t-body: 1.125rem;
  --t-lede: clamp(1.15rem, 1rem + .5vw, 1.4rem);
  --t-h3: clamp(1.45rem, 1.2rem + .8vw, 1.85rem);
  --t-h2: clamp(2.3rem, 1.3rem + 3.2vw, 4rem);
  --t-h1: clamp(2.8rem, 1.2rem + 4.6vw, 5.4rem);
  --t-sig: clamp(3.4rem, 1rem + 5.6vw, 6.6rem);
  --lh-body: 1.6;

  --r-btn: 18px; --r-sm: 10px; --r-card: 28px; --r-pill: 999px;
  --pad: clamp(1.25rem, 4vw, 4rem);
  --w-max: 1240px;
  --w-text: 40rem;
  --shadow: 0 14px 40px rgba(61, 20, 80, .12);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--ground); color: var(--ink); font-family: var(--font); font-size: var(--t-body); font-weight: 500; line-height: var(--lh-body); overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 var(--s3); }
h1, h2, h3, h4 { margin: 0; font-weight: 800; line-height: 1; letter-spacing: -.015em; }
:focus-visible { outline: 3px solid var(--purple); outline-offset: 4px; border-radius: 6px; }
.skip { position: absolute; left: var(--s3); top: -4rem; background: var(--purple); color: var(--paper); padding: var(--s2) var(--s3); border-radius: var(--r-sm); z-index: 20; }
.skip:focus { top: var(--s3); }
/* drawn filters a page refers to, taking no room */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- header ---------- */
.top { position: relative; z-index: 5; display: flex; align-items: center; gap: var(--s5); padding: var(--s5) var(--pad) var(--s3); max-width: 1440px; margin: 0 auto; }
/* the logo on a white circle, as on the printed flyer; the mark nudged so its words and smile sit at the centre */
.brand { --brand-size: 136px; flex: none; display: inline-grid; place-items: center; width: var(--brand-size); aspect-ratio: 1; border-radius: 50%; background: var(--paper); box-shadow: var(--shadow); }
.brand .brand__mark { --w: calc(var(--brand-size) * .74); }
/* every circle holds the mark a touch right and down, so it looks centred to the eye */
.brand__mark { --w: 150px; display: block; width: var(--w); translate: 3% 4%; }
.brand__mark img { width: 100%; height: auto; }
.nav { display: flex; gap: var(--s4); margin-left: auto; font-weight: 600; font-size: var(--t-md); }
.nav a { text-decoration: none; padding: var(--s1) 0; color: var(--ink); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--purple); text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 3px; text-underline-offset: 6px; }

.menu { display: none; margin-left: auto; position: relative; }
.menu summary { list-style: none; cursor: pointer; width: 48px; height: 48px; border-radius: 14px; background: var(--purple); display: grid; place-content: center; gap: 5px; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary span { display: block; width: 22px; height: 3px; border-radius: 2px; background: var(--paper); }
.menu__panel { position: absolute; right: 0; top: 58px; background: var(--paper); border-radius: 16px; padding: var(--s3); display: grid; gap: var(--s1); min-width: 220px; box-shadow: var(--shadow); }
.menu__panel a { text-decoration: none; font-weight: 600; padding: var(--s1); }
.menu__panel .btn { justify-content: center; margin-top: var(--s1); }

/* ---------- buttons and links ---------- */
.btn { display: inline-flex; align-items: center; gap: var(--s2); background: var(--purple); color: var(--paper); text-decoration: none; font-weight: 700; font-size: 1.2rem; line-height: 1; padding: 1.05rem 1.5rem 1rem; border-radius: var(--r-btn); border: 0; cursor: pointer; font-family: inherit; transition: background-color .15s; }
.btn svg { width: 30px; height: 12px; }
.btn:hover { background: var(--purple-deep); }
.btn--small { font-size: 1rem; padding: .8rem 1.15rem .75rem; border-radius: 14px; min-height: 44px; }
.btn--light { background: var(--on-dark); color: var(--purple); }
.btn--light:hover { background: var(--paper); }
.link { display: inline-block; padding: .55rem 0; font-weight: 700; color: var(--teal-deep); text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.link:hover { color: var(--purple); }
.link::after { content: " →"; }
.link--on-dark { color: var(--on-dark); text-decoration-color: var(--orange); }
.link--on-dark:hover { color: var(--paper); }

/* ---------- hero ---------- */
.hero { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--s4); padding: var(--s2) var(--pad) var(--s5); max-width: 1440px; margin: 0 auto; }
.hero__words { position: relative; z-index: 2; }

.sig { margin: 0; font-weight: 800; font-size: var(--t-sig); line-height: .9; letter-spacing: -.02em; }
.sig span { display: block; }
.sig__a { color: var(--purple); }
.sig__b { color: var(--pink); }

.lede { margin: var(--s4) 0 0; max-width: 37ch; font-size: var(--t-lede); line-height: 1.35; font-weight: 500; color: var(--ink); }
.lede__area { margin: var(--s3) 0 0; max-width: 40ch; font-size: var(--t-md); line-height: 1.4; font-weight: 600; color: var(--ink-soft); }

.actions { margin-top: var(--s5); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s5); }
.more { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font-weight: 600; font-size: var(--t-md); }
.more a { display: inline-block; padding: .6rem 0; color: var(--teal-deep); text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.more a:hover { color: var(--purple); }

/* the face inside the smile: a round photograph with the logo's own smile under it */
.smile { position: relative; margin: 0 -1% 0 0; width: min(100%, 66svh); max-width: 540px; aspect-ratio: 1 / .88; justify-self: end; z-index: 1; }
.smile__photo { position: absolute; left: 13%; top: 3%; width: 74%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--ground-deep); }
.smile__img { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; object-fit: cover; object-position: 8% center; }
.smile .smile-line { position: absolute; left: 3%; width: 94%; top: 62%; height: auto; color: var(--orange); overflow: visible; }
.smile__cog { position: absolute; width: 11%; left: 59.5%; top: 77%; animation: spin 14s linear infinite; }
/* the same smile frame opening an inner page */
.smile--page { width: 100%; max-width: 520px; justify-self: center; margin: 0; }
.smile__fill { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, center 40%); }

/* drawings */
.deco { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.d { position: absolute; display: block; }
.d--balloon { width: 66px; right: 40%; top: 0; animation: float 5s ease-in-out infinite; }
.d--popper { width: 120px; right: 6%; top: 5%; }
.d--lolly { width: 56px; left: 46%; top: 50%; transform: rotate(-14deg); }
.swirl { transform-origin: 50px 50px; animation: spin 8s linear infinite; }
.d--spark1 { width: 34px; right: 33%; bottom: 30%; animation: twinkle 2.6s ease-in-out infinite; }
.d--spark2 { width: 22px; left: 46%; top: 10%; animation: twinkle 3.2s ease-in-out infinite .8s; }
.burst { animation: pop 3.4s ease-out infinite; transform-origin: 70px 80px; }

.c { position: absolute; width: 10px; height: 16px; border-radius: 3px; animation: drift 6s ease-in-out infinite; }
.c3 { background: var(--orange); right: 12%; top: 46%; transform: rotate(-30deg); animation-delay: -1s; }
.c8 { background: var(--purple); right: 4.5%; top: 36%; transform: rotate(40deg); animation-delay: -3.5s; }

/* ---------- sections ---------- */
.section { padding: var(--s8) var(--pad); }
.section--tight { padding-top: var(--s6); padding-bottom: var(--s6); }
.section--paper { background: var(--paper); }
.section--deep { background: var(--ground-deep); }
.section--purple { background: var(--purple); color: var(--on-dark); }
.section--night { background: var(--purple-night); color: var(--on-dark); }
.section--flush { padding-top: 0; }
.wrap { max-width: var(--w-max); margin: 0 auto; }
.split { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s6); align-items: center; }
.split .head { margin-bottom: 0; }
.band-action { margin: var(--s6) 0 var(--s6); text-align: center; }
.section--purple .band-action { margin-top: var(--s5); }
/* words beside one smaller picture */
.split--small-media { grid-template-columns: 7fr 5fr; }
.split .head .btn { margin-top: var(--s2); }

/* a section's head: kicker, two-part title, short text */
.head { max-width: 46rem; margin-bottom: var(--s6); }
.head--full { max-width: none; }
.head--center { margin-left: auto; margin-right: auto; text-align: center; }
.kicker { display: block; margin: 0 0 var(--s3); font-size: var(--t-sm); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-deep); }
.section--purple .kicker, .section--night .kicker { color: var(--orange-light); }
.title { font-size: var(--t-h2); line-height: .95; }
.title span { display: block; }
.title__a { color: var(--purple); }
.title__b { color: var(--pink); }
.section--purple .title__a, .section--night .title__a { color: var(--on-dark); }
.section--purple .title__b, .section--night .title__b { color: var(--orange); }
.head__text { margin-top: var(--s4); font-size: var(--t-lede); line-height: 1.45; font-weight: 500; }
.page-title { font-size: var(--t-h1); line-height: .92; }
.title--small { font-size: clamp(2rem, 1.3rem + 2vw, 3.1rem); }

/* ---------- trust badges ---------- */
.badges { background: var(--purple); color: var(--on-dark); padding: var(--s3) var(--pad); }
.badges__list { list-style: none; margin: 0 auto; padding: 0; max-width: var(--w-max); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2) var(--s5); font-weight: 700; font-size: var(--t-md); }
.badges__list li { display: flex; align-items: center; gap: var(--s2); }
.badges__list svg { width: 16px; height: 16px; flex: none; }
/* on a phone the badges stand one under another, lined up on the left */
@media (max-width: 899px) {
  .badges__list { flex-direction: column; align-items: flex-start; }
  .badges__list li { align-items: flex-start; }
  .badges__list svg { margin-top: .3em; }
}

/* ---------- features: photo beside words, alternating ---------- */
.features { display: grid; gap: var(--s7); }
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); align-items: center; }
.feature:nth-child(even) .feature__media { order: 2; }
.feature__media { position: relative; }
.feature__img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-card); }
.feature__media--wide .feature__img { aspect-ratio: 4 / 3; }
/* the main photograph is a way in too: it covers the picture, lifting it a little under the pointer */
.feature__link { position: absolute; inset: 0; z-index: 3; border-radius: var(--r-card); }
.feature__img { transition: transform .25s ease, box-shadow .25s ease; }
.feature__media:has(.feature__link:hover) .feature__img { transform: translateY(-6px) scale(1.015); box-shadow: var(--shadow); }
.feature__q { display: block; font-weight: 700; color: var(--teal-deep); font-size: var(--t-md); margin-bottom: var(--s2); }
.feature h3 { font-size: clamp(1.9rem, 1.3rem + 1.6vw, 2.8rem); color: var(--purple); margin-bottom: var(--s3); }
.feature p { max-width: 34rem; font-size: var(--t-body); }
/* on the home page the pictures sit smaller and wider, so the four experiences take less height */
#experiences .features { gap: var(--s6); }
#experiences .feature { grid-template-columns: 5fr 7fr; }
#experiences .feature:nth-child(even) { grid-template-columns: 7fr 5fr; }
#experiences .feature__img { aspect-ratio: 4 / 3; }
@media (max-width: 899px) {
  #experiences .feature, #experiences .feature:nth-child(even) { grid-template-columns: 1fr; }
}

/* ---------- a notice card: groups, ordering notes ---------- */
.note-card { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s4); align-items: center; background: var(--teal-soft); border: 3px solid var(--teal); border-radius: var(--r-card); padding: var(--s5); }
.note-card--after { margin-top: var(--s8); }

/* ---------- a playful way to the price list: a smiling price tag, a question and a button ---------- */
.price-peek { justify-self: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s3) var(--s4); padding: var(--s4) var(--s5); border: 3px dashed var(--pink-bright); border-radius: var(--r-pill); background: var(--pink-soft); text-align: center; }
.price-peek__tag { width: 52px; height: 52px; flex: none; transform: rotate(-12deg); animation: float 5s ease-in-out infinite; }
.price-peek__lead { margin: 0; font-size: var(--t-h3); font-weight: 800; line-height: 1.1; color: var(--purple); }
.price-peek__btn { background: var(--pink); }
.price-peek__btn:hover { background: var(--purple); }
@media (max-width: 899px) {
  .price-peek { flex-direction: column; border-radius: var(--r-card); padding: var(--s4); width: 100%; }
}
.note-card svg { width: 64px; height: 64px; }
.note-card h3 { font-size: var(--t-h3); color: var(--purple); margin-bottom: var(--s1); }
.note-card p { margin: 0; }
.note-card p + .btn { margin-top: var(--s3); }
.notice { background: var(--paper); border-left: 6px solid var(--orange); border-radius: var(--r-sm); padding: var(--s4); color: var(--ink-soft); }
.notice p:last-child { margin: 0; }

/* ---------- round tiles: extras, people, kits ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s5); }
.tiles--four { grid-template-columns: repeat(4, 1fr); gap: var(--s4); }
.tiles--four .tile h3 { font-size: 1.2rem; margin-top: var(--s3); }
.tile { text-align: center; }
.tile__img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; background: var(--paper); border: 6px solid var(--paper); box-shadow: var(--shadow); }
.tile__img--contain { object-fit: contain; padding: 12%; }
/* "Look how it works": a play pill tucked under a tile's circle */
.film-link { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: var(--s1); margin: calc(-44px - var(--s3)) auto var(--s3); min-height: 44px; padding: .5rem 1.1rem .45rem .6rem; border-radius: var(--r-pill); background: var(--pink); color: var(--paper); font-weight: 700; font-size: var(--t-md); line-height: 1; text-decoration: none; box-shadow: var(--shadow); transition: background-color .15s; }
.film-link svg { width: 26px; height: 26px; fill: var(--purple-night); flex: none; }
.film-link:hover { background: var(--purple); }

/* a short film opened over the page, closed back to where it was opened */
.film { display: none; position: fixed; inset: 0; z-index: 30; place-items: center; padding: var(--s4); }
.film:target { display: grid; }
.film__backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--purple-night) 82%, transparent); }
.film__panel { position: relative; display: grid; justify-items: center; gap: var(--s3); }
.film__video { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100svh - 9rem); aspect-ratio: 1072 / 1920; border-radius: var(--r-card); border: 6px solid var(--paper); background: var(--purple-night); box-shadow: var(--shadow); }
.film__close { display: inline-flex; align-items: center; min-height: 44px; padding: .55rem 1.4rem .5rem; border-radius: var(--r-pill); background: var(--on-dark); color: var(--purple); font-weight: 700; text-decoration: none; }
.film__close::before { content: "✕"; margin-right: var(--s1); }
.film__close:hover { background: var(--paper); }
.tile__none { display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 50%; background: var(--pink-soft); color: var(--pink); font-weight: 700; border: 6px dashed var(--pink-bright); padding: 15%; text-align: center; }
.tile h3 { font-size: var(--t-h3); color: var(--purple); margin: var(--s4) 0 var(--s2); }
.tile p { color: var(--ink-soft); font-size: var(--t-md); }

/* product cards on a purple band */
.kits { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); }
.kit { background: var(--paper); color: var(--ink); border-radius: var(--r-card); overflow: hidden; display: flex; flex-direction: column; }
.kit__img { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--paper); }
.kit__body { padding: var(--s4); display: flex; flex-direction: column; gap: var(--s2); flex: 1; }
.kit h3 { font-size: 1.4rem; color: var(--purple); }
.kit p { margin: 0; font-size: var(--t-md); color: var(--ink-soft); }
.kit .link { margin-top: auto; }

/* one product shown whole on a white card, named beneath */
.showcase { margin: 0; justify-self: center; width: 100%; max-width: 360px; background: var(--paper); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow); transform: rotate(2deg); }
.showcase__img { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--paper); }
.showcase figcaption { padding: var(--s2) var(--s4) var(--s3); text-align: center; font-weight: 800; font-size: 1.3rem; line-height: 1.15; color: var(--purple); }

/* a special event on a night-purple band: its facts, a card for what is booked, and a drawn picture of the grotto */
.event { overflow-x: clip; }
.event__facts { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: var(--s1); font-size: var(--t-lede); font-weight: 700; line-height: 1.3; }
.event__facts li { display: flex; align-items: baseline; gap: var(--s2); }
.event__facts li::before { content: ""; flex: none; width: .5em; height: .5em; border-radius: 50%; background: var(--orange); translate: 0 -.1em; }
.event__free { color: var(--orange-light); }
.event__grotto { margin-top: var(--s5); padding: var(--s5); border-radius: var(--r-card); background: var(--paper); color: var(--ink); border-top: 6px solid var(--orange); max-width: 36rem; }
.event__grotto h3 { font-size: var(--t-h3); color: var(--purple); }
.event__lede { margin: var(--s1) 0 var(--s2); font-weight: 700; color: var(--pink); }
.event__price { font-size: var(--t-md); }
.event__includes-label { margin-bottom: var(--s1); font-weight: 600; }
.event__includes { list-style: none; margin: 0 0 var(--s4); padding: 0; display: grid; gap: .3rem; }
.event__includes li { position: relative; padding-left: 1.6rem; }
.event__includes li::before { content: "★"; position: absolute; left: 0; color: var(--pink); }
.event__price strong { color: var(--pink); font-size: var(--t-h3); line-height: 1; }
.event__note { padding-left: var(--s3); border-left: 4px solid var(--orange); font-size: var(--t-md); color: var(--ink-soft); }
.event__soon { margin: 0; font-weight: 800; color: var(--purple); }
.event__book { margin-top: var(--s2); }
/* the festive scene: a picture with rounded corners on the night purple, a warm glow behind it, crisp and a touch livelier */
.event__picture { position: relative; max-width: 560px; transform: none; background: none; box-shadow: none; overflow: visible; border-radius: 0; }
.event__picture::before { content: ""; position: absolute; inset: -8% -6%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--orange-light) 30%, transparent), transparent); z-index: 0; }
.event__picture .showcase__img { position: relative; z-index: 1; aspect-ratio: 3 / 2; height: auto; object-fit: cover; background: var(--purple-deep); border-radius: var(--r-card); box-shadow: 0 18px 40px color-mix(in srgb, black 40%, transparent); filter: contrast(1.06) saturate(1.08); image-rendering: high-quality; }
@media (max-width: 899px) { .event__picture { max-width: 520px; } }
/* on a laptop the scene stands 40% larger than its column and runs the whole height of the words beside it, from the kicker to the foot of the grotto card, Father Christmas kept in view */
@media (min-width: 900px) {
  .event__picture { align-self: stretch; max-width: none; width: 128%; margin: 0 -8% 0 -20%; }
  .event__picture .showcase__img { height: 100%; aspect-ratio: auto; object-position: 78% center; }
}

/* numbered steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.step { border-top: 4px solid var(--orange); padding-top: var(--s3); }
.step strong { display: block; font-size: var(--t-h3); line-height: 1.1; margin-bottom: var(--s1); }
.step p { margin: 0; opacity: .9; }

/* ---------- people ---------- */
.smile-line { overflow: visible; }
.people { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); }
.person { display: grid; grid-template-columns: 200px 1fr; gap: var(--s5); align-items: start; }
.person__face { position: relative; }
.person__img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center 25%; border-radius: 50%; }
.person__face .smile-line { position: absolute; left: -6%; width: 112%; bottom: -16%; color: var(--orange); }
.person h3 { font-size: var(--t-h3); color: var(--purple); }
.person__role { display: block; font-weight: 700; color: var(--pink); margin: var(--s1) 0 var(--s3); }
/* compact: the whole team, every word, in a shorter band */
.head--compact { max-width: none; margin-bottom: var(--s5); }
.title--line span { display: inline; }
.people--compact { gap: var(--s5) var(--s6); }
.people--compact .person { grid-template-columns: 120px minmax(0, 1fr); gap: var(--s4); }
.people--compact .person h3 { font-size: 1.6rem; }
.people--compact .person__role { margin: var(--s1) 0 var(--s2); }
.people--compact .person p { font-size: var(--t-md); line-height: 1.5; margin-bottom: var(--s2); }

/* ---------- reviews: the score, then a card per review, as Google shows them ---------- */
.stars { display: inline-flex; gap: 2px; color: var(--orange); }
.stars svg { width: 22px; height: 22px; fill: currentColor; }
.stars--small svg { width: 17px; height: 17px; }
.reviews__top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s3) var(--s6); margin-bottom: var(--s5); }
.reviews__head { margin-bottom: 0; }
.reviews__score { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); background: var(--ground); border-radius: var(--r-card); padding: var(--s3) var(--s4); }
.reviews__rating { font-size: 2.6rem; font-weight: 800; line-height: .9; color: var(--purple); }
.reviews__count { display: block; font-size: var(--t-sm); font-weight: 600; color: var(--ink-soft); }
.reviews__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); align-items: start; }
.review-card { --review-lines: 7; background: var(--ground); border-radius: var(--r-card); padding: var(--s4); }
.review-card__who { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s1); }
.review-card__avatar { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-weight: 800; font-size: 1.15rem; line-height: 1; color: var(--paper); background: var(--purple); }
.review-card__avatar--1 { background: var(--pink); }
.review-card__avatar--2 { background: var(--teal-deep); }
.review-card__avatar--3 { background: var(--orange); color: var(--purple-night); }
.review-card__name { display: block; line-height: 1.2; color: var(--ink); }
.review-card__source { display: block; font-size: var(--t-xs); color: var(--ink-soft); }
/* a review shows its first lines, fading out; "Read more" opens the rest in place */
.review-card__text { margin: var(--s2) 0 0; font-size: var(--t-md); line-height: 1.55; max-height: calc(1.55em * var(--review-lines)); overflow: hidden; -webkit-mask-image: linear-gradient(var(--ink) 65%, transparent); mask-image: linear-gradient(var(--ink) 65%, transparent); }
.review-card__text p { margin-bottom: var(--s2); }
.review-card__text p:last-child { margin-bottom: 0; }
.review-card:has(.review-card__more[open]) .review-card__text { max-height: none; -webkit-mask-image: none; mask-image: none; }
.review-card__more summary { display: inline-block; cursor: pointer; list-style: none; padding: .55rem 0 0; min-height: 44px; font-weight: 700; font-size: var(--t-sm); color: var(--teal-deep); text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.review-card__more summary::-webkit-details-marker { display: none; }
.review-card__more summary:hover { color: var(--purple); }
.review-card__close, .review-card__more[open] .review-card__open { display: none; }
.review-card__more[open] .review-card__close { display: inline; }
.reviews__all { margin: var(--s4) 0 0; }

/* ---------- soap bubbles: drawn, rising over bubble photographs ---------- */
.bubbles { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow-x: clip; --bubble-scale: 1;
  --bubble-shine: rgba(255, 255, 255, .95); --bubble-clear: rgba(255, 255, 255, 0); --bubble-edge: rgba(255, 255, 255, .8);
  --bubble-teal: rgba(68, 196, 192, .32); --bubble-pink: rgba(223, 70, 164, .38); --bubble-orange: rgba(255, 190, 107, .55);
  --bubble-depth: rgba(109, 39, 136, .2); --bubble-drop: rgba(61, 20, 80, .12); }
.bubbles--wide { --bubble-scale: 1.15; }
.bubble { position: absolute; left: var(--x); bottom: var(--y); width: calc(var(--size) * var(--bubble-scale)); margin-left: calc(var(--size) * var(--bubble-scale) * -.5); aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, var(--bubble-shine) 0 7%, var(--bubble-clear) 15%),
    radial-gradient(circle at 50% 50%, var(--bubble-clear) 54%, var(--bubble-teal) 68%, var(--bubble-pink) 83%, var(--bubble-orange) 93%, var(--bubble-edge) 100%);
  border: 1.5px solid var(--bubble-edge);
  box-shadow: inset -3px -4px 8px var(--bubble-depth), 0 2px 10px var(--bubble-drop);
  animation: bubble-rise var(--dur) ease-in-out infinite var(--delay); }
@keyframes bubble-rise {
  0% { bottom: -8%; opacity: 0; transform: translateX(0) scale(.55); }
  12% { opacity: 1; }
  50% { transform: translateX(var(--sway)) scale(1); }
  85% { opacity: .95; transform: translateX(0) scale(1.04); }
  100% { bottom: 98%; opacity: 0; transform: translateX(calc(var(--sway) * -.5)) scale(1.3); }
}

/* ---------- party confetti and music notes: drawn, over a whole party block ---------- */
/* the words stay above them; photographs sit beneath */
.festive { position: absolute; inset: calc(var(--s5) * -1) calc(var(--s4) * -1); z-index: 2; pointer-events: none; overflow: hidden; --festive-scale: 1; }
.festive__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.confetti { position: absolute; left: var(--x); top: var(--y); width: calc(10px * var(--festive-scale)); height: calc(16px * var(--festive-scale)); border-radius: 3px; background: var(--tone); opacity: .9; animation: confetti-fall var(--dur) linear infinite var(--delay); }
.confetti--dot { width: calc(11px * var(--festive-scale)); height: calc(11px * var(--festive-scale)); border-radius: 50%; }
.confetti--strip { width: calc(5px * var(--festive-scale)); height: calc(26px * var(--festive-scale)); border-radius: var(--r-pill); }
.note { position: absolute; left: var(--x); bottom: var(--y); width: calc(var(--size) * var(--festive-scale)); height: calc(var(--size) * var(--festive-scale)); color: var(--tone); fill: currentColor; filter: drop-shadow(0 3px 6px color-mix(in srgb, var(--purple-night) 15%, transparent)); animation: note-rise var(--dur) ease-in-out infinite var(--delay); }
/* a row with drawn motion over it: the words stay above, the photographs beneath */
.experiences-row--animated { position: relative; }
.experiences-row--animated .experiences-row__words { position: relative; z-index: 3; }
@keyframes confetti-fall {
  0% { top: -4%; opacity: 0; transform: translateX(0) rotate(0) rotateY(0); }
  6% { opacity: .9; }
  50% { transform: translateX(var(--sway)) rotate(calc(var(--spin) * .5)) rotateY(180deg); }
  94% { opacity: .9; }
  100% { top: 102%; opacity: 0; transform: translateX(0) rotate(var(--spin)) rotateY(360deg); }
}
@keyframes note-rise {
  0% { bottom: -6%; opacity: 0; transform: translateX(0) rotate(-10deg) scale(.7); }
  12% { opacity: 1; }
  35% { transform: translateX(var(--sway)) rotate(12deg) scale(1); }
  65% { transform: translateX(calc(var(--sway) * -.6)) rotate(-8deg) scale(1.05); }
  88% { opacity: .9; }
  100% { bottom: 100%; opacity: 0; transform: translateX(calc(var(--sway) * .4)) rotate(10deg) scale(1.1); }
}

/* ---------- face paint: drawn splats that come and go in the clear space around the words ---------- */
/* the words keep a clear band above and below them; the splats stay in those bands, off the photographs and the text */
.paint-ground { --paint-band: 92px; position: relative; align-self: stretch; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: var(--paint-band) 0; }
.paint { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; --paint-scale: 1; }
.paint__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.paint__mark { position: absolute; left: var(--x); top: calc(var(--paint-band) * var(--y)); width: calc(var(--size) * var(--paint-scale)); height: calc(var(--size) * var(--paint-scale)); color: var(--tone); fill: currentColor; opacity: 0; filter: drop-shadow(0 3px 5px color-mix(in srgb, var(--purple-night) 18%, transparent)); animation: paint-splat var(--dur) ease-out infinite var(--delay); }
@keyframes paint-splat {
  0%, 8% { opacity: 0; transform: rotate(var(--turn, 0deg)) scale(0); }
  14% { opacity: .9; transform: rotate(var(--turn, 0deg)) scale(1.18); }
  20% { transform: rotate(var(--turn, 0deg)) scale(.94); }
  26% { transform: rotate(var(--turn, 0deg)) scale(1); }
  70% { opacity: .9; transform: rotate(var(--turn, 0deg)) scale(1.03); }
  86%, 100% { opacity: 0; transform: rotate(var(--turn, 0deg)) scale(1.1); }
}
.paint__mark--low { top: auto; bottom: calc(var(--paint-band) * var(--y)); }
@media (prefers-reduced-motion: reduce) {
  .paint__mark { opacity: .85; }
}

/* ---------- a parade: examples passing slowly by, each photograph shown whole ---------- */
/* the list is written twice so the row runs on without a gap; it pauses under the pointer */
.parade { --parade-w: clamp(150px, 16vw, 230px); --parade-gap: var(--s4); --parade-time: 70s; overflow: hidden; padding: var(--s3) 0 var(--s4); -webkit-mask-image: linear-gradient(90deg, transparent, var(--ink) 5%, var(--ink) 95%, transparent); mask-image: linear-gradient(90deg, transparent, var(--ink) 5%, var(--ink) 95%, transparent); }
.parade__track { list-style: none; margin: 0; padding: 0; display: flex; width: max-content; animation: parade-pass var(--parade-time) linear infinite; }
.parade:hover .parade__track { animation-play-state: paused; }
.parade__item { flex: none; width: var(--parade-w); margin-right: var(--parade-gap); transform: rotate(-2deg); }
.parade__item:nth-child(even) { transform: rotate(2deg) translateY(var(--s3)); }
.parade__img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: var(--focus, center 40%); border-radius: var(--r-card); border: 6px solid var(--paper); box-shadow: var(--shadow); background: var(--paper); }
@keyframes parade-pass { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .parade { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .parade__item--again { display: none; }
}

/* ---------- logos ---------- */
.logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5) var(--s6); align-items: start; }
.logos li { display: grid; justify-items: center; gap: var(--s2); text-align: center; }
.logos__mark { display: grid; place-items: center; height: 110px; width: 100%; }
.logos img { max-height: 100px; width: auto; max-width: 100%; object-fit: contain; }
.logos__name { max-width: 18rem; font-size: var(--t-xs); font-weight: 600; line-height: 1.3; color: var(--ink-soft); }

/* ---------- the closing call ---------- */
.cta { display: grid; grid-template-columns: 3fr 2fr; gap: var(--s6); align-items: center; }
.cta__ways { display: grid; gap: var(--s3); justify-items: start; }
.cta__phone { display: inline-block; padding: .3rem 0; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); font-weight: 800; color: var(--on-dark); text-decoration: none; line-height: 1; }
.cta__phone:hover { color: var(--orange); }
.cta__note { margin: 0; opacity: .9; }
.cta__tip { margin: 0 0 var(--s5); padding-left: var(--s3); border-left: 4px solid var(--orange); opacity: .92; max-width: 36rem; }

/* ---------- questions ---------- */
.faq { display: grid; gap: var(--s3); }
.faq details { background: var(--paper); border-radius: var(--r-sm); padding: var(--s3) var(--s4); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--s3); font-weight: 700; font-size: 1.2rem; color: var(--purple); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--orange); color: var(--purple-night); font-size: 1.4rem; line-height: 1; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: var(--s2) 0 0; }

/* ---------- forms ---------- */
.form { display: grid; gap: var(--s4); background: var(--paper); border-radius: var(--r-card); padding: var(--s5); box-shadow: var(--shadow); color: var(--ink); }
.form label { display: grid; gap: var(--s1); font-weight: 700; font-size: var(--t-md); }
.form input, .form select, .form textarea { font: inherit; font-weight: 500; color: var(--ink); background: var(--ground); border: 2px solid var(--line); border-radius: var(--r-sm); padding: .75rem .9rem; width: 100%; }
/* the select's arrow, drawn in the site's purple */
.form select { appearance: none; padding-right: 2.75rem; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M2 2l8 8 8-8' fill='none' stroke='%236d2788' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; background-size: 1.1rem; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 3px solid var(--purple); outline-offset: 1px; border-color: var(--purple); }
.form .btn { justify-self: start; }
.form__hint { font-size: var(--t-sm); color: var(--ink-soft); margin: 0; }
.form label .form__hint { font-weight: 500; }
/* a required field: a pink asterisk after its label, explained once in its step */
.form__req { font-style: normal; font-size: 1.15em; font-weight: 800; line-height: 1; color: var(--pink); margin-left: .2em; }
.form-step__req-note { display: block; margin-top: var(--s1); font-size: var(--t-sm); font-weight: 600; color: var(--pink); }
/* a question answered by choices: its words, then the pills */
.form-q { display: grid; gap: var(--s2); align-content: start; }
.form-q__label { font-weight: 700; font-size: var(--t-md); }
.form-q .form__hint { margin-top: calc(var(--s2) * -1); }
.form .form-check { display: flex; align-items: flex-start; gap: var(--s3); font-weight: 600; cursor: pointer; }
.form .form-check input { flex: none; width: 1.5rem; height: 1.5rem; margin: .1rem 0 0; padding: 0; accent-color: var(--orange); cursor: pointer; }

/* choices drawn as pills; a chosen one fills purple with a tick */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.form .chip { display: block; position: relative; font-weight: 600; cursor: pointer; }
.form .chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.chip__face { display: flex; flex-direction: column; justify-content: center; gap: 2px; height: 100%; min-height: 44px; padding: .55rem 1.1rem .5rem; border: 2px solid var(--line); border-radius: var(--r-pill); background: var(--ground); color: var(--ink); line-height: 1.25; transition: background-color .15s, border-color .15s; }
.chip:hover .chip__face { border-color: var(--purple); }
.chip input:checked + .chip__face { background: var(--purple); border-color: var(--purple); color: var(--paper); }
.chip input:checked + .chip__face .chip__name::before { content: "✓ "; color: var(--orange-light); }
.chip input:focus-visible + .chip__face { outline: 3px solid var(--purple); outline-offset: 3px; }
.chip__name { font-weight: 700; }
.chip__text { font-size: var(--t-sm); font-weight: 500; color: var(--ink-soft); }
.chip input:checked + .chip__face .chip__text { color: var(--on-dark); }
.chips--cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.chips--cards .chip__face { justify-content: flex-start; padding: var(--s3) var(--s4); border-radius: var(--r-btn); }
/* long answers stacked one under another */
.chips--list { display: grid; justify-items: start; }
.chips--list .chip__face { border-radius: var(--r-btn); }
/* answers two to a row, each the same width */
.chips--two { display: grid; grid-template-columns: 1fr 1fr; }
.chips--two .chip__face { border-radius: var(--r-btn); }
@media (max-width: 899px) { .chips--two { grid-template-columns: 1fr; } }
/* a follow-up field, shown only while the answer that opens it is ticked in the same step */
.form .form-reveal { display: none; }
.form-step:has([data-opens="bubbles"]:checked) .form-reveal--bubbles,
.form-step:has([data-opens="info"]:checked) .form-reveal--info,
.form-step:has([data-opens="age-other"]:checked) .form-reveal--age-other,
.form-step:has([data-opens="support-other"]:checked) .form-reveal--support-other { display: grid; }

/* a long form in numbered steps, with their list beside it */
.form--steps { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: var(--s6); align-items: start; padding: 0; background: none; border-radius: 0; box-shadow: none; }
.form-steps { display: grid; gap: var(--s5); }
.form-step { min-width: 0; margin: 0; padding: var(--s5); border: 0; border-radius: var(--r-card); background: var(--paper); box-shadow: var(--shadow); scroll-margin-top: var(--s5); }
.form-step__head { float: left; width: 100%; display: flex; align-items: center; gap: var(--s3); padding: 0; margin-bottom: var(--s2); }
.form-step__num { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; padding-top: .15em; border-radius: 50%; background: var(--orange); color: var(--purple-night); font-size: 1.5rem; font-weight: 800; line-height: 1; }
.form-step__title { font-size: var(--t-h3); font-weight: 800; line-height: 1.1; color: var(--purple); }
.form-step__text { clear: both; margin: 0 0 var(--s4); color: var(--ink-soft); }
.form-step__fields { clear: both; display: grid; gap: var(--s4); }
.form-step__fields--two { grid-template-columns: 1fr 1fr; }
.form-step__wide { grid-column: 1 / -1; }
.form-send { display: grid; gap: var(--s4); padding: var(--s5); border-radius: var(--r-card); background: var(--purple); color: var(--on-dark); }
.form-send .btn { justify-self: start; }
/* the survey's own send button: larger, in the middle of its band, with the privacy line centred beneath */
.form-send .btn--large { justify-self: center; justify-content: center; margin-top: var(--s3); min-width: min(100%, 22rem); font-size: 1.5rem; padding: 1.35rem 2.75rem 1.25rem; border-radius: var(--r-card); box-shadow: 0 10px 24px color-mix(in srgb, var(--purple-night) 35%, transparent); }
.form-send .btn--large + .form-send__note { text-align: center; }
.form-send__note { margin: 0; font-size: var(--t-sm); opacity: .9; }
.form-send__thanks { margin: 0; font-size: var(--t-lede); line-height: 1.4; }
.form-send__thanks span { display: block; margin-top: var(--s2); font-weight: 800; color: var(--orange-light); }
/* an amount field with its currency sign inside, at the start */
.form-money { position: relative; display: block; }
.form-money > span { position: absolute; left: .9rem; top: 50%; translate: 0 -50%; font-weight: 700; color: var(--ink-soft); }
.form .form-money input { padding-left: 2rem; }

/* workshop cards: an icon, the name, its tagline and what happens; tints take turns */
.workshop-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.workshop-card { --tint: var(--teal-soft); --edge: var(--teal); padding: var(--s5); border-radius: var(--r-card); background: var(--tint); border-top: 6px solid var(--edge); }
.workshop-card:nth-child(4n+2) { --tint: var(--pink-soft); --edge: var(--pink-bright); }
.workshop-card:nth-child(4n+3) { --tint: var(--ground); --edge: var(--orange); }
.workshop-card:nth-child(4n+4) { --tint: var(--ground-deep); --edge: var(--purple); }
.workshop-card__icon { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin-bottom: var(--s3); border-radius: 50%; background: var(--paper); font-size: 1.8rem; line-height: 1; }
/* a drawn picture in place of the icon, a little larger, on no circle, standing still */
.workshop-card__art { width: 5.5rem; height: 5.5rem; margin: -1.75rem 0 var(--s2) calc(var(--s1) * -1); object-fit: contain; }
.workshop-card h3 { font-size: var(--t-h3); color: var(--purple); }
.workshop-card__tagline { margin: var(--s1) 0 var(--s3); font-weight: 700; color: var(--teal-deep); }
.workshop-card p:last-child { margin-bottom: 0; }
.workshop-card__note { padding-left: var(--s3); border-left: 4px solid var(--edge); font-size: var(--t-md); color: var(--ink-soft); }
@media (max-width: 1080px) {
  .workshop-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 899px) {
  .workshop-cards { grid-template-columns: 1fr; gap: var(--s3); }
  .workshop-card { padding: var(--s4); }
}

.step-rail { position: sticky; top: var(--s4); display: grid; gap: var(--s4); }
.step-rail .kicker { margin: 0; }
.step-rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.step-rail a { display: flex; align-items: center; gap: var(--s3); min-height: 44px; font-weight: 700; color: var(--ink); text-decoration: none; }
.step-rail a:hover { color: var(--purple); }
.step-rail__num { position: relative; flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding-top: .1em; border: 2px solid var(--purple); border-radius: 50%; background: var(--paper); color: var(--purple); font-size: var(--t-md); line-height: 1; }

/* ---------- footer ---------- */
.foot { background: var(--purple-night); color: var(--on-dark); padding: var(--s5) var(--pad) var(--s4); }
.foot__grid { max-width: var(--w-max); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s5); }
/* the logo in its own colours, on a cream circle ringed in orange so it reads on the night purple */
.foot__brand { display: inline-grid; place-items: center; width: 160px; aspect-ratio: 1; border-radius: 50%; background: var(--on-dark); border: 5px solid var(--orange); }
.foot__brand .brand__mark { --w: 118px; }
.foot__motto { margin: var(--s3) 0 0; font-size: 1.6rem; font-weight: 800; line-height: 1.05; }
.foot__motto span { color: var(--orange); }
.foot__area { margin: var(--s3) 0 0; max-width: 24rem; font-size: var(--t-md); opacity: .9; }
.foot h2 { font-size: var(--t-sm); letter-spacing: .08em; text-transform: uppercase; color: var(--orange); margin-bottom: var(--s3); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.foot li a { display: inline-block; padding: .55rem 0; }
.foot a { text-decoration: none; }
.foot a:hover { text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 4px; }
.foot__small { max-width: var(--w-max); margin: var(--s5) auto 0; padding-top: var(--s3); border-top: 1px solid var(--on-dark-line); font-size: var(--t-sm); opacity: .8; }
.foot__social-title { margin: var(--s4) 0 var(--s2); }

/* Social media links */
.social, .foot .social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.social__link, .foot .social__link { display: inline-flex; align-items: center; gap: var(--s1); min-height: 44px; padding: .4rem 1rem .4rem .45rem; border-radius: var(--r-pill); border: 2px solid var(--on-dark-line); color: var(--on-dark); font-weight: 700; text-decoration: none; transition: background-color .2s, border-color .2s; }
.social__icon { width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: var(--orange); color: var(--purple-night); flex: none; }
.social__link:hover, .foot .social__link:hover { border-color: var(--orange); text-decoration: none; }
.social__link:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.social--light .social__link { border-color: var(--line); background: var(--paper); color: var(--purple); }
.social--light .social__icon { background: var(--purple); color: var(--on-dark); }
.social--light .social__link:hover { border-color: var(--pink); color: var(--pink); }
.social--light .social__link:focus-visible { outline-color: var(--purple); }
.social--big .social__link { font-size: var(--t-body); min-height: 56px; padding: .5rem 1.4rem .5rem .5rem; border-color: var(--on-dark-edge); }
.social--big .social__icon { width: 44px; height: 44px; padding: 9px; }
.social--big .social__link:hover { background: var(--on-dark-wash); }
@media (max-width: 899px) {
  .social--big { flex-direction: column; }
  .social--big .social__link { width: 100%; }
}

/* Social band: an invitation to follow, between the offer and the reviews */
.social-band { background: var(--pink); color: var(--on-dark); }
.social-band .title__a { color: var(--on-dark); }
.social-band .title__b { color: var(--orange-light); }
.social-band__inner { display: grid; gap: var(--s4); align-items: center; }
.social-band__text { margin: var(--s2) 0 0; font-size: var(--t-lede); max-width: 34rem; }
@media (min-width: 900px) {
  .social-band__inner { grid-template-columns: 1fr auto; gap: var(--s6); }
}

/* ---------- motion ---------- */
@keyframes float { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-16px) rotate(4deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes twinkle { 0%,100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(.6) rotate(20deg); opacity: .7; } }
@keyframes pop { 0% { transform: scale(.85); } 18% { transform: scale(1.08); } 40%,100% { transform: scale(1); } }
@keyframes drift { 0%,100% { translate: 0 0; } 50% { translate: 0 10px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- breakpoints ---------- */
@media (max-width: 1080px) {
  .nav { gap: var(--s3); font-size: 1rem; }
  .kits { grid-template-columns: repeat(2, 1fr); }
  .people { grid-template-columns: 1fr; }
  .reviews__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 899px) {
  .nav, .top__book { display: none; }
  .menu { display: block; }
  .brand { --brand-size: 92px; }
  .top { padding: var(--s4) var(--pad) var(--s2); }
  .hero { grid-template-columns: 1fr; gap: 0; padding-top: var(--s1); min-height: 0; text-align: left; }
  .hero__words { display: contents; }
  .sig { order: 1; margin-top: var(--s4); font-size: clamp(3rem, 14.5vw, 4.6rem); }
  .smile { order: 2; width: 100%; max-width: 280px; margin: var(--s2) auto 0; justify-self: center; }
  .lede { order: 3; margin-top: var(--s2); font-size: 1.1rem; max-width: 34ch; }
  .lede__area { order: 3; margin-top: var(--s2); font-size: var(--t-sm); }
  .actions { order: 4; margin-top: var(--s4); gap: var(--s3) var(--s4); }
  .d--balloon { width: 40px; left: 7%; right: auto; top: 24%; }
  .d--popper { width: 72px; right: 5%; top: 24%; }
  .d--lolly { width: 36px; left: 4%; bottom: auto; top: 38%; }
  .d--spark1 { right: auto; left: 24%; bottom: auto; top: 25%; width: 22px; }
  .d--spark2 { left: auto; right: 24%; top: 25%; width: 18px; }
  .c3, .c8 { display: none; }

  .section { padding: var(--s7) var(--pad); }
  .head { margin-bottom: var(--s5); }
  .feature { grid-template-columns: 1fr; gap: var(--s5); }
  .feature:nth-child(even) .feature__media { order: 0; }
  .feature__media { max-width: 420px; }
  .note-card { grid-template-columns: 1fr; }
  .kits { grid-template-columns: 1fr; gap: var(--s3); }
  .kit { display: grid; grid-template-columns: 40% 1fr; }
  .kit__img { align-self: center; }
  .kit__body { padding: var(--s3); }
  .kit h3 { font-size: 1.25rem; }
  .steps { grid-template-columns: 1fr; }
  .person { grid-template-columns: 1fr; gap: var(--s5); }
  .person__face { width: 180px; }
  /* compact on a phone: small portrait beside the name, words full width below */
  .people--compact .person { grid-template-columns: 84px minmax(0, 1fr); column-gap: var(--s3); row-gap: 0; align-items: center; }
  .people--compact .person > div:last-child { display: contents; }
  .people--compact .person__face { width: auto; grid-row: span 2; margin-bottom: var(--s4); }
  .people--compact .person h3 { align-self: end; font-size: 1.45rem; }
  .people--compact .person__role { align-self: start; margin: var(--s1) 0 0; }
  .people--compact .person p { grid-column: 1 / -1; }
  .reviews__score { padding: var(--s3) var(--s4); }
  .reviews__rating { font-size: 2.4rem; }
  .reviews__list { grid-template-columns: 1fr; }
  .review-card { --review-lines: 6; }
  .logos { grid-template-columns: repeat(2, 1fr); gap: var(--s4); }
  .logos__mark { height: 90px; }
  .cta { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .showcase { max-width: 280px; }
  .tiles--four { grid-template-columns: 1fr 1fr; }
  .tiles { grid-template-columns: 1fr 1fr; gap: var(--s4); }
  .foot__grid { grid-template-columns: 1fr; gap: var(--s4); }
}

/* ---------- creative-kits page ---------- */
.ck-catalogue { scroll-margin-top: var(--s3); }
.ck-kits { grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.ck-small { margin: var(--s5) 0 0; max-width: var(--w-text); font-size: var(--t-sm); opacity: .9; }
.ck-notice { margin-top: var(--s6); max-width: 52rem; }
.ck-faq { margin-top: var(--s5); max-width: 52rem; }
@media (max-width: 1080px) { .ck-kits { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 899px) { .ck-kits { grid-template-columns: 1fr; gap: var(--s3); } }

/* ---------- extras pages: party extras, characters & costumes ---------- */
.extras-page .page-title { display: block; }
.extras-back { margin: 0 0 var(--s2); }
.extras-back a { display: inline-block; padding: .55rem 0; font-weight: 700; color: var(--teal-deep); text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.extras-back a::before { content: "← "; }
.extras-back a:hover { color: var(--purple); }
.extras-list { list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(3, 1fr); gap: var(--s7) var(--s6); }
.extras-list .tile { display: flex; flex-direction: column; align-items: center; }
.extras-list .tile .link { margin-top: auto; }
.extras-list .tile__img, .extras-list .tile__none { max-width: 300px; margin: 0 auto; }
.extras-list .tile__none { color: var(--purple); }
.extras-list .tile h2 { font-size: var(--t-h3); color: var(--purple); margin: var(--s4) 0 var(--s2); }
.extras-list .tile p { max-width: 30ch; margin-left: auto; margin-right: auto; }
.extras-notice { max-width: var(--w-text); margin: var(--s7) auto 0; }
.extras-page .band-action { margin-bottom: 0; margin-top: var(--s4); }
@media (max-width: 899px) {
  .extras-list { grid-template-columns: 1fr; gap: var(--s6); }
  .extras-list .tile__img, .extras-list .tile__none { max-width: 240px; }
}

/* ---------- about page ---------- */
/* about page */
.about-intro { padding-bottom: var(--s4); }
.about-intro .head { max-width: 62rem; margin-bottom: 0; }
.about-team .kicker { margin-bottom: var(--s5); line-height: 1.2; }
.about-team .people { grid-template-columns: 1fr; gap: var(--s7); }
.about-team .person { grid-template-columns: 300px minmax(0, var(--w-text)); justify-content: start; gap: var(--s6); align-items: center; }
.about-team .person:nth-child(even) { grid-template-columns: minmax(0, var(--w-text)) 300px; }
.about-team .person:nth-child(even) .person__face { order: 2; }
.about-team .person > div:last-child { max-width: var(--w-text); }
.about-team .person h3 { font-size: clamp(1.9rem, 1.3rem + 1.6vw, 2.8rem); }
.about-team { padding-bottom: var(--s8); }
@media (max-width: 899px) {
  .about-team .person, .about-team .person:nth-child(even) { grid-template-columns: 1fr; gap: var(--s6); }
  .about-team .person:nth-child(even) .person__face { order: 0; }
  .about-team .person__face { width: 220px; }
  .about-team { padding-bottom: var(--s7); }
}

/* ---------- thanks page ---------- */
/* ---------- thanks ---------- */
.thanks__grid { display: grid; grid-template-columns: 1fr; gap: var(--s4); align-items: center; }
.thanks__head { margin-bottom: 0; }
.thanks .actions { margin-top: var(--s4); }
.thanks__hurry { margin-top: var(--s4); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s4); }
.thanks__label { flex-basis: 100%; font-weight: 700; color: var(--ink-soft); font-size: var(--t-md); }
.thanks__phone { display: inline-block; padding: .55rem 0; min-height: 44px; font-size: var(--t-h3); font-weight: 800; color: var(--purple); text-decoration: none; line-height: 1; }
.thanks__phone:hover { color: var(--pink); }
.thanks__social { margin-top: var(--s5); }
.thanks__social .thanks__label { margin: 0 0 var(--s2); }
.thanks__smile { position: relative; margin: 0 auto; width: 100%; max-width: 230px; aspect-ratio: 1 / .88; }
.thanks__photo { position: absolute; left: 13%; top: 3%; width: 74%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--ground-deep); }
.thanks__img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.thanks__smile .smile-line { position: absolute; left: 3%; width: 94%; top: 62%; height: auto; color: var(--orange); }
@media (min-width: 900px) {
  .thanks__grid { grid-template-columns: 7fr 5fr; gap: var(--s6); }
  .thanks__smile { max-width: 460px; }
}

/* ---------- creative-workshops page ---------- */
.cw-intro { grid-template-columns: 6fr 5fr; }
.cw-intro .page-title { display: block; }
.cw-area { margin: var(--s3) 0 0; max-width: 34rem; color: var(--ink-soft); font-size: var(--t-md); }
/* the gallery's heading in pink, then its short phrases beneath, a little smaller, parted by orange dots */
.cw-gallery-title { margin-bottom: var(--s2); font-size: var(--t-h3); line-height: 1.2; color: var(--pink); }
.cw-gallery-points { list-style: none; margin: 0 0 var(--s5); padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); font-size: var(--t-lede); font-weight: 700; line-height: 1.3; color: var(--purple); }
.cw-gallery-points li { display: flex; align-items: center; gap: var(--s3); }
.cw-gallery-points li::before { content: ""; flex: none; width: .45em; height: .45em; border-radius: 50%; background: var(--orange); }
.cw-gallery-points li:first-child::before { display: none; }
/* one wall of workshop moments, every photograph the same size: four to a row, two on a phone, a short last row centred */
.cw-wall { --wall-cols: 4; --wall-gap: var(--s3); list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s4) var(--wall-gap); }
.cw-shot { flex: 0 0 calc((100% - (var(--wall-cols) - 1) * var(--wall-gap)) / var(--wall-cols)); margin: 0; }
.cw-shot__img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: var(--focus, center); border-radius: var(--r-card); }
/* a dull, soft photograph lifted: crisper edges, livelier colour */
.cw-shot__img--lift { filter: url(#photo-lift) saturate(1.25) contrast(1.08) brightness(1.04); }
.cw-note-title { font-size: var(--t-h3); color: var(--purple); margin-bottom: var(--s1); }
.note-card .cw-note-title + p { margin-bottom: var(--s1); max-width: 52rem; }
@media (max-width: 899px) {
  .cw-intro { grid-template-columns: 1fr; gap: var(--s4); }
  /* on a phone the phrases stand one under another, each with its dot */
  .cw-gallery-points { flex-direction: column; align-items: flex-start; gap: var(--s1); }
  .cw-gallery-points li { gap: var(--s2); }
  .cw-gallery-points li:first-child::before { display: block; }

  .cw-wall { --wall-cols: 2; --wall-gap: var(--s2); row-gap: var(--s3); }
  .cw-shot__img { border-radius: var(--r-btn); }
}

/* ---------- experiences page ---------- */
/* ---------- experiences page ---------- */
.experiences-head { margin-bottom: var(--s5); }
.experiences-jump { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.experiences-jump__label { font-size: var(--t-sm); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-deep); margin-right: var(--s1); }
.experiences-jump a { display: inline-block; padding: .55rem 1rem; min-height: 44px; border-radius: var(--r-pill); background: var(--paper); border: 2px solid var(--teal); color: var(--purple); font-weight: 700; font-size: var(--t-md); text-decoration: none; }
.experiences-jump a:hover { border-color: var(--purple); }
.experiences-row { scroll-margin-top: var(--s5); }
.experiences-row h2 { font-size: clamp(1.9rem, 1.3rem + 1.6vw, 2.8rem); color: var(--purple); margin-bottom: var(--s3); }
.experiences-row__also { margin: var(--s2) 0 0; }
.experiences-strip-wrap { grid-column: 1 / -1; order: 3; position: relative; }
.experiences-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.experiences-area { margin: var(--s3) 0 0; padding-left: var(--s3); border-left: 4px solid var(--orange); font-weight: 600; color: var(--ink-soft); max-width: 36rem; }
.experiences-strip__img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-card); }
.experiences-strip--wide { grid-template-columns: 1fr; }
/* four or more pictures in one row on a laptop; two to a row on a phone, an odd first one across both */
.experiences-strip--row { grid-template-columns: repeat(var(--strip-count), 1fr); }
/* a film leading a row: the moving picture, with its first frame standing in where motion is reduced */
.feature__film { display: block; height: auto; object-position: center 40%; background: var(--ground-deep); }
.feature__still { display: none; object-position: center 40%; }
@media (prefers-reduced-motion: reduce) {
  .feature__film { display: none; }
  .feature__still { display: block; }
}
.experiences-strip--wide .experiences-strip__img { aspect-ratio: 16 / 7; }
.experiences-note__title { font-size: var(--t-h3); color: var(--purple); margin-bottom: var(--s1); }
.experiences-faq { align-items: start; }
.experiences-faq summary { padding: var(--s1) 0; }
.experiences-extras { margin-top: var(--s5); }
.experiences-extras p { margin-bottom: var(--s1); }
@media (min-width: 900px) {
  .experiences-strip:not(.experiences-strip--wide) .experiences-strip__img { aspect-ratio: 1; }
}
@media (max-width: 899px) {
  /* on a phone the page runs closer: less air between its bands, its rows and the words of each row */
  .experiences-intro { padding-top: var(--s5); padding-bottom: var(--s5); }
  .experiences-list { padding-top: 0; padding-bottom: var(--s5); }
  .experiences-groups { padding-top: var(--s5); padding-bottom: var(--s6); }
  .experiences-list .features { gap: var(--s6); }
  .experiences-row { gap: var(--s4); }
  .experiences-head { margin-bottom: var(--s4); }
  .experiences-jump { gap: var(--s1); }
  .experiences-jump__label { flex-basis: 100%; margin-bottom: 0; }
  .experiences-jump a { padding: .55rem .85rem; font-size: var(--t-sm); }
  .experiences-groups .note-card { padding: var(--s4); gap: var(--s3); }
  .experiences-groups .note-card svg { width: 48px; height: 48px; }
  .experiences-strip { gap: var(--s2); }
  .experiences-strip--row { grid-template-columns: repeat(2, 1fr); }
  .experiences-strip--row > li:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
  .experiences-strip--row > li:first-child:nth-last-child(odd) .experiences-strip__img { aspect-ratio: 4 / 3; object-position: center 55%; }
  .bubbles { --bubble-scale: .8; }
  .festive { --festive-scale: .8; inset: calc(var(--s4) * -1) calc(var(--pad) * -1); }
  .paint-ground { --paint-band: 44px; }
  .paint { --paint-scale: .8; }
  .experiences-strip__img { border-radius: var(--r-sm); }
  .experiences-strip--wide .experiences-strip__img { aspect-ratio: 16 / 9; border-radius: var(--r-card); }
  /* on a phone the parade runs edge to edge, a little smaller */
  .parade { --parade-w: 42vw; --parade-gap: var(--s3); --parade-time: 55s; margin: 0 calc(var(--pad) * -1); }
  .parade__img { border-width: 4px; border-radius: var(--r-btn); }
}

/* ---------- contact page ---------- */
/* ---------- contact page ---------- */
.contact-top { padding-bottom: var(--s5); }
@media (max-width: 899px) { .contact-top { padding-bottom: var(--s3); } }
.contact-head { position: relative; margin-bottom: 0; }
.contact-spark { position: absolute; width: 30px; right: -10%; top: 0; animation: twinkle 3s ease-in-out infinite; }
.contact-grid { display: grid; grid-template-columns: 5fr 6fr; gap: var(--s7); align-items: start; padding-bottom: var(--s6); }
.contact-milena { display: flex; align-items: center; gap: var(--s5); margin-bottom: var(--s4); }
.contact-milena__face { width: 140px; flex: none; margin-bottom: var(--s3); }
.contact-milena .kicker { margin-bottom: var(--s1); }
.contact-ways__title { font-size: var(--t-h3); color: var(--purple); }
.contact-phone { display: inline-block; padding: .3rem 0; font-size: clamp(2.2rem, 1.4rem + 2.4vw, 3.4rem); font-weight: 800; line-height: 1; color: var(--pink); text-decoration: none; }
.contact-phone:hover { color: var(--purple); }
.contact-note { margin: var(--s1) 0 var(--s4); color: var(--ink-soft); }
.contact-area { margin: 0 0 var(--s4); padding-left: var(--s3); border-left: 4px solid var(--orange); font-weight: 600; max-width: 30rem; }
.contact-ways .faq summary { padding: var(--s1) 0; min-height: 44px; }
.contact-faq__title { font-size: var(--t-h3); color: var(--purple); margin: var(--s6) 0 var(--s3); }
.contact-social { margin-top: var(--s5); }
.contact-social__title { font-size: var(--t-h3); color: var(--purple); margin: 0 0 var(--s1); }
.contact-social__text { margin: 0 0 var(--s3); color: var(--ink-soft); max-width: 30rem; }
.contact-form__title { font-size: var(--t-h3); color: var(--purple); margin-top: calc(var(--s3) * -1); }
.contact-formcol .form .kicker { margin-bottom: 0; }
.contact-formcol .form label .form__hint { font-weight: 500; }
@media (max-width: 899px) {
  .contact-grid { grid-template-columns: 1fr; gap: var(--s6); padding-bottom: var(--s7); }
  .contact-spark { right: 0; top: -8px; width: 22px; }
  .contact-milena { gap: var(--s4); }
  .contact-milena__face { width: 110px; }
  .contact-formcol .form { padding: var(--s4); }
}

/* ---------- early-years page ---------- */
.ey-intro { grid-template-columns: 7fr 5fr; }
.ey-intro .head { max-width: none; }
.ey-intro .page-title { font-size: clamp(2.8rem, 1.4rem + 3.6vw, 4.6rem); }
.ey-intro .head__text { max-width: 38rem; }
.ey-question { color: var(--purple); font-weight: 700; }
.ey-intro__text { max-width: 38rem; }
.ey-intro .actions { margin-top: var(--s4); }
.ey-plan .form-step__title { font-size: clamp(1.35rem, 1.15rem + .6vw, 1.7rem); }
/* a step's number in the list turns to a tick once it has an answer */
.form--steps:has(.form-step--workshops input:checked) [href="#step-workshops"] .step-rail__num,
.form--steps:has(.form-step--setting input:checked, .form-step--setting input[type="text"]:not(:placeholder-shown)) [href="#step-setting"] .step-rail__num,
.form--steps:has(.form-step--more input:checked) [href="#step-more"] .step-rail__num,
.form--steps:has(.form-step--booking input:checked) [href="#step-booking"] .step-rail__num,
.form--steps:has(.form-step--support input:checked) [href="#step-support"] .step-rail__num,
.form--steps:has(.form-step--provider input:checked) [href="#step-provider"] .step-rail__num,
.form--steps:not(:has(.form-step--you :invalid)) [href="#step-you"] .step-rail__num { background: var(--teal-deep); border-color: var(--teal-deep); color: transparent; }
.form--steps:has(.form-step--workshops input:checked) [href="#step-workshops"] .step-rail__num::after,
.form--steps:has(.form-step--setting input:checked, .form-step--setting input[type="text"]:not(:placeholder-shown)) [href="#step-setting"] .step-rail__num::after,
.form--steps:has(.form-step--more input:checked) [href="#step-more"] .step-rail__num::after,
.form--steps:has(.form-step--booking input:checked) [href="#step-booking"] .step-rail__num::after,
.form--steps:has(.form-step--support input:checked) [href="#step-support"] .step-rail__num::after,
.form--steps:has(.form-step--provider input:checked) [href="#step-provider"] .step-rail__num::after,
.form--steps:not(:has(.form-step--you :invalid)) [href="#step-you"] .step-rail__num::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--paper); }
@media (max-width: 899px) {
  .ey-intro { grid-template-columns: 1fr; gap: var(--s4); }
  /* on a phone the steps list is a bar of numbers that stays at the top while the form scrolls */
  .form--steps { grid-template-columns: 1fr; gap: var(--s4); }
  .step-rail { top: 0; z-index: 4; margin: 0 calc(var(--pad) * -1); padding: var(--s2) var(--pad); background: var(--ground-deep); box-shadow: 0 6px 12px color-mix(in srgb, var(--purple-night) 8%, transparent); }
  .step-rail .kicker, .step-rail__name { display: none; }
  .step-rail ol { display: flex; justify-content: space-between; gap: 0; }
  .step-rail li { flex: 1; }
  .step-rail a { justify-content: center; min-width: 0; }
  .form-step { padding: var(--s4); scroll-margin-top: 4.5rem; }
  .form-step__num { width: 2.5rem; height: 2.5rem; font-size: 1.25rem; }
  .form-step__fields--two { grid-template-columns: 1fr; }
  .form-step__wide { grid-column: auto; }
  .form-send { padding: var(--s4); }
}

/* ---------- prices page ---------- */
/* laid out as the printed price list flyer */
.price-sheet { max-width: 1080px; }
.price-sheet__top { position: relative; display: grid; grid-template-columns: auto 1fr; gap: var(--s5); align-items: center; margin-bottom: var(--s5); }
.price-sheet__logo { display: inline-grid; place-items: center; width: 200px; aspect-ratio: 1; border-radius: 50%; background: var(--paper); box-shadow: var(--shadow); }
.price-sheet__logo .brand__mark { --w: 148px; }
.price-sheet__title { font-size: var(--t-h1); line-height: .95; }
/* the logo's own smile, flick and all, under the title */
.price-sheet__smile { display: block; width: clamp(130px, 16vw, 200px); height: auto; margin: -.1rem 0 var(--s3) .3rem; color: var(--orange); overflow: visible; }
.price-sheet__text { max-width: 34rem; margin: 0; font-size: var(--t-lede); line-height: 1.45; }
.price-sheet__confetti { position: absolute; right: 0; top: 0; width: 130px; }

.package-list { list-style: none; margin: 0 0 var(--s6); padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.package { --package-bg: var(--purple); --package-price: var(--orange); --package-hl: var(--orange-light); display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4); border-radius: var(--r-card); background: var(--package-bg); color: var(--on-dark); box-shadow: var(--shadow); }
.package--2 { --package-bg: var(--purple-night); --package-price: var(--pink-bright); --package-hl: var(--orange-light); }
.package--3 { --package-bg: #4f1a63; --package-price: var(--teal); --package-hl: #8ee3e0; }
.package__name { font-size: 1.7rem; line-height: 1.1; color: var(--on-dark); }
.package__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); font-weight: 700; color: var(--orange-light); line-height: 1.3; }
.package__price { flex: none; display: grid; place-items: center; width: 92px; aspect-ratio: 1; border-radius: 50%; background: var(--package-price); color: var(--purple-night); font-size: 1.75rem; font-weight: 800; line-height: 1; transform: rotate(-6deg); box-shadow: 0 0 0 6px color-mix(in srgb, var(--on-dark) 25%, transparent); }
.package__text { margin: 0; font-size: var(--t-md); line-height: 1.5; }
.package__text b { color: var(--package-hl); font-weight: 800; }

.price-columns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s6); align-items: start; }
.price-column { display: grid; gap: var(--s4); }
.price-item { --tone: var(--purple); padding-left: var(--s3); border-left: 5px solid var(--tone); }
.price-item--orange { --tone: var(--orange); }
.price-item--teal { --tone: var(--teal); }
.price-item--pink { --tone: var(--pink); }
.price-item h2 { font-size: 1.5rem; line-height: 1.15; color: var(--purple); }
.price-item p { margin: 0; }
.price-item__rows { font-weight: 800; color: var(--pink); }
.price-item__rows span + span::before { content: " · "; }
.price-item__rows--stack span { display: block; }
.price-item__rows--stack span + span::before { content: none; }
.price-item__note { font-size: var(--t-sm); color: var(--ink-soft); }
.price-idea { padding: var(--s4); border-radius: var(--r-card); background: var(--pink-soft); }
.price-idea h2 { font-size: 1.5rem; line-height: 1.15; color: var(--pink); margin-bottom: var(--s2); }
.price-idea p { margin-bottom: 0; }

.price-travel { display: flex; align-items: center; gap: var(--s4); margin-top: var(--s5); padding: var(--s4) var(--s5); border-radius: var(--r-card); background: var(--teal-soft); }
.price-travel__car { flex: none; width: 64px; }
.price-travel h2 { font-size: 1.5rem; line-height: 1.15; color: var(--teal-deep); margin-bottom: var(--s1); }
.price-travel p { margin: 0; }

.price-sheet__foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s3) var(--s5); margin-top: var(--s5); padding: var(--s4) var(--s5); border-top: 6px solid var(--orange); border-radius: 0 0 var(--r-card) var(--r-card); background: var(--purple); color: var(--on-dark); }
.price-sheet__label { display: block; font-size: var(--t-sm); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--orange-light); }
.price-sheet__phone, .price-sheet__web { display: inline-block; min-height: 44px; padding: .45rem 0; font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem); font-weight: 800; line-height: 1; color: var(--on-dark); text-decoration: none; }
.price-sheet__phone:hover, .price-sheet__web:hover { color: var(--orange-light); }
.prices-page .band-action { margin: var(--s4) 0 0; }
@media (max-width: 899px) {
  .price-sheet__top { grid-template-columns: 1fr; gap: var(--s3); }
  .price-sheet__logo { display: none; }
  .price-sheet__confetti { width: 90px; }
  .package-list, .price-columns { grid-template-columns: 1fr; }
  .price-travel { align-items: flex-start; padding: var(--s4); }
  .price-travel__car { width: 48px; }
}

:where(img[data-bh-image]){max-width:100%;height:auto}