/* ============================================================
   GLOBAL CHROME — header (desktop + mobile), Find Us, and footer.
   Shared across every page (loaded after styles.css).
   ============================================================ */

/* ============================================================
   SHARED CHROME — header (identical on every page)
   Figma: home 2902:1056 · header frame x84 y0 1752×166.
   Layout: logo left (312×68 @y40); right column = utility bar
   (18h) + 24 gap + nav (44h). 40px top/bottom padding → 166.
   ============================================================ */

.site-header {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 100;
  background: var(--white);
  transition: box-shadow var(--dur) var(--ease), padding var(--dur) var(--ease), background var(--dur) var(--ease);
}

/* Figma 2943:1813 (Homepage - Sticky Menu): a solid #FFF 1920x110 bar, logo at
   y16. 16 + 86 (utility 18 + 24 gap + nav 44) + 8 = 110 (QA-048). The mobile
   bar's 0.92 white is its own board's spec (2943:1645) and stays. */
.site-header.scrolled { box-shadow: 0 2px 16px rgba(0,0,0,.08); background: var(--white); }

.scrolled .site-header__inner { padding-block: 16px 8px; }

.header-spacer { height: 166px; }

.site-header__inner {
  /* max-width: calc(1920 * var(--u)); */ margin-inline: auto; padding: 40px 86px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 40px;
  transition: padding var(--dur) var(--ease);
}


.site-logo { flex: none; /* width: calc(312 * var(--u)); */ }


.site-logo img { width: 100%; height: auto; }


.header-right { display: flex; flex-direction: column; align-items: flex-end; gap: calc(24 * var(--u)); }


/* Utility bar */

.utility { display: flex; align-items: center; gap: calc(48 * var(--u)); height: 18px; }

.utility a, .utility .util-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; line-height: 17.85px; font-weight: 500; color: var(--ink-mid);
  transition: color var(--dur) var(--ease);
}

.utility a:hover { color: var(--brand); }

.utility svg, .utility .util-ico { flex: none; color: var(--brand); }

.utility__group { display: flex; align-items: center; gap: 16px; }

.utility__divider { width: 2px; height: 18px; background: #00B3F0; }

.utility__lang { text-transform: none; }

/* Phone number hover dropdown — all 4 clinic numbers at a glance */

.utility__phone { position: relative; }

.utility__phone .chev { transition: transform var(--dur) var(--ease); }

.utility__phone:hover .chev, .utility__phone:focus-within .chev { transform: rotate(180deg); }

.utility__phone-menu {
  position: absolute; top: 100%; right: 0; margin-top: 0; width: 264px;
  background: var(--white); border: 1px solid var(--brand); border-radius: var(--r-card);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12); padding: 16px 8px 8px;
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(-4px); pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur) var(--ease);
  z-index: 30;
}

.utility__phone:hover .utility__phone-menu, .utility__phone:focus-within .utility__phone-menu {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}

.utility__phone-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 10px; border-radius: 4px; white-space: nowrap;
  font-size: 13px; font-weight: 500; color: var(--ink-mid);
  transition: background var(--dur) ease-in-out, color var(--dur) ease-in-out;
}

.utility__phone-item span:last-child { color: var(--ink); font-weight: 600; }

.utility__phone-item:hover { background: var(--grad-hover); }

.utility__phone-item:hover span { color: var(--white); }


/* Primary nav */

.main-nav { display: flex; align-items: center; gap: calc(38 * var(--u)); height: 44px; }

.nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 16px; line-height: 20.4px; font-weight: 500; color: var(--ink-mid);
  white-space: nowrap; transition: color var(--dur) var(--ease);
  letter-spacing: -0.32px; text-transform: uppercase;
}

.nav-link:hover, .nav-link.active { color: var(--brand); }

.nav-link .chev { transition: transform var(--dur) var(--ease); }

.has-mega:hover .nav-link .chev, .nav-item.open .nav-link .chev { transform: rotate(180deg); }

.nav-item { position: relative; }


/* CTA pill in nav */

.nav-cta {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: 10px; padding: 12px calc(24 * var(--u));
  background: var(--brand); color: var(--white); border-radius: var(--r-btn);
  font-size: 16px; line-height: 20.4px; font-weight: 700; white-space: nowrap;
  transition: background var(--dur) ease-in-out;
}


/* CTA dropdown: phone + location switcher, click-triggered.
   Visually one seamless pill (per Figma 1-13) — label + toggle share the same
   background and hover together; only the toggle's chevron is a separate
   click target so BOOK A CONSULTATION still links straight through. */

.nav-cta-wrap { position: relative; display: inline-flex; align-items: stretch; }

/* On the booking page the CTA links to where you already are, so it reads as a
   disabled current-page pill. The chevron stays live — the panel behind it is
   the only route to the virtual-consultation page. */
.page-booking .nav-cta { pointer-events: none; }

.page-booking .nav-cta,
.page-booking .nav-cta__toggle { background: var(--border); color: var(--ink-mid); }

.page-booking .nav-cta-wrap:hover .nav-cta,
.page-booking .nav-cta-wrap.is-open .nav-cta,
.page-booking .nav-cta-wrap:hover .nav-cta__toggle,
.page-booking .nav-cta-wrap.is-open .nav-cta__toggle { color: var(--ink-mid); }

.page-booking .nav-cta::before,
.page-booking .nav-cta__toggle::before { content: none; }

.nav-cta-wrap .nav-cta { border-top-right-radius: 0; border-bottom-right-radius: 0; padding-right: calc(4 * var(--u)); }

.nav-cta__toggle {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px calc(20 * var(--u)) 12px calc(6 * var(--u)); background: var(--brand); color: var(--white);
  border-top-right-radius: var(--r-btn); border-bottom-right-radius: var(--r-btn);
  transition: background var(--dur) ease-in-out;
}

/* Gradient hover as a fading overlay (opacity), not a background swap —
   a solid color can't transition into a gradient, it just blinks; this
   layer sits behind the label/chevron and fades in smoothly instead. */

.nav-cta::before, .nav-cta__toggle::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: var(--grad-hover);
  opacity: 0;
  transition: opacity var(--dur) ease-in-out;
  pointer-events: none;
}

.nav-cta-wrap:hover .nav-cta, .nav-cta-wrap:hover .nav-cta__toggle,
.nav-cta-wrap.is-open .nav-cta, .nav-cta-wrap.is-open .nav-cta__toggle { color: var(--white); }

.nav-cta-wrap:hover .nav-cta::before, .nav-cta-wrap:hover .nav-cta__toggle::before,
.nav-cta-wrap.is-open .nav-cta::before, .nav-cta-wrap.is-open .nav-cta__toggle::before { opacity: 1; }

.nav-cta__toggle svg { transition: transform var(--dur) var(--ease); }

.nav-cta-wrap.is-open .nav-cta__toggle svg { transform: rotate(180deg); }

.cta-panel {
  position: absolute; top: 100%; right: 0; margin-top: 8px; width: 260px;
  background: var(--white); border: 1px solid var(--brand); border-radius: var(--r-card);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12); padding: 16px;
  display: none; z-index: 30; font-family: var(--font);
}

.nav-cta-wrap.is-open .cta-panel { display: block; }

.cta-panel__phone {
  display: flex; align-items: center; gap: 8px; padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px solid var(--border); font-size: 16px; font-weight: 600; color: var(--ink);
  transition: color var(--dur) ease-in-out;
}

.cta-panel__phone:hover { color: var(--brand); }

.cta-panel__phone svg { flex: none; color: var(--brand); }

.cta-panel__locs { display: flex; flex-direction: column; gap: 4px; }

.cta-panel__loc {
  text-align: left; padding: 10px 12px; font-size: 14px; font-weight: 500; color: var(--ink-mid);
  border-radius: 4px; transition: background var(--dur) ease-in-out, color var(--dur) ease-in-out;
}

.cta-panel__virtual {
  display: flex; width: 100%; margin-top: 12px; padding: 10px 12px;
  font-size: 14px; line-height: 1.4; border: none;
}

.cta-panel__loc:hover, .cta-panel__loc.is-active { background: var(--grad-hover); color: var(--white); }


/* Mobile header (hidden on desktop) */

.mobile-header { display: none; }

/* Figma 2902:1011 "Header / Menu Toggle": 32x16, three 2px round-capped
   #00B3F0 lines, right-aligned at 24 / 32 / 12 px. The button is a 44x44 tap
   target (QA-052); negative margins keep its layout footprint at the icon's
   32x18 so the header row doesn't move. */
.hamburger { width: 44px; height: 44px; margin: -13px -6px; position: relative; flex: none; }

.hamburger span { position: absolute; right: 6px; height: 2px; background: var(--brand); border-radius: 2px; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), width var(--dur) var(--ease); }

.hamburger span:nth-child(1) { top: 13px; width: 24px; }

.hamburger span:nth-child(2) { top: 21px; width: 32px; }

.hamburger span:nth-child(3) { top: 29px; width: 12px; }

.mobile-header.open .hamburger span { width: 32px; }

.mobile-header.open .hamburger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }

.mobile-header.open .hamburger span:nth-child(2) { opacity: 0; }

.mobile-header.open .hamburger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }


/* Mobile menu overlay */

.mobile-menu {
  position: fixed; inset: 0; top: 0; z-index: 99;
  background: var(--white) url(../images/artwork-bgs/bg-mobile-menu.png);
  padding: 100px 24px 40px; overflow-y: auto;
  visibility: hidden; opacity: 0; transform: translateY(-8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}

/* visibility flips at once on open (the delay only applies on close), so
   main.js can move focus into the menu immediately (QA-053) */
.mobile-menu.open { visibility: visible; opacity: 1; transform: none; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s; }

/* Artboard 2941:32: 74px rows (28px padding on an 18px line), 24px gutters,
   uppercase, hairline rule between rows but not after the last one, and a
   brand-blue chevron on the items that have a submenu. */

.mm-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 28px 0 27px; font-size: 18px; line-height: 18px; font-weight: 500;
  text-transform: uppercase; color: var(--ink);
  border-bottom: 1px solid var(--border);
}

/* accordion parents are <button aria-expanded> (QA-053) - full-width rows like the links */
button.mm-link { width: 100%; text-align: left; }

.mobile-menu > .mm-acc:last-of-type .mm-link { border-bottom: none; }

.mm-acc > .mm-link::after {
  content: ""; flex: none; align-self: center;
  width: 6px; height: 6px; margin-bottom: 3px;
  border-right: 1.5px solid var(--brand); border-bottom: 1.5px solid var(--brand);
  transform: rotate(45deg);
}

/* the artboard has no CTA in the menu — CALL US in the header covers it */
.mobile-menu > .btn { display: none; }

.mm-acc__panel { display: none; padding-left: 16px; }

.mm-acc.open .mm-acc__panel { display: block; }


/* ============================================================
   SHARED CHROME — Find Us (location switcher + map) + Footer
   Figma: Find Us 2911:32 (1920×1045, content x196 / map x980 856×846);
   Footer 2911:50 (1752×141). Page rides the pastel blob background.
   ============================================================ */

.findus { position: relative; margin: 160px 24px 0; padding: 115px 0; background: url(../images/artwork-bgs/bg-map.svg) no-repeat center / cover; border-radius: 8px; }

/* Find Us / Location: the map band is the page's own first section rather
   than a strip at the foot of another page, so it tucks under the header and
   owns the gap to whatever follows. Mobile keeps the shared .findus margins —
   the 1024 block below re-declares them at the same specificity. */
.location-map { margin-top: 24px; margin-bottom: 150px; }

.findus__inner {
  max-width: calc(1920 * var(--u)); margin-inline: auto; padding: 0 30px;
  display: grid; grid-template-columns: var(--col-520) calc(856 * var(--u));
  row-gap: calc(264 * var(--u)); column-gap: 0;
  align-items: center; justify-content: space-between;
}

.findus__heading { font-size: 40px; line-height: 51px; font-weight: 300; letter-spacing: -1.2px; color: var(--ink); }

.findus__copy { margin-top: calc(24 * var(--u)); max-width: calc(520 * var(--u)); }

.findus .loc-select { margin-top: calc(40 * var(--u)); }

.findus__clinic-name { margin-top: calc(40 * var(--u)); font-size: 20px; line-height: 25.5px; font-weight: 300; letter-spacing: -0.6px; color: var(--ink); }

.findus__details { margin-top: calc(35 * var(--u)); display: flex; flex-direction: column; gap: calc(24 * var(--u)); }

.findus__row { display: flex; gap: 16px; align-items: flex-start; font-size: 16px; line-height: 22.4px; color: var(--ink); }

.findus__row .ico { flex: none; color: var(--brand); margin-top: 6px; }

.findus__hours { display: grid; grid-template-columns: auto 1fr; gap: 4px calc(40 * var(--u)); }

.findus__hours dt { color: var(--ink); }

.findus__hours dd { color: var(--ink); }

.findus__maplink { display: inline-flex; align-items: center; gap: 10px; margin-top: calc(35 * var(--u)); color: var(--ink); font-weight: 500; }

.findus__maplink .ico { color: var(--brand); }


.findus__map { position: relative; width: calc(856 * var(--u)); max-width: 100%; aspect-ratio: 856 / 846; border-radius: var(--r-card); overflow: hidden; background: var(--surface); }

.findus__map iframe, .findus__map .map-canvas, .findus__mapcanvas { width: 100%; height: 100%; border: 0; display: block; }

.findus__pin { position: absolute; width: 46px; pointer-events: none; }


/* Footer */

.site-footer { position: relative; padding: 160px 0 100px; }

.site-footer__inner { /* max-width: calc(1920 * var(--u)); */ margin-inline: auto; padding-inline: calc(84 * var(--u)); }

.footer-top { display: flex; align-items: flex-end; justify-content: space-between; }

.footer-logo img { height: 63px; width: auto; }

.footer-social { display: flex; align-items: center; gap: calc(45 * var(--u)); }

.footer-social a { color: var(--brand); transition: opacity var(--dur) var(--ease); }

.footer-social a:hover { opacity: .7; }

.footer-divider { height: 1px; background: var(--brand); margin: 33px 0; }

.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: calc(24 * var(--u)); }

.footer-bottom, .footer-legal { font-size: 14px; line-height: 14px; color: var(--near-black); letter-spacing: 0.28px; text-transform: uppercase; }

.footer-legal { display: flex; gap: calc(24 * var(--u)); }

.footer-legal a { transition: color var(--dur) var(--ease); }

.footer-legal a:hover { color: var(--brand); }

/* "Cookie settings" reopens the consent gate - a button, styled as the links. */
.footer-legal__btn { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; transition: color var(--dur) var(--ease); }

.footer-legal__btn:hover { color: var(--brand); }

/* Copyright-row pipes: the design spaces them ~24px each side, which runs of
   spaces can't do in HTML (they collapse) - QA-028. */
.fb-sep { margin-inline: calc(26.5 * var(--u)); }   /* 644 row @1920, as the board */

/* "|" between the legal links. Generated content rather than markup; the
   colour is pinned so the bar does not follow the link hover. */
.footer-legal > * + *::before {
  content: "|";
  margin-right: calc(24 * var(--u));
  color: var(--near-black);
  pointer-events: none;
}

/* --- Shared chrome ---------------------------------------- */

.findus__content { padding-left: 165px; }

/* ---- Page-specific spacing hooks ---- */

.page-home .findus { /* margin-top: calc(160 * var(--u)); */ }

.page-home .site-footer { /* margin-top: calc(135 * var(--u)); */ }

.page-blog-detail .findus,
.page-blog .findus { margin-top: 160px; }

/* ---- Before/after wipe slider (shared component) ----
   1. .ba-before was stuck at the desktop calc(240 * --u) height: ~49px on
      mobile, and 22px short of the taller .home-ba card, which left a strip of
      the "after" image along the bottom.
   2. main.js drives the wipe with before.style.width = "<pct>%", so the mask is
      a fraction of .ba-compare and its image has to stay at full card width.
      The global `img { max-width: 100% }` reset clamped it to the mask. */

.ba-compare { container-type: inline-size; }

.ba-before { height: 100%; }

.ba-compare .ba-before img { width: 100cqw !important; height: 100% !important; max-width: none; }


.cnt{
  max-width: 1304px;
  margin: 0 auto;
}
.cnt-lg{
  max-width: 1528px;
  margin: 0 auto;
      padding: 0;
}


/* ============================================================
   RESPONSIVE OVERRIDES — one block per breakpoint, widest first, so the
   cascade reads top to bottom. Keep this the tail of the file: a top-level
   rule added below a block would silently beat it inside that breakpoint.
   ============================================================ */

@media (max-width: 1440px) {
  .site-header__inner {
    padding: 43px 25px;
  }

  .site-logo {
    margin-top: 7px; width: 263px;
  }

  .nav-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 14px;
  }

/* Placed after the .findus__content base rule (same specificity, so source
   order decides) and before the 1024 block, which resets it to 0. */

  .findus__content { padding-left: 45px; }

  .cnt{
    max-width: 100%;
    padding: 0 25px;
  }
  .cnt-lg{
      max-width: 100%;
      padding: 0 25px;
  }
}

@media (max-width: 1024px) {
  /* ---- Chrome: swap desktop header for the mobile header ---- */

  .site-header { display: none; }

  .mobile-header { display: block; position: fixed; top: 0; left: 0; width: 100%; z-index: 100; background: var(--white); transition: box-shadow var(--dur) var(--ease); }

  /* artboard 2943:1645 (Mobile Menu - Fixed): 390x61 bar, #FFF at 0.92 */
  .mobile-header.scrolled { box-shadow: 0 2px 16px rgba(0,0,0,.08); background: rgb(255 255 255 / 92%); }

  .mobile-utility { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--surface); padding: 8px 24px; }

  .mobile-utility a { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--ink-mid); }

  .mobile-utility .util-ico { color: var(--brand); flex: none; }

  /* Fixed 61px so the header totals 94px (matching .header-spacer) instead of
     overlapping the hero — the flex line resolved 7px taller than its tallest
     child. The old logo/CTA/hamburger widths also came to 424px on a 390
     viewport, which pushed the hamburger off the right edge. */
  .mobile-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 61px; padding: 0 24px; box-sizing: border-box; }

  .mobile-header .site-logo { width: 153px; margin-top: -2px; }

  .mobile-header__actions { display: flex; align-items: center; gap: 16px; }

  .mobile-call { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: var(--r-btn); background: var(--brand); color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; }

  .header-spacer { height: 94px; }

  .findus__inner, .site-footer__inner {
    display: block; grid-template-columns: none !important; gap: 0;
    padding-left: 24px !important; padding-right: 24px !important; max-width: 100%; min-height: 0;
  }

  /* Find Us: stack content then map; footer stacks */

  .findus { padding: 65px 0 39px; margin: 126px 0 0; background: url(../images/artwork-bgs/bg-map-mob.svg) no-repeat center / cover; }

  /* declared after .findus so it wins: on Find Us / Location the band is the
     first thing under the header, with no section above it to space away from */
  .location-map { margin-top: 0; }

  /* also missed by the shared mobile heading rule — artboard has 26/33 */
  .findus__heading { font-size: 26px; line-height: 33px; letter-spacing: -0.78px; }

  .findus__content { padding-left: 0; }

  .findus__copy { margin-top: 15px; max-width: none; }

  /* Artboard: the dropdown is full width (342) and 44 tall, and every block
     below it sits on ~22-45px gaps instead of the --u-scaled 5-8px. */
  .findus .loc-select { width: 100%; margin-top: 36px; }

  .findus .loc-select__toggle { padding: 11px 32px; }

  .findus__clinic-name { margin-top: 40px; }

  .findus__details { margin-top: 22px; gap: 20px; }

  .findus__maplink { margin-top: 28px; }

  .findus__map, .findus__mapcanvas { width: 100% !important; }

  .findus__map { margin-top: 32px; aspect-ratio: 342/338; }

  /* Mobile footer follows the 390 artboard, which reorders the desktop parts:
     socials, rule, the legal links stacked, then the copyright with the tio
     logo beside it. display:contents lifts the two wrappers out so all five
     parts can be placed on one grid. */
  .site-footer { padding: 50px 0 100px; }

  /* the shared .findus__inner/.site-footer__inner mobile rule sets
     grid-template-columns: none !important, which collapses the second column */
  .site-footer__inner { display: grid; grid-template-columns: 1fr auto !important; align-items: end; }

  .footer-top, .footer-bottom { display: contents; }

  .footer-social   { grid-area: 1 / 1 / 2 / -1; gap: 32px; }

  .footer-divider  { grid-area: 2 / 1 / 3 / -1; margin: 23px 0 31px; }

  .footer-legal    { grid-area: 3 / 1 / 4 / -1; flex-direction: column; gap: 14px; }

  .footer-legal > * + *::before { content: none; }

  /* artboard: "(c) COPYRIGHT 2026" / "ALL RIGHTS RESERVED" on two 21px lines,
     first line box on y230 of the footer. The clinic name and the pipes are
     desktop-only. */
  .footer-bottom > span { grid-area: 4 / 1 / 5 / 2; margin-top: 31px; line-height: 21px; }

  .footer-bottom .fb-org { display: none; }

  .footer-bottom .fb-rights { display: block; }

  /* same 31px offset as the copyright block so the mark tops out on its
     first line (artboard has both on y230) */
  .footer-logo { grid-area: 4 / 2 / 5 / 3; justify-self: end; align-self: start; margin-top: 31px; }

  .footer-logo img { height: 39px; }

  .page-blog-detail .findus,
  .page-blog .findus { margin-top: 65px; }
}

/* Tablet-only range. Lives in global.css, after .cnt-lg: that utility sets
   padding: 0 25px on the same element below 1440 and this file loads last, so
   the same rule in styles.css would lose the cascade. */
@media (min-width: 1025px) and (max-width: 1440px) {
  /* booking only: the pricing copy of this band sits on that page's 100 line */
  .page-booking .bk-appt__inner { padding: 0 60px; }
}

/* ============================================================
   CONTACT US MODAL — the Bonded contact form, same treatment as
   the Meet the Team details modal (.team-modal).
   ============================================================ */
.contact-modal {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: flex-start; justify-content: center;
  padding: calc(80 * var(--u)) calc(40 * var(--u));
  background: linear-gradient(120deg, #ffffff 0%, #fdf8f4 45%, #e9f7fe 100%);
  overflow-y: auto;
}
.contact-modal__close {
  position: absolute; top: 40px; right: 40px; width: 44px; height: 44px;
  border: none; background: none; color: var(--brand); cursor: pointer; padding: 0;
}
.contact-modal__panel { position: relative; width: 100%; max-width: 640px; padding: calc(40 * var(--u)) 0; }
.contact-modal__eyebrow { font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
.contact-modal__title { margin-top: 8px; font-size: 40px; line-height: 1.2; font-weight: 300; letter-spacing: -1.2px; color: var(--ink); }
.contact-modal__lead { margin-top: 16px; }
.contact-modal .consult-form { max-width: none; }
.consult-form__textarea { height: auto; min-height: 140px; resize: vertical; font: inherit; }
.contact-modal__thanks { margin-top: 24px; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
@media (max-width: 767px) {
  .contact-modal { padding: 72px 20px 40px; }
  .contact-modal__close { top: 16px; right: 16px; }
  .contact-modal__title { font-size: 30px; }
}

/* The portal widget's own floating "Patient portal" pill is not wanted (Nick, 17 Sep 2026):
   the header's Patient portal link opens the same dialog. The widget has no switch for the
   launcher, so hide it; PortalLink still uses its presence to know the widget has booted. */
#bpw-launcher { display: none !important; }