/* ---------- Self-hosted fonts (Rev 12): replaces the Google Fonts request ---------- */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/cormorant-garamond-400.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/cormorant-garamond-500.woff2") format("woff2")}
@font-face{font-family:"Fira Sans";font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/fira-sans-300.woff2") format("woff2")}
@font-face{font-family:"Fira Sans";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/fira-sans-400.woff2") format("woff2")}
@font-face{font-family:"Fira Sans";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/fira-sans-500.woff2") format("woff2")}
@font-face{font-family:"Outfit";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/outfit-400.woff2") format("woff2")}
@font-face{font-family:"Outfit";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/outfit-500.woff2") format("woff2")}

/* =========================================================
   LUSSO Dental  ·  lusso.dental
   Colour: the Lusso Surgery Colour and Material Palette (limewash ivory,
   sand beige, cacao brown, brushed bronze, microcement, soft black), so the
   site reads like the rooms. Type and layout rules from the Brand Pack.
   Type
     Outfit              wordmark, labels, buttons (tracked caps)
     Cormorant Garamond  headlines, founder quotes
     Fira Sans           body, captions, tables
   Layout rules from the pack: no more than three type sizes per page,
   short generous line lengths, gold for emphasis never paragraphs.
   ========================================================= */

:root {
  /* Surgery colour and material palette (Lusso Surgery Colour Palette board) */
  --cream:       #F5EFE6;   /* limewash warm ivory, walls and ceiling (lightened for screen) */
  --limewash:    #ECE1D2;   /* limewash swatch, secondary panel */
  --sand:        #CDBDA8;   /* sand beige cabinetry */
  --microcement: #C5B7A8;   /* reception desk, lines and rules */
  --taupe:       #A69380;   /* Belmont 291-3779 taupe chair */
  --stonegrey:   #7A7163;   /* stone upholstery, muted text */
  --bronze:      #906C45;   /* brushed bronze metal, accents and CTA */
  --bronze-lt:   #B8905F;   /* bronze highlight on dark grounds */
  --cacao:       #3D291C;   /* cacao brown, accents and deep panels */
  --cacao-deep:  #2E1F15;
  --soft-black:  #222221;   /* frames and fixtures, footer, body text */
  --walnut:      #704C33;   /* feature wood, hover */
  --logo-gold:   #B0904A;   /* official mark colourway */

  /* semantic aliases used throughout the stylesheet */
  --ink: var(--soft-black);
  --green: var(--cacao);
  --green-deep: var(--cacao-deep);
  --gold: var(--bronze);
  --gold-light: var(--bronze-lt);
  --gold-hover: var(--walnut);
  --navy: var(--soft-black);
  --muted: var(--stonegrey);
  --stone: var(--limewash);

  --ink-70: rgba(34, 34, 33, 0.75);
  --line: rgba(122, 113, 99, 0.28);
  --gold-line: rgba(144, 108, 69, 0.55);
  --gold-line-soft: rgba(144, 108, 69, 0.28);
  --cream-70: rgba(245, 239, 230, 0.74);
  --cream-50: rgba(245, 239, 230, 0.5);

  --bg: var(--cream);
  --text: var(--ink);

  --font-display: "Cormorant Garamond", "Spectral", Georgia, serif;
  --font-body: "Fira Sans", "Helvetica Neue", Arial, sans-serif;
  --font-label: "Outfit", "Jost", "Helvetica Neue", Arial, sans-serif;

  --rail: 1200px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --measure: 62ch;

  --track-eyebrow: 0.24em;
  --track-btn: 0.14em;

  --t-eyebrow: 0.72rem;
  --t-body: 1rem;
  --t-lead: clamp(1.08rem, 1rem + 0.4vw, 1.25rem);
  --t-h3: clamp(1.5rem, 1.3rem + 0.9vw, 2.1rem);
  --t-h2: clamp(2rem, 1.5rem + 2vw, 3.2rem);
  --t-h1: clamp(2.4rem, 1.7rem + 3.2vw, 4.4rem);
}

/* One committed look: cream page, forest green panels. Every colour is painted. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 400; line-height: 1.08; letter-spacing: 0.005em; text-wrap: balance; color: var(--green); }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--green); color: var(--cream); padding: 0.75rem 1.2rem; }
.skip:focus { left: 0; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--rail); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 860px; }
.section { padding-block: clamp(3.5rem, 8vw, 7rem); }
.section--tight { padding-block: clamp(2.25rem, 5vw, 4rem); }
.section--navy { background: var(--green); color: var(--cream); }          /* deep panel (forest green) */
.section--navy h1, .section--navy h2, .section--navy h3 { color: var(--cream); }
.section--sand { background: var(--stone); color: var(--ink); }

.grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 900px) {
  .grid--split { grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(2.5rem, 5vw, 5rem); }
  .grid--40-60 { grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(2.5rem, 5vw, 5rem); }
  .grid--split.is-flipped > :first-child { order: 2; }
}
.stack { display: flex; flex-direction: column; }
.stack--xs { gap: 0.5rem; } .stack--sm { gap: 0.9rem; } .stack--md { gap: 1.4rem; } .stack--lg { gap: 2.2rem; } .stack--xl { gap: clamp(2.5rem, 5vw, 4rem); }

/* ---------- type ---------- */
.eyebrow {
  font-family: var(--font-label); font-size: var(--t-eyebrow); font-weight: 500; letter-spacing: var(--track-eyebrow);
  text-transform: uppercase; color: var(--gold); line-height: 1.4;
}
.section--navy .eyebrow { color: var(--gold-light); }
.h1 { font-size: var(--t-h1); }
.h1--sentence { text-transform: none; }
.h2 { font-size: var(--t-h2); }
.h2--sentence { text-transform: none; }
.h3 { font-size: var(--t-h3); }
.lead { font-size: var(--t-lead); line-height: 1.55; max-width: var(--measure); }
.strong { font-weight: 500; }
.muted { color: var(--muted); }
.section--navy .muted { color: var(--cream-70); }
.prose { max-width: var(--measure); }
.prose p + p { margin-top: 1em; }
.prose h3 { margin-top: 1.8em; margin-bottom: 0.4em; }
.prose ul { padding-left: 1.1rem; list-style: disc; margin-top: 0.8em; }
.prose li { margin-bottom: 0.35em; }
.prose li::marker { color: var(--gold); }
.small { font-size: 0.86rem; }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.gold { color: var(--gold); }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.section--navy .rule { background: var(--gold-line-soft); }
.rule--gold { width: 2.75rem; height: 1px; background: var(--gold); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 52px; padding: 0.9rem 1.8rem;
  background: var(--bronze); color: var(--cream);
  font-family: var(--font-label); font-size: 0.8rem; font-weight: 500;
  letter-spacing: var(--track-btn); text-transform: uppercase;
  border: 1px solid var(--bronze); border-radius: 2px; cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
  text-align: center; white-space: nowrap;
}
.btn:hover { background: var(--cacao); border-color: var(--cacao); color: var(--cream); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn--outline { background: transparent; color: var(--green); border-color: var(--green); }
.btn--outline:hover { background: var(--green); color: var(--cream); border-color: var(--green); }
.section--navy .btn--outline { color: var(--cream); border-color: var(--gold-line); }
.section--navy .btn--outline:hover { background: transparent; border-color: var(--gold-light); color: var(--gold-light); }
@media (max-width: 767px) { .btn--full-m { width: 100%; } }

.textlink {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-label); font-size: 0.76rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--green); border-bottom: 1px solid var(--gold); padding-bottom: 0.25rem;
}
.textlink:hover { border-bottom-color: var(--green); }
.section--navy .textlink { color: var(--gold-light); border-bottom-color: var(--gold-line); }
.section--navy .textlink:hover { border-bottom-color: var(--gold-light); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--cream);
  border-bottom: 1px solid var(--gold-line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 64px; }
@media (min-width: 768px) { .header-inner { height: 80px; } }
.brand { display: inline-flex; align-items: center; gap: 0.8rem; color: var(--ink); }
.brand-mark { width: 30px; height: auto; }
@media (min-width: 768px) { .brand-mark { width: 36px; } }
.brand-word { display: flex; flex-direction: column; line-height: 1; font-family: var(--font-label); }
.brand-word b { font-weight: 400; font-size: 1.05rem; letter-spacing: 0.38em; }
.brand-word span { font-size: 0.54rem; letter-spacing: 0.44em; margin-top: 0.32rem; color: var(--muted); }
.header-right { display: flex; align-items: center; gap: 1.6rem; }
.header-phone {
  display: inline-flex; align-items: center; gap: 0.55rem;
  color: var(--green); font-family: var(--font-label); font-size: 0.9rem; letter-spacing: 0.1em; font-weight: 400;
  min-height: 44px; min-width: 44px; justify-content: center;
}
.header-phone .label { display: none; }
@media (min-width: 768px) { .header-phone .label { display: inline; } }
.header-cta { display: none; }
@media (min-width: 768px) { .header-cta { display: inline-flex; min-height: 46px; padding-block: 0.65rem; } }
.header-hours { display: none; font-family: var(--font-label); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
@media (min-width: 1040px) { .header-hours { display: inline; } }

/* sticky mobile CTA */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom));
  background: var(--cream); border-top: 1px solid var(--gold-line);
  transform: translateY(110%); transition: transform 220ms ease;
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta .btn { width: 100%; }
@media (min-width: 768px) { .sticky-cta { display: none; } }

/* ---------- hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--green); color: var(--cream);
  padding-block: clamp(3rem, 8vw, 7.5rem) clamp(3rem, 7vw, 6rem);
}
.hero__bg { position: absolute; inset: 0; z-index: -1; background-size: cover; background-position: center 40%; opacity: 0.34; }
.hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(61,41,28,0) 25%, rgba(61,41,28,0.92) 100%); }
.hero__inner { display: grid; gap: 2rem; }
@media (min-width: 900px) { .hero__inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); align-items: end; gap: 4rem; } }
.hero h1 { color: var(--cream); max-width: 18ch; }
.hero .lead { color: var(--cream); max-width: 50ch; }
.hero .lead strong { font-weight: 500; }
.hero__offer { color: var(--cream-70); max-width: 50ch; }
.hero__offer b { color: var(--gold-light); font-weight: 400; }
.hero__note { font-size: 0.82rem; color: var(--cream-50); letter-spacing: 0.04em; }
.hero__side { border-left: 1px solid var(--gold-line-soft); padding-left: 1.5rem; display: grid; gap: 1.1rem; color: var(--cream-70); font-size: 0.92rem; }
.hero__side b { display: block; color: var(--gold-light); font-family: var(--font-label); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.68rem; margin-bottom: 0.2rem; }
@media (max-width: 899px) { .hero__side { display: none; } }

/* ---------- offer table ---------- */
.offer-panel { background: var(--stone); border: 1px solid var(--gold-line); padding: clamp(1.5rem, 4vw, 3rem); }
.offer-list { display: grid; gap: 0; align-items: start; border-top: 1px solid var(--gold-line-soft); }
.offer-row { padding: 0; border-bottom: 1px solid var(--gold-line-soft); font-size: 1rem; }
.offer-row .price { color: var(--gold); font-family: var(--font-label); font-weight: 500; white-space: nowrap; }
@media (min-width: 720px) { .offer-list { grid-template-columns: 1fr 1fr; column-gap: 3rem; } }

/* Offer item explainers: click, tap or keyboard toggles; hover reveals on pointer devices */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.xrow__head { display: flex; justify-content: space-between; gap: 1.5rem; align-items: baseline; width: 100%; padding: 0.9rem 0; margin: 0; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.xrow__head:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.xrow__name { position: relative; }
.xrow__i { display: inline-flex; align-items: center; justify-content: center; width: 1.05rem; height: 1.05rem; margin-left: 0.5rem; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold); font-family: var(--font-label); font-size: 0.66rem; font-style: normal; line-height: 1; vertical-align: 0.1em; transition: background-color 160ms ease, color 160ms ease; }
.xrow:hover .xrow__i, .xrow.is-open .xrow__i, .xrow:focus-within .xrow__i { background: var(--gold); color: var(--cream); }
.xrow__more { display: none; padding: 0 0 0.95rem; }
.xrow__more p { margin: 0; max-width: 52ch; font-size: 0.9rem; line-height: 1.55; color: var(--muted); }
.xrow.is-open .xrow__more, .xrow:focus-within .xrow__more { display: block; }
@media (hover: hover) and (pointer: fine) { .xrow:hover .xrow__more { display: block; } }
.section--navy .xrow__more p { color: rgba(245,239,230,0.78); }
.offer-total { display: flex; flex-wrap: wrap; gap: 0.5rem 2.5rem; align-items: baseline; padding-top: 1.4rem; font-size: 1.05rem; }
.offer-total .price { color: var(--gold); font-family: var(--font-display); font-size: 1.9rem; font-weight: 500; }
.offer-total .free { color: var(--green); font-weight: 500; }
.offer-fine { font-size: 0.82rem; color: var(--muted); }
.offer-fine a { text-decoration: underline; text-underline-offset: 0.2em; }

/* ---------- press ---------- */
.press { text-align: center; }
.press__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 2rem; align-items: center; justify-items: center; max-width: 820px; margin-inline: auto; }
@media (min-width: 700px) { .press__row { grid-template-columns: repeat(4, 1fr); } }
.press__logo { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0.5rem 0.75rem; filter: grayscale(1); opacity: 0.55; transition: opacity 160ms ease, filter 160ms ease; }
.press__logo img { width: auto; display: block; }
.press__logo:hover, .press__logo:focus-visible { filter: grayscale(0); opacity: 1; }

/* ---------- portrait / imagery ---------- */
.frame { position: relative; overflow: hidden; background: var(--stone); }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame--4x5 { aspect-ratio: 4 / 5; }
.frame--4x3 { aspect-ratio: 4 / 3; }
.frame--16x9 { aspect-ratio: 16 / 9; }
.frame--1x1 { aspect-ratio: 1 / 1; }
.frame__tag { position: absolute; left: 0; bottom: 0; padding: 0.45rem 0.8rem; background: rgba(61,41,28,0.85); color: var(--cream); font-family: var(--font-label); font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; }
.credentials { display: flex; flex-wrap: wrap; gap: 0.35rem 1.2rem; font-family: var(--font-label); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-light); }
.quote { font-family: var(--font-display); font-size: var(--t-h3); line-height: 1.25; color: var(--cream); font-style: italic; }

/* ---------- treatments ---------- */
.treatment { display: grid; gap: 1.5rem; padding-block: clamp(2.5rem, 5vw, 4.5rem); border-top: 1px solid var(--line); }
.treatment:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 900px) {
  .treatment { grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
  .treatment.is-flipped > .treatment__media { order: 2; }
}
.treatment__body { display: flex; flex-direction: column; gap: 1rem; }
.treatment__body p { max-width: var(--measure); }
.treatment__list { display: grid; gap: 0.45rem; margin-top: 0.3rem; }
.treatment__list li { position: relative; padding-left: 1.3rem; color: var(--muted); font-size: 0.97rem; }
.treatment__list li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 0.6rem; height: 1px; background: var(--gold); }

/* ---------- results ---------- */
.results-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .results-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } }
.result { position: relative; background: var(--green-deep); aspect-ratio: 1 / 1; overflow: hidden; }
.result img { width: 100%; height: 100%; object-fit: cover; }
.result__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.55rem 0.75rem; background: linear-gradient(180deg, rgba(61,41,28,0) 0%, rgba(61,41,28,0.92) 100%); color: var(--cream); font-family: var(--font-label); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; }

.clips { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .clips { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } }
@media (min-width: 1000px) { .clips { grid-template-columns: repeat(4, 1fr); } }
.clip { position: relative; aspect-ratio: 16 / 9; background: var(--green-deep); overflow: hidden; }
.clip img, .clip video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.clip__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(61,41,28,0.25); border: 0; cursor: pointer; padding: 0; width: 100%; transition: background-color 160ms ease; }
.clip__play:hover { background: rgba(61,41,28,0.1); }
.clip__play span { width: 56px; height: 56px; border-radius: 50%; background: var(--bronze-lt); color: var(--cacao-deep); display: inline-flex; align-items: center; justify-content: center; }
.clip__play svg { margin-left: 3px; }
.clip__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.55rem 0.75rem; background: linear-gradient(180deg, rgba(61,41,28,0) 0%, rgba(61,41,28,0.92) 100%); color: var(--cream); font-family: var(--font-label); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; pointer-events: none; }
.clip.is-playing .clip__play, .clip.is-playing .clip__cap { display: none; }

/* ---------- treatment carousels (manual, never auto advance) ---------- */
.carousel { position: relative; }
.carousel__track { display: flex; margin: 0; padding: 0; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; aspect-ratio: 1 / 1; background: var(--stone); }
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__slide { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.carousel__slide picture, .carousel__slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.carousel__btn { position: absolute; top: calc(50% - 0.85rem); transform: translateY(-50%); width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid rgba(245,239,230,0.5); border-radius: 50%; background: rgba(61,41,28,0.55); color: var(--cream); cursor: pointer; transition: background-color 160ms ease, opacity 160ms ease; }
.carousel__btn:hover { background: var(--bronze); border-color: var(--bronze); }
.carousel__btn--prev { left: 0.75rem; }
.carousel__btn--next { right: 0.75rem; }
.carousel__btn[disabled] { opacity: 0.35; cursor: default; }
.carousel__dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: 0.7rem; }
.carousel__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--microcement); cursor: pointer; transition: background-color 160ms ease, transform 160ms ease; }
.carousel__dot.is-active { background: var(--bronze); transform: scale(1.25); }
.carousel__dot:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; }
.carousel__count { position: absolute; top: 0.75rem; left: 0.9rem; margin: 0; padding: 0.2rem 0.55rem; background: rgba(61,41,28,0.6); color: var(--cream); font-family: var(--font-label); font-size: 0.66rem; letter-spacing: 0.14em; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) { .carousel__track { scroll-behavior: auto; } }

/* ---------- included panel ---------- */
.included { display: grid; gap: 0; align-items: start; border-top: 1px solid var(--gold-line-soft); }
.included-row { padding: 0; border-bottom: 1px solid var(--gold-line-soft); }
.included-row .price { color: var(--gold); font-family: var(--font-label); font-weight: 500; white-space: nowrap; }
@media (min-width: 720px) { .included { grid-template-columns: 1fr 1fr; column-gap: 3rem; } }
.totals { display: flex; flex-wrap: wrap; gap: 0.5rem 2.5rem; padding-top: 1.2rem; align-items: baseline; }
.totals .price { color: var(--gold); font-family: var(--font-display); font-size: 1.8rem; font-weight: 500; }

/* ---------- form ---------- */
.form-panel { background: var(--green); color: var(--cream); padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid var(--gold-line-soft); }
.form { display: grid; gap: 1rem; }
.form .two { display: grid; gap: 1rem; }
@media (min-width: 640px) { .form .two { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label { font-family: var(--font-label); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-light); }
.field input, .field select, .field textarea { font: inherit; font-size: 1rem; color: var(--ink); background: var(--cream); border: 1px solid transparent; border-radius: 2px; padding: 0.8rem 0.9rem; min-height: 50px; width: 100%; }
.field input:focus, .field select:focus { outline: none; border-color: var(--gold-light); box-shadow: 0 0 0 2px var(--gold-line-soft); }
.field .hint { font-size: 0.78rem; color: var(--cream-50); }
.consent { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.9rem; color: var(--cream); }
.consent input { width: 20px; height: 20px; min-height: 0; margin-top: 0.15rem; flex: none; accent-color: var(--gold-light); }
.consent small { display: block; color: var(--cream-70); font-size: 0.8rem; margin-top: 0.25rem; }
.consent a { text-decoration: underline; text-underline-offset: 0.2em; color: var(--gold-light); }
.form-status { min-height: 1.4em; font-size: 0.9rem; color: var(--gold-light); }
.form-status.is-error { color: var(--cream); }

/* ---------- visit ---------- */
.visit-details { display: grid; gap: 0; }
.visit-row { display: grid; grid-template-columns: 1fr; gap: 0.2rem; padding: 1rem 0; border-top: 1px solid var(--line); }
@media (min-width: 560px) { .visit-row { grid-template-columns: 10rem 1fr; gap: 1.5rem; } }
.visit-row:last-child { border-bottom: 1px solid var(--line); }
.visit-row dt { font-family: var(--font-label); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); padding-top: 0.35em; }
.visit-row dd { margin: 0; }

/* ---------- footer: navy is the reserve colour ---------- */
.site-footer { background: var(--navy); color: var(--cream-70); padding-block: clamp(3rem, 6vw, 4.5rem) 1.5rem; font-size: 0.9rem; }
.footer-grid { display: grid; gap: 2rem; }
@media (min-width: 800px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.5rem; } }
.footer-label { display: block; font-family: var(--font-label); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 0.9rem; }
.footer-list { display: flex; flex-direction: column; gap: 0.5rem; }
.footer-list a:hover { color: var(--gold-light); }
.site-footer .brand { color: var(--cream); }
.site-footer .brand-word span { color: var(--cream-50); }
.footer-tagline { font-family: var(--font-display); font-size: 1.5rem; font-style: italic; color: var(--cream); }
.footer-legal { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--gold-line-soft); display: grid; gap: 0.6rem; font-size: 0.78rem; color: var(--cream-50); max-width: 90ch; }
.footer-legal a { color: var(--cream-70); text-decoration: underline; text-underline-offset: 0.2em; }

/* ---------- cookie notice ---------- */
.cookie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; background: var(--green); color: var(--cream); border-top: 1px solid var(--gold-line); padding: 1rem var(--gutter) calc(1rem + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; gap: 0.8rem 1.5rem; align-items: center; justify-content: space-between; font-size: 0.86rem; }
.cookie[hidden] { display: none !important; }
.cookie .btn { min-height: 44px; padding: 0.6rem 1.2rem; }
.cookie .btn--outline { color: var(--cream); border-color: var(--gold-line); }

/* ---------- fees page ---------- */
.fees { width: 100%; border-collapse: collapse; }
.fees caption { text-align: left; font-family: var(--font-display); font-size: var(--t-h3); font-weight: 400; padding-bottom: 0.7rem; color: var(--green); }
.fees td { padding: 0.7rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.fees td:last-child { text-align: right; white-space: nowrap; color: var(--gold); font-family: var(--font-label); font-weight: 500; padding-left: 1.5rem; }
.fees td small { display: block; color: var(--muted); font-size: 0.84rem; }
.table-wrap { overflow-x: auto; }

.tiers { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .tiers { grid-template-columns: repeat(3, 1fr); } }
.tier { background: var(--cream); border: 1px solid var(--line); padding: clamp(1.4rem, 3vw, 2rem); display: flex; flex-direction: column; gap: 1rem; }
.tier--feature { border-color: var(--gold); }
.tier .price { font-family: var(--font-display); font-size: 2.4rem; font-weight: 400; color: var(--cacao); }
.tier .price small { font-family: var(--font-label); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-left: 0.4rem; }
.tier ul { display: grid; gap: 0.5rem; font-size: 0.95rem; }
.tier li { position: relative; padding-left: 1.3rem; color: var(--muted); }
.tier li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 0.6rem; height: 1px; background: var(--gold); }
.tier .worth { font-family: var(--font-label); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-top: auto; padding-top: 0.6rem; border-top: 1px solid var(--line); }

/* ---------- utilities ---------- */
.btn-row { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; }
.center { text-align: center; }
.mt-1 { margin-top: 1rem; }
.hide-m { display: none; }
@media (min-width: 768px) { .hide-m { display: initial; } }

/* =========================================================
   Rev 8 · full website: navigation, contact layer, page components
   ========================================================= */

/* ---------- promo bar ---------- */
.promo { background: var(--cacao); color: var(--cream); font-size: 0.82rem; }
.promo a { display: flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 36px; padding-block: 0.35rem; text-align: center; color: var(--cream-70); }
.promo a:hover { color: var(--cream); }
.promo__tag { font-family: var(--font-label); font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-light); }
.promo svg { flex: none; }

/* ---------- header (multi page) ---------- */
.header-inner { gap: 1.25rem; }
.nav { display: none; }
@media (min-width: 1100px) { .nav { display: block; } }
.nav__list { display: flex; align-items: center; gap: 0.2rem; }
.nav__item { position: relative; }
.nav__link { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 44px; padding: 0.4rem 0.75rem; font-family: var(--font-label); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid transparent; }
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--bronze); }
.nav__link[aria-current="page"] { border-bottom-color: var(--bronze); }
.nav__link svg { transition: transform 160ms ease; }
.nav__item--has-mega.is-open .nav__link svg, .nav__item--has-mega:hover .nav__link svg { transform: rotate(180deg); }

.mega { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); width: min(1100px, 96vw); background: var(--cream); border: 1px solid var(--gold-line); border-top: 0; box-shadow: 0 24px 48px rgba(34,34,33,0.12); display: none; z-index: 65; }
.nav__item--has-mega.is-open .mega { display: block; }
@media (hover: hover) and (pointer: fine) { .nav__item--has-mega:hover .mega, .nav__item--has-mega:focus-within .mega { display: block; } }
.mega__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; padding-block: 2rem; }
.mega__label { display: block; font-family: var(--font-label); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.8rem; }
.mega__col ul { display: grid; gap: 0.45rem; }
.mega__col a { font-size: 0.95rem; color: var(--ink); }
.mega__col a:hover { color: var(--bronze); }
.mega__col--cta { border-left: 1px solid var(--line); padding-left: 2rem; display: flex; flex-direction: column; gap: 0.9rem; }
.mega__col--cta p { font-size: 0.92rem; color: var(--muted); }

.header-actions { display: flex; align-items: center; gap: 0.35rem; }
.hdr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 44px; min-width: 44px; padding: 0.4rem 0.6rem; color: var(--green); font-family: var(--font-label); font-size: 0.8rem; letter-spacing: 0.08em; background: none; border: 0; cursor: pointer; border-radius: 2px; }
.hdr-btn:hover { color: var(--bronze); }
.hdr-btn--phone span, .hdr-btn--wa span { display: none; }
@media (min-width: 1280px) { .hdr-btn--phone span { display: inline; } }
.hdr-btn--wa { color: #1f8f4e; }
.hdr-btn--menu { color: var(--ink); }
@media (min-width: 1100px) { .hdr-btn--menu { display: none; } }
.header-cta { display: none; }
@media (min-width: 900px) { .header-cta { display: inline-flex; min-height: 44px; padding: 0.6rem 1.2rem; margin-left: 0.4rem; } }

/* mobile drawer */
.drawer { position: fixed; inset: 0; top: 0; z-index: 90; background: var(--cream); overflow-y: auto; padding: 5rem var(--gutter) 3rem; }
.drawer[hidden] { display: none; }
.drawer__list { display: grid; gap: 0.35rem; }
.drawer__top a { display: block; padding: 0.7rem 0; font-family: var(--font-display); font-size: 1.6rem; color: var(--green); border-bottom: 1px solid var(--line); }
.drawer__group { font-family: var(--font-label); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); padding: 1.2rem 0 0.4rem; }
.drawer__list li:not(.drawer__top):not(.drawer__group) a { display: block; padding: 0.4rem 0; font-size: 1rem; color: var(--ink); }
.drawer__contact { margin-top: 2rem; display: grid; gap: 0.7rem; }
.drawer__mail { text-align: center; color: var(--muted); text-decoration: underline; text-underline-offset: 0.2em; }
body.drawer-open { overflow: hidden; }
body.drawer-open .site-header { z-index: 95; }
body.drawer-open .hdr-btn--menu { color: var(--bronze); }

/* mobile action bar and floating WhatsApp */
.actionbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: grid; grid-template-columns: 1fr 1fr 1.2fr; background: var(--cream); border-top: 1px solid var(--gold-line); padding-bottom: env(safe-area-inset-bottom); }
.actionbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; min-height: 58px; font-family: var(--font-label); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); border-right: 1px solid var(--line); }
.actionbar a:last-child { border-right: 0; }
.actionbar a[data-wa-link] { color: #1f8f4e; }
.actionbar__book { background: var(--bronze); color: var(--cream) !important; }
@media (min-width: 768px) { .actionbar { display: none; } }
@media (max-width: 767px) { body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); } .cookie { bottom: calc(58px + env(safe-area-inset-bottom)); } }
.wa-float { position: fixed; right: 1rem; bottom: 1rem; z-index: 69; display: none; align-items: center; gap: 0.6rem; min-height: 54px; padding: 0.6rem 1.1rem 0.6rem 0.8rem; border-radius: 999px; background: #25D366; color: #fff; font-family: var(--font-label); font-size: 0.78rem; letter-spacing: 0.1em; box-shadow: 0 10px 30px rgba(34,34,33,0.22); transition: transform 160ms ease, background-color 160ms ease; }
.wa-float:hover { background: #1f8f4e; transform: translateY(-2px); }
@media (min-width: 768px) { .wa-float { display: inline-flex; } }

/* ---------- page hero, breadcrumbs, glance ---------- */
.page-hero { background: var(--cacao); color: var(--cream); padding-block: clamp(2rem, 4vw, 3.5rem) clamp(2.5rem, 6vw, 5rem); }
.page-hero h1 { color: var(--cream); max-width: 20ch; }
.page-hero .lead { color: var(--cream-70); }
.page-hero .answer { font-size: var(--t-lead); line-height: 1.5; max-width: 60ch; color: var(--cream); }
.page-hero .answer strong { font-weight: 500; }
.page-hero .eyebrow { color: var(--gold-light); }
.page-hero .btn--outline { color: var(--cream); border-color: var(--gold-line); }
.page-hero .btn--outline:hover { border-color: var(--gold-light); color: var(--gold-light); background: transparent; }
.page-hero__grid { display: grid; gap: 2rem; margin-top: 1.5rem; }
@media (min-width: 900px) { .page-hero__grid--side { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); align-items: start; gap: 4rem; } }
.page-hero__img { border: 1px solid var(--gold-line-soft); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; font-family: var(--font-label); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-50); }
.crumbs li + li::before { content: "/"; margin-right: 0.6rem; color: var(--gold-line); }
.crumbs a:hover { color: var(--cream); }
.crumbs [aria-current] { color: var(--gold-light); }
.glance { border: 1px solid var(--gold-line-soft); padding: 1.4rem 1.5rem; background: rgba(46,31,21,0.55); }
.glance .eyebrow { color: var(--gold-light); }
.glance dl { display: grid; gap: 0; margin: 0.7rem 0 0; }
.glance dl > div { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding: 0.65rem 0; border-top: 1px solid var(--gold-line-soft); font-size: 0.92rem; }
.glance dt { font-family: var(--font-label); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-light); padding-top: 0.25em; }
.glance dd { margin: 0; color: var(--cream); }

/* ---------- prose extras ---------- */
.prose h2 { font-size: var(--t-h3); margin-top: 1.9em; margin-bottom: 0.45em; }
.prose h2:first-child { margin-top: 0; }
.prose ol { padding-left: 1.2rem; margin-top: 0.8em; }
.prose a, .u { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: var(--gold); }
.prose blockquote { margin: 1.5em 0; padding-left: 1.2rem; border-left: 2px solid var(--gold); font-family: var(--font-display); font-size: 1.35rem; line-height: 1.35; color: var(--green); }
.prose table { width: 100%; border-collapse: collapse; margin-top: 1em; font-size: 0.95rem; }
.prose td, .prose th { padding: 0.6rem 0.4rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose th { font-family: var(--font-label); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.keyfacts { border: 1px solid var(--gold-line); background: var(--stone); padding: 1.4rem 1.6rem; display: grid; gap: 0.6rem; max-width: var(--measure); }
.keyfacts li { position: relative; padding-left: 1.4rem; font-size: 0.97rem; }
.keyfacts li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 0.7rem; height: 1px; background: var(--gold); }
.two-col { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .two-col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; align-items: start; } }
.sticky-side { position: sticky; top: 96px; }

/* ---------- steps ---------- */
.steps { display: grid; gap: 0; counter-reset: step; max-width: 820px; }
.steps li { display: grid; grid-template-columns: 3.2rem 1fr; gap: 1.2rem; padding: 1.4rem 0; border-top: 1px solid var(--line); }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps__n { font-family: var(--font-display); font-size: 1.9rem; color: var(--gold); line-height: 1; }
.steps h3 { font-size: 1.35rem; margin-bottom: 0.35rem; }
.steps p { color: var(--muted); max-width: 60ch; }

/* ---------- FAQ accordion ---------- */
.grid--faq { gap: 2rem; }
@media (min-width: 900px) { .grid--faq { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 4rem; align-items: start; } }
.faqs { border-top: 1px solid var(--line); }
.faq { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.1rem 0; cursor: pointer; list-style: none; font-family: var(--font-display); font-size: 1.3rem; line-height: 1.25; color: var(--green); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--bronze); }
.faq__i { flex: none; width: 30px; height: 30px; border: 1px solid var(--gold); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--gold); transition: transform 160ms ease, background-color 160ms ease, color 160ms ease; }
.faq[open] .faq__i { transform: rotate(180deg); background: var(--gold); color: var(--cream); }
.faq__a { padding: 0 0 1.3rem; max-width: 62ch; color: var(--ink-70); }
.faq__a p + p { margin-top: 0.8em; }
.section--navy .faq summary { color: var(--cream); }
.section--navy .faq, .section--navy .faqs { border-color: var(--gold-line-soft); }
.section--navy .faq__a { color: var(--cream-70); }

/* ---------- cards ---------- */
.cards { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } .cards--4 { grid-template-columns: repeat(4, 1fr); } }
.card { display: flex; flex-direction: column; background: var(--cream); border: 1px solid var(--line); transition: border-color 160ms ease, transform 160ms ease; }
.card:hover { border-color: var(--gold); transform: translateY(-2px); }
.card__body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: 0.7rem; flex: 1; }
.card__body h3 { font-size: 1.45rem; }
.card__body p { color: var(--muted); font-size: 0.95rem; flex: 1; }
.card__body .textlink { align-self: flex-start; }
.section--sand .card { background: var(--cream); }
.section--navy .card { background: var(--cacao-deep); border-color: var(--gold-line-soft); }
.section--navy .card h3 { color: var(--cream); }

/* ---------- Dr Kal quote ---------- */
.drquote { margin: 0; display: grid; gap: 1.5rem; padding: clamp(1.5rem, 4vw, 3rem); background: var(--cacao); color: var(--cream); border-left: 3px solid var(--bronze-lt); }
@media (min-width: 720px) { .drquote { grid-template-columns: 120px 1fr; align-items: center; gap: 2.5rem; } }
.drquote__img { width: 120px; border-radius: 50%; border: 1px solid var(--gold-line); }
.drquote blockquote { margin: 0; display: grid; gap: 1rem; }
.drquote .quote { font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.7rem); font-style: italic; }
.drquote figcaption { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; font-family: var(--font-label); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; }
.drquote figcaption .strong { color: var(--gold-light); }
.drquote figcaption .muted { color: var(--cream-50); }

/* ---------- contact block ---------- */
.contact-tiles { display: grid; gap: 0.8rem; }
@media (min-width: 560px) { .contact-tiles { grid-template-columns: 1fr 1fr; } }
.tile { display: flex; gap: 1rem; align-items: flex-start; padding: 1.1rem 1.2rem; border: 1px solid var(--gold-line-soft); background: rgba(46,31,21,0.45); color: var(--cream); transition: border-color 160ms ease, background-color 160ms ease; }
.tile:hover { border-color: var(--gold-light); background: rgba(46,31,21,0.75); }
.tile__ico { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--gold-line); display: inline-flex; align-items: center; justify-content: center; color: var(--gold-light); }
.tile__ico--wa { background: #25D366; border-color: #25D366; color: #fff; }
.tile b { display: block; font-family: var(--font-label); font-weight: 500; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 0.15rem; }
.tile small { display: block; font-size: 0.78rem; color: var(--cream-50); margin-top: 0.15rem; }
.form-panel--light { background: var(--cacao-deep); }
.field textarea { resize: vertical; min-height: 88px; }
.field label .muted { text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-weight: 300; color: var(--cream-50); }

/* ---------- socials ---------- */
.socials { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.socials a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; color: var(--green); transition: border-color 160ms ease, color 160ms ease; }
.socials a:hover { border-color: var(--bronze); color: var(--bronze); }
.socials--footer a { border-color: var(--gold-line-soft); color: var(--cream-70); }
.socials--footer a:hover { border-color: var(--gold-light); color: var(--gold-light); }
.drawer .socials { justify-content: center; margin-top: 0.5rem; }

/* ---------- home extras ---------- */
.trust-strip { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .trust-strip { grid-template-columns: repeat(4, 1fr); } }
.trust-strip div { border-top: 1px solid var(--gold-line-soft); padding-top: 0.8rem; font-size: 0.9rem; color: var(--cream-70); }
.trust-strip b { display: block; font-family: var(--font-display); font-size: 1.7rem; font-weight: 400; color: var(--cream); line-height: 1.1; margin-bottom: 0.2rem; }
.why-grid { display: grid; gap: 1.5rem; }
@media (min-width: 700px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .why-grid { grid-template-columns: repeat(3, 1fr); } }
.why { padding: 1.6rem; border: 1px solid var(--line); background: var(--cream); display: flex; flex-direction: column; gap: 0.6rem; }
.why__n { font-family: var(--font-display); font-size: 2rem; color: var(--gold); line-height: 1; }
.why h3 { font-size: 1.4rem; }
.why p { color: var(--muted); font-size: 0.95rem; }
.section--sand .why { background: var(--cream); }
.hero--home .hero__inner { align-items: center; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; }

/* ---------- gallery page ---------- */
.gallery-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 800px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
.gallery-grid figure { margin: 0; position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--stone); }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; }
.gallery-grid figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.5rem 0.7rem; background: linear-gradient(180deg, rgba(61,41,28,0) 0%, rgba(61,41,28,0.9) 100%); color: var(--cream); font-family: var(--font-label); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; }
.filter-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.filter-row a { font-family: var(--font-label); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.55rem 0.9rem; border: 1px solid var(--line); color: var(--green); }
.filter-row a:hover, .filter-row a[aria-current] { border-color: var(--bronze); color: var(--bronze); }

/* ---------- blog ---------- */
.article { max-width: 720px; }
.article__meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-family: var(--font-label); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.article .prose { max-width: none; font-size: 1.05rem; }
.article .prose p { max-width: 68ch; }
.article__hero { margin-block: 2rem; }
.toc { border: 1px solid var(--line); padding: 1.2rem 1.4rem; margin-block: 1.5rem; font-size: 0.92rem; }
.toc span { display: block; font-family: var(--font-label); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.6rem; }
.toc ol { padding-left: 1.1rem; display: grid; gap: 0.3rem; }
.author { display: flex; gap: 1rem; align-items: center; padding: 1.2rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 2.5rem; }
.author .frame { width: 64px; height: 64px; border-radius: 50%; flex: none; }
.author b { display: block; font-weight: 500; }
.author span { font-size: 0.86rem; color: var(--muted); }

/* ---------- map, town pages ---------- */
.map { aspect-ratio: 16 / 9; background: var(--stone); border: 1px solid var(--line); }
.map iframe { width: 100%; height: 100%; border: 0; display: block; }
.route-list { display: grid; gap: 0; }
.route-list div { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; padding: 0.75rem 0; border-top: 1px solid var(--line); font-size: 0.95rem; }
.route-list div:last-child { border-bottom: 1px solid var(--line); }
.route-list dt { font-family: var(--font-label); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); padding-top: 0.3em; }
.route-list dd { margin: 0; }

/* ---------- misc ---------- */
.badge { display: inline-block; font-family: var(--font-label); font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; padding: 0.3rem 0.6rem; border: 1px solid var(--gold-line); color: var(--gold); }
.section--navy .badge { color: var(--gold-light); }
.fees--snippet td:first-child { padding-right: 1rem; }
.sitemap-cols { display: grid; gap: 2rem; }
@media (min-width: 700px) { .sitemap-cols { grid-template-columns: repeat(3, 1fr); } }
.sitemap-cols ul { display: grid; gap: 0.4rem; }
.sitemap-cols a { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: var(--gold-line-soft); }
.mini-cta { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; padding: 1.4rem 1.6rem; border: 1px solid var(--gold-line); background: var(--stone); }
.mini-cta p { max-width: 50ch; }
.list-check { display: grid; gap: 0.5rem; }
.list-check li { position: relative; padding-left: 1.6rem; }
.list-check li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.5rem; height: 0.9rem; border-right: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold); transform: rotate(40deg); }

/* ---------- Rev 8 fixes ---------- */
.nav__link { white-space: nowrap; letter-spacing: 0.1em; padding: 0.4rem 0.6rem; font-size: 0.72rem; }
.hdr-btn { white-space: nowrap; }
@media (min-width: 1280px) and (max-width: 1399px) { .hdr-btn--phone span { display: none; } }
@media (min-width: 1400px) { .hdr-btn--phone span { display: inline; } .nav__link { padding: 0.4rem 0.75rem; letter-spacing: 0.14em; } }
.hero .btn--outline { color: var(--cream); border-color: var(--gold-line); }
.hero .btn--outline:hover { background: transparent; border-color: var(--gold-light); color: var(--gold-light); }
.hero .textlink { color: var(--gold-light); border-bottom-color: var(--gold-line); }
.hero .textlink:hover { border-bottom-color: var(--gold-light); }
.hero__side b { color: var(--gold-light); }
.crumbs ol, .steps { list-style: none; margin: 0; padding: 0; }
.glance dl > div { grid-template-columns: 1fr; gap: 0.15rem; }
@media (min-width: 1200px) { .glance dl > div { grid-template-columns: 8rem 1fr; gap: 1rem; } }
.form-panel > .eyebrow { margin-bottom: 1.1rem; }
@media (min-width: 640px) and (max-width: 999px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr 1.15fr; gap: 2rem; } }
.promo__tag { white-space: nowrap; }
@media (max-width: 600px) { .promo__tag { display: none; } .promo a { font-size: 0.78rem; } }
.header-inner { position: relative; z-index: 2; background: var(--cream); }
.drawer { z-index: 1; }
.card__img img { width: 100%; height: 100%; object-fit: cover; }
.nav__item--has-mega { position: static; }
.mega { left: 0; right: 0; width: auto; transform: none; border-left: 0; border-right: 0; }
.mega__grid { grid-template-columns: repeat(4, 1fr); }
.hdr-btn--menu .ico-close { display: none; }
body.drawer-open .hdr-btn--menu .ico-menu { display: none; }
body.drawer-open .hdr-btn--menu .ico-close { display: block; }

/* ---------- Rev 9: menu stays open, images never crop the logo, testimonials, CTA strip ---------- */
/* invisible bridge between the Treatments link and the panel so the hover never breaks */
.nav__item--has-mega .nav__link::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 26px; }
.nav__item--has-mega .nav__link { position: relative; }
.nav__item--has-mega.is-open .nav__link { color: var(--bronze); }
.mega { padding-top: 0.25rem; }
.mega__col a { display: block; padding: 0.15rem 0; min-height: 28px; }

/* before and after photographs are square with the LUSSO mark in the corners: never crop them */
.ba img, .ba picture img { object-fit: contain !important; background: var(--cacao-deep); }
.card__img.ba { aspect-ratio: 1 / 1; }
.frame--ba { aspect-ratio: 1 / 1; background: var(--cacao-deep); }
.frame--ba img { object-fit: contain; }
.carousel__slide img { object-fit: contain; background: var(--cacao-deep); }
.result img { object-fit: contain; background: var(--cacao-deep); }
.gallery-grid figure { background: var(--cacao-deep); }
.gallery-grid img { object-fit: contain; }

/* patient stories */
.stories { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .stories { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .stories { grid-template-columns: repeat(3, 1fr); } }
.story { display: flex; flex-direction: column; background: var(--cacao-deep); color: var(--cream); border: 1px solid var(--gold-line-soft); transition: border-color 160ms ease, transform 160ms ease; }
.story:hover { border-color: var(--gold-light); transform: translateY(-2px); }
.story__poster { position: relative; aspect-ratio: 4 / 5; background: linear-gradient(160deg, #4a3223 0%, #2E1F15 100%); overflow: hidden; }
.story__poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }
.story__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; border-radius: 50%; background: var(--bronze-lt); color: var(--cacao-deep); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
.story__play svg { margin-left: 3px; }
.story__mark { position: absolute; left: 1rem; top: 1rem; }
.story__body { padding: 1.1rem 1.2rem 1.3rem; display: grid; gap: 0.35rem; }
.story__body .eyebrow { color: var(--gold-light); }
.story__title { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.25; }
.story__meta { font-size: 0.8rem; color: var(--cream-50); }
.story--video { cursor: pointer; }
.story video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.story.is-playing .story__play, .story.is-playing .story__poster img, .story.is-playing .story__mark { display: none; }

/* CTA strip between sections */
.cta-strip { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; padding: 1.3rem clamp(1.2rem, 3vw, 2rem); background: var(--cacao); color: var(--cream); border-left: 3px solid var(--bronze-lt); }
.cta-strip p { max-width: 52ch; }
.cta-strip .eyebrow { color: var(--gold-light); }
.cta-strip .btn-row .btn--outline { color: var(--cream); border-color: var(--gold-line); }
.cta-strip .btn-row .btn--outline:hover { background: transparent; border-color: var(--gold-light); color: var(--gold-light); }

/* ---------- Rev 9b: story posters shown whole, video lightbox, clip covers ---------- */
.story__poster { aspect-ratio: 1 / 1; background: var(--cacao-deep); }
.story__poster img { object-fit: contain; opacity: 1; }
.story__poster picture { position: absolute; inset: 0; }
.story__body .story__title { color: var(--cream); }
.story:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.lightbox[hidden] { display: none; }
.lightbox { position: fixed; inset: 0; z-index: 400; background: rgba(34,34,33,0.92); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.lightbox__panel { width: min(960px, 100%); background: var(--cacao-deep); border: 1px solid var(--gold-line-soft); box-shadow: 0 30px 80px rgba(0,0,0,0.5); position: relative; }
.lightbox__frame { aspect-ratio: 16 / 9; background: #000; }
.lightbox__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.lightbox__close { position: absolute; right: 0.5rem; top: 0.5rem; z-index: 2; width: 40px; height: 40px; border-radius: 50%; background: var(--bronze-lt); color: var(--cacao-deep); display: inline-flex; align-items: center; justify-content: center; border: 0; cursor: pointer; }
.lightbox__meta { padding: 0.8rem 1rem; color: var(--cream-50); font-size: 0.85rem; display: flex; gap: 1rem; justify-content: space-between; flex-wrap: wrap; }
.lightbox__meta a { color: var(--gold-light); text-decoration: underline; }
body.lightbox-open { overflow: hidden; }
.cta-strip { margin-top: 0.5rem; }
.section--sand .cta-strip, .section--navy .cta-strip { background: var(--cacao-deep); }
.clip .clip__cap { min-height: 2.4em; }
@media (max-width: 640px) { .cta-strip { flex-direction: column; align-items: flex-start; } .cta-strip .btn-row { width: 100%; } }
@media (min-width: 1000px) { .results-grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Rev 10: awards (15 Sept 2026) ---------- */
.awards { text-align: center; }
.awards__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1.5rem; align-items: start; justify-items: center; max-width: 960px; margin-inline: auto; }
@media (min-width: 760px) { .awards__row { grid-template-columns: repeat(4, 1fr); } }
.award { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; max-width: 220px; }
.award__img { display: flex; align-items: center; justify-content: center; height: 84px; width: 100%; }
.award__img img { height: 100%; max-height: 84px; width: auto; max-width: min(100%, 180px); object-fit: contain; display: block; }
.award__img picture { display: contents; }
.award__cap { font-size: 0.78rem; line-height: 1.35; color: var(--muted); }
.award__cap b { color: var(--ink); font-weight: 500; }
.award-cards { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 700px) { .award-cards { grid-template-columns: repeat(2, 1fr); } }
.award-card { display: flex; gap: 1.25rem; align-items: flex-start; padding: 1.4rem; background: var(--cream); border: 1px solid var(--line); }
.award-card__img { flex: 0 0 150px; display: flex; align-items: center; justify-content: center; min-height: 120px; }
.award-card__img img { width: auto; max-width: 150px; max-height: 150px; object-fit: contain; display: block; }
.award-card .h3 { font-size: 1.25rem; }
@media (max-width: 480px) { .award-card { flex-direction: column; } .award-card__img { flex-basis: auto; } }
.section--sand .award-card, .section--navy .award-card { background: rgba(255,255,255,0.35); }


/* =========================================================
   Rev 12 additions (19 October 2026). Everything above is the live
   lusso.dental stylesheet, unchanged. Below: the official logo artwork,
   the hero offer card, the trust strip, the booking pop-up, the offer
   pop-up, the chat launcher mount, the cookie banner and small helpers.
   ========================================================= */
/* Official logo artwork (brand folder: Logo official.png) */
.brand-img { height: 38px; width: auto; display: block; }
@media (min-width: 768px) { .brand-img { height: 44px; } }
.site-footer .brand-img { height: 56px; }
.drawer .brand-img { height: 36px; }

/* Announcement bar (GL01) reuses the live .promo bar */
.promo a { min-height: 40px; }

/* Header: show the register button from tablet up (GL02) */
@media (min-width: 768px) { .header-cta { display: inline-flex; min-height: 46px; padding: 0.7rem 1.3rem; font-size: 0.72rem; } }
@media (min-width: 1100px) and (max-width: 1260px) { .nav__link { padding: 0.4rem 0.45rem; font-size: 0.68rem; letter-spacing: 0.08em; } }

/* Hero with the offer card (HM03, mockup A) */
.hero--offer .hero__inner { align-items: start; }
@media (min-width: 1000px) { .hero--offer .hero__inner { grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 4vw, 4rem); } }
.hero--offer .eyebrow { color: var(--gold-light); font-size: 0.82rem; letter-spacing: 0.08em; }
.hero--offer h1 { max-width: 16ch; }
.hero__note { color: var(--cream-70); font-size: 0.95rem; }
.btn--gold { background: var(--logo-gold); border-color: var(--logo-gold); color: var(--cacao-deep); }
.btn--gold:hover { background: var(--bronze-lt); border-color: var(--bronze-lt); color: var(--cacao-deep); }
.offer-card { background: var(--cream); color: var(--ink); border: 1px solid var(--gold-line); padding: clamp(1.3rem, 3vw, 2rem); box-shadow: 0 30px 60px rgba(34,34,33,0.25); }
.offer-card .h2 { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem); }
.offer-card .h2 em { font-style: italic; color: var(--bronze); }
.offer-card .offer-list { border-top: 1px solid var(--gold-line-soft); margin-top: 0.8rem; }
.offer-card .xrow__head { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.6rem 0; background: none; border: 0; border-bottom: 1px solid var(--gold-line-soft); font: inherit; color: inherit; text-align: left; cursor: pointer; }
.offer-card .xrow__name { font-size: 0.95rem; }
.offer-card .xrow__i { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 0.4rem; border: 1px solid var(--gold-line); border-radius: 50%; font-family: var(--font-label); font-size: 0.62rem; color: var(--bronze); }
.offer-card .xrow__more { display: none; font-size: 0.86rem; color: var(--muted); padding: 0.4rem 0 0.7rem; border-bottom: 1px solid var(--gold-line-soft); }
.offer-card .xrow.is-open .xrow__more { display: block; }
.offer-card .price { color: var(--bronze); font-family: var(--font-label); font-weight: 500; white-space: nowrap; }
.offer-card .offer-total { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.9rem 0 0.4rem; }
.offer-card .offer-total s { color: var(--muted); }
.offer-card .offer-total .free { font-family: var(--font-display); font-size: 1.7rem; color: var(--cacao); }
.offer-card .form { margin-top: 0.8rem; gap: 0.75rem; }
.offer-card .field label { color: var(--bronze); }
.offer-card .field input, .offer-card .field select { background: #fff; border-color: var(--line); min-height: 46px; }
.offer-card .consent { color: var(--ink); font-size: 0.84rem; }
.offer-card .consent small { color: var(--muted); }
.offer-card .consent a { color: var(--bronze); }
.offer-card .form-status { color: var(--bronze); }
.offer-card .offer-fine { font-size: 0.76rem; color: var(--muted); margin-top: 0.6rem; }
.offer-card .btn { width: 100%; }
.section--navy .offer-card { box-shadow: none; }

/* Trust strip under the hero (HM05, mockup B) */
.trust { background: var(--limewash); border-bottom: 1px solid var(--gold-line-soft); }
.trust__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 2.4rem; padding-block: 1rem; }
.trust__label { font-family: var(--font-label); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.trust__in img { height: 26px; width: auto; opacity: 0.85; }
.trust__in img.is-tall { height: 34px; }
.trust__award { display: flex; align-items: center; gap: 0.6rem; font-size: 0.84rem; color: var(--ink); }
.trust__award img { height: 44px; width: auto; }

/* Opening offers strip (HM10) and offer cards (NP02) */
.offer-grid { display: grid; gap: 1.5rem; }
@media (min-width: 800px) { .offer-grid { grid-template-columns: repeat(3, 1fr); } }
.offer-tile { display: flex; flex-direction: column; gap: 0.8rem; background: var(--cream); border: 1px solid var(--line); padding: 1.6rem; }
.offer-tile:hover { border-color: var(--gold); }
.offer-tile .frame { margin: -1.6rem -1.6rem 0.4rem; }
.offer-tile .was { color: var(--muted); text-decoration: line-through; font-size: 0.9rem; }
.offer-tile .now { font-family: var(--font-display); font-size: 1.9rem; color: var(--cacao); line-height: 1; }
.offer-tile .saving { font-family: var(--font-label); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bronze); }
.offer-tile ul { display: grid; gap: 0.4rem; font-size: 0.92rem; color: var(--muted); }
.offer-tile li { position: relative; padding-left: 1.3rem; }
.offer-tile li::before { content: "✓"; position: absolute; left: 0; color: var(--gold); font-size: 0.8rem; }
.offer-tile .btn { margin-top: auto; }

/* Membership teaser on the home page (HM09) reuses .tiers */
.tiers--teaser .tier ul { font-size: 0.9rem; }

/* Comparison tables (TR05) reuse table.fees */
table.fees.fees--compare th { text-align: left; font-family: var(--font-label); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bronze); padding: 0.7rem 0.6rem; border-bottom: 1px solid var(--gold-line); }
table.fees.fees--compare td:first-child { font-weight: 500; }

/* Byline (TR02) */
.byline { font-size: 0.82rem; color: var(--cream-70); }
.byline a { color: var(--gold-light); border-bottom: 1px solid var(--gold-line); }
.section .byline, .prose .byline { color: var(--muted); }
.section .byline a { color: var(--bronze); }

/* Introductory fee (FE01) */
[data-intro] s { color: var(--muted); margin-right: 0.3rem; }
[data-intro] small { font-family: var(--font-label); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bronze); margin-left: 0.4rem; white-space: nowrap; }
[hidden] { display: none !important; }

/* Booking pop-up (BK01 to BK04) and offer pop-up (HM06) */
.modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; justify-content: center; background: rgba(34,34,33,0.6); padding: 0; }
@media (min-width: 640px) { .modal { align-items: center; padding: 1.5rem; } }
.modal__box { position: relative; width: 100%; max-width: 520px; max-height: 92vh; overflow: auto; background: var(--cream); color: var(--ink); padding: clamp(1.4rem, 4vw, 2.2rem); border: 1px solid var(--gold-line); }
@media (max-width: 639px) { .modal__box { border-radius: 14px 14px 0 0; padding-bottom: calc(1.4rem + env(safe-area-inset-bottom)); } }
.modal__close { position: absolute; top: 0.7rem; right: 0.7rem; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: var(--cacao); color: var(--cream); border: 0; border-radius: 50%; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.modal .eyebrow { text-align: center; display: block; }
.modal .h2 { text-align: center; font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); margin: 0.4rem 0 1rem; }
.modal .form { gap: 0.8rem; }
.modal .field label { color: var(--bronze); }
.modal .field input, .modal .field select { background: #fff; border-color: var(--line); min-height: 48px; }
.modal .consent { color: var(--ink); font-size: 0.86rem; }
.modal .consent small, .modal .muted { color: var(--muted); }
.modal .consent a { color: var(--bronze); }
.modal .btn { width: 100%; }
.modal p.small { font-size: 0.82rem; }
.choice { display: grid; gap: 0.6rem; margin-bottom: 1rem; }
@media (min-width: 480px) { .choice { grid-template-columns: 1fr 1fr; } }
.choice label { display: flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 54px; padding: 0.8rem 1rem; border: 1px solid var(--gold-line); background: #fff; font-family: var(--font-label); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; }
.choice label:has(input:checked) { background: var(--cacao); color: var(--cream); border-color: var(--cacao); }
.choice input { accent-color: var(--bronze); width: 18px; height: 18px; margin: 0; }
body.modal-open { overflow: hidden; }
#offer-pop .modal__box { text-align: center; }
#offer-pop .offer-fine { font-size: 0.78rem; color: var(--muted); margin-top: 0.8rem; }

/* Chat launcher mount (GL04): hidden until a chatbot or WhatsApp Business chat is switched on */
.chat-launcher { position: fixed; right: 1rem; bottom: calc(66px + env(safe-area-inset-bottom)); z-index: 69; display: flex; flex-direction: column; align-items: flex-end; gap: 0.6rem; }
@media (min-width: 768px) { .chat-launcher { bottom: 1.2rem; } }
.chat-launcher > button { width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--bronze); color: var(--cream); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 10px 30px rgba(34,34,33,0.25); }
.chat-panel { background: var(--cream); border: 1px solid var(--gold-line); padding: 1rem; display: grid; gap: 0.6rem; min-width: 220px; }
.chat-panel strong { font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; color: var(--cacao); }

/* Cookie banner (FI09, Consent Mode v2) builds on the live .cookie */
.cookie p { max-width: 60ch; font-size: 0.9rem; }
.cookie p a { text-decoration: underline; color: var(--gold-light); }

/* Patient information hub (LM02) */
.doc-list { columns: 2; column-gap: 2rem; font-size: 0.9rem; }
.doc-list li { break-inside: avoid; padding: 0.3rem 0; border-bottom: 1px solid var(--line); }
.doc-list li a { color: var(--ink); }
.doc-list li a:hover { color: var(--bronze); }
.doc-list small { color: var(--muted); font-family: var(--font-label); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; margin-left: 0.4rem; }

/* Guide band (NP04) */
.guide-band .form-panel { padding: clamp(1.2rem, 3vw, 2rem); }
.guide-band .two { display: grid; gap: 1rem; }
@media (min-width: 640px) { .guide-band .two { grid-template-columns: 1fr 1fr; } }

/* Source select and partner code (PS03, PS05) */
.field.is-partner { padding: 0.8rem; border: 1px dashed var(--gold-line); }
.form-note { font-size: 0.8rem; color: var(--cream-70); }
.offer-card .form-note, .modal .form-note { color: var(--muted); }

/* Opening wording helper */
.u { text-decoration: underline; text-underline-offset: 0.2em; }
.cards--2 { grid-template-columns: 1fr; } @media (min-width: 800px) { .cards--2 { grid-template-columns: 1fr 1fr; } }
/* Rev 12 tuning after browser check */
.offer-card .offer-list { display: block; }
.hero--offer h1 { font-size: clamp(2.1rem, 1.5rem + 2.3vw, 3.4rem); max-width: 18ch; }
.brand-img { height: 42px; }
@media (min-width: 768px) { .brand-img { height: 48px; } }
@media (max-width: 767px) { .hero--offer .hero__inner { gap: 1.5rem; } .offer-card { padding: 1.2rem; } }
[data-intro] small { display: block; white-space: normal; margin-left: 0; margin-top: 0.2rem; }
.offer-tile .was--plain { text-decoration: none; }

/* Membership plans (D11, 21 October 2026): Essential, Signature, Privé */
.tier .tier__fee { margin-top: -0.4rem; }
.tier .btn { margin-top: 0.4rem; align-self: flex-start; }
.tier--feature { box-shadow: 0 0 0 1px var(--gold) inset; }
table.fees.fees--plans th, table.fees.fees--plans td { text-align: left; white-space: normal; color: var(--ink); font-family: inherit; font-weight: 400; padding: 0.7rem 0.6rem; vertical-align: top; }
table.fees.fees--plans th { font-family: var(--font-label); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bronze); }
table.fees.fees--plans tbody th { font-weight: 500; color: var(--ink); font-family: inherit; font-size: 0.95rem; letter-spacing: 0; text-transform: none; }
table.fees.fees--plans th:nth-child(3), table.fees.fees--plans td:nth-child(3) { background: rgba(197, 160, 89, 0.10); }
table.fees.fees--plans tr:last-child td { color: var(--gold); font-family: var(--font-label); font-weight: 500; }
@media (max-width: 700px) { table.fees.fees--plans { min-width: 640px; } }
table.fees.fees--plans { table-layout: fixed; }
table.fees.fees--plans thead th:first-child { width: 26%; }

/* Areas we serve (D12) */
table.fees.fees--areas th:nth-child(3), table.fees.fees--areas td:nth-child(3) { background: none; }
table.fees.fees--areas thead th:first-child { width: 32%; }
table.fees.fees--areas td:nth-child(2) { white-space: nowrap; }

/* A note from Dr Kal (CC16) */
.note-kal { max-width: 70ch; margin: 0 auto; padding: clamp(1.4rem, 3vw, 2.2rem); background: var(--cream); border: 1px solid var(--line); border-left: 3px solid var(--gold); display: flex; flex-direction: column; gap: 0.9rem; }
.note-kal > p:not(.eyebrow) { font-family: var(--font-display); font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); line-height: 1.5; color: var(--cacao); }
.note-kal footer { display: flex; align-items: center; gap: 0.9rem; font-size: 0.9rem; color: var(--muted); }
.note-kal footer img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.note-kal footer b { color: var(--ink); font-weight: 500; }
table.fees.fees--areas tr:last-child td { color: var(--ink); font-family: inherit; font-weight: 400; }

/* ---------- Rev 12.1: UI review (21 Oct 2026) ---------- */
/* Colour: text bronze and muted grey deepened to pass WCAG AA on cream and limewash; the brushed bronze stays on button fills with a white label (UI04) */
:root { --bronze: #7E5D3B; --bronze-surface: #906C45; --stonegrey: #6A6154; --wa-ink: #136E3A; }
.btn { background: var(--bronze-surface); border-color: var(--bronze-surface); color: #fff; }
.btn--outline { background: transparent; color: var(--green); border-color: var(--green); }
.section--navy .btn--outline { color: var(--cream); border-color: var(--gold-line); }
.actionbar__book { background: var(--bronze-surface); color: #fff !important; }
.actionbar a[data-wa-link], .hdr-btn--wa { color: var(--wa-ink); }
.wa-float { background: var(--wa-ink); }
.offer-card .eyebrow, .modal .eyebrow { color: var(--gold); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--bronze); box-shadow: 0 0 0 3px var(--gold-line-soft); }
.offer-card .field input:focus, .modal .field input:focus { border-color: var(--bronze); }
/* Layout: nothing may widen the page on a phone (UI01) */
html, body { overflow-x: clip; }
.two-col { grid-template-columns: minmax(0, 1fr); }
.two-col > *, .tiers > *, .grid > *, .footer-grid > *, .why-grid > *, .cards > *, .offer-grid > *, .page-hero__grid > * { min-width: 0; }
@media (min-width: 900px) { .two-col--article { grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.8fr); } }
.tiers { grid-template-columns: minmax(0, 1fr); }
.table-wrap { max-width: 100%; -webkit-overflow-scrolling: touch; }
@media (max-width: 599px) { .btn { white-space: normal; max-width: 100%; line-height: 1.3; } }
/* Modal: the close button sits in its own band above the content on phones, never over the heading (UI05) */
@media (max-width: 639px) { .modal__box { padding-top: 3.9rem; } }
.modal__close { z-index: 2; }
/* Type floor: no label below 11.5px, no readable text below 12.5px (UI06) */
:root { --t-eyebrow: 0.76rem; }
.field label { font-size: 0.78rem; }
.result__cap { font-size: 0.76rem; }
.visit-row dt, .glance dt, .route-list dt { font-size: 0.76rem; }
.footer-label { font-size: 0.74rem; }
.credentials { font-size: 0.76rem; }
.badge, .promo__tag { font-size: 0.72rem; }
.offer-tile .saving { font-size: 0.78rem; }
.tile b { font-size: 0.78rem; }
.crumbs ol { font-size: 0.74rem; }
.doc-list small { font-size: 0.72rem; }
.actionbar a { font-size: 0.74rem; }
.trust__label { font-size: 0.74rem; }
.mega__label, .drawer__group { font-size: 0.72rem; }
.carousel__count { font-size: 0.74rem; }
.tier .worth { font-size: 0.78rem; }
.tier .price small { font-size: 0.76rem; }
.prose th, table.fees.fees--compare th { font-size: 0.74rem; }
@media (min-width: 1100px) and (max-width: 1260px) { .nav__link { font-size: 0.72rem; } }
/* Tap targets: footer and breadcrumb links at 24px or more, carousel dots at 24px, consent boxes at 22px (UI07) */
.footer-list { gap: 0.15rem; }
.footer-list a { display: inline-block; padding-block: 0.3rem; }
.crumbs a { display: inline-block; padding-block: 0.35rem; }
.crumbs ol { gap: 0 0.6rem; align-items: center; }
.carousel__dots { gap: 0.1rem; }
.carousel__dot { position: relative; width: 24px; height: 24px; background: transparent; transform: none; }
.carousel__dot::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--microcement); transition: background-color 160ms ease, inset 160ms ease; }
.carousel__dot.is-active { transform: none; background: transparent; }
.carousel__dot.is-active::before { background: var(--bronze); inset: 7px; }
.consent input { width: 22px; height: 22px; }
/* Awards: badges scale to the 84px row and never spill over the heading (UI08) */
.award__img img { height: 100%; max-height: 84px; width: auto; }
.hero__side b, .frame__tag, .clip__cap, .gallery-grid figcaption, .article__meta, .toc span { font-size: 0.74rem; }
.xrow__i, .offer-card .xrow__i { font-size: 0.7rem; width: 1.15rem; height: 1.15rem; }
.nav__link { font-size: 0.76rem; }
@media (min-width: 1100px) and (max-width: 1260px) { .nav__link { font-size: 0.72rem; } }
.form-panel .eyebrow { color: var(--gold-light); }
.carousel__count { background: rgba(61,41,28,0.75); }
.footer-legal { color: var(--cream-70); }
.footer-legal a, .toc ol li a, .doc-list li a, .visit-row dd a, .byline a { display: inline-block; padding-block: 0.25rem; }
.toc ol { gap: 0.1rem; }
/* Footer link groups collapse on phones (UI09): the label is a real button; from 800px the lists are always open */
.footer-head { position: relative; display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.9rem; }
.footer-head .footer-label { margin-bottom: 0; }
.footer-head--gap { margin-top: 1.5rem; }
.footer-toggle { display: none; position: absolute; inset: 0; width: 100%; height: 100%; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; color: var(--gold-light); align-items: center; justify-content: flex-end; }
.footer-toggle svg { transition: transform 160ms ease; }
@media (max-width: 799px) {
  .footer-head { min-height: 48px; margin-bottom: 0; border-bottom: 1px solid var(--gold-line-soft); }
  .footer-head--gap { margin-top: 0; }
  .footer-toggle { display: flex; }
  .footer-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .footer-head + .footer-list { display: none; padding: 0.6rem 0 1rem; }
  .footer-head:has(.footer-toggle[aria-expanded="true"]) + .footer-list { display: flex; }
  .footer-grid > div { border-bottom: 0; }
  .footer-grid { gap: 0; }
  .footer-grid > div:first-child { margin-bottom: 1.5rem; }
  .footer-grid > div:last-child { margin-top: 1.5rem; }
}
/* Results and patient stories swipe sideways on phones instead of stacking (UI10) */
@media (max-width: 559px) {
  .results-grid { display: flex; gap: 0.75rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 0.5rem; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: none; }
  .results-grid::-webkit-scrollbar { display: none; }
  .results-grid > .result { flex: 0 0 84%; scroll-snap-align: start; }
}
@media (max-width: 639px) {
  .stories { display: flex; gap: 0.75rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 0.5rem; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: none; }
  .stories::-webkit-scrollbar { display: none; }
  .stories > .story { flex: 0 0 84%; scroll-snap-align: start; }
}
/* Comparison tables on phones (UI12): readable columns, cell spacing, and a swipe hint instead of clipped words */
table.fees.fees--compare:not(.fees--plans) td { padding: 0.7rem 0.75rem 0.7rem 0; vertical-align: top; }
table.fees.fees--compare:not(.fees--plans) td:last-child { text-align: left; white-space: normal; color: var(--ink); font-family: inherit; font-weight: 400; padding-left: 0; }
table.fees.fees--compare:not(.fees--plans) th { padding-left: 0; padding-right: 0.75rem; }
@media (max-width: 639px) {
  .table-wrap:has(table.fees--compare:not(.fees--plans)) { position: relative; }
  .table-wrap:has(table.fees--compare:not(.fees--plans)) table { min-width: 560px; }
  .table-wrap:has(table.fees--compare:not(.fees--plans))::after { content: "Swipe to see every column"; display: block; margin-top: 0.5rem; font-family: var(--font-label); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
  .table-wrap:has(table.fees--plans:not(.fees--areas)) table { min-width: 520px; }
  .table-wrap:has(table.fees--plans:not(.fees--areas))::after { content: "Swipe to compare all three plans"; display: block; margin-top: 0.5rem; font-family: var(--font-label); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
}
/* Long bold paragraphs read as walls on a phone (UI13): the answer and lead keep their size and colour, not the weight */
.hero .lead strong, .page-hero .answer strong, .page-hero .lead strong { font-weight: 400; }
/* Drive-time tables on phones (UI14): the route sits under the town instead of in a third column off the edge */
@media (max-width: 639px) {
  table.fees.fees--areas, table.fees.fees--areas thead, table.fees.fees--areas tbody, table.fees.fees--areas caption { display: block; min-width: 0; width: 100%; }
  table.fees.fees--areas thead tr, table.fees.fees--areas tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; align-items: baseline; }
  table.fees.fees--areas thead th:nth-child(3) { display: none; }
  table.fees.fees--areas thead th:first-child { width: auto; }
  table.fees.fees--areas th, table.fees.fees--areas td { padding-inline: 0; }
  table.fees.fees--areas tbody tr { border-bottom: 1px solid var(--line); padding-block: 0.15rem; }
  table.fees.fees--areas thead tr { border-bottom: 1px solid var(--gold-line); }
  table.fees.fees--areas thead th { border-bottom: 0; }
  table.fees.fees--areas tbody td { border-bottom: 0; }
  table.fees.fees--areas tbody td:nth-child(2) { text-align: right; }
  table.fees.fees--areas tbody td:nth-child(3) { grid-column: 1 / -1; padding-top: 0; font-size: 0.9rem; color: var(--muted); }
}
/* Map card (UI15): the address and two actions until the Google map is requested */
.map--lazy { aspect-ratio: auto; min-height: 240px; display: flex; align-items: center; justify-content: center; padding: clamp(1.25rem, 4vw, 2.5rem); text-align: center; background: var(--stone); background-image: radial-gradient(circle at 1px 1px, rgba(144,108,69,0.18) 1px, transparent 0); background-size: 18px 18px; }
@media (min-width: 900px) { .map--lazy { aspect-ratio: 16 / 9; } }
.map__card { display: grid; gap: 1rem; justify-items: center; max-width: 36ch; }
.map__addr { line-height: 1.5; }
.map__card .btn-row { justify-content: center; }
.map__card .small { margin: 0; }
/* Fee tables on phones (UI16): the price column never squeezes the item name; the introductory-fee note wraps under the price */
.fees td.num, .fees td:last-child { max-width: 11rem; }
.fees td:last-child small, [data-intro] small { white-space: normal; max-width: 15ch; margin-left: auto; font-size: 0.68rem; letter-spacing: 0.06em; }
@media (max-width: 480px) { .fees td:first-child { padding-right: 0.5rem; } .fees td:last-child { padding-left: 0.75rem; max-width: 10rem; min-width: 7rem; white-space: normal; } }
.toc ol li { padding-block: 0.2rem; }
.toc ol li a { display: inline; padding: 0; }