/* ============================================
   LAYOUT
   ============================================ */

.container {
  width: 100%;
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: clamp(var(--space-4), 4vw, var(--space-8));
}

.container--narrow { max-width: var(--content-narrow); }
.container--default { max-width: var(--content-default); }

section {
  padding-block: clamp(var(--space-16), 9vw, var(--space-32));
}

section.tight {
  padding-block: clamp(var(--space-6), 3vw, var(--space-12));
}

/* ============================================
   HEADER
   ============================================ */

/* Home + shell pages use a very light frosted header so the tree canopy
   shows through but text still has some contrast when it scrolls under. */
body.page-home .site-header,
body.page-shell .site-header {
  /* The frost/blur lives on a ::before layer behind the actual nav content
     (see below) so it can fade to fully transparent on the right without
     ever fading out real UI like the theme toggle button. */
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom-color: transparent !important;
  position: sticky;
  isolation: isolate;
}
body.page-home .site-header::before,
body.page-shell .site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Fades from a slightly stronger frost on the left (over the logo/nav)
     to fully transparent on the right, so the tree canopy shows through
     clearly on that side. The mask fades the blur itself (not just the
     background color) so the right edge is genuinely clear, not just
     tinted-transparent. */
  background: linear-gradient(
    to right,
    rgba(251, 250, 247, 0.42) 0%,
    rgba(251, 250, 247, 0.30) 25%,
    rgba(251, 250, 247, 0.08) 55%,
    rgba(251, 250, 247, 0) 78%
  );
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  mask-image: linear-gradient(to right, black 0%, black 30%, transparent 78%);
  -webkit-mask-image: linear-gradient(to right, black 0%, black 30%, transparent 78%);
}
[data-theme="dark"] body.page-home .site-header::before,
[data-theme="dark"] body.page-shell .site-header::before {
  background: linear-gradient(
    to right,
    rgba(11, 20, 38, 0.36) 0%,
    rgba(11, 20, 38, 0.24) 25%,
    rgba(11, 20, 38, 0.06) 55%,
    rgba(11, 20, 38, 0) 78%
  );
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--color-bg) 90%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-interactive), background var(--transition-interactive);
}

.site-header.scrolled {
  border-bottom-color: var(--color-divider);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: var(--space-4);
}

.nav__logo {
  display: flex;
  align-items: center;
  color: var(--color-text);
  text-decoration: none;
}

.nav__logo svg,
.nav__logo img {
  height: 80px;
  width: auto;
  display: block;
}

/* Header (sticky nav) logo larger than footer reuse */
.site-header .nav__logo svg,
.site-header .nav__logo img {
  height: 96px;
}

@media (max-width: 879px) {
  .site-header .nav__logo svg,
  .site-header .nav__logo img {
    height: 64px;
  }
}

/* Smaller, lighter CTA in the nav so it doesn't overpower the logo */
.nav__cta .btn {
  padding: 0.5rem 1.1rem;
  font-size: 0.8125rem;
}

/* Show black logo in light mode, white in dark mode */
.nav__logo .logo-dark { display: block; }
.nav__logo .logo-light { display: none; }
[data-theme="dark"] .nav__logo .logo-dark { display: none; }
[data-theme="dark"] .nav__logo .logo-light { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .nav__logo .logo-dark { display: none; }
  :root:not([data-theme]) .nav__logo .logo-light { display: block; }
}

.footer-col .nav__logo img { height: 96px; }

/* Pull the footer logo up so its visual baseline aligns with the eyebrow row of adjacent columns. */
.footer-col .nav__logo {
  margin-top: calc(-1 * var(--space-6));
}

.nav__links {
  display: none;
  gap: var(--space-6);
  align-items: center;
  list-style: none;
  flex-wrap: nowrap;
}

.nav__links a {
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  position: relative;
  padding-block: var(--space-2);
  white-space: nowrap;
  line-height: 1.2;
}

.nav__links a:hover { color: var(--color-primary-hover); }

.nav__links a.active::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-primary);
  border-radius: var(--radius-full);
}

.nav__cta {
  display: none;
  align-items: center;
  gap: var(--space-3);
}

.nav__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  color: var(--color-text);
}
.nav__toggle:hover { background: var(--color-surface-2); }

@media (min-width: 880px) {
  .nav__links { display: flex; }
  .nav__cta { display: flex; }
  .nav__toggle { display: none; }
}

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
}
.theme-toggle:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
}

/* Mobile menu — floating panel */
.mobile-menu {
  position: fixed;
  top: 76px;
  right: var(--space-4);
  left: auto;
  bottom: auto;
  width: min(320px, calc(100vw - var(--space-8)));
  background: var(--color-bg);
  z-index: 49;
  padding: var(--space-3);
  border-radius: var(--radius-2xl);
  border: 1px solid var(--color-divider);
  box-shadow: 0 24px 60px -12px rgba(11, 20, 38, 0.35), 0 8px 20px -8px rgba(11, 20, 38, 0.25);
  transform-origin: top right;
  transform: scale(0.96) translateY(-4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms;
  pointer-events: none;
}
.mobile-menu.open {
  opacity: 1;
  transform: scale(1) translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 0s;
}

.mobile-menu ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mobile-menu a {
  display: block;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  color: var(--color-text);
  border-radius: var(--radius-md);
  font-weight: 500;
}
.mobile-menu a:hover,
.mobile-menu a:active { background: var(--color-surface-2); }

.mobile-menu__theme {
  margin-top: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-divider);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mobile-menu__theme span {
  font-size: var(--text-base);
  color: var(--color-text);
  font-weight: 500;
}

@media (min-width: 880px) {
  .mobile-menu { display: none !important; }
}

/* ============================================
   BUTTONS
   ============================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--radius-full);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  line-height: 1;
}

.btn--primary {
  background: var(--color-primary);
  color: #FBFAF7;
}
.btn--primary:hover {
  background: var(--color-primary-hover);
  color: #FBFAF7;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn--secondary {
  background: var(--color-text);
  color: var(--color-bg);
}
.btn--secondary:hover {
  background: color-mix(in srgb, var(--color-text) 85%, transparent);
  transform: translateY(-1px);
}

.btn--ghost {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}

/* "See full CV" button on the About page — add breathing room between bio
   and the credentials list. */
.team-card__cv-cta {
  margin: var(--space-4) 0 var(--space-5);
}
.btn--cv svg {
  width: 16px;
  height: 16px;
}
/* Only apply the hover fill on real hover-capable devices so iOS Safari's
   sticky :hover after a tap doesn't leave one button looking different. */
@media (hover: hover) {
  .btn--ghost:hover {
    border-color: var(--color-text);
    background: var(--color-surface-2);
  }
}

.btn--lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-base);
}

/* ============================================
   HERO
   ============================================ */

.hero {
  position: relative;
  padding-block: clamp(var(--space-16), 10vw, var(--space-32)) clamp(var(--space-8), 5vw, var(--space-16));
  overflow: hidden;
}

/* On mobile, narrow the hero's side gutters so the headline can stretch closer to the screen edges. */
@media (max-width: 600px) {
  .hero .container {
    padding-inline: var(--space-2);
  }
  /* At mobile hero sizes (~44px), weight 500 reads thin. Bump to 800 so the
     title has the same visual weight it does at 96px on desktop. */
  .hero__title { font-weight: 800; }
  .hero__title--brand { font-weight: 800; }
}

.hero__inner {
  display: grid;
  gap: clamp(var(--space-10), 6vw, var(--space-20));
  align-items: start;
  grid-template-columns: 1fr;
}

/* TRIAL: hero is single-column; tree was moved to a page-wide watermark. */
.hero__inner > *:first-child {
  max-width: 880px;
}

/* On the home page, let the hero content stretch the full container so the
   bio paragraph can grow with the viewport. */
body.page-home .hero__inner > *:first-child {
  max-width: none;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary-hover);
  margin-bottom: var(--space-5);
}
.hero__eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--color-primary);
}

.hero__title {
  font-size: var(--text-hero);
  font-family: var(--font-headline);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.005em;
  color: var(--color-text);
  /* Fluid gap between title and lede: 24px on desktop, ~48-64px on phones so
     the title doesn't jam right up against the body copy on mobile. */
  margin-bottom: clamp(var(--space-6), 8vw, var(--space-12));
}
.hero__title em {
  font-style: italic;
  font-weight: 500;
  color: var(--color-primary-hover);
}
/* Trial: bordeaux hero headline on the home page. Kept as a modifier so we can
   flip back to navy by removing the class in index.html if we don't keep it.
   Bumped to weight 600 so the huge headline reads as a deep saturated bordeaux
   instead of thin/washed-out (weight 500 at hero size lets the background bleed
   through the strokes). */
.hero__title--brand { color: var(--color-primary); font-weight: 600; }

.hero__lede {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
  max-width: 56ch;
  line-height: 1.55;
}

/* On the home page, the body paragraph grows fluidly with viewport width
   so it fills the available space without an awkward right-side gap.
   The vw-based floor lets phones (esp. Pro Max at 430px) scale UP with
   the screen instead of clamping to the min. */
body.page-home .hero__lede {
  font-size: clamp(1.25rem, 5.2vw, 2.15rem);
  max-width: none;
  line-height: 1.4;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-10);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6) var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-divider);
}

/* Tight variant: sits close to the bio paragraph above (no divider, smaller top gap) */
.hero__meta--tight {
  padding-top: var(--space-4);
  border-top: none;
  gap: var(--space-4) var(--space-10);
  margin-top: calc(-1 * var(--space-4));
}
.hero__meta > div {
  flex: 1 1 0;
  min-width: 0;
}

.hero__meta dt {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-1);
  white-space: nowrap;
}
.hero__meta dd {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text);
}

/* Hero visual */
.hero__visual {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: var(--color-surface-dark);
  box-shadow: var(--shadow-lg);
}
.hero__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Tree variant — transparent illustration sits above an inline badge that
   aligns with the CTA button row on the left. Visual top-aligns with the
   eyebrow; tree spans from title top to lede bottom; badge sits below
   aligned with the CTA button row. */
.hero__visual--tree {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  aspect-ratio: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: start;
  gap: 0;
  padding: 0;
}

/* Wrap centers the tree image. Allow horizontal overflow so an oversized
   canopy can extend beyond the column width without clipping. */
.hero__visual--tree .hero__tree-wrap {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  overflow: visible;
  /* Tree image is bbox-tight — small negative top so the canopy crown
     lands near the H1 baseline without overlapping the headline text. */
  margin-top: clamp(-40px, -2vw, -10px);
}
.hero__visual--tree .hero__tree {
  /* Tree intentionally large — fills the right column visually. */
  height: clamp(960px, 86vw, 1140px);
  width: auto;
  max-width: 180%;
  display: block;
  position: relative;
  z-index: 1;
  margin-left: auto;
  margin-right: auto;
}

/* Mobile: hide the decorative tree entirely — it spills outside the hero
   card on narrow viewports and reads as random floating triangles behind
   the dark hero. The tree is a desktop-only visual flourish. */
@media (max-width: 879px) {
  .hero__visual--tree {
    display: none;
  }
}

/* Inline badge — single row pill, sits below tree at CTA button row. */
.hero__visual--tree .hero__badge--inline {
  position: static;
  inset: auto;
  transform: none;
  /* Badge sits at CTA button row level. Negative margin pulls it up to
     align with Request an Appointment + What We Treat buttons. */
  margin: clamp(-195px, -15vw, -120px) 0 0;
  width: auto;
  max-width: 100%;
  /* Match .btn vertical padding so badge height equals the buttons. */
  padding: var(--space-3) 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(11,20,38,0.08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: 3;
  white-space: nowrap;
  font-size: var(--text-sm);
  line-height: 1.2;
}

.hero__visual--tree .hero__badge--inline .hero__badge-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hero__visual--tree .hero__badge--inline .hero__badge-text {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  color: var(--color-text);
}
.hero__visual--tree .hero__badge--inline .hero__badge-text strong {
  font-weight: 600;
  color: var(--color-text);
}
.hero__visual--tree .hero__badge--inline .hero__badge-text > span:last-child {
  color: var(--color-text-muted);
  font-weight: 400;
}

.hero__badge {
  position: absolute;
  bottom: var(--space-6);
  left: var(--space-6);
  right: var(--space-6);
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.hero__badge-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  display: grid;
  place-items: center;
  color: #FBFAF7;
  flex-shrink: 0;
}
.hero__badge-text strong {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}
.hero__badge-text span {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* (Removed: legacy .hero__rays decorative sun rays — replaced by the
   Andry tree mark in the header and the tree illustration in the hero.) */

/* ============================================
   SECTION HEADERS
   ============================================ */

.section-head {
  display: grid;
  gap: var(--space-4);
  margin-bottom: clamp(var(--space-10), 6vw, var(--space-16));
  max-width: 720px;
}

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

.eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary-hover);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--color-primary);
}
.centered .eyebrow {
  justify-content: center;
}

.section-title {
  font-size: var(--text-2xl);
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.section-lede {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 60ch;
  line-height: 1.55;
}
.centered .section-lede {
  margin-inline: auto;
}

/* ============================================
   SERVICE CARDS
   ============================================ */

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
}

.service-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.service-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--color-primary-highlight);
  color: var(--color-primary);
  display: grid;
  place-items: center;
}

.service-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-text);
}

.service-card p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}

/* ============================================
   APPROACH / FEATURES (numbered)
   ============================================ */

.approach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-8);
  margin-top: var(--space-12);
}

.approach-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.approach-item__num {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--color-primary);
  font-feature-settings: "tnum";
  font-style: italic;
}

.approach-item h3 {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
}

.approach-item p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* ============================================
   CTA SECTION
   ============================================ */

.cta-band {
  background: var(--color-surface-dark);
  color: var(--color-text-inverse);
  border-radius: var(--radius-2xl);
  padding: 0;
  position: relative;
  overflow: hidden;
}

.cta-band__content {
  padding: var(--space-6) var(--space-6) var(--space-8);
}

@media (min-width: 800px) {
  .cta-band__content {
    padding: var(--space-10) var(--space-12) var(--space-12);
  }
}

.cta-band__content {
  /* No position:relative here — desktop sun is absolute-positioned
     relative to .cta-band (the card), not the content block. */
  z-index: 1;
  max-width: 720px;
}



.cta-band__title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 8vw, 3.75rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #FBFAF7;
  margin-bottom: var(--space-3);
}

.cta-band__lede {
  color: #C7D1DD;
  font-size: var(--text-lg);
  max-width: 50ch;
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.cta-band__sun {
  /* Anchor sun in the upper-left corner; title wraps to its right. */
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(110px, 28vw, 200px);
  height: clamp(110px, 28vw, 200px);
  z-index: 0;
  opacity: 1;
  pointer-events: none;
}

.cta-band__title {
  /* Reserve corner space for the sun, then let the title flow back to the right edge. */
  padding-left: clamp(110px, 28vw, 200px);
  min-height: clamp(110px, 28vw, 200px);
}

@media (min-width: 800px) {
  .cta-band__sun {
    width: 220px;
    height: 220px;
  }
  .cta-band__title {
    padding-left: 220px;
    min-height: 220px;
  }
}

/* ============================================
   PAGE: HOME — single-screen presentation
   ============================================ */

/* Hide the footer on the home page for dramatic effect.
   Also hide on shell pages (team/services/contact/portal) — the floating
   CTA replaces the footer nav on these pages too. */
body.page-home .site-footer,
body.page-shell .site-footer { display: none; }

/* Shell pages still scroll. Reserve room at the bottom so the sun handle
   sitting above the sheet doesn't overlap end-of-page content. */
body.page-shell main {
  padding-bottom: clamp(96px, 14vh, 160px);
}

/* Home page: lock to a single screen, no scrolling.
   Both <html> and <body> get overflow:hidden and an explicit 100dvh height.
   The "d" matters: dvh tracks the REAL, currently-visible viewport height
   as mobile browser toolbars show/hide, unlike the static 100vh — which is
   what actually caused the "text overflowing / sun icon overlapping stats"
   bug on real phones even though fixed-size desktop/headless tests looked
   fine. (index.html also carries class="page-home" on <html> itself, since
   "body.page-home html" can never match — html is an ancestor, not a
   descendant, of body.)
   The header, hero, and (position:fixed) floating CTA sit in a column
   flexbox so the hero always gets exactly whatever space is left after the
   header's REAL rendered height — no hardcoded header-height guess to keep
   in sync when the logo size changes. */
html.page-home,
body.page-home {
  height: 100dvh;
  overflow: hidden;
}

body.page-home {
  display: flex;
  flex-direction: column;
}

body.page-home .site-header {
  flex: 0 0 auto;
}

/* Landscape phones AND landscape iPads: unlock scrolling so the hero
   content, meta, and floating CTA stay reachable when there just isn't
   enough height to show everything on one screen. Portrait devices stay
   locked to a single screen per design intent — the dvh-based flex sizing
   above plus the mobile compaction below keep everything fitting without
   ever needing to scroll.

   Threshold: landscape orientations with a viewport height below ~900px.
   This covers iPhone (landscape), iPad mini/11"/Air (landscape ~820–838px),
   and any short desktop windows. Full-height iPad Pro landscape (~1024px)
   and normal desktops still get the locked single-screen layout. */
@media (orientation: landscape) and (max-height: 900px) {
  html.page-home,
  body.page-home {
    height: auto;
    min-height: 100dvh;
    overflow: auto;
  }
  body.page-home main {
    flex: 0 0 auto;
    display: block;
    padding-bottom: clamp(96px, 22vh, 160px);
  }
  body.page-home .hero {
    flex: 0 0 auto;
    display: block;
    padding-block: var(--space-6) clamp(120px, 22vh, 180px);
    overflow: visible;
  }
}

body.page-home main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.page-home .hero {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: flex-start;
  padding-block: var(--space-2);
  padding-bottom: clamp(104px, 11vh, 136px);
  overflow: hidden;
}

body.page-home .hero .container { width: 100%; }

/* Tighten spacing inside the hero on home so everything fits */
body.page-home .hero__lede { margin-bottom: var(--space-4); }
body.page-home .hero__meta--tight {
  margin-top: 0;
  padding-top: var(--space-2);
  gap: var(--space-3) var(--space-10);
}
body.page-home .hero__title { margin-bottom: var(--space-3); }

/* Mobile: compact the whole hero block — smaller headline, tighter bio
   type, tighter stats gap — so everything clears the floating sun handle
   (~84px tall; its top edge floats ~60px above the true viewport bottom)
   with real margin to spare, on a genuinely locked single screen. The
   reserved bottom gap is sized against dvh, not vh, for the same
   real-device reason noted above. */
@media (max-width: 600px) {
  body.page-home .hero {
    padding-top: 0;
    padding-bottom: max(120px, calc(9dvh + env(safe-area-inset-bottom, 0px)));
  }
  body.page-home .hero__title {
    font-size: clamp(1.875rem, 8vw, 2.5rem);
    line-height: 1.05;
    margin-bottom: var(--space-2);
  }
  body.page-home .hero__lede {
    font-size: clamp(1rem, 4.6vw, 1.1875rem);
    line-height: 1.38;
    margin-bottom: 10px;
  }
  body.page-home .hero__meta--tight {
    gap: 6px var(--space-6);
    padding-top: 4px;
    margin-top: 0;
  }
}

/* Hide the main nav links & hamburger — the floating CTA is the only
   navigation. Keep the logo (links home) and the theme toggle. Applies
   to the home page and to all shell pages (team/services/contact/portal). */
body.page-home .nav__links,
body.page-home .nav__toggle,
body.page-shell .nav__links,
body.page-shell .nav__toggle {
  display: none !important;
}

/* Larger logo across the site since it's the star of the header. */
body.page-home .site-header .nav__logo svg,
body.page-home .site-header .nav__logo img,
body.page-shell .site-header .nav__logo svg,
body.page-shell .site-header .nav__logo img {
  height: 120px;
}
@media (max-width: 879px) {
  body.page-home .site-header .nav__logo svg,
  body.page-home .site-header .nav__logo img,
  body.page-shell .site-header .nav__logo svg,
  body.page-shell .site-header .nav__logo img {
    height: 96px;
  }
}

/* ============================================
   FLOATING CTA — drag-up sheet with sun handle.
   Independent of page scroll. Tap sun to toggle, or drag it up/down.
   ============================================ */

.floating-cta {
  --drag-offset: 0px;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  padding: var(--space-4) 0 calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  /* Genuinely translucent so text underneath shows through the glass */
  /* Match the sun handle so the two read as one glass surface */
  background: rgba(251, 250, 247, 0.75);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-top: 1px solid rgba(11, 20, 38, 0.10);
  box-shadow: 0 -8px 24px rgba(11, 20, 38, 0.08);
  /* Start closed: sheet slid down, only the handle protrudes */
  transform: translateY(calc(100% + var(--drag-offset, 0px)));
  transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: auto;
}

/* While dragging, disable the tween so motion tracks the finger 1:1 */
.floating-cta.is-dragging {
  transition: none;
}

/* Open state: sheet slid up so buttons are on-screen */
.floating-cta.is-open {
  transform: translateY(var(--drag-offset, 0px));
}

/* Solid fallback only when neither backdrop-filter variant is supported */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .floating-cta { background: rgba(251, 250, 247, 0.90); }
}

/* Dark-theme variant */
[data-theme="dark"] .floating-cta {
  background: rgba(11, 20, 38, 0.72);
  border-top-color: rgba(251, 250, 247, 0.14);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-theme="dark"] .floating-cta { background: rgba(11, 20, 38, 0.90); }
}

/* Sun handle: protrudes above the sheet so it's visible when closed.
   Halfway between fully-lifted (-90%) and shelf-hugging (-55%). */
.floating-cta__handle {
  position: absolute;
  top: 0;
  left: 50%;
  /* Raise above the sticky site-header (z-index 50-ish) so the sun floats
     over the header when it protrudes above the sheet. */
  z-index: 70;
  transform: translate(-50%, -72%);
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: none;
  background: rgba(251, 250, 247, 0.75);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  box-shadow: 0 6px 18px rgba(11, 20, 38, 0.14);
  padding: 12px;
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.floating-cta__handle:hover {
  box-shadow: 0 8px 22px rgba(11, 20, 38, 0.18);
}
.floating-cta__handle:active { cursor: grabbing; }

.floating-cta__handle img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* Inline hamburger icon variant (svg inside the handle) */
.floating-cta__handle svg.handle-icon {
  width: 42%;
  height: 42%;
  pointer-events: none;
  display: block;
}
.floating-cta__handle svg.handle-icon line {
  stroke-linecap: round;
  stroke-width: 3;
}

/* Hamburger-line color variants. The handle KEEPS its frosted transparent
   background; only the stroke color of the hamburger changes. */
.floating-cta__handle--midnight svg.handle-icon line { stroke: #0B1426; }
.floating-cta__handle--bordeaux svg.handle-icon line { stroke: #8B2434; }

/* Dark-mode override: flip the midnight hamburger to cream so it stays legible
   on the dark frosted handle. Bordeaux stays bordeaux (still legible on dark). */
[data-theme="dark"] .floating-cta__handle--midnight svg.handle-icon line {
  stroke: #FBFAF7;
}

[data-theme="dark"] .floating-cta__handle {
  background: rgba(11, 20, 38, 0.72);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.40);
}

.floating-cta__actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  width: 100%;
}

.floating-cta__actions .btn {
  width: 100%;
  text-align: center;
  justify-content: center;
}

@media (min-width: 700px) {
  .floating-cta__actions {
    gap: var(--space-4);
  }
  .floating-cta__actions .btn {
    font-size: var(--text-base);
    padding: var(--space-4) var(--space-6);
  }
}

@media (max-width: 600px) {
  .floating-cta__handle {
    width: 84px;
    height: 84px;
    transform: translate(-50%, -72%);
  }
}

/* ============================================
   FOOTER
   ============================================ */

.site-footer {
  background: var(--color-surface-2);
  border-top: 1px solid var(--color-divider);
  padding-block: var(--space-16) var(--space-8);
  margin-top: var(--space-20);
}

.footer-grid {
  display: grid;
  gap: var(--space-10);
  grid-template-columns: 1fr;
  margin-bottom: var(--space-12);
}

@media (min-width: 720px) {
  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
  }
}

.footer-col h4 {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer-col ul li {
  white-space: nowrap;
}

.footer-col a {
  color: var(--color-text);
}
.footer-col a:hover { color: var(--color-primary-hover); }
.footer-col ul li,
.footer-col ul a {
  font-size: var(--text-sm);
}

.footer-col p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}

.footer-col .nav__logo svg { height: 96px; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

/* ============================================
   PAGE HEADER (interior pages)
   ============================================ */

.page-header {
  padding-block: clamp(var(--space-16), 8vw, var(--space-24)) clamp(var(--space-10), 6vw, var(--space-16));
  border-bottom: 1px solid var(--color-divider);
  background: var(--color-surface-2);
}

/* Compact page-header: minimal padding + no background band — anchors
   the title tight to the site header so page content starts high. Keeps
   the hairline under the title so it visually separates from the content
   below (matches the look of the Services page). */
.page-header--compact {
  padding-block: var(--space-2) var(--space-4);
  background: transparent;
  border-bottom: 1px solid var(--color-divider);
}

/* Heavier weight + larger size on the compact page title so it visually
   separates from the body copy below. Min size (1.75rem) keeps titles like
   "Services & Conditions Treated" on a single line on iPhone widths. */
.page-header--compact h1 {
  font-weight: 800;
  font-size: clamp(1.75rem, 6.5vw, 3rem);
  letter-spacing: -0.025em;
  line-height: 1.05;
}

/* When a compact page-header is immediately followed by a section, shrink
   that section's top padding so the content follows the title tightly. */
.page-header--compact + section {
  padding-block: var(--space-4) clamp(var(--space-8), 6vw, var(--space-16));
}

.page-header__inner {
  display: grid;
  gap: var(--space-4);
}

.page-header h1 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.page-header__lede {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 65ch;
}

.crumbs {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.crumbs a { color: var(--color-text-muted); }
.crumbs a:hover { color: var(--color-text); }

/* ============================================
   TEAM PAGE
   ============================================ */

.team-grid {
  display: grid;
  gap: var(--space-12);
  grid-template-columns: 1fr;
}

.team-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Compact portrait variant: the portrait is anchored to the upper right
   and the name/role/bio wrap around it using CSS float, at every screen
   size — mobile and desktop alike — so the reader always sees name +
   role + the opening narrative alongside the photo. */
.team-card--compact-portrait {
  display: block;
}
.team-card--compact-portrait .team-card__portrait {
  aspect-ratio: 4 / 5;
  width: 50%;
  max-width: 240px;
  height: auto;
  border-radius: var(--radius-lg);
  float: right;
  margin: 0 0 var(--space-3) var(--space-4);
  shape-outside: margin-box;
}
/* Clear the float once the credentials list starts, so the dt/dd block
   spans the full width beneath the portrait. */
.team-card--compact-portrait .team-card__creds {
  clear: both;
}
/* On wider screens the column is much wider than a phone, so the portrait
   gets more room too — still floated right with text wrapping to its
   left, just scaled up for the larger canvas. */
@media (min-width: 720px) {
  .team-card--compact-portrait .team-card__portrait {
    width: 34%;
    max-width: 340px;
    margin: 0 0 var(--space-4) var(--space-6);
  }
}

.team-card__portrait {
  aspect-ratio: 4 / 5;
  background: var(--color-surface-2);
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--color-divider);
  position: relative;
}

.team-card__portrait-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--color-text-faint);
  background: linear-gradient(135deg, var(--color-surface-2), var(--color-surface-offset));
}

.team-card__portrait-placeholder svg {
  width: 80px;
  height: 80px;
}

.team-card__portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  background: linear-gradient(135deg, var(--color-surface-2), var(--color-surface-offset));
}

.team-card__portrait-caption {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text);
  background: rgba(251, 250, 247, 0.85);
  padding: 4px 10px;
  border-radius: var(--radius-full, 999px);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
[data-theme="dark"] .team-card__portrait-caption {
  background: rgba(11, 20, 38, 0.75);
  color: var(--color-text);
}

.team-card__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--color-text);
  letter-spacing: -0.015em;
  margin-bottom: var(--space-1);
}

.team-card__role {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary-hover);
  letter-spacing: 0.02em;
  margin-bottom: var(--space-4);
}

.team-card__bio {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}

.team-card__creds {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
}

.team-card__creds dt {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-faint);
}
.team-card__creds dd {
  font-size: var(--text-sm);
  color: var(--color-text);
}

/* ============================================
   SERVICES PAGE
   ============================================ */

.condition-grid {
  display: grid;
  gap: var(--space-1);
  grid-template-columns: 1fr;
}

.condition-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  padding-block: var(--space-8);
  border-bottom: 1px solid var(--color-divider);
}

@media (min-width: 720px) {
  .condition-row {
    grid-template-columns: 280px 1fr;
    gap: var(--space-10);
  }
}

.condition-row h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: -0.01em;
}

.condition-row__num {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--color-text-faint);
  margin-bottom: var(--space-2);
}

.condition-row p {
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.condition-row ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-2) var(--space-6);
  margin-top: var(--space-4);
}

.condition-row li {
  position: relative;
  padding-left: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.condition-row li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 8px;
  background: var(--color-primary);
  border-radius: 2px;
  transform: rotate(45deg);
}

/* ============================================
   CONTACT PAGE
   ============================================ */

/* Contact page: real breathing gap below the page-header hairline so
   "PHONE" and "Request an appointment" don't press against the title. */
.page-header--compact + section.contact-section {
  padding-block: clamp(var(--space-8), 5vw, var(--space-12)) clamp(var(--space-6), 4vw, var(--space-10));
}

.contact-layout {
  display: grid;
  gap: clamp(var(--space-6), 4vw, var(--space-10));
  grid-template-columns: 1fr;
}

@media (min-width: 880px) {
  .contact-layout { grid-template-columns: 1fr 1fr; }
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  /* On desktop the grid stretches this column to match the taller
     appointment-form card. Distribute the leftover space evenly between
     blocks (on top of the minimum gap) so the sections spread out to fill
     the same height as the form instead of clumping at the top. */
  justify-content: space-between;
}

.contact-block h3 {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* Muted slate-blue like the team page cred labels — reads as a lighter
     shade of the site navy against the coastal-light surface. */
  color: var(--color-text-faint);
  margin-bottom: var(--space-3);
}

.contact-block p {
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: 1.6;
  display: block;
  font-family: var(--font-body);
}

/* display: inline-block (not block) so the clickable area hugs the actual
   text instead of stretching to the full column width -- a full-width link
   was catching clicks in the whitespace next to/below the text, including
   the gutter next to the appointment form on desktop. */
.contact-block a {
  font-size: var(--text-base);
  line-height: 1.6;
  font-family: var(--font-body);
  display: inline-block;
  max-width: 100%;
  color: var(--color-text);
  font-weight: 500;
}
.contact-block a:hover {
  color: var(--color-primary-hover);
}

.contact-block .big {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.contact-form {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-xl);
  padding: clamp(var(--space-4), 2vw, var(--space-5));
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-field label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.form-field input,
.form-field textarea,
.form-field select {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--text-base);
  font-family: var(--font-body);
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-highlight);
}

.form-row {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 600px) {
  .form-row { grid-template-columns: 1fr 1fr; }
}

.form-field-error {
  font-size: var(--text-xs);
  color: var(--color-error);
  min-height: 0;
  line-height: 1.4;
}

.form-field.has-error input,
.form-field.has-error textarea,
.form-field.has-error select {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px var(--color-primary-highlight);
}

.form-status {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
  min-height: 0;
}

.form-status.is-error {
  color: var(--color-error);
  font-weight: 500;
}

/* ============================================
   PORTAL PAGE
   ============================================ */

.portal-hero {
  text-align: center;
  display: grid;
  gap: var(--space-6);
  justify-items: center;
  padding-block: clamp(var(--space-12), 8vw, var(--space-20));
}

.portal-hero__icon {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-xl);
  background: var(--color-primary-highlight);
  color: var(--color-primary);
  display: grid;
  place-items: center;
  margin-bottom: var(--space-2);
}

/* Portal page: three action buttons in a centered column. Same layout at
   every screen size — Request Appointment opens the DrChrono modal. */
.portal-hero__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
  width: 100%;
  max-width: 320px;
  margin-inline: auto;
}
.portal-hero__actions .btn {
  width: 100%;
}

/* Navy button variant — overrides bordeaux --color-primary with midnight navy. */
.btn--navy {
  background: var(--color-text) !important;
  color: #FBFAF7 !important;
  border-color: var(--color-text) !important;
}
.btn--navy:hover {
  background: color-mix(in srgb, var(--color-text) 82%, #FBFAF7) !important;
  color: #FBFAF7 !important;
}

/* Appointment modal — wider than the notify modal to fit the DrChrono widget. */
.modal__dialog--appointment {
  max-width: 720px;
  width: calc(100vw - 2rem);
  padding: var(--space-6);
}
.appointment-modal-frame {
  margin-top: var(--space-4);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
}
.appointment-modal-frame iframe {
  display: block;
  width: 100%;
  height: 620px;
  border: 0;
}
@media (max-width: 600px) {
  .modal__dialog--appointment {
    max-height: 90vh;
    overflow-y: auto;
    padding: var(--space-4);
  }
  .appointment-modal-frame iframe {
    height: 560px;
  }
}

.portal-actions {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  max-width: 720px;
  margin-inline: auto;
}

@media (min-width: 720px) {
  .portal-actions { grid-template-columns: 1fr 1fr; }
}

.portal-action {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  text-decoration: none;
  color: var(--color-text);
  transition: all var(--transition-interactive);
}

.portal-action:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.portal-action h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-text);
}

.portal-action p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  flex-grow: 1;
}

.portal-action__cta {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary-hover);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.portal-action:hover .portal-action__cta {
  gap: var(--space-3);
}

/* ============================================
   UTILITIES
   ============================================ */

.placeholder-note {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-primary-highlight);
  color: var(--color-primary);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* ============================================================
   TRIAL: page-wide watermark tree + standalone hero badge
   ============================================================ */

/* Watermark: fixed-position tree behind all content.
   Sits on body level, scroll-locked, very faded so it acts as a
   subtle texture rather than a foreground illustration.
   Tree is sized large (taller than the viewport); we shift it DOWN
   with a negative top inset so the canopy crown remains visible at
   the top of the viewport without being clipped at the top edge. */
.page-watermark {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
.page-watermark img {
  /* Large tree, restored to original visual size. */
  height: clamp(960px, 120vh, 1300px);
  width: auto;
  max-width: none;
  /* Push the tree DOWN inside the fixed container so the canopy crown
     lands inside the viewport instead of being clipped above it. */
  margin-top: clamp(20px, 3vh, 80px);
  /* Pulled off the right edge so the trunk lands roughly center-right. */
  margin-right: -8vw;
  opacity: 0.08;
  filter: grayscale(1);
}
:root[data-theme="dark"] .page-watermark img,
.theme-dark .page-watermark img {
  opacity: 0.1;
  filter: grayscale(1) invert(1);
}

/* Tablet / mid-width: keep the tree pinned to the bottom-right edge at the
   same visual size as desktop. */
@media (max-width: 1100px) and (min-width: 481px) {
  .page-watermark {
    justify-content: flex-end;
    align-items: flex-end;
  }
  .page-watermark img {
    height: clamp(960px, 120vh, 1300px);
    margin-right: -4vw;
    margin-top: 0;
    opacity: 0.08;
  }
}

/* Phones only: bottom-center anchor. Tree PNG has been cropped so the
   trunk/roots hug the bottom edge with zero margin.
   NOTE: use small-viewport units (svh) instead of vh so iOS Safari's
   collapsing URL bar doesn't rescale the tree during scroll. svh stays
   fixed at the toolbar-visible height. */
@media (max-width: 480px) {
  .page-watermark {
    /* Pin the fixed container's bottom to the stable small-viewport
       bottom so the tree base doesn't drift when the URL bar collapses. */
    height: 100svh;
    top: auto;
    bottom: 0;
    justify-content: center;
    align-items: flex-end;
  }
  .page-watermark img {
    /* svh is the toolbar-visible viewport height; it does not change
       during scroll, so the tree stops shifting/scaling on iOS Safari. */
    height: clamp(560px, 80svh, 760px);
    margin-bottom: 0;
    margin-right: 0;
    margin-top: 0;
    opacity: 0.06;
  }
}

/* Make sure all page content sits ABOVE the watermark.
   Note: .mobile-menu is intentionally excluded here because its base
   CSS uses position: fixed with inset:0 + top:76px to overlay the
   viewport; overriding to position: relative would break the menu. */
header,
main,
footer,
.password-gate,
.cookie-banner {
  position: relative;
  z-index: 1;
}
/* Mobile menu keeps its native fixed positioning; just bump z-index
   so it sits above the watermark when open. */
.mobile-menu {
  z-index: 50;
}

/* TRIAL: dissolve PAGE-LEVEL section backgrounds so the watermark
   shows through uniformly. Body gets the cream base color (so the
   watermark has something to sit against); every full-width section
   is transparent. Card-level surfaces (.cta-band, .service-card,
   .approach-item) keep their native backgrounds so design intent
   like the midnight-navy CTA tile is preserved. */
body {
  background: var(--color-bg);
}
main > section,
main > section[style*="background"],
footer,
.page-header {
  background: transparent !important;
}
/* Soften only the lighter card surfaces so they still read as cards
   on the tree, without fully opaque cream blocks that hide the
   watermark. The dark CTA tile (.cta-band) is intentionally left
   alone so it keeps its full midnight-navy background. */
.service-card,
.approach-item,
.hero__badge--standalone {
  background: color-mix(in srgb, var(--color-bg) 78%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Standalone badge: same visual style as the old inline hero badge,
   now sits below hero meta as part of the single-column hero. */
.hero__badge--standalone {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: var(--space-8);
  padding: var(--space-3) 1.25rem;
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(11,20,38,0.08);
  font-size: var(--text-sm);
  line-height: 1.2;
  white-space: nowrap;
  max-width: 100%;
}
.hero__badge--standalone .hero__badge-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hero__badge--standalone .hero__badge-text {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  color: var(--color-text);
}
.hero__badge--standalone .hero__badge-text strong {
  font-weight: 600;
  color: var(--color-text);
}
.hero__badge--standalone .hero__badge-text > span:last-child {
  color: var(--color-text-muted);
  font-weight: 400;
}

/* Mobile: let the badge wrap and shrink. */
@media (max-width: 600px) {
  .hero__badge--standalone {
    white-space: normal;
    text-align: left;
  }
}

/* ============================================
   PAGE: PATIENT PORTAL — single-screen presentation
   (same "lock to one viewport" pattern as the home
   page, scoped to this page only via .page-portal)
   ============================================ */
/* Portal page: single viewport, no page scroll — same layout at all sizes. */
html.page-portal,
body.page-portal {
  height: 100dvh;
  overflow: hidden;
}

body.page-portal {
  display: flex;
  flex-direction: column;
}

body.page-portal .site-header {
  flex: 0 0 auto;
}

body.page-portal main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: clamp(96px, 13vh, 150px);
}

body.page-portal .page-header--compact {
  flex: 0 0 auto;
}

/* The remaining content section grows to fill whatever space is left
   under the title and centers the "Get Notified" block within it. */
body.page-portal .portal-static-section {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--space-2);
}

body.page-portal .portal-static-section .container { width: 100%; }

body.page-portal .portal-hero {
  padding-block: 0;
  gap: var(--space-4);
}

body.page-portal .portal-hero__icon {
  width: 56px;
  height: 56px;
  margin-bottom: 0;
}

body.page-portal .portal-hero .section-title {
  font-size: clamp(1.375rem, 4.5vw, 2.25rem);
  line-height: 1.15;
}

body.page-portal .portal-hero .section-lede {
  font-size: clamp(0.9375rem, 2.2vw, 1.0625rem);
  line-height: 1.45;
}

/* Landscape phones AND landscape iPads: unlock scrolling instead of
   clipping content — same fallback and threshold used on the home page. */
@media (orientation: landscape) and (max-height: 900px) {
  html.page-portal,
  body.page-portal {
    height: auto;
    min-height: 100dvh;
    overflow: auto;
  }
  body.page-portal main {
    flex: 0 0 auto;
    display: block;
    overflow: visible;
    padding-bottom: clamp(96px, 22vh, 160px);
  }
  body.page-portal .portal-static-section {
    display: block;
    padding-block: var(--space-4);
  }
}

@media (max-width: 480px) {
  body.page-portal .portal-hero {
    gap: var(--space-3);
  }
  body.page-portal .portal-hero__icon {
    width: 48px;
    height: 48px;
  }
}

/* ============================================
   MODAL (Get Notified popup)
   ============================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.modal.is-open {
  display: flex;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 20, 38, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.modal__dialog {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: clamp(var(--space-6), 4vw, var(--space-8));
  max-width: 420px;
  width: 100%;
  max-height: 90dvh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  animation: modal-in 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: transparent;
  border: none;
  color: var(--color-text-faint);
  cursor: pointer;
  transition: background var(--transition-interactive), color var(--transition-interactive);
}

.modal__close:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
}

.modal__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--color-text);
  padding-right: var(--space-8);
}

.modal__subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: calc(-1 * var(--space-2));
}

#notifyForm {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

body.modal-open {
  overflow: hidden;
}

/* ============================================================
   Long-form prose layout (Privacy Notice, future Terms, etc.)
   ============================================================ */
.prose-section {
  padding-block: clamp(var(--space-8), 5vw, var(--space-12)) clamp(var(--space-12), 8vw, var(--space-20));
}
.prose-container {
  max-width: 760px;
}
.prose-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.75rem;
  color: var(--color-muted);
  font-weight: 600;
  margin: 0 0 var(--space-4);
}
.prose-lede {
  font-size: clamp(1.0625rem, 2.2vw, 1.1875rem);
  line-height: 1.6;
  color: var(--color-text);
  margin-bottom: var(--space-8);
}
.prose-container h2 {
  color: var(--color-text);
  font-size: clamp(1.125rem, 2.4vw, 1.375rem);
  font-weight: 700;
  margin: var(--space-8) 0 var(--space-3);
  letter-spacing: -0.005em;
}
.prose-container h2:first-of-type {
  margin-top: var(--space-6);
}
.prose-container p,
.prose-container li {
  line-height: 1.65;
  color: var(--color-text);
}
.prose-container ul {
  padding-left: 1.25rem;
  margin: 0 0 var(--space-4);
}
.prose-container ul li {
  margin-bottom: var(--space-2);
}
.prose-container a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.prose-container a:hover {
  color: var(--bordeaux);
}
.prose-footnote {
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
  font-size: 0.875rem;
  color: var(--color-muted);
}