/* ==========================================================================
   Auremarè — design system
   Tokens from Naseera's approved brand direction (Brand Deck v2.0, July 2026):
   Deep Ocean Navy, Ivory, Champagne Gold; Cormorant Garamond + Cinzel + Inter.
   ========================================================================== */
/* --------------------------------------------------------------------------
   Self-hosted variable fonts (latin subsets) — no third-party requests.
   Metric-adjusted fallbacks keep CLS at zero during the swap period.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/fonts/cormorant-var-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/fonts/cormorant-italic-var-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cinzel";
  src: url("/assets/fonts/cinzel-var-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Fallback";
  src: local("Georgia");
  size-adjust: 94%;
  ascent-override: 98%;
  descent-override: 26%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22.5%;
  line-gap-override: 0%;
}

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

:root {
  --ink: #2a2620;
  --navy: #1d2634;
  --navy2: #243041;
  --ivory: #f8f5ef;
  --porcelain-card: #fdfbf6;
  --line: #e8ddd4;
  --taupe: #6c6259;
  --taupe2: #99897b;
  --gold: #d4b483;
  /* Deep champagne for text on light backgrounds — WCAG AA (6.5:1 on ivory). */
  --gold-deep: #6b5530;
  --champ: #ead7b4;
  /* Soft vertical sheen (gentle top highlight, no metallic diagonal streak). */
  --shimmer: linear-gradient(180deg, #e8d0a0 0%, #d4b483 52%, #c5a06a 100%);
  --serif: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  --display: "Cinzel", "Cormorant Fallback", Georgia, serif;
  --sans: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, sans-serif;
  --pad: clamp(20px, 5vw, 64px);
}

html { scroll-behavior: smooth; color-scheme: light; scrollbar-gutter: stable; }

/* Cross-document view transitions: calm 200ms fade between pages (Chromium). */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.2s; }

::selection { background: var(--champ); color: var(--navy); }

/* Scroll-reveal (elements get .reveal from JS; visible by default without JS). */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  .reveal { opacity: 1; transform: none; }
}

body {
  background: var(--ivory);
  font-family: var(--sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 1.6;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold-deep); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy); color: var(--champ); padding: 10px 18px;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   Logo lockup — gold A-monogram beside a Cinzel wordmark
   -------------------------------------------------------------------------- */
.logo-lockup {
  display: inline-flex; flex-direction: row; align-items: center; gap: 12px;
  text-decoration: none; line-height: 1;
}
.logo-mark { width: 54px; height: 44px; object-fit: contain; flex-shrink: 0; }
.logo-text { display: inline-flex; flex-direction: column; }
.logo-name {
  font-family: var(--display); font-weight: 500; font-size: 17px;
  letter-spacing: 0.22em; color: #f2e9d8;
}
.logo-sub {
  font-family: var(--sans); font-weight: 400; font-size: 7px;
  letter-spacing: 0.52em; margin-top: 0.55em; color: #c9bfa9;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(29, 38, 52, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(212, 180, 131, 0.28);
}
@media (prefers-reduced-transparency: reduce) {
  .site-header { background: var(--navy); backdrop-filter: none; }
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 12px var(--pad); max-width: 1360px; margin: 0 auto;
}
.nav-links {
  display: flex; gap: 28px; list-style: none; align-items: center;
}
.nav-links a {
  color: #e8e3d6; text-decoration: none; font-size: 12.5px;
  letter-spacing: 0.13em; text-transform: uppercase; white-space: nowrap;
  opacity: 0.88; transition: opacity 0.2s, color 0.2s;
  position: relative; padding-bottom: 3px;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links a[aria-current="page"] { opacity: 1; color: var(--champ); }
.nav-links a:hover { opacity: 1; color: var(--champ); }
.nav-toggle { display: none; }

.btn {
  display: inline-block;
  background: var(--shimmer);
  color: #2b2416; font-weight: 600; font-size: 14px;
  padding: 12px 26px; border-radius: 100px; text-decoration: none;
  letter-spacing: 0.02em; border: 0; cursor: pointer;
  box-shadow: 0 6px 18px rgba(120, 95, 45, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(120, 95, 45, 0.45); }
.btn:active { transform: translateY(0) scale(0.98); box-shadow: 0 4px 12px rgba(120, 95, 45, 0.3); transition-duration: 0.06s; }
.btn-book { font-size: 12.5px; padding: 11px 24px; letter-spacing: 0.08em; }
.btn.ghost {
  background: transparent; color: #eee9db;
  border: 1px solid rgba(238, 233, 219, 0.4); box-shadow: none;
}
.btn.ghost:hover { border-color: var(--champ); color: var(--champ); }
.btn.ghost-dark {
  background: transparent; color: var(--gold-deep);
  border: 1px solid var(--gold); box-shadow: none;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background:
    radial-gradient(120% 90% at 82% 6%, rgba(212, 180, 131, 0.2), transparent 55%),
    radial-gradient(90% 70% at 10% 100%, rgba(212, 180, 131, 0.09), transparent 60%),
    var(--navy);
  overflow: hidden;
  padding: clamp(70px, 10vw, 130px) var(--pad) clamp(60px, 8vw, 100px);
  min-height: min(72svh, 760px);
  display: flex; align-items: center;
}
.hero::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--shimmer); opacity: 0.9;
}
.hero-inner { max-width: 1360px; margin: 0 auto; }
.hero-content { max-width: 720px; }

.eyebrow {
  font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--gold); font-weight: 600; margin-bottom: 24px;
  display: flex; align-items: center; gap: 12px;
}
.eyebrow::before { content: ""; width: 30px; height: 1px; background: var(--gold); flex-shrink: 0; }

.hero h1 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(42px, 6.4vw, 80px); line-height: 1.04;
  color: #f4efe4; letter-spacing: 0;
  text-wrap: balance;
}
.hero h1 .sh { color: var(--champ); font-style: italic; }
.hero .lead {
  font-size: clamp(17px, 1.8vw, 20px); color: #c6c0b0; font-weight: 300;
  margin-top: 24px; max-width: 560px; line-height: 1.55;
}
.hero-cta { display: flex; gap: 16px; align-items: center; margin-top: 38px; flex-wrap: wrap; }
.hero .disc { font-size: 12.5px; color: #8e8672; margin-top: 22px; font-style: italic; }

/* Page hero (interior pages, smaller) */
.page-hero {
  background:
    radial-gradient(120% 120% at 70% 0%, rgba(212, 180, 131, 0.16), transparent 55%),
    var(--navy);
  padding: clamp(48px, 7vw, 84px) var(--pad);
  position: relative;
}
.page-hero::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--shimmer); opacity: 0.9;
}
.page-hero-inner { max-width: 1360px; margin: 0 auto; }
.page-hero h1 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(36px, 4.8vw, 56px); color: #f4efe4; line-height: 1.08;
  letter-spacing: 0; max-width: 800px;
}
.page-hero .lead {
  color: #c6c0b0; font-weight: 300; margin-top: 16px; max-width: 640px;
  font-size: clamp(16px, 1.6vw, 18px);
}

.breadcrumbs { margin-bottom: 18px; font-size: 12px; letter-spacing: 0.08em; }
.breadcrumbs ol { list-style: none; display: flex; gap: 8px; flex-wrap: wrap; }
.breadcrumbs a { color: var(--gold); text-decoration: none; text-transform: uppercase; }
.breadcrumbs li:not(:last-child)::after { content: "›"; margin-left: 8px; color: #8e8672; }
.breadcrumbs li:last-child { color: #c6c0b0; text-transform: uppercase; }

/* --------------------------------------------------------------------------
   Trust strip
   -------------------------------------------------------------------------- */
.trust {
  background: var(--navy2); color: #c2bcae;
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 14px 44px; padding: 18px var(--pad);
  font-size: 13.5px; letter-spacing: 0.04em; text-align: center;
}
.trust b { color: var(--champ); font-weight: 500; }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.sec { padding: clamp(56px, 8vw, 90px) var(--pad); }
.sec-inner { max-width: 1360px; margin: 0 auto; }
.sec-narrow { max-width: 820px; margin: 0 auto; }

.kick {
  font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gold-deep); font-weight: 600;
  display: flex; align-items: center; gap: 12px; justify-content: center;
}
.kick::before, .kick::after { content: ""; width: 26px; height: 1px; background: var(--gold); }
.kick.left { justify-content: flex-start; }
.kick.left::after { display: none; }

.sec h2 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(32px, 3.8vw, 46px); text-align: center;
  margin: 16px 0 10px; letter-spacing: 0; line-height: 1.12;
  text-wrap: balance;
}
.page-hero h1, .ctaband h2, .quote-sec blockquote p { text-wrap: balance; }
.prose p, .intro, .tcard p, .step p { text-wrap: pretty; }
.sec .intro {
  text-align: center; color: var(--taupe); font-size: 16px;
  max-width: 640px; margin: 0 auto 44px; line-height: 1.55;
}
.sec h3 { font-family: var(--serif); font-weight: 600; font-size: 24px; margin-bottom: 10px; }

/* Prose blocks (long-form pages) */
.prose { max-width: 760px; margin: 0 auto; }
.prose h2 {
  text-align: left; font-size: clamp(26px, 2.8vw, 34px); margin: 44px 0 14px;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 28px 0 10px; }
.prose p { margin-bottom: 16px; color: #3b352c; }
.prose ul, .prose ol { margin: 0 0 16px 22px; color: #3b352c; }
.prose li { margin-bottom: 8px; }
.prose .note {
  background: var(--porcelain-card); border: 1px solid var(--line);
  border-left: 3px solid var(--gold); border-radius: 8px;
  padding: 18px 22px; font-size: 14.5px; color: var(--taupe); margin: 24px 0;
}

/* --------------------------------------------------------------------------
   Treatment cards
   -------------------------------------------------------------------------- */
.tgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.tgrid.three { grid-template-columns: repeat(3, 1fr); max-width: 1050px; margin: 0 auto; }
.tcard {
  background: var(--porcelain-card); border: 1px solid var(--line);
  border-radius: 16px; padding: 30px 26px; position: relative; overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tcard:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(42, 38, 32, 0.08); }
.tcard .ic {
  width: 34px; height: 34px; margin-bottom: 18px; color: #b0894a;
}
.tcard .ic svg { width: 100%; height: 100%; display: block; }
.tcard p { font-size: 14px; color: var(--taupe); line-height: 1.55; }
.tcard a {
  display: inline-block; margin-top: 16px; font-size: 13px;
  color: var(--gold-deep); font-weight: 600; text-decoration: none; letter-spacing: 0.02em;
}
.tcard a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Dark sections (how it works, quote)
   -------------------------------------------------------------------------- */
.sec.dark { background: var(--navy); color: #e3ded0; }
.sec.dark h2 { color: #f2ede1; }
.sec.dark .intro { color: #c2bcae; }
.sec.dark .kick { color: var(--gold); }

.steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
  max-width: 1120px; margin: 0 auto;
}
.step { text-align: center; padding: 0 14px; }
.step .n {
  font-family: var(--serif); font-size: 22px; color: var(--gold);
  border: 1px solid rgba(212, 180, 131, 0.5); width: 52px; height: 52px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
}
.step h3 { color: #f2ede1; font-size: 22px; }
.step p { font-size: 14px; color: #c2bcae; line-height: 1.55; }

.quote-sec { background: var(--navy2); text-align: center; padding: clamp(56px, 8vw, 80px) var(--pad); }
.quote-sec blockquote p {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(24px, 2.8vw, 32px); color: #f0ebdc;
  max-width: 900px; margin: 0 auto; line-height: 1.4;
}
.quote-sec .who {
  color: var(--gold); font-size: 13px; letter-spacing: 0.14em;
  text-transform: uppercase; margin-top: 24px;
}

/* --------------------------------------------------------------------------
   Before / after
   -------------------------------------------------------------------------- */
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 1000px; margin: 0 auto; }
.baimg {
  border-radius: 14px; overflow: hidden; border: 1px solid var(--line);
  min-height: 280px; position: relative;
  background: linear-gradient(150deg, #efe9dd, #e2dacb);
  display: flex; align-items: center; justify-content: center;
}
.baimg .lab {
  position: absolute; top: 14px; left: 14px;
  background: rgba(29, 38, 52, 0.78); color: #ece5d4;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 100px;
}
.baimg .ph { color: var(--taupe2); font-size: 13px; font-style: italic; padding: 20px; text-align: center; }
.fineprint {
  text-align: center; margin-top: 26px; font-size: 13px; font-style: italic;
  color: var(--taupe2); max-width: 640px; margin-left: auto; margin-right: auto;
}

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */
.ctaband {
  position: relative; text-align: center;
  background: radial-gradient(120% 120% at 50% 0%, #2a3547, var(--navy));
  padding: clamp(60px, 8vw, 84px) var(--pad); overflow: hidden;
}
.ctaband::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: var(--shimmer);
}
.ctaband h2 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(34px, 4.2vw, 48px); color: #f4efe4;
}
.ctaband p { color: #c6c0b0; font-size: 16px; margin-top: 14px; }
.ctaband .btn { margin-top: 30px; font-size: 15px; padding: 15px 32px; }
.ctaband .disc { color: #837b66; font-size: 12px; margin-top: 20px; font-style: italic; }

/* --------------------------------------------------------------------------
   Tables (pricing)
   -------------------------------------------------------------------------- */
.price-table { width: 100%; border-collapse: collapse; margin: 10px 0 24px; background: var(--porcelain-card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.price-table th, .price-table td { text-align: left; padding: 15px 20px; border-bottom: 1px solid var(--line); font-size: 15px; }
.price-table th { background: var(--navy); color: var(--champ); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; font-size: 12px; }
.price-table tr:last-child td { border-bottom: 0; }
.price-table td:last-child { white-space: nowrap; font-weight: 600; color: var(--gold-deep); }

/* --------------------------------------------------------------------------
   FAQ accordion (native details/summary)
   -------------------------------------------------------------------------- */
.faq-list { max-width: 760px; margin: 0 auto; }
.faq-list details {
  background: var(--porcelain-card); border: 1px solid var(--line);
  border-radius: 12px; margin-bottom: 12px; overflow: hidden;
}
.faq-list summary {
  cursor: pointer; padding: 18px 22px; font-weight: 600; font-size: 17px;
  font-family: var(--serif); list-style: none; position: relative; padding-right: 48px;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  color: var(--gold-deep); font-size: 22px; font-family: var(--sans); font-weight: 300;
}
.faq-list details[open] summary::after { content: "–"; }
.faq-list details p { padding: 0 22px 18px; color: var(--taupe); font-size: 15px; }

/* Smooth accordion (Chromium 131+; instant open elsewhere — progressive). */
.faq-list details { interpolate-size: allow-keywords; }
.faq-list details::details-content {
  block-size: 0; overflow: hidden;
  transition: block-size 0.3s cubic-bezier(0.22, 1, 0.36, 1), content-visibility 0.3s allow-discrete;
}
.faq-list details[open]::details-content { block-size: auto; }
.faq-list summary::after { transition: transform 0.2s ease; }
.faq-list details[open] summary::after { transform: translateY(-50%) rotate(0deg); }

/* --------------------------------------------------------------------------
   Info cards / contact
   -------------------------------------------------------------------------- */
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1050px; margin: 0 auto; }
.info-card {
  background: var(--porcelain-card); border: 1px solid var(--line);
  border-radius: 14px; padding: 26px;
}
.info-card h3 { font-size: 20px; }
.info-card p, .info-card a { font-size: 14.5px; color: var(--taupe); line-height: 1.6; }
.info-card a { display: block; text-decoration: none; color: var(--gold-deep); font-weight: 500; margin-top: 4px; }
.info-card a:hover { text-decoration: underline; }

.map-embed { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-top: 40px; }
.map-embed iframe { display: block; width: 100%; height: 380px; border: 0; }
.map-facade {
  min-height: 380px; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(60% 60% at 50% 35%, rgba(212, 180, 131, 0.1), transparent 65%),
    var(--porcelain-card);
  text-align: center;
}
.map-facade-inner { padding: 32px; }
.map-facade-inner p { color: var(--taupe); margin-bottom: 18px; line-height: 1.6; }
.map-facade-inner strong { color: var(--ink); }
.map-facade-note { font-size: 12px; font-style: italic; color: var(--taupe2); margin-top: 14px; }

/* Card headings (h2 for correct document outline, styled like card titles) */
.info-card h2, .tcard h2 {
  font-family: var(--serif); font-weight: 600; text-align: left;
  margin: 0 0 10px; line-height: 1.3; text-wrap: balance;
}
.info-card h2 { font-size: 20px; }
.tcard h2 { font-size: 24px; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer { background: #151c28; color: var(--taupe2); }
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px;
  padding: 60px var(--pad) 40px; max-width: 1360px; margin: 0 auto;
}
.footer-h {
  color: var(--champ); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; margin-bottom: 16px; font-weight: 600; font-family: var(--sans);
}
.footer-col a, .footer-col p {
  color: #a49a8b; font-size: 13.5px; text-decoration: none;
  display: block; margin-bottom: 9px; line-height: 1.5;
}
.footer-col a:hover { color: var(--champ); }
.footer-tag { margin-top: 18px; max-width: 280px; }
.footer-legal {
  border-top: 1px solid #26303f; padding: 22px var(--pad) 90px;
  max-width: 1360px; margin: 0 auto; font-size: 12px; color: #a49a8b;
}
.footer-legal nav { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 12px; }
.footer-legal a { color: #a49a8b; text-decoration: none; }
.footer-legal a:hover { color: var(--champ); }
.footer-legal p { margin-bottom: 8px; }
.footer-disc { font-style: italic; line-height: 1.6; max-width: 900px; }

/* Mobile sticky book button */
.mobile-book {
  display: none; position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60;
  background: var(--shimmer); color: #2b2416; text-align: center;
  font-weight: 600; font-size: 15px; padding: 15px; border-radius: 100px;
  text-decoration: none; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .tgrid { grid-template-columns: repeat(2, 1fr); }
  .tgrid.three { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .nav-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    background: none; border: 1px solid rgba(238, 233, 219, 0.4);
    color: #e8e3d6; border-radius: 100px; padding: 9px 16px; cursor: pointer;
    font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-family: var(--sans);
  }
  .nav-toggle-bar { width: 16px; height: 2px; background: var(--champ); position: relative; }
  .nav-toggle-bar::before, .nav-toggle-bar::after {
    content: ""; position: absolute; left: 0; width: 16px; height: 2px; background: var(--champ);
  }
  .nav-toggle-bar::before { top: -5px; }
  .nav-toggle-bar::after { top: 5px; }
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; background: var(--navy); gap: 0;
    border-bottom: 1px solid rgba(212, 180, 131, 0.28);
    padding: 10px 0;
  }
  .nav-links.open { display: flex; }
  .nav-links li { width: 100%; }
  .nav-links a { display: block; padding: 14px var(--pad); font-size: 14px; }
  .site-nav { position: static; }
  .site-header { position: sticky; }
  .header-inner { position: relative; }
  .steps { grid-template-columns: 1fr; gap: 36px; }
  .info-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .tgrid, .tgrid.three { grid-template-columns: 1fr; }
  .ba { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .mobile-book { display: block; }
  .btn-book { display: none; }
  .trust { flex-direction: column; gap: 8px; }
  .hero-cta .btn { width: 100%; text-align: center; }
  .price-table th, .price-table td { padding: 12px 14px; font-size: 14px; }
  .logo-mark { width: 44px; height: 36px; }
  .logo-name { font-size: 15px; }
}

/* ==========================================================================
   Motion layer — refined, cutting-edge interactions.
   Progressive: everything below is a hover/scroll enhancement. Content is
   fully usable without JS, and all non-essential motion is disabled under
   prefers-reduced-motion (see the guard block at the end).
   ========================================================================== */

/* Scroll progress bar */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--gold), var(--champ));
  box-shadow: 0 0 10px rgba(212, 180, 131, 0.5);
  z-index: 70; pointer-events: none;
}

/* Header condenses on scroll */
.site-header { transition: box-shadow 0.3s ease; }
.site-header .header-inner { transition: padding 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.site-header.scrolled { box-shadow: 0 10px 34px rgba(8, 12, 18, 0.4); }
.site-header.scrolled .header-inner { padding-top: 8px; padding-bottom: 8px; }

/* Hero: drifting aurora glow behind the content */
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(38% 48% at 80% 18%, rgba(212, 180, 131, 0.30), transparent 62%),
    radial-gradient(34% 42% at 12% 88%, rgba(150, 120, 78, 0.22), transparent 60%);
  mix-blend-mode: screen;
  animation: auroraDrift 16s ease-in-out infinite alternate;
}
.hero-inner { position: relative; z-index: 1; }
@keyframes auroraDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 0.85; }
  100% { transform: translate3d(-4%, 3%, 0) scale(1.14); opacity: 1; }
}

/* Hero intro choreography (pure CSS, plays once on load) */
.hero-content > * { animation: heroIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.hero .eyebrow { animation-delay: 0.05s; }
.hero h1       { animation-delay: 0.15s; }
.hero .lead    { animation-delay: 0.32s; }
.hero-cta      { animation-delay: 0.46s; }
.hero .disc    { animation-delay: 0.58s; }
@keyframes heroIn {
  from { opacity: 0; transform: translateY(20px); filter: blur(10px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* Slow gold shimmer on the accent phrase */
.hero h1 .sh {
  background: linear-gradient(100deg, #ead7b4 0%, #d4b483 30%, #f4e8cd 50%, #d4b483 70%, #ead7b4 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: shimmerText 7s linear infinite;
}
@keyframes shimmerText { to { background-position: 200% center; } }

/* Buttons: light sheen sweep on hover */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ""; position: absolute; top: 0; left: -130%;
  width: 55%; height: 100%; transform: skewX(-20deg);
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  pointer-events: none;
}
.btn:hover::after { animation: sheen 0.85s ease; }
.mobile-book { position: relative; overflow: hidden; }
.mobile-book::after {
  content: ""; position: absolute; top: 0; left: -130%;
  width: 55%; height: 100%; transform: skewX(-20deg);
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  pointer-events: none; animation: sheen 3.4s ease-in-out 1.2s infinite;
}
@keyframes sheen { to { left: 140%; } }

/* Cards: cursor-following gold spotlight + subtle 3D tilt (JS sets vars) */
.tcard { transform-style: preserve-3d; will-change: transform; }
.tcard::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(212, 180, 131, 0.16), transparent 60%);
  opacity: 0; transition: opacity 0.35s ease; pointer-events: none; z-index: 0;
}
.tcard:hover::after { opacity: 1; }
.tcard > * { position: relative; z-index: 1; }

/* Line icons draw themselves in as the card reveals */
.tcard.reveal .ic svg path, .tcard.reveal .ic svg circle {
  stroke-dasharray: 180; stroke-dashoffset: 180;
}
.tcard.reveal.in .ic svg path, .tcard.reveal.in .ic svg circle {
  animation: drawIn 1.15s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
@keyframes drawIn { to { stroke-dashoffset: 0; } }

/* Richer scroll reveal: blur + lift */
.reveal { filter: blur(6px); }
.reveal.in { filter: blur(0); }

@media (prefers-reduced-motion: reduce) {
  .hero::after { animation: none; }
  .hero h1 .sh {
    animation: none; background: none;
    -webkit-text-fill-color: var(--champ); color: var(--champ);
  }
  .mobile-book::after { animation: none; }
  .scroll-progress { display: none; }
  .reveal { filter: none; }
  .tcard.reveal .ic svg path, .tcard.reveal .ic svg circle { stroke-dashoffset: 0; }
}

/* ---------------------------------------------------------------------------
   Paid-traffic landing page (/start). bodyclass: lp
   Distraction-free: site nav and header CTA are suppressed so the page has a
   single conversion path. The logo still links home for trust and for anyone
   who wants to check the business is real before booking.
   Not indexed (noindex in page meta) so it never competes with /book in
   organic search.
--------------------------------------------------------------------------- */
.lp .site-nav,
.lp .btn-book,
.lp .breadcrumbs { display: none; }

.lp .site-header .header-inner { justify-content: center; }

.lp-eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--taupe2);
  margin: 0 0 18px;
}

.lp-cta { margin: 32px 0 14px; }
.lp-cta .btn { font-size: 16px; padding: 17px 40px; }

.lp-microcopy {
  font-size: 14px;
  color: var(--taupe);
  margin: 0;
  max-width: 46ch;
}
.page-hero-inner .lp-microcopy { margin-inline: 0; }
.ctaband .lp-microcopy { margin: 18px auto 0; }

.lp-trust { padding-block: clamp(28px, 5vw, 44px); }

.lp-badges {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  grid-template-columns: 1fr;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.lp-badges li {
  background: #fff;
  padding: 18px 20px;
  margin: 0;
}
.lp-badges strong {
  display: block;
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: .02em;
  color: var(--ink);
}
.lp-badges span {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  color: var(--taupe);
}

.lp-steps { list-style: none; margin: 0; padding: 0; counter-reset: lpstep; }
.lp-steps li {
  counter-increment: lpstep;
  position: relative;
  padding-left: 52px;
  margin-bottom: 30px;
}
.lp-steps li::before {
  content: counter(lpstep);
  position: absolute;
  left: 0;
  top: -2px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--gold);
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 16px;
  color: var(--gold-deep);
}
.lp-steps strong { display: block; margin-bottom: 5px; }
.lp-steps p { margin: 0; }

/* The site's existing .mobile-book sticky bar carries the mobile CTA here, so
   the landing page deliberately does not add a second one. */

@media (min-width: 720px) {
  .lp-badges { grid-template-columns: repeat(4, 1fr); }
}