/* ============================================================
   RAFA ADULT DAY CARE — MAIN STYLESHEET
   1rem = 10px (html font-size 62.5%)

   RULES
   - Every colour comes from a token in :root. No literal hex/rgba
     anywhere below the token block.
   - Every font-size comes from the 7-step type scale.
   - Every radius comes from a --radius-* token.
   - Every section uses --section-pad for top/bottom rhythm and
     --head-gap for the space under its heading block.
   ============================================================ */

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  /* ---- Raw channels (drive every alpha variant below) ---- */
  --rgb-text: 6, 33, 13;
  --rgb-primary: 187, 216, 126;
  --rgb-white: 255, 255, 255;
  --rgb-black: 0, 0, 0;
  --rgb-overlay: 27, 38, 13;
  --rgb-bg: 248, 255, 231;

  /* ---- Core palette ---- */
  --color-bg: #F8FFE7;
  --color-surface: #F0F7D8;
  /* cream cards / stats band */
  --color-card-bg: #FFFFFF;
  --color-white: #FFFFFF;

  --color-primary: #BBD87E;
  --color-primary-hover: #A9CC63;
  --color-primary-deep: #90BD3E;

  --color-text: #06210D;
  --color-overlay: #1B260D;

  /* ---- Ink on light surfaces ---- */
  --color-text-soft: rgba(var(--rgb-text), 0.85);
  --color-text-muted: rgba(var(--rgb-text), 0.7);
  --color-line: rgba(var(--rgb-text), 0.15);

  /* ---- Ink on dark surfaces ---- */
  --color-on-dark: var(--color-white);
  --color-on-dark-strong: rgba(var(--rgb-white), 0.9);
  --color-on-dark-body: rgba(var(--rgb-white), 0.75);
  --color-on-dark-muted: rgba(var(--rgb-white), 0.72);
  --color-on-dark-faint: rgba(var(--rgb-white), 0.5);
  --color-on-dark-line: rgba(var(--rgb-white), 0.12);
  --color-on-dark-hover: rgba(var(--rgb-white), 0.06);

  /* ---- Primary alphas ---- */
  --color-primary-line: rgba(var(--rgb-primary), 0.4);
  --color-primary-tint: rgba(var(--rgb-primary), 0.14);
  --color-primary-haze: rgba(var(--rgb-primary), 0.35);

  /* ---- Composite backgrounds ---- */
  --gradient-hero: linear-gradient(180deg,
      rgba(var(--rgb-overlay), 0.05) 0%,
      rgba(var(--rgb-overlay), 1) 100%);
  --gradient-fade-bg: linear-gradient(to bottom,
      rgba(var(--rgb-bg), 0) 0%,
      rgba(var(--rgb-bg), 1) 100%);
  --watermark-ink: rgba(var(--rgb-white), 0.18);

  /* ---- Shadows ---- */
  --shadow-nav: 0 0.4rem 2.4rem rgba(var(--rgb-text), 0.18);
  --shadow-drawer: 0 1.2rem 3.2rem rgba(var(--rgb-text), 0.28);
  --shadow-photo: 0 1.5rem 4rem rgba(var(--rgb-text), 0.18);
  --shadow-card: 0 1.2rem 3rem rgba(var(--rgb-text), 0.1);
  --shadow-cta: 0 1.2rem 3rem rgba(var(--rgb-primary), 0.25);
  --shadow-title: 0 0.2rem 2rem rgba(var(--rgb-black), 0.25);

  /* ---- Radii ---- */
  --radius-xs: 0.2rem;
  --radius-sm: 1.6rem;
  --radius-md: 2rem;
  --radius-lg: 2.4rem;
  --radius-xl: 3rem;
  --radius-media: 2rem;
  /* every photo / image frame */
  --radius-pill: 5rem;
  --radius-circle: 50%;

  /* ---- Borders ---- */
  --border-hair: 0.1rem;

  /* ---- Fonts ---- */
  --font-title: "Crimson Text", Georgia, serif;
  --font-body: "Google Sans", "Roboto", -apple-system, sans-serif;

  /* ---- Type scale (no literal font-size elsewhere) ---- */
  --fs-xs: 1.3rem;
  /* fine print — footer legal rows ONLY, never body copy */
  --fs-sm: 1.5rem;
  /* labels, links, small text (floor) */
  --fs-btn: 1.6rem;
  /* button / CTA / pill text */
  --fs-base: 1.7rem;
  /* body text */
  --fs-lg: 2.2rem;
  /* card titles, FAQ question */
  --fs-xl: 3.2rem;
  /* sub-section titles */
  --fs-2xl: 4.5rem;
  /* section titles */
  --fs-3xl: 6.4rem;
  /* hero / display headline */

  /* ---- Layout ---- */
  --container-max: 124rem;
  /* 1240px */
  --container-pad: 2rem;

  /* ---- Vertical rhythm ---- */
  --section-pad: 8rem;
  /* top + bottom of EVERY section */
  --head-gap: 5rem;
  /* space under every section heading block */
  --gap-card: 2rem;
  /* gutter between cards in grids / slider */

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.2s;
  --dur-mid: 0.35s;
}

/* ============================================================
   RESET
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
  /* 1rem = 10px */
  scroll-padding-top: 9rem;
  /* fixed-header clearance for #anchor jumps */
  overflow-x: clip;
  /* clip (not hidden) -> never creates a scroll container,
     so ScrollTrigger measurements stay correct */
}

/* Native smooth scrolling ONLY while JS is not driving the scroll.
   ScrollTrigger measures a trigger by moving the document and reading the
   position back; with CSS scroll-behavior:smooth those internal moves
   animate, so every start/end is measured mid-flight and lands thousands
   of pixels too early. Desktop never showed it because Lenis adds
   .lenis-smooth, which forces scroll-behavior:auto — on touch Lenis does
   not run, so the whole page revealed itself long before it was reached.
   animations.js sets .gsap-ready and smooth-scrolls anchors itself. */
html:not(.gsap-ready) {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-title);
  line-height: 1.2;
}

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

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

ul,
ol {
  list-style: none;
}

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

:focus-visible {
  outline: 0.2rem solid var(--color-primary);
  outline-offset: 0.3rem;
}

/* ============================================================
   SHARED PRIMITIVES
   ============================================================ */

/* Standard section container */
.stats__inner,
.services__container,
.about__container,
.facilities__container,
.location__container,
.crafted__container,
.medicaid__container,
.faq__container,
.founder__container,
.footer__container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* Centered heading block (facilities / location / FAQ) */
.facilities__head,
.location__head,
.faq__head {
  text-align: center;
  margin-bottom: var(--head-gap);
}

.facilities__label,
.location__label,
.faq__label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 1.2rem;
}

.facilities__title,
.location__title,
.faq__title {
  font-family: var(--font-title);
  font-size: var(--fs-2xl);
  font-weight: 600;
  line-height: 1.15;
  color: var(--color-text);
}

.facilities__title em,
.location__title em,
.faq__title em {
  font-style: italic;
}

/* Circle icon chip */
.navbar__cta-icon,
.hero__btn-icon,
.service-card__icon,
.service-card__link-icon,
.about__btn-icon,
.facility-card__icon,
.facility-card__link-icon,
.location__icon,
.location__btn-icon,
.crafted__check,
.crafted__btn-icon,
.medicaid__btn-icon,
.faq-item__icon,
.footer__cta-icon,
.footer__contact-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: var(--radius-circle);
}

/* Pill button base */
.hero__btn,
.about__btn,
.crafted__btn,
.medicaid__btn,
.footer__cta,
.navbar__cta {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  transition: transform var(--dur-fast) ease, background var(--dur-fast) ease,
    box-shadow var(--dur-fast) ease;
}

.hero__btn:hover,
.about__btn:hover,
.crafted__btn:hover,
.medicaid__btn:hover,
.navbar__cta:hover,
.footer__cta:hover {
  transform: translateY(-0.2rem);
}

/* Media frame — every photo on the page gets the same radius */
.about__media,
.crafted__media,
.medicaid__photo {
  border-radius: var(--radius-media);
  overflow: hidden;
}

.about__media img,
.crafted__media img,
.medicaid__photo img {
  border-radius: var(--radius-media);
}

/* pic() prints width/height attributes so the browser can reserve the box
   before the file lands. Both are then definite sizes, which makes the UA
   ignore any aspect-ratio we set — the image just renders at its attribute
   height and goes portrait on a phone. height:auto hands the ratio back. */
.about__media img,
.crafted__media img {
  height: auto;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100dvh;
  padding: 0;
  overflow: hidden;
  display: flex;

  /* Frame morph driver: --hero-t 0 = full-bleed, 1 = inset frame.
     Unitless var interpolates cleanly in GSAP.
     Default 0: the video fills the screen edge to edge and stays there. The
     frame is only ever borrowed on the way out (see animations.js). */
  --hero-t: 0;
  --hero-inset: calc(var(--hero-t) * 2.4rem);
  --hero-radius: calc(var(--hero-t) * var(--radius-lg));
}

.hero__inner {
  position: relative;
  z-index: 3;
  flex: 1;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Video, overlay and watermark all share the same morphing frame box */
.hero__video,
.hero__overlay,
.hero__watermark {
  position: absolute;
  top: var(--hero-inset);
  left: var(--hero-inset);
  width: calc(100% - (var(--hero-inset) * 2));
  height: calc(100% - (var(--hero-inset) * 2));
  border-radius: var(--hero-radius);
}

.hero__video {
  object-fit: cover;
  z-index: 1;
}

.hero__overlay {
  z-index: 2;
  background: var(--gradient-hero);
}

/* Giant "RAFA" watermark: bottom-anchored, sides cropped by the frame */
.hero__watermark {
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
  font-family: var(--font-title);
  font-size: 40vw;
  line-height: 0.68;
  font-weight: 400;
  letter-spacing: 4vw;
  white-space: nowrap;
  color: var(--watermark-ink);
  mix-blend-mode: overlay;
  margin-bottom: -3rem;
  /* sink letters so ONLY the bottom crops off */
}

/* ---------- HERO CONTENT ---------- */
.hero__content {
  position: relative;
  z-index: 4;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  padding: 4rem 2rem 7rem;
}

.hero__title {
  font-family: var(--font-title);
  font-size: var(--fs-3xl);
  font-weight: 600;
  line-height: 1.15;
  color: var(--color-on-dark);
  margin-bottom: 4rem;
  text-shadow: var(--shadow-title);
}

.hero__title em {
  font-style: italic;
  font-weight: 600;
}

.hero__btn {
  gap: 1.2rem;
  padding: 0.6rem 0.6rem 0.6rem 2.8rem;
  font-size: var(--fs-btn);
  font-weight: 700;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  color: var(--color-text);
  background: var(--color-primary);
}

.hero__btn:hover {
  background: var(--color-primary-hover);
}

.hero__btn-icon {
  width: 5rem;
  height: 5rem;
  color: var(--color-on-dark);
  background: var(--color-text);
}

.hero__btn-icon img {
  width: 2.2rem;
  height: auto;
}

/* ============================================================
   NAVBAR (fixed)
   ============================================================ */
.navbar {
  position: fixed;
  top: 2.4rem;
  /* aligns inside the hero rounded frame */
  left: 0;
  right: 0;
  z-index: 100;
  padding: 0 4.4rem;
  transition: top var(--dur-mid) ease, background var(--dur-mid) ease,
    box-shadow var(--dur-mid) ease, padding var(--dur-mid) ease;
}

.navbar.is-scrolled {
  top: 0;
  background: var(--color-text);
  box-shadow: var(--shadow-nav);
  padding: 0 2.4rem;
}

.navbar__inner {
  max-width: 128rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.6rem 0.8rem;
}

.navbar__logo {
  display: flex;
  align-items: center;
}

.navbar__logo-img {
  height: 4rem;
  width: auto;
}

.navbar__menu {
  display: flex;
  gap: 3.2rem;
}

.navbar__menu a {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-on-dark-strong);
  transition: color var(--dur-fast) ease;
}

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

.navbar__cta {
  gap: 1rem;
  padding: 0.6rem 0.6rem 0.6rem 2rem;
  font-size: var(--fs-btn);
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-white);
}

.navbar__cta-icon {
  width: 4rem;
  height: 4rem;
  font-size: var(--fs-base);
  color: var(--color-on-dark);
  background: var(--color-text);
}

/* Hamburger (hidden on desktop) */
.navbar__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  width: 4.4rem;
  height: 4.4rem;
  padding: 1rem;
}

.navbar__toggle span {
  display: block;
  height: 0.25rem;
  width: 100%;
  background: var(--color-on-dark);
  border-radius: var(--radius-xs);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.navbar.is-open .navbar__toggle span:nth-child(1) {
  transform: translateY(0.75rem) rotate(45deg);
}

.navbar.is-open .navbar__toggle span:nth-child(2) {
  opacity: 0;
}

.navbar.is-open .navbar__toggle span:nth-child(3) {
  transform: translateY(-0.75rem) rotate(-45deg);
}

/* ============================================================
   STATS BAR
   ============================================================ */
.stats {
  background: var(--color-bg);
  padding: var(--section-pad) 0;
}

.stats__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.stat {
  text-align: center;
  padding: 0 1rem;
  position: relative;
}

.stat:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: var(--border-hair);
  height: 6rem;
  background: var(--color-line);
}

.stat__num {
  font-family: var(--font-title);
  font-size: var(--fs-3xl);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1;
  margin-bottom: 1.2rem;
}

.stat__label {
  font-size: var(--fs-base);
  color: var(--color-text-muted);
}

/* ============================================================
   SERVICES CAROUSEL (Slick)
   ============================================================ */
.services {
  background: var(--color-text);
  padding: var(--section-pad) 0;
  overflow: hidden;
  /* contain peeking slides, no x-scroll */
}

/* Head: title left, arrows right */
.services__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2.4rem;
  margin-bottom: var(--head-gap);
}

.services__title {
  font-family: var(--font-title);
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-primary);
}

.services__title em {
  font-style: italic;
}

.services__nav {
  display: flex;
  gap: 1.2rem;
  flex-shrink: 0;
}

.services__arrow {
  display: grid;
  place-items: center;
  width: 4.4rem;
  height: 4.4rem;
  font-size: var(--fs-base);
  color: var(--color-primary);
  background: transparent;
  border: var(--border-hair) solid var(--color-primary-line);
  border-radius: var(--radius-circle);
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease,
    border-color var(--dur-fast) ease;
}

.services__arrow:hover,
.services__arrow--next {
  background: var(--color-primary);
  color: var(--color-text);
  border-color: var(--color-primary);
}

.services__arrow--next:hover {
  background: var(--color-primary-hover);
}

/* PRE-INIT ROW — do not delete, this is not cosmetic.
   Until slick runs, the cards are plain block children and stack 4 high, which
   makes this section ~3600px taller than the single row it becomes. Slick
   initialises on DOMContentLoaded, i.e. AFTER the load event, so that collapse
   is a layout shift nothing can prepare for: a reload restores the scroll
   position against the tall page, scroll anchoring then drags the visitor
   thousands of pixels away, and every block below here crosses the viewport
   inside one frame — which an IntersectionObserver never reports, so the
   reveals below stayed invisible until you scrolled off them and back.
   Matching the final row layout up front means there is no shift to survive.
   The `:not()` stops applying the moment slick adds .slick-initialized. */
.services__slider:not(.slick-initialized) {
  display: flex;
  align-items: stretch;
  gap: var(--gap-card);
  overflow: hidden;
}

.services__slider:not(.slick-initialized) > .service-card {
  flex: 0 0 auto;
}

/* Slider spacing (variableWidth: each slide inline-block, sized by card) */
.services__slider .slick-list {
  overflow: visible;
}

.services__slider .slick-slide {
  margin: 0 calc(var(--gap-card) / 2);
}

/* A card carrying a 4:3 photo is taller than an icon card. Slick floats its
   slides, so the shorter ones would keep their own height and the row would
   read as broken. Flex the track instead — the inline widths slick writes for
   variableWidth still apply, flex just stops them shrinking. */
.services__slider .slick-track {
  display: flex;
  align-items: stretch;
}

.services__slider .slick-slide {
  height: auto;
  flex: 0 0 auto;
}

/* Card */
.service-card {
  width: 50rem;
  max-width: 85vw;
  min-height: 40rem;
  /* fixed -> all cards equal height */
  background: var(--color-primary);
  border-radius: var(--radius-md);
  padding: 3.2rem 2.8rem;
  display: flex !important;
  flex-direction: column;
}

.service-card__icon {
  width: 5.6rem;
  height: 5.6rem;
  font-size: var(--fs-lg);
  color: var(--color-primary);
  background: var(--color-text);
  margin-bottom: auto;
  /* push title + link group to the bottom */
}

/* Photo card: a 4:3 image takes the icon chip's place, text sits under it.
   The icon chip pushes the text down with margin-bottom:auto; the media block
   is a real box instead, so the link takes the auto margin to stay pinned. */
.service-card__media,
.facility-card__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 2.4rem;
}

.service-card__media img,
.facility-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-card--media .service-card__link,
.facility-card--media .facility-card__link {
  margin-top: auto;
}

.facility-card--media .facility-card__title {
  margin-top: 0;
}

.service-card__title {
  font-family: var(--font-title);
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.1;
  margin-bottom: 2rem;
}

.service-card__link,
.facility-card__link {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-size: var(--fs-btn);
  font-weight: 600;
  color: var(--color-text);
}

.service-card__link-icon {
  width: 3rem;
  height: 3rem;
  font-size: var(--fs-sm);
  color: var(--color-primary);
  background: var(--color-text);
  transition: transform var(--dur-fast) ease;
}

.service-card__link:hover .service-card__link-icon,
.facility-card__link:hover .facility-card__link-icon {
  transform: translateX(0.3rem);
}

/* ============================================================
   ABOUT
   ============================================================ */
.about {
  background: var(--color-primary);
  padding: var(--section-pad) 0;
}

.about__container {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 6rem;
  align-items: center;
}

.about__media img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.about__label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 1.6rem;
}

.about__title {
  font-family: var(--font-title);
  font-size: var(--fs-2xl);
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-text);
  margin-bottom: var(--head-gap);
}

.about__title em {
  font-style: italic;
}

/* Tabs */
.about__tabs {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3.2rem;
  align-items: start;
}

/* right column: paragraph + button grouped/stacked */
.about__group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.8rem;
}

.about__tablist {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.about__tab {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-text);
  text-align: left;
  padding: 0 0 0.6rem;
  border-bottom: 0.2rem solid transparent;
  transition: opacity var(--dur-fast) ease, border-color var(--dur-fast) ease;
  opacity: 0.4;
}

.about__tab.is-active {
  opacity: 1;
  border-bottom-color: var(--color-text);
}

/* underline is the active indicator — no focus box */
.about__tab:focus,
.about__tab:focus-visible {
  outline: none;
}

.about__panel {
  display: none;
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--color-text-soft);
}

.about__panel.is-active {
  display: block;
}

/* ============================================================
   FACILITIES
   ============================================================ */
.facilities {
  background: var(--color-bg);
  padding: var(--section-pad) 0;
}

.facilities__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-card);
}

.facility-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 3.2rem 2.8rem;
  min-height: 28rem;
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}

.facility-card:hover {
  transform: translateY(-0.4rem);
  box-shadow: var(--shadow-card);
}

.facility-card__icon {
  width: 5.6rem;
  height: 5.6rem;
  font-size: var(--fs-lg);
  color: var(--color-text);
  background: var(--color-primary);
  margin-bottom: auto;
  /* push title + link to the bottom */
}

.facility-card__title {
  font-family: var(--font-title);
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.1;
  margin: 3.2rem 0 1.6rem;
}

.facility-card__link-icon {
  width: 3rem;
  height: 3rem;
  font-size: var(--fs-sm);
  color: var(--color-text);
  background: var(--color-primary);
  transition: transform var(--dur-fast) ease;
}

/* The card's photo set. Never shown in place — the lightbox clones it, which
   is how it inherits the WebP srcset. [hidden] keeps the images off the
   network until the visitor actually opens the gallery. */
.facility-card__gallery {
  display: none;
}

/* Editor-only hint. Without it a card with photos looks identical to one
   without, and the client cannot tell the feature is even there. */
.facility-card__galcount {
  margin-top: 1.2rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-text-muted);
}

/* ============================================================
   LIGHTBOX — facility photo galleries
   Backdrop is a blurred, over-scaled copy of the photo on screen, so the
   frame is always tinted by the picture inside it. Slides cross-fade in
   place rather than sliding: the photos are not one aspect ratio, and a
   translate track makes a portrait shot jump against a landscape one.
   ============================================================ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.4rem;
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease-out);
}

/* .lightbox sets display:flex, which outranks the UA [hidden] rule. */
.lightbox[hidden] {
  display: none;
}

.lightbox.is-open {
  opacity: 1;
}

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: var(--color-overlay);
  overflow: hidden;
}

/* The blurred plate. Scaled past the edges because a blur samples nothing
   outside its own box and would otherwise fade to grey at the border. */
.lightbox__blur {
  position: absolute;
  inset: -10%;
  background-position: center;
  background-size: cover;
  filter: blur(4rem) saturate(1.4);
  transform: scale(1.15);
  opacity: 0.55;
  transition: background-image var(--dur-mid) ease;
}

.lightbox__scrim {
  position: absolute;
  inset: 0;
  background: rgba(var(--rgb-overlay), 0.82);
}

.lightbox__dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: min(112rem, 100%);
  max-height: 100%;
  transform: translateY(1.6rem) scale(0.98);
  transition: transform var(--dur-mid) var(--ease-out);
}

.lightbox.is-open .lightbox__dialog {
  transform: none;
}

.lightbox__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.lightbox__title {
  font-family: var(--font-title);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--color-on-dark);
  line-height: 1.1;
}

.lightbox__close {
  width: 4.8rem;
  height: 4.8rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-lg);
  border-radius: var(--radius-circle);
  color: var(--color-text);
  background: var(--color-primary);
  transition: transform var(--dur-fast) ease, background var(--dur-fast) ease;
}

.lightbox__close:hover {
  background: var(--color-primary-hover);
  transform: rotate(90deg);
}

.lightbox__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  flex: 1 1 auto;
}

.lightbox__track {
  position: relative;
  width: 100%;
  height: min(62vh, 60rem);
  border-radius: var(--radius-media);
  overflow: hidden;
}

.lightbox__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.02);
  transition: opacity var(--dur-mid) var(--ease-out),
    transform var(--dur-mid) var(--ease-out),
    visibility var(--dur-mid);
}

.lightbox__slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.lightbox__slide img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-media);
  box-shadow: var(--shadow-photo);
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 5.6rem;
  height: 5.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-lg);
  border-radius: var(--radius-circle);
  color: var(--color-text);
  background: var(--color-primary);
  transition: background var(--dur-fast) ease, opacity var(--dur-fast) ease;
}

.lightbox__nav:hover {
  background: var(--color-primary-hover);
}

.lightbox__nav--prev {
  left: -2.8rem;
}

.lightbox__nav--next {
  right: -2.8rem;
}

.lightbox__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.lightbox__thumbs {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.lightbox__thumbs::-webkit-scrollbar {
  display: none;
}

.lightbox__thumb {
  width: 8rem;
  height: 5.6rem;
  flex-shrink: 0;
  border-radius: var(--radius-xs);
  overflow: hidden;
  opacity: 0.45;
  outline: var(--border-hair) solid transparent;
  transition: opacity var(--dur-fast) ease, outline-color var(--dur-fast) ease;
}

.lightbox__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lightbox__thumb:hover {
  opacity: 0.8;
}

.lightbox__thumb.is-active {
  opacity: 1;
  outline: 0.2rem solid var(--color-primary);
  outline-offset: 0.2rem;
}

.lightbox__count {
  flex-shrink: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-on-dark-body);
  font-variant-numeric: tabular-nums;
}

/* One photo needs no arrows, no strip and no counter. */
.lightbox--single .lightbox__nav,
.lightbox--single .lightbox__foot {
  display: none;
}

html.is-lightbox-open,
html.is-lightbox-open body {
  overflow: hidden;
}

@media (max-width: 900px) {
  .lightbox {
    padding: 1.6rem;
  }

  .lightbox__title {
    font-size: var(--fs-lg);
  }

  .lightbox__track {
    height: min(56vh, 44rem);
  }

  .lightbox__nav--prev {
    left: 0.8rem;
  }

  .lightbox__nav--next {
    right: 0.8rem;
  }

  .lightbox__nav {
    width: 4.4rem;
    height: 4.4rem;
  }
}

@media (max-width: 480px) {
  /* No room for a filmstrip. The counter is left alone in the row, so centre
     it rather than leaving it stranded in the corner. */
  .lightbox__thumbs {
    display: none;
  }

  .lightbox__foot {
    justify-content: center;
  }

  .lightbox__close {
    width: 4rem;
    height: 4rem;
  }
}

@media (prefers-reduced-motion: reduce) {

  .lightbox,
  .lightbox__dialog,
  .lightbox__slide {
    transition-duration: 0.01ms;
  }

  .lightbox__dialog {
    transform: none;
  }

  .lightbox__slide {
    transform: none;
  }
}

/* ============================================================
   LOCATION / MAP
   Same rhythm as the facilities block: centred head, then a two-column
   body. The map is the wide column because it is the thing being looked
   up; the contact rows read as a single list beside it.
   ============================================================ */
.location {
  background: var(--color-bg);
  padding: var(--section-pad) 0;
}

.location__grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: var(--gap-card);
  align-items: stretch;
}

.location__map {
  position: relative;
  min-height: 44rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
}

.location__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.location__map-empty {
  display: grid;
  place-items: center;
  height: 100%;
  padding: 3.2rem;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* Editor only — rendered by render_location() under EDIT_MODE. An iframe
   swallows every click, so without this the map field could not be selected
   on the page at all. */
.location__map-shield {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  align-content: center;
  padding: 2.4rem;
  cursor: text;
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-white);
  overflow-wrap: anywhere;
  transition: background var(--dur-fast) ease;
}

/* The tint sits on the box itself rather than on a ::before. A positioned
   pseudo-element paints above its parent's own inline text, and pushing it
   back with z-index:-1 would send it behind .location__map — the editable
   node must stay one box with no children for innerHTML to be the value. */
.location__map-shield {
  background: rgba(var(--rgb-overlay), 0.3);
  text-shadow: 0 0.1rem 0.6rem rgba(var(--rgb-overlay), 0.9);
}

.location__map-shield:hover,
.location__map-shield.rafa-editing {
  background: rgba(var(--rgb-overlay), 0.72);
}

.location__map-shield:empty::after {
  content: "Type an address, or paste a Google Maps embed link";
  opacity: 0.85;
}

.location__panel {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 4rem 3.6rem;
}

.location__intro {
  font-size: var(--fs-base);
  color: var(--color-text-muted);
  margin-bottom: 3.2rem;
}

.location__list {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  /* pushes the button to the panel's bottom edge whatever the row count */
  margin-bottom: auto;
}

.location__row {
  display: flex;
  align-items: flex-start;
  gap: 1.6rem;
}

.location__icon {
  width: 4.4rem;
  height: 4.4rem;
  font-size: var(--fs-lg);
  color: var(--color-text);
  background: var(--color-primary);
}

.location__text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

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

.location__value {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

a.location__value {
  transition: color var(--dur-fast) ease;
}

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

.location__btn {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  align-self: flex-start;
  margin-top: 3.2rem;
  padding: 0.8rem 0.8rem 0.8rem 2.8rem;
  font-size: var(--fs-btn);
  font-weight: 600;
  color: var(--color-white);
  background: var(--color-text);
  border-radius: var(--radius-pill);
  transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}

.location__btn:hover {
  transform: translateY(-0.2rem);
  box-shadow: var(--shadow-card);
}

.location__btn-icon {
  width: 4rem;
  height: 4rem;
  font-size: var(--fs-btn);
  color: var(--color-text);
  background: var(--color-primary);
  transition: transform var(--dur-fast) ease;
}

.location__btn:hover .location__btn-icon {
  transform: translateX(0.3rem);
}

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

  .location__map {
    min-height: 34rem;
  }

  .location__panel {
    padding: 3.2rem 2.8rem;
  }
}

@media (max-width: 480px) {
  .location__panel {
    padding: 2.8rem 2rem;
  }

  .location__list {
    gap: 2rem;
  }

  .location__icon {
    width: 4rem;
    height: 4rem;
  }
}

/* ============================================================
   CRAFTED / VALUE
   ============================================================ */
.crafted {
  position: relative;
  padding-bottom: var(--section-pad);
  overflow: hidden;
  background: var(--color-bg);
}

.crafted__band {
  position: relative;
  padding: var(--section-pad) 0 40rem;
  /* tall tail so the green card can overlap into it */
  background: var(--color-text);
}

.crafted__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../images/pexels-jsme-mila-523821574-18459193.jpg") center/cover no-repeat;
}

/* Deep green scrim over the photo. A light wash was tried and washed the
   image out to nothing — the band needs the dark ground for the primary-green
   heading to read. Opacity is editable per section in the admin. */
.crafted__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--color-text);
  opacity: 0.7;
}

.crafted__container {
  position: relative;
  z-index: 2;
}

.crafted>.crafted__container {
  margin-top: -35rem;
  /* card overlaps up into the band's tail padding */
}

/* Top head: title left, intro right */
.crafted__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: start;
  margin-bottom: var(--head-gap);
}

.crafted__title {
  font-family: var(--font-title);
  font-size: var(--fs-2xl);
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-text);
}

.crafted__title em {
  font-style: italic;
}

.crafted__title--light {
  color: var(--color-primary);
}

.crafted__intro {
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--color-on-dark-body);
  max-width: 46rem;
  margin-left: auto;
}

/* Green card */
.crafted__card {
  background: var(--color-primary);
  border-radius: var(--radius-xl);
  padding: 2.4rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

.crafted__media {
  display: flex;
}

.crafted__media img {
  width: 100%;
  aspect-ratio: 1 / 1.1;
  object-fit: cover;
}

.crafted__content {
  padding: 1rem 2rem 1rem 0;
}

.crafted__content .crafted__title {
  font-size: var(--fs-xl);
  margin-bottom: 3rem;
}

/* Checklist */
.crafted__list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 3.2rem;
}

.crafted__list li {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-text);
}

.crafted__check {
  width: 2.4rem;
  height: 2.4rem;
  font-size: var(--fs-sm);
  color: var(--color-primary);
  background: var(--color-text);
}

/* ============================================================
   MEDICAID / MLTC
   ============================================================ */
.medicaid {
  position: relative;
  padding: var(--section-pad) 0;
  background: var(--color-bg);
  overflow: hidden;
  /* clip the glow to THIS section only */
}

/* Soft radial haze behind the photo stack */
.medicaid::before {
  content: "";
  z-index: 0;
  aspect-ratio: 1.5;
  background: radial-gradient(closest-side,
      var(--color-bg) 0%,
      var(--color-bg) 26%,
      var(--color-primary) 44%,
      var(--color-primary-deep) 58%,
      var(--color-primary) 72%,
      var(--color-primary-haze) 84%,
      transparent 96%);
  filter: blur(90px);
  width: 95vw;
  position: absolute;
  bottom: -34vw;
  left: 50%;
  transform: translateX(-50%);
  max-width: 290rem;
  opacity: 0.85;
  pointer-events: none;
}

/* Bottom fade — hides the overflow:hidden clip seam so the glow melts
   into the page background instead of ending on a hard line. */
.medicaid::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22rem;
  z-index: 1;
  pointer-events: none;
  background: var(--gradient-fade-bg);
}

.medicaid__container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.medicaid__stack {
  position: relative;
  width: 100%;
  max-width: 118rem;
  height: 46rem;
  margin-bottom: var(--head-gap);
}

.medicaid__photo {
  position: absolute;
  box-shadow: var(--shadow-photo);
}

.medicaid__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.medicaid__photo--left,
.medicaid__photo--right {
  bottom: 0;
  width: 33rem;
  height: 28rem;
  z-index: 2;
}

.medicaid__photo--left {
  left: 0;
  transform: rotate(-10deg);
}

.medicaid__photo--right {
  right: 0;
  transform: rotate(10deg);
}

.medicaid__photo--center {
  top: 0;
  left: 50%;
  width: 62.5rem;
  height: 40rem;
  transform: translateX(-50%);
  z-index: 3;
}

.medicaid__content {
  position: relative;
  z-index: 4;
  text-align: center;
}

.medicaid__title {
  font-family: var(--font-title);
  font-size: var(--fs-2xl);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text);
  margin-bottom: 2.4rem;
}

.medicaid__title em {
  font-style: italic;
}

/* ============================================================
   FAQ / ACCORDION
   ============================================================ */
.faq {
  position: relative;
  background: var(--color-bg);
  padding: var(--section-pad) 0;
  z-index: 1;
}

.faq__list {
  max-width: 72rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.faq-item {
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: background 0.3s ease;
}

.faq-item__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 2.2rem 2.4rem;
  text-align: left;
  font-family: var(--font-title);
}

.faq-item__q {
  font-family: var(--font-title);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.3;
}

.faq-item__icon {
  width: 3.4rem;
  height: 3.4rem;
  background: var(--color-primary);
  color: var(--color-text);
  font-size: var(--fs-base);
  transition: transform var(--dur-mid) ease, background 0.3s ease;
}

.faq-item.is-open .faq-item__icon {
  transform: rotate(45deg);
  /* + reads as × / close */
}

/* Collapsible body — grid-rows trick = smooth height with unknown content */
.faq-item__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s ease;
}

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

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

.faq-item__body-inner p {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--color-text-muted);
  padding: 0 2.4rem 2.4rem;
  max-width: 58rem;
}

/* ============================================================
   FOUNDER STORY
   Three stacked planes: the dark band, the cut-out portrait that
   breaks out of the band's top edge, and the primary-green copy
   card overlapping the band's bottom edge.
   ============================================================ */
.founder {
  position: relative;
  background: var(--color-bg);
  padding: var(--section-pad) 0;
  z-index: 1;
}

.founder__head {
  max-width: 64rem;
  margin-bottom: var(--head-gap);
}

.founder__label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 1.2rem;
}

.founder__title {
  font-family: var(--font-title);
  font-size: var(--fs-2xl);
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-text);
}

.founder__title em {
  font-style: italic;
}

.founder__stage {
  position: relative;
}

/* overflow stays visible on purpose — the portrait rises out of the top */
.founder__band {
  position: relative;
  z-index: 1;
  min-height: 38rem;
  display: flex;
  align-items: center;
  padding: 5rem clamp(2.4rem, 5vw, 7rem);
  background: var(--color-text);
}

.founder__identity {
  position: relative;
  z-index: 3;
}

.founder__name {
  font-family: var(--font-title);
  font-size: var(--fs-2xl);
  font-weight: 600;
  line-height: 1.1;
  color: var(--color-primary);
}

.founder__role {
  font-family: var(--font-title);
  font-style: italic;
  font-size: var(--fs-lg);
  line-height: 1.4;
  color: var(--color-primary);
}

/* Bottom-locked to the band, taller than it, so the head clears the edge.
   object-fit:contain keeps the cut-out whole at every width — a cover crop
   would slice the top of the head off the moment the box narrows. */
.founder__photo {
  position: absolute;
  right: 12%;
  bottom: 0;
  z-index: 2;
  width: 40%;
  max-width: 46rem;
  height: calc(100% + 11rem);
  pointer-events: none;
}

.founder__photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
}

.founder__card {
  position: relative;
  z-index: 3;
  width: 73%;
  margin: -4rem 0 0 13.5%;
  padding: 4rem;
  background: var(--color-primary);
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.founder__card p {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--color-text);
}

.founder__card strong {
  font-weight: 700;
}

/* ============================================================
   FOOTER / CONTACT
   ============================================================ */
.footer {
  background: var(--color-text);
  color: var(--color-on-dark);
  padding: var(--section-pad) 0 3rem;
}

.footer__top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 4rem;
  padding-bottom: 4rem;
  border-bottom: var(--border-hair) solid var(--color-on-dark-line);
}

.footer__brand {
  max-width: 42rem;
}

.footer__logo {
  height: 4.4rem;
  width: auto;
  margin-bottom: 2rem;
}

/* Footer runs one step down the scale from the page body — it is
   reference material, not reading matter, and at --fs-base the
   contact block dominated the phone viewport. */
.footer__tagline {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--color-on-dark-body);
}

.footer__cta {
  flex-shrink: 0;
  gap: 1.2rem;
  background: var(--color-primary);
  color: var(--color-text);
  font-size: var(--fs-btn);
  font-weight: 600;
  padding: 1rem 1rem 1rem 2.4rem;
}

.footer__cta:hover {
  box-shadow: var(--shadow-cta);
}

.footer__cta-icon {
  width: 3.6rem;
  height: 3.6rem;
  background: var(--color-text);
  color: var(--color-on-dark);
  font-size: var(--fs-base);
}

/* --- Middle: link + contact columns --- */
.footer__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  gap: 4rem;
  padding: var(--head-gap) 0;
}

.footer__heading {
  font-family: var(--font-title);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 1.6rem;
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.footer__links a {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--color-on-dark-muted);
  transition: color var(--dur-fast) ease, padding-left var(--dur-fast) ease;
}

.footer__links a:hover {
  color: var(--color-on-dark);
  padding-left: 0.4rem;
}

.footer__contact {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
}

.footer__contact li {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--color-on-dark-muted);
}

.footer__contact a {
  color: var(--color-on-dark-muted);
  transition: color var(--dur-fast) ease;
}

.footer__contact a:hover {
  color: var(--color-on-dark);
}

.footer__contact-icon {
  width: 3.2rem;
  height: 3.2rem;
  background: var(--color-primary-tint);
  color: var(--color-primary);
  font-size: var(--fs-sm);
}

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-top: 3rem;
  border-top: var(--border-hair) solid var(--color-on-dark-line);
}

.footer__copy,
.footer__note {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--color-on-dark-faint);
}

/* ============================================================
   SCHEDULE-A-TOUR BUTTONS — unified treatment
   Dark pill, primary circle + dark arrow, uppercase like the hero.
   ============================================================ */
.about__btn,
.crafted__btn,
.medicaid__btn {
  gap: 1.2rem;
  padding: 0.6rem 0.6rem 0.6rem 2.8rem;
  font-size: var(--fs-btn);
  font-weight: 700;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  color: var(--color-on-dark);
  background: var(--color-text);
}

.about__btn-icon,
.crafted__btn-icon,
.medicaid__btn-icon {
  width: 5rem;
  height: 5rem;
  font-size: var(--fs-base);
  color: var(--color-text);
  background: var(--color-primary);
}

.about__btn-icon img,
.crafted__btn-icon img,
.medicaid__btn-icon img {
  width: 2.2rem;
  height: auto;
}

/* ============================================================
   GSAP SCROLL ANIMATIONS
   Hidden states apply ONLY while .anim-armed is set (added in
   <head> before first paint, removed the moment GSAP takes over
   or if GSAP is unavailable) -> content can never stay stuck.
   ============================================================ */

/* Smooth-scroll: let Lenis own the scroll position */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

/* Pre-paint hidden state, set by the inline <head> script that also owns the
   fallback reveal engine — so the code that clears this can never fail to
   arrive. GSAP removes .anim-armed entirely and drives its own inline
   opacity instead. */
.anim-armed [data-reveal],
.anim-armed [data-stagger]>*,
.anim-armed [data-bloom]>*,
.anim-armed .hero__title,
.anim-armed .hero__btn,
.anim-armed .services__slider {
  opacity: 0;
}

/* CSS reveal — used only when GSAP is not the one driving. The observer adds
   .anim-in the moment a block enters the viewport; nothing here is timed. */
.anim-armed .anim-y {
  transform: translate3d(0, 3.4rem, 0);
}

.anim-armed .anim-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s linear, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Already scrolled past on arrival: it has no reveal to give, so show it flat. */
.anim-armed .anim-now {
  transition: none;
}

/* Bleed + clip so parallax shift never reveals an edge gap */
.gsap-ready [data-parallax] {
  overflow: hidden;
}

.gsap-ready [data-parallax] img {
  transform: translateZ(0);
  scale: 1.16;
}

/* Touch devices run no parallax tween, so the bleed headroom that hides
   the shift would only crop the photo for nothing. */
.gsap-ready.no-parallax [data-parallax] img {
  scale: 1;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 992px) {
  .hero__title {
    font-size: var(--fs-2xl);
  }

  /* Hamburger appears, desktop CTA hides, menu -> mobile drawer */
  .navbar__toggle {
    display: flex;
  }

  .navbar__cta {
    display: none;
  }

  .navbar__inner {
    position: relative;
  }

  .navbar__menu {
    position: absolute;
    top: calc(100% + 1rem);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--color-text);
    border-radius: var(--radius-sm);
    padding: 1rem 0;
    box-shadow: var(--shadow-drawer);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-1rem);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
  }

  .navbar.is-open .navbar__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .navbar__menu a {
    padding: 1.4rem 2.4rem;
    font-size: var(--fs-base);
  }

  .navbar__menu a:hover {
    background: var(--color-on-dark-hover);
  }
}

@media (max-width: 768px) {

  /* Single lever for the whole page rhythm */
  :root {
    --section-pad: 5rem;
    --head-gap: 3.2rem;
    --gap-card: 1.6rem;
  }

  /* Full-bleed hero: no frame padding, no radius, edge-to-edge */
  .hero__inner {
    border-radius: 0;
  }

  .hero__video,
  .hero__overlay,
  .hero__watermark {
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
  }

  .navbar,
  .navbar.is-scrolled {
    top: 0;
    padding: 0 1.2rem;
  }

  .navbar__inner {
    padding: 1rem 1.2rem;
  }

  .hero__title {
    font-size: var(--fs-2xl);
  }

  .stats__inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem 2rem;
  }

  /* No vertical dividers in a 2-col grid */
  .stat:not(:last-child)::after {
    display: none;
  }

  .stat__num {
    font-size: var(--fs-2xl);
    margin-bottom: 0.6rem;
  }

  .stat__label {
    font-size: var(--fs-sm);
    text-wrap: balance;
  }

  .services__head {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .services__title,
  .service-card__title {
    font-size: var(--fs-xl);
  }

  .about__container {
    grid-template-columns: 1fr;
    gap: 3.2rem;
  }

  .about__title {
    font-size: var(--fs-xl);
  }

  .about__tabs {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .about__tablist {
    flex-direction: row;
    gap: 2.4rem;
  }

  /* All section titles shrink together @768 -> consistent.
     NOTE: .faq__title is grouped here too because both base rules
     now live in the shared primitives block above this media query. */
  .facilities__title,
  .location__title,
  .faq__title,
  .medicaid__title,
  .founder__title,
  .facility-card__title {
    font-size: var(--fs-xl);
  }

  .facilities__grid {
    grid-template-columns: 1fr;
  }

  .crafted__band {
    padding: var(--section-pad) 0 15rem;
  }

  .crafted>.crafted__container {
    margin-top: -12rem;
  }

  .crafted__head {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .crafted__intro {
    margin-left: 0;
    max-width: none;
  }

  .crafted__card {
    grid-template-columns: 1fr;
    gap: 3rem;
    padding: 1.6rem;
  }

  .crafted__media img {
    aspect-ratio: 4 / 3;
  }

  .crafted__content {
    padding: 0 1rem 1rem;
  }

  .crafted__title,
  .crafted__content .crafted__title {
    font-size: var(--fs-lg);
  }

  /* Natural flow on mobile — the hard breaks are composed for a wide
     measure and on a phone they orphan single words ("For" alone on
     its own line). Let the text wrap to the column instead. */
  .hero__title br,
  .services__title br,
  .about__title br,
  .facilities__title br,
  .location__title br,
  .crafted__title br,
  .medicaid__title br,
  .faq__title br,
  .founder__title br,
  .ctaband__title br,
  .richtext__title br {
    display: none;
  }

  /* Portrait 3:4 on a phone — the stack is taller than it is wide there, and
     a landscape crop of a standing person loses the head and the feet. */
  .medicaid__stack {
    max-width: 40rem;
    height: 24rem;
  }

  .medicaid__photo--left,
  .medicaid__photo--right {
    width: 10.5rem;
    height: 14rem;
  }

  .medicaid__photo--center {
    width: 18rem;
    height: 24rem;
  }
}

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

  .footer__col--contact {
    grid-column: 1 / -1;
  }

  /* Founder: the band stops being a stage. Name on top, portrait under it,
     card full width — the absolute overhang needs room the phone has not got. */
  .founder__band {
    display: block;
    min-height: 0;
    padding: 4rem clamp(2rem, 5vw, 4rem) 0;
  }

  /* Full width of the band on a phone. The cap only bites on a tablet, where
     100% of a 700px band would be a 700px-tall head-and-shoulders. */
  .founder__photo {
    position: static;
    width: 100%;
    max-width: 44rem;
    height: auto;
    margin: 1.6rem auto 0;
  }

  .founder__photo img {
    height: auto;
  }

  .founder__card {
    width: 100%;
    margin: -3rem 0 0;
    padding: 3rem 2.4rem;
  }
}

@media (max-width: 640px) {
  .footer__top {
    flex-direction: column;
    align-items: flex-start;
    gap: 2.5rem;
  }

  .footer__grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .footer__col--contact {
    grid-column: auto;
  }

  /* Stacked fine print reads better centred than ragged against the edge */
  .footer__bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.8rem;
  }

  .footer__legal {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .hero__title {
    font-size: var(--fs-xl);
  }

  .stats__inner {
    gap: 3rem 2rem;
  }

  .faq-item__head {
    padding: 1.8rem;
  }

  .faq-item__q {
    font-size: var(--fs-base);
  }

  .faq-item__body-inner p {
    padding: 0 1.8rem 2rem;
  }

  .founder__name {
    font-size: var(--fs-xl);
  }

  .founder__role {
    font-size: var(--fs-base);
  }
}

/* ============================================================
   CMS ADDITIONS
   Everything below supports the admin-driven markup: inline SVG
   icons, responsive <picture>, the legal pages, footer legal /
   social rows, and the two generic sections the editor can add.
   Tokens only — same rules as above.
   ============================================================ */

/* ---- Inline SVG icons (replaced the Phosphor webfont) ------ */
svg.ph {
  width: 1em;
  height: 1em;
  fill: currentColor;
  flex-shrink: 0;
  display: block;
}

/* <picture> must not become a layout box of its own */
picture {
  display: contents;
}

/* ---- Hero video: poster first, video fades in when ready --- */
.hero__video {
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease-out);
}

.hero__video.is-playing {
  opacity: 1;
}

/* the poster attribute paints immediately, so there is no gap */
.hero__video[poster] {
  opacity: 1;
}

/* ---- Footer: legal links + social row ---------------------- */
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  font-size: var(--fs-xs);
}

.footer__legal a {
  color: var(--color-on-dark-faint);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

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

.footer__social {
  display: flex;
  gap: 1rem;
  list-style: none;
  margin-top: 2rem;
}

.footer__social a {
  width: 4rem;
  height: 4rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-circle);
  background: var(--color-primary-tint);
  color: var(--color-primary);
  font-size: var(--fs-btn);
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.footer__social a:hover {
  background: var(--color-primary);
  color: var(--color-text);
}

/* ---- Generic rich-text section ----------------------------- */
.richtext {
  padding: var(--section-pad) 0;
  background: var(--color-bg);
}

.richtext__container {
  max-width: 84rem;
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.richtext__title {
  font-family: var(--font-title);
  font-size: var(--fs-2xl);
  line-height: 1.1;
  margin-bottom: var(--head-gap);
}

.richtext__title em {
  font-style: italic;
  color: var(--color-primary-deep);
}

.richtext__body {
  font-size: var(--fs-base);
  color: var(--color-text-soft);
}

.richtext__body h2,
.richtext__body h3 {
  font-family: var(--font-title);
  margin: 4rem 0 1.6rem;
  color: var(--color-text);
}

.richtext__body h2 { font-size: var(--fs-xl); }
.richtext__body h3 { font-size: var(--fs-lg); }
.richtext__body p  { margin-bottom: 2rem; }

.richtext__body ul,
.richtext__body ol {
  margin: 0 0 2rem 2.4rem;
}

.richtext__body li { margin-bottom: 1rem; }

.richtext__body a {
  color: var(--color-primary-deep);
  text-underline-offset: 0.3rem;
}

/* ---- Generic CTA band -------------------------------------- */
.ctaband {
  padding: var(--section-pad) 0;
  background: var(--color-primary);
}

.ctaband__container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 2.4rem;
}

.ctaband__title {
  font-family: var(--font-title);
  font-size: var(--fs-2xl);
  line-height: 1.1;
  max-width: 80rem;
}

.ctaband__title em {
  font-style: italic;
}

.ctaband__text {
  font-size: var(--fs-base);
  color: var(--color-text-soft);
  max-width: 64rem;
}

.ctaband__btn {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  padding: 0.8rem 0.8rem 0.8rem 2.8rem;
  border-radius: var(--radius-pill);
  background: var(--color-text);
  color: var(--color-white);
  font-size: var(--fs-btn);
  text-decoration: none;
}

.ctaband__btn-icon {
  width: 4.4rem;
  height: 4.4rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-circle);
  background: var(--color-primary);
  color: var(--color-text);
  font-size: var(--fs-btn);
}

/* ---- Legal pages (terms / privacy) ------------------------- */
.page-legal {
  background: var(--color-bg);
}

.legal {
  padding: calc(var(--section-pad) + 8rem) 0 var(--section-pad);
}

.legal__container {
  max-width: 82rem;
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.legal__crumbs {
  display: flex;
  gap: 0.8rem;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-bottom: 2.4rem;
}

.legal__crumbs a {
  color: var(--color-primary-deep);
  text-decoration: none;
}

.legal__title {
  font-family: var(--font-title);
  font-size: var(--fs-2xl);
  line-height: 1.1;
  margin-bottom: 1.2rem;
}

.legal__updated {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--head-gap);
  padding-bottom: 2.4rem;
  border-bottom: var(--border-hair) solid var(--color-line);
}

.legal__body {
  font-size: var(--fs-base);
  color: var(--color-text-soft);
}

.legal__body h2,
.legal__body h3 {
  font-family: var(--font-title);
  color: var(--color-text);
  margin: 4rem 0 1.6rem;
}

.legal__body h2 { font-size: var(--fs-xl); }
.legal__body h3 { font-size: var(--fs-lg); }
.legal__body p  { margin-bottom: 2rem; }

.legal__body ul,
.legal__body ol {
  margin: 0 0 2rem 2.4rem;
}

.legal__body li { margin-bottom: 1rem; }

.legal__body a {
  color: var(--color-primary-deep);
  text-underline-offset: 0.3rem;
}

.legal__body table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2rem;
  font-size: var(--fs-sm);
}

.legal__body th,
.legal__body td {
  padding: 1.2rem;
  border-bottom: var(--border-hair) solid var(--color-line);
  text-align: left;
}

@media (max-width: 768px) {
  .richtext__title,
  .ctaband__title,
  .legal__title {
    font-size: var(--fs-xl);
  }

  .legal {
    padding: calc(var(--section-pad) + 6rem) 0 var(--section-pad);
  }
}

/* Solid base under the hero video.
   Keeps the hero looking intentional in the moments before the video
   decodes, and when no poster has been set yet. */
.hero {
  background-color: var(--color-overlay);
}