/* =========================================================================
   ESSENS WELLNESS AND SPA — "Aurora Editorial" design system
   -------------------------------------------------------------------------
   Editorial luxury (oversized serif, hairline rules, asymmetric grid,
   generous whitespace) carrying the brand's violet→jade aurora gradient as a
   signature rather than a wallpaper.

   Palette is taken from the printed Essens menu:
     logo gradient  #7D61C7 → #5691AF → #30B894
     interior field #5A51BC / #756EBB
     cover field    warm khaki-cream

   AURORA RULE — the gradient is only ever applied to strokes ≤2px, the lotus
   mark, hover underlines and the progress bar. Never as a field behind text.
   That restraint is what keeps it reading expensive.

   Every class name is shared with the Blade partials + CMS widget renderers,
   so re-tokenising here re-skins the whole site.
   ========================================================================= */

/* Fonts are loaded via <link> in layouts/app.blade.php — a stylesheet @import
   would delay discovery until this file has parsed. */

:root {
  /* --- Canvas ------------------------------------------------------- */
  --shell:      #FBF9F4;  /* page background — warm off-white            */
  --sand:       #F3EEE2;  /* alternating sections                        */
  --sand-deep:  #E7DFCB;  /* hairlines, edges, warm accents              */

  /* --- Ink (violet-black, ties neutrals to the brand) --------------- */
  --ink:        #241E3D;  /* headings              15.0:1 on shell  AAA  */
  --ink-soft:   #5C5673;  /* body copy              6.6:1 on shell  AA   */
  --ink-faint:  #8B8499;  /* captions, meta — large/secondary only       */

  /* --- Brand -------------------------------------------------------- */
  --violet:      #6B4FC0; /* primary: links, buttons  5.7:1 on shell AA  */
  --violet-deep: #3B2E73; /* dark bands, footer   white on it 11.5:1 AAA */
  --violet-mid:  #7B74C4; /* decorative only                             */
  --violet-wash: #F0EDFA; /* tinted surfaces                             */
  --jade:        #2FA98A; /* GRAPHIC ONLY — 2.8:1, never text            */
  --jade-ink:    #1E7F68; /* text-safe jade         4.7:1 on shell  AA   */
  --jade-soft:   #6FC9AE; /* accents on dark    5.8:1 on violet-deep AA  */

  --aurora: linear-gradient(100deg, #7D61C7 0%, #5691AF 52%, #30B894 100%);
  --aurora-soft: linear-gradient(100deg, rgba(125,97,199,.16) 0%, rgba(86,145,175,.16) 52%, rgba(48,184,148,.16) 100%);

  /* --- Lines -------------------------------------------------------- */
  --line:       rgba(59,46,115,0.14);
  --line-strong:rgba(59,46,115,0.26);
  --line-light: rgba(251,249,244,0.22);

  /* --- Type --------------------------------------------------------- */
  /* Fraunces, not a Didone: moderate stroke contrast and a large x-height, so
     it stays readable at small sizes and holds up light-on-dark. Georgia leads
     the fallbacks because it is the closest match for x-height and colour. */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Jost", system-ui, -apple-system, sans-serif;
  --font-serif:   "Fraunces", Georgia, "Times New Roman", serif;
  /* Fraunces' custom axes. SOFT rounds the terminals (warmer, less clinical);
     WONK 0 keeps the standard letterforms — the swashy variants read as novelty
     at headline size. Anything using --font-display should apply this. */
  --display-vf: "SOFT" 32, "WONK" 0;

  /* --- Space (density 2/10 — spacious) ------------------------------ */
  --space-1: 8px;   --space-2: 16px;  --space-3: 24px;
  --space-4: 40px;  --space-5: 64px;  --space-6: 96px;  --space-7: 144px;
  --section-y: clamp(88px, 11vw, 168px);
  --maxw: 1240px;
  --maxw-wide: 1440px;
  --gutter: clamp(20px, 5vw, 72px);

  /* --- Shape -------------------------------------------------------- */
  --radius:    12px;
  --radius-lg: 24px;
  --radius-xl: 36px;
  --radius-pill: 100px;

  --shadow-sm: 0 2px 10px -3px rgba(36,30,61,0.10);
  --shadow:    0 28px 60px -32px rgba(36,30,61,0.30);
  --shadow-lg: 0 48px 92px -40px rgba(36,30,61,0.38);
  --shadow-soft: var(--shadow);

  /* --- Motion (dial 5/10 — standard) -------------------------------- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur-fast: 180ms;
  --dur: 260ms;
  --dur-slow: 420ms;

  /* --- Legacy aliases: keep pre-existing markup rendering correctly -- */
  --surface: var(--shell);
  --paper:   var(--shell);
  --shallow: var(--sand);
  --mid:     var(--violet-mid);
  --deep:    var(--violet);
  --deeper:  var(--violet-deep);
  --abyss:   #2A2050;
  --amber:        var(--violet);
  --amber-deep:   var(--violet);
  --amber-bright: var(--violet-mid);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  /* Inherited so every use of --font-display picks the axes up, including the
     per-page <style> blocks in the Blade views. Jost has neither axis and a
     font simply ignores settings for axes it does not define, so this is a
     no-op on body copy. */
  font-variation-settings: var(--display-vf);
  color: var(--ink-soft);
  background: var(--shell);
  line-height: 1.7;
  font-size: 17px;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
svg { display: block; }
a { color: var(--violet); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--ink); }
button { font: inherit; cursor: pointer; }
::selection { background: rgba(107,79,192,0.16); color: var(--ink); }

/* Focus: always visible, never removed (WCAG 2.4.7) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Skip link — keyboard users land here first */
.skip-link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  z-index: 200; background: var(--violet-deep); color: #fff;
  padding: 12px 24px; border-radius: 0 0 var(--radius) var(--radius);
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); color: #fff; }

/* =========================================================================
   TYPE SCALE  —  13 / 15 / 17 / 21 / 28 / 40 / 60 / clamp(56,8vw,132)
   Fraunces is legible at every step of the scale, so unlike the Bodoni it
   replaced there is no minimum size for the display face. Its larger x-height
   needs a little more leading than the Didone did.
   ========================================================================= */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: var(--ink);
  text-wrap: balance;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: clamp(44px, 7vw, 96px); }
h2 { font-size: clamp(34px, 5vw, 60px); }
h3 { font-size: clamp(22px, 2.4vw, 28px); }
h4 { font-size: 21px; }

/* Light-on-dark text optically thins as it antialiases, so display type on the
   dark bands gets a small weight bump. Fraunces' optical-size axis is left on
   auto — its large-size cut adds elegance without going hairline, which is
   exactly what the Bodoni it replaced could not do. Set via
   font-variation-settings rather than font-weight so a later component rule
   can't quietly cancel it. */
.on-dark-display,
.testi-quote,
.reserve-band h2, .reserve-band .display,
.cta-band h2, .cta-band .display,
.kz-hero.has-media h1,
.page-hero.dark h1,
.kz-slide h1 {
  font-variation-settings: var(--display-vf), "wght" 460;
}

.serif    { font-family: var(--font-serif); font-weight: 400; }
.serif-it { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.it       { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--violet); }

/* CMS copy runs through HTMLPurifier, whose allow-list keeps <em>/<i> but
   strips class attributes — so the italic accent in headings is expressed as
   <em>, not <span class="it">. */
.display em, h1 em, h2 em, h3 em,
.display i,  h1 i,  h2 i,  h3 i {
  font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--violet);
}
/* Inline colours from older CMS content are neutralised so the new palette
   always wins (the page builder writes style="color:#8ea081"). */
.display [style*="color"], h1 [style*="color"], h2 [style*="color"] { color: var(--violet) !important; }
/* On dark grounds only — jade-soft would fail contrast on the light canvas. */
.kz-hero.has-media h1 em, .kz-hero.has-media h1 i, .kz-hero.has-media h1 [style*="color"],
.reserve-band h2 em, .reserve-band h2 i, .reserve-band [style*="color"],
.cta-band h2 em, .cta-band h2 i, .cta-band [style*="color"],
.testi-stage h2 em, .testi-stage h2 i { color: var(--jade-soft) !important; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--violet);
}
.eyebrow--rule { display: flex; align-items: center; gap: 14px; }
.eyebrow--rule::before {
  content: ""; width: 34px; height: 1px; flex: none;
  background: var(--aurora);
}

.lead { font-size: clamp(17px, 1.5vw, 20px); color: var(--ink-soft); max-width: 58ch; }
.measure { max-width: 68ch; }
.muted { color: var(--ink-soft); }
.center { text-align: center; }
.flow > * + * { margin-top: 1em; }
.grid { display: grid; gap: var(--space-3); }

/* Prices, durations, counts — tabular so columns never jitter */
.num, .price, .kz-stat .n, .proof-n { font-variant-numeric: tabular-nums; }

.wrap        { max-width: var(--maxw);      margin-inline: auto; padding-inline: var(--gutter); }
.wrap-wide   { max-width: var(--maxw-wide); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: 820px;            margin-inline: auto; padding-inline: var(--gutter); }

section { position: relative; }

/* Aurora hairline — the workhorse divider */
.rule-aurora { height: 1px; border: 0; background: var(--aurora); opacity: .85; }
.rule-soft   { height: 1px; border: 0; background: var(--line); }

/* =========================================================================
   SCROLL PROGRESS
   ========================================================================= */
.progress-bar {
  position: fixed; top: 0; left: 0; width: 100%; height: 2px;
  z-index: 120; pointer-events: none; background: transparent;
}
.progress-bar > span {
  display: block; height: 100%; width: 100%;
  transform-origin: left center; transform: scaleX(0);
  background: var(--aurora);
}

/* =========================================================================
   LOTUS MARK
   ========================================================================= */
/* The mark is the client's own artwork: outlines already converted to filled
   contours, so it is filled (evenodd), never stroked. Its natural ratio is
   138:86 — landscape, not the square the hand-drawn version used. */
.lotus { display: block; width: 100%; height: auto; }

/* Oversized watermark, lifted from the printed menu */
.lotus-watermark {
  position: absolute; pointer-events: none; z-index: 0;
  width: min(760px, 78vw);
  opacity: 0.055;
}

/* =========================================================================
   UTILITY BAR + NAV
   ========================================================================= */
.kz-topbar {
  background: var(--violet-deep);
  color: rgba(251,249,244,0.86);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 300;
}
.kz-topbar-inner {
  max-width: var(--maxw-wide); margin-inline: auto;
  padding: 9px var(--gutter);
  display: flex; align-items: center; justify-content: center; gap: 10px 26px;
  flex-wrap: wrap;
}
/* Flex items won't shrink below min-content by default, so a long address
   pushes the whole bar past the viewport on phones. Let them wrap instead. */
.kz-topbar-inner > * { min-width: 0; }
.kz-topbar .sep { color: var(--jade-soft); }
.kz-topbar a { color: inherit; }
.kz-topbar a:hover { color: #fff; }

.nav {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  padding: 22px var(--gutter);
  background: rgba(251,249,244,0.82);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid var(--line);
  transition: padding var(--dur-slow) var(--ease), background var(--dur-slow) var(--ease);
}
/* Condenses once the page scrolls (kamazu.js toggles .is-stuck) */
.nav.is-stuck { padding-top: 13px; padding-bottom: 13px; background: rgba(251,249,244,0.95); box-shadow: var(--shadow-sm); }
.nav.on-dark {
  background: rgba(42,32,80,0.55);
  border-bottom-color: var(--line-light);
  color: var(--shell);
}

/* --- Brand lockup ---------------------------------------------------
   The client's supplied logo, used as an image rather than re-set in type
   (its wordmark is Skylar, which we hold no webfont licence for). The
   lockup is stacked — lotus over wordmark — so its height drives the
   header's height; .nav's padding is tuned to suit.
   The inline height on the element comes from the component's prop; only
   the transition and the dark-ground handling live here. */
.brand { display: flex; align-items: center; color: var(--ink); }
.brand-logo {
  display: block; width: auto;
  transition: height var(--dur-slow) var(--ease), filter var(--dur-slow) var(--ease);
}
/* Condensed once scrolled. !important overrides the component's inline
   height, which is the only way an inline style can be beaten in CSS. */
.nav.is-stuck .brand-logo { height: 56px !important; }

/* One asset serves both grounds: inverting the gradient lockup to flat white
   reproduces the supplied white variant exactly (that file is a plain white
   silhouette sharing this alpha channel), and saves every visitor a second
   download. */
.nav.on-dark .brand-logo,
.nav-mobile-head .brand-logo,
.footer .brand-logo { filter: brightness(0) invert(1); }

.nav-links { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 32px); list-style: none; padding: 0; margin: 0; }
.nav-links > li { position: relative; }
.nav-links > li > a {
  display: inline-block; position: relative;
  font-size: 12.5px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 8px 0; color: var(--ink-soft);
  transition: color var(--dur) var(--ease); white-space: nowrap;
}
.nav-links > li > a:hover, .nav-links > li > a[aria-current] { color: var(--ink); }
/* Aurora underline wipes in from the left */
.nav-links > li > a::after {
  content: ""; position: absolute; left: 0; bottom: 2px; height: 1px; width: 100%;
  background: var(--aurora);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur) var(--ease);
}
.nav-links > li > a:hover::after,
.nav-links > li > a[aria-current]::after { transform: scaleX(1); }
.nav.on-dark .nav-links > li > a { color: rgba(251,249,244,0.8); }
.nav.on-dark .nav-links > li > a:hover { color: #fff; }

.nav-links li.has-children > a::after,
.nav-links li.has-mega > a::after { bottom: 2px; }
.nav-caret { display: inline-block; width: 7px; height: 7px; margin-left: 7px; vertical-align: 1px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translate(-2px,-2px); opacity: .55;
  transition: transform var(--dur) var(--ease); }
.nav-links li:hover > a .nav-caret,
.nav-links li:focus-within > a .nav-caret { transform: rotate(45deg) translate(0,0); opacity: .9; }

.nav-cta { white-space: nowrap; }

.nav-burger {
  display: none; background: none; border: 0; padding: 10px; line-height: 0;
  color: var(--ink); border-radius: var(--radius);
}
.nav-burger svg { width: 24px; height: 24px; stroke: currentColor; }
.nav.on-dark .nav-burger { color: var(--shell); }

/* --- simple dropdown ------------------------------------------------ */
.nav-dd {
  position: absolute; top: 100%; left: -18px; min-width: 232px;
  list-style: none; margin: 0; padding: 12px;
  background: var(--shell); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.nav-links li:hover > .nav-dd,
.nav-links li:focus-within > .nav-dd { opacity: 1; visibility: visible; transform: none; }
.nav-dd a {
  display: block; padding: 10px 14px; border-radius: var(--radius);
  font-size: 14px; letter-spacing: 0.02em; color: var(--ink-soft);
}
.nav-dd a:hover { background: var(--violet-wash); color: var(--ink); }

/* --- treatments mega-menu ------------------------------------------- */
.nav-mega {
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, 8px);
  width: min(960px, calc(100vw - 2 * var(--gutter)));
  background: var(--shell); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 34px 36px 30px;
  display: grid; grid-template-columns: 1.65fr 1fr; gap: 36px;
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.nav-links li:hover > .nav-mega,
.nav-links li:focus-within > .nav-mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav-mega::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 2px;
  background: var(--aurora); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.nav-mega h5 {
  font-family: var(--font-body); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: 16px;
}
/* Space for the hover marker is reserved permanently: growing the padding on
   hover would shrink the box, re-wrap a long label ("Essens Finishing Touches")
   and force the multi-column layout to re-balance, jumping every link in the panel.
   The matching negative margin cancels it, so the text keeps its column width
   and its original position — the marker sits in the gutter. */
.nav-mega-cols { columns: 3; column-gap: 26px; }
.nav-mega-cols a {
  display: block; break-inside: avoid; padding: 7px 0 7px 18px; margin-left: -18px;
  font-size: 14.5px; color: var(--ink-soft); position: relative;
  transition: color var(--dur) var(--ease);
}
.nav-mega-cols a::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 0; height: 1px;
  background: var(--aurora); transition: width var(--dur) var(--ease);
}
.nav-mega-cols a:hover { color: var(--ink); }
.nav-mega-cols a:hover::before { width: 12px; }

/* "Also at the spa" — the reference menus (add-ons, oils, tea). Separated from
   the category list above by a hairline so it does not read as a 15th category.
   Laid out in a row, not a column, so the dropdown does not grow taller. */
.nav-mega-also {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 22px;
}
.nav-mega-also h5 { margin: 0; flex: 0 0 100%; }
.nav-mega-also a {
  font-size: 14.5px; color: var(--violet); position: relative;
  transition: color var(--dur) var(--ease);
}
/* Underline grows on a pseudo-element, so nothing reflows on hover. */
.nav-mega-also a::after {
  content: ""; position: absolute; left: 0; bottom: -3px; width: 0; height: 1px;
  background: var(--aurora); transition: width var(--dur) var(--ease);
}
.nav-mega-also a:hover::after { width: 100%; }

.nav-mega-feature {
  border-left: 1px solid var(--line); padding-left: 32px;
  display: flex; flex-direction: column;
}
.nav-mega-feature .fig {
  aspect-ratio: 4/3; width: 100%; border-radius: var(--radius); overflow: hidden;
  background: var(--violet-wash); margin-bottom: 16px;
}
.nav-mega-feature .fig img { width: 100%; height: 100%; object-fit: cover; }
.nav-mega-feature h6 { font-family: var(--font-display); font-size: 22px; font-weight: 400; color: var(--ink); margin-bottom: 6px; }
.nav-mega-feature p { font-size: 14px; color: var(--ink-soft); margin-bottom: 14px; }
.nav-mega-feature .price { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--violet); }

/* --- mobile sheet ---------------------------------------------------- */
.nav-mobile {
  position: fixed; inset: 0; z-index: 80;
  background: var(--violet-deep);
  color: var(--shell);
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; transform: translateY(-2%);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease), visibility var(--dur-slow);
}
.nav-mobile.open { opacity: 1; visibility: visible; transform: none; }
.nav-mobile-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--gutter); border-bottom: 1px solid var(--line-light);
}
.nav-close { background: none; border: 0; color: var(--shell); padding: 10px; line-height: 0; border-radius: var(--radius); }
.nav-close svg { width: 24px; height: 24px; stroke: currentColor; }
.nav-mobile-body { padding: 12px var(--gutter) 40px; flex: 1; }
.nav-mobile-body > a, .nav-m-acc > button {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; text-align: left;
  font-family: var(--font-display); font-weight: 400; font-size: 30px;
  color: var(--shell); background: none; border: 0;
  padding: 22px 0; border-bottom: 1px solid var(--line-light);
}
.nav-m-acc > button .nav-caret { width: 9px; height: 9px; opacity: .7; }
.nav-m-acc.open > button .nav-caret { transform: rotate(225deg) translate(-2px,-2px); }
.nav-m-panel { max-height: 0; overflow: hidden; transition: max-height var(--dur-slow) var(--ease); }
.nav-m-panel-inner { padding: 16px 0 22px; display: grid; gap: 2px; }
.nav-m-panel a {
  font-family: var(--font-body); font-size: 16px; font-weight: 300;
  color: rgba(251,249,244,0.82); padding: 9px 0;
}
.nav-m-panel a:hover { color: #fff; }
.nav-mobile .btn { margin-top: 32px; width: 100%; justify-content: center; }
.nav-mobile-foot { padding: 0 var(--gutter) 40px; font-size: 13px; color: rgba(251,249,244,0.7); }

/* =========================================================================
   BUTTONS
   ========================================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 14px 30px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body); font-weight: 400;
  font-size: 12.5px; letter-spacing: 0.2em; text-transform: uppercase;
  border: 1px solid transparent;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
  white-space: nowrap; cursor: pointer;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary, .btn-amber {
  background: var(--violet); color: #fff;
  box-shadow: 0 18px 34px -18px rgba(107,79,192,0.75);
}
.btn-primary:hover, .btn-amber:hover { background: #5C42AB; color: #fff; box-shadow: 0 22px 42px -18px rgba(107,79,192,0.85); }

.btn-ink { background: var(--ink); color: var(--shell); }
.btn-ink:hover { background: var(--violet-deep); color: var(--shell); }

/* On the violet bands the violet button all but disappears into the ground —
   invert it so the primary action still reads as the primary action. */
.reserve-band .btn-primary, .cta-band .btn-primary,
.reserve-band .btn-amber,   .cta-band .btn-amber,
.testi-stage .btn-primary {
  background: var(--shell); color: var(--violet-deep);
  box-shadow: 0 18px 34px -18px rgba(0,0,0,0.5);
}
.reserve-band .btn-primary:hover, .cta-band .btn-primary:hover,
.reserve-band .btn-amber:hover,   .cta-band .btn-amber:hover,
.testi-stage .btn-primary:hover {
  background: #fff; color: var(--violet-deep);
}

.btn-ghost {
  border-color: var(--line-strong); color: var(--ink);
  background: rgba(255,255,255,0.55); backdrop-filter: blur(8px);
}
.btn-ghost:hover { border-color: var(--violet); color: var(--violet); background: #fff; }
.btn-ghost.on-light:hover { color: var(--violet); }
.btn-ghost.on-dark, .cta-band .btn-ghost, .reserve-band .btn-ghost, .kz-hero .btn-ghost {
  color: var(--shell); border-color: rgba(251,249,244,0.45); background: rgba(251,249,244,0.10);
}
.btn-ghost.on-dark:hover, .cta-band .btn-ghost:hover, .reserve-band .btn-ghost:hover, .kz-hero .btn-ghost:hover {
  color: var(--violet-deep); background: var(--shell); border-color: var(--shell);
}

.btn .arrow { transition: transform var(--dur) var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* Quiet text link with an aurora underline */
.link-aurora {
  display: inline-flex; align-items: center; gap: 9px; position: relative;
  font-size: 12.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink);
  padding-bottom: 6px;
}
.link-aurora::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--aurora); transform: scaleX(1); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.link-aurora:hover { color: var(--violet); }
.link-aurora:hover::after { transform: scaleX(0.4); }
.link-aurora .arrow { transition: transform var(--dur) var(--ease); }
.link-aurora:hover .arrow { transform: translateX(4px); }

/* =========================================================================
   CARDS / CHIPS
   ========================================================================= */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease), border-color var(--dur-slow) var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10.5px; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase;
  padding: 6px 14px; border-radius: var(--radius-pill);
  background: var(--violet-wash); color: var(--violet);
}
.chip.dark { background: rgba(251,249,244,0.14); color: var(--shell); }

/* Photo placeholder — aurora-tinted, labelled */
.ph {
  position: relative; overflow: hidden;
  background:
    radial-gradient(circle at 28% 20%, rgba(255,255,255,0.45), transparent 58%),
    linear-gradient(150deg, #CFC6EE, #A8C3D6 55%, #9FD8C6);
  color: rgba(36,30,61,0.72);
  background-size: cover; background-position: center;
}
.ph::after {
  content: attr(data-label);
  position: absolute; left: 18px; bottom: 15px;
  font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 400;
  opacity: 0.8;
}
.ph.has-img::after { content: none; }
/* Same aurora family at three depths, so a row of image-less cards reads as a
   set rather than three unrelated blocks. */
.ph-amber { background:
    radial-gradient(circle at 28% 20%, rgba(255,255,255,0.34), transparent 58%),
    linear-gradient(150deg, #B9A9E4, #8FBFD6 55%, #7FD0B8); }
.ph-deep { background:
    radial-gradient(circle at 28% 20%, rgba(255,255,255,0.20), transparent 58%),
    linear-gradient(150deg, #6B4FC0, #46628F 55%, #2E7F76); color: rgba(251,249,244,0.9); }
.ph.has-img { background-blend-mode: normal; }

/* =========================================================================
   HOMEPAGE — HERO (full-bleed photo + reservation bar)
   ========================================================================= */
.kz-hero {
  position: relative; overflow: hidden;
  /* Subtract the utility bar + nav so the reservation bar lands just above the
     fold rather than one scroll below it. svh, not vh — mobile toolbars. */
  min-height: min(calc(100svh - 128px), 880px);
  display: flex; flex-direction: column; justify-content: flex-end;
  background: linear-gradient(165deg, #EFEAFB 0%, #E3EAF2 46%, #DFF0E8 100%);
}
.kz-hero-media {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
/* Aurora-tinted scrim — brand colour without touching legibility */
.kz-hero.has-media::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(36,30,61,0.52) 0%, rgba(36,30,61,0.22) 38%, rgba(36,30,61,0.80) 100%),
    linear-gradient(100deg, rgba(125,97,199,0.34) 0%, rgba(86,145,175,0.20) 52%, rgba(48,184,148,0.28) 100%);
}
/* Gradient fallback when no photo is uploaded */
.kz-hero:not(.has-media) .hero-sun {
  position: absolute; top: -20vh; right: -10vw; width: 78vw; height: 78vw; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(125,97,199,0.30), rgba(48,184,148,0.14) 44%, transparent 70%);
  animation: kzDrift 16s ease-in-out infinite;
}
.kz-hero:not(.has-media) .rays {
  position: absolute; bottom: 0; left: -10%; width: 130%; height: 40vh; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.8), transparent 72%);
  filter: blur(30px); animation: kzFog 24s ease-in-out infinite;
}

.hero-inner {
  position: relative; z-index: 3;
  max-width: var(--maxw-wide); width: 100%; margin-inline: auto;
  padding: clamp(56px, 8vh, 96px) var(--gutter) clamp(24px, 3vh, 36px);
}
.hero-eyebrow { font-size: 12px; letter-spacing: 0.46em; text-transform: uppercase; color: var(--violet); }
.kz-hero h1 {
  font-size: clamp(44px, 6.6vw, 112px);
  font-weight: 400; line-height: 0.98; letter-spacing: -0.02em;
  margin: 22px 0 0; max-width: 16ch;
}
.kz-hero .hero-lead {
  font-size: clamp(16px, 1.4vw, 19px); color: var(--ink-soft);
  max-width: 52ch; margin-top: 24px;
}
.hero-actions { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }

/* On a photo, everything flips to light type */
.kz-hero.has-media h1,
.kz-hero.has-media .hero-lead { color: var(--shell); }
.kz-hero.has-media .hero-lead { color: rgba(251,249,244,0.90); }
.kz-hero.has-media .hero-eyebrow { color: var(--jade-soft); }

/* --- reservation bar ------------------------------------------------- */
.hero-reserve {
  position: relative; z-index: 3;
  max-width: var(--maxw-wide); width: 100%; margin: 0 auto;
  padding: 0 var(--gutter) clamp(28px, 5vh, 56px);
}
.hero-reserve form {
  display: grid;
  /* minmax(0,…), not 1fr: a bare 1fr track floors at the item's min-content
     width, and a <select>'s min-content is its longest option ("Herbal
     Tranquillity Compress Massage"), which blows the bar past the viewport. */
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 0.85fr) auto;
  gap: 0;
  align-items: stretch;
  background: rgba(251,249,244,0.94);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg);
  padding: 8px 8px 8px 10px;
}
.hr-field { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 10px 22px; position: relative; min-width: 0; }
.hr-field + .hr-field::before {
  content: ""; position: absolute; left: 0; top: 20%; bottom: 20%; width: 1px; background: var(--line);
}
.hr-field label {
  font-size: 10px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-faint);
}
.hr-field select, .hr-field input {
  font: inherit; font-size: 15px; color: var(--ink);
  border: 0; background: none; padding: 2px 0;
  width: 100%; min-width: 0; max-width: 100%;
  min-height: 28px;
  appearance: none; -webkit-appearance: none;
  cursor: pointer; text-overflow: ellipsis;
}
.hr-field select:focus-visible, .hr-field input:focus-visible { outline-offset: 4px; }
.hr-field.has-caret::after {
  content: ""; position: absolute; right: 20px; bottom: 20px;
  width: 6px; height: 6px; border-right: 1px solid var(--ink-faint); border-bottom: 1px solid var(--ink-faint);
  transform: rotate(45deg); pointer-events: none;
}
.hero-reserve .btn { border-radius: var(--radius-pill); padding-inline: 34px; }

.scroll-hint {
  position: absolute; bottom: 22px; right: var(--gutter); z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(251,249,244,0.75);
}
.kz-hero:not(.has-media) .scroll-hint { color: var(--ink-faint); }
.scroll-hint .line { width: 1px; height: 46px; background: linear-gradient(currentColor, transparent); }

@keyframes kzDrift { 0%,100% { opacity:.5; transform: scale(1) } 50% { opacity:.8; transform: scale(1.09) } }
@keyframes kzFog   { 0% { transform: translateX(-5%); opacity:.5 } 50% { opacity:.85 } 100% { transform: translateX(5%); opacity:.5 } }

/* =========================================================================
   HOMEPAGE — BRAND STATEMENT
   ========================================================================= */
.statement { position: relative; overflow: hidden; padding: var(--section-y) 0; background: var(--shell); }
.statement .lotus-watermark { top: 50%; left: 50%; transform: translate(-50%,-50%); }
.statement-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(40px, 7vw, 110px);
  align-items: start;
}
.statement-grid h2 { font-size: clamp(32px, 4.2vw, 58px); margin-top: 20px; }
.statement-body { padding-top: clamp(0px, 2vw, 30px); }
.statement-body > * + * { margin-top: 1.2em; }
.statement-body p:first-child {
  font-family: var(--font-serif); font-size: clamp(19px, 1.8vw, 24px);
  line-height: 1.55; color: var(--ink);
}
.statement-body p { color: var(--ink-soft); }
.statement-fig {
  margin-top: clamp(48px, 7vw, 96px); position: relative; z-index: 1;
  border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow);
}
.statement-fig img { width: 100%; aspect-ratio: 21/9; object-fit: cover; }

/* =========================================================================
   HOMEPAGE — SIGNATURE RITUALS
   ========================================================================= */
.rituals { padding: var(--section-y) 0; background: var(--sand); }
/* Category blocks are anchor targets (/treatments#massage). Keep the heading
   clear of the sticky header when the browser jumps to one — same for the
   .kz-anchor markers a CMS block can carry (/about#etiquette). */
.rituals[id], .kz-anchor { scroll-margin-top: 96px; }
.kz-anchor { display: block; height: 0; }
.section-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: var(--space-3); flex-wrap: wrap; margin-bottom: clamp(40px, 5vw, 64px);
}
.section-head h2 { font-size: clamp(32px, 4.4vw, 60px); margin-top: 18px; max-width: 18ch; }
.section-head .sub { color: var(--ink-soft); max-width: 46ch; margin-top: 16px; }

.ritual-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 34px); }
.ritual {
  display: flex; flex-direction: column;
  background: var(--shell); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: transform var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease);
}
.ritual:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.ritual-fig { position: relative; overflow: hidden; aspect-ratio: 4/5; }
.ritual-fig img, .ritual-fig .ph { width: 100%; height: 100%; object-fit: cover; }
.ritual-fig img { transition: transform 900ms var(--ease); }
.ritual:hover .ritual-fig img { transform: scale(1.05); }
.ritual-fig .chip { position: absolute; top: 16px; left: 16px; background: rgba(251,249,244,0.92); color: var(--violet); }
.ritual-body { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.ritual-body h3 { font-size: clamp(23px, 2.2vw, 30px); }
.ritual-meta {
  display: flex; align-items: center; gap: 10px; margin-top: 12px;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint);
}
.ritual-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--jade); flex: none; }
.ritual-tagline { margin-top: 6px; font-family: var(--font-serif); font-style: italic;
  font-size: 15px; line-height: 1.35; color: var(--violet); }
.ritual-desc { margin-top: 14px; font-size: 15px; color: var(--ink-soft); flex: 1; }
.ritual-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line);
}
.ritual-price { font-family: var(--font-display); font-size: 24px; color: var(--ink); }
.ritual-price small { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); display: block; margin-bottom: 2px; }
.ritual-go {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong); color: var(--violet);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.ritual:hover .ritual-go { background: var(--violet); color: #fff; border-color: var(--violet); }
.ritual-go svg { width: 17px; height: 17px; stroke: currentColor; }

/* =========================================================================
   HOMEPAGE — CATEGORY INDEX ("the menu, distilled")
   ========================================================================= */
.cat-index { padding: var(--section-y) 0; background: var(--shell); }
.cat-list { border-top: 1px solid var(--line); }
.cat-row {
  position: relative; display: grid;
  grid-template-columns: 62px 1fr auto auto;
  align-items: center; gap: clamp(14px, 2.5vw, 34px);
  padding: clamp(20px, 2.4vw, 30px) 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  transition: color var(--dur) var(--ease);
}
/* Aurora hairline wipes across the row on hover */
.cat-row::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--aurora); transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-slow) var(--ease);
}
/* The row slides on hover via a transform, not padding: padding would shrink the
   1fr name track, re-wrap a long name and change the row height, shifting every
   row below it. Only the left-hand items move, so the divider and the
   right-aligned columns stay put — the same effect, without the reflow. */
.cat-no, .cat-name { transition: transform var(--dur-slow) var(--ease); }
.cat-row:hover { color: var(--ink); }
.cat-row:hover .cat-no,
.cat-row:hover .cat-name { transform: translateX(clamp(8px, 1.4vw, 22px)); }
.cat-row:hover::after { transform: scaleX(1); }
.cat-no {
  font-family: var(--font-body); font-size: 11px; font-weight: 400;
  letter-spacing: 0.2em; color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
.cat-name { font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 34px); font-weight: 400; color: var(--ink); line-height: 1.15; }
.cat-desc { font-size: 14.5px; color: var(--ink-faint); max-width: 40ch; text-align: right; }
.cat-count {
  font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--violet); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.cat-foot { margin-top: clamp(36px, 5vw, 56px); display: flex; justify-content: center; }

/* =========================================================================
   HOMEPAGE — PROOF FIGURES
   ========================================================================= */
.proof { padding: clamp(64px, 8vw, 110px) 0; background: var(--sand); }
.proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 3vw, 48px); }
.proof-item { position: relative; padding-top: 26px; border-top: 1px solid var(--line-strong); }
.proof-item::before {
  content: ""; position: absolute; top: -1px; left: 0; width: 46px; height: 1px; background: var(--aurora);
}
.proof-n {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(38px, 4.6vw, 62px); line-height: 1; color: var(--ink);
}
.proof-l { margin-top: 12px; font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint); }

/* =========================================================================
   HOMEPAGE — TESTIMONIAL STAGE (single quote, slow crossfade)
   ========================================================================= */
.testi-stage {
  position: relative; overflow: hidden;
  padding: clamp(88px, 11vw, 160px) 0;
  background: var(--violet-deep); color: var(--shell);
}
.testi-stage .lotus-watermark {
  top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0.09;
}
.testi-stage .lotus-watermark .lotus path { stroke: rgba(251,249,244,0.9); }
.testi-inner { position: relative; z-index: 1; text-align: center; max-width: 920px; margin-inline: auto; }
.testi-stage .eyebrow { color: var(--jade-soft); }
.testi-slides { position: relative; margin-top: 40px; }
.testi-slide {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity 700ms var(--ease), visibility 700ms;
}
.testi-slide.active { position: relative; opacity: 1; visibility: visible; }
.testi-quote {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(23px, 3vw, 40px); line-height: 1.34;
  color: var(--shell); text-wrap: balance;
}
.testi-stars { display: flex; justify-content: center; gap: 7px; margin-bottom: 28px; }
.testi-stars svg { width: 15px; height: 15px; fill: var(--jade-soft); }
.testi-stars svg.empty { fill: rgba(251,249,244,0.28); }
.testi-who { margin-top: 30px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.testi-who .n { font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--shell); }
.testi-who .c { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(251,249,244,0.66); }
.testi-dots { display: flex; gap: 10px; justify-content: center; margin-top: 44px; }
.testi-dots button {
  width: 34px; height: 2px; padding: 0; border: 0; border-radius: 2px;
  background: rgba(251,249,244,0.30); position: relative;
  transition: background var(--dur) var(--ease);
}
.testi-dots button::after { content: ""; position: absolute; inset: -14px -4px; }
.testi-dots button[aria-selected="true"] { background: var(--jade-soft); }

/* =========================================================================
   HOMEPAGE — RESERVE BAND (booking CTA)
   ========================================================================= */
.reserve-wrap { padding: var(--section-y) 0; background: var(--shell); }
.reserve-band {
  position: relative; overflow: hidden;
  border-radius: var(--radius-xl);
  padding: clamp(52px, 7vw, 104px) clamp(28px, 6vw, 80px);
  text-align: center;
  background: linear-gradient(150deg, #3B2E73 0%, #4A3A8C 52%, #2E5F76 100%);
  color: var(--shell);
}
/* Aurora edge — a 2px gradient hairline, not a gradient field */
.reserve-band::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px;
  background: var(--aurora);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.reserve-band .lotus-watermark {
  top: 50%; left: 50%; transform: translate(-50%,-50%); opacity: 0.09;
}
.reserve-band .lotus-watermark .lotus path { stroke: rgba(251,249,244,0.9); }
.reserve-band > .inner { position: relative; z-index: 1; max-width: 680px; margin-inline: auto; }
.reserve-band .eyebrow { color: var(--jade-soft); }
.reserve-band h2 { font-size: clamp(34px, 5.4vw, 68px); color: var(--shell); margin: 18px 0 20px; }
.reserve-band p { color: rgba(251,249,244,0.86); max-width: 48ch; margin-inline: auto; }
.reserve-actions { display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; justify-content: center; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.footer {
  position: relative; overflow: hidden;
  background: var(--violet-deep); color: rgba(251,249,244,0.72);
  padding: clamp(64px, 8vw, 108px) 0 36px;
}
.footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--aurora); }
.footer .lotus-watermark { bottom: -34%; left: -8%; opacity: 0.07; }
.footer .lotus-watermark .lotus path { stroke: rgba(251,249,244,0.9); }
.footer > .wrap { position: relative; z-index: 1; }
.footer a { color: rgba(251,249,244,0.72); }
.footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.2fr; gap: clamp(28px, 4vw, 56px); }
.footer-tagline { margin-top: 20px; max-width: 34ch; font-size: 15px; line-height: 1.75; }
.footer h4 {
  font-family: var(--font-body); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--jade-soft);
  margin-bottom: 20px;
}
.footer ul { list-style: none; padding: 0; display: grid; gap: 12px; font-size: 15px; }
.footer-hours { font-size: 15px; }
.footer-hours strong { display: block; color: var(--shell); font-weight: 400; font-family: var(--font-display); font-size: 22px; margin-bottom: 4px; }
.footer-social { display: flex; gap: 10px; margin-top: 22px; }
.footer-social a {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-light);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.footer-social a:hover { background: rgba(251,249,244,0.12); border-color: var(--jade-soft); transform: translateY(-2px); }
.footer-social svg { width: 18px; height: 18px; fill: currentColor; }
.footer-bottom {
  margin-top: clamp(44px, 6vw, 72px); padding-top: 26px; border-top: 1px solid var(--line-light);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px;
  font-size: 12px; letter-spacing: 0.12em; color: rgba(251,249,244,0.55);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 18px; }
.footer-legal a { color: inherit; text-decoration: none; }
.footer-legal a:hover { color: var(--jade-soft); }

/* logo / word marquee (kept — used by other pages) */
.kz-marquee { overflow: hidden; width: 100%; }
.kz-marquee-track { display: flex; gap: 64px; width: max-content; align-items: center; animation: kzMarquee 42s linear infinite; }
.kz-marquee.rev .kz-marquee-track { animation-name: kzMarqueeR; }
.kz-marquee:hover .kz-marquee-track { animation-play-state: paused; }
@keyframes kzMarquee  { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes kzMarqueeR { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.gauge { display: none !important; }

/* =========================================================================
   WHATSAPP FLOAT
   ========================================================================= */
/* Visible by default (so it survives with JS off); kamazu.js adds .is-tucked
   while the guest is still on the hero, where it would otherwise sit on top of
   the reservation bar. */
.wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 70;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: #1E7F68; color: #fff;
  box-shadow: 0 16px 34px -12px rgba(36,30,61,0.55);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease), visibility var(--dur-slow);
}
.wa-float:hover { transform: translateY(-3px) scale(1.04); }
.wa-float.is-tucked { opacity: 0; visibility: hidden; transform: translateY(12px) scale(.9); pointer-events: none; }
.wa-float svg { width: 30px; height: 30px; fill: #fff; }

/* =========================================================================
   FLASH MESSAGES
   ========================================================================= */
.flash {
  position: fixed; top: 96px; left: 50%; transform: translateX(-50%);
  z-index: 90; max-width: 92vw;
  padding: 14px 26px; border-radius: var(--radius-pill);
  font-weight: 400; font-size: 14px; letter-spacing: 0.03em;
  box-shadow: var(--shadow);
}
.flash-success { background: #DCF1EA; color: #14624F; }
.flash-error   { background: #FBE4E4; color: #8E2F2F; }

/* =========================================================================
   MOTION UTILITIES
   ========================================================================= */
.reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* =========================================================================
   CMS PAGE WIDGETS (shared with /treatments, /about, /contact, /gallery)
   ========================================================================= */
.kz-section { padding: var(--section-y) 0; }
.kz-section.sand { background: var(--sand); }
.kz-section.dark { background: var(--violet-deep); color: rgba(251,249,244,0.82); }
.kz-section.dark .display, .kz-section.dark h2, .kz-section.dark h3 { color: var(--shell); }
.kz-section.dark .muted { color: rgba(251,249,244,0.78); }
.kz-section.dark .eyebrow { color: var(--jade-soft); }

.kz-head { text-align: center; max-width: 760px; margin: 0 auto clamp(46px, 6vw, 80px); }
.kz-head .eyebrow { margin-bottom: 18px; }

.page-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(168deg, #F3F0FB 0%, #EDEEF6 55%, #E6F3EE 100%);
  padding: clamp(110px, 15vh, 180px) 0 clamp(56px, 8vh, 96px); text-align: center;
}
.page-hero .lotus-watermark { top: 50%; left: 50%; transform: translate(-50%,-50%); }
.page-hero > .wrap { position: relative; z-index: 1; }
.page-hero.dark { background: var(--violet-deep); color: rgba(251,249,244,0.82); }
.page-hero h1 { font-size: clamp(42px, 7.4vw, 100px); font-weight: 400; }
.page-hero.dark h1 { color: var(--shell); }
.page-hero .lead { max-width: 56ch; margin: 26px auto 0; }
.page-hero.dark .lead { color: rgba(251,249,244,0.85); }

.story-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(40px, 6vw, 96px); align-items: center; }
.story-grid .ph, .story-grid img {
  aspect-ratio: 4/5; width: 100%; object-fit: cover;
  border-radius: 240px 240px var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow);
}
.story-grid .body > * + * { margin-top: 1em; }

.kz-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 30px); margin-top: 40px; }
.kz-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.kz-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.kz-item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.kz-item .ph, .kz-item img.cover { aspect-ratio: 3/4; width: 100%; object-fit: cover; display: block; }
.kz-item .kz-item-body { padding: 26px 26px 30px; }
.kz-item h3 { font-size: 26px; margin-bottom: 8px; }
.kz-section.dark .kz-item { background: rgba(251,249,244,0.06); border-color: var(--line-light); color: rgba(251,249,244,0.82); }

/* --- info-cards widget -----------------------------------------------
   Reference content that is described but not booked: add-ons, massage
   oils, the tea list. Rides on .kz-grid/.kz-item; only the extra lines
   inside the card body and the landscape media option live here. */

/* The supplier's tea photography is 3:2, not the 3/4 the treatment cards
   crop to — forcing it portrait would cut the teapot out of frame. The
   placeholder has to match, or the one card still awaiting a photograph
   stands taller than the row it sits in. */
.kz-grid.media-landscape .kz-item img.cover,
.kz-grid.media-landscape .kz-item .ph { aspect-ratio: 3/2; }

/* Price sits above the description, in the display face so it reads as a
   figure rather than as part of the copy. */
.info-price {
  font-family: var(--font-display); font-variation-settings: var(--display-vf);
  font-size: 19px; line-height: 1; color: var(--jade-ink); margin-bottom: 10px;
}
.kz-section.dark .info-price { color: var(--jade-soft); }

/* Ingredients / blend line — small caps, above the prose. */
.info-meta {
  font-size: 11.5px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 12px;
}
.kz-section.dark .info-meta { color: rgba(251,249,244,0.6); }

/* Small print under the grid (terms, availability). */
.info-note {
  max-width: 760px; margin: clamp(34px, 4vw, 52px) auto 0;
  text-align: center; font-size: 14px; color: var(--ink-faint);
}
.kz-section.dark .info-note { color: rgba(251,249,244,0.6); }

/* The lead paragraph under a section heading. */
.kz-head-lead { margin-top: 18px; color: var(--ink-soft); }
.kz-section.dark .kz-head-lead { color: rgba(251,249,244,0.78); }

/* An info card that links somewhere. Hover moves it and warms the border but
   never touches its box model — see the note on hover geometry at the top of
   this file: growing a card re-wraps its text, which reflows the grid, which
   drops the hover and flickers. transform and colour only. */
.kz-item.is-link {
  display: block; color: inherit; text-decoration: none;
  transition: transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.kz-item.is-link:hover { transform: translateY(-4px); border-color: var(--violet); box-shadow: var(--shadow); }
.info-more {
  display: inline-block; margin-top: 16px;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--violet);
}
.info-more .arrow { display: inline-block; transition: transform var(--dur) var(--ease); }
.kz-item.is-link:hover .info-more .arrow { transform: translateX(5px); }
.kz-section.dark .info-more { color: var(--jade-soft); }

/* --- info-cards: the violet field ------------------------------------
   The interior colour of the printed menu (#5A51BC / #756EBB), which is
   what the client's reference sits on. Solid violets with soft light
   blooms, not the aurora — the violet→jade gradient stays off text
   grounds. Kept at the #5A51BC end wherever copy sits: white on it is
   6.4:1, on #756EBB only 4.5:1. */
.kz-section.violet {
  color: rgba(251,249,244,0.86);
  background:
    radial-gradient(60% 40% at 18% 22%, rgba(157,146,222,0.55), transparent 70%),
    radial-gradient(50% 36% at 86% 58%, rgba(140,126,214,0.45), transparent 70%),
    radial-gradient(70% 30% at 40% 96%, rgba(59,46,115,0.45), transparent 70%),
    linear-gradient(170deg, #6A60C2 0%, #5A51BC 48%, #4E45AE 100%);
}
.kz-section.violet .display, .kz-section.violet h2 { color: var(--shell); }
/* jade-soft is 3.2:1 on this violet — too faint for 12px caps. */
.kz-section.violet .eyebrow { color: rgba(251,249,244,0.88); }
.kz-section.violet .kz-head-lead,
.kz-section.violet .info-note { color: rgba(251,249,244,0.84); }

/* --- info-cards: layout 'bottles' ------------------------------------
   The massage-oil list, after the client's sketch: one wide white card per
   oil, a bottle standing proud of the card's top edge, sides alternating.
   The bottle is absolutely positioned and its column is reserved with
   padding, so the text never runs under it. The gap between cards has to
   exceed the overhang, or a bottle pokes into the card above. */
.oil-list {
  /* A card with a name and two lines is ~190px tall; the bottle has to be
     taller than that by the overhang, or it stands inside the card rather
     than proud of it. */
  --bottle-h: clamp(200px, 19vw, 244px);
  --bottle-w: calc(var(--bottle-h) * 226 / 640);  /* dropper-bottle.webp's aspect */
  --overhang: calc(var(--bottle-h) * 0.3);
  --bottle-inset: clamp(22px, 4vw, 58px);
  max-width: 900px; margin: 0 auto;
  display: grid; gap: calc(var(--overhang) + clamp(22px, 2.6vw, 34px));
  padding-top: var(--overhang);
}
.oil-card {
  position: relative;
  background: #fff; border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px -34px rgba(20,14,48,0.55), 0 2px 6px -2px rgba(20,14,48,0.18);
  padding: clamp(26px, 3vw, 38px) clamp(26px, 4vw, 52px);
  padding-right: calc(var(--bottle-w) + var(--bottle-inset) * 2);
  /* Tall enough that the bottle's foot stays inside the card however short
     the copy is — otherwise the overhang varies card to card. */
  min-height: calc(var(--bottle-h) - var(--overhang) + 18px);
}
.oil-card:nth-child(even) {
  padding-right: clamp(26px, 4vw, 52px);
  padding-left: calc(var(--bottle-w) + var(--bottle-inset) * 2);
}
.oil-card.no-bottle, .oil-card.no-bottle:nth-child(even) {
  padding-inline: clamp(26px, 4vw, 52px); min-height: 0;
}
.oil-bottle {
  position: absolute; bottom: 18px; right: var(--bottle-inset);
  height: var(--bottle-h); width: var(--bottle-w);
  object-fit: contain; object-position: bottom;
}
.oil-card:nth-child(even) .oil-bottle { right: auto; left: var(--bottle-inset); }

.oil-name {
  font-family: var(--font-display); font-variation-settings: var(--display-vf);
  font-weight: 400; text-transform: uppercase; letter-spacing: 0.02em;
  font-size: clamp(25px, 3.7vw, 44px); line-height: 1.04;
  color: var(--violet); margin-bottom: 14px;
}
.oil-line {
  font-family: var(--font-serif); font-variation-settings: var(--display-vf);
  font-size: clamp(16px, 1.5vw, 18.5px); line-height: 1.5; color: var(--ink-soft);
}
.oil-line + .oil-line { margin-top: 4px; }
.oil-label { color: var(--ink); }

.kz-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 3vw, 48px); text-align: center; }
.kz-stat .n { font-family: var(--font-display); font-weight: 400; font-size: clamp(44px, 6vw, 76px); line-height: 1; color: var(--ink); }
.kz-stat .l { margin-top: 12px; font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint); }

.kz-steps { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 44px); max-width: 1000px; margin: 0 auto; }
.kz-step { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 4vw, 56px); align-items: start; border-bottom: 1px solid var(--line); padding-bottom: clamp(20px, 3vw, 44px); }
.kz-step .no { font-family: var(--font-display); font-size: clamp(44px, 6vw, 88px); font-weight: 400; line-height: 0.85; color: var(--violet-mid); opacity: .5; }
.kz-step h3 { font-size: clamp(24px, 3vw, 36px); margin-bottom: 10px; }
.kz-step p { color: var(--ink-soft); max-width: 640px; }

/* --- Gallery masonry --------------------------------------------------
   The tile is either an <img> or a bare placeholder <div>, so the aspect
   ratio has to live on a shared class (.shot): without it the placeholder
   has no intrinsic height and the whole column collapses to its captions.
   The four ratios are what gives the masonry its uneven rhythm. */
.kz-mason { columns: 3; column-gap: 20px; }
.kz-mason figure { break-inside: avoid; margin: 0 0 28px; }
.kz-mason .shot {
  width: 100%; display: block; object-fit: cover;
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow);
}
.kz-mason .shot.wide  { aspect-ratio: 4 / 3; }
.kz-mason .shot.sq    { aspect-ratio: 1 / 1; }
.kz-mason .shot.tall  { aspect-ratio: 4 / 5; }
.kz-mason .shot.xtall { aspect-ratio: 2 / 3; }
.kz-mason figcaption { font-size: 12px; letter-spacing: 0.08em; color: var(--ink-faint); padding: 12px 4px 0; }

/* Photos open in the lightbox. The button is the clipping frame, so the image
   inside can scale on hover without spilling past the rounded corner. */
.kz-gal-open {
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in;
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow);
  transition: box-shadow var(--dur) var(--ease);
}
.kz-gal-open .shot { border-radius: 0; box-shadow: none; transition: transform var(--dur-slow) var(--ease); }
.kz-gal-open:hover { box-shadow: var(--shadow-lg); }
.kz-gal-open:hover .shot { transform: scale(1.04); }
.kz-gal-open:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .kz-gal-open:hover .shot { transform: none; } }

.kz-gal-filter { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: clamp(28px, 4vw, 48px); }
.kz-gal-filter .chip { border: 1px solid transparent; cursor: pointer; font-family: var(--font-body); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.kz-gal-filter .chip:hover { border-color: var(--line-strong); }
.kz-gal-filter .chip.is-on { background: var(--violet); color: var(--shell); }
.kz-mason figure[hidden] { display: none; }
.kz-gal-empty { padding: 40px 0; }

/* Lightbox — one per page, reused by every tile. */
.kz-lightbox {
  position: fixed; inset: 0; z-index: 999;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(20px, 5vw, 64px);
  background: rgba(36, 30, 61, 0.9);
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.kz-lightbox[hidden] { display: none; }
.kz-lightbox.in { opacity: 1; }
.kz-lightbox figure { margin: 0; max-width: min(1100px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: 14px; }
.kz-lightbox img { max-width: 100%; max-height: calc(100vh - 190px); object-fit: contain; border-radius: var(--radius-lg); display: block; margin: 0 auto; }
.kz-lightbox figcaption { color: rgba(251, 249, 244, 0.82); text-align: center; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; }
.kz-lb-close {
  position: absolute; top: clamp(14px, 3vw, 30px); right: clamp(14px, 3vw, 30px);
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  background: rgba(251, 249, 244, 0.12); border: 1px solid var(--line-light);
  color: var(--shell); font-size: 26px; line-height: 1;
}
.kz-lb-close:hover { background: rgba(251, 249, 244, 0.22); }

.kz-faq-item { border-top: 1px solid var(--line); }
.kz-faq-item:last-child { border-bottom: 1px solid var(--line); }
.kz-faq-q { width: 100%; text-align: left; background: none; border: 0; padding: 26px 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(21px, 2.2vw, 26px); display: flex; justify-content: space-between; gap: 16px; align-items: center; color: var(--ink); }
.kz-faq-q .pm { color: var(--violet); font-weight: 300; font-size: 26px; transition: transform var(--dur) var(--ease); flex: none; }
.kz-faq-a { max-height: 0; overflow: hidden; transition: max-height var(--dur-slow) var(--ease); }
.kz-faq-a div { padding-bottom: 26px; color: var(--ink-soft); max-width: 68ch; }
.kz-faq-item.open .kz-faq-q .pm { transform: rotate(45deg); }

/* --- Rich text (Code Editor widget: terms, policies, any long-form page) ---
   The widget renders whatever the admin typed, so these style bare elements
   rather than classes — HTMLPurifier strips class attributes out of CMS copy
   on the way to the page. Measure is capped at 74ch: legal copy is read in
   full, and a 1240px line is not. */
.kz-rich { max-width: 74ch; color: var(--ink-soft); }
.kz-rich > * + * { margin-top: 1em; }
.kz-rich h2 {
  font-family: var(--font-display); font-weight: 400; color: var(--ink);
  font-size: clamp(30px, 4vw, 46px); line-height: 1.12; letter-spacing: -0.01em;
}
.kz-rich h2 + p { font-size: 18px; color: var(--ink-soft); }
.kz-rich h3 {
  font-family: var(--font-display); font-weight: 400; color: var(--ink);
  font-size: clamp(19px, 1.9vw, 23px); line-height: 1.3;
  margin-top: 2.2em; padding-top: 1.1em; border-top: 1px solid var(--line);
}
.kz-rich h2 + p + h3 { margin-top: 1.6em; }
.kz-rich ul, .kz-rich ol { padding-left: 1.15em; }
.kz-rich li + li { margin-top: 0.55em; }
.kz-rich li::marker { color: var(--violet); }
.kz-rich strong { color: var(--ink); font-weight: 500; }
.kz-rich a { color: var(--violet); text-underline-offset: 3px; }
.kz-rich em:last-child { color: var(--ink-faint); font-size: 14px; font-style: normal; }

/* CTA band (legacy widget on inner pages) — restyled to match reserve-band */
.cta-band {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, #3B2E73 0%, #4A3A8C 52%, #2E5F76 100%);
  color: var(--shell);
  border-radius: var(--radius-xl); padding: clamp(48px, 7vw, 96px) clamp(28px, 6vw, 76px);
  text-align: center;
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px;
  background: var(--aurora);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.cta-band > * { position: relative; z-index: 2; }
.cta-band .eyebrow { color: var(--jade-soft); }
.cta-band .display, .cta-band h2 { color: var(--shell); }

.kz-slider { position: relative; }
.kz-slide { position: relative; min-height: clamp(460px, 76vh, 760px); display: none; align-items: center; background-size: cover; background-position: center; }
.kz-slide.active { display: flex; }
.kz-slider.single .kz-slide { display: flex; }
.kz-slide::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(36,30,61,0.25), rgba(36,30,61,0.62)); }
.kz-slide .kz-slide-inner { position: relative; z-index: 2; color: var(--shell); max-width: 680px; }
.kz-slide .eyebrow { color: var(--jade-soft); }
.kz-slide h1 { font-size: clamp(42px, 7vw, 96px); font-weight: 400; color: var(--shell); margin: 16px 0 18px; }
.kz-slide p { font-size: clamp(16px, 1.6vw, 20px); opacity: 0.92; max-width: 50ch; }
.kz-slide .btn { margin-top: 30px; }
.kz-slide-dots { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; gap: 9px; }
.kz-slide-dots button { width: 30px; height: 2px; border-radius: 2px; border: 0; background: rgba(255,255,255,0.45); padding: 0; }
.kz-slide-dots button.active { background: var(--jade-soft); }

/* legacy testimonial cards (inner pages) */
.kz-testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 28px); margin-top: 40px; }
.kz-testi { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 34px 32px; display: flex; flex-direction: column; gap: 18px; box-shadow: var(--shadow-sm); }
.kz-testi .stars { color: var(--jade-ink); letter-spacing: 4px; font-size: 13px; }
.kz-testi .quote { font-family: var(--font-serif); font-style: italic; font-size: 21px; line-height: 1.5; color: var(--ink); flex: 1; }
.kz-testi .who { display: flex; align-items: center; gap: 14px; }
.kz-testi .who img, .kz-testi .who .av { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: linear-gradient(135deg, #7D61C7, #30B894); }
.kz-testi .who h5 { font-family: var(--font-body); font-weight: 400; font-size: 14px; color: var(--ink); }
.kz-testi .who span { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--violet); }
.kz-marquee .kz-testi { flex: none; width: min(80vw, 380px); }

.kz-offer { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 280px; display: flex; align-items: flex-end; background-size: cover; background-position: center; }
.kz-offer::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(36,30,61,0.78)); }
.kz-offer .kz-offer-body { position: relative; z-index: 2; padding: 28px; color: var(--shell); }
.kz-offer .kz-offer-body span { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.9; }
.kz-offer .kz-offer-body h3 { font-size: 30px; margin: 6px 0 12px; color: var(--shell); }
.kz-offer .kz-offer-body a { color: var(--jade-soft); letter-spacing: 0.06em; }

.kz-contact-grid { display: grid; grid-template-columns: minmax(0,0.9fr) minmax(0,1.1fr); gap: clamp(28px, 4vw, 60px); align-items: start; }
.kz-contact .info-line { display: flex; gap: 14px; align-items: flex-start; padding: 18px 0; border-top: 1px solid var(--line); }
.kz-contact .info-line:first-child { border-top: 0; }
.kz-contact .info-line .ic { font-size: 18px; color: var(--violet); }
.kz-contact form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: clamp(26px, 3vw, 40px); }
.kz-contact .fld { display: grid; gap: 8px; margin-bottom: 20px; }
.kz-contact .fld label { font-size: 10.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); }
.kz-contact .fld input, .kz-contact .fld textarea { min-width: 0; font: inherit; padding: 13px 15px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--shell); color: var(--ink); width: 100%; min-height: 48px; }
.kz-contact .row2 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 18px; }

.kz-tabs-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(24px, 4vw, 52px); margin-top: 40px; align-items: start; }
.kz-tab-btn { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; padding: 20px 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; margin-bottom: 12px; font-family: var(--font-display); font-weight: 400; font-size: 22px; color: var(--ink); transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.kz-tab-btn.active { background: var(--violet-deep); color: var(--shell); border-color: var(--violet-deep); }
.kz-tab-btn img { width: 40px; height: 40px; object-fit: contain; }
.kz-tab-pane { display: none; }
.kz-tab-pane.active { display: block; }
.kz-tab-pane .lbl { color: var(--violet); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; }
.kz-tab-pane h3 { font-size: clamp(26px, 3vw, 38px); margin: 10px 0 14px; }
.kz-tab-pane ul { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.kz-tab-pane ul li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; }
.kz-tab-pane ul li::before { content: "—"; color: var(--violet); }

.kz-book-grid { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: clamp(28px, 4vw, 60px); align-items: start; }
.kz-book .form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: clamp(26px, 3vw, 42px); }
.kz-book .field { display: grid; gap: 8px; margin-bottom: 20px; }
.kz-book .field label { font-size: 10.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); }
.kz-book .field input, .kz-book .field select, .kz-book .field textarea { min-width: 0; font: inherit; padding: 13px 15px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--shell); color: var(--ink); width: 100%; min-height: 48px; }
.kz-book .field.invalid input, .kz-book .field.invalid select { border-color: #8E2F2F; }
.kz-book .field .err { color: #8E2F2F; font-size: 12.5px; }
.kz-book .row2 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 18px; }
.kz-book fieldset { border: 0; padding: 0; margin: 0 0 20px; }
.kz-book fieldset legend { font-size: 10.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 10px; }
.kz-book .level-opts { display: flex; gap: 10px; flex-wrap: wrap; }
.kz-book .level-opts label { display: flex; align-items: center; gap: 8px; padding: 12px 20px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); font-size: 14px; cursor: pointer; min-height: 48px; }
.kz-book .level-opts input { accent-color: var(--violet); }
.kz-book .level-opts label:has(input:checked) { background: var(--violet-wash); border-color: var(--violet); }
.kz-book .confirm { text-align: center; padding: 20px 0; }
.kz-book .confirm .tick { width: 74px; height: 74px; border-radius: 50%; background: #DCF1EA; display: grid; place-items: center; margin: 0 auto 20px; font-size: 34px; color: var(--jade-ink); }
.kz-book .summary { text-align: left; background: var(--sand); border-radius: var(--radius-lg); padding: 26px; margin: 26px auto 0; max-width: 420px; }
.kz-book .summary dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; margin: 0; }
.kz-book .summary dt { color: var(--ink-faint); font-size: 14px; }
.kz-book .summary dd { margin: 0; text-align: right; color: var(--ink); }
.kz-book .info-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px; margin-bottom: 20px; }
.kz-book .info-card h3 { font-size: 22px; margin-bottom: 14px; }
.kz-book .info-line { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line); font-size: 15px; }
.kz-book .info-line:first-of-type { border-top: 0; }
.kz-book .map, .kz-book .map iframe { aspect-ratio: 4/3; width: 100%; border-radius: var(--radius-lg); border: 0; display: block; }

.kz-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 30px); margin-top: 40px; }
.kz-blog-card .ph, .kz-blog-card img { aspect-ratio: 16/10; width: 100%; object-fit: cover; border-radius: var(--radius-lg); }
.kz-blog-card .meta { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--violet); margin: 16px 0 6px; }
.kz-blog-card h3 { font-size: 24px; }

/* =========================================================================
   RESPONSIVE  —  1024 / 900 / 720 / 560
   ========================================================================= */
@media (max-width: 1180px) {
  .nav-mega { grid-template-columns: 1fr; }
  .nav-mega-feature { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; padding-top: 26px; }
  .nav-mega-feature .fig { display: none; }
}

@media (max-width: 1024px) {
  .ritual-grid { grid-template-columns: repeat(2, 1fr); }
  /* Only widen a trailing card when it would otherwise sit alone on its row
     (3 cards → yes; 2 or 4 cards → no). */
  .ritual-grid > :last-child:nth-child(odd) { grid-column: span 2; }
  .ritual-grid > :last-child:nth-child(odd) .ritual-fig { aspect-ratio: 21/9; }
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
  .footer-grid > :last-child { grid-column: 1 / -1; border-top: 1px solid var(--line-light); padding-top: 32px; }
}

@media (max-width: 960px) {
  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: block; }
  .statement-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero-reserve form { grid-template-columns: minmax(0,1fr) minmax(0,1fr); border-radius: var(--radius-lg); padding: 10px; }
  .hr-field + .hr-field::before { display: none; }
  .hr-field { border-top: 1px solid var(--line); }
  .hr-field:nth-child(1), .hr-field:nth-child(2) { border-top: 0; }
  .hero-reserve .btn { grid-column: 1 / -1; width: 100%; margin-top: 6px; }
}

@media (max-width: 900px) {
  .kz-testi-grid, .kz-blog-grid { grid-template-columns: 1fr 1fr; }
  .kz-contact-grid, .kz-tabs-grid, .kz-book-grid { grid-template-columns: 1fr; }
  .story-grid { grid-template-columns: 1fr; }
  .kz-grid, .kz-grid.cols-4, .kz-grid.cols-2 { grid-template-columns: 1fr 1fr; }
  .kz-stats, .proof-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .kz-mason { columns: 2; }
  .cat-row { grid-template-columns: 44px 1fr auto; }
  .cat-desc { display: none; }
}

@media (max-width: 720px) {
  .rituals[id], .kz-anchor { scroll-margin-top: 78px; }
  .ritual-grid { grid-template-columns: 1fr; }
  .ritual-grid > :last-child:nth-child(odd) { grid-column: auto; }
  .ritual-grid > :last-child:nth-child(odd) .ritual-fig { aspect-ratio: 4/5; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
  .kz-topbar-inner { flex-direction: column; gap: 4px; font-size: 10.5px; letter-spacing: 0.12em; text-align: center; }
  .kz-topbar .sep { display: none; }
  .scroll-hint { display: none; }
}

@media (max-width: 560px) {
  .kz-testi-grid, .kz-blog-grid { grid-template-columns: 1fr; }
  .kz-contact .row2, .kz-book .row2 { grid-template-columns: 1fr; }
  .kz-grid, .kz-grid.cols-4, .kz-grid.cols-2 { grid-template-columns: 1fr; }
  /* A smaller bottle buys the name its line back: at the desktop size
     "ENERGIZING OIL" breaks in two on a 390px screen. */
  .oil-list { --bottle-h: 140px; --bottle-inset: 16px; }
  .oil-card, .oil-card:nth-child(even) { padding-block: 22px 24px; }
  .oil-card { padding-left: 22px; }
  .oil-card:nth-child(even) { padding-right: 22px; }
  .oil-name { font-size: 23px; margin-bottom: 10px; }
  .oil-line { font-size: 15.5px; }
  .kz-mason { columns: 1; }
  .kz-step { grid-template-columns: 1fr; gap: 8px; }
  .hero-reserve form { grid-template-columns: minmax(0,1fr); }
  .hr-field:nth-child(2) { border-top: 1px solid var(--line); }
  .proof-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { justify-content: flex-start; }
  .btn { width: 100%; }
  .hero-actions .btn { width: auto; flex: 1 1 auto; }
}

/* =========================================================================
   BOOKING ENGINE — stepped form, live slot picker, running total
   -------------------------------------------------------------------------
   Four numbered steps down the left rail so a form this long still reads as
   a sequence. The slot grid is the one place the guest is choosing from real
   diary data, so it gets the most contrast; everything else stays quiet.
   Aurora rule holds — the gradient appears only on the step rail hairline.
   ========================================================================= */

.kz-book .bk-alert {
  background: #F9ECEC; border: 1px solid rgba(142,47,47,0.32); color: #8E2F2F;
  border-radius: var(--radius); padding: 13px 18px; margin-bottom: 24px; font-size: 14px;
}
.kz-book .field .opt { text-transform: none; letter-spacing: 0; font-weight: 400; }

/* --- Numbered steps ------------------------------------------------------ */
.kz-book .bk-step { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 18px; position: relative; }
.kz-book .bk-step + .bk-step { margin-top: 6px; }
.kz-book .bk-step-n {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-strong); background: #fff;
  font-size: 12.5px; font-weight: 600; color: var(--ink-soft);
  position: relative; z-index: 1;
}
/* Hairline connecting the steps, carrying the brand gradient. */
.kz-book .bk-step:not(:last-of-type)::before {
  content: ""; position: absolute; left: 15px; top: 32px; bottom: -6px; width: 1px;
  background: var(--aurora); opacity: 0.4;
}
.kz-book .bk-step-body > :last-child { margin-bottom: 22px; }

/* --- Slot picker --------------------------------------------------------- */
.kz-book .bk-slots-field { margin-bottom: 0; }
.kz-book .bk-slots {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px;
  min-height: 52px;
}
.kz-book .bk-slot {
  font: inherit; font-size: 14px; font-variant-numeric: tabular-nums;
  padding: 13px 8px; min-height: 48px; cursor: pointer; text-align: center;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: #fff; color: var(--ink);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
              color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.kz-book .bk-slot:hover { border-color: var(--violet); transform: translateY(-1px); }
.kz-book .bk-slot:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.kz-book .bk-slot.is-selected {
  background: var(--violet); border-color: var(--violet); color: #fff; font-weight: 500;
  box-shadow: 0 12px 26px -14px rgba(107,79,192,0.9);
}
.kz-book .bk-slots-hint {
  grid-column: 1 / -1; margin: 0; padding: 15px 0;
  font-size: 14px; color: var(--ink-faint); line-height: 1.6;
}
.kz-book .bk-slots-hint.empty { color: var(--ink-soft); }
.kz-book .bk-slots-hint.loading::after {
  content: ""; display: inline-block; width: 12px; height: 12px; margin-left: 9px;
  vertical-align: -1px; border: 2px solid var(--line-strong); border-top-color: var(--violet);
  border-radius: 50%; animation: bk-spin 0.7s linear infinite;
}
@keyframes bk-spin { to { transform: rotate(360deg); } }
.kz-book .bk-slots-field.invalid .bk-slots { outline: 1px solid #8E2F2F; outline-offset: 6px; border-radius: var(--radius); }

/* --- Running total ------------------------------------------------------- */
.kz-book .bk-quote {
  background: var(--sand); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 22px 26px; margin: 28px 0 24px;
}
/* --- Booking: add-on tick-boxes --------------------------------------
   Chosen in step 1, because each one lengthens the appointment and so has
   to be picked before the slot grid is fetched. Selection is shown with
   border and background only — never a size change, or ticking one would
   reflow the grid under the pointer. */
.kz-book .bk-addons { border: 0; padding: 0; margin: 22px 0 0; }
.kz-book .bk-addons legend {
  padding: 0; margin-bottom: 12px;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-faint);
}
.kz-book .bk-addon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kz-book .bk-addon {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.kz-book .bk-addon:hover { border-color: var(--violet-mid); }
.kz-book .bk-addon:has(input:checked) { border-color: var(--violet); background: var(--violet-wash); }
/* :has() is unsupported in older Safari; the checkbox itself still shows state. */
.kz-book .bk-addon input { margin-top: 3px; accent-color: var(--violet); flex: none; }
.kz-book .bk-addon-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kz-book .bk-addon-name { font-size: 14px; line-height: 1.3; color: var(--ink); }
.kz-book .bk-addon-meta {
  font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--jade-ink); font-variant-numeric: tabular-nums;
}
@media (max-width: 620px) {
  .kz-book .bk-addon-grid { grid-template-columns: 1fr; }
}

.kz-book .bk-quote-row {
  display: flex; justify-content: space-between; gap: 18px; align-items: baseline;
  padding: 7px 0; font-size: 14.5px; color: var(--ink-soft);
}
.kz-book .bk-quote-row span:last-child { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kz-book .bk-quote-row:first-child span:first-child { color: var(--ink); font-weight: 500; }
.kz-book .bk-quote-total {
  display: flex; justify-content: space-between; gap: 18px; align-items: baseline;
  margin-top: 12px; padding-top: 15px; border-top: 1px solid var(--line-strong);
}
.kz-book .bk-quote-total span {
  font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint);
}
.kz-book .bk-quote-total strong {
  font-family: var(--font-display); font-weight: 400; font-size: 28px;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.kz-book .bk-quote-note { margin: 12px 0 0; font-size: 12.5px; color: var(--ink-faint); }

.kz-book .bk-submit { width: 100%; justify-content: center; font-size: 16px; padding: 15px; }

@media (max-width: 560px) {
  .kz-book .bk-step { grid-template-columns: 26px minmax(0,1fr); gap: 12px; }
  .kz-book .bk-step-n { width: 24px; height: 24px; font-size: 11px; }
  .kz-book .bk-step:not(:last-of-type)::before { left: 12px; top: 26px; }
  .kz-book .bk-slots { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
  .kz-book .bk-submit { width: 100%; }
}

/* Treatment page "reserve" card — pick the duration here, the time next. */
.bc-tiers { display: grid; gap: 8px; }
.bc-tier {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.bc-tier input { accent-color: var(--violet); margin-right: 2px; }
.bc-tier .per { flex: 1 1 auto; }
.bc-tier:hover { border-color: var(--violet); }
.bc-tier:has(input:checked) { border-color: var(--violet); background: var(--violet-wash); }

/* Treatment tagline — the short "Renewed, Focused, and Grounded" line the
   printed menu sets under each name. Kept clear of the description so the two
   never read as one run-on sentence. */
.xc-tagline {
  font-family: var(--font-serif); font-style: italic;
  font-size: 15px; line-height: 1.35; color: var(--violet);
  margin: 6px 0 0;
}

/* Trademark sign in a treatment name — small and raised, as the menu prints it.
   The display face draws a full-size glyph otherwise. */
.tm { font-size: .42em; vertical-align: .75em; letter-spacing: 0; font-weight: 400; }