/* Hey You Booth: shared styles for the home, booking and admin pages. */

/* Bricolage Grotesque (SIL Open Font License, see /fonts/OFL-LICENSE.txt), served from this site.
   One variable file covers weight, width and optical size. */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal; font-display: swap;
  font-weight: 200 800; font-stretch: 75% 100%;
  src: url("/fonts/bricolage-grotesque-latin-standard-normal.woff2") format("woff2-variations"),
       url("/fonts/bricolage-grotesque-latin-standard-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal; font-display: swap;
  font-weight: 200 800; font-stretch: 75% 100%;
  src: url("/fonts/bricolage-grotesque-latin-ext-standard-normal.woff2") format("woff2-variations"),
       url("/fonts/bricolage-grotesque-latin-ext-standard-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens */
:root {
  --espresso: #2B231E;      /* dark sections, footer */
  --espresso-2: #3A3029;    /* raised surfaces on dark */
  --brown: #4A3D34;         /* logo ink, body text on light */
  --brown-soft: #6E5E52;    /* secondary text on light (4.9:1 on plaster) */
  --plaster: #EFE4D6;       /* page background, matches the studio wall */
  --paper: #FAF5EE;         /* cards and fields on light */
  --oak: #B8875A;           /* booth wood: accents, rules */
  --oak-deep: #80593A;      /* oak dark enough for text on plaster (4.9:1) */
  --bulb: #F2C879;          /* neon sign glow: CTAs on dark */
  --cream: #F6F0E7;         /* text on dark */
  --cream-soft: #CDBFB0;    /* secondary text on dark */
  --line: rgb(var(--ink-rgb) / .18);
  --line-dark: rgb(246 240 231 / .14);
  --ok: #3F6B45;
  --warn: #9A5B12;
  --danger: #A23B2A;
  /* Dark bands (header bars, dark sections, footer) and the text on them; they stay dark in both themes. */
  --deep: #2B231E;
  --on-deep: #F6F0E7;
  --on-deep-soft: #CDBFB0;
  /* Theme helpers: text on ink-coloured fills, inks that stay dark on the bulb yellow, fills that keep white text readable. */
  --ink-rgb: 74 61 52;
  --on-ink: #F6F0E7;
  --bulb-ink: #2B231E;
  --selected: #E6D7C4;
  --tint-ok: #E3EDE2;
  --tint-danger: #F7E3DE;
  --danger-fill: #A23B2A;
  --ok-fill: #3F6B45;
  --header-bg: rgb(239 228 214 / .92);
  color-scheme: light;

  --font: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  /* Type scale (perfect fourth, 1.333) */
  --step--1: .875rem;
  --step-0: 1.0625rem;
  --step-1: 1.333rem;
  --step-2: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem);
  --step-3: clamp(1.9rem, 1.4rem + 2.2vw, 2.75rem);
  --step-4: clamp(2.4rem, 1.6rem + 3.6vw, 4.25rem);

  --space-1: .5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2rem;
  --space-5: 3rem;  --space-6: 4.5rem; --space-7: clamp(4rem, 3rem + 5vw, 8rem);
  --gutter: clamp(1rem, .5rem + 2.5vw, 2.5rem);
  --max: 76rem;
  --radius: 6px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --header-h: 4.5rem;
}

/* Dark theme: follows the device setting unless the visitor picks one with the theme switch. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --plaster: #191412;
  --paper: #241D19;
  --brown: #E3D7C8;
  --brown-soft: #B3A393;
  --espresso: #F4ECE1;
  --oak-deep: #D6A877;
  --line: rgb(243 234 223 / .14);
  --ok: #86BC90;
  --warn: #E2A75C;
  --danger: #EC8A76;
  --deep: #0F0C0A;
  --ink-rgb: 227 215 200;
  --on-ink: #1C1613;
  --selected: #3A2F28;
  --tint-ok: #213528;
  --tint-danger: #3E231D;
  --header-bg: rgb(25 20 18 / .9);
  color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --plaster: #191412;
  --paper: #241D19;
  --brown: #E3D7C8;
  --brown-soft: #B3A393;
  --espresso: #F4ECE1;
  --oak-deep: #D6A877;
  --line: rgb(243 234 223 / .14);
  --ok: #86BC90;
  --warn: #E2A75C;
  --danger: #EC8A76;
  --deep: #0F0C0A;
  --ink-rgb: 227 215 200;
  --on-ink: #1C1613;
  --selected: #3A2F28;
  --tint-ok: #213528;
  --tint-danger: #3E231D;
  --header-bg: rgb(25 20 18 / .9);
  color-scheme: dark;
}

/* ---------- Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--banner-h, 0px) + 1rem); }
body {
  margin: 0;
  background: var(--plaster);
  color: var(--brown);
  font-family: var(--font);
  font-size: var(--step-0);
  font-variation-settings: "opsz" 16;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}
img, video { display: block; max-width: 100%; height: auto; }
/* "hidden" always wins, even over components that set their own display */
[hidden] { display: none !important; }
h1, h2, h3, h4 { margin: 0; line-height: 1.05; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--bulb); color: var(--bulb-ink); }
:focus-visible { outline: 3px solid var(--oak-deep); outline-offset: 3px; border-radius: 2px; }
.section--dark :focus-visible, .site-footer :focus-visible { outline-color: var(--bulb); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--gutter); top: -4rem; z-index: 100;
  background: var(--deep); color: var(--on-deep); padding: .75rem 1rem; border-radius: var(--radius);
}
.skip-link:focus { top: .75rem; }

.container { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.section { padding-block: var(--space-7); }
.section--dark { background: var(--deep); color: var(--on-deep); }

/* Placeholder copy the owner still needs to replace: deliberately easy to spot. */
mark.ph {
  background: rgb(242 200 121 / .55);
  color: inherit;
  outline: 1px dashed var(--oak-deep);
  outline-offset: 1px;
  border-radius: 2px;
  padding: 0 .15em;
}
.section--dark mark.ph, .site-footer mark.ph { background: rgb(242 200 121 / .2); outline-color: var(--bulb); }

/* ---------- Type roles */
.display-2, .display-3, .about__statement {
  font-variation-settings: "opsz" 96, "wdth" 75;
  font-weight: 800;
  letter-spacing: -.01em;
}
.display-2 { font-size: var(--step-4); line-height: .95; }
.display-3 { font-size: var(--step-3); line-height: 1; }
.section-label { font-size: var(--step--1); font-weight: 600; letter-spacing: .02em; color: var(--oak-deep); }

/* ---------- Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 2.875rem; padding: .7rem 1.35rem;
  border: 1.5px solid transparent; border-radius: 999px;
  font-weight: 600; font-size: var(--step-0); line-height: 1.1; text-decoration: none;
  cursor: pointer; touch-action: manipulation;
  transition: background-color .2s, color .2s, border-color .2s, transform .15s var(--ease-out);
}
.btn:active { transform: scale(.97); }
.btn--dark { background: var(--espresso); color: var(--on-ink); }
.btn--dark:hover { background: var(--brown); }
.btn--bulb { background: var(--bulb); color: var(--bulb-ink); }
.btn--bulb:hover { background: #F7D898; }
.btn--ghost { background: transparent; border-color: currentColor; }
.btn--ghost:hover { background: rgb(var(--ink-rgb) / .08); }
.btn--lg { min-height: 3.25rem; padding-inline: 1.75rem; font-size: var(--step-1); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }

/* ---------- Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--header-bg);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.site-header__inner {
  width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto;
  min-height: var(--header-h);
  display: flex; align-items: center; gap: var(--space-4);
}
.brand { flex: none; display: block; padding-block: .5rem; }
.brand img { width: 7.5rem; }
.site-nav ul { list-style: none; display: flex; gap: var(--space-3); margin: 0; padding: 0; }
.site-nav a { text-decoration: none; font-weight: 500; padding-block: .5rem; }
.site-nav a:hover { text-decoration: underline; }
.local-time {
  margin: 0 0 0 auto; font-size: var(--step--1); color: var(--brown-soft);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.local-time span { font-weight: 600; color: var(--brown); margin-right: .35em; }
.site-header__cta { flex: none; }
.nav-toggle { display: none; }

@media (max-width: 960px) {
  .local-time { display: none; }
  .site-header__inner { gap: var(--space-2); }
  .site-header__cta { margin-left: auto; }
  .nav-toggle {
    display: inline-grid; place-items: center; width: 2.875rem; height: 2.875rem;
    border: 1.5px solid var(--brown); border-radius: 999px; background: transparent; cursor: pointer;
  }
  .nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
    display: block; width: 1.1rem; height: 1.5px; background: var(--brown); border-radius: 1px;
    transition: transform .25s var(--ease-out), opacity .2s;
  }
  .nav-toggle__bars { position: relative; }
  .nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
  .nav-toggle__bars::before { top: -6px; }
  .nav-toggle__bars::after { top: 6px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

  .site-nav {
    position: absolute; inset: 100% 0 auto 0;
    background: var(--plaster); border-bottom: 1px solid var(--line);
    padding: var(--space-2) var(--gutter) var(--space-4);
  }
  .site-nav:not(.is-open) { display: none; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav a { display: block; padding: .8rem 0; font-size: var(--step-2); font-weight: 700; border-bottom: 1px solid var(--line); }
}
@media (max-width: 420px) {
  .brand img { width: 6.25rem; }
  .site-header__cta { padding-inline: 1rem; }
}

/* ---------- Arch frames (the oval mirror booth and arched windows) */
.arch { margin: 0; overflow: hidden; border-radius: 999px 999px var(--radius) var(--radius); background: var(--espresso-2); }
.arch img { width: 100%; height: 100%; object-fit: cover; }

.placeholder-photo {
  display: grid; place-items: center; text-align: center;
  padding: var(--space-3);
  background:
    repeating-linear-gradient(135deg, rgb(246 240 231 / .05) 0 12px, transparent 12px 24px),
    var(--espresso-2);
  color: var(--cream-soft); font-size: var(--step--1); font-weight: 500;
  border: 1.5px dashed rgb(242 200 121 / .45);
}

/* ---------- Hero: full-bleed video with the greeting across the bottom */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: calc(100svh - var(--header-h));
  display: flex; flex-direction: column;
  background: var(--deep) url("/assets/img/hero-poster.webp") center / cover no-repeat;
  color: var(--cream);
}
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__video { width: 100%; height: 100%; object-fit: cover; }
/* Scrim: darker at the bottom for the greeting, lighter through the middle so the video reads */
.hero__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgb(43 35 30 / .9) 0%, rgb(43 35 30 / .55) 38%, rgb(43 35 30 / .2) 64%, rgb(43 35 30 / .5) 100%),
    linear-gradient(to right, rgb(43 35 30 / .5), transparent 42%, transparent 58%, rgb(43 35 30 / .55));
}
.hero :focus-visible { outline-color: var(--bulb); }
.hero mark.ph { background: rgb(242 200 121 / .25); outline-color: var(--bulb); }

.hero__grid {
  flex: 1;
  width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto;
  display: grid; gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  padding-top: var(--space-5);
}
.hero__intro {
  grid-column: 1; max-width: 24rem; margin: 0;
  font-size: var(--step-1); line-height: 1.45;
  text-shadow: 0 1px 12px rgb(43 35 30 / .5);
}
.hero__aside {
  grid-column: 2; grid-row: 2; align-self: end; justify-self: end;
  max-width: 19rem; padding-bottom: var(--space-3);
}
.hero__aside p { color: var(--cream); text-shadow: 0 1px 12px rgb(43 35 30 / .6); }
.hero__aside .btn { margin-top: var(--space-1); }

.hero__pause {
  position: absolute; z-index: 2; top: var(--space-3); right: var(--gutter);
  display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border: 1.5px solid rgb(246 240 231 / .45); border-radius: 50%;
  background: rgb(43 35 30 / .45); backdrop-filter: blur(6px);
  color: var(--cream); cursor: pointer; transition: background-color .2s;
}
.hero__pause:hover { background: rgb(43 35 30 / .75); }
.hero__pause svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.hero__pause .icon-play { fill: currentColor; stroke-width: 1.5; }
.hero__pause .icon-play, .hero__pause[data-paused] .icon-pause { display: none; }
.hero__pause[data-paused] .icon-play { display: block; }

.hero__title {
  position: relative;
  margin: 0;
  padding-bottom: .04em; /* room for the comma's tail */
  text-align: center;
  color: var(--cream);
  font-size: 26.5vw;
  font-weight: 800;
  font-variation-settings: "opsz" 96, "wdth" 75;
  line-height: .8;
  letter-spacing: -.02em;
  white-space: nowrap;
  pointer-events: none;
}
.hero__word { display: inline-block; }
.hero__word > span { display: inline-block; }

/* The one orchestrated moment: the greeting rises letter by letter. */
@media (prefers-reduced-motion: no-preference) {
  .hero__word > span { transform: translateY(105%); opacity: 0; animation: rise .9s var(--ease-out) forwards; }
  .hero__word > span:nth-child(2) { animation-delay: .06s; }
  .hero__word > span:nth-child(3) { animation-delay: .12s; }
  .hero__word > span:nth-child(4) { animation-delay: .18s; }
  .hero__word > span:nth-child(5) { animation-delay: .32s; }
  .hero__word > span:nth-child(6) { animation-delay: .38s; }
  .hero__word > span:nth-child(7) { animation-delay: .44s; }
}
@keyframes rise { to { transform: none; opacity: 1; } }

@media (max-width: 760px) {
  .hero { min-height: min(88svh, 46rem); }
  .hero__grid { grid-template-columns: 1fr; padding-top: var(--space-4); padding-right: 3.5rem; }
  .hero__aside { grid-column: 1; justify-self: start; }
}

/* ---------- About */
.about__grid {
  display: grid; gap: var(--space-4) var(--space-6);
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  border-top: 1px solid var(--line); padding-top: var(--space-3);
}
.about__statement { font-size: var(--step-3); line-height: 1.02; max-width: 22ch; color: var(--espresso); margin: 0; }
.about__photo { aspect-ratio: 3 / 4; align-self: start; max-width: 24rem; }
/* The owners' portrait keeps its own shape, so nobody gets cropped out. */
.about__photo--owners { aspect-ratio: 705 / 626; margin: 0; overflow: hidden; border-radius: 18px; background: var(--espresso-2); }
.about__photo--owners img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about__body { max-width: 34rem; align-self: end; }
.facts { margin: var(--space-4) 0 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.facts div { display: grid; grid-template-columns: 7rem 1fr; gap: var(--space-2); padding: .8rem 0; border-bottom: 1px solid var(--line); }
.facts dt { font-weight: 600; }
.facts dd { margin: 0; color: var(--brown-soft); }
@media (max-width: 760px) {
  .about__grid { grid-template-columns: 1fr; }
  .about__photo { max-width: none; width: 100%; }
}

/* ---------- Section heads */
.section-head { max-width: 40rem; margin-bottom: var(--space-6); }
.section-head p { margin-top: var(--space-2); font-size: var(--step-1); line-height: 1.45; color: var(--brown-soft); }
.section--dark .section-head p { color: var(--cream-soft); }
.section-head--row { max-width: none; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-3); }

/* ---------- Investments */
.service {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-6);
  align-items: center;
  padding-block: var(--space-6);
  border-top: 1px solid var(--line-dark);
}
.service:nth-of-type(even) .service__photo { order: 2; }
.service__photo { aspect-ratio: 4 / 5; width: 100%; max-width: 26rem; justify-self: center; }
.service__body { max-width: 36rem; }
.service__lede { margin-top: var(--space-2); font-size: var(--step-1); line-height: 1.45; color: var(--cream-soft); }
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25em .6em; margin-block: var(--space-3); font-size: var(--step-2); font-weight: 700; color: var(--bulb); }
.price span { font-size: var(--step-0); font-weight: 400; color: var(--cream-soft); }
.checklist { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.checklist li { position: relative; padding: .55rem 0 .55rem 1.75rem; border-bottom: 1px solid var(--line-dark); }
.checklist li::before {
  content: ""; position: absolute; left: .15rem; top: 1.05rem;
  width: .55rem; height: .55rem; border-radius: 50%; border: 1.5px solid var(--bulb);
}
@media (max-width: 860px) {
  .service { grid-template-columns: 1fr; gap: var(--space-4); }
  .service:nth-of-type(even) .service__photo { order: 0; }
  .service__photo { max-width: 22rem; }
}

/* ---------- Gallery */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  min-height: 2.75rem; padding: .5rem 1.1rem; border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--paper); cursor: pointer; font-weight: 500;
  transition: background-color .2s, border-color .2s, color .2s;
}
.chip:hover { border-color: var(--brown); }
.chip[aria-pressed="true"] { background: var(--espresso); border-color: var(--espresso); color: var(--on-ink); }

/* Videos only, all 9:16, so every tile is the same size. */
.gallery__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-3) var(--space-2);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.tile { min-width: 0; }
.tile[hidden] { display: none; }
.tile figure { margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.tile video {
  display: block; width: 100%; height: auto; aspect-ratio: 9 / 16;
  object-fit: cover; border-radius: var(--radius); background: var(--espresso-2);
}
.tile figcaption { font-size: var(--step--1); color: var(--brown-soft); }
.gallery--page { padding-top: 0; }
.gallery--page .filters { margin-bottom: var(--space-4); }
@media (max-width: 900px) { .gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Reviews */
.reviews__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.review {
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4); background: var(--espresso-2); border-radius: var(--radius);
}
.review blockquote { margin: 0; font-size: var(--step-1); line-height: 1.45; }
.review__who { display: flex; flex-direction: column; font-weight: 600; }
.review__who span { font-weight: 400; color: var(--cream-soft); font-size: var(--step--1); }

/* ---------- FAQ */
.faq__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--space-6); }
.faq__aside { margin-top: var(--space-3); color: var(--brown-soft); max-width: 22rem; }
.faq__list { border-top: 1px solid var(--line); }
.faq__list details { border-bottom: 1px solid var(--line); }
.faq__list summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--space-2);
  padding: 1.15rem 0; font-size: var(--step-1); font-weight: 600; line-height: 1.3;
}
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after {
  content: ""; flex: none; width: .7rem; height: .7rem; margin-top: .45rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .25s var(--ease-out);
}
.faq__list details[open] summary::after { transform: rotate(225deg); margin-top: .7rem; }
.faq__list details p { max-width: 60ch; padding-bottom: 1.25rem; color: var(--brown-soft); }
@media (max-width: 860px) { .faq__grid { grid-template-columns: 1fr; gap: var(--space-4); } }

/* ---------- Book CTA */
.book-cta { padding-top: 0; }
.book-cta__inner {
  display: grid; justify-items: center; text-align: center; gap: var(--space-3);
  padding: var(--space-6) var(--gutter);
  border-top: 1px solid var(--line);
}
.book-cta__inner h2 { max-width: 16ch; color: var(--espresso); }
.book-cta__inner p { max-width: 36rem; font-size: var(--step-1); color: var(--brown-soft); }

/* ---------- Footer */
.site-footer { background: var(--deep); color: var(--on-deep); padding-top: var(--space-6); overflow: hidden; }
.site-footer__grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: var(--space-5); align-items: start; }
.site-footer__brand img { width: 13rem; }
.footer-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
.footer-nav a {
  display: block; padding: .7rem .9rem; background: var(--espresso-2); border-radius: var(--radius);
  text-decoration: none; font-weight: 500; transition: background-color .2s, color .2s;
}
.footer-nav a:hover { background: var(--bulb); color: var(--bulb-ink); }
.site-footer__contact { font-style: normal; display: grid; gap: .35rem; }
.site-footer__contact p { margin: 0; }
.socials { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem !important; }
.site-footer__giant {
  margin: var(--space-5) 0 0; text-align: center; white-space: nowrap;
  font-size: 26.5vw; line-height: .74; font-weight: 800;
  font-variation-settings: "opsz" 96, "wdth" 75; letter-spacing: -.02em;
  color: var(--espresso-2);
  transform: translateY(8%);
  user-select: none;
}
.site-footer__legal { padding-block: var(--space-3); font-size: var(--step--1); color: var(--cream-soft); border-top: 1px solid var(--line-dark); position: relative; background: var(--deep); }
@media (max-width: 860px) {
  .site-footer__grid { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* ---------- Forms (booking and admin) */
.field { display: grid; gap: .35rem; min-width: 0; }
.field label, .field legend { font-weight: 600; font-size: var(--step--1); }
.field .hint { font-size: var(--step--1); color: var(--brown-soft); }
.input, .field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea {
  width: 100%; min-height: 2.875rem; padding: .65rem .85rem;
  background: var(--paper); border: 1.5px solid rgb(var(--ink-rgb) / .65); border-radius: var(--radius);
  font-size: 1rem;
}
.field textarea { min-height: 7rem; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline-offset: 1px; border-color: var(--oak-deep); }
.field [aria-invalid="true"] { border-color: var(--danger); }
.field-error { color: var(--danger); font-size: var(--step--1); font-weight: 500; }
.req { color: var(--danger); }

.alert { padding: .9rem 1rem; border-radius: var(--radius); border: 1.5px solid; font-weight: 500; }
.alert--error { color: var(--danger); background: var(--tint-danger); border-color: rgb(162 59 42 / .4); }
.alert--ok { color: var(--ok); background: var(--tint-ok); border-color: rgb(63 107 69 / .4); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
.notfound-logo { width: 9rem; margin-inline: auto; }

/* Sales and bundles on the home page */
.sale-banner { margin: 0; padding: .6rem var(--gutter); background: #80593A; color: #fff; text-align: center; font-size: var(--step--1); }
.sale-banner a { color: #fff; font-weight: 700; }
.sale-banner :focus-visible { outline-color: #fff; }
.on-sale { display: inline-block; margin: var(--space-2) 0 -.75rem; padding: .2rem .7rem; border-radius: 999px; background: #A5521A; color: #fff; font-size: var(--step--1); font-weight: 700; }
.price__was { color: var(--cream-soft); font-weight: 500; text-decoration-thickness: 2px; font-size: .8em; }
.price__now { color: var(--bulb); }
.bundle-note { margin-top: var(--space-2) !important; color: var(--bulb) !important; font-weight: 600; }
/* Inside .price, the "for 4 hours" span rule must not shrink the sale prices */
.price .price__now { font-size: inherit; font-weight: 800; color: var(--bulb); }
.price .price__was { font-size: .7em; font-weight: 500; color: var(--cream-soft); }

/* ---------- Theme switch (light / dark) */
.theme-toggle {
  display: inline-grid; place-items: center; flex: none;
  width: 2.75rem; height: 2.75rem; padding: 0; border-radius: 999px;
  border: 1.5px solid var(--line); background: transparent; color: inherit; cursor: pointer;
  transition: background-color .2s, border-color .2s;
}
.theme-toggle:hover { background: rgb(var(--ink-rgb) / .08); }
.theme-toggle svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle[aria-pressed="true"] .icon-sun { display: block; }
.theme-toggle[aria-pressed="true"] .icon-moon { display: none; }
.admin-bar .theme-toggle, .g-bar .theme-toggle { border-color: rgb(246 240 231 / .3); }
.admin-bar .theme-toggle { color: var(--on-deep); }
.admin-bar .theme-toggle:hover { background: rgb(246 240 231 / .1); }
@media (max-width: 960px) {
  .site-header .theme-toggle { margin-left: auto; }
  .site-header .theme-toggle ~ .site-header__cta { margin-left: 0; }
}
.pay-help + .theme-toggle { margin-left: var(--space-2); }
@media (max-width: 420px) {
  .site-header__inner { gap: .4rem; }
  .site-header .theme-toggle { width: 2.5rem; height: 2.5rem; }
  .site-header .brand img { width: 5.25rem; }
}
@media (max-width: 340px) { .site-header__cta { padding-inline: .75rem; } }

/* ---------- Service pages and links to them */
.service__more { display: inline-block; margin-top: var(--space-2); margin-left: var(--space-2); font-weight: 600; color: var(--bulb); }
.svc-intro { padding-block: var(--space-6) var(--space-5); }
.crumbs { font-size: var(--step--1); color: var(--brown-soft); margin-bottom: var(--space-3); }
.crumbs a { color: var(--oak-deep); }
.svc-intro__title { max-width: 22ch; color: var(--espresso); }
.svc-intro__lede { max-width: 56ch; margin-top: var(--space-3); font-size: var(--step-1); line-height: 1.5; }
.svc-intro__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: var(--space-4); }
.service__body > p:not(.price):not(.on-sale) { color: var(--cream-soft); }
.book-cta .bundle-note { color: var(--oak-deep) !important; }

/* Sale banner: the full list of services on wider screens, a short line on phones, an easy-to-tap link.
   It sits inside the sticky header, so it stays in view with the menu on every page. */
.sale-banner a { display: inline-block; padding: .3rem .2rem; }
.sale-banner__short { display: none; }
@media (max-width: 640px) {
  .sale-banner { padding-block: .35rem; }
  .sale-banner__list { display: none; }
  .sale-banner__short { display: inline; }
}
.sale-banner { position: relative; overflow: hidden; }
.sale-banner__text { position: relative; z-index: 1; }

/* Sales read as a treat, not a warning: warm oak brown, and an autumn gradient for a fall sale.
   Both keep white text above 4.5:1. */
.sale-banner--fall { background: linear-gradient(100deg, #7C3410 0%, #A5521A 45%, #8E4A14 100%); }

/* Falling maple leaves for a fall sale. Decorative only; hidden when the visitor prefers less motion. */
.sale-banner__leaves { position: absolute; inset: 0; pointer-events: none; }
.sale-banner__leaves i {
  --maple: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 2 58 18 66 14 63 34 78 22 80 30 95 28 88 44 98 50 80 62 84 70 58 66 56 82 50 79 44 82 42 66 16 70 20 62 2 50 12 44 5 28 20 30 22 22 37 34 34 14 42 18Z M48 76h4v24h-4z'/%3E%3C/svg%3E");
  position: absolute; top: 0; width: 1.4rem; height: 1.4rem; opacity: 0;
  background: #F2C879;
  -webkit-mask: var(--maple) center / contain no-repeat; mask: var(--maple) center / contain no-repeat;
  animation: leaf-fall 7s linear infinite;
}
.sale-banner__leaves i:nth-child(4n+2) { background: #F4A259; width: 1.15rem; height: 1.15rem; }
.sale-banner__leaves i:nth-child(4n+3) { background: #E8693A; width: 1.6rem; height: 1.6rem; }
.sale-banner__leaves i:nth-child(4n) { background: #F6D8A8; width: 1rem; height: 1rem; }
.sale-banner__leaves i:nth-child(1) { left: 2%; animation-delay: 0s; }
.sale-banner__leaves i:nth-child(2) { left: 9%; animation-delay: 3.1s; animation-duration: 8s; }
.sale-banner__leaves i:nth-child(3) { left: 16%; animation-delay: 5.6s; animation-duration: 6.5s; }
.sale-banner__leaves i:nth-child(4) { left: 23%; animation-delay: 1.4s; animation-duration: 9s; }
.sale-banner__leaves i:nth-child(5) { left: 30%; animation-delay: 4.2s; }
.sale-banner__leaves i:nth-child(6) { left: 37%; animation-delay: .6s; animation-duration: 8.5s; }
.sale-banner__leaves i:nth-child(7) { left: 44%; animation-delay: 2.7s; animation-duration: 7.5s; }
.sale-banner__leaves i:nth-child(8) { left: 51%; animation-delay: 6.3s; }
.sale-banner__leaves i:nth-child(9) { left: 58%; animation-delay: 1.9s; animation-duration: 8s; }
.sale-banner__leaves i:nth-child(10) { left: 65%; animation-delay: 4.8s; animation-duration: 6.8s; }
.sale-banner__leaves i:nth-child(11) { left: 72%; animation-delay: .3s; animation-duration: 9.5s; }
.sale-banner__leaves i:nth-child(12) { left: 79%; animation-delay: 3.6s; }
.sale-banner__leaves i:nth-child(13) { left: 86%; animation-delay: 5.2s; animation-duration: 8.2s; }
.sale-banner__leaves i:nth-child(14) { left: 93%; animation-delay: 2.2s; animation-duration: 7.2s; }
.sale-banner__leaves i:nth-child(15) { left: 12%; animation-delay: 6.9s; animation-duration: 9s; }
.sale-banner__leaves i:nth-child(16) { left: 62%; animation-delay: 7.4s; animation-duration: 7.8s; }
.sale-banner__leaves i:nth-child(17) { left: 41%; animation-delay: 8.1s; animation-duration: 8.8s; }
.sale-banner__leaves i:nth-child(18) { left: 83%; animation-delay: 8.6s; animation-duration: 6.9s; }
@keyframes leaf-fall {
  0% { transform: translate(0, -1.6rem) rotate(0deg); opacity: 0; }
  10% { opacity: .95; }
  35% { transform: translate(.9rem, .4rem) rotate(70deg); }
  65% { transform: translate(-.5rem, 1.6rem) rotate(150deg); }
  90% { opacity: .95; }
  100% { transform: translate(.4rem, 3.4rem) rotate(230deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .sale-banner__leaves { display: none; } }

/* ---------- Investments page: every package and add-on */
.investments__more { margin-top: var(--space-5); }
.inv-grid { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.inv-card { padding: var(--space-3); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.inv-card h3 { margin: 0 0 .75rem; font-size: var(--step-1); line-height: 1.3; color: var(--espresso); }
.inv-card ul { list-style: none; margin: 0; padding: 0; display: grid; }
.inv-card li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); padding-block: .65rem; border-top: 1px solid var(--line); }
.inv-card li span { min-width: 0; }
.inv-desc { display: block; font-size: var(--step--1); color: var(--brown-soft); }
.inv-price { flex: none; font-weight: 700; text-align: right; }
.inv-price s { display: block; font-weight: 500; font-size: var(--step--1); color: var(--brown-soft); }
/* A package's "includes" list inside its card row. */
.inv-card .inv-includes { margin: .5rem 0 0; padding-left: 1.1rem; list-style: disc; display: grid; gap: .2rem; font-size: var(--step--1); }
.inv-card .inv-includes li { display: list-item; padding: 0; border: 0; }
.inv-choices { margin-top: .4rem; }
.inv-services { display: grid; gap: var(--space-6); }
.inv-svc > h3 { margin: 0 0 var(--space-3); color: var(--espresso); }
.inv-svc__sub { margin: var(--space-4) 0 var(--space-2); font-size: var(--step-1); color: var(--espresso); }
/* 404: the two buttons keep a gap when they wrap onto two lines. */
.notfound-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.svc-addons__cta { margin-top: var(--space-4); }