/*
Theme Name: R.M. Eye Centre
Theme URI: https://rmeyecentre.com/
Author: Built for R.M. Eye Centre
Description: Conversion-focused single-page theme for an ophthalmology practice. Every section, string, image, colour and animation setting is editable from Appearance > Customize; services, reviews, FAQs, trust cards and pathology cards are editable as their own post types. No plugins required.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rm-eye-centre
Tags: one-column, custom-colors, custom-logo, custom-menu, editor-style, featured-images, translation-ready
*/

/* ==========================================================================
   R.M. EYE CENTRE — stylesheet
   Palette: deep charcoal / warm ivory / muted sage. No loud medical blues.
   Structure follows a conversion-first healthcare layout; surface is premium.
   ========================================================================== */

/* --------------------------------------------------------------------------
   01 · TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Core palette */
  --ink:        #1B1D1C;   /* deep charcoal — headings, dark sections */
  --ink-2:      #2C302D;
  --graphite:   #4A504B;
  --muted:      #757A75;   /* secondary copy */
  --line:       #E4E0D6;   /* borders on ivory */
  --line-soft:  #EFEBE2;
  --ivory:      #F7F4ED;   /* warm off-white page tint */
  --ivory-2:    #F1EDE3;
  --paper:      #FFFFFF;
  --sage:       #5E7A62;   /* the single accent */
  --sage-deep:  #445B48;
  --sage-tint:  #EAF0EA;
  --teal:       #2E5B60;   /* drawn from the logo, used very sparingly */

  /* Radius */
  --r-btn: 12px;
  --r-sm:  18px;
  --r-md:  24px;
  --r-lg:  32px;

  /* Shadow — soft and large, never hard */
  --sh-1: 0 1px 2px rgba(27,29,28,.04), 0 8px 24px -12px rgba(27,29,28,.10);
  --sh-2: 0 2px 6px rgba(27,29,28,.05), 0 20px 44px -20px rgba(27,29,28,.18);
  --sh-3: 0 8px 20px rgba(27,29,28,.07), 0 40px 80px -32px rgba(27,29,28,.26);

  /* Layout */
  --container: 1280px;
  --gutter: 24px;
  --section-y: 116px;

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-spring: cubic-bezier(.16,1,.3,1);
}

/* --------------------------------------------------------------------------
   02 · RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem;      /* 17px */
  line-height: 1.65;
  font-weight: 450;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1.08;
  text-wrap: balance;
}

p { margin: 0; }

ul { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--sage); color: #fff; }

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

.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;
}

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--ink); color: #fff;
  padding: 12px 20px; border-radius: var(--r-btn);
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 16px; }

/* --------------------------------------------------------------------------
   03 · LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: 84px; }
.section--ivory { background: var(--ivory); }
.section--ink { background: var(--ink); color: var(--ivory); }

.section-head { max-width: 720px; margin-inline: auto; text-align: center; }
.section-head h2 { font-size: clamp(2rem, 3.6vw, 3.05rem); margin-bottom: 18px; }
.section-head p {
  color: var(--muted);
  font-size: 1.0625rem;
  max-width: 560px;
  margin-inline: auto;
}
.section-head--left { margin-inline: 0; text-align: left; }
.section-head--left p { margin-inline: 0; }

/* Eyebrow — custom SVG icon, sentence case (no emoji, no all-caps) */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 20px;
  padding: 7px 15px 7px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--sage-deep);
  font-size: .875rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.eyebrow svg { width: 15px; height: 15px; flex: none; }
.section--ink .eyebrow {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
  color: #C8D6C7;
}

/* Serif accent — numerals and pull quotes only */
.serif {
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -0.02em;
}

/* --------------------------------------------------------------------------
   04 · BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: var(--r-btn);
  font-size: .975rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.btn svg { width: 17px; height: 17px; flex: none; transition: transform .25s var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:hover .btn-arrow { transform: translateX(3px); }

.btn--primary { background: var(--ink); color: var(--ivory); box-shadow: var(--sh-1); }
.btn--primary:hover { background: #101211; box-shadow: var(--sh-2); }

.btn--sage { background: var(--sage); color: #fff; box-shadow: var(--sh-1); }
.btn--sage:hover { background: var(--sage-deep); box-shadow: var(--sh-2); }

.btn--ghost {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn--ghost:hover { border-color: var(--ink); box-shadow: var(--sh-1); }

.btn--light { background: var(--ivory); color: var(--ink); }
.btn--light:hover { background: #fff; box-shadow: var(--sh-2); }

.btn--outline-light {
  background: transparent;
  color: var(--ivory);
  border: 1px solid rgba(255,255,255,.28);
}
.btn--outline-light:hover { border-color: var(--ivory); background: rgba(255,255,255,.06); }

.btn--sm { padding: 11px 18px; font-size: .875rem; }
.btn--block { width: 100%; }

/* --------------------------------------------------------------------------
   05 · HEADER
   -------------------------------------------------------------------------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  padding-block: 18px;
  background: transparent;
  transition: padding .3s var(--ease), background-color .3s var(--ease),
              box-shadow .3s var(--ease), border-color .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.header.is-scrolled {
  padding-block: 10px;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(150%) blur(16px);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  border-bottom-color: var(--line-soft);
  box-shadow: 0 6px 24px -20px rgba(27,29,28,.5);
}
.header-inner { display: flex; align-items: center; gap: 28px; }

.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.brand img { width: 52px; height: 52px; border-radius: 50%; transition: width .3s var(--ease), height .3s var(--ease); }
.header.is-scrolled .brand img { width: 44px; height: 44px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.03em; }
.brand-sub { font-size: .75rem; color: var(--muted); font-weight: 550; letter-spacing: -0.005em; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  padding: 9px 14px;
  border-radius: 10px;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--graphite);
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.nav a:hover { color: var(--ink); background: var(--ivory-2); }

.header-cta { display: flex; align-items: center; gap: 10px; }
.header-phone {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .9375rem; font-weight: 700; color: var(--ink);
  padding: 9px 12px; border-radius: 10px;
  transition: background-color .2s var(--ease);
}
.header-phone:hover { background: var(--ivory-2); }
.header-phone svg { width: 16px; height: 16px; color: var(--sage); }

.burger {
  display: none;
  width: 46px; height: 46px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  align-items: center; justify-content: center;
}
.burger span {
  display: block; width: 18px; height: 1.8px; background: var(--ink);
  border-radius: 2px; position: relative;
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 1.8px;
  background: var(--ink); border-radius: 2px;
  transition: transform .3s var(--ease);
}
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

.mobile-nav {
  position: fixed; inset: 0; z-index: 89;
  background: var(--paper);
  padding: 104px var(--gutter) 40px;
  display: flex; flex-direction: column; gap: 4px;
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  overflow-y: auto;
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: none; }
.mobile-nav a {
  padding: 16px 4px;
  font-size: 1.375rem; font-weight: 700; letter-spacing: -0.03em;
  border-bottom: 1px solid var(--line-soft);
}
.mobile-nav .btn { margin-top: 24px; }

/* --------------------------------------------------------------------------
   06 · HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: 148px;
  padding-bottom: 92px;
  background:
    radial-gradient(90% 70% at 78% 22%, #F0F4EF 0%, rgba(240,244,239,0) 62%),
    linear-gradient(180deg, var(--ivory) 0%, #FBF9F5 62%, var(--paper) 100%);
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 56px;
  align-items: center;
}

.hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: .8125rem; font-weight: 650;
  color: var(--graphite);
  box-shadow: var(--sh-1);
}
.badge svg { width: 14px; height: 14px; color: var(--sage); flex: none; }
.badge--ink { background: var(--ink); border-color: var(--ink); color: var(--ivory); }
.badge--ink svg { color: #A9C0A8; }

.hero h1 {
  font-size: clamp(2.55rem, 5.1vw, 4.15rem);
  letter-spacing: -0.042em;
  margin-bottom: 22px;
}
.hero h1 .line-2 { display: block; color: var(--sage-deep); }

.hero-lede {
  font-size: 1.125rem;
  color: var(--graphite);
  max-width: 480px;
  margin-bottom: 30px;
}

/* Rating block */
.rating {
  display: inline-flex; align-items: center; gap: 16px;
  padding: 13px 20px 13px 16px;
  border-radius: var(--r-sm);
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
  margin-bottom: 28px;
}
.rating-score { font-size: 2rem; line-height: 1; color: var(--ink); }
.rating-meta { display: flex; flex-direction: column; gap: 3px; }
.stars { display: flex; gap: 2px; }
.stars svg { width: 14px; height: 14px; color: #D9A441; }
.rating-count { font-size: .8125rem; color: var(--muted); font-weight: 550; }
.rating-count strong { color: var(--ink); font-weight: 700; }
.g-mark { display: inline-flex; align-items: center; gap: 5px; font-size: .8125rem; font-weight: 650; color: var(--graphite); }
.g-mark svg { width: 14px; height: 14px; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.hero-visual { position: relative; display: grid; place-items: center; min-height: 500px; }


.hero-blob {
  position: absolute; inset: -6% -4% -2% -6%;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 34%, #FFFFFF 0%, #F2F6F0 46%, #E9EFE7 100%);
  filter: blur(.4px);
  box-shadow: inset 0 0 90px rgba(94,122,98,.09), var(--sh-2);
  z-index: -1;
}

/* Floating cards over the hero visual */
.float-card {
  position: absolute;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-2);
  padding: 14px 17px;
  z-index: 3;
}
.float-card--chart { top: 4%; right: -2%; padding: 15px 20px; text-align: center; }
.chart-label { font-size: .625rem; color: var(--muted); font-weight: 650; letter-spacing: .1em; margin-bottom: 8px; }
.chart-line { line-height: 1.05; color: var(--ink); font-weight: 700; letter-spacing: .16em; }
.chart-line:nth-child(2) { font-size: 1.5rem; }
.chart-line:nth-child(3) { font-size: 1.05rem; }
.chart-line:nth-child(4) { font-size: .8125rem; }
.chart-line:nth-child(5) { font-size: .625rem; color: var(--muted); }

.float-doc-name { font-size: .9375rem; font-weight: 750; letter-spacing: -0.02em; }
.float-doc-sub { font-size: .75rem; color: var(--muted); font-weight: 550; }

.float-card--incision {
  bottom: 26%; right: -5%;
  display: flex; align-items: center; gap: 11px;
  background: var(--ink); border-color: var(--ink); color: var(--ivory);
}
.float-card--incision .num { font-size: 1.375rem; line-height: 1; }
.float-card--incision .lbl { font-size: .75rem; color: #B6C6B5; font-weight: 550; line-height: 1.3; }

/* --------------------------------------------------------------------------
   07 · TICKER
   -------------------------------------------------------------------------- */
.ticker {
  background: var(--ink);
  color: var(--ivory);
  padding-block: 17px;
  overflow: hidden;
  position: relative;
}
.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker 34s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-group { display: flex; align-items: center; flex: none; }
.ticker-item {
  display: inline-flex; align-items: center; gap: 14px;
  padding-inline: 22px;
  font-size: .9375rem; font-weight: 600; letter-spacing: -0.01em;
  white-space: nowrap;
}
.ticker-item svg { width: 12px; height: 12px; color: var(--sage); opacity: .85; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   08 · TRUST STRIP
   -------------------------------------------------------------------------- */
.trust { padding-block: 64px; background: var(--paper); }
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.trust-card {
  padding: 26px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}
.trust-card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--line-soft); }
.trust-icon {
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--sage-tint); color: var(--sage-deep);
  display: grid; place-items: center; margin-bottom: 16px;
}
.trust-icon svg { width: 19px; height: 19px; }
.trust-card h3 { font-size: 1.0625rem; font-weight: 750; margin-bottom: 6px; letter-spacing: -0.025em; }
.trust-card p { font-size: .875rem; color: var(--muted); line-height: 1.55; }

.insurers { margin-top: 34px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.insurers-label { font-size: .8125rem; color: var(--muted); font-weight: 600; margin-right: 6px; }
.insurer-chip {
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--ivory);
  font-size: .8125rem; font-weight: 650; color: var(--graphite);
}

/* --------------------------------------------------------------------------
   09 · APPOINTMENT BLOCK
   -------------------------------------------------------------------------- */
.appointment { background: var(--ivory); }
.appt-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
}
.appt-left { padding: 52px 52px 46px; }
.appt-left h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); margin-bottom: 16px; }
.appt-left > p { color: var(--muted); max-width: 460px; margin-bottom: 32px; }

.appt-detail { display: flex; gap: 14px; padding-block: 18px; border-top: 1px solid var(--line-soft); }
.appt-detail:first-of-type { border-top: 0; padding-top: 0; }
.appt-detail-icon {
  width: 38px; height: 38px; flex: none; border-radius: 11px;
  background: var(--ivory-2); color: var(--sage-deep);
  display: grid; place-items: center;
}
.appt-detail-icon svg { width: 17px; height: 17px; }
.appt-detail dt { font-size: .75rem; color: var(--muted); font-weight: 650; margin-bottom: 3px; }
.appt-detail dd { margin: 0; font-size: 1rem; font-weight: 650; letter-spacing: -0.018em; line-height: 1.45; }
.appt-detail dd a:hover { color: var(--sage-deep); }

.appt-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 30px; }

.appt-right {
  padding: 52px 46px;
  background: linear-gradient(165deg, #222623 0%, var(--ink) 55%, #171A18 100%);
  color: var(--ivory);
  display: flex; flex-direction: column; justify-content: center;
}
.appt-right h3 { font-size: 1.3125rem; margin-bottom: 8px; }
.appt-right > p { font-size: .9375rem; color: #A9B0A8; margin-bottom: 28px; }

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: rgba(255,255,255,.09); border-radius: var(--r-md); overflow: hidden; }
.stat {
  background: var(--ink);
  padding: 24px 20px;
}
.stat-num { font-size: 2.4rem; line-height: 1; color: var(--ivory); margin-bottom: 7px; }
.stat-num sup { font-size: .5em; vertical-align: super; margin-left: 1px; }
.stat-label { font-size: .8125rem; color: #9AA399; font-weight: 600; line-height: 1.4; }

/* --------------------------------------------------------------------------
   10 · SERVICE CARDS
   -------------------------------------------------------------------------- */

.svc-link {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .875rem; font-weight: 700; color: var(--ink);
  transition: color .3s var(--ease);
}
.svc-link svg { width: 15px; height: 15px; transition: transform .3s var(--ease); }

/* --------------------------------------------------------------------------
   11 · MID-PAGE CTA
   -------------------------------------------------------------------------- */
.midcta { background: var(--ivory); }
.midcta-card {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 0;
  background: var(--ink);
  border-radius: var(--r-lg);
  overflow: hidden;
  color: var(--ivory);
  box-shadow: var(--sh-3);
}
.midcta-visual {
  position: relative;
  background: linear-gradient(150deg, #2C332C 0%, #1F241F 100%);
  display: grid; place-items: center;
  padding: 44px;
  min-height: 320px;
}
.midcta-visual svg { width: 100%; max-width: 260px; height: auto; }
.midcta-body { padding: 54px 52px; display: flex; flex-direction: column; justify-content: center; }
.midcta-body h2 { font-size: clamp(1.75rem, 2.7vw, 2.4rem); margin-bottom: 16px; }
.midcta-body p { color: #A9B0A8; max-width: 480px; margin-bottom: 30px; }
.midcta-actions { display: flex; flex-wrap: wrap; gap: 11px; }

/* --------------------------------------------------------------------------
   12 · DOCTOR
   -------------------------------------------------------------------------- */
.doctor-grid {
  display: grid;
  grid-template-columns: .86fr 1.14fr;
  gap: 68px;
  align-items: start;
}
.doc-media { position: relative; }
.doc-photo-frame {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ivory-2);
  box-shadow: var(--sh-3);
  aspect-ratio: 4 / 4.6;
}
.doc-photo-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.doc-photo-frame::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(27,29,28,0) 58%, rgba(27,29,28,.42) 100%);
}
.doc-media::before {
  content: ""; position: absolute;
  width: 62%; aspect-ratio: 1; border-radius: 50%;
  background: var(--sage-tint);
  top: -34px; left: -46px; z-index: -1;
}
.doc-reg {
  position: absolute; left: 22px; right: 22px; bottom: 22px; z-index: 2;
  display: flex; align-items: center; gap: 11px;
  padding: 13px 16px;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(8px);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-1);
}
.doc-reg svg { width: 19px; height: 19px; color: var(--sage-deep); flex: none; }
.doc-reg-t { font-size: .8125rem; font-weight: 750; letter-spacing: -0.015em; }
.doc-reg-s { font-size: .75rem; color: var(--muted); }

.doc-label { font-size: .75rem; font-weight: 700; letter-spacing: .14em; color: var(--sage-deep); margin-bottom: 14px; }
.doctor-body h2 { font-size: clamp(1.9rem, 3.2vw, 2.85rem); margin-bottom: 24px; }
.doc-name-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.doc-name { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.035em; }
.doc-degrees { font-size: .9375rem; color: var(--sage-deep); font-weight: 700; }
.doc-role { color: var(--muted); font-size: .9375rem; font-weight: 600; margin-bottom: 24px; }
.doc-body-copy { color: var(--graphite); max-width: 620px; margin-bottom: 14px; }

.pullquote {
  margin: 30px 0;
  padding: 24px 28px;
  border-left: 3px solid var(--sage);
  background: var(--ivory);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--ink);
  font-style: italic;
}

.chip-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 30px 0; }
.chip {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.chip:hover { border-color: var(--sage); box-shadow: var(--sh-1); }
.chip svg { width: 18px; height: 18px; color: var(--sage-deep); flex: none; }
.chip-t { font-size: .9375rem; font-weight: 750; letter-spacing: -0.02em; line-height: 1.25; }
.chip-s { font-size: .75rem; color: var(--muted); }

.proc-list { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 32px; }
.proc {
  padding: 9px 15px;
  border-radius: 999px;
  background: var(--ivory-2);
  font-size: .875rem; font-weight: 620; color: var(--graphite);
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.proc:hover { background: var(--sage); color: #fff; }

/* --------------------------------------------------------------------------
   13 · LOCATION
   -------------------------------------------------------------------------- */
.location { background: var(--ivory); }
.loc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 52px; }
.loc-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-1);
}
.loc-map-graphic { padding: 32px; background: linear-gradient(160deg, #F3F7F2 0%, #FFFFFF 100%); }
.loc-map-graphic svg { width: 100%; height: auto; }

.loc-info { padding: 36px 34px 34px; }
.loc-info h3 { font-size: 1.3125rem; margin-bottom: 6px; }
.loc-city { font-size: .8125rem; font-weight: 700; letter-spacing: .1em; color: var(--sage-deep); margin-bottom: 18px; }
.loc-row { display: flex; gap: 13px; padding-block: 15px; border-top: 1px solid var(--line-soft); font-size: .9375rem; }
.loc-row:first-of-type { border-top: 0; }
.loc-row svg { width: 17px; height: 17px; color: var(--sage-deep); flex: none; margin-top: 3px; }
.loc-row span { color: var(--graphite); line-height: 1.55; }
.loc-row a { font-weight: 700; }
.loc-row a:hover { color: var(--sage-deep); }
.loc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

.map-embed { border: 0; width: 100%; height: 100%; min-height: 380px; display: block; filter: grayscale(.28) contrast(1.02); }
.loc-panel--map { display: flex; flex-direction: column; }

/* --------------------------------------------------------------------------
   14 · ANNOUNCEMENT
   -------------------------------------------------------------------------- */
.announce-card {
  position: relative;
  padding: 56px 56px 52px;
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 140% at 88% 8%, rgba(94,122,98,.14) 0%, rgba(94,122,98,0) 55%),
    var(--ivory);
  border: 1px solid var(--line);
  overflow: hidden;
}
.announce-card h2 { font-size: clamp(1.85rem, 3vw, 2.65rem); margin-bottom: 16px; }
.announce-lede { color: var(--graphite); max-width: 620px; margin-bottom: 12px; }
.announce-note { font-size: .875rem; color: var(--muted); max-width: 620px; }
.announce-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.announce-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .875rem; font-weight: 650;
  box-shadow: var(--sh-1);
}
.announce-tag svg { width: 15px; height: 15px; color: var(--sage-deep); }

/* --------------------------------------------------------------------------
   15 · ABOUT
   -------------------------------------------------------------------------- */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.about-body h2 { font-size: clamp(1.9rem, 3.2vw, 2.75rem); margin-bottom: 22px; }
.about-body p { color: var(--graphite); margin-bottom: 16px; max-width: 560px; }
.about-points { display: grid; gap: 12px; margin-top: 32px; }
.about-point { display: flex; gap: 14px; align-items: flex-start; }
.about-point-mark {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  background: var(--sage); color: #fff;
  display: grid; place-items: center; margin-top: 2px;
}
.about-point-mark svg { width: 13px; height: 13px; }
.about-point h3 { font-size: 1rem; font-weight: 750; margin-bottom: 3px; letter-spacing: -0.022em; }
.about-point p { font-size: .9375rem; color: var(--muted); margin: 0; }

.about-visual { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.about-tile {
  padding: 28px 24px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: var(--sh-1);
}
.about-tile:nth-child(1) { background: var(--ink); border-color: var(--ink); color: var(--ivory); }
.about-tile:nth-child(1) .about-tile-label { color: #9AA399; }
.about-tile:nth-child(4) { background: var(--sage-tint); border-color: #DCE6DB; }
.about-tile-num { font-size: 2.1rem; line-height: 1; margin-bottom: 8px; }
.about-tile-label { font-size: .8125rem; color: var(--muted); font-weight: 600; line-height: 1.45; }

/* --------------------------------------------------------------------------
   16 · REVIEWS
   -------------------------------------------------------------------------- */
.reviews { background: var(--ivory); }
.reviews-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px; }
.reviews-summary {
  display: flex; align-items: center; gap: 20px;
  padding: 20px 26px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
}
.reviews-summary .rating-score { font-size: 2.6rem; }

.slider-nav { display: flex; gap: 9px; }
.slider-btn {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  display: grid; place-items: center;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.slider-btn svg { width: 17px; height: 17px; }
.slider-btn:hover { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.slider-btn:disabled { opacity: .35; cursor: not-allowed; }
.slider-btn:disabled:hover { background: var(--paper); color: var(--ink); border-color: var(--line); transform: none; }

.review-track {
  display: flex; gap: 20px;
  margin-top: 44px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 10px;
  scrollbar-width: none;
}
.review-track::-webkit-scrollbar { display: none; }
.review-card {
  flex: 0 0 calc((100% - 40px) / 3);
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  padding: 30px 28px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
}
.review-card .stars { margin-bottom: 16px; }
.review-card .stars svg { width: 16px; height: 16px; }
.review-text {
  font-size: 1.0625rem; line-height: 1.6; color: var(--ink);
  margin-bottom: 26px;
}
.review-foot { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 22px; border-top: 1px solid var(--line-soft); }
.avatar {
  width: 42px; height: 42px; flex: none; border-radius: 50%;
  background: var(--sage-tint); color: var(--sage-deep);
  display: grid; place-items: center;
  font-size: .875rem; font-weight: 800; letter-spacing: -0.02em;
}
.review-name { font-size: .9375rem; font-weight: 750; letter-spacing: -0.02em; }
.review-meta { display: flex; align-items: center; gap: 6px; font-size: .75rem; color: var(--muted); }
.review-meta svg { width: 12px; height: 12px; }

/* --------------------------------------------------------------------------
   17 · FAQ
   -------------------------------------------------------------------------- */
.faq-list { max-width: 880px; margin: 56px auto 0; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:first-child { border-top: 1px solid var(--line); }
.faq-q {
  width: 100%;
  display: flex; align-items: flex-start; gap: 18px;
  padding: 26px 4px;
  text-align: left;
  transition: color .25s var(--ease);
}
.faq-q:hover { color: var(--sage-deep); }
.faq-num { font-size: .8125rem; color: var(--muted); font-weight: 650; padding-top: 5px; flex: none; width: 26px; }
.faq-q-text { flex: 1; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.028em; line-height: 1.4; }
.faq-toggle {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--line);
  display: grid; place-items: center;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.faq-toggle svg { width: 14px; height: 14px; transition: transform .35s var(--ease); }
.faq-item.is-open .faq-toggle { background: var(--ink); border-color: var(--ink); color: var(--ivory); }
.faq-item.is-open .faq-toggle svg { transform: rotate(135deg); }
.faq-a {
  overflow: hidden;
  height: 0;
  opacity: 0;
  transition: height .35s var(--ease), opacity .28s var(--ease);
}
.faq-item.is-open .faq-a { opacity: 1; }
.faq-a-inner { padding: 0 62px 28px; color: var(--muted); max-width: 720px; }

/* --------------------------------------------------------------------------
   18 · FINAL CTA
   -------------------------------------------------------------------------- */
.finalcta { background: var(--ink); color: var(--ivory); text-align: center; }
.finalcta h2 { font-size: clamp(2.1rem, 4vw, 3.4rem); margin-bottom: 20px; max-width: 780px; margin-inline: auto; }
.finalcta p { color: #A9B0A8; max-width: 520px; margin-inline: auto; margin-bottom: 36px; }
.finalcta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.finalcta-note { margin-top: 26px; font-size: .875rem; color: #7E867D; }

/* --------------------------------------------------------------------------
   19 · FOOTER
   -------------------------------------------------------------------------- */
.footer { background: #141615; color: #A9B0A8; padding-block: 64px 30px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 52px; }
.footer-brand { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.footer-brand img { width: 54px; height: 54px; border-radius: 50%; }
.footer-brand-name { color: var(--ivory); font-size: 1.125rem; font-weight: 800; letter-spacing: -0.03em; }
.footer p { font-size: .9375rem; max-width: 380px; margin-bottom: 20px; }
.footer h4 { color: var(--ivory); font-size: .9375rem; font-weight: 750; margin-bottom: 18px; letter-spacing: -0.02em; }
.footer-links li { margin-bottom: 11px; }
.footer-links a { font-size: .9375rem; transition: color .2s var(--ease); }
.footer-links a:hover { color: var(--ivory); }
.footer-contact li { display: flex; gap: 10px; font-size: .9375rem; margin-bottom: 13px; line-height: 1.5; }
.footer-contact svg { width: 16px; height: 16px; color: var(--sage); flex: none; margin-top: 4px; }
.footer-contact a:hover { color: var(--ivory); }
.footer-bottom {
  margin-top: 52px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.09);
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between;
  font-size: .8125rem;
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-legal a:hover { color: var(--ivory); }

/* --------------------------------------------------------------------------
   20 · MODAL
   -------------------------------------------------------------------------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(20,22,21,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity .22s var(--ease), visibility .22s;
  display: grid; place-items: center;
  padding: 24px;
  overflow-y: auto;
}
.modal-backdrop.is-open { opacity: 1; visibility: visible; }

.modal {
  position: relative;
  width: 100%; max-width: 480px;
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  padding: 40px 38px 34px;
  opacity: 0; transform: translateY(15px) scale(.94);
  transition: opacity .34s var(--ease-spring), transform .34s var(--ease-spring);
}
.modal-backdrop.is-open .modal { opacity: 1; transform: none; }

.modal-close {
  position: absolute; top: 18px; right: 18px;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--ivory-2);
  display: grid; place-items: center;
  transition: background-color .25s var(--ease), transform .25s var(--ease);
}
.modal-close:hover { background: var(--line); transform: rotate(90deg); }
.modal-close svg { width: 16px; height: 16px; }

.modal-icon {
  width: 52px; height: 52px; border-radius: 16px;
  background: var(--sage-tint); color: var(--sage-deep);
  display: grid; place-items: center; margin-bottom: 20px;
}
.modal-icon svg { width: 24px; height: 24px; }
.modal h3 { font-size: 1.5rem; margin-bottom: 8px; }
.modal > p { font-size: .9375rem; color: var(--muted); margin-bottom: 26px; }

.modal-doctor {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; margin-bottom: 18px;
  background: var(--ivory); border-radius: var(--r-sm);
}
.modal-doctor img { width: 40px; height: 40px; border-radius: 11px; object-fit: cover; object-position: top center; }
.modal-doctor-name { font-size: .9375rem; font-weight: 750; letter-spacing: -0.02em; }
.modal-doctor-sub { font-size: .75rem; color: var(--muted); }

.modal-option {
  display: flex; align-items: center; gap: 14px;
  width: 100%;
  padding: 18px 20px;
  margin-bottom: 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  text-align: left;
  transition: border-color .25s var(--ease), background-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.modal-option:hover { border-color: var(--sage); background: var(--sage-tint); transform: translateY(-2px); box-shadow: var(--sh-1); }
.modal-option:hover .modal-option-arrow { transform: translateX(4px); }
.modal-option-icon {
  width: 40px; height: 40px; flex: none; border-radius: 12px;
  background: var(--ivory-2); color: var(--sage-deep);
  display: grid; place-items: center;
}
.modal-option-icon svg { width: 18px; height: 18px; }
.modal-option-body { flex: 1; }
.modal-option-t { font-size: .9375rem; font-weight: 750; letter-spacing: -0.02em; }
.modal-option-s { font-size: .8125rem; color: var(--muted); }
.modal-option-arrow { width: 17px; height: 17px; color: var(--graphite); transition: transform .25s var(--ease); }

.modal-foot { margin-top: 18px; font-size: .8125rem; color: var(--muted); text-align: center; line-height: 1.5; }

/* --------------------------------------------------------------------------
   21 · FLOATING ACTIONS
   -------------------------------------------------------------------------- */
.float-actions {
  position: fixed; right: 22px; bottom: 22px; z-index: 80;
  display: flex; flex-direction: column; gap: 11px;
}
.float-btn {
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  box-shadow: var(--sh-2);
  transition: transform .28s var(--ease-spring), box-shadow .28s var(--ease);
}
.float-btn:hover { transform: scale(1.08) translateY(-2px); box-shadow: var(--sh-3); }
.float-btn svg { width: 24px; height: 24px; }
.float-btn--wa { background: #1F8A5B; color: #fff; }
.float-btn--call { background: var(--ink); color: var(--ivory); }

.mobile-bar {
  position: fixed; inset: auto 0 0 0; z-index: 85;
  display: none;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  gap: 8px;
}
.mobile-bar .btn { flex: 1; padding: 13px 10px; font-size: .875rem; }
.mobile-bar .btn--wa { background: #1F8A5B; color: #fff; }

/* --------------------------------------------------------------------------
   22 · MOTION SYSTEM
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

[data-reveal="mask"] {
  transform: none;
  clip-path: inset(100% 0 0 0);
  transition: opacity .9s var(--ease), clip-path 1.05s var(--ease);
}
[data-reveal="mask"].is-in { clip-path: inset(0 0 0 0); }

[data-parallax] { will-change: transform; }

/* --------------------------------------------------------------------------
   23 · RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .hero-grid { gap: 40px; }
  .doctor-grid { gap: 44px; }
  .float-card--incision { right: -2%; }
}

@media (max-width: 1000px) {
  :root { --section-y: 92px; }
  .nav, .header-phone { display: none; }
  .burger { display: flex; }
  .hero-grid { grid-template-columns: 1fr; gap: 52px; }
  .hero-visual { order: 2; min-height: auto; }
  .hero-lede { max-width: none; }
  .appt-card { grid-template-columns: 1fr; }
  .appt-left { padding: 42px 34px 36px; }
  .appt-right { padding: 40px 34px; }
  .midcta-card { grid-template-columns: 1fr; }
  .midcta-visual { min-height: 240px; }
  .midcta-body { padding: 40px 34px; }
  .doctor-grid { grid-template-columns: 1fr; gap: 44px; }
  .doc-photo-frame { aspect-ratio: 4 / 3.4; }
  .doc-photo-frame img { object-position: 50% 18%; }
  .loc-grid { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; gap: 44px; }
  .review-card { flex-basis: calc((100% - 20px) / 2); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .float-actions { display: none; }
  .mobile-bar { display: flex; }
}

@media (max-width: 780px) {
  :root { --section-y: 76px; --gutter: 20px; }
  .hero { padding-top: 122px; padding-bottom: 66px; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .chip-grid { grid-template-columns: 1fr; }
  .announce-card { padding: 40px 28px; }
  .reviews-top { flex-direction: column; align-items: stretch; }
  .slider-nav { justify-content: flex-end; }
  .faq-a-inner { padding-left: 44px; padding-right: 0; }
}

@media (max-width: 560px) {
  .trust-grid { grid-template-columns: 1fr 1fr; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .about-visual { grid-template-columns: 1fr 1fr; }
  .review-card { flex-basis: 88%; }
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .float-card--chart { right: 0; transform: scale(.86); transform-origin: top right; }
  .float-card--incision { display: none; }
  .appt-left, .appt-right { padding-inline: 24px; }
  .midcta-body { padding: 34px 24px; }
  .loc-info { padding: 28px 24px; }
  .hero-actions .btn, .finalcta-actions .btn { flex: 1 1 100%; }
  .faq-q { gap: 12px; }
  .faq-q-text { font-size: 1.0625rem; }
  .pullquote { padding: 20px 22px; font-size: 1.0625rem; }
}

/* --------------------------------------------------------------------------
   24 · REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .ticker-track { animation: none; }
  [data-parallax] { transform: none !important; }
}

/* --------------------------------------------------------------------------
   25 · PRINT
   -------------------------------------------------------------------------- */
@media print {
  .header, .mobile-bar, .float-actions, .ticker, .modal-backdrop { display: none !important; }
  body { padding: 0; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   26 · CORRECTIONS & REFINEMENTS
   -------------------------------------------------------------------------- */

/* [hidden] must beat the .modal-backdrop display:grid */
.modal-backdrop[hidden] { display: none; }

/* Stacking contexts so the -1 decorations stay behind their own parent
   rather than falling behind the section background */
.doc-media { z-index: 0; }

/* <picture> is inline by default and won't fill an aspect-ratio box */
.doc-photo-frame picture { display: block; width: 100%; height: 100%; }

/* Map iframe fills the panel next to the info column */
.map-embed { flex: 1; }

/* Counter units: 'mm' should sit on the baseline, only '+' is superscript */
.stat-num .stat-unit {
  font-size: .42em;
  font-weight: 500;
  margin-left: 2px;
  letter-spacing: 0;
}

/* Reviews header: summary and arrows sit side by side, not nested */
.reviews-aside { display: flex; align-items: center; gap: 14px; }
.reviews-top .section-head--left { margin-bottom: 0; }
.reviews-top .section-head--left h2 { margin-bottom: 0; }

/* About tiles hold words, not just numbers, so the scale has to flex */
.about-tile-num {
  font-size: clamp(1.5rem, 2.1vw, 2rem);
  line-height: 1.05;
  word-break: break-word;
}

/* Doctor section: eyebrow sits above the two-column grid */
.doctor-intro { margin-bottom: 44px; }

@media (max-width: 780px) {
  .reviews-aside { flex-wrap: wrap; }
}

/* Below 560px the sticky bottom bar carries Book, so the header drops it */
@media (max-width: 560px) {
  .header-cta .btn--primary { display: none; }
  .brand img { width: 44px; height: 44px; }
  .header.is-scrolled .brand img { width: 40px; height: 40px; }
}

/* --------------------------------------------------------------------------
   27 · POST-REVIEW ADJUSTMENTS
   -------------------------------------------------------------------------- */

/* H1 was running to four lines in the copy column — pull the ceiling down
   and give the text slightly more of the grid.
   NOTE: scoped to min-width, otherwise this unscoped rule would sit after the
   max-width:1000px block and keep the hero two-column on phones. */
@media (min-width: 1001px) {
  .hero-grid { grid-template-columns: 1.08fr .92fr; }
}
.hero h1 { font-size: clamp(2.4rem, 4.1vw, 3.5rem); }

/* The map iframe is blank until Google responds; give the panel a surface
   underneath so it never reads as a broken box */
.loc-panel--map {
  background:
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(94,122,98,.05) 46px 48px),
    repeating-linear-gradient(0deg,  transparent 0 46px, rgba(94,122,98,.05) 46px 48px),
    var(--ivory-2);
}

/* About tiles: bottom-aligned copy and a floor height so they hold the column */
.about-tile {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 158px;
}

/* Reduced motion still needs the decorative circle visible */
@media (prefers-reduced-motion: reduce) {
  .doc-photo-frame { clip-path: none !important; }
}

/* --------------------------------------------------------------------------
   28 · MOBILE TYPE SCALE
   The rem floors in the original clamps never engaged on narrow screens, so
   headings arrived at desktop size on a 390px viewport. These floors are set
   low enough that the vw term does the work down to phone widths.
   -------------------------------------------------------------------------- */
.hero h1            { font-size: clamp(1.95rem, 6.2vw, 3.5rem); }
.section-head h2    { font-size: clamp(1.65rem, 4.6vw, 3.05rem); }
.appt-left h2       { font-size: clamp(1.55rem, 3.6vw, 2.6rem); }
.midcta-body h2     { font-size: clamp(1.5rem,  3.4vw, 2.4rem); }
.doctor-body h2     { font-size: clamp(1.6rem,  4vw,   2.85rem); }
.announce-card h2   { font-size: clamp(1.55rem, 4vw,   2.65rem); }
.about-body h2      { font-size: clamp(1.6rem,  4vw,   2.75rem); }
.finalcta h2        { font-size: clamp(1.8rem,  5vw,   3.4rem); }

@media (max-width: 620px) {
  body { font-size: 1rem; }
  .hero-lede { font-size: 1rem; }
  .badge { font-size: .75rem; padding: 7px 13px; }
  .rating { padding: 11px 16px; gap: 12px; }
  .rating-score { font-size: 1.75rem; }
  .review-text { font-size: 1rem; }
  .faq-q { padding-block: 22px; }
  .pullquote { font-size: 1rem; }
  .doc-name { font-size: 1.3rem; }
  .stat-num { font-size: 2rem; }
  .about-tile { min-height: 132px; padding: 22px 20px; }
  .section-head p, .announce-lede, .midcta-body p { font-size: .9375rem; }
}


@media (max-width: 620px) {

  /* Rating pill: let it span the column instead of wrapping mid-phrase */
  .rating { width: 100%; flex-wrap: wrap; }
  .rating .g-mark { margin-left: auto; }
  .rating-count { font-size: .75rem; }

  /* Trust cards carry sentences, not just numbers — two columns squeezed
     them into three-word lines */
  .trust-grid { grid-template-columns: 1fr; }
  .trust-card { padding: 22px 20px; }
  .trust-card h3 { font-size: 1rem; }
}

/* --------------------------------------------------------------------------
   30 · MOBILE HERO DECORATION
   The brief calls for fewer floating objects on small screens, so the
   eye-chart card is dropped below 620px and only the incision card remains.
   -------------------------------------------------------------------------- */
@media (max-width: 620px) {
  .float-card--chart { display: none; }
  .hero-visual { padding-bottom: 26px; }
}

.hero-visual { display: flex; align-items: center; justify-content: center; }

/* ==========================================================================
   31 · CLINIC PHOTOGRAPHY UPDATE
   The constructed iris is retired; the hero and expertise grid now carry
   photography shot at the centre.
   ========================================================================== */

/* ── Hero media ────────────────────────────────────────────────────────── */
.hero-media {
  position: relative;
  z-index: 0;
  width: min(100%, 440px);
  margin-inline: auto;
}
.hero-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ivory-2);
  box-shadow: var(--sh-3);
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.hero-photo picture { display: block; width: 100%; height: 100%; }
.hero-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(27,29,28,0) 62%, rgba(27,29,28,.30) 100%);
  pointer-events: none;
}
.hero-media .hero-blob {
  inset: -7% -9% -5% -9%;
  border-radius: var(--r-lg);
  background: radial-gradient(circle at 40% 28%, #FFFFFF 0%, #F1F5EF 52%, #E7EEE6 100%);
  box-shadow: none;
  filter: none;
}
.float-card--chart    { top: 6%;    right: -15%; bottom: auto; left: auto; }
.float-card--incision { bottom: 7%; left: -13%;  top: auto;    right: auto; }

/* ── Expertise cards ───────────────────────────────────────────────────── */
.exp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 56px;
}
.exp-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-1);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.exp-card:hover { transform: translateY(-8px); box-shadow: var(--sh-3); border-color: #D8D2C4; }
.exp-card:hover .exp-media img { transform: scale(1.055); }
.exp-card:hover .exp-link { color: var(--sage-deep); }
.exp-card:hover .btn-arrow { transform: translateX(4px); }

.exp-media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--ivory-2);
  border-bottom: 1px solid var(--line-soft);
}
.exp-media picture { display: block; width: 100%; height: 100%; }
.exp-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.exp-num {
  position: absolute; top: 13px; left: 13px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(27,29,28,.86);
  backdrop-filter: blur(6px);
  color: var(--ivory);
  font-size: .6875rem; font-weight: 750; letter-spacing: .04em;
}
.exp-media--art .exp-num { background: var(--ink); }

.exp-body { display: flex; flex-direction: column; flex: 1; padding: 26px 25px 24px; }
.exp-cat { font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sage-deep); margin-bottom: 12px; }
.exp-card h3 { font-size: 1.1875rem; letter-spacing: -0.03em; margin-bottom: 10px; }
.exp-headline {
  font-family: "Newsreader", Georgia, serif;
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--sage-deep);
  margin-bottom: 12px;
}
.exp-body > p:not(.exp-headline):not(.exp-highlight) {
  font-size: .9375rem; line-height: 1.6; color: var(--muted); margin-bottom: 16px;
}
.exp-highlight {
  padding: 11px 14px;
  margin-bottom: 18px;
  border-radius: 12px;
  background: var(--sage-tint);
  font-size: .8125rem; font-weight: 620; line-height: 1.45; color: var(--sage-deep);
}
.exp-link { margin-top: auto; }

/* ── Clinical pathology ────────────────────────────────────────────────── */
.path-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 52px; }
.path-card {
  padding: 32px 28px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.path-card:hover { transform: translateY(-5px); box-shadow: var(--sh-2); }
.path-icon {
  width: 46px; height: 46px; border-radius: 14px;
  background: var(--sage-tint); color: var(--sage-deep);
  display: grid; place-items: center; margin-bottom: 20px;
}
.path-icon svg { width: 22px; height: 22px; }
.path-card h3 { font-size: 1.125rem; letter-spacing: -0.028em; margin-bottom: 9px; }
.path-card p { font-size: .9375rem; color: var(--muted); line-height: 1.6; }

.path-foot {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 26px;
  margin-top: 36px;
  padding: 28px 32px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
}
.path-note { flex: 1 1 340px; font-size: .875rem; color: var(--muted); line-height: 1.6; max-width: 560px; }
.path-actions { display: flex; flex-wrap: wrap; gap: 11px; }

/* ── About: photograph above the capability tiles ──────────────────────── */
.about-visual { display: block; }
.about-photo { margin: 0 0 14px; }
.about-photo picture { display: block; }
.about-photo img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  box-shadow: var(--sh-2);
}
.about-photo figcaption {
  margin-top: 11px;
  font-size: .8125rem; color: var(--muted); font-weight: 550;
}
.about-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .exp-grid { grid-template-columns: repeat(2, 1fr); }
  .float-card--chart    { right: -6%; }
  .float-card--incision { left: -6%; }
}

@media (max-width: 1000px) {
  .hero-media { width: min(78%, 380px); }
  .path-grid { grid-template-columns: 1fr; }
  .path-foot { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 780px) {
  .exp-grid { grid-template-columns: 1fr; gap: 16px; }
  .exp-media { aspect-ratio: 16 / 9; }
}

@media (max-width: 620px) {
  .hero-media { width: min(84%, 320px); }
  .float-card--incision {
    display: flex;              /* overrides the 560px rule further up */
    left: 50%; bottom: -16px;
    transform: translateX(-50%) scale(.94);
    transform-origin: center;
    white-space: nowrap;
  }
  .about-tiles { grid-template-columns: 1fr 1fr; }
  .path-card { padding: 26px 22px; }
  .path-foot { padding: 24px 22px; }
  .path-actions .btn { flex: 1 1 100%; }
  .exp-body { padding: 24px 22px 22px; }
}

/* ==========================================================================
   32 · WORDPRESS INTEGRATION
   Menu markup, editor content, core classes and the settings-driven variables.
   ========================================================================== */

/* ── Settings-driven values ────────────────────────────────────────────────
   These read the custom properties printed by rm_dynamic_css(), so changing
   the motion sliders in the Customizer takes effect without editing CSS. */
[data-reveal] {
  transform: translateY(var(--rv-dist, 34px));
  transition: opacity var(--rv-dur, 800ms) var(--ease), transform var(--rv-dur, 800ms) var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-reveal="mask"] {
  transform: none;
  transition: opacity var(--rv-dur, 800ms) var(--ease), clip-path calc(var(--rv-dur, 800ms) * 1.3) var(--ease);
}
.ticker-track { animation-duration: var(--ticker-dur, 34s); }
.exp-card:hover,
.svc-card:hover { transform: translateY(calc(-1 * var(--hover-lift, 8px))); }

body.rm-no-anim [data-reveal] { opacity: 1; transform: none; clip-path: none; }

/* ── Navigation built by wp_nav_menu ─────────────────────────────────────── */
.nav ul,
.nav .nav-list {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav li { list-style: none; position: relative; }
.nav .sub-menu { display: none; }

.mobile-nav ul,
.mobile-nav .mobile-nav-list { margin: 0; padding: 0; list-style: none; }
.mobile-nav li { list-style: none; }
.mobile-nav li a { display: block; }

.footer-links,
.footer .footer-links { margin: 0; padding: 0; list-style: none; }

/* ── Drawn panel for expertise cards with no photograph ──────────────────── */
.exp-art {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(160deg, var(--sage-tint) 0%, #F4F7F3 100%);
}
.exp-art-ring {
  position: absolute;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px dashed rgba(94, 122, 98, .34);
}
.exp-art-icon { position: relative; color: var(--sage-deep); }
.exp-art-icon svg { width: 62px; height: 62px; }

/* ── Editor content on pages and posts ───────────────────────────────────── */
.rm-prose { max-width: 780px; margin-inline: auto; }
.rm-prose > * + * { margin-top: 1.1em; }
.rm-prose h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-top: 1.6em; }
.rm-prose h3 { font-size: 1.3rem; margin-top: 1.5em; }
.rm-prose a { color: var(--sage-deep); text-decoration: underline; text-underline-offset: 3px; }
.rm-prose a:hover { color: var(--ink); }
.rm-prose ul,
.rm-prose ol { padding-left: 1.3em; }
.rm-prose ul { list-style: disc; }
.rm-prose ol { list-style: decimal; }
.rm-prose li { margin-bottom: .45em; }
.rm-prose img { border-radius: var(--r-md); }
.rm-prose blockquote {
  margin: 1.6em 0;
  padding: 22px 26px;
  border-left: 3px solid var(--sage);
  background: var(--ivory);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-style: italic;
}
.rm-prose code,
.rm-prose pre {
  background: var(--ivory-2);
  border-radius: 8px;
  font-size: .9em;
}
.rm-prose pre { padding: 18px 20px; overflow-x: auto; }
.rm-prose table { width: 100%; border-collapse: collapse; }
.rm-prose th,
.rm-prose td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; }

.rm-entry { padding-bottom: 32px; margin-bottom: 32px; border-bottom: 1px solid var(--line); }
.rm-entry h3 { font-size: 1.375rem; margin-bottom: 10px; }
.rm-pagination { margin-top: 40px; display: flex; gap: 10px; flex-wrap: wrap; }
.rm-pagination a,
.rm-pagination .page-numbers {
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-weight: 650;
  font-size: .9375rem;
}
.rm-pagination .current { background: var(--ink); color: var(--ivory); border-color: var(--ink); }

/* ── WordPress core classes ──────────────────────────────────────────────── */
.alignwide { max-width: 1040px; margin-inline: auto; }
.alignfull { max-width: none; }
.alignleft { float: left; margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text,
.wp-block-image figcaption { font-size: .8125rem; color: var(--muted); margin-top: 9px; }
.sticky { position: relative; }
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
  position: fixed !important;
  top: 16px; left: 16px;
  width: auto; height: auto;
  padding: 12px 20px;
  clip: auto;
  background: var(--ink); color: var(--ivory);
  border-radius: var(--r-btn);
  z-index: 200;
}

/* Admin bar must not sit on top of the fixed header. */
body.admin-bar .header { top: 32px; }
body.admin-bar .mobile-nav { padding-top: 136px; }
@media screen and (max-width: 782px) {
  body.admin-bar .header { top: 46px; }
}

/* Only reserve space for the sticky bar when it is switched on. */
body { padding-bottom: 0; }
@media (max-width: 1000px) {
  body.rm-has-sticky-bar { padding-bottom: 74px; }
}