/* ==========================================================================
   TJ Smile — stylesheet
   Change the variables in :root below to retheme the entire site.
   ========================================================================== */

:root {
  /* --- Brand colours ------------------------------------------------- */
  --ink:        #0d1b26;   /* headings, dark sections */
  --ink-2:      #172a38;
  --body:       #3b4b58;   /* body text */
  --muted:      #7b8a95;
  --line:       #e3ded6;
  --cream:      #f7f3ed;   /* page background tint */
  --sand:       #ece4d9;
  --gold:       #b08d57;   /* accent */
  --gold-soft:  #d9c3a1;
  --white:      #ffffff;

  /* --- Type ----------------------------------------------------------- */
  --font-display: "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* --- Layout --------------------------------------------------------- */
  --wrap: 1240px;
  --wrap-narrow: 780px;
  --gutter: 24px;
  --radius: 18px;
  --radius-lg: 28px;
  --header-h: 84px;

  --shadow-sm: 0 2px 10px rgba(13, 27, 38, .06);
  --shadow: 0 12px 40px rgba(13, 27, 38, .10);
  --shadow-lg: 0 30px 80px rgba(13, 27, 38, .16);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ==========================================================================
   Reset
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
/* Any element can carry `hidden`; author rules like `.btn{display:flex}`
   otherwise beat the UA default `[hidden]{display:none}` on specificity
   order, silently leaving "hidden" elements visible. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
  /* `clip` rather than `hidden`: it stops the off-canvas mobile menu creating
     a horizontal scrollbar without breaking the sticky header. */
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

body.nav-open { overflow: hidden; }

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 .5em;
}

h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
h2 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); }
h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
h4 { font-size: 1.2rem; }
p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: var(--wrap-narrow); }

.section { padding: clamp(64px, 9vw, 130px) 0; }
.section--tight { padding: clamp(48px, 6vw, 80px) 0; }
.section--cream { background: var(--cream); }
.section--sand { background: var(--sand); }
.section--dark { background: var(--ink); color: #c9d3da; }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }

.eyebrow {
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .3; max-width: 60px; }
.eyebrow--center { justify-content: center; }
.eyebrow--center::before { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .3; max-width: 60px; }

.lead { font-size: 1.15rem; color: var(--body); }
.center { text-align: center; }
.section-head { max-width: 720px; margin-bottom: clamp(40px, 5vw, 68px); }
.section-head.center { margin-inline: auto; }

.grid { display: grid; gap: 28px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1000px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 30px;
  border-radius: 999px;
  font-size: .82rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  background: var(--ink); color: #fff;
  border: 1px solid var(--ink);
  transition: all .3s var(--ease);
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) { .btn:hover { background: var(--gold); border-color: var(--gold); color: #fff; transform: translateY(-2px); } }

.btn--gold { background: var(--gold); border-color: var(--gold); }
@media (hover: hover) and (pointer: fine) { .btn--gold:hover { background: var(--ink); border-color: var(--ink); } }

.btn--ghost { background: transparent; color: var(--ink); border-color: currentColor; }
@media (hover: hover) and (pointer: fine) { .btn--ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); } }

.btn--light { background: #fff; color: var(--ink); border-color: #fff; }
@media (hover: hover) and (pointer: fine) { .btn--light:hover { background: var(--gold); border-color: var(--gold); color: #fff; } }

.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
@media (hover: hover) and (pointer: fine) { .btn--outline-light:hover { background: #fff; color: var(--ink); border-color: #fff; } }

.btn--sm { padding: 11px 22px; font-size: .74rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-row--center { justify-content: center; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .82rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold); border-bottom: 1px solid currentColor; padding-bottom: 3px;
  transition: gap .3s var(--ease);
}
@media (hover: hover) and (pointer: fine) { .link-arrow:hover { gap: 14px; } }

/* ==========================================================================
   Announcement bar
   ========================================================================== */

.announce {
  background: var(--ink); color: #e6ddd0;
  font-size: .82rem; text-align: center;
  padding: 10px 50px 10px 20px; position: relative;
}
.announce a { color: var(--gold-soft); text-decoration: underline; text-underline-offset: 3px; }
.announce__close { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); opacity: .6; font-size: 1.2rem; line-height: 1; }
@media (hover: hover) and (pointer: fine) { .announce__close:hover { opacity: 1; } }
.announce[hidden] { display: none; }

/* ==========================================================================
   Header / navigation
   ========================================================================== */

.header {
  position: sticky; top: 0; z-index: 200;
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s var(--ease);
}
.header.is-scrolled { box-shadow: var(--shadow-sm); }
/* While the mobile menu is open, <body> is frozen with position:fixed (see
   main.js) to stop background scroll without losing the scroll offset. That
   freeze removes the scrolling ancestor position:sticky relies on, so the
   sticky header stops sticking and renders wherever it falls in the (now
   shifted) document flow — off-screen. Pin it explicitly instead. */
body.nav-open .header { position: fixed; top: 0; left: 0; right: 0; }
/* backdrop-filter lives on a pseudo-element, not .header itself — a
   backdrop-filter/filter on an element creates a new containing block for
   its position:fixed descendants, which broke the fullscreen mobile nav
   panel (it was sizing against the 84px header box instead of the viewport). */
.header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}

.header__inner {
  display: flex; align-items: center; gap: 24px;
  height: var(--header-h);
}

.logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.logo img { height: 42px; width: auto; }
.logo__text { font-family: var(--font-display); font-size: 1.45rem; letter-spacing: .04em; color: var(--ink); line-height: 1; }
.logo__text small { display: block; font-family: var(--font-body); font-size: .52rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); margin-top: 4px; }

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 4px; }
.nav__link {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px; border-radius: 999px;
  font-size: .84rem; font-weight: 500; letter-spacing: .04em;
  color: var(--ink); transition: background .25s var(--ease), color .25s var(--ease);
}
.nav__item.is-open > .nav__link { background: var(--cream); color: var(--gold); }
@media (hover: hover) and (pointer: fine) { .nav__link:hover { background: var(--cream); color: var(--gold); } }
.nav__item.is-current > .nav__link { color: var(--gold); }
.nav__caret { width: 9px; height: 9px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-2px,-2px); transition: transform .3s var(--ease); }
.nav__item.is-open .nav__caret { transform: rotate(-135deg) translate(-3px,-3px); }

.nav__item { position: relative; }

/* Dropdown */
.dropdown {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 14px;
  min-width: 260px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.nav__item.is-open .dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }

.dropdown--wide { min-width: 620px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 18px; }

.dropdown a {
  display: block; padding: 10px 14px; border-radius: 10px;
  font-size: .86rem; color: var(--body);
  transition: background .2s, color .2s;
}
@media (hover: hover) and (pointer: fine) { .dropdown a:hover { background: var(--cream); color: var(--gold); } }
.dropdown a small { display: block; font-size: .74rem; color: var(--muted); margin-top: 2px; }
.dropdown__group-title {
  grid-column: 1 / -1;
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
  padding: 12px 14px 6px; font-weight: 600;
}
.dropdown__sub { padding-left: 14px; border-left: 1px solid var(--line); margin-left: 14px; }

.header__actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.header__phone { display: flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 500; color: var(--ink); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .header__phone:hover { color: var(--gold); } }

/* Mobile toggle */
.nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; }
.nav-toggle span { display: block; width: 22px; height: 1.5px; background: var(--ink); transition: transform .3s var(--ease), opacity .3s; }
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 1150px) {
  .nav-toggle { display: flex; }
  .header__phone span { display: none; }
  .nav {
    position: fixed; inset: var(--header-h) 0 0 0;
    background: #fff; margin: 0;
    padding: 24px var(--gutter) 120px;
    overflow-y: auto;
    /* Fade + slight vertical slide rather than an off-canvas horizontal
       transform: a translateX(100%) panel sits outside the viewport and
       creates phantom horizontal overflow on some browsers. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
    z-index: 190;
  }
  body.nav-open .nav { opacity: 1; visibility: visible; transform: none; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__item { border-bottom: 1px solid var(--line); }
  .nav__link { padding: 18px 4px; font-size: 1.1rem; justify-content: space-between; border-radius: 0; min-height: 44px; }
  .nav__link:hover { background: none; }
  .nav__caret { width: 11px; height: 11px; }
  .dropdown {
    position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    box-shadow: none; border: 0; border-radius: 0; padding: 0 0 14px 12px;
    min-width: 0; display: none;
  }
  .dropdown--wide { grid-template-columns: 1fr; }
  .nav__item.is-open .dropdown { display: block; transform: none; }
  .nav__item.is-open .dropdown--wide { display: grid; }
  .dropdown a { font-size: 1rem; padding: 13px 10px; min-height: 44px; display: flex; flex-direction: column; justify-content: center; }
  .dropdown a small { font-size: .82rem; margin-top: 3px; }
  .dropdown__group-title { font-size: .78rem; padding: 18px 10px 8px; }
  .dropdown__sub { padding-left: 12px; margin-left: 2px; }
  .nav__mobile-cta { margin-top: 28px; display: grid; gap: 12px; }
  .header__actions .btn { display: none; }
}
@media (min-width: 1151px) { .nav__mobile-cta { display: none; } }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  min-height: min(88vh, 820px);
  display: flex; align-items: flex-end;
  color: #fff;
  overflow: hidden;
  background: var(--ink);
}
.hero__slides { position: absolute; inset: 0; }
.hero__slide {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 1.1s var(--ease);
}
.hero__slide.is-active { opacity: 1; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; }
.hero__slide::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,27,38,.55) 0%, rgba(13,27,38,.15) 40%, rgba(13,27,38,.85) 100%);
}
.hero__inner { position: relative; z-index: 2; width: 100%; padding-block: clamp(48px, 8vw, 96px); }
.hero__eyebrow { color: var(--gold-soft); }
.hero h1, .hero .hero-title {
  font-family: var(--font-display); font-weight: 500; line-height: 1.1; letter-spacing: -0.01em;
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  color: #fff; margin: 0 0 .25em; max-width: 16ch;
}
.hero__sub { font-size: clamp(1.05rem, 2vw, 1.35rem); color: rgba(255,255,255,.86); margin-bottom: 32px; max-width: 44ch; }
.hero__dots { display: flex; gap: 10px; margin-top: 40px; }
.hero__dot { width: 34px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.3); transition: background .3s; }
.hero__dot.is-active { background: var(--gold); }

/* Page hero (inner pages) */
.page-hero {
  background: var(--ink); color: #fff;
  padding: clamp(70px, 10vw, 140px) 0 clamp(60px, 8vw, 110px);
  position: relative; overflow: hidden;
}
.page-hero::before {
  content: ""; position: absolute; right: -10%; top: -30%;
  width: 60vw; height: 120%; border-radius: 50%;
  background: radial-gradient(circle, rgba(176,141,87,.22) 0%, transparent 65%);
}
.page-hero__inner { position: relative; z-index: 2; max-width: 760px; }
.page-hero h1 { color: #fff; }
.page-hero p { color: rgba(255,255,255,.8); font-size: 1.12rem; }
.page-hero .eyebrow { color: var(--gold-soft); }

.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: .78rem; color: rgba(255,255,255,.55); margin-bottom: 22px; }
@media (hover: hover) and (pointer: fine) { .breadcrumb a:hover { color: #fff; } }
.breadcrumb span::after { content: "/"; margin-left: 8px; opacity: .5; }

/* ==========================================================================
   Intro / benefits
   ========================================================================== */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.split--wide-left { grid-template-columns: 1.1fr .9fr; }
@media (max-width: 900px) { .split, .split--wide-left { grid-template-columns: 1fr; } }

.journey__intro { position: sticky; top: calc(var(--header-h) + 40px); }
/* On desktop the two-column .split keeps this sidebar pinned beside the
   scrolling steps. Once .split collapses to one column on mobile, sticky
   positioning would pin it on top of the steps scrolling underneath it —
   so it reverts to normal in-flow positioning below that breakpoint. */
@media (max-width: 900px) { .journey__intro { position: static; top: auto; } }

.media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.media--wide img { aspect-ratio: 16/10; }
.media iframe { width: 100%; aspect-ratio: 4/5; border: 0; display: block; }
.media--wide iframe { aspect-ratio: 16/10; }
.media--square img { aspect-ratio: 1; }

.benefit {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 32px 28px; transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
@media (hover: hover) and (pointer: fine) { .benefit:hover { transform: translateY(-5px); box-shadow: var(--shadow); } }
.benefit__icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--cream); color: var(--gold);
  display: grid; place-items: center; margin-bottom: 20px;
}
.benefit__icon svg { width: 24px; height: 24px; }
.benefit h3 { font-size: 1.3rem; margin-bottom: .4em; }
.benefit p { font-size: .94rem; color: var(--body); }

/* ==========================================================================
   Treatment cards
   ========================================================================== */

.tcard {
  position: relative; display: block;
  border-radius: var(--radius-lg); overflow: hidden;
  background: var(--ink);
  aspect-ratio: 3/4;
}
.tcard img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
@media (hover: hover) and (pointer: fine) { .tcard:hover img { transform: scale(1.06); } }
.tcard::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(13,27,38,.85) 100%);
}
.tcard__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 28px 26px; color: #fff; }
.tcard__body h3 { color: #fff; margin-bottom: .3em; }
.tcard__body p { font-size: .88rem; color: rgba(255,255,255,.78); margin: 0; }
.tcard__more { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-soft); }

/* Simple listing card */
.lcard {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
@media (hover: hover) and (pointer: fine) { .lcard:hover { transform: translateY(-5px); box-shadow: var(--shadow); } }
.lcard img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.lcard__body { padding: 26px 24px; display: flex; flex-direction: column; flex: 1; }
.lcard__meta { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.lcard h3 { font-size: 1.25rem; }
.lcard p { font-size: .92rem; }
.lcard .link-arrow { margin-top: auto; padding-top: 18px; align-self: flex-start; }

/* ==========================================================================
   Marquee
   ========================================================================== */

.marquee { overflow: hidden; padding: 26px 0; background: var(--ink); }
.marquee__track { display: flex; gap: 48px; width: max-content; animation: marquee 32s linear infinite; }
.marquee__item {
  font-family: var(--font-display); font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  color: rgba(255,255,255,.28); white-space: nowrap;
  display: flex; align-items: center; gap: 48px;
}
.marquee__item::after { content: "✦"; font-size: .5em; color: var(--gold); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ==========================================================================
   Journey steps
   ========================================================================== */

.step { display: grid; grid-template-columns: 72px 1fr; gap: 24px; padding: 30px 0; border-top: 1px solid var(--line); }
.step:last-child { border-bottom: 1px solid var(--line); }
.step__n {
  font-family: var(--font-display); font-size: 2.4rem; color: var(--gold); line-height: 1;
}
.step h3 { font-size: 1.35rem; margin-bottom: .4em; }
.step p { font-size: .95rem; margin: 0; }
@media (max-width: 600px) { .step { grid-template-columns: 48px 1fr; gap: 16px; } .step__n { font-size: 1.8rem; } }

/* ==========================================================================
   Team
   ========================================================================== */

.person { text-align: left; }
.person__photo { border-radius: var(--radius); overflow: hidden; margin-bottom: 18px; background: var(--sand); }
.person__photo img { aspect-ratio: 3/4; object-fit: cover; width: 100%; transition: transform .7s var(--ease); }
@media (hover: hover) and (pointer: fine) { .person:hover .person__photo img { transform: scale(1.05); } }
.person h3 { font-size: 1.2rem; margin-bottom: .15em; }
.person__role { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin: 0 0 .6em; }
.person__reg { font-size: .76rem; color: var(--muted); }
.person__bio { font-size: .92rem; margin-top: .8em; }

/* Solo team member (just one dentist) — center instead of a left-aligned
   grid/rail built for multiple columns. */
.team-solo { display: flex; justify-content: center; }
.team-solo .person { max-width: 360px; text-align: center; }
.team-solo .person__photo { max-width: 300px; margin-inline: auto; }

/* ==========================================================================
   Reviews
   ========================================================================== */

.review {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 28px; height: 100%; display: flex; flex-direction: column;
}
.review__stars { color: var(--gold); letter-spacing: 3px; margin-bottom: 14px; font-size: .95rem; }
.review h4 { font-family: var(--font-display); font-size: 1.25rem; margin-bottom: .5em; }
.review p { font-size: .92rem; }
.review__by { margin-top: auto; padding-top: 20px; font-size: .82rem; color: var(--muted); }
.review__by strong { display: block; color: var(--ink); font-weight: 600; }

.rating-badge {
  display: inline-flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 12px 24px; box-shadow: var(--shadow-sm);
}
.rating-badge__score { font-family: var(--font-display); font-size: 1.8rem; color: var(--ink); line-height: 1; }
.rating-badge__meta { font-size: .8rem; color: var(--muted); line-height: 1.4; }
.rating-badge__stars { color: var(--gold); letter-spacing: 2px; }

/* Scroll rail */
.rail { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 20px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.rail > * { flex: 0 0 min(360px, 82vw); scroll-snap-align: start; }
.rail::-webkit-scrollbar { height: 4px; }
.rail::-webkit-scrollbar-thumb { background: var(--gold-soft); border-radius: 2px; }
.rail::-webkit-scrollbar-track { background: var(--line); }

/* ==========================================================================
   Pricing
   ========================================================================== */

.pcard {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 36px 32px; display: flex; flex-direction: column;
}
.pcard h3 { font-size: 1.5rem; }
.pcard ul { margin: 20px 0; display: grid; gap: 11px; }
.pcard li { position: relative; padding-left: 26px; font-size: .93rem; }
.pcard li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 12px; height: 6px; border-left: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold);
  transform: rotate(-45deg);
}
.pcard .btn { margin-top: auto; align-self: flex-start; }

.tier { background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg); padding: 36px 32px; display:flex; flex-direction:column; }
.tier.is-featured { border-color: var(--gold); box-shadow: var(--shadow); position: relative; }
.tier.is-featured::before {
  content: "Most popular"; position: absolute; top: -13px; left: 32px;
  background: var(--gold); color: #fff; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
  padding: 5px 14px; border-radius: 999px;
}
.tier__price { font-family: var(--font-display); font-size: 3rem; color: var(--ink); line-height: 1; margin: 10px 0 4px; }
.tier__price span { font-family: var(--font-body); font-size: .95rem; color: var(--muted); }
.tier ul { margin: 22px 0; display: grid; gap: 11px; }
.tier li { position: relative; padding-left: 26px; font-size: .93rem; }
.tier li::before { content:""; position:absolute; left:0; top:.55em; width:12px; height:6px; border-left:1.5px solid var(--gold); border-bottom:1.5px solid var(--gold); transform: rotate(-45deg); }
.tier .btn { margin-top: auto; }

/* Consultation / smile package cards */
.pkg { background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg); padding: 32px 30px; display:flex; flex-direction:column; }
.pkg__badge {
  display:inline-block; align-self:flex-start; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  color: var(--gold); background: var(--cream); border-radius:999px; padding:5px 12px; margin-bottom:16px;
}
.pkg h3 { font-size: 1.35rem; margin-bottom: .5em; }
.pkg__body { font-size: .93rem; color: var(--body); }
.pkg__deposit { font-size: .85rem; color: var(--muted); margin-top: 12px; }
.pkg__includes {
  list-style: none; margin: 18px 0 0; padding: 14px 16px;
  background: var(--cream); border: 1px solid var(--line); border-left: 3px solid var(--gold);
  border-radius: 10px; display: grid; gap: 8px;
}
.pkg__includes li {
  position: relative; padding-left: 24px; font-size: .86rem; font-weight: 600; color: var(--ink);
}
.pkg__includes li::before {
  content: "✓"; position: absolute; left: 0; top: -1px; color: var(--gold); font-weight: 700; font-size: 1rem;
}
.pkg__meta {
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  margin: 20px 0; padding-top: 18px; border-top: 1px solid var(--line);
}
.pkg__duration { font-size: .85rem; color: var(--muted); }
.pkg__price { font-family: var(--font-display); font-size: 1.6rem; color: var(--ink); white-space: nowrap; }
.pkg__price small { font-family: var(--font-body); font-size: .78rem; color: var(--muted); }
.pkg .btn { margin-top: auto; align-self: flex-start; }

.price-table { width: 100%; border-collapse: collapse; margin-bottom: 46px; }
.price-table caption {
  text-align: left; font-family: var(--font-display); font-size: 1.6rem; color: var(--ink);
  padding-bottom: 14px;
}
.price-table td { padding: 15px 6px; border-bottom: 1px solid var(--line); font-size: .95rem; }
.price-table td:last-child { text-align: right; font-weight: 600; color: var(--ink); white-space: nowrap; }

/* Treatment fact strip */
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.facts div { background: #fff; padding: 24px 22px; }
.facts dt { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.facts dd { margin: 0; font-family: var(--font-display); font-size: 1.4rem; color: var(--ink); }
@media (max-width: 620px) { .facts { grid-template-columns: 1fr; } }

/* ==========================================================================
   FAQ accordion
   ========================================================================== */

.faq-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.faq-tab {
  padding: 11px 22px; border-radius: 999px; border: 1px solid var(--line); background: #fff;
  font-size: .82rem; letter-spacing: .06em; transition: all .25s var(--ease);
}
@media (hover: hover) and (pointer: fine) { .faq-tab:hover { border-color: var(--gold); color: var(--gold); } }
.faq-tab.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

.faq-panel { display: none; }
.faq-panel.is-active { display: block; }

.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__q {
  width: 100%; text-align: left; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding: 24px 0; font-family: var(--font-display); font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--ink);
  transition: color .25s;
}
@media (hover: hover) and (pointer: fine) { .acc__q:hover { color: var(--gold); } }
.acc__icon { position: relative; flex-shrink: 0; width: 18px; height: 18px; margin-top: 6px; }
.acc__icon::before, .acc__icon::after {
  content: ""; position: absolute; background: var(--gold); transition: transform .3s var(--ease);
}
.acc__icon::before { left: 0; top: 8px; width: 18px; height: 1.5px; }
.acc__icon::after  { top: 0; left: 8px; width: 1.5px; height: 18px; }
.acc__item.is-open .acc__icon::after { transform: rotate(90deg); }
.acc__a { overflow: hidden; height: 0; transition: height .35s var(--ease); }
.acc__a-inner { padding: 0 0 26px; max-width: 78ch; font-size: .96rem; }

/* ==========================================================================
   Locations
   ========================================================================== */

.loc {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; display: flex; flex-direction: column;
}
.loc__map { aspect-ratio: 16/9; background: var(--sand); position: relative; }
.loc__map img { width: 100%; height: 100%; object-fit: cover; }
.loc__map iframe { width: 100%; height: 100%; border: 0; display: block; }
.loc__body { padding: 30px 28px; display: flex; flex-direction: column; flex: 1; }
.loc__type { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.loc h3 { font-size: 1.5rem; margin-bottom: .35em; }
.loc address { font-style: normal; font-size: .93rem; color: var(--body); margin-bottom: 18px; }
.loc__hours { width: 100%; border-collapse: collapse; margin-bottom: 22px; }
.loc__hours td { padding: 7px 0; font-size: .87rem; border-bottom: 1px solid var(--line); }
.loc__hours td:last-child { text-align: right; color: var(--ink); }
.loc .btn { margin-top: auto; align-self: flex-start; }

/* Solo location (just one clinic) — center instead of a two-column grid
   built for multiple locations, which leaves an empty second slot. */
.loc-solo { display: flex; justify-content: center; }
.loc-solo .loc { max-width: 560px; width: 100%; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.chip { font-size: .74rem; letter-spacing: .05em; padding: 6px 14px; border-radius: 999px; background: var(--cream); color: var(--ink); border: 1px solid var(--line); }

/* ==========================================================================
   Before / after
   ========================================================================== */

.ba { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: #fff; }
.ba__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); }
.ba__pair figure { margin: 0; position: relative; background: #fff; }
.ba__pair img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.ba__pair figcaption {
  position: absolute; left: 12px; top: 12px;
  background: rgba(13,27,38,.78); color: #fff;
  font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
}
.ba__body { padding: 22px 24px; }
.ba__body h3 { font-size: 1.15rem; margin-bottom: .3em; }
.ba__body p { font-size: .88rem; margin: 0; color: var(--muted); }

/* ==========================================================================
   Stats
   ========================================================================== */

.stat { text-align: center; }
.stat__value { font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, 3.6rem); color: var(--gold); line-height: 1; }
.stat__label { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: 10px; }
.section--dark .stat__label { color: rgba(255,255,255,.6); }

/* ==========================================================================
   CTA band
   ========================================================================== */

.cta-band { position: relative; overflow: hidden; background: var(--ink); color: #fff; padding: clamp(70px, 10vw, 140px) 0; text-align: center; }
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 120%, rgba(176,141,87,.35) 0%, transparent 60%);
}
.cta-band__inner { position: relative; z-index: 2; }
.cta-band h2 { color: #fff; margin-bottom: .3em; }
.cta-band p { color: rgba(255,255,255,.75); font-size: 1.1rem; margin-bottom: 34px; }

/* ==========================================================================
   Forms
   ========================================================================== */

.form { display: grid; gap: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 620px) { .form-row { grid-template-columns: 1fr; } }

.field label { display: block; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); font-weight: 600; margin-bottom: 8px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 12px;
  font: inherit; font-size: .95rem; color: var(--ink); background: #fff;
  transition: border-color .25s, box-shadow .25s;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(176,141,87,.15);
}
.field--check { display: flex; gap: 12px; align-items: flex-start; }
.field--check input { width: auto; margin-top: 4px; flex-shrink: 0; }
.field--check label { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: .88rem; color: var(--body); margin: 0; }
.form__note { font-size: .82rem; color: var(--muted); }

.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 48px); box-shadow: var(--shadow-sm); }

.form-status { padding: 14px 18px; border-radius: 12px; font-size: .9rem; display: none; }
.form-status.is-ok { display: block; background: #e8f3ec; color: #1c5c37; }
.form-status.is-err { display: block; background: #fbeaea; color: #8c2b2b; }

/* ==========================================================================
   Prose (article body)
   ========================================================================== */

.prose { max-width: 74ch; font-size: 1.02rem; }
.prose h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-top: 1.8em; }
.prose h3 { margin-top: 1.6em; }
.prose ul { margin: 0 0 1.2em; display: grid; gap: 9px; }
.prose ul li { position: relative; padding-left: 24px; }
.prose ul li::before { content: ""; position: absolute; left: 4px; top: .72em; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.prose a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.prose blockquote {
  margin: 2em 0; padding: 24px 30px; border-left: 3px solid var(--gold); background: var(--cream);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--font-display); font-size: 1.3rem; color: var(--ink);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer { background: var(--ink); color: #93a3ae; padding: clamp(56px, 7vw, 96px) 0 0; font-size: .9rem; }
@media (hover: hover) and (pointer: fine) { .footer a:hover { color: var(--gold-soft); } }
.footer h3 { color: #fff; font-family: var(--font-body); font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 20px; }
.footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; padding-bottom: 56px; }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__links { display: grid; gap: 11px; }
.footer__links--loc { gap: 14px; }
.footer__addr { display: grid; gap: 5px; font-style: normal; }
.footer__addr span { font-size: .84rem; line-height: 1.65; color: #8a9aa4; }
/* An address that links to the map should still read as an address, not as a
   run of blue link text — it carries its own underline on hover instead. */
.addr-link { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
@media (hover: hover) and (pointer: fine) {
  .addr-link:hover { border-bottom-color: currentColor; }
}
.footer__brand .logo__text { color: #fff; }
.footer__brand p { margin-top: 18px; max-width: 34ch; font-size: .88rem; }

.socials { display: flex; gap: 12px; margin-top: 22px; }
.socials a {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18);
  display: grid; place-items: center; transition: all .25s var(--ease);
}
@media (hover: hover) and (pointer: fine) { .socials a:hover { background: var(--gold); border-color: var(--gold); color: #fff; } }
.socials svg { width: 17px; height: 17px; }

.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 26px 0 40px;
  display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; justify-content: space-between;
  font-size: .8rem;
}
.footer__policies { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.footer__legal { padding-bottom: 40px; font-size: .74rem; color: #64757f; line-height: 1.7; max-width: 100ch; }

/* ==========================================================================
   Sticky mobile CTA bar
   ========================================================================== */

.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 180;
  display: none; gap: 1px; background: var(--line);
  box-shadow: 0 -6px 24px rgba(13,27,38,.12);
}
.sticky-cta a {
  flex: 1; padding: 15px 8px; text-align: center; background: #fff;
  font-size: .76rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
}
.sticky-cta a.is-primary { background: var(--gold); color: #fff; }
@media (max-width: 780px) {
  .sticky-cta { display: flex; }
  body { padding-bottom: 54px; }
  .footer__bottom { padding-bottom: 26px; }
}

.whatsapp-widget {
  position: fixed; right: 24px; bottom: 24px; z-index: 190;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25d366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(13,27,38,.28);
  transition: transform .2s var(--ease);
}
.whatsapp-widget svg { width: 30px; height: 30px; }
@media (hover: hover) and (pointer: fine) { .whatsapp-widget:hover { transform: scale(1.08); color: #fff; } }
@media (max-width: 780px) {
  .whatsapp-widget { bottom: 70px; right: 14px; width: 50px; height: 50px; }
  .whatsapp-widget svg { width: 26px; height: 26px; }
}

/* Cookie consent banner */
.cookie-banner {
  position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 300;
  max-width: 560px; margin-inline: auto;
  background: var(--ink); color: #fff;
  border-radius: var(--radius-lg); box-shadow: 0 12px 40px rgba(0,0,0,.35);
  padding: 22px 24px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner p { font-size: .88rem; line-height: 1.5; margin: 0; flex: 1 1 260px; color: rgba(255,255,255,.88); }
.cookie-banner a { color: var(--gold-soft); text-decoration: underline; }
.cookie-banner__actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-banner .btn--ghost { border-color: rgba(255,255,255,.35); color: #fff; }
@media (max-width: 780px) {
  .cookie-banner { left: 12px; right: 12px; bottom: 78px; padding: 18px; }
}

/* ==========================================================================
   Reveal on scroll
   ========================================================================== */

/* The hidden state is gated on .js-reveal, which the inline head script adds
   and removes again if the observer in main.js never gets to run. Hiding
   unconditionally in CSS means any failure to load or execute main.js leaves
   a blank page — which is exactly what long blog posts were doing. */
.js-reveal [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js-reveal [data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
  .header, .footer, .sticky-cta, .whatsapp-widget, .announce, .cta-band, .hero__dots { display: none !important; }
  body { color: #000; font-size: 12pt; }
  a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #666; }
}