/* ============================================================
   PCC 2026 — patientchoicecoalition.com rebuild (dev: pcc26)
   Design: faithful to the production WordPress site (light hero,
   red band, Archivo type, red/white/black palette) rebuilt as
   clean hand-written HTML/CSS — no WordPress.
   Motion: GSAP ScrollSmoother/SplitText system (js/main.js) with
   eases sampled from apeel.com's source:
     text (0.45,0,0,1) · peek (0.35,0,0.07,1)
     btn-in (0.36,0,0,1) / btn-out (0.5,0,0.25,1)
   ============================================================ */

:root {
  --canvas: #ffffff;
  --canvas-soft: #f1f1f1;
  --contrast: #111111;
  --red: #ff0000;
  --red-deep: #a30000;
  --pink: #ffc9c9;
  --gray: #686868;
  --gray-light: #eaeaea;
  --cream-text: #faf3ea;
  --grad-snow: linear-gradient(0deg, #ffffff 0%, #f1f1f1 100%);
  --radius-pill: 100px;
  --font-display: "Archivo Black", "Archivo", sans-serif;
  --font-body: "Archivo", sans-serif;
  --ease-text: cubic-bezier(0.45, 0, 0, 1);
  --ease-peek: cubic-bezier(0.35, 0, 0.07, 1);
  --ease-btn-in: cubic-bezier(0.36, 0, 0, 1);
  --ease-btn-out: cubic-bezier(0.5, 0, 0.25, 1);
}

html { font-size: clamp(12px, 1.05vw, 17px); }
@media (max-width: 767px) {
  html { font-size: clamp(14px, 4.2667vw, 22px); }
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
a, button {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
:focus:not(:focus-visible) { outline: none; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--contrast);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.wrap { width: min(80rem, 100% - 3rem); margin-inline: auto; }

/* ---------- animation initial states (only when JS+GSAP active) ---------- */
.has-anim [data-split],
.has-anim [data-rise],
.has-anim .hero h1 { visibility: hidden; }
.has-anim #nav { transform: translateY(-101%); }

/* ---------- hover underline (origin-flip) ---------- */
.u-line {
  position: relative;
  display: inline-block;
  text-decoration: none;
}
.u-line::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.05em;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease-btn-out);
}
.u-line:hover::after {
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 0.5s var(--ease-btn-in);
}

/* ---------- buttons ---------- */
.btn,
.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-pill);
  background: var(--red);
  color: #fff !important;
  font-weight: 500;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background 0.5s var(--ease-btn-in), transform 0.5s var(--ease-btn-in);
}
.btn { padding: 0.8rem 1.8rem; font-weight: 700; font-size: 1rem; }
.btn:hover, .btn-pill:hover { background: var(--red-deep); transform: translateY(-2px); }

/* ---------- Nav: production layout — logo left, links right, red pill CTA;
   fixed with hide-on-scroll-down behavior ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(17, 17, 17, 0.06);
}
.nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 4.6rem;
}
.nav__logo img { height: 2.6rem; width: auto; }
.nav__links {
  display: flex;
  align-items: center;
  gap: 1.7rem;
}
.nav__links a:not(.btn-pill) {
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--contrast);
}
.nav__toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0.4rem;
}
.nav__toggle span {
  display: block;
  width: 22px; height: 2px;
  background: var(--contrast);
  margin: 5px 0;
  transition: transform 0.4s var(--ease-peek), opacity 0.3s;
}

/* ---------- Hero: production layout — light gradient, headline left,
   states collage right ---------- */
.hero {
  background: var(--grad-snow);
  padding: 9rem 0 2rem;
  min-height: min(80svh, 46rem);
  display: flex;
  align-items: center;
  overflow: clip; /* the collage intentionally bleeds past the edges, like production */
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 3rem;
  align-items: center;
}
.hero__copy { position: relative; z-index: 2; }
.hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 4.6vw, 4.6rem);
  line-height: 0.92;
  letter-spacing: -0.01em;
  margin: 0 0 2rem;
}
.hero h1 strong { color: var(--red); font-weight: inherit; }
.hero__social {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 1rem 0.45rem 0.45rem;
  border-radius: var(--radius-pill);
  background: var(--contrast);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 400;
  text-decoration: none;
  transition: background 0.5s var(--ease-btn-in);
}
.hero__social .ico {
  width: 1.7rem; height: 1.7rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.hero__social:hover { background: var(--red); }
/* production sizing: image ~185% of its column, pulled up toward the nav
   and left over the gap, right edge bleeding off-screen */
.hero__map { position: relative; z-index: 1; }
.hero__map img {
  width: 185%;
  max-width: none;
  margin: -7rem 0 -4rem -22%;
}

/* ---------- Fork: the site's main gateway to TX / OK —
   ink-black editorial statement + two giant state panels that
   flood red on hover (continuity with the interior pages) ---------- */
.fork {
  background: #0d0d0f;
  color: #fff;
}
.fork__intro { padding: 7rem 0 4rem; }
.fork__mission {
  margin: 0 0 3rem;
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
  line-height: 1.4;
  font-weight: 300;
  max-width: 34ch;
}
.fork__mission strong { color: var(--red); font-weight: 700; }
.fork__kicker {
  margin: 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
}
.fork__panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.fork__panel {
  position: relative;
  display: block;
  min-height: 24rem;
  padding: 2.5rem;
  text-decoration: none;
  overflow: clip;
  isolation: isolate;
}
.fork__panel + .fork__panel { border-left: 1px solid rgba(255, 255, 255, 0.14); }
/* red flood rises from the bottom on hover */
.fork__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--red);
  transform: translateY(101%);
  transition: transform 0.55s var(--ease-peek);
  z-index: -1;
}
.fork__panel:hover::before,
.fork__panel:focus-visible::before { transform: translateY(0); }
.fork__ghost {
  position: absolute;
  right: 1.5rem;
  bottom: -0.16em;
  font-family: var(--font-display);
  font-size: 17rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.14);
  pointer-events: none;
  user-select: none;
  transition: -webkit-text-stroke-color 0.5s var(--ease-btn-in), color 0.5s var(--ease-btn-in);
}
.fork__panel:hover .fork__ghost {
  color: rgba(255, 255, 255, 0.22);
  -webkit-text-stroke-color: transparent;
}
.fork__logo {
  width: min(15rem, 60%);
  position: absolute;
  left: 2.5rem;
  top: 2.5rem;
}
.fork__arrow {
  position: absolute;
  left: 2.5rem;
  bottom: 2.2rem;
  font-size: 2.6rem;
  line-height: 1;
  color: #fff;
  transition: transform 0.45s var(--ease-peek);
}
.fork__panel:hover .fork__arrow { transform: translateX(0.9rem); }

/* ---------- Footer (Apeel-structured, PCC copy) ---------- */
.footer {
  --muted: #9f9891;
  --divider: #2e2b29;
  background: var(--contrast);
  color: var(--cream-text);
  overflow: hidden;
  padding: 5rem 0;
}
.footer__grid {
  display: grid;
  grid-template-columns: repeat(48, 1fr);
  align-items: start;
}
.footer a { text-decoration: none; }
.footer__head { grid-column: 1 / 16; }
.footer__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 4rem;
  letter-spacing: -0.02em;
  line-height: 0.9;
  margin: 0 0 1.5rem;
}
.footer .btn { background: var(--red-deep); color: var(--cream-text) !important; }
.footer .btn:hover { background: var(--red); }
.footer__nav-primary { grid-column: 25 / 33; }
.footer__nav-primary a {
  display: block;
  width: fit-content;
  white-space: nowrap;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 0.6rem;
}
.footer__nav-primary a:last-child { margin-bottom: 0; }
.footer__nav-secondary { grid-column: 41 / 48; }
.footer__nav-secondary a {
  display: block;
  width: fit-content;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.2;
  margin-bottom: 0.5rem;
}
.footer__divider {
  height: 1px;
  width: 100%;
  background: var(--divider);
  margin: 5rem 0 2.5rem;
}
.footer__logo { grid-column: 1 / 8; grid-row: 1; }
.footer__logo img {
  width: 8.3rem; height: auto;
  filter: brightness(0) invert(1);
}
.footer__address {
  font-style: normal;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.35;
  grid-row: 1;
}
.footer__address--1 { grid-column: 25 / 32; }
.footer__address--2 { grid-column: 33 / 39; }
.footer__address-title { display: block; margin-bottom: 0.5rem; }
.footer__address-details { color: var(--muted); }
.footer__address-details a:hover { color: var(--cream-text); }
.footer__legal { grid-column: 41 / 47; grid-row: 1; }
.footer__legal a {
  display: block;
  width: fit-content;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.4;
  margin-bottom: 0.25rem;
}
.footer__legal a:hover { color: var(--cream-text); }
.footer__social {
  grid-column: 25 / 39;
  grid-row: 2;
  margin-top: 5rem;
  display: flex;
  align-items: center;
  gap: 2rem;
}
.footer__social a {
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  background: var(--cream-text);
  color: var(--contrast);
  display: grid;
  place-items: center;
  transition: background 0.5s var(--ease-btn-in);
}
.footer__social a:hover { background: var(--red); color: var(--cream-text); }
.footer__social svg { width: 60%; height: 60%; }
.footer__copyright {
  grid-column: 41 / 47;
  grid-row: 2;
  margin-top: 5rem;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.4;
}

/* ============================================================
   Interior pages v3 — "cinematic editorial" (full creative pass):
   black kinetic-type heroes w/ ghost titles, red page-wipe
   transitions, scroll-drawn red thread past giant outlined section
   numerals, custom cursor, magnetic buttons, film grain.
   ============================================================ */

:root {
  --ink: #0d0d0f;
  --body-gray: #494f58;
  --hairline: #e4e4e6;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
  --p-spacing--20: 1rem;
  --p-spacing--30: 1.5rem;
  --p-spacing--40: 2.5rem;
  --p-spacing--50: 4rem;
  --p-spacing--60: 6rem;
  --p-spacing--70: 8rem;
  --p-spacing--80: 10rem;
}

body.interior { background: #fff; }

/* film grain */
body.interior::after {
  content: "";
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: 98;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* page wipe (JS reveals it away; without the anim stack it never shows) */
.wipe {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--red);
  transform: translateY(100%);
  pointer-events: none;
}
.has-anim .wipe { transform: translateY(0); }

/* scroll progress hairline */
.progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  z-index: 95;
}

@media (hover: none) { .progress { display: none; } }


/* --- hero: black, kinetic type, ghost title --- */
.phero {
  position: relative;
  background: var(--ink);
  color: #fff;
  padding: 13rem 0 7rem;
  overflow: clip;
}
.phero__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 2rem;
  min-height: 1em;
}
.phero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 6.4vw, 6.4rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
  margin: 0;
  max-width: 16ch;
  position: relative;
  z-index: 2;
}
.has-anim .phero__title { visibility: hidden; }
.phero__ghost {
  position: absolute;
  bottom: -0.18em;
  left: 55%;
  font-family: var(--font-display);
  font-size: 16rem;
  line-height: 1;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.09);
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

/* --- red thread drawn by scroll --- */
.interior-main { position: relative; }
.thread {
  position: absolute;
  top: 0; bottom: 0;
  left: max(1.2rem, calc((100vw - 80rem) / 2 - 3rem));
  width: 1px;
  z-index: 1;
}
.thread__line {
  display: block;
  width: 1px;
  height: 100%;
  background: linear-gradient(var(--red), var(--red-deep));
  transform: scaleY(0);
  transform-origin: top;
}

body.interior main { padding-bottom: 9rem; }

/* --- layout: sticky on-this-page nav + sections --- */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 4rem;
  align-items: start;
  padding-top: 5rem;
}
.layout--single { grid-template-columns: minmax(0, 1fr); }
.layout--single .layout__body { max-width: 52rem; }
.toc {
  position: sticky;
  top: 7rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.toc__item {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.45;
  color: #9aa0a8;
  text-decoration: none;
  transition: color 0.35s var(--ease-btn-in);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  display: flex;
}
.toc__item span:last-child {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.toc__dot {
  flex: 0 0 auto;
  width: 7px; height: 7px;
  border: 1px solid #c6cad0;
  transition: background 0.35s var(--ease-btn-in), border-color 0.35s var(--ease-btn-in);
}
.toc__item:hover { color: var(--ink); }
.toc__item.is-active { color: var(--ink); }
.toc__item.is-active .toc__dot { background: var(--red); border-color: var(--red); }

.sec { padding: 3.5rem 0 1rem; }
.sec:first-child { padding-top: 0; }

.content {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--body-gray);
}
.content > h2:first-child,
.content h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2.2rem;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 1.6rem;
}
.content h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2.6rem !important;
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 2rem;
}
.content h3 { font-weight: 700; font-size: 1.2rem; color: var(--ink); margin: 2.4rem 0 0.8rem; }
.content h4, .content h5 { font-weight: 700; color: var(--ink); margin: 1.8rem 0 0.6rem; }
.content p { margin: 0 0 1.15rem; }
.content > p:first-child:not(:only-child) {
  font-size: 1.55rem;
  line-height: 1.45;
  font-weight: 300;
  color: var(--ink);
  margin-bottom: 1.8rem;
}
.content ul, .content ol { margin: 0 0 1.5rem; padding-left: 1.4rem; }
.content li { margin-bottom: 0.5rem; }
.content li::marker { color: var(--red); }
.content a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.content a:hover { color: var(--red); }
.content strong { color: var(--ink); }

.content .has-small-font-size { font-size: 0.875rem; }
.content .has-medium-font-size { font-size: 1.1rem; }
.content .has-large-font-size { font-size: 1.45rem; line-height: 1.45; font-weight: 300; color: var(--ink); }
.content .has-x-large-font-size { font-size: 1.9rem; line-height: 1.3; font-weight: 300; color: var(--ink); }
.content .has-xx-large-font-size { font-size: 2.4rem; line-height: 1.15; font-weight: 300; color: var(--ink); }
.content .has-archivo-black-font-family { font-family: var(--font-display); font-weight: 400; }
.content .has-text-align-center { text-align: center; }
.content .has-text-align-right { text-align: right; }

.content .b-columns { display: flex; gap: 2rem; margin: 0 0 1.8rem; flex-wrap: nowrap; }
.content .b-column { flex: 1 1 0; min-width: 0; }
.content .b-column.is-vertically-aligned-center { align-self: center; }
.content .b-column[style*="border"] {
  border: 1px solid var(--hairline) !important;
  border-radius: 8px !important;
  padding: 1.6rem !important;
}

.content .has-accent-1-color { color: var(--red); }
.content .has-accent-2-color { color: var(--red-deep); }
.content .has-accent-3-color { color: var(--pink); }
.content .has-accent-4-color { color: var(--body-gray); }
.content .has-accent-5-color { color: var(--hairline); }
.content .has-base-color { color: #fff; }
.content .style-section-3,
.content .has-contrast-background-color {
  background: var(--ink) !important;
  color: #c9ccd2;
  border-radius: 10px;
  padding: 3rem 2.5rem;
  margin-bottom: 1.8rem;
}
.content .style-section-3 a { color: #fff; }
.content .style-section-3 strong, .content .style-section-3 h2, .content .style-section-3 h3 { color: #fff; }

.content figure { margin: 0 0 1.8rem; overflow: clip; border-radius: 10px; }
.content .b-image img {
  border-radius: 10px;
  height: auto;
  transition: transform 0.8s var(--ease-peek), filter 0.8s var(--ease-btn-in);
}
.content .b-image:hover img { transform: scale(1.03); }
.content .aligncenter { margin-inline: auto; text-align: center; }
.content figcaption {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #9aa0a8;
  margin-top: 0.6rem;
}

.content hr.b-separator {
  border: 0;
  height: 1px;
  background: var(--hairline);
  margin: 3.5rem 0;
}
.content .style-section-3 hr.b-separator { background: rgba(255, 255, 255, 0.18); }

.content .b-buttons { display: flex; gap: 0.9rem; flex-wrap: wrap; margin: 1.6rem 0; }
.content .b-button__link,
.content form button[type="submit"],
.content form input[type="submit"] {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1.6rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--red) !important;
  color: #fff !important;
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  text-decoration: none !important;
  transition: background 0.4s var(--ease-btn-in);
}
.content .b-button__link:hover,
.content form button[type="submit"]:hover,
.content form input[type="submit"]:hover { background: var(--ink) !important; }

.content table { border-collapse: collapse; width: 100%; margin: 0 0 1.6rem; }
.content td, .content th { border: 1px solid var(--hairline); padding: 0.6rem 0.8rem; }
.content iframe { max-width: 100%; border: 1px solid var(--hairline); border-radius: 10px; }

.content form .form-group { margin-bottom: 1.2rem; }
.content form label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.45rem;
}
.content form input[type="text"],
.content form input[type="email"],
.content form input[type="tel"],
.content form select,
.content form textarea {
  width: 100%;
  padding: 0.78rem 0.95rem;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  color: var(--ink);
}
.content form input:focus,
.content form select:focus,
.content form textarea:focus {
  outline: 2px solid var(--red);
  outline-offset: 0;
  border-color: transparent;
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  /* full-screen mobile menu — the nav itself expands to the viewport
     (backdrop-filter/transform make it the containing block, so a
     fixed overlay inside it can't reach the viewport on its own) */
  .nav.is-open {
    height: 100dvh;
    background: var(--canvas);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .nav__logo, .nav__toggle { position: relative; z-index: 2; }
  .nav__links {
    position: absolute;
    inset: 0;
    z-index: 1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.7rem;
    padding: 4.6rem 0 2rem;
    background: var(--canvas);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s var(--ease-btn-out), visibility 0.4s;
  }
  .nav.is-open .nav__links {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
  .nav__links a:not(.btn-pill) { font-size: 1.7rem; font-weight: 500; }
  .nav__links .btn-pill {
    font-size: 1.15rem;
    padding: 0.8rem 1.7rem;
    margin-top: 0.6rem;
  }
  /* links rise in, gently staggered */
  .nav__links a {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.4s var(--ease-btn-out), transform 0.4s var(--ease-btn-out);
  }
  .nav.is-open .nav__links a { opacity: 1; transform: none; }
  .nav.is-open .nav__links a:nth-child(1) { transition-delay: 0.05s; }
  .nav.is-open .nav__links a:nth-child(2) { transition-delay: 0.1s; }
  .nav.is-open .nav__links a:nth-child(3) { transition-delay: 0.15s; }
  .nav.is-open .nav__links a:nth-child(4) { transition-delay: 0.2s; }
  .nav.is-open .nav__links a:nth-child(5) { transition-delay: 0.25s; }
  html:has(.nav.is-open) { overflow: clip; }
  .nav__toggle { display: block; }
  .nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
  .nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .hero {
    padding: 6.5rem 0 0;
    min-height: 0;
  }
  .hero__grid { grid-template-columns: 1fr; gap: 0; }
  .hero h1 { margin-bottom: 1.5rem; }
  /* production mobile: collage ~2.4x container, spilling past both edges */
  .hero__map img {
    width: 240%;
    max-width: none;
    margin: -2rem 0 -3.5rem -70%;
  }
  .fork__intro { padding: 4rem 0 2.5rem; }
  .fork__mission { font-size: 1.25rem; max-width: none; }
  .fork__panels { grid-template-columns: 1fr; }
  .fork__panel { min-height: 15rem; padding: 1.8rem; }
  .fork__panel + .fork__panel { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.14); }
  .fork__ghost { font-size: 9rem; }
  .fork__logo { width: 11rem; left: 1.8rem; top: 1.8rem; }
  .fork__arrow { left: 1.8rem; bottom: 1.6rem; font-size: 2rem; }

  .footer { padding: 4rem 0 2rem; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__head,
  .footer__nav-primary,
  .footer__nav-secondary,
  .footer__logo,
  .footer__address--1,
  .footer__address--2,
  .footer__legal,
  .footer__social,
  .footer__copyright { grid-column: 1 / -1; grid-row: auto; }
  .footer__title { font-size: 2.4rem; }
  .footer__nav-primary { margin: 2.5rem 0 0; }
  .footer__nav-primary a { font-size: 1.4rem; }
  .footer__nav-secondary { margin-top: 1.25rem; }
  .footer__divider { margin: 2.5rem 0; }
  .footer__address { margin: 0.75rem 0; }
  .footer__logo { margin-bottom: 1.5rem; }
  .footer__legal { margin-top: 1rem; }
  .footer__social { margin-top: 2rem; }
  .footer__copyright { margin-top: 1rem; }

  .page-header { padding-top: 7rem; }
  .page-header h1 { font-size: 2.4rem; }
  body.interior .surface > .content:first-child { padding-top: 6.5rem; }
  .content h1 { font-size: 2rem !important; }
  .content .has-xx-large-font-size { font-size: 1.8rem; }
  .content .b-columns { flex-direction: column; }
  .content .style-section-3 { padding: 2.5rem 1.5rem; }
}

/* ============================================================
   Interior pages — mobile (appended last so it always wins)
   ============================================================ */
@media (max-width: 960px) {
  /* hero: tame long titles, tighten the block */
  .phero { padding: 7.5rem 0 3.2rem; }
  .phero__eyebrow { font-size: 0.68rem; margin-bottom: 1.2rem; }
  .phero__title {
    font-size: clamp(1.7rem, 7.4vw, 2.2rem);
    line-height: 1.05;
    max-width: none;
  }
  .phero__ghost { display: none; }

  /* no thread / no rail on small screens */
  .thread { display: none; }
  .toc { display: none; }
  .layout {
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: 2.5rem;
  }
  .layout--single .layout__body { max-width: none; }
  body.interior main { padding-bottom: 4.5rem; }

  .sec { padding: 2.2rem 0 0.5rem; }
  .content { font-size: 1rem; }
  .content > p:first-child:not(:only-child) { font-size: 1.2rem; line-height: 1.5; }
  .content h1 { font-size: 1.8rem !important; }
  .content h2 { font-size: 1.45rem; }
  .content h3 { font-size: 1.1rem; }
  .content .has-xx-large-font-size { font-size: 1.5rem; }
  .content .has-x-large-font-size { font-size: 1.3rem; }
  .content .has-large-font-size { font-size: 1.15rem; }

  .content .b-columns { flex-direction: column; gap: 1.2rem; }
  .content .b-column[style*="border"] { padding: 1.2rem !important; }
  .content .style-section-3 { padding: 1.8rem 1.3rem; }
  .content figure { margin-bottom: 1.2rem; }
  .content .b-buttons { gap: 0.7rem; }
  .content .b-button__link { padding: 0.65rem 1.3rem; font-size: 0.9rem; }
}

/* ---------- TX / OK: the "How we're fighting for you" agenda ----------
   topic lines (p followed by a ul) become red-ticked labels; their
   bullets become arrowed hairline rows */
.page-tx .content p:has(+ ul),
.page-ok .content p:has(+ ul) {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--ink);
  margin: 2.4rem 0 0.4rem;
}
.page-tx .content p:has(+ ul)::before,
.page-ok .content p:has(+ ul)::before {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  background: var(--red);
  transform: translateY(-1px);
}
.page-tx .content p:has(+ ul) + ul,
.page-ok .content p:has(+ ul) + ul {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
}
.page-tx .content p:has(+ ul) + ul > li,
.page-ok .content p:has(+ ul) + ul > li {
  position: relative;
  margin: 0;
  padding: 0.75rem 0 0.75rem 1.8rem;
  border-bottom: 1px solid var(--hairline);
}
.page-tx .content p:has(+ ul) + ul > li::before,
.page-ok .content p:has(+ ul) + ul > li::before {
  content: "\2192";
  position: absolute;
  left: 0.15rem;
  color: var(--red);
  font-family: var(--font-mono);
  font-size: 0.9rem;
}

/* ---------- Arch Medical page: pills, feature/step cards, compare table ---------- */
.page-arch-medical .arch-features,
.page-arch-medical .arch-steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  margin: 1.8rem 0 2rem;
}
.page-arch-medical .arch-feature,
.page-arch-medical .arch-step {
  position: relative;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 1.6rem 1.6rem 1.4rem;
  background: #fff;
  transition: border-color 0.4s var(--ease-btn-in), transform 0.5s var(--ease-peek);
}
.page-arch-medical .arch-feature:hover,
.page-arch-medical .arch-step:hover { border-color: var(--red); transform: translateY(-3px); }
.page-arch-medical .arch-feature__k {
  display: block;
  font-family: var(--font-display);
  font-size: 2.2rem;
  line-height: 1;
  color: var(--red);
  margin-bottom: 0.7rem;
}
.page-arch-medical .arch-step__n {
  position: absolute;
  top: 1.3rem; right: 1.4rem;
  width: 2rem; height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}
.page-arch-medical .arch-feature h4,
.page-arch-medical .arch-step h4 { margin: 0 0 0.5rem; font-size: 1.1rem; padding-right: 2.5rem; }
.page-arch-medical .arch-feature p,
.page-arch-medical .arch-step p { margin: 0; font-size: 0.95rem; }

/* modality pills */
.page-arch-medical .arch-pills {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.4rem 0 2rem;
  padding: 0;
}
.page-arch-medical .arch-pills > li {
  margin: 0;
  padding: 0.5rem 1rem;
  border: 1px solid var(--hairline);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  color: var(--ink);
  transition: background 0.35s var(--ease-btn-in), color 0.35s, border-color 0.35s;
}
.page-arch-medical .arch-pills > li:hover { background: var(--red); border-color: var(--red); color: #fff; }
.page-arch-medical .arch-pills > li::before { content: none; }

/* pull quote */
.page-arch-medical .arch-pullquote {
  border-left: 3px solid var(--red);
  padding: 0.4rem 0 0.4rem 1.4rem;
  font-size: 1.15rem;
  color: var(--ink);
  margin: 1.6rem 0 0;
}

/* trust line */
.page-arch-medical .arch-trust {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: var(--body-gray);
  margin-bottom: 1.4rem;
}
.page-arch-medical .arch-trust strong { color: var(--ink); }

/* numbered reasons */
.page-arch-medical .arch-reasons {
  list-style: none;
  counter-reset: r;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 2.5rem;
  margin: 0 0 1.6rem;
  padding: 0;
}
.page-arch-medical .arch-reasons > li {
  counter-increment: r;
  position: relative;
  padding: 0.9rem 0 0.9rem 2.4rem;
  border-bottom: 1px solid var(--hairline);
  margin: 0;
}
.page-arch-medical .arch-reasons > li::before {
  content: counter(r, decimal-leading-zero);
  position: absolute;
  left: 0; top: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--red);
}

/* compare table */
.page-arch-medical .arch-compare { margin: 1.6rem 0 0.5rem; }
.page-arch-medical .arch-compare th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
  padding: 0.7rem 0.9rem;
}
.page-arch-medical .arch-compare td { border: 0; border-bottom: 1px solid var(--hairline); padding: 0.85rem 0.9rem; }
.page-arch-medical .arch-compare .arch-yes { color: var(--ink); font-weight: 700; }
.page-arch-medical .arch-compare .arch-yes::before { content: "\2713 "; color: var(--red); }
.page-arch-medical .arch-compare .arch-no { color: #9aa0a8; }
.page-arch-medical .arch-compare .arch-no::before { content: "\00d7 "; }

/* contact block */
.page-arch-medical .arch-contact {
  margin-top: 1.8rem;
  padding: 1.8rem;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--card, #f4f5f7);
}
.page-arch-medical .arch-contact > p:first-child {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--ink);
  margin: 0 0 0.6rem;
}

@media (max-width: 960px) {
  .page-arch-medical .arch-features,
  .page-arch-medical .arch-steps,
  .page-arch-medical .arch-reasons { grid-template-columns: 1fr; gap: 0.9rem; }
  .page-arch-medical .arch-reasons > li { padding-left: 2.2rem; }
}

/* ---------- Zion Health page: logo lockup, pricing callout, resource grid ---------- */
.page-zion-health .zion-hero {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--hairline);
}
.page-zion-health .zion-logo { width: min(20rem, 70%); height: auto; }
.page-zion-health .zion-lede {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--ink);
  max-width: 22ch;
}
.page-zion-health .zion-callout {
  border-left: 3px solid var(--red);
  background: var(--card, #f4f5f7);
  border-radius: 0 10px 10px 0;
  padding: 1.6rem 1.8rem;
  margin: 2rem 0;
}
.page-zion-health .zion-callout p { margin: 0 0 1rem; }
.page-zion-health .zion-callout p:last-child { margin: 0; }
.page-zion-health .zion-brochure {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin: 2rem 0 0.5rem;
  padding: 1.6rem 1.8rem;
  border: 1px solid var(--hairline);
  border-radius: 12px;
}
.page-zion-health .zion-brochure p { margin: 0; flex: 1 1 20rem; }
.page-zion-health .zion-brochure .b-button__link { flex: 0 0 auto; }

/* resource card grid */
.page-zion-health .zion-resources {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  margin: 1.6rem 0 0;
}
.page-zion-health .zion-res {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  overflow: clip;
  text-decoration: none;
  background: #fff;
  transition: border-color 0.4s var(--ease-btn-in), transform 0.5s var(--ease-peek), box-shadow 0.5s var(--ease-peek);
}
.page-zion-health .zion-res:hover {
  border-color: var(--red);
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(17, 17, 17, 0.1);
}
.page-zion-health .zion-res img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: top center;
  background: var(--card, #f4f5f7);
  border-bottom: 1px solid var(--hairline);
}
.page-zion-health .zion-res__label {
  padding: 0.9rem 1rem;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.page-zion-health .zion-res__label::after {
  content: "\2193";
  margin-left: auto;
  color: var(--red);
  font-family: var(--font-mono);
}

@media (max-width: 960px) {
  .page-zion-health .zion-resources { grid-template-columns: 1fr 1fr; gap: 0.9rem; }
  .page-zion-health .zion-hero { gap: 1.2rem; }
  .page-zion-health .zion-brochure { gap: 1.2rem; }
}

/* ---------- Membership form status banner ---------- */
.form-banner {
  margin: 0 0 1.6rem;
  padding: 1rem 1.2rem;
  border-radius: 8px;
  font-size: 1rem;
  line-height: 1.5;
}
.form-banner.is-ok { background: #ecfdf3; border: 1px solid #ade6c4; color: #0a5c2e; }
.form-banner.is-err { background: #fff1f0; border: 1px solid #ffc9c9; color: var(--red-deep); }

/* ---------- Facebook feed (homepage) ---------- */
.fbfeed { padding: 6rem 0; background: var(--canvas); }
.fbfeed__head { margin-bottom: 2.5rem; }
.fbfeed__eyebrow {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 0.9rem;
}
.fbfeed__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 0;
}
.fbfeed__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}
.fb-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--gray-light);
  border-radius: 14px;
  overflow: clip;
  text-decoration: none;
  color: var(--contrast);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease-text), transform 0.7s var(--ease-text), border-color 0.4s, box-shadow 0.5s var(--ease-peek);
}
.fb-card.in { opacity: 1; transform: none; }
.fb-card:hover { border-color: var(--red); box-shadow: 0 18px 40px rgba(17,17,17,0.1); transform: translateY(-4px); }
.fb-card__img { width: 100%; aspect-ratio: 16/10; object-fit: cover; background: var(--canvas-soft); border-bottom: 1px solid var(--gray-light); }
.fb-card__body { padding: 1.2rem 1.3rem 1.3rem; display: flex; flex-direction: column; gap: 0.7rem; flex: 1; }
.fb-card__meta { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; color: var(--gray); font-family: "IBM Plex Mono", monospace; }
.fb-card__meta svg { width: 15px; height: 15px; color: #1877f2; flex: 0 0 auto; }
.fb-card__text { margin: 0; font-size: 0.95rem; line-height: 1.5; }
.fb-card__more { margin-top: auto; font-size: 0.82rem; font-weight: 600; color: var(--red-deep); }
.fbfeed__follow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 2.2rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--red-deep);
  text-decoration: none;
}
.fbfeed__follow:hover { text-decoration: underline; }

@media (max-width: 900px) { .fbfeed__grid { grid-template-columns: 1fr; } .fbfeed { padding: 4rem 0; } }

/* ---------- Hero CTA (replaces the old Facebook chip) ---------- */
.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.9rem;
  border-radius: var(--radius-pill);
  background: var(--red);
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  transition: background 0.5s var(--ease-btn-in), transform 0.5s var(--ease-btn-in);
}
.hero__cta:hover { background: var(--red-deep); transform: translateY(-2px); }
.hero__cta .arr { transition: transform 0.3s var(--ease-btn-out); }
.hero__cta:hover .arr { transform: translateX(4px); }