/* ==========================================================================
   Base / Reset
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--color-black);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
}

body.nav-locked {
  overflow: hidden;
}

@media (max-width: 1350px) {
  /* Guards against a horizontal scrollbar flicker from the mobile push-
     reveal nav's transform (scale + translateX on .page-shell). Scoped to
     mobile only — at desktop widths this breaks position:sticky on the
     header, since overflow-x on html/body makes it the nearest scrolling
     ancestor sticky positioning resolves against.
     Matches the .main-nav / .nav-toggle breakpoint in layout.css — the full
     desktop nav needs ~1286px to lay out on one line without wrapping, so
     the mobile nav (and this guard) must cover everything below that. */
  html,
  body {
    overflow-x: hidden;
  }
}

img {
  max-width: 100%;
  display: block;
}

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

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

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

h1, h2, h3, h4, p {
  margin: 0;
}

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-px);
}

@media (max-width: 1350px) {
  /* Matches the header's nav breakpoint (layout.css) — otherwise between
     993–1350px the header switches to its tighter mobile padding while
     page content here still used the wide desktop padding, throwing the
     two out of alignment (content indented well past the logo, and wide
     enough to overflow past the right edge). */
  .container {
    padding-inline: var(--container-px-sm);
  }
}

.section {
  padding-block: var(--section-py);
}

@media (max-width: 768px) {
  .section {
    padding-block: var(--section-py-sm);
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 24px;
  border-radius: var(--radius-pill);
  font-weight: 500;
  font-size: var(--fs-body);
  white-space: nowrap;
  transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn i {
  font-size: 16px;
}

.btn-primary {
  background: var(--color-orange);
  color: var(--color-white);
}

.btn-primary:hover {
  box-shadow: 0 10px 24px rgba(255, 163, 0, 0.35);
}

.btn-alt {
  background: var(--color-orange-alt);
  color: var(--color-white);
}

.btn-alt:hover {
  box-shadow: 0 10px 24px rgba(243, 112, 33, 0.35);
}

.btn-outline-dark {
  background: transparent;
  border: 1px solid var(--color-black);
  color: var(--color-black);
}

.btn-outline-dark:hover {
  background: var(--color-white);
  color: var(--color-black);
}

.btn-outline-light {
  background: transparent;
  border: 1px solid var(--color-white);
  color: var(--color-white);
}

.btn-outline-light:hover {
  background: var(--color-white);
  color: var(--color-navy);
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--text-60);
  font-size: 20px;
  transition: background var(--transition-base), color var(--transition-base);
}

.btn-icon:hover {
  background: var(--color-sky);
  color: var(--color-white);
}

/* ---- Section heading ---- */
.section-heading {
  max-width: 800px;
}

.section-heading h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 400;
  color: var(--color-navy);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.section-heading h2 strong,
h1 .accent,
h2 .accent {
  font-weight: 500;
  color: var(--color-sky);
}

.section-heading p {
  margin-top: 12px;
  font-size: var(--fs-body);
  color: var(--text-80);
}

.section-heading.center {
  text-align: center;
  margin-inline: auto;
}

/* A standalone .section-heading (just a heading, no p child — e.g. a
   provider bio's "About Dr. X") is often followed by ordinary .lead
   paragraphs as siblings rather than children, which .section-heading p
   above doesn't reach. Space those out too, and give consecutive lead
   paragraphs breathing room from each other. */
.section-heading:not(:first-child) {
  margin-top: 32px;
}

.section-heading + p.lead {
  margin-top: 16px;
}

.lead + .lead {
  margin-top: 16px;
}

@media (max-width: 768px) {
  :root {
    --fs-hero: 2.25rem;
    --fs-h2: 1.875rem;
  }
}