/*
 * Celebrate, Direction B. Before the doors open: an afternoon party in pale
 * lilac, an evening do in midnight plum, set in Unbounded, round and generous
 * like balloon lettering. The verb's letters float up one by one and the
 * confetti (kanoko dots) comes down and stays. Motion is buoyant: a soft
 * overshoot, never a hard bounce.
 */
@font-face {
  font-family: "Unbounded";
  src: url(/_assets/previews/b/celebrate/fonts/unbounded-var.22f9b928aa.woff2) format("woff2");
  font-weight: 200 900; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url(/_assets/previews/b/celebrate/fonts/instrument-sans-var.8b74e9bc6e.woff2) format("woff2");
  font-weight: 400 700; font-stretch: 75% 100%; font-display: swap;
}

:root {
  --ground: light-dark(#F4ECF7, #1E0F26);
  --raise: light-dark(#FBF7FC, #2A1834);
  --ink: light-dark(#24112E, #F7EEF9);
  --muted: light-dark(#5E4B66, #CDB9D3);
  --accent: light-dark(#6E2BB8, #CFA8FF);
  --gold: light-dark(#7D5200, #F2C14E);
  --line: light-dark(#DCCBE3, #43294F);
  --display: "Unbounded", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  --float: cubic-bezier(.34, 1.4, .64, 1);
}

/* ---------- Seal ---------- */
.seal { color: var(--ink); }
.seal .dot-a { fill: var(--accent); }
.seal .dot-b { fill: var(--gold); }
.seal .hair { stroke: currentColor; stroke-width: 1.2; }
.seal .mono path { fill: currentColor; }
.seal .ring-text { font: 600 10.5px/1 var(--body); letter-spacing: .34em; fill: currentColor; }
.seal .ring-long { font-size: 9.6px; letter-spacing: .14em; }

.h2 { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3.4rem); line-height: 1.05; }
.h3 { font-family: var(--display); font-weight: 600; font-size: 1.125rem; line-height: 1.25; letter-spacing: -.005em; }
.lede { margin-top: var(--s4); color: var(--muted); font-size: 1.125rem; max-width: 54ch; }
.when { font-size: .875rem; font-weight: 600; color: var(--gold); }

/* ---------- Hero ---------- */
.hero-text { padding-block: clamp(1.25rem, 4vh, 3rem) var(--s6); }
.hero-title { font-family: var(--display); line-height: 1; }
.hero-title .lead { display: block; font: 600 clamp(1.1rem, .9rem + .8vw, 1.5rem)/1.2 var(--body); color: var(--muted); margin-bottom: var(--s3); }
.big-verb {
  position: relative; display: inline-block; color: var(--accent);
  font-weight: 800; letter-spacing: -.035em;
  font-size: clamp(2.6rem, .4rem + 10.4vw, 9.5rem);
}
.big-verb .vw { position: relative; display: inline-block; }
.big-verb .main, .big-verb .l { display: inline-block; }
.l0 { --i: 0; } .l1 { --i: 1; } .l2 { --i: 2; } .l3 { --i: 3; } .l4 { --i: 4; } .l5 { --i: 5; } .l6 { --i: 6; } .l7 { --i: 7; } .l8 { --i: 8; }
.big-verb .spark {
  position: absolute; opacity: 0; width: .16em; height: .16em; background: var(--gold);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
.big-verb .k0 { left: 2%; top: -6%; } .big-verb .k1 { left: 27%; top: -16%; width: .1em; height: .1em; }
.big-verb .k2 { left: 51%; top: -10%; } .big-verb .k3 { left: 79%; top: -18%; width: .1em; height: .1em; }
.big-verb .k4 { left: 99%; top: 6%; } .big-verb .k5 { left: 64%; top: 96%; width: .1em; height: .1em; }
/* Kanoko dots: the confetti that falls and stays. */
.confetti { position: absolute; inset: -12% -2% -18%; pointer-events: none; }
.confetti i { position: absolute; width: .075em; height: .075em; border-radius: 50%; background: var(--gold); }
.confetti i:nth-child(odd) { background: var(--accent); width: .055em; height: .055em; }
.confetti .c0 { left: 3%; top: 9%; } .confetti .c1 { left: 13%; top: 97%; } .confetti .c2 { left: 26%; top: -2%; }
.confetti .c3 { left: 35%; top: 88%; } .confetti .c4 { left: 47%; top: 11%; } .confetti .c5 { left: 57%; top: 99%; }
.confetti .c6 { left: 71%; top: 1%; } .confetti .c7 { left: 82%; top: 91%; } .confetti .c8 { left: 89%; top: 14%; } .confetti .c9 { left: 99%; top: 82%; }
.hero-row { margin-top: var(--s6); display: grid; gap: var(--s5); align-items: end; }
.hero-line { font-size: clamp(1.125rem, 1rem + .4vw, 1.3rem); max-width: 38ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); align-items: center; }
.hero-text .note { margin-top: var(--s5); }
@media (min-width: 64rem) { .hero-row { grid-template-columns: 1fr auto; } }
.hero-table { margin: 0; }
.hero-table img { width: 100%; height: clamp(16rem, 42vw, 34rem); object-fit: cover; }
.hero-table figcaption { padding-block: var(--s3); font-size: .875rem; color: var(--muted); }

@media (prefers-reduced-motion: no-preference) {
  .lt-ready .big-verb .l { animation: float-up .9s var(--float) calc(150ms + var(--i) * 70ms) both; }
  .lt-ready .big-verb .spark { animation: twinkle 1.2s ease-out both; }
  .lt-ready .big-verb .k0 { animation-delay: .9s; } .lt-ready .big-verb .k1 { animation-delay: 1.05s; }
  .lt-ready .big-verb .k2 { animation-delay: 1.2s; } .lt-ready .big-verb .k3 { animation-delay: 1.3s; }
  .lt-ready .big-verb .k4 { animation-delay: 1.45s; } .lt-ready .big-verb .k5 { animation-delay: 1.6s; }
  .lt-ready .confetti i { animation: fall 1.3s cubic-bezier(.2, .6, .3, 1) both; }
  .lt-ready .confetti i:nth-child(3n) { animation-delay: .75s; }
  .lt-ready .confetti i:nth-child(3n + 1) { animation-delay: .9s; }
  .lt-ready .confetti i:nth-child(3n + 2) { animation-delay: 1.05s; }
  .lt-ready .hero-title .lead { animation: up .6s var(--float) both; }
  .lt-ready .hero-row, .lt-ready .hero-text .note { animation: up .8s var(--float) 1s both; }
  .lt-ready .hero-table picture { animation: lift .9s cubic-bezier(.16, 1, .3, 1) .5s both; }
}
@media (prefers-reduced-motion: reduce) {
  .lt-ready .hero { animation: fade .3s ease-out both; }
}
@keyframes float-up { 0% { opacity: 0; transform: translateY(.7em) scale(.6); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes twinkle { 0% { opacity: 0; transform: scale(0) rotate(0); } 30% { opacity: 1; transform: scale(1.3) rotate(45deg); } 60% { opacity: .2; transform: scale(.7) rotate(70deg); } 80% { opacity: 1; transform: scale(1) rotate(90deg); } 100% { opacity: 0; transform: scale(.5) rotate(120deg); } }
@keyframes fall { from { transform: translateY(-3.5em) rotate(-90deg); opacity: 0; } 30% { opacity: 1; } }
@keyframes up { from { opacity: 0; transform: translateY(1rem); } }
@keyframes lift { from { opacity: 0; transform: translateY(2rem); } }
@keyframes fade { from { opacity: 0; } }

/* ---------- Prices: one plan, growing ---------- */
.prices { padding-block: var(--s9); }
.prices-head { margin-bottom: var(--s7); }
.stack { display: grid; }
.step {
  display: grid; grid-template-columns: 2.75rem 1fr; gap: var(--s2) var(--s5);
  padding-block: var(--s6); border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line); }
.bars { display: flex; flex-direction: column; justify-content: flex-start; gap: 4px; padding-top: .45rem; grid-row: 1 / span 2; align-self: start; }
.bars i { display: block; height: .55rem; border-radius: 99px; background: var(--accent); transform-origin: left; }
.bars i:nth-child(even) { background: var(--gold); }
.bars i:last-child { width: 100%; }
.step-name { font-family: var(--display); font-weight: 700; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.8rem); letter-spacing: -.015em; line-height: 1.15; }
.step-main { display: grid; gap: var(--s2); max-width: 48rem; }
.for { color: var(--muted); font-weight: 550; }
.adds b { font-weight: 700; }
.kids { font-weight: 650; color: var(--accent); }
.step-price { grid-column: 2; font-family: var(--display); font-weight: 300; font-size: clamp(2.2rem, 1.6rem + 2vw, 3.6rem); line-height: 1; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
@media (min-width: 52rem) {
  .step { grid-template-columns: 3.25rem 1fr auto; align-items: start; }
  .bars { grid-row: auto; }
  .step-price { grid-column: 3; text-align: right; }
}
@media (prefers-reduced-motion: no-preference) {
  .step.lt-arrived .bars i { animation: bar .7s var(--float) both; }
  .step.lt-arrived .bars i:nth-child(2) { animation-delay: .06s; }
  .step.lt-arrived .bars i:nth-child(3) { animation-delay: .12s; }
  .step.lt-arrived .bars i:nth-child(4) { animation-delay: .18s; }
  .step.lt-arrived .bars i:nth-child(5) { animation-delay: .24s; }
}
@keyframes bar { from { transform: scaleX(.2); } }

.extras { margin-top: var(--s8); display: grid; gap: var(--s6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.extra { display: grid; gap: var(--s2); align-content: start; padding: var(--s5); background: var(--raise); border-radius: 14px; }
.x-price { display: block; margin-top: var(--s1); font-weight: 300; font-size: 1.75rem; color: var(--accent); }
.excl { margin-top: var(--s7); display: grid; gap: var(--s2); max-width: 52rem; }
.excl p { color: var(--muted); }

/* ---------- When to book: the run-up ---------- */
.when-sec { padding-block: var(--s9); background: var(--raise); }
.runup { margin-top: var(--s7); display: grid; gap: 0; position: relative; }
.runup li { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--s4); align-items: center; padding-block: var(--s3); position: relative; }
.runup li::before { content: ""; position: absolute; left: 7.05rem; top: 50%; width: .8rem; height: .8rem; margin-top: -.4rem; border-radius: 50%; background: var(--accent); }
.runup li::after { content: ""; position: absolute; left: 7.4rem; top: 0; bottom: 0; width: 2px; background: var(--line); z-index: -1; }
.runup .mark { font-family: var(--display); font-weight: 600; font-size: .9375rem; text-align: right; }
.runup .what { padding-left: var(--s6); color: var(--muted); font-weight: 550; }
.runup .day::before { background: var(--gold); width: 1.2rem; height: 1.2rem; margin-top: -.6rem; left: 6.85rem; }
.runup .day .what { color: var(--ink); font-weight: 700; }
@media (min-width: 60rem) {
  .runup { grid-template-columns: repeat(6, 1fr); }
  .runup li { grid-template-columns: 1fr; gap: var(--s5); align-items: start; padding-block: 0; }
  .runup li::before { left: 0; top: 2.6rem; margin-top: 0; }
  .runup li::after { left: 0; right: 0; top: 2.95rem; bottom: auto; width: auto; height: 2px; }
  .runup .day::before { top: 2.4rem; left: 0; margin-top: 0; }
  .runup .mark { text-align: left; font-size: 1.125rem; }
  .runup .what { padding-left: 0; padding-top: var(--s5); }
}
@media (prefers-reduced-motion: no-preference) {
  .runup.lt-arrived li::before { animation: pop .6s var(--float) both; }
  .runup.lt-arrived li:nth-child(2)::before { animation-delay: .08s; }
  .runup.lt-arrived li:nth-child(3)::before { animation-delay: .16s; }
  .runup.lt-arrived li:nth-child(4)::before { animation-delay: .24s; }
  .runup.lt-arrived li:nth-child(5)::before { animation-delay: .32s; }
  .runup.lt-arrived li:nth-child(6)::before { animation-delay: .4s; }
}
@keyframes pop { from { transform: scale(.3); } }

/* ---------- Booking ---------- */
.booking { padding-block: var(--s9) var(--s7); }
.steps { margin-top: var(--s7); display: grid; gap: var(--s6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.steps li { display: grid; gap: var(--s2); align-content: start; }
.step-n { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; font: 700 1.125rem/1 var(--display); color: var(--ground); background: var(--accent); border-radius: 50%; margin-bottom: var(--s2); }
.steps p { color: var(--muted); max-width: 34ch; }
.booking-cta { margin-top: var(--s7); }

.family-sentence { font-weight: 500; font-size: clamp(1.5rem, 3vw, 2.75rem); letter-spacing: -.02em; }
.foot .seal-mini { width: 3.25rem; height: 3.25rem; }