/* ============================================================
   Witzilin Med Spa
   Warm boutique re-skin of the NassifMD blueprint.
   Tokens come from 03-References/design-inspiration.md.
   ============================================================ */

:root {
  /* Color: warm white with champagne and warm gold accents, subtle rose-gold. Matches the Witzilin logo. */
  --bg-base: #FDFBFA;
  --bg-alt: #F4ECDB;
  --bg-dark: #2B2422;
  --accent: #C49A5C;
  --accent-deep: #8C6A2E;
  /* Deeper gold for links on the cream --bg-alt band, where --accent-deep drops to 4.24:1. */
  --accent-on-alt: #82612A;
  --accent-rose: #C8917B;
  --accent-peach: #E7A98C;
  --text-body: #3A322F;
  --text-heading: #2B2422;
  --text-on-dark: #FDFBFA;
  --line: #E8DCC4;

  /* Type */
  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Poppins", system-ui, sans-serif;

  /* Type scale */
  --fs-h1: clamp(2.5rem, 7vw, 4.75rem);
  --fs-h2: clamp(1.9rem, 4.5vw, 3rem);
  --fs-h3: clamp(1.3rem, 3vw, 1.6rem);
  --fs-body: 1.0625rem;
  --lh-body: 1.75;

  /* Spacing */
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;
  --content-max: 1180px;
  --content-narrow: 760px;

  /* Shape and motion */
  --radius: 2px;
  --radius-card: 8px;
  --shadow-soft: 0 10px 34px rgba(42, 36, 32, 0.10);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 560ms;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--bg-base);
  background-image: linear-gradient(rgba(253, 251, 250, 0.55), rgba(253, 251, 250, 0.55)), url('assets/bg-marble.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-heading);
  font-weight: 500;
  line-height: 1.12;
  margin: 0 0 0.4em;
  letter-spacing: 0.01em;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { margin: 0 0 1rem; }

a { color: var(--accent-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

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

/* Layout helpers */
.container { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 0 1.5rem; }
.narrow { max-width: var(--content-narrow); margin-left: auto; margin-right: auto; }
.center { text-align: center; }
.section { padding: var(--space-xl) 0; }

.eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-deep);
  font-weight: 600;
  margin-bottom: 0.6rem;
}
.lead { font-size: 1.15rem; color: var(--text-body); }
.fine-print { font-size: 0.85rem; color: #8a8178; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1.6rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--accent-peach); color: var(--text-heading); }
.btn-primary:hover { background: #D99576; }
.btn-ghost { background: transparent; color: var(--accent-deep); border-color: var(--accent-deep); }
.btn-ghost:hover { background: var(--accent-deep); color: #fff; }
.btn-ghost-dark { color: var(--text-heading); }
.btn-ghost-light { background: transparent; color: var(--text-on-dark); border-color: rgba(253, 251, 250, 0.7); }
.btn-ghost-light:hover { background: var(--text-on-dark); color: var(--text-heading); }

.stars { color: var(--accent-deep); letter-spacing: 0.1em; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
/* The marble lives on a pseudo-element so it can fade out at the bottom without fading the logo
   and controls with it. Masked to transparent so it melts into the hero photograph below. */
.site-header::before {
  content: "";
  position: absolute;
  /* Runs well past the header so the marble can thin out to nothing behind the logo. */
  inset: 0 0 -80px 0;
  z-index: 0;
  background-color: var(--bg-base);
  background-image: linear-gradient(rgba(253, 251, 250, 0.18), rgba(253, 251, 250, 0.18)), url('assets/bg-marble.jpg');
  background-size: cover;
  background-position: center;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.55) 22%, rgba(0, 0, 0, 0.28) 45%, rgba(0, 0, 0, 0.1) 68%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.55) 22%, rgba(0, 0, 0, 0.28) 45%, rgba(0, 0, 0, 0.1) 68%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}
.site-header .header-inner { position: relative; z-index: 1; }
/* Once scrolled it snaps back to the header box so no marble spills onto the content. */
.site-header.scrolled::before { inset: 0; -webkit-mask-image: none; mask-image: none; }
.site-header.scrolled { box-shadow: 0 2px 18px rgba(43, 36, 34, 0.08); }
.header-inner { display: flex; align-items: center; justify-content: flex-start; min-height: 142px; }
.logo {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-heading);
}
.logo span { color: var(--accent-deep); }
.logo:hover { text-decoration: none; }
.logo-img { height: 120px; width: auto; display: block; filter: drop-shadow(0 1px 6px rgba(253, 251, 250, 0.55)); }
.nav { display: none; gap: 2rem; }
.nav a {
  color: var(--text-heading);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
}
.nav a:hover { color: var(--accent-deep); text-decoration: none; }
.header-actions { display: flex; align-items: center; gap: 0.45rem; margin-left: auto; }
/* Pinned to the header's top-right corner, and centred on the menu button's axis rather
   than sharing its right edge: the control is wider than the button, so matching right
   edges left it looking skewed. Right inset backs off by half the width difference. */
.language-control {
  position: absolute;
  top: 12px;
  right: calc(1.5rem - 9px);
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  z-index: 2;
}
.language-code {
  /* Readable rather than ghosted: the inactive label measured 1.97:1 on the marble.
     Active state is carried by weight and colour instead of by fading this one out. */
  color: #6f665d;
  font-family: var(--font-body);
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
  transition: color var(--dur) var(--ease);
}
.language-code.is-active { color: #2B2422; font-weight: 700; }
/* Skeuomorphic switch: gold bezel, the flag fills the recessed track, glossy thumb slides over it. */
.language-toggle {
  position: relative;
  width: 34px;
  height: 17px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(160deg, #fdf3cf 0%, #e2c47c 18%, #b3893c 40%, #8a6423 56%, #caa356 74%, #f1dea3 90%, #fbf1cb 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 1px 2px rgba(43, 36, 34, 0.3), 0 4px 10px rgba(43, 36, 34, 0.16);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.language-track {
  position: absolute;
  inset: 1.5px;
  border-radius: 999px;
  overflow: hidden;
  background: #b22234;
  box-shadow: 0 0 0 1px rgba(90, 60, 20, 0.45);
}
.language-track::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), inset 0 -1px 1px rgba(255, 255, 255, 0.18);
  pointer-events: none;
}
.language-flag {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  transition: opacity var(--dur) var(--ease);
}
.language-flag-mx { opacity: 0; }
.language-thumb {
  position: absolute;
  top: 1px;
  left: 1px;
  z-index: 2;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #ffffff 0%, #fbfaf7 42%, #ebe7e0 80%, #d9d3c9 100%);
  box-shadow: 0 0 0 1px #c9a457, 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 7px rgba(0, 0, 0, 0.2), inset 0 1px 2px rgba(255, 255, 255, 0.95), inset 0 -3px 4px rgba(0, 0, 0, 0.08);
  transition: transform var(--dur) var(--ease);
}
.language-toggle.is-spanish .language-thumb { transform: translateX(17px); }
.language-toggle.is-spanish .language-flag-us { opacity: 0; }
.language-toggle.is-spanish .language-flag-mx { opacity: 1; }
.language-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* The logo's wordmark sits at 69% of its height, so the row's center leaves the controls floating 23px above it.
   Nudged with position, not transform: a transform inside a sticky ancestor drops this subtree on iOS Safari. */
@media (max-width: 859px) {
  .header-actions { position: relative; top: 23px; }
}
.header-cta { display: none; }

/* Explicit SVG rather than three empty spans sized by flex stretch, which is the part
   that failed to paint on iOS Safari. The icon now carries its own intrinsic size. */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: none; border: none; cursor: pointer; padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.nav-icon { display: block; width: 24px; height: 16px; overflow: visible; }
.nav-bar {
  fill: var(--text-heading);
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
/* Halo so the bars separate from whatever the hero crop puts behind them. */
.nav-icon { filter: drop-shadow(0 0 2px rgba(253, 251, 250, 0.9)); }
.site-header.nav-open .nav-bar-1 { transform: translateY(7px) rotate(45deg); }
.site-header.nav-open .nav-bar-2 { opacity: 0; }
.site-header.nav-open .nav-bar-3 { transform: translateY(-7px) rotate(-45deg); }

.site-header.nav-open .nav {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--bg-base);
  border-bottom: 1px solid var(--line);
  padding: 0.5rem 1.5rem 1.5rem;
}
.site-header.nav-open .nav a { padding: 0.9rem 0; border-bottom: 1px solid var(--line); }

/* Hero */
.hero {
  position: relative;
  /* Sits under the sticky header again so the header's marble can fade into the photograph. */
  min-height: calc(78vh + 142px);
  margin-top: -142px;
  padding-top: 142px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero-slides { position: absolute; inset: 0; overflow: hidden; }
.hero-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0;
  transition: opacity 1.5s ease;
}
.hero-slide.is-active { opacity: 1; animation: kenburns 22s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.1); } }
.ph-hero { position: absolute; inset: 0; }
.hero-overlay {
  position: absolute; inset: 0;
  /* Third layer rises from the bottom so the hero text block sits on a dark enough field.
     Without it the eyebrow measured 1.50:1; gold on a light photo has almost no separation. */
  background: linear-gradient(to top, rgba(43, 36, 34, 0.68) 0%, rgba(43, 36, 34, 0.5) 34%, rgba(43, 36, 34, 0) 70%), linear-gradient(to right, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.28) 42%, rgba(0, 0, 0, 0.02) 72%);
}
.hero-content { position: relative; z-index: 2; color: var(--text-on-dark); padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
/* Pale champagne, not --accent gold: gold on the hero scrim cannot reach 4.5:1 at this size. */
.hero-content .eyebrow { color: #FBF2E6; }
.hero-content h1 { color: var(--text-on-dark); font-size: clamp(2.2rem, 5vw, 3.6rem); max-width: 15ch; }
.hero-sub { font-size: 1.15rem; max-width: 32ch; color: rgba(251, 248, 244, 0.92); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin: 1.6rem 0 1.4rem; }
/* Phones: the sticky bottom bar already carries booking and calling, so the hero buttons are
   redundant there. Dropping them lets the headline sit lower and uncovers more of the portrait.
   The booking band's own buttons are untouched. */
@media (max-width: 859px) {
  .hero .hero-actions { display: none; }
  /* Clears the sticky booking bar without giving back much of the portrait. */
  .hero-content { padding-bottom: 3.25rem; }
}
.center-actions { justify-content: center; }
.hero-trust { font-size: 0.85rem; letter-spacing: 0.04em; color: rgba(251, 248, 244, 0.9); }
.hero-trust .stars { color: var(--accent); }

/* Intro */
.rhythm { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: 0.06em; color: var(--accent-deep); }
.intro { background: transparent; }
.intro-split { display: flex; flex-direction: column; gap: var(--space-md); }
.intro-media { position: relative; }
.intro-media .intro-img-main {
  aspect-ratio: 1400 / 1239;
  border: none;
  border-radius: 18px;
  box-shadow: 0 30px 60px rgba(43, 36, 34, 0.13);
}
.intro-text .lead { margin-bottom: 1.7rem; }
.intro-text h2 .hl { color: var(--accent-rose); }
@media (min-width: 860px) {
  .intro-split { flex-direction: row; align-items: center; gap: clamp(2.5rem, 5vw, 5.5rem); }
  .intro-media { flex: 0 0 48%; }
  .intro-text { flex: 1 1 auto; }
}

/* About */
.about { background: transparent; }
.about-grid { display: grid; gap: var(--space-md); align-items: center; }
.provider-portrait {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: #DFDFE1;
  box-shadow: var(--shadow-soft);
}
.provider-portrait img {
  display: block;
  width: 100%;
  height: auto;
}
.med-director { font-size: 0.95rem; padding-top: 0.5rem; border-top: 1px solid var(--line); margin-top: 1.2rem; }

/* Treatments and cards */
.treatments { background: var(--bg-alt); }
.section-head { margin-bottom: var(--space-lg); }
.card-grid { display: grid; gap: 1.4rem; grid-template-columns: 1fr; }
.card {
  background: var(--bg-base);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  padding-bottom: 1.4rem;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.card h3 { padding: 0 1.4rem; margin-top: 1.2rem; }
.card p { padding: 0 1.4rem; }
.card .price { font-weight: 600; color: var(--text-heading); }
.card-link { display: inline-block; margin: 0.4rem 1.4rem 0; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; }

/* Treatments carousel */
.treatments-carousel {
  display: flex;
  gap: 1.1rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  padding: 0.75rem 1.5rem 2.5rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}
.treatments-carousel.is-dragging {
  scroll-behavior: auto;
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}
.treatments-carousel.is-dragging .treat-card { transform: none; }
@media (hover: hover) and (pointer: fine) {
  .treatments-carousel { cursor: grab; }
}
.treat-card {
  position: relative;
  flex: 0 0 300px;
  height: 440px;
  border-radius: 10px;
  overflow: hidden;
  scroll-snap-align: start;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.6rem;
  color: #fff;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.treat-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(20, 15, 14, 0.62) 0%, rgba(20, 15, 14, 0.08) 34%, rgba(20, 15, 14, 0.08) 54%, rgba(20, 15, 14, 0.76) 100%);
}
.treat-card > * { position: relative; z-index: 1; }
.treat-cat { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin: 0 0 0.4rem; }
.treat-card h3 { color: #fff; font-size: 1.5rem; line-height: 1.15; margin: 0; text-transform: uppercase; letter-spacing: 0.02em; }
.treat-view { align-self: flex-start; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: #fff; border: 1px solid rgba(255, 255, 255, 0.85); padding: 0.65rem 1.1rem; border-radius: 2px; }
.treat-view:hover { background: var(--accent); color: #fff; border-color: var(--accent); text-decoration: none; }
.treat-card:hover { transform: scale(1.03); box-shadow: inset 0 0 0 2px var(--accent), 0 16px 36px rgba(43, 36, 34, 0.25); }
.treat-card:hover .treat-view { background: var(--accent); border-color: var(--accent); color: #fff; }
.carousel-wrap { position: relative; }
.carousel-arrow {
  position: absolute;
  top: 232px;
  transform: translateY(-50%);
  z-index: 5;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(253, 251, 250, 0.92);
  border: 1px solid var(--accent);
  color: var(--accent-deep);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(43, 36, 34, 0.14);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.carousel-arrow:hover { background: var(--accent); color: #fff; }
.carousel-arrow.prev { left: 0.75rem; }
.carousel-arrow.next { right: 0.75rem; }
@media (min-width: 860px) { .carousel-arrow { display: flex; } }

/* Results */
.results-carousel-shell { position: relative; }
.results-carousel {
  display: flex;
  gap: 1rem;
  margin: 0 -1rem;
  overflow-x: auto;
  padding: 0.25rem 1rem 1rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.results-carousel::-webkit-scrollbar { display: none; }
.results-carousel:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.result-card {
  flex: 0 0 min(86vw, 360px);
  margin: 0;
  overflow: hidden;
  scroll-snap-align: center;
  background: var(--bg-base);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: 0 12px 30px rgba(43, 36, 34, 0.08);
}
.result-media { aspect-ratio: 1 / 1; background: #f4efe9; }
.result-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.result-caption { display: grid; gap: 0.22rem; padding: 0.9rem 1rem 1rem; }
.result-kicker { color: var(--accent-deep); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.results-arrow {
  align-items: center;
  background: rgba(253, 251, 250, 0.96);
  border: 1px solid var(--accent);
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(43, 36, 34, 0.14);
  color: var(--accent-deep);
  cursor: pointer;
  display: none;
  font-size: 1.6rem;
  height: 48px;
  justify-content: center;
  line-height: 1;
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  width: 48px;
  z-index: 2;
}
.results-arrow:hover { background: var(--accent); color: #fff; }
.results-prev { left: -0.75rem; }
.results-next { right: -0.75rem; }
.results-dots { display: flex; gap: 0; justify-content: center; margin: 0 0 0.9rem; }
/* The dot stays 8px; the button around it carries the touch target. */
.results-dots button { align-items: center; background: none; border: 0; cursor: pointer; display: flex; height: 44px; justify-content: center; padding: 0; width: 40px; -webkit-tap-highlight-color: transparent; }
.results-dots button::before { background: #d8cabb; border-radius: 50%; content: ""; height: 8px; transition: background var(--dur) var(--ease), transform var(--dur) var(--ease); width: 8px; }
.results-dots button.is-active::before { background: var(--accent-deep); transform: scale(1.35); }
.results-dots button:focus-visible { border-radius: 22px; outline: 2px solid var(--accent); outline-offset: -8px; }

/* Reviews */
.reviews { background: var(--bg-alt); }
.review { background: var(--bg-base); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 1.6rem; position: relative; }
.review blockquote { margin: 0.5rem 0 0.8rem; font-family: var(--font-display); font-size: 1.3rem; line-height: 1.4; color: var(--text-heading); }
/* Reviewer name. #8a8178 measured 3.75:1 on --bg-base, under the 4.5 AA floor for this size. */
.review cite { font-style: normal; font-size: 0.85rem; color: #786f65; }

/* Concerns */
.concerns { background: transparent; }
.chips { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; margin: 1.4rem 0 1.8rem; }
.chip { border: 1px solid var(--accent-deep); color: var(--text-heading); border-radius: 40px; padding: 0.5rem 1.1rem; font-size: 0.85rem; }

/* Quote */
.quote-section {
  background-image: linear-gradient(rgba(253, 251, 250, 0.42), rgba(253, 251, 250, 0.42)), url('assets/marble.jpg');
  background-size: cover;
  background-position: center;
  color: var(--text-heading);
}
.big-quote { font-family: var(--font-display); font-size: clamp(1.6rem, 4vw, 2.6rem); line-height: 1.3; margin: 0 0 1rem; color: var(--text-heading); }
.quote-section cite { font-style: normal; font-size: 0.9rem; letter-spacing: 0.08em; color: var(--accent-deep); }

/* Booking band */
.book-band { background: var(--bg-alt); }

/* Footer */
.site-footer {
  background-color: var(--bg-base);
  background-image: linear-gradient(rgba(253, 251, 250, 0.78), rgba(253, 251, 250, 0.78)), url('assets/bg-marble.jpg');
  background-size: cover;
  background-position: center;
  color: var(--text-body);
  padding: var(--space-lg) 0 var(--space-md);
}
.footer-top {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}
.footer-side { font-size: 0.95rem; }
.footer-side p { margin-bottom: 0.55rem; }
.footer-side address { font-style: normal; line-height: 1.65; }
.footer-side a, .footer-social a, .footer-cta, .book-band a { color: var(--accent-on-alt); }
.footer-side a:hover, .footer-social a:hover, .footer-cta:hover { color: var(--text-heading); }
.footer-side-right { text-align: center; }
.footer-hours { font-size: 0.82rem; line-height: 1.65; color: rgba(58, 50, 47, 0.72); }
.footer-label {
  margin: 0 0 0.65rem;
  color: var(--accent-deep);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.footer-brand { display: flex; flex-direction: column; align-items: center; order: -1; text-align: center; }
.footer-brand-link { display: inline-flex; align-items: center; justify-content: center; }
.footer-brand-link:hover { text-decoration: none; }
.footer-logo-img { width: min(235px, 60vw); height: auto; }
.footer-lower {
  display: grid;
  gap: var(--space-md);
  align-items: center;
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(58, 50, 47, 0.16);
}
.footer-social, .footer-legal, .footer-cta-wrap { text-align: center; }
.footer-social .footer-label, .footer-cta-wrap .footer-label { margin-bottom: 0.3rem; }
.footer-social a, .footer-cta { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.footer-social a span, .footer-cta span { display: inline-block; margin-left: 0.25rem; transition: transform var(--dur) var(--ease); }
.footer-social a:hover span, .footer-cta:hover span { transform: translate(2px, -2px); }
.footer-legal p { margin: 0.2rem 0; }
.footer-legal a { color: var(--accent-on-alt); }
.site-footer .fine-print { color: rgba(58, 50, 47, 0.72); }
.disclaimer { margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid rgba(58, 50, 47, 0.16); }
.accessibility-bar { background: var(--bg-dark); color: var(--text-on-dark); padding: 0.8rem 0; }
.accessibility-bar p { margin: 0; font-size: 0.78rem; line-height: 1.5; text-align: center; }
.accessibility-bar a { color: var(--text-on-dark); text-decoration: underline; text-underline-offset: 2px; }

/* Placeholders */
.ph {
  background: linear-gradient(135deg, #EFE7E2 0%, #F7F2EF 100%);
  background-size: cover;
  background-position: center;
  border: 1px dashed #E0D2CB;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 220px;
  color: var(--text-heading);
}
.ph-tag { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; background: rgba(251, 248, 244, 0.8); padding: 0.35rem 0.7rem; border-radius: 2px; }
.ph-hero { position: absolute; inset: 0; border: none; background-size: cover; background-position: center; }
.ph-hero .ph-tag { position: absolute; top: 1rem; right: 1rem; }
.ph-portrait { min-height: 420px; border-radius: var(--radius-card); border: none; }
.ph-card { min-height: 170px; border: none; border-radius: 0; }
.ph-result { min-height: 240px; border-radius: var(--radius-card); }

/* Mobile sticky booking bar */
.mobile-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Flush to the edge, no gutter and no radius, so it reads as part of the device. */
  /* Each segment paints its own safe-area strip, so no container colour shows beneath. */
  box-shadow: 0 -1px 0 rgba(43, 36, 34, 0.14), 0 -10px 24px rgba(43, 36, 34, 0.10);
}
.mobile-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 0.6rem env(safe-area-inset-bottom, 0px);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  transition: background var(--dur) var(--ease);
}
.mobile-bar a:hover { text-decoration: none; }
/* Booking carries the peach so it stays the loud half, matching the hero's primary button.
   Both halves use the dark heading colour: peach reads 7.58:1, white 14.77:1. */
.mobile-bar-call { background: var(--bg-base); color: var(--text-heading); }
.mobile-bar-call:hover { background: #f4ece5; }
.mobile-bar-book { background: var(--accent-peach); color: var(--text-heading); }
.mobile-bar-book:hover { background: #dd9a7b; }
/* Narrow phones: the Spanish booking label wraps to two lines at the default tracking. */
@media (max-width: 380px) {
  .mobile-bar a { font-size: 0.74rem; letter-spacing: 0.06em; padding: 0 0.4rem; }
}

/* Reveal on scroll, gentle fade and rise with directional and staggered variants */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 760ms var(--ease), transform 760ms var(--ease); will-change: opacity, transform; }
.reveal.from-left { transform: translateX(-38px); }
.reveal.from-right { transform: translateX(38px); }
.reveal.is-visible { opacity: 1; transform: none; }

/* Keep content clear of the mobile bar */
body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }

@media (max-width: 859px) {
  .site-footer { padding: 2.5rem 0 1.5rem; }
  .footer-top { gap: 1.75rem; }
  .footer-brand { margin-bottom: 0.25rem; }
  .footer-logo-img { width: min(180px, 50vw); }
  .footer-side-left, .footer-side-right { text-align: center; }
  .footer-side address { line-height: 1.55; }
  .footer-side p { margin-bottom: 0.4rem; }
  .footer-lower { gap: 1.5rem; margin-top: 2.25rem; padding-top: 1.5rem; }
}

/* ============================================================
   Larger screens
   ============================================================ */
@media (min-width: 680px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .results-carousel { margin: 0; padding-left: 0; padding-right: 0; }
  .result-card { flex-basis: min(42vw, 360px); }
}

@media (min-width: 860px) {
  .nav { display: flex; margin-left: auto; }
  .header-actions { margin-left: 1rem; }
  .header-cta { display: inline-flex; }
  .nav-toggle { display: none; }
  .card-grid { grid-template-columns: repeat(4, 1fr); }
  .reviews-grid { grid-template-columns: repeat(3, 1fr); }
  .about-grid { grid-template-columns: 1fr 1.1fr; gap: var(--space-lg); }
  .footer-top { grid-template-columns: 1fr minmax(220px, 0.8fr) 1fr; gap: var(--space-md); }
  .footer-brand { order: 0; }
  .footer-side-left { text-align: left; }
  .footer-side-right { text-align: right; }
  .footer-lower { grid-template-columns: 1fr 1.4fr 1fr; }
  .footer-social { text-align: left; }
  .footer-cta-wrap { text-align: right; }
  .mobile-bar { display: none; }
  .results-arrow { display: flex; }
  body { padding-bottom: 0; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .card { transition: none; }
  .hero-slide { transition: none; transform: none; animation: none; }
}

/* Legal / policy pages. Sits below the transparent header, so it needs its own top offset. */
.legal-page { padding-top: calc(142px + var(--space-lg)); background: var(--bg-base); }
.legal-page h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 1rem; }
.legal-page h2 { font-size: clamp(1.3rem, 3vw, 1.7rem); margin: 2.4rem 0 0.8rem; }
.legal-page p { margin-bottom: 1rem; }
.legal-page .lead { margin-bottom: 1.6rem; }
.legal-list { margin: 0 0 1.4rem 1.1rem; padding: 0; }
.legal-list li { margin-bottom: 0.7rem; line-height: var(--lh-body); }
@media (max-width: 859px) { .legal-page { padding-top: calc(98px + var(--space-md)); } }