/* ============================================================
   Wellness Sports Inc — home page layout
   Light editorial system taking its structure from the
   reference build at functionhealth.com: cream canvas, serif
   display with one italic phrase, pill actions, soft panels.
   Loaded only by index.html; tokens live in site.css.
   ============================================================ */

/* Every .panel draws a 22vh fade-to-background band ABOVE itself, to blend
   into the fixed scroll stage the home page used to have. The stage is gone,
   and the band was landing on top of the claim pills and greying them out. */
.panel::before { display: none; }

/* ── hero ────────────────────────────────────────────────── */

.home-hero { padding: clamp(1rem, 2.5vw, 1.75rem) var(--shell) 0; }
.home-hero-inner { max-width: 1320px; margin: 0 auto; }

.hero-card {
  position: relative; overflow: hidden;
  border-radius: clamp(20px, 2.4vw, 34px);
  min-height: clamp(27rem, 60vh, 40rem);
  display: flex; align-items: flex-end;
  background: var(--bg-lift);
}
/* A wide group photograph in a wide band: the crop is pinned above centre so
   the watermark in the sky survives it and the back row keeps its heads. */
.hero-card > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 32%;
}
.hero-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(18, 26, 23, .86) 0%, rgba(18, 26, 23, .64) 38%,
                                      rgba(18, 26, 23, .14) 70%, rgba(18, 26, 23, 0) 100%);
}
.hero-body {
  position: relative; z-index: 2;
  padding: clamp(1.6rem, 4vw, 3.4rem);
  max-width: 46rem; color: #fbf7ef;
}
.hero-body .eyebrow { color: rgba(251, 247, 239, .72); }
.hero-body .display { color: #fbf7ef; }
.hero-body .ital { color: #a9e3cd; }
.hero-body .sub { max-width: 34rem; color: rgba(251, 247, 239, .82); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }
.hero-actions .cta { margin-top: 0; }
.hero-card .cta-line { color: #fbf7ef; border-color: rgba(251, 247, 239, .42); }
.hero-card .cta-line:hover { border-color: #fbf7ef; background: rgba(251, 247, 239, .12); }

/* The facts sit over the bright side of the photograph, where the hero's
   left-to-right scrim has already run out — so they carry their own. */
/* At phone width the left-to-right scrim never reaches the right edge, so the
   lede ends up on bright faces. Narrow screens get a bottom-up scrim with the
   crop pushed up, which puts the faces above the text instead of behind it. */
@media (max-width: 700px) {
  .hero-card::after {
    background: linear-gradient(to top, rgba(18, 26, 23, .93) 0%, rgba(18, 26, 23, .80) 42%,
                                        rgba(18, 26, 23, .34) 72%, rgba(18, 26, 23, .06) 100%);
  }
  .hero-card > img { object-position: 50% 20%; }
}

.hero-facts {
  position: relative; z-index: 2; align-self: flex-end;
  display: none; gap: 1.1rem; flex-direction: column; text-align: right;
  margin: 0 clamp(1.6rem, 4vw, 3.4rem) clamp(1.6rem, 4vw, 3.4rem) auto;
  padding: 1.3rem 1.5rem;
  border: 1px solid rgba(251, 247, 239, .18); border-radius: 18px;
  background: rgba(14, 20, 18, .46); backdrop-filter: blur(12px);
}
.hero-fact b {
  display: block; font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.5rem, 2.2vw, 2.1rem); line-height: 1.1; color: #fbf7ef;
}
.hero-fact span {
  font-size: .76rem; letter-spacing: .09em; text-transform: uppercase;
  color: rgba(251, 247, 239, .62);
}
@media (min-width: 1000px) { .hero-facts { display: flex; } }

/* ── claim pills under the hero ──────────────────────────── */

.claims {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem;
  margin: clamp(1.4rem, 3vw, 2.2rem) auto 0; max-width: 62rem;
}
/* These are the proof line, not fine print: --muted at .84rem inside a 3%
   fill reads as disabled text, and on the dark theme it disappears. */
.claim {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .55rem 1.1rem; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface-hi);
  font-size: .88rem; font-weight: 500; color: var(--ink);
}
.claim::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); flex: none;
}
:root[data-theme="dark"] .claim::before { box-shadow: 0 0 10px var(--accent); }

/* ── pillar cards ────────────────────────────────────────── */

.pillar-grid {
  display: grid; gap: clamp(.9rem, 1.6vw, 1.3rem);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.pillar {
  display: flex; flex-direction: column;
  padding: clamp(1.6rem, 2.6vw, 2.1rem);
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--bg-lift);
  transition: transform .35s var(--ease-out), box-shadow .35s;
}
.pillar:hover { transform: translateY(-4px); box-shadow: 0 20px 50px -26px rgba(42, 43, 47, .45); }
.pillar-icon {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 14px; background: var(--glow); color: var(--accent); margin-bottom: 1.2rem;
}
.pillar-icon svg { width: 21px; height: 21px; }
.pillar h3 {
  font-family: var(--serif); font-weight: 400; font-size: 1.6rem;
  letter-spacing: -.01em; line-height: 1.1;
}
.pillar p { margin-top: .6rem; color: var(--muted); font-size: .95rem; line-height: 1.6; }
.pillar ul { margin-top: 1.2rem; }
.pillar li {
  padding: .5rem 0; border-top: 1px solid var(--line);
  color: var(--faint); font-size: .84rem;
}

/* ── the place: the client's own facility photographs ────── */

.place-strip {
  display: grid; gap: clamp(.7rem, 1.4vw, 1.1rem);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
/* The ratio lives on the figure, not the img: the img carries width/height
   attributes, and that presentational height beats aspect-ratio outright —
   the tiles came out as 180px-wide, 500px-tall slivers. */
.place {
  position: relative; margin: 0; overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 16px; border: 1px solid var(--line);
  background: var(--surface);
}
.place img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%;
  transition: transform .5s var(--ease-out);
}
.place:hover img { transform: scale(1.04); }
.place figcaption {
  position: absolute; inset: auto 0 0 0; padding: 2.4rem .9rem .85rem;
  background: linear-gradient(to top, rgba(14, 18, 16, .88), rgba(14, 18, 16, 0));
  color: #fbf7ef;
}
.place figcaption b { display: block; font-size: .94rem; font-weight: 500; letter-spacing: -.01em; }
.place figcaption span {
  display: block; margin-top: .15rem;
  font-size: .76rem; line-height: 1.45; color: rgba(251, 247, 239, .72);
}

/* ── anatomy block ───────────────────────────────────────── */

.anat-home {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
  align-items: center;
}
.anat-figure {
  position: relative; display: grid; place-items: center;
  border-radius: var(--r-card); border: 1px solid var(--line);
  background:
    radial-gradient(72% 60% at 50% 16%, var(--glow), transparent 72%),
    var(--bg-lift);
  padding: clamp(1.4rem, 3vw, 2.4rem);
  min-height: clamp(22rem, 52vh, 34rem);
  overflow: hidden;
}
.anat-figure img { width: auto; height: clamp(18rem, 44vh, 29rem); }
.anat-tagline {
  position: absolute; left: 1.1rem; bottom: 1rem;
  font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; color: var(--faint);
}
.anat-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.6rem; }
.anat-chip {
  padding: .4rem .85rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  font-size: .82rem; color: var(--muted);
}
.anat-cta { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; margin-top: 2rem; }
.anat-cta .cta { margin-top: 0; }
@media (max-width: 880px) { .anat-home { grid-template-columns: 1fr; } }

/* ── numbered steps ──────────────────────────────────────── */

.step-grid {
  display: grid; gap: clamp(1.4rem, 3vw, 2.4rem);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.step-item { border-top: 1px solid var(--line-strong); padding-top: 1.2rem; }
.step-n {
  display: block;
  font-family: var(--serif); font-weight: 400; font-size: 2.4rem; line-height: 1;
  color: var(--accent); opacity: .5;
}
.step-item h3 { margin-top: .8rem; font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; }
.step-item p { margin-top: .45rem; color: var(--muted); font-size: .92rem; line-height: 1.6; }

/* ── celebrity gallery: the client's own photos with their clients ─ */

.celeb-grid {
  display: grid; gap: clamp(.7rem, 1.4vw, 1.1rem);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.celeb {
  position: relative; margin: 0; overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: 16px; border: 1px solid var(--line); background: var(--surface);
}
.celeb img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%;
  transition: transform .5s var(--ease-out);
}
.celeb:hover img { transform: scale(1.04); }
.celeb figcaption {
  position: absolute; inset: auto 0 0 0; padding: 2.2rem .9rem .8rem;
  background: linear-gradient(to top, rgba(14, 18, 16, .9), rgba(14, 18, 16, 0));
  color: #fbf7ef; font-size: .95rem; font-weight: 500; letter-spacing: -.01em;
}

/* ── name wall ───────────────────────────────────────────── */

.name-wall {
  display: flex; flex-wrap: wrap; gap: .6rem 2.4rem;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.15rem, 2.1vw, 1.7rem); line-height: 1.45; color: var(--muted);
}
.name-wall span { position: relative; }
.name-wall span + span::before {
  content: "·"; position: absolute; left: -1.35rem; color: var(--accent); opacity: .6;
}

/* ── testimonials, three up ──────────────────────────────── */

.quote-3 {
  display: grid; gap: clamp(1.4rem, 3vw, 2.6rem);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  text-align: center;
}
.quote-3 .stars { color: var(--accent-warm); letter-spacing: .25em; font-size: .85rem; }
.quote-3 p { margin-top: .9rem; font-size: .98rem; line-height: 1.65; }
.quote-3 cite {
  display: block; margin-top: .9rem; color: var(--faint);
  font-size: .82rem; font-style: normal;
}

/* ── branch strip ────────────────────────────────────────── */

.branch-strip {
  display: grid; gap: clamp(.9rem, 1.6vw, 1.3rem);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.branch-mini {
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--bg-lift);
  transition: border-color .3s;
}
.branch-mini:hover { border-color: var(--accent); }
.branch-mini h3 {
  margin-top: .5rem; font-family: var(--serif); font-weight: 400;
  font-size: 1.45rem; letter-spacing: -.01em;
}
.branch-mini p { margin-top: .6rem; color: var(--muted); font-size: .88rem; line-height: 1.6; }
.branch-mini .arrow-link { margin-top: 1.1rem; }

/* ── FAQ ─────────────────────────────────────────────────── */

.faq { max-width: 52rem; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem .2rem; cursor: pointer; list-style: none;
  font-size: 1.02rem; font-weight: 500; letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none; color: var(--accent); font-size: 1.35rem; line-height: 1;
  transition: transform .25s var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p {
  padding: 0 .2rem 1.35rem; color: var(--muted); font-size: .95rem; line-height: 1.68;
  max-width: 44rem;
}

/* ── closing band ────────────────────────────────────────── */

/* A deliberate dark slab, in BOTH themes. It must not be painted with
   var(--ink) / var(--on-ink): those swap on the dark theme, the band turns
   near-white, and every cream label inside it — the eyebrow, the lede, the
   outline button — goes invisible against its own background. On the dark
   theme the slab lifts off the page instead of inverting against it. */
.closer {
  border-radius: clamp(20px, 2.4vw, 34px);
  background: #1b1f24; color: #fbf7ef;
  border: 1px solid transparent;
  padding: clamp(2.6rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3rem);
  text-align: center;
}
:root[data-theme="dark"] .closer { background: #11161c; border-color: var(--line); }
.closer .eyebrow { color: rgba(251, 247, 239, .58); }
.closer .section-title { color: #fbf7ef; max-width: 20ch; margin: 0 auto; }
.closer .section-lede { color: rgba(251, 247, 239, .68); margin-left: auto; margin-right: auto; }
.closer .ital { color: #a9e3cd; }
.closer-actions { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin-top: 2rem; }
.closer-actions .cta { margin-top: 0; }
.closer .cta-line { color: #fbf7ef; border-color: rgba(251, 247, 239, .34); }
.closer .cta-line:hover { border-color: #fbf7ef; background: rgba(251, 247, 239, .1); }

.pillar .pillar-sub {
  margin-top: .35rem; color: var(--accent); font-size: .78rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
}
.anat-figure .bm img { height: clamp(18rem, 44vh, 29rem); }
.anat-chips a.anat-chip { text-decoration: none; transition: border-color .2s, color .2s; }
.anat-chips a.anat-chip:hover { border-color: var(--accent); color: var(--accent); }
.anat-figure:has(.bm3) { padding: 0; }
.anat-figure:has(.bm3.is-3d) .anat-tagline { display: none; }
.anat-figure:has(.bm3) { padding: 0; }
.anat-figure:has(.bm3.is-3d) .anat-tagline { display: none; }