/* ═══════════════════ NATURAL SMILES DESIGN TOKENS ═══════════════════
   Brand palette built from the printed tent + business card stock.
   Slate is the primary surface; deep slate replaces the footer-stripe.
   Forest tokens are kept as aliases so legacy class names still work.
═══════════════════════════════════════════════════════════════════ */
:root {
  /* Brand · slate from print, pulled brighter for vibrancy.
     Grounds shifted toward near-white instead of beige so the page reads light.
     Sea-glass is a saturated accent now, not a muted tint. */
  --slate:          #748689;   /* brand card middle slate · hero background */
  --slate-deep:     #456569;   /* darker slate · founder + certs band, manifesto-wave-bottom */
  --slate-darker:   #748689;   /* lighter slate · primary type color, button fills, utility bar */
  --slate-light:    #a8bdc0;   /* highlight */
  --slate-pale:     #e8eded;   /* tonal fill */

  /* Coastal grounds · bright, near-white */
  --shell:          #fbfaf7;   /* primary off-white · 90% toward white */
  --sand:           #f5f1e9;   /* lighter, less beige */
  --mist:           #f2f4f3;   /* clean cool off-white */
  --mist-warm:      #ebe6d8;   /* warm overcast · darker so it reads distinctly against shell */
  --seafoam:        #a5e0ce;   /* brighter sea-glass · the brand accent */
  --seafoam-deep:   #7fbfae;   /* saturated sea-glass for CTAs and highlights */
  --sky:            #d4e6e8;   /* gulf-sky tint · airy section glow */

  /* Warm accents · used sparingly to humanize the cool palette */
  --honey:          #e8c896;   /* golden hour · saturated warm */
  --honey-soft:     #f5e4cd;   /* peach cream · soft warm ground */
  --peach:          #f4d1bf;   /* sunset peach · soft warm */
  --blush:          #f0d8d2;   /* dusty rose · gentle accent */

  --white:          #ffffff;
  --ink:            #1f2a2c;   /* nearly-black for body type */
  --ink-mid:        #44575a;   /* body secondary */
  --ink-muted:      #6b8084;
  --border:         rgba(110,130,133,0.20);
  --border-soft:    rgba(110,130,133,0.10);

  /* Legacy aliases · keep old class names working */
  --forest:         var(--slate);
  --forest-light:   var(--slate-deep);
  --forest-mid:     var(--slate);

  /* Type · single humanist sans + one handwriting accent for warmth */
  --font-display:   'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:      'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:      'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Type scale · Apple-leaning, generous */
  --h1-min: 56px;
  --h1-fluid: 10vw;
  --h1-max: 140px;
  --h2-min: 44px;
  --h2-fluid: 6.4vw;
  --h2-max: 88px;
  /* split-column section heads (founder band) run the smaller ramp */
  --h2-side-min: 30px;
  --h2-side-fluid: 3.6vw;
  --h2-side-max: 52px;
  --h3-min: 26px;
  --h3-fluid: 2.6vw;
  --h3-max: 36px;
  --body-size: 19px;
  --body-lh:   1.6;

  /* Section vertical rhythm */
  --sec-pad:       clamp(96px, 13vw, 192px);
  --sec-pad-tight: clamp(72px, 10vw, 144px);

  /* Wave rhythm · every section-break wave gets the same breathing room
     above and below the curve. --wave-pad goes on the section ABOVE a wave
     (the wave svg overlaps its bottom padding); --wave-gap on the one below. */
  --wave-h:   clamp(56px, 6vw, 85px);
  --wave-gap: clamp(64px, 8vw, 115px);
  --wave-pad: calc(var(--wave-gap) + var(--wave-h));

  /* Card radius · larger, modern */
  --r-card: 18px;
  --r-band: 24px;
  --r-pill: 999px;

  /* Unified card dimensions · every card sitewide locks to these values */
  --card-w: clamp(300px, 30vw, 360px);
  --card-h: clamp(560px, 50vw, 660px);

  /* ── Bootstrap variable bridge ──────────────────────────────────
     Brand tokens feed every --bs-* custom property the page consumes.
     Bootstrap's reboot + components read these, so body type, link
     colors, heading color, borders, and form-control chrome all come
     from the token layer with no property overrides below. */
  --bs-primary:     #7a8b8e;
  --bs-primary-rgb: 122, 139, 142;
  --bs-body-font-family: var(--font-body);
  --bs-body-font-size:   var(--body-size);
  --bs-body-line-height: var(--body-lh);
  --bs-body-color:  var(--ink);
  --bs-body-bg:     var(--shell);
  --bs-heading-color: var(--slate-darker);
  /* Link colors · reboot reads the -rgb channels · keep in sync with --forest/--forest-mid (#748689) */
  --bs-link-color:  var(--forest);
  --bs-link-hover-color: var(--forest-mid);
  --bs-link-color-rgb: 116, 134, 137;
  --bs-link-hover-color-rgb: 116, 134, 137;
  --bs-border-color: var(--border);
}

/* ═══════════════════ BASE ═══════════════════ */
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

html { scroll-behavior: smooth; margin: 0; padding: 0; overflow-x: clip; }
body { margin: 0; padding: 0; overflow-x: clip; width: 100%; }
main { margin: 0; padding: 0; }
.hero.hero--video { margin-top: 0; }

/* overflow removed from html + body — was breaking position: sticky
   Body font/size/line-height/color/bg come from the --bs-body-* bridge above. */
body {
  -webkit-font-feature-settings: "ss01", "ss02";
  font-feature-settings: "ss01", "ss02";
}

/* Heading color comes from --bs-heading-color in the bridge */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

/* Emphasized words inside headlines use weight + color contrast,
   not italics — modern minimal, no script fonts. */
h1 em, h2 em, h3 em {
  font-family: inherit;
  font-style: normal;
  font-weight: 600;
  color: var(--seafoam-deep);
}

/* .amp legacy class · ampersand renders in the same family,
   slightly heavier so it reads as a brand mark, not punctuation. */
.amp {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: inherit;
  margin: 0 0.18em;
  display: inline-block;
}

/* Link colors ride --bs-link-color(-rgb) from the bridge · only decoration + motion here */
a { text-decoration: none; transition: color .2s ease; }

.kicker {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: inline-block;
  margin-bottom: 14px;
}

@media (max-width: 767.98px) {
  .kicker { width: 100%; text-align: center; }
}

.mono { font-family: var(--font-mono); }

.skip {
  position: absolute; left: -9999px; top: auto;
  background: var(--forest); color: #fff; padding: 10px 16px;
  z-index: 9999;
}
.skip:focus { left: 12px; top: 12px; }

/* ═══════════════════ BUTTONS · pill, modern ═══════════════════
   Themed through Bootstrap's --bs-btn-* API. Only letter-spacing,
   transition, and the hover lift live outside the variable contract. */
.btn {
  --bs-btn-font-family: var(--font-display);
  --bs-btn-font-weight: 500;
  --bs-btn-font-size: 15px;
  --bs-btn-border-radius: var(--r-pill);
  --bs-btn-padding-y: 15px;
  --bs-btn-padding-x: 28px;
  letter-spacing: -0.005em;
  transition: all .25s ease;
}
.btn-primary,
.btn-dark {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--slate-darker);
  --bs-btn-border-color: var(--slate-darker);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--slate-deep);
  --bs-btn-hover-border-color: var(--slate-deep);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--slate-deep);
  --bs-btn-active-border-color: var(--slate-deep);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--slate-darker);
  --bs-btn-disabled-border-color: var(--slate-darker);
  --bs-btn-focus-shadow-rgb: 69, 101, 105;
}
.btn-primary:hover, .btn-dark:hover { transform: translateY(-1px); }
/* Custom variant built entirely on the --bs-btn-* contract */
.btn-outline-slate {
  --bs-btn-color: var(--slate-darker);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--slate);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--slate-darker);
  --bs-btn-hover-border-color: var(--slate-darker);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--slate-darker);
  --bs-btn-active-border-color: var(--slate-darker);
  --bs-btn-focus-shadow-rgb: 116, 134, 137;
}
.btn-outline-slate:hover { transform: translateY(-1px); }
.btn-lg {
  --bs-btn-padding-y: 18px;
  --bs-btn-padding-x: 36px;
  --bs-btn-font-size: 16px;
}

/* Mobile drawer */
/* Drawer rides Bootstrap Offcanvas (offcanvas-end), themed through --bs-offcanvas-*.
   Content is direct children of the panel, so padding + scroll stay on the container. */
.mobile-menu {
  --bs-offcanvas-width: min(90vw, 380px);
  --bs-offcanvas-zindex: 1100;
  --bs-offcanvas-bg: #fff;
  --bs-offcanvas-border-width: 1px;
  --bs-offcanvas-border-color: var(--border-soft);
  --bs-offcanvas-transition: transform .28s ease;
  overflow-y: auto;
  padding: 24px;
}
.offcanvas-backdrop {
  --bs-backdrop-bg: #0e2018;
  --bs-backdrop-opacity: 0.5;
  --bs-backdrop-zindex: 1095;
}
.mobile-menu-close {
  position: absolute;
  top: 16px;
  right: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  background: rgba(255,255,255,0.92);
  color: var(--ink);
  cursor: pointer;
  padding: 0;
  box-sizing: border-box;
  flex-shrink: 0;
  transition: background .2s ease;
}
.mobile-menu-close:hover { background: var(--mist-warm); }
.mobile-menu-close-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  color: var(--slate-darker);
}
/* Booking modal close button · matches the hamburger menu close · circle pill with Phosphor X */
.modal-close-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  background: rgba(255,255,255,0.92);
  color: var(--slate-darker);
  cursor: pointer;
  padding: 0;
  box-sizing: border-box;
  flex-shrink: 0;
  transition: background .2s ease;
  font-size: 18px;
  line-height: 1;
}
.modal-close-pill:hover { background: var(--mist-warm); }
.modal-close-pill i.ph { font-size: 18px; line-height: 1; }
/* Modal header layout rides Bootstrap's own flex + the align-items-start/gap-3
   utilities in the markup · title left, close button pinned to right edge */
.modal-header-text { flex: 1; min-width: 0; }
/* Modal submit button · arrow icon nudges right on hover */
.modal-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.modal-submit-btn i.ph {
  font-size: 16px;
  transition: transform .2s ease;
}
.modal-submit-btn:hover i.ph { transform: translateX(3px); }
/* Booking modal must sit above sticky-call (z-index 1080) and sticky nav so it
   covers everything · themed through Bootstrap's modal variable API */
.modal {
  --bs-modal-zindex: 1090;
  --bs-modal-bg: var(--shell);
  --bs-modal-border-width: 0;
  --bs-modal-border-radius: var(--r-card);
  --bs-modal-header-padding: 24px 28px 18px;
  --bs-modal-header-border-color: var(--border-soft);
  --bs-modal-padding: 24px 28px 28px;
}
.modal-backdrop { --bs-backdrop-zindex: 1085; }
/* Hide sticky-call when modal is open so nothing covers the form */
body.modal-open .sticky-call { display: none; }
.mobile-menu-logo {
  display: block;
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-soft);
}
.mobile-menu-address {
  margin: 22px auto 0;
  text-align: center;
  font-style: normal;
  display: block;
  max-width: 280px;
}
.mobile-menu-address a {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-mid);
  text-decoration: none;
  display: block;
  letter-spacing: -0.005em;
  transition: color .2s ease;
}
.mobile-menu-address a:hover { color: var(--seafoam-deep); }
.mobile-menu-address .mma-line { display: block; }
.mobile-menu-logo img { height: 48px; }
.mobile-menu-nav { list-style: none; padding: 0; margin: 0; }
.mobile-menu-nav > .menu-item > a {
  cursor: pointer;
  padding: 16px 0;
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.mobile-menu-nav > .menu-item-has-children > a::after {
  content: '';
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--slate);
  border-bottom: 2px solid var(--slate);
  transform: rotate(45deg);
  transition: transform .25s ease;
  margin-right: 6px;
  margin-top: -4px;
  flex-shrink: 0;
}
.mobile-menu-nav > .menu-item.is-open > a::after {
  transform: rotate(225deg);
  margin-top: 4px;
}
.mobile-menu .sub-menu { display: none; list-style: none; margin: 0; padding: 8px 0 16px 12px; }
.mobile-menu .menu-item.is-open > .sub-menu { display: block; }
.mobile-menu .sub-menu a { display: block; padding: 8px 0; font-size: 14px; color: var(--ink-mid); }
.mobile-menu-cta {
  --bs-btn-bg: var(--slate-darker);
  --bs-btn-border-width: 0;
  --bs-btn-color: #fff;
  --bs-btn-border-color: var(--slate-darker);
  --bs-btn-hover-bg: var(--seafoam-deep);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: var(--seafoam-deep);
  --bs-btn-active-bg: var(--seafoam-deep);
  --bs-btn-active-color: #fff;
  --bs-btn-active-border-color: var(--seafoam-deep);
  --bs-btn-padding-y: 14px;
  --bs-btn-padding-x: 28px;
  --bs-btn-font-family: var(--font-display);
  --bs-btn-font-weight: 600;
  --bs-btn-font-size: 14px;
  --bs-btn-line-height: var(--body-lh);
  --bs-btn-border-radius: 100px;
  --bs-btn-focus-shadow-rgb: 127, 191, 174;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 28px auto 0;
  letter-spacing: 0.02em;
  width: fit-content;
  transition: background .2s ease, transform .2s ease;
}
.mobile-menu-cta i.ph {
  font-size: 15px;
  transition: transform .2s ease;
}
.mobile-menu-cta:hover i.ph { transform: translateX(3px); }
.mobile-menu-cta:hover, .mobile-menu-cta:active { transform: translateY(-1px); }
/* Wrap the menu CTA so it centers within the panel */

/* Sticky mobile call bar · single compact line with wave top edge · color extends through safe area */
.sticky-call {
  display: flex;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--slate-deep);
  color: #fff;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  z-index: 1080;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.005em;
  transition: color .2s ease, background .2s ease;
  padding: 0 0 env(safe-area-inset-bottom, 0);
}
.sticky-call-wave {
  position: absolute;
  bottom: calc(100% - 1px);
  left: 0;
  right: 0;
  width: 100%;
  height: clamp(20px, 3.5vw, 30px);
  color: var(--slate-deep);
  pointer-events: none;
  transition: color .2s ease;
  display: block;
  margin-bottom: -1px;
}
.sticky-call-text {
  position: relative;
  z-index: 1;
  padding: 12px 28px;
  margin: 4px 22px 4px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1.5px solid rgba(255,255,255,0.65);
  border-radius: 100px;
  transition: border-color .2s ease, background .2s ease;
}
.sticky-call-icon {
  font-size: 17px;
  color: var(--seafoam);
}
.sticky-call:hover .sticky-call-text,
.sticky-call:active .sticky-call-text {
  border-color: #fff;
  background: rgba(255,255,255,0.08);
}
.sticky-call:hover,
.sticky-call:active {
  background: var(--slate-darker);
}
.sticky-call:hover .sticky-call-wave,
.sticky-call:active .sticky-call-wave {
  color: var(--slate-darker);
}
@media (max-width: 575.98px) { body { padding-bottom: 60px; } }

/* ═══════════════════ HERO · video-bg, white type, bigger bolder ═══════════════════ */
.hero {
  position: relative;
  background: var(--slate);
  color: #fff;
  min-height: clamp(560px, 78vh, 880px);
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: 0 0 clamp(96px, 14vw, 180px);
}

.hero-stars { color: var(--honey); letter-spacing: 2px; margin-right: 10px; }

/* Credential strip · airy, minimal */
.creds-strip {
  background: var(--slate-deep);
  color: rgba(255,255,255,0.85);
  padding: 32px 0 var(--wave-pad);
  position: relative;
  text-align: center;
}
.creds-strip > .container { position: relative; }
/* Hairline divider removed · two-tone bg shift (mist-warm certs → shell feel) now handles the visual break */
.creds-kicker {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  margin-bottom: 36px;
}
.creds-kicker .amp {
  font-style: italic;
  font-weight: 400;
  color: inherit;
  letter-spacing: 0;
  text-transform: none;
  margin: 0 0.1em;
}
.creds-row {
  display: flex; flex-wrap: wrap;
  justify-content: space-between; align-items: center;
  gap: 24px 32px;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--slate);
  font-weight: 500;
}
.creds-logo {
  display: inline-flex; align-items: center; justify-content: center;
  height: 64px;
  flex-shrink: 0;
  text-decoration: none;
  /* Invert renders the dark logo PNGs as light marks on the slate-deep band · slight transparency for elegance */
  filter: brightness(0) invert(1) opacity(0.82);
  transition: filter .3s ease, transform .3s ease;
}
/* Marquee rides Swiper below 768 (page.js mountMarquee) · static wrapped row above.
   width:auto beats swiper-slide's width:100% so logos keep natural size when static. */
.creds-row > .swiper-slide { width: auto; }
.creds-marquee .swiper-wrapper { transition-timing-function: linear; }
.creds-logo:hover {
  filter: brightness(0) invert(1) opacity(1);
}
.creds-logo img { height: 100%; width: auto; display: block; max-width: 160px; object-fit: contain; }
@media (max-width: 991.98px) {
  .creds-logo { height: 52px; }
  .creds-logo img { max-width: 130px; }
}
@media (max-width: 767.98px) {
  .creds-row { justify-content: center; gap: 18px 24px; }
  .creds-logo { height: 44px; }
  .creds-logo img { max-width: 110px; }
}

/* ═══════════════════ FEEL STATEMENT · sits flush over pillar cards ═══════════════════ */
.feel {
  background: #ffffff;
  padding: var(--wave-gap) 0 var(--wave-pad);
  text-align: center;
}
/* ═══════════════════ SECTION HEAD · GLOBAL COMPONENT ═══════════════════
   Markup carries these classes on every section head sitewide:
     <div class="section-head [--light] [--wide]">
       <span class="kicker">…</span>
       <h2 class="section-h [--light] [--left] [--side] [--fit-*]">… <em>…</em></h2>
       <svg class="section-divider">…</svg>
       <p class="section-sub [--light] [--left]">…</p>
     </div>
   Legacy per-section classes stay in the markup as semantic hooks only and
   carry no shared styling. Colors ride the --light modifiers. */
.section-head { text-align: center; max-width: 880px; margin: 0 auto clamp(40px, 5vw, 64px); }
.section-head--light .kicker { color: rgba(255,255,255,0.72); }
.section-h {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(var(--h2-min), var(--h2-fluid), var(--h2-max));
  line-height: 1.02;
  letter-spacing: -0.04em;
  margin: 0 auto 32px;
  max-width: 16ch;
  color: var(--slate-darker);
}
.section-h em { font-family: inherit; font-style: normal; font-weight: 600; color: var(--seafoam-deep); }
.section-h--light { color: #fff; }
.section-h--light em { color: var(--seafoam); }

@media (min-width: 768px) {
  .section-h--left {
    margin-left: 0;
    margin-right: 0;
  }
}

.section-h--side { font-size: clamp(var(--h2-side-min), var(--h2-side-fluid), var(--h2-side-max)); max-width: 18ch; }
.section-sub {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--ink-mid);
  max-width: 74ch;
  margin: 0 auto 40px;
  text-align: center;
}
.section-sub--light { color: rgba(255,255,255,0.88); }
.section-sub--light a { color: #fff; }
.section-sub--left { margin-left: 0; margin-right: 0; text-align: left; }

.kicker .amp { font-style: italic; font-weight: 400; color: inherit; letter-spacing: 0; text-transform: none; margin: 0 0.1em; }
/* Inline stat emphasis · 60% bolded with subtle seafoam accent */
.feel-body strong,
.section-intro strong,
.office-tour-body strong,
.tourism-body strong,
.founder-lead strong {
  font-weight: 700;
  color: var(--slate-darker);
  background: linear-gradient(180deg, transparent 65%, rgba(127, 191, 174, 0.30) 65%);
  padding: 0 2px;
}
/* Tourism body sits on sand background · keep highlight on light backgrounds too */
.tourism-body strong { color: var(--slate-darker); }
/* Generic intro paragraph · used under any section head for SEO body copy with highlighted fact · matches .feel-body */
/* Slider wrapper · big side-mounted nav arrows over scroll-snap track */
.feel-slider {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
}
.feel-slider-nav {
  /* container is layout-neutral · individual buttons position themselves on the slider edges */
  display: contents;
}
.feel-slider-btn {
  position: absolute;
  top: clamp(120px, 18vw, 180px);
  z-index: 20;
  width: clamp(56px, 6vw, 72px);
  height: clamp(56px, 6vw, 72px);
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  background: #fff;
  color: var(--slate-darker);
  align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(46,61,64,0.10), 0 1px 2px rgba(46,61,64,0.04);
  transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease, opacity .25s ease, box-shadow .25s ease;
  padding: 0;
}
.feel-slider-btn[data-dir="prev"] { left: calc(50% - 50vw + 20px); }
.feel-slider-btn[data-dir="next"] { right: calc(50% - 50vw + 20px); }
.feel-slider-btn i.ph { font-size: clamp(20px, 2vw, 26px); transition: transform .25s ease; }
.feel-slider-btn:hover {
  background: var(--seafoam);
  color: var(--slate-darker);
  border-color: var(--seafoam);
  box-shadow: 0 14px 32px rgba(127,191,174,0.45), 0 2px 4px rgba(46,61,64,0.06);
  transform: scale(1.06);
}
.feel-slider-btn[data-dir="prev"]:hover i.ph { transform: translateX(-3px); }
.feel-slider-btn[data-dir="next"]:hover i.ph { transform: translateX(3px); }
.feel-slider-btn:active { transform: scale(0.96); }
.feel-slider-btn[disabled],
.feel-slider-btn.is-disabled {
  opacity: 0.35;
  pointer-events: none;
}
/* Track layout rides Swiper below 992 (page.js mountTrack) and Bootstrap
   row-cols-lg-3 + g-lg-28 gutters at 992+. The ul is both swiper-wrapper and row. */
.feel-points {
  padding: 12px 0 28px 0;
  margin-bottom: 0;
  text-align: left;
}
/* Swiper containers · full-bleed below 992, inert wrappers above */
.feel-swiper, .tour-swiper, .blog-swiper {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
/* height:auto beats swiper-slide's height:100%, re-enabling flex stretch = equal card heights per row */
.feel-points > li, .tour-track > li, .blog-track > li { display: flex; height: auto; }
@media (max-width: 991.98px) {
  .feel-points, .tour-track, .blog-track { flex-wrap: nowrap; }
  .feel-points > li, .tour-track > li, .blog-track > li { width: var(--card-w); }
}
@media (min-width: 992px) {
  .feel-swiper, .tour-swiper, .blog-swiper { margin-left: 0; margin-right: 0; overflow: visible; }
}
.feel-card {
  --bs-card-bg: #fff;
  --bs-card-border-color: var(--border);
  --bs-card-border-radius: 18px;
  --bs-card-spacer-y: 28px;
  --bs-card-spacer-x: 24px;
  width: 100%;
  min-height: var(--card-h);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.feel-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(46,61,64,0.08);
  border-color: var(--slate-light);
}
/* Image placeholder zone at the top of every card */
.feel-card-img {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #fff;
  border-bottom: 1px solid var(--border-soft);
  overflow: hidden;
}
.feel-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.feel-card-content {
  display: flex; flex-direction: column;
  align-items: flex-start;
}
.feel-card-link { margin-top: auto; }
.feel-card-h {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  color: var(--slate-darker);
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0 0 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(21px * 1.2 * 2);
}


.feel-card-body {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-mid);
  letter-spacing: -0.005em;
  margin: 0 0 16px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 767.98px) {
  .feel-card-body { text-align: left; }
}
.feel-card-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  width: 100%;
  border-top: 1px solid var(--border-soft);
}
.feel-card-list li {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--slate-darker);
  letter-spacing: -0.005em;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
  display: flex; align-items: center; gap: 10px;
}
.feel-card-list li::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--slate);
  flex-shrink: 0;
}
/* Section CTA pill · larger sibling of the card-link pill ·
   layout is text-center + mt-5 utilities in the markup */
.btn-pill-outline {
  --bs-btn-color: var(--slate-deep);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--slate);
  --bs-btn-border-width: 1.5px;
  --bs-btn-hover-color: var(--slate-deep);
  --bs-btn-hover-bg: rgba(127, 191, 174, 0.10);
  --bs-btn-hover-border-color: var(--seafoam-deep);
  --bs-btn-active-color: var(--slate-deep);
  --bs-btn-active-bg: rgba(127, 191, 174, 0.10);
  --bs-btn-active-border-color: var(--seafoam-deep);
  --bs-btn-font-family: var(--font-display);
  --bs-btn-font-size: 15px;
  --bs-btn-font-weight: 600;
  --bs-btn-line-height: var(--body-lh);
  --bs-btn-padding-y: 14px;
  --bs-btn-padding-x: 30px;
  --bs-btn-border-radius: 999px;
  --bs-btn-focus-box-shadow: none;
  display: inline-flex; align-items: center; gap: 10px;
  letter-spacing: 0.03em;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.btn-pill-outline i.ph { font-size: 16px; transition: transform .2s ease; }
.btn-pill-outline:hover i.ph { transform: translateX(3px); }
.btn-pill-outline:focus-visible { outline: 2px solid var(--seafoam-deep); outline-offset: 2px; }

/* Card links · hollow pill shared by feel + tour cards */
.feel-card-link,
.tour-card-link {
  --bs-btn-color: var(--ink-mid);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--border-soft);
  --bs-btn-border-width: 1.5px;
  --bs-btn-hover-color: var(--slate-deep);
  --bs-btn-hover-bg: rgba(127, 191, 174, 0.10);
  --bs-btn-hover-border-color: var(--seafoam-deep);
  --bs-btn-active-color: var(--slate-deep);
  --bs-btn-active-bg: rgba(127, 191, 174, 0.10);
  --bs-btn-active-border-color: var(--seafoam-deep);
  --bs-btn-font-family: var(--font-display);
  --bs-btn-font-size: 13.5px;
  --bs-btn-font-weight: 600;
  --bs-btn-line-height: var(--body-lh);
  --bs-btn-padding-y: 10px;
  --bs-btn-padding-x: 20px;
  --bs-btn-border-radius: 999px;
  --bs-btn-focus-shadow-rgb: 127, 191, 174;
  display: inline-flex; align-items: center; gap: 8px;
  letter-spacing: 0.04em;
  margin-top: auto;
  align-self: flex-start;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.feel-card-link i.ph,
.tour-card-link i.ph {
  font-size: 14px;
  transition: transform .2s ease;
}
.feel-card-link:hover i.ph,
.tour-card-link:hover i.ph { transform: translateX(3px); }
@media (min-width: 768px) and (max-width: 991.98px) {
  /* Feel cards run two-up on tablets · slide width lives on the li (Swiper slide) */
  .feel-points > li { width: calc((100% - 24px) / 2); }
}
/* Keyboard focus ring for all slider buttons sitewide */
.feel-slider-btn:focus-visible,
.tour-slider-btn:focus-visible,
.blog-slider-btn:focus-visible,
.video-feature-btn:focus-visible {
  outline: 2px solid var(--seafoam-deep);
  outline-offset: 3px;
}

/* ═══════════════════ VIDEO CAROUSEL · lives inside .manifesto dark band ═══════════════════ */
.manifesto--video { text-align: left; }
.manifesto--video .kicker { color: rgba(255,255,255,0.72); }
/* Video head · match feel-section typography exactly */
/* Video feature · cinema split card · one slide visible, arrows + counter advance */
.video-feature {
  max-width: 1180px;
  margin: 0 auto;
  min-height: 660px;   /* gives the copy column slack so the avatar line + hairline bottom-anchor low on every slide */
  background: #fff;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(31,42,44,0.28);
}
/* All slides share one grid cell · the tallest slide sets the container height,
   so switching never changes the section height. Inactive slides stay laid out
   but invisible and inert (visibility also removes them from tab order). */
.video-feature { display: grid; }
.video-feature-slide {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: 7fr 5fr;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.video-feature-slide.is-active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  animation: vf-fade .28s ease;
}
@keyframes vf-fade { from { opacity: 0; } to { opacity: 1; } }
.video-feature-media { position: relative; min-height: 460px; display: block; width: 100%; padding: 0; border: 0; background: none; text-align: inherit; cursor: pointer; font: inherit; }
/* Lejátszás közben a play gomb és a chip elhalványul (a JS teszi rá az .is-playing-et) */
.video-feature-media.is-playing .video-feature-play,
.video-feature-media.is-playing .video-feature-chip { opacity: 0; transition: opacity .25s ease; }
.video-feature-media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Swiss BioHealth slide · crop anchored toward the left of the frame so the wall logo stays visible */
.vf-video--swiss { object-position: 22% center; }
.video-feature-media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(200deg, rgba(31,42,44,0) 55%, rgba(31,42,44,0.35) 100%);
}
.video-feature-play {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.video-feature-play i.ph {
  width: 74px; height: 74px; border-radius: 50%;
  background: rgba(255,255,255,0.94);
  color: var(--slate-deep);
  font-size: 26px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 34px rgba(31,42,44,0.35);
  transition: transform .25s ease;
}
.video-feature-media:hover .video-feature-play i.ph { transform: scale(1.08); }
.video-feature-chip {
  position: absolute; right: 14px; bottom: 12px; z-index: 2;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  background: rgba(31,42,44,0.72);
  color: #fff;
  padding: 5px 10px;
  border-radius: 7px;
}
.video-feature-copy {
  padding: clamp(32px, 4vw, 60px) clamp(26px, 4vw, 56px) clamp(24px, 2.4vw, 32px);
  display: flex; flex-direction: column; justify-content: flex-start;
  text-align: left;   /* the manifesto band centers text · the card keeps its own alignment */
}
.video-feature-kicker {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--seafoam-deep);
}
.video-feature-h {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(23px, 2.3vw, 33px);
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 14px 0 0;
}
.video-feature-body {
  margin: 18px 0 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-mid);
}
.video-feature-meta {
  margin-top: auto;   /* pin the avatar line + hairline to the same spot on every slide, regardless of copy length above */
  padding-top: 20px;
  border-top: 1px solid var(--border-soft);
  display: flex; align-items: center; gap: 14px;
}
.video-feature-face {
  width: 46px; height: 46px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 30%;
}
/* Wider headshots zoomed inside a clipping circle so faces sit at the same scale as the tight Volz crop */
span.video-feature-face { display: block; overflow: hidden; flex-shrink: 0; }
span.video-feature-face img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%;
}
.vff-zoom--mercola img { transform: scale(2.2); transform-origin: 50% 24%; }
.vff-zoom--carlo img { transform: scale(2.9); transform-origin: 50% 7%; }
.video-feature-name { display: block; font-family: var(--font-display); font-weight: 700; font-size: 14.5px; color: var(--ink); }
.video-feature-role { display: block; font-size: 13px; color: var(--ink-muted); margin-top: 2px; }
.video-feature-nav { margin-top: 18px; display: flex; align-items: center; gap: 12px; }
.video-feature-count { font-size: 13.5px; color: var(--ink-muted); letter-spacing: 0.02em; margin-right: auto; }
.video-feature-count b { color: var(--slate-deep); font-weight: 600; }
.video-feature-btn {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  background: #fff;
  color: var(--slate-deep);
  font-size: 18px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s ease, border-color .2s ease;
}
.video-feature-btn:hover { background: var(--seafoam); border-color: var(--seafoam); }
@media (max-width: 767.98px) {
  .video-feature-slide { grid-template-columns: 1fr; }
  .video-feature-media { min-height: 0; aspect-ratio: 16 / 10; }
  .video-feature-meta { margin-top: 26px; }   /* stacked layout has no slack to absorb auto · keep the normal gap */
}

/* ═══════════════════ DENTAL TOURISM BAND ═══════════════════ */
.tourism {
  background: var(--sand);
  color: var(--slate-darker);
  padding: var(--wave-gap) 0 var(--wave-pad);
  position: relative;
}
/* ═══════════════════ REVIEWS BAND ═══════════════════ */
.reviews {
  background: #ffffff;
  padding: var(--wave-gap) 0 var(--sec-pad);
}
/* Reviews grid · two rows of three cards, no slider */
/* Layout rides Bootstrap: row-cols-1 / row-cols-w640-2 / row-cols-lg-3 + g-3 g-md-4 */
.reviews-grid { margin-bottom: 56px; }

/* Category hub service grid · static Bootstrap grid of feel-cards */
.hub-grid { margin-bottom: 0; padding-top: 12px; }

/* Article prose · blog singles + long-form content pages */
.article { background: #fff; padding: var(--sec-pad) 0 var(--wave-pad); }
.article-body { max-width: 72ch; margin: 0 auto; }
.article-body p { margin: 0 0 18px; font-size: 17px; line-height: 1.7; color: var(--ink-mid); }
.article-body h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(24px, 2.2vw, 30px); color: var(--slate-darker);
  margin: 36px 0 14px;
}
.article-body ul { margin: 0 0 18px; padding-left: 22px; font-size: 17px; line-height: 1.7; color: var(--ink-mid); }
.article-body li { margin-bottom: 8px; }
.article-body a { color: var(--seafoam-deep); font-weight: 600; text-decoration: none; }
.article-body a:hover { text-decoration: underline; }
.article-meta { text-align: center; color: var(--slate); font-size: 13.5px; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 30px; }

/* Article subheads · h3 within h2 sections, h4 for fine detail */
.article-body h3 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(19px, 1.9vw, 23px); color: var(--slate-darker);
  margin: 28px 0 12px;
}
.article-body h4 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 16px; color: var(--ink); letter-spacing: 0.02em;
  margin: 22px 0 10px;
}

/* Article pull quote */
/* A post body sima <blockquote>-ja ugyanezt kapja · nem kell .article-quote class */
.article-quote,
.article-body blockquote {
  margin: 30px 0; padding: 22px 26px;
  border-left: 4px solid var(--seafoam-deep);
  background: var(--mist); border-radius: 0 14px 14px 0;
}
.article-quote p,
.article-body blockquote p {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(18px, 1.9vw, 21px); line-height: 1.55;
  color: var(--slate-deep); margin: 0;
}
.article-quote cite,
.article-body blockquote cite {
  display: block; margin-top: 10px; font-style: normal;
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--slate);
}

/* In-article chart card · canvas initialized by page.js when data-ns-chart present */
.article-chart {
  margin: 30px 0; padding: 24px 24px 18px;
  background: #fff; border: 1px solid var(--border); border-radius: 16px;
}
.article-chart-box { position: relative; height: 260px; }
.article-chart figcaption {
  margin-top: 14px; text-align: center;
  font-size: 14px; line-height: 1.5; color: var(--ink-muted);
}

/* Author bio card · sits between article body and related links */
.article-author {
  max-width: 72ch; margin: 40px auto 0;
  display: flex; gap: 22px; align-items: center;
  padding: 26px 28px; background: var(--shell);
  border: 1px solid var(--border-soft); border-radius: 16px;
}
/* Author avatar · identical recipe to the homepage video-feature-face (Carlo crop) */
.article-author-face {
  width: 92px; height: 92px; border-radius: 50%;
  display: block; overflow: hidden; flex-shrink: 0;
}
.article-author-face img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%;
  transform: scale(2.9); transform-origin: 50% 7%;
}
.article-author-kicker {
  display: block; font-size: 12.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--slate); margin-bottom: 4px;
}
.article-author-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 18px; color: var(--ink); margin: 0 0 6px;
}
.article-author-bio { font-size: 15px; line-height: 1.65; color: var(--ink-mid); margin: 0 0 10px; }
.article-author-link { font-weight: 600; color: var(--seafoam-deep); text-decoration: none; }
.article-author-link:hover { text-decoration: underline; }
@media (max-width: 480px) {
  .article-author { flex-direction: column; text-align: center; }
  .article-chart-box { height: 220px; }
}

/* Contact form card · same field treatment as the booking modal */
.contact-card {
  --bs-card-bg: #fff;
  --bs-card-border-color: var(--border);
  --bs-card-border-radius: 18px;
  --bs-card-spacer-y: 32px;
  --bs-card-spacer-x: 28px;
}
.contact-info-list { list-style: none; margin: 0; padding: 0; }
.contact-info-list li { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; font-size: 16px; color: var(--ink-mid); }
.contact-info-list i.ph { color: var(--seafoam-deep); font-size: 20px; margin-top: 2px; }
.contact-info-list a { color: inherit; }
.contact-info-list strong { color: var(--slate-darker); font-weight: 600; text-decoration: none; }
.contact-info-list a:hover { color: var(--seafoam-deep); }
.contact-info-list a:hover strong { color: inherit; }

/* Full-bleed Tampa Bay map on the contact page · St. Pete, Tampa, Clearwater, Sarasota in one frame */
.contact-map { line-height: 0; background: var(--shell); }
.contact-map iframe { width: 100%; height: 480px; border: 0; display: block; }
@media (max-width: 767.98px) { .contact-map iframe { height: 360px; } }

/* Footer column titles double as category hub links */
.footer-col-title a { color: inherit; text-decoration: none; }
.footer-col-title a:hover { color: var(--seafoam); }
.review-card {
  --bs-card-bg: #fff;
  --bs-card-border-color: var(--border);
  --bs-card-border-radius: 18px;
  height: clamp(300px, 26vw, 340px);
  padding: 26px 24px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.review-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(46,61,64,0.06);
  border-color: var(--slate-light);
}
/* Flex layout rides d-flex utilities in the markup · bespoke gap stays here */
.review-card-top {
  gap: 12px;
  margin: 0 0 14px;
}
.review-card-stars { color: #d9a544; letter-spacing: 2px; font-size: 16px; }
.review-card-body {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-mid);
  margin: 0 0 20px;
  letter-spacing: -0.005em;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.review-card-cite {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-mid);
  letter-spacing: -0.005em;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.review-card-cite-loc {
  font-weight: 500;
  font-size: 12px;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
  text-align: right;
}
.review-card-source {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--seafoam-deep);
}

/* Mixed sizes — each chip lands at a different display size for a flowing magazine feel */

/* Reviews CTA button · lighter outlined style to balance the editorial quotes above */
.reviews-cta { text-align: center; margin-top: clamp(12px, 2vw, 28px); }
.reviews-cta .btn-dark {
  --bs-btn-color: var(--slate-darker);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--slate-darker);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--slate-darker);
  --bs-btn-hover-border-color: var(--slate-darker);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--slate-darker);
  --bs-btn-active-border-color: var(--slate-darker);
  --bs-btn-font-weight: 600;
  --bs-btn-padding-y: 14px;
  --bs-btn-padding-x: 28px;
  --bs-btn-border-radius: 100px;
  letter-spacing: 0.02em;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.reviews-cta .btn-dark:hover { transform: translateY(-1px); }
/* ═══════════════════ BLOG TEASER · MOUTH-BODY CONNECTION ═══════════════════ */
.blog-teaser {
  background: #748689;
  padding: var(--wave-gap) 0 var(--wave-pad);
}
/* Blog slider · mirrors reviews-slider pattern */
.blog-slider {
  position: relative;
  max-width: 1320px;
  margin: 0 auto 56px;
}
.blog-slider-nav { display: contents; }
.blog-slider-btn {
  position: absolute;
  top: clamp(120px, 18vw, 180px);
  z-index: 20;
  width: clamp(56px, 6vw, 72px);
  height: clamp(56px, 6vw, 72px);
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  background: #fff;
  color: var(--slate-darker);
  align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(46,61,64,0.10), 0 1px 2px rgba(46,61,64,0.04);
  transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease, opacity .25s ease, box-shadow .25s ease;
  padding: 0;
}
.blog-slider-btn[data-blog-dir="prev"] { left: calc(50% - 50vw + 20px); }
.blog-slider-btn[data-blog-dir="next"] { right: calc(50% - 50vw + 20px); }
.blog-slider-btn i.ph { font-size: clamp(20px, 2vw, 26px); transition: transform .25s ease; }
.blog-slider-btn:hover {
  background: var(--seafoam);
  color: var(--slate-darker);
  border-color: var(--seafoam);
  box-shadow: 0 14px 32px rgba(127,191,174,0.45), 0 2px 4px rgba(46,61,64,0.06);
  transform: scale(1.06);
}
.blog-slider-btn[data-blog-dir="prev"]:hover i.ph { transform: translateX(-3px); }
.blog-slider-btn[data-blog-dir="next"]:hover i.ph { transform: translateX(3px); }
.blog-slider-btn:active { transform: scale(0.96); }
.blog-slider-btn.is-disabled { opacity: 0.35; pointer-events: none; }
.blog-track {
  padding: 12px 0 28px 0;
  margin-bottom: 0;
  text-align: left;
}
.blog-card {
  --bs-card-bg: #fff;
  --bs-card-border-color: var(--border);
  --bs-card-border-radius: 18px;
  --bs-card-spacer-y: 22px;
  --bs-card-spacer-x: 22px;
  width: 100%;
  min-height: var(--card-h);
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  overflow: hidden;
}
.blog-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(46,61,64,0.06);
  border-color: var(--slate-light);
}
.blog-card-img {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #fff;
  border-bottom: 1px solid var(--border-soft);
  overflow: hidden;
  flex-shrink: 0;
}
.blog-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.blog-card-cat {
  display: inline-block;
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--seafoam-deep);
}
.blog-card-body {
  padding-bottom: 24px;
  display: flex; flex-direction: column;
}
.blog-card-h {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.2;
  color: var(--slate-darker);
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  /* Lock title to 2 lines so every card lines up */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(21px * 1.2 * 2);
}
.blog-card-excerpt {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--ink-mid);
  line-height: 1.55;
  letter-spacing: -0.005em;
  margin: 0 0 24px;
  /* Clamp body to 4 lines so every card matches */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Blog card meta · same hollow pill as feel/tour card links ·
   the whole card is the <a>, so hover rides on .blog-card:hover */
.blog-card-meta {
  --bs-btn-color: var(--ink-mid);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--border-soft);
  --bs-btn-border-width: 1.5px;
  --bs-btn-hover-color: var(--slate-deep);
  --bs-btn-hover-bg: rgba(127, 191, 174, 0.10);
  --bs-btn-hover-border-color: var(--seafoam-deep);
  --bs-btn-active-color: var(--slate-deep);
  --bs-btn-active-bg: rgba(127, 191, 174, 0.10);
  --bs-btn-active-border-color: var(--seafoam-deep);
  --bs-btn-font-family: var(--font-display);
  --bs-btn-font-size: 13.5px;
  --bs-btn-font-weight: 600;
  --bs-btn-line-height: var(--body-lh);
  --bs-btn-padding-y: 10px;
  --bs-btn-padding-x: 20px;
  --bs-btn-border-radius: 999px;
  --bs-btn-focus-shadow-rgb: 127, 191, 174;
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  letter-spacing: 0.04em;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.blog-card-meta i { font-size: 14px; transition: transform .2s ease; }
.blog-card:hover .blog-card-meta {
  color: var(--slate-deep);
  border-color: var(--seafoam-deep);
  background: rgba(127, 191, 174, 0.10);
}
.blog-card:hover .blog-card-meta i { transform: translateX(3px); }
.blog-teaser-cta { text-align: center; margin-top: 64px; }

/* ═══════════════════ BLOG ARCHIVE · filters, pagination, breadcrumb ═══════════════════ */
/* Category filter chips · one row, wraps on mobile, active chip fills */
.blog-filter {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px;
  margin: 0 auto 44px;
  max-width: 760px;
}
.blog-chip {
  display: inline-block;
  padding: 9px 20px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--slate-deep);
  background: #fff;
  border: 1.5px solid var(--slate-pale);
  border-radius: 999px;
  text-decoration: none;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.blog-chip:hover { border-color: var(--seafoam-deep); color: var(--slate-deep); background: rgba(127,191,174,0.10); }
.blog-chip.is-active {
  color: #fff;
  background: var(--slate-deep);
  border-color: var(--slate-deep);
}

/* Pagination · numbered pages + prev/next arrows */
.blog-pagination {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 8px;
  margin: 56px auto 0;
}
.blog-page {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px;
  padding: 0 12px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--slate-deep);
  background: #fff;
  border: 1.5px solid var(--slate-pale);
  border-radius: 999px;
  text-decoration: none;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.blog-page:hover { border-color: var(--seafoam-deep); background: rgba(127,191,174,0.10); }
.blog-page.is-active {
  color: #fff; background: var(--slate-deep); border-color: var(--slate-deep);
  pointer-events: none;
}
.blog-page--nav { font-size: 18px; }

/* Breadcrumb trail on singles + category archives */
.crumb {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--slate-light);
  text-align: center;
}
.crumb a { color: var(--slate-deep); text-decoration: none; }
.crumb a:hover { color: var(--seafoam-deep); text-decoration: underline; }
.crumb span { margin: 0 8px; color: var(--slate-light); }

/* Category badge on a single links back to its archive */
a.blog-cat-link { text-decoration: none; transition: color .2s ease; }
a.blog-cat-link:hover { color: var(--seafoam-deep); }

/* ═══════════════════ MANIFESTO BAND · dark pause ═══════════════════ */
.manifesto {
  position: relative;
  background: var(--slate);
  color: rgba(255,255,255,0.92);
  padding: var(--wave-gap) 0 var(--wave-pad);
  text-align: center;
}
.manifesto-wave-top {
  position: absolute;
  bottom: 100%; left: 0; right: 0;
  width: 100%;
  height: clamp(56px, 6vw, 85px);
  /* Manifesto bg is now --slate · this wave bridges from white feel above into slate manifesto below */
  color: var(--slate);
  z-index: 1;
  pointer-events: none;
  margin-bottom: -1px;
}
.manifesto-wave-bottom {
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  width: 100%;
  height: clamp(56px, 6vw, 85px);
  /* Colored as the NEXT section (--slate-deep) so the curve bridges into the founder band */
  color: var(--slate-deep);
  z-index: 1;
  pointer-events: none;
}
.manifesto .container { position: relative; z-index: 2; }

/* ═══════════════════ OFFICE TOUR ═══════════════════ */
.office-tour {
  background: var(--shell);
  position: relative;
  padding: var(--wave-gap) 0 var(--wave-pad);
}
.office-tour-wave-top {
  position: absolute;
  bottom: 100%; left: 0; right: 0;
  width: 100%;
  height: clamp(56px, 6vw, 85px);
  color: var(--shell);
  z-index: 2;
  pointer-events: none;
  margin-bottom: -1px;
}
.office-tour > .container { position: relative; z-index: 3; }
.tour-slider {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
}
.tour-slider-nav {
  /* container is layout-neutral · individual buttons position themselves on the slider edges */
  display: contents;
}
.tour-slider-btn {
  position: absolute;
  top: clamp(120px, 18vw, 180px);
  z-index: 20;
  width: clamp(56px, 6vw, 72px);
  height: clamp(56px, 6vw, 72px);
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  background: #fff;
  color: var(--slate-darker);
  align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(46,61,64,0.10), 0 1px 2px rgba(46,61,64,0.04);
  transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease, opacity .25s ease, box-shadow .25s ease;
  padding: 0;
}
.tour-slider-btn[data-tour-dir="prev"] { left: calc(50% - 50vw + 20px); }
.tour-slider-btn[data-tour-dir="next"] { right: calc(50% - 50vw + 20px); }
.tour-slider-btn i.ph { font-size: clamp(20px, 2vw, 26px); transition: transform .25s ease; }
.tour-slider-btn:hover {
  background: var(--seafoam);
  color: var(--slate-darker);
  border-color: var(--seafoam);
  box-shadow: 0 14px 32px rgba(127,191,174,0.45), 0 2px 4px rgba(46,61,64,0.06);
  transform: scale(1.06);
}
.tour-slider-btn[data-tour-dir="prev"]:hover i.ph { transform: translateX(-3px); }
.tour-slider-btn[data-tour-dir="next"]:hover i.ph { transform: translateX(3px); }
.tour-slider-btn:active { transform: scale(0.96); }
.tour-slider-btn.is-disabled { opacity: 0.35; pointer-events: none; }
.tour-track {
  padding: 12px 0 28px 0;
  margin-bottom: 0;
  text-align: left;
}
.tour-card {
  --bs-card-bg: #fff;
  --bs-card-border-color: var(--border);
  --bs-card-border-radius: 18px;
  --bs-card-spacer-y: 28px;
  --bs-card-spacer-x: 24px;
  width: 100%;
  min-height: var(--card-h);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.tour-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(46,61,64,0.08);
  border-color: var(--slate-light);
}
.tour-card-img {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #fff;
  border-bottom: 1px solid var(--border-soft);
  overflow: hidden;
}
.tour-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tour-card-body {
  display: flex; flex-direction: column;
}
.tour-card-h {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--slate-darker);
  margin: 0 0 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(21px * 1.2 * 2);
}
.tour-card-cap {
  font-family: var(--font-body);
  font-size: 15.5px;
  color: var(--ink-mid);
  line-height: 1.5;
  letter-spacing: -0.005em;
  margin: 0 0 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tour-card-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  width: 100%;
  border-top: 1px solid var(--border-soft);
}
.tour-card-list li {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--slate-darker);
  letter-spacing: -0.005em;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
  display: flex; align-items: center; gap: 10px;
}
.tour-card-list li::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--slate);
  flex-shrink: 0;
}

/* Tourism · top wave bracket · sand pulls up into office tour above */
.tourism { position: relative; }
.tourism-map-bg {
  position: absolute;
  top: 50%; right: -8%;
  transform: translateY(-50%);
  width: 70%;
  max-width: 1100px;
  height: 120%;
  z-index: 0;
  pointer-events: none;
}
.tourism-map-bg-img {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 0.22;
  filter: saturate(0.6) hue-rotate(-6deg);
  user-select: none;
  -webkit-user-drag: none;
}
.tourism-content {
  position: relative;
  z-index: 1;
}
@media (min-width: 992px) {
  .tourism-content > .tourism-h,
  .tourism-content > .tourism-body,
  .tourism-content > .tourism-cta { max-width: 55%; }
}
@media (min-width: 1200px) {
  /* Florida much larger on desktop · cap was holding it small on wide screens */
  .tourism-map-bg { width: 88%; max-width: 1750px; right: -5%; top: 0; height: 100%; transform: none; }
  .tourism-map-bg-img { opacity: 0.24; }
}
@media (max-width: 1199.98px) {
  .tourism-map-bg { width: 80%; right: -15%; max-width: 900px; }
}
@media (max-width: 991.98px) {
  .tourism-map-bg {
    width: 280%;
    max-width: none;
    top: 50%;
    bottom: auto;
    left: 50%;
    right: auto;
    /* Shift right ~10% from prior position so more of Florida sits in viewport */
    transform: translate(-52%, -50%);
    height: 160vw;
    opacity: 1;
  }
  .tourism-map-bg-img { opacity: 0.25; }
}
@media (max-width: 600px) {
  .tourism-map-bg {
    width: 340%;
    height: 200vw;
    transform: translate(-54%, -50%);
  }
}

/* SEO grid block sits directly under the upper Tourism intro */
.tourism-cities {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: clamp(32px, 4vw, 48px);
  position: relative;
  z-index: 1;
}
/* Reusable wave divider · uses the same shape as the Mercola one for cross-section consistency */
.wave-divider {
  width: 96px;
  height: 14px;
  margin: 0 auto clamp(32px, 4vw, 48px);
  color: rgba(127, 191, 174, 0.65);
  display: block;
}
/* Layout rides Bootstrap: row-cols-1 / row-cols-w600-2 / row-cols-lg-3; gutters via the row variable API */
.seo-grid {
  --bs-gutter-x: clamp(28px, 3.5vw, 56px);
  --bs-gutter-y: clamp(28px, 3.5vw, 56px);
  text-align: left;
}
.seo-col { display: flex; flex-direction: column; }
.seo-col-label {
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 22px;
}
/* .seo-list reset rides list-unstyled + mb-0 utilities in the markup */
.seo-list li { margin-bottom: 10px; }
.seo-list a {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 400;
  color: var(--slate-darker);
  text-decoration: none;
  letter-spacing: -0.005em;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color .2s ease, border-color .2s ease;
}
.seo-list a:hover {
  color: var(--seafoam-deep);
  border-bottom-color: var(--seafoam-deep);
}
@media (max-width: 991.98px) {
  .seo-grid { --bs-gutter-x: 32px; --bs-gutter-y: 32px; }
}
@media (max-width: 599.98px) {
  .seo-grid { --bs-gutter-x: 28px; --bs-gutter-y: 28px; }
}
.tourism-wave-top {
  position: absolute;
  bottom: 100%; left: 0; right: 0;
  width: 100%;
  height: clamp(56px, 6vw, 85px);
  color: var(--sand);
  z-index: 2;
  pointer-events: none;
  margin-bottom: -1px;
}
/* Universal section-break waves · same path + same height as every other wave */
/* overflow: hidden removed so waves at top: -1px don't get clipped by the parent boundary */
.feel, .reviews, .blog-teaser, .site-footer { position: relative; }
.feel-wave-top,
.reviews-wave-top,
.blog-wave-top,
.footer-wave-top {
  position: absolute;
  /* SVG sits ABOVE the section's top edge so the wavy curve crosses the boundary between sections */
  bottom: 100%; left: 0; right: 0;
  width: 100%;
  height: clamp(56px, 6vw, 85px);
  z-index: 2;
  pointer-events: none;
  /* Negative margin closes any subpixel gap between SVG bottom and section top */
  margin-bottom: -1px;
}
.feel-wave-top { color: #ffffff; }
.reviews-wave-top { color: #ffffff; }
.blog-wave-top { color: #748689; }
.footer-wave-top { color: var(--slate-deep); }
/* Make sure section content sits above the wave */
.feel > .container,
.reviews > .container,
.blog-teaser > .container,
.site-footer > .container { position: relative; z-index: 3; }

/* ═══════════════════ FOOTER ═══════════════════ */
.site-footer {
  background: var(--slate-deep);
  color: rgba(255,255,255,0.72);
  padding: var(--wave-gap) 0 40px;
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: -0.005em;
}
.site-footer a {
  color: rgba(255,255,255,0.72);
  text-decoration: none;
  transition: color .2s ease;
}
.site-footer a:hover {
  color: var(--seafoam);
}
.footer-brand img {
  height: 140px; width: auto;
  margin-bottom: 32px;
}
.footer-meta {
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255,255,255,0.72);
  letter-spacing: -0.005em;
}
/* Flex layout rides d-flex utilities in the markup */
.footer-line {
  gap: 12px;
  margin: 0 0 12px;
}
.footer-line i.ph {
  font-size: 18px;
  color: var(--seafoam);
  line-height: 1.4;
  flex-shrink: 0;
  margin-top: 2px;
}
.footer-line a { color: #fff; text-decoration: none; transition: color .2s ease; }
.footer-line a:hover { color: var(--seafoam); }
.footer-col-title {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--seafoam);
  margin-bottom: 22px;
}
/* .footer-links reset rides list-unstyled + mb-0 utilities in the markup */
.footer-links li { margin-bottom: 11px; }
.footer-links a { font-size: 15px; letter-spacing: -0.005em; }
/* Flex layout rides d-flex utilities in the markup */
.footer-bar {
  border-top: 1px solid rgba(255,255,255,0.12);
  margin-top: 72px; padding-top: 32px;
  font-size: 13px; color: rgba(255,255,255,0.55);
  letter-spacing: -0.005em;
  gap: 12px;
}
.footer-bar a { color: rgba(255,255,255,0.72); margin-left: 24px; }

/* ═══════════════════ MODAL OVERRIDES ═══════════════════
   Chrome (bg, radius, border, paddings, z-index) comes from the
   --bs-modal-* block up top · below is typography + the corner clip. */
.modal-content { overflow: hidden; }
.modal-header, .modal-body { background: #fff; }
.modal-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: 26px;
  color: var(--slate-darker);
  letter-spacing: -0.01em;
}
.modal-title em {
  font-family: var(--font-display); font-style: italic; font-weight: 400; color: var(--slate);
}
/* Field sizing, focus ring, and label type are compiled into the framework
   ($input-* / $form-label-* in scss/bootstrap-custom.scss). Only properties
   with no Sass variable remain here. */
.form-label { letter-spacing: 0.18em; text-transform: uppercase; }

@media (max-width: 640px) {
  /* Unify all card widths on mobile · every slider card uses the same --card-w token.
     This block sits AFTER every base card rule so source order wins the cascade — keep it there. */
  .feel-card,
  .tour-card,
  .review-card { flex: 0 0 var(--card-w); }
  /* Blog card is an <a> inside the <li> · ensure it fills the li width like every other card */
  .blog-card { flex: 1 1 100%; width: 100%; }
}

/* ═══════════════════ MOBILE TAP TARGETS ═══════════════════
   Text links tighten to ~21px line height on phones · pad them back to a
   ~44px touch area (Apple HIG) without changing the visual rhythm. */
@media (max-width: 767.98px) {
  .site-footer a { display: inline-block; padding: 3px 0; }
  .site-footer .footer-line span { display: inline-block; padding: 3px 0; }
  .mobile-menu .sub-menu a { padding: 11px 0; }
  .hero-trust-item { padding: 10px 0; }
  .footer-bar a { display: inline-block; padding: 9px 0; }

  .site-footer .footer-brand img { margin-bottom: 16px !important; }
}

/* Rotating review snippet · rides in the 700+ Reviews trust item */
.hero-trust-quote {
  display: inline-block;
  font-style: italic;
  color: var(--seafoam);
  white-space: nowrap;
  overflow: hidden;
  vertical-align: bottom;
  transition: width .35s ease;
}
/* Rotator rides Swiper fade (page.js builds the slides from the phrase list) */
.hero-trust-quote .htq-swiper { display: block; width: 100%; }
.hero-trust-quote .swiper-slide.htq-inner { white-space: nowrap; }

/* ═══════════════════ SITEWIDE SCALE ═══════════════════
   Baseline render is 90% of the authored design (client preference,
   2026-07-05) from tablet up; phones stay 1:1. Wider screens then scale
   the whole render up so it never floats small in whitespace.
   Tiers keep (viewport ÷ zoom) above the 1340px full-nav breakpoint. */
@media (min-width: 768px)  { html { zoom: 0.9; } }    /* tablets + laptops · 90% baseline */
@media (min-width: 1600px) { html { zoom: 1.035; } }  /* 1.15 × 0.9 */
@media (min-width: 1800px) { html { zoom: 1.17; } }   /* 1.30 × 0.9 */
@media (min-width: 2200px) { html { zoom: 1.35; } }   /* 1.50 × 0.9 */

/* ═══════════════════ RESPONSIVE TUNING ═══════════════════ */
@media (max-width: 991.98px) {
  .hero { padding: 72px 0 64px; }
  .feel { padding: var(--wave-gap) 0 32px; }
  .tourism, .reviews, .blog-teaser { padding: 40px 0; }
  .tourism-content { text-align: center; }
  .seo-col { justify-content: center; }
  .seo-grid { text-align: center; }
  .reviews { padding-bottom: 60px; }
  .footer-brand img { height: 116px; }

  .blog-teaser-cta { margin-top: 24px; }
}

@media (max-width: 575.98px) {
  .hero { padding: 56px 0 48px; }
  .hero-h1 { font-size: 44px; }
  .hero-h1 br { display: none !important; }
  .footer-bar { justify-content: flex-start; }
  .footer-bar a { margin-left: 0; margin-right: 18px; }
}

/* ═══════════════════ MOBILE POLISH · sitewide ═══════════════════ */
@media (max-width: 767.98px) {
  /* Tighten section padding */
  :root {
    --sec-pad: clamp(56px, 12vw, 96px);
    --sec-pad-tight: clamp(48px, 9vw, 72px);
  }
  /* Card sizing · wider fluid cards for mobile · feel-card, tour-card, doctor-card, blog-card all share this */
  :root {
    --card-w: clamp(320px, 92vw, 480px);
    --card-h: auto;
  }
  /* Headlines · scale down so they don't wrap awkwardly */
  .section-h {
    font-size: clamp(34px, 8vw, 44px);
    line-height: 1.05;
  }
  .hero-h1 { font-size: clamp(36px, 9vw, 48px); }
  /* Body copy + leads */
  /* All card sliders · share the same tight gap, padding, and overflow behavior on mobile */
  .feel-points, .tour-track, .blog-track { padding: 12px 0 20px 0; }
  /* Mobile text alignment · long body paragraphs read better left-aligned · short kickers/headlines/CTAs stay centered */
  .section-sub,
  .video-feature-body {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
  }
  /* Keep section heads, kickers, CTAs centered · they read fine at one or two lines */
  .section-h,
  .section-head .kicker {
    text-align: center;
  }
  /* Card content padding tighter on mobile · uniform across feel / tour / doctor / blog / review */
  .feel-card-content, .tour-card-body, .blog-card-body, .review-card {
    padding: 22px 20px;
  }
  /* Reviews · single column stack on mobile, no slider */
  .review-card { height: auto; min-height: 0; }
  /* Mercola section · gentler shadow on mobile */
  .video-feature { margin: 0 16px; box-shadow: 0 14px 24px -8px rgba(0, 0, 0, 0.18); }
  /* Hero spacing */
  .hero-cta, .hero-phone-link { --bs-btn-padding-y: 11px; --bs-btn-padding-x: 18px; --bs-btn-font-size: 14px; }
  /* Topbar · bigger logo on mobile, but capped so it doesn't overflow viewport */
  /* a-qualified selector outranks the base .hero-logo img rule that sits later in the file */
  a.hero-logo img {
    height: auto;
    width: auto;
    max-height: 108px;
    max-width: 60vw;
  }
  /* Hide the city/state from the hero kicker on mobile · keep the short tagline only */
  .hero-kicker .hk-location { display: none; }
  /* Hero CTA row centered on mobile · Schedule Visit + phone pill */
  .hero-right {
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .hero-cta, .hero-phone-link {
    margin-left: auto;
    margin-right: auto;
  }
  /* Gap is unified above to 14px on all sliders */
  /* Certs strip · auto-scrolling marquee on mobile · bigger logos */
  .creds-marquee {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
    max-width: 100vw;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  }
  .creds-row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    width: max-content;
    gap: 56px;
    padding: 16px 28px;
  }
  .creds-row::-webkit-scrollbar { display: none; }
  .creds-logo {
    flex-shrink: 0;
    height: 88px;
  }
  .creds-logo img {
    height: 100%;
    width: auto;
  }
}
@media (max-width: 991.98px) {
  /* Section bottom padding · give the upcoming wave room to breathe on mobile */
  .feel, .tourism, .blog-teaser, .office-tour, .manifesto {
    padding-bottom: var(--wave-pad);
  }
  /* Footer · stack columns cleanly, center everything for mobile */
  .site-footer .row { row-gap: 36px; }
  .site-footer .col-lg-2,
  .site-footer .col-lg-3,
  .site-footer .col-md-6 {
    text-align: center;
  }
  .site-footer .footer-links {
    display: inline-block;
    text-align: center;
    margin: 0 auto;
  }
  .site-footer .footer-col-title {
    text-align: center;
    margin-bottom: 12px;
    font-size: 15px;
    letter-spacing: 0.12em;
  }
  .site-footer .footer-brand {
    text-align: center;
    padding-bottom: 24px;
  }
  .site-footer .footer-brand img {
    margin: 0 auto 36px;
    display: block;
  }
  .site-footer .footer-line {
    justify-content: center;
    margin-bottom: 16px;
  }
  .site-footer .footer-line:first-of-type {
    margin-top: 12px;
  }
  .footer-bar {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    padding-top: 28px;
  }
  /* Footer copyright lines stacked cleanly on mobile · Biological & Holistic Dentist Group on its own row */
  .footer-copyright {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    line-height: 1.5;
  }
  .footer-bar span:last-child {
    display: flex;
    gap: 18px;
    justify-content: center;
  }
  .footer-bar a {
    margin: 0;
  }
  /* Office tour · keep matching */
  /* Sticky call button on mobile */
  .sticky-call { padding: 12px 18px; font-size: 14px; }
}

/* ═══════════════════ MOBILE POLISH · very narrow ═══════════════════ */
@media (max-width: 380px) {
  .hero-h1 { font-size: 36px; }
  .section-h { font-size: 30px; }
  a.hero-logo img {
    max-height: 86px;
    max-width: 60vw;
  }
  /* Hide phone label/icon at very narrow widths to save space */
  .hero-phone-link i.ph { display: none; }
}

/* ═══════════════════ WP-PORT MARKUP HOOKS ═══════════════════
   Nav markup IS wp_nav_menu output: .menu / .menu-item /
   .menu-item-has-children / .sub-menu on desktop and mobile drawer.
   Carets are ::after pseudo-elements — WP emits no arrow markup.
   Form #bookForm is a Gravity Forms placeholder.
*/

/* ═══════════════════════════════════════════════════════════════════
   HERO · floating capsule over video (replaces old topbar + hero)
   ═══════════════════════════════════════════════════════════════════ */
.hero.hero--video {
  position: relative;
  min-height: 72vh;
  background: linear-gradient(180deg, var(--slate) 0%, var(--slate) 22%, var(--slate-deep) 100%);
  color: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  text-align: left;
  padding: 0;
}
.hero-video {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  overflow: hidden;
  opacity: 0.20;
  mix-blend-mode: luminosity;
}
.hero-video video,
.hero-video img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse 75% 55% at 50% 42%, rgba(30,42,44,0.46) 0%, rgba(30,42,44,0.16) 55%, rgba(30,42,44,0) 78%),
    linear-gradient(180deg, rgba(46,61,64,0.12) 0%, rgba(46,61,64,0.12) 35%, rgba(46,61,64,0.22) 75%, rgba(46,61,64,0.34) 100%);
}

/* Sticky site nav · wraps the topbar at body level so it pins to top on scroll */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  /* Divider lives on the wave below · see .site-nav-wave drop-shadow */
}
/* White wave hanging below the nav · same path as the others, smaller height so the trough doesn't push the menu line away */
.site-nav-wave {
  position: absolute;
  /* Overlap the nav by 1px so there's no subpixel seam between nav bg and wave top */
  top: calc(100% - 1px);
  left: 0;
  width: 100%;
  /* Shorter than the other waves so the deepest trough only sits ~25px below the nav menu */
  height: clamp(56px, 6vw, 85px);
  display: block;
  vertical-align: top;
  pointer-events: none;
  /* Soft slate shadow traces the wave curve so the white nav separates from white sections.
     clip-path cuts the blur that would otherwise bleed above the seam and draw a straight
     hairline across the nav · negative bottom inset leaves room for the curve's shadow. */
  filter: drop-shadow(0 3px 4px rgba(69, 101, 105, 0.16));
  clip-path: inset(0 0 -30px 0);
}

/* Traditional full-width top nav */
.hero-topbar {
  position: relative; z-index: 5;
  padding: 0;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}
.hero-capsule {
  width: 100%;
  max-width: none;
  background: transparent;
  border: none;
  border-radius: 0;
  /* Balanced vertical padding: top = bottom · wave handles the visual rest */
  padding: 20px 28px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: none;
}
.hero-logo img { height: 36px; width: auto; display: block; transition: opacity .2s ease; }
.hero-logo:hover img { opacity: 0.8; }

/* Visibility rides d-none d-w1340-flex utilities on the wp_nav_menu ul */
.hero-nav { list-style: none; margin: 0; padding: 0; gap: 2px; }
.hero-nav > li.menu-item-has-children { position: relative; }
.hero-nav > li > a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 14px 20px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-mid);
  letter-spacing: -0.01em;
  transition: color .2s ease;
  white-space: nowrap;
  text-decoration: none;
}
.hero-nav > li > a:hover,
.hero-nav > li.menu-item-has-children:hover > a { color: var(--seafoam-deep); }
/* Dropdown caret · CSS-drawn chevron on the parent link, no arrow markup (WP-portable) */
.hero-nav > li.menu-item-has-children > a::after {
  content: '';
  width: 7px;
  height: 7px;
  border: 0;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-top: -3px;
  margin-left: 0;
  vertical-align: baseline;
  opacity: 0.5;
  transition: opacity .2s ease;
  flex-shrink: 0;
}
.hero-nav > li.menu-item-has-children:hover > a::after,
.hero-nav > li.menu-item-has-children > a[aria-expanded="true"]::after { opacity: 0.8; }
/* Panels ride Bootstrap Dropdown (data-bs-display="static"), themed through --bs-dropdown-*.
   Placement (centered under the trigger) stays CSS; the wp_nav_menu port uses a bootstrap
   nav walker to emit dropdown/dropdown-toggle/dropdown-menu/dropdown-item classes. */
.hero-nav .sub-menu {
  --bs-dropdown-zindex: 1030;
  --bs-dropdown-bg: #fff;
  --bs-dropdown-border-color: var(--border-soft);
  --bs-dropdown-border-width: 1px;
  --bs-dropdown-border-radius: 16px;
  --bs-dropdown-min-width: 260px;
  --bs-dropdown-padding-y: 12px;
  --bs-dropdown-padding-x: 12px;
  --bs-dropdown-link-color: var(--ink-mid);
  --bs-dropdown-link-hover-color: var(--seafoam-deep);
  --bs-dropdown-link-hover-bg: rgba(127, 191, 174, 0.14);
  --bs-dropdown-link-active-color: var(--seafoam-deep);
  --bs-dropdown-link-active-bg: rgba(127, 191, 174, 0.14);
  --bs-dropdown-item-padding-y: 12px;
  --bs-dropdown-item-padding-x: 18px;
  --bs-dropdown-item-border-radius: 10px;
  top: calc(100% + 6px); left: 50%;
  transform: translateX(-50%);
  margin-top: 0;
  box-shadow: 0 4px 12px rgba(43,67,72,0.04), 0 24px 60px rgba(43,67,72,0.18);
}
.hero-nav .sub-menu a {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
/* Desktop · open dropdowns on hover (mouseover), not only click. Bootstrap's click +
   keyboard toggle stays intact for touch and a11y. The ::after bridge spans the 6px gap
   between the toggle and the menu so the cursor can travel into the dropdown without it closing. */
@media (min-width: 1340px) {
  .hero-nav > li.menu-item-has-children::after {
    content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 8px;
  }
  .hero-nav > li.menu-item-has-children:hover > .sub-menu,
  .hero-nav > li.menu-item-has-children:focus-within > .sub-menu {
    display: block;
  }
}

.hero-right {
  display: none;
  flex-direction: row;
  align-items: center;
  gap: 56px;
}
.hero-phone-link {
  --bs-btn-color: var(--slate-darker);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--slate-darker);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--slate-darker);
  --bs-btn-hover-border-color: var(--slate-darker);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--slate-darker);
  --bs-btn-active-border-color: var(--slate-darker);
  --bs-btn-font-family: var(--font-display);
  --bs-btn-font-size: 15px;
  --bs-btn-font-weight: 600;
  --bs-btn-line-height: var(--body-lh);
  --bs-btn-padding-y: 11px;
  --bs-btn-padding-x: 22px;
  --bs-btn-border-radius: 100px;
  --bs-btn-focus-shadow-rgb: 127, 191, 174;
  display: inline-flex; align-items: center; gap: 8px;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.hero-phone-link i.ph {
  font-size: 17px;
  color: var(--seafoam-deep);
  transition: color .2s ease;
}
.hero-phone-link:hover i.ph { color: var(--seafoam); }
.hero-cta {
  --bs-btn-bg: var(--slate-darker);
  --bs-btn-border-width: 0;
  --bs-btn-color: #fff;
  --bs-btn-border-color: var(--slate-darker);
  --bs-btn-hover-bg: var(--seafoam-deep);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: var(--seafoam-deep);
  --bs-btn-active-bg: var(--seafoam-deep);
  --bs-btn-active-color: #fff;
  --bs-btn-active-border-color: var(--seafoam-deep);
  --bs-btn-font-family: var(--font-display);
  --bs-btn-font-size: 14.5px;
  --bs-btn-font-weight: 600;
  --bs-btn-line-height: var(--body-lh);
  --bs-btn-padding-y: 13px;
  --bs-btn-padding-x: 24px;
  --bs-btn-border-radius: var(--r-pill);
  --bs-btn-focus-shadow-rgb: 127, 191, 174;
  display: inline-flex; align-items: center; gap: 8px;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 4px 14px rgba(46,61,64,0.22);
}
.hero-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(127,191,174,0.45);
}
.hero-cta::after {
  content: '→'; font-size: 14px; opacity: 0.75;
  transition: transform .25s ease, opacity .25s ease;
}
.hero-cta:hover::after { opacity: 1; transform: translateX(3px); }

/* Hamburger button (mobile only) */
.hero-burger {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  background: rgba(255,255,255,0.92);
  gap: 5px;
  cursor: pointer;
  transition: background .2s ease;
  padding: 0;
  box-sizing: border-box;
  flex-shrink: 0;
}
.hero-burger-icon {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 18px;
  height: 12px;
}
.hero-burger-icon > span {
  display: block;
  width: 100%;
  height: 1.6px;
  background: var(--slate-darker);
  border-radius: 2px;
}
.hero-burger-label {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--slate-darker);
  line-height: 1;
  white-space: nowrap;
}
.hero-burger:hover { background: var(--mist-warm); }
/* legacy hamburger span styles overridden by .hero-burger-icon below */
/* old hamburger pseudo-elements removed · now using three real spans in .hero-burger-icon */

/* Hero content */
.hero-inner {
  position: relative; z-index: 4;
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(48px, 6vw, 88px) 0 clamp(140px, 13vw, 200px);
}
@media(max-width: 767.98px) {
  .hero-inner { padding-bottom: 40px; }
  .hero--service .hero-inner, .hero--article .hero-inner { padding-bottom: 55px !important; }
}
.hero-content {
  max-width: 1320px; margin: 0 auto; padding: 0 18px; width: 100%;
  text-align: center;
}
.hero-h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 10vw, 50px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0 auto 20px;
  max-width: 22ch;
  text-align: center;
}
.hero-h1 em {
  font-style: normal;
  font-weight: 700;
  color: var(--seafoam);
}
.hero-sub {
  font-family: var(--font-body);
  font-size: 17px;
  color: rgba(255,255,255,0.92);
  line-height: 1.5;
  margin: 0 0 14px;
  max-width: 100%;
  font-weight: 400;
}
.hero-sub--lead {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(18px, 1.5vw, 23px);
  color: #fff;
  margin-bottom: 24px;
}
/* Hero SEO kicker · above h1 */
.hero-kicker {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  display: inline-block;
  margin: 0 0 20px;
}
.hero-kicker .hk-amp {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  color: inherit;
  margin: 0 0.1em;
  text-transform: none;
}
.hero-cta-row {
  display: flex; flex-direction: column;
  align-items: stretch; justify-content: flex-start;
  gap: 10px;
  width: 100%; max-width: 360px;
  margin: 0 auto 36px;
  text-align: left;
}
.btn-hero-primary {
  --bs-btn-bg: #fff;
  --bs-btn-color: var(--slate-darker);
  --bs-btn-border-color: #fff;
  --bs-btn-border-width: 1px;
  --bs-btn-hover-bg: var(--seafoam);
  --bs-btn-hover-color: var(--slate-darker);
  --bs-btn-hover-border-color: var(--seafoam);
  --bs-btn-active-bg: var(--seafoam);
  --bs-btn-active-color: var(--slate-darker);
  --bs-btn-active-border-color: var(--seafoam);
  --bs-btn-font-family: var(--font-display);
  --bs-btn-font-size: 16px;
  --bs-btn-font-weight: 600;
  --bs-btn-line-height: var(--body-lh);
  --bs-btn-padding-y: 16px;
  --bs-btn-padding-x: 28px;
  --bs-btn-border-radius: var(--r-pill);
  --bs-btn-focus-shadow-rgb: 127, 191, 174;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  letter-spacing: -0.005em;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 8px 22px rgba(0,0,0,0.18);
  width: 100%;
}
.btn-hero-primary:hover { transform: translateY(-1px); }
/* Richer trust strip · platform · cert · Mercola */
.hero-trust {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 14px 18px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  color: rgba(255,255,255,0.92);
  letter-spacing: -0.005em;
}
.hero-trust-item {
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
}
.hero-trust-item .hero-stars {
  color: var(--honey); letter-spacing: 2.5px; font-size: 19px;
}
.hero-trust-item .mono { font-weight: 600; }
.hero-trust-item i.ph {
  color: var(--seafoam);
  font-size: 17px;
}
.hero-trust-link {
  position: relative;
  color: rgba(255,255,255,0.92);
  text-decoration: none;
  cursor: pointer;
  transition: color .2s ease;
}
.hero-trust-link:hover,
.hero-trust-link:hover i.ph { color: var(--seafoam); }
@media (max-width: 767.98px) {
  .hero-trust {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 13px;
    text-align: center;
    padding: 0 16px;
  }
  .hero-trust-item {
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    white-space: normal;
  }
  .hero-trust-item .hero-stars {
    font-size: 14px;
    letter-spacing: 1.5px;
  }
  .hero-trust-item i.ph {
    font-size: 16px;
  }
}
.hero-sub { text-align: center; margin-left: auto; margin-right: auto; }

/* Beach wave divider */
.hero-wave {
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  width: 100%;
  height: clamp(56px, 6vw, 85px);
  color: var(--slate-deep);
  z-index: 3;
  pointer-events: none;
}

/* ═══════════════════ Responsive · mobile-first ═══════════════════ */
@media (min-width: 768px) {
  .hero-topbar { padding: 0; }
  .hero-capsule {
    border-radius: 0;
    padding: 20px 32px 16px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 24px;
  }
  .hero-logo img { height: 44px; }
  .hero-right { display: flex; gap: 40px; }
  /* Burger stays visible 768-991 · the desktop nav only appears at 992 */
  .hero-content { padding: 0 24px; }
  .hero-h1 { font-size: clamp(48px, 7vw, 84px); }
  .hero-sub { font-size: 17px; }
  .hero-cta-row { flex-direction: row; max-width: none; }
  .btn-hero-primary { width: auto; padding: 14.5px 30px; font-size: 16px; }
}

@media (min-width: 992px) {
  .hero-topbar { padding: 0; }
  .hero-capsule {
    border-radius: 0;
    padding: 22px clamp(24px, 3vw, 56px) 18px;
    gap: 24px;
    align-items: center;
  }
  .hero-logo img { height: 52px; }
  .hero-right { display: flex; gap: 24px; }
  .hero-content { padding: 0 28px; }
  .hero-h1 { font-size: clamp(56px, 6.5vw, 108px); max-width: 22ch; letter-spacing: -0.035em; }
  .hero-sub { font-size: clamp(18px, 1.4vw, 22px); max-width: 68ch; font-weight: 400; }
  .btn-hero-primary { padding: 16px 32px; }
}

/* Full nav only where all six items + phone + CTA physically fit on one row.
   Below 1340 the topbar keeps the tablet treatment: logo, phone, CTA, burger. */
@media (min-width: 1340px) {
  .hero-nav > li > a { padding: 14px 10px; font-size: 16px; }
}

/* ═══════════════════ HERO · CENTERED ALIGNMENT FINE-TUNING ═══════════════════ */
.hero-kicker { display: inline-block; }
.hero-cta-row { justify-content: center; flex-wrap: wrap; }
.hero-trust { justify-content: center; flex-wrap: wrap; }
@media (min-width: 992px) {
  .hero-content { padding: 0 28px; }
  .hero-h1 { max-width: 22ch; }
  .hero-sub { max-width: 72ch; }
}

/* ═══════════════════ MOVED FROM INLINE STYLES (homepage finalize) ═══════════════════ */
/* Footer resource actions */
.footer-action{display:block;padding:6px 0;font-weight:600;letter-spacing:0.04em;}
.footer-action--primary{padding:10px 0;}

/* Booking modal text */
.modal-kicker{font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:4px;}
.modal-intro{font-size:14px;color:var(--ink-mid);margin-bottom:24px;}
.modal-intro:has(~ .gform_confirmation_wrapper) { display: none; }
.modal-note{font-size:13px;color:var(--ink-muted);}
.modal-note a{font-weight:600;}
/* ═══════════════════ DESKTOP: office-tour + blog as static grids (homepage finalize) ═══════════════════ */
/* On desktop the horizontal sliders hid 3 of 6 cards off-screen. Switch to a 3-col grid ≥992px;
   tablet/mobile keep the scroll-snap slider (base styles + max-width queries). */
@media (min-width: 992px) {
  /* width:auto beats swiper-wrapper's width:100% so the row's negative gutter margins widen it normally */
  .feel-points, .tour-track, .blog-track { padding: 12px 0 8px; width: auto; }
}

/* ═══════════════════ SECTION HEADLINES · force 2-row wrap (desktop) ═══════════════════ */
@media (min-width: 992px) {
  .section-h { text-wrap: balance; }
  /* widen the centered head wrappers so their h2 can use 2 lines... */
  .section-head--wide { max-width: 100%; }
  /* ...while keeping the body intro at a readable measure */
  .section-head--wide .section-sub { max-width: 72ch; margin-left: auto; margin-right: auto; }
  .section-h--fit-26 { max-width: 26ch; }
  .section-h--fit-22 { max-width: 22ch; }
  .section-h--fit-17 { max-width: 17ch; }
}

/* ═══════════════════ DR. LITANO · FOUNDER BAND ═══════════════════ */
.founder {
  background: var(--slate-deep);
  color: rgba(255,255,255,0.92);
  padding: var(--wave-gap) 0 var(--wave-pad);
}
/* Layout rides Bootstrap: row + col-md-5 / col-md-7 + align-items-center; gutters via the row variable API */
.founder-grid {
  --bs-gutter-x: clamp(28px, 4vw, 52px);
  --bs-gutter-y: clamp(28px, 4vw, 52px);
}
.founder-portrait {
  border-radius: 22px;
  overflow: hidden;
  background: var(--slate);
  aspect-ratio: 4 / 5;
  max-width: 460px;
}
.founder-portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
}
.founder-body .kicker { color: rgba(255,255,255,0.7); }
/* local override · founder band lead color */
.founder-lead { color: rgba(255,255,255,0.92); margin-bottom: 28px; }
/* dark band · the shared slate-darker highlight color reads dark-on-dark here, so lift the emphasized phrase to white with the seafoam underline kept */
.founder-lead strong { color: #ffffff; }
.founder-creds {
  list-style: none; margin: 0 0 30px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 12px 22px;
}
/* Checkmark credentials · deliberately NOT pill-shaped so they don't read as buttons */
.founder-creds li {
  font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  display: inline-flex; align-items: center; gap: 8px;
}
.founder-creds li::before {
  content: '';
  width: 5px; height: 10px;
  border-right: 1.5px solid var(--seafoam);
  border-bottom: 1.5px solid var(--seafoam);
  transform: rotate(45deg);
  margin-top: -4px;
  flex-shrink: 0;
}
.btn-founder {
  --bs-btn-bg: #fff;
  --bs-btn-border-width: 0;
  letter-spacing: normal;
  --bs-btn-color: var(--slate-deep);
  --bs-btn-border-color: #fff;
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-color: var(--slate-deep);
  --bs-btn-hover-border-color: #fff;
  --bs-btn-active-bg: #fff;
  --bs-btn-active-color: var(--slate-deep);
  --bs-btn-active-border-color: #fff;
  --bs-btn-font-family: var(--font-display);
  --bs-btn-font-weight: 600;
  --bs-btn-font-size: 15px;
  --bs-btn-line-height: var(--body-lh);
  --bs-btn-padding-y: 13px;
  --bs-btn-padding-x: 24px;
  --bs-btn-border-radius: 999px;
  --bs-btn-focus-shadow-rgb: 127, 191, 174;
  display: inline-flex; align-items: center; gap: 8px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.btn-founder i.ph { transition: transform .25s ease; }
.btn-founder:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,0.18); }
.btn-founder:hover i.ph { transform: translateX(3px); }
@media (min-width: 768px) {
  .founder-grid { --bs-gutter-x: clamp(40px, 5vw, 72px); --bs-gutter-y: clamp(40px, 5vw, 72px); }
}
@media (max-width: 767.98px) {
  .btn-founder { width: 100%; justify-content: center; }
}

.related-links { margin-top: 48px; }

/* ═══════════════════ FAQ ═══════════════════ */
.faq { background: var(--sand); padding: var(--sec-pad) 0 var(--wave-pad); }
/* FAQ rides Bootstrap Accordion (accordion-flush), themed through --bs-accordion-*.
   Items open independently (no data-bs-parent), matching the old <details> behavior. */
.faq-list {
  --bs-accordion-bg: transparent;
  --bs-accordion-color: var(--ink-mid);
  --bs-accordion-border-width: 0;
  --bs-accordion-border-radius: 0;
  --bs-accordion-inner-border-radius: 0;
  --bs-accordion-btn-color: var(--slate-darker);
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-btn-padding-y: 26px;
  --bs-accordion-btn-padding-x: 0;
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-btn-icon: none;
  --bs-accordion-btn-active-icon: none;
  --bs-accordion-btn-icon-width: auto;
  --bs-accordion-btn-icon-transform: none;
  --bs-accordion-active-bg: transparent;
  --bs-accordion-active-color: var(--slate-darker);
  --bs-accordion-body-padding-y: 0;
  --bs-accordion-body-padding-x: 0;
  max-width: 860px; margin: 0 auto;
}
.faq-item { border-bottom: 1px solid var(--border); }
/* accordion-flush zeroes first/last borders at (0,3,0) · restore the designed rules */
.faq-list .faq-item:first-child { border-top: 1px solid var(--border); }
.faq-list .faq-item:last-child { border-bottom: 1px solid var(--border); }
.faq-q {
  cursor: pointer;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(17px, 1.4vw, 20px); line-height: 1.35;
  padding: 26px 52px 26px 0; position: relative;
}
.faq-q::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-body); font-weight: 400; font-size: 26px; line-height: 1;
  color: var(--seafoam-deep); transition: transform .2s ease;
}
.faq-q:not(.collapsed)::after { content: "\2212"; }
.faq-q:hover { color: var(--seafoam-deep); }
.faq-q:focus-visible { outline: 2px solid var(--seafoam-deep); outline-offset: 4px; border-radius: 4px; }
.faq-a { padding: 0 52px 26px 0; }

/* FAQ page group headers · display-type section breaks between question groups */
.faq-group-head { text-align: center; margin: clamp(80px, 9vw, 120px) auto 28px; max-width: 860px; }
.faq-group-head:first-of-type { margin-top: 48px; }
.faq-group-h {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(22px, 2.2vw, 30px);
  color: var(--slate-darker);
  margin: 0;
}
.faq-group-head .section-divider { margin-top: 18px; }
.faq-group-cta { margin: 34px 0 0; }
/* FAQ page · the closing Keep Going nav needs clear separation from the last group pill */
.faq-group-cta ~ .related-links { margin-top: clamp(96px, 11vw, 150px); }
.faq-a p { font-family: var(--font-body); font-size: 16px; line-height: 1.62; color: var(--ink-mid); margin: 0; }
.faq-a a { color: var(--seafoam-deep); font-weight: 600; text-decoration: none; }
.faq-a a:hover { text-decoration: underline; }
@media (min-width: 992px) { .faq-h { max-width: 16ch; text-wrap: balance; } }

/* Founder portrait · placeholder treatment (real photo pending) */
/* Light pill button for dark bands (blog, etc.) */
.btn-band-light {
  --bs-btn-bg: #fff;
  --bs-btn-border-width: 0;
  letter-spacing: normal;
  --bs-btn-color: var(--slate-deep);
  --bs-btn-border-color: #fff;
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-color: var(--slate-deep);
  --bs-btn-hover-border-color: #fff;
  --bs-btn-active-bg: #fff;
  --bs-btn-active-color: var(--slate-deep);
  --bs-btn-active-border-color: #fff;
  --bs-btn-font-family: var(--font-display);
  --bs-btn-font-weight: 600;
  --bs-btn-font-size: 15px;
  --bs-btn-line-height: var(--body-lh);
  --bs-btn-padding-y: 14px;
  --bs-btn-padding-x: 28px;
  --bs-btn-border-radius: 999px;
  --bs-btn-focus-shadow-rgb: 127, 191, 174;
  display: inline-flex; align-items: center; gap: 8px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.btn-band-light i.ph { transition: transform .25s ease; }
.btn-band-light:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,0.18); }
.btn-band-light:hover i.ph { transform: translateX(3px); }

/* Wavy section divider between headline and paragraph */
.section-divider {
  display: block;
  width: 88px; height: auto;
  margin: 4px auto 26px;
  color: var(--seafoam-deep);
  overflow: visible;
}
/* Left-aligned heads */
@media(min-width: 768px) {
  .founder-body .section-divider,
  .tourism-content .section-divider {
    margin-left: 0;
    margin-right: 0;
  }
}
/* founder head is now the centered section-head above the portrait row · divider stays centered + seafoam */
.founder-head .section-divider { color: var(--seafoam); }
/* Dark bands need a lighter stroke */
.video-head .section-divider,
.founder-body .section-divider { color: var(--seafoam); }

/* ═══════════════════ TYPOGRAPHY NORMALIZATION (consistency pass) ═══════════════════
   SECTION HEAD CONTRACT · every section shares one structure and one rhythm:
     [head wrapper: center · max-width 880px · margin 0 auto clamp(40px,5vw,64px)]
       .kicker          → 12.5px display, 0.22em tracking (normalized below)
       h2 (*-h class)   → display 400 · clamp(--h2-*) · lh 1.02 · ls -0.04em ·
                          margin 0 auto 32px · max-width 16ch · em 600
       .section-divider → 88px wave · 4px/26px margins
       intro            → body font · clamp(17px,1.4vw,20px) · lh 1.55 · 74ch · 40px after
   Only COLOR varies per band (light bands: #fff h2 + --seafoam em).
   Sanctioned variant: split-column heads (founder band) run --h2-side-* sizes. */
/* Kickers · one font (display), one size, one tracking. Color stays per-section. */
.kicker, .hero-kicker, .creds-kicker {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* Section + band lead paragraphs · one body font, one size, one line-height. Color stays per-section. */

/* Card body text · one body font, one size. Color stays per-card. */
.feel-card-body, .tour-card-cap, .blog-card-excerpt, .review-card-body {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.55;
  letter-spacing: -0.01em;
}

/* H2 outliers aligned to the section-headline spec */

/* Secondary pill CTAs · uniform weight */
.tourism-cta { font-weight: 600; }

/* Blog band is dark · kicker needs a light color like the other dark sections */
.blog-teaser .kicker { color: rgba(255,255,255,0.72); }

/* ═══════════════════ CARD IMAGE UNIFORMITY · sitewide ═══════════════════ */
/* Fixed card heights let flexbox compress the image box to fit longer text,
   so image size varied card to card. Image boxes now hold exact 4:3 at card
   width and cards grow instead (min-height keeps the shared baseline). */
.feel-card-img, .tour-card-img, .blog-card-img { flex-shrink: 0; }

/* Links inside light intros on dark bands · body link color is slate,
   invisible on the slate band (phone number in the conversion band) */
.section-intro--light a:hover { color: var(--seafoam); }

/* ═══════════════════ SERVICE SINGLE TEMPLATE ═══════════════════
   Components introduced by services/surgical/zirconia-ceramic-implants.html
   and reused by every service single page. Section heads reuse .feel-h /
   .kicker / .section-divider / .section-intro from the homepage. */

/* Inner-page hero · same slate gradient as the homepage hero, shorter, no video */
/* One consolidated subpage hero: content-sized, no CTA button, not the homepage's full 72vh stage.
   .hero.hero--service outranks .hero.hero--video (both 0,2,0) by coming later in the file.
   .hero--article carries the same treatment (kept as a semantic hook for content pages). */
.hero.hero--service,
.hero.hero--article { min-height: 0; }
.hero--service .hero-inner,
.hero--article .hero-inner { padding: clamp(40px, 4vw, 60px) 0 clamp(84px, 7vw, 108px); }

/* Any page where .article opens right after the hero (blog singles, resources, meridian, philosophy,
   contact): the shared .article top padding was tuned to breathe under a tall hero and leaves a void
   now that heroes are tighter. One rule tightens them all uniformly. */
.hero + .article { padding-top: clamp(44px, 4.5vw, 68px); }

/* Blog-single masthead uses the shared hero header styling (.hero-kicker / .hero-h1 / .hero-sub--lead
   / .hero-trust) with universal copy — identical font, size, and spacing as every other subpage
   header. No custom masthead type. The post title lives below as the article H1. */

/* Comparison band · sand ground, same wave rhythm as the tourism band */
.compare {
  position: relative;
  background: var(--sand);
  padding: var(--wave-gap) 0 var(--wave-pad);
  text-align: center;
}
.compare-wave-top {
  position: absolute;
  bottom: 100%; left: 0; right: 0;
  width: 100%;
  height: clamp(56px, 6vw, 85px);
  color: var(--sand);
  z-index: 2;
  pointer-events: none;
  margin-bottom: -1px;
}
.compare > .container { position: relative; z-index: 3; }
.compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Swipe affordance · only where the table outgrows the viewport and scrolls */
.compare-hint {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
}
.compare-hint i.ph { font-size: 18px; }
.compare-table {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
  text-align: left;
}
.compare-table th,
.compare-table td {
  padding: 16px 22px;
  border-bottom: 1px solid var(--border-soft);
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-mid);
  vertical-align: top;
}
.compare-table thead th {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-darker);
  background: var(--slate-pale);
  border-bottom: 1px solid var(--border);
}
.compare-table tbody th {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--slate-darker);
  width: 22%;
}
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td { border-bottom: 0; }
.compare-table td.is-zirconia { color: var(--slate-darker); font-weight: 500; }
@media (max-width: 767.98px) {
  .compare-table { min-width: 640px; }
  .compare-hint { display: flex; }
}

/* Founder band · top wave for pages where it follows a light section */
.founder { position: relative; }
.founder-wave-top {
  position: absolute;
  bottom: 100%; left: 0; right: 0;
  width: 100%;
  height: clamp(56px, 6vw, 85px);
  color: var(--slate-deep);
  z-index: 2;
  pointer-events: none;
  margin-bottom: -1px;
}
.founder > .container { position: relative; z-index: 3; }

/* Numbered procedure timeline */
.steps {
  position: relative;
  background: #ffffff;
  padding: var(--wave-gap) 0 var(--wave-pad);
}
.steps-wave-top {
  position: absolute;
  bottom: 100%; left: 0; right: 0;
  width: 100%;
  height: clamp(56px, 6vw, 85px);
  color: #ffffff;
  z-index: 2;
  pointer-events: none;
  margin-bottom: -1px;
}
.steps > .container { position: relative; z-index: 3; }
.steps-list {
  list-style: none;
  counter-reset: step;
  max-width: 860px;
  margin: 0 auto;
  padding: 0;
}
.steps-list li {
  counter-increment: step;
  position: relative;
  padding: 0 0 36px 76px;
}
.steps-list li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0; top: -2px;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--slate-deep);
  background: #fff;
  border: 1.5px solid var(--slate-light);
  border-radius: 50%;
}
.steps-list li::after {
  content: '';
  position: absolute;
  left: 26px; top: 54px; bottom: 6px;
  width: 1px;
  background: var(--border);
}
.steps-list li:last-child { padding-bottom: 0; }
.steps-list li:last-child::after { display: none; }
.step-h {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--slate-darker);
  margin: 0 0 8px;
}
.step-body {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-mid);
  margin: 0;
}
/* Note under a steps list (restored after a mount-truncation loss) */
.steps-note {
  text-align: center;
  max-width: 74ch;
  margin: clamp(24px, 3vw, 40px) auto 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-muted);
}

/* ═══════════════════ BAND RHYTHM OVERRIDES ═══════════════════ */
/* Injected by apply_bands() in the generators so no two adjacent light sections
   share a tone. Appended last so they win over each section's default background
   by source order. The wave-top of a flipped section recolors to match its new bg. */
.band--white { background: #ffffff; }
.band--sand  { background: var(--sand); }
.band--white [class*="wave-top"] { color: #ffffff; }
.band--sand  [class*="wave-top"] { color: var(--sand); }

/* ═══════════════════ GRAVITY FORMS · Orbital mirror ═══════════════════ */
/* WordPress: the Orbital theme reads these --gf-* custom properties (brand the form
   with tokens, never selector rewrites). Static mirror: the rules below style the same
   GF classes so the build looks right without the plugin CSS present. */
.gform-theme--orbital {
  --gf-color-primary: var(--seafoam-deep);
  --gf-color-primary-contrast: #ffffff;
  --gf-color-primary-darker: var(--slate-deep);
  --gf-color-in-ctrl: #ffffff;
  --gf-color-in-ctrl-contrast: var(--ink);
  --gf-color-in-ctrl-subtle: var(--border);
  --gf-ctrl-font-family: var(--font-body);
  --gf-ctrl-label-font-family: var(--font-display);
  --gf-ctrl-btn-font-family: var(--font-display);
  --gf-ctrl-font-size: 16px;            /* prevents iOS zoom on focus */
  --gf-ctrl-radius: 6px;
  --gf-ctrl-btn-radius: 999px;          /* pill, matches site buttons */
  --gf-ctrl-min-h: 48px;
  --gf-ctrl-border-color: var(--border);
  --gf-ctrl-border-color-focus: var(--seafoam-deep);
  --gf-ctrl-border-width: 1px;
  --gf-ctrl-border-width-focus: 2px;
  --gf-ctrl-shadow-focus: 0 0 0 3px rgba(127,191,174,0.20);
  --gf-ctrl-label-color-primary: var(--ink-mid);
  --gf-ctrl-label-color-required: var(--seafoam-deep);
  --gf-ctrl-label-text-transform: uppercase;
  --gf-ctrl-label-letter-spacing: 0.18em;
  --gf-ctrl-label-font-weight: 600;
  --gf-form-gap-y: 16px;
}

.gform_validation_container,
.gform_validation_errors,
.gform_ajax_spinner,
.gform_required_legend,
.validation_error {
  display: none;
}

/* Static-mirror styling for GF classes (no plugin theme CSS in the static build) */
.gform_fields { display: flex; flex-wrap: wrap; gap: 16px; list-style: none; margin: 0; padding: 0; }
.gfield { width: 100%; margin: 0; }
.gfield--width-half { width: calc(50% - 8px); }
.gfield--width-third { width: calc((100% - 32px) / 3); }
.gfield--width-quarter { width: calc((100% - 48px) / 4); }
.gfield_label { display: block; font-family: var(--font-display); font-size: 12.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mid); margin: 0 0 6px; }
.gfield_required { color: var(--seafoam-deep); margin-left: 3px; }
.gfield_required_text_screen_reader { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.ginput_container input.large,
.ginput_container select.large,
.ginput_container textarea,
.gfield_select {
  width: 100%; font-family: var(--font-body); font-size: 15px;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 6px;
  background: #fff; color: var(--ink); line-height: 1.4;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.ginput_container textarea { resize: vertical; min-height: 84px; }
/* WordPress: a GF a mező CSS class-t a .gfield wrapperre teszi, a statikus mirrorben az inputon ült */
.gfield.mono .ginput_container input { font-family: var(--font-mono); }
.ginput_container input.large:focus,
.ginput_container select.large:focus,
.ginput_container textarea:focus,
.gfield_select:focus {
  outline: none; border-color: var(--seafoam-deep); box-shadow: 0 0 0 3px rgba(127,191,174,0.20);
}
.gform_footer { margin-top: 20px; padding: 0; }
.gform_wrapper .gform_footer .gform_button { width: 100%; }
/* .gform_button carries .btn/.btn-primary (shared button contract defined above) */
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select { border-color: #c0532b; }
.validation_message { color: #c0532b; font-size: 13px; margin-top: 6px; }

.gform_confirmation_wrapper {
  text-align: center;
  padding: 32px 0;
}

.modal-body .gform_confirmation_wrapper {
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 32px 28px;
}

.gform_confirmation_wrapper h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(var(--h3-min), var(--h3-fluid), var(--h3-max));
  line-height: 1.02;
  letter-spacing: -0.04em;
  margin: 0 auto 18px;
  max-width: 16ch;
  color: var(--slate-darker);
}

.gform_confirmation_wrapper h3 em {
  font-family: inherit;
  font-style: normal;
  font-weight: 600;
  color: var(--seafoam-deep);
}

@media (max-width: 767px) {
  .gform_confirmation_wrapper { font-size: 16px; }
}

.gform_confirmation_wrapper p {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .gfield--width-half, .gfield--width-third, .gfield--width-quarter { width: 100% !important; flex-basis: 100% !important; }
}

/* Wave rhythm · tighter section-break spacing below lg. --wave-pad = --wave-gap + --wave-h,
   so shrinking these two vars pulls the top gap and the bottom pad in together; the wave SVG
   (height hardcoded per-section above) is brought down to the same --wave-h. Placed at EOF so
   both the :root override and the wave-height rule win by source order under this breakpoint. */
@media (max-width: 991.98px) {
  :root {
    --wave-h:   clamp(28px, 3.5vw, 44px);
    --wave-gap: clamp(24px, 4vw, 40px);
    /* + extra bottom room · the wave overlaps --wave-pad so it reads smaller than the top gap */
    --wave-pad: calc(var(--wave-gap) + var(--wave-h) + 22px);
  }
  [class*="wave-top"] { height: var(--wave-h); }
}