/* ============================================================
   LEGACY STRENGTH - one-page site
   Palette + type pulled from brand: Anton / Raleway,
   orange #ED8E1C · ink #101010 · gray #939598 · paper #F2F3F5
   ============================================================ */

:root {
  --orange: #ED8E1C;
  --orange-soft: #FFBC7D;
  --ink: #101010;
  --ink-2: #1b1b1b;
  --gray: #939598;
  --paper: #F2F3F5;
  --white: #ffffff;
  --display: "Anton", Impact, sans-serif;
  --body: "Raleway", system-ui, sans-serif;
  --mono: "Space Grotesk", ui-monospace, monospace;
  --ease-power: cubic-bezier(.65, 0, .35, 1);
  --pad: clamp(1.25rem, 4vw, 4rem);
  /* the brand cross as a 12-point clip-path */
  --cross-clip: polygon(0% 40%, 40% 40%, 40% 0%, 60% 0%, 60% 40%, 100% 40%,
                        100% 60%, 60% 60%, 60% 100%, 40% 100%, 40% 60%, 0% 60%);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* scrollbars stay hidden everywhere (page + modal); scrolling itself is untouched */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { width: 0; height: 0; display: none; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--body);
  font-weight: 500;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; }
/* grid/flex items must be allowed to shrink below content size */
.hero__inner > *, .family__grid > *, .start__inner > *, .visit__grid > * { min-width: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }
em { font-style: normal; color: var(--orange); }
.tick { color: var(--orange); }

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- cross icon ---------- */
.cross-icon { width: .9em; height: .9em; fill: var(--orange); flex: none; }
.cross-icon--spin { animation: spin 6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cross-icon--spin { animation: none; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--display); font-size: 1rem; letter-spacing: .08em;
  text-transform: uppercase; padding: .9em 1.6em; line-height: 1;
  transition: transform .3s var(--ease-power), background .3s, color .3s;
}
.btn--solid { background: var(--orange); color: var(--white); }
.btn--solid:hover { background: var(--ink); transform: translateY(-2px); }
.section--accent .btn--solid:hover { background: var(--white); color: var(--ink); }
.btn--ghost { border: 2px solid var(--orange); color: var(--white); }
.btn--ghost:hover { background: var(--orange); }
.btn--big { font-size: clamp(1.1rem, 2vw, 1.4rem); }
.btn__arrow { transition: transform .3s var(--ease-power); }
.btn:hover .btn__arrow { transform: translateX(.35em); }

/* ============================================================
   LOADER
   ============================================================ */
.loader {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--orange);
  display: flex; align-items: center; justify-content: center;
}
.loader__logo { width: min(60vw, 420px); height: auto; }
.loader__count {
  position: absolute; right: var(--pad); bottom: var(--pad);
  font-family: var(--display); font-size: clamp(3rem, 8vw, 6rem);
  color: var(--white); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.loader__count sup { font-size: .35em; margin-left: .1em; }
/* no-JS / timeout safety: CSS alone removes the loader */
@keyframes loaderFailsafe { to { visibility: hidden; opacity: 0; } }
.loader { animation: loaderFailsafe 0s 4s forwards; }
html.js .loader { animation: none; }

/* ============================================================
   CURSOR (desktop pointer only)
   ============================================================ */
.cursor {
  /* above the loader (1000) and modal (950): with the native cursor hidden,
     the cross must never be the thing that's covered up */
  position: fixed; top: 0; left: 0; z-index: 1001;
  width: 22px; height: 22px; margin: -11px 0 0 -11px;
  pointer-events: none; mix-blend-mode: difference;
  display: none; opacity: 0; transition: opacity .3s;
}
.cursor.is-live { opacity: 1; }
.cursor svg { width: 100%; height: 100%; fill: #fff; transition: transform .3s var(--ease-power); }
.cursor.is-hover svg { transform: scale(2.2) rotate(45deg); }
@media (hover: hover) and (pointer: fine) {
  .cursor { display: block; }
  /* once the cross is tracking, it IS the pointer - drop the native one.
     The class lands on first pointermove, so the arrow stays until then. */
  html.cursor-live, html.cursor-live * { cursor: none; }
}

/* ============================================================
   HEADER
   ============================================================ */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  display: flex; align-items: center; gap: 2rem;
  padding: 1rem var(--pad);
  transition: background .4s, box-shadow .4s, transform .4s;
}
.header.is-scrolled { background: rgba(242, 243, 245, .92); backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(16,16,16,.08); }
.header.is-hidden { transform: translateY(-110%); }
.header__logo img { display: block; width: 96px; height: auto; }
/* needs the parent to outrank `.header__logo img { display: block }` */
.header__logo .header__logo-white { display: none; }
/* over the orange hero block the colour logo's orange half disappears */
.header:not(.is-scrolled) .header__logo .header__logo-color { display: none; }
.header:not(.is-scrolled) .header__logo .header__logo-white { display: block; }
.header__nav { display: flex; gap: 1.8rem; margin-left: auto; }
.header__nav a {
  font-family: var(--mono); font-size: .8rem; letter-spacing: .12em;
  text-transform: uppercase; position: relative; padding: .3em 0;
}
.header__nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--orange); transform: scaleX(0); transform-origin: right;
  transition: transform .35s var(--ease-power);
}
.header__nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.header__cta { font-size: .85rem; }
@media (max-width: 900px) {
  /* orange-on-orange: invert the button while it floats over the block */
  .header:not(.is-scrolled) .header__cta { background: var(--white); color: var(--ink); }
}
@media (max-width: 760px) {
  .header__nav { display: none; }
  .header__cta { margin-left: auto; }
}

/* ============================================================
   SECTIONS (shared)
   ============================================================ */
.section { padding: clamp(5rem, 10vw, 9rem) var(--pad); position: relative; scroll-margin-top: 4.5rem; }
.section--dark { background: var(--ink); color: var(--paper); }
.section--accent { background: var(--orange); color: var(--white); }

/* subtle tiled cross pattern on dark sections */
.section--dark::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='64' height='64'%3E%3Cpath d='M43 27H57V43H73V57H57V73H43V57H27V43H43Z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-size: 64px 64px;
}
.section--dark > * { position: relative; }

.section__head { margin-bottom: clamp(2.5rem, 6vw, 5rem); max-width: 1400px; margin-inline: auto; }
.section__label {
  font-family: var(--mono); font-size: .85rem; letter-spacing: .35em;
  text-transform: uppercase; color: var(--orange); margin-bottom: 1rem;
}
.section__title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.6rem, 7vw, 5.5rem);
  line-height: .95; text-transform: uppercase; letter-spacing: .01em;
}

/* cross-mask scroll reveal for images (JS animates to full) */
.mask-reveal { overflow: hidden; }
.mask-reveal img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   HERO
   One composition at every width: the orange statement block with the
   plus-masked loop tucked under "GTH". Above 901px the lead form sits
   beside it; below, it stacks underneath.
   ============================================================ */
.hero { position: relative; overflow: hidden; }
.hero__ghost { display: none; }
.hero__inner { position: relative; width: 100%; }

.hero__block {
  position: relative;
  background: var(--orange); color: var(--white);
  padding: clamp(5.5rem, 13vh, 7.5rem) var(--pad) clamp(2.2rem, 5vh, 3.5rem);
  display: grid; grid-template-rows: auto 1fr auto;
  gap: clamp(1rem, 2.5vh, 2rem);
  min-height: 76svh;
}
/* on orange the accent flips to ink, as in .section--accent */
.hero__kicker {
  display: flex; align-items: flex-start; gap: .6em; color: var(--ink);
  font-family: var(--mono); font-size: clamp(.6rem, 2.5vw, .82rem);
  letter-spacing: .2em; text-transform: uppercase;
}
.hero__kicker .cross-icon { fill: var(--ink); margin-top: .2em; }

/* the stage hugs the longest line so the plus can hang off its right edge */
.hero__stage {
  position: relative; align-self: center;
  width: max-content; max-width: 100%;
  font-size: clamp(2.4rem, 13.5vw, 7rem);
}
.hero__title {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: 1em; line-height: .92; letter-spacing: .005em;
}
.hero__line { display: block; }
.hero__line--outline { color: transparent; -webkit-text-stroke: 2px var(--white); }
.hero__title em { color: var(--ink); }
.hero__punct { color: var(--ink); -webkit-text-stroke: 0; }

/* right edge flush with the H of STRENGTH, bottom on the baseline of
   "A LIFETIME." - both offsets are in em, so they hold at any size.
   Anton's descent is .33em and line 3's font box overhangs the stage by
   .293em, putting that baseline .037em above the stage bottom; the .029em
   inset absorbs the H's right side bearing. */
.hero__media {
  position: absolute; right: .029em; bottom: .03em;
  width: 1.45em; height: 1.45em;
  clip-path: var(--cross-clip);
}
.hero__media video { width: 100%; height: 100%; object-fit: cover; }

.hero__copy p { font-size: clamp(.92rem, 3.3vw, 1.02rem); max-width: 28rem; }
.hero__copy strong { color: var(--ink); }


/* lead form: white panel under the block, beside it on desktop */
.hero__form {
  background: var(--white);
  padding: clamp(2.2rem, 7vw, 3rem) var(--pad) clamp(2.5rem, 7vw, 3.5rem);
  display: flex; flex-direction: column;
}
.hero__form-title {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1; margin-top: .6rem;
}
.hero__form-note { font-size: .9rem; color: var(--gray); margin-top: .7rem; max-width: 30rem; }
.hero__form .form-shell { margin-top: 1.2rem; box-shadow: none; min-height: 0; }


/* ---- desktop: the two panels run edge to edge and meet in the middle ---- */
@media (min-width: 901px) {
  .hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
    gap: 0; min-height: 100svh; align-items: stretch;
  }
  .hero__block {
    min-height: 0;
    padding: clamp(6rem, 10vh, 7.5rem) var(--pad) clamp(2rem, 5vh, 3.5rem);
  }
  .hero__block .hero__kicker { font-size: clamp(.6rem, .8vw, .82rem); }
  .hero__stage { font-size: clamp(2.6rem, 7.1vw, 8rem); }
  .hero__copy p { font-size: clamp(.9rem, 1.05vw, 1.02rem); }
  .hero__form {
    padding: clamp(6rem, 10vh, 7.5rem) clamp(1.75rem, 2.6vw, 3rem) clamp(2rem, 5vh, 3.5rem);
    justify-content: center;
  }
  .hero__form .form-shell { margin-top: 1rem; }
}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee {
  background: var(--ink); color: var(--paper);
  overflow: hidden; padding: 1.1rem 0; white-space: nowrap;
}
.marquee__track { display: inline-flex; will-change: transform; }
.marquee__group { display: inline-flex; align-items: center; gap: 2.5rem; padding-right: 2.5rem; }
.marquee__group span {
  font-family: var(--display); font-size: clamp(1.2rem, 2.6vw, 2rem);
  text-transform: uppercase; letter-spacing: .04em;
}
.marquee__group .cross-icon { width: .7em; height: .7em; }

/* ============================================================
   AUDIENCE PATHS - "Which one is you?"
   ============================================================ */
.paths {
  background: var(--orange); color: var(--white);
  padding: clamp(3.5rem, 7vw, 6rem) var(--pad);
}
.paths__inner { max-width: 1400px; margin: 0 auto; }
.paths__ask {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(2.2rem, 6vw, 4.5rem); line-height: .95;
  margin-bottom: clamp(1.6rem, 3vw, 2.6rem);
}
/* on orange the accent flips to ink, as everywhere else */
.paths__ask em { color: var(--ink); }
.paths__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.9rem, 1.5vw, 1.4rem);
}
/* ink tiles on orange that invert to paper on hover */
.path {
  display: flex; flex-direction: column; gap: .75rem;
  background: var(--ink); color: var(--paper);
  padding: clamp(1.3rem, 2.1vw, 1.9rem);
  /* never transition transform here: GSAP's entrance tween writes transforms
     every frame and a CSS transition fights it, freezing cards mid-stagger */
  transition: background .35s var(--ease-power), color .35s;
}
.path:hover { background: var(--paper); color: var(--ink); }
.path__quote {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(1.2rem, 1.85vw, 1.7rem); line-height: 1.04;
}
.path__copy { font-size: .95rem; color: rgba(242,243,245,.78); }
.path:hover .path__copy { color: var(--ink-2); }
.path__cta {
  margin-top: auto; padding-top: .7rem;
  font-family: var(--mono); font-size: .78rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--orange);
}
.path__arrow { display: inline-block; transition: transform .3s var(--ease-power); }
.path:hover .path__arrow { transform: translateX(.4em); }
@media (max-width: 1100px) { .paths__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px)  { .paths__grid { grid-template-columns: 1fr; } }

/* ============================================================
   FAMILY / WHO WE ARE
   ============================================================ */
.family__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6rem); max-width: 1400px; margin: 0 auto;
}
.family__lede { font-size: clamp(1.05rem, 1.8vw, 1.3rem); font-weight: 600; max-width: 36rem; }
.family__props { list-style: none; margin-top: 2.5rem; display: grid; gap: 1.4rem; }
.family__props li { display: flex; gap: 1rem; align-items: flex-start; max-width: 34rem; }
.family__props .cross-icon { margin-top: .35em; }
.family__props strong { font-weight: 700; }
.family__quote {
  margin-top: 3rem; border-left: 4px solid var(--orange); padding-left: 1.5rem;
}
.family__quote p { font-family: var(--display); font-size: clamp(1.3rem, 2.4vw, 1.8rem); text-transform: uppercase; line-height: 1.15; }
.family__quote cite { display: block; margin-top: .8rem; font-style: normal; font-family: var(--mono); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gray); }
.family__quote cite span { color: var(--orange); }
.family__media {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; align-content: start;
}
.family__img { aspect-ratio: 4 / 5; }
.family__img--tall { grid-row: span 2; aspect-ratio: 3 / 5; }
.family__img--joey { aspect-ratio: 4 / 5; }
@media (max-width: 860px) {
  .family__grid { grid-template-columns: 1fr; }
}

/* ---------- stats ---------- */
.stats {
  max-width: 1400px; margin: clamp(4rem, 8vw, 7rem) auto 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(16,16,16,.15);
}
.stat { padding: 2rem 1.5rem 0; border-left: 1px solid rgba(16,16,16,.15); }
.stat:first-child { border-left: 0; }
.stat__num {
  display: block; font-family: var(--display);
  font-size: clamp(2.6rem, 6vw, 4.5rem); line-height: 1; color: var(--orange);
  font-variant-numeric: tabular-nums;
}
.stat__label { font-family: var(--mono); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gray); display: block; margin-top: .6rem; }
@media (max-width: 760px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(3) { border-left: 0; }
  .stat { padding-top: 1.4rem; }
}

/* ============================================================
   STORIES / TESTIMONIALS
   ============================================================ */
.stories__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2rem); max-width: 1400px; margin: 0 auto;
}
.story { display: flex; flex-direction: column; }
.story__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; }
/* branded mono treatment - unifies the four stills (and quiets the
   COVID-era masks in two of them); full color returns on hover */
.story__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.08);
  transition: transform .6s var(--ease-power), filter .6s var(--ease-power);
}
.story:hover .story__media img { transform: scale(1.06); filter: none; }
.story__play {
  position: absolute; right: 1rem; bottom: 1rem; width: 2.2rem; height: 2.2rem;
  fill: var(--white); filter: drop-shadow(0 2px 8px rgba(0,0,0,.4));
  transition: transform .45s var(--ease-power);
}
.story:hover .story__play { transform: rotate(90deg) scale(1.15); }
.story__tag {
  margin-top: 1.1rem; font-family: var(--mono); font-size: .7rem;
  letter-spacing: .25em; text-transform: uppercase; color: var(--orange);
}
.story__quote { margin-top: 1.2rem; font-size: clamp(1rem, 1.5vw, 1.15rem); font-weight: 600; line-height: 1.45; flex: 1; }
.story__tag + .story__quote { margin-top: .5rem; }
.story__quote mark {
  color: inherit;
  background-image: linear-gradient(var(--orange), var(--orange));
  background-repeat: no-repeat; background-size: 0% 100%; background-position: 0 0;
  padding: .1em .15em; box-decoration-break: clone; -webkit-box-decoration-break: clone;
  transition: background-size .8s var(--ease-power), color .4s .3s;
}
.story__quote mark.is-lit { background-size: 100% 100%; color: var(--ink); }
.story__cta {
  margin-top: 1rem; align-self: flex-start;
  font-family: var(--mono); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--orange-soft); padding: .4em 0; position: relative;
}
.story__cta span { display: inline-block; transition: transform .3s var(--ease-power); }
.story__cta:hover span { transform: translateX(.4em); }
.stories__footer {
  max-width: 1400px; margin: clamp(3rem, 6vw, 5rem) auto 0;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem); text-align: center;
}
.stories__footer strong { color: var(--orange-soft); }
@media (max-width: 1000px) { .stories__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .stories__grid { grid-template-columns: 1fr; } }

/* ============================================================
   PROGRAMS
   ============================================================ */
.programs__layout { max-width: 1400px; margin: 0 auto; }
.programs__list { list-style: none; }
.programs__preview { display: none; }
.program { border-top: 1px solid rgba(16,16,16,.18); }
.program:last-child { border-bottom: 1px solid rgba(16,16,16,.18); }
.program__row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem); width: 100%; text-align: left;
  padding: clamp(1.4rem, 3vw, 2.2rem) .5rem; position: relative; z-index: 1;
}
.program__row::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--ink); transform: scaleY(0); transform-origin: bottom;
  transition: transform .45s var(--ease-power);
}
.program__index {
  font-family: var(--mono); font-size: .9rem; color: var(--orange);
  letter-spacing: .1em;
}
.program__name {
  display: block; font-family: var(--display); text-transform: uppercase;
  font-size: clamp(1.5rem, 4vw, 3.2rem); line-height: 1;
  transition: color .35s var(--ease-power), transform .45s var(--ease-power);
}
.program__if {
  display: block; margin-top: .5rem; font-size: clamp(.85rem, 1.4vw, 1rem);
  color: var(--gray); max-width: 44rem; transition: color .35s;
}
.program__plus { width: 1.4rem; height: 1.4rem; transition: transform .45s var(--ease-power); }

/* click-accordion - every width. A single inner wrapper carries ALL panel
   content so the 0fr row truly collapses (two direct children would push
   the second into an implicit auto row and leave phantom height). */
.program__panel {
  display: grid; grid-template-rows: 0fr; overflow: hidden;
  transition: grid-template-rows .5s var(--ease-power);
}
.program__panel-inner { min-height: 0; }
.program.is-open .program__panel { grid-template-rows: 1fr; }
.program__panel img { width: 100%; aspect-ratio: 16/10; object-fit: cover; opacity: 0; transition: opacity .4s .2s; }
.program.is-open .program__panel img { opacity: 1; }
.program__panel p { padding: 1rem .5rem 0; color: var(--ink-2); opacity: 0; transition: opacity .4s .25s; }
.program__cta { margin: 1.3rem .5rem 1.7rem; opacity: 0; transition: opacity .4s .3s; }
.program.is-open .program__cta { opacity: 1; }
.program.is-open .program__panel p { opacity: 1; }

/* desktop: open panel lays out image beside copy */
@media (min-width: 861px) {
  /* bottom padding rides on the children, never the 0fr grid item itself:
     border-box can collapse content to zero height but not padding, so
     padding here would survive the collapse as dead space under the wipe */
  .program__panel-inner {
    display: grid; grid-template-columns: 1fr;
    align-items: start;
    padding: 0 .5rem;
  }

  .program__panel img { aspect-ratio: 4 / 3; }
  .program__panel p { padding: 0; max-width: 44rem; font-size: 1.05rem; }
  /* justify-self, or the grid stretches the button into a full-width bar */
  .program__cta { margin: 1.7rem 0 2.4rem; justify-self: start; }
}

/* hover behavior - desktop pointers */
@media (hover: hover) and (pointer: fine) {
  .program__row:hover::before { transform: scaleY(1); }
  .program__row:hover .program__name { color: var(--paper); transform: translateX(.4em); }
  .program__row:hover .program__if { color: var(--orange-soft); }
  .program__row:hover .program__index { color: var(--orange-soft); }
  .program__row:hover .program__plus { transform: rotate(90deg); fill: var(--paper); }
}

/* open state - inverted row + plus becomes ×; placed after the hover
   block so it wins at equal specificity while a row is open */
.program.is-open .program__row::before { transform: scaleY(1); }
.program.is-open .program__name { color: var(--paper); }
.program.is-open .program__if { color: var(--orange-soft); }
.program.is-open .program__index { color: var(--orange-soft); }
.program.is-open .program__plus { transform: rotate(45deg); fill: var(--paper); }

/* pinned preview column - stays put and crossfades, no cursor chasing */
@media (min-width: 861px) {
  .programs__layout {
    display: grid; grid-template-columns: minmax(0, 1fr) clamp(260px, 24vw, 360px);
    gap: clamp(1.5rem, 3.5vw, 3.5rem); align-items: start;
  }
  .programs__preview {
    display: block; position: sticky; top: 6.5rem;
    aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink);
  }
  .programs__preview img { width: 100%; height: 100%; object-fit: cover; }
  /* the preview column carries the imagery now, so the open panel is copy only */
  .program__panel img { display: none; }
}

/* ============================================================
   PROCESS
   ============================================================ */
.process__steps {
  list-style: none; max-width: 1400px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 4rem);
}
.step { border-top: 2px solid var(--orange); padding-top: 1.6rem; }
.step__num {
  font-family: var(--display); font-size: clamp(2.5rem, 5vw, 4rem);
  color: transparent; -webkit-text-stroke: 1.5px var(--orange); line-height: 1;
  display: block;
}
.step h3 {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.4rem, 2.4vw, 2rem); margin: 1rem 0 .6rem;
}
.step p { color: rgba(242, 243, 245, .75); max-width: 26rem; }
@media (max-width: 760px) { .process__steps { grid-template-columns: 1fr; } }

/* ============================================================
   FAQ
   ============================================================ */
.faq__list { list-style: none; max-width: 1400px; margin: 0 auto; }
.faq__item { border-top: 1px solid rgba(16,16,16,.18); }
.faq__item:last-child { border-bottom: 1px solid rgba(16,16,16,.18); }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; text-align: left; padding: 1.3rem .5rem;
  font-weight: 700; font-size: clamp(1rem, 1.8vw, 1.25rem);
}
.faq__plus { width: 1rem; height: 1rem; flex: none; transition: transform .4s var(--ease-power); }
.faq__item.is-open .faq__plus { transform: rotate(45deg); }
.faq__panel {
  display: grid; grid-template-rows: 0fr; overflow: hidden;
  transition: grid-template-rows .45s var(--ease-power);
}
.faq__panel-inner { min-height: 0; }
.faq__item.is-open .faq__panel { grid-template-rows: 1fr; }
.faq__panel p { padding: 0 .5rem 1.4rem; max-width: 52rem; color: var(--ink-2); opacity: 0; transition: opacity .35s .15s; }
.faq__item.is-open .faq__panel p { opacity: 1; }
.faq__panel strong { color: var(--orange); }

/* ============================================================
   START HERE
   ============================================================ */
.start__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6rem); max-width: 1400px; margin: 0 auto;
}
.section--accent .section__label { color: var(--ink); }
.start__title {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(2.6rem, 6vw, 5rem); line-height: .95;
}
.start__title .tick { color: var(--ink); }
.start__lede { margin-top: 1.5rem; font-size: clamp(1rem, 1.7vw, 1.2rem); max-width: 32rem; }
.start__reassure { list-style: none; margin-top: 1.8rem; display: grid; gap: .7rem; }
.start__reassure li { display: flex; align-items: center; gap: .7rem; font-weight: 600; }
.start__reassure .cross-icon { fill: var(--ink); width: .75em; height: .75em; }
.start__nap { margin-top: 2.5rem; display: grid; gap: .8rem; font-size: .95rem; }
.start__nap a { text-decoration: underline; text-underline-offset: 3px; }
.start__serving { font-size: .85rem; opacity: .85; max-width: 30rem; }
.form-shell {
  background: var(--white); min-height: 560px; height: 100%;
  box-shadow: 0 30px 60px rgba(0,0,0,.18);
  display: flex; align-items: center; justify-content: center;
}
/* the GHL form renders 601px tall at every width - size past it so
   the iframe never scrolls internally */
.form-shell iframe { width: 100%; height: 100%; min-height: 620px; border: 0; }
@media (max-width: 860px) { .start__inner { grid-template-columns: 1fr; } }

/* ============================================================
   VISIT
   ============================================================ */
.visit__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6rem); max-width: 1400px; margin: 0 auto; align-items: center;
}
.visit__hours { margin-top: 2rem; border-collapse: collapse; width: 100%; max-width: 30rem; }
.visit__hours th, .visit__hours td { text-align: left; padding: .7rem 0; border-bottom: 1px solid rgba(16,16,16,.12); }
.visit__hours th { font-family: var(--mono); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gray); font-weight: 500; padding-right: 1.5rem; }
.visit__hours td { font-weight: 600; }
.visit__map {
  display: inline-block; margin-top: 1.8rem; font-family: var(--mono);
  font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--orange);
}
.visit__img { aspect-ratio: 4 / 3; }
.visit__mapembed { margin-top: 1.6rem; aspect-ratio: 16 / 9; max-width: 30rem; background: rgba(16,16,16,.06); }
.visit__mapembed iframe {
  display: block; width: 100%; height: 100%; border: 0;
  filter: grayscale(1) contrast(1.05); transition: filter .4s;
}
.visit__mapembed:hover iframe { filter: none; }
@media (max-width: 860px) { .visit__grid { grid-template-columns: 1fr; } }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--ink); color: var(--paper); padding: clamp(4rem, 8vw, 7rem) var(--pad) 2rem; overflow: hidden; }
.footer__mantra {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(3rem, 11vw, 10rem); line-height: .92;
  color: transparent; -webkit-text-stroke: 1.5px rgba(242,243,245,.75);
  max-width: 1400px; margin: 0 auto;
}
.footer__mantra .tick { color: var(--orange); -webkit-text-stroke: 0; }
.footer__row {
  max-width: 1400px; margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  display: flex; align-items: center; gap: 2.5rem; flex-wrap: wrap;
  border-top: 1px solid rgba(242,243,245,.15); padding-top: 2.5rem;
}
.footer__logo { display: block; width: 130px; height: auto; }
.footer__info { margin-right: auto; font-size: .9rem; color: rgba(242,243,245,.7); }
.footer__info a { text-decoration: underline; text-underline-offset: 3px; }
.footer__legal { max-width: 1400px; margin: 2.5rem auto 0; font-family: var(--mono); font-size: .75rem; letter-spacing: .08em; color: rgba(242,243,245,.4); }

/* ============================================================
   STICKY MOBILE CTA BAR
   ============================================================ */
.ctabar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 920;
  display: none; align-items: stretch;
  background: var(--ink);
  padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 24px rgba(0,0,0,.25);
  transform: translateY(110%); transition: transform .4s var(--ease-power);
}
.ctabar.is-live { transform: translateY(0); }
.ctabar__call {
  flex: 1; display: flex; align-items: center; justify-content: center;
  margin-right: .8rem; border: 1px solid rgba(242,243,245,.35);
  font-family: var(--mono); font-size: .8rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--paper);
}
.ctabar__start { flex: 1.4; justify-content: center; }
@media (max-width: 760px) {
  .ctabar { display: flex; }
  .footer { padding-bottom: 6.5rem; }
}

/* ============================================================
   MODAL
   ============================================================ */
.modal { position: fixed; inset: 0; z-index: 950; display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 3rem); }
.modal[hidden] { display: none; }
.modal__scrim { position: absolute; inset: 0; background: rgba(10,10,10,.75); backdrop-filter: blur(12px); }
.modal__box {
  position: relative; background: var(--ink); color: var(--paper);
  width: min(1100px, 100%); max-height: 90vh; overflow: auto;
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
}
.modal__close {
  position: absolute; top: 1rem; right: 1rem; z-index: 2;
  width: 2.6rem; height: 2.6rem; display: grid; place-items: center;
  background: var(--orange);
}
/* ---------- lead form modal ---------- */
.modal--form .modal__box {
  /* white, not paper: the GHL iframe renders on white and any other
     backdrop shows a seam around it */
  grid-template-columns: 1fr; width: min(600px, 100%);
  background: var(--white); color: var(--ink);
}
.formmodal__head { padding: clamp(1.6rem, 3vw, 2.2rem) clamp(1.6rem, 3vw, 2.2rem) 0; }
.formmodal__context {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--orange); margin-bottom: .8rem;
  max-width: 22rem;
}
.formmodal__context[hidden] { display: none; }
.formmodal__title {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.8rem, 4vw, 2.4rem); line-height: 1;
}
.formmodal__note { font-size: .9rem; color: var(--gray); margin-top: .7rem; }
/* A 601px form plus a heading cannot fit a phone viewport, so give the
   dialog the whole screen: what is left to scroll is then minimal. */
@media (max-width: 640px) {
  .modal--form { padding: 0; }
  .modal--form .modal__box { width: 100%; height: 100%; max-height: 100vh; }
}
/* the dialog is the card here, so the shell drops its own chrome */
.modal--form .form-shell {
  box-shadow: none; min-height: 0; background: transparent;
  padding: 0 clamp(.6rem, 1.5vw, 1rem) clamp(.6rem, 1.5vw, 1rem);
}


.modal__close .cross-icon { fill: var(--white); transform: rotate(45deg); width: 1.1rem; height: 1.1rem; transition: transform .3s var(--ease-power); }
.modal__close:hover .cross-icon { transform: rotate(135deg); }
.modal__video { aspect-ratio: 16 / 9; background: #000; align-self: center; }
.modal__video iframe { width: 100%; height: 100%; border: 0; aspect-ratio: 16/9; display: block; }
.modal__aside { padding: 2rem; display: flex; flex-direction: column; }
.modal__label { font-family: var(--mono); font-size: .75rem; letter-spacing: .3em; text-transform: uppercase; color: var(--orange); }
.modal__name { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 2.2rem; margin: .5rem 0 1.2rem; }
.modal__transcript { font-size: .95rem; line-height: 1.7; color: rgba(242,243,245,.8); }
.modal__transcript mark { background: var(--orange); color: var(--ink); padding: .05em .25em; }
.modal__transcript .transcript-note { margin-top: 1.2rem; font-family: var(--mono); font-size: .75rem; letter-spacing: .05em; color: rgba(242,243,245,.45); }
@media (max-width: 860px) {
  .modal__box { grid-template-columns: 1fr; }
}

/* ---------- QA harness (only via ?qa query param) ---------- */
html.qa { scroll-behavior: auto; }
/* the hero sizes itself at every width now - no harness override needed */

/* ============================================================
   ANIMATION PRIMITIVES (JS-gated: content fully visible w/o JS)
   ============================================================ */
html.js .anim-label, html.js .anim-title { visibility: hidden; }
html.js .anim-label.is-ready, html.js .anim-title.is-ready { visibility: visible; }

/* ============================================================
   BLOG (posts, listing cards, pager)
   ============================================================ */
.post { max-width: 760px; margin: 0 auto; padding: clamp(7rem, 12vw, 10rem) var(--pad) clamp(4rem, 8vw, 7rem); }
.post__eyebrow { font-family: var(--mono); font-size: .8rem; letter-spacing: .25em; text-transform: uppercase; color: var(--orange); }
.post__title { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(2.4rem, 6vw, 4.5rem); line-height: .98; margin: 1rem 0; }
.post__meta { font-family: var(--mono); font-size: .8rem; letter-spacing: .05em; color: var(--gray); margin-bottom: 2rem; }
.post__hero { aspect-ratio: 16/9; overflow: hidden; margin: 0 0 2.5rem; }
.post__hero img { width: 100%; height: 100%; object-fit: cover; }
.post__body { font-size: 1.1rem; line-height: 1.75; }
.post__body h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 2.5rem 0 1rem; }
.post__body p { margin-bottom: 1.3rem; }
.post__body img { width: 100%; margin: 2rem 0; }
.post__tags { margin-top: 3rem; display: flex; flex-wrap: wrap; gap: .6rem; }
.post__tag { font-family: var(--mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--orange); border: 1px solid rgba(237,142,28,.4); padding: .3em .8em; }

.bloglist { padding: clamp(7rem, 12vw, 10rem) var(--pad) clamp(4rem, 8vw, 7rem); }
.bloglist__head { max-width: 1400px; margin: 0 auto clamp(2.5rem, 5vw, 4rem); }
.post-card { text-decoration: none; }
.post-card__media { aspect-ratio: 16/10; overflow: hidden; margin-bottom: 1rem; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-power); }
.post-card:hover .post-card__media img { transform: scale(1.05); }

.pager { max-width: 1400px; margin: clamp(2.5rem, 5vw, 4rem) auto 0; display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.pager__link { font-family: var(--mono); font-size: .85rem; padding: .5em .9em; border: 1px solid rgba(16,16,16,.2); color: var(--ink); text-decoration: none; }
.pager__link.is-current { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pager__link:hover { border-color: var(--orange); color: var(--orange); }