/* ============================================================
   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: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:.63;border-bottom:2px solid transparent;
  transition:opacity .3s,border-color .3s;min-height:44px;display:inline-flex;align-items:center}
  /* opacity raised from .6: measured 4.28:1, fails AA small text */
.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) ----------
   Opacity moved from the .crumb container onto .crumb a specifically: a
   container-level opacity compounds with .cur's own accent-dim color
   (0.62 * accent-dim measured 2.35:1, fails AA) since CSS opacity applies
   to the whole subtree. Un-dimmed .cur and :hover now reach full contrast. */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  font-size:.76rem;font-weight:600;margin-bottom:16px}
.crumb a{text-decoration:none;opacity:.72}
.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(159,205,83,.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). */

/* ---------- 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-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(159,205,83,.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. */
/* flex, not grid: a grid track left-packs an incomplete last row (the
   final card stuck in column 1), which shows up on any page whose real
   item count isn't a clean multiple of the column count. flex-wrap with
   justify-content:center leaves full rows unchanged and centers a short
   last row instead. */
.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% - clamp(14px,1.6vw,18px)/2);max-width:calc(50% - clamp(14px,1.6vw,18px)/2)}}
@media(min-width:960px){.landing-grid>*{flex:1 1 calc(33.333% - clamp(14px,1.6vw,18px)*2/3);max-width:calc(33.333% - clamp(14px,1.6vw,18px)*2/3)}}
/* 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: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. 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(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;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}

/* ---------- 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 - the only new component in this build.
   Long-form reading styles for /blog/ posts. Everything structural
   (inner hero, .crumb, .way, .sec-tint, .car, .card-light, the
   appointment section) is reused from the existing systems; this
   block only styles the prose itself, its featured image, and the
   listing card's date line.
   ============================================================ */
.post-meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:20px;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;opacity:.55}
.post-hero{max-width:960px;margin:0 auto clamp(38px,5vw,62px);aspect-ratio:16/9}
.post-body{max-width:68ch;margin:0 auto;font-size:clamp(1.02rem,1.15vw,1.13rem)}
.post-body>*+*{margin-top:22px}
.post-body h2{font-size:clamp(1.5rem,3vw,2.15rem);line-height:1.14;margin-top:clamp(40px,5vw,60px);max-width:24ch;
  font-variation-settings:'opsz' 80,'wght' 500}
.post-body h3{font-size:clamp(1.18rem,2.1vw,1.5rem);line-height:1.2;margin-top:clamp(30px,4vw,44px);
  font-variation-settings:'opsz' 60,'wght' 560}
.post-body h4{font-family:var(--font-body);font-size:1rem;font-weight:700;margin-top:30px}
.post-body p,.post-body li{line-height:1.75;opacity:.85}
.post-body ul,.post-body ol{padding-left:1.3em;display:grid;gap:9px}
.post-body li::marker{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}
.post-body a:hover{color:var(--color-ink-light)}
.post-body strong,.post-body b{font-weight:700;opacity:1}
.post-body img{width:100%;height:auto;border-radius:18px;margin:clamp(26px,4vw,40px) 0}
.post-body figure{margin:clamp(26px,4vw,40px) 0}
.post-body figure img{margin:0}
.post-body figcaption{margin-top:11px;font-size:.83rem;opacity:.55;text-align:center}
.post-body iframe{width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:18px;
  margin:clamp(26px,4vw,40px) 0;display:block}
.post-body hr{border:0;border-top:1px solid rgba(19,32,46,.12);margin:clamp(34px,4vw,48px) 0}
.post-body table{width:100%;border-collapse:collapse;font-size:.95rem;display:block;overflow-x:auto}
.post-body th,.post-body td{border:1px solid rgba(19,32,46,.12);padding:10px 12px;text-align:left}
/* editorial pull-quote, available to any post that carries one */
.post-body blockquote{font-family:var(--font-display);
  font-variation-settings:'opsz' 120,'wght' 380,'SOFT' 40;
  font-size:clamp(1.28rem,2.5vw,1.8rem);line-height:1.3;letter-spacing:-.012em;
  border-left:3px solid var(--color-accent);padding:4px 0 4px clamp(20px,3vw,30px);
  margin:clamp(34px,4vw,48px) 0}
.post-body blockquote p{opacity:1;line-height:inherit;font-size:inherit}
.post-body blockquote cite{display:block;margin-top:14px;font-family:var(--font-body);
  font-style:normal;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;opacity:.55}
/* /blog/ listing card date line */
.blog-card .bdate{font-size:.71rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--color-accent-dim);margin-bottom:9px}
@media(prefers-reduced-motion:reduce){.post-body img{transition:none}}