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

.topbar {
  background: var(--color-utility-blue);
  color: var(--color-white);
}

.topbar .container {
  display: flex;
  align-items: center;
  gap: 32px;
  padding-block: 16px;
  padding-inline: var(--container-px);
}

.topbar-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-body);
  font-weight: 500;
  white-space: nowrap;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: auto;
}

.topbar-spacer {
  flex: 1;
}

@media (max-width: 768px) {
  .topbar .container {
    padding-inline: var(--container-px-sm);
    gap: 16px;
  }
  .topbar-link span.label,
  .topbar-right span.label {
    display: none;
  }
}

.site-header {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 300;
}

.site-header .container {
  display: flex;
  align-items: center;
  gap: 60px;
  padding-block: 20px;
  padding-inline: var(--container-px);
}

.site-logo {
  flex-shrink: 0;
  position: relative;
  z-index: 210;
}

.site-logo img {
  height: 52px;
  width: auto;
}

.main-nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.main-nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-body);
  color: var(--color-black);
  transition: color var(--transition-base);
}

.main-nav a:hover {
  color: var(--color-utility-blue);
}

.main-nav a i {
  font-size: 14px;
}

/* ---- Nav items with dropdowns / mega menu ---- */

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-item .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-body);
  color: var(--color-black);
  transition: color var(--transition-base);
}

.nav-item .nav-link:hover {
  color: var(--color-utility-blue);
}

.nav-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 2px;
  color: var(--text-60);
  font-size: 11px;
  transition: transform var(--transition-base), color var(--transition-base);
}

.nav-item:hover .nav-caret,
.nav-item.is-open .nav-caret {
  color: var(--color-utility-blue);
}

.nav-item.is-open .nav-caret {
  transform: rotate(180deg);
}

.nav-dropdown {
  position: absolute;
  top: calc(100% + 20px);
  left: 50%;
  transform: translate(-50%, -12px);
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 12px;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
  z-index: 50;
}

.nav-dropdown a {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: var(--fs-body);
  color: var(--color-black);
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.nav-dropdown a i {
  color: var(--color-sky);
  width: 16px;
  text-align: center;
}

.nav-dropdown a:hover {
  background: var(--color-bg-tint);
  color: var(--color-utility-blue);
}

.nav-dropdown-all {
  border-top: 1px solid var(--color-border);
  margin-top: 4px;
  padding-top: 12px !important;
  font-weight: 500;
  color: var(--color-utility-blue) !important;
}

@media (hover: hover) {
  .nav-item:hover .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }

  /* Every dropdown (Services, Locations, Patient Resources) is now
     click-to-open/click-outside-to-close, matching main.js — hovering
     one open meant it closed again the instant the mouse moved away,
     before there was time to read or click anything inside. This
     overrides the generic hover-open rule above. The :not(.is-open)
     here is load-bearing: without it, this rule (4 class-equivalents)
     outranks .is-open's own opacity rule below (3), so hovering the
     now-open menu — unavoidable while actually reading or clicking
     anything in it — would immediately re-hide it despite the click
     that opened it. */
  .nav-item:hover:not(.is-open) .nav-dropdown {
    opacity: 0;
    visibility: hidden;
  }
}

.nav-item.is-open .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* ---- Mega menu (Services) ----
   Breaks out of .nav-item's own positioning context to span the full
   viewport edge to edge (position: fixed ignores ancestor positioning,
   only transforms create a new containing block, and nothing up the
   chain here has one) instead of floating as a narrow card anchored to
   the "Services" link. --header-bottom is kept in sync with the sticky
   header's actual bottom edge by JS (it shifts once the topbar scrolls
   out of view), so the panel always sits flush under the header. */
.nav-dropdown.mega {
  /* Overrides the inherited display:flex/flex-direction:column from
     .nav-dropdown above. With those still active, .mega-inner became a
     flex item on the cross axis — auto margins on a stretched flex item
     disable stretch and shrink it to fit-content instead, which broke
     the max-width + margin-inline: auto centering trick it relies on to
     line up with the header's own container. A plain block child
     doesn't have that problem. */
  display: block;
  position: fixed;
  left: 0;
  right: 0;
  top: var(--header-bottom, 90px);
  /* .nav-dropdown's own base rule sets transform: translate(-50%, -12px)
     to center a narrow popover under its trigger. Left undeclared here,
     that transform would still apply (a more specific selector only
     overrides properties it names), shifting this full-width, left:0
     panel half its own width off-screen at rest. */
  transform: none;
  width: 100%;
  min-width: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: 0 20px 40px -20px rgba(1, 12, 30, 0.25);
  border-top: 1px solid var(--color-border);
  /* Closed state clips to zero height instead of just fading — the open
     transition below then reveals it by growing straight down from the
     header edge, an unambiguous top-to-bottom unfurl rather than a
     fade-in-place (which read as sideways motion to some eyes, since
     this panel is nearly full viewport width and a wide, symmetric fade
     has no obvious "from" direction to anchor on). */
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-base) ease, opacity var(--transition-base), visibility var(--transition-base);
}

.nav-item.is-open .nav-dropdown.mega {
  /* On shorter viewports the panel can run taller than the screen
     (image panel + full services grid + conditions strip + footer). Since
     this is position:fixed, anything past the viewport edge would
     otherwise be permanently unreachable — page scroll doesn't move a
     fixed element. Scrolling the panel itself instead keeps everything
     reachable, hence overflow-y: auto only once open (closed state stays
     overflow: hidden above, which is what actually clips the reveal). */
  max-height: calc(100vh - var(--header-bottom, 90px));
  overflow-y: auto;
}

/* .nav-dropdown's own hover/open rules (above) set a generic
   `transform: translate(-50%, 0)` for centering a narrow popover under
   its trigger — meant for the plain dropdowns (Locations, Patient
   Resources), not this full-width, left:0 panel. Both of those context
   rules (.nav-item:hover .nav-dropdown / .nav-item.is-open .nav-dropdown)
   carry the same specificity as a bare .nav-dropdown.mega override would,
   so neutralizing it here has to match their own specificity exactly
   (nav-item + state + nav-dropdown + mega) or it silently loses the
   cascade and the mega panel gets shifted left by half its own
   (near-viewport) width — exactly the sideways glitch this file's
   history was written to rule out. */
.nav-item:hover .nav-dropdown.mega,
.nav-item.is-open .nav-dropdown.mega {
  transform: none;
}

.mega-inner {
  display: flex;
  gap: 40px;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 32px var(--container-px);
}

.mega-list-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.mega-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.mega-list-label {
  display: block;
  font-size: var(--fs-small);
  color: var(--text-70);
}

/* Plain text link, not a filled button — just points at the full
   Services hub instead of duplicating it as a heavy CTA. !important
   throughout: .nav-dropdown a (padding, border-radius, black text,
   flex+gap) otherwise wins on specificity, same as every other link
   inside this menu had to be fought all session. */
.mega-list-all {
  display: inline-flex !important;
  align-items: center;
  gap: 6px !important;
  padding: 0 !important;
  background: none !important;
  border-radius: 0 !important;
  color: var(--color-utility-blue) !important;
  font-size: var(--fs-small);
  font-weight: 500;
}

.mega-list-all:hover {
  background: none !important;
  color: var(--color-utility-blue) !important;
  text-decoration: underline;
}

.mega-list-all i {
  font-size: 12px;
  color: inherit !important;
}

.mega-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 24px;
  align-content: start;
}

/* Compact "quick links to conditions" strip for the two services (Sinus &
   Nasal, Ear & Hearing) that each have 6 condition pages underneath them
   in the sitemap. Small pill links instead of more boxed cards, so the
   menu doesn't get visually heavy. */
.mega-conditions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}

.mega-conditions-label {
  display: block;
  font-size: var(--fs-small);
  color: var(--text-70);
  margin-bottom: 10px;
}

.mega-conditions-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mega-conditions-links a {
  font-size: var(--fs-small);
  color: var(--color-black);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--color-bg-tint);
  white-space: nowrap;
  transition: background var(--transition-base), color var(--transition-base);
}

.mega-conditions-links a:hover {
  background: var(--color-sky);
  color: var(--color-white);
}

.mega-link {
  display: flex !important;
  align-items: center;
  gap: 14px;
  padding: 12px !important;
  border-radius: var(--radius-sm);
  white-space: normal !important;
  transition: background var(--transition-base);
}

.mega-link:hover {
  background: var(--color-bg-tint);
}

.mega-link i {
  flex-shrink: 0;
  /* .nav-dropdown a i (higher specificity: class + 2 type selectors)
     otherwise wins over width/text-align here, leaving height:40px but
     width stuck at its 16px — a tall narrow pill instead of a square. */
  width: 40px !important;
  height: 40px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--color-sky);
  background: var(--color-bg-tint);
  border-radius: var(--radius-sm);
}

.mega-link:hover i {
  background: var(--color-white);
}

.mega-link span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--fs-small);
  color: var(--text-70);
}

.mega-link span strong {
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--color-black);
}

/* Left-hand panel — solid ENT Urgent Care orange with just the network's
   own white/orange badge mark, promoting the affiliation the client wants
   visible without a stock photo. Two soft translucent circles give it
   some depth, and the whole card lifts on hover so it reads as its own
   interactive CTA rather than flat decoration. */
.mega-panel {
  position: relative;
  width: 300px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-orange-alt);
  display: flex;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.mega-panel:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -14px rgba(243, 112, 33, 0.5);
}

.mega-panel::before,
.mega-panel::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.mega-panel::before {
  width: 220px;
  height: 220px;
  right: -90px;
  top: -90px;
  background: rgba(255, 255, 255, 0.1);
}

.mega-panel::after {
  width: 140px;
  height: 140px;
  left: -50px;
  bottom: -50px;
  background: rgba(255, 255, 255, 0.07);
}

.mega-panel-content {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 12px;
  padding: 28px 24px;
}

.mega-panel-badge {
  height: 88px;
  width: auto;
  /* Pulls all the flex column's free space to below itself, pinning the
     icon to the top while the heading/copy/button stay grouped at the
     bottom (justify-content: flex-end on the parent). */
  margin-bottom: auto;
  transition: transform var(--transition-base);
}

.mega-panel:hover .mega-panel-badge {
  transform: scale(1.08) rotate(-4deg);
}

.mega-panel-content h4 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-white);
}

.mega-panel-content p {
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.85);
}

/* .nav-dropdown a (border-radius: 8px, padding: 10px 12px, higher
   specificity than .btn/.btn-sm) otherwise flattens this into a barely
   -rounded rectangle instead of the site's usual full pill button. */
.mega-panel-content .btn {
  margin-top: 4px;
  border-radius: var(--radius-pill) !important;
  padding: 10px 20px !important;
}

.mega-panel-content .btn-primary {
  background: var(--color-white);
  color: var(--color-orange-alt);
}

/* Keep the same white/orange look on hover — just the shared lift +
   shadow every other button gets, not a color inversion — and pin it
   explicitly since .nav-dropdown a:hover would otherwise swap in its own
   light-tint background and blue text here too. */
.mega-panel-content .btn-primary:hover {
  background: var(--color-white) !important;
  color: var(--color-orange-alt) !important;
  box-shadow: 0 10px 24px rgba(243, 112, 33, 0.35);
}

/* .nav-dropdown a i sets its own explicit color (sky blue, for the plain
   list dropdowns), which beats inheriting the button's own orange text
   since a direct match always wins over inheritance. */
.mega-panel-content .btn i {
  color: inherit;
}

.btn-sm {
  padding: 10px 16px;
  font-size: var(--fs-small);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--color-white);
  background: var(--color-utility-blue);
  border-radius: 50%;
  transition: background var(--transition-base);
  position: relative;
  z-index: 210;
}

.nav-toggle:hover {
  background: var(--color-navy);
}

@media (max-width: 1350px) {
  /* The full nav row (logo + links + CTA) needs ~1286px to fit on one
     line without wrapping — below that it breaks awkwardly instead of
     collapsing cleanly, so the mobile nav takes over here instead of at
     the site's usual 992px tablet breakpoint. */
  .site-header .container {
    padding-inline: var(--container-px-sm);
    gap: 20px;
    justify-content: space-between;
  }
  /* The mega menu / dropdown nav is desktop-only; mobile uses the
     push-reveal .mobile-nav-panel instead (see below). */
  .main-nav {
    display: none;
  }
  .nav-toggle {
    display: inline-flex;
    flex-shrink: 0;
  }
}

@media (max-width: 576px) {
  .header-actions .btn-primary {
    display: none;
  }
}

@media (max-width: 480px) {
  .site-logo img {
    height: 44px;
  }
  .site-header .container {
    gap: 12px;
  }
}

/* Floating "part of the ENT Urgent Care network" badge — pinned bottom
   right on every page instead of crowding the main nav's CTA button. */
.urgent-care-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 150;
  display: inline-flex;
  background: var(--color-white);
  border-radius: var(--radius-pill);
  padding: 8px;
  box-shadow: 0 12px 28px -6px rgba(1, 38, 46, 0.35);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.urgent-care-fab img {
  display: block;
  height: 36px;
  width: auto;
}

.urgent-care-fab:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px -6px rgba(1, 38, 46, 0.45);
}

/* Don't float on top of the open mobile nav panel. */
body.mobile-nav-open .urgent-care-fab {
  display: none;
}

@media (max-width: 576px) {
  .urgent-care-fab {
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    padding: 6px;
  }
  .urgent-care-fab img {
    height: 28px;
  }
}

/* ==========================================================================
   Mobile push-reveal nav (page shrinks + slides left, panel revealed behind)
   Scoped entirely to the mobile breakpoint — desktop nav above is untouched.
   ========================================================================== */

.mobile-nav-panel,
.mobile-nav-backdrop {
  display: none;
}

@media (max-width: 1350px) {
  /* Matches the .main-nav / .nav-toggle breakpoint above.
     Full-viewport navy layer. Always present (no fade/transition of its
     own) — the opaque, full-size .page-shell sits on top of it and covers
     it completely while closed, so it only becomes visible through the
     gaps as the page card shrinks/slides. That keeps the open/close motion
     to a single animated property (the card's transform) instead of two
     transitions racing each other. */
  .mobile-nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 0;
    background: var(--color-navy);
  }

  .page-shell {
    position: relative;
    background: var(--color-white);
    transform-origin: 0% 50%;
    transform: scale(1) translateX(0);
    transition: transform 550ms cubic-bezier(0.16, 1, 0.3, 1), border-radius 550ms cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 2;
  }

  /* .mobile-nav-closing is a transient state JS applies for the duration
     of the close transition (removed once it finishes). Without it, removing
     .mobile-nav-open instantly drops the body's fixed positioning and the
     card's viewport-height clipping — while the transform is still mid
     -animation back to normal — producing a mismatched, broken-looking
     close. Keeping both states active through the close mirrors the open
     animation exactly; only the transform/radius (which must animate) are
     scoped to .mobile-nav-open alone. */
  body.mobile-nav-open,
  body.mobile-nav-closing {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
  }

  /* The card's height is pinned to the mobile viewport (not the full
     document) so scaling it down leaves visible navy space above and
     below — it clips to a single "screenful" via its own scrollTop,
     which JS sets to the page's scroll position at the moment of opening. */
  body.mobile-nav-open .page-shell,
  body.mobile-nav-closing .page-shell {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    box-shadow: 0 25px 60px -10px rgba(10, 20, 40, 0.4);
  }

  body.mobile-nav-open .page-shell {
    transform: scale(0.85) translateX(-80vw);
    border-radius: 20px;
  }

  .mobile-nav-panel {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 82vw;
    z-index: 1;
    background: var(--color-navy);
    padding: 28px 24px 32px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .mnp-close {
    align-self: flex-end;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-white);
    font-size: 18px;
    margin-bottom: 24px;
    transition: background var(--transition-base);
  }

  .mnp-close:hover,
  .mnp-close:focus-visible {
    background: var(--color-sky);
    color: var(--color-navy);
  }

  .mnp-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .mnp-links > * {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 320ms ease, transform 320ms ease;
    transition-delay: 0ms;
  }

  body.mobile-nav-open .mnp-links > * {
    opacity: 1;
    transform: translateY(0);
  }

  body.mobile-nav-open .mnp-links > *:nth-child(1) { transition-delay: 180ms; }
  body.mobile-nav-open .mnp-links > *:nth-child(2) { transition-delay: 230ms; }
  body.mobile-nav-open .mnp-links > *:nth-child(3) { transition-delay: 280ms; }
  body.mobile-nav-open .mnp-links > *:nth-child(4) { transition-delay: 330ms; }
  body.mobile-nav-open .mnp-links > *:nth-child(5) { transition-delay: 380ms; }
  body.mobile-nav-open .mnp-links > *:nth-child(6) { transition-delay: 430ms; }
  body.mobile-nav-open .mnp-links > *:nth-child(7) { transition-delay: 480ms; }
  body.mobile-nav-open .mnp-links > *:nth-child(8) { transition-delay: 530ms; }

  .mnp-link {
    display: block;
    padding: 13px 4px;
    color: var(--color-white);
    font-size: 1.0625rem;
    font-weight: 500;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }

  .mnp-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }

  .mnp-item .mnp-link {
    border-bottom: none;
    flex: 1;
  }

  .mnp-row {
    display: flex;
    align-items: center;
  }

  .mnp-caret {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-sky);
    font-size: 13px;
    transition: transform var(--transition-base);
  }

  .mnp-item.is-open .mnp-caret {
    transform: rotate(180deg);
  }

  .mnp-submenu {
    display: none;
    flex-direction: column;
    gap: 2px;
    padding: 0 0 14px 12px;
  }

  .mnp-item.is-open .mnp-submenu {
    display: flex;
  }

  .mnp-submenu a {
    padding: 9px 8px;
    color: rgba(255, 255, 255, 0.75);
    font-size: var(--fs-small);
    border-radius: 8px;
  }

  .mnp-submenu a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-white);
  }

  .mnp-view-all {
    color: var(--color-sky) !important;
    font-weight: 500;
    margin-top: 4px;
  }

  .mnp-subgroup {
    display: flex;
    flex-direction: column;
  }

  .mnp-sub-link {
    display: flex !important;
    align-items: center;
    gap: 10px;
  }

  .mnp-sub-link i {
    color: var(--color-sky);
    width: 16px;
    text-align: center;
    font-size: 14px;
  }

  .mnp-conditions {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 30px;
    margin-bottom: 4px;
  }

  .mnp-conditions a {
    padding: 6px 8px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
  }

  .mnp-conditions a:hover {
    color: var(--color-white);
    background: rgba(255, 255, 255, 0.06);
  }

  .mnp-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    padding: 15px 20px;
    border-radius: var(--radius-pill);
    background: var(--color-orange);
    color: var(--color-white);
    font-weight: 500;
    text-align: center;
  }

  @media (prefers-reduced-motion: reduce) {
    .page-shell,
    .mnp-links > * {
      transition-duration: 1ms;
      transition-delay: 0ms !important;
    }
  }
}

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

.hero {
  position: relative;
  overflow: hidden;
  padding-block: 100px;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-media img {
  position: absolute;
  right: 0;
  top: -20%;
  width: 78%;
  height: 148%;
  object-fit: cover;
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--color-white) 23%, rgba(255, 255, 255, 0) 69%);
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 550px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.hero-content h1 {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.hero-content .lead {
  font-size: var(--fs-lead);
  color: var(--text-90);
}

.hero-cta {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .hero {
    padding-block: 56px;
  }
  .hero-media img {
    width: 100%;
    right: 0;
    opacity: 0.25;
  }
  .hero-content {
    max-width: 100%;
  }
}

/* ==========================================================================
   Quick-action card strip
   ========================================================================== */

.quick-cards {
  display: flex;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  text-align: center;
}

.quick-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px;
  border-right: 1px solid var(--color-border);
  /* These are now real links (were plain divs) — reset the default
     anchor color/underline so the heading doesn't turn blue. */
  color: inherit;
  text-decoration: none;
  transition: background var(--transition-base);
}

.quick-card:last-child {
  border-right: none;
}

.quick-card:hover {
  background: var(--color-bg-tint);
}

.quick-card i {
  font-size: 40px;
  color: var(--color-sky);
  transition: transform var(--transition-base);
}

.quick-card:hover i {
  transform: translateY(-3px);
}

.quick-card h3 {
  font-size: 18px;
  font-weight: 500;
}

.quick-card p {
  font-size: var(--fs-body);
  color: var(--text-80);
}

@media (max-width: 768px) {
  .quick-cards {
    flex-wrap: wrap;
  }
  .quick-card {
    flex: 1 1 50%;
    border-bottom: 1px solid var(--color-border);
  }
}

@media (max-width: 576px) {
  /* Padding lives on each card, not the row, so the gray divider
     (border-bottom on .quick-card) still runs full-bleed edge to edge
     while the icon/text content stays inset. */
  .quick-card {
    flex: 1 1 100%;
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 16px;
    padding: 20px var(--container-px-sm);
    border-right: none;
  }
  .quick-card i {
    font-size: 32px;
    flex-shrink: 0;
  }
}

/* ==========================================================================
   ENT concerns grid — cards themselves are .hub-card (shared component,
   see "Interior pages" below); this is just the section/grid wrapper.
   ========================================================================== */

.concerns {
  background: var(--color-bg-soft);
  text-align: center;
}

.concerns-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 1200px;
  margin: 32px auto 0;
}

@media (max-width: 992px) {
  .concerns-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .concerns-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Why patients choose (content + image)
   ========================================================================== */

.split-section {
  display: flex;
  gap: 60px;
  align-items: stretch;
}

.split-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
  min-width: 0;
}

.split-content .heading-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.split-content h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 400;
  color: var(--color-navy);
  line-height: 1.1;
  text-transform: capitalize;
}

.split-content h3 {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.2;
}

.split-content .lead {
  color: var(--text-80);
}

.bullet-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bullet {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  border-radius: var(--radius-sm);
  background: linear-gradient(to right, rgba(92, 196, 255, 0.15), rgba(255, 255, 255, 0.15));
}

.bullet.alt {
  background: linear-gradient(to right, rgba(243, 112, 33, 0.15), rgba(255, 255, 255, 0.15));
}

.bullet i {
  color: var(--color-sky);
  margin-top: 2px;
}

.bullet.alt i {
  color: var(--color-orange-alt);
}

.image-box {
  flex: 1;
  min-width: 0;
  min-height: 480px;
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(to bottom, rgba(92, 196, 255, 0.25), rgba(55, 118, 153, 0.25));
}

.image-box img {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 68%;
  max-width: none;
  height: auto;
}

.image-box-watermark {
  top: 50%;
  bottom: auto;
  left: 50%;
  width: 34% !important;
  transform: translate(-50%, -50%) rotate(-150deg) scaleY(-1);
  opacity: 0.25;
  z-index: 0;
}

.image-box-photo {
  z-index: 1;
  inset: 0;
  left: 0;
  bottom: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  transform: none;
  object-fit: cover;
}

.image-box.urgent-care-box {
  background: none;
}

.image-box.urgent-care-box img {
  bottom: auto;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
}

/* Provider profile hero — a dark, decorative two-column intro used only on
   individual provider bio pages (photo + name/credentials/tags), distinct
   from the flat .page-header used on service/legal pages. */
.provider-hero {
  background: linear-gradient(135deg, var(--color-navy) 0%, #24407a 60%, #2f5490 100%);
  padding-block: 72px;
  position: relative;
  overflow: hidden;
}

.provider-hero::before,
.provider-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

.provider-hero::before {
  width: 420px;
  height: 420px;
  top: -160px;
  right: -120px;
}

.provider-hero::after {
  width: 300px;
  height: 300px;
  bottom: -140px;
  left: -80px;
  border-color: rgba(92, 196, 255, 0.18);
}

.provider-hero-inner {
  display: flex;
  align-items: center;
  gap: 48px;
  position: relative;
  z-index: 1;
}

.provider-photo-wrap {
  flex-shrink: 0;
}

.provider-photo {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.provider-hero-content {
  color: var(--color-white);
}

.provider-eyebrow {
  display: inline-block;
  color: var(--color-sky);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: var(--fs-small);
  margin-bottom: 8px;
}

.provider-hero-content h1 {
  color: var(--color-white);
  margin-bottom: 12px;
}

.provider-hero-content .lead {
  color: var(--text-on-navy-80);
  margin-bottom: 20px;
}

.provider-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}

.tag-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--color-white);
  font-size: var(--fs-small);
  font-weight: 500;
}

/* Pull-quote card used to open a provider's "in their own words" bio. */
.provider-quote {
  background: var(--color-bg-tint);
  border-left: 4px solid var(--color-sky);
  border-radius: var(--radius-md);
  padding: 28px 32px;
  margin-bottom: 44px;
}

.provider-quote i {
  color: var(--color-sky);
  font-size: 22px;
  margin-bottom: 8px;
  display: block;
}

.provider-quote p {
  font-size: var(--fs-lead);
  color: var(--color-navy);
  font-style: italic;
  margin-bottom: 8px;
}

.provider-quote span {
  font-weight: 600;
  color: var(--text-70);
}

/* "When to seek medical attention" callout on condition pages — an
   urgent-toned box (reuses the site's orange-alt urgent-care color) so
   this actionable warning reads as visually distinct from the
   surrounding explanatory prose, not just another paragraph. */
.condition-alert {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: rgba(243, 112, 33, 0.08);
  border-left: 4px solid var(--color-orange-alt);
  border-radius: var(--radius-md);
  padding: 24px 28px;
}

.condition-alert i {
  color: var(--color-orange-alt);
  font-size: 24px;
  margin-top: 2px;
  flex-shrink: 0;
}

.condition-alert p {
  color: var(--text-90);
  margin: 0;
}

/* Companion CTA card that sits beside the symptoms/conditions bullet-list
   on condition and service pages — a white card (icon + heading +
   description + two centered, full-width buttons) giving that
   split-section a "book now" prompt instead of a second photo. flex: 0 0
   <width> (instead of flex: 1) keeps it from stretching to fill half the
   row, letting the bullet-list take the extra space. */
.symptom-cta-card {
  flex: 0 0 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 36px;
  box-shadow: var(--shadow-card);
}

.symptom-cta-card .symptom-cta-icon {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  margin-bottom: 16px;
}

.symptom-cta-card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--color-navy);
  line-height: 1.2;
}

.symptom-cta-card p {
  margin-top: 12px;
  color: var(--text-80);
}

.symptom-cta-card .hero-cta {
  margin-top: 28px;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  gap: 12px;
}

/* .btn defaults to align-self: flex-start (base.css), which would shrink
   each button to its own content width and hug the left edge instead of
   filling this stretched column — override so they span full width with
   centered content, matching the card's centered heading and text. */
.symptom-cta-card .hero-cta .btn {
  align-self: stretch;
  justify-content: center;
}

@media (max-width: 992px) {
  .symptom-cta-card {
    flex-basis: auto;
    width: 100%;
  }
}

.hub-card-photo {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 8px;
  border: 3px solid var(--color-bg-tint);
}

/* Third-party logos (e.g. accepted insurance providers) inside a hub-card —
   real logos vary wildly in aspect ratio and visual weight, so each is
   fit into the same box with object-fit: contain rather than stretched or
   cropped, keeping the row visually even regardless of source shape. */
.hub-card-logo-box {
  width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.hub-card-logo-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

@media (max-width: 768px) {
  .provider-hero-inner {
    flex-direction: column;
    text-align: center;
  }
  .provider-tags,
  .provider-hero-content .hero-cta {
    justify-content: center;
  }
  .provider-photo {
    width: 160px;
    height: 160px;
  }
}

.map-embed {
  flex: 1;
  min-width: 0;
  min-height: 480px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.map-embed iframe {
  width: 100%;
  height: 100%;
  min-height: 480px;
  border: 0;
  display: block;
}

@media (max-width: 992px) {
  .split-section {
    flex-direction: column;
  }
  .image-box {
    min-height: 320px;
  }
  .map-embed,
  .map-embed iframe {
    min-height: 320px;
  }
}

/* ==========================================================================
   Testimonials
   ========================================================================== */

.testimonials {
  background: var(--color-bg-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
}

/* The review cards row doesn't wrap and doesn't shrink (fixed-width
   cards), so its intrinsic content width is much wider than the
   viewport. Without an explicit width here, this flex column's
   align-items:center lets the container shrink-wrap to that huge
   intrinsic width instead of the viewport — pushing the heading and
   controls off-screen and leaving only a sliver of the cards visible. */
.testimonials .container {
  width: 100%;
}

.reviews-track-wrap {
  width: 100%;
  overflow: hidden;
}

.reviews-track {
  display: flex;
  gap: 32px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  scrollbar-width: none;
}

.reviews-track::-webkit-scrollbar {
  display: none;
}

.review-card {
  flex: 0 0 310px;
  scroll-snap-align: start;
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  text-align: left;
}

.review-card .rating {
  display: flex;
  gap: 6px;
  color: var(--color-star);
  font-size: 20px;
}

.review-card p.quote {
  font-size: var(--fs-small);
  color: var(--color-black);
}

.review-card .reviewer {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.review-card .reviewer .name {
  font-family: "Onest", var(--font-primary);
  font-weight: 500;
  font-size: var(--fs-body);
}

.review-card .reviewer .place {
  font-family: "Onest", var(--font-primary);
  font-weight: 300;
  font-size: var(--fs-small);
  color: var(--text-70);
}

.reviews-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

@media (max-width: 576px) {
  /* Two 56px round arrow buttons plus the full CTA button don't fit in
     one row at phone width. Swipe already works via the cards' own
     horizontal scroll, so drop the arrows here and keep only the CTA. */
  .reviews-controls .btn-icon {
    display: none;
  }
}

/* ==========================================================================
   Feature banner (ear tube / urgent care share this pattern)
   ========================================================================== */

.feature-banner {
  position: relative;
  overflow: hidden;
}

.feature-banner-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.feature-banner-media img {
  position: absolute;
  right: 0;
  top: -2%;
  width: 53%;
  height: 104%;
  object-fit: cover;
}

.feature-banner-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--color-white) 48%, rgba(255, 255, 255, 0) 69%);
}

.feature-banner .split-content {
  position: relative;
  z-index: 1;
  max-width: 600px;
}

.feature-banner h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 400;
  color: var(--color-navy);
  line-height: 1.1;
  text-transform: capitalize;
}

.feature-banner p {
  color: var(--text-80);
}

@media (max-width: 992px) {
  .feature-banner-media img {
    width: 100%;
    opacity: 0.2;
  }
}

/* ==========================================================================
   Insurance section
   ========================================================================== */

.insurance {
  position: relative;
  background: var(--color-bg-tint);
  overflow: hidden;
  border-bottom: 1px solid var(--color-border);
}

.insurance-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 80px;
}

.insurance-illustration-wrap {
  position: relative;
  flex-shrink: 0;
  width: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.insurance-ellipse {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 620px;
  max-width: none;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
}

.insurance-illustration {
  position: relative;
  z-index: 1;
  width: 100%;
}

.insurance-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  text-align: left;
  max-width: 480px;
}

.insurance-content h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 400;
  color: var(--color-navy);
  line-height: 1.1;
  text-transform: capitalize;
}

.insurance-content p {
  color: var(--color-black);
  font-size: var(--fs-lead);
}

@media (max-width: 768px) {
  .insurance-inner {
    flex-direction: column;
    gap: 32px;
  }
  .insurance-content {
    align-items: center;
    text-align: center;
  }
  /* The base .btn rule pins buttons to flex-start regardless of the
     parent's own alignment, so it has to be re-centered explicitly here
     to match the now-centered heading/paragraph. */
  .insurance-content .btn {
    align-self: center;
  }
  /* The glow ellipse is much wider than the icon graphic itself, leaving
     a lot of empty halo around it. Tighten it so the icon reads bigger
     and fuller instead of floating in open space. */
  .insurance-ellipse {
    width: 400px;
  }
}

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

.footer-cta-wrap {
  background: var(--color-footer-bg);
  padding-inline: var(--container-px);
  /* Matches .footer-main's own bottom padding, so the merged CTA+footer
     block reads as one component with symmetric top/bottom breathing
     room instead of the card sitting flush against the top edge. */
  padding-top: 80px;
  margin-bottom: -160px;
  position: relative;
  z-index: 2;
}

@media (max-width: 1350px) {
  /* Matches the header/.container breakpoint (base.css) so this card's
     edges stay aligned with the rest of the page's content. */
  .footer-cta-wrap {
    padding-inline: var(--container-px-sm);
    padding-top: 60px;
    margin-bottom: -80px;
  }
}

.footer-cta {
  background: var(--color-navy);
  border-radius: var(--radius-lg);
  padding: 60px 100px;
  display: flex;
  align-items: center;
  gap: 40px;
  position: relative;
  overflow: hidden;
  max-width: var(--container-max);
  margin-inline: auto;
}

.footer-cta-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
  z-index: 1;
}

.footer-cta-content h2 {
  font-size: var(--fs-h2);
  font-weight: 400;
  color: var(--color-white);
  line-height: 1.1;
  text-transform: capitalize;
}

.footer-cta-content p {
  color: var(--text-on-navy-80);
}

.footer-cta-actions {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-cta-watermark {
  position: absolute;
  z-index: 0;
  right: -20px;
  top: 50%;
  height: 130%;
  width: auto;
  max-width: none;
  transform: translateY(-50%) rotate(-30deg);
  opacity: 0.18;
  pointer-events: none;
}

@media (max-width: 768px) {
  .footer-cta {
    padding: 40px 24px;
  }
  .footer-cta-watermark {
    display: none;
  }
}

@media (max-width: 576px) {
  /* Full-bleed, corner-less card at phone width only. */
  .footer-cta-wrap {
    padding-inline: 0;
  }
  .footer-cta {
    border-radius: 0;
    max-width: none;
  }
}

.footer-main {
  background: var(--color-footer-bg);
  padding-block: 220px 80px;
}

@media (max-width: 1350px) {
  /* Matches the header/.container breakpoint (base.css). */
  .footer-main {
    padding-block: 140px 60px;
  }
}

/* Padding-inline lives here (after max-width + margin-inline:auto), not on
   .footer-main — matching .container's own ordering so this edge lines up
   with the logo/hero instead of drifting from it (padding-then-center vs
   center-then-padding produce different offsets at wide viewports). */
.footer-main-inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-px);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 60px;
  flex-wrap: wrap;
}

@media (max-width: 1350px) {
  .footer-main-inner {
    padding-inline: var(--container-px-sm);
  }
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 450px;
}

.footer-brand .logo-mark img {
  height: 68px;
}

.footer-brand p {
  color: var(--text-80);
}

.social-links {
  display: flex;
  gap: 12px;
}

.social-links a {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: var(--color-sky);
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  transition: transform var(--transition-base);
}

.social-links a.brand-mark {
  background: var(--color-orange-alt);
}

.social-links a.brand-mark img {
  width: 22px;
}

.social-links a:hover {
  transform: translateY(-3px);
}

.footer-links {
  display: flex;
  gap: 72px;
  flex-wrap: wrap;
}

.footer-links-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-links-col h4 {
  font-size: 18px;
  font-weight: 500;
  color: var(--color-navy);
  margin-bottom: 4px;
}

.footer-links-col a {
  font-size: var(--fs-body);
  color: var(--text-80);
  transition: color var(--transition-base);
}

.footer-links-col a:hover {
  color: var(--color-utility-blue);
}

.footer-bottom {
  background: var(--color-navy);
  padding-block: 20px;
  font-size: var(--fs-small);
  color: var(--text-on-navy-80);
}

/* Padding-inline + centering live here (after max-width, like .container),
   not on .footer-bottom — so the navy bar itself stays full-bleed while its
   content aligns with the logo/hero above it. */
.footer-bottom-inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

/* Fixed 4-column grid instead of a flex row — with 8 legal links now
   (Privacy, Cookie, Terms, Acceptable Use, Disclaimer, No Surprises Act,
   HIPAA, Accessibility), a flex row only wrapped once the browser ran out
   of width, stretching into one long strip on anything but a narrow
   screen. This keeps it a deliberate, tight 2-row block at every width
   instead of a single sprawling line. */
.footer-bottom-links {
  display: grid;
  grid-template-columns: repeat(4, auto);
  column-gap: 24px;
  row-gap: 8px;
}

@media (max-width: 576px) {
  .footer-bottom-links {
    grid-template-columns: repeat(2, auto);
  }
}

@media (max-width: 1350px) {
  /* Matches the header/.container breakpoint (base.css). */
  .footer-bottom-inner {
    padding-inline: var(--container-px-sm);
  }
}

/* ==========================================================================
   Interior pages: page header, breadcrumbs, hub grid
   ========================================================================== */

.page-header {
  position: relative;
  background: var(--color-navy);
  overflow: hidden;
  padding: 72px 0 80px;
}

.page-header .container {
  position: relative;
  z-index: 1;
}

.page-header h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 400;
  color: var(--color-white);
  line-height: 1.15;
  max-width: 800px;
}

.page-header p {
  margin-top: 12px;
  font-size: var(--fs-lead);
  color: var(--text-on-navy-80);
  max-width: 700px;
}

/* Contact page: a white card below the (plain, single-column) navy header
   holding "Contact Information" — with a clinic switcher (reuses
   .job-filter-pill's existing pill styling) that swaps the address and
   map below it, see main.js — beside the message form. Reuses the
   careers sidebar form's own card/field styling (.career-form-card etc.)
   rather than a second copy of the same rules. */
.contact-info-card {
  display: flex;
  gap: 48px;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 40px;
}

.contact-info-col {
  flex: 1;
  min-width: 0;
}

.contact-info-col .lead {
  font-size: var(--fs-lead);
  color: var(--text-80);
  margin-top: 8px;
}

.contact-location-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0;
}

.contact-info-details {
  margin-bottom: 24px;
}

.contact-form-card {
  /* Not sticky here — .career-form-card's sticky positioning is meant for
     a tall sidebar next to a long scrolling list; this sits beside a
     similarly short column instead. */
  position: static;
}

@media (max-width: 900px) {
  .contact-info-card {
    flex-direction: column;
    padding: 28px;
  }
}

@media (max-width: 768px) {
  .page-header {
    padding: 48px 0 56px;
  }
}

/* Shared card component — every service/clinic/provider/condition grid
   across the site (hub pages, service detail pages, the homepage's ENT
   concerns grid) uses this one class, so a change here applies
   everywhere at once. margin-top matches the grid's own gap, so the
   space between a section heading and the first row of cards matches
   the space between the cards themselves. */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 32px;
}

.hub-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 32px;
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.hub-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
  border-color: transparent;
}

.hub-card i.hub-card-icon {
  font-size: 56px;
  color: var(--color-sky);
  margin-bottom: 8px;
}

.hub-card h3 {
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--color-navy);
}

.hub-card p {
  color: var(--text-80);
  flex: 1;
}

.hub-card-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--fs-small);
  color: var(--text-70);
  flex: 1;
}

/* Pulled out to the card's full outer edges with negative margins (undoing
   .hub-card's own padding) so the divider and "Learn more" read as a
   distinct footer band, not text trailing after the description.
   align-self: stretch is load-bearing — .hub-card sets align-items:
   center (to center the icon/heading/description), which makes any flex
   child default to shrink-to-fit-content width instead of filling the
   row. Without overriding it here, this link shrinks to the width of
   "Learn more →" itself and both the highlight and the divider end up
   narrow and floating in the middle instead of spanning the card. */
.hub-card .hub-card-link {
  display: flex;
  align-self: stretch;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 500;
  color: var(--color-utility-blue);
  margin: 16px -32px -32px;
  padding: 20px 32px;
  border-top: 1px solid var(--color-border);
  transition: background var(--transition-base), color var(--transition-base);
}

/* Hover fills just this footer band — the rest of the card (icon,
   heading, description, lift/shadow) is untouched. */
.hub-card:hover .hub-card-link {
  background: var(--color-utility-blue);
  color: var(--color-white);
}

/* Row variant — icon beside the content instead of stacked above it
   (e.g. a blog post preview). The link stays a normal inline link since
   there's no natural "bottom of the card" to anchor a footer band to. */
.hub-card--row {
  flex-direction: row;
  align-items: flex-start;
  text-align: left;
  gap: 24px;
}

.hub-card--row .hub-card-icon {
  flex-shrink: 0;
}

.hub-card--row .hub-card-row-photo {
  width: 220px;
  height: 150px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  object-fit: cover;
}

@media (max-width: 576px) {
  .hub-card--row {
    flex-direction: column;
  }

  .hub-card--row .hub-card-row-photo {
    width: 100%;
    height: 180px;
  }
}

.hub-card--row .hub-card-link {
  display: inline-flex;
  width: auto;
  margin: 12px 0 0;
  padding: 0;
  border-top: none;
}

/* Variant for the "Same-Day ENT Care" card, which links out to the ENT
   Urgent Care brand — its own orange, not a hover accent, so it reads as
   a distinct, external option among the ENT service cards around it. */
.hub-card--urgent {
  background: var(--color-orange-alt);
  border-color: transparent;
}

.hub-card--urgent .hub-card-icon-img {
  width: 56px;
  height: 56px;
  margin-bottom: 8px;
}

.hub-card--urgent h3,
.hub-card--urgent p {
  color: var(--color-white);
}

.hub-card--urgent .hub-card-link {
  color: var(--color-white);
  border-top-color: rgba(255, 255, 255, 0.25);
}

.hub-card--urgent:hover .hub-card-link {
  background: var(--color-white);
  color: var(--color-orange-alt);
}

@media (max-width: 992px) {
  .hub-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .hub-grid {
    grid-template-columns: 1fr;
  }
}

/* Four-across variant — used for the symptom cards on condition pages,
   where items are short (a single line or two) so four fit comfortably
   in one row instead of three. */
.hub-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

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

@media (max-width: 576px) {
  .hub-grid--4 {
    grid-template-columns: 1fr;
  }
}

/* Two-column grid of .hub-card--row cards (icon beside the heading/text
   instead of stacked above it) — used for the provider bio pages'
   Background & Training section. */
.training-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 900px;
  margin: 32px auto 0;
}

.training-grid .hub-card--row {
  padding: 28px;
}

.training-grid .hub-card-icon {
  font-size: 40px;
}

@media (max-width: 700px) {
  .training-grid {
    grid-template-columns: 1fr;
  }
}

.content-block {
  max-width: 800px;
}

.content-block h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--color-navy);
  margin-bottom: 12px;
}

.content-block p {
  color: var(--text-80);
  margin-bottom: 16px;
}

.content-block p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Legal / policy pages (Privacy Policy, Terms, No Surprises Act,
   Accessibility) — long-form content with a sticky table of contents.
   ========================================================================== */

.legal-layout {
  display: flex;
  align-items: flex-start;
  gap: 64px;
}

.legal-toc {
  position: sticky;
  top: calc(var(--header-bottom, 90px) + 24px);
  width: 260px;
  flex-shrink: 0;
  max-height: calc(100vh - var(--header-bottom, 90px) - 48px);
  overflow-y: auto;
}

.legal-toc-label {
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-70);
  margin-bottom: 16px;
}

.legal-toc-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 2px solid var(--color-border);
}

.legal-toc-list a {
  display: block;
  padding: 8px 16px;
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--text-80);
  border-left: 2px solid transparent;
  margin-left: -2px;
  transition: color var(--transition-base), border-color var(--transition-base);
}

.legal-toc-list a:hover {
  color: var(--color-utility-blue);
  border-left-color: var(--color-sky);
}

.legal-content {
  flex: 1;
  min-width: 0;
  max-width: 760px;
}

.legal-content > p {
  color: var(--text-80);
  margin-bottom: 16px;
}

.legal-content h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--color-navy);
  line-height: 1.25;
  margin-top: 48px;
  margin-bottom: 16px;
  scroll-margin-top: calc(var(--header-bottom, 90px) + 24px);
}

.legal-content h2:first-child {
  margin-top: 0;
}

.legal-content h3 {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--color-navy);
  margin-top: 28px;
  margin-bottom: 12px;
}

.legal-content ul {
  margin: 0 0 16px;
  padding-left: 24px;
  color: var(--text-80);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legal-content a:not(.btn) {
  color: var(--color-utility-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-content a:not(.btn):hover {
  color: var(--color-navy);
}

/* .legal-content ul is `display: flex` (for gap-based spacing), which
   suppresses the browser's native <li> marker — so a list that should
   show real bullets (job requirements/responsibilities) needs its own
   drawn dot instead of relying on list-style. */
.legal-content ul.bulleted {
  padding-left: 0;
}

.legal-content ul.bulleted li {
  position: relative;
  padding-left: 24px;
}

.legal-content ul.bulleted li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-orange);
}

/* Job detail pages nest .blog-share inside .legal-content (unlike blog
   posts, where it sits in a separate sidebar outside .legal-content), so
   the :not(.btn) rule above — same specificity as .blog-share a, but
   declared later — was winning the tie and turning the share icons blue
   and underlined. Re-assert the icon styling at matching specificity. */
.legal-content .blog-share a {
  color: var(--color-white);
  text-decoration: none;
}

.legal-callout {
  display: flex;
  background: var(--color-bg-tint);
  border-left: 3px solid var(--color-sky);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  margin-bottom: 20px;
}

.legal-callout p {
  margin-bottom: 0 !important;
  font-size: var(--fs-small);
  color: var(--text-90);
}

.legal-callout strong {
  color: var(--color-navy);
}

.legal-table-wrap {
  overflow-x: auto;
  margin-bottom: 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
}

.legal-table th,
.legal-table td {
  border-bottom: 1px solid var(--color-border);
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
}

.legal-table tr:last-child th,
.legal-table tr:last-child td {
  border-bottom: none;
}

.legal-table th {
  background: var(--color-bg-soft);
  color: var(--color-navy);
  font-weight: 600;
}

.legal-summary {
  background: var(--color-bg-soft);
  border-radius: var(--radius-md);
  padding: 24px 28px;
  margin-bottom: 40px;
}

.legal-summary h2 {
  margin-top: 0 !important;
}

.legal-summary p {
  margin-bottom: 12px;
}

.legal-summary p:last-child {
  margin-bottom: 0;
}

@media (max-width: 992px) {
  .legal-layout {
    flex-direction: column;
    gap: 32px;
  }

  /* Table of contents collapses into a side tab instead of the inline
     pill row above — a full pill row here (Cookie Policy alone runs to 6
     items, HIPAA to 8) pushed the actual content well down the page
     before a mobile reader ever reached it. The tab sits flush against
     the left edge; .legal-toc-list becomes the slide-out drawer it opens
     (toggled via .is-open, see main.js). */
  /* No transform here (unlike the label/list below) — a transform on
     .legal-toc would make IT the containing block for its own
     fixed-position children (.legal-toc-list, the drawer), pinning the
     drawer to .legal-toc's own tiny box instead of the viewport. Position
     and centering live on the label and list individually instead. */
  .legal-toc {
    position: fixed;
    inset: 0 auto auto 0;
    width: 0;
    height: 0;
    max-height: none;
    z-index: 260;
  }

  /* Full-viewport dimmed backdrop, shown only while open. A pseudo-element
     rather than an extra DOM node — position: fixed on it is relative to
     the viewport regardless of .legal-toc's own (zero-size) box, so it
     still covers the whole screen. main.js closes the drawer on any click
     that lands here (i.e. e.target === the .legal-toc element itself,
     since neither the label nor the drawer — both real child elements —
     would be the target). */
  .legal-toc::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(26, 46, 90, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base);
    z-index: 259;
  }

  .legal-toc.is-open::before {
    opacity: 1;
    pointer-events: auto;
  }

  /* The closed-state tab: rotated pill text flush against the left edge,
     vertically centered in the viewport. writing-mode sets the vertical
     text flow; rotate(180deg) flips it to read bottom-to-top. That 180°
     turn swaps DIAGONAL corners on screen (top-left <-> bottom-right,
     top-right <-> bottom-left) — so to end up with the screen's left
     corners square (flush against the edge) and right corners fully
     rounded, the radius has to be written on the pre-rotation top-left/
     bottom-right corners, not top-right/bottom-left. Positioned/
     transformed on the label itself, not .legal-toc — see the note
     above. */
  .legal-toc-label {
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%) rotate(180deg);
    writing-mode: vertical-rl;
    display: inline-block;
    margin: 0;
    padding: 20px 10px;
    background: var(--color-navy);
    color: var(--color-white);
    border-radius: var(--radius-pill) 0 0 var(--radius-pill);
    box-shadow: var(--shadow-card);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    /* Smaller than --fs-small (14px, the scale's own floor) — this tab is
       compact by design and 14px read too large against its own width. */
    font-size: 12px;
    font-weight: 600;
    z-index: 261;
  }

  /* The drawer itself: off-screen (to the left) until .is-open. */
  .legal-toc-list {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(300px, 82vw);
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 4px;
    background: var(--color-white);
    border-left: none;
    padding: 32px 20px;
    padding-top: max(32px, env(safe-area-inset-top, 0px));
    box-shadow: var(--shadow-card);
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform var(--transition-base);
    z-index: 260;
  }

  .legal-toc.is-open .legal-toc-list {
    transform: translateX(0);
  }

  .legal-toc-list a {
    border: none;
    border-radius: var(--radius-sm);
    margin-left: 0;
    padding: 12px 14px;
  }

  .legal-toc-list a:hover {
    background: var(--color-bg-tint);
    border-left-color: transparent;
  }
}

/* Locks background scroll while the .legal-toc drawer is open — set by
   main.js alongside .legal-toc.is-open, mirroring how .mobile-nav-open
   locks it for the main nav panel. */
body.legal-toc-open {
  overflow: hidden;
}

/* ==========================================================================
   Blog post — breadcrumb, byline, hero image, and the article layout
   (reuses .legal-layout / .legal-toc / .legal-toc-list / .legal-content
   from the legal-page table-of-contents pattern above, since it's the
   same "sticky sidebar nav + reading column" shape this needs).
   ========================================================================== */

/* Sits in .page-header, on the dark navy background — light-on-dark,
   like .page-header p, not the dark-on-white text-60 used elsewhere. */
.blog-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: var(--fs-small);
  color: var(--text-on-navy-80);
  margin-bottom: 20px;
}

.blog-breadcrumb a:hover {
  color: var(--color-sky);
}

.blog-breadcrumb i {
  font-size: 10px;
  color: var(--text-on-navy-80);
}

.blog-breadcrumb .current {
  color: var(--color-white);
  font-weight: 500;
}

.blog-byline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}

.blog-byline-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-small);
  flex-shrink: 0;
}

/* Sits in .page-header, on the dark navy background — same light-on-dark
   treatment as .page-header h1/p, not the navy-on-white used elsewhere
   (e.g. provider bylines), which would be invisible here. */
.blog-byline .name {
  font-weight: 500;
  color: var(--color-white);
}

.blog-byline .meta {
  color: var(--text-on-navy-80);
  font-size: var(--fs-small);
}

.blog-hero-image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: 40px;
  max-height: 460px;
}

.blog-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Icon-tile hero/card image — used for posts with no matching real photo
   in the asset library, instead of stretching an unrelated stock photo
   over the topic. Same navy gradient as .provider-hero, so it reads as
   a deliberate brand treatment rather than a missing image. */
.blog-hero-image--icon,
.blog-card-image--icon {
  background: linear-gradient(135deg, var(--color-navy) 0%, #24407a 60%, #2f5490 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog-hero-image--icon {
  min-height: 320px;
}

.blog-hero-image--icon i {
  font-size: 88px;
  color: rgba(255, 255, 255, 0.92);
}

.blog-card-image--icon i {
  font-size: 56px;
  color: rgba(255, 255, 255, 0.92);
}

.legal-toc-label.blog-toc-label {
  font-size: var(--fs-h3);
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  color: var(--color-navy);
}

/* Reset the desktop override above back to the small uppercase tab style
   for the mobile side-drawer (same specificity, so it must come after the
   desktop rule in source order to win — a plain media query alone isn't
   enough for that). Otherwise blog posts' "In this Article" tab would
   render as this heading-sized navy-on-navy text, invisible against the
   tab's own navy background. */
@media (max-width: 992px) {
  .legal-toc-label.blog-toc-label {
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-white);
  }
}

.blog-toc-list a {
  display: flex;
  align-items: center;
  gap: 4px;
}

.blog-toc-list a.is-active {
  color: var(--color-navy);
  font-weight: 500;
  border-left-color: var(--color-sky);
}

.blog-share {
  display: flex;
  gap: 12px;
  margin-bottom: 40px;
}

.blog-share a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-navy);
  color: var(--color-white);
  font-size: 16px;
  transition: background var(--transition-base);
}

.blog-share a:hover {
  background: var(--color-utility-blue);
}

.blog-share-label {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--color-navy);
  margin-bottom: 16px;
}

@media (max-width: 992px) {
  .blog-hero-image {
    max-height: none;
  }
}

/* ==========================================================================
   Blog index — centered header + card-grid layout (image, byline, title,
   excerpt, tags). Cards are a straightforward anchor wrapping the whole
   block, since every card here does exactly one thing: open the post.
   ========================================================================== */

.blog-section-label {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--color-navy);
  margin-bottom: 24px;
}

.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-base);
}

.blog-card:hover {
  transform: translateY(-4px);
}

.blog-card-image {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-card-body {
  padding: 28px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.blog-card-meta {
  font-size: var(--fs-small);
  color: var(--text-60);
}

.blog-card-body h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--color-navy);
  line-height: 1.3;
}

.blog-card-body p {
  color: var(--text-70);
  line-height: 1.6;
}

.blog-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.blog-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--color-bg-tint);
  color: var(--color-navy);
  font-size: var(--fs-small);
  font-weight: 500;
}

@media (max-width: 768px) {
  .blog-card-body {
    padding: 20px 24px 24px;
  }
}

/* Recent-posts grid: one large card beside a stack of compact row cards. */
.blog-recent-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 32px;
  align-items: stretch;
}

.blog-recent-side {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.blog-card--row {
  flex-direction: row;
  /* Stretch (not flex-start) so the image column matches the text
     column's full height instead of sitting as a fixed 140px square with
     blank space below it whenever the title/description wrap to extra
     lines. */
  align-items: stretch;
  box-shadow: none;
  border: 1px solid var(--color-border);
}

.blog-card--row:hover {
  transform: none;
  border-color: var(--color-sky);
}

.blog-card--row .blog-card-image {
  width: 140px;
  flex-shrink: 0;
}

.blog-card--row .blog-card-body {
  padding: 16px 20px;
  gap: 6px;
  min-width: 0;
}

.blog-card--row .blog-card-body h3 {
  font-size: var(--fs-body);
  line-height: 1.35;
}

.blog-card--row .blog-card-body p {
  font-size: var(--fs-small);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card--row .blog-card-tags {
  margin-top: 2px;
}

/* "All blog posts" grid + pagination. */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.blog-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 48px;
}

.blog-pagination-pages {
  display: flex;
  align-items: center;
  gap: 4px;
}

.blog-pagination-pages a,
.blog-pagination-pages span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  color: var(--text-70);
}

.blog-pagination-pages span.is-active {
  background: var(--color-navy);
  color: var(--color-white);
  font-weight: 500;
}

.blog-pagination-pages a:hover {
  background: var(--color-bg-tint);
  color: var(--color-navy);
}

@media (max-width: 992px) {
  .blog-recent-grid {
    grid-template-columns: 1fr;
  }

  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }

  .blog-card--row {
    flex-direction: column;
  }

  .blog-card--row .blog-card-image {
    width: 100%;
    aspect-ratio: 16 / 10;
  }
}

/* ==========================================================================
   Careers — role-family cards ("Who We Hire"), styled like an open-
   positions listing (title, tag pills, Apply button, divider, blurb)
   since that's the familiar pattern for this kind of page, but each card
   names a role family Primary ENT actually recruits for rather than a
   specific open requisition — see pages_careers.py for why.
   ========================================================================== */

.job-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.job-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 32px 36px;
  box-shadow: var(--shadow-card);
}

.job-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: nowrap;
}

.job-card-header h3 {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--color-navy);
}

.job-card .btn {
  flex-shrink: 0;
  padding: 10px 20px;
  font-size: var(--fs-small);
}

.job-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.job-tag {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  font-size: var(--fs-small);
  color: var(--text-80);
}

/* Variant for tag pills sitting on the navy .page-header (job detail
   pages) instead of a white card — same shape, readable on dark. */
.job-tag--on-navy {
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--text-on-navy-80);
}

.job-card-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 24px 0;
}

.job-card p {
  color: var(--text-70);
}

@media (max-width: 576px) {
  .job-card {
    padding: 24px;
  }

  .job-card-header {
    flex-direction: column;
    align-items: stretch;
  }

  .job-card-header .btn {
    justify-content: center;
  }
}

/* Careers page: job listings (left) + "don't see a fit" interest form
   (right, sticky). .job-card gets data-category so .job-filter-pill
   clicks (see main.js) can show/hide cards without a reload. */
.careers-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 48px;
  align-items: start;
  text-align: left;
}

.job-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}

.job-filter-pill {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: var(--text-70);
  font-family: inherit;
  font-size: var(--fs-small);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

.job-filter-pill:hover {
  border-color: var(--color-orange);
  color: var(--color-navy);
}

.job-filter-pill.is-active {
  background: var(--color-orange);
  border-color: var(--color-orange);
  color: var(--color-white);
}

.job-card.is-hidden {
  display: none;
}

.career-form-card {
  position: sticky;
  top: 24px;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-card);
}

.career-form-card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--color-navy);
  margin-bottom: 8px;
}

.career-form-intro {
  color: var(--text-70);
  font-size: var(--fs-small);
  margin-bottom: 24px;
}

.career-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.career-form-field label {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-navy);
}

.career-form-field input[type="text"],
.career-form-field input[type="tel"],
.career-form-field input[type="email"],
.career-form-field textarea {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  font-family: inherit;
  font-size: var(--fs-small);
  color: var(--color-navy);
}

.career-form-field textarea {
  resize: vertical;
  min-height: 90px;
}

.career-form-field input:focus,
.career-form-field textarea:focus {
  outline: 2px solid var(--color-sky);
  outline-offset: 1px;
}

.career-form-upload {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.career-form-upload input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.career-form-upload-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  color: var(--text-70);
  cursor: pointer;
  transition: border-color var(--transition-base);
}

.career-form-upload-label:hover {
  border-color: var(--color-orange);
}

.career-form-upload-label i {
  color: var(--color-orange-alt);
  flex-shrink: 0;
}

.career-form-filename {
  font-size: var(--fs-small);
  color: var(--text-60);
}

.career-form-card .btn {
  width: 100%;
  margin-top: 4px;
}

.career-form-note {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-small);
  color: var(--text-70);
}

.career-form-note strong {
  color: var(--color-navy);
}

@media (max-width: 900px) {
  .careers-layout {
    grid-template-columns: 1fr;
  }

  .career-form-card {
    position: static;
  }
}

/* FAQ accordion — used for "Common questions" on condition pages. Each
   answer is a CSS grid row animated 0fr -> 1fr (see .faq-answer), which
   handles any answer length without a guessed max-height. Toggling is in
   main.js. */
.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 20px 24px;
  background: var(--color-white);
  border: none;
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--color-navy);
  text-align: left;
  cursor: pointer;
}

.faq-question i {
  flex-shrink: 0;
  font-size: 14px;
  color: var(--color-sky);
  transition: transform var(--transition-base);
}

.faq-item.is-open .faq-question i {
  transform: rotate(180deg);
}

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transition-base);
}

.faq-answer-inner {
  overflow: hidden;
}

.faq-answer-inner p {
  margin: 0;
  padding: 0 24px 20px;
  color: var(--text-80);
}

.faq-item.is-open .faq-answer {
  grid-template-rows: 1fr;
}

/* Medical emergency disclaimer — a full-width warning-toned card in the
   footer, and the same copy again as a first-visit modal (see
   .emergency-modal below + main.js, which shows it once per browser tab
   session). Kept in one place here since both share the same visual
   language (warning tint, orange outline, triangle icon). */
.emergency-alert {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: rgba(243, 112, 33, 0.08);
  border: 1px solid var(--color-orange-alt);
  border-radius: var(--radius-md);
  padding: 24px 28px;
}

.emergency-alert i {
  color: var(--color-orange-alt);
  font-size: 22px;
  margin-top: 2px;
  flex-shrink: 0;
}

.emergency-alert h3 {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: 8px;
}

.emergency-alert p {
  font-size: var(--fs-small);
  color: var(--text-70);
  margin: 0;
}

.emergency-alert p + p {
  margin-top: 8px;
}

.emergency-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(26, 46, 90, 0.55);
}

.emergency-modal-overlay[hidden] {
  display: none;
}

.emergency-modal {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 40px;
  text-align: center;
  box-shadow: var(--shadow-card);
}

.emergency-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--text-70);
  font-size: 16px;
  transition: background var(--transition-base);
}

.emergency-modal-close:hover {
  background: var(--color-bg-soft);
}

.emergency-modal-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(243, 112, 33, 0.12);
  color: var(--color-orange-alt);
  font-size: 26px;
}

.emergency-modal h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--color-navy);
  margin-bottom: 12px;
}

.emergency-modal-lead {
  color: var(--text-90);
  font-weight: 600;
  margin-bottom: 12px;
}

.emergency-modal-body {
  color: var(--text-70);
  font-size: var(--fs-small);
  margin-bottom: 28px;
}

.emergency-modal-btn {
  width: 100%;
  justify-content: center;
}

@media (max-width: 480px) {
  .emergency-modal {
    padding: 32px 24px;
  }
}

/* Wraps the footer's .emergency-alert card. Mirrors .footer-main's own
   layout exactly (padding-inline on this outer element, then
   max-width + margin-inline: auto on the inner one) rather than using
   .container, which applies max-width first and padding second —
   that ordering difference put the card ~100px further inset than the
   logo/nav columns above it. */
.footer-emergency-wrap {
  padding-inline: var(--container-px);
}

@media (max-width: 1350px) {
  /* Matches the header/.container breakpoint (base.css). */
  .footer-emergency-wrap {
    padding-inline: var(--container-px-sm);
  }
}