/* Direction D, the garden: Occasions. Lilac afternoon, midnight plum evening, candle glow. The lights come on. */
@font-face { font-family: "Shrikhand"; src: url("/_assets/previews/d/celebrate/fonts/shrikhand.ae958e0da5.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url("/_assets/previews/d/celebrate/fonts/nunito.29e3890496.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Shantell Sans"; src: url("/_assets/previews/d/celebrate/fonts/shantell.f15631aba9.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --f-display: "Shrikhand", "Cooper Black", "Georgia", serif;
  --f-body: "Nunito Sans", "Avenir Next", "Segoe UI", Arial, sans-serif;
  --f-hand: "Shantell Sans", "Comic Neue", "Segoe Print", cursive;
  --ground: var(--wall-celebrate);
  --ground-2: light-dark(#F1EBF9, #26183A);
  --sheet: light-dark(#FFFFFF, #2C1D42);
  --ink: light-dark(#2A1838, #F3ECF9);
  --ink-2: light-dark(#574468, #CDBFDA);
  --violet: light-dark(#5E3596, #C3A2F0);
  --violet-fill: light-dark(#6B3FA6, #C3A2F0);
  --candle: light-dark(#E9A23B, #F3B84B);
  --focus: light-dark(#5E3596, #F3B84B);
  --thread: light-dark(#ED802B, #F29A55);
  --line: light-dark(#2A1838, #0B0612);
  --string: light-dark(#2A1838, #8C7AA3);
  --glass: light-dark(#FFF2D2, #FFD27A);
}

.wrap { padding-inline: clamp(1rem, 4vw, 3.5rem); }
.top { display: flex; align-items: center; justify-content: space-between; gap: var(--step-3); padding-block: var(--step-3); position: relative; z-index: 3; }
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--ink); }
.brand-name { font: 400 1.4rem/1 var(--f-display); }
.brand-sub { display: block; font: 400 .8rem/1.2 var(--f-hand); color: var(--ink-2); margin-top: .25rem; }
.top-nav { display: flex; align-items: center; gap: clamp(.25rem, 1.4vw, 1.1rem); }
.top-link { display: none; font-weight: 700; text-decoration: none; padding: .6rem .2rem; }
.top-link:hover { text-decoration: underline; text-decoration-color: var(--thread); text-decoration-thickness: 2px; }
.top .call-long { display: none; }
@media (min-width: 900px) { .top-link { display: inline-block; } .top .call-long { display: inline; } }
@media (max-width: 460px) { .brand-sub { display: none; } .top .switch-label { display: none; } .brand-name { font-size: 1.1rem; } .top-nav { gap: .2rem; } .top .call-small { padding-inline: .7rem; } .brand .seal { width: 2.25rem; } }

/* ---------- the festoon: strung across the top of the garden ---------- */
.festoon { display: block; width: 100%; height: clamp(4.5rem, 9vw, 7.5rem); margin-top: -.5rem; pointer-events: none; }
.festoon .string { fill: none; stroke: var(--string); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.festoon .cap { stroke: var(--line); stroke-width: 6; stroke-linecap: round; }
.festoon .glass { fill: var(--glass); stroke: var(--line); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.festoon .glow { fill: var(--candle); opacity: var(--glow-o); }

/* ---------- hero ---------- */
.hero { padding-block: 0 clamp(3rem, 7vw, 6rem); }
.hero-head { display: grid; gap: var(--step-3); max-width: 66rem; margin-top: var(--step-3); }
.hero h1 { font: 400 clamp(2.4rem, 1.4rem + 3.4vw, 4.5rem)/1.02 var(--f-display); letter-spacing: -.01em; text-wrap: balance; color: var(--ink); }
.hero h1 span { color: var(--violet); }
.hero-row { display: grid; gap: var(--step-5); margin-top: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
@media (min-width: 1000px) { .hero-row { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); } }
.lede { font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); color: var(--ink-2); max-width: 38rem; }
.lede strong { color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; gap: var(--step-3) var(--step-4); align-items: center; }
.text-link { font-weight: 700; text-decoration-color: var(--thread); text-decoration-thickness: 2px; min-height: 2.75rem; display: inline-flex; align-items: center; }
.garden { position: relative; border: 3px solid var(--line); border-radius: 2px; overflow: hidden; margin-top: var(--step-5); }
.garden img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 1000px) { .garden img { aspect-ratio: 2 / 1; object-position: 50% 60%; } }
.garden-tag { position: absolute; left: .75rem; top: .75rem; z-index: 2; display: grid; padding: .25rem .6rem .3rem; background: var(--tag-paper); color: var(--tag-ink); border: 1.5px solid var(--seal-ink); border-radius: 3px 10px 10px 3px; }
.garden-tag b { font: 700 1rem/1.1 var(--f-hand); display: flex; gap: .35rem; align-items: center; }
.garden-tag b::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: var(--thread); border: 1.5px solid var(--seal-ink); }
.garden-tag span { font-size: .75rem; }

/* the run sheet: an example day, clipped to its board */
.runsheet { display: grid; gap: var(--step-3); padding: var(--step-4); background: var(--sheet); border: 2px solid var(--line); border-radius: 4px; position: relative; }
.runsheet::before { content: ""; position: absolute; top: -.7rem; left: 50%; width: 4.5rem; height: 1.2rem; margin-left: -2.25rem; background: var(--line); border-radius: 4px 4px 2px 2px; }
.runsheet h2 { font: 700 1.05rem/1.2 var(--f-hand); color: var(--ink-2); }
.runsheet ol { display: grid; gap: .7rem; padding: 0; margin: 0; list-style: none; }
.runsheet li { display: grid; grid-template-columns: 6.5rem 1fr; gap: .75rem; padding-bottom: .7rem; border-bottom: 1.5px dashed color-mix(in srgb, var(--ink) 30%, transparent); }
.runsheet li:last-child { border-bottom: 0; padding-bottom: 0; }
.runsheet time, .runsheet .when { font-weight: 700; color: var(--violet); font-size: .95rem; }
.runsheet .price { font: 400 1.5rem/1 var(--f-display); }

/* ---------- sections ---------- */
.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section-head { display: grid; gap: var(--step-3); max-width: 48rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section h2 { font: 400 clamp(2rem, 1.3rem + 2.6vw, 3.6rem)/1.05 var(--f-display); text-wrap: balance; }
.section-head p { color: var(--ink-2); font-size: 1.125rem; }
.prices { background: var(--ground-2); }

/* the ladder, row by row: what each package covers on the day */
.packages { display: grid; gap: 0; padding: 0; list-style: none; border-top: 3px solid var(--line); }
.pkg { display: grid; gap: var(--step-3) var(--step-5); padding: var(--step-5) 0; border-bottom: 1.5px solid color-mix(in srgb, var(--ink) 30%, transparent); }
@media (min-width: 1000px) { .pkg { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 3.6fr); align-items: start; } }
.pkg-name { font: 400 clamp(1.6rem, 1.3rem + 1vw, 2.1rem)/1.05 var(--f-display); }
.pkg-for { color: var(--ink-2); margin-top: .4rem; }
.pkg-price { font: 400 clamp(2.2rem, 1.8rem + 1.4vw, 3rem)/1 var(--f-display); color: var(--violet); font-variant-numeric: lining-nums; }
.pkg-price.quote { font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem); line-height: 1.15; }
.pkg-body { display: grid; gap: var(--step-3); }
.pkg-body p { max-width: 44rem; }
.pkg-when { font: 600 .95rem/1.3 var(--f-hand); color: var(--ink-2); }
.cover { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 0; margin: 0; list-style: none; max-width: 30rem; }
.cover li { display: grid; gap: .3rem; font-size: .8rem; font-weight: 700; color: var(--ink-2); }
.cover li::before { content: ""; height: .75rem; border: 2px solid var(--line); border-radius: 999px; background: transparent; }
.cover li.on { color: var(--ink); }
.cover li.on::before { background: var(--violet-fill); }
.cover-key { font: 400 .85rem/1.3 var(--f-hand); color: var(--ink-2); }
.addons { display: grid; gap: var(--step-4); padding: 0; list-style: none; margin-top: var(--step-5); }
@media (min-width: 900px) { .addons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.addon { display: grid; gap: .5rem; align-content: start; padding: var(--step-4); background: var(--sheet); border: 2px solid var(--line); border-radius: 4px; }
.addon h4 { font: 400 1.5rem/1.1 var(--f-display); }
.addon .pkg-price { font-size: 2.2rem; }
.sub-label { font: 700 1.2rem/1.2 var(--f-hand); color: var(--ink-2); margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.excluded { display: grid; gap: var(--step-3); margin-top: clamp(2.5rem, 5vw, 3.5rem); padding: var(--step-4); border: 2px dashed var(--line); border-radius: 4px; }
.excluded h3 { font: 400 1.5rem/1.1 var(--f-display); }
.excluded ul { display: grid; gap: .35rem; padding-left: 1.2rem; margin: 0; }
@media (min-width: 900px) { .excluded ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--step-6); } }
.kids { font-weight: 700; }

/* booking */
.steps { display: grid; gap: var(--step-4); padding: 0; list-style: none; counter-reset: step; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.step { display: grid; gap: .5rem; align-content: start; counter-increment: step; padding: var(--step-4); background: var(--sheet); border: 2px solid var(--line); border-radius: 4px 4px 4px 22px; }
.step::before { content: counter(step); font: 400 2.4rem/1 var(--f-display); color: var(--violet); }
.step h3 { font-size: 1.25rem; line-height: 1.2; }
.step p { color: var(--ink-2); }
.book-row { margin-top: var(--step-5); display: flex; flex-wrap: wrap; gap: var(--step-3) var(--step-5); align-items: center; }
.socials { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; padding: 0; list-style: none; }
.socials a { display: inline-flex; min-height: 2.75rem; align-items: center; font-weight: 700; text-decoration-color: var(--thread); text-decoration-thickness: 2px; }

.house-section { background: var(--ground-2); }
.foot { padding-block: var(--step-5) var(--step-6); display: flex; flex-wrap: wrap; gap: var(--step-3) var(--step-5); align-items: center; justify-content: space-between; color: var(--ink-2); font-size: .95rem; }

/* ---------- motion: the string drops in, the lights come on one by one ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.lt-ready .festoon-swing { animation: drape 1100ms var(--ease-out) both; transform-origin: 50% 0; }
  html.lt-ready .festoon .glass { animation: bulb-on 380ms ease-out both; animation-delay: calc(600ms + var(--i, 0) * 85ms); }
  html.lt-ready .festoon .glow { animation: glow-on 600ms ease-out both; animation-delay: calc(640ms + var(--i, 0) * 85ms); }
  html.lt-ready .hero-head > * { animation: float-in 800ms var(--ease-out) both; animation-delay: calc(150ms + var(--i, 0) * 100ms); }
  html.lt-ready .garden img { animation: settle 1400ms var(--ease-out) 200ms both; }
  html.lt-ready .runsheet li { animation: float-in 600ms var(--ease-out) both; animation-delay: calc(900ms + var(--i, 0) * 120ms); }
  .packages.lt-arrived .cover li.on::before { animation: fill-on 420ms ease-out both; animation-delay: calc(250ms + var(--i, 0) * 110ms); }
  .addon, .step { transition: transform 220ms var(--ease-out); }
  .addon:hover, .step:hover { transform: translateY(-4px) rotate(-.4deg); }
}
@keyframes drape { from { transform: translateY(-18px) scaleY(.6); } }
@keyframes bulb-on { from { opacity: .35; } }
@keyframes glow-on { from { opacity: 0; } }
@keyframes float-in { from { transform: translateY(18px); opacity: 0; } }
@keyframes settle { from { transform: scale(1.06); } }
@keyframes fill-on { from { opacity: .3; } }
.b2 { --i: 1; } .b3 { --i: 2; } .b4 { --i: 3; } .b5 { --i: 4; } .b6 { --i: 5; } .b7 { --i: 6; } .b8 { --i: 7; } .b9 { --i: 8; } .b10 { --i: 9; } .b11 { --i: 10; } .b12 { --i: 11; } .b13 { --i: 12; }
.hero-head > :nth-child(2) { --i: 1; } .hero-head > :nth-child(3) { --i: 2; }
.runsheet li:nth-child(2) { --i: 1; } .runsheet li:nth-child(3) { --i: 2; } .runsheet li:nth-child(4) { --i: 3; }
.cover li:nth-child(2) { --i: 1; } .cover li:nth-child(3) { --i: 2; } .cover li:nth-child(4) { --i: 3; }

/* light-dark() takes colours only, so the number that dims or lights the lamps is switched here */
:root { --glow-o: 0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --glow-o: .55; } }
:root[data-theme="dark"] { --glow-o: .55; }