/*
Theme Name: SoCal Sinus Institute
Theme URI: https://www.socalsinus.com/
Author: Digital Standout
Description: Custom theme for the Southern California Sinus Institute. Homepage content is managed with Advanced Custom Fields (free) on the page assigned as the static front page.
Version: 1.72.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: socal-sinus
*/
/* Version 1.5.0 — eight inner-page templates (Meet Dr. Cohen, Approach, Center of Excellence, Technology, Awards, Testimonials, Condition, Legal) with shared banner/CTA/marquee parts and per-page ACF fields pre-filled with design copy. */

/* --- Self-hosted fonts (no Google Fonts request) ---------------------------
   Variable woff2 files served from the theme: one file covers every weight a
   family uses (Inter 400-700, Plus Jakarta Sans 500-800). unicode-range keeps
   the latin-ext files from downloading unless the page actually uses such a
   character; latin-ext is declared first so the plain latin rule wins the
   overlapping codepoints. font-display: swap — text paints immediately in the
   fallback and swaps when the file lands. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/inter-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/inter-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('assets/fonts/jakarta-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('assets/fonts/jakarta-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Brand palette — SoCal Sinus Brand Guide v1.0 */
  --navy: #14395C;          /* Institute Navy */
  --sage: #8E9A63;          /* Heritage Sage */
  --clinical-blue: #2F6DA3; /* Clinical Blue */
  --ink: #0B1F33;           /* Deep Ink */
  --sage-deep: #5E6A37;     /* Primary CTA */
  --sage-press: #4A5430;    /* CTA hover / press */
  --gold: #B8862B;          /* Award Gold */
  --clay: #9A3B3B;          /* Alert Clay */
  --mist: #F2F6F9;
  --sky-wash: #DDE8F1;
  --sage-wash: #EDEFE2;
  --border: #D8E0E6;
  --border-light: #E4EAEF;
  /* Form controls only. WCAG 1.4.11 wants the boundary that identifies an input
     to reach 3:1 against what sits next to it; --border is 1.34:1 on white and
     1.27:1 on the #F7FAFC card, so inputs got their own darker edge. This is the
     lightest value that clears 3:1 against BOTH (3.24 and 3.09). Decorative
     borders - cards, dividers, rules - keep --border/--border-light, which the
     same rule does not apply to. */
  --border-field: #7F91A2;
  --slate: #5B6B7A;
  --body-color: #3E5060;
  --sage-tint: #C7D2A9;
  --navy-tint: #C9DCEB;
  /* Sage dark enough for label text on white/mist (4.5:1). The lighter --sage
     stays for fills, rules and badges, where it only needs 3:1 as a graphic. */
  --sage-label: #5E6A37;
  --border-strong: #8FA2B2;  /* form + option borders, 3:1 against white */

  --font-body: 'Inter', system-ui, sans-serif;
  --font-heading: 'Plus Jakarta Sans', sans-serif;

  --container: 1560px;
  --gutter: 40px;
  --radius: 12px;
  --radius-lg: 16px;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

/* The native scrollbar is hidden; a custom square rail on the right edge
   (see .scroll-rail) fills with the accent color as the visitor scrolls. */
html { scrollbar-width: none; }
body::-webkit-scrollbar, html::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ---------- Keyboard focus (WCAG 2.4.7) ----------------------------------
   One visible treatment for every interactive control. :focus-visible so it
   appears for keyboard and assistive tech without ringing every mouse click;
   the double outline keeps it legible on both light and navy surfaces. */
:where(a, button, input, select, textarea, summary, details, [tabindex], .quiz-option, .treatments__tab, .faq-topics a, .cond-carousel__btn):focus-visible {
  outline: 3px solid var(--sage-label);
  outline-offset: 2px;
  border-radius: 4px;
}
/* On navy/ink grounds the sage outline goes muddy — use white there. */
:where(.site-footer, .page-banner, .page-cta, .contact-card, .section-dark, .lp-closing, .lp-reviews, .quiz-modal__head, .mobile-bar) :where(a, button, input, textarea, [tabindex]):focus-visible {
  outline-color: #fff;
}
/* Browsers that lack :focus-visible still get a ring from :focus. */
@supports not selector(:focus-visible) {
  a:focus, button:focus, input:focus, select:focus, textarea:focus, summary:focus, [tabindex]:focus {
    outline: 3px solid var(--sage-label); outline-offset: 2px;
  }
}
/* The skip-link target itself should not draw a ring when focused by script. */
#scs-main:focus, #scs-main:focus-visible { outline: none; }

/* ---------- Skip link (WCAG 2.4.1) ---------- */
.skip-link {
  position: absolute; left: 12px; top: -200px; z-index: 200;
  background: var(--navy); color: #fff;
  font-family: var(--font-body); font-weight: 700; font-size: 15px;
  padding: 14px 20px; border-radius: 0 0 var(--radius) var(--radius);
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0; color: #fff; }

body {
  margin: 0;
  background: var(--mist);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--clinical-blue); text-decoration: none; }
a:hover { color: var(--sage-deep); }

img { max-width: 100%; height: auto; }

h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--navy); margin: 0; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; overflow: hidden;
  padding: 0; position: absolute; word-wrap: normal !important;
}

/* ---------- Shared elements ---------- */

.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-size: 15px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sage-label);
}
.eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--sage); }
.eyebrow--centered { justify-content: center; }
.eyebrow--centered::after { content: ""; width: 34px; height: 2px; background: var(--sage); }
.eyebrow--dark { color: var(--sage-tint); }
.eyebrow--deep { color: var(--sage-deep); }

.section-heading {
  font-weight: 800; font-size: 46px; line-height: 1.06;
  letter-spacing: -0.026em; color: var(--navy);
}

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-weight: 700; font-size: 15px;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 18px 30px; border-radius: var(--radius);
  border: none; cursor: pointer; white-space: nowrap;
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.28s ease, background 0.2s ease, color 0.2s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(11,31,51,0.18); }
.btn:active { transform: translateY(0); box-shadow: 0 6px 14px rgba(11,31,51,0.16); }
.btn--sage { background: var(--sage-deep); color: #fff; }
.btn--sage:hover { background: var(--sage-press); color: #fff; }
.btn--outline { background: rgba(255,255,255,0.72); color: var(--navy); border: 1.5px solid var(--navy); }
.btn--outline:hover { background: #fff; color: var(--navy); }
.btn--outline-plain { background: #fff; color: var(--navy); border: 1.5px solid var(--navy); }
.btn--outline-plain:hover { background: var(--mist); color: var(--navy); }
.btn--navy { background: var(--navy); color: #fff; letter-spacing: 0.08em; padding: 15px 24px; }
.btn--navy:hover { background: var(--ink); color: #fff; }
.btn--sage-light { background: var(--sage); color: var(--ink); padding: 15px 24px; }
.btn--sage-light:hover { background: var(--sage-tint); color: var(--ink); }
/* Region link colours (.site-footer a, .lp-footer a, .prose a) are more
   specific than .btn alone, so they were repainting the sage button's label
   light-on-light — 2.15:1. Pin the button's own colour in those contexts. */
.site-footer a.btn--sage-light,
.lp-footer a.btn--sage-light,
.prose a.btn--sage-light,
.contact-card a.btn--sage-light { color: var(--ink); }
.btn .arrow { display: inline-block; font-size: 16px; transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1); }
.btn:hover .arrow { transform: translateX(5px); }

/* In-copy references (e.g. "Dr. Alen Cohen" → bio page) — Clinical Blue on any background. */
.inline-link { color: var(--clinical-blue); font-weight: 600; }
.inline-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.text-link { font-weight: 600; font-size: 16px; white-space: nowrap; position: relative; }
.text-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.text-link:hover::after { transform: scaleX(1); }

/* Reveal-on-scroll */
@keyframes riseIn { from { opacity: 0; transform: translate3d(0, 26px, 0); } to { opacity: 1; transform: none; } }
@keyframes wipeIn { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
[data-reveal] { opacity: 0; }
/* Already on screen at first paint: visible immediately, never animated. */
[data-reveal].is-shown { opacity: 1; animation: none; }
/* The hero is the first thing on screen — it is never animated in. */
.hero [data-reveal], .hero[data-reveal], .page-banner [data-reveal] { opacity: 1 !important; animation: none !important; }
[data-reveal].is-in { animation: riseIn 0.8s cubic-bezier(0.16, 0.84, 0.28, 1) both; }
[data-reveal].is-in[data-reveal-delay="1"] { animation-delay: 0.1s; }
[data-reveal].is-in[data-reveal-delay="2"] { animation-delay: 0.2s; }
[data-reveal].is-in[data-reveal-delay="3"] { animation-delay: 0.3s; }
[data-reveal].is-in[data-reveal-delay="4"] { animation-delay: 0.4s; }
[data-reveal="wipe"].is-in { animation: wipeIn 0.95s cubic-bezier(0.16, 0.84, 0.28, 1) both; opacity: 1; }
.no-js [data-reveal] { opacity: 1; }

/* Page-load entrance animations — desktop only. Phones, tablets and small
   laptops paint everything at once: fading the header and hero in on a slower
   device reads as the page still loading, and the animation work lands right
   in the middle of LCP. Matches the 1025px gate main.js uses for reveals. */
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
  .hero__eyebrow, .hero__heading, .hero__text, .hero__ctas {
    opacity: 0;
    animation: riseIn 0.9s cubic-bezier(0.16, 0.84, 0.28, 1) both;
  }
  .hero__eyebrow { animation-delay: 0.15s; }
  .hero__heading { animation-delay: 0.28s; }
  .hero__text { animation-delay: 0.42s; }
  .hero__ctas { animation-delay: 0.56s; }
  .breath-badge { opacity: 0; animation: awFade 1.1s ease 0.85s both; }
  .site-header__inner { opacity: 0; animation: awFade 0.7s ease 0.1s both; }
}

/* Phones and tablets: content is always visible, no entrance animations. */
@media (max-width: 1024px) {
  [data-reveal] { opacity: 1 !important; animation: none !important; }
}

/* ---------- Progress bar & header ---------- */

.read-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 60;
  background: rgba(20,57,92,0.08); pointer-events: none;
}
.read-progress__bar {
  width: 0; height: 100%; border-radius: 0;
  background: var(--sage-deep);
  transition: width 0.12s linear;
}

/* Custom scrollbar: a thin square rail that fills top-down with the accent
   color as the page scrolls (replaces the native scrollbar, no arrows). */
.scroll-rail {
  position: fixed; top: 0; right: 0; bottom: 0; width: 5px; z-index: 70;
  background: rgba(20,57,92,0.08);
  cursor: pointer;
}
.scroll-rail__fill {
  width: 100%; height: 0; border-radius: 0;
  background: var(--sage-deep);
  transition: height 0.12s linear;
}
.scroll-rail.is-dragging .scroll-rail__fill { transition: none; }
@media (max-width: 720px) {
  .scroll-rail { display: none; }
}

.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(255,255,255,0.10);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  border-bottom: 1px solid rgba(255,255,255,0.22);
  transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.site-header.is-scrolled {
  background: #fff;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(216,224,230,0.8);
  box-shadow: 0 6px 26px rgba(11,31,51,0.08);
}
.site-header__inner {
  max-width: var(--container); margin: 0 auto; padding: 14px var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px 24px; flex-wrap: wrap;
}
.site-header__logo img {
  height: 64px; width: auto; display: block;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.site-header__logo:hover img { transform: scale(1.03); }
.site-header__nav {
  display: flex; align-items: center; gap: 18px 26px;
  font-size: 15px; font-weight: 500;
}
.site-header__nav ul { display: contents; list-style: none; margin: 0; padding: 0; }
.site-header__nav a { color: var(--navy); transition: color 0.22s ease; }
.site-header__nav a:hover { color: var(--ink); }
.site-header__nav li { position: relative; }

/* Dropdown menus (WP sub-menus, hover or keyboard focus) */
.site-header__nav .scs-nav-heading > .scs-nav-heading__label::after { content: none; }
.site-header__nav .menu-item-has-children > a::after {
  content: "▾"; margin-left: 6px; font-size: 11px; color: var(--slate);
  display: inline-block; transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1), color 0.2s ease;
}
.site-header__nav li:hover > a::after,
.site-header__nav li:focus-within > a::after { transform: translateY(2px); color: var(--navy); }
.site-header__nav .sub-menu {
  display: block; position: absolute; top: calc(100% + 14px); left: -18px; z-index: 60;
  min-width: 260px; padding: 10px; margin: 0; list-style: none;
  background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius);
  box-shadow: 0 18px 44px rgba(11,31,51,0.14);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  /* No invisible hover-bridge element: closing is just delayed (not spatial),
     so real mouse transit from the link into the panel has a moment's grace
     without any extra hoverable area existing anywhere. Opening (the
     li:hover/:focus-within rule below) overrides this delay back to 0. */
  transition: opacity 0.2s ease 0.28s, transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1) 0.28s, visibility 0s linear 0.28s;
}
.site-header__nav li:hover > .sub-menu,
.site-header__nav li:focus-within > .sub-menu {
  opacity: 1; visibility: visible; transform: none;
  transition-delay: 0s;
}
.site-header__nav .sub-menu li { display: block; }
.site-header__nav .sub-menu a {
  display: block; padding: 11px 16px; border-radius: 8px;
  font-size: 15px; font-weight: 500; color: var(--navy); white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, padding-left 0.2s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.site-header__nav .sub-menu a::after { content: none; }
.site-header__nav .sub-menu a:hover { background: var(--mist); color: var(--sage-deep); padding-left: 20px; }
/* Category headings built as "#" custom links are labels, not destinations (desktop panel + drawer). */
.site-header__nav .scs-nav-heading__label { display: block; cursor: default; }

/* Desktop-only dropdown layouts (the collapsed drawer below 1280px keeps single-column lists). */
@media (min-width: 1281px) {
/* Large flat dropdowns (6+ links, no groups) flow into two columns split by a thin divider. */
.site-header__nav > ul > li > .sub-menu:not(:has(.menu-item-has-children)):has(li:nth-child(6)) {
  columns: 2; column-gap: 34px; column-rule: 1px solid var(--border-light);
  padding: 14px 22px; min-width: 0; width: max-content; max-width: calc(100vw - 48px);
  /* Centered under the header like the grouped mega panels, instead of
     anchored to the item's edge. Edge-anchoring pushed the About panel past
     the LEFT of the viewport on smaller laptops (About sits by the logo, and
     its panel hung leftward from it). Centering is the one placement that can
     never clip at either side, and it matches how Conditions/Treatments open. */
  top: calc(100% + 8px); left: 50%; right: auto;
  transform: translate(-50%, 10px);
}
.site-header__nav > ul > li:has(> .sub-menu:not(:has(.menu-item-has-children)):has(li:nth-child(6))) { position: static; }
/* The last item's plain dropdown hangs rightward by default and clipped the
   viewport on smaller laptops — anchor it to the item's right edge instead. */
.site-header__nav > ul > li:last-child > .sub-menu:not(:has(.menu-item-has-children)):not(:has(li:nth-child(6))) {
  left: auto; right: -18px;
}
.site-header__nav > ul > li:hover > .sub-menu:not(:has(.menu-item-has-children)):has(li:nth-child(6)),
.site-header__nav > ul > li:focus-within > .sub-menu:not(:has(.menu-item-has-children)):has(li:nth-child(6)) {
  transform: translate(-50%, 0);
}
.site-header__nav > ul > li > .sub-menu:not(:has(.menu-item-has-children)):has(li:nth-child(6)) li { break-inside: avoid; }
.site-header__nav > ul > li > .sub-menu:not(:has(.menu-item-has-children)):has(li:nth-child(6)) a { padding-left: 6px; padding-right: 18px; }

/* Grouped mega panel (three-level menus, e.g. Conditions / Treatments): one column
   per group; the middle-level item renders as a sage uppercase heading. The wide
   panel escapes its item (position: static) and centers under the header, so it
   can't clip at either viewport edge. */
.site-header__nav > ul > li:has(.sub-menu .menu-item-has-children) { position: static; }
.site-header__nav > ul > li > .sub-menu:has(.menu-item-has-children) {
  display: flex; flex-wrap: wrap; gap: 24px 40px;
  padding: 24px 28px; min-width: 0; width: max-content; max-width: calc(100vw - 48px);
  top: calc(100% + 8px); left: 50%; right: auto;
  transform: translate(-50%, 10px);
}
.site-header__nav > ul > li:hover > .sub-menu:has(.menu-item-has-children),
.site-header__nav > ul > li:focus-within > .sub-menu:has(.menu-item-has-children) {
  transform: translate(-50%, 0);
}
.site-header__nav .sub-menu > .menu-item-has-children { display: flex; flex-direction: column; min-width: 216px; flex: 0 1 auto; }
.site-header__nav .sub-menu > .menu-item-has-children > .scs-nav-heading__label,
.site-header__nav .sub-menu > .menu-item-has-children > a,
.site-header__nav .sub-menu > .menu-item-has-children > a:hover {
  padding: 0 0 8px; margin: 0 0 6px; border-bottom: 1px solid #EDF1F5; border-radius: 0;
  background: none; font-size: 15px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--sage-label); white-space: nowrap;
}
.site-header__nav .sub-menu .sub-menu {
  /* visibility must be `inherit`, never `visible`: a descendant can re-show
     itself inside a hidden ancestor, which made the closed mega panel's
     columns an invisible hover target floating over the page banner
     (opacity:0 hides them visually but not from hit-testing). */
  position: static; opacity: 1; visibility: inherit; transform: none; transition: none;
  min-width: 0; width: auto; padding: 0; border: none; border-radius: 0; box-shadow: none;
}
.site-header__nav .sub-menu .sub-menu li + li { border-top: 1px solid #EDF1F5; }
.site-header__nav .sub-menu .sub-menu a { padding: 9px 4px; border-radius: 0; }
.site-header__nav .sub-menu .sub-menu a:hover { background: none; padding-left: 10px; }
}
.site-header__actions { display: flex; align-items: center; gap: 16px; }
.site-header__phone {
  font-family: var(--font-heading); font-weight: 800; font-size: 15px;
  color: var(--navy); white-space: nowrap;
}
.site-header__cta {
  display: inline-flex; align-items: center; background: var(--sage-deep); color: #fff;
  font-weight: 700; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 13px 24px; border-radius: var(--radius); white-space: nowrap;
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.28s ease, background 0.2s ease;
}
.site-header__cta:hover { background: var(--sage-press); color: #fff; transform: translateY(-2px); box-shadow: 0 14px 28px rgba(11,31,51,0.18); }

/* Narrow desktops: keep the header on one row.
   At 1363px the logo, nav and actions wanted about 1311px inside a 1265px
   content box, so the phone and Contact Us button dropped to a second row.
   That made the header 159px tall, left a band of empty space beside the logo,
   and pushed every anchored section further down the page. Trimming the logo,
   the nav spacing and the button padding buys back the ~50px needed, down to
   1080px where the burger menu takes over anyway. */
@media (min-width: 1081px) and (max-width: 1400px) {
  .site-header__inner { gap: 12px 16px; }
  .site-header__logo img { height: 54px; }
  .site-header__nav { gap: 14px 17px; font-size: 14.5px; }
  .site-header__actions { gap: 12px; }
  .site-header__phone { font-size: 14.5px; }
  .site-header__cta { font-size: 14px; padding: 12px 18px; letter-spacing: 0.06em; }
}

/* Mobile-only header pieces (see the 720px block). */
.site-header__phone-icon { display: none; }
.site-header__nav-cta { display: none; }

.menu-toggle { display: none; }

/* ---------- Hero ---------- */

.hero { position: relative; overflow: hidden; background: #ECF3F8; }
.hero__bg {
  position: absolute; inset: -2%;
  background-position: 50% 46%; background-size: cover; background-repeat: no-repeat;
  animation: heroBreathe 22s cubic-bezier(0.37, 0, 0.63, 1) infinite;
  pointer-events: none;
}
.hero__glow {
  position: absolute; top: 12%; left: 6%; width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(199,210,169,0.28), rgba(199,210,169,0) 68%);
  animation: glowBreathe 11s cubic-bezier(0.37, 0, 0.63, 1) infinite;
  pointer-events: none;
}
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(236,243,248,0.94) 0%, rgba(236,243,248,0.78) 32%, rgba(236,243,248,0.34) 50%, rgba(236,243,248,0) 64%);
  pointer-events: none;
}
.hero__inner {
  max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter);
  position: relative; min-height: max(680px, 92vh);
  display: flex; align-items: center; flex-wrap: wrap; gap: 24px 40px;
}
.hero__content {
  flex: 1 1 520px; max-width: 640px; min-width: 0;
  display: flex; flex-direction: column; gap: 28px; padding: 120px 0 72px;
}
.hero__eyebrow {
  font-size: 15px; font-weight: 700; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--sage-deep);
}
.hero__heading {
  font-weight: 700; font-size: 78px; line-height: 1.04;
  letter-spacing: -0.03em; color: var(--navy);
}
.hero__heading .accent { color: var(--sage-deep); }
.hero__text { font-size: 20px; line-height: 1.5; color: var(--body-color); margin: 0; max-width: 42ch; text-wrap: pretty; }
.hero__ctas { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hero__ctas .btn--sage { padding: 19px 30px; box-shadow: 0 14px 30px rgba(94,106,55,0.28); }

@keyframes heroBreathe { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.03); } }
@keyframes glowBreathe { 0%, 100% { transform: scale(0.93); opacity: 0.45; } 45% { transform: scale(1.07); opacity: 0.95; } }
@keyframes breathRing { 0%, 100% { transform: scale(0.72); opacity: 0.5; } 45% { transform: scale(1); opacity: 1; } 55% { transform: scale(1); opacity: 1; } }
@keyframes breathCore { 0%, 100% { transform: scale(0.6); opacity: 0.45; } 45%, 55% { transform: scale(1); opacity: 1; } }
@keyframes breathTrace {
  0% { stroke-dashoffset: 515; opacity: 0.25; }
  45% { stroke-dashoffset: 0; opacity: 0.7; }
  55% { stroke-dashoffset: 0; opacity: 0.7; }
  100% { stroke-dashoffset: -515; opacity: 0.25; }
}
@keyframes breathLabelIn { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes breathLabelOut { 0%, 49% { opacity: 0; } 50%, 100% { opacity: 1; } }

.breath-badge {
  flex: 0 0 auto; margin-left: auto; align-self: center;
  position: relative; width: 214px; height: 214px;
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.breath-badge__ring-outer {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(142,154,99,0.24);
  animation: breathRing 11s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}
.breath-badge__ring-inner {
  position: absolute; inset: 26px; border-radius: 50%;
  border: 1.5px solid rgba(142,154,99,0.5);
  animation: breathRing 11s cubic-bezier(0.37, 0, 0.63, 1) 0.3s infinite;
}
.breath-badge__core {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.86), rgba(255,255,255,0.5) 62%, rgba(255,255,255,0) 78%);
  animation: breathCore 11s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}
.breath-badge svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.breath-badge circle { animation: breathTrace 11s cubic-bezier(0.37, 0, 0.63, 1) infinite; }
.breath-badge__labels {
  position: relative; height: 15px; font-size: 15px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--sage-press);
}
.breath-badge__labels span { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.breath-badge__labels span:first-child { animation: breathLabelIn 11s steps(1, end) infinite; }
.breath-badge__labels span:last-child { animation: breathLabelOut 11s steps(1, end) infinite; }
.breath-badge__content { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 26px; }
.breath-badge__cta {
  font-family: var(--font-heading); font-weight: 700; font-size: 15px;
  line-height: 1.35; letter-spacing: -0.005em; color: var(--navy); text-wrap: pretty;
}

/* ---------- Trust bar & awards band ---------- */

.trust-bar { background: #fff; border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); }
.trust-bar__inner {
  max-width: var(--container); margin: 0 auto; padding: 26px var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px 32px; flex-wrap: wrap;
}
.trust-bar__stat { display: flex; flex-direction: column; gap: 2px; white-space: nowrap; flex: none; }
.trust-bar__stat strong {
  font-family: var(--font-heading); font-weight: 800; font-size: 21px;
  color: var(--navy); letter-spacing: -0.01em;
}
.trust-bar__stat span { font-size: 15px; color: var(--slate); }
.trust-bar__divider { width: 1px; height: 44px; background: var(--border-light); flex: none; }
.rating-chip { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; flex: none; }
.rating-chip strong {
  font-family: var(--font-heading); font-weight: 800; font-size: 21px;
  color: var(--gold); font-variant-numeric: tabular-nums;
}
.rating-chip span { font-size: 15px; color: var(--slate); }

.awards-band { background: #fff; border-bottom: 1px solid var(--border-light); }
.awards-band__inner {
  max-width: var(--container); margin: 0 auto; padding: 28px var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px 32px; flex-wrap: wrap;
}
.awards-band__label {
  font-size: 15px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sage-label); white-space: nowrap; flex: none;
}
.awards-band__divider { width: 1px; height: 52px; background: var(--border-light); flex: none; }
@keyframes awFade { from { opacity: 0; } to { opacity: 1; } }
.awards-band__item { display: flex; align-items: center; gap: 14px; white-space: nowrap; flex: none; animation: awFade 0.7s ease; }
.awards-band__item.is-hidden { display: none; }
.awards-band__logo { width: 100px; height: 72px; flex: none; background-position: center; background-size: contain; background-repeat: no-repeat; }
.awards-band__meta { font-size: 15px; line-height: 1.4; color: var(--body-color); }
.awards-band__meta strong { color: var(--ink); font-weight: 600; display: block; }
.awards-band .rating-chip strong { font-size: 22px; }

/* ---------- Video section ---------- */

.video-section { background: #fff; border-bottom: 1px solid var(--border-light); }
.video-section__inner {
  max-width: var(--container); margin: 0 auto; padding: 104px var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 80px; align-items: center;
}
.framed { position: relative; }
.framed::before {
  content: ""; position: absolute; top: 24px; left: -24px; right: 24px; bottom: -24px;
  border: 2px solid var(--sage-tint); border-radius: 20px; pointer-events: none;
}
.video-frame { position: relative; height: 440px; border-radius: var(--radius-lg); overflow: hidden; }
.video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-frame__poster {
  position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: none;
  background: var(--ink); cursor: pointer; display: block;
}
.video-frame__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }
.video-frame__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,31,51,0) 40%, rgba(11,31,51,0.55) 100%); }
.video-frame__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 88px; height: 88px; border-radius: 50%; background: rgba(255,255,255,0.94);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 16px 40px rgba(11,31,51,0.34);
}
.video-frame__play span { color: var(--navy); font-size: 26px; margin-left: 5px; }
.video-frame__logo {
  position: absolute; bottom: 22px; left: 26px; height: 58px; width: auto;
  max-width: 62%; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.96;
}
.video-section__copy { display: flex; flex-direction: column; gap: 20px; }
.video-section__copy h2 { font-size: 44px; font-weight: 800; line-height: 1.06; letter-spacing: -0.026em; }
.video-section__copy p { font-size: 17px; line-height: 1.62; color: var(--body-color); margin: 0; text-wrap: pretty; }

/* ---------- Treatments ---------- */

.treatments { background: var(--mist); }
.treatments__inner {
  max-width: var(--container); margin: 0 auto; padding: 104px var(--gutter);
  display: flex; flex-direction: column; gap: 36px;
}
.treatments__header { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.treatments__tabs {
  display: flex; justify-content: center; gap: 12px 40px; flex-wrap: wrap;
  border-bottom: 1px solid rgba(20,57,92,0.12);
}
.treatments__tab {
  font-family: var(--font-heading); font-weight: 600; font-size: 17px;
  padding: 14px 4px 16px; background: none; border: none; cursor: pointer;
  color: var(--slate); border-bottom: 3px solid transparent; margin-bottom: -1px;
  transition: color 0.2s ease, transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.treatments__tab:hover { transform: translateY(-2px); }
.treatments__tab.is-active { color: var(--navy); border-bottom-color: var(--sage); }
.treatments__panels { background: #fff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 24px 60px rgba(11,31,51,0.08); }
.treatments__panel { display: none; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: stretch; }
.treatments__panel.is-active { display: grid; }
.treatments__panel-copy {
  padding: 80px 72px; display: flex; flex-direction: column;
  justify-content: center; align-items: flex-start; gap: 22px;
}
.treatments__panel-copy h3 { font-weight: 700; font-size: 38px; line-height: 1.1; letter-spacing: -0.02em; }
.treatments__panel-copy p { font-size: 17px; line-height: 1.65; color: var(--body-color); margin: 0; max-width: 52ch; text-wrap: pretty; }
.treatments__panel-actions {
  display: grid; grid-template-columns: minmax(0, auto);
  justify-items: stretch; gap: 14px; margin-top: 8px;
}
.treatments__panel-actions .btn { justify-content: center; }
.treatments__panel-media { min-height: 520px; background: var(--sky-wash); }
.treatments__panel-media img { width: 100%; height: 100%; min-height: 520px; object-fit: cover; display: block; }
.treatments__panel-media .placeholder {
  display: flex; align-items: center; justify-content: center; height: 100%;
  min-height: 520px; color: var(--slate); font-size: 15px;
}
.treatments__more { text-align: center; }

/* ---------- About ---------- */

.about { background: #fff; }
.about__inner { max-width: var(--container); margin: 0 auto; padding: 104px var(--gutter); }
.about__grid {
  display: grid; grid-template-columns: minmax(0, 580px) minmax(0, 1fr);
  gap: 64px; align-items: center;
}
.about__media { position: relative; }
.about__media::before {
  content: ""; position: absolute; top: 24px; left: -24px; right: 24px; bottom: -24px;
  border: 2px solid var(--sage-tint); border-radius: 20px; pointer-events: none;
}
.about__stamp {
  position: absolute; z-index: 2; top: -44px; right: -44px; width: 150px; height: auto;
  mix-blend-mode: multiply; pointer-events: none;
}
.about__photo {
  position: relative; z-index: 1; width: 100%; height: 700px; object-fit: cover;
  object-position: 50% 18%; border-radius: var(--radius-lg); display: block;
  box-shadow: 0 30px 70px rgba(11,31,51,0.18);
}
.about__namecard {
  position: absolute; z-index: 2; bottom: 20px; left: 20px; right: 20px;
  background: rgba(255,255,255,0.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-radius: 14px; padding: 16px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.about__namecard-name { font-family: var(--font-heading); font-weight: 800; font-size: 16px; color: var(--navy); }
.about__namecard-role { font-size: 15px; color: var(--slate); margin-top: 2px; }
.about__namecard-rating { font-family: var(--font-heading); font-weight: 800; font-size: 20px; color: var(--gold); white-space: nowrap; }
.about__copy { display: flex; flex-direction: column; gap: 22px; }
.about__copy p { font-size: 18px; line-height: 1.6; color: var(--body-color); margin: 0; text-wrap: pretty; }
.about__affiliations {
  display: flex; flex-wrap: wrap; align-items: center; gap: 24px 36px;
  padding: 8px 0; width: 100%;
}
.about__affiliations img { max-height: 62px; width: auto; height: auto; object-fit: contain; display: block; }

/* ---------- Why choose us ---------- */

.why-us {
  background: linear-gradient(118deg, #0B1F33 0%, #14395C 46%, #2A4A45 78%, #3E5340 100%);
  position: relative; overflow: hidden;
}
.swoosh {
  position: absolute; pointer-events: none;
  -webkit-mask-image: url(assets/img/swoosh-mask.png); mask-image: url(assets/img/swoosh-mask.png);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.why-us .swoosh { top: -140px; right: -170px; width: 700px; height: 658px; background: #fff; opacity: 0.05; }
.why-us__inner {
  max-width: var(--container); margin: 0 auto; padding: 104px var(--gutter);
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 72px; align-items: start;
}
.why-us__intro { display: flex; flex-direction: column; gap: 22px; }
.why-us__intro h2 { font-size: 44px; font-weight: 800; line-height: 1.06; letter-spacing: -0.026em; color: #fff; }
.why-us__intro p { font-size: 17px; line-height: 1.6; color: #D5E3EE; margin: 0; text-wrap: pretty; }
.why-us__badge { background: #fff; border-radius: 14px; padding: 22px 28px; display: inline-flex; width: fit-content; }
.why-us__badge img { height: 58px; width: auto; display: block; }
.why-us__list { display: flex; flex-direction: column; }
.why-us__item { display: flex; gap: 18px; padding: 22px 0; border-top: 1px solid rgba(255,255,255,0.18); }
.why-us__item:last-child { padding-bottom: 0; }
.why-us__item::before { content: ""; width: 9px; height: 9px; background: var(--sage-tint); border-radius: 2px; margin-top: 8px; flex: none; }
.why-us__item-title { font-family: var(--font-heading); font-weight: 700; font-size: 20px; color: #fff; }
.why-us__item-text { font-size: 15px; line-height: 1.55; color: #D5E3EE; margin-top: 6px; }

/* ---------- Testimonials ---------- */

.testimonials { background: #fff; }
.testimonials__inner {
  max-width: var(--container); margin: 0 auto; padding: 104px var(--gutter);
  display: flex; flex-direction: column; gap: 40px;
}
.testimonials__header { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.testimonials__header h2 span { display: block; white-space: nowrap; }
.testimonials__widget {
  min-height: 340px;
  /* Breaks out past the container so the review cards get room to breathe —
     the widget lays its cards out on its own width, so the wider the host, the
     more of each review is readable before it truncates. */
  width: calc(100vw - 32px);
  max-width: 1840px;
  margin-left: 50%; transform: translateX(-50%);
}
.testimonials__more { display: flex; justify-content: center; }

/* ---------- Blog ---------- */

.blog-section { background: var(--mist); }
.blog-section__inner {
  max-width: var(--container); margin: 0 auto; padding: 104px var(--gutter);
  display: flex; flex-direction: column; gap: 44px;
}
.blog-section__header {
  display: flex; align-items: end; justify-content: space-between; gap: 32px;
  flex-wrap: wrap; border-bottom: 1px solid #C6D4E0; padding-bottom: 22px;
}
.blog-section__header-copy { display: flex; flex-direction: column; gap: 14px; }
.blog-section__header h2 { font-size: 44px; font-weight: 800; line-height: 1.06; letter-spacing: -0.026em; }
.blog-section__grid {
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: 56px; align-items: stretch;
}
.blog-card {
  color: inherit; background: #fff; border: 1px solid #DCE4EB; border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(11,31,51,0.05);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.35s ease, border-color 0.25s ease;
}
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 22px 46px rgba(11,31,51,0.12); border-color: var(--sage-tint); color: inherit; }
.blog-card__zoom { display: block; overflow: hidden; }
.blog-card__zoom img { transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.3, 1); }
.blog-card:hover .blog-card__zoom img { transform: scale(1.045); }
.blog-card--featured {
  display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 32px; align-items: center; height: 100%; padding: 24px;
}
.blog-card--featured .blog-card__zoom { position: relative; aspect-ratio: 1 / 1; width: 100%; border-radius: 14px; }
.blog-card--featured .blog-card__zoom img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card__flag {
  position: absolute; top: 16px; left: 16px; background: var(--navy); color: #fff;
  font-size: 15px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 8px 14px; border-radius: 8px;
}
.blog-card__body { display: flex; flex-direction: column; gap: 14px; }
.blog-card__meta { font-size: 15px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); }
.blog-card--featured .blog-card__title {
  font-family: var(--font-heading); font-weight: 800; font-size: 32px; line-height: 1.14;
  letter-spacing: -0.022em; color: var(--ink); text-wrap: pretty;
}
.blog-card__excerpt { font-size: 16px; line-height: 1.6; color: var(--body-color); text-wrap: pretty; }
.blog-card__readmore { display: flex; align-items: center; gap: 12px; padding-top: 6px; }
.blog-card__readmore::before { content: ""; width: 34px; height: 1px; background: var(--sage); }
.blog-card__readmore span { font-size: 15px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sage-deep); }
.blog-section__stack { display: flex; flex-direction: column; height: 100%; gap: 28px; }
.blog-card--row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 168px);
  gap: 24px; align-items: center; flex: 1 1 auto; padding: 24px;
}
.blog-card--row .blog-card__body { gap: 10px; min-width: 0; }
.blog-card--row .blog-card__title {
  font-family: var(--font-heading); font-weight: 700; font-size: 26px; line-height: 1.22;
  letter-spacing: -0.015em; color: var(--ink); text-wrap: pretty;
}
.blog-card--row .blog-card__excerpt { font-size: 15px; line-height: 1.55; }
.blog-card--row .blog-card__zoom { height: 124px; border-radius: var(--radius); }
.blog-card--row .blog-card__zoom img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Conditions ---------- */

.conditions { background: #fff; position: relative; overflow: hidden; }
.conditions .swoosh { bottom: -240px; left: -200px; width: 720px; height: 677px; background: var(--sage); opacity: 0.1; }
.conditions__inner {
  max-width: var(--container); margin: 0 auto; padding: 104px var(--gutter);
  display: flex; flex-direction: column; gap: 40px; position: relative;
}
.conditions__header {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 16px; max-width: 58ch; margin: 0 auto;
}
.conditions__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.condition-chip {
  background: #fff; border: 1px solid var(--border-light); color: var(--navy);
  font-weight: 500; font-size: 15px; padding: 17px 14px; border-radius: var(--radius);
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.25s ease, border-color 0.2s ease;
}
.condition-chip:hover {
  transform: translateY(-3px); box-shadow: 0 12px 26px rgba(11,31,51,0.1);
  border-color: var(--sage-deep); color: var(--sage-deep);
}
/* The blurb, "Learn more" link and prev/next controls only appear in the
   mobile carousel; on desktop each condition stays a single-line chip. */
.condition-chip__blurb,
.condition-chip__more,
.conditions__nav { display: none; }
.conditions__more { display: flex; justify-content: center; }

/* ---------- Balloon CTA / stats ---------- */

.balloon-cta { background: var(--mist); position: relative; overflow: hidden; }
.balloon-cta .swoosh { top: -90px; right: -150px; width: 660px; height: 620px; background: var(--navy); opacity: 0.1; }
.balloon-cta__inner {
  max-width: var(--container); margin: 0 auto; padding: 104px var(--gutter);
  position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 72px; align-items: center;
}
.balloon-cta__copy { display: flex; flex-direction: column; gap: 22px; }
.balloon-cta__copy h2 { font-size: 44px; font-weight: 800; line-height: 1.06; letter-spacing: -0.026em; }
.balloon-cta__copy p { font-size: 17px; line-height: 1.6; color: var(--body-color); margin: 0; max-width: 56ch; text-wrap: pretty; }
.balloon-cta__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.balloon-cta__phone { font-family: var(--font-heading); font-weight: 800; font-size: 24px; color: var(--navy); white-space: nowrap; }
.balloon-cta__phone:hover { color: var(--sage-deep); }
.stat-rows { display: flex; flex-direction: column; }
.stat-row {
  padding: 22px 0; border-top: 1px solid rgba(20,57,92,0.16);
  display: flex; align-items: baseline; gap: 18px;
  transition: background 0.3s ease, padding-left 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.stat-row:hover { background: rgba(20,57,92,0.04); padding-left: 12px; }
.stat-row:last-child { border-bottom: 1px solid rgba(20,57,92,0.16); }
.stat-row strong {
  font-family: var(--font-heading); font-weight: 800; font-size: 30px;
  color: var(--navy); flex: none; font-variant-numeric: tabular-nums;
}
.stat-row span { font-size: 15px; line-height: 1.5; color: var(--body-color); }

/* ---------- Insurance ---------- */

.insurance {
  background: #fff; border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light); position: relative; overflow: hidden;
}
.insurance__dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(20,57,92,0.16) 1.4px, rgba(20,57,92,0) 1.5px);
  background-size: 22px 22px; pointer-events: none;
}
.insurance .swoosh { top: -160px; left: 8%; width: 420px; height: 395px; background: var(--sage); opacity: 0.09; }
.insurance__inner {
  max-width: var(--container); margin: 0 auto; padding: 34px var(--gutter);
  position: relative; display: flex; align-items: center; justify-content: space-between;
  gap: 20px 36px; flex-wrap: wrap;
}
.insurance__lead { display: flex; align-items: center; gap: 18px; min-width: 0; }
.insurance__icon {
  flex: none; width: 46px; height: 46px; border-radius: var(--radius);
  background: #EFF4E7; border: 1px solid #D3DEBE;
  display: flex; align-items: center; justify-content: center; color: var(--sage-deep);
}
.insurance__heading { font-family: var(--font-heading); font-weight: 700; font-size: 20px; line-height: 1.3; color: var(--navy); }
.insurance__actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.insurance__note { font-size: 15px; color: var(--body-color); }
.insurance__note a { font-weight: 600; }

/* ---------- Appointment ---------- */

/* scroll-margin-top so the "Request an Appointment" anchor clears the fixed
   header. Without it the section scrolled flush to y=0 and the header sat over
   the eyebrow and half the heading. The value leaves the ~92px header plus a
   little breathing room; the phone override below matches the shorter header. */
.appointment { background: var(--navy); position: relative; overflow: hidden; scroll-margin-top: 120px; }
.appointment__ring {
  position: absolute; bottom: -360px; left: -300px; width: 780px; height: 780px;
  border-radius: 50%; border: 60px solid rgba(255,255,255,0.045); pointer-events: none;
}
.appointment__inner {
  max-width: var(--container); margin: 0 auto; padding: 104px var(--gutter);
  position: relative; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 72px; align-items: stretch;
}
.appointment__info { display: flex; flex-direction: column; gap: 22px; }
.appointment__info h2 { font-size: 44px; font-weight: 800; line-height: 1.06; letter-spacing: -0.026em; color: #fff; }
.appointment__info > p { font-size: 17px; line-height: 1.6; color: var(--navy-tint); margin: 0; text-wrap: pretty; }
.appointment__phone { font-family: var(--font-heading); font-weight: 800; font-size: 30px; color: #fff; letter-spacing: -0.01em; }
.appointment__phone:hover { color: var(--sage-tint); }
.appointment__meta {
  border-top: 1px solid rgba(255,255,255,0.18); padding-top: 20px;
  display: flex; flex-wrap: wrap; gap: 6px 28px;
  font-size: 15px; line-height: 1.6; color: var(--navy-tint);
}
.appointment__building { position: relative; border-radius: 14px; overflow: hidden; background: #0F2E4A; margin-top: auto; }
/* The photo set its own height from the source aspect ratio (430px at this
   column width), which made the left column the tallest thing in the row and
   stretched the form card to match it. Capping it balances the two columns, so
   the section is as tall as its content needs and no taller. */
.appointment__building img { width: 100%; height: 260px; object-fit: cover; object-position: 50% 55%; display: block; }
.appointment__building-tag {
  position: absolute; bottom: 12px; left: 12px; background: rgba(255,255,255,0.94);
  border-radius: var(--radius); padding: 8px 16px;
  font-size: 15px; font-weight: 600; color: var(--navy);
}
.appointment__form-card {
  background: #fff; border-radius: var(--radius); padding: 40px;
  display: flex; flex-direction: column; gap: 20px;
}
.appointment__form-card > img { height: 62px; width: auto; max-width: 100%; object-fit: contain; align-self: flex-start; margin-bottom: 4px; }
.appointment__form { display: flex; flex-direction: column; gap: 20px; }
.appointment__fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.appointment__form label { display: flex; flex-direction: column; gap: 6px; font-size: 15px; font-weight: 600; color: var(--ink); }
.appointment__form label .req { font-weight: 400; color: var(--clay); }
.appointment__form input[type="text"],
.appointment__form input[type="tel"],
.appointment__form input[type="email"],
.appointment__form textarea {
  border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 14px 16px;
  font-size: 16px; font-family: var(--font-body); color: var(--ink);
}
.appointment__form input:focus, .appointment__form textarea:focus {
  outline: none; border: 1.5px solid var(--sage-deep);
  box-shadow: 0 0 0 3px rgba(94,106,55,0.16);
}
.appointment__radios { display: flex; align-items: center; gap: 20px; font-size: 15px; color: var(--body-color); flex-wrap: wrap; }
.appointment__radios > span { font-weight: 600; color: var(--ink); }
.appointment__radios { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.appointment__radios > legend { float: left; width: 100%; padding: 0; margin: 0 0 8px; font-weight: 600; color: var(--ink); font-size: 15px; }
.appointment__radios > legend + * { clear: both; }
/* Visible explanation of the required marker (WCAG 3.3.2). */
.form-required-note { margin: 0 0 4px; font-size: 14.5px; color: var(--body-color); }
.form-required-note .req, .contact-form .form-required-note .req { color: var(--clay); font-weight: 700; }
.appointment__radios label { display: flex; flex-direction: row; align-items: center; gap: 7px; font-weight: 400; font-size: 15px; }
.appointment__radios input { accent-color: var(--sage-deep); }
.appointment__form textarea { resize: vertical; }
/* Applies to both the built-in form and any form-plugin shortcode in the card. */
.appointment__form-card textarea { min-height: 150px; }
.appointment__submit {
  background: var(--sage-deep); color: #fff; border: none; font-family: var(--font-body);
  font-weight: 600; font-size: 16px; padding: 17px 30px; border-radius: var(--radius); cursor: pointer;
  transition: background 0.2s ease, transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.appointment__submit:hover { background: var(--sage-press); transform: translateY(-2px); }
.appointment__disclaimer { font-size: 15px; line-height: 1.5; color: var(--slate); text-wrap: pretty; }

/* ---------- Instagram ---------- */

.instagram-section { background: #fff; }
.instagram-section__inner {
  max-width: var(--container); margin: 0 auto; padding: 104px var(--gutter);
  display: flex; flex-direction: column; gap: 32px;
}
.instagram-section__feed { min-height: 380px; }

/* ---------- Quiz modal ---------- */

.quiz-modal {
  position: fixed; inset: 0; z-index: 200; background: rgba(11,31,51,0.55);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center; padding: 24px;
}
.quiz-modal.is-open { display: flex; }
.quiz-modal__card {
  background: #fff; border-radius: var(--radius-lg); width: 100%; max-width: 720px;
  max-height: 88vh; overflow: auto; box-shadow: 0 40px 90px rgba(11,31,51,0.35);
}
.quiz-modal__header {
  padding: 32px 40px 24px; border-bottom: 1px solid var(--border-light);
  display: flex; align-items: start; justify-content: space-between; gap: 24px;
}
.quiz-modal__header-copy { display: flex; flex-direction: column; gap: 10px; }
.quiz-modal__kicker { font-size: 15px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sage-deep); }
.quiz-modal__title { font-weight: 800; font-size: 28px; line-height: 1.14; letter-spacing: -0.02em; }
.quiz-modal__close {
  flex: none; width: 40px; height: 40px; border-radius: var(--radius);
  border: 1px solid var(--border-strong); background: #fff; color: var(--navy);
  font-size: 20px; line-height: 1; cursor: pointer;
}
.quiz-modal__close:hover { background: var(--mist); }
.quiz-modal__body { padding: 32px 40px 40px; display: flex; flex-direction: column; gap: 22px; }
.quiz-modal__body p { font-size: 16px; line-height: 1.6; color: var(--body-color); margin: 0; text-wrap: pretty; }
.quiz-progress { display: flex; flex-direction: column; gap: 10px; }
.quiz-progress__labels { display: flex; align-items: center; justify-content: space-between; font-size: 15px; font-weight: 600; color: var(--slate); }
.quiz-progress__track { height: 6px; border-radius: 6px; background: var(--border-light); overflow: hidden; }
.quiz-progress__bar { width: 0; height: 100%; background: var(--sage); border-radius: 6px; transition: width 0.3s ease; }
.quiz-question { font-family: var(--font-heading); font-weight: 700; font-size: 22px; line-height: 1.32; letter-spacing: -0.012em; color: var(--ink); text-wrap: pretty; }
.quiz-options { display: flex; flex-direction: column; gap: 12px; }
.quiz-option {
  text-align: left; font-family: var(--font-body); font-size: 16px; font-weight: 600;
  color: var(--ink); background: #fff; border: 1.5px solid var(--border-strong); border-radius: var(--radius);
  padding: 16px 20px; cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.quiz-option:hover, .quiz-option.is-picked { color: var(--navy); background: #EFF4E7; border-color: var(--sage); }
.quiz-back { align-self: flex-start; background: none; border: none; font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--slate); cursor: pointer; padding: 4px 0; }
.quiz-back:hover { color: var(--navy); }
.quiz-result__title { font-weight: 800; font-size: 26px; line-height: 1.2; letter-spacing: -0.018em; }
.quiz-result__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 4px; }
.quiz-result__phone { font-family: var(--font-heading); font-weight: 800; font-size: 20px; color: var(--navy); }
.quiz-result__phone:hover { color: var(--sage-deep); }
.quiz-restart { background: none; border: none; font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--slate); cursor: pointer; }
.quiz-restart:hover { color: var(--navy); }
.quiz-disclaimer { border-top: 1px solid var(--border-light); padding-top: 18px; font-size: 15px; line-height: 1.5; color: var(--slate); text-wrap: pretty; }

/* ---------- Footer ---------- */

.site-footer { background: var(--ink); color: var(--navy-tint); }
.site-footer a { color: var(--navy-tint); }
.site-footer__quicklinks { border-bottom: 1px solid rgba(255,255,255,0.12); }
.site-footer__quicklinks-inner {
  max-width: var(--container); margin: 0 auto; padding: 22px var(--gutter);
  display: flex; align-items: center; justify-content: center; gap: 16px 40px; flex-wrap: wrap;
}
.site-footer__quicklinks-inner ul { display: contents; list-style: none; margin: 0; padding: 0; }
.site-footer__quicklinks-title { display: none; }
.site-footer__quicklinks a { font-size: 15px; font-weight: 600; white-space: nowrap; transition: color 0.22s ease; }
.site-footer__quicklinks a:hover { color: #fff; }
.site-footer__main {
  max-width: var(--container); margin: 0 auto; padding: 64px var(--gutter) 44px;
  display: grid; grid-template-columns: minmax(280px, 1.25fr) minmax(200px, 0.85fr) minmax(240px, 1fr);
  gap: 40px 72px; align-items: stretch;
}
.site-footer__brand { display: flex; flex-direction: column; gap: 22px; }
.site-footer__brand img { height: 74px; width: auto; max-width: 100%; object-fit: contain; display: block; align-self: flex-start; filter: brightness(0) invert(1); }
.site-footer__brand p { font-size: 15px; line-height: 1.6; margin: 0; max-width: 42ch; }
.site-footer__social { display: flex; gap: 10px; margin-top: auto; }
.site-footer__social a {
  width: 42px; height: 42px; border-radius: var(--radius); border: 1px solid rgba(255,255,255,0.18);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1), background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}
.site-footer__social a:hover { transform: translateY(-3px) rotate(-4deg); background: var(--sage); color: var(--ink); border-color: var(--sage); }
.site-footer__col { display: flex; flex-direction: column; gap: 14px; font-size: 15px; }
.site-footer__col-title { font-size: 15px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sage); margin-bottom: 2px; }
.site-footer__phone { color: #fff !important; font-weight: 700; font-size: 18px; }
.site-footer__phone:hover { color: var(--sage-tint) !important; }
.site-footer__col .btn { margin-top: auto; width: fit-content; }
.site-footer__map { flex: 1 1 auto; min-height: 244px; border-radius: 14px; overflow: hidden; }
.site-footer__map iframe { width: 100%; height: 100%; border: 0; display: block; }
.site-footer__legal { border-top: 1px solid rgba(255,255,255,0.12); }
.site-footer__legal-inner {
  max-width: var(--container); margin: 0 auto; padding: 22px var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px 32px; flex-wrap: wrap; font-size: 15px; color: #7E93A8;
}
.site-footer__legal-links { display: flex; align-items: center; gap: 24px; }
.site-footer__legal a { color: #9DBBD6; }
.site-footer__disclaimer { border-top: 1px solid rgba(255,255,255,0.08); }
.site-footer__disclaimer-inner {
  max-width: var(--container); margin: 0 auto; padding: 20px var(--gutter) 30px;
  font-size: 15px; line-height: 1.6; color: #9FB3C6;
}
.site-footer__disclaimer-inner p { margin: 0; }
.site-footer__disclaimer a { color: #9DBBD6; }

/* ---------- Sticky mobile action bar ---------- */

/* Fixed call / contact bar; shown only below 720px (see the mobile block). */
.mobile-bar { display: none; }

/* ---------- Default (non-front) content ---------- */

.site-main--default { padding: 140px 0 96px; }
.site-main--default .entry-title { font-size: 46px; font-weight: 800; letter-spacing: -0.026em; margin-bottom: 24px; }
.site-main--default .entry-content { max-width: 66ch; }

/* ---------- Responsive ---------- */

/* Larger type on big screens — nav, footer, conditions and other small text. */
@media (min-width: 1360px) {
  .site-header__nav { font-size: 16px; }
  .site-header__phone { font-size: 16px; }
  .site-header__cta { font-size: 15px; }
  .eyebrow { font-size: 16px; }
  .trust-bar__stat strong, .rating-chip strong { font-size: 24px; }
  .trust-bar__stat span, .rating-chip span { font-size: 16px; }
  .awards-band__meta { font-size: 16px; }
  .awards-band__label { font-size: 16px; }
  .condition-chip { font-size: 17px; padding: 19px 16px; }
  .text-link { font-size: 17px; }
  .why-us__item-text { font-size: 16px; }
  .stat-row span { font-size: 16px; }
  .insurance__note { font-size: 16px; }
  .blog-card__meta { font-size: 15px; }
  .blog-card__excerpt { font-size: 17px; }
  .site-footer__quicklinks a { font-size: 17px; }
  .site-footer__col { font-size: 17px; }
  .site-footer__brand p { font-size: 17px; }
  .site-footer__phone { font-size: 20px; }
  .site-footer__legal-inner { font-size: 16px; }
  .site-footer__disclaimer-inner { font-size: 15px; }
}

/* Very wide screens (1700px+): scale everything up another notch. */
@media (min-width: 1700px) {
  body { font-size: 19px; }
  .site-header__nav { font-size: 17px; gap: 20px 32px; }
  .site-header__phone { font-size: 17px; }
  .site-header__cta { font-size: 16px; padding: 14px 26px; }
  .site-header__logo img { height: 72px; }
  .eyebrow { font-size: 17px; }
  .btn { font-size: 16px; }
  .hero__text { font-size: 22px; }
  .trust-bar__stat strong, .rating-chip strong { font-size: 27px; }
  .trust-bar__stat span, .rating-chip span { font-size: 17px; }
  .awards-band__meta { font-size: 17px; }
  .awards-band__label { font-size: 17px; }
  .video-section__copy p { font-size: 19px; }
  .treatments__tab { font-size: 20px; }
  .treatments__panel-copy p { font-size: 19px; }
  .about__copy p { font-size: 20px; }
  .why-us__intro p { font-size: 19px; }
  .why-us__item-title { font-size: 22px; }
  .why-us__item-text { font-size: 17px; }
  .condition-chip { font-size: 19px; padding: 21px 18px; }
  .text-link { font-size: 19px; }
  .balloon-cta__copy p { font-size: 19px; }
  .stat-row strong { font-size: 34px; }
  .stat-row span { font-size: 17px; }
  .insurance__heading { font-size: 23px; }
  .insurance__note { font-size: 17px; }
  .blog-card__meta { font-size: 16px; }
  .blog-card__excerpt { font-size: 18px; }
  .blog-card--row .blog-card__excerpt { font-size: 17px; }
  .appointment__info > p { font-size: 19px; }
  .appointment__meta { font-size: 17px; }
  .appointment__form label { font-size: 16px; }
  .appointment__radios { font-size: 17px; }
  .site-footer__quicklinks a { font-size: 19px; }
  .site-footer__col { font-size: 19px; }
  .site-footer__col-title { font-size: 16px; }
  .site-footer__brand p { font-size: 19px; }
  .site-footer__phone { font-size: 22px; }
  .site-footer__legal-inner { font-size: 17px; }
  .site-footer__disclaimer-inner { font-size: 16px; }
}

@media (max-width: 1280px) {
  .hero__heading { font-size: 62px; }
  .section-heading { font-size: 40px; }
  .treatments__panel-copy { padding: 56px 48px; }
}

/* Nav collapses to the hamburger menu below 1280px. */
@media (max-width: 1280px) {
  .site-header__nav { display: none; }
  .site-header.nav-open .site-header__nav {
    display: flex; flex-direction: column; align-items: flex-start;
    order: 4; flex-basis: 100%; padding: 12px 0 6px; gap: 14px;
    border-top: 1px solid var(--border-light); margin-top: 10px;
  }
  .site-header.nav-open .site-header__nav ul { display: flex; flex-direction: column; gap: 14px; }
  .site-header.nav-open { background: #fff; }
  .site-header.nav-open .site-header__nav .menu-item-has-children > a { padding-bottom: 0; margin-bottom: 0; }
  .site-header.nav-open .site-header__nav .sub-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; padding: 4px 0 2px 18px; border: none; border-left: 2px solid var(--sage-tint);
    border-radius: 0; box-shadow: none; background: none;
    display: flex; flex-direction: column; gap: 8px; margin-top: 8px;
  }
  .site-header.nav-open .site-header__nav .sub-menu a { padding: 2px 0; white-space: normal; }
  .site-header.nav-open .site-header__nav .sub-menu a:hover { background: none; padding-left: 4px; }
  .menu-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 10px; background: none;
    border: 1px solid var(--border); border-radius: 10px; cursor: pointer;
  }
  .menu-toggle span { display: block; height: 2px; background: var(--navy); border-radius: 2px; }
}

@media (max-width: 1080px) {
  :root { --gutter: 28px; }
  .video-section__inner,
  .about__grid,
  .why-us__inner,
  .balloon-cta__inner,
  .appointment__inner,
  .blog-section__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .treatments__panel { grid-template-columns: minmax(0, 1fr); }
  .treatments__panel-media, .treatments__panel-media img, .treatments__panel-media .placeholder { min-height: 360px; }
  .conditions__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-footer__main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .about__photo { height: 560px; }
  .about__stamp { top: -24px; right: -12px; width: 110px; }
  .testimonials__header h2 span { white-space: normal; }
}

/* ================= Tablet (721–1080px) =================
   Between the desktop grid and the phone layout: single-column sections,
   a shorter hero, scrolling treatment tabs and wrapping condition chips,
   borrowing the stacking order from the mobile comp. */
@media (min-width: 721px) and (max-width: 1080px) {
  :root { --gutter: 32px; }

  /* Header — keeps logo, phone, CTA and burger on one row. */
  .site-header__logo img { height: 54px; }
  .site-header__phone { font-size: 15px; }
  .site-header__cta { padding: 12px 20px; }

  /* Tighter vertical rhythm across every section. */
  .video-section__inner, .treatments__inner, .about__inner, .why-us__inner,
  .testimonials__inner, .blog-section__inner, .conditions__inner,
  .balloon-cta__inner, .appointment__inner, .instagram-section__inner {
    padding-top: 72px; padding-bottom: 72px;
  }

  /* Hero — no dead space below the copy. */
  .hero__inner { min-height: max(560px, 78vh); gap: 24px 32px; }
  .hero__content { padding: 140px 0 56px; gap: 24px; }
  .hero__heading { font-size: 58px; }
  .hero__text { font-size: 19px; }
  .hero__glow { width: 380px; height: 380px; }

  /* Video */
  .video-frame { height: auto; aspect-ratio: 16 / 9; }
  .video-section__copy h2 { font-size: 38px; }

  /* Treatments — image above the copy, buttons side by side. */
  .treatments__panel.is-active { display: flex; flex-direction: column; }
  .treatments__panel-media,
  .treatments__panel-media img,
  .treatments__panel-media .placeholder { order: -1; min-height: 320px; height: 320px; }
  .treatments__panel-copy { padding: 40px 40px 44px; }
  .treatments__panel-copy h3 { font-size: 32px; }
  .treatments__panel-actions { display: flex; flex-wrap: wrap; gap: 14px; }

  /* About */
  .about__grid { gap: 40px; }
  .about__photo { height: 520px; }
  .about__stamp { top: -20px; right: -8px; width: 104px; }
  .about__affiliations { gap: 20px 30px; }
  .about__affiliations img { max-height: 52px; }

  /* Why choose us / balloon stats */
  .why-us__intro h2, .balloon-cta__copy h2, .blog-section__header h2,
  .appointment__info h2 { font-size: 38px; }
  .why-us__badge { align-self: flex-start; }
  .stat-rows { max-width: 640px; }

  /* Conditions — chips wrap instead of truncating. */
  .condition-chip { white-space: normal; }

  /* Appointment — form ahead of the building shot, which is capped in height. */
  .appointment__inner { display: flex; flex-direction: column; align-items: stretch; gap: 32px; }
  .appointment__info { display: contents; }
  .appointment__info .eyebrow { order: 1; }
  .appointment__info h2 { order: 2; }
  .appointment__info > p { order: 3; }
  .appointment__phone { order: 4; align-self: flex-start; }
  .appointment__meta { order: 5; }
  .appointment__form-card { order: 6; padding: 32px; }
  .appointment__building { order: 7; margin-top: 0; }
  .appointment__building img { height: 340px; aspect-ratio: auto; object-fit: cover; }

  /* Footer — brand spans the top, Visit and map share the row below. */
  .site-footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 48px; }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__map { min-height: 260px; }
}

/* Portrait tablets / large phones: stack the hero and scroll the tab strip. */
@media (min-width: 721px) and (max-width: 900px) {
  .hero__inner { min-height: 0; display: block; }
  .hero__content { max-width: none; padding: 150px 0 0; }
  .hero__heading { font-size: 52px; }
  .hero__scrim {
    background: linear-gradient(180deg, rgba(236,243,248,0.30) 0%, rgba(236,243,248,0.74) 38%, rgba(236,243,248,0.96) 62%, #ECF3F8 100%);
  }
  .hero__bg { background-position: 60% 24%; }
  .hero__glow { display: none; }
  .breath-badge { margin: 40px auto 56px; }

  .treatments__tabs {
    flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto;
    gap: 28px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .treatments__tabs::-webkit-scrollbar { display: none; }
  .treatments__tab { flex: none; white-space: nowrap; }
  .treatments__tab:hover { transform: none; }

  .blog-card--featured { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .blog-card--featured .blog-card__zoom { aspect-ratio: 16 / 9; }
}

/* ================= Mobile (SoCal Sinus Homepage Mobile design) =================
   Below 720px the page follows the dedicated mobile comp: icon-only header
   actions with a slide-down drawer, a fixed call/contact bar, stacked
   sections, a swipeable conditions carousel and a bottom-sheet quiz.
   Type still never drops below 15px, per the site-wide minimum. */
@media (max-width: 720px) {
  :root { --gutter: 20px; }

  /* Room for the fixed action bar at the bottom of every screen. */
  body { font-size: 17px; padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  .section-heading { font-size: 32px; }
  .framed::before, .about__media::before { display: none; }

  /* ---- Header ---- */
  /* Stays pinned to the top of the viewport while the page scrolls. */
  .site-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 56;
    /* Near-opaque from the start on phones — the hero photo sits right underneath. */
    background: rgba(255,255,255,0.94);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  }
  .site-header__inner { padding: 10px var(--gutter) 13px; gap: 12px; }
  /* Keep the wordmark, the phone button and the burger on one row. */
  .site-header__logo { flex: 0 1 auto; min-width: 0; }
  .site-header__logo img { width: 176px; height: auto; max-width: 100%; }
  .site-header__actions { flex: none; gap: 8px; }
  .site-header__phone, .site-header__cta { display: none; }
  .site-header__phone-icon {
    display: flex; align-items: center; justify-content: center; flex: none;
    width: 46px; height: 46px; border-radius: var(--radius);
    border: 1.5px solid var(--navy); color: var(--navy);
  }
  .menu-toggle {
    width: 46px; height: 46px; padding: 12px; gap: 4px;
    background: var(--navy); border: none; border-radius: var(--radius);
  }
  .menu-toggle span { background: #fff; transition: transform 0.25s ease, opacity 0.15s ease; }
  .site-header.nav-open .menu-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .site-header.nav-open .menu-toggle span:nth-child(2) { opacity: 0; }
  .site-header.nav-open .menu-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* Drawer: full-bleed white panel under the header bar. */
  @keyframes drawerIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
  .site-header.nav-open .site-header__nav {
    width: calc(100% + var(--gutter) * 2);
    margin: 13px calc(-1 * var(--gutter)) -13px;
    padding: 6px var(--gutter) 20px; gap: 0;
    background: #fff; box-shadow: 0 20px 40px rgba(11,31,51,0.14);
    animation: drawerIn 0.24s cubic-bezier(0.16, 0.84, 0.28, 1) both;
    /* The full grouped menu is taller than the screen — scroll inside the drawer. */
    max-height: min(560px, calc(100dvh - 90px));
    overflow-y: auto; scrollbar-width: none;
  }
  .site-header.nav-open .site-header__nav::-webkit-scrollbar { display: none; }
  .site-header.nav-open .site-header__nav > ul { gap: 0; width: 100%; }
  .site-header.nav-open .site-header__nav > ul > li { width: 100%; border-bottom: 1px solid #EDF1F5; }
  .site-header.nav-open .site-header__nav > ul > li:last-child { border-bottom: none; }
  .site-header.nav-open .site-header__nav > ul > li > a {
    display: block; padding: 16px 2px; font-size: 17px; font-weight: 600;
  }
  /* Items with children render as sage group labels over their link list. */
  .site-header.nav-open .site-header__nav > ul > li.menu-item-has-children > a {
    padding: 14px 2px 6px; font-size: 15px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage-label);
  }
  .site-header.nav-open .site-header__nav .menu-item-has-children > a::after { content: none; }
  .site-header.nav-open .site-header__nav .sub-menu { padding-bottom: 8px; }
  .site-header.nav-open .site-header__nav .sub-menu li { border-top: 1px solid #EDF1F5; }
  .site-header.nav-open .site-header__nav .sub-menu a {
    font-size: 16px; font-weight: 600; color: var(--navy); padding: 12px 2px;
  }
  /* Third-level groups (e.g. Conditions → Sinus Conditions → links): the middle
     item becomes a smaller sage-deep heading over its own flat link list. */
  .site-header.nav-open .site-header__nav .sub-menu .menu-item-has-children { border-top: none; }
  .site-header.nav-open .site-header__nav .sub-menu .menu-item-has-children > .scs-nav-heading__label,
  .site-header.nav-open .site-header__nav .sub-menu .menu-item-has-children > a {
    padding: 14px 2px 4px; font-size: 15px; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage-deep);
  }
  .site-header.nav-open .site-header__nav .sub-menu .sub-menu {
    padding: 0; border-left: none; margin-top: 0; gap: 0;
  }
  .site-header.nav-open .site-header__nav-cta {
    display: flex; align-items: center; justify-content: center; margin-top: 12px;
    background: var(--sage-deep); color: #fff; font-weight: 700; font-size: 15px;
    letter-spacing: 0.08em; text-transform: uppercase;
    padding: 17px 20px; border-radius: var(--radius);
  }

  /* ---- Sticky call / contact bar ---- */
  .mobile-bar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 55;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,0.96);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-top: 1px solid #DCE4EB; box-shadow: 0 -6px 24px rgba(11,31,51,0.1);
  }
  .mobile-bar__btn {
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 15px 10px; border-radius: var(--radius);
  }
  .mobile-bar__btn--call { border: 1.5px solid var(--navy); color: var(--navy); }
  .mobile-bar__btn--cta, .mobile-bar__btn--cta:hover { background: var(--sage-deep); color: #fff; }

  /* ---- Hero ---- */
  .hero__bg { inset: 0; background-position: 57.5% 72%; background-size: auto 132%; animation: none; }
  .hero__glow { display: none; }
  .hero__scrim {
    background: linear-gradient(180deg, rgba(236,243,248,0.28) 0%, rgba(236,243,248,0.55) 34%, rgba(236,243,248,0.95) 58%, #ECF3F8 100%);
  }
  .hero__inner { min-height: 0; display: block; }
  .hero__content { max-width: none; padding: 252px 0 0; gap: 18px; }
  .hero__heading { font-size: 44px; }
  .hero__text { font-size: 17px; max-width: none; }
  .hero__ctas { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero__ctas .btn { justify-content: center; padding: 19px 22px; }
  .breath-badge { width: 176px; height: 176px; margin: 32px auto 36px; }
  .breath-badge__ring-inner { inset: 22px; }
  .breath-badge__labels { display: none; }
  .breath-badge__content { gap: 0; padding: 0 20px; }

  /* ---- Trust bar ---- */
  .trust-bar__inner {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 18px 16px; padding: 24px var(--gutter);
  }
  .trust-bar__stat, .trust-bar .rating-chip { white-space: normal; }
  /* The comp keeps a clean 2×2 on phones: the "Nationally Recognized" cell is
     dropped and the Google rating takes its place. */
  .trust-bar__stat:nth-child(4) { display: none; }
  .trust-bar .rating-chip { flex-direction: column; align-items: flex-start; gap: 2px; }
  .trust-bar__stat strong, .trust-bar .rating-chip strong { font-size: 18px; }
  .trust-bar__stat span, .trust-bar .rating-chip span { font-size: 15px; line-height: 1.4; }
  .trust-bar__divider { display: none; }

  /* ---- Video: eyebrow, heading, player, copy ---- */
  .video-section__inner {
    display: flex; flex-direction: column; align-items: stretch;
    gap: 18px; padding: 56px var(--gutter);
  }
  .video-section__copy { display: contents; }
  .video-section__copy .eyebrow { order: 1; }
  .video-section__copy h2 { order: 2; font-size: 30px; }
  .framed { order: 3; }
  .video-section__copy p { order: 4; font-size: 16px; }
  .video-section__copy > div:last-child { order: 5; text-align: center; }
  .video-frame { height: auto; aspect-ratio: 16 / 10; border-radius: 14px; }
  .video-frame__play { width: 66px; height: 66px; }
  .video-frame__play span { font-size: 20px; }
  .video-frame__logo { display: none; }

  /* ---- Awards band ---- */
  .awards-band__inner {
    flex-direction: column; align-items: center; text-align: center;
    gap: 16px; padding: 22px var(--gutter);
  }
  .awards-band__label { white-space: normal; }
  .awards-band__divider, .awards-band .rating-chip { display: none; }
  .awards-band__item { text-align: left; white-space: normal; }
  .awards-band__logo { width: 76px; height: 56px; }

  /* ---- Treatments: scrolling tab strip, image above the copy ---- */
  .treatments__inner { padding: 56px 0; gap: 22px; }
  .treatments__header { padding: 0 var(--gutter); align-items: flex-start; text-align: left; }
  .treatments__header .eyebrow--centered { justify-content: flex-start; }
  .treatments__header .eyebrow--centered::after { content: none; }
  .treatments__tabs {
    justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto;
    gap: 22px; padding: 0 var(--gutter) 2px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .treatments__tabs::-webkit-scrollbar { display: none; }
  .treatments__tab { flex: none; white-space: nowrap; font-size: 16px; padding: 12px 2px 14px; }
  .treatments__tab:hover { transform: none; }
  .treatments__panels { margin: 0 var(--gutter); }
  .treatments__panel.is-active { display: flex; flex-direction: column; }
  .treatments__panel-media,
  .treatments__panel-media img,
  .treatments__panel-media .placeholder { order: -1; min-height: 220px; height: 220px; }
  .treatments__panel-copy { padding: 26px 22px 28px; gap: 16px; }
  .treatments__panel-copy h3 { font-size: 25px; }
  .treatments__panel-copy p { font-size: 16px; }
  .treatments__panel-actions { width: 100%; }
  .treatments__more { padding: 0 var(--gutter); }

  /* ---- About ---- */
  .about__inner { padding: 56px var(--gutter); }
  .about__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .about__stamp { display: none; }
  .about__photo { height: 420px; }
  .about__namecard { bottom: 14px; left: 14px; right: 14px; padding: 14px 16px; }
  .about__namecard-name { font-size: 15px; }
  .about__copy { gap: 20px; }
  .about__copy p { font-size: 17px; }
  .about__affiliations { justify-content: center; gap: 20px 26px; }
  .about__affiliations img { max-height: 46px; max-width: 45%; }
  .about__copy > div:last-child { text-align: center; }

  /* ---- Why choose us: badge moves below the list ---- */
  .why-us__inner {
    display: flex; flex-direction: column; align-items: stretch;
    gap: 20px; padding: 56px var(--gutter);
  }
  .why-us .swoosh { top: -70px; right: -110px; width: 380px; height: 357px; }
  .why-us__intro { display: contents; }
  .why-us__intro .eyebrow { order: 1; }
  .why-us__intro h2 { order: 2; font-size: 30px; }
  .why-us__intro p { order: 3; font-size: 16px; }
  .why-us__list { order: 4; }
  .why-us__badge { order: 5; align-self: center; padding: 18px 20px; }
  .why-us__badge img { height: 46px; }
  .why-us__item { gap: 14px; padding: 20px 0; }
  .why-us__item:last-child { padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.18); }
  .why-us__item-title { font-size: 18px; }

  /* ---- Testimonials ---- */
  .testimonials__inner { padding: 56px var(--gutter); gap: 22px; }
  .testimonials__header h2 { font-size: 30px; }
  .testimonials__widget { width: 100%; margin-left: 0; transform: none; min-height: 320px; }

  /* ---- Blog: "view all" moves under the cards ---- */
  .blog-section__inner { padding: 56px var(--gutter); gap: 22px; }
  .blog-section__header { display: contents; }
  .blog-section__header-copy { order: 1; }
  .blog-section__header h2 { font-size: 32px; }
  .blog-section__grid { order: 2; grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .blog-section__header > .text-link { order: 3; align-self: center; }
  .blog-card--featured { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 16px; }
  .blog-card--featured .blog-card__zoom { aspect-ratio: 16 / 10; }
  .blog-card--featured .blog-card__title { font-size: 24px; }
  .blog-section__stack { gap: 22px; }
  .blog-card--row { grid-template-columns: minmax(0, 1fr) 104px; gap: 16px; padding: 16px; }
  .blog-card--row .blog-card__zoom { order: 0; width: 104px; height: 104px; }
  .blog-card--row .blog-card__title { font-size: 19px; }
  .blog-card--row .blog-card__excerpt { display: none; }

  /* ---- Conditions: swipeable card carousel ---- */
  .conditions__inner { padding: 56px var(--gutter); gap: 22px; }
  .conditions .swoosh { bottom: -120px; left: -120px; width: 400px; height: 376px; }
  .conditions__header h2 { font-size: 32px; }
  .conditions__grid {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 10px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .conditions__grid::-webkit-scrollbar { display: none; }
  .condition-chip {
    flex: 0 0 100%; scroll-snap-align: center;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 12px; min-height: 232px; padding: 24px 22px;
    white-space: normal; overflow: visible;
    border-radius: var(--radius-lg); box-shadow: 0 10px 24px rgba(11,31,51,0.06);
  }
  .condition-chip:hover { transform: none; }
  .condition-chip__name {
    font-family: var(--font-heading); font-weight: 700; font-size: 24px;
    line-height: 1.2; letter-spacing: -0.018em; color: var(--navy);
  }
  .condition-chip__blurb { display: block; font-size: 15px; line-height: 1.5; color: var(--body-color); }
  .condition-chip__more {
    display: inline-flex; align-items: center; min-height: 44px; margin-top: auto;
    font-size: 15px; font-weight: 600; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--sage-deep);
  }
  .conditions__nav { display: flex; align-items: center; justify-content: center; gap: 12px; }
  .conditions__nav-prev {
    width: 48px; height: 48px; border-radius: 14px; border: 1.5px solid var(--border-strong);
    background: #fff; color: var(--navy); font-size: 20px; line-height: 1; cursor: pointer;
  }
  .conditions__nav-next {
    display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 22px;
    border-radius: 14px; border: none; background: var(--navy); color: #fff;
    font-family: var(--font-body); font-weight: 700; font-size: 15px;
    letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
  }

  /* ---- Balloon sinuplasty: stats card, then the CTA ---- */
  .balloon-cta__inner {
    display: flex; flex-direction: column; align-items: stretch; text-align: center;
    gap: 20px; padding: 56px var(--gutter);
  }
  .balloon-cta .swoosh { top: -60px; right: -110px; width: 380px; height: 357px; }
  .balloon-cta__copy { display: contents; }
  .balloon-cta__copy .eyebrow { order: 1; justify-content: center; }
  .balloon-cta__copy .eyebrow::after { content: ""; width: 34px; height: 2px; background: var(--sage); }
  .balloon-cta__copy h2 { order: 2; font-size: 32px; }
  .balloon-cta__copy p { order: 3; font-size: 16px; max-width: none; }
  .stat-rows {
    order: 4; width: 100%; margin-bottom: 14px;
    background: #fff; border: 1px solid var(--border-light); border-radius: 14px;
    box-shadow: 0 12px 0 -6px var(--mist), 0 12px 0 -5px #DCE4EB,
                0 22px 0 -12px var(--mist), 0 22px 0 -11px var(--border-light),
                0 16px 34px rgba(11,31,51,0.07);
  }
  .stat-row {
    flex-direction: column; align-items: center; gap: 4px;
    padding: 18px 16px; border-top: 1px solid #EDF1F5;
  }
  .stat-row:first-child { border-top: none; }
  .stat-row:last-child { border-bottom: none; }
  .stat-row:hover { background: none; padding-left: 16px; }
  .stat-row strong { font-size: 26px; }
  .balloon-cta__actions { order: 5; width: 100%; flex-direction: column; align-items: stretch; gap: 14px; }
  .balloon-cta__actions .btn { justify-content: center; }
  .balloon-cta__phone { text-align: center; font-size: 22px; }

  /* ---- Insurance ---- */
  .insurance__inner { flex-direction: column; align-items: stretch; gap: 16px; padding: 28px var(--gutter); }
  .insurance .swoosh { display: none; }
  .insurance__lead { gap: 14px; }
  .insurance__icon { width: 42px; height: 42px; }
  .insurance__heading { font-size: 18px; }
  .insurance__actions { flex-direction: column; align-items: stretch; gap: 14px; }
  .insurance__note { text-align: center; }
  .insurance__actions .btn { justify-content: center; }

  /* ---- Appointment: form sits between the phone and the address ---- */
  .appointment__inner { display: flex; flex-direction: column; gap: 22px; padding: 56px var(--gutter); }
  .appointment__ring { display: none; }
  .appointment__info { display: contents; }
  .appointment__info .eyebrow { order: 1; }
  .appointment__info h2 { order: 2; font-size: 32px; }
  .appointment__info > p { order: 3; font-size: 16px; }
  .appointment__phone { order: 4; align-self: flex-start; font-size: 26px; }
  .appointment__form-card { order: 5; padding: 22px 18px; gap: 16px; border-radius: 14px; }
  .appointment__form-card > img { display: none; }
  .appointment__meta { order: 6; flex-direction: column; gap: 4px; }
  .appointment__building { order: 7; margin-top: 0; }
  .appointment__form { gap: 16px; }
  .appointment__fields { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .appointment__radios { flex-wrap: wrap; gap: 10px 20px; }
  .appointment__radios > span { flex: 0 0 100%; }
  .appointment__radios input { width: 20px; height: 20px; }
  .appointment__submit { width: 100%; padding: 18px 24px; }

  /* ---- Instagram ---- */
  .instagram-section__inner { padding: 56px var(--gutter); gap: 22px; }

  /* ---- Quiz: bottom sheet ---- */
  .quiz-modal { align-items: flex-end; padding: 0; }
  .quiz-modal__card { max-width: none; max-height: 92vh; border-radius: 18px 18px 0 0; }
  .quiz-modal__header { padding: 22px 20px 18px; }
  .quiz-modal__title { font-size: 22px; }
  .quiz-modal__close { width: 44px; height: 44px; }
  .quiz-modal__body { padding: 22px 20px 30px; }
  .quiz-question { font-size: 19px; }
  .quiz-option { padding: 17px 18px; }
  .quiz-result__title { font-size: 22px; }
  .quiz-result__actions { flex-direction: column; align-items: stretch; }
  .quiz-result__actions .btn { justify-content: center; }
  .quiz-result__phone { text-align: center; }

  /* ---- Footer: centered, quick links under the brand ---- */
  .site-footer { display: flex; flex-direction: column; }
  .site-footer__main { display: contents; }
  .site-footer__brand {
    order: 1; align-items: center; text-align: center;
    gap: 22px; padding: 40px var(--gutter) 24px;
  }
  .site-footer__brand img { align-self: center; height: 60px; max-width: 78%; }
  .site-footer__brand p { max-width: none; }
  .site-footer__social { justify-content: center; margin-top: 0; }
  .site-footer__quicklinks {
    order: 2; border-bottom: none; border-top: 1px solid rgba(255,255,255,0.12);
  }
  .site-footer__quicklinks-inner {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 2px 16px; padding: 22px var(--gutter);
  }
  .site-footer__quicklinks-inner ul li { display: contents; }
  .site-footer__quicklinks-title { display: block; grid-column: 1 / -1; text-align: center; }
  .site-footer__quicklinks a {
    display: flex; align-items: center; justify-content: center;
    min-height: 40px; white-space: normal; text-align: center;
  }
  .site-footer__col--visit {
    order: 3; align-items: center; text-align: center; gap: 12px;
    padding: 24px var(--gutter); border-top: 1px solid rgba(255,255,255,0.12);
  }
  .site-footer__col--visit .btn { align-self: center; margin-top: 4px; }
  .site-footer__col--map { order: 4; padding: 0 var(--gutter) 28px; }
  .site-footer__col--map .site-footer__col-title { display: none; }
  .site-footer__map { flex: none; height: 220px; min-height: 0; }
  .site-footer__legal { order: 5; }
  .site-footer__legal-inner {
    flex-direction: column; align-items: center; text-align: center;
    gap: 10px; padding: 20px var(--gutter);
  }
  .site-footer__disclaimer-inner { padding: 20px var(--gutter) 30px; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1; }
}

/* ============================================================
   Inner pages (page-templates/*): one shared rule set.
   Banner, CTA band, awards marquee, prose typography and the
   section layouts reused across the About / Why us / Condition /
   Legal templates. Tokens, .eyebrow and .btn come from above.
   ============================================================ */

/* On banner pages the header is solid and sticky (it reserves its own space)
   instead of glassy-fixed — navy links on the navy banner would be unreadable. */
body.has-page-banner .site-header {
  position: sticky; top: 0; left: 0; right: 0;
  background: #fff; border-bottom: 1px solid rgba(216,224,230,0.8);
}

/* Landing pages use the site header chrome (menu-less), solid and sticky like
   the rest of the site, so the phone/Contact actions stay reachable. */
body.landing-page .site-header {
  position: sticky; top: 0; left: 0; right: 0;
  background: #fff; border-bottom: 1px solid rgba(216,224,230,0.8);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* ---------- Shared banner ---------- */
.page-banner {
  position: relative; overflow: hidden;
  background: linear-gradient(118deg, var(--navy) 0%, var(--ink) 100%);
}
.page-banner__mark {
  position: absolute; top: -70px; right: -110px; width: 420px; height: 395px;
  background: #fff; opacity: 0.06; pointer-events: none;
  -webkit-mask-image: url("assets/img/swoosh-mask.png"); mask-image: url("assets/img/swoosh-mask.png");
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.page-banner__inner {
  position: relative; max-width: var(--container); margin: 0 auto;
  padding: 56px var(--gutter); display: flex; flex-direction: column; gap: 14px;
}
.page-banner__inner--badge {
  flex-direction: row; align-items: center; justify-content: space-between;
  gap: 32px 64px; flex-wrap: wrap;
}
.page-banner__copy { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.page-banner__inner--badge .page-banner__copy { flex: 1 1 620px; }
.page-banner__eyebrow {
  font-size: 15px; font-weight: 700; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--sage-tint);
}
.page-banner__title {
  font-weight: 800; font-size: 50px; line-height: 1.1; letter-spacing: -0.028em;
  color: #fff; max-width: 30ch;
}
/* Links on the dark navy surfaces read sage-tint — clinical blue disappears there. */
.page-banner__copy a, .page-cta__copy a, .contact-card p a { color: var(--sage-tint); }
.page-banner__copy a:hover, .page-cta__copy a:hover, .contact-card p a:hover { color: #fff; }
.page-banner__lede { font-size: 18px; line-height: 1.6; color: #C9DCEB; margin: 0; max-width: 62ch; text-wrap: pretty; }
.page-banner__lede a { font-weight: 600; }
.page-banner__meta { display: flex; flex-wrap: wrap; gap: 10px 14px; font-size: 16px; color: #C9DCEB; }
.page-banner__meta-dot { opacity: 0.5; }
.page-banner__badge {
  flex: none; background: #fff; border-radius: var(--radius-lg); padding: 24px 30px;
  box-shadow: 0 24px 54px rgba(11,31,51,0.28);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.page-banner__badge img { height: 116px; width: auto; display: block; object-fit: contain; }
.page-banner__badge span {
  font-size: 15px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--sage-deep); text-align: center;
}

/* ---------- Shared bottom CTA band ---------- */
.page-cta {
  position: relative; overflow: hidden;
  background: linear-gradient(118deg, #0B1F33 0%, #14395C 46%, #2A4A45 78%, #3E5340 100%);
}
.page-cta__ring {
  position: absolute; bottom: -300px; left: -260px; width: 700px; height: 700px;
  border-radius: 50%; border: 60px solid rgba(255,255,255,0.045); pointer-events: none;
}
.page-cta__inner {
  position: relative; max-width: var(--container); margin: 0 auto;
  padding: 68px var(--gutter); display: flex; align-items: center;
  justify-content: space-between; gap: 32px 60px; flex-wrap: wrap;
}
.page-cta__copy { display: flex; flex-direction: column; gap: 16px; flex: 1 1 620px; max-width: 88ch; }
.page-cta__copy h2 { font-weight: 800; font-size: 42px; line-height: 1.08; letter-spacing: -0.026em; color: #fff; }
.page-cta__copy p { font-size: 17px; line-height: 1.65; color: #C9DCEB; margin: 0; text-wrap: pretty; }
.page-cta__actions { display: flex; align-items: center; gap: 16px 20px; flex-wrap: wrap; }
.page-cta__phone { font-family: var(--font-heading); font-weight: 800; font-size: 24px; color: #fff; }
.page-cta__phone:hover { color: var(--sage-tint); }

/* ---------- Awards / affiliations marquee ---------- */
.marquee { background: var(--mist); border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); }
.marquee__label {
  max-width: var(--container); margin: 0 auto; padding: 40px var(--gutter) 0;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  font-size: 15px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sage-label); text-align: center;
}
.eyebrow-line { width: 26px; height: 2px; background: var(--sage); flex: none; }
.marquee__wrap {
  overflow: hidden; padding: 34px 0 40px;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee__track { display: flex; align-items: center; width: max-content; }
.marquee__track.is-animated { animation: marqueeScroll 40s linear infinite; }
@keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee__item { flex: none; width: 188px; height: 84px; display: flex; align-items: center; justify-content: center; }
.marquee__item img { max-width: 150px; max-height: 72px; width: auto; height: auto; object-fit: contain; display: block; }
/* Without the animation the strip just wraps into a centered grid. */
.marquee__track:not(.is-animated) { flex-wrap: wrap; justify-content: center; width: auto; }

/* ---------- Prose (rich text bodies) ---------- */
.prose { font-size: 17.5px; line-height: 1.7; color: var(--body-color); }
.prose > * + * { margin-top: 20px; }
.prose p { margin: 0; text-wrap: pretty; }
/* Re-assert the vertical rhythm over the per-element margin resets above. */
.prose > * + p, .prose > * + ul, .prose > * + ol,
.prose > * + div, .prose > * + figure, .prose > * + a { margin-top: 20px; }
.prose a { color: var(--clinical-blue); font-weight: 600; }
.prose a:hover { text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--navy); }
.prose h2 {
  font-weight: 800; font-size: 34px; line-height: 1.14; letter-spacing: -0.024em;
  color: var(--navy); margin-top: 44px; scroll-margin-top: 140px;
}
.prose h3 { font-weight: 700; font-size: 22px; line-height: 1.3; color: var(--navy); margin-top: 30px; }
.prose h3 a { color: var(--navy); }
.prose h3 a:hover { color: var(--sage-deep); text-decoration: none; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { margin: 0; padding: 0 0 0 4px; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.prose li { position: relative; padding-left: 20px; }
.prose li::before {
  content: ""; position: absolute; left: 0; top: 11px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--sage);
}
.prose .pull-quote {
  font-family: var(--font-heading); font-weight: 700; font-style: italic;
  font-size: 23px; line-height: 1.5; color: var(--navy);
  border-left: 3px solid var(--sage); padding-left: 24px;
}
.prose .card-rows { display: flex; flex-direction: column; gap: 12px; }
.prose .card-rows > div {
  background: #F7FAFC; border: 1px solid var(--border-light); border-radius: 14px;
  padding: 18px 22px; font-size: 16.5px; line-height: 1.5; color: var(--navy);
  box-shadow: 0 2px 6px rgba(11,31,51,0.05), 0 10px 24px rgba(11,31,51,0.06);
}
.prose .pill-list { display: flex; flex-wrap: wrap; gap: 10px; }
.prose .pill-list span {
  background: #EFF4E7; border: 1px solid var(--sage-tint); border-radius: 999px;
  padding: 11px 18px; font-size: 15.5px; font-weight: 600; color: var(--navy);
}
.prose .btn-sage-inline {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--sage-deep); color: #fff; font-weight: 700; font-size: 15px;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 18px 28px;
  border-radius: var(--radius); box-shadow: 0 14px 30px rgba(94,106,55,0.24);
}
.prose .btn-sage-inline:hover { background: var(--sage-press); color: #fff; text-decoration: none; }
.prose .prose-figure { margin: 0; }
.prose .prose-figure img {
  display: block; max-width: 320px; width: 100%; height: auto;
  border-radius: var(--radius-lg); border: 1px solid var(--border-light);
  background: #F7FAFC; box-shadow: 0 2px 6px rgba(11,31,51,0.05), 0 10px 24px rgba(11,31,51,0.06);
}
.prose .prose-figure figcaption { padding-top: 10px; font-size: 15px; color: var(--slate); }

/* Photos dropped straight into a Body field via Add Media: give them the
   template-photo treatment — same width, centered, rounded, card shadow and
   the sage offset frame — always on their own line, never floated or inline.
   The .prose-frame wrapper is added at render time (scs_frame_content_images). */
.prose > img,
.prose > p > img,
.prose .prose-frame > img,
.prose > .wp-caption img {
  display: block; float: none; margin: 0 auto;
  width: 100%; max-width: min(740px, 100%); height: auto;
  border-radius: 22px;
  box-shadow: 0 2px 6px rgba(11,31,51,0.05), 0 10px 24px rgba(11,31,51,0.06);
}
.prose > img,
.prose > p > img { margin-bottom: 26px; }

/* The frame: a sage outline offset behind the photo, as on the lead photos.
   An explicit width (not max-width) so the frame keeps its size when it is a
   direct flex child of .split__main, where auto margins cancel the stretch. */
.prose .prose-frame,
.prose > .wp-caption {
  display: block; position: relative;
  width: min(740px, 100%) !important;
  margin: 0 auto 30px;
}
/* The sage offset frame belongs to the lead photo only (.cond-lead-photo);
   images inside the article body keep just the rounded card treatment. */
.prose .prose-frame > img,
.prose > .wp-caption img { position: relative; }
.prose > .wp-caption .wp-caption-text { position: relative; padding-top: 10px; font-size: 15px; color: var(--slate); text-align: center; }
/* Phone gutters are 20px, so the lead photo's frame tucks in to avoid overflow. */
@media (max-width: 720px) {
  .cond-lead-photo.frame-offset::before { top: 14px; left: -12px; right: 14px; bottom: -14px; }
}
.prose .quote-box {
  font-style: italic; background: #F7FAFC; border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); padding: 24px 26px;
  box-shadow: 0 2px 6px rgba(11,31,51,0.05), 0 10px 24px rgba(11,31,51,0.06);
}

/* Contact card closing the legal pages (practice details + CTA). */
.prose .legal-cta {
  margin-top: 36px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  background: var(--mist); border: 1px solid var(--border-light); border-radius: 20px;
  padding: 30px 32px;
  box-shadow: 0 2px 6px rgba(11,31,51,0.05), 0 10px 24px rgba(11,31,51,0.06);
}
.legal-cta__name {
  font-family: var(--font-heading); font-weight: 800; font-size: 19px;
  line-height: 1.4; color: var(--navy);
}
.legal-cta__address { line-height: 1.75; }
.legal-cta__address a { font-weight: 600; }
/* .prose a colors links clinical blue; the button must stay white-on-sage. */
.prose .legal-cta .btn { margin-top: 4px; color: #fff; }
.prose .legal-cta .btn:hover { color: #fff; text-decoration: none; }

/* Tighter article rhythm on the Conditions + Balloon pillar templates and
   blog posts (body gets .prose-tight): paragraphs 20px → 10px, h2 44px → 22px. */
.prose-tight .prose { line-height: 1.85; }
.prose-tight .prose > * + *,
.prose-tight .prose > * + p, .prose-tight .prose > * + ul, .prose-tight .prose > * + ol,
.prose-tight .prose > * + div, .prose-tight .prose > * + figure, .prose-tight .prose > * + a { margin-top: 22px; }
.prose-tight .prose li + li { margin-top: 8px; }
.prose-tight .prose h2 { margin-top: 44px; }
.prose-tight .prose h3 { margin-top: 30px; }
/* .split__main is a flex column with gap: 26px, which stacked on top of every
   margin above — zero it here so the margins alone set the rhythm. */
.prose-tight .split__main.prose { gap: 0; }

/* Article images on the pillar templates (Conditions + Balloon Sinuplasty).
   The lead photo carries the page — full column width, sage offset frame.
   Images below it fill the column — many of the imported sources are only
   220-350px wide and look lost at their own size — and are limited only in
   height. The height limit itself cannot live here: width:100% with a
   max-height squashes the picture rather than narrowing it. It arrives as a
   per-image max-width written by scs_cap_article_image_height(), which is the
   same limit expressed in a way that holds the aspect ratio. */
.prose-tight .prose > img,
.prose-tight .prose > p > img,
.prose-tight .prose .prose-frame > img,
.prose-tight .prose .wp-caption img,
.prose-tight .prose .wp-block-image img,
.prose-tight .prose figure[class*="align"] img,
.prose-tight .prose > .prose-figure img {
  display: block;
  width: 100%; height: auto; max-width: 100%;
  margin-left: auto; margin-right: auto;
}

/* Every wrapper the copy arrives in — the renderer's own span, a classic
   caption figure, a Gutenberg image block — spans the column, so the image
   centres inside it. Left to size themselves these shrink-wrap: a caption
   figure ends up as wide as its caption TEXT (233px for a 350px photo), and a
   block image collapses to a single line box. */
.prose-tight .prose .prose-frame,
.prose-tight .prose .wp-caption,
.prose-tight .prose .wp-block-image,
.prose-tight .prose figure[class*="align"],
.prose-tight .prose > .prose-figure:not(:first-child) {
  display: block; float: none;
  width: 100% !important; max-width: 100%;
  /* An image needs more air above it than a paragraph does. Left on the 22px
     paragraph rhythm it reads as part of the sentence it follows, so give it
     the same 44px the H2s get — enough to register as its own block. */
  margin: 44px auto 22px;
}
.prose-tight .prose .wp-block-image > figure { margin: 0; }
.prose-tight .prose .wp-caption-text,
.prose-tight .prose figcaption { text-align: center; }

/* One rounded card for every article photo, whichever wrapper it arrived in:
   the Balloon pages write <figure class="prose-figure"> themselves, older copy
   carries classic captions, and some pages carry Gutenberg image blocks whose
   figures were rendering with square corners and no shadow. Matching them all
   here is what keeps the two templates looking like one site. */
.prose-tight .prose > .prose-figure { margin: 24px auto 30px; width: auto; }
.prose-tight .prose > .prose-figure:not(:first-child) { margin-top: 44px; margin-bottom: 22px; }
.prose-tight .prose > .prose-figure img,
.prose-tight .prose > .prose-figure--wide img,
.prose-tight .prose .wp-block-image img,
.prose-tight .prose figure[class*="align"] img {
  display: block; margin: 0 auto; height: auto;
  border: 0; background: none;
  border-radius: 22px;
  box-shadow: 0 2px 6px rgba(11,31,51,0.05), 0 10px 24px rgba(11,31,51,0.06);
}
.prose-tight .prose > .prose-figure figcaption { text-align: center; }

/* The first figure on the page is that page's lead photo: it gets the sage
   offset frame, matching .cond-lead-photo on the Conditions template. */
.prose-tight .prose > .prose-figure:first-child { position: relative; }
.prose-tight .prose > .prose-figure:first-child::before {
  content: ""; position: absolute; top: 24px; left: -24px; right: 24px; bottom: -24px;
  border: 2px solid var(--sage-tint); border-radius: 20px; pointer-events: none;
}

/* The lead photo is capped by height too — taller than the images below it, so
   the page still opens on its largest image, but a portrait-shaped photo can no
   longer push the opening paragraph off the screen.
   This one keeps the full column width rather than scaling down to fit the cap:
   the lead photos come in at wildly different sizes and some are small, so
   letting width follow height would open some pages on a thumbnail. Height is
   cropped instead (same treatment as the Meet-the-doctor photos), biased above
   centre so a face stays in frame. */
.prose-tight .prose > .cond-lead-photo,
.prose-tight .prose > .prose-figure:first-child {
  width: min(740px, 100%);
}
.prose-tight .prose > .cond-lead-photo img,
.prose-tight .prose > .prose-figure:first-child img {
  position: relative;
  width: 100%; max-width: 100%; max-height: 460px;
  object-fit: cover; object-position: 50% 30%;
}
/* A lead image that carries its own text (a slide or diagram) must not be
   cropped: show it whole, scaled to the column, keeping the same frame/shadow. */
.prose-tight .prose > .prose-figure--full:first-child img,
.prose-tight .prose > .cond-lead-photo--full img {
  max-height: none; object-fit: contain;
}
@media (max-width: 720px) {
  .prose-tight .prose > .prose-figure:first-child::before { top: 14px; left: -12px; right: 14px; bottom: -14px; }
}

/* Patient quote (Quotes tab): the quote-box card with the patient's name under it. */
.prose .quote-box > p + p { margin-top: 10px; }
.prose .quote-box .quote-box__by { font-style: normal; font-weight: 700; font-size: 16px; color: var(--navy); }
.prose .quote-box .quote-box__by a { font-weight: 700; }

/* Map (Map tab): the same rounded, shadowed card as every other photo. */
.prose .ct-map {
  border-radius: 22px; overflow: hidden; border: 1px solid var(--border-light);
  box-shadow: 0 2px 6px rgba(11,31,51,0.05), 0 10px 24px rgba(11,31,51,0.06);
}
.prose .ct-map iframe { display: block; width: 100%; height: 420px; border: 0; }
@media (max-width: 720px) {
  .prose .ct-map iframe { height: 320px; }
}

/* Photo + text pairs (built by scs_carousel_image_runs and the Section fields): a
   photo followed by copy sits beside that copy on wide screens, alternating
   sides down the page. Below 1280px — tablet, phone, and the narrow column next
   to the sidebar — it is the same stacked photo-then-text as before. The lead
   photo is never paired. */
.img-text__body > * + * { margin-top: 22px; }
/* The photo floats to one side and the copy wraps around it (then runs full
   width underneath), so a short photo next to a long text never leaves a hole. */
@media (min-width: 1280px) {
  .prose-tight .prose .img-text { display: flow-root; }
  .prose-tight .prose .img-text__media { float: left; width: clamp(280px, 40%, 400px); margin: 4px 40px 16px 0; }
  .prose-tight .prose .img-text--flip .img-text__media { float: right; margin: 4px 0 16px 40px; }
  .prose-tight .prose .img-text__body > :first-child { margin-top: 0; }
  .prose-tight .prose .img-text__media .prose-frame,
  .prose-tight .prose .img-text__media .wp-caption,
  .prose-tight .prose .img-text__media .wp-block-image,
  .prose-tight .prose .img-text__media .prose-figure,
  .prose-tight .prose .img-text__media > p { margin-bottom: 0; }
}
.img-text__media img { display: block; width: 100%; height: auto; border-radius: 22px; box-shadow: 0 2px 6px rgba(11,31,51,0.05), 0 10px 24px rgba(11,31,51,0.06); }

/* ---------- Image lightbox (assets/js/main.js; opened from [data-lightbox]) ---------- */
[data-lightbox] img:not(.no-lightbox) { cursor: zoom-in; }
[data-lightbox] img:focus-visible { outline: 3px solid var(--sage); outline-offset: 3px; }
html.lb-open { overflow: hidden; }
.scs-lightbox {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: 64px 72px; background: rgba(8,20,34,0.94);
  opacity: 0; transition: opacity .2s ease;
}
.scs-lightbox[hidden] { display: none; }
.scs-lightbox.is-open { opacity: 1; }
.scs-lightbox__img {
  display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  background: #fff; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,0.45);
}
.scs-lightbox__btn {
  position: absolute; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: rgba(255,255,255,0.14); color: #fff; font-size: 32px; line-height: 1;
  transition: background .2s ease;
}
.scs-lightbox__btn:hover { background: rgba(255,255,255,0.3); }
.scs-lightbox__btn:focus-visible { outline: 3px solid var(--sage-tint); outline-offset: 2px; }
.scs-lightbox__btn[hidden] { display: none; }
.scs-lightbox__close { top: 14px; right: 14px; }
.scs-lightbox__nav { top: 50%; transform: translateY(-50%); }
.scs-lightbox__nav--prev { left: 14px; }
.scs-lightbox__nav--next { right: 14px; }
.scs-lightbox__nav span { width: 12px; height: 12px; border-top: 3px solid currentColor; border-right: 3px solid currentColor; }
.scs-lightbox__nav--prev span { transform: translateX(3px) rotate(-135deg); }
.scs-lightbox__nav--next span { transform: translateX(-3px) rotate(45deg); }
.scs-lightbox__count { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: #fff; font-size: 15px; letter-spacing: 0.04em; }
.scs-lightbox__count[hidden] { display: none; }
@media (max-width: 720px) {
  .scs-lightbox { padding: 64px 12px 56px; }
  .scs-lightbox__nav { top: auto; bottom: 8px; transform: none; }
  .scs-lightbox__nav--prev { left: 14px; }
  .scs-lightbox__nav--next { right: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .scs-lightbox, .scs-lightbox__btn { transition: none; }
}

/* ---------- Photo carousel (runs of 2+ photos in an article body) ----------
   Built by scs_carousel_image_runs(); one photo per view at every width, native
   scroll-snap for swipe, arrows + dots (assets/js/main.js) for everything else. */
.prose .img-carousel { position: relative; width: 100%; max-width: 760px; margin-left: auto; margin-right: auto; }
.img-carousel__viewport {
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  background: #F7FAFC; border: 1px solid var(--border-light); border-radius: 22px;
  box-shadow: 0 2px 6px rgba(11,31,51,0.05), 0 10px 24px rgba(11,31,51,0.06);
}
.img-carousel__viewport::-webkit-scrollbar { display: none; }
.img-carousel__viewport:focus-visible { outline: 3px solid var(--sage); outline-offset: 3px; }
.img-carousel__track { display: flex; }
.img-carousel__slide {
  flex: 0 0 100%; min-width: 0; margin: 0; padding: 0;
  scroll-snap-align: center; scroll-snap-stop: always;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.prose .img-carousel__slide img {
  display: block; width: 100%; height: auto; max-width: 100%; max-height: 460px; margin: 0;
  object-fit: contain; border: 0; border-radius: 0; box-shadow: none; background: none;
}
.prose .img-carousel__slide figcaption { padding: 12px 18px 16px; font-size: 15px; line-height: 1.5; color: var(--slate); text-align: center; }
/* Arrows sit on the photo, centred on the viewport (the 40px dots row is below it). */
.img-carousel__btn {
  position: absolute; top: calc((100% - 40px) / 2); transform: translateY(-50%);
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: rgba(255,255,255,0.94); color: var(--navy);
  box-shadow: 0 4px 14px rgba(11,31,51,0.22);
  transition: background .2s ease, color .2s ease, opacity .2s ease;
}
.img-carousel__btn--prev { left: 12px; }
.img-carousel__btn--next { right: 12px; }
.img-carousel__btn span { width: 11px; height: 11px; border-top: 2.5px solid currentColor; border-right: 2.5px solid currentColor; }
.img-carousel__btn--prev span { transform: translateX(2px) rotate(-135deg); }
.img-carousel__btn--next span { transform: translateX(-2px) rotate(45deg); }
.img-carousel__btn:hover:not(:disabled) { background: var(--sage-deep); color: #fff; }
.img-carousel__btn:focus-visible, .img-carousel__dot:focus-visible { outline: 3px solid var(--sage); outline-offset: 2px; }
.img-carousel__btn:disabled { opacity: 0.35; cursor: default; }
.img-carousel__dots { display: flex; align-items: center; justify-content: center; height: 40px; gap: 2px; }
.img-carousel__dot { position: relative; width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; }
.img-carousel__dot::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px;
  transform: translate(-50%, -50%); border-radius: 999px; background: var(--border-light);
  transition: width .25s ease, background .25s ease;
}
.img-carousel__dot:hover::before { background: var(--sage-tint); }
.img-carousel__dot.is-active::before { width: 24px; background: var(--sage-deep); }
@media (max-width: 720px) {
  .img-carousel__btn { width: 40px; height: 40px; }
  .img-carousel__btn--prev { left: 8px; }
  .img-carousel__btn--next { right: 8px; }
  .prose .img-carousel__slide img { max-height: 340px; }
}
@media (prefers-reduced-motion: reduce) {
  .img-carousel__viewport { scroll-behavior: auto; }
  .img-carousel__btn, .img-carousel__dot::before { transition: none; }
}

/* ---------- Pillar-article extras (Balloon Sinuplasty pages) ---------- */
.prose .check-item--no::before { content: "✕"; background: var(--clay); }
.prose .prose-figure--wide img { max-width: 100%; }

.prose .table-scroll { overflow-x: auto; border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: 0 2px 6px rgba(11,31,51,0.05), 0 10px 24px rgba(11,31,51,0.06); }
.prose .compare-table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 15px; line-height: 1.5; }
.prose .compare-table th, .prose .compare-table td { padding: 13px 16px; text-align: left; vertical-align: top; }
.prose .compare-table thead th {
  background: var(--navy); color: #fff;
  font-family: var(--font-heading); font-weight: 700; font-size: 15px; line-height: 1.3;
}
.prose .compare-table thead a { color: var(--sage-tint); }
.prose .compare-table tbody th { color: var(--navy); font-weight: 600; }
.prose .compare-table tbody td { color: var(--body-color); }
.prose .compare-table tbody tr:nth-child(even) { background: #F7FAFC; }

.prose .stat-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.prose .stat-chip {
  display: flex; flex-direction: column; gap: 6px;
  background: #EFF4E7; border: 1px solid var(--sage-tint); border-radius: var(--radius-lg); padding: 22px;
  box-shadow: 0 2px 6px rgba(11,31,51,0.05), 0 10px 24px rgba(11,31,51,0.06);
}
.prose .stat-chip strong { font-family: var(--font-heading); font-weight: 800; font-size: 34px; line-height: 1; letter-spacing: -0.02em; color: var(--navy); }
.prose .stat-chip span { font-size: 15px; line-height: 1.5; }

.prose .review-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.prose .review-card {
  display: flex; flex-direction: column; gap: 12px;
  background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 22px 24px;
  box-shadow: 0 2px 6px rgba(11,31,51,0.05), 0 10px 24px rgba(11,31,51,0.06);
}
.prose .review-card__stars { font-size: 15px; letter-spacing: 0.14em; color: var(--gold); }
.prose .review-card p { font-style: italic; font-size: 16px; line-height: 1.7; }
.prose .review-card cite { font-family: var(--font-heading); font-weight: 700; font-size: 15px; color: var(--sage-deep); margin-top: auto; }

/* Watch card: portrait poster left, copy beside it (design). Clicking plays
   the YouTube video inline — main.js swaps the poster for an embed and adds
   .is-playing, which widens the thumb into a 16:9 player. */
.prose .watch-card {
  display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 22px;
  background: #F7FAFC; border: 1px solid var(--border-light); border-radius: 20px; padding: 18px;
  color: var(--navy); font-weight: 400;
  box-shadow: 0 2px 6px rgba(11,31,51,0.05), 0 10px 24px rgba(11,31,51,0.06);
}
.prose .watch-card:hover { text-decoration: none; }
.prose .watch-card:hover .watch-card__title { color: var(--sage-deep); }
.prose .watch-card__thumb {
  position: relative; flex: 1 1 260px; max-width: 320px;
  display: block; border-radius: 14px; overflow: hidden; background: var(--sage-wash); aspect-ratio: 4 / 5;
}
.prose .watch-card__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; }
.prose .watch-card__thumb::after {
  content: "▶"; position: absolute; inset: 0; margin: auto;
  width: 64px; height: 64px; border-radius: 50%; padding-left: 4px;
  background: rgba(94,106,55,0.82); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1;
  transition: transform 0.2s ease, background 0.2s ease;
}
.prose .watch-card:hover .watch-card__thumb::after { transform: scale(1.08); background: var(--sage-press); }
.prose .watch-card__copy { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.prose .watch-card__eyebrow { font-size: 15px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage-label); }
.prose .watch-card__title { font-family: var(--font-heading); font-weight: 700; font-size: 20px; line-height: 1.3; color: var(--navy); transition: color 0.2s ease; }
.prose .watch-card.is-playing { cursor: default; }
.prose .watch-card.is-playing .watch-card__thumb { flex: 1 1 100%; max-width: 100%; aspect-ratio: 16 / 9; }
.prose .watch-card.is-playing .watch-card__thumb::after { display: none; }
.prose .watch-card__thumb iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

.prose .faq-list { display: flex; flex-direction: column; gap: 10px; }
.prose .faq-item {
  background: #fff; border: 1px solid var(--border-light); border-radius: 14px;
  box-shadow: 0 2px 6px rgba(11,31,51,0.05), 0 10px 24px rgba(11,31,51,0.06);
}
.prose .faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  list-style: none; cursor: pointer; padding: 18px 22px;
  font-family: var(--font-heading); font-weight: 700; font-size: 17px; line-height: 1.4; color: var(--navy);
}
.prose .faq-item summary::-webkit-details-marker { display: none; }
.prose .faq-item summary::after { content: "+"; flex: none; font-size: 22px; font-weight: 400; color: var(--sage-label); transition: transform 0.2s ease; }
.prose .faq-item[open] summary::after { transform: rotate(45deg); }
.prose .faq-item p { padding: 0 22px 20px; font-size: 16.5px; line-height: 1.7; }

/* Videos in a body field — the converted embeds and anything pasted straight
   into the editor — match the content photos: centered, same width cap,
   rounded corners and card shadow. */
.prose .prose-video,
.prose > iframe,
.prose > p > iframe {
  display: block; float: none; margin: 0 auto 26px;
  width: 100%; max-width: min(740px, 100%); height: auto; aspect-ratio: 16 / 9;
  border: 0; border-radius: 22px; overflow: hidden;
  background: var(--navy-deep, #0B1F33);
  box-shadow: 0 2px 6px rgba(11,31,51,0.05), 0 10px 24px rgba(11,31,51,0.06);
}
.prose .prose-video iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- FAQs page ---------- */
.faq-topics { display: flex; flex-wrap: wrap; gap: 10px; padding-bottom: 36px; }
.faq-topics a {
  background: var(--mist); border: 1px solid var(--border-light); border-radius: 999px;
  padding: 10px 16px; font-size: 15px; font-weight: 600; color: var(--navy);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.faq-topics a:hover { background: #EDF1E4; color: var(--sage-press); }
.faq-topics a.is-active { background: var(--sage-deep); border-color: var(--sage-deep); color: #fff; }
.prose .faq-cat { display: flex; flex-direction: column; gap: 20px; }
.prose .faq-cat + .faq-cat { margin-top: 44px; }

/* ---------- Videos page ---------- */
.videos-inner {
  max-width: 1100px; margin: 0 auto; padding: 64px var(--gutter) 72px;
  display: flex; flex-direction: column; gap: 40px;
}
.videos-embed-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.videos-embed {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: var(--ink); border: 1px solid var(--border-light); border-radius: 18px; overflow: hidden;
  box-shadow: 0 2px 6px rgba(11,31,51,0.05), 0 10px 24px rgba(11,31,51,0.06);
}
.videos-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.videos-note {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px;
  background: #F7FAFC; border: 1px solid var(--border-light); border-radius: 18px; padding: 30px 32px;
  box-shadow: 0 2px 6px rgba(11,31,51,0.05), 0 10px 24px rgba(11,31,51,0.06);
}
.videos-note p { margin: 0; font-size: 17.5px; line-height: 1.7; color: var(--body-color); }

/* ---------- Ebooks page ---------- */
.ebooks-inner { max-width: 1100px; margin: 0 auto; padding: 64px var(--gutter) 72px; }
.ebooks-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: stretch; }
.ebook-card {
  display: flex; flex-direction: column; gap: 20px;
  background: #fff; border: 1px solid var(--border-light); border-radius: 18px; padding: 24px;
  color: inherit;
  box-shadow: 0 2px 6px rgba(11,31,51,0.05), 0 10px 24px rgba(11,31,51,0.06);
  transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.ebook-card:hover { transform: translateY(-4px); box-shadow: 0 22px 46px rgba(11,31,51,0.12); border-color: var(--sage-tint); color: inherit; }
.ebook-card img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid #EDF1F5; }
.ebook-card__copy { display: flex; flex-direction: column; gap: 12px; margin-top: auto; }
.ebook-card__title {
  font-family: var(--font-heading); font-weight: 800; font-size: 20px;
  line-height: 1.28; letter-spacing: -0.018em; color: var(--navy);
}
.ebook-card__more {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage-deep);
}
.ebook-card__more .arrow { display: inline-block; transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1); }
.ebook-card:hover .ebook-card__more .arrow { transform: translateX(5px); }

/* ---------- Insurances page ---------- */
.ins-inner {
  max-width: 1100px; margin: 0 auto; padding: 64px var(--gutter) 72px;
  display: flex; flex-direction: column; gap: 44px;
}
.ins-intro { display: flex; flex-direction: column; gap: 18px; }
.ins-intro h2 {
  font-family: var(--font-heading); font-weight: 800; font-size: 30px;
  line-height: 1.18; letter-spacing: -0.022em; margin: 0; color: var(--navy);
}
.ins-intro p { margin: 0; font-size: 17.5px; line-height: 1.7; color: var(--body-color); }
.ins-intro strong { color: var(--navy); }
.ins-logos { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; padding-top: 8px; }
.ins-logos a {
  flex: 0 1 210px; display: flex; align-items: center;
  background: #fff; border: 1px solid var(--border-light); border-radius: 14px; padding: 14px;
  box-shadow: 0 2px 6px rgba(11,31,51,0.05), 0 10px 24px rgba(11,31,51,0.06);
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.ins-logos a:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(11,31,51,0.12); border-color: var(--sage-tint); }
.ins-logos img { display: block; width: 100%; height: auto; border-radius: 10px; }
.ins-boxes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.ins-box {
  display: flex; flex-direction: column; gap: 14px;
  background: #F7FAFC; border: 1px solid var(--border-light); border-radius: 18px; padding: 30px 32px;
  box-shadow: 0 2px 6px rgba(11,31,51,0.05), 0 10px 24px rgba(11,31,51,0.06);
}
.ins-box h2 {
  font-family: var(--font-heading); font-weight: 800; font-size: 23px;
  line-height: 1.26; letter-spacing: -0.02em; margin: 0; color: var(--navy);
}
.ins-box p { margin: 0; font-size: 17.5px; line-height: 1.7; color: var(--body-color); }
.ins-box strong { color: var(--navy); }
.ins-box__phone {
  display: inline-flex; align-items: center; gap: 12px; width: fit-content; margin-top: auto;
  background: var(--sage-deep); color: #fff;
  font-family: var(--font-heading); font-weight: 800; font-size: 22px;
  padding: 16px 28px; border-radius: var(--radius);
  transition: background 0.2s ease, transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.ins-box__phone:hover { background: var(--sage-press); color: #fff; transform: translateY(-2px); }

/* ---------- Contact page ---------- */
.contact-cards {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr; gap: 20px;
}
.contact-card-box {
  display: flex; flex-direction: column; gap: 10px;
  background: #F7FAFC; border: 1px solid var(--border-light); border-radius: 14px;
  padding: 26px 28px;
  box-shadow: 0 2px 6px rgba(11,31,51,0.05), 0 10px 24px rgba(11,31,51,0.06);
}
.contact-card-box__title {
  font-size: 15px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sage-label);
}
.contact-card-box__body { font-size: 17px; line-height: 1.7; color: var(--body-color); }
.contact-card-box__phone {
  display: flex; align-items: center; flex: 1 1 auto;
  font-family: var(--font-heading); font-weight: 800; font-size: 26px;
  line-height: 1.2; color: var(--navy); white-space: nowrap;
}
.contact-card-box__phone:hover { color: var(--sage-deep); }

.contact-main {
  margin-top: 40px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto 1fr; gap: 40px 56px; align-items: stretch;
}
.contact-intro { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 20px; }
.contact-intro h2 {
  font-family: var(--font-heading); font-weight: 800; font-size: 30px;
  line-height: 1.16; letter-spacing: -0.024em; margin: 0; color: var(--navy);
}
.contact-intro p { margin: 0; font-size: 17.5px; line-height: 1.7; color: var(--body-color); }
.contact-intro a { color: var(--clinical-blue); font-weight: 600; }
.contact-intro a:hover { text-decoration: underline; text-underline-offset: 3px; }
.contact-map {
  grid-column: 1; grid-row: 2; min-height: 320px;
  border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-light);
  box-shadow: 0 2px 6px rgba(11,31,51,0.05), 0 10px 24px rgba(11,31,51,0.06);
}
.contact-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.contact-form-card {
  grid-column: 2; grid-row: 1 / span 2;
  display: flex; flex-direction: column; gap: 20px;
  background: #F7FAFC; border: 1px solid var(--border-light); border-radius: 18px;
  padding: 34px 36px;
  box-shadow: 0 2px 6px rgba(11,31,51,0.05), 0 10px 24px rgba(11,31,51,0.06);
}
.contact-form-card h2 {
  font-family: var(--font-heading); font-weight: 800; font-size: 26px;
  line-height: 1.2; letter-spacing: -0.022em; margin: 0; color: var(--navy);
}
.contact-form { display: flex; flex-direction: column; gap: 20px; }
.contact-form__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.contact-form label { display: flex; flex-direction: column; gap: 8px; }
.contact-form label > span {
  font-size: 15px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--slate);
}
.contact-form__message { grid-column: 1 / -1; }
.contact-form input, .contact-form textarea {
  font-family: var(--font-body); font-size: 16px; color: var(--ink);
  background: #fff; border: 1px solid var(--border-field); border-radius: 10px;
  padding: 14px 16px; outline: none; width: 100%;
}
.contact-form textarea { resize: vertical; }
.contact-form input:focus, .contact-form textarea:focus {
  border-color: var(--sage); box-shadow: 0 0 0 3px rgba(142,154,99,0.18);
}
/* "Are you a new client?" Yes/No radios (CF7 radio tag). */
.contact-form__radios { display: flex; flex-direction: column; gap: 10px; }
/* The radio group is a <fieldset>/<legend> so the question is announced with
   each option; the legend keeps the look of the old <span> label. */
/* Used on the contact page and inside the landing form, so this is keyed on
   the class alone — a fieldset only carries it to group the radios, never
   to draw the browser default frame around them. */
fieldset.contact-form__radios { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.contact-form__radios > span,
.contact-form__radios > legend { font-size: 15px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); padding: 0; }
.contact-form__radios .wpcf7-form-control-wrap { display: block; }
.contact-form__radios .wpcf7-radio { display: flex; flex-wrap: wrap; gap: 10px; }
.contact-form__radios .wpcf7-list-item { margin: 0; display: block; }
.contact-form__radios .wpcf7-list-item label {
  display: flex; flex-direction: row; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--border-field); border-radius: 10px;
  padding: 12px 20px; font-size: 16px; color: var(--body-color); cursor: pointer;
}
.contact-form__radios input[type="radio"] { accent-color: var(--sage-deep); width: 18px; height: 18px; }
/* CF7 acceptance checkbox (disclaimer consent): checkbox inline beside
   normal-case text, undoing the uppercase field-label styling. Matched in
   the landing form too, whose label rule would otherwise stack the box
   above the sentence and stretch it to the full width. */
.contact-form .wpcf7-acceptance,
.lp-form .wpcf7-acceptance { display: block; }
.contact-form .wpcf7-acceptance .wpcf7-list-item,
.lp-form .wpcf7-acceptance .wpcf7-list-item { margin: 0; display: block; }
.contact-form .wpcf7-acceptance label,
.lp-form .wpcf7-acceptance label { display: flex; flex-direction: row; align-items: flex-start; gap: 12px; cursor: pointer; }
.contact-form .wpcf7-acceptance .wpcf7-list-item-label,
.lp-form .wpcf7-acceptance .wpcf7-list-item-label {
  font-size: 15px; font-weight: 400; letter-spacing: 0; text-transform: none;
  color: var(--slate); line-height: 1.7;
}
.contact-form .wpcf7-acceptance input[type="checkbox"],
.lp-form .wpcf7-acceptance input[type="checkbox"] {
  flex: none; width: 18px; height: 18px; margin-top: 3px; accent-color: var(--sage-deep);
}
.contact-form__note { margin: 0; font-size: 15px; line-height: 1.7; color: var(--slate); }
.contact-form .btn { align-self: flex-start; }

/* Contact Form 7 shims: the shared CF7 form template wraps its fields in the
   .contact-form classes above, so it inherits the designed look everywhere
   (contact page card, homepage appointment card, landing hero). These rules
   neutralize the plugin's extra wrappers and style its states. */
.contact-form p { margin: 0; }
.contact-form br { display: none; }
.contact-form .wpcf7-form-control-wrap { display: block; width: 100%; }
/* The wrap is a span inside the label — undo the uppercase field-label styling for it. */
.contact-form label > .wpcf7-form-control-wrap { font-size: 16px; font-weight: 400; letter-spacing: 0; text-transform: none; color: inherit; }
.contact-form .wpcf7-not-valid-tip { display: block; padding-top: 6px; font-size: 15px; color: var(--clay); }
.contact-form input.wpcf7-not-valid, .contact-form textarea.wpcf7-not-valid { border-color: var(--clay); }
/* The submit button: wide (but not full-width) and sage green wherever the
   shared form renders, with or without the btn classes on the CF7 tag. */
.contact-form input[type="submit"] {
  display: inline-block; width: auto; min-width: 280px; padding: 17px 56px;
  background: var(--sage-deep); color: #fff; border: 0; border-radius: var(--radius);
  font-family: var(--font-body); font-weight: 700; font-size: 15px;
  letter-spacing: 0.1em; text-transform: uppercase; text-align: center; cursor: pointer;
  transition: background 0.2s ease, transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.28s ease;
}
.contact-form input[type="submit"]:hover {
  background: var(--sage-press); color: #fff;
  transform: translateY(-2px); box-shadow: 0 14px 28px rgba(11,31,51,0.18);
}
.wpcf7 form .wpcf7-response-output {
  margin: 16px 0 0; padding: 14px 18px;
  border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 15px; line-height: 1.5; color: var(--navy); background: #fff;
}
.wpcf7 form.sent .wpcf7-response-output { background: #EFF4E7; border-color: var(--sage-tint); color: var(--sage-press); }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output { border-color: var(--clay); color: var(--clay); background: #fff; }
.wpcf7-spinner { margin: 0 0 0 12px; }
.contact-reviews > div { min-height: 440px; width: 100%; }

/* ---------- Blog directory ---------- */
.blogdir-filter { background: #fff; border-bottom: 1px solid var(--border-light); position: sticky; top: 96px; z-index: 40; }
.blogdir-filter__inner {
  max-width: var(--container); margin: 0 auto; padding: 26px var(--gutter);
  display: flex; flex-wrap: wrap; gap: 18px 32px; align-items: center; justify-content: space-between;
}
.blogdir-search {
  flex: 0 1 420px; min-width: 280px; display: flex; align-items: center; gap: 12px;
  background: var(--mist); border: 1px solid var(--border-light); border-radius: 14px; padding: 0 16px;
  color: var(--sage-deep);
  box-shadow: 0 2px 6px rgba(11,31,51,0.05), 0 10px 24px rgba(11,31,51,0.06);
}
.blogdir-search svg { flex: none; }
.blogdir-search input {
  flex: 1 1 auto; border: 0; background: transparent; outline: none;
  font-family: var(--font-body); font-size: 16px; color: var(--ink); padding: 15px 0;
}
.blogdir-chips { flex: 1 1 520px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.blogdir-chip {
  background: var(--mist); border: 1px solid var(--border-light); border-radius: 999px;
  padding: 9px 15px; font-size: 15px; font-weight: 600; color: var(--navy);
}
.blogdir-chip:hover { background: #EDF1E4; color: var(--sage-press); }
.blogdir-chip.is-active { background: var(--sage-deep); border-color: var(--sage-deep); color: #fff; }

.blogdir-featured { background: #fff; }
.blogdir-featured__inner { max-width: var(--container); margin: 0 auto; padding: 64px var(--gutter) 0; }
.blogdir-featured__card {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  background: #fff; border: 1px solid var(--border-light); border-radius: 26px; overflow: hidden;
  color: inherit; box-shadow: 0 2px 6px rgba(11,31,51,0.05), 0 10px 24px rgba(11,31,51,0.06);
  transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.blogdir-featured__card:hover { transform: translateY(-4px); box-shadow: 0 22px 46px rgba(11,31,51,0.12); border-color: var(--sage-tint); color: inherit; }
.blogdir-featured__media { min-height: 420px; background: var(--sky-wash); }
.blogdir-featured__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.blogdir-featured__copy { padding: 56px; display: flex; flex-direction: column; gap: 20px; justify-content: center; }
.blogdir-featured__copy h2 {
  font-family: var(--font-heading); font-weight: 800; font-size: 38px;
  line-height: 1.14; letter-spacing: -0.024em; margin: 0; color: var(--navy);
}
.blogdir-featured__copy p { margin: 0; font-size: 17.5px; line-height: 1.7; color: var(--body-color); }

.blogdir-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.blogdir-meta__flag {
  background: #EDF1E4; color: var(--sage-press); font-size: 15px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 8px 14px; border-radius: 999px;
}
.blogdir-meta__cat { font-size: 15px; font-weight: 600; color: var(--sage-deep); }
.blogdir-meta__date { font-size: 15px; color: var(--slate); }
.blogdir-more {
  display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--clinical-blue);
}
.blogdir-more .arrow { display: inline-block; transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1); }
.blogdir-featured__card:hover .blogdir-more .arrow,
.blogdir-card:hover .blogdir-more .arrow { transform: translateX(5px); }

.blogdir-posts { background: #fff; }
.blogdir-posts__inner {
  max-width: var(--container); margin: 0 auto; padding: 64px var(--gutter) 88px;
  display: flex; flex-direction: column; gap: 32px;
}
.blogdir-posts__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; }
.blogdir-posts__head h2 { font-family: var(--font-heading); font-weight: 800; font-size: 28px; letter-spacing: -0.02em; margin: 0; color: var(--navy); }
.blogdir-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.blogdir-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--border-light); border-radius: 22px; overflow: hidden;
  color: inherit; box-shadow: 0 2px 6px rgba(11,31,51,0.05), 0 10px 24px rgba(11,31,51,0.06);
  transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.blogdir-card:hover { transform: translateY(-4px); box-shadow: 0 22px 46px rgba(11,31,51,0.12); border-color: var(--sage-tint); color: inherit; }
.blogdir-card__media { aspect-ratio: 16 / 10; background: var(--sky-wash); }
.blogdir-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.blogdir-card__copy { padding: 28px 28px 32px; display: flex; flex-direction: column; gap: 14px; flex: 1 1 auto; }
.blogdir-card__copy h3 {
  font-family: var(--font-heading); font-weight: 800; font-size: 21px;
  line-height: 1.28; letter-spacing: -0.016em; margin: 0; color: var(--navy);
}
.blogdir-card__copy p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--body-color); }
.blogdir-card .blogdir-more { margin-top: auto; padding-top: 6px; font-size: 15px; }

.blogdir-posts .navigation.pagination { border: 0; }
.blogdir-posts .nav-links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.blogdir-posts .nav-links .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 46px; height: 46px; padding: 0 14px; border-radius: 12px;
  background: var(--mist); border: 1px solid var(--border-light);
  font-weight: 600; font-size: 15px; color: var(--navy);
}
.blogdir-posts .nav-links .page-numbers.current { background: var(--sage-deep); border-color: var(--sage-deep); color: #fff; }
.blogdir-posts .nav-links a.page-numbers:hover { background: #EDF1E4; color: var(--sage-press); }

.blogdir-empty {
  background: var(--mist); border: 1px solid var(--border-light); border-radius: 22px;
  padding: 48px 32px; text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center;
}
.blogdir-empty h3 { font-family: var(--font-heading); font-weight: 800; font-size: 24px; margin: 0; color: var(--navy); }
.blogdir-empty p { margin: 0; font-size: 16.5px; line-height: 1.7; color: var(--body-color); max-width: 52ch; }
.blogdir-empty a { font-family: var(--font-heading); font-weight: 800; font-size: 20px; color: var(--navy); }

.blogdir-cats { background: var(--mist); border-top: 1px solid var(--border-light); }
.blogdir-cats__inner {
  max-width: var(--container); margin: 0 auto; padding: 72px var(--gutter);
  display: flex; flex-direction: column; gap: 28px;
}
.blogdir-cats__inner h2 { font-family: var(--font-heading); font-weight: 800; font-size: 28px; letter-spacing: -0.02em; margin: 0; color: var(--navy); }
.blogdir-cats__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.blogdir-cats__grid a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: #fff; border: 1px solid var(--border-light); border-top: 3px solid var(--sage);
  border-radius: 18px; padding: 24px 26px;
  color: var(--navy); font-family: var(--font-heading); font-weight: 700; font-size: 17px;
  transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.3s ease;
}
.blogdir-cats__grid a:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(11,31,51,0.12); color: var(--sage-deep); }
.blogdir-cats__grid .arrow { color: var(--sage-label); }

/* ---------- Single post ---------- */
.blogpost-crumbs {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 15px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--sage-tint);
}
.blogpost-crumbs a { color: var(--sage-tint); }
.blogpost-crumbs a:hover { color: #fff; }
.blogpost-meta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font-size: 16px; color: var(--navy-tint); }
.blogpost-meta span[aria-hidden] { opacity: 0.5; }

/* ---------- Blog Post (design: Blog Post.dc.html) ---------- */

.blogpost-section { background: #fff; }
.blogpost-layout {
  max-width: var(--container); margin: 0 auto;
  padding: 26px var(--gutter) 88px;
  display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-start;
}
.blogpost-body {
  flex: 1 1 620px; min-width: 0;
  display: flex; flex-direction: column; gap: 26px;
  font-size: 17.5px; line-height: 1.8; color: var(--body-color);
}
.blogpost-body > * { margin: 0; }
.blogpost-body h2 {
  font-family: var(--font-heading); font-weight: 800; font-size: 30px; line-height: 1.18;
  letter-spacing: -0.022em; margin: 22px 0 0; color: var(--navy); text-wrap: pretty;
  scroll-margin-top: 140px;
}
.blogpost-body h3 {
  font-family: var(--font-heading); font-weight: 700; font-size: 22px; line-height: 1.3;
  margin: 14px 0 0; color: var(--navy); scroll-margin-top: 140px;
}
.blogpost-body a { color: var(--clinical); font-weight: 600; }

/* Lead photo: 16:9 crop with the sage outline offset behind it, down and to
   the left. The frame is its own element rather than a ::before so the photo
   can keep overflow:hidden for its rounded corners. */
.blogpost-hero {
  position: relative; width: 100%; max-width: 760px; margin: 0 auto;
  padding: 0 0 22px 22px; box-sizing: border-box;
}
.blogpost-hero__frame {
  position: absolute; left: 0; bottom: 0;
  width: calc(100% - 26px); height: calc(100% - 26px);
  border: 1.5px solid var(--sage-tint); border-radius: 22px; pointer-events: none;
}
.blogpost-hero__media {
  position: relative; display: block; aspect-ratio: 16 / 9;
  border-radius: 22px; overflow: hidden; background: #DCE6EE;
  box-shadow: 0 2px 6px rgba(11,31,51,0.05), 0 10px 24px rgba(11,31,51,0.06);
}
.blogpost-hero__media img {
  position: absolute; inset: 0; display: block;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;
}

/* Body lists read as a checklist, matching the ticked items in the design.
   NOT flex: the design can flex its items because it wraps each item's text in
   one <span>, but real post content is loose inline — <li><a>term</a>, rest of
   sentence…</li> — and flex turns the link and the text into separate columns
   that wrap independently. The tick is absolutely positioned instead, so the
   item's content stays ordinary inline flow and wraps as a sentence. */
.blogpost-body ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.blogpost-body ul li {
  position: relative; padding-left: 32px;
  font-size: 16.5px; line-height: 1.65; color: var(--body-color);
}
.blogpost-body ul li::before {
  content: "\2713"; position: absolute; left: 0; top: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(94,106,55,0.14); color: var(--sage-deep);
  font-size: 12px; font-weight: 700; line-height: 20px; text-align: center;
}
.blogpost-body ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 12px; }

/* "Also Read" callout — a card, not a sentence (scs_wrap_also_read). */
.blogpost-body .also-read {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--mist); border: 1px solid var(--border-light); border-radius: 16px;
  padding: 20px 24px;
  box-shadow: 0 2px 6px rgba(11,31,51,0.05), 0 10px 24px rgba(11,31,51,0.06);
}
.blogpost-body .also-read > span {
  font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sage-label); white-space: nowrap;
}
.blogpost-body .also-read a { font-size: 17px; line-height: 1.5; }

/* FAQ accordions (scs_faq_accordions emits <details class="faq-item">). */
.blogpost-body .faq-list { display: flex; flex-direction: column; gap: 14px; }
.blogpost-body .faq-item {
  border: 1px solid var(--border-light); border-radius: 18px; background: #fff; overflow: hidden;
  box-shadow: 0 2px 6px rgba(11,31,51,0.05), 0 10px 24px rgba(11,31,51,0.06);
}
.blogpost-body .faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 26px; cursor: pointer; list-style: none;
  font-family: var(--font-heading); font-weight: 700; font-size: 18px; line-height: 1.4; color: var(--navy);
}
.blogpost-body .faq-item summary::-webkit-details-marker { display: none; }
.blogpost-body .faq-item summary::after {
  content: "+"; flex: none; font-size: 22px; font-weight: 400; color: var(--sage-label);
  transition: transform 0.2s ease;
}
.blogpost-body .faq-item[open] summary::after { transform: rotate(45deg); }
.blogpost-body .faq-item__body { padding: 0 26px 24px; }
.blogpost-body .faq-item__body p { margin: 0; font-size: 17px; line-height: 1.8; }
.blogpost-body .faq-item__body p + p { margin-top: 14px; }

/* Back to all articles */
.blogpost-back { display: flex; padding-top: 18px; border-top: 1px solid #EDF1F5; margin-top: 14px; }
.blogpost-back__link {
  display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px;
  border: 1.5px solid var(--navy); border-radius: 999px;
  color: var(--navy); font-size: 16px; font-weight: 700; line-height: 1.2;
  transition: background 0.2s ease, color 0.2s ease;
}
.blogpost-back__link:hover { background: var(--navy); color: #fff; text-decoration: none; }

/* Everything else a post body can contain. The blog article does not use the
   shared .prose styles any more — the design specifies its own type scale, and
   letting both apply meant every rule had to out-specify the other. */
.blogpost-body a:hover { text-decoration: underline; text-underline-offset: 3px; }
.blogpost-body strong { color: var(--navy); }
.blogpost-body h2:first-child, .blogpost-body h3:first-child { margin-top: 0; }
.blogpost-body img { max-width: 100%; height: auto; }

/* Photos inside the copy (scs_frame_content_images wraps them at render time). */
.blogpost-body .prose-frame,
.blogpost-body figure:not(.blogpost-hero) {
  display: block; width: 100%; max-width: 760px; margin: 44px auto 22px;
}
.blogpost-body .prose-frame img,
.blogpost-body figure:not(.blogpost-hero) img {
  display: block; width: 100%; height: auto; border-radius: 22px;
  box-shadow: 0 2px 6px rgba(11,31,51,0.05), 0 10px 24px rgba(11,31,51,0.06);
}
.blogpost-body figcaption {
  padding-top: 10px; font-size: 15px; color: var(--slate); text-align: center;
}

.blogpost-body blockquote {
  margin: 0; padding: 22px 26px; font-style: italic;
  background: var(--mist); border: 1px solid var(--border-light); border-radius: 18px;
}
.blogpost-body table { width: 100%; border-collapse: collapse; font-size: 16px; }
.blogpost-body th, .blogpost-body td {
  padding: 12px 14px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--border-light);
}
.blogpost-body thead th { background: var(--navy); color: #fff; border-bottom: 0; }

/* ---------- Blog Post sidebar ---------- */

.blogpost-aside {
  flex: 0 1 380px; min-width: 300px; align-self: flex-start;
  position: sticky; top: 116px; max-height: calc(100vh - 140px); overflow-y: auto;
  display: flex; flex-direction: column; gap: 24px;
}
.blogside {
  background: #fff; border: 1px solid var(--border-light); border-radius: 20px; padding: 26px 28px;
  display: flex; flex-direction: column; gap: 16px;
  box-shadow: 0 2px 6px rgba(11,31,51,0.05), 0 10px 24px rgba(11,31,51,0.06);
}
.blogside__title {
  font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sage-label);
}
.blogside--toc { gap: 4px; }
.blogside--toc .blogside__title { margin-bottom: 10px; }
.blogside--toc a {
  display: block; padding: 9px 0 9px 14px; border-left: 2px solid var(--border-light);
  color: var(--body-color); font-size: 15px; font-weight: 500; line-height: 1.45;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.blogside--toc a:hover { color: var(--navy); text-decoration: none; }
.blogside--toc a.is-current { border-left-color: var(--sage-deep); color: var(--navy); font-weight: 700; }
.blogside--recent { gap: 14px; }
.blogside--recent a {
  display: block; padding: 12px 0; border-top: 1px solid #EDF1F5;
  color: var(--navy); font-size: 16px; font-weight: 600; line-height: 1.45;
}
.blogside--recent a:first-of-type { border-top: 0; padding-top: 0; }
.blogside--recent a:hover { color: var(--sage-deep); text-decoration: none; }
.blogside--recent a[aria-current="page"] { color: var(--sage-deep); }

/* Read-aloud player (browser speech synthesis; hidden when unsupported) */
.audio-player { display: flex; align-items: center; gap: 14px; }
.audio-player__toggle {
  flex: none; width: 52px; height: 52px; border-radius: 999px; border: 0;
  background: var(--navy); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease;
}
.audio-player__toggle:hover { background: var(--sage-deep); }
.audio-player__icon--play { margin-left: 3px; }
.audio-player__icon--pause { display: none; }
.audio-player.is-playing .audio-player__icon--play { display: none; }
.audio-player.is-playing .audio-player__icon--pause { display: block; }
.audio-player__readout { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.audio-player__status { font-size: 15px; font-weight: 600; color: var(--navy); }
.audio-player__bar { height: 6px; border-radius: 999px; background: #EDF1F5; overflow: hidden; }
.audio-player__bar span {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: var(--sage-deep); transition: width 0.4s ease;
}
.audio-player__controls {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.audio-player__rates { display: flex; gap: 6px; }
.audio-player__rates button {
  padding: 6px 11px; border-radius: 999px; border: 1px solid var(--border-light);
  background: var(--mist); color: var(--navy);
  font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.audio-player__rates button[aria-pressed="true"] { border-color: var(--navy); background: var(--navy); color: #fff; }
.audio-player__restart {
  background: transparent; border: 0; padding: 6px 0; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--clinical);
}
.audio-player__restart:hover { color: var(--sage-deep); }

/* Phones: the sidebar stops being a sidebar and the type comes down a step. */
@media (max-width: 1080px) {
  .blogpost-layout { gap: 40px; }
  .blogpost-aside { position: static; max-height: none; overflow: visible; flex-basis: 100%; }
}
@media (max-width: 720px) {
  .blogpost-layout { padding: 20px var(--gutter) 56px; gap: 32px; }
  .blogpost-body { font-size: 16.5px; gap: 22px; }
  .blogpost-body h2 { font-size: 25px; }
  .blogpost-hero { padding: 0 0 16px 16px; }
  .blogpost-hero__frame { width: calc(100% - 20px); height: calc(100% - 20px); }
  .blogside { padding: 22px 20px; }
  .blogpost-body .faq-item summary { padding: 18px 20px; font-size: 17px; }
  .blogpost-body .faq-item__body { padding: 0 20px 20px; }
}

/* "Also Read" callout writers can use inside post content. */
.prose .also-read {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--mist); border: 1px solid var(--border-light); border-radius: var(--radius-lg);
  padding: 20px 24px;
  box-shadow: 0 2px 6px rgba(11,31,51,0.05), 0 10px 24px rgba(11,31,51,0.06);
}
.prose .also-read > span {
  font-size: 15px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage-label);
}

/* The practice address is a Maps link wherever it appears (scs_address_link).
   It must not announce itself as a link in the middle of a footer column — it
   inherits the surrounding colour and only underlines on hover/focus. */
.address-link { color: inherit; text-decoration: none; }
.address-link:hover, .address-link:focus-visible { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Answers inside an auto-built FAQ accordion (scs_faq_accordions wraps whatever
   the editor wrote — paragraphs, lists, a table — in this one element). */
.prose .faq-item__body { padding: 0 22px 20px; }
.prose .faq-item__body > :first-child { margin-top: 0; }
.prose .faq-item__body p { padding: 0; }
.prose .faq-item__body p + p,
.prose .faq-item__body ul, .prose .faq-item__body ol { margin-top: 12px; }

.blogside-card {
  background: #fff; border: 1px solid var(--border-light); border-radius: 20px; padding: 26px 28px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 2px 6px rgba(11,31,51,0.05), 0 10px 24px rgba(11,31,51,0.06);
}
.blogside-card__title { font-size: 15px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage-label); }
.blogside-card__link {
  display: block; padding: 12px 0; border-top: 1px solid #EDF1F5;
  color: var(--navy); font-size: 16px; font-weight: 600; line-height: 1.45;
}
.blogside-card__link:first-of-type { border-top: 0; padding-top: 0; }
.blogside-card__link:hover { color: var(--sage-deep); }
.blogside-card__chips { display: flex; flex-wrap: wrap; gap: 9px; }
.blogside-card__chips a {
  background: var(--mist); border: 1px solid var(--border-light); border-radius: 999px;
  padding: 9px 15px; font-size: 15px; font-weight: 600; color: var(--navy);
}
.blogside-card__chips a:hover { background: #EDF1E4; color: var(--sage-press); }

/* ---------- Generic inner-page section shells ---------- */
.page-section { background: #fff; }
.page-section--tint { background: var(--mist); }
.page-section--soft { background: #F7FAFC; }
.page-section--line-top { border-top: 1px solid var(--border-light); }
.page-section--line-bottom { border-bottom: 1px solid var(--border-light); }
.page-section__inner { max-width: var(--container); margin: 0 auto; padding: 80px var(--gutter); }
.page-section__inner--narrow { max-width: 980px; }
.page-section__inner--reading { max-width: 900px; }
.page-section__inner--mid { max-width: 1280px; }

/* Centered eyebrow + heading intro used on light & dark sections. */
.centered-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.centered-head h2 { font-weight: 800; font-size: 44px; line-height: 1.06; letter-spacing: -0.026em; max-width: 24ch; }
.centered-head p { font-size: 17px; line-height: 1.6; color: var(--body-color); margin: 0; max-width: 72ch; text-wrap: pretty; }

/* ---------- Split: prose column + sticky portrait ---------- */
.split { display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-start; }
.split__main { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.split__aside { flex: 1 1 420px; max-width: 560px; position: sticky; top: 120px; align-self: flex-start; }
.split__aside--narrow { flex: 1 1 360px; max-width: 440px; }
.sticky-figure { border-radius: 18px; overflow: hidden; box-shadow: 0 26px 60px rgba(11,31,51,0.16); background: var(--sky-wash); }
.sticky-figure img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 16%; }
.rating-card {
  position: relative; margin: -70px -18px 0 auto; width: fit-content;
  background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-lg);
  padding: 18px 22px; box-shadow: 0 18px 40px rgba(11,31,51,0.16);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.rating-card strong { font-family: var(--font-heading); font-weight: 800; font-size: 30px; line-height: 1; color: var(--gold); font-variant-numeric: tabular-nums; }
.rating-card span { font-size: 15px; font-weight: 600; color: var(--slate); white-space: nowrap; }

/* Framed photo: offset sage outline behind an image block. */
.frame-offset { position: relative; }
.frame-offset::before {
  content: ""; position: absolute; top: 24px; left: -24px; right: 24px; bottom: -24px;
  border: 2px solid var(--sage-tint); border-radius: 20px; pointer-events: none;
}
.frame-offset > * { position: relative; border-radius: var(--radius-lg); overflow: hidden; }

/* ---------- Dark gradient section (Meet: expertise) ---------- */
.section-dark {
  position: relative; overflow: hidden; color: #EAF2F8;
  background: linear-gradient(118deg, #0B1F33 0%, #14395C 46%, #2A4A45 78%, #3E5340 100%);
}
.section-dark .page-section__inner { position: relative; }
.section-dark h2 { color: #fff; }
.section-dark .prose { color: #C9DCEB; }
.section-dark .eyebrow { color: var(--sage-tint); }
.section-dark .eyebrow::before { background: var(--sage-tint); }
.stat-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.stat-tile {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius-lg); padding: 30px 28px;
  display: flex; flex-direction: column; gap: 8px;
}
.stat-tile strong { font-family: var(--font-heading); font-weight: 800; font-size: 40px; letter-spacing: -0.02em; color: #fff; }
.stat-tile strong.is-text { font-weight: 700; font-size: 19px; line-height: 1.3; letter-spacing: 0; }
.stat-tile span { font-size: 15px; line-height: 1.5; color: #C9DCEB; }
.stat-tile .stat-tile__badge { background: #fff; border-radius: 14px; padding: 16px 20px; display: inline-flex; width: fit-content; max-width: 100%; margin-top: auto; }
.stat-tile .stat-tile__badge img { height: 62px; width: auto; max-width: 100%; object-fit: contain; display: block; }

/* ---------- Cards: affiliations, highlight, awards rows ---------- */
.affil-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.affil-card {
  flex: 1 1 230px; max-width: 320px; background: #F7FAFC;
  border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 26px 22px;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 2px 6px rgba(11,31,51,0.05), 0 10px 24px rgba(11,31,51,0.06);
}
.affil-card figure { height: 76px; display: flex; align-items: center; margin: 0; }
.affil-card figure img { max-height: 76px; max-width: 150px; width: auto; height: auto; object-fit: contain; }
.affil-card strong { font-family: var(--font-heading); font-weight: 700; font-size: 16.5px; line-height: 1.32; color: var(--navy); text-wrap: pretty; }
.affil-card span { font-size: 15px; line-height: 1.5; color: var(--body-color); margin-top: auto; }

.hl-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.hl-card {
  flex: 1 1 320px; max-width: 560px; background: #EFF4E7;
  border: 1px solid var(--sage-tint); border-radius: var(--radius-lg); padding: 28px 30px;
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 2px 6px rgba(11,31,51,0.05), 0 10px 24px rgba(11,31,51,0.06);
}
.hl-card .hl-card__kicker { font-size: 15px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage-deep); }
.hl-card strong { font-family: var(--font-heading); font-weight: 700; font-size: 20px; line-height: 1.3; color: var(--navy); }
.hl-card span { font-size: 15px; color: var(--body-color); }

.award-rows { display: flex; flex-direction: column; gap: 12px; }
.award-row {
  display: flex; align-items: center; gap: 20px; background: #fff;
  border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 20px 22px;
  box-shadow: 0 2px 6px rgba(11,31,51,0.05), 0 10px 24px rgba(11,31,51,0.06);
}
.award-row figure { flex: none; width: 112px; height: 72px; display: flex; align-items: center; justify-content: center; margin: 0; }
.award-row figure img { max-width: 108px; max-height: 68px; width: auto; height: auto; object-fit: contain; display: block; }
.award-row div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.award-row .award-row__years { font-family: var(--font-heading); font-weight: 800; font-size: 15px; letter-spacing: 0.06em; color: var(--gold); }
.award-row strong { font-family: var(--font-heading); font-weight: 700; font-size: 16.5px; line-height: 1.35; color: var(--navy); text-wrap: pretty; }
.award-row span { font-size: 15px; line-height: 1.5; color: var(--slate); }

/* Awards page: centered wall of badge images. */
.badge-strip { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 28px 44px; }
.badge-strip img { height: 104px; width: auto; flex: none; object-fit: contain; display: block; }

/* Grid of link tiles (Technology treatments). */
.tile-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tile-grid a {
  display: flex; flex-direction: column; justify-content: center; gap: 10px; min-height: 96px;
  background: #fff; border: 1px solid var(--border-light); border-top: 3px solid var(--sage);
  border-radius: var(--radius-lg); padding: 16px 18px; color: var(--navy);
  font-family: var(--font-heading); font-weight: 700; font-size: 16.5px; line-height: 1.3; text-wrap: pretty;
  box-shadow: 0 2px 6px rgba(11,31,51,0.05), 0 10px 24px rgba(11,31,51,0.06);
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1), border-color 0.2s ease, box-shadow 0.25s ease;
}
.tile-grid a:hover { transform: translateY(-3px); border-color: var(--sage-tint); border-top-color: var(--sage-deep); box-shadow: 0 8px 12px rgba(11,31,51,0.07), 0 18px 34px rgba(11,31,51,0.1); }

/* ---------- Meet Dr. Cohen: hero + recognition strip ---------- */
.page-hero { position: relative; overflow: hidden; background: #ECF3F8; }
.page-hero__glow {
  position: absolute; top: -12%; right: -6%; width: 640px; height: 640px; border-radius: 50%;
  background: radial-gradient(circle, rgba(199,210,169,0.34), rgba(199,210,169,0) 68%); pointer-events: none;
}
.page-hero__inner {
  position: relative; max-width: var(--container); margin: 0 auto;
  padding: clamp(132px, 14vw, 176px) var(--gutter) 68px;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 72px; align-items: center;
}
.page-hero__copy { display: flex; flex-direction: column; gap: 24px; }
.page-hero__eyebrow { font-size: 15px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--sage-deep); }
.page-hero__title { font-weight: 700; font-size: 72px; line-height: 1.04; letter-spacing: -0.03em; }
.page-hero__lede { font-size: 19px; line-height: 1.52; color: var(--body-color); margin: 0; max-width: 52ch; text-wrap: pretty; }
.page-hero__lede strong { color: var(--navy); }
.page-hero__stats { display: flex; flex-wrap: wrap; gap: 18px 44px; padding-top: 4px; }
.page-hero__stat { display: flex; flex-direction: column; gap: 3px; }
.page-hero__stat strong { font-family: var(--font-heading); font-weight: 800; font-size: 26px; letter-spacing: -0.02em; color: var(--navy); }
.page-hero__stat > span { font-size: 15px; line-height: 1.45; color: var(--body-color); max-width: 20ch; }
.page-hero__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 4px; }
.page-hero__figure { justify-self: end; width: 100%; max-width: 480px; }
.page-hero__figure .sticky-figure img { aspect-ratio: auto; height: 600px; object-position: 50% 22%; }

.recognition-strip { background: #fff; border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); }
.recognition-strip__inner {
  max-width: var(--container); margin: 0 auto; padding: 26px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 20px 40px; flex-wrap: wrap;
}
.recognition-strip__label { font-size: 15px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sage-label); flex: none; }
.recognition-strip__rule { width: 1px; height: 52px; background: var(--border-light); flex: none; }
.recognition-strip__inner > img { height: 88px; width: auto; flex: none; object-fit: contain; }
.recognition-strip__note { display: flex; flex-direction: column; gap: 2px; flex: none; }
.recognition-strip__note strong { font-family: var(--font-heading); font-weight: 800; font-size: 21px; color: var(--navy); letter-spacing: -0.01em; }
.recognition-strip__note span { font-size: 15px; color: var(--slate); }

/* Meet page: overview & expertise two-column grids. */
.meet-overview-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 80px; align-items: center; }
.meet-overview-grid .frame-offset img { width: 100%; height: 520px; object-fit: cover; object-position: 50% 30%; display: block; }
.expertise-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; }

/* ---------- Meet Dr. Cohen: education tabs ---------- */
.edu-card {
  background: #fff; border: 1px solid var(--border-light); border-radius: 20px; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  box-shadow: 0 2px 6px rgba(11,31,51,0.05), 0 10px 24px rgba(11,31,51,0.06);
}
.edu-card__list { border-right: 1px solid var(--border-light); background: #F7FAFC; display: flex; flex-direction: column; }
.edu-card__tab {
  display: flex; align-items: center; gap: 16px; text-align: left; cursor: pointer;
  padding: 20px 22px; border: none; border-bottom: 1px solid var(--border-light);
  background: transparent; font-family: var(--font-body); transition: background 0.2s ease;
}
.edu-card__tab:last-child { border-bottom: none; }
.edu-card__tab:hover { background: #EFF4E7; }
.edu-card__tab.is-active { background: #fff; box-shadow: inset 3px 0 0 var(--sage-deep); }
.edu-card__num {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--border-strong); color: var(--slate);
  font-family: var(--font-heading); font-weight: 700; font-size: 15px;
}
.edu-card__tab.is-active .edu-card__num { border-color: var(--sage-deep); background: var(--sage-deep); color: #fff; }
.edu-card__tab > span:last-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.edu-card__kicker { font-size: 15px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage-label); }
.edu-card__short { font-family: var(--font-heading); font-weight: 700; font-size: 15.5px; line-height: 1.3; color: var(--navy); }
.edu-card__panelwrap { position: relative; padding: 52px 56px; display: flex; flex-direction: column; gap: 16px; justify-content: center; min-height: 340px; overflow: hidden; }
.edu-card__watermark { position: absolute; right: -72px; bottom: -86px; width: 340px; height: auto; opacity: 0.35; pointer-events: none; }
.edu-card__panel { position: relative; display: none; flex-direction: column; gap: 12px; }
.edu-card__panel.is-active { display: flex; }
.edu-card__panel .edu-card__kicker { font-family: var(--font-heading); font-weight: 800; letter-spacing: 0.16em; }
.edu-card__panel h3 { font-weight: 700; font-size: 34px; line-height: 1.16; letter-spacing: -0.024em; max-width: 30ch; }
.edu-card__panel p { font-size: 17.5px; line-height: 1.64; color: var(--body-color); margin: 0; max-width: 62ch; text-wrap: pretty; }
.edu-card__nav { position: relative; display: flex; align-items: center; gap: 12px; padding-top: 8px; }
.edu-card__nav button {
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer; font-size: 17px;
  border: 1.5px solid var(--border-strong); background: #fff; color: var(--navy);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.edu-card__nav button:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.edu-card__counter { font-size: 15px; font-weight: 600; color: var(--slate); font-variant-numeric: tabular-nums; margin-left: 6px; }

/* ---------- FAQ accordion ---------- */
.faq { display: flex; flex-direction: column; gap: 12px; }
.faq__item { background: #F7FAFC; border: 1px solid var(--border-light); border-radius: var(--radius-lg); overflow: hidden; }
.faq__item.is-open { background: #fff; box-shadow: 0 2px 6px rgba(11,31,51,0.05), 0 10px 24px rgba(11,31,51,0.06); }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 26px; border: none; background: transparent; cursor: pointer; text-align: left;
  font-family: var(--font-heading); font-weight: 700; font-size: 19px; line-height: 1.35;
  letter-spacing: -0.012em; color: var(--navy); text-wrap: pretty;
}
.faq__icon {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--border-strong); color: var(--slate); font-size: 19px;
  transition: transform 0.25s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.faq__item.is-open .faq__icon { transform: rotate(45deg); background: var(--sage-deep); border-color: var(--sage-deep); color: #fff; }
.faq__a { display: none; padding: 0 26px 24px; }
.faq__item.is-open .faq__a { display: block; }
.faq__a p { font-size: 16.5px; line-height: 1.68; color: var(--body-color); margin: 0 0 14px; text-wrap: pretty; }
.faq__a p:last-child { margin-bottom: 0; }
.faq__a ul { margin: 0 0 14px; padding-left: 22px; display: grid; gap: 8px; }
.faq__a li { font-size: 16.5px; line-height: 1.5; color: var(--body-color); }

/* ---------- Testimonials page ---------- */
.strip-label { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sage-label); }
.strip-label::before { content: ""; width: 26px; height: 2px; background: var(--sage); }
.videos-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 18px; }
.video-card { display: flex; flex-direction: column; gap: 10px; }
.video-card__frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--ink); aspect-ratio: 16 / 9; }
.video-card__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-card__poster { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; display: block; }
.video-card__poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-card__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.video-card__play span {
  width: 64px; height: 64px; border-radius: 50%; background: rgba(11,31,51,0.72); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1; padding-left: 4px;
  transition: transform 0.2s ease, background 0.2s ease;
}
.video-card__poster:hover .video-card__play span { transform: scale(1.08); background: var(--sage-deep); }
.video-card > a { font-family: var(--font-heading); font-weight: 700; font-size: 15px; line-height: 1.35; color: var(--navy); text-wrap: pretty; }
.video-card > a:hover { color: var(--sage-deep); }
.reviews-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.review-card {
  display: flex; flex-direction: column; gap: 10px; background: #fff;
  border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 26px 26px 22px;
  box-shadow: 0 2px 6px rgba(11,31,51,0.05), 0 10px 24px rgba(11,31,51,0.06);
}
.review-card__stars { font-size: 15px; letter-spacing: 0.14em; color: var(--gold); }
.review-card strong { font-family: var(--font-heading); font-weight: 700; font-size: 18px; line-height: 1.35; color: var(--navy); text-wrap: pretty; }
.review-card p { font-size: 15.5px; line-height: 1.6; color: var(--body-color); margin: 0; }
.review-card__who { font-family: var(--font-heading); font-weight: 700; font-size: 15px; color: var(--sage-deep); margin-top: auto; padding-top: 4px; }
.reviews-host { min-height: 340px; width: 100%; }
.rating-inline { display: flex; align-items: baseline; justify-content: center; gap: 12px; white-space: nowrap; }
.rating-inline strong { font-family: var(--font-heading); font-weight: 800; font-size: 26px; color: var(--gold); font-variant-numeric: tabular-nums; }
.rating-inline span { font-size: 15px; color: var(--slate); }

/* ---------- Condition page: sidebar ---------- */
.cond-aside { flex: 1 1 300px; max-width: 360px; min-width: 0; position: sticky; top: 120px; align-self: flex-start; display: flex; flex-direction: column; gap: 18px; }
.cond-nav {
  background: #F7FAFC; border: 1px solid var(--border-light); border-radius: 18px;
  padding: 22px 18px; display: flex; flex-direction: column; gap: 2px;
  box-shadow: 0 2px 6px rgba(11,31,51,0.05), 0 10px 24px rgba(11,31,51,0.06);
}
.cond-nav__title { padding: 0 6px 8px; font-size: 15px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage-label); }
.cond-nav a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; border-radius: 10px; font-size: 15px; font-weight: 500;
  line-height: 1.35; color: var(--navy); border-top: 1px solid var(--border-light);
  transition: background 0.15s ease, color 0.15s ease;
}
.cond-nav a:first-of-type { border-top: none; }
.cond-nav a:hover { background: #EFF4E7; color: var(--navy); }
.cond-nav a.is-current, .cond-nav a.is-current:hover { background: var(--sage-deep); color: #fff; font-weight: 700; border-top-color: transparent; }
.contact-card {
  position: relative; overflow: hidden; border-radius: 18px; padding: 28px 26px;
  background: linear-gradient(150deg, var(--navy) 0%, var(--ink) 100%);
  display: flex; flex-direction: column; gap: 14px;
}
.contact-card__mark {
  position: absolute; top: -60px; right: -70px; width: 220px; height: 207px;
  background: #fff; opacity: 0.07; pointer-events: none;
  -webkit-mask-image: url("assets/img/swoosh-mask.png"); mask-image: url("assets/img/swoosh-mask.png");
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.contact-card strong { position: relative; font-family: var(--font-heading); font-weight: 700; font-size: 19px; line-height: 1.4; color: #fff; text-wrap: pretty; }
.contact-card .btn { position: relative; justify-content: center; }
.contact-card__phone { position: relative; font-family: var(--font-heading); font-weight: 800; font-size: 22px; color: #fff; text-align: center; }
.contact-card__phone:hover { color: var(--sage-tint); }
/* The article's lead photo uses the same frame and width as every other
   photo in the body, so a page never opens with an odd-sized image. */
.cond-lead-photo { margin: 24px auto 30px; width: min(740px, 100%); }
.cond-lead-photo img {
  display: block; width: 100%; height: auto;
  border-radius: 22px; box-shadow: 0 2px 6px rgba(11,31,51,0.05), 0 10px 24px rgba(11,31,51,0.06);
}

/* Treatment article patterns (Sinusitis pillar page): info cards, checklist
   chips, numbered steps, sticky side images, "On this page" sidebar TOC. */
.prose h2[id] { scroll-margin-top: 140px; }
.prose .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.prose .card-grid--tight { gap: 10px; }
/* Cards use plain block flow (not flex) and inline paragraphs: if the editor
   ever splits card copy into fragments around a link, the pieces flow back
   into one continuous sentence instead of stacking as separate lines. */
.prose .info-card {
  background: #fff; border: 1px solid var(--border-light); border-radius: 14px; padding: 20px 22px;
  box-shadow: 0 2px 6px rgba(11,31,51,0.05), 0 10px 24px rgba(11,31,51,0.06);
}
.prose .info-card--accent { border-top: 3px solid var(--sage); padding: 18px 20px; }
.prose .card-title { display: block; margin: 0 0 8px; font-family: var(--font-heading); font-weight: 700; font-size: 17px; line-height: 1.35; color: var(--navy); }
.prose .info-card--accent .card-title { margin-bottom: 6px; }
.prose .info-card p, .prose .note-card p { display: inline; margin: 0; font-size: 16.5px; line-height: 1.6; }
.prose .note-card {
  background: #F7FAFC; border: 1px solid var(--border-light); border-radius: 16px; padding: 22px 24px;
  box-shadow: 0 2px 6px rgba(11,31,51,0.05), 0 10px 24px rgba(11,31,51,0.06);
}
/* Chips and steps are block-level with absolutely-positioned markers so the
   WordPress editor (wpautop / TinyMCE rewrites) can't break their layout. */
.prose .check-item, .lp-checks .check-item {
  position: relative; background: #F7FAFC;
  border: 1px solid var(--border-light); border-radius: var(--radius);
  padding: 14px 16px 14px 50px; font-size: 16.5px; line-height: 1.5;
  box-shadow: 0 2px 6px rgba(11,31,51,0.05), 0 10px 24px rgba(11,31,51,0.06);
}
.prose .check-item::before, .lp-checks .check-item::before {
  content: "✓"; position: absolute; left: 16px; top: 15px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--sage-deep); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1;
}
.prose .check-item p, .lp-checks .check-item p { display: inline; margin: 0; }
.prose .step-list { display: flex; flex-direction: column; gap: 10px; counter-reset: scs-step; }
.prose .step-item { position: relative; padding-left: 40px; font-size: 16.5px; line-height: 1.6; }
.prose .step-item::before {
  counter-increment: scs-step; content: counter(scs-step);
  position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 8px;
  background: #EFF4E7; color: var(--sage-deep);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 800; font-size: 15px;
}
.prose .step-item p { display: inline; margin: 0; }
/* Stray nodes the editor may inject between grid/list children. */
.prose .card-grid > br, .prose .step-list > br, .prose .split-sticky > br { display: none; }
.prose .card-grid > p:empty, .prose .step-list > p:empty { display: none; }
/* Image and text centre on each other — whichever is shorter floats to the
   middle of the taller one. */
.prose .split-sticky { display: flex; flex-wrap: wrap; gap: 30px; align-items: center; }
.prose .split-sticky__main { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.prose .split-sticky__img { flex: 1 1 240px; max-width: 300px; align-self: center; display: block; }
.prose .split-sticky__img p { margin: 0; }
.prose .split-sticky__img img {
  width: 100%; aspect-ratio: 3 / 4; max-height: 460px; object-fit: cover; display: block;
  border-radius: 20px; border: 1px solid var(--border-light);
  box-shadow: 0 2px 6px rgba(11,31,51,0.05), 0 10px 24px rgba(11,31,51,0.06);
}
/* Editor-mangled fallbacks: the side photo stays sticky whether the editor
   left the image bare in the split or wrapped its span in a <p>. */
.prose .split-sticky > img {
  flex: 1 1 240px; max-width: 300px; align-self: flex-start; position: sticky; top: 170px;
  aspect-ratio: 3 / 4; max-height: 460px; object-fit: cover;
  border-radius: 20px; border: 1px solid var(--border-light);
  box-shadow: 0 2px 6px rgba(11,31,51,0.05), 0 10px 24px rgba(11,31,51,0.06);
}
.prose .split-sticky > p:has(.split-sticky__img) {
  flex: 1 1 240px; max-width: 300px; align-self: center; margin: 0;
}
.prose .split-sticky > p:has(.split-sticky__img) .split-sticky__img {
  position: static; max-width: none; display: block;
}
.toc-card {
  background: #F7FAFC; border: 1px solid var(--border-light); border-radius: 18px; padding: 20px 14px;
  display: flex; flex-direction: column; gap: 2px;
  box-shadow: 0 2px 6px rgba(11,31,51,0.05), 0 10px 24px rgba(11,31,51,0.06);
}
.toc-card__title { padding: 0 10px 8px; font-size: 15px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage-label); }
.toc-card a { display: block; padding: 9px 12px; font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--navy); border-radius: 8px; }
.toc-card a + a { border-top: 1px solid var(--border-light); }
.toc-card a:hover { background: #EFF4E7; color: var(--navy); }
.contact-card p { position: relative; margin: 0; font-size: 15px; line-height: 1.55; color: #C9DCEB; }

/* Conditions hub (pillar page): grouped grids of link cards. */
.cond-dir { background: #fff; }
.cond-dir__inner {
  max-width: var(--container); margin: 0 auto; padding: 56px var(--gutter) 72px;
  display: flex; flex-direction: column; gap: 40px;
}
.cond-dir__group { display: flex; flex-direction: column; gap: 14px; }
.cond-dir__group h2 {
  font-family: var(--font-heading); font-weight: 700; font-size: 15px; line-height: 1.2;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage-label); margin: 0;
}
.cond-dir__grid { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cond-dir__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cond-dir__card {
  min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius);
  padding: 15px 18px; color: var(--navy); font-weight: 600; font-size: 15.5px; line-height: 1.35;
  box-shadow: 0 1px 2px rgba(11,31,51,0.04);
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.24s ease, border-color 0.2s ease;
}
.cond-dir__card .arrow { color: var(--sage-label); font-size: 15px; flex: none; }
.cond-dir__card:hover {
  transform: translateY(-3px); box-shadow: 0 10px 22px rgba(11,31,51,0.12);
  border-color: var(--sage-tint); color: var(--navy);
}

/* ---------- Inner pages: responsive ---------- */
@media (max-width: 1080px) {
  .page-banner__title { font-size: 40px; }
  .page-cta__copy h2 { font-size: 34px; }
  /* Contact page: stack intro → form → map (the mobile design order). */
  .contact-main { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 32px; }
  .contact-intro, .contact-map, .contact-form-card { grid-column: auto; grid-row: auto; }
  .contact-map { min-height: 260px; }
  .contact-cards { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 12px; }
  .blogdir-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .blogdir-cats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blogdir-featured__copy { padding: 40px; }
  .blogdir-featured__copy h2 { font-size: 30px; }
  .blogdir-featured__media { min-height: 320px; }
  .centered-head h2 { font-size: 36px; }
  .page-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 140px; }
  .page-hero__title { font-size: 52px; }
  .page-hero__figure { justify-self: stretch; max-width: 520px; }
  .page-hero__figure .sticky-figure img { height: 480px; }
  .edu-card { grid-template-columns: minmax(0, 1fr); }
  .edu-card__list { border-right: none; border-bottom: 1px solid var(--border-light); }
  .edu-card__panelwrap { padding: 40px 32px; min-height: 0; }
  .videos-grid, .reviews-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split__aside { position: static; max-width: none; }
  .cond-aside { position: static; max-width: none; }
  .cond-dir__grid, .cond-dir__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .meet-overview-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .meet-overview-grid .frame-offset { max-width: 560px; }
  .expertise-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
/* Blocks that only exist on phones (e.g. the condition-page CTA band). */
.mobile-only { display: none; }

@media (max-width: 720px) {
  .page-banner__inner { padding: 32px var(--gutter) 36px; }
  .page-banner__title { font-size: 32px; }
  .page-banner__lede { font-size: 16px; }
  .page-banner__badge { width: 100%; }
  .page-cta__inner { padding: 56px var(--gutter); }
  .page-cta__copy h2 { font-size: 28px; }
  .page-section__inner { padding: 56px var(--gutter); }
  .centered-head h2 { font-size: 30px; }
  .prose { font-size: 16.5px; }
  .prose h2 { font-size: 27px; }
  .prose h3 { font-size: 20px; }
  .prose .pull-quote { font-size: 19px; }
  .prose .legal-cta { padding: 24px 20px; border-radius: var(--radius-lg); }
  .prose .legal-cta .btn { width: 100%; justify-content: center; }
  .prose .review-grid { grid-template-columns: minmax(0, 1fr); }
  .prose .stat-chip strong { font-size: 28px; }
  .prose .watch-card__thumb { flex-basis: 100%; max-width: 100%; aspect-ratio: 16 / 10; }
  .blogdir-filter { position: static; }
  .blogdir-filter__inner { padding: 18px var(--gutter); }
  .blogdir-chips { justify-content: flex-start; }
  .blogdir-featured__inner, .blogdir-posts__inner { padding-top: 36px; }
  .blogdir-featured__card { grid-template-columns: minmax(0, 1fr); }
  .blogdir-featured__media { min-height: 0; aspect-ratio: 16 / 10; }
  .blogdir-featured__copy { padding: 26px 22px 30px; gap: 14px; }
  .blogdir-featured__copy h2 { font-size: 25px; }
  .blogdir-grid { grid-template-columns: minmax(0, 1fr); }
  .blogdir-cats__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .blogdir-cats__inner { padding: 44px var(--gutter); }
  .videos-inner { padding: 44px var(--gutter) 52px; gap: 24px; }
  .videos-embed-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .videos-note { padding: 24px 20px; }
  .ebooks-inner { padding: 44px var(--gutter) 52px; }
  .ebooks-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ins-inner { padding: 44px var(--gutter) 52px; gap: 32px; }
  .ins-intro h2 { font-size: 25px; }
  .ins-boxes { grid-template-columns: minmax(0, 1fr); }
  .ins-box { padding: 24px 20px; }
  .ins-box__phone { font-size: 20px; }
  .contact-card-box { padding: 22px 20px; border-radius: var(--radius-lg); }
  /* The phone becomes a tappable sage button on phones (mobile design). */
  .contact-card-box__phone {
    justify-content: center; min-height: 56px; font-size: 22px;
    background: var(--sage-deep); color: #fff; border-radius: var(--radius);
  }
  .contact-card-box__phone:hover { color: #fff; background: var(--sage-press); }
  .contact-intro h2 { font-size: 25px; }
  .contact-form-card { padding: 24px 20px; border-radius: var(--radius-lg); }
  .contact-form-card h2 { font-size: 23px; }
  .contact-form__fields { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .contact-form .btn { width: 100%; justify-content: center; }
  .contact-form input[type="submit"] { width: 100%; min-width: 0; }
  .page-hero__inner { padding-top: 120px; gap: 32px; }
  .page-hero__title { font-size: 38px; }
  .page-hero__figure .sticky-figure img { height: 380px; }
  .page-hero__actions .btn { width: 100%; justify-content: center; }
  .stat-tiles { grid-template-columns: 1fr; }
  .stat-tile strong { font-size: 32px; }
  .recognition-strip__inner { justify-content: center; }
  .recognition-strip__rule { display: none; }
  .recognition-strip__inner > img { height: 64px; }
  .videos-grid, .reviews-grid { grid-template-columns: minmax(0, 1fr); }
  .tile-grid { grid-template-columns: minmax(0, 1fr); }
  .badge-strip img { height: 72px; }
  .award-row { align-items: flex-start; }
  .award-row figure { width: 84px; height: 60px; }
  .faq__q { font-size: 17px; padding: 18px 18px; }
  .faq__a { padding: 0 18px 20px; }
  .edu-card__tab { padding: 14px 16px; }
  .edu-card__panelwrap { padding: 28px 20px; }
  .edu-card__panel h3 { font-size: 24px; }
  .rating-card { margin-right: 0; }
  .marquee__item { width: 150px; height: 72px; }
  .marquee__item img { max-width: 120px; max-height: 60px; }
  /* Treatment article on phones: side images flow inline, info cards stack
     stickily under the header as you scroll (mobile comp). */
  .prose .split-sticky__img, .prose .split-sticky > img,
  .prose .split-sticky > p:has(.split-sticky__img) { position: static; max-width: none; flex: 1 1 100%; }
  .prose .card-grid .info-card { position: sticky; top: 96px; z-index: 1; }
  .cond-dir__inner { padding: 30px var(--gutter) 38px; gap: 28px; }
  .cond-dir__group { gap: 12px; }
  .cond-dir__grid, .cond-dir__grid--4 { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  /* Condition pages (mobile comp): the sidebar disappears and the shared CTA
     band — desktop-hidden via .mobile-only — takes over. */
  .cond-aside { display: none; }
  .mobile-only { display: block; }
  .page-cta__actions { flex-direction: column; align-items: stretch; }
  .page-cta__actions .btn { justify-content: center; }
  .page-cta__phone { text-align: center; font-size: 22px; }
}

/* ---------- Landing pages (standalone lead-gen, e.g. Balloon Sinuplasty) ---------- */

/* Ink, not mist: every section paints its own background, so the page
   colour is only ever seen below the footer (and in the overscroll area on
   phones) — where it has to match the footer, not the content above it. */
.landing-page { background: var(--ink); }
.lp-header { background: #fff; border-bottom: 1px solid var(--border-light); box-shadow: 0 2px 6px rgba(11,31,51,0.05); }
.lp-header__inner { max-width: 1240px; margin: 0 auto; padding: 16px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.lp-header__inner img { height: 54px; width: auto; display: block; }
.lp-header__call { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
.lp-header__call span { font-size: 15px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sage-label); }
.lp-header__call a { font-family: var(--font-heading); font-weight: 800; font-size: 25px; color: var(--navy); }
.lp-bar {
  position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,0.96);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-light); box-shadow: 0 2px 6px rgba(11,31,51,0.05);
}
.lp-bar__inner { max-width: 1240px; margin: 0 auto; padding: 12px 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; }
.lp-bar__toggle { display: none; }
/* Desktop keeps the number in the header bar; phones move it into the menu. */
.lp-bar__call { display: none; }
.lp-bar__links { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.lp-bar__links a { color: var(--navy); font-size: 16.5px; font-weight: 600; white-space: nowrap; padding: 6px 0; border-bottom: 2px solid transparent; }
.lp-bar__links a:hover { color: var(--sage-deep); border-bottom-color: var(--sage); }
.lp-bar__cta {
  display: inline-flex; align-items: center; gap: 10px; background: var(--sage-deep); color: #fff;
  font-weight: 700; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 13px 22px; border-radius: var(--radius); white-space: nowrap;
  transition: transform 0.18s ease, background 0.2s ease;
}
.lp-bar__cta:hover { background: #4A5430; color: #fff; transform: translateY(-2px); }

.lp-closing, .lp-confirm {
  position: relative; overflow: hidden;
  background: linear-gradient(118deg, #0B1F33 0%, #14395C 48%, #2A4A45 78%, #3E5340 100%);
}
/* The hero is a photo under a navy gradient wash (deep ink on the copy side
   thinning toward the form), so the white headline and the form card always
   sit on something dark no matter what the photo does. The template sets the
   photo and its focal point inline (--lp-hero-img / --lp-hero-pos) from the
   page's Hero background field, falling back to the bundled design photo. */
.lp-hero {
  position: relative; overflow: hidden; scroll-margin-top: 96px;
  background: var(--ink) var(--lp-hero-img, none) var(--lp-hero-pos, 50% 30%) / cover no-repeat;
}
/* The photo stays put while the page scrolls over it. Desktop only:
   background-attachment: fixed is broken or ignored on iOS and most mobile
   browsers (cover sizes against the viewport and the photo zooms), so touch
   screens keep the normal scrolling background. */
@media (min-width: 1025px) {
  .lp-hero { background-attachment: fixed; }
}
.lp-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(11,31,51,0.74) 0%, rgba(11,31,51,0.54) 44%, rgba(20,57,92,0.16) 100%);
}
.lp-hero__inner { position: relative; max-width: 1240px; margin: 0 auto; padding: 70px 32px; display: flex; flex-wrap: wrap; gap: 52px; align-items: stretch; }
/* A hero photo needs height to read as a photo rather than a tinted strip. */
@media (min-width: 1025px) {
  .lp-hero { min-height: 720px; display: flex; align-items: center; }
  .lp-hero__inner { width: 100%; padding-top: 56px; padding-bottom: 56px; }
}
/* A bolded sentence inside the lede is the page's rallying line ("Dr. Alen
   Cohen can help you breathe easier!") — its own sage line, per the design. */
.lp-hero__lede strong {
  display: block; margin-top: 10px;
  font-family: var(--font-heading); font-weight: 700; font-size: 24px; line-height: 1.3; color: var(--sage-tint);
}
.lp-hero__copy { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 8px 0; }
.lp-hero__copy h1 { font-family: var(--font-heading); font-weight: 800; font-size: 50px; line-height: 1.08; letter-spacing: -0.03em; margin: 0; color: #fff; text-wrap: pretty; }
.lp-hero__lede { margin: 0; font-size: 20px; line-height: 1.5; color: #C9DCEB; }
.lp-hero__quote {
  margin: 0; border-left: 3px solid var(--sage); background: rgba(255,255,255,0.06);
  border-radius: 0 12px 12px 0; padding: 6px 0 6px 20px; display: flex; flex-direction: column; gap: 8px;
}
.lp-hero__quote p { margin: 0; font-family: var(--font-heading); font-style: italic; font-weight: 700; font-size: 21px; line-height: 1.45; color: #fff; text-wrap: pretty; }
.lp-hero__quote cite { font-style: italic; font-size: 16px; line-height: 1.5; color: var(--sage-tint); }
.lp-form {
  flex: 1 1 380px; min-width: 0; max-width: 480px; background: #fff; border: 1px solid var(--border-light);
  border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 16px;
  box-shadow: 0 2px 6px rgba(11,31,51,0.05), 0 18px 44px rgba(11,31,51,0.18);
}
.lp-form h2 { font-family: var(--font-heading); font-weight: 800; font-size: 21px; line-height: 1.3; margin: 0; color: var(--navy); text-wrap: pretty; }
.lp-form__fields { display: flex; flex-direction: column; gap: 16px; }
.lp-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lp-form__fields label { display: flex; flex-direction: column; gap: 6px; }
.lp-form__fields label > span, .lp-form__radios > span { font-size: 15px; font-weight: 600; color: #3E5060; }
.lp-form__fields em { color: var(--sage-label); font-style: normal; }
.lp-form__fields input[type='text'], .lp-form__fields input[type='tel'], .lp-form__fields input[type='email'] {
  width: 100%; padding: 12px 14px; border: 1px solid var(--border-field); border-radius: 10px;
  font-size: 16px; font-family: inherit; color: var(--ink); background: #F7FAFC;
}
.lp-form__radios { display: flex; flex-direction: column; gap: 10px; }
.lp-form__radios label { flex-direction: row; align-items: center; gap: 10px; background: #F7FAFC; border: 1px solid var(--border-field); border-radius: 10px; padding: 12px 14px; font-size: 16px; color: #3E5060; }
.lp-form__radios input { accent-color: var(--sage-deep); width: 18px; height: 18px; }
.lp-form__fields button {
  margin-top: 4px; background: var(--sage); color: var(--ink); border: 0; border-radius: var(--radius);
  padding: 17px 20px; font-family: inherit; font-weight: 700; font-size: 15px; letter-spacing: 0.08em;
  text-transform: uppercase; cursor: pointer; transition: transform 0.18s ease, background 0.2s ease;
}
.lp-form__fields button:hover { background: var(--sage-tint); transform: translateY(-2px); }
/* Contact Form 7 shims for the landing form (same markup via the CF7 template). */
.lp-form__fields label > .wpcf7-form-control-wrap { display: block; width: 100%; font-size: 16px; font-weight: 400; }
.lp-form__fields .wpcf7-not-valid-tip { display: block; padding-top: 6px; font-size: 15px; color: var(--clay); }
.lp-form__fields input.wpcf7-not-valid, .lp-form__fields .wpcf7-not-valid input { border-color: var(--clay); }
.lp-form__fields p { margin: 0; }
.lp-form__fields br { display: none; }
.lp-form__radios .wpcf7-form-control-wrap { display: block; }
.lp-form__radios .wpcf7-radio { display: flex; flex-direction: column; gap: 10px; }
.lp-form__radios .wpcf7-list-item { margin: 0; display: block; }
.lp-form__radios .wpcf7-list-item label { display: flex; }
.lp-form__fields input[type="submit"] {
  margin-top: 4px; background: var(--sage); color: var(--ink); border: 0; border-radius: var(--radius);
  padding: 17px 20px; font-family: inherit; font-weight: 700; font-size: 15px; letter-spacing: 0.08em;
  text-transform: uppercase; cursor: pointer; transition: transform 0.18s ease, background 0.2s ease;
  display: block; width: 100%;
}
.lp-form__fields input[type="submit"]:hover { background: var(--sage-tint); transform: translateY(-2px); }
.lp-form .wpcf7-response-output { margin: 12px 0 0; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 15px; line-height: 1.5; color: var(--navy); background: #fff; }
.lp-form .wpcf7 form.sent .wpcf7-response-output { background: #EFF4E7; border-color: var(--sage-tint); color: var(--sage-press); }
.lp-form .wpcf7 form.invalid .wpcf7-response-output,
.lp-form .wpcf7 form.failed .wpcf7-response-output { border-color: var(--clay); color: var(--clay); }

.lp-stats { background: var(--navy); }
.lp-stats__inner { max-width: 1240px; margin: 0 auto; padding: 34px 32px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.lp-stats__item { display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; }
.lp-stats__item + .lp-stats__item { border-left: 1px solid rgba(255,255,255,0.16); }
.lp-stats__item strong { font-family: var(--font-heading); font-weight: 800; font-size: 38px; line-height: 1; color: var(--sage-tint); }
.lp-stats__item span { font-size: 16px; font-weight: 600; color: #fff; }

.lp-section { background: #fff; scroll-margin-top: 96px; }
.lp-section--tint { background: #F7FAFC; border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); }
.lp-section__inner { max-width: 1240px; margin: 0 auto; padding: 78px 32px; display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.lp-section__inner--center { align-items: center; }
.lp-section__copy { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.lp-section__copy--wide { flex: 1 1 420px; gap: 20px; }
.lp-section h2 { font-family: var(--font-heading); font-weight: 800; font-size: 34px; line-height: 1.14; letter-spacing: -0.024em; margin: 0; color: var(--navy); }
.lp-section__copy p { margin: 0; font-size: 17.5px; line-height: 1.7; color: #3E5060; text-wrap: pretty; }
.lp-section__diagram {
  flex: 2 1 460px; max-width: 700px; width: 100%; margin: 0 auto; min-width: 0; object-fit: contain;
  background: #F7FAFC; border: 1px solid var(--border-light); border-radius: 18px; padding: 10px;
  box-shadow: 0 2px 6px rgba(11,31,51,0.05), 0 10px 24px rgba(11,31,51,0.06);
}
.lp-video { flex: 1 1 320px; max-width: 440px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; color: var(--navy); }
.lp-video:hover { color: var(--sage-deep); }
.lp-video__frame {
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden;
  background: #EFF4E7; border: 1px solid var(--border-light);
  box-shadow: 0 2px 6px rgba(11,31,51,0.05), 0 10px 24px rgba(11,31,51,0.06);
}
.lp-video__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; }
.lp-video__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 74px; height: 74px; border-radius: 50%; background: rgba(94,106,55,0.82); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 26px; line-height: 1; padding-left: 5px;
}
.lp-video__label { font-family: var(--font-heading); font-weight: 700; font-size: 18px; line-height: 1.35; text-align: center; }
.lp-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.lp-checks .check-item { color: #3E5060; }
/* One box per row. The two-column grid left short labels stranded in tall
   stretched boxes; a single column reads evenly at any text length and
   matches the "Why choose us" list on the Nose & Sinus landing. */
.lp-checks--stack { grid-template-columns: 1fr; }
.lp-checks--stack .check-item { display: block; }
/* Desktop: every box the same height with its text optically centred, so the
   two columns read as an even grid instead of boxes stretched around
   short labels. Phones keep one box per row, which already looked right. */
@media (min-width: 901px) {
  .lp-checks { grid-auto-rows: 1fr; }
  .lp-checks .check-item { display: grid; align-content: center; }
  .lp-checks .check-item::before { top: 50%; transform: translateY(-50%); }
}
.lp-side-img { flex: 1 1 300px; max-width: 380px; margin: 0 auto; align-self: flex-start; position: sticky; top: 90px; display: block; }
.lp-side-img img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 18px;
  border: 1px solid var(--border-light); display: block;
  box-shadow: 0 2px 6px rgba(11,31,51,0.05), 0 10px 24px rgba(11,31,51,0.06);
}

.lp-reviews { background: var(--ink); scroll-margin-top: 96px; padding: 78px 32px; display: flex; flex-direction: column; gap: 30px; align-items: center; }
.lp-reviews h2 { font-family: var(--font-heading); font-weight: 800; font-size: 30px; line-height: 1.2; letter-spacing: 0.02em; text-transform: uppercase; margin: 0; color: #fff; text-align: center; }
.lp-reviews__widget {
  width: 100%; max-width: 1176px; min-height: 340px;
}
.lp-why { background: #fff; scroll-margin-top: 96px; padding: 78px 32px; display: flex; flex-direction: column; gap: 26px; align-items: center; text-align: center; }
.lp-why__head { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.lp-why__eyebrow { font-size: 15px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sage-label); }
.lp-why h2 { font-family: var(--font-heading); font-weight: 800; font-size: 34px; line-height: 1.14; letter-spacing: -0.024em; margin: 0; color: var(--navy); }
.lp-why > p { margin: 0; max-width: 80ch; font-size: 17.5px; line-height: 1.7; color: #3E5060; text-wrap: pretty; }
.lp-why__pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 1176px; }
.lp-why__pills span { background: #EFF4E7; border: 1px solid var(--sage-tint); border-radius: 999px; padding: 11px 20px; font-size: 15.5px; font-weight: 600; color: var(--navy); }
.lp-why__marquee { width: 100%; max-width: 1176px; margin-top: 10px; border-top: 1px solid var(--border-light); padding-top: 12px; }
.lp-why__marquee .marquee { background: none; border: none; }

.lp-closing__inner { position: relative; max-width: 1240px; margin: 0 auto; padding: 78px 32px; display: flex; flex-direction: column; gap: 24px; align-items: center; text-align: center; }
.lp-closing h2 { font-family: var(--font-heading); font-weight: 800; font-size: 38px; line-height: 1.12; letter-spacing: -0.026em; margin: 0; color: #fff; }
.lp-closing p { margin: 0; font-size: 19px; line-height: 1.5; color: #C9DCEB; }
.lp-closing__call { font-family: var(--font-heading); font-weight: 800; font-size: 20px; text-transform: none; letter-spacing: 0; }

/* ---------- Nose & Sinus landing extras ---------- */
/* Same translucent-dark treatment as the hero quote, so the note reads as
   part of the photo hero rather than a floating white card. */
.lp-hero__note {
  border-left: 3px solid var(--sage); background: rgba(255,255,255,0.06);
  border-radius: 0 12px 12px 0; padding: 12px 0 12px 20px;
}
.lp-hero__note p { margin: 0; font-size: 17.5px; line-height: 1.7; color: #fff; text-wrap: pretty; }
.lp-form__eyebrow { font-size: 15px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage-label); }

.lp-whyus { background: #fff; padding: 78px 32px; }
.lp-whyus__inner { max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: 36px; }
.lp-whyus h2 {
  font-family: var(--font-heading); font-weight: 800; font-size: 34px; line-height: 1.14;
  letter-spacing: -0.024em; margin: 0; color: var(--navy); text-align: center; text-wrap: pretty;
}
.lp-whyus__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.lp-video-frame {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
  border: 0; padding: 0; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--ink); cursor: pointer;
  box-shadow: 0 2px 6px rgba(11,31,51,0.05), 0 18px 40px rgba(11,31,51,0.14);
}
.lp-video-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-video-frame__play {
  position: absolute; inset: 0; margin: auto; width: 74px; height: 74px; border-radius: 50%; padding-left: 5px;
  background: rgba(94,106,55,0.85); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 26px; line-height: 1;
  transition: transform 0.2s ease, background 0.2s ease;
}
.lp-video-frame:hover .lp-video-frame__play { transform: scale(1.08); background: var(--sage-press); }
.lp-video-frame.is-playing { cursor: default; }
.lp-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

.lp-split { background: #fff; padding: 68px 32px; }
.lp-split--tint { background: var(--mist); }
.lp-split__inner {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center;
}
.lp-split__img {
  width: 100%; height: auto; border-radius: var(--radius-lg); display: block;
  border: 1px solid var(--border-light);
  box-shadow: 0 2px 6px rgba(11,31,51,0.05), 0 10px 24px rgba(11,31,51,0.06);
}
.lp-split--flip .lp-split__img { order: 2; }
.lp-split__copy { display: flex; flex-direction: column; gap: 16px; }
.lp-split__copy h2 {
  font-family: var(--font-heading); font-weight: 800; font-size: 32px; line-height: 1.16;
  letter-spacing: -0.024em; margin: 0; color: var(--navy);
}
.lp-split__copy p { margin: 0; font-size: 17px; line-height: 1.7; color: var(--body-color); }

@media (max-width: 900px) {
  .lp-whyus, .lp-split { padding: 44px 20px; }
  .lp-whyus h2 { font-size: 27px; }
  .lp-whyus__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .lp-split__inner { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .lp-split--flip .lp-split__img { order: 0; }
  .lp-split__copy h2 { font-size: 25px; }
}

.lp-confirm__inner { position: relative; max-width: 1240px; margin: 0 auto; padding: 110px 32px; display: flex; flex-direction: column; gap: 20px; align-items: center; text-align: center; }
.lp-confirm__tick { width: 66px; height: 66px; border-radius: 50%; background: var(--sage); color: var(--ink); display: flex; align-items: center; justify-content: center; font-size: 30px; line-height: 1; }
.lp-confirm h1 { font-family: var(--font-heading); font-weight: 800; font-size: 48px; line-height: 1.08; letter-spacing: -0.03em; margin: 0; color: #fff; text-wrap: pretty; }
.lp-confirm p { margin: 0; max-width: 60ch; font-size: 19px; line-height: 1.6; color: #C9DCEB; text-wrap: pretty; }

.lp-footer { background: var(--ink); color: #C9DCEB; }
.lp-footer a { color: #C9DCEB; }
.lp-footer__main { max-width: 1240px; margin: 0 auto; padding: 54px 32px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 44px; align-items: center; }
.lp-footer__col { display: flex; flex-direction: column; gap: 12px; }
.lp-footer__col h3 { font-family: var(--font-heading); font-weight: 700; font-size: 19px; margin: 0; color: #fff; }
.lp-footer__col p { margin: 0; font-size: 16px; line-height: 1.7; }
.lp-footer__phone { font-family: var(--font-heading); font-weight: 800; font-size: 20px; color: #fff !important; }
.lp-footer__logo { display: flex; justify-content: center; }
.lp-footer__logo img { width: 400px; max-width: 100%; height: auto; display: block; filter: brightness(0) invert(1); }
.lp-footer__col--right { justify-self: end; text-align: right; }
.lp-footer__legal, .lp-footer__disclaimer { border-top: 1px solid rgba(255,255,255,0.12); }
.lp-footer__legal p { max-width: 1240px; margin: 0 auto; padding: 20px 32px; font-size: 15px; color: #8FA5B8; text-align: center; }
.lp-footer__legal a, .lp-footer__disclaimer a { color: var(--sage-tint); }
.lp-footer__disclaimer p { max-width: 1240px; margin: 0 auto; padding: 16px 32px; font-size: 15px; font-style: italic; line-height: 1.6; color: #8FA5B8; }

@media (max-width: 900px) {
  .lp-hero__copy h1 { font-size: 38px; }
  .lp-confirm h1 { font-size: 38px; }
  .lp-footer__main { grid-template-columns: 1fr; gap: 28px; justify-items: center; text-align: center; }
  .lp-footer__col--right { justify-self: center; text-align: center; }
  /* Once the three columns stack, the logo would sit marooned between Our
     Clinic and Hours; the design puts it at the top of the footer instead.
     400px also overran the gutters on a phone, so it drops to the design's
     300px rather than being clamped edge-to-edge by max-width. */
  .lp-footer__logo { order: -1; }
  .lp-footer__logo img { width: 300px; }
}
@media (max-width: 720px) {
  .lp-header__inner { padding: 12px var(--gutter); }
  .lp-header__inner img { height: 46px; }
  .lp-header__call a { font-size: 20px; }
  /* The section links collapse behind a hamburger; the bar keeps only the
     toggle and the Request Appointment button on one row. */
  .lp-bar__inner { padding: 10px var(--gutter); flex-wrap: wrap; }
  .lp-bar__toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 46px; height: 42px; padding: 0 11px; background: none;
    border: 1px solid var(--border-light); border-radius: 10px; cursor: pointer;
  }
  .lp-bar__toggle span { display: block; height: 2px; width: 100%; background: var(--navy); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; }
  .lp-bar.nav-open .lp-bar__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .lp-bar.nav-open .lp-bar__toggle span:nth-child(2) { opacity: 0; }
  .lp-bar.nav-open .lp-bar__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .lp-bar__cta { margin-left: auto; padding: 11px 16px; font-size: 13.5px; }
  .lp-bar__links { display: none; flex-basis: 100%; order: 3; flex-direction: column; align-items: stretch; gap: 0; padding: 4px 0 8px; }
  .lp-bar.nav-open .lp-bar__links { display: flex; }
  .lp-bar__links a { padding: 13px 2px; font-size: 17px; border-bottom: 1px solid var(--border-light); }
  /* The number reads as the menu's action, not another section link. */
  .lp-bar__call { display: flex; align-items: baseline; gap: 10px; border-bottom: 0; padding-top: 16px; font-family: var(--font-heading); font-weight: 800; font-size: 21px; color: var(--navy); }
  .lp-bar__call span { font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sage-label); }
  /* …so the header no longer needs its own, which reclaims a lot of height. */
  .lp-header__call { display: none; }
  .lp-bar__links a:hover { border-bottom-color: var(--border-light); }
  /* A tall stacked hero shows a narrow slice of the photo: anchor it to the
     top (the faces) and darken it more evenly so the copy stays readable. */
  .lp-hero { background-position: center top; }
  .lp-hero::before { background: linear-gradient(180deg, rgba(11,31,51,0.84) 0%, rgba(11,31,51,0.74) 55%, rgba(20,57,92,0.62) 100%); }
  .lp-hero__inner, .lp-section__inner, .lp-closing__inner, .lp-confirm__inner { padding: 44px var(--gutter); gap: 32px; }
  .lp-hero__copy h1 { font-size: 32px; }
  .lp-confirm h1 { font-size: 32px; }
  .lp-stats__inner { grid-template-columns: 1fr; gap: 18px; padding: 28px var(--gutter); }
  .lp-stats__item + .lp-stats__item { border-left: none; border-top: 1px solid rgba(255,255,255,0.16); padding-top: 16px; }
  .lp-form { padding: 22px 18px; }
  .lp-form__row { grid-template-columns: 1fr; }
  .lp-section h2 { font-size: 28px; }
  .lp-side-img { position: static; max-width: none; }
  .lp-reviews, .lp-why { padding: 52px var(--gutter); }
  .lp-closing h2 { font-size: 30px; }
}

/* Buttons default to white-space: nowrap, which is right for short labels but
   pushes the page sideways when a long one ("Schedule Your Consultation with
   Dr. Cohen Today") meets a phone. Let long labels wrap instead. */
@media (max-width: 720px) {
  .btn { white-space: normal; text-align: center; justify-content: center; max-width: 100%; }
}

/* Inner-page heading + section-flow utilities (shared across templates). */
.h2-xl { font-weight: 800; font-size: 44px; line-height: 1.06; letter-spacing: -0.026em; }
.h2-lg { font-weight: 800; font-size: 42px; line-height: 1.08; letter-spacing: -0.026em; }
.page-section__inner--flow { display: flex; flex-direction: column; gap: 34px; padding-top: 68px; padding-bottom: 68px; }
.page-section__inner--flow-lg { display: flex; flex-direction: column; gap: 40px; padding-top: 68px; padding-bottom: 68px; }
@media (max-width: 1080px) {
  .h2-xl { font-size: 36px; }
  .h2-lg { font-size: 34px; }
}
@media (max-width: 720px) {
  .h2-xl { font-size: 30px; }
  .h2-lg { font-size: 28px; }
}
/* Award rows laid out as a centered two-column card grid (Meet page). */
.award-row--card { flex: 1 1 340px; max-width: 480px; }
.page-section__inner--band { padding-top: 44px; padding-bottom: 44px; }
.split--gap-top { padding-top: 24px; }
/* Care split (approach page): design-sized columns that fit the reading column
   (340px framed photo + 360px copy + 44px gap inside 820px usable width). */
.prose .split--care { gap: 36px 44px; padding: 24px 0 40px 24px; }
.prose .split--care .split__aside--narrow { flex: 1 1 340px; max-width: 430px; }
.prose .split--care .split__main { flex: 1 1 360px; }
.prose .split--care .frame-offset > div { height: 100%; }
.prose .split--care .frame-offset img {
  width: 100%; height: 100%; min-height: 340px;
  object-fit: cover; object-position: 58% 40%; display: block;
}
/* ---------- Compact appointment form ----------
   The form had grown tall enough that the section ran well past a screen: a
   150px message box, stacked radio groups built as bordered pills, and 51px
   controls. These bring it back to the height in the design without dropping a
   single field — smaller control padding, the radio questions back on one line
   with their options, and a message box sized for a sentence or two (it still
   drags taller if someone writes more). */

.contact-form { gap: 16px; }
.contact-form__fields { gap: 14px; }
.contact-form label { gap: 6px; }
.contact-form label > span {
  font-size: 14.5px; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--navy);
}
.contact-form input, .contact-form textarea { padding: 11px 14px; font-size: 15.5px; }
.form-required-note { margin: 0; font-size: 13.5px; }

/* Radio questions sit inline with their options, as in the design. */
.contact-form__radios { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.contact-form__radios > span,
.contact-form__radios > legend {
  font-size: 14.5px; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--navy); float: none; width: auto; margin: 0;
}
.contact-form__radios .wpcf7-form-control-wrap { display: inline-block; width: auto; }
.contact-form__radios .wpcf7-radio { gap: 18px; }
/* Plain radios, not bordered pills — the border made each option a row of its own. */
.contact-form__radios .wpcf7-list-item label {
  background: none; border: 0; border-radius: 0; padding: 0;
  gap: 8px; font-size: 15.5px;
}
.contact-form__radios input[type="radio"] { width: 16px; height: 16px; }

.contact-form .wpcf7-acceptance .wpcf7-list-item-label,
.lp-form .wpcf7-acceptance .wpcf7-list-item-label { font-size: 14px; line-height: 1.55; }

.appointment__form-card { padding: 30px; gap: 16px; }
.appointment__form-card > img { height: 44px; margin-bottom: 0; }
/* CF7 writes rows="7" on the textarea, and a min-height cannot pull that
   back down — the height has to be set outright. resize:vertical is kept, so
   anyone writing more than a couple of sentences can still drag it open. */
.appointment__form-card textarea,
.contact-form textarea { height: 84px; min-height: 84px; }
.appointment__form-card .wpcf7-submit,
.appointment__form-card .appointment__submit { padding: 15px 30px; }

@media (max-width: 1080px) {
  .appointment__form-card { padding: 28px; }
}
/* Contact Form 7 ships two elements that are empty until a submission: the
   screen-reader announcement region and the response message. Both were
   picking up the form's border styling and rendering as empty boxes above and
   below the fields. The announcement region stays in the DOM for assistive
   technology; the response box simply hides until it has something to say. */
.wpcf7 .screen-reader-response {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.wpcf7 form .wpcf7-response-output:empty,
.wpcf7 form .wpcf7-response-output[aria-hidden="true"] { display: none; }

/* A <legend> does not take part in its fieldset's flex layout, so the radio
   question sat on a line of its own. Floating it puts it back beside the
   options, which is what the design shows. */
.contact-form fieldset.contact-form__radios > legend {
  float: left; width: auto; margin: 0 16px 0 0; line-height: 24px;
}
.contact-form fieldset.contact-form__radios > legend + * { clear: none; }
/* CF7 wraps its hidden inputs in a <fieldset>, which drew a default border as
   an empty box at the top of the card. Hidden inputs still submit from a
   display:none container. */
.wpcf7 .hidden-fields-container { display: none; }

/* Full-width send button, as in the design. */
.appointment__form-card .wpcf7-submit,
.appointment__form-card .contact-form .btn[type="submit"] {
  /* .contact-form .btn pins buttons to flex-start, which kept the send button
     at its text width. */
  align-self: stretch; width: 100%; justify-content: center; text-align: center;
}
/* Left column: tighter copy, bigger photo.
   The text blocks were spaced 22px apart and the photo took a fixed height,
   which left the column shorter than the form card beside it. Closing the gaps
   and letting the photo absorb whatever is left means the two columns always
   finish level and the photo is as large as the row allows — it grows by
   itself if the form ever gets taller or shorter. */
.appointment__info { gap: 12px; }
.appointment__meta { padding-top: 14px; }
.appointment__building {
  /* basis 0 so the photo contributes no height of its own — it takes exactly
     the space the copy above it leaves, which is what keeps the two columns
     level. A percentage height on the image cannot do this: the parent has no
     definite height to resolve against, so it would fall back to the image
     aspect ratio and push the row taller. */
  flex: 1 1 0; min-height: 320px; margin-top: 6px;
}
.appointment__building img { position: absolute; inset: 0; width: 100%; height: 100%; }

@media (max-width: 1080px) {
  /* Stacked layout — nothing to fill, so the photo goes back to a set height. */
  .appointment__building { flex: 0 0 auto; margin-top: 0; }
  .appointment__building img { height: 340px; min-height: 0; }
}

/* --- Tables in article bodies --------------------------------------------
   Pasted tables carry whatever class the author used and lose their own
   <style> block on save, so the design lives here and the renderer tags every
   table with .scs-table inside a .table-responsive-cards wrapper
   (scs_frame_content_tables). The wrapper draws the frame and scrolls when a
   table is wider than the column; the cells only draw row rules, so the
   rounded corners are never overdrawn. */
.prose .table-responsive-cards {
  width: 100%; overflow-x: auto; margin: 28px 0 34px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: #fff;
}
.prose .scs-table { width: 100%; min-width: 560px; border-collapse: collapse; margin: 0; }
.prose .scs-table th,
.prose .scs-table td {
  padding: 14px 18px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--border-light);
  font-size: 16px; line-height: 1.55; color: var(--body-color);
}
.prose .scs-table thead th {
  background: var(--navy); color: #fff; border-bottom: none;
  font-family: var(--font-heading); font-weight: 700; font-size: 15px;
  letter-spacing: 0.02em; white-space: nowrap;
}
/* A table with no thead still gets a readable first column. */
.prose .scs-table tbody tr:nth-child(even) td { background: var(--mist); }
.prose .scs-table tbody tr:last-child td { border-bottom: none; }
.prose .scs-table td:first-child { font-weight: 600; color: var(--ink); }
.prose .scs-table td:first-child strong { font-weight: 700; }
/* Row headers (a th inside tbody) read as the row's label, not a second header. */
.prose .scs-table tbody th {
  background: var(--mist); color: var(--ink);
  font-family: var(--font-heading); font-weight: 700; font-size: 16px;
  white-space: normal;
}

@media (max-width: 768px) {
  /* Only tables whose every cell carries a data-label can fold into cards —
     the rest keep their shape and scroll, which is better than a stack of
     unlabelled values. */
  .prose .table-responsive-cards.is-cards { overflow-x: visible; border: 0; border-radius: 0; background: none; }
  .prose .is-cards .scs-table { min-width: 0; }
  .prose .is-cards .scs-table thead { display: none; }
  .prose .is-cards .scs-table,
  .prose .is-cards .scs-table tbody,
  .prose .is-cards .scs-table tr,
  .prose .is-cards .scs-table tbody th,
  .prose .is-cards .scs-table td { display: block; width: 100%; }
  /* A row that opens with <th scope="row"> is naming itself, so that cell
     becomes the card's title strip rather than another labelled row. */
  .prose .is-cards .scs-table tbody th {
    background: var(--mist); text-align: left;
    font-family: var(--font-heading); font-weight: 700; font-size: 16px; color: var(--ink);
    border-bottom: 1px solid var(--border-light);
  }
  .prose .is-cards .scs-table tr {
    border: 1px solid var(--border); border-radius: var(--radius);
    background: #fff; margin-bottom: 14px; overflow: hidden;
  }
  .prose .is-cards .scs-table td {
    display: flex; gap: 14px; align-items: baseline;
    border-bottom: 1px solid var(--border-light);
  }
  .prose .is-cards .scs-table tr td:last-child { border-bottom: 0; }
  .prose .is-cards .scs-table tbody tr:nth-child(even) td { background: transparent; }
  .prose .is-cards .scs-table td::before {
    content: attr(data-label);
    flex: 0 0 40%; min-width: 0;
    font-family: var(--font-heading); font-weight: 700; font-size: 14px; color: var(--navy);
  }
  .prose .is-cards .scs-table td:first-child {
    background: var(--mist); font-weight: 700; color: var(--ink);
  }
}

/* --- Landing: "What is sinusitis" stacked layout (design update Oct 2026) ---
   The diagram used to sit beside the copy at roughly half width, which made
   the labels baked into the artwork hard to read. It now runs full width
   under centred copy, so the labels render close to their native size. */
.lp-section__inner--stack { display: flex; flex-direction: column; gap: 36px; align-items: stretch; }
.lp-section__lead { max-width: 900px; min-width: 0; margin: 0 auto; text-align: center; display: flex; flex-direction: column; gap: 18px; }
.lp-section__lead p { margin: 0; font-size: 17.5px; line-height: 1.8; color: var(--body-color); text-wrap: pretty; }
.lp-section__diagram--wide {
  flex: none; max-width: none; width: 100%; box-sizing: border-box; margin: 0 auto;
  aspect-ratio: 900 / 288; object-fit: contain;
}

/* Phones split that one wide diagram into three stacked cards, one per panel
   (mobile design, Oct 2026). The crop is pure background maths, so no sliced
   image files are needed: at 302% x 100% the source is 3.02x the card width,
   and positions 0% / 50% / 100% land on the three thirds. Pairing that with
   aspect-ratio 298/288 keeps the artwork undistorted for a 900x288 source
   (3.02 / (288/298) = 3.125 = 900/288), and the spare 2% insets each crop so a
   neighbouring panel never bleeds into frame.
   NOTE: this assumes the section image stays a three-panel strip roughly 3:1.
   A replacement image of another shape would need these numbers revisited. */
.lp-diagram-split { display: none; }
.lp-diagram-split__panel {
  display: block; width: 100%; aspect-ratio: 298 / 288;
  /* Opaque background: these pin and scroll over one another on phones, so the
     rounded corners must not let the card underneath show through. */
  background-color: #fff;
  background-image: var(--scs-diagram); background-repeat: no-repeat; background-size: 302% 100%;
  border: 1px solid var(--border-light); border-radius: 18px;
  box-shadow: 0 2px 6px rgba(11,31,51,0.05), 0 10px 24px rgba(11,31,51,0.06);
}
.lp-diagram-split__panel:nth-child(1) { background-position: 0% 0%; }
.lp-diagram-split__panel:nth-child(2) { background-position: 50% 0%; }
.lp-diagram-split__panel:nth-child(3) { background-position: 100% 0%; }
@media (max-width: 720px) {
  .lp-section__diagram--wide { display: none; }
  /* width:100% is load-bearing, not decoration. This box is a flex item of a
     COLUMN flex container (.lp-section__inner--stack), so its cross size (width)
     is resolved after its main size (height). Without an explicit width the
     panels' own width is indefinite while the container's height is being
     computed, aspect-ratio transfers nothing, and the container collapses to
     just the panel borders plus gaps (30px) while the panels still paint at
     full height - which drops the next section on top of the diagram. */
  .lp-diagram-split { display: flex; flex-direction: column; gap: 12px; width: 100%; }
  /* The stack effect: each panel pins under the header and the next one scrolls
     up over it, like a dealt deck - same treatment as the benefits cards. Each
     card stops 8px lower than the one before so the edges of the ones beneath
     stay visible instead of hiding behind a single line. */
  .lp-diagram-split__panel { position: sticky; top: calc(var(--lp-hdr, 66px) + 12px); }
  .lp-diagram-split__panel:nth-child(1) { z-index: 1; }
  .lp-diagram-split__panel:nth-child(2) { z-index: 2; top: calc(var(--lp-hdr, 66px) + 20px); }
  .lp-diagram-split__panel:nth-child(3) { z-index: 3; top: calc(var(--lp-hdr, 66px) + 28px); }
  /* The third card pins only briefly: a sticky box is clamped to its parent's
     content box, and the last panel sits flush with it. Container padding is
     outside that box, and a margin on the panel moves the box down by the same
     amount it moves the panel, so neither buys travel - it would take a spacer
     element. Cards 1 and 2 pin and get covered, which is the effect; the
     benefits stack above behaves the same way on its final card. */
}

/* --- Landing: benefits card (design update Oct 2026) ----------------------
   One white card holding the list and a photo that bleeds to the card edge,
   replacing the grid of individually boxed checklist items. */
.lp-benefits { background: #F7FAFC; scroll-margin-top: 96px; }
.lp-benefits__inner { max-width: 1240px; margin: 0 auto; padding: 78px 32px; }
.lp-benefits__card {
  display: flex; flex-wrap: wrap; background: #fff; border: 1px solid var(--border-light);
  border-radius: 22px; overflow: hidden;
  box-shadow: 0 2px 6px rgba(11,31,51,0.05), 0 10px 24px rgba(11,31,51,0.06);
}
/* order:2 puts the photo after the copy on wide screens; when the card wraps
   on a phone the copy still comes first, which is the reading order too. */
.lp-benefits__media { flex: 1 1 380px; min-height: 360px; position: relative; order: 2; }
.lp-benefits__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 35% 50%; display: block; }
.lp-benefits__copy { flex: 1.4 1 480px; min-width: 0; padding: 48px 52px; display: flex; flex-direction: column; gap: 22px; }
.lp-benefits__copy h2 { font-family: var(--font-heading); font-weight: 800; font-size: 34px; line-height: 1.14; letter-spacing: -0.024em; margin: 0; color: var(--navy); }
/* A divided list, not a stack of cards: hairlines between rows instead of a
   border and shadow around every item. */
.lp-benefit-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-bottom: 1px solid var(--border-light); }
.lp-benefit-list li {
  display: flex; align-items: center; gap: 14px; padding: 14px 0;
  border-top: 1px solid var(--border-light);
  font-size: 17px; line-height: 1.5; color: var(--body-color); text-wrap: pretty;
}
.lp-benefit-list__tick {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: #EFF4E7; border: 1px solid var(--sage-tint); color: var(--sage-deep);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; line-height: 1;
}

@media (max-width: 900px) {
  .lp-benefits__inner { padding: 44px 20px; }
  .lp-benefits__copy { padding: 32px 24px; gap: 18px; }
  .lp-benefits__copy h2 { font-size: 27px; }
  .lp-benefits__media { min-height: 260px; }
}

/* --- Landing pages on phones (mobile design, Oct 2026) -------------------
   The desktop hero leans on its photo; at phone width the photo is mostly
   cropped away behind the copy, so it is dropped for the brand gradient with
   two faint logo marks — the same treatment the inner-page banners use. */
.lp-header__call-icon { display: none; }
.lp-actionbar { display: none; }

@media (max-width: 720px) {
  .lp-hero {
    background: linear-gradient(160deg, var(--ink) 0%, var(--navy) 46%, #2A4A45 78%, #3E5340 100%);
  }
  /* The photo and its wash both go: there is nothing left to darken. */
  .lp-hero::before { content: none; }
  .lp-hero::after,
  .lp-hero__mark {
    content: ''; position: absolute; width: 460px; height: 433px;
    background: #fff; opacity: 0.06; pointer-events: none;
    -webkit-mask-image: url('assets/img/swoosh-mask.png'); mask-image: url('assets/img/swoosh-mask.png');
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  }
  .lp-hero::after { top: -80px; right: -120px; }
  .lp-hero__mark { bottom: -140px; left: -110px; opacity: 0.05; transform: scaleX(-1); }
  .lp-hero__inner { padding: 44px var(--gutter); gap: 26px; }
  .lp-hero__copy h1 { font-size: 33px; line-height: 1.12; }
  .lp-hero__lede { font-size: 17px; line-height: 1.6; }
  .lp-hero__quote p { font-size: 18px; line-height: 1.5; }

  /* Header: logo plus a tap-to-call button, with the section-menu toggle
     beside it. The written-out number is desktop-only. */
  .lp-header { position: sticky; top: 0; z-index: 55; background: rgba(255,255,255,0.97); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .lp-header__inner { padding: 12px 18px; gap: 12px; }
  .lp-header__inner img { height: 40px; }
  .lp-header__call { display: none; }
  .lp-header__call-icon {
    flex: none; display: flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 12px;
    background: var(--sage-deep); color: #fff; margin-left: auto;
  }
  .lp-header__call-icon:hover { background: var(--sage-press); color: #fff; }
  /* The toggle sits in the header now, so the bar itself is only the panel
     the toggle opens — no row of its own, and no second sticky strip. */
  .lp-header__inner .lp-bar__toggle { margin-left: 0; }
  .lp-bar { position: static; background: #fff; border-bottom: 0; box-shadow: none; }
  .lp-bar__inner { padding: 0; }
  .lp-bar:not(.nav-open) .lp-bar__inner { display: none; }
  .lp-bar.nav-open .lp-bar__inner { padding: 4px var(--gutter) 12px; border-bottom: 1px solid var(--border-light); }
  .lp-bar__cta { display: none; }

  /* Two standing actions, pinned to the bottom of the screen. */
  .lp-actionbar {
    position: sticky; bottom: 0; z-index: 60; display: grid; grid-template-columns: 1fr 1.25fr; gap: 10px;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,0.97); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top: 1px solid var(--border-light); box-shadow: 0 -6px 20px rgba(11,31,51,0.08);
  }
  .lp-actionbar a {
    display: flex; align-items: center; justify-content: center; text-align: center;
    border-radius: var(--radius); padding: 14px 12px;
    font-weight: 700; font-size: 13.5px; letter-spacing: 0.08em; text-transform: uppercase;
  }
  .lp-actionbar__call { background: #EFF4E7; color: var(--sage-press); border: 1px solid var(--sage-tint); }
  .lp-actionbar__cta { background: var(--sage); color: var(--ink); }

  /* Benefits: no photo, and each point becomes its own card that pins under
     the header as the next one scrolls over it. */
  .lp-benefits { background: #fff; }
  .lp-benefits__inner { padding: 44px var(--gutter); }
  .lp-benefits__card { display: block; background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
  .lp-benefits__media { display: none; }
  .lp-benefits__copy { padding: 0; gap: 20px; }
  .lp-benefits__copy h2 { font-size: 26px; line-height: 1.18; }
  .lp-benefit-list { display: grid; grid-template-columns: 1fr; gap: 10px; border-bottom: 0; }
  .lp-benefit-list li {
    position: sticky; top: calc(var(--lp-hdr, 66px) + 12px);
    align-items: flex-start; gap: 12px; padding: 14px 16px; border-top: 0;
    background: #F7FAFC; border: 1px solid var(--border-light); border-radius: 12px;
    font-size: 16.5px; line-height: 1.6;
    box-shadow: 0 2px 6px rgba(11,31,51,0.05), 0 10px 24px rgba(11,31,51,0.06);
  }
  /* Each card stops 8px lower than the one before, so the stack fans out
     instead of hiding behind a single edge. */
  .lp-benefit-list li:nth-child(1) { z-index: 1; }
  .lp-benefit-list li:nth-child(2) { z-index: 2; top: calc(var(--lp-hdr, 66px) + 20px); }
  .lp-benefit-list li:nth-child(3) { z-index: 3; top: calc(var(--lp-hdr, 66px) + 28px); }
  .lp-benefit-list li:nth-child(4) { z-index: 4; top: calc(var(--lp-hdr, 66px) + 36px); }
  .lp-benefit-list li:nth-child(5) { z-index: 5; top: calc(var(--lp-hdr, 66px) + 44px); }
  .lp-benefit-list li:nth-child(6) { z-index: 6; top: calc(var(--lp-hdr, 66px) + 52px); }
  .lp-benefit-list li:nth-child(7) { z-index: 7; top: calc(var(--lp-hdr, 66px) + 60px); }
  .lp-benefit-list li:nth-child(8) { z-index: 8; top: calc(var(--lp-hdr, 66px) + 68px); }
  .lp-benefit-list li:nth-child(n+9) { z-index: 9; top: calc(var(--lp-hdr, 66px) + 76px); }
  .lp-benefit-list__tick { width: 22px; height: 22px; background: var(--sage-deep); border: 0; color: #fff; font-size: 12px; margin-top: 2px; }
}

/* Reduced motion: a stack that slides over itself is motion. Keep the cards
   in a plain list for anyone who has asked for less of it. */
@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  .lp-benefit-list li { position: static; }
}

/* --- Insurance verification form (page-templates/insurance-verification.php) ---
   Two fieldsets of fields, a yes/no pill pair, a conditional "primary holder"
   panel and a consent checkbox. The markup comes from Contact Form 7, so these
   rules target the classes used in the form template plus CF7's own wrappers. */
.ivf { max-width: 880px; margin: 0 auto; padding: 64px var(--gutter) 78px; display: flex; flex-direction: column; gap: 22px; }
.ivf__lede { margin: 0; font-size: 17.5px; line-height: 1.7; color: var(--body-color); text-wrap: pretty; }
.ivf__note { margin: 0; font-size: 15px; line-height: 1.6; color: var(--slate); }
.ivf__fallback { margin: 0; font-size: 17px; line-height: 1.6; color: var(--body-color); }
.ivf__card {
  background: #F7FAFC; border: 1px solid var(--border-light); border-radius: 18px;
  padding: 30px 32px;
  box-shadow: 0 2px 6px rgba(11,31,51,0.05), 0 10px 24px rgba(11,31,51,0.06);
}
.ivf__group { border: 0; padding: 0; margin: 0 0 26px; }
.ivf__group:last-of-type { margin-bottom: 0; }
.ivf__group > legend {
  padding: 0 0 16px; font-family: var(--font-heading); font-weight: 800;
  font-size: 22px; line-height: 1.2; color: var(--navy);
}
.ivf__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.ivf__field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ivf__field--full { grid-column: 1 / -1; }
.ivf__field > span,
.ivf__legend {
  font-size: 14px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--slate);
}
.ivf__req { color: #B42318; }
.ivf .wpcf7-form-control-wrap { display: block; width: 100%; }
.ivf input[type="text"], .ivf input[type="tel"], .ivf input[type="email"],
.ivf input[type="date"], .ivf textarea {
  width: 100%; font-family: var(--font-body); font-size: 16px; color: var(--ink);
  background: #fff; border: 1px solid var(--border-field); border-radius: 10px;
  padding: 13px 15px; outline: none;
}
.ivf textarea { resize: vertical; min-height: 110px; }
.ivf input:focus, .ivf textarea:focus {
  border-color: var(--sage); box-shadow: 0 0 0 3px rgba(142,154,99,0.18);
}
.ivf input.wpcf7-not-valid, .ivf textarea.wpcf7-not-valid { border-color: var(--clay); }
.ivf .wpcf7-not-valid-tip { display: block; padding-top: 6px; font-size: 15px; color: var(--clay); }

/* Yes / No pills */
.ivf__radios { border: 0; padding: 0; margin: 22px 0 0; display: flex; flex-direction: column; gap: 10px; }
.ivf__radios .wpcf7-radio { display: flex; gap: 12px; flex-wrap: wrap; }
.ivf__radios .wpcf7-list-item { margin: 0; }
.ivf__radios .wpcf7-list-item label {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 20px;
  background: #fff; border: 1px solid var(--border-field); border-radius: 10px;
  font-size: 16px; font-weight: 600; color: var(--navy); cursor: pointer;
}
.ivf__radios input[type="radio"] { accent-color: var(--sage-deep); width: 18px; height: 18px; margin: 0; }

/* The panel that only applies when the patient is not the policy holder. */
.ivf__holder {
  margin-top: 18px; background: #fff; border: 1px solid var(--border-light);
  border-radius: 14px; padding: 22px 24px; display: flex; flex-direction: column; gap: 16px;
}
.ivf__holder[hidden] { display: none; }
.ivf__holder-title { font-family: var(--font-heading); font-weight: 700; font-size: 18px; color: var(--navy); }

/* Consent checkbox */
.ivf__consent { margin-top: 22px; }
.ivf__consent .wpcf7-list-item { margin: 0; }
.ivf__consent .wpcf7-list-item label { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.ivf__consent input[type="checkbox"] { flex: none; width: 18px; height: 18px; margin-top: 3px; accent-color: var(--sage-deep); }
.ivf__consent .wpcf7-list-item-label { font-size: 15.5px; line-height: 1.6; color: var(--body-color); }

.ivf__submit { margin-top: 24px; }
.ivf__submit input[type="submit"] {
  width: 100%; background: var(--sage-deep); color: #fff; border: 0; border-radius: var(--radius);
  padding: 17px 24px; font-family: var(--font-body); font-weight: 700; font-size: 15px;
  letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
  transition: background 0.2s ease, transform 0.18s ease;
}
.ivf__submit input[type="submit"]:hover { background: var(--sage-press); transform: translateY(-2px); }

@media (max-width: 720px) {
  .ivf { padding: 40px var(--gutter) 54px; }
  .ivf__card { padding: 22px 18px; border-radius: 14px; }
  .ivf__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ivf__holder { padding: 18px 16px; }
  .ivf__group > legend { font-size: 20px; }
}

/* --- 404 "page not found" (404.php) --------------------------------------
   A mist panel carrying the big numeral, the heading and the two buttons,
   then a white band of helpful-link cards. Phones get the single-column
   treatment from the mobile design: stacked full-width buttons and cards
   laid out as a row rather than a stack. */
.nf { position: relative; overflow: hidden; background: var(--mist); }
.nf__swoosh { opacity: 0.07; }
.nf__swoosh--one { top: -120px; right: -160px; width: 620px; height: 583px; background: var(--navy); }
.nf__swoosh--two { bottom: -200px; left: -180px; width: 560px; height: 527px; background: var(--sage); opacity: 0.1; transform: scaleX(-1); }
.nf__inner {
  position: relative; max-width: 1040px; margin: 0 auto;
  padding: 110px var(--gutter) 120px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px;
}
.nf__eyebrow { font-size: 14px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage-deep); }
.nf__numeral {
  font-family: var(--font-heading); font-weight: 800; font-size: 168px;
  line-height: 0.9; letter-spacing: -0.05em; color: var(--navy);
}
.nf__title {
  font-family: var(--font-heading); font-weight: 800; font-size: 44px;
  line-height: 1.12; letter-spacing: -0.026em; margin: 0; color: var(--navy);
}
.nf__text { margin: 0; max-width: 600px; font-size: 18px; line-height: 1.7; color: var(--body-color); text-wrap: pretty; }
.nf__phone { color: var(--navy); font-weight: 700; white-space: nowrap; }
.nf__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; }
.nf__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 700; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 17px 30px; border-radius: 12px;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.18s ease;
}
.nf__btn--primary { background: var(--sage-deep); color: #fff; }
.nf__btn--primary:hover { background: var(--sage-press); color: #fff; transform: translateY(-2px); }
.nf__btn--ghost { background: #fff; color: var(--navy); border: 1px solid #C6D4E0; }
.nf__btn--ghost:hover { border-color: var(--navy); color: var(--navy); transform: translateY(-2px); }

.nf-links { background: #fff; }
.nf-links__inner { max-width: 1040px; margin: 0 auto; padding: 0 var(--gutter) 90px; display: flex; flex-direction: column; gap: 14px; }
.nf-links__title { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage); }
.nf-links__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
/* Row of [name over description] + arrow. Desktop aligns the arrow with the
   name line (align-items: flex-start); phones centre it against the pair. */
.nf-card {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  background: #fff; border: 1px solid var(--border-light); border-radius: 16px;
  padding: 22px 24px; color: var(--navy); text-align: left;
  box-shadow: 0 2px 6px rgba(11,31,51,0.05), 0 10px 24px rgba(11,31,51,0.06);
  transition: border-color 0.2s ease, transform 0.18s ease;
}
.nf-card:hover { border-color: var(--sage-tint); transform: translateY(-2px); color: var(--navy); }
.nf-card__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.nf-card__name { font-family: var(--font-heading); font-weight: 700; font-size: 18px; }
.nf-card__arrow { flex: none; color: var(--sage); }
.nf-card__desc { font-size: 16px; line-height: 1.5; color: var(--body-color); }

@media (max-width: 720px) {
  .nf__swoosh--one { top: -70px; right: -110px; width: 320px; height: 301px; }
  .nf__swoosh--two { display: none; }
  .nf__inner { padding: 48px var(--gutter) 52px; gap: 16px; }
  .nf__eyebrow { font-size: 13px; }
  .nf__numeral { font-size: 104px; }
  .nf__title { font-size: 30px; line-height: 1.15; letter-spacing: -0.024em; }
  .nf__text { font-size: 16.5px; }
  /* Full-width stacked buttons, each a comfortable tap target. */
  .nf__actions { width: 100%; flex-direction: column; gap: 10px; }
  .nf__btn { min-height: 52px; padding: 0 22px; }
  .nf__btn--ghost { border-width: 1.5px; }
  .nf-links__inner { padding: 30px var(--gutter) 40px; gap: 12px; }
  .nf-links__title { font-size: 13px; }
  .nf-links__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .nf-card { align-items: center; gap: 14px; min-height: 44px; padding: 16px 18px; border-radius: 14px; }
  .nf-card__body { gap: 4px; }
  .nf-card__name { font-size: 17px; }
  .nf-card__desc { font-size: 15px; }
}