/* ============================================================
   TEMPLATE ONE - inner-pages.css
   All interior page styles. Loaded alongside styles.css on every
   page except the homepage. Section styles are added per template
   type in build phase A3; the foundations below are shared by all
   interior templates and are depended on by systems.js.
   ============================================================ */

/* ---------- INNER HERO (all interior pages) ---------- */
.inner-hero{padding:clamp(40px,6vw,72px) 0 clamp(40px,6vw,64px)}
.inner-hero .kicker{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:var(--color-accent-dim)}
.inner-hero h1{font-variation-settings:'opsz' 144,'wght' 540,'SOFT' 8;
  font-size:clamp(2.6rem,6vw,5rem);line-height:1.04;margin-top:18px;letter-spacing:-.012em}
/* Service + What We Treat pages (service, condition and service-hub
   templates, tagged .svc-title): page title at half the standard
   inner-hero size. Desktop is exactly 50% (2.5rem vs 5rem); the
   floor is held at 1.5rem so phones keep a clear H1 over body text. */
.inner-hero.svc-title h1{font-size:clamp(1.5rem,3vw,2.5rem);line-height:1.1}
/* line-mask H1 reveal (System 5 interior variant):
   <h1><span class="line"><span class="line-inner">…</span></span></h1> */
.inner-hero h1 .line{display:block;overflow:hidden}
.inner-hero h1 .line-inner{display:block}
.js .inner-hero h1 .line-inner{transform:translateY(110%)}
.inner-hero .sub{margin-top:18px;max-width:52ch}
.inner-hero .cta{display:flex;align-items:center;gap:12px 18px;flex-wrap:wrap;margin-top:26px}
/* unbreakable master tokens ([TEAM_MEMBER_1_NAME]) must never blow
   out a grid column via min-width:auto; harmless with real copy */
.inner-hero h1{overflow-wrap:anywhere}
.inner-hero .shell>*{min-width:0}

/* ---------- IN-PAGE ANCHOR BAR (detail pages) ---------- */
.anchor-bar{position:sticky;top:72px;z-index:40;background:rgba(246,245,241,.95);
  backdrop-filter:blur(10px);border-bottom:1px solid rgba(20,35,28,.08)}
.anchor-bar .shell{display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x proximity;
  scrollbar-width:none;padding-top:0;padding-bottom:0}
.anchor-bar .shell::-webkit-scrollbar{display:none}
.anchor-bar a{white-space:nowrap;scroll-snap-align:start;text-decoration:none;font-size:.82rem;
  font-weight:600;padding:14px 14px;opacity:.7;border-bottom:2px solid transparent;
  transition:opacity .3s,border-color .3s;min-height:44px;display:inline-flex;align-items:center}
  /* .7 (was .6, 4.48:1 on --color-bg-light - fails AA): 6.26:1 */
.anchor-bar a.active{opacity:1;color:var(--color-accent-dim);border-bottom-color:var(--color-accent)}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce){
  .js .inner-hero h1 .line-inner{transform:none}
}

/* ============================================================
   ===== DETAIL PAGES (service + condition shells) =====
   Appended in build phase A3. Pattern source for all 19 detail
   pages (6 services, 13 conditions). Depends on the design tokens
   in styles.css and the .inner-hero / .anchor-bar foundations
   above. Nothing above this banner is modified. Reuses homepage
   vocabulary where possible: .split, .phases/.phase/.pnum,
   .faq-item accordions, .movelinks chips, .car carousels, .tcard,
   .form-card multi-step forms, .wave dividers.
   ============================================================ */

/* ---------- BREADCRUMB (inside the inner hero, above the kicker) ---------- */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  font-size:.76rem;font-weight:600;margin-bottom:16px}
/* opacity lives on the trail link and separator individually, not on
   the .crumb container: a parent's opacity composites its whole
   subtree as one semi-transparent layer, so a child's opacity:1
   cannot "undo" it. That is what happened here previously - .cur had
   opacity:1 but was still rendered at the container's .62 because
   the container itself carried the opacity. Scoping opacity to the
   trail link/separator only leaves .cur genuinely full-strength. */
.crumb a{text-decoration:none;opacity:.62}
.crumb a:hover{color:var(--color-accent-dim);opacity:1}
.crumb .sep{opacity:.5}
/* accent-dim at full opacity on --color-bg-light is ~12.6:1; reads
   correctly as the "current page" (highest-emphasis) crumb */
.crumb .cur{color:var(--color-accent-dim)}

/* ---------- DETAIL HERO: copy column + sticky sidebar form ----------
   Desktop: two columns, the form-card sticks in the right column.
   Mobile (<=900px): single column, so the sidebar naturally renders
   inline AFTER the hero copy (DOM order, no JS). */
.detail-hero .shell{display:grid;grid-template-columns:1.15fr .85fr;
  gap:clamp(30px,4.5vw,64px);align-items:start}
@media(max-width:900px){.detail-hero .shell{grid-template-columns:1fr}}
.detail-hero .hero-copy .kicker{display:block}
.detail-hero .hero-copy h1{margin-top:14px}
.detail-hero .hero-copy .cta{margin-top:26px}
.hero-aside{position:sticky;top:96px}
@media(max-width:900px){.hero-aside{position:static;margin-top:34px}}

/* ---------- 01 CAUSES: sticky intro + photo | accordion ---------- */
.causes-grid{display:grid;grid-template-columns:.92fr 1.08fr;
  gap:clamp(28px,4.5vw,64px);align-items:start;margin-top:clamp(28px,4vw,44px)}
@media(max-width:900px){.causes-grid{grid-template-columns:1fr}}
/* sticky clears the sticky nav (72px) + anchor bar (~48px) */
.causes-intro{position:sticky;top:132px}
@media(max-width:900px){.causes-intro{position:static}}
.causes-intro p{max-width:46ch}
.causes-intro .img-reveal{margin-top:24px;aspect-ratio:4/3}
.causes-acc .faq-list{margin-top:0}
/* the bold cause name reads as the accordion trigger (Fraunces) */
.causes-acc .faq-q{font-family:var(--font-display);
  font-variation-settings:'opsz' 50,'wght' 560;font-size:1.06rem}

/* ---------- SUBTLE SECTION TINT (how-PT-helps / who-its-for) ----------
   one soft brand-tinted band for light-on-light rhythm without a
   full dark break */
.sec-tint{background:rgba(95,10,135,.05)}

/* Treatment-tools chip row on the how-PT-helps split reuses
   .movelinks (light chips, from styles.css) as-is. No new CSS. */

/* ---------- WHO IT'S FOR: light benefit cards (service page) ----------
   sits inside a .car.cols-3 so it inherits the System 2 mobile snap
   carousel automatically. */
.bcard{background:#fff;border-radius:20px;padding:clamp(22px,2.6vw,30px);
  box-shadow:0 8px 28px rgba(20,35,28,.08);border:1px solid rgba(20,35,28,.06);
  display:flex;flex-direction:column;gap:12px;height:100%;user-select:none;
  transition:transform .5s var(--spring),box-shadow .5s}
.bcard:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(20,35,28,.13)}
.bcard .bnum{font-family:var(--font-display);
  font-variation-settings:'opsz' 144,'wght' 320,'SOFT' 30;
  font-size:clamp(2rem,3.4vw,2.8rem);line-height:.9;color:var(--color-accent-dim)}
.bcard h3{font-size:1.15rem}
.bcard p{font-size:.92rem;line-height:1.6;opacity:.72}

/* What-to-expect numbered steps reuse .phases/.phase/.pnum (styles.css). */

/* ---------- PRODUCT GRID (external affiliate links: products, PT product recommendations) ---------- */
.product-group{margin-top:clamp(28px,3.5vw,44px)}
.product-group h3{font-size:1.1rem;margin-bottom:4px}
.product-group .pg-note{font-size:.9rem;opacity:.72;max-width:62ch;margin-bottom:18px}
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
.product-card{background:#fff;border-radius:16px;padding:16px 14px;text-align:center;text-decoration:none;
  color:var(--color-ink-light);display:flex;flex-direction:column;align-items:center;gap:8px;
  box-shadow:0 4px 16px rgba(20,35,28,.08);transition:transform .25s var(--spring),box-shadow .25s}
.product-card:hover{transform:translateY(-4px);box-shadow:0 10px 28px rgba(20,35,28,.14)}
.product-card img{width:100%;max-width:100px;aspect-ratio:1;object-fit:contain}
.product-card .pc-name{font-size:.85rem;font-weight:600;line-height:1.35}
.product-card .pc-price{font-size:.78rem;color:var(--color-accent-dim);font-weight:700}
.product-card .pc-link{font-size:.74rem;font-weight:700;color:var(--color-accent);margin-top:auto;padding-top:4px}

/* ---------- CALLOUT (accent left border, tinted panel) ----------
   Distinct from body text, works on light backgrounds.
   Demonstrated on the service page's "What to Expect" as a
   "Good to know" note. Service clones (dry-needling, cupping, etc.)
   reuse this component for safety / contraindication notes. */
.callout{background:var(--accent-soft);border-left:4px solid var(--color-accent);
  border-radius:0 14px 14px 0;max-width:760px;
  padding:clamp(18px,2.4vw,26px) clamp(20px,2.8vw,30px);
  margin-top:clamp(28px,3.5vw,42px)}
.callout .callout-label{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--color-accent-dim);margin-bottom:8px}
.callout p{font-size:.94rem;line-height:1.62;opacity:.85;max-width:62ch}

/* ---------- EDITORIAL TESTIMONIAL (dark rhythm break) ---------- */
.editorial{overflow:hidden}
.editorial .shell{max-width:900px;text-align:center}
.editorial .way{margin:0 auto}
.editorial .qmark{display:block;font-family:var(--font-display);
  font-variation-settings:'opsz' 144,'wght' 300;font-size:clamp(7rem,20vw,15rem);
  line-height:.7;opacity:.1;color:var(--color-accent);margin-bottom:-.18em;
  user-select:none;pointer-events:none}
.editorial blockquote{font-family:var(--font-display);
  font-variation-settings:'opsz' 90,'wght' 400,'SOFT' 40;
  font-size:clamp(1.5rem,3.4vw,2.6rem);line-height:1.32;letter-spacing:-.01em}
.editorial blockquote em{font-style:italic;color:var(--color-accent-on-dark)}
.editorial .ecite{margin-top:clamp(22px,3vw,34px);font-family:var(--font-body);
  font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:var(--color-accent-on-dark)}

/* ---------- RELATED ROW: light photo cards (.tcard variant) ----------
   .tcard defaults to the dark-section treatment; .card-light re-skins
   it for the light related-conditions / explore-more rows. */
.card-light{background:#fff;border-color:rgba(20,35,28,.07);
  box-shadow:0 8px 28px rgba(20,35,28,.08);color:var(--color-ink-light)}
.card-light:hover{border-color:rgba(95,10,135,.5);
  box-shadow:0 22px 50px rgba(20,35,28,.13)}
.card-light .body p{opacity:.7}

/* ---------- REDUCED MOTION (detail-page additions) ----------
   No new hidden-by-default states were introduced (entrances reuse
   the .js-gated [data-load]/[data-reveal]/.line-inner/.img-reveal
   contracts, which already have fallbacks in styles.css). Sticky
   positioning is motion-safe. Card hover transforms are neutralized
   under reduced motion for consistency. */
@media (prefers-reduced-motion: reduce){
  .bcard,.card-light{transition:none}
  .bcard:hover,.card-light:hover{transform:none}
}

/* ============================================================
   ===== LANDING PAGES =====
   The two collection landings: /services/ and /what-we-treat/.
   Appended AFTER all existing content; nothing above is modified.
   Both templates reuse existing vocabulary (.inner-hero, .crumb,
   .way, .split, .wave, .form-card, .tcard.card-light, .editorial,
   .hoursbox, .mapbox) and add ONLY the full card grid below.
   The grid deliberately does NOT use .car: 13 condition cards in a
   single mobile snap row is unusable, so it stacks responsively
   3-col (desktop) -> 2-col (tablet) -> 1-col (mobile). No new
   hidden-by-default states are introduced, so the existing
   reduced-motion fallbacks in styles.css / above cover these pages.
   ============================================================ */

/* landing hero CTA spacing (plain inner-hero has no sidebar form) */
.inner-hero .cta{margin-top:26px}

/* ---------- FULL CARD GRID (services 6 / conditions 13) ----------
   Cards reuse .tcard.card-light (hover / active / focus states and
   the System 4 .img-reveal already defined). Only the grid track
   sizing and the Fraunces index number are new. */
.landing-grid{display:grid;gap:clamp(14px,1.6vw,18px);
  margin-top:clamp(32px,4vw,50px);grid-template-columns:1fr}
@media(min-width:600px){.landing-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.landing-grid{grid-template-columns:repeat(3,1fr)}}
/* index number echoes the numbered wayfinding language (Fraunces
   display, styled like .bnum from the service detail template) */
.landing-grid .lnum, .car .lnum{font-family:var(--font-display);
  font-variation-settings:'opsz' 144,'wght' 320,'SOFT' 30;
  font-size:clamp(1.5rem,2.4vw,2rem);line-height:.9;
  color:var(--color-accent-dim);display:block;font-variant-numeric:tabular-nums}

/* ---------- UNEVEN-COUNT LANDING GRIDS ----------
   .landing-grid's fixed repeat(2/3,1fr) tracks left-pack an incomplete
   final row whenever the item count is not a multiple of 2 or 3 (team
   page: 19 members; blog page 2: 11 posts). Flexbox with
   justify-content:center fixes this without touching .landing-grid
   itself, which other pages rely on with counts that divide evenly. */
.landing-grid.uneven-grid{display:flex;flex-wrap:wrap;justify-content:center}
.landing-grid.uneven-grid>*{flex:0 1 100%}
@media(min-width:600px){.landing-grid.uneven-grid>*{flex:0 1 calc(50% - 9px)}}
@media(min-width:960px){.landing-grid.uneven-grid>*{flex:0 1 calc(33.333% - 12px)}}
/* Four cards (resources page): 2 x 2, then one row of four on wide screens */
@media(min-width:960px){.landing-grid.uneven-grid.four-up>*{flex-basis:calc(50% - 9px)}}
@media(min-width:1100px){.landing-grid.uneven-grid.four-up>*{flex-basis:calc(25% - 13.5px)}}

/* ============================================================
   ===== STAFF PAGES =====
   The staff landing (/staff/) and the cloneable staff bio shell
   (/staff/team-member-N/). Appended AFTER all existing content;
   nothing above this banner is modified. Reuses existing
   vocabulary wherever possible: .inner-hero + line-mask H1,
   .crumb, .way, .car.cols-3 + .car-progress (System 2),
   .mcard / .card-badge, .img-reveal (System 4), .editorial
   (dark quote), .sec-tint, .form-card, .wave, .hoursbox, .mapbox.
   Only the light pillar cards, the bio split hero, the favorites
   row, and the bio gallery are new below. No new hidden-by-default
   states are introduced (entrances reuse the .js-gated
   [data-load]/[data-reveal]/.img-reveal/.line-inner contracts,
   which already have reduced-motion fallbacks in styles.css); the
   spring hover transforms added here are neutralized under reduced
   motion at the end of this block.
   ============================================================ */

/* ---------- THREE PILLARS (staff landing) ----------
   Light value cards (STAFF / PATIENTS / COMMUNITY). Sit inside a
   .car.cols-3 so they inherit the System 2 mobile snap carousel
   automatically, matching the team grid below. */
.pillar{background:#fff;border-radius:20px;padding:clamp(24px,2.8vw,34px);
  box-shadow:0 8px 28px rgba(20,35,28,.08);border:1px solid rgba(20,35,28,.06);
  display:flex;flex-direction:column;gap:14px;height:100%;user-select:none;
  transition:transform .5s var(--spring),box-shadow .5s}
.pillar:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(20,35,28,.13)}
.pillar .plabel{font-family:var(--font-display);
  font-variation-settings:'opsz' 60,'wght' 560;font-size:.82rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--color-accent-dim)}
.pillar p{font-size:.94rem;line-height:1.62;opacity:.74}

/* ---------- BIO SPLIT HERO (staff bio) ----------
   Copy column + portrait. Desktop two columns; mobile stacks so the
   portrait renders after the copy (DOM order, no JS). */
.bio-hero .shell{display:grid;grid-template-columns:1.1fr .9fr;
  gap:clamp(30px,4.5vw,64px);align-items:start}
@media(max-width:900px){.bio-hero .shell{grid-template-columns:1fr}}
.bio-hero .hero-copy .kicker{display:block}
.bio-hero .hero-copy h1{margin-top:14px}
.bio-hero .bio-role{margin-top:14px;font-family:var(--font-display);
  font-variation-settings:'opsz' 50,'wght' 540;font-size:1.05rem;
  color:var(--color-accent-dim)}
.bio-hero .hero-copy .sub{margin-top:18px;max-width:60ch}
.bio-hero .hero-copy .cta{margin-top:26px}
.bio-portrait{position:sticky;top:96px}
@media(max-width:900px){.bio-portrait{position:static;margin-top:8px}}
.bio-portrait .img-reveal{aspect-ratio:4/5;max-height:560px}
/* staff-landing variant: landscape team group photo */
.team-photo .img-reveal{aspect-ratio:4/3;max-height:480px}
/* staff hero: mission headline is long; size it to its split column */
.staff-hero .hero-copy h1{font-size:clamp(2.2rem,3.8vw,3.4rem)}
.staff-hero .bio-portrait{position:static}

/* ---------- FAVORITES ROW (staff bio) ----------
   The humanizing WP-original block. Four light tiles, Fraunces
   labels, spring hover. Stacks 4 -> 2 -> 1. */
.fav-grid{display:grid;gap:clamp(14px,1.6vw,18px);
  margin-top:clamp(32px,4vw,50px);grid-template-columns:1fr}
@media(min-width:560px){.fav-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.fav-grid{grid-template-columns:repeat(4,1fr)}}
.fav{background:#fff;border-radius:18px;padding:clamp(20px,2.4vw,28px);
  box-shadow:0 8px 28px rgba(20,35,28,.08);border:1px solid rgba(20,35,28,.06);
  user-select:none;transition:transform .5s var(--spring),box-shadow .5s}
.fav:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(20,35,28,.13)}
.fav .fav-label{font-family:var(--font-display);
  font-variation-settings:'opsz' 50,'wght' 540;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--color-accent-dim)}
.fav .fav-val{margin-top:10px;font-size:1.02rem;font-weight:600;line-height:1.4}

/* ---------- OUTSIDE-THE-CLINIC GALLERY (staff bio) ----------
   Three System 4 .img-reveal photos, varied aspect ratios, staggered
   entrance handled automatically by systems.js. Stacks on mobile. */
.bio-gallery{display:grid;gap:clamp(14px,1.8vw,20px);
  margin-top:clamp(32px,4vw,50px);grid-template-columns:1fr}
@media(min-width:720px){.bio-gallery{grid-template-columns:repeat(3,1fr);align-items:start}}
.bio-gallery .g-tall{aspect-ratio:3/4}
.bio-gallery .g-wide{aspect-ratio:9/7}
.bio-gallery .g-square{aspect-ratio:1/1}
@media(min-width:720px){.bio-gallery .g-wide{margin-top:clamp(20px,4vw,52px)}}

/* ---------- REDUCED MOTION (staff-page additions) ---------- */
@media (prefers-reduced-motion: reduce){
  .pillar,.fav{transition:none}
  .pillar:hover,.fav:hover{transform:none}
}

/* ============================================================
   ===== CONTACT + BOOKING PAGES =====
   The locations hub (/contact-us/), the cloneable location shell
   (/contact-us/location-N/) and the dedicated booking page
   (/request-an-appointment/). Appended AFTER all existing content;
   nothing above this banner is modified. Reuses existing
   vocabulary wherever possible: .inner-hero + line-mask H1, .crumb,
   .way, .split, .phases/.phase/.pnum, .form-card multi-step forms
   (System 7), .qcard + .car.cols-3 + .car-progress (System 2),
   .hoursbox, .mapbox, .wave, .editorial. Only the location cards,
   the tappable info panel, the taller location map, the centered
   solo form wrapper and the trust-bullet list are new below. No new
   hidden-by-default states are introduced (entrances reuse the
   .js-gated [data-load]/[data-reveal]/.line-inner contracts, which
   already have reduced-motion fallbacks in styles.css); the spring
   hover transform added here is neutralized under reduced motion at
   the end of this block.
   ============================================================ */

/* ---------- LOCATION CARD GRID (contact hub) ----------
   One light card per location. This client has 2 locations, so the
   grid caps at 2 columns (never 3 - a 3-track grid with 2 real cards
   would left-pack with a phantom empty column). Every contact
   line is a >=44px tap target; city set in Fraunces. */
.loc-grid{display:grid;gap:clamp(14px,1.8vw,20px);
  margin-top:clamp(32px,4vw,50px);grid-template-columns:1fr;max-width:900px;margin-inline:auto}
@media(min-width:640px){.loc-grid{grid-template-columns:repeat(2,1fr)}}
.loc-card{background:#fff;border-radius:20px;padding:clamp(24px,2.8vw,34px);
  box-shadow:0 8px 28px rgba(20,35,28,.08);border:1px solid rgba(20,35,28,.06);
  display:flex;flex-direction:column;gap:12px;height:100%;
  transition:transform .5s var(--spring),box-shadow .5s}
.loc-card:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(20,35,28,.13)}
.loc-card .loc-city{font-family:var(--font-display);
  font-variation-settings:'opsz' 70,'wght' 560;font-size:clamp(1.4rem,2.2vw,1.7rem);line-height:1.1}
.loc-card .loc-lines{display:grid;gap:2px}
.loc-card .loc-line{display:flex;align-items:center;gap:10px;padding:7px 0;
  font-size:.94rem;line-height:1.5;min-height:44px;text-decoration:none}
a.loc-line:hover{color:var(--color-accent-dim)}
.loc-card .loc-hours{opacity:.72;align-items:flex-start}
.loc-card .loc-visit{margin-top:auto;padding-top:6px;font-weight:700;
  color:var(--color-accent-dim);text-decoration:none;font-size:.9rem;
  min-height:44px;display:inline-flex;align-items:center;gap:8px}
.loc-card .loc-visit:hover{color:var(--color-accent)}

/* ---------- TAPPABLE INFO PANEL (location page + booking hero) ----------
   Label + value rows; each value link is a >=44px tap target. */
.loc-info{display:grid;gap:0}
.loc-info .li-row{display:flex;flex-wrap:wrap;justify-content:space-between;
  align-items:center;gap:6px 18px;padding:12px 0;min-height:44px;
  border-bottom:1px solid rgba(20,35,28,.1)}
.loc-info .li-row:last-child{border-bottom:0}
.loc-info .li-label{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--color-accent-dim)}
.loc-info .li-val{font-size:.98rem;font-weight:500;line-height:1.5;text-align:right}
.loc-info a.li-val{text-decoration:none;display:inline-flex;align-items:center;min-height:24px}
.loc-info a.li-val:hover{color:var(--color-accent-dim)}

/* ---------- TALLER LOCATION MAP (location page) ----------
   Overrides the .mapbox height (180px) for the dedicated location
   split. Appended after styles.css so this height wins. */
.loc-map{height:clamp(360px,46vw,420px)}

/* ---------- CENTERED SOLO FORM (location booking section) ---------- */
.form-solo{max-width:560px;margin-left:auto;margin-right:auto}

/* ---------- TRUST BULLETS (booking hero) ---------- */
.trust-list{list-style:none;display:grid;gap:12px;margin-top:clamp(20px,3vw,28px)}
.trust-list li{display:flex;align-items:flex-start;gap:12px;font-size:.94rem;
  line-height:1.5;font-weight:500}
.trust-list li::before{content:'✓';flex-shrink:0;width:24px;height:24px;border-radius:50%;
  background:var(--accent-soft);color:var(--color-accent-dim);display:flex;
  align-items:center;justify-content:center;font-size:.78rem;font-weight:800;margin-top:1px}
.trust-list .stars{color:#F5B301;letter-spacing:1px}

/* ---------- REDUCED MOTION (contact + booking additions) ---------- */
@media (prefers-reduced-motion: reduce){
  .loc-card{transition:none}
  .loc-card:hover{transform:none}
}

/* ============================================================
   ===== RESOURCE PAGES =====
   /faq/, /paperwork/, /insurance/, /testimonials/, /blog/, /privacy/.
   Appended AFTER all existing content; nothing above this banner is
   modified. Reuses existing vocabulary wherever possible: .inner-hero
   + line-mask H1, .crumb, .way, .faq-list/.faq-item (System 8),
   .landing-grid, .qcard, .card-light, .tcard, .img-reveal (System 4),
   .phases/.phase/.pnum, .callout, .logos, .reviews-aggregate,
   .form-card multi-step forms (System 7), .hoursbox, .mapbox, .wave.
   Only the paperwork download card and the legal typography wrapper
   are new below. No new hidden-by-default states are introduced
   (entrances reuse the .js-gated [data-load]/[data-reveal]/.line-inner
   contracts, which already have reduced-motion fallbacks in
   styles.css); the spring hover transform added here is neutralized
   under reduced motion at the end of this block.
   ============================================================ */

/* ---------- PAPERWORK DOWNLOAD CARD (/paperwork/) ----------
   Sits inside .landing-grid so it inherits the existing responsive
   track sizing. Icon + form name + one-line description + .btn.ghost
   download link (already-defined component, used as-is). */
.doc-card{background:#fff;border-radius:20px;padding:clamp(24px,2.8vw,32px);
  box-shadow:0 8px 28px rgba(20,35,28,.08);border:1px solid rgba(20,35,28,.06);
  display:flex;flex-direction:column;gap:12px;height:100%;
  transition:transform .5s var(--spring),box-shadow .5s}
.doc-card:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(20,35,28,.13)}
.doc-card .doc-icon{width:44px;height:44px;border-radius:50%;background:var(--accent-soft);
  color:var(--color-accent-dim);display:flex;align-items:center;justify-content:center}
.doc-card .doc-icon svg{width:22px;height:22px}
.doc-card h3{font-size:1.1rem}
.doc-card p{font-size:.92rem;line-height:1.6;opacity:.72;flex-grow:1}
.doc-card .btn{align-self:flex-start;min-height:44px}

/* ---------- DISABLED BLOG STUBS (/blog/) ----------
   aria-disabled anchors: no pointer interaction, no hover lift,
   still readable to screen readers and search crawlers. */
.tcard[aria-disabled="true"]{pointer-events:none;cursor:default}
.tcard[aria-disabled="true"]:hover{transform:none;box-shadow:inherit}

/* ---------- LEGAL TYPOGRAPHY WRAPPER (/privacy/) ----------
   Comfortable reading width, generous heading rhythm. No cards, no
   photos: plain professional typography per the legal-page brief. */
.legal{max-width:72ch;margin:0 auto}
.legal p{font-size:1rem;line-height:1.75;opacity:.82;margin-top:18px}
.legal h2{margin-top:clamp(38px,4.5vw,54px);font-size:clamp(1.3rem,2.2vw,1.6rem)}
.legal > p:first-child{margin-top:0}

/* ---------- REDUCED MOTION (resource-page additions) ---------- */
@media (prefers-reduced-motion: reduce){
  .doc-card{transition:none}
  .doc-card:hover{transform:none}
}

/* ============================================================
   CLIENT ADDITION (Developmental Steps): video embed container.
   The client's exercise-video and home-exercise-program pages are
   the one content type Template One has no slot for. Rather than
   author a new system, they reuse the existing .mapbox embed box
   (whose iframe data-src is already promoted by systems.js) with a
   16:9 aspect ratio instead of the map's fixed 180px height.
   ============================================================ */
.mapbox.video{height:auto;aspect-ratio:16/9;margin-top:18px}
.video-item{margin-bottom:38px}
.video-item h3{margin-bottom:0}

/* ============================================================
   ===== BLOG ARTICLE SYSTEM (appended, nothing above modified) =====
   The one new page shell in this build: blog/_article-template.html
   plus the /blog/ listing. Everything that could be reused was
   reused (.inner-hero, .crumb, .way, .sec-tint, .car, .tcard
   .card-light, .landing-grid, .editorial, .img-reveal). What
   follows is only what long-form ported prose actually needs:
   a byline, a featured-image frame, readable article typography,
   a responsive embed box, and the listing pager.
   No new hidden-by-default states are introduced, so the existing
   .js-gated reduced-motion and gsap-off fallbacks cover these pages.
   ============================================================ */

/* ---------- ARTICLE HERO ---------- */
/* Post titles are sentences, not two-word page names: the interior
   H1 scale is stepped down so a 60-character headline still reads
   as a headline and not as a wall. */
.post-hero h1{font-size:clamp(2.05rem,4.4vw,3.6rem);line-height:1.08;max-width:none}
.post-hero .way{margin-top:4px}
/* LINE-MASK REPAIR (line 19 of this file, pre-existing, site wide).
   The shared contract pre-offsets .line-inner with translateY(110%).
   GSAP reads that computed matrix as a PIXEL offset and then adds its
   own yPercent tween on top, so the reveal ends at 0% PLUS 110% and
   the interior H1 never becomes visible. Verified in real Chrome on
   /faq/ before any of this work landed, so it affects every interior
   page, not just the articles. systems.js is out of scope for this
   build, so the fix lives here: clearing the CSS pre-offset lets the
   GSAP fromTo own both the hidden start and the reveal, which is what
   it was written to do. Behaviour is unchanged with JS off, with
   gsap-off, and under reduced motion (all three already resolve this
   selector to transform:none). Delete this line only together with a
   real fix in systems.js. */
.js .inner-hero h1 .line-inner{transform:none}
.post-byline{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:22px;
  font-size:.78rem;letter-spacing:.11em;text-transform:uppercase;font-weight:600;opacity:.6}
.post-byline .sep{color:var(--color-accent);opacity:.9}

/* ---------- FEATURED IMAGE (System 4 reveal) ---------- */
.post-figure{padding-top:0;padding-bottom:0}
.post-figure .img-reveal{aspect-ratio:16/9;max-height:560px}
@media(max-width:600px){.post-figure .img-reveal{aspect-ratio:4/3}}

/* ---------- ARTICLE BODY (ported long-form prose) ---------- */
.post-section{padding-top:clamp(38px,5vw,64px)}
.post-body{max-width:68ch;margin:0 auto;font-size:1.02rem;line-height:1.75}
.post-body > :first-child{margin-top:0}
.post-body p{margin-top:20px;opacity:.86}
/* lead paragraph: the WP first paragraph is always the hook */
.post-body > p:first-of-type{font-size:1.14rem;line-height:1.62;opacity:.95}
.post-body h2{font-size:clamp(1.5rem,2.9vw,2.1rem);line-height:1.18;max-width:none;
  margin-top:clamp(46px,5.5vw,70px);padding-top:22px;position:relative}
/* the gold secondary earns exactly one job on this page: the rule
   that opens every section of the article */
.post-body h2::before{content:'';position:absolute;top:0;left:0;width:54px;height:3px;
  border-radius:2px;background:#FEBC12}
.post-body h3{font-size:clamp(1.15rem,1.9vw,1.4rem);line-height:1.3;
  margin-top:clamp(32px,3.6vw,44px);color:var(--color-accent-dim)}
.post-body h4{font-family:var(--font-display);font-variation-settings:'opsz' 40,'wght' 600;
  font-size:1.05rem;line-height:1.35;margin-top:32px}
.post-body h2 + p,.post-body h3 + p,.post-body h4 + p{margin-top:14px}
.post-body ul,.post-body ol{margin-top:20px;padding-left:0;list-style:none}
.post-body ol{counter-reset:pb}
.post-body li{position:relative;padding-left:26px;margin-top:10px;opacity:.86}
.post-body ul > li::before{content:'';position:absolute;left:2px;top:.62em;width:8px;height:8px;
  border-radius:2px;background:var(--color-accent);opacity:.85}
.post-body ol > li{counter-increment:pb}
.post-body ol > li::before{content:counter(pb);position:absolute;left:0;top:0;
  font-family:var(--font-display);font-variation-settings:'opsz' 40,'wght' 600;
  font-size:.92rem;color:var(--color-accent-dim)}
.post-body a{color:var(--color-accent-dim);font-weight:600;text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1.5px;
  text-decoration-color:rgba(95,10,135,.35)}
.post-body a:hover{text-decoration-color:var(--color-accent)}
.post-body strong{font-weight:700;opacity:1}
.post-body figure{margin:clamp(30px,4vw,44px) 0}
.post-body img{display:block;width:100%;height:auto;border-radius:18px;
  margin-left:auto;margin-right:auto;box-shadow:0 10px 34px rgba(20,35,28,.12)}
/* small originals must not be upscaled into a blurry column-width slab */
.post-body img.narrow{width:auto;max-width:100%}
/* .65, not .6: at .6 the ink-light/bg-light pairing lands at 4.48:1, just under AA */
.post-body figcaption{margin-top:12px;font-size:.8rem;line-height:1.5;opacity:.65;
  text-align:center;font-style:italic}
.post-body blockquote{margin:clamp(30px,4vw,44px) 0;padding:4px 0 4px 24px;
  border-left:3px solid #FEBC12;font-family:var(--font-display);
  font-variation-settings:'opsz' 60,'wght' 400,'SOFT' 30;font-size:1.2rem;line-height:1.45}
.post-body table{width:100%;border-collapse:collapse;margin-top:26px;font-size:.94rem}
.post-body th,.post-body td{border:1px solid rgba(20,35,28,.12);padding:10px 12px;
  text-align:left;vertical-align:top}
.post-body th{background:var(--accent-soft);font-weight:700}
.post-body hr{border:0;border-top:1px solid rgba(20,35,28,.12);margin:clamp(34px,4vw,48px) 0}
/* portrait phone photos must not become a full-screen column */
.post-body img.portrait{width:auto;max-width:min(100%,440px);max-height:640px}
/* WP column blocks flatten to a run of photos: three or more in a row
   become a gallery instead of a one-per-screen slog */
.post-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;
  margin:clamp(30px,4vw,44px) 0}
.post-gallery figure{margin:0}
.post-gallery img,.post-gallery img.portrait,.post-gallery img.narrow{
  width:100%;max-width:100%;max-height:none;aspect-ratio:3/4;object-fit:cover}
@media(max-width:520px){.post-gallery{grid-template-columns:1fr}}

/* responsive embed box for the handful of posts with a video or map */
.post-embed{position:relative;margin:clamp(30px,4vw,44px) 0;aspect-ratio:16/9;
  border-radius:18px;overflow:hidden;background:rgba(20,35,28,.06)}
.post-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- NEXT-STEP BAND + RELATED ROW ---------- */
.post-next p{margin-top:16px;max-width:60ch}
.post-next .cta{display:flex;align-items:center;gap:12px 18px;flex-wrap:wrap;margin-top:26px}
.post-related h2{margin-top:12px}

/* ---------- HEADING-LEVEL REPAIR (ported WP articles) ----------
   A handful of ported posts used heading TAGS purely for their visual
   size, skipping straight from the page h1 to an h3 or h4 subhead.
   The tag is corrected below to the right outline level; these two
   classes reproduce the exact visual size that tag used to carry, so
   nothing on screen changes, only the semantic level. */
.post-body .post-subhead{font-variation-settings:'opsz' 40,'wght' 600;font-size:1.05rem;
  line-height:1.35;margin-top:32px;color:inherit;padding-top:0;max-width:none}
.post-body .post-subhead::before{content:none}
.post-body .post-subhead-alt{font-variation-settings:'opsz' 70,'wght' 500;
  font-size:clamp(1.15rem,1.9vw,1.4rem);line-height:1.3;
  margin-top:clamp(32px,3.6vw,44px);color:var(--color-accent-dim);padding-top:0;max-width:none}
.post-body .post-subhead-alt::before{content:none}

/* posts whose only images are gone from the WP media library fall back
   to the brand card, which must be fitted, not cropped through */
.tcard .img-reveal img.fallback{object-fit:contain;background:var(--accent-soft);
  padding:14% 12%}

/* ---------- BLOG LISTING PAGER ---------- */
.blog-pager{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  margin-top:clamp(34px,4vw,52px)}
.blog-pager a,.blog-pager span{display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:0 16px;border-radius:999px;font-size:.86rem;
  font-weight:700;text-decoration:none;border:1px solid rgba(20,35,28,.14);
  transition:transform .5s var(--spring),background .3s,border-color .3s}
.blog-pager a:hover{border-color:var(--color-accent);background:var(--accent-soft);
  color:var(--color-accent-dim)}
.blog-pager a:active{transform:scale(.95);transition:transform .1s ease-out}
.blog-pager .cur{background:var(--color-accent);border-color:var(--color-accent);color:#fff}

/* Ported WordPress posts occasionally mark the author byline as an <h2>.
   It is demoted to a paragraph so it stops competing with the real section
   headings in the document outline; the words are unchanged. */
.post-body .post-attrib{margin-top:0;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;opacity:.6;line-height:1.5}
.post-body .post-attrib a{text-decoration:none}

/* ---------- CAREERS APPLICATION FORM (/employment-opportunities/#apply, light section) ---------- */
.careers-card{scroll-margin-top:120px;max-width:720px;margin-top:26px}
.careers-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.cf-field{display:flex;flex-direction:column;gap:6px;font-size:.88rem;font-weight:600}
.cf-field small{font-weight:400;opacity:.8}
.cf-wide{grid-column:1/-1}
.cf-field input{font:inherit;font-weight:400;font-size:1rem;padding:12px 14px;border:1px solid rgba(31,21,38,.22);
  border-radius:10px;background:#fff;color:var(--color-ink-light);min-width:0}
.cf-field input:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.cf-field input[type=file]{padding:9px 10px;font-size:.9rem;cursor:pointer}
.cf-field input[type=file]::file-selector-button{margin-right:12px;padding:7px 14px;border:0;border-radius:100px;
  background:var(--color-accent);color:#fff;font:inherit;font-weight:600;cursor:pointer}
.cf-field.error input{border-color:#B3261E}
.cf-err{color:#B3261E;font-size:.8rem;font-weight:500;min-height:1em;opacity:1!important}
.careers-form .btn{margin-top:22px;border:0;cursor:pointer}
.careers-form .btn[disabled]{opacity:.6;cursor:default}
.cf-send-err{margin-top:16px;color:#B3261E;font-size:.9rem}
.cf-send-err a{color:inherit}
.cf-success-title{font-family:var(--font-display);font-size:1.4rem;margin-bottom:6px}
@media (max-width:640px){.careers-grid{grid-template-columns:1fr}}

/* two-column check list (job postings) */
.trust-list.two-col{grid-template-columns:1fr 1fr;column-gap:28px}
@media (max-width:640px){.trust-list.two-col{grid-template-columns:1fr}}