/* ============================================================
   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}
/* 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;padding-bottom:.18em;margin-bottom:-.18em}
.inner-hero h1 .line-inner{display:block}
.js .inner-hero h1 .line-inner{transform:translateY(120px)}
.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:var(--nav-h);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}
.anchor-bar a.active{opacity:1;color:var(--color-accent-dim);border-bottom-color:var(--color-red)}
/* anchor targets clear the sticky nav AND this bar */
html:has(.anchor-bar){scroll-padding-top:calc(var(--nav-h) + 60px)}

/* ---------- 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 moved off the shared container and onto just the dimmed children:
   opacity always compounds with an ancestor's, so putting it on .crumb itself
   was quietly darkening .cur (already at the edge of AA - see accessibility
   report) far past what its own color implies. */
.crumb a{text-decoration:none;opacity:.7}
.crumb a:hover{color:var(--color-accent-dim);opacity:1}
.crumb .sep{opacity:.5}
.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}
/* Service + condition detail titles (.detail-page) run at half the shared
   inner-hero size, clamp(2.6rem,6vw,5rem). The booking page reuses
   .detail-hero without this class and keeps the full size. */
.detail-page .hero-copy h1{font-size:clamp(1.3rem,3vw,2.5rem)}
.detail-hero .hero-copy .cta{margin-top:26px}
/* location-limited services (AlterG, dry needling): a quiet availability line
   under the intro, keyed with the brand-red dot */
.avail-note{display:flex;align-items:baseline;gap:10px;margin-top:16px;font-size:.92rem;line-height:1.5;max-width:52ch}
.avail-note strong{font-weight:700}
.avail-dot{flex-shrink:0;width:8px;height:8px;border-radius:50%;background:var(--color-red);transform:translateY(-1px)}
.hero-aside{position:sticky;top:calc(var(--nav-h) + 24px)}
@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 (--nav-h) + anchor bar (~48px) */
.causes-intro{position:sticky;top:calc(var(--nav-h) + 52px)}
@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}

/* Service detail "What it is" photo.
   The global .split rule crops this slot to a 4/5 portrait, but every service
   photo the old site used is landscape (1380x920 / 1900x760), so cover-fit was
   throwing away most of the frame and off-centring whatever was left. Match the
   slot to the source instead, and pull focus to the upper-middle of the frame
   where the subject sits in these shots. */
/* Stacked, not split: the photo centred at ~700px, the copy full shell width
   underneath it. The frame takes the photo's own proportions (no ratio, no
   height, no cover-crop), so landscape and portrait sources both show whole
   and scale down proportionally on smaller screens. */
#what-it-is .shell{grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,48px)}
#what-it-is .img-reveal{width:100%;max-width:700px;margin:0 auto;aspect-ratio:auto;max-height:none;height:auto}
#what-it-is .img-reveal img{height:auto;object-fit:initial}
#what-it-is p{max-width:none}
.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(75,160,191,.05)}

/* "How PT helps" on the 14 condition detail pages: the client asked for the
   photo column to come out, so the section can no longer carry .split - that
   grid lays out two children side by side and a lone survivor would sit in a
   half-width column with dead space beside it. It reads as a single measured
   text column instead, holding the heading offset .split used to give it and
   a comfortable measure now the copy is no longer boxed into half the shell.
   Scoped to the id, so .split itself is untouched and every other place that
   legitimately uses it with two children (the services and what-we-treat
   landing feature bands, the home page commitment band) is unaffected. */
#how-pt-helps h2{margin-top:18px}
#how-pt-helps p{max-width:66ch}

/* Treatment-tools chip row on how-PT-helps 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). */

/* ---------- 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-red);
  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-top:24px;margin-bottom:-.55em;
  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)}
.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)}

/* ---------- 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(75,160,191,.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.
   QA Pass 4: this client ships 16 services and 14 conditions, neither
   divisible by 3, so a straight repeat(3,1fr) grid left-packed the
   incomplete last row (1 orphan card at 960px+ on /services/, 2 on
   /what-we-treat/) with phantom empty tracks trailing it. Switched to
   flex-wrap with a fixed per-card basis so an incomplete last row
   centers instead of hugging the left edge, at any item count. */
.landing-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(14px,1.6vw,18px);
  margin-top:clamp(32px,4vw,50px)}
.landing-grid>*{flex:1 1 100%;max-width:100%}
@media(min-width:600px){.landing-grid>*{flex:1 1 calc(50% - 9px);max-width:calc(50% - 9px)}}
@media(min-width:960px){.landing-grid>*{flex:1 1 calc(33.333% - 12px);max-width:calc(33.333% - 12px)}}
/* index number echoes the numbered wayfinding language (Fraunces
   display, styled like .bnum from the service detail template) */
.landing-grid .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}

/* ============================================================
   ===== 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:calc(var(--nav-h) + 24px)}
@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:3/2;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. Light tiles, Fraunces labels,
   spring hover. Template default assumed four tiles; this client's
   real bios carry only 1-2 favorites each (Emily: 2, Griffin: 1,
   others: 0/section omitted), so a repeat(4,1fr) grid left-packed 1-2
   real tiles with 2-3 phantom empty tracks trailing them at desktop
   widths (QA Pass 4). Flex-wrap + centered fixed basis instead, so it
   still reads as a tidy row of tiles at any real count from 1 to 4+. */
.fav-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(14px,1.6vw,18px);
  margin-top:clamp(32px,4vw,50px)}
.fav-grid>.fav{flex:1 1 100%;max-width:100%}
@media(min-width:560px){.fav-grid>.fav{flex:1 1 calc(50% - 9px);max-width:calc(50% - 9px)}}
@media(min-width:960px){.fav-grid>.fav{flex:0 1 240px;max-width:240px}}
.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 this
   stacks 1 -> 2 and stays at 2 columns at every wider breakpoint
   (QA Pass 4: the template default's 3rd-column breakpoint left a
   phantom empty track next to 2 real cards on desktop). 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}
@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-heading);
  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}
/* Hours row only (QA Pass 6, item 16): the multi-line hours value
   otherwise wraps onto its own flex line, stranding the label above
   it. flex-wrap:nowrap keeps label+value on one row; align-items:
   baseline (not flex-start) levels the label with the value's first
   line rather than top-aligning two differently-sized text boxes.
   Gated at 600px - below that there's no room for both anyway, and
   the default wrap behavior (same as the Address row) is correct. */
@media(min-width:600px){.loc-info .li-row.li-hours{align-items:baseline;flex-wrap:nowrap}}
.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) ----------
   margin-top: the .way label above this card has no heading between
   them (QA Pass 6, item 10) - .way itself carries no margin-bottom by
   design since it's normally followed by an <h1>/<h2> that supplies
   its own top margin; scoped here instead of on .way globally. */
.form-solo{max-width:560px;margin-left:auto;margin-right:auto;margin-top:36px}

/* ---------- 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}

/* ---------- FAQ PAGE: full shell width (/faq/, body.page-faq) ----------
   The shared accordion is capped at 820px (right for the home preview) and
   its answers at 62ch; here the page's content runs the full shell width,
   which already carries the site's normal side padding. The H1 is one line
   on desktop; it steps down only enough to fit the shell. */
.page-faq .inner-hero .sub,.page-faq .faq-list,.page-faq .faq-a p,
.page-faq .callout,.page-faq .callout p,.page-faq #good-faith-estimate p{max-width:none}
.page-faq .inner-hero h1{font-size:clamp(2.2rem,5.4vw,4.4rem)}

/* ---------- 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}
}

/* ============================================================
   BLOG ARTICLE TEMPLATE
   Added for the Russ PT client rebuild only. The Template One
   master ships /blog/ as an index shell; this client's 67
   WordPress posts are ported into a real article template, so
   long-form body styles are the one thing the master has no
   vocabulary for. Everything else on the article page reuses
   existing classes (.inner-hero, .crumb, .way, .img-reveal,
   .sec-tint, .car, .tcard.card-light, .editorial, .form-card).
   ============================================================ */

/* post date, used in the hero and on listing cards */
.post-meta{display:flex;align-items:center;gap:10px;margin-top:16px;
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  color:var(--color-accent-dim)}
.post-meta .dot{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.5}
.landing-grid .lnum.post-date{letter-spacing:.12em;font-size:.72rem;
  font-family:var(--font-body);font-weight:700}

/* featured image sits between hero and body, full measure */
.post-hero-img{max-width:960px;margin:0 auto}
.post-hero-img .img-reveal{aspect-ratio:16/9}

/* the reading column */
.article-body{max-width:68ch;margin:0 auto;font-size:clamp(1.02rem,1.15vw,1.14rem)}
/* long reference URLs break instead of pushing the page sideways on phones */
.article-body a{overflow-wrap:anywhere}
.article-body > *+*{margin-top:1.15em}
.article-body h2{font-size:clamp(1.5rem,2.8vw,2.1rem);line-height:1.14;max-width:24ch;
  font-variation-settings:'opsz' 90,'wght' 500;margin-top:1.9em}
.article-body h3{font-size:clamp(1.22rem,2vw,1.5rem);line-height:1.2;max-width:28ch;
  font-variation-settings:'opsz' 70,'wght' 520;margin-top:1.7em}
.article-body h4{font-family:var(--font-heading);font-size:1rem;font-weight:700;
  letter-spacing:.02em;margin-top:1.6em}
.article-body p{line-height:1.72}
.article-body a{color:var(--color-accent-dim);font-weight:600;
  text-underline-offset:3px;text-decoration-thickness:1.5px}
.article-body a:hover{color:var(--color-accent)}
.article-body ul,.article-body ol{padding-left:1.3em}
.article-body li{line-height:1.66}
.article-body li+li{margin-top:.5em}
.article-body li::marker{color:var(--color-accent-dim)}
.article-body strong{font-weight:700}
.article-body img{border-radius:18px;margin:1.6em auto}
.article-body figure{margin:1.8em 0}
.article-body figcaption{margin-top:10px;font-size:.82rem;opacity:.65;text-align:center}
.article-body hr{border:0;height:1px;background:currentColor;opacity:.14;margin:2.4em 0}
.article-body table{width:100%;border-collapse:collapse;font-size:.94rem}
.article-body th,.article-body td{text-align:left;padding:10px 12px;
  border-bottom:1px solid rgba(21,36,44,.12)}

/* editorial pull-quote available to posts that carry one */
.article-body blockquote,.pullquote{position:relative;margin:2.2em 0;padding:4px 0 4px 26px;
  border-left:3px solid var(--color-red);
  font-family:var(--font-display);font-variation-settings:'opsz' 120,'wght' 420,'SOFT' 20;
  font-size:clamp(1.24rem,2.2vw,1.6rem);line-height:1.3;max-width:26ch}
.article-body blockquote p{line-height:1.3}
.article-body blockquote cite,.pullquote cite{display:block;margin-top:14px;
  font-family:var(--font-body);font-style:normal;font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;opacity:.65}

/* listing pagination */
.blog-pager{display:flex;justify-content:center;align-items:center;gap:8px;
  margin-top:clamp(28px,4vw,42px);flex-wrap:wrap}
.blog-pager a,.blog-pager span{min-width:44px;min-height:44px;display:inline-flex;
  align-items:center;justify-content:center;padding:0 14px;border-radius:100px;
  text-decoration:none;font-size:.88rem;font-weight:600;
  border:1px solid rgba(21,36,44,.14);transition:transform .5s var(--spring),background .3s}
.blog-pager a:hover{background:var(--accent-soft);border-color:var(--color-accent)}
.blog-pager a:active{transform:scale(.94);transition:transform .1s ease-out}
.blog-pager .cur{background:var(--color-accent-btn);border-color:var(--color-accent-btn);color:#fff}


/* ---------- CAREERS APPLICATION FORM (/careers/#apply) ---------- */
.careers-card{max-width:44rem;margin-top:28px;background:#fff;border-radius:18px;padding:clamp(22px,4vw,36px);
  box-shadow:0 10px 40px rgba(21,36,44,.07);scroll-margin-top:120px}
.careers-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cf-field{display:flex;flex-direction:column;gap:6px;font-size:.88rem;font-weight:600}
.cf-field small{font-weight:400;opacity:.7}
.cf-wide{grid-column:1/-1}
.cf-field input{font:inherit;font-weight:400;font-size:1rem;padding:12px 14px;border:1px solid rgba(21,36,44,.2);
  border-radius:10px;background:var(--color-bg-light);color:var(--color-ink-light);min-width:0}
.cf-field input:focus-visible{outline:2px solid var(--color-accent-dim);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-btn);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-success-title{font-family:var(--font-display);font-size:1.4rem;margin-bottom:6px}
@media (max-width:640px){.careers-grid{grid-template-columns:1fr}}