/* ============================================================
   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}
.inner-hero h1 .line-inner{display:block}
.js .inner-hero h1 .line-inner{opacity:0;transform:translateY(14px)}
.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(245,248,251,.95);
  backdrop-filter:blur(10px);border-bottom:1px solid rgba(22,35,47,.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:.6;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-accent)}

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

/* ============================================================
   ===== 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;opacity:.62;margin-bottom:16px}
.crumb a{text-decoration:none}
.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}
.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(52,88,124,.075)}

/* 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(22,35,47,.08);border:1px solid rgba(22,35,47,.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(22,35,47,.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-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-ondark)}
.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(22,35,47,.07);
  box-shadow:0 8px 28px rgba(22,35,47,.08);color:var(--color-ink-light)}
.card-light:hover{border-color:rgba(52,88,124,.5);
  box-shadow:0 22px 50px rgba(22,35,47,.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 27 / conditions 19) ----------
   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. Flex + centered
   instead of a fixed grid so a remainder row (conditions: 19 / 3 = 6
   rows of 3 + 1) centers instead of left-packing with empty tracks. */
.landing-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(14px,1.6vw,18px);
  margin-top:clamp(32px,4vw,50px)}
.landing-grid>.tcard{flex:1 1 100%}
@media(min-width:600px){.landing-grid>.tcard{flex:0 1 calc(50% - 18px)}}
@media(min-width:960px){.landing-grid>.tcard{flex:0 1 calc(33.333% - 18px)}}
/* 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(22,35,47,.08);border:1px solid rgba(22,35,47,.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(22,35,47,.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. Light tiles, Fraunces
   labels, spring hover. Flex-wrap + centered so it looks right
   regardless of how many facts a given bio actually has (not
   every provider has exactly 4). */
.fav-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(14px,1.6vw,18px);
  margin-top:clamp(32px,4vw,50px)}
.fav{flex:1 1 200px;max-width:260px;background:#fff;border-radius:18px;padding:clamp(20px,2.4vw,28px);
  box-shadow:0 8px 28px rgba(22,35,47,.08);border:1px solid rgba(22,35,47,.06);
  user-select:none;transition:transform .5s var(--spring),box-shadow .5s}
.fav:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(22,35,47,.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. Stacks 3 -> 2 -> 1. 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)}}
@media(min-width:980px){.loc-grid{grid-template-columns:repeat(3,1fr)}}
.loc-card{background:#fff;border-radius:20px;padding:clamp(24px,2.8vw,34px);
  box-shadow:0 8px 28px rgba(22,35,47,.08);border:1px solid rgba(22,35,47,.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(22,35,47,.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(22,35,47,.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(22,35,47,.08);border:1px solid rgba(22,35,47,.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(22,35,47,.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}
}

/* ============================================================
   BLOG ARTICLE TEMPLATE
   Added in the Maritime Physical Therapy build (phase B1.5).
   This is the ONLY new CSS in this client rebuild. Everything
   else on an article page reuses existing template classes:
   .inner-hero .crumb .kicker .way .img-reveal .sec-tint
   .car .tcard .card-light .appt .shell .btn .tlink
   Ported WordPress prose arrives as bare h2/h3/p/ul/ol/li/
   strong/em/a/blockquote, so every rule below is element-scoped
   inside .post-body. Nothing here animates, so no reduced-motion
   override is required beyond the ones the reused classes carry.
   ============================================================ */

/* ---------- hero byline ---------- */
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:22px;
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;opacity:.58}
.post-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--color-accent);opacity:.7}

/* ---------- featured image ---------- */
.post-figure{margin-top:clamp(28px,4vw,44px)}
.post-figure .img-reveal{border-radius:clamp(18px,2.4vw,28px);overflow:hidden}
.post-figure img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}

/* ---------- long-form reading column ---------- */
.post-body{max-width:68ch;margin:0 auto}
.post-body > *:first-child{margin-top:0}

.post-body p{font-size:clamp(1.02rem,1.2vw,1.13rem);line-height:1.78;margin-top:22px;opacity:.86}
.post-body > p:first-of-type{font-size:clamp(1.12rem,1.5vw,1.3rem);line-height:1.66;opacity:.94}

.post-body h2{font-family:var(--font-display);
  font-variation-settings:'opsz' 144,'wght' 520,'SOFT' 10;
  font-size:clamp(1.55rem,2.9vw,2.15rem);line-height:1.14;letter-spacing:-.01em;
  margin-top:clamp(46px,5.5vw,72px);padding-top:22px;position:relative}
.post-body h2::before{content:"";position:absolute;top:0;left:0;width:52px;height:2px;
  background:var(--color-accent);opacity:.55}

.post-body h3{font-family:var(--font-display);
  font-variation-settings:'opsz' 60,'wght' 560,'SOFT' 0;
  font-size:clamp(1.15rem,1.9vw,1.4rem);line-height:1.28;margin-top:clamp(30px,3.4vw,42px)}

.post-body h4{font-size:1.02rem;font-weight:700;margin-top:28px;letter-spacing:-.005em}

.post-body ul,.post-body ol{margin-top:20px;padding-left:1.35em}
.post-body li{font-size:clamp(1rem,1.15vw,1.08rem);line-height:1.7;margin-top:11px;opacity:.86}
.post-body ul li::marker{color:var(--color-accent)}
.post-body ol li::marker{color:var(--color-accent);font-weight:700;font-variant-numeric:tabular-nums}

.post-body strong,.post-body b{font-weight:650;opacity:1;color:var(--color-ink-light)}
.post-body em{font-style:italic}

.post-body a{color:var(--color-accent-dim);text-decoration:none;
  box-shadow:inset 0 -1px 0 var(--accent-glow);transition:box-shadow .35s ease,color .35s ease}
@media (hover:hover) and (pointer:fine){
  .post-body a:hover{color:var(--color-accent);box-shadow:inset 0 -2px 0 var(--color-accent)}
}

/* editorial pull-quote, available to any ported post that carries a blockquote */
.post-body blockquote{position:relative;margin:clamp(34px,4vw,50px) 0 0;
  padding:6px 0 6px clamp(22px,3vw,34px);border-left:3px solid var(--color-accent);
  font-family:var(--font-display);font-style:italic;
  font-variation-settings:'opsz' 144,'wght' 380,'SOFT' 40;
  font-size:clamp(1.24rem,2.1vw,1.62rem);line-height:1.38;opacity:.92}
.post-body blockquote p{font-size:inherit;line-height:inherit;opacity:1;margin-top:0}
.post-body blockquote p + p{margin-top:14px}
.post-body blockquote cite{display:block;margin-top:16px;font-family:var(--font-body);
  font-style:normal;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;opacity:.55}

/* closing rule before the related row */
.post-end{max-width:68ch;margin:clamp(40px,5vw,60px) auto 0;padding-top:clamp(26px,3vw,36px);
  border-top:1px solid rgba(18,29,38,.12);display:flex;flex-wrap:wrap;gap:14px;
  align-items:center;justify-content:space-between}
.post-end .pe-note{font-size:.92rem;opacity:.72;max-width:42ch;line-height:1.6}

/* ---------- blog index listing ---------- */
.post-card-meta{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;opacity:.55;margin-top:8px}
.blog-pager{display:flex;gap:10px;justify-content:center;align-items:center;
  margin-top:clamp(34px,4vw,48px)}
.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:12px;
  font-size:.9rem;font-weight:600;text-decoration:none;
  border:1px solid rgba(18,29,38,.14);transition:transform .5s var(--spring)}
.blog-pager .cur{background:var(--color-accent);color:#fff;border-color:var(--color-accent)}
.blog-pager a:active{transform:scale(.94);transition:transform .1s ease-out}