/* ============================================================
   Beauty & Wellness Template — light editorial, calm and elegant
   Fonts: Fraunces (headings) + Jost (body), Google Fonts

   RE-SKIN NOTE: to rebrand for a client, edit the VALUES in
   :root below and nothing else. Keep every variable NAME.
   ============================================================ */

:root {
  /* --- surfaces: warm cream / linen --- */
  --bg: #faf6f0;
  --surface: #fffdf9;
  --surface-2: #f3ece1;
  --line: rgba(43, 39, 35, 0.10);
  --line-strong: rgba(43, 39, 35, 0.20);

  /* --- text --- */
  --text: #2b2723;
  --muted: #6f675e;

  /* --- accents: rosewood blush + deep sage --- */
  --accent: #9d5049;
  --accent-dark: #83413b;
  --accent-2: #5c6e55;
  --accent-soft: rgba(157, 80, 73, 0.10);
  --accent-line: rgba(157, 80, 73, 0.38);
  /* muted gold — hairlines, menu leaders, review stars, and the large italic
     step numbers. 3.2:1 on --bg, so it clears AA for LARGE text (24px+) only.
     Never use it for body copy or small text. */
  --gold: #a9854f;
  /* text colour that sits ON --accent — must stay AA (4.5:1) */
  --on-accent: #fffaf5;

  --font-head: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Jost', system-ui, sans-serif;
  --wrap: 1180px;
  --radius: 16px;
  --shadow: 0 18px 44px rgba(74, 58, 44, 0.12);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
html:focus-within { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  line-height: 1.14;
  letter-spacing: -0.01em;
  font-weight: 520;
  text-wrap: balance;
}
/* editorial signature: the emphasised phrase goes serif-italic in rosewood */
h1 em, h2 em, h3 em { font-style: italic; font-weight: 500; color: var(--accent); }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

::selection { background: var(--accent); color: var(--on-accent); }

/* ---------- skip link ---------- */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--accent); color: var(--on-accent); padding: 10px 18px; border-radius: 0 0 10px 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ---------- reveal animations ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }

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

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-body); font-weight: 500; font-size: 0.98rem;
  letter-spacing: 0.04em;
  padding: 15px 32px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; transition: transform 0.25s var(--ease), background 0.25s, border-color 0.25s, color 0.25s;
  min-height: 48px;
}
.btn:active { transform: scale(0.97); }
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-dark); transform: translateY(-2px); }
.btn--ghost { border-color: var(--line-strong); color: var(--text); background: transparent; }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.btn--lg { padding: 18px 38px; font-size: 1.02rem; }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--accent-2); outline-offset: 3px; border-radius: 6px;
}

/* ---------- header ---------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background 0.35s var(--ease), border-color 0.35s, box-shadow 0.35s;
  border-bottom: 1px solid transparent;
}
.header.scrolled {
  background: rgba(250, 246, 240, 0.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
  box-shadow: 0 8px 28px rgba(74, 58, 44, 0.08);
}
.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 14px 24px; max-width: 1320px; margin: 0 auto;
}

/* ---------- brand: styled text mark (no logo file needed) ---------- */
.brand { display: inline-flex; align-items: center; gap: 13px; flex-shrink: 0; min-height: 44px; }
.brand__mark {
  width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-head); font-weight: 520; font-size: 1.08rem; letter-spacing: 0.02em;
}
.brand__text { display: flex; flex-direction: column; line-height: 1.2; }
.brand__name { font-family: var(--font-head); font-weight: 520; font-size: 1.2rem; letter-spacing: 0; }
.brand__tag {
  font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted); font-weight: 500;
}

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  font-family: var(--font-body); font-weight: 400; font-size: 0.97rem;
  padding: 10px 14px; border-radius: 8px; color: var(--text);
  position: relative; transition: color 0.2s;
}
.nav a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 1px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--accent); }
.header__cta { display: flex; align-items: center; gap: 18px; }
.header__phone {
  font-family: var(--font-body); font-weight: 500; font-size: 0.97rem; white-space: nowrap;
  color: var(--text); transition: color 0.2s;
}
.header__phone:hover { color: var(--accent); }
.header__cta .btn { padding: 11px 24px; min-height: 44px; }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--line-strong); border-radius: 10px;
  width: 46px; height: 44px; cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.nav-toggle span { display: block; width: 20px; height: 1.5px; background: var(--text); transition: transform 0.3s var(--ease), opacity 0.2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 940px) {
  .nav {
    position: fixed; top: 74px; left: 16px; right: 16px; z-index: 99;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
    padding: 12px; box-shadow: var(--shadow);
    opacity: 0; transform: translateY(-12px); pointer-events: none;
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  }
  .nav.open { opacity: 1; transform: none; pointer-events: auto; }
  .nav a { padding: 13px 16px; }
  .nav a::after { display: none; }
  .nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
  .nav-toggle { display: inline-flex; }
  .header__phone { display: none; }
}
@media (max-width: 560px) {
  .header__cta .btn { display: none; }
  .brand__mark { width: 40px; height: 40px; }
  .brand__name { font-size: 1.08rem; }
}

/* ---------- hero ----------
   Light theme: legibility comes from a CREAM SCRIM laid over the photo,
   not from darkening the image. Text always sits on cream, so the crop
   can shift at any breakpoint without contrast ever failing. */
.hero {
  position: relative; display: flex; align-items: center;
  min-height: min(92dvh, 880px); padding: 180px 0 100px; overflow: hidden; isolation: isolate;
}
.hero--page { min-height: min(60dvh, 620px); padding: 160px 0 80px; }
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; animation: heroZoom 10s var(--ease) forwards; }
@keyframes heroZoom { from { transform: scale(1.07); } to { transform: scale(1); } }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg,
      rgba(250, 246, 240, 0.97) 0%,
      rgba(250, 246, 240, 0.93) 34%,
      rgba(250, 246, 240, 0.55) 60%,
      rgba(250, 246, 240, 0.12) 100%),
    linear-gradient(180deg, rgba(250, 246, 240, 0.35) 0%, rgba(250, 246, 240, 0) 45%);
}
.hero__content { max-width: 700px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-body); font-weight: 500; font-size: 0.76rem;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-2);
  margin-bottom: 26px;
}
.eyebrow::before { content: ""; width: 32px; height: 1px; background: var(--gold); flex-shrink: 0; }
.hero h1 { font-size: clamp(2.35rem, 5.6vw, 4.2rem); margin-bottom: 24px; }
.hero__lede { font-size: clamp(1.04rem, 1.5vw, 1.2rem); color: var(--muted); max-width: 560px; margin-bottom: 36px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 44px; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 12px 34px; padding-top: 28px; border-top: 1px solid var(--line-strong); }
.hero__trust li { display: flex; align-items: center; gap: 10px; font-size: 0.93rem; color: var(--muted); }
.hero__trust svg { width: 17px; height: 17px; color: var(--accent); flex-shrink: 0; }

@media (max-width: 700px) {
  /* content goes full-width on mobile, so the scrim has to cover more of the frame */
  .hero::after {
    background:
      linear-gradient(180deg,
        rgba(250, 246, 240, 0.90) 0%,
        rgba(250, 246, 240, 0.94) 45%,
        rgba(250, 246, 240, 0.98) 100%);
  }
}

/* ---------- sections ---------- */
.section { padding: clamp(72px, 9vw, 112px) 0; position: relative; }
.section--tint { background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section__head { max-width: 700px; margin-bottom: clamp(44px, 5vw, 68px); }
.section__head h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); margin-bottom: 18px; }
.section__head p { color: var(--muted); font-size: 1.05rem; }
.section__head--row {
  max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.section__head--row > div { max-width: 640px; }

/* ---------- service pillars: editorial image-over-card ---------- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 1020px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .pillars { grid-template-columns: 1fr; } }
.pillar {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s;
}
.pillar img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.7s var(--ease); }
.pillar__media { overflow: hidden; }
.pillar:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--accent-line); }
.pillar:hover img { transform: scale(1.05); }
.pillar__body { padding: 28px 26px 30px; display: flex; flex-direction: column; flex-grow: 1; }
.pillar__num {
  font-family: var(--font-body); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.22em;
  color: var(--accent-2); display: block; margin-bottom: 12px;
}
.pillar h3 { font-size: 1.42rem; margin-bottom: 12px; }
.pillar p { font-size: 0.96rem; color: var(--muted); margin-bottom: 20px; flex-grow: 1; }
.pillar__link {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 0.92rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500;
  color: var(--accent);
}
.pillar__link svg { width: 16px; height: 16px; transition: transform 0.3s var(--ease); }
.pillar:hover .pillar__link svg { transform: translateX(5px); }

/* ---------- marquee ---------- */
.marquee {
  overflow: hidden; padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--surface);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track { display: flex; gap: 0; width: max-content; animation: marquee 44s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee__track span {
  font-family: var(--font-head); font-weight: 400; font-style: italic; font-size: 1.1rem; white-space: nowrap;
  color: var(--muted); display: inline-flex; align-items: center;
}
/* small gold diamond between items */
.marquee__track span::after {
  content: ""; width: 5px; height: 5px; margin: 0 30px;
  background: var(--gold); transform: rotate(45deg); flex-shrink: 0;
}

/* ---------- about / why ---------- */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(36px, 5vw, 76px); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.split__media { position: relative; }
.split__media img { border-radius: var(--radius); border: 1px solid var(--line); width: 100%; height: 100%; object-fit: cover; }
.split__media--stack { display: grid; gap: 18px; }
.split__badge {
  position: absolute; left: -18px; bottom: 30px;
  background: var(--accent); color: var(--on-accent); border-radius: 14px; padding: 20px 24px;
  font-family: var(--font-head); box-shadow: var(--shadow);
}
.split__badge strong { display: block; font-size: 1.9rem; font-weight: 520; line-height: 1; }
.split__badge small { font-family: var(--font-body); font-size: 0.8rem; font-weight: 400; opacity: 0.86; letter-spacing: 0.04em; }
@media (max-width: 560px) { .split__badge { left: 12px; } }
.split__content h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); margin-bottom: 22px; }
.split__content > p { color: var(--muted); margin-bottom: 18px; font-size: 1.03rem; }
.ticklist { margin-top: 28px; display: grid; gap: 16px; }
.ticklist li { display: flex; gap: 14px; align-items: flex-start; }
.ticklist svg { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; margin-top: 5px; }
.ticklist strong { font-family: var(--font-head); font-weight: 520; }
.ticklist span { color: var(--muted); }

/* ---------- stats ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; }
@media (max-width: 560px) { .stats { grid-template-columns: 1fr 1fr; } }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 22px; }
.stat strong { display: block; font-family: var(--font-head); font-weight: 520; font-size: 1.95rem; color: var(--accent-2); line-height: 1.12; font-variant-numeric: tabular-nums; }
.stat span { font-size: 0.87rem; color: var(--muted); }

/* ---------- reviews ---------- */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .reviews { grid-template-columns: 1fr; } }
.review {
  position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 34px 30px 30px; display: flex; flex-direction: column; gap: 16px;
  transition: transform 0.3s var(--ease), border-color 0.3s;
}
/* oversized serif quote glyph, editorial-magazine style */
.review::before {
  content: "\201C"; position: absolute; top: 6px; right: 22px;
  font-family: var(--font-head); font-size: 5.5rem; line-height: 1;
  color: var(--accent-soft); pointer-events: none;
}
.review:hover { transform: translateY(-5px); border-color: var(--accent-line); }
.review > * { position: relative; }
.review__stars { display: flex; gap: 3px; }
.review__stars svg { width: 16px; height: 16px; color: var(--gold); }
.review blockquote { font-size: 1.01rem; color: var(--text); flex-grow: 1; }
.review figcaption { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; border-top: 1px solid var(--line); }
.review figcaption strong { font-family: var(--font-head); font-weight: 520; font-size: 0.99rem; padding-top: 16px; }
.review figcaption span { font-size: 0.86rem; color: var(--muted); }

.ratings-bar {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 48px;
  margin-top: 36px; padding: 26px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface);
}
.ratings-bar div { text-align: center; }
.ratings-bar strong {
  display: block; font-family: var(--font-head); font-weight: 520; font-size: 1.5rem;
  color: var(--accent-2); line-height: 1.2; font-variant-numeric: tabular-nums;
}
.ratings-bar span { font-size: 0.84rem; color: var(--muted); }

/* ---------- gallery mosaic ---------- */
.mosaic { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 860px) { .mosaic { grid-template-columns: repeat(2, 1fr); } }
.mosaic figure {
  position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line);
  aspect-ratio: 4 / 3; margin: 0;
}
.mosaic figure.tall { grid-row: span 2; aspect-ratio: auto; }
@media (max-width: 560px) { .mosaic figure.tall { grid-row: span 1; aspect-ratio: 4 / 3; } }
.mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.mosaic figure:hover img { transform: scale(1.04); }
/* caption sits on a dark scrim because it overlays photography, not the page */
.mosaic figcaption {
  position: absolute; inset: auto 0 0 0; padding: 44px 18px 15px;
  background: linear-gradient(180deg, transparent, rgba(43, 39, 35, 0.86));
  font-size: 0.87rem; font-weight: 400; color: #fdfaf6;
  opacity: 0; transform: translateY(8px); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.mosaic figure:hover figcaption, .mosaic figure:focus-within figcaption { opacity: 1; transform: none; }

/* ---------- feature cards (service pages) ---------- */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .features { grid-template-columns: 1fr; } }
.feature {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 34px 30px; transition: transform 0.3s var(--ease), border-color 0.3s;
}
.feature:hover { transform: translateY(-5px); border-color: var(--accent-line); }
.feature__icon {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); margin-bottom: 22px;
}
.feature__icon svg { width: 25px; height: 25px; }
.feature h3 { font-size: 1.24rem; margin-bottom: 12px; }
.feature p { color: var(--muted); font-size: 0.96rem; }

/* ---------- process ---------- */
.process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: step; }
@media (max-width: 900px) { .process { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .process { grid-template-columns: 1fr; } }
.process li {
  counter-increment: step; padding: 26px 0 0; position: relative;
  border-top: 1px solid var(--line-strong);
}
.process li::before {
  content: "0" counter(step); font-family: var(--font-head); font-weight: 400; font-style: italic;
  font-size: 1.6rem; color: var(--gold); display: block; margin-bottom: 14px;
}
.process h3 { font-size: 1.12rem; margin-bottom: 10px; }
.process p { font-size: 0.94rem; color: var(--muted); }

/* ---------- pill list ---------- */
.pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pills li {
  border: 1px solid var(--line-strong); border-radius: 999px; padding: 9px 20px;
  font-size: 0.9rem; font-weight: 400; color: var(--text);
  transition: border-color 0.25s, background 0.25s, color 0.25s;
}
.pills li:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

/* ---------- treatment menu (salon price list) ---------- */
.menu-groups { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(36px, 4vw, 56px) clamp(40px, 5vw, 72px); }
@media (max-width: 860px) { .menu-groups { grid-template-columns: 1fr; } }
.menu-group h3 {
  font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase;
  font-family: var(--font-body); font-weight: 500; color: var(--accent-2);
  margin-bottom: 6px;
}
.menu { border-top: 1px solid var(--line-strong); }
.menu li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px;
  padding: 18px 2px; border-bottom: 1px solid var(--line);
}
.menu__name { flex: 0 1 auto; font-family: var(--font-head); font-weight: 520; font-size: 1.04rem; }
/* dotted gold leader, printed-menu style */
.menu__dots { flex: 1 1 24px; min-width: 20px; align-self: flex-end; margin-bottom: 6px; border-bottom: 1px dotted var(--gold); }
.menu__price {
  flex-shrink: 0; font-family: var(--font-head); font-weight: 520; font-size: 1.04rem;
  color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.menu__note { flex: 1 1 100%; margin-top: 5px; font-size: 0.91rem; color: var(--muted); }

/* ---------- opening hours ---------- */
.hours { margin-top: 2px; }
.hours div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 18px;
  padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 0.95rem;
}
.hours div:last-child { border-bottom: 0; }
.hours dt { color: var(--muted); }
.hours dd { font-family: var(--font-head); font-weight: 520; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hours dd.hours--closed { font-family: var(--font-body); font-weight: 400; font-style: italic; color: var(--muted); }

/* ---------- price cards ---------- */
.prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.prices--single { grid-template-columns: minmax(0, 480px); justify-content: center; }
@media (max-width: 900px) { .prices { grid-template-columns: 1fr; } }
.price {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 34px 30px; display: flex; flex-direction: column; gap: 12px;
}
.price--flag { border-color: var(--accent-line); box-shadow: var(--shadow); }
.price h3 { font-size: 1.2rem; }
.price strong {
  font-family: var(--font-head); font-weight: 520; font-size: 2.1rem; color: var(--accent);
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
.price p { color: var(--muted); font-size: 0.95rem; }
.price .ticklist { margin-top: 6px; gap: 12px; }
.price .ticklist span { font-size: 0.94rem; }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative; overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--accent-line);
  border-radius: 22px; padding: clamp(46px, 6vw, 76px); text-align: center;
}
.cta-band::before {
  content: ""; position: absolute; inset: -50%;
  background:
    radial-gradient(circle at 78% 16%, rgba(157, 80, 73, 0.10), transparent 44%),
    radial-gradient(circle at 16% 84%, rgba(92, 110, 85, 0.10), transparent 46%);
}
.cta-band > * { position: relative; }
.cta-band h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom: 16px; }
.cta-band p { color: var(--muted); max-width: 560px; margin: 0 auto 32px; font-size: 1.04rem; }
.cta-band__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 36px 32px; }
.contact-card h3 { font-size: 1.4rem; margin-bottom: 22px; }
.contact-card ul { display: grid; gap: 20px; }
.contact-card li { display: flex; gap: 16px; align-items: flex-start; }
.contact-card li svg { width: 21px; height: 21px; color: var(--accent); flex-shrink: 0; margin-top: 4px; }
.contact-card li > div { min-width: 0; }
.contact-card li strong { display: block; font-family: var(--font-head); font-weight: 520; font-size: 0.98rem; margin-bottom: 2px; }
.contact-card li a, .contact-card li span { color: var(--muted); font-size: 0.96rem; }
.contact-card li a:hover { color: var(--accent); }
.contact-card__socials { display: flex; gap: 12px; margin-top: 28px; padding-top: 26px; border-top: 1px solid var(--line); }
.contact-card__socials a {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong);
  display: grid; place-items: center; color: var(--text); transition: border-color 0.25s, background 0.25s, transform 0.25s, color 0.25s;
}
.contact-card__socials a:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); transform: translateY(-3px); }
.contact-card__socials svg { width: 19px; height: 19px; }

.form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 36px 32px; }
.form h3 { font-size: 1.4rem; margin-bottom: 10px; }
.form > p { color: var(--muted); font-size: 0.96rem; margin-bottom: 26px; }
.form-row { margin-bottom: 18px; }
.form-row label { display: block; font-family: var(--font-body); font-weight: 500; font-size: 0.9rem; margin-bottom: 8px; letter-spacing: 0.02em; }
.form-row input, .form-row select, .form-row textarea {
  width: 100%; padding: 14px 16px; min-height: 48px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: 10px;
  font-family: var(--font-body); font-size: 1rem;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.form-row textarea { min-height: 130px; resize: vertical; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-row small { display: block; margin-top: 7px; font-size: 0.85rem; color: var(--muted); }
.form-row--pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .form-row--pair { grid-template-columns: 1fr; } }
.form-note { margin-top: 16px; font-size: 0.95rem; color: var(--accent-2); min-height: 1.4em; }

/* ---------- page hero breadcrumbs ---------- */
.crumbs { display: flex; gap: 10px; align-items: center; font-size: 0.88rem; color: var(--muted); margin-bottom: 10px; }
/* padded so the breadcrumb link still clears a 44px tap target on mobile */
.crumbs a { display: inline-block; padding: 11px 0; }
.crumbs a:hover { color: var(--accent); }
/* separator stays --muted, not --gold: at 14px it needs the full 4.5:1 */
.crumbs span { color: var(--muted); }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--line); background: var(--surface-2); padding: 68px 0 34px; }
.footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 36px; margin-bottom: 46px; }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__brand .brand { margin-bottom: 20px; }
.footer__brand p { color: var(--muted); font-size: 0.95rem; max-width: 300px; }
.footer h4 {
  font-family: var(--font-body); font-size: 0.74rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 20px;
}
.footer ul { display: grid; gap: 11px; }
.footer ul a, .footer ul span { color: var(--muted); font-size: 0.95rem; transition: color 0.2s; }
.footer ul a:hover { color: var(--accent); }
.footer__bottom {
  border-top: 1px solid var(--line); padding-top: 26px;
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  color: var(--muted); font-size: 0.86rem;
}

/* ---------- floating call button (mobile) ---------- */
.call-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent); display: none; place-items: center;
  box-shadow: 0 12px 30px rgba(157, 80, 73, 0.38);
  transition: transform 0.25s var(--ease);
}
.call-fab:hover { transform: scale(1.06); }
.call-fab svg { width: 23px; height: 23px; }
@media (max-width: 700px) {
  .call-fab { display: grid; }
  /* comfortable tap targets + clearance so the FAB never sits on the last line */
  .footer ul { gap: 2px; }
  .footer ul a, .footer ul span { display: inline-block; padding: 10px 0; }
  .contact-card li a { display: inline-block; padding: 10px 0; }
  .demo-note { padding-bottom: 88px; }
}

/* ---------- demo ribbon (remove when handing a real site over) ---------- */
.demo-note {
  background: var(--surface); border-top: 1px solid var(--line);
  padding: 15px 24px; text-align: center; font-size: 0.83rem; color: var(--muted);
}
.demo-note strong { color: var(--accent-2); font-weight: 500; }

/* ---------- WhatsApp ---------- */
/* WhatsApp is how most South African clients actually book, so this float shows
   on every breakpoint, not just mobile. The green is WhatsApp's own brand colour
   and is deliberately NOT driven from the :root tokens — leave it when re-skinning. */
.wa-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 91;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25d366; color: #04240f; display: grid; place-items: center;
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.42);
  transition: transform 0.25s var(--ease);
}
.wa-fab:hover { transform: scale(1.06); }
.wa-fab svg { width: 28px; height: 28px; }

.btn--whatsapp { background: #25d366; color: #04240f; border-color: #25d366; }
.btn--whatsapp:hover { background: #1fbe5b; border-color: #1fbe5b; color: #04240f; }
.btn--whatsapp svg { width: 20px; height: 20px; margin-right: 8px; vertical-align: -4px; }

@media (max-width: 700px) {
  /* stack the call button above the WhatsApp float so they never overlap */
  .call-fab { bottom: 86px; }
  .demo-note { padding-bottom: 152px; }
}