@layer theme, base, components, utilities;
@layer components {
/* ==========================================================================
   Mountain Peaks Family Practice — shared theme
   Brand system: Summit Navy ink, Sky Wash grounds, Warm Amber as a mark only.
   Type: Jost (display) / Source Sans 3 (body) / Source Serif 4 (quotes).
   Body floor 18px — the audience skews 60+.
   ========================================================================== */

:root {
  /* Ink + accents */
  --navy: #102030;
  --slate: #3D5266;
  --sky-deep: #3C6C8C;
  --meadow: #2F6B57;
  --amber: #E7813A;      /* rules and marks ONLY — never body type */
  --amber-deep: #9E5518; /* the text/link warm variant, 5.58:1 on white */

  /* Grounds */
  --white: #FFFFFF;
  --sky-wash: #E8F0F8;
  --sky-tint: #D3E2F0;
  --amber-wash: #FAE4D5;

  /* Neutrals */
  --hairline: #C7D6E4;
  --ink: #2F2F2F;
  --ink-soft: #535353;

  --ridge: linear-gradient(90deg, #174774 0%, #496679 25%, #907154 50%, #E17F2D 75%, #F38128 100%);

  --measure: 68ch;
  --radius: 4px;
}

html { scroll-behavior: smooth; }

body {
  background: var(--white);
  color: var(--ink);
  font-family: "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 1024px) { body { font-size: 19px; } }

/* --- Type roles ---------------------------------------------------------- */
.font-display { font-family: "Jost", ui-sans-serif, system-ui, sans-serif; }
.font-quote   { font-family: "Source Serif 4", Georgia, serif; }

h1, h2, h3, h4 {
  font-family: "Jost", ui-sans-serif, system-ui, sans-serif;
  color: var(--navy);
  font-weight: 500;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.15rem, 5.2vw, 3.6rem); line-height: 1.05; letter-spacing: -0.022em; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1.12; letter-spacing: -0.015em; }
h3 { font-size: clamp(1.2rem, 1.9vw, 1.4rem); line-height: 1.25; letter-spacing: -0.008em; }

p { max-width: var(--measure); }

.kicker {
  font-family: "Jost", sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber-deep);
}
.kicker-light { color: #F0C9A8; }

.lede { font-size: clamp(1.1rem, 1.8vw, 1.32rem); line-height: 1.6; color: var(--ink-soft); }

/* --- Structure ----------------------------------------------------------- */
.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 20px; }
@media (min-width: 768px) { .wrap { padding-inline: 40px; } }

.section { padding-block: clamp(3rem, 5.4vw, 5rem); }
/* A page hero runs pb-0 and lets the next section supply the space. On a white
   ground that reads as a dead band, so close it up; a change of ground keeps
   the full break. */
.section.pb-0 + .section:not(.ground-wash):not(.ground-navy) { padding-top: clamp(1.75rem, 2.6vw, 2.5rem); }
.ground-wash { background: var(--sky-wash); }
.ground-navy { background: var(--navy); color: #E4EAF0; }
.ground-navy h1, .ground-navy h2, .ground-navy h3 { color: #FFFFFF; }
.ground-navy p { color: #C9D5E1; }

.ridge-bar { height: 4px; background: var(--ridge); }

.rule { height: 1px; background: var(--hairline); border: 0; }

/* --- Cards (flat, hairline, no drop shadows) ------------------------------ */
.card {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 1.6rem;
}
.card-warm { background: var(--amber-wash); border-color: #EFD0BA; }
.card h3 { margin-bottom: 0.4rem; }
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 56px;
  padding: 0.85rem 1.75rem;
  font-family: "Jost", sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border-radius: var(--radius);
  border: 1.5px solid var(--navy);
  background: var(--navy);
  color: #FFFFFF;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover, .btn:focus-visible { background: #1B3247; border-color: #1B3247; color: #FFFFFF; }
.btn-secondary { background: transparent; color: var(--navy); }
.btn-secondary:hover, .btn-secondary:focus-visible { background: var(--sky-tint); border-color: var(--navy); color: var(--navy); }
.btn-on-navy { background: #FFFFFF; color: var(--navy); border-color: #FFFFFF; }
.btn-on-navy:hover, .btn-on-navy:focus-visible { background: var(--sky-tint); border-color: var(--sky-tint); color: var(--navy); }
.btn-amber { background: var(--amber); color: #FFFFFF; border-color: var(--amber); }
.btn-amber:hover, .btn-amber:focus-visible { background: #D5722B; border-color: #D5722B; color: #FFFFFF; }
.btn-ghost-light { background: transparent; color: #FFFFFF; border-color: rgba(255,255,255,.6); }
.btn-ghost-light:hover, .btn-ghost-light:focus-visible { background: rgba(255,255,255,.12); border-color: #FFFFFF; color: #FFFFFF; }

a { color: var(--sky-deep); }
a:hover { color: var(--navy); }
a.btn:hover { color: #FFFFFF; } /* text links darken on hover; buttons keep their own colors (overridden per variant below) */

.link-arrow {
  font-family: "Jost", sans-serif;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.9rem;
  color: var(--amber-deep);
  text-decoration: none;
  border-bottom: 1.5px solid var(--amber);
  padding-bottom: 2px;
}
.link-arrow:hover { color: var(--navy); border-color: var(--navy); }

:focus-visible { outline: 3px solid var(--amber-deep); outline-offset: 3px; border-radius: 2px; }

/* --- Photo hero ------------------------------------------------------------ */
.hero-photo { position: relative; isolation: isolate; background: var(--navy); min-height: clamp(34rem, 78vh, 46rem); display: flex; align-items: center; }
.hero-photo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; z-index: -2; }
.hero-photo .lede { color: #E4EAF0; }
.hero-photo a:not(.btn) { color: #FFFFFF; }
@media (min-width: 1536px) { .hero-photo-img { object-position: 70% 50%; } }
.hero-photo-shade { position: absolute; inset: 0; z-index: -1;
  /* A narrower scrim that sits only behind the text column and lets the photo breathe on the right. */
  background: linear-gradient(90deg, rgba(16,32,48,.74) 0%, rgba(16,32,48,.64) 26%, rgba(16,32,48,.38) 46%, rgba(16,32,48,.1) 62%, rgba(16,32,48,0) 74%),
              linear-gradient(180deg, rgba(16,32,48,.18) 0%, rgba(16,32,48,0) 25%, rgba(16,32,48,.22) 100%); }
.hero-photo h1, .hero-photo .lede, .hero-photo .kicker, .hero-photo p { text-shadow: 0 1px 2px rgba(16,32,48,.7), 0 2px 10px rgba(16,32,48,.55), 0 6px 28px rgba(16,32,48,.45); }
.hero-photo h1 { color: #FFFFFF !important; }
.hero-photo h1 span:not(.whitespace-nowrap) { color: #F2A05F; }
.hero-photo-content { position: relative; padding-block: clamp(3.5rem, 8vw, 6.5rem); }
@media (max-width: 767px) {
  .hero-photo-img { object-position: 78% 50%; }
  .hero-photo-shade { background: linear-gradient(180deg, rgba(16,32,48,.42) 0%, rgba(16,32,48,.6) 50%, rgba(16,32,48,.82) 100%); }
}

/* --- Header / nav --------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--navy); border-bottom: 1px solid rgba(255,255,255,.08); }
/* Header lockup: real gradient mountain line + reversed type (the line is never color-filtered) */
.header-logo { display: inline-flex; flex-direction: column; align-items: center; text-decoration: none; line-height: 1; }
.header-logo .mark { display: block; width: 138px; height: auto; margin-bottom: 3px; }
.header-logo .wordmark { font-family: "Jost", sans-serif; font-weight: 500; font-size: 15.5px; letter-spacing: 0.24em; color: #FFFFFF; white-space: nowrap; margin-right: -0.24em; }
.header-logo .descriptor { font-family: "Jost", sans-serif; font-weight: 400; font-size: 8.4px; letter-spacing: 0.36em; color: rgba(255,255,255,.62); white-space: nowrap; margin-top: 5px; margin-right: -0.36em; }
@media (min-width: 768px) {
  .header-logo .mark { width: 162px; }
  .header-logo .wordmark { font-size: 18px; }
  .header-logo .descriptor { font-size: 9.8px; }
}
.nav-row { padding: 1rem 0; }
@media (min-width: 768px) { .nav-row { padding: 1.05rem 0; } }
.nav-link {
  font-family: "Jost", sans-serif;
  font-size: 0.98rem;
  font-weight: 400;
  letter-spacing: 0.015em;
  color: rgba(255,255,255,.86);
  text-decoration: none;
  padding: 0.55rem 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color .15s ease, border-color .15s ease;
}
@media (min-width:1024px) and (max-width:1535px) { .nav-link { font-size: 0.92rem; } }
.nav-link:hover { border-color: rgba(231,129,58,.7); color: #FFFFFF; }
.nav-link[aria-current="page"] { border-color: var(--amber); color: #FFFFFF; font-weight: 500; }
.nav-caret { opacity: .6; }
.nav-link:hover .nav-caret, .nav-menu.is-active > .nav-menu-btn .nav-caret { opacity: 1; }
/* Hairline between the menus and the single CTA */
.primary-nav > .btn-nav { margin-left: .25rem; position: relative; }
@media (min-width: 1024px) { .primary-nav > .btn-nav { margin-left: .5rem; } .primary-nav > .btn-nav::before { content: ""; position: absolute; left: -1.5rem; top: 50%; height: 26px; transform: translateY(-50%); border-left: 1px solid rgba(255,255,255,.16); } }
.site-header .btn { white-space: nowrap; flex-shrink: 0; }
.site-header .btn-nav { min-height: 44px; padding: 0.5rem 1.35rem; font-size: 0.82rem; letter-spacing: 0.1em; }
/* Utility bar above the primary nav: phone, Contact, Member Login (logo-line blue) */
.util-bar { background: #174774; }
.util-bar .wrap { min-height: 40px; }
.util-link { display: inline-flex; align-items: center; gap: .45rem; font-family: "Jost", sans-serif; font-size: 0.76rem; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,.82); text-decoration: none; padding: .2rem 0; white-space: nowrap; transition: color .15s ease; }
.util-link:hover { color: #FFFFFF; text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.util-link[aria-current="page"] { color: #FFFFFF; font-weight: 500; text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.util-phone { letter-spacing: 0.1em; font-variant-numeric: tabular-nums; }
.util-icon { color: #F0B98A; flex-shrink: 0; }
.util-links { gap: 0; }
.util-links > .util-link + .util-link { margin-left: 1.25rem; padding-left: 1.25rem; border-left: 1px solid rgba(255,255,255,.22); }
.util-bar :focus-visible { outline-color: var(--amber); }
.site-header :focus-visible { outline-color: var(--amber); }

/* The theme's .btn sets display:inline-flex, which outranks Tailwind's md:hidden
   on the menu button. Keep the toggle strictly under the md breakpoint. */
@media (min-width: 768px) { #nav-toggle { display: none !important; } }

#mobile-nav[hidden] { display: none; }

/* Header layout, independent of utility classes: the header must lay out
   correctly even if the compiled utility layer is missing on a custom domain. */
.site-header .wrap { width: 100%; }
.site-header .nav-row { display: flex; align-items: center; justify-content: space-between; column-gap: 2rem; }
.site-header .nav-row > a:first-child { flex-shrink: 0; display: inline-block; line-height: 0; }
.site-header .nav-row > a:first-child img { height: 48px; width: auto; max-width: none; display: block; }
@media (min-width: 768px) { .site-header .nav-row > a:first-child img { height: 65px; } }
.site-footer img[alt="Mountain Peaks Family Practice"] { height: 72px; width: auto; display: block; }
@media (min-width: 768px) { .site-footer img[alt="Mountain Peaks Family Practice"] { height: 84px; } }
.site-header .util-bar .wrap { display: flex; align-items: center; justify-content: space-between; column-gap: 1.5rem; }
.site-header .util-links { display: flex; align-items: center; }
#nav-toggle { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 1rem; }
#mobile-nav { display: block; padding-bottom: 1rem; }
#mobile-nav[hidden] { display: none; }
@media (max-width: 767px) {
  .site-header .util-bar { display: none; }
  .site-header .primary-nav { display: none; }
}
@media (min-width: 768px) {
  .site-header .util-bar { display: block; }
  .site-header .primary-nav { display: flex; align-items: center; column-gap: 1.75rem; }
  #nav-toggle { display: none; }
  #mobile-nav { display: none; }
}
@media (min-width: 1024px) {
  .site-header .primary-nav { column-gap: 2.25rem; }
}
#mobile-nav a { display: block; padding: 0.85rem 0; border-bottom: 1px solid rgba(255,255,255,.14); font-family: "Jost", sans-serif; font-size: 1.12rem; color: #FFFFFF; text-decoration: none; }

/* --- Persistent mobile CTA ------------------------------------------------ */
.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--hairline);
  border-top: 1px solid var(--hairline);
}
.mobile-cta a {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 58px; font-family: "Jost", sans-serif; font-size: 1rem; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
}
.mobile-cta .primary { background: var(--navy); color: #fff; }
.mobile-cta .primary:hover { color: #fff; }
.mobile-cta .secondary:hover { color: var(--navy); }
.app-badge:hover { color: #fff; }
.mobile-cta .secondary { background: #fff; color: var(--navy); }
@media (min-width: 768px) { .mobile-cta { display: none; } }
@media (max-width: 767px) { body { padding-bottom: 60px; } }

/* --- Review / placeholder flags ------------------------------------------- */
.ph {
  display: inline-block;
  background: var(--amber-wash);
  border: 1px dashed var(--amber-deep);
  border-radius: 3px;
  padding: 0.05em 0.45em;
  color: var(--amber-deep);
  font-family: "Jost", sans-serif;
  font-weight: 500;
  font-size: 0.92em;
  letter-spacing: .02em;
}
.review-note {
  border-left: 3px solid var(--amber);
  background: var(--amber-wash);
  padding: 1rem 1.25rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.98rem;
  color: #6B3A0F;
  max-width: 72ch;
}
.review-note strong { color: #6B3A0F; }

/* --- Disclosure band ------------------------------------------------------ */
.disclosure {
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--sky-deep);
  background: var(--white);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.15rem 1.4rem;
  font-size: 1rem;
  color: var(--ink-soft);
  max-width: 78ch;
}

/* --- Lists ---------------------------------------------------------------- */
.tick-list { list-style: none; padding: 0; }
.tick-list li { position: relative; padding-left: 1.7rem; margin-bottom: .55rem; max-width: var(--measure); }
.tick-list li:last-child { margin-bottom: 0; }
.tick-list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 12px; height: 2px; background: var(--amber);
}

/* --- FAQ ------------------------------------------------------------------ */
details.faq { border-bottom: 1px solid var(--hairline); padding: 1.15rem 0; }
details.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1.5rem;
  font-family: "Jost", sans-serif; font-size: 1.18rem; font-weight: 500; color: var(--navy);
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--amber-deep); }
details.faq[open] summary::after { content: "\2013"; }
details.faq p, details.faq ul { margin-top: .8rem; color: var(--ink-soft); }

/* --- Media ---------------------------------------------------------------- */
img { max-width: 100%; height: auto; }
.photo { border-radius: var(--radius); border: 1px solid var(--hairline); display: block; width: 100%; object-fit: cover; }

/* --- Forms ---------------------------------------------------------------- */
input, textarea { font-family: inherit; }
input:focus, textarea:focus { border-color: var(--navy); }

/* --- Footer --------------------------------------------------------------- */
.site-footer { background: var(--navy); color: #B9C7D6; }
.site-footer a { color: #DCE5EE; text-decoration: none; }
.site-footer a:hover { color: #FFFFFF; text-decoration: underline; }
.site-footer h4 { color: #FFFFFF; font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; margin-bottom: .9rem; }

/* --- Mobile density (max 767px) -------------------------------------------
   A phone reads the whole site as one column, so the long pages stack to
   several screens of scroll. These rules tighten vertical rhythm and drop
   card chrome below the md breakpoint. No copy is removed and desktop is
   untouched. */
@media (max-width: 767px) {
  .section { padding-block: 2rem; }

  .card { padding: 1.2rem 1.25rem; }

  /* A grid marked .stack-flat becomes a hairline-separated list on a phone:
     same copy, roughly half the height, and it reads as one list instead of
     a column of identical boxes. */
  .stack-flat { gap: 0 !important; }
  .stack-flat > .card {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--hairline);
    border-radius: 0;
    padding: 0.95rem 0;
  }
  .stack-flat > .card:last-child { padding-bottom: 0; }

  .tick-list li { margin-bottom: 0.42rem; }

  /* Authoring flags collapse to one tappable line. main.js closes them under
     this breakpoint; with JS off they simply stay open. */
  details.review-note { padding: 0.7rem 1rem; }
  details.review-note > summary {
    list-style: none;
    cursor: pointer;
    font-family: "Jost", sans-serif;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.8rem;
  }
  details.review-note > summary::-webkit-details-marker { display: none; }
  details.review-note > summary::after { content: " +"; }
  details.review-note[open] > summary::after { content: " \2013"; }
  details.review-note > summary + * { margin-top: 0.6rem; }
}

/* On desktop the flag keeps its original appearance: no summary line, body
   always visible. */
@media (min-width: 768px) {
  details.review-note > summary { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}


/* --- Mountain silhouettes & line icons ---------------------------------- */
.site-footer { background: #182A3C; }
/* Mountain photography: silhouette band above the footer, tinted photo behind the closing CTA */
/* .footer-peaks silhouette band retired Sept 2026: it rendered as a flat dark band above the footer and duplicated the CTA photo. The empty div stays in the markup but paints nothing. */
.footer-peaks { display: none; }
/* Misty ridge photo behind page intros, fading into the page ground */
.intro-peaks { position: relative; isolation: isolate; }
.intro-peaks > .wrap, .intro-peaks > .wrap ~ * { position: relative; z-index: 1; }
.intro-peaks-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(180deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,0) 100%); }
.intro-peaks-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; opacity: .5; filter: saturate(.85); }
@media (max-width:767px) { .intro-peaks-bg img { opacity: .35; } }
.cta-photo { position: relative; isolation: isolate; overflow: hidden; }
.cta-photo > .wrap { position: relative; z-index: 1; }
.cta-photo-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cta-photo-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; filter: saturate(.8); }
.cta-photo-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(24,42,60,.86) 0%, rgba(24,42,60,.74) 55%, rgba(24,42,60,.92) 100%); }
.icon-line { display: block; width: 46px; height: 31px; fill: none; stroke: var(--navy); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon-line.icon-amber { stroke: var(--amber); }
.icon-line.icon-on-navy { stroke: #FFFFFF; }
.icon-line.icon-on-navy.icon-amber { stroke: var(--amber); }

.icon-line.icon-ridge { width: 52px; height: 24px; overflow: visible; }

/* --- What's Included / Pricing: "better than insurance-based primary care" ---
   Three pieces: a proof strip of plain numbers, a two-way comparison table
   (the Mountain Peaks column is the navy one), and included-service tiles
   with the site's single-weight line icons. Flat, hairline, no shadows. */
.proof-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--white); overflow: hidden; }
.proof-strip > div { padding: 1.4rem 1.5rem; border-left: 1px solid var(--hairline); }
.proof-strip > div:first-child { border-left: 0; }
.proof-strip .num { font-family: "Jost", sans-serif; font-weight: 500; font-size: clamp(2.2rem, 3.6vw, 3rem); line-height: 1; color: var(--navy); letter-spacing: -0.02em; }
.proof-strip .num span { color: var(--amber); }
.proof-strip .lbl { margin-top: .55rem; font-size: 1rem; color: var(--ink-soft); max-width: 22ch; }
@media (max-width: 767px) {
  .proof-strip { grid-template-columns: 1fr; }
  .proof-strip > div { border-left: 0; border-top: 1px solid var(--hairline); padding: 1rem 1.2rem; }
  .proof-strip > div:first-child { border-top: 0; }
}

.compare { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; background: #EEF1F4; }
.compare th, .compare td { text-align: left; vertical-align: top; padding: 1.05rem 1.25rem; border-top: 1px solid var(--hairline); }
.compare thead th { border-top: 0; font-family: "Jost", sans-serif; font-weight: 500; font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); padding-block: .95rem; }
.compare th[scope="row"] { font-family: "Jost", sans-serif; font-weight: 500; color: var(--navy); font-size: 1.02rem; width: 22%; }
.compare .was { color: var(--ink-soft); }
.compare thead .was { color: var(--ink-soft); }
.compare .now { background: var(--white); color: var(--navy); font-weight: 600; }
.compare thead .now { color: var(--amber-deep); font-weight: 500; }
.compare .now::before { content: ""; display: inline-block; width: 12px; height: 2px; background: var(--amber); vertical-align: middle; margin-right: .6rem; position: relative; top: -2px; }
.compare thead .now::before { display: none; }
@media (max-width: 767px) {
  .compare, .compare tbody, .compare tr, .compare td, .compare th { display: block; width: auto; }
  .compare thead { display: none; }
  .compare tr { border-top: 1px solid var(--hairline); }
  .compare tr:first-child { border-top: 0; }
  .compare th[scope="row"] { padding-bottom: .35rem; border-top: 0; }
  .compare td { padding-top: .3rem; border-top: 0; }
  .compare td::before { display: block; font-family: "Jost", sans-serif; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .15rem; }
  .compare td.was::before { content: attr(data-label); color: var(--ink-soft); }
  .compare td.now { margin: .4rem 1rem .9rem; padding: .8rem 1rem; border-radius: var(--radius); border: 1px solid var(--hairline); box-shadow: 0 2px 6px rgba(16,32,48,.08); }
  .compare td.now::before { content: attr(data-label); color: var(--amber-deep); }
}

.include-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; }
.include-tile { background: var(--white); padding: 1.4rem 1.4rem 1.5rem; }
.include-tile .icon-line { width: 40px; height: 27px; }
.include-tile h3 { font-size: 1.12rem; margin-top: .9rem; margin-bottom: .3rem; }
.include-tile p { font-size: 1rem; color: var(--ink-soft); margin: 0; }
@media (max-width: 767px) {
  .include-grid { grid-template-columns: 1fr; }
  .include-tile { padding: 1rem 1.1rem 1.1rem; display: grid; grid-template-columns: 40px 1fr; column-gap: .9rem; }
  .include-tile .icon-line { margin-top: .2rem; }
  .include-tile h3 { margin-top: 0; grid-column: 2; }
  .include-tile p { grid-column: 2; }
}

.tick-list li { break-inside: avoid; }
/* Fixes after first render: explicit column counts so no tile cell sits empty;
   mobile comparison rows drop the desktop dash and the 22% header width. */
@media (min-width: 1024px) {
  .include-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
  .include-grid.cols-5 .tile-app { grid-column: span 4; }
  .include-grid.cols-5 .include-tile { padding: 1.2rem 1.1rem 1.3rem; }
  .include-grid.cols-5 .include-tile h3 { font-size: 1.02rem; }
  .include-grid.cols-5 .include-tile p { font-size: .95rem; }
  .include-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 768px) and (max-width: 1023px) { .include-grid { grid-template-columns: repeat(2, 1fr); } .include-grid.cols-5 .tile-app { grid-column: span 1; } }
@media (max-width: 767px) {
  .compare th[scope="row"] { width: auto; }
  .compare td.now::before, .compare td.was::before { width: auto; height: auto; background: none; position: static; margin: 0 0 .15rem; top: 0; vertical-align: baseline; }
}
@media (max-width: 767px) { .compare td.now::before, .compare td.was::before { display: block; } }

/* FAQ section headings carry a line icon */
.faq-head { display: flex; align-items: center; gap: .9rem; }
.faq-head .icon-line { width: 40px; height: 27px; flex-shrink: 0; }
.faq-head h2 { margin: 0; }

/* Medical Services: photo per service instead of a line icon */
.service-card { padding: 0; overflow: hidden; }
.service-row { display: grid; grid-template-columns: 1fr; }
.service-photo { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.service-row > div { padding: 1.6rem; }
@media (min-width: 768px) {
  .service-row { grid-template-columns: 320px 1fr; }
  .service-photo { aspect-ratio: auto; min-height: 100%; }
  .service-row > div { padding: 1.8rem 2rem; align-self: center; }
}
@media (min-width: 1024px) { .service-row { grid-template-columns: 380px 1fr; } }
@media (max-width: 767px) { .service-card { padding: 0; } .service-row > div { padding: 1.2rem 1.25rem 1.4rem; } }

/* Current Patients: portal login sidebar (modelled on the Atlas MD patient login card) */
.portal-card { background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 1.8rem; }
.portal-card .btn { width: 100%; }
.portal-forgot { display: block; margin-top: .9rem; text-align: center; font-size: .98rem; color: var(--sky-deep); }
.portal-links { list-style: none; padding: 0; margin: 0; }
.portal-links li { padding: .6rem 0; border-top: 1px solid var(--hairline); font-size: 1rem; }
.portal-links li:first-child { border-top: 0; padding-top: 0; }
.portal-links a { text-decoration: none; }
.portal-links a:hover { text-decoration: underline; }
@media (max-width: 767px) { .portal-card { padding: 1.25rem; } }

/* Portal login form (Atlas MD-style mockup) */
.portal-form label { display: block; font-family: var(--font-display, "Jost", sans-serif); font-size: .95rem; letter-spacing: .04em; color: var(--navy); margin-bottom: .4rem; }
.portal-form input[type=email], .portal-form input[type=password] { width: 100%; font: inherit; font-size: 1.05rem; padding: .8rem .95rem; border: 1px solid var(--hairline); border-radius: 6px; background: var(--white); color: var(--ink); }
.portal-form input:focus { outline: 2px solid var(--amber); outline-offset: 1px; border-color: var(--amber); }
.portal-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.portal-check { display: inline-flex !important; align-items: center; gap: .5rem; margin: 0 !important; font-size: .95rem !important; letter-spacing: 0 !important; color: var(--ink-soft) !important; cursor: pointer; }
.portal-check input { width: 1.05rem; height: 1.05rem; accent-color: var(--navy); }
.portal-row .portal-forgot { margin-top: 0; }

/* Header pull-down menus */
.nav-menu { position: relative; }
.nav-menu-btn { background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: .45rem; font: inherit; font-family: "Jost", sans-serif; padding-inline: 0; }
.nav-caret { transition: transform .15s ease; }
.nav-menu-btn[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }
.nav-menu.is-active > .nav-menu-btn { border-color: var(--amber); color: #FFFFFF; font-weight: 500; }
.nav-panel { position: absolute; top: calc(100% + 12px); left: -.9rem; min-width: 17rem; margin: 0; padding: .6rem; list-style: none; background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius); display: none; z-index: 60; }
.nav-panel::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.nav-panel::after { content: ""; position: absolute; top: -1px; left: .9rem; right: .9rem; height: 2px; }
.nav-menu.is-open > .nav-panel, .nav-menu:hover > .nav-panel, .nav-menu:focus-within > .nav-panel { display: block; }
.nav-panel a { display: block; padding: .75rem 1rem; border-radius: 6px; font-family: "Jost", sans-serif; font-size: 1rem; color: var(--navy); text-decoration: none; white-space: nowrap; }
.nav-panel a:hover, .nav-panel a:focus-visible { background: var(--sky-wash, #EAF1F7); }
.nav-panel a[aria-current="page"] { font-weight: 500; box-shadow: inset 3px 0 0 var(--amber); }
.nav-menu-btn { line-height: 1.2; }
.nav-menu:last-of-type > .nav-panel { left: auto; right: 0; }

/* Member app promo (Current Patients sidebar) */
.app-promo-head { display: flex; align-items: center; gap: .9rem; }
.app-promo-head .icon-line { width: 44px; flex-shrink: 0; }
.app-promo h3 { font-size: 1.15rem; }
.app-badges { display: flex; gap: .6rem; flex-wrap: wrap; }
.app-badge { display: inline-flex; flex-direction: column; justify-content: center; min-height: 44px; padding: .35rem .85rem; background: var(--navy); color: #fff; border-radius: 6px; text-decoration: none; line-height: 1.1; }
.app-badge-small { font-size: .62rem; letter-spacing: .04em; opacity: .8; }
.app-badge-big { font-family: "Jost", sans-serif; font-weight: 500; font-size: .98rem; }
.app-badge:hover { background: var(--navy-soft, #1f3547); }
.include-tile.tile-app { background: var(--amber-wash); }
@media (min-width: 768px) { .include-grid .tile-app { grid-column: span 2; } }
@media (min-width: 768px) {
  .include-grid .tile-app { grid-column: 1 / -1; display: grid; grid-template-columns: 40px 1fr; column-gap: 1.1rem; align-items: start; }
  .include-grid .tile-app h3 { margin-top: 0; grid-column: 2; }
  .include-grid .tile-app p { grid-column: 2; max-width: 70ch; }
  /* what's-included grid: 11 tiles + app tile = 12 cells, so the app tile fills out the last row */
}

/* Footer legal: copyright left, disclaimers full width beneath in smaller type */
.footer-legal .footer-copy { text-align: left; }
.footer-legal .footer-copy .ph { display: inline-block; margin-top: .35rem; }
.footer-disclaimers { margin-top: 1rem; font-size: .8rem; line-height: 1.55; opacity: .8; max-width: none; }
.footer-disclaimers p { max-width: none; }
.app-promo-photo { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); margin-bottom: 1.1rem; }

/* Member app feature (homepage) */
.app-feature-photo { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--hairline); }
.app-benefits { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.4rem; }
.app-benefits li { display: grid; grid-template-columns: 46px 1fr; column-gap: 1.1rem; align-items: start; }
.app-benefits .icon-line { width: 46px; height: 31px; margin-top: .15rem; }
.app-benefits h3 { font-size: 1.2rem; margin: 0 0 .25rem; }
.app-benefits p { margin: 0; color: var(--ink-soft); }
@media (max-width: 767px) { .app-benefits .icon-line { width: 40px; height: 27px; } }
#mobile-nav .mobile-nav-head { margin: 1.1rem 0 .1rem; font-family: "Jost", sans-serif; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: #F0C9A8; }
#mobile-nav a[aria-current="page"] { color: var(--amber); }

/* ==========================================================================
   MOTION (Sept 2026) — the same light system as the Pentara site, translated
   to this brand: base states are always visible, animation is polish only,
   never a prerequisite for seeing content. Cards stay flat (no drop shadows);
   emphasis comes from a lift, a hairline colour shift and the ridge line.
   ========================================================================== */
:root { --ease-out: cubic-bezier(.22,.7,.28,1); --scroll-progress: 0; }

/* ---------- 1. buttons: lift + soft amber ring pulse on hover ---------- */
.btn, .app-badge, .mobile-cta a {
  transition: background-color .18s ease, color .18s ease, border-color .18s ease,
              transform .25s var(--ease-out), box-shadow .25s ease;
}
@keyframes mp-pulse {
  0%, 100% { transform: translateY(-2px); box-shadow: 0 0 0 0 rgba(231,129,58,.32); }
  50%      { transform: translateY(-2px); box-shadow: 0 0 0 6px rgba(231,129,58,0); }
}
@media (hover:hover) {
  .btn:hover, .app-badge:hover { transform: translateY(-2px); animation: mp-pulse 1.7s ease-in-out infinite; }
  .site-header .btn-nav:hover { animation: none; transform: translateY(-1px); }
}

/* ---------- 2. boxed content shifts slightly on hover ---------- */
.card, .portal-card, .proof-strip > div, .include-tile, details.faq {
  transition: transform .3s var(--ease-out), border-color .3s ease, background-color .3s ease;
}
.card { position: relative; }
/* the mountain line, drawn across the card's foot as it is hovered */
.card::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--ridge); transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease-out); pointer-events: none;
  border-radius: 0 0 var(--radius) var(--radius);
}
@media (hover:hover) {
  section .card:hover, section .portal-card:hover { transform: translateY(-3px); border-color: var(--sky-deep); }
  section .card:hover::after { transform: scaleX(1); }
  .card-warm:hover { border-color: var(--amber); }
  .proof-strip > div:hover, .include-tile:hover { background-color: var(--sky-wash); }
  .include-tile.tile-app:hover { background-color: #F6D8C3; }
  details.faq:hover > summary { color: var(--sky-deep); }
  details.faq summary::after { transition: transform .25s ease, color .2s ease; display: inline-block; }
  details.faq:hover > summary::after { transform: scale(1.25); }

  /* framed photography gets a slow zoom rather than a lift */
  .service-photo, .service-card .service-photo { transition: transform .8s var(--ease-out); }
  .service-card:hover .service-photo { transform: scale(1.04); }
  .photo, .app-feature-photo, .app-promo-photo { transition: filter .5s ease, transform .6s var(--ease-out); }
  .photo:hover, .app-feature-photo:hover, .app-promo-photo:hover { filter: saturate(1.08) brightness(1.03); }

  /* text links: arrow links slide, plain links keep the colour shift */
  .link-arrow { transition: color .2s ease, border-color .2s ease, padding-left .25s var(--ease-out); }
  .link-arrow:hover { padding-left: .35rem; }
  .app-benefits li { transition: transform .3s var(--ease-out); }
  .app-benefits li:hover { transform: translateX(4px); }
  .tick-list li::before { transition: width .25s var(--ease-out); }
  .tick-list li:hover::before { width: 18px; }
}
@media (max-width: 767px) { .stack-flat > .card::after { display: none; } }

/* ---------- 3. navigation: underline grows in, panels fade up ---------- */
.nav-link, .nav-menu-btn { position: relative; }
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--amber); transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--ease-out); opacity: .85;
}
.nav-link:hover { border-color: transparent; }
.nav-link:hover::after { transform: scaleX(1); }
.nav-link[aria-current="page"]::after, .nav-menu.is-active > .nav-menu-btn::after { display: none; }
.nav-link[aria-current="page"]:hover { border-color: var(--amber); }

.nav-panel {
  display: block; opacity: 0; visibility: hidden; transform: translateY(6px); pointer-events: none;
  transition: opacity .18s ease, transform .18s var(--ease-out), visibility .18s;
}
.nav-menu.is-open > .nav-panel, .nav-menu:hover > .nav-panel, .nav-menu:focus-within > .nav-panel {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}
.nav-panel a { transition: background-color .15s ease, padding-left .2s var(--ease-out); }
.nav-panel a:hover { padding-left: 1.2rem; }
.site-footer a { transition: color .15s ease; }

/* ---------- 4. the ridge line builds as the page scrolls ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; z-index: 70; height: 3px; width: 100%;
  background: var(--ridge); transform: scaleX(var(--scroll-progress)); transform-origin: left;
  pointer-events: none;
}

/* ---------- 5. hero and page-intro entrance ----------
   Above the fold the scroll observer never fires, so these rise in on load,
   staggered. Base state is visible: if the animation never runs the hero is
   simply there. */
@keyframes mp-rise    { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes mp-fade-in { from { opacity: 0; transform: scale(1.035); }     to { opacity: 1; transform: none; } }
.hero-photo-img { animation: mp-fade-in 1.4s var(--ease-out) both; }
.hero-photo-content > div > *, .intro-peaks > .wrap > * { animation: mp-rise .7s var(--ease-out) both; }
.hero-photo-content > div > :nth-child(1), .intro-peaks > .wrap > :nth-child(1) { animation-delay: .08s; }
.hero-photo-content > div > :nth-child(2), .intro-peaks > .wrap > :nth-child(2) { animation-delay: .17s; }
.hero-photo-content > div > :nth-child(3), .intro-peaks > .wrap > :nth-child(3) { animation-delay: .26s; }
.hero-photo-content > div > :nth-child(4), .intro-peaks > .wrap > :nth-child(4) { animation-delay: .35s; }
.hero-photo-content > div > :nth-child(5), .intro-peaks > .wrap > :nth-child(5) { animation-delay: .44s; }
.intro-peaks-bg img { animation: mp-fade-in 1.2s var(--ease-out) both; }

/* ---------- 6. reveal on scroll: visible by default, animated once observed ---------- */
.will-reveal { opacity: 1; }
.will-reveal.is-in { animation: mp-rise .7s var(--ease-out) both; }

@media (prefers-reduced-motion: reduce) {
  .scroll-progress { display: none; }
  .btn:hover, .app-badge:hover, section .card:hover, section .portal-card:hover,
  .service-card:hover .service-photo, .app-benefits li:hover { transform: none; }
  .nav-panel { transform: none; }
}

/* Prepay bonus: summit seal burst (Summit Navy mark, flat, no shadow) */
.card-burst { position: relative; padding-left: 10rem; overflow: visible; }
.burst { position: absolute; top: 50%; left: 18px; width: 116px; height: 116px; transform: translateY(-50%) rotate(8deg); }
.burst svg { width: 100%; height: 100%; display: block; }
.burst polygon { fill: var(--navy); }
.burst text { fill: #FFFFFF; font-family: 'Jost', sans-serif; font-weight: 600; font-size: 15px; letter-spacing: 0.08em; }
.burst .burst-big { font-size: 26px; letter-spacing: 0.04em; }
@media (max-width: 639px) {
  .card-burst { padding-left: 1.25rem; padding-top: 3.25rem; }
  .burst { top: -18px; left: 10px; width: 92px; height: 92px; transform: rotate(8deg); }
}

/* Waitlist: embedded Google Form sits inside a white card, edge to edge */
#waitlist { scroll-margin-top: 1rem; }
.card-form { max-width: 720px; padding: 0.75rem; overflow: hidden; }
.card-form > p { padding: 0 1rem 0.75rem; }
.form-embed { position: relative; background: #FFFFFF; border-radius: 8px; }
.form-embed iframe { display: block; width: 100%; border: 0; border-radius: 8px; background: #FFFFFF; margin-top: -0.5rem; }
.wl-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px) { .wl-grid { grid-template-columns: 1fr 1fr; } }
.wl-field label { display: block; font-family: var(--font-display, 'Jost', sans-serif); font-weight: 500; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy); margin-bottom: 0.5rem; }
.wl-field input { display: block; width: 100%; min-height: 52px; padding: 0.75rem 1rem; font: inherit; font-size: 1.05rem; color: var(--ink); background: #FFFFFF; border: 1.5px solid #C9D2DB; border-radius: var(--radius); transition: border-color .15s, box-shadow .15s; }
.wl-field input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(16,32,48,0.15); }
.wl-field input.is-invalid { border-color: #B23A2E; }
.wl-error { margin: 1rem 0 0; color: #B23A2E; font-size: 0.95rem; }
.wl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.75rem; }
.wl-actions .btn { min-width: 220px; }
.wl-thanks { padding: 0.5rem 0; }
.wl-thanks:focus { outline: none; }

/* Waitlist mock form: flat fields on the white card */

/* Legal pages: sticky contents card + long-form body */
.legal-toc ol { list-style: none; padding: 0; margin: 0; counter-reset: toc; }
.legal-toc li { counter-increment: toc; padding: 0.35rem 0; border-bottom: 1px solid var(--hairline); font-size: 0.95rem; }
.legal-toc li:last-child { border-bottom: 0; }
.legal-toc li::before { content: counter(toc, decimal-leading-zero); font-family: 'Jost', sans-serif; font-size: 0.75rem; letter-spacing: 0.12em; color: var(--amber-deep); margin-right: 0.6rem; }
.legal-toc a { color: var(--navy); text-decoration: none; }
.legal-toc a:hover { text-decoration: underline; text-decoration-color: var(--amber); text-underline-offset: 4px; }
.legal-body { max-width: 70ch; }
.legal-sec + .legal-sec { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--hairline); }
.legal-sec h2 { font-size: clamp(1.35rem, 2vw, 1.65rem); scroll-margin-top: 1.5rem; }
.legal-sec p, .legal-sec ul { margin-top: 1rem; line-height: 1.6; }
.legal-sec ul { padding-left: 1.25rem; }
.legal-sec li + li { margin-top: 0.4rem; }
.legal-sec ul { list-style: disc; }

/* Employer legal disclaimer: wider than a standard disclosure, with paragraph rhythm. */
#employer-disclaimer { max-width: none; font-size: 0.95rem; line-height: 1.55; }
#employer-disclaimer p { max-width: none; margin-top: 0.85rem; }
#employer-disclaimer strong { color: var(--navy); }

}