/* ==========================================================================
   PARADISE — the hotelmassageamsterdam theme.
   Strict central axis, symmetric throughout. Playfair Display + Inter on a
   neutral near-black field. Every colour is a token so the build's per-site
   palette substitution has something to bind to.

   Two :root blocks, deliberately:
     1. PALETTE — the build rewrites the value of every token named in
        sites/<id>.json theme.palette / theme.fonts / theme.max / theme.reading.
        Token NAMES and formatting are left alone, so keep them stable.
     2. DERIVED — computed from block 1. Never substituted, so a palette swap
        cannot drop the gradient, the alpha scale, the type scale or the rhythm.

   The legacy token names (--ink, --muted, --rule, --cloud, --sky-*, --faint)
   sit in block 1 too: the shared templates this theme inherits — prices, faq,
   about, contact, booking, guides, districts, legal, 404 — carry them in inline
   styles, so they have to resolve to something correct on a dark ground.
   ========================================================================== */

/* ---- 1. PALETTE (build-substituted) ------------------------------------- */
:root {
  /* grounds — area-weighted from the reference. #09090B is 63.5% of the page. */
  --ink-0: #09090B;
  --ink-1: #0E0E11;
  --ink-2: #131316;
  --ink-3: #17171B;

  /* hairlines */
  --line: #1C1C20;
  --line-2: rgba(255,255,255,0.06);
  --line-3: rgba(255,255,255,0.10);

  /* text */
  --t1: #EFECE7;
  --t2: #989081;
  --t3: rgba(255,255,255,0.65);
  --t4: rgba(255,255,255,0.38);

  /* champagne — CTA only, plus micro ticks. Never a field. */
  --champ: #C7A56B;
  --champ-lo: #A17F45;
  --champ-hi: #DBC194;

  /* legacy names, bound to the paradise values, for the inherited templates */
  --ink: #EFECE7;
  --muted: #989081;
  --faint: rgba(255,255,255,0.38);
  --rule: #1C1C20;
  --cloud: #09090B;
  --sky-1: #0E0E11;
  --sky-2: #131316;
  --sky-3: #131316;
  --white: #EFECE7;
  --white-rgb: 239,236,231;
  --gold: #C7A56B;
  --header-bg: rgba(9,9,11,0.92);
  --wa: #25D366;
  --wa-dark: #1ea857;

  --serif: 'Playfair Display', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --max: 1240px;
  --reading: 700px;
}

/* ---- 2. DERIVED (not substituted) --------------------------------------- */
:root {
  --display: var(--serif);
  --body: var(--sans);
  --maxw: var(--max);
  --narrow: 824px;

  --champ-grad: linear-gradient(135deg, var(--champ-lo), var(--champ), var(--champ-hi));

  --white-0:  rgba(var(--white-rgb, 255,255,255), 0);
  --white-12: rgba(var(--white-rgb, 255,255,255), 0.12);
  --white-50: rgba(var(--white-rgb, 255,255,255), 0.5);
  --white-60: rgba(var(--white-rgb, 255,255,255), 0.6);
  --white-85: rgba(var(--white-rgb, 255,255,255), 0.85);
  --white-90: rgba(var(--white-rgb, 255,255,255), 0.9);
  --white-92: rgba(var(--white-rgb, 255,255,255), 0.92);

  --fs-micro: 11px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-h3: clamp(19px, 2.2vw, 22px);
  --fs-h2: clamp(24px, 3.2vw, 30px);
  --fs-h1: clamp(31px, 5.1vw, 48px);

  /* rhythm — everything is a multiple of four */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  --sec: clamp(72px, 8.4vw, 128px);
  --gut: clamp(20px, 4.2vw, 56px);
  --head-h: 72px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---- reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { max-width: 100%; overflow-x: clip; }
body {
  margin: 0;
  background: var(--ink-0);
  color: var(--t1);
  font: 400 var(--fs-base)/1.7 var(--body);
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; margin: 0; cursor: pointer; }
h1, h2, h3, h4, h5, p, figure, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; }
table { width: 100%; border-collapse: collapse; }
[hidden] { display: none !important; }
::selection { background: rgba(199,165,107,0.26); color: #fff; }
:focus-visible { outline: 1px solid var(--champ); outline-offset: 3px; }
[id] { scroll-margin-top: calc(var(--head-h) + var(--s5)); }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  color: var(--t1);
  letter-spacing: -0.008em;
  line-height: 1.18;
}
h1 { font-size: var(--fs-h1); letter-spacing: -0.012em; text-wrap: balance; }
h2 { font-size: var(--fs-h2); line-height: 1.22; text-wrap: balance; }
h3 { font-size: var(--fs-h3); line-height: 1.3; }
h4 { font-size: var(--fs-lg); }
em { font-style: italic; color: var(--champ-hi); }
p { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 500; color: var(--t1); }

/* ---- layout primitives --------------------------------------------------- */
.container,
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.wrap--narrow { max-width: var(--narrow); }
.reading { max-width: var(--reading); margin-inline: auto; }
section { padding-block: var(--sec); }
.section { padding-block: var(--sec); position: relative; }
.section + .section { border-top: 1px solid var(--line); }
hr.rule, .rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* the orthodox device: every section header is centred on one axis */
.shead { text-align: center; margin-bottom: var(--s8); }
.shead--tight { margin-bottom: var(--s7); }
.eyebrow, .label, .label-top {
  font: 500 var(--fs-micro)/1 var(--body);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--t2);
}
.eyebrow {
  display: inline-flex; flex-direction: column; align-items: center; gap: var(--s3);
}
.eyebrow::after { content: ""; width: 26px; height: 1px; background: var(--champ-grad); opacity: .85; }
.shead h2, .shead h1 { margin-top: var(--s5); }
.shead .lede, .lede {
  color: var(--t2);
  font-size: var(--fs-md);
  line-height: 1.75;
}
.shead .lede { margin: var(--s5) auto 0; max-width: 60ch; }

/* ---- buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 50px; padding-inline: 26px; border-radius: 2px;
  font: 500 var(--fs-sm)/1 var(--body); letter-spacing: 0.11em; text-transform: uppercase;
  white-space: nowrap; position: relative; isolation: isolate; text-align: center;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.btn--champ, .btn-primary {
  background: var(--champ-grad); color: #17130B;
  box-shadow: 0 1px 0 rgba(255,255,255,.22) inset;
}
.btn--champ:hover, .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 10px 30px -14px rgba(199,165,107,.55);
}
.btn--ghost, .btn-ghost { border: 1px solid var(--line-3); color: var(--t1); }
.btn--ghost:hover, .btn-ghost:hover { border-color: rgba(239,236,231,.34); transform: translateY(-1px); }
.btn--sm { height: 40px; padding-inline: 18px; font-size: var(--fs-xs); letter-spacing: 0.1em; }

.tlink {
  font: 500 var(--fs-xs)/1 var(--body); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--champ); display: inline-flex; align-items: center; gap: 10px;
  padding-bottom: 6px; border-bottom: 1px solid rgba(199,165,107,.3);
  transition: border-color .4s var(--ease), gap .4s var(--ease);
}
.tlink:hover { border-color: var(--champ); gap: 15px; }

/* ---- grain + photographic plates ---------------------------------------- */
.svgdefs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.grain {
  position: absolute; inset: -2%; width: 104%; height: 104%;
  mix-blend-mode: overlay; opacity: .3; pointer-events: none; z-index: 4;
}

/* Photo slots carry an actual photograph. The gradient beneath is only what
   shows through while the image loads — the mockup's art-direction slates,
   crop labels and silhouette stand-ins are gone. */

/* ---- utility bar --------------------------------------------------------- */
.util { background: var(--ink-1); border-bottom: 1px solid var(--line); position: relative; z-index: 40; }
.util__in {
  display: flex; align-items: center; justify-content: center; gap: var(--s5);
  min-height: 38px; padding-block: 9px; flex-wrap: wrap;
  width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut);
  font: 400 var(--fs-xs)/1.5 var(--body); color: var(--t2); letter-spacing: 0.06em; text-align: center;
}
.util__in span { display: inline-flex; align-items: center; gap: 9px; flex-wrap: wrap; justify-content: center; }
.util__in a {
  color: var(--t1); border-bottom: 1px solid rgba(199,165,107,.34); padding-bottom: 1px;
  transition: border-color .35s var(--ease), color .35s var(--ease);
}
.util__in a:hover { border-bottom-color: var(--champ); }
.dot { width: 3px; height: 3px; border-radius: 50%; background: var(--champ); flex: none; }
.util__lead, .util__mid { display: none; }
@media (min-width: 700px) { .util__lead { display: inline-flex; } }
@media (min-width: 1024px) { .util__mid { display: inline-flex; } }

/* ---- header: symmetric about the page axis ------------------------------- */
.site-header {
  /* above the open menu overlay, so the toggle that opened it stays reachable */
  position: sticky; top: 0; z-index: 70;
  background: var(--header-bg);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-bottom: 1px solid var(--line);
}
.site-header .inner {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: var(--s3); min-height: var(--head-h);
  width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut);
}
.nav__start { display: flex; align-items: center; justify-content: flex-start; }
.nav__end { display: flex; align-items: center; justify-content: flex-end; }

/* centred wordmark — the orthodox nav is symmetric about the page axis */
.mark { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; min-width: 0; max-width: 100%; }
.mark svg { width: 22px; height: 17px; opacity: .9; }
.mark__t {
  font: 400 clamp(13px, 2vw, 17px)/1 var(--display); letter-spacing: 0.06em; color: var(--t1);
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.mark__s { font: 400 9px/1 var(--body); letter-spacing: 0.28em; text-transform: uppercase; color: var(--t2); }
.foot__top .mark svg { width: 30px; height: 23px; }

.nav__write {
  font: 400 var(--fs-xs)/1 var(--body); letter-spacing: 0.15em; text-transform: uppercase; color: var(--t3);
  padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.16);
  transition: color .35s var(--ease), border-color .35s var(--ease);
}
.nav__write:hover { color: var(--t1); border-bottom-color: rgba(199,165,107,.6); }

.nav-toggle {
  width: 40px; height: 40px; margin-left: -10px; padding: 0;
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle i { display: block; height: 1px; background: var(--t1); transition: transform .4s var(--ease); }
.nav-toggle i:nth-child(1) { width: 20px; }
.nav-toggle i:nth-child(2) { width: 13px; }

/* the link rail: one row, centred on the axis, under the wordmark */
.rail { border-top: 1px solid var(--line-2); }
.site-header nav {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: var(--s5) var(--s6); padding-block: 14px;
  width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut);
}
.site-header nav a {
  font: 400 var(--fs-xs)/1 var(--body); letter-spacing: 0.15em; text-transform: uppercase; color: var(--t3);
  padding-block: 6px; border-bottom: 1px solid transparent;
  transition: color .35s var(--ease), border-color .35s var(--ease);
}
.site-header nav a:hover { color: var(--t1); border-bottom-color: rgba(199,165,107,.6); }
.site-header nav a.is-lead { color: var(--t1); }
.site-header nav a.is-lead::before {
  content: ""; display: inline-block; width: 9px; height: 1px; margin-right: 9px;
  vertical-align: middle; background: var(--champ-grad);
}

@media (max-width: 1023px) {
  .rail { border-top: 0; }
  .site-header nav { display: none; }
  .site-header nav.open {
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--s2);
    position: fixed; inset: 0; z-index: 60;
    background: rgba(9,9,11,.985); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    padding: calc(var(--head-h) + var(--s8)) var(--gut) var(--s9); overflow-y: auto; text-align: center;
  }
  .site-header nav.open a {
    font: 400 clamp(20px, 5.4vw, 28px)/1.6 var(--display);
    letter-spacing: 0.01em; text-transform: none; color: var(--t1); border-bottom: 0;
  }
  .site-header nav.open a:hover { color: var(--champ-hi); }
  .site-header nav.open a.is-lead::before { display: none; }
}
@media (min-width: 1024px) {
  .nav-toggle { display: none; }
  .nav__write { display: none; }
}

/* ---- age bar ------------------------------------------------------------- */
body.age-confirmed .age-bar { display: none !important; }
.age-bar {
  position: fixed; left: 0; right: 0; top: 0; z-index: 250;
  background: var(--ink-2); color: var(--t2); border-bottom: 1px solid var(--line);
  padding: 12px var(--gut); display: flex; align-items: center; justify-content: center;
  gap: 18px; flex-wrap: wrap; text-align: center;
  font: 400 var(--fs-xs)/1.6 var(--body); letter-spacing: 0.04em;
}
.age-bar span { max-width: 720px; }
.age-bar button {
  background: var(--champ-grad); color: #17130B; border: 0; padding: 9px 20px; border-radius: 2px;
  font: 500 10px/1 var(--body); letter-spacing: 0.2em; text-transform: uppercase;
  flex-shrink: 0; -webkit-tap-highlight-color: transparent;
}
.age-bar button:hover { opacity: .9; }
.age-bar-open { padding-top: 62px; }
.age-bar-open .site-header { top: 62px; }
@media (max-width: 720px) {
  .age-bar { flex-direction: column; gap: 10px; padding: 10px 16px; }
  .age-bar-open { padding-top: 108px; }
  .age-bar-open .site-header { top: 108px; }
}

/* ==========================================================================
   HERO — the headline sits in the dark, on the axis
   ========================================================================== */
.hero {
  position: relative; overflow: hidden; isolation: isolate; text-align: center;
  padding: clamp(72px, 10vw, 132px) var(--gut) clamp(64px, 9vw, 116px);
  background: var(--ink-0);
}
.hero__field { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero__wash {
  position: absolute; inset: 0;
  background:
    radial-gradient(118% 74% at 50% 8%, rgba(226,220,208,.13), transparent 62%),
    radial-gradient(52% 46% at 18% 28%, rgba(152,144,129,.10), transparent 72%),
    radial-gradient(64% 54% at 84% 40%, rgba(132,127,120,.12), transparent 74%),
    linear-gradient(180deg, #17171B 0%, #111115 40%, #0B0B0D 72%, var(--ink-0) 100%);
}
.hero__rim {
  position: absolute; inset: 0; mix-blend-mode: screen;
  background: linear-gradient(100deg, transparent 34%, rgba(236,230,219,.09) 45%, rgba(236,230,219,.02) 53%, transparent 62%);
}
.hero__vig { position: absolute; inset: 0; background: radial-gradient(80% 68% at 50% 30%, transparent 36%, rgba(0,0,0,.58) 100%); }
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,.18) 26%, rgba(0,0,0,.52) 62%, rgba(9,9,11,.94) 86%, var(--ink-0) 100%);
}
.hero > *:not(.hero__field) { position: relative; z-index: 2; }
.hero .label-top, .hero__eyebrow {
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  font: 500 var(--fs-micro)/1 var(--body); letter-spacing: 0.24em; text-transform: uppercase; color: var(--t2);
  margin-bottom: var(--s6); max-width: 100%;
}
.hero h1 { max-width: 19ch; margin: 0 auto; }
.hero .lede { margin: var(--s5) auto 0; max-width: 54ch; color: var(--t3); }
.hero__cta { display: flex; justify-content: center; gap: var(--s3); margin-top: var(--s7); flex-wrap: wrap; }
.hero__meta {
  margin-top: var(--s7); display: flex; justify-content: center; gap: var(--s3) var(--s5); flex-wrap: wrap;
  font: 400 var(--fs-xs)/1.5 var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--t4);
}
.hero-small { padding-block: clamp(56px, 7vw, 92px) clamp(40px, 5vw, 64px); }
.hero-small h1 { max-width: 22ch; }

/* ---- assurance strip ----------------------------------------------------- */
.strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.strip__in { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); }
.strip__cell { background: var(--ink-2); padding: var(--s6) var(--s5); text-align: center; }
.strip__k { font: 400 var(--fs-xl)/1.2 var(--display); color: var(--t1); }
.strip__v { margin-top: var(--s2); font: 400 var(--fs-xs)/1.5 var(--body); letter-spacing: 0.15em; text-transform: uppercase; color: var(--t2); }
@media (min-width: 720px) { .strip__in { grid-template-columns: repeat(3, 1fr); } }

/* ==========================================================================
   THE RUN — one continuous numbered list. Techniques and companion formats
   are interleaved, unlabelled, and sit on the same axis, because they are the
   same offer read at two lengths.
   ========================================================================== */
.run { max-width: var(--narrow); margin-inline: auto; border-top: 1px solid var(--line); }
.entry {
  display: grid; grid-template-columns: 40px 1fr auto; align-items: baseline; gap: var(--s4);
  padding-block: var(--s4); border-bottom: 1px solid var(--line-2);
  transition: background .5s var(--ease);
}
a.entry:hover { background: var(--ink-1); }
.entry__n { font: 400 var(--fs-xs)/1.9 var(--display); color: var(--champ); opacity: .72; font-variant-numeric: tabular-nums; }
.entry__t { font: 400 var(--fs-md)/1.5 var(--display); color: var(--t1); }
.entry__v { font: 400 var(--fs-sm)/1.9 var(--body); color: var(--t2); white-space: nowrap; font-variant-numeric: tabular-nums; }
a.entry:hover .entry__t { color: var(--champ-hi); }
.run__foot { margin-top: var(--s7); text-align: center; }

/* the house position sits on a raised surface, on the axis */
.quote {
  margin: var(--s9) auto 0; max-width: 760px; text-align: center;
  background: var(--ink-2); border: 1px solid var(--line);
  padding: var(--s7) clamp(20px, 3vw, 40px);
}
.quote p {
  font: 400 clamp(19px, 2.5vw, 25px)/1.55 var(--display); font-style: italic; color: var(--t1);
  max-width: 34ch; margin-inline: auto; text-wrap: balance;
}
.quote cite {
  display: block; margin-top: var(--s5); font: 400 var(--fs-micro)/1 var(--body); font-style: normal;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--t2);
}

/* ---- long-form prose: centred headings, left-aligned measure ------------- */
.prose { max-width: var(--reading); margin-inline: auto; color: var(--t2); font-size: var(--fs-md); line-height: 1.85; }
.prose h2 { text-align: center; margin: var(--s8) 0 var(--s5); font-size: var(--fs-h3); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: var(--s6) 0 var(--s3); }
.prose p { margin-bottom: 1.3em; }
.prose a { color: var(--t1); border-bottom: 1px solid rgba(199,165,107,.34); }
.prose a:hover { border-bottom-color: var(--champ); }
.prose strong { color: var(--t1); font-weight: 500; }

/* ==========================================================================
   THERAPIST GRIDS
   ========================================================================== */
.t-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s5) var(--s4); }
.t-card {
  display: block; position: relative; background: var(--ink-2);
  border: 1px solid var(--line); padding: 8px 8px 0;
  transition: background .5s var(--ease), border-color .5s var(--ease);
}
.t-card:hover { background: var(--ink-3); border-color: var(--line-3); }
.t-card .photo {
  position: relative; overflow: hidden; aspect-ratio: 3/4; isolation: isolate;
  background: linear-gradient(168deg, #1B1B1F 0%, #151519 34%, #0D0D10 74%, var(--ink-0) 100%);
}
.t-card .photo::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.055);
  background: linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,.12) 40%, transparent 68%);
}
.t-card .photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.t-card:hover .photo img { transform: scale(1.03); }
.t-card .name { font: 400 16px/1.3 var(--display); color: var(--t1); margin-top: var(--s4); text-align: center; }
.t-card .meta {
  margin-top: 6px; padding-bottom: var(--s5); text-align: center;
  font: 400 var(--fs-xs)/1.5 var(--body); letter-spacing: 0.1em; color: var(--t2);
}
.t-card::after {
  content: ""; position: absolute; left: 50%; bottom: 14px; width: 0; height: 1px;
  background: var(--champ-grad); transform: translateX(-50%); transition: width .6s var(--ease);
}
.t-card:hover::after { width: 28px; }
.grid-foot { margin-top: var(--s9); text-align: center; }
.grid-foot p { color: var(--t2); font-size: var(--fs-sm); margin-bottom: var(--s5); }
@media (min-width: 620px) { .t-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s6) var(--s5); } }
@media (min-width: 900px) { .t-grid { grid-template-columns: repeat(4, 1fr); } }

/* service cards (inherited /services/, /booking/ and district pages) */
.s-grid { display: grid; grid-template-columns: 1fr; gap: var(--s6); }
.s-card { border-top: 1px solid var(--line-3); padding-top: var(--s4); display: block; }
.s-card .num { font: 400 var(--fs-xs)/1 var(--display); letter-spacing: 0.2em; color: var(--champ); opacity: .8; }
.s-card .nm { font: 400 var(--fs-xl)/1.3 var(--display); color: var(--t1); margin: var(--s2) 0 var(--s3); }
.s-card .ds { font-size: var(--fs-sm); line-height: 1.7; color: var(--t2); }
a.s-card:hover .nm { color: var(--champ-hi); }
@media (min-width: 620px) { .s-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .s-grid { grid-template-columns: repeat(3, 1fr); } }

/* "you may also like" */
.like-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4); }
.like-card { display: block; }
.like-photo {
  position: relative; aspect-ratio: 3/4; overflow: hidden; border: 1px solid var(--line);
  background: linear-gradient(168deg, #1B1B1F 0%, #151519 34%, #0D0D10 74%, var(--ink-0) 100%);
}
.like-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.like-card:hover .like-photo img { transform: scale(1.04); }
.like-name { margin-top: var(--s3); font: 400 var(--fs-md)/1.3 var(--display); color: var(--t1); }
.like-meta { margin-top: 3px; font: 400 var(--fs-xs)/1 var(--body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--t2); }
@media (min-width: 720px) { .like-grid { grid-template-columns: repeat(5, 1fr); } }

/* ==========================================================================
   THE LADDER
   ========================================================================== */
.ladder {
  max-width: 760px; margin-inline: auto; background: var(--ink-2);
  border: 1px solid var(--line); padding: var(--s5) clamp(18px, 3vw, 40px) var(--s7);
}
.row {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: var(--s4);
  padding-block: var(--s5); border-bottom: 1px solid var(--line-2);
}
.row__k { font: 400 var(--fs-lg)/1.35 var(--display); color: var(--t1); }
.row__s { display: block; font: 400 var(--fs-sm)/1.6 var(--body); color: var(--t2); margin-top: 5px; max-width: 46ch; }
.row__v { font: 700 var(--fs-xl)/1 var(--display); color: var(--t1); font-variant-numeric: tabular-nums; white-space: nowrap; }
.row__v small { font: 400 var(--fs-xs)/1 var(--body); color: var(--t2); letter-spacing: 0.1em; margin-left: 4px; }
/* the long booking is the one the ladder is built toward — it carries the tick */
.ladder .row:last-of-type {
  background: var(--ink-3); padding-inline: var(--s5); border-bottom-color: transparent; position: relative;
}
.ladder .row:last-of-type::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--champ-grad); }
.ladder .row:last-of-type .row__k { font-size: var(--fs-xl); }
.ladder .row:last-of-type .row__v { font-size: var(--fs-2xl); }
.ladder__note { margin-top: var(--s7); text-align: center; color: var(--t2); font-size: var(--fs-sm); line-height: 1.78; }
.ladder__note strong { font-weight: 400; color: var(--t1); }
.ladder__note li { list-style: none; margin-bottom: 10px; }
.ladder__cta { margin-top: var(--s7); text-align: center; }
.pay { margin-top: var(--s7); display: flex; justify-content: center; gap: var(--s2); flex-wrap: wrap; }
.chip {
  border: 1px solid var(--line); padding: 9px 16px; border-radius: 2px;
  font: 400 var(--fs-xs)/1 var(--body); letter-spacing: 0.15em; text-transform: uppercase; color: var(--t3);
}

/* ==========================================================================
   COVERAGE
   ========================================================================== */
.districts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.district { background: var(--ink-2); padding: var(--s5) var(--s4); text-align: center; transition: background .5s var(--ease); }
a.district:hover { background: var(--ink-3); }
.district__n { font: 400 var(--fs-md)/1.35 var(--display); color: var(--t1); }
a.district:hover .district__n { color: var(--champ-hi); }
.coverage__note { margin-top: var(--s7); text-align: center; color: var(--t2); font-size: var(--fs-sm); max-width: 58ch; margin-inline: auto; }
@media (min-width: 620px) { .districts { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .districts { grid-template-columns: repeat(4, 1fr); } }

/* ==========================================================================
   BOOKING BRIEF
   ========================================================================== */
.brief {
  max-width: 640px; margin-inline: auto; background: var(--ink-2); border: 1px solid var(--line);
  padding: clamp(28px, 4vw, 48px) clamp(20px, 3.4vw, 44px);
}
.brief__h { text-align: center; font: 500 var(--fs-micro)/1 var(--body); letter-spacing: 0.24em; text-transform: uppercase; color: var(--t2); }
.brief__list { margin-top: var(--s6); }
.brief__row { padding-block: var(--s4); border-bottom: 1px solid var(--line-2); text-align: center; }
.brief__row:last-child { border-bottom: 0; }
.brief__k { font: 400 10px/1 var(--body); letter-spacing: 0.22em; text-transform: uppercase; color: var(--t2); }
.brief__v { margin-top: 7px; font: 400 var(--fs-md)/1.5 var(--display); color: var(--t1); }
.brief__foot { margin-top: var(--s6); text-align: center; color: var(--t2); font-size: var(--fs-sm); line-height: 1.75; }
.hand {
  display: flex; justify-content: center; gap: var(--s6); flex-wrap: wrap; text-align: center;
  max-width: 640px; margin: var(--s5) auto 0; padding: var(--s5) clamp(20px, 3.4vw, 44px);
  background: var(--ink-2); border: 1px solid var(--line);
}
.hand a { display: inline-block; }
.hand small { display: block; font: 400 10px/1 var(--body); letter-spacing: 0.22em; text-transform: uppercase; color: var(--t2); margin-bottom: 10px; }
.hand b {
  font: 400 var(--fs-lg)/1.35 var(--display); color: var(--t1); font-weight: 400;
  border-bottom: 1px solid rgba(199,165,107,.34); padding-bottom: 6px; transition: border-color .4s var(--ease);
}
.hand a:hover b { border-bottom-color: var(--champ); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { max-width: 760px; margin-inline: auto; border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); }
summary {
  list-style: none; cursor: pointer; padding-block: var(--s5);
  display: grid; grid-template-columns: 1fr 20px; align-items: center; gap: var(--s4);
  font: 400 var(--fs-md)/1.5 var(--display); color: var(--t1); transition: color .35s var(--ease);
}
summary::-webkit-details-marker { display: none; }
summary:hover { color: var(--champ-hi); }
.sign { position: relative; width: 11px; height: 11px; justify-self: end; }
.sign::before, .sign::after { content: ""; position: absolute; background: var(--champ); transition: transform .4s var(--ease), opacity .3s; }
.sign::before { left: 0; top: 5px; width: 11px; height: 1px; }
.sign::after { left: 5px; top: 0; width: 1px; height: 11px; }
details[open] .sign::after { transform: rotate(90deg); opacity: 0; }
details p { padding-bottom: var(--s6); color: var(--t2); font-size: var(--fs-sm); line-height: 1.78; max-width: 62ch; }

/* ==========================================================================
   PROFILE + SERVICE FURNITURE
   ========================================================================== */
.panel { background: var(--ink-2); border: 1px solid var(--line); padding: var(--s5) clamp(18px, 3vw, 32px) var(--s6); }
.panel__h { text-align: center; font: 500 var(--fs-micro)/1 var(--body); letter-spacing: 0.24em; text-transform: uppercase; color: var(--t2); margin-bottom: var(--s5); }
.panels { display: grid; grid-template-columns: 1fr; gap: var(--s4); max-width: 900px; margin-inline: auto; }
@media (min-width: 820px) { .panels { grid-template-columns: 1fr 1fr; } }

.stats-table td, .rates-table td, .price-table td { padding: 13px 0; border-bottom: 1px solid var(--line-2); vertical-align: baseline; }
.stats-table tr:last-child td, .rates-table tr:last-child td { border-bottom: 0; }
.stats-table td:first-child, .rates-table td:first-child, .price-table td:first-child {
  font: 400 10px/1.4 var(--body); letter-spacing: 0.2em; text-transform: uppercase; color: var(--t2);
}
.stats-table td:last-child, .rates-table td:last-child, .price-table td:last-child {
  text-align: right; color: var(--t1); font-family: var(--display); font-size: var(--fs-md);
  font-variant-numeric: tabular-nums;
}
.price-table { font-size: var(--fs-md); }
.price-table td { padding: 16px 0; border-top: 1px solid var(--line-2); border-bottom: 0; }
.price-table td:first-child { font: 400 var(--fs-md)/1.4 var(--display); letter-spacing: 0; text-transform: none; color: var(--t1); }
.price-table td:last-child { font-size: var(--fs-lg); }

.service-tags { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }
.tag {
  display: inline-block; font: 400 10px/1 var(--body); letter-spacing: 0.16em; text-transform: uppercase;
  padding: 8px 13px; border: 1px solid var(--line-3); color: var(--t2); border-radius: 2px;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
a.tag:hover { border-color: rgba(199,165,107,.6); color: var(--t1); }

.gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.gallery-grid img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border: 1px solid var(--line); }
@media (min-width: 720px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); } }

/* carousel (profile pages) — app.js drives it */
.carousel { position: relative; overflow: hidden; border: 1px solid var(--line); background: var(--ink-1); padding: 8px; }
.carousel-track {
  display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-slide {
  flex: 0 0 calc(25% - 5px); scroll-snap-align: start; aspect-ratio: 3/4; overflow: hidden;
  background: linear-gradient(168deg, #1B1B1F 0%, #151519 34%, #0D0D10 74%, var(--ink-0) 100%);
}
.carousel-slide img { width: 100%; height: 100%; object-fit: cover; }
.carousel-prev, .carousel-next {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 42px; height: 42px; border-radius: 50%; background: rgba(9,9,11,.82); color: var(--t1);
  border: 1px solid var(--line-3); font-size: 22px; line-height: 1;
  display: flex; align-items: center; justify-content: center; transition: background .3s var(--ease), color .3s var(--ease);
}
.carousel-prev { left: 14px; }
.carousel-next { right: 14px; }
.carousel-prev:hover, .carousel-next:hover { background: var(--champ); color: #17130B; border-color: transparent; }
.carousel-dots { position: absolute; bottom: 14px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; z-index: 3; pointer-events: none; }
.carousel-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--white-50); transition: background .2s, transform .2s; }
.carousel-dot.active { background: var(--champ); transform: scale(1.5); }
@media (max-width: 880px) { .carousel-slide { flex: 0 0 calc(50% - 3px); } }
@media (max-width: 520px) { .carousel-slide { flex: 0 0 100%; } }

/* the band that closes a money page */
.book-banner { background: var(--ink-1); border-block: 1px solid var(--line); padding-block: var(--s7); text-align: center; }
.book-banner p { font-size: var(--fs-md); letter-spacing: 0.1em; text-transform: uppercase; color: var(--t2); margin: 0; }
.book-banner a { color: var(--t1); border-bottom: 1px solid rgba(199,165,107,.4); padding-bottom: 2px; }
.book-banner a:hover { border-bottom-color: var(--champ); }

/* ==========================================================================
   CLOSING BAND
   ========================================================================== */
.closing {
  position: relative; overflow: hidden; isolation: isolate; text-align: center;
  padding-block: clamp(88px, 11vw, 152px); background: var(--ink-1); border-top: 1px solid var(--line);
}
/* the one glow on the page — champagne at .06, and nowhere else at any size */
.glow {
  position: absolute; left: 50%; bottom: clamp(88px, 11vw, 152px); z-index: 1; pointer-events: none;
  width: min(620px, 82%); height: 170px; transform: translate(-50%, -38%);
  background: radial-gradient(58% 58% at 50% 50%, rgba(199,165,107,.06), transparent 70%);
  animation: breathe 17s ease-in-out infinite;
}
@keyframes breathe { 0%, 100% { opacity: .55; transform: translate(-50%,-38%) scale(1); } 50% { opacity: 1; transform: translate(-50%,-38%) scale(1.06); } }
.closing__in { position: relative; z-index: 2; }
.closing h2 { max-width: 21ch; margin-inline: auto; }
.closing p { margin: var(--s4) auto 0; max-width: 46ch; color: var(--t2); font-size: var(--fs-base); }

/* the only champagne surface of any size: a compact foil plaque with the two
   handles on it. Deliberately small — champagne is a CTA, not a field. */
.foil {
  position: relative; isolation: isolate; overflow: hidden; background: var(--champ-grad);
  max-width: 560px; margin: var(--s7) auto 0;
  padding: clamp(24px, 3.2vw, 36px) clamp(20px, 3.4vw, 44px);
  box-shadow: 0 28px 70px -44px rgba(0,0,0,.95);
}
.foil::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.foil__in { position: relative; z-index: 2; }
.foil__row + .foil__row { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid rgba(24,19,10,.2); }
.foil__row a { display: block; }
.foil__k { display: block; font: 500 var(--fs-micro)/1.4 var(--body); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(24,19,10,.62); }
.foil__v {
  display: inline-block; margin-top: 9px; color: #14110A;
  font: 400 clamp(19px, 2.3vw, 23px)/1.25 var(--display); letter-spacing: 0.01em;
  border-bottom: 1px solid transparent; transition: border-color .4s var(--ease);
}
.foil__row a:hover .foil__v { border-bottom-color: rgba(20,17,10,.5); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer { background: var(--ink-0); border-top: 1px solid var(--line); padding-inline: var(--gut); }
.foot__top { padding-block: var(--sec) var(--s8); text-align: center; }
.foot__top .mark__s { margin-top: 2px; }
.cols {
  display: grid; grid-template-columns: 1fr; gap: var(--s7);
  padding-bottom: var(--s9); text-align: center; max-width: var(--maxw); margin-inline: auto;
}
.cols h5 { font: 500 var(--fs-micro)/1 var(--body); letter-spacing: 0.24em; text-transform: uppercase; color: var(--t2); margin-bottom: var(--s4); }
.cols ul { list-style: none; }
.cols li { margin-bottom: 10px; }
.cols a, .cols span, .cols p { font-size: var(--fs-sm); color: var(--t3); line-height: 1.7; }
.cols a { transition: color .35s var(--ease); }
.cols a:hover { color: var(--champ-hi); }
.legal {
  border-top: 1px solid var(--line); padding-block: var(--s5); max-width: var(--maxw); margin-inline: auto;
  display: flex; flex-direction: column; align-items: center; gap: var(--s3); text-align: center;
  font: 400 var(--fs-xs)/1.6 var(--body); color: var(--t4); letter-spacing: 0.06em;
}
.legal nav { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; justify-content: center; }
.legal a:hover { color: var(--t2); }
.badge {
  display: inline-grid; place-items: center; width: 32px; height: 32px;
  border: 1px solid var(--line-3); border-radius: 50%;
  font: 400 var(--fs-xs)/1 var(--body); color: var(--champ); flex: none;
}
@media (min-width: 620px) {
  .cols { grid-template-columns: repeat(2, 1fr); text-align: left; }
  .legal { flex-direction: row; justify-content: space-between; text-align: left; }
}
@media (min-width: 900px) { .cols { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .cols { grid-template-columns: 1.5fr repeat(4, 1fr); gap: var(--s6); } }

/* ---- mobile sticky CTA --------------------------------------------------- */
.mobile-cta {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 250;
  background: var(--wa); color: #0B1A10; text-align: center; padding: 14px 16px;
  font: 600 var(--fs-xs)/1 var(--body); letter-spacing: 0.14em; text-transform: uppercase;
  align-items: center; justify-content: center; gap: 10px; -webkit-tap-highlight-color: transparent;
}
.mobile-cta:active { background: var(--wa-dark); }
@media (max-width: 880px) {
  .mobile-cta { display: flex !important; }
  body { padding-bottom: 58px; }
}

/* ---- forms (inherited /booking/) ---------------------------------------- */
.form-row { margin-top: var(--s5); }
.form-row label { display: block; }
.form-row select, .form-row input {
  width: 100%; padding: 13px 14px; margin-top: var(--s2);
  border: 1px solid var(--line-3); background: var(--ink-2); color: var(--t1);
  font: 400 var(--fs-base)/1.4 var(--body); border-radius: 2px;
}
.form-row option { background: var(--ink-2); color: var(--t1); }

/* ---- journal + guide lists ---------------------------------------------- */
.journal-list { display: grid; gap: var(--s6); }
.journal-item { border-top: 1px solid var(--line); padding-top: var(--s5); display: block; }
.journal-item .date { font: 400 var(--fs-xs)/1 var(--body); letter-spacing: 0.24em; text-transform: uppercase; color: var(--t2); }
.journal-item h3 { margin: var(--s3) 0; }
.journal-item:hover h3 { color: var(--champ-hi); }
.journal-item .lede { font-size: var(--fs-sm); color: var(--t2); margin: 0; }

/* ---- image protection --------------------------------------------------- */
.no-save, .no-save img { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.no-save img { -webkit-user-drag: none; pointer-events: none; }

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