/* =========================================================
   SOUL VACATION — Global stylesheet
   Implementer reference for Elementor (WordPress) translation.
   Palette tokens, type scale, easings live here as CSS custom
   properties so Tweaks panel can mutate them at runtime.
   ========================================================= */

:root {
  /* Palette — cream, slate-blue, dark blue. Olive removed; the former
     `--c-olive` accent slot now carries the slate-blue so every accent
     (eyebrows, links, rays, focus) shifts in one move. */
  --c-aegean: #1B3A5C;       /* dark blue — deep panels, footer */
  --c-cool-steel: #94A5B3;   /* light steel-blue */
  --c-pearl: #F5F3EE;        /* cream — primary surface */
  --c-bone: #E2DCD0;         /* soft sand neutral */
  --c-slate: #4E6678;        /* slate-blue accent */
  --c-olive: #4E6678;        /* legacy name → now slate-blue */
  --c-charcoal: #0E1620;
  --c-snow: #FFFFFF;

  /* Signature arch radius (boutique dome-topped imagery) */
  --r-arch: 50% 50% 0 0 / 22% 22% 0 0;

  /* Type — Cormorant Garamond (display + masthead) and Jost (body). The
     fallback chain ends in a real serif so a slow font load never flashes
     a corporate sans on headings. */
  --f-display: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --f-body: "Jost", "Cabinet Grotesk", -apple-system, system-ui, sans-serif;
  /* Hero masthead — Cormorant Garamond. Roman with italic accent. */
  --f-hero: "Cormorant Garamond", "Times New Roman", Georgia, serif;

  /* Easings — never `ease`, never `ease-in` */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  /* Motion speed multiplier (Tweak) */
  --motion-scale: 1;

  /* Type scale */
  --t-hero: clamp(44px, 8.5vw, 110px);
  --t-section: clamp(36px, 5.5vw, 80px);
  --t-sub: clamp(24px, 2.6vw, 36px);
  --t-body: 15px;
  --t-label: 10px;
  --track-label: 0.22em;
  --track-nav: 0.14em;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }
/* Safety net: nothing should ever push a horizontal scrollbar on a phone.
   `clip` (not `hidden`) so it doesn't create a scroll container that would
   break the page's position: fixed / sticky chrome. */
@media (max-width: 1100px) {
  html, body { overflow-x: clip; }
}
/* Word-split headings translate their inner spans up from below; keep any
   overshoot from nudging the line box wider than the viewport. */
.m-word-host { max-width: 100%; }
body {
  font-family: var(--f-body);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.62;
  color: var(--c-charcoal);
  background: var(--c-pearl);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }

/* ============================================================
   COHESIVE IMAGE GRADE — one warm, slightly-faded film grade on ALL
   photography, so a mixed-source image set reads as a single
   art-directed shoot. The unifying tone (not the crops) is what makes
   disparate photos feel like one brand.
   ============================================================ */
.hero__media, .brand__img,
.kare-split__media, .kare-split__media-inner,
.pool-moment__fig .img,
.kare2__fig-img, .kare2__pg-img .img,
.rooms-ed__fig .img, .rooms-detail__fig .img,
.bento__img, .exp-card__img, .j-card__img, .mb-card__img {
  filter: saturate(0.84) contrast(1.05) sepia(0.09) brightness(1.03);
}
@media (prefers-reduced-motion: no-preference) {
  .hero__media, .brand__img, .bento__img, .exp-card__img, .j-card__img, .mb-card__img {
    transition: filter 600ms var(--ease-out);
  }
}

a { color: inherit; text-decoration: none; }

/* Typographic primitives */
.display, .display-italic {
  font-family: var(--f-display);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 0.96;
}
.display-italic { font-style: italic; }
em.it, .it {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
}

/* Script accent — routed through --f-script (defaults to display italic) */
.script {
  font-family: var(--f-script, var(--f-display));
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}
.label {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
}
.eyebrow {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  color: var(--c-olive);
}
.eyebrow::before {
  content: "\2014\2002"; /* em-dash + en-space */
  color: currentColor;
  opacity: 0.55;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1em;
  letter-spacing: 0;
}
.body-prose {
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  max-width: 60ch;
  text-wrap: pretty;
}

/* Section header — shared baseline so every page's .sec-head__h renders in the
   display serif (the homepage overrides spacing locally; KARE/Stay inherit this).
   Without this, a bare <h2 class="sec-head__h"> falls back to bold body sans. */
.sec-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: end;
  max-width: 1200px;
  margin: 0 auto 80px;
}
.sec-head__h {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: var(--t-section);
  line-height: 1.04;
  margin: 22px 0 0;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.sec-head__h .it { font-style: italic; }
.sec-head__right {
  display: flex; flex-direction: column;
  gap: 22px; align-items: flex-start;
  max-width: 46ch; padding-bottom: 8px;
}
.sec-head__right p { color: rgba(14,22,32,0.78); margin: 0; line-height: 1.8; }
.sec-head__right .cta-line { color: var(--c-olive); }
@media (max-width: 900px) {
  .sec-head { grid-template-columns: 1fr; gap: 20px; align-items: start; margin-bottom: 44px; }
}
@media (max-width: 640px) {
  .sec-head { margin-bottom: 34px; }
  .sec-head__h { font-size: clamp(26px, 7vw, 34px); letter-spacing: -0.01em; }
  .sec-head__right p { font-size: 14px; }
}

/* Quiet text link CTA — italic word + hairline rule that grows on hover */
.cta-line {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: 19px;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  position: relative;
  padding-bottom: 6px;
  color: inherit;
}
.cta-line > span:first-child {
  position: relative;
}
.cta-line > span:first-child::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
  transform-origin: left;
  transition: transform calc(500ms * var(--motion-scale)) var(--ease-in-out),
              opacity calc(500ms * var(--motion-scale)) var(--ease-out);
}
.cta-line .arrow {
  display: none; /* arrow removed — italic word does the work */
}
@media (hover: hover) and (pointer: fine) {
  .cta-line:hover > span:first-child::after { opacity: 0.85; transform: scaleX(1.04); }
}

/* Legacy ::after underline on .cta-line itself — neutralised */
.cta-line::after { display: none; }

/* Quiet primary CTA — no fill, no rounded corners, just a quiet bordered word */
.btn-solid {
  display: inline-block;
  background: transparent;
  color: var(--c-snow);
  padding: 22px 4px;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: 22px;
  letter-spacing: 0;
  text-transform: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  cursor: pointer;
  position: relative;
  transition: letter-spacing calc(500ms * var(--motion-scale)) var(--ease-in-out);
}
.btn-solid:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) {
  .btn-solid:hover { letter-spacing: 0.01em; background: transparent; }
}

/* Outlined CTA on dark surfaces */
.btn-outline {
  display: inline-block;
  border: 1px solid rgba(255,255,255,0.6);
  color: var(--c-snow);
  padding: 16px 28px;
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  cursor: pointer;
  background: transparent;
  transition: background-color calc(200ms * var(--motion-scale)) var(--ease-out),
              color calc(200ms * var(--motion-scale)) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .btn-outline:hover { background: rgba(255,255,255,0.1); }
}

/* Stagger reveal — opacity + 8px translateY */
.reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity calc(600ms * var(--motion-scale)) var(--ease-out),
              transform calc(600ms * var(--motion-scale)) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* Header */
.sv-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 14px 52px;
  color: var(--c-snow);
  background: transparent;
  transition: background-color calc(300ms * var(--motion-scale)) var(--ease-out),
              backdrop-filter calc(300ms * var(--motion-scale)) var(--ease-out),
              padding calc(300ms * var(--motion-scale)) var(--ease-out),
              color calc(300ms * var(--motion-scale)) var(--ease-out);
}
/* Legibility scrim — a soft top-down shade so white nav reads over a bright
   hero sky on landing. Fades out once the solid scrolled bar takes over. */
.sv-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 200%;
  background: linear-gradient(180deg, rgba(8,16,24,0.42) 0%, rgba(8,16,24,0.12) 55%, transparent 100%);
  pointer-events: none;
  z-index: -1;
  opacity: 1;
  transition: opacity calc(300ms * var(--motion-scale)) var(--ease-out);
}
.sv-header.is-scrolled::before { opacity: 0; }
.sv-header.is-scrolled {
  padding: 12px 52px;
  background: rgba(245, 243, 238, 0.92);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  color: var(--c-charcoal);
}
.sv-wordmark {
  display: inline-flex;
  align-items: center;
  height: 112px;
}
.sv-logo {
  height: 112px;
  width: auto;
  display: block;
  transition: opacity calc(300ms * var(--motion-scale)) var(--ease-out),
              height calc(350ms * var(--motion-scale)) var(--ease-in-out);
}
.sv-logo--dark { display: none; }
.sv-header.is-scrolled .sv-logo--light { display: none; }
.sv-header.is-scrolled .sv-logo--dark { display: block; }
.sv-header.is-scrolled .sv-wordmark,
.sv-header.is-scrolled .sv-logo { height: 72px; }
.sv-header:not(.is-scrolled) .sv-nav a,
.sv-header:not(.is-scrolled) .sv-reserve {
  text-shadow: 0 1px 12px rgba(8,16,24,0.35);
}
.sv-nav {
  display: flex;
  gap: 36px;
  justify-content: center;
}
.sv-nav a {
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  position: relative;
  padding: 6px 0;
}
.sv-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 1px;
  background: var(--c-olive);
  transition: right calc(300ms * var(--motion-scale)) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .sv-nav a:hover::after { right: 0; }
}
.sv-nav a.active::after,
.sv-nav .current-menu-item > a::after,
.sv-nav .current-page-ancestor > a::after,
.sv-nav .current_page_item > a::after { right: 0; }
.sv-reserve {
  justify-self: end;
  position: relative;
  border: 0;
  padding: 6px 0;
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  color: inherit;
  background: transparent;
  transition: color calc(300ms * var(--motion-scale)) var(--ease-out);
}
.sv-reserve::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
  transform-origin: left;
  transition: transform calc(500ms * var(--motion-scale)) var(--ease-in-out),
              opacity calc(300ms * var(--motion-scale)) var(--ease-out);
}
.sv-header.is-scrolled .sv-reserve { border: 0; }
@media (hover: hover) and (pointer: fine) {
  .sv-reserve:hover { background: transparent; }
  .sv-reserve:hover::after { opacity: 0.9; transform: scaleX(1.06); }
  .sv-header.is-scrolled .sv-reserve:hover { background: transparent; }
}
.sv-burger {
  display: none;
  justify-self: end;
  width: 36px; height: 36px;
  background: transparent;
  border: 0;
  cursor: pointer;
  position: relative;
  color: inherit;
}
.sv-burger span {
  position: absolute;
  left: 6px; right: 6px;
  height: 1px;
  background: currentColor;
  transition: transform calc(280ms * var(--motion-scale)) var(--ease-out),
              top calc(280ms * var(--motion-scale)) var(--ease-out),
              opacity calc(180ms * var(--motion-scale)) var(--ease-out);
}
.sv-burger span:nth-child(1) { top: 14px; }
.sv-burger span:nth-child(2) { top: 22px; }
.sv-burger.is-open span:nth-child(1) { top: 18px; transform: rotate(45deg); }
.sv-burger.is-open span:nth-child(2) { top: 18px; transform: rotate(-45deg); }

/* Mobile drawer — full-screen editorial menu */
.sv-drawer {
  position: fixed;
  inset: 0;
  background: var(--c-pearl);
  z-index: 60;
  transform: translateX(100%);
  transition: transform calc(380ms * var(--motion-scale)) var(--ease-drawer);
  display: flex;
  flex-direction: column;
  padding: 18px 28px 36px;
  overflow-y: auto;
}
.sv-drawer::after {
  /* faint editorial numeral wash, bottom-right */
  content: "";
  position: absolute;
  right: -10%;
  bottom: -6%;
  width: 70%;
  height: 60%;
  background: radial-gradient(closest-side, rgba(78,102,120,0.06), transparent 70%);
  pointer-events: none;
}
.sv-drawer.is-open { transform: translateX(0); }
.sv-drawer.is-closing { transition-duration: calc(240ms * var(--motion-scale)); transition-timing-function: var(--ease-out); }

.sv-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(14,22,32,0.1);
}
.sv-drawer__logo img { height: 56px; width: auto; display: block; }
.sv-drawer__close {
  position: relative;
  width: 40px; height: 40px;
  background: transparent;
  border: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.sv-drawer__close span {
  position: absolute;
  left: 8px; right: 8px; top: 50%;
  height: 1px;
  background: var(--c-charcoal);
}
.sv-drawer__close span:nth-child(1) { transform: rotate(45deg); }
.sv-drawer__close span:nth-child(2) { transform: rotate(-45deg); }

.sv-drawer__nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  gap: 2px;
  padding: 24px 0;
}
.sv-drawer__nav a {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 10px 0;
  color: var(--c-charcoal);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity calc(420ms * var(--motion-scale)) var(--ease-out),
              transform calc(420ms * var(--motion-scale)) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 55ms + 120ms);
}
.sv-drawer__num {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--c-olive);
  min-width: 24px;
}
.sv-drawer__lab {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(34px, 9vw, 46px);
  line-height: 1.04;
  letter-spacing: -0.01em;
}
.sv-drawer__foot {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 460ms var(--ease-out), transform 460ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 55ms + 160ms);
  border-top: 1px solid rgba(14,22,32,0.1);
  padding-top: 26px;
}
.sv-drawer__reserve {
  display: block;
  text-align: center;
  background: var(--c-charcoal);
  color: var(--c-snow);
  padding: 18px;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.sv-drawer__meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 17px;
  color: rgba(14,22,32,0.55);
}
.sv-drawer.is-open .sv-drawer__nav a,
.sv-drawer.is-open .sv-drawer__foot { opacity: 1; transform: translateY(0); }

/* Lock background scroll while the drawer is open */
html.sv-drawer-open, html.sv-drawer-open body { overflow: hidden; }
/* Burger sits above the drawer’s own close, so hide it while open */
.sv-burger.is-open { opacity: 0; pointer-events: none; }

@media (max-width: 900px) {
  .sv-header { padding: 14px 24px; grid-template-columns: 1fr 1fr; }
  .sv-nav, .sv-reserve { display: none; }
  .sv-burger { display: block; }
  .sv-wordmark, .sv-logo { height: 64px; }
  .sv-header.is-scrolled .sv-wordmark,
  .sv-header.is-scrolled .sv-logo { height: 48px; }
}

/* Footer */
.sv-footer {
  background: var(--c-footer, var(--c-charcoal));
  color: var(--c-footer-fg, var(--c-snow));
  padding: 130px clamp(40px, 8vw, 132px) 44px;
  transition: background-color calc(400ms * var(--motion-scale)) var(--ease-out),
              color calc(400ms * var(--motion-scale)) var(--ease-out);
}
.sv-footer[data-fg="dark"] .sv-footer__brand .desc,
.sv-footer[data-fg="dark"] .sv-footer__col ul,
.sv-footer[data-fg="dark"] .sv-footer__col p { color: rgba(14,22,32,0.55); }
.sv-footer[data-fg="dark"] .sv-footer__brand .social,
.sv-footer[data-fg="dark"] .sv-footer__bottom { color: rgba(14,22,32,0.4); }
.sv-footer[data-fg="dark"] .sv-newsletter input {
  border-bottom-color: rgba(14,22,32,0.2);
  color: var(--c-charcoal);
}
.sv-footer[data-fg="dark"] .sv-newsletter input::placeholder { color: rgba(14,22,32,0.4); }
.sv-footer[data-fg="dark"] .sv-newsletter button { color: var(--c-charcoal); }
.sv-footer[data-fg="dark"] .sv-footer__bottom { border-top-color: rgba(14,22,32,0.1); }
.sv-footer[data-fg="dark"] .sv-footer__logo { filter: brightness(0.2) saturate(1.3); }
.sv-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: 60px;
  max-width: 1440px;
  margin: 0 auto;
}
.sv-footer__logo {
  height: 112px;
  width: auto;
  display: block;
  margin: 0 0 18px -4px;
  opacity: 0.95;
}
.sv-footer__brand .tagline {
  color: var(--c-olive);
  font-family: var(--f-script, var(--f-display));
  font-style: italic;
  font-size: 18px;
  margin-top: 8px;
}
.sv-footer__brand .desc {
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  max-width: 36ch;
  margin: 22px 0 26px;
  line-height: 1.7;
}
.sv-footer__brand .social {
  display: flex;
  gap: 22px;
  font-size: 10px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
}
.sv-footer__col .label {
  display: block;
  color: var(--c-olive);
  margin-bottom: 22px;
}
.sv-footer__col ul, .sv-footer__col p {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  line-height: 2;
}
.sv-footer__col a {
  transition: color calc(200ms * var(--motion-scale)) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .sv-footer__col a:hover { color: var(--c-olive); }
}
.sv-newsletter input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  padding: 12px 0;
  color: var(--c-snow);
  font-family: var(--f-body);
  font-size: 14px;
  outline: none;
  transition: border-color calc(200ms * var(--motion-scale)) var(--ease-out);
}
.sv-newsletter input::placeholder { color: rgba(255,255,255,0.3); }
.sv-newsletter input:focus { border-color: var(--c-olive); }
.sv-newsletter button {
  margin-top: 16px;
  background: transparent;
  border: 0;
  color: var(--c-snow);
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  cursor: pointer;
  padding: 0;
  transition: color calc(200ms * var(--motion-scale)) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .sv-newsletter button:hover { color: var(--c-olive); }
}
.sv-newsletter .pulse {
  display: inline-flex;
  gap: 4px;
}
.sv-newsletter .pulse span {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: currentColor;
  animation: pulse 1.2s var(--ease-in-out) infinite;
}
.sv-newsletter .pulse span:nth-child(2) { animation-delay: 0.15s; }
.sv-newsletter .pulse span:nth-child(3) { animation-delay: 0.3s; }
@keyframes pulse { 0%, 100% { opacity: 0.2 } 50% { opacity: 1 } }
.sv-newsletter .success {
  font-family: var(--f-script, var(--f-display));
  font-style: italic;
  font-size: 18px;
}
.sv-footer__bottom {
  max-width: 1440px;
  margin: 64px auto 0;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: rgba(255,255,255,0.18);
}
.sv-footer__bottom .links { display: flex; gap: 24px; }
@media (max-width: 900px) {
  .sv-footer { padding: 72px 24px 32px; }
  .sv-footer__grid { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
  .sv-footer__brand { grid-column: 1 / -1; }
  .sv-footer__logo { height: 92px; }
  .sv-newsletter { grid-column: 1 / -1; }
  .sv-footer__bottom { flex-direction: column; gap: 12px; }
}
@media (max-width: 480px) {
  .sv-footer__grid { grid-template-columns: 1fr; gap: 36px; }
}

/* Section utility */
.sv-section { padding: 200px clamp(40px, 8vw, 132px); }
.sv-section--bone { background: var(--c-bone); }
.sv-section--ink { background: var(--c-aegean); color: var(--c-snow); }
.sv-section--charcoal { background: var(--c-charcoal); color: var(--c-snow); }

@media (max-width: 900px) {
  .sv-section { padding: 96px 24px; }
}

/* Tweaks panel — match design tone */
.tw-panel { font-family: var(--f-body) !important; }

/* ============================================================
   AETHOS-STYLE MOTION SYSTEM (motion.js)
   ============================================================ */

/* --- Word-by-word reveal (headlines) --- */
.m-word-host {
  /* Prevents horizontal scroll while words are translated/clipped */
  /*overflow: hidden;*/
  /* Generous bottom padding so italic descenders (g, q, p, y) aren't clipped */
  padding-bottom: 0.18em;
  margin-bottom: -0.18em;
}
.m-word {
  display: inline-block;
  /*overflow: hidden;*/
  vertical-align: top;
  /* Keep italic descenders visible */
  line-height: 1.05;
  /* Always inherit the heading's display serif — never let a reset or a
     slow webfont load drop these split words to the body sans. */
  font-family: inherit;
  font-style: inherit;
}
.m-word__inner {
  display: inline-block;
  font-family: inherit;
  font-style: inherit;
  transform: translateY(110%) rotate(0.001deg);
  transition: transform calc(900ms * var(--motion-scale))
    cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: calc(var(--m-i, 0) * 55ms * var(--motion-scale));
  will-change: transform;
}
.m-word-host.m-in .m-word__inner {
  transform: translateY(0) rotate(0.001deg);
}

/* Hero fires on load: same animation, but the m-in class is added
   in setupHero() instead of by intersection. */
.hero .m-word-host .m-word__inner {
  transition-duration: calc(1100ms * var(--motion-scale));
}

/* --- Clip-path image reveal --- */
.m-clip {
  position: relative;
  /* NOTE: the JS observer reliably reveals word-hosts but was leaving
     clip media stuck fully-clipped (invisible) — so the curtain defaults
     to OPEN here. Images are always visible; the inner zoom still plays. */
  clip-path: none;
  transition: clip-path calc(1200ms * var(--motion-scale))
    cubic-bezier(0.77, 0, 0.175, 1);
  will-change: clip-path;
}
.m-clip.m-in {
  clip-path: inset(0 0 0 0);
}
/* Subtle in-zoom on the image inside the clip */
.m-clip > img,
.m-clip > picture > img,
.m-clip > video {
  transform: scale(1.08);
  transition: transform calc(1600ms * var(--motion-scale))
    cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
.m-clip.m-in > img,
.m-clip.m-in > picture > img,
.m-clip.m-in > video {
  transform: scale(1);
}

/* --- Slow hover scale on imagery --- */
@media (hover: hover) and (pointer: fine) {
  .room__media,
  .journal__media,
  .food__media,
  .exp__media {
    overflow: hidden;
  }
  .room__media > img,
  .journal__media > img,
  .food__media > img,
  .exp__media > img,
  .room__media > picture > img,
  .journal__media > picture > img,
  .food__media > picture > img,
  .exp__media > picture > img {
    transition: transform 1400ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .room:hover .room__media > img,
  .room:hover .room__media > picture > img,
  .journal-card:hover .journal__media > img,
  .journal-card:hover .journal__media > picture > img,
  a:hover > .food__media > img,
  a:hover > .exp__media > img,
  .exp:hover .exp__media > img,
  .exp:hover .exp__media > picture > img {
    transform: scale(1.04);
  }
}

/* --- Press strip marquee --- */
.m-marquee {
  display: flex;
  width: max-content;
  animation: m-marquee 60s linear infinite;
}
.press--marquee:hover .m-marquee {
  animation-play-state: paused;
}
.m-marquee__track {
  display: flex;
  align-items: center;
  gap: 22px;
  padding-right: 22px;
  flex-shrink: 0;
}
.m-marquee__track .press__lab {
  /* Show one "As featured in" label inside the track */
  display: inline-flex;
  white-space: nowrap;
}
@keyframes m-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* --- Counter (no extra styling needed; just a hook for JS) --- */
.m-counter { font-variant-numeric: tabular-nums; }

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .m-word__inner { transform: none !important; transition: none !important; }
  .m-clip { clip-path: none !important; transition: none !important; }
  .m-clip > img, .m-clip > picture > img { transform: none !important; transition: none !important; }
  .m-marquee { animation: none !important; }
}

/* ============================================================
   EXPERIENTIAL LAYER (experiential.js)
   ============================================================ */

/* Scroll lock while preloader is up */
html.sv-locked, html.sv-locked body { overflow: hidden; height: 100%; }

/* --- 1. Preloader — slate screen, a handwritten line that arrives word by
   word, one quiet photograph, the wordmark resting at the base. --- */
.sv-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #6E8AB0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 1100ms cubic-bezier(0.77, 0, 0.175, 1);
  will-change: transform;
}
.sv-preloader.is-lifting { transform: translateY(-100%); }
.sv-preloader__inner {
  position: relative;
  width: min(640px, 86vw);
  text-align: center;
}
.sv-preloader__line {
  font-family: "Cedarville Cursive", "Homemade Apple", cursive;
  font-weight: 400;
  font-size: clamp(27px, 4.4vw, 48px);
  line-height: 1.72;
  color: #F4F2EC;
  margin: 0;
  position: relative;
  z-index: 2;
  letter-spacing: 0;
}
.sv-preloader__line .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
}
.sv-preloader.is-in .sv-preloader__line .w { opacity: 1; transform: translateY(0); }
.sv-preloader__img {
  position: relative;
  z-index: 1;
  width: clamp(190px, 32vw, 290px);
  aspect-ratio: 1 / 1;
  margin: -14px auto 0;
  overflow: hidden;
  background: rgba(255,255,255,0.08);
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 1000ms var(--ease-out), transform 1500ms var(--ease-out);
  transition-delay: 360ms;
}
.sv-preloader.is-in .sv-preloader__img { opacity: 1; transform: scale(1); }
.sv-preloader__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sv-preloader__logo {
  position: absolute;
  left: 50%;
  bottom: clamp(46px, 11vh, 104px);
  transform: translate(-50%, 8px);
  height: clamp(58px, 8vh, 84px);
  width: auto;
  opacity: 0;
  transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
  transition-delay: 520ms;
}
.sv-preloader.is-in .sv-preloader__logo { opacity: 0.96; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
  .sv-preloader__line .w, .sv-preloader__img, .sv-preloader__logo {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* --- 2. Custom cursor --- */
.sv-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--c-olive);
  pointer-events: none;
  z-index: 9000;
  opacity: 0;
  transition: opacity 300ms var(--ease-out),
              width 350ms var(--ease-out),
              height 350ms var(--ease-out),
              background-color 350ms var(--ease-out),
              border-color 350ms var(--ease-out);
  display: flex;
  align-items: center;
  justify-content: center;
  mix-blend-mode: difference;
}
.sv-cursor.is-active { opacity: 1; }
.sv-cursor.is-hover {
  width: 46px; height: 46px;
  background: rgba(78,102,120,0.12);
  border-color: rgba(255,255,255,0.8);
}
.sv-cursor.is-labelled {
  width: 92px; height: 92px;
  background: var(--c-olive);
  border-color: var(--c-olive);
  mix-blend-mode: normal;
}
.sv-cursor__label {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 14px;
  color: var(--c-pearl);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out);
  white-space: nowrap;
}
.sv-cursor.is-labelled .sv-cursor__label { opacity: 1; transform: scale(1); }
/* Hide the native cursor only where the custom one is active */
@media (hover: hover) and (pointer: fine) {
  html.sv-has-cursor, html.sv-has-cursor * { cursor: none; }
  html.sv-has-cursor .twk-panel, html.sv-has-cursor .twk-panel *,
  html.sv-has-cursor input, html.sv-has-cursor textarea,
  html.sv-has-cursor select, html.sv-has-cursor [data-drag-rail] { cursor: auto; }
  html.sv-has-cursor [data-drag-rail] { cursor: grab; }
  html.sv-has-cursor [data-drag-rail].is-dragging { cursor: grabbing; }
}

/* Magnetic targets need their own transform space */
.magnetic { transition: transform 500ms var(--ease-out); will-change: transform; }

/* --- 4. Parallax bands --- */
[data-parallax] { will-change: transform; }

/* --- 5. Moodboard drag gallery --- */
.moodboard {
  background: var(--c-charcoal);
  color: var(--c-snow);
  padding: 160px 0 170px;
  overflow: hidden;
}
.moodboard__head {
  max-width: 1320px;
  margin: 0 auto 56px;
  padding: 0 52px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
}
.moodboard__h {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: var(--t-section);
  line-height: 1;
  margin: 18px 0 0;
  letter-spacing: -0.01em;
}
.moodboard__h .it { font-style: italic; }
.moodboard__hint {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 17px;
  color: rgba(255,255,255,0.5);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  padding-bottom: 6px;
}
.moodboard__hint::before {
  content: "";
  width: 40px; height: 1px;
  background: rgba(255,255,255,0.3);
}
.moodboard__rail {
  display: flex;
  gap: 28px;
  padding: 0 52px;
  overflow-x: auto;
  scrollbar-width: none;
  cursor: grab;
  scroll-snap-type: x proximity;
}
.moodboard__rail::-webkit-scrollbar { display: none; }
.moodboard__rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.mb-card {
  flex: 0 0 auto;
  scroll-snap-align: center;
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  user-select: none;
}
.mb-card img, .mb-card .mb-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-size: cover;
  background-position: center;
  pointer-events: none;
  transition: transform 1400ms cubic-bezier(0.22,0.61,0.36,1);
}
.moodboard__rail:not(.is-dragging) .mb-card:hover .mb-card__img { transform: scale(1.05); }
.mb-card--tall { width: 360px; height: 520px; }
.mb-card--wide { width: 600px; height: 420px; }
.mb-card--sq   { width: 440px; height: 440px; }
.mb-card__cap {
  position: absolute;
  left: 22px; bottom: 20px;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 19px;
  color: var(--c-snow);
  text-shadow: 0 2px 24px rgba(0,0,0,0.5);
  z-index: 1;
}
.mb-card__cap .n {
  display: block;
  font-family: var(--f-body);
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 6px;
}
.mb-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,12,16,0.5), transparent 45%);
  pointer-events: none;
}
@media (max-width: 900px) {
  .moodboard { padding: 96px 0 100px; }
  .moodboard__head { padding: 0 24px; }
  .moodboard__rail { padding: 0 24px; gap: 18px; }
  .mb-card--tall { width: 240px; height: 360px; }
  .mb-card--wide { width: 360px; height: 260px; }
  .mb-card--sq { width: 280px; height: 280px; }
}

/* --- 6. Page transition wipe --- */
.sv-pagewipe {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: var(--c-charcoal);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transform: translateY(0);
  transition: transform 620ms cubic-bezier(0.77, 0, 0.175, 1);
}
.sv-pagewipe.is-revealed { transform: translateY(-100%); }
.sv-pagewipe.is-wiping { transform: translateY(0); }
.sv-pagewipe__mark {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(32px, 4vw, 52px);
  color: var(--c-pearl);
  opacity: 0;
  transition: opacity 300ms var(--ease-out);
}
.sv-pagewipe.is-wiping .sv-pagewipe__mark { opacity: 1; transition-delay: 120ms; }
.sv-pagewipe__logo {
  height: clamp(56px, 8vh, 84px);
  width: auto;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out);
}
.sv-pagewipe.is-wiping .sv-pagewipe__logo { opacity: 0.96; transform: translateY(0); transition-delay: 120ms; }

/* --- 7. Ambient sound toggle --- */
.sv-sound {
  position: fixed;
  left: 28px; bottom: 24px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(14,22,32,0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--c-snow);
  padding: 10px 18px 10px 14px;
  cursor: pointer;
  border-radius: 100px;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 15px;
  transition: background-color 300ms var(--ease-out), border-color 300ms var(--ease-out);
}
.sv-sound:hover { background: rgba(14,22,32,0.6); border-color: rgba(255,255,255,0.35); }
.sv-sound__bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.sv-sound__bars i {
  width: 2px; height: 4px;
  background: var(--c-cool-steel);
  transition: height 200ms var(--ease-out);
}
.sv-sound.is-on .sv-sound__bars i { background: var(--c-olive); animation: sv-eq 0.9s var(--ease-in-out) infinite; }
.sv-sound.is-on .sv-sound__bars i:nth-child(1) { animation-delay: 0s; }
.sv-sound.is-on .sv-sound__bars i:nth-child(2) { animation-delay: 0.15s; }
.sv-sound.is-on .sv-sound__bars i:nth-child(3) { animation-delay: 0.3s; }
.sv-sound.is-on .sv-sound__bars i:nth-child(4) { animation-delay: 0.45s; }
@keyframes sv-eq { 0%,100% { height: 4px; } 50% { height: 14px; } }
@media (max-width: 900px) { .sv-sound { left: 16px; bottom: 16px; } }

/* Respect reduced motion for the whole experiential layer */
@media (prefers-reduced-motion: reduce) {
  .sv-cursor { display: none !important; }
  [data-parallax] { transform: none !important; }
  .sv-pagewipe { display: none !important; }
}

/* ============================================================
   SIGNATURE "RAYS" MOTIF — the logo's horizontal lines, reused
   as animated section openers. Draws in line-by-line on scroll.
   ============================================================ */
.sv-rays {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 52px;
  margin-bottom: 26px;
}
.sv-rays span {
  display: block;
  height: 1.5px;
  width: 0%;
  background: var(--c-olive);
  transform-origin: left;
  transition: width 720ms var(--ease-out);
}
.sv-rays.m-in span { width: 100%; }
.sv-rays span:nth-child(1) { transition-delay: 0ms; }
.sv-rays span:nth-child(2) { transition-delay: 70ms; }
.sv-rays span:nth-child(3) { transition-delay: 140ms; }
.sv-rays span:nth-child(4) { transition-delay: 210ms; }
.sv-rays span:nth-child(5) { transition-delay: 280ms; }
.sv-rays span:nth-child(6) { transition-delay: 350ms; }
/* On dark surfaces the rays read better a touch brighter */
.sv-section--ink .sv-rays span,
.kare-split__content .sv-rays span,
.food__content .sv-rays span,
.booking .sv-rays span,
.moodboard .sv-rays span { background: var(--c-olive); opacity: 0.95; }
.sv-rays--center { margin-left: auto; margin-right: auto; }

/* ============================================================
   CHAPTER RAIL — right-side scroll navigator (line motif)
   ============================================================ */
.sv-chapters {
  position: fixed;
  right: 34px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 45;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-end;
  mix-blend-mode: difference;
}
.sv-chapter {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  color: #fff;
}
.sv-chapter__label {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 14px;
  color: #fff;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out);
  white-space: nowrap;
  pointer-events: none;
}
.sv-chapter__line {
  display: block;
  width: 18px;
  height: 1.5px;
  background: #fff;
  opacity: 0.4;
  transition: width 360ms var(--ease-out), opacity 360ms var(--ease-out);
}
.sv-chapter:hover .sv-chapter__label { opacity: 0.85; transform: translateX(0); }
.sv-chapter:hover .sv-chapter__line { width: 30px; opacity: 0.8; }
.sv-chapter.is-active .sv-chapter__line { width: 40px; opacity: 1; }
.sv-chapter.is-active .sv-chapter__label { opacity: 1; transform: translateX(0); }
@media (max-width: 1100px) { .sv-chapters { display: none; } }

/* ============================================================
   MOBILE SCROLL PROGRESS — a single hairline of the brand olive
   that fills left→right with scroll. Echoes the chapter-rail line
   motif on the small screens where the rail itself is hidden.
   ============================================================ */
.sv-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 55;
  background: transparent;
  pointer-events: none;
  display: none;
}
.sv-progress__bar {
  height: 100%;
  width: 100%;
  background: var(--c-olive);
  transform: scaleX(0);
  transform-origin: left;
  /* updated each frame from JS via --sv-progress (0..1) */
  transform: scaleX(var(--sv-progress, 0));
  will-change: transform;
}
@media (max-width: 1100px) {
  .sv-progress { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .sv-progress__bar { transition: none; }
}

/* ============================================================
   FILMIC GRAIN + VIGNETTE
   ============================================================ */
.sv-grain {
  position: fixed;
  inset: -20px;
  z-index: 8000;
  pointer-events: none;
  opacity: var(--grain-opacity, 0.05);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
  animation: sv-grain-shift 0.55s steps(2) infinite;
}
@keyframes sv-grain-shift {
  0% { transform: translate(0, 0); }
  50% { transform: translate(-6px, 4px); }
  100% { transform: translate(4px, -5px); }
}
.sv-vignette {
  position: fixed;
  inset: 0;
  z-index: 7999;
  pointer-events: none;
  box-shadow: inset 0 0 180px 0 rgba(74,55,36,0.10);
}
body.no-grain .sv-grain, body.no-grain .sv-vignette { display: none; }

/* ============================================================
   HERO MOUSE-PARALLAX LAYERS
   ============================================================ */
.hero__content { will-change: transform; }

/* ============================================================
   DAWN → DUSK AMBIENT GRADE (signature scroll-driven LUT)
   ============================================================ */
.sv-grade {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  mix-blend-mode: soft-light;
  transition: opacity 600ms var(--ease-out);
  will-change: background;
}

@media (prefers-reduced-motion: reduce) {
  .sv-rays span { width: 100% !important; transition: none !important; }
  .sv-grain, .sv-vignette { display: none !important; }
}

/* ============================================================
   MOBILE SWIPE CUE — makes horizontal carousels legibly swipeable
   on touch. Hidden on desktop; a hint label + progress dots that
   track scroll position sit beneath each rail.
   ============================================================ */
.swipe-cue { display: none; }
@media (max-width: 640px) {
  .swipe-cue {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 22px;
    font-family: var(--f-body);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--c-olive);
  }
  /* On dark surfaces (testimonials sit on bone, fine; moodboard dark) */
  .moodboard .swipe-cue,
  .sv-section--ink .swipe-cue,
  .sv-section--charcoal .swipe-cue { color: var(--c-cool-steel); }
  .swipe-cue__label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
  }
  .swipe-cue__arrow {
    display: inline-block;
    animation: swipe-nudge 2.2s var(--ease-in-out) infinite;
  }
  .swipe-cue__dots {
    display: flex;
    gap: 7px;
    align-items: center;
  }
  .swipe-cue__dots i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(28,24,20,0.2);
    transition: width 360ms var(--ease-out), background-color 360ms var(--ease-out);
  }
  .moodboard .swipe-cue__dots i,
  .sv-section--ink .swipe-cue__dots i,
  .sv-section--charcoal .swipe-cue__dots i { background: rgba(255,255,255,0.25); }
  .swipe-cue__dots i.is-active {
    width: 20px;
    border-radius: 3px;
    background: var(--c-olive);
  }
}
@keyframes swipe-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .swipe-cue__arrow { animation: none !important; }
}

/* ============================================================
   SHARED EDITORIAL MODULES (added)
   Programme-guide capture · solo guestbook testimonial ·
   WhatsApp concierge nudge. Built on the existing tokens so
   they read as part of the original art-direction.
   ============================================================ */

/* ---- Programme Guide — soft email capture ---- */
.pg-guide { background: var(--c-bone); padding: clamp(82px, 9vw, 132px) clamp(40px, 8vw, 132px); }
.pg-guide__inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(40px, 5vw, 96px); align-items: center;
}
.pg-guide__h {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(28px, 3.1vw, 46px); line-height: 1.1;
  letter-spacing: -0.012em; color: var(--c-charcoal);
  margin: 18px 0 0; max-width: 17ch;
}
.pg-guide__h .it { font-style: italic; }
.pg-guide__body { color: rgba(14,22,32,0.64); font-size: 15px; line-height: 1.72; margin: 20px 0 0; max-width: 42ch; }
.pg-guide__form { display: block; }
.pg-guide__form-lab {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--f-body); font-weight: 500; font-size: 10px;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--c-olive);
  margin-bottom: 22px;
}
.pg-guide__form-lab::after { content: ""; flex: 1; height: 1px; background: rgba(14,22,32,0.16); }
.pg-guide__row { display: flex; align-items: flex-end; gap: 18px; }
.pg-guide__row input {
  flex: 1; min-width: 0; background: transparent; border: 0;
  border-bottom: 1px solid rgba(14,22,32,0.28);
  padding: 12px 0; font-family: var(--f-body); font-size: 17px;
  color: var(--c-charcoal); outline: none;
  transition: border-color calc(220ms * var(--motion-scale)) var(--ease-out);
}
.pg-guide__row input::placeholder { color: rgba(14,22,32,0.4); }
.pg-guide__row input:focus { border-color: var(--c-aegean); }
.pg-guide__row button {
  flex: none; background: var(--c-aegean); color: var(--c-snow); border: 0;
  padding: 16px 26px; cursor: pointer;
  font-family: var(--f-body); font-weight: 500; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  transition: background-color calc(240ms * var(--motion-scale)) var(--ease-out);
}
.pg-guide__row button:hover { background: var(--c-charcoal); }
.pg-guide__note { margin: 18px 0 0; font-size: 12.5px; line-height: 1.6; color: rgba(14,22,32,0.5); max-width: 44ch; }
.pg-guide__done {
  display: none; font-family: var(--f-display); font-style: italic;
  font-size: 21px; color: var(--c-aegean); line-height: 1.4;
}
.pg-guide__form.is-done .pg-guide__row,
.pg-guide__form.is-done .pg-guide__note { display: none; }
.pg-guide__form.is-done .pg-guide__done { display: block; }
@media (max-width: 860px) {
  .pg-guide__inner { grid-template-columns: 1fr; gap: 30px; }
  .pg-guide__row { flex-wrap: wrap; gap: 16px; }
  .pg-guide__row input { flex: 1 1 100%; font-size: 16px; }
  .pg-guide__row button { width: 100%; padding: 18px; }
}

/* ---- Solo guestbook testimonial ---- */
.guest-quote { background: var(--c-pearl); padding: clamp(104px, 13vw, 178px) clamp(40px, 8vw, 132px); }
.guest-quote__inner {
  max-width: 1000px; margin: 0 auto; text-align: center;
  padding-top: clamp(44px, 5vw, 72px);
  border-top: 1px solid rgba(14,22,32,0.14);
}
.guest-quote__mark {
  display: block; font-family: var(--f-display); font-style: italic;
  font-size: 92px; line-height: 0.5; height: 40px;
  color: var(--c-olive); opacity: 0.85; user-select: none;
}
.guest-quote__text {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(27px, 3.3vw, 44px); line-height: 1.32;
  letter-spacing: -0.006em; color: var(--c-charcoal);
  margin: 0; text-wrap: balance;
}
.guest-quote__text .it { font-style: italic; }
.guest-quote__by {
  margin-top: 36px; font-family: var(--f-body); font-weight: 500;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(14,22,32,0.5);
  display: inline-flex; align-items: center; gap: 13px;
}
.guest-quote__by::before { content: ""; width: 30px; height: 1px; background: var(--c-olive); }
@media (max-width: 640px) {
  .guest-quote { padding: 84px 24px; }
  .guest-quote__mark { font-size: 72px; height: 30px; }
}

/* ---- WhatsApp concierge nudge (touch / small screens only) ---- */
.sv-whatsapp {
  position: fixed; right: 16px; bottom: 16px; z-index: 58;
  display: none; align-items: center; gap: 11px;
  padding: 12px 19px 12px 15px;
  background: var(--c-aegean); color: var(--c-snow);
  border-radius: 100px; text-decoration: none;
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 12px 30px rgba(14,22,32,0.30);
  font-family: var(--f-body); font-weight: 500;
  font-size: 12px; letter-spacing: 0.03em;
}
.sv-whatsapp__icon { width: 19px; height: 19px; display: block; flex: none; }
.sv-whatsapp__label { white-space: nowrap; line-height: 1; }
.sv-whatsapp__dot {
  position: absolute; top: 9px; right: 14px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-cool-steel);
  box-shadow: 0 0 0 0 rgba(148,165,179,0.7);
}
@media (prefers-reduced-motion: no-preference) {
  .sv-whatsapp__dot { animation: sv-wa-pulse 2.4s var(--ease-in-out) infinite; }
}
@keyframes sv-wa-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(148,165,179,0.55); }
  50% { box-shadow: 0 0 0 5px rgba(148,165,179,0); }
}
.sv-whatsapp.is-ready { animation: sv-wa-in 520ms var(--ease-out) both; }
@keyframes sv-wa-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 900px) {
  .sv-whatsapp { display: inline-flex; }
  /* lift the ambient-sound toggle clear of the nudge if both show */
  .sv-sound { bottom: 16px; }
}

.sv-nav .menu-item {
  list-style: none;
}