/* ──────────────────────────────────────────────────────────────
   M&L Prodigy Healthcare — site.css
   Editorial layouts, sections, components. Reads tokens.css first.
   ────────────────────────────────────────────────────────────── */

/* === Skip link === */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  background: var(--mlp-ink);
  color: var(--mlp-cream);
  padding: 0.75rem 1.25rem;
  border-radius: var(--r-pill);
  z-index: 10000;
  transition: top var(--d-fast) var(--ease-out);
}
.skip-link:focus { top: 1rem; }

/* === NAV === */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  padding: 1rem 0;
  transition: background-color var(--d-med) var(--ease-out),
              color var(--d-med) var(--ease-out),
              box-shadow var(--d-med) var(--ease-out),
              padding var(--d-med) var(--ease-out);
}
.nav[data-theme="dark"] {
  color: var(--mlp-cream);
  background: linear-gradient(to bottom, rgba(11,42,58,0.55), rgba(11,42,58,0));
}
.nav[data-theme="light"] {
  color: var(--mlp-ink);
  background: rgba(247, 240, 223, 0.96);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  box-shadow: 0 1px 0 0 rgba(11, 42, 58, 0.06);
  padding: 0.5rem 0;
}
.nav__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
}

/* Brand wordmark — emblem + Fraunces italic name + spaced caps tag */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  color: inherit;
  text-decoration: none;
  font-family: var(--mlp-serif);
}
.brand__emblem {
  width: 2.6rem;
  height: 2.6rem;
  color: currentColor;
  flex-shrink: 0;
  transition: transform var(--d-med) var(--ease-out);
}
.brand:hover .brand__emblem { transform: rotate(-3deg); }
.brand__name {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.05rem;
  line-height: 1;
}
.brand__name-word {
  font-family: var(--mlp-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
  font-variation-settings: 'opsz' 120, 'SOFT' 70;
  white-space: nowrap;
}
.brand__name-tag {
  font-family: var(--mlp-sans);
  font-style: normal;
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.78;
}

/* Footer brand — slightly larger and clear */
.brand--footer .brand__emblem { width: 3rem; height: 3rem; }
.brand--footer .brand__name-word { font-size: 1.55rem; }
.brand--footer .brand__name-tag { font-size: 0.68rem; }

.nav__primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  font-family: var(--mlp-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.nav__primary a {
  text-decoration: none;
  position: relative;
  padding: 0.5rem 0;
  transition: color var(--d-fast) var(--ease-out);
}
.nav__primary a::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 0.25rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-fast) var(--ease-out);
}
.nav__primary a:hover::after { transform: scaleX(1); }

.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}
.nav__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  font-family: var(--mlp-sans);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.nav__phone-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--mlp-green);
  box-shadow: 0 0 0 0 var(--mlp-green);
  animation: pulse 2.8s var(--ease-out) infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(63,181,91,0.55); }
  50%      { box-shadow: 0 0 0 8px rgba(63,181,91,0); }
}
.btn--sm { padding: 0.65rem 1.15rem; font-size: 0.9rem; }

.nav__menu-btn {
  display: none;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  background: transparent;
  color: currentColor;
  cursor: pointer;
  padding: 0;
  border-radius: 50%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.32rem;
}
.nav__menu-btn span {
  display: block;
  width: 1.3rem;
  height: 1.5px;
  background: currentColor;
}

@media (max-width: 1020px) {
  .nav__primary, .nav__phone { display: none; }
  .nav__menu-btn { display: inline-flex; }
}

/* Mobile menu open state: always a solid cream panel, whatever the scroll theme */
.nav.nav--open[data-theme] {
  color: var(--mlp-ink);
  background: var(--mlp-cream);
  box-shadow: 0 1.5rem 3rem -1.5rem rgba(11, 42, 58, 0.35);
}
.nav--open .nav__inner { grid-template-rows: auto auto; }
.nav--open .nav__primary {
  display: flex;
  grid-column: 1 / -1;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 0.75rem 0 0.5rem;
  border-top: 1px solid var(--mlp-gray-fine);
  font-size: 1.25rem;
  font-family: var(--mlp-serif);
  font-weight: 400;
}
.nav--open .nav__primary a { padding: 0.7rem 0; width: 100%; }
.nav--open .nav__primary { grid-row: 2; }
.nav--open .nav__cta { display: contents; }
.nav--open .nav__cta .btn--sm { grid-row: 1; grid-column: 2; justify-self: end; }
.nav--open .nav__menu-btn { grid-row: 1; grid-column: 3; }
.nav--open .nav__phone {
  display: inline-flex;
  grid-row: 3;
  grid-column: 1 / -1;
  padding: 0.75rem 0 1rem;
  font-size: 1.05rem;
  border-top: 1px solid var(--mlp-gray-fine);
}
@media (max-width: 480px) {
  .brand__name-tag { display: none; }
  .brand__emblem { width: 2.3rem; height: 2.3rem; }
  .nav__cta .btn--sm { padding: 0.55rem 0.95rem; font-size: 0.85rem; }
}


/* === HERO === */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-items: end;
  color: var(--mlp-cream);
  overflow: hidden;
  isolation: isolate;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}
/* <picture> is a wrapper, not a box. Without display:contents it would sit
   between .hero__media and the image, and the image's height:100% would resolve
   against a element with no height, collapsing the full bleed hero. */
.hero__media picture,
.story__media picture { display: contents; }

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 60% at 30% 80%, rgba(11,42,58,0.85) 0%, rgba(11,42,58,0.3) 60%, rgba(11,42,58,0) 100%),
    linear-gradient(to top, rgba(11,42,58,0.65) 0%, rgba(11,42,58,0.25) 45%, rgba(11,42,58,0.45) 100%);
}

.hero__content {
  padding-block: clamp(7rem, 12vh, 10rem) clamp(4.5rem, 10vh, 8rem);
  position: relative;
  z-index: 1;
}
/* Masked line reveal: each headline line rises out of its own clip on load.
   The mask keeps a little room at the bottom so italic descenders survive. */
.hero__line {
  display: block;
  overflow: hidden;
  padding: 0.04em 0.06em 0.14em 0.02em;
  margin: -0.04em -0.06em -0.14em -0.02em;
}
.js .hero__line > span {
  transform: translateY(110%);
  animation: hero-line 1100ms var(--ease-out-expo) forwards;
  animation-delay: calc(180ms + var(--line, 0) * 110ms);
}
.hero__line:nth-child(2) { --line: 1; }
.hero__line:nth-child(3) { --line: 2; }
@keyframes hero-line { to { transform: translateY(0); } }
.js .hero__eyebrow,
.js .hero__lede,
.js .hero__actions,
.js .hero__signals,
.js .hero__compliance {
  opacity: 0;
  transform: translateY(0.75rem);
  animation: hero-rise 900ms var(--ease-out-expo) forwards;
}
.js .hero__eyebrow    { animation-delay: 80ms; }
.js .hero__lede       { animation-delay: 620ms; }
.js .hero__actions    { animation-delay: 740ms; }
.js .hero__signals    { animation-delay: 860ms; }
.js .hero__compliance { animation-delay: 960ms; }
@keyframes hero-rise { to { opacity: 1; transform: translateY(0); } }
/* One slow settle on the photograph, once. */
.js .hero__media img {
  transform: scale(1.06);
  animation: hero-settle 7s var(--ease-out-expo) forwards;
}
@keyframes hero-settle { to { transform: scale(1); } }
.hero__eyebrow {
  color: var(--mlp-cream);
  opacity: 0.85;
  margin-bottom: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.hero__title {
  font-size: var(--t-hero);
  line-height: 0.94;
  letter-spacing: -0.025em;
  margin: 0 0 1.5rem;
  max-width: 14ch;
  font-weight: 300;
  text-wrap: balance;
}
.hero__title span { display: block; }
.hero__title-accent {
  color: var(--mlp-green);
  font-style: italic;
  font-weight: 400;
}
.hero__lede {
  font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.375rem);
  line-height: 1.5;
  max-width: 38rem;
  margin: 0 0 2.5rem;
  font-weight: 300;
  letter-spacing: -0.005em;
  color: var(--mlp-cream);
  opacity: 0.96;
}
.hero__lede strong { font-weight: 500; }
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin: 0 0 3rem;
}

.hero__signals {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  margin-bottom: 1.25rem;
  font-size: 0.9375rem;
  opacity: 0.82;
}
.hero__signal {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.hero__signal-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--mlp-green);
}
.pulse { animation: pulse 2.8s var(--ease-out) infinite; }
.hero__signal-icon {
  display: inline-flex;
  color: var(--mlp-green);
}

.hero__compliance {
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  opacity: 0.6;
  max-width: 50rem;
  margin: 0;
  line-height: 1.6;
}

.hero__scroll {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--mlp-cream);
  opacity: 0.7;
  z-index: 1;
  animation: bob 2.6s var(--ease-in-out) infinite;
}
@keyframes bob {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 0.5rem); }
}

@media (max-width: 720px) {
  .hero__scroll { display: none; }
  .hero__content { padding-block: 6.5rem 3rem; }
  .hero__lede { font-size: 1.05rem; margin-bottom: 1.75rem; }
  .hero__actions { margin-bottom: 2rem; }
  .hero__actions .btn { width: 100%; justify-content: center; }
  .hero__signals { flex-direction: column; gap: 0.6rem; font-size: 0.875rem; }
  .hero__compliance { font-size: 0.74rem; }
}


/* === BAND (service area) === */
.band {
  background: var(--mlp-ink);
  color: var(--mlp-cream);
  padding: 1.5rem 0;
}
.band__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.85rem 1.5rem;
  text-align: center;
}
.band__eyebrow {
  color: var(--mlp-green);
  margin: 0;
  flex-shrink: 0;
}
.band__regions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  font-family: var(--mlp-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1rem, 0.9rem + 0.3vw, 1.25rem);
  margin: 0;
  letter-spacing: -0.01em;
}
.band__dot {
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: var(--mlp-green);
  display: inline-block;
}


/* === SECTION HEADERS === */
.section-head {
  max-width: 50rem;
  margin: 0 0 4rem;
}
.section-head--narrow { max-width: 38rem; }
.section-head__title {
  font-size: var(--t-h2);
  line-height: 1.02;
  letter-spacing: -0.018em;
  margin: 0.75rem 0 1.5rem;
  color: var(--mlp-ink);
  font-weight: 400;
}
.section-head__title em {
  font-style: italic;
  color: var(--mlp-teal);
}
.section-head__lede {
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.25rem);
  line-height: 1.5;
  color: var(--mlp-gray-warm);
  margin: 0;
  max-width: 36rem;
}


/* === HOW AFC WORKS === */
.services {
  padding: clamp(5rem, 10vh, 8rem) 0;
  background: var(--mlp-cream);
}
/* Four steps fill their own row, so the grid never shows an empty grey cell
   (a 4 item list in a 3 column grid left two cells filled with the gap colour). */
.services .commitments__list { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .services .commitments__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .services .commitments__list { grid-template-columns: 1fr; } }
/* === AFC FEATURE (dark teal dollar amount block) === */
.afc-feature {
  position: relative;
  background: var(--mlp-teal);
  color: var(--mlp-cream);
  padding: clamp(5rem, 10vh, 7.5rem) 0;
  overflow: hidden;
}
.afc-feature__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 70% at 80% 30%, rgba(229,165,58,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 80% 60% at 10% 90%, rgba(11,42,58,0.6) 0%, transparent 70%),
    linear-gradient(160deg, var(--mlp-teal-deep) 0%, var(--mlp-teal) 60%, var(--mlp-ink) 120%);
}
.afc-feature__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
@media (max-width: 980px) {
  .afc-feature__inner { grid-template-columns: 1fr; }
}
.afc-feature__eyebrow { color: var(--mlp-gold); margin: 0 0 1.5rem; }
.afc-feature__amount {
  font-size: clamp(5rem, 4rem + 8vw, 12rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--mlp-gold);
  margin: 0;
  display: flex;
  align-items: baseline;
  font-weight: 400;
}
.afc-feature__currency {
  font-size: 0.5em;
  font-style: italic;
  font-weight: 300;
  margin-right: 0.05em;
  vertical-align: 0.6em;
}
.afc-feature__sub {
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
  font-style: italic;
  color: var(--mlp-cream);
  margin: 0.5rem 0 2rem;
  letter-spacing: -0.01em;
}
.afc-feature__pulse {
  width: min(100%, 26rem);
  height: auto;
  color: var(--mlp-green);
  margin: 0 0 1.75rem;
  overflow: visible;
}
.js .afc-feature__pulse path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 1600ms var(--ease-out-expo) 260ms;
}
.js .reveal.in .afc-feature__pulse path { stroke-dashoffset: 0; }
.afc-feature__amount .serif-display-roman { min-width: 3.1ch; text-align: left; }
.afc-feature__lede {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.55;
  max-width: 36rem;
  margin: 0 0 2rem;
  font-weight: 300;
}
.afc-feature__lede strong { font-weight: 500; color: var(--mlp-cream); }
.afc-feature__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-bottom: 2rem;
}
.afc-feature__fine {
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  opacity: 0.6;
  margin: 0;
  max-width: 38rem;
  line-height: 1.65;
}

.afc-feature__proof {
  display: grid;
  gap: 2rem;
}
.afc-feature__proof-item {
  border-top: 1px solid rgba(247,240,223,0.18);
  padding-top: 1.5rem;
}
.js .reveal .afc-feature__proof-item {
  opacity: 0;
  transform: translateY(0.75rem);
  transition: opacity var(--d-slow) var(--ease-out-expo),
              transform var(--d-slow) var(--ease-out-expo);
}
.js .reveal.in .afc-feature__proof-item { opacity: 1; transform: none; }
.js .reveal.in .afc-feature__proof-item:nth-child(1) { transition-delay: 200ms; }
.js .reveal.in .afc-feature__proof-item:nth-child(2) { transition-delay: 320ms; }
.js .reveal.in .afc-feature__proof-item:nth-child(3) { transition-delay: 440ms; }
.afc-feature__proof-num { min-width: 2.2ch; }
.afc-feature__proof-num {
  font-size: clamp(3rem, 2.5rem + 3vw, 5rem);
  line-height: 1;
  color: var(--mlp-green);
  letter-spacing: -0.03em;
  margin: 0;
  font-weight: 400;
  font-feature-settings: 'tnum';
}
.afc-feature__proof-slash {
  color: var(--mlp-cream);
  opacity: 0.4;
  font-style: italic;
  font-size: 0.7em;
  margin: 0 0.05em;
}
.afc-feature__proof-label {
  font-size: 0.95rem;
  margin: 0.5rem 0 0;
  opacity: 0.82;
  letter-spacing: -0.005em;
}


/* === COMMITMENTS === */
.commitments {
  background: var(--mlp-cream);
  padding: clamp(5rem, 10vh, 8rem) 0;
}
.commitments__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--mlp-gray-fine);
  border: 1px solid var(--mlp-gray-fine);
}
@media (max-width: 980px) { .commitments__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .commitments__list { grid-template-columns: 1fr; } }
.commit {
  background: var(--mlp-cream);
  padding: 2.5rem 2rem;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 1rem;
  transition: background-color var(--d-med) var(--ease-out);
}
.commit:hover { background: var(--mlp-cream-2); }
.commit__num {
  font-size: 2.5rem;
  line-height: 1;
  color: var(--mlp-teal);
  letter-spacing: -0.02em;
  font-weight: 300;
  font-feature-settings: 'tnum';
}
.commit__title {
  font-family: var(--mlp-sans);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0;
  color: var(--mlp-ink);
}
.commit__body {
  font-size: 0.9625rem;
  line-height: 1.6;
  color: var(--mlp-gray-warm);
  margin: 0;
}


/* === STORY === */
.story {
  background: var(--mlp-ink);
  color: var(--mlp-cream);
  padding: clamp(5rem, 10vh, 8rem) 0;
}
.story__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
@media (max-width: 980px) { .story__inner { grid-template-columns: 1fr; } }

.story__media { margin: 0; position: relative; }
.story__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: 0.25rem;
}
.story__cap {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  margin-top: 0.85rem;
  opacity: 0.55;
  font-family: var(--mlp-sans);
}
.story__quote {
  font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 1.5rem 0 1.5rem;
  font-weight: 400;
  color: var(--mlp-cream);
}
.story__quote em {
  color: var(--mlp-gold);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.04em;
}
.story__byline {
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.6;
  margin: 0;
  font-family: var(--mlp-sans);
}

/* — Family stories carousel —
   The photograph stays put and only the quote changes, so the section keeps its
   composure instead of flickering a new face every few seconds. Slides are
   stacked in one grid cell, which lets the tallest quote set the height once and
   stops the layout jumping as they cycle. */
.story__carousel { margin: 1.5rem 0 0; }

.story__slides {
  display: grid;
  align-items: start;
}
.story__slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.6rem);
  transition: opacity var(--d-slow) var(--ease-out-expo),
              transform var(--d-slow) var(--ease-out-expo),
              visibility 0s linear var(--d-slow);
}
.story__slide.is-current {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s, 0s, 0s;
}
.story__slide .story__quote { margin-top: 0; }

.story__disclosure {
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  line-height: 1.5;
  opacity: 0.5;
  margin: 1.25rem 0 0;
  font-family: var(--mlp-sans);
}

.story__controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.75rem 0 2rem;
}
.story__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border-radius: var(--r-pill);
  border: 1.5px solid color-mix(in srgb, var(--mlp-cream) 28%, transparent);
  background: transparent;
  color: var(--mlp-cream);
  cursor: pointer;
  transition: background-color var(--d-fast) var(--ease-out),
              border-color var(--d-fast) var(--ease-out),
              transform var(--d-fast) var(--ease-out);
}
.story__arrow:hover {
  background: color-mix(in srgb, var(--mlp-cream) 12%, transparent);
  border-color: color-mix(in srgb, var(--mlp-cream) 55%, transparent);
}
.story__arrow:active { transform: scale(0.94); }

.story__dots {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.story__dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--mlp-cream) 30%, transparent);
  cursor: pointer;
  transition: width var(--d-med) var(--ease-out-expo),
              background-color var(--d-med) var(--ease-out);
}
.story__dot.is-current {
  width: 1.75rem;
  background: var(--mlp-gold);
}

/* Keyboard focus has to stay obvious on the dark ink panel. */
.story__arrow:focus-visible,
.story__dot:focus-visible {
  outline: 2px solid var(--mlp-gold);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* === LANGUAGES === */
.languages {
  background: var(--mlp-cream);
  padding: clamp(4rem, 7vh, 6rem) 0;
  border-top: 1px solid var(--mlp-gray-fine);
}
.languages__inner { text-align: center; max-width: 50rem; margin: 0 auto; }
.languages__eyebrow { margin-bottom: 1.5rem; }
.languages__list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 2.5rem;
  font-family: var(--mlp-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.25rem, 1rem + 1vw, 2rem);
  letter-spacing: -0.015em;
  color: var(--mlp-teal);
}
.languages__note {
  font-size: 0.95rem;
  color: var(--mlp-gray-warm);
  margin: 0;
  line-height: 1.6;
}


/* === FOOTER === */
.footer {
  background: var(--mlp-ink);
  color: var(--mlp-cream);
  padding-top: clamp(4rem, 8vh, 6rem);
}
.footer__inner {
  display: grid;
  grid-template-columns: 1.3fr 2fr;
  gap: clamp(2rem, 5vw, 5rem);
  padding-bottom: clamp(3rem, 6vh, 5rem);
}
@media (max-width: 880px) { .footer__inner { grid-template-columns: 1fr; } }

.footer__brand .brand { color: var(--mlp-cream); }
.footer__tag {
  font-style: italic;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  margin: 1.5rem 0 0.85rem;
  color: var(--mlp-gold);
  letter-spacing: -0.015em;
  font-weight: 400;
}
.footer__service-area {
  font-size: 0.9375rem;
  opacity: 0.7;
  margin: 0;
  line-height: 1.55;
}

.footer__nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
@media (max-width: 540px) {
  .footer__nav { grid-template-columns: 1fr; }
}
.footer__head {
  font-family: var(--mlp-sans);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--mlp-green);
  margin: 0 0 1.25rem;
}
.footer__nav ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.footer__nav a {
  text-decoration: none;
  color: var(--mlp-cream);
  opacity: 0.85;
  font-size: 0.95rem;
  transition: opacity var(--d-fast) var(--ease-out);
}
.footer__nav a:hover { opacity: 1; }

.footer__legal {
  background: rgba(0,0,0,0.18);
  border-top: 1px solid rgba(247,240,223,0.08);
  padding: 1.5rem 0;
}
.footer__legal-inner {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-size: 0.78rem;
  opacity: 0.65;
  line-height: 1.55;
}
.footer__legal-inner p { margin: 0; max-width: 50rem; }


/* === Focus rings (accessibility) === */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--mlp-gold);
  outline-offset: 3px;
  border-radius: 4px;
}
.form__field:focus-visible { outline-offset: 2px; border-radius: 0.5rem; }

/* === Buttons: the arrow leads when hovered === */
.btn svg { transition: transform var(--d-fast) var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(0) scale(0.985); }
.btn[disabled] { opacity: 0.7; cursor: progress; transform: none; }

/* === Scrollbar, tinted from the palette (WebKit) === */
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--mlp-cream); }
::-webkit-scrollbar-thumb { background: var(--mlp-gray-fine); border: 3px solid var(--mlp-cream); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--mlp-gray-warm); }

/* === Selection === */
::selection {
  background: var(--mlp-gold);
  color: var(--mlp-ink);
}


/* ══════════════════════════════════════════════════════════════
   Merged from the former subpages.css (2026-08-06).
   That file styled the ten subpages deleted in the June 2026
   single page collapse; 56 of its 78 classes had no markup left.
   These are the rules index.html still uses.
   ══════════════════════════════════════════════════════════════ */

/* === Prose — longform body sections === */
.prose {
  padding: clamp(4rem, 8vh, 6.5rem) 0;
  background: var(--mlp-cream);
}
.prose--alt { background: var(--mlp-cream-2); }

.prose__head {
  max-width: 50rem;
  margin: 0 0 3.5rem;
}
.prose__eyebrow {
  color: var(--mlp-green);
  margin: 0 0 1rem;
  display: inline-block;
}

.prose__title {
  font-family: var(--mlp-serif);
  font-weight: 400;
  font-size: var(--t-h2);
  line-height: 1.04;
  letter-spacing: -0.018em;
  margin: 0 0 1.25rem;
  color: var(--mlp-ink);
}

.prose__title em { font-style: italic; color: var(--mlp-teal); }

.prose__lede {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.55;
  color: var(--mlp-gray-warm);
  margin: 0;
  max-width: 38rem;
}

/* === Eligibility checker === */
.eligibility {
  background: var(--mlp-cream-2);
  border-radius: 1rem;
  border: 1px solid var(--mlp-gray-fine);
  padding: clamp(2rem, 4vw, 3rem);
  max-width: 48rem;
  margin: 0 auto;
}
.elig-q {
  display: grid;
  gap: 0.85rem;
  margin: 0 0 2rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--mlp-gray-fine);
}
.elig-q:first-of-type { border-top: 0; padding-top: 0; }
.elig-q__label {
  font-family: var(--mlp-sans);
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 0;
  color: var(--mlp-ink);
  letter-spacing: -0.005em;
}
.elig-q__options { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.elig-q__opt {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.15rem;
  background: var(--mlp-cream);
  border: 1.5px solid var(--mlp-gray-fine);
  border-radius: var(--r-pill);
  font-size: 0.95rem;
  font-family: var(--mlp-sans);
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--d-fast) var(--ease-out),
              background-color var(--d-fast) var(--ease-out),
              color var(--d-fast) var(--ease-out);
}
.elig-q__opt input { position: absolute; opacity: 0; pointer-events: none; }
.elig-q__opt:hover { border-color: var(--mlp-teal); }
.elig-q__opt:active { transform: scale(0.98); }
.elig-q__opt:has(input:focus-visible) { outline: 2px solid var(--mlp-gold); outline-offset: 3px; }
.elig-q__opt:has(input:checked) {
  background: var(--mlp-teal);
  color: var(--mlp-cream);
  border-color: var(--mlp-teal);
}
.eligibility__result {
  margin-top: 1rem;
  padding: 1.5rem 1.5rem 1.25rem;
  border-radius: 0.5rem;
  display: none;
}
.eligibility__result.show { display: block; animation: result-in 480ms var(--ease-out-expo); }
@keyframes result-in {
  from { opacity: 0; transform: translateY(0.6rem); }
  to   { opacity: 1; transform: translateY(0); }
}
.eligibility__result--likely {
  background: var(--mlp-teal);
  color: var(--mlp-cream);
}
.eligibility__result--talk {
  background: var(--mlp-gold);
  color: var(--mlp-ink);
}
.eligibility__result--unlikely {
  background: rgba(184,60,44,0.1);
  border: 1px solid rgba(184,60,44,0.3);
  color: var(--mlp-ink);
}
.eligibility__result h4 {
  font-family: var(--mlp-serif);
  font-weight: 500;
  font-style: italic;
  font-size: 1.5rem;
  margin: 0 0 0.5rem;
}
.eligibility__result p { margin: 0 0 1rem; line-height: 1.55; }

/* === Form === */
.form { display: grid; gap: 1.25rem; max-width: 42rem; }
.form__group { display: grid; gap: 0.5rem; }
.form__group--two { grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 600px) { .form__group--two { grid-template-columns: 1fr; } }
.form__label {
  font-family: var(--mlp-sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--mlp-ink);
  letter-spacing: -0.005em;
}
.form__hint { font-size: 0.78rem; color: var(--mlp-gray-warm); margin: 0; }
.form__field {
  font-family: var(--mlp-sans);
  font-size: 1rem;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--mlp-gray-fine);
  border-radius: 0.5rem;
  background: var(--mlp-cream);
  color: var(--mlp-ink);
  transition: border-color var(--d-fast) var(--ease-out);
}
.form__field:focus {
  border-color: var(--mlp-teal);
  outline: none;
}
textarea.form__field {
  resize: vertical;
  min-height: 7rem;
  font-family: var(--mlp-sans);
}
.form__submit { margin-top: 0.5rem; }

/* Anchor offsets so links land below the sticky nav */
section[id], h2[id] { scroll-margin-top: 6rem; }