/* ============================================================
   Illuminate Laser Clinic — Design System
   Palette + type lifted from illuminatelaser.ca:
     champagne #f0e0c9 · charcoal #2c2a27 · noir #000
     Fraunces (display) · Inter (body & accents)
   ============================================================ */

:root {
  /* Brand */
  --sand:       #f0e0c9;  /* signature champagne */
  --sand-lift:  #f8eedd;
  --sand-deep:  #d8c1a0;

  /* Neutrals */
  --noir:       #000000;
  --charcoal:   #2c2a27;
  --charcoal-2: #1a1917;
  --ink:        #2c2a27;
  --ink-soft:   #5b574f;
  --muted:      #8d8880;
  --line:       #e7ded1;
  --line-dark:  rgba(240,224,201,.16);

  --cream:      #faf6ef;
  --cream-2:    #f3ebdf;
  --white:      #ffffff;

  /* Type */
  --display: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --accent-font: "Inter", var(--body);

  /* Shape */
  --radius:     12px;
  --radius-lg:  20px;
  --shadow:     0 1px 2px rgba(44,42,39,.04), 0 10px 34px rgba(44,42,39,.08);
  --shadow-lg:  0 34px 74px -22px rgba(44,42,39,.35);
  --nav-h:      78px;
  --container:  1200px;
  --ease:       cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 400;
  color: var(--ink-soft);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "calt";
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-synthesis: none;
  color: var(--charcoal);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.5rem, 5.4vw, 4.4rem); }
h2 { font-size: clamp(1.95rem, 3.7vw, 3rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}
.container--narrow { max-width: 860px; }

section { padding: clamp(64px, 8vw, 118px) 0; }

.section-head { max-width: 680px; margin-bottom: 56px; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { margin-top: 18px; font-size: 1.02rem; }

.eyebrow {
  display: inline-block;
  font-family: var(--accent-font);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sand-deep);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 26px; height: 1px;
  background: currentColor;
  vertical-align: middle;
  margin-right: 12px;
}
.section-head--center .eyebrow::after {
  content: "";
  display: inline-block;
  width: 26px; height: 1px;
  background: currentColor;
  vertical-align: middle;
  margin-left: 12px;
}

/* Dark sections */
.is-dark {
  background: var(--charcoal);
  color: rgba(240,224,201,.72);
}
.is-dark h2, .is-dark h3, .is-dark h4 { color: var(--sand); }
.is-dark .eyebrow { color: var(--sand-deep); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 32px;
  border-radius: 2px;
  font-family: var(--accent-font);
  font-size: .76rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: all .35s var(--ease);
  white-space: nowrap;
}
.btn--primary {
  background: var(--sand);
  color: var(--charcoal);
}
.btn--primary:hover {
  background: var(--sand-lift);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -12px rgba(216,193,160,.7);
}
.btn--dark { background: var(--charcoal); color: var(--sand); }
.btn--dark:hover { background: var(--noir); transform: translateY(-2px); }
.btn--ghost {
  border: 1px solid var(--charcoal);
  color: var(--charcoal);
}
.btn--ghost:hover { background: var(--charcoal); color: var(--sand); }
.btn--outline-sand {
  border: 1px solid rgba(240,224,201,.5);
  color: var(--sand);
}
.btn--outline-sand:hover { background: var(--sand); color: var(--charcoal); border-color: var(--sand); }
.btn--sm { padding: 11px 22px; font-size: .68rem; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--accent-font);
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--charcoal);
  border-bottom: 1px solid var(--sand-deep);
  padding-bottom: 5px;
  transition: gap .3s var(--ease), border-color .3s var(--ease);
}
.link-arrow:hover { gap: 14px; border-color: var(--charcoal); }
.is-dark .link-arrow { color: var(--sand); border-color: rgba(240,224,201,.4); }
.is-dark .link-arrow:hover { border-color: var(--sand); }

/* ============================================================
   Header
   ============================================================ */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background .4s var(--ease), box-shadow .4s var(--ease);
}
.header::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.5), transparent);
  transition: opacity .4s var(--ease);
  pointer-events: none;
}
.header.is-solid {
  background: rgba(44,42,39,.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.header.is-solid::before { opacity: 0; }

/* backdrop-filter makes an element a CONTAINING BLOCK for its position:fixed
   descendants. The mobile drawer lives inside the header and asks for
   inset:0, so once the header went solid on scroll the drawer was sized to
   the header (390x78) instead of the viewport (390x844) and only the top
   sliver was reachable. Dropping the filter while the drawer is open restores
   the viewport as its containing block. The drawer covers the header anyway,
   so nothing is lost visually. */
.nav-open .header {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: transparent;
}

.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand { display: flex; align-items: center; gap: 12px; position: relative; z-index: 2; }
.brand__logo { width: 44px; height: auto; flex: none; }
.brand__text { display: flex; flex-direction: column; }
.brand__mark {
  font-family: var(--display);
  font-size: 1.5rem;
  letter-spacing: .04em;
  color: var(--sand);
  line-height: 1.1;
}
.brand__sub {
  font-family: var(--accent-font);
  font-size: .56rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: rgba(240,224,201,.6);
}

.nav { display: flex; align-items: center; gap: 34px; }
.nav a {
  position: relative;
  font-family: var(--accent-font);
  font-size: .76rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(240,224,201,.85);
  transition: color .3s var(--ease);
}
/* The in-nav Book Now is for the mobile drawer only; the header keeps its own. */
.nav .btn { display: none; }
.nav a:hover { color: var(--sand); }
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -7px;
  width: 0; height: 1px;
  background: var(--sand);
  transition: width .3s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { width: 100%; }
.nav a[aria-current="page"] { color: var(--sand); }

.header__cta { display: flex; align-items: center; gap: 20px; }
.header__phone {
  font-family: var(--accent-font);
  font-size: .82rem;
  letter-spacing: .06em;
  color: var(--sand);
}
.header__phone:hover { color: var(--sand-lift); }

/* Burger */
.burger {
  display: none;
  width: 42px; height: 42px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  position: relative;
  z-index: 120;
}
.burger span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--sand);
  transition: transform .35s var(--ease), opacity .25s var(--ease);
}
.nav-open .burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-open .burger span:nth-child(2) { opacity: 0; }
.nav-open .burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding: calc(var(--nav-h) + 60px) 0 90px;
  /* The scrim runs deliberately deep: `screen`-blended beams can only ADD
     light, so a bright photo underneath would swallow them whole. */
  background:
    linear-gradient(100deg, rgba(0,0,0,.95) 0%, rgba(12,11,10,.90) 42%, rgba(24,22,20,.78) 100%),
    url("../images/glowing-skin.jpg") center right / cover no-repeat,
    radial-gradient(circle at 76% 34%, #57503f 0%, #2c2a27 46%, #000 100%);
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  right: -10%; top: -16%;
  width: 60vw; height: 60vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240,224,201,.20) 0%, rgba(240,224,201,.06) 44%, transparent 68%);
  filter: blur(24px);
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 2; max-width: 760px; }
.hero .eyebrow { color: var(--sand-deep); }
.hero h1 { color: var(--sand); }
.hero h1 em { font-style: italic; color: var(--white); }
.hero__lede {
  margin-top: 26px;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: rgba(240,224,201,.72);
  max-width: 560px;
}
.hero__actions { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 14px; }
.hero__meta {
  margin-top: 58px;
  padding-top: 30px;
  border-top: 1px solid var(--line-dark);
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
}
.hero__meta strong {
  display: block;
  font-family: var(--display);
  font-size: 1.9rem;
  color: var(--sand);
  font-weight: 400;
}
.hero__meta span {
  font-family: var(--accent-font);
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(240,224,201,.55);
}

/* Page hero (inner pages) */
.page-hero {
  padding: calc(var(--nav-h) + 88px) 0 78px;
  background:
    linear-gradient(100deg, rgba(0,0,0,.94), rgba(44,42,39,.7)),
    var(--hero-img, none) center right / cover no-repeat,
    radial-gradient(circle at 84% 22%, #57503f 0%, #2c2a27 48%, #000 100%);
  position: relative;
  overflow: hidden;
}
.page-hero--soprano { --hero-img: url("../images/soprano-machine.jpg"); }
.page-hero--services { --hero-img: url("../images/laser-girl.jpg"); }
.page-hero--booking  { --hero-img: url("../images/laser-closeup.jpg"); }
.page-hero--contact  { --hero-img: url("../images/soprano-handpiece.jpg"); }
.page-hero::after {
  content: "";
  position: absolute;
  right: -8%; bottom: -60%;
  width: 44vw; height: 44vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240,224,201,.14) 0%, transparent 66%);
  pointer-events: none;
}
.page-hero__inner { position: relative; z-index: 2; max-width: 720px; }
.page-hero .eyebrow { color: var(--sand-deep); }
.page-hero h1 { color: var(--sand); font-size: clamp(2.2rem, 4.4vw, 3.6rem); }
.page-hero p {
  margin-top: 22px;
  color: rgba(240,224,201,.72);
  font-size: 1.05rem;
  max-width: 580px;
}
.crumbs {
  margin-bottom: 22px;
  font-family: var(--accent-font);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(240,224,201,.45);
}
.crumbs a:hover { color: var(--sand); }
.crumbs span { margin: 0 8px; }

/* ============================================================
   Value strip
   ============================================================ */
.value { background: var(--white); border-bottom: 1px solid var(--line); }
.value__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
}
.value__grid p + p { margin-top: 18px; }
.value__quote {
  font-family: var(--display);
  font-size: clamp(1.55rem, 2.6vw, 2.15rem);
  line-height: 1.32;
  color: var(--charcoal);
}
.value__quote em { font-style: italic; color: var(--sand-deep); }

/* ---------- Feature trio ---------- */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.feature {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 40px 34px;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.feature:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: var(--sand-deep);
}
.feature__icon {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--sand);
  color: var(--charcoal);
  margin-bottom: 26px;
}
.feature__icon svg { width: 24px; height: 24px; }
.feature h3 { margin-bottom: 12px; }
.feature p { font-size: .94rem; }

/* ============================================================
   Split
   ============================================================ */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.split--reverse .split__media { order: 2; }

.split__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: linear-gradient(155deg, #4a4437 0%, #2c2a27 52%, #000 100%);
  box-shadow: var(--shadow-lg);
  display: grid;
  align-items: end;
  justify-items: start;
  text-align: left;
  padding: 40px;
}
.split__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.split__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.30) 55%, rgba(0,0,0,.12) 100%),
    radial-gradient(circle at 30% 20%, rgba(240,224,201,.16), transparent 62%);
}
.split__media-caption { position: relative; z-index: 2; }
.split__media-caption .k {
  font-family: var(--display);
  font-size: clamp(2.3rem, 4vw, 3.3rem);
  color: var(--sand);
  display: block;
  line-height: 1.1;
}
.split__media-caption .v {
  display: block;
  margin-top: 14px;
  font-family: var(--accent-font);
  font-size: .7rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(240,224,201,.6);
}

.checks { list-style: none; padding: 0; margin: 30px 0 36px; }
.checks li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 15px;
  font-size: .98rem;
}
.checks li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--sand-deep);
  box-shadow: inset 0 0 0 4px var(--cream);
}
.is-dark .checks li::before { box-shadow: inset 0 0 0 4px var(--charcoal); background: var(--sand); }
.checks li strong { color: var(--charcoal); font-weight: 600; }
.is-dark .checks li strong { color: var(--sand); }

/* ============================================================
   Wavelengths
   ============================================================ */
.waves { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.wave {
  position: relative;
  padding: 44px 34px;
  border-radius: var(--radius-lg);
  background: rgba(240,224,201,.05);
  border: 1px solid var(--line-dark);
  overflow: hidden;
  transition: background .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.wave:hover { background: rgba(240,224,201,.09); border-color: rgba(240,224,201,.4); transform: translateY(-5px); }
.wave::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(var(--sand), transparent);
}
.wave__nm {
  font-family: var(--display);
  font-size: 2.5rem;
  color: var(--sand);
  line-height: 1;
}
.wave__name {
  display: block;
  margin: 10px 0 18px;
  font-family: var(--accent-font);
  font-size: .7rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--sand-deep);
}
.wave p { font-size: .93rem; color: rgba(240,224,201,.7); }

/* ============================================================
   Cards
   ============================================================ */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 26px;
}
.card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--sand-deep); }
.card__media {
  aspect-ratio: 16 / 10;
  background: linear-gradient(145deg, #4a4437, #1a1917);
  position: relative;
  display: grid;
  place-items: center;
}
.card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
.card:hover .card__media img { transform: scale(1.05); }
.card__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.22) 55%, rgba(0,0,0,.05) 100%);
}
.card__media span {
  position: relative; z-index: 2;
  align-self: end;
  justify-self: start;
  padding: 0 24px 20px;
  font-family: var(--display);
  font-size: 1.35rem;
  color: var(--sand);
  letter-spacing: .04em;
  text-shadow: 0 1px 12px rgba(0,0,0,.5);
}
.card__body { padding: 28px 28px 30px; display: flex; flex-direction: column; flex: 1; }
.card__body h3 { margin-bottom: 10px; }
.card__body p { font-size: .93rem; flex: 1; }
.card__foot {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.card__price {
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--charcoal);
}
.card__price small {
  font-family: var(--accent-font);
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-top: 2px;
}

/* Price blocks */
.price-block {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 40px;
}
.price-block + .price-block { margin-top: 26px; }
.price-block > h3 {
  padding-bottom: 20px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.price-list { list-style: none; padding: 0; margin: 0; }
.price-list li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px dashed var(--line);
}
.price-list li:last-child { border-bottom: 0; }
.price-list .name { color: var(--charcoal); font-weight: 500; }
.price-list .name small {
  display: block;
  font-weight: 400;
  color: var(--muted);
  font-size: .82rem;
  margin-top: 3px;
}
.price-list .dots {
  flex: 1;
  border-bottom: 1px dotted var(--line);
  transform: translateY(-4px);
}
.price-list .amt {
  font-family: var(--display);
  font-size: 1.35rem;
  color: var(--charcoal);
  white-space: nowrap;
}
.price-list .amt del { color: var(--muted); font-size: .9rem; margin-right: 8px; }

.tag {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 100px;
  font-family: var(--accent-font);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  background: var(--sand);
  color: var(--charcoal);
}
.tag--dark { background: var(--charcoal); color: var(--sand); }
.tag--outline { background: transparent; border: 1px solid var(--sand-deep); color: var(--ink-soft); }

/* Packages */
.packages {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}
.pkg {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px 30px;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.pkg:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--sand-deep); }

/* Champagne cards inside a dark section: they must opt out of the inherited
   champagne *text* colour, or the copy vanishes into the card background. */
.is-dark .pkg:not(.pkg--featured) {
  background: var(--sand);
  border-color: transparent;
  color: #6f6959;
}
.is-dark .pkg:not(.pkg--featured) h3,
.is-dark .pkg:not(.pkg--featured) .pkg__price { color: var(--charcoal); }
.is-dark .pkg:not(.pkg--featured) .pkg__list li { color: #6f6959; }
.is-dark .pkg:not(.pkg--featured) .pkg__list li::before { background: var(--charcoal); }
.is-dark .pkg:not(.pkg--featured) .pkg__note { color: #857e6b; }
.is-dark .pkg:not(.pkg--featured) .pkg__price del { color: #857e6b; }
.is-dark .pkg:not(.pkg--featured):hover { border-color: var(--sand-deep); }

/* On champagne, the outline tag and ghost button need the darker ink treatment. */
.is-dark .pkg:not(.pkg--featured) .tag--outline {
  border-color: rgba(44,42,39,.35);
  color: var(--charcoal);
}
.is-dark .pkg:not(.pkg--featured) .btn--ghost:hover { background: var(--charcoal); color: var(--sand); }

.pkg--featured { background: linear-gradient(160deg, #35322d, #1a1917); border-color: transparent; }
.pkg--featured h3, .pkg--featured .pkg__price { color: var(--sand); }
.pkg--featured p, .pkg--featured .pkg__list li { color: rgba(240,224,201,.7); }
.pkg--featured .pkg__note { color: rgba(240,224,201,.5); }
.pkg--featured .pkg__list li::before { background: var(--sand); }
.pkg--featured .pkg__price del { color: rgba(240,224,201,.45); }
.pkg__price {
  font-family: var(--display);
  font-size: 2.5rem;
  color: var(--charcoal);
  line-height: 1;
  margin: 14px 0 6px;
}
.pkg__price del { font-size: 1.15rem; color: var(--muted); margin-right: 10px; }
.pkg__note {
  font-family: var(--accent-font);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.pkg__list { list-style: none; padding: 0; margin: 22px 0 28px; }
.pkg__list li {
  position: relative;
  padding-left: 22px;
  font-size: .92rem;
  margin-bottom: 9px;
}
.pkg__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 10px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sand-deep);
}

/* ============================================================
   Testimonials
   ============================================================ */
.testimonials { background: var(--white); }
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.quote {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 40px 34px;
  display: flex;
  flex-direction: column;
}
.quote__stars { color: var(--sand-deep); letter-spacing: 4px; margin-bottom: 22px; font-size: .95rem; }
.quote p {
  font-family: var(--display);
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--charcoal);
  flex: 1;
}
.quote__who {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-family: var(--accent-font);
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ============================================================
   Accordion
   ============================================================ */
.accordion { border-top: 1px solid var(--line); }
.acc { border-bottom: 1px solid var(--line); }
.acc__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 0;
  text-align: left;
  font-family: var(--display);
  font-size: clamp(1.08rem, 1.5vw, 1.3rem);
  color: var(--charcoal);
  transition: color .3s var(--ease);
}
.acc__q:hover { color: var(--sand-deep); }
.acc__icon {
  flex: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid; place-items: center;
  position: relative;
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .4s var(--ease);
}
.acc__icon::before, .acc__icon::after {
  content: "";
  position: absolute;
  background: var(--charcoal);
  transition: opacity .3s var(--ease), background .3s var(--ease);
}
.acc__icon::before { width: 11px; height: 1.5px; }
.acc__icon::after  { width: 1.5px; height: 11px; }
.acc.is-open .acc__icon { background: var(--charcoal); border-color: var(--charcoal); transform: rotate(180deg); }
.acc.is-open .acc__icon::before { background: var(--sand); }
.acc.is-open .acc__icon::after  { opacity: 0; }
.acc__a { overflow: hidden; max-height: 0; transition: max-height .45s var(--ease); }
.acc__a-inner { padding: 0 60px 28px 0; }
.acc__a-inner p + p { margin-top: 14px; }

/* Panel */
.panel {
  background: var(--cream-2);
  border-radius: var(--radius-lg);
  padding: clamp(34px, 4vw, 52px);
  border: 1px solid var(--line);
}
.panel h3 { margin-bottom: 10px; }
.panel__list {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 32px;
}
.panel__list li {
  position: relative;
  padding-left: 32px;
  font-size: .95rem;
  color: var(--charcoal);
}
.panel__list li::before {
  content: "✓";
  position: absolute;
  left: 0; top: 1px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--charcoal);
  color: var(--sand);
  font-size: .62rem;
  display: grid; place-items: center;
}

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; counter-reset: s; }
.step { position: relative; padding-top: 28px; border-top: 2px solid var(--line); }
.is-dark .step { border-top-color: var(--line-dark); }
.step::before {
  counter-increment: s;
  content: "0" counter(s);
  font-family: var(--display);
  font-size: 2.4rem;
  color: var(--sand-deep);
  display: block;
  line-height: 1;
  margin-bottom: 16px;
}
.step h3 { margin-bottom: 10px; font-size: 1.22rem; }
.step p { font-size: .93rem; }

/* ============================================================
   Contact
   ============================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 70px);
  align-items: start;
}
.info-block + .info-block { margin-top: 34px; padding-top: 34px; border-top: 1px solid var(--line); }
.info-block h3 { font-size: 1.12rem; margin-bottom: 14px; }
.info-block p { font-size: .98rem; }
.info-block a:hover { color: var(--sand-deep); }
.hours { list-style: none; padding: 0; margin: 0; }
.hours li {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--line);
  font-size: .95rem;
}
.hours li:last-child { border-bottom: 0; }
.hours span:last-child { color: var(--charcoal); font-weight: 500; }
.hours li.is-closed span:last-child { color: var(--muted); font-weight: 400; }

.form {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(30px, 4vw, 44px);
  box-shadow: var(--shadow);
  /* The form is white even inside .is-dark — reset the inherited champagne
     text colour so control values don't render invisibly on cream. */
  color: var(--ink-soft);
}
.field { margin-bottom: 22px; }
.field label {
  display: block;
  font-family: var(--accent-font);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--charcoal);
  margin-bottom: 9px;
}
.field input, .field textarea, .field select {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--cream);
  color: var(--charcoal);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--sand-deep);
  box-shadow: 0 0 0 3px rgba(216,193,160,.28);
}
.field .error { display: none; margin-top: 7px; font-size: .8rem; color: #b0564f; }
.field.is-invalid input, .field.is-invalid textarea, .field.is-invalid select { border-color: #d9a49f; }
.field.is-invalid .error { display: block; }

.consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: .88rem;
  margin-bottom: 26px;
}
.consent input { width: 18px; height: 18px; flex: none; margin-top: 4px; accent-color: var(--charcoal); }

.form__success {
  display: none;
  padding: 16px 18px;
  border-radius: 8px;
  background: var(--sand);
  border: 1px solid var(--sand-deep);
  color: var(--charcoal);
  font-size: .92rem;
  margin-bottom: 22px;
}
.form__success.is-visible { display: block; }

.map {
  margin-top: 30px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.map iframe { width: 100%; height: 320px; border: 0; display: block; filter: grayscale(.3) sepia(.12); }

/* ============================================================
   CTA band
   ============================================================ */
.cta-band {
  position: relative;
  background:
    linear-gradient(100deg, rgba(0,0,0,.95), rgba(44,42,39,.82)),
    radial-gradient(circle at 78% 30%, #57503f, #000 62%);
  overflow: hidden;
  text-align: center;
}
.cta-band::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 70vw; height: 70vw;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(240,224,201,.12), transparent 62%);
  pointer-events: none;
}
.cta-band .container { position: relative; z-index: 2; }
.cta-band .eyebrow { color: var(--sand-deep); }
.cta-band h2 { color: var(--sand); max-width: 720px; margin-inline: auto; }
.cta-band p {
  margin: 22px auto 0;
  max-width: 560px;
  color: rgba(240,224,201,.72);
}
.cta-band__actions { margin-top: 38px; display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }

/* Referral strip */
.referral { padding: 0; }
.referral__inner {
  background: var(--sand);
  border-radius: var(--radius-lg);
  padding: clamp(32px, 4vw, 46px) clamp(30px, 5vw, 56px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}
.referral__inner h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); color: var(--charcoal); }
.referral__inner p { color: #6f6959; margin-top: 8px; }

/* ============================================================
   Footer
   ============================================================ */
.footer {
  background: var(--noir);
  color: rgba(240,224,201,.55);
  padding: 90px 0 34px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 48px;
  padding-bottom: 60px;
  border-bottom: 1px solid var(--line-dark);
}
.footer h4 {
  font-family: var(--accent-font);
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sand);
  margin-bottom: 22px;
}
.footer__brand .brand__mark { font-size: 1.7rem; }
.footer__logo { width: 150px; height: auto; margin-bottom: 4px; }
.footer__brand p { margin-top: 20px; font-size: .92rem; max-width: 300px; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 11px; font-size: .92rem; }
.footer a { transition: color .3s var(--ease); }
.footer a:hover { color: var(--sand); }
.footer__hours li { display: flex; justify-content: space-between; gap: 14px; }

.socials { display: flex; gap: 12px; margin-top: 24px; }
.socials a {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-dark);
  display: grid; place-items: center;
  transition: all .3s var(--ease);
}
.socials a:hover { background: var(--sand); border-color: var(--sand); color: var(--charcoal); }
.socials svg { width: 17px; height: 17px; }

.footer__bottom {
  padding-top: 30px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: .82rem;
}

/* ============================================================
   Reveal
   ============================================================ */
/* Reveal drives the INDEPENDENT translate/scale properties, never `transform`.
   The cards are both .reveal and .tilt, and .reveal.is-in{transform:none}
   would otherwise out-specify .tilt and flatten the 3D entirely. */
.reveal {
  opacity: 0;
  translate: 0 30px;
  scale: .985;
  transition: opacity .9s var(--ease), translate .9s var(--ease), scale .9s var(--ease);
}
.reveal.is-in { opacity: 1; translate: 0 0; scale: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; translate: 0 0; scale: 1; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .trio, .waves, .quotes, .steps { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}

@media (max-width: 900px) {
  .value__grid, .split, .contact-grid { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .split__media { aspect-ratio: 16 / 11; }

  .burger { display: flex; }
  .header__cta .btn, .header__phone { display: none; }

  .nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    gap: 28px;
    background: var(--charcoal);
    transform: translateX(100%);
    transition: transform .5s var(--ease);
    z-index: 110;
  }
  .nav-open .nav { transform: none; }
  .nav a {
    font-family: var(--display);
    font-size: 1.85rem;
    text-transform: none;
    letter-spacing: .02em;
    color: var(--sand);
  }
  .nav a::after { display: none; }
  .nav .btn {
    display: inline-flex;
    font-family: var(--accent-font);
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .18em;
    background: var(--sand);
    color: var(--charcoal);
  }
}

@media (max-width: 640px) {
  .hero { min-height: 100vh; min-height: 100dvh; }
  .hero__meta { gap: 28px; }
  .panel__list { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .price-block { padding: 28px 22px; }
  .price-list li { flex-wrap: wrap; }
  .price-list .dots { display: none; }
  .price-list .amt { margin-left: auto; }
  .referral__inner { flex-direction: column; align-items: flex-start; }
  .acc__a-inner { padding-right: 0; }
}

/* ============================================================
   IMMERSIVE LAYER
   3D depth, glass, and light. Every effect here is additive —
   remove the JS and the site still reads correctly.
   ============================================================ */

/* ---------- WebGL hero ---------- */
/* Hero background video. Sits below the scrim, the light-beam canvas and the
   text. On small screens and for reduced-motion it is hidden, and the .hero
   background photo + scrim (see .hero above) carry the design unchanged. */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
}
/* Keeps the headline legible over a moving, sometimes-bright video, and darkens
   the lower edge for the stats row and scroll cue. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(100deg, rgba(0,0,0,.92) 0%, rgba(12,11,10,.80) 42%, rgba(24,22,20,.52) 100%),
    linear-gradient(to top, rgba(0,0,0,.6), transparent 42%);
}
/* The video plays on every screen size. Only reduced-motion falls back to the
   static hero photo. Note: it's a ~15MB asset on mobile data. */
@media (prefers-reduced-motion: reduce) {
  .hero__video,
  .hero__scrim { display: none; }
}

/* ---------- Opener / intro ---------- */
/* Full-screen brand moment on first paint. The hero video plays behind a
   centred logo, then the whole overlay fades to reveal the page. `introOut`
   (pure CSS) guarantees the overlay clears even if the inline script fails to
   run; the script only locks scroll during the moment and removes the node. */
.intro {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  background: var(--charcoal-2);
  overflow: hidden;
  animation: introOut 1s var(--ease) 2.5s forwards;
}
.intro__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
}
.intro__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(circle at 50% 46%,
    rgba(0,0,0,.12) 0%, rgba(12,11,10,.58) 72%, rgba(12,11,10,.82) 100%);
}
.intro__logo {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  opacity: 0;
  transform: translateY(14px) scale(.98);
  animation: introLogoIn 1.5s var(--ease) .35s forwards;
}
.intro__emblem {
  width: clamp(112px, 24vw, 150px);
  height: auto;
  filter: drop-shadow(0 6px 28px rgba(0,0,0,.45));
}
.intro__name {
  font-family: var(--display);
  font-size: clamp(2.6rem, 7vw, 4.4rem);
  line-height: 1;
  color: var(--sand);
}
.intro__sub {
  font-family: var(--accent-font);
  text-transform: uppercase;
  letter-spacing: .44em;
  font-size: .72rem;
  color: var(--sand-deep);
  margin-top: 16px;
  padding-left: .44em; /* optical centring against the tracked caps */
}
body.intro-lock { overflow: hidden; }

@keyframes introLogoIn {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes introOut {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
}

/* ---------- Video explainer (YouTube facade) ---------- */
/* Loads only a local poster + play button; the YouTube iframe is injected on
   click (see main.js), so the page never ships a third-party player on load. */
.videohero {
  position: relative;
  max-width: 940px;
  margin: 52px auto 0;
}
.videohero__btn {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  position: relative;
  padding: 0;
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  background: var(--charcoal-2);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55);
}
.videohero__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease), filter .6s var(--ease);
}
.videohero__btn:hover .videohero__thumb { transform: scale(1.04); filter: brightness(.88); }
.videohero__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(240, 224, 201, .94);
  color: var(--charcoal);
  padding-left: 5px; /* optical centring of the play triangle */
  box-shadow: 0 10px 34px rgba(0, 0, 0, .4);
  transition: transform .4s var(--ease), background .4s var(--ease);
}
.videohero__btn:hover .videohero__play { transform: scale(1.08); background: var(--sand-lift); }
.videohero__iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 18px;
  display: block;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55);
}
.videohero__cap {
  margin-top: 16px;
  text-align: center;
  font-size: .82rem;
  color: var(--charcoal);
  opacity: .68;
}
.is-dark .videohero__cap { color: var(--sand-deep); opacity: .9; }
.videohero__cap a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.videohero__cap a:hover { color: var(--charcoal); }
.is-dark .videohero__cap a:hover { color: var(--sand); }

.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  /* `screen` makes the beams behave like light added to the photograph
     rather than a translucent sheet laid on top of it. */
  mix-blend-mode: screen;
  transition: opacity 1.8s var(--ease);
}
.hero__canvas.is-live { opacity: 1; }
.hero__inner { z-index: 3; }

/* A slow champagne bloom drifting behind the headline. */
.hero::before {
  content: "";
  position: absolute;
  left: -10%; top: 20%;
  width: 50vw; height: 50vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240,224,201,.10), transparent 62%);
  filter: blur(40px);
  animation: drift 22s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 1;
}
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(6vw, -4vh, 0) scale(1.15); }
}

/* Scroll cue */
.hero__cue {
  position: absolute;
  left: 50%; bottom: 34px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: var(--accent-font);
  font-size: .62rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(240,224,201,.5);
}
.hero__cue span {
  display: block;
  width: 1px; height: 46px;
  background: linear-gradient(rgba(240,224,201,.6), transparent);
  animation: cue 2.4s var(--ease) infinite;
  transform-origin: top;
}
@keyframes cue {
  0%   { transform: scaleY(0); opacity: 0; }
  35%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(46px); opacity: 0; }
}

/* ---------- 3D tilt ---------- */
/* Perspective lives on the grid so sibling cards share one vanishing point;
   putting it on each card makes them look like separate little scenes. */
.cards, .packages, .trio, .waves { perspective: 1600px; }

.tilt {
  transform-style: preserve-3d;
  /* JS drives --rx/--ry/--lift; CSS owns how they compose. */
  transform:
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg))
    translate3d(0, var(--lift, 0px), 0);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s var(--ease);
}
.tilt.is-tilting { transition: transform .08s linear, box-shadow .5s var(--ease); }
.tilt.is-tilting { box-shadow: var(--shadow-lg); }

/* Inner layers float at different depths — this is what sells the 3D. */
.tilt .card__media,
.tilt .pkg__price,
.tilt .feature__icon,
.tilt .wave__nm { transform: translateZ(38px); transform-style: preserve-3d; }
.tilt .card__body > h3 { transform: translateZ(26px); }
.tilt .card__foot { transform: translateZ(18px); }

/* Specular sheen that tracks the pointer across the card face. */
.tilt::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .45s var(--ease);
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 50%),
    rgba(240,224,201,.20), transparent 62%);
}
.tilt.is-tilting::after { opacity: 1; }
.card, .pkg, .feature, .wave { position: relative; }

/* The old flat hover-lift would fight the tilt transform. */
.tilt:hover { transform:
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg))
    translate3d(0, var(--lift, 0px), 0); }

/* ---------- Glass ---------- */
/* Glass only means anything with something behind it to refract, so the
   sections carrying glass get ambient light orbs first. */
.has-ambient { position: relative; overflow: hidden; }
.has-ambient > .container { position: relative; z-index: 2; }
.orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
  z-index: 1;
}
.orb--1 {
  width: 40vw; height: 40vw;
  left: -8%; top: -12%;
  background: radial-gradient(circle, rgba(240,224,201,.30), transparent 66%);
}
.orb--2 {
  width: 34vw; height: 34vw;
  right: -6%; bottom: -18%;
  background: radial-gradient(circle, rgba(216,193,160,.26), transparent 66%);
}
.is-dark .orb--1 { background: radial-gradient(circle, rgba(240,224,201,.16), transparent 66%); }
.is-dark .orb--2 { background: radial-gradient(circle, rgba(157,140,110,.22), transparent 66%); }

.glass {
  background: rgba(255, 255, 255, .58);
  backdrop-filter: blur(22px) saturate(1.25);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 30px 70px -28px rgba(44,42,39,.35);
}
.is-dark .glass {
  background: rgba(240, 224, 201, .07);
  backdrop-filter: blur(24px) saturate(1.1);
  -webkit-backdrop-filter: blur(24px) saturate(1.1);
  border: 1px solid rgba(240, 224, 201, .18);
  box-shadow:
    0 1px 0 rgba(240,224,201,.14) inset,
    0 30px 70px -28px rgba(0,0,0,.6);
}
/* The booking form is glass over a dark section, but its *contents* must
   still read as dark-on-light controls. */
.is-dark .form.glass { color: rgba(240,224,201,.8); }
.is-dark .form.glass .field label { color: var(--sand); }
.is-dark .form.glass .field input,
.is-dark .form.glass .field textarea,
.is-dark .form.glass .field select {
  background: rgba(255,255,255,.9);
  border-color: rgba(240,224,201,.22);
  color: var(--charcoal);
}
.is-dark .form.glass .consent { color: rgba(240,224,201,.75); }

/* ---------- Scroll depth ---------- */
/* NOTE: .reveal is defined once, above, on translate/scale — deliberately not
   on `transform`, so it composes with .tilt instead of overriding it. */

/* Parallax: card photography drifts slower than the page. */
.card__media { overflow: hidden; }
.card__media img { will-change: transform; }

/* Split media gets a real parallax offset (JS-driven). */
.split__media img { will-change: transform; scale: 1.12; }

/* Line-by-line headline entrance */
.hero h1 > .line {
  display: block;
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  animation: rise 1.1s var(--ease) forwards;
}
.hero h1 > .line:nth-child(1) { animation-delay: .15s; }
.hero h1 > .line:nth-child(2) { animation-delay: .30s; }
.hero h1 > .line:nth-child(3) { animation-delay: .45s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- Motion & capability guards ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .hero__cue span,
  .hero h1 > .line { animation: none !important; }
  .hero h1 > .line { opacity: 1; transform: none; }
  .tilt { transform: none !important; }
  .tilt::after { display: none; }
  .split__media img { scale: 1; }
}

/* Backdrop-filter is still not universal; fall back to solid panels
   rather than shipping transparent, unreadable ones. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(255,255,255,.94); }
  .is-dark .glass { background: rgba(38,36,33,.96); }
}

/* Touch devices: no pointer to tilt toward, and hover sheen never clears. */
@media (hover: none) {
  .tilt { transform: none !important; }
  .tilt::after { display: none; }
}

/* ---------- Form: honeypot & errors ---------- */
/* Off-screen rather than display:none — a fair number of bots skip
   display:none fields, which would defeat the trap entirely. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form { position: relative; }

.form__error {
  display: none;
  padding: 14px 16px;
  border-radius: 8px;
  background: #fbeceb;
  border: 1px solid #e3b6b2;
  color: #8f3f38;
  font-size: .9rem;
  margin-bottom: 20px;
}
.form__error.is-visible { display: block; }
.is-dark .form.glass .form__error {
  background: rgba(180, 84, 76, .16);
  border-color: rgba(217, 164, 159, .45);
  color: #f0c4c0;
}

/* The consent block is an acknowledgement, not transmitted data. */
.consent em {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-size: .82rem;
  color: var(--muted);
}
.is-dark .form.glass .consent em { color: rgba(240,224,201,.5); }

button[type="submit"][disabled] { opacity: .6; cursor: not-allowed; }

/* ============================================================
   360° TURNTABLE
   A tall scroll track with a sticky viewport: the machine holds
   centre-screen and rotates as the page moves past it.
   ============================================================ */
.turntable {
  position: relative;
  height: 320vh;              /* the scroll runway; longer = slower rotation */
  padding: 0;
  background: var(--charcoal);
}
.turntable__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}
/* Copy on the left, machine on the right. Overlapping them would put the
   headline straight through the product. */
.turntable__sticky > .container {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 1.15fr;
  align-items: center;
  gap: clamp(30px, 5vw, 70px);
}
.turntable__stage {
  position: relative;
  width: 100%;
  height: min(640px, 64vh);
  display: grid;
  place-items: center;
}
/* Light pooling under the machine so it sits in the room, not on top of it. */
.turntable__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 60%, rgba(240,224,201,.16), transparent 62%);
  filter: blur(30px);
  pointer-events: none;
}
.turntable__canvas,
.turntable__fallback {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* MUST come after any display rule above: a `display` declaration beats the
   UA stylesheet's [hidden] rule, which would leave the fallback photo
   showing straight through the live canvas. */
.turntable__canvas[hidden],
.turntable__fallback[hidden] { display: none !important; }

.turntable__copy {
  max-width: 400px;
  z-index: 3;
}
.turntable__copy h2 { color: var(--sand); }
.turntable__copy p { margin-top: 18px; color: rgba(240,224,201,.72); }

.turntable__hint {
  position: absolute;
  left: 50%; bottom: 6vh;
  transform: translateX(-50%);
  font-family: var(--accent-font);
  font-size: .62rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(240,224,201,.45);
  z-index: 3;
}

/* Only the PHOTO fallback collapses the section. The 3D model still needs the
   full scroll runway to complete its revolution, so .is-3d keeps the height. */
.turntable.is-photo { height: auto; }
.turntable.is-photo .turntable__sticky { position: static; height: auto; padding: clamp(64px,8vw,118px) 0; }
.turntable.is-photo .turntable__hint { display: none; }

@media (max-width: 900px) {
  .turntable { height: 240vh; }
  .turntable__sticky > .container {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .turntable__copy { max-width: none; text-align: center; }
  .turntable__stage { height: 46vh; }
}

@media (prefers-reduced-motion: reduce) {
  .turntable { height: auto; }
  .turntable__sticky { position: static; height: auto; padding: clamp(64px,8vw,118px) 0; }
  .turntable__hint { display: none; }
}

/* "Scroll to turn it" is only true when something actually rotates. */
.turntable.is-photo .turntable__only { display: none; }

/* ============================================================
   LEGAL / PRIVACY
   ============================================================ */
.legal-intro {
  border-left: 3px solid var(--sand-deep);
  padding: 4px 0 4px 26px;
  margin-bottom: 26px;
}
.legal-intro p { font-size: 1.05rem; color: var(--charcoal); }

.legal-updated {
  padding-bottom: 30px;
  margin-bottom: 44px;
  border-bottom: 1px solid var(--line);
  font-size: .95rem;
}
.legal-updated strong { color: var(--charcoal); }

.legal h2 {
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  margin: 54px 0 16px;
}
.legal h2:first-child { margin-top: 0; }
.legal p + p { margin-top: 14px; }
.legal a { color: var(--charcoal); border-bottom: 1px solid var(--sand-deep); }
.legal a:hover { border-color: var(--charcoal); }

.legal ul {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
}
.legal li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 12px;
}
.legal li::before {
  content: "";
  position: absolute;
  left: 0; top: 11px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sand-deep);
}
.legal li strong { color: var(--charcoal); font-weight: 600; }

/* Callout: the things a reader most needs to actually notice. */
.legal-note {
  margin: 26px 0;
  padding: 26px 30px;
  border-radius: var(--radius);
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--sand-deep);
}
.legal-note h3 {
  font-size: 1.1rem;
  margin-bottom: 10px;
}
.legal-note p { font-size: .96rem; }

.legal .panel { margin-top: 24px; }
.legal .panel p { font-size: .98rem; }

.legal-disclaimer {
  margin-top: 48px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-size: .86rem;
  color: var(--muted);
}

/* Unfilled placeholders. Loud on purpose: shipping "[your-email@example.com]"
   on a live privacy policy would be worse than shipping no policy. */
.todo {
  background: #fdf1d6;
  border-bottom: 1px dashed #c9a24d;
  padding: 1px 6px;
  border-radius: 3px;
  font-style: italic;
  color: #7a5f16;
  white-space: nowrap;
}

/* Footer legal link */
.footer__legal {
  border-bottom: 1px solid rgba(240,224,201,.3);
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.footer__legal:hover { color: var(--sand); border-color: var(--sand); }

/* ============================================================
   BOOKING CALENDAR
   Real availability: a month grid, clickable days, time-slot chips.
   ============================================================ */

/* The design system has no semantic state colours, and the error colours are
   hardcoded literals. Add real tokens rather than adding more literals. */
:root {
  --slot-open:     var(--sand);
  --slot-none:     rgba(240, 224, 201, .14);
  --slot-selected: var(--charcoal);
}

.bk__head { margin-bottom: 26px; }
.bk__head h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }

.bk__chosen {
  margin-top: 10px;
  font-size: .95rem;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.bk__chosen strong { color: var(--sand); font-weight: 600; }

.bk__change {
  font-family: var(--accent-font);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sand-deep);
  border-bottom: 1px solid rgba(240,224,201,.4);
  padding-bottom: 2px;
}
.bk__change:hover { color: var(--sand); border-color: var(--sand); }

/* ---------- Step 1: services ---------- */
.bk__services {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.bk__svc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 18px 20px;
  text-align: left;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: rgba(240,224,201,.04);
  transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.bk__svc:hover {
  border-color: var(--sand-deep);
  background: rgba(240,224,201,.09);
  transform: translateY(-2px);
}
.bk__svc-name {
  font-family: var(--display);
  font-size: 1.12rem;
  color: var(--sand);
}
.bk__svc-meta {
  font-family: var(--accent-font);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(240,224,201,.6);
}

/* ---------- Step 2: the month grid ---------- */
.bk__grid {
  display: grid;
  grid-template-columns: minmax(300px, 380px) 1fr;
  gap: clamp(24px, 4vw, 52px);
  align-items: start;
}

.bk__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.bk__month {
  font-family: var(--display);
  font-size: 1.25rem;
  color: var(--sand);
}
.bk__nav-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line-dark);
  color: var(--sand);
  font-size: 1.1rem;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.bk__nav-btn:hover { background: var(--sand); color: var(--charcoal); border-color: var(--sand); }

.bk__dow,
.bk__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.bk__dow {
  margin-bottom: 8px;
}
.bk__dow span {
  text-align: center;
  font-family: var(--accent-font);
  font-size: .62rem;
  letter-spacing: .16em;
  color: rgba(240,224,201,.45);
}

.bk__day {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--accent-font);
  font-size: .88rem;
  border: 1px solid transparent;
  transition: background .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease), transform .22s var(--ease);
}
.bk__day--blank { visibility: hidden; }

/* Available: champagne, and it invites a click. */
.bk__day--open {
  color: var(--sand);
  border-color: rgba(240,224,201,.35);
  background: rgba(240,224,201,.07);
  cursor: pointer;
}
.bk__day--open:hover {
  background: var(--slot-open);
  color: var(--charcoal);
  border-color: var(--slot-open);
  transform: scale(1.07);
}

/* Closed (Tuesdays), fully booked, past, or beyond the horizon. */
.bk__day--none {
  color: rgba(240,224,201,.22);
  background: transparent;
  cursor: not-allowed;
}

.bk__day--loading {
  background: rgba(240,224,201,.06);
  color: transparent;
  animation: bkpulse 1.2s ease-in-out infinite;
}
@keyframes bkpulse { 0%,100% { opacity: .4 } 50% { opacity: .9 } }

.bk__day.is-selected {
  background: var(--sand) !important;
  color: var(--charcoal) !important;
  border-color: var(--sand) !important;
  font-weight: 600;
}

.bk__legend {
  display: flex;
  gap: 18px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line-dark);
}
.bk__key {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--accent-font);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(240,224,201,.6);
}
.bk__key::before {
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
}
.bk__key--open::before { background: var(--sand); }
.bk__key--none::before { background: var(--slot-none); }

.bk__closed-note {
  margin-top: 12px;
  font-size: .8rem;
  color: rgba(240,224,201,.45);
}

/* ---------- Step 2: the time chips ---------- */
.bk__slots-pane { min-height: 260px; }

.bk__day-title {
  font-size: 1.2rem;
  color: var(--sand);
  margin-bottom: 6px;
}
.bk__tz {
  font-size: .78rem;
  color: rgba(240,224,201,.5);
  margin-bottom: 20px;
}
.bk__hint {
  color: rgba(240,224,201,.55);
  font-size: .95rem;
  padding-top: 8px;
}

.bk__slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
}

/* Slots deliberately do NOT reuse .btn: uppercase + .18em tracking turns
   "1:30 PM" into something you have to decode rather than read. */
.bk__slot {
  padding: 12px 8px;
  border: 1px solid rgba(240,224,201,.35);
  border-radius: var(--radius);
  background: rgba(240,224,201,.05);
  color: var(--sand);
  font-family: var(--body);
  font-size: .92rem;
  transition: all .22s var(--ease);
}
.bk__slot:hover {
  background: var(--sand);
  color: var(--charcoal);
  border-color: var(--sand);
  transform: translateY(-2px);
}
.bk__slot.is-selected {
  background: var(--sand);
  color: var(--charcoal);
  border-color: var(--sand);
  font-weight: 600;
}

/* ---------- Step 3: details ---------- */
.bk__summary {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding: 18px 22px;
  margin-bottom: 26px;
  border-radius: var(--radius);
  background: rgba(240,224,201,.08);
  border: 1px solid var(--line-dark);
}
.bk__summary strong { color: var(--sand); font-family: var(--display); font-size: 1.1rem; }
.bk__summary span { color: rgba(240,224,201,.75); }

.bk__form { max-width: 520px; }
.bk__form .field label { color: var(--sand); }
.bk__form .field input {
  background: rgba(255,255,255,.92);
  border-color: rgba(240,224,201,.22);
  color: var(--charcoal);
}
.bk__form .consent { color: rgba(240,224,201,.75); margin-top: 8px; }
.bk__form .consent em { color: rgba(240,224,201,.5); }
.bk__submit { width: 100%; margin-top: 8px; }

.bk__form .form__error {
  background: rgba(180, 84, 76, .16);
  border-color: rgba(217, 164, 159, .45);
  color: #f0c4c0;
}

/* ---------- Done / degraded ---------- */
.bk__done, .bk__degraded {
  padding: 34px 30px;
  border-radius: var(--radius-lg);
  background: rgba(240,224,201,.08);
  border: 1px solid var(--sand-deep);
  text-align: center;
}
.bk__done h3, .bk__degraded h3 { color: var(--sand); margin-bottom: 12px; }
.bk__done p, .bk__degraded p { color: rgba(240,224,201,.75); margin-bottom: 10px; }
.bk__done-when {
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--sand) !important;
}
.bk__done .link-arrow, .bk__degraded .btn { margin-top: 16px; }

.bk__degraded {
  background: rgba(180, 84, 76, .12);
  border-color: rgba(217, 164, 159, .4);
}

@media (max-width: 860px) {
  .bk__grid { grid-template-columns: 1fr; }
  .bk__slots-pane { min-height: 0; }
}