/* ============================================================
   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.14;margin-top:18px;letter-spacing:-.012em}
/* Service + What We Treat pages: title at half the standard inner-hero size on
   desktop; floored at the h2 minimum so it never drops below section headings */
.inner-hero.title-half h1{font-size:clamp(1.9rem,3vw,2.5rem)}
/* Services + What We Treat overview pages: a third larger than the detail pages */
.inner-hero.title-half.title-landing h1{font-size:clamp(2.53rem,4vw,3.33rem)}
/* 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:.22em;margin-bottom:-.22em}
.inner-hero h1 .line-inner{display:block}
/* BUGFIX (Aureum Mode B build - BACK-PORT TO THE MASTER)
   There is deliberately NO .js-gated offset on .line-inner any more.
   systems.js reveals the line with
     gsap.fromTo(lines, {yPercent:110}, {yPercent:0})
   and GSAP parses whatever offset is already on the element into its own `y`
   cache before it starts. The master shipped `transform:translateY(110%)` here,
   so GSAP cached y = 110%-resolved-to-px, animated yPercent 110 -> 0 on top of
   that cache, and left every interior H1 permanently pushed out of its
   overflow:hidden .line. The reveal ran; the heading never arrived. Using the
   independent `translate` property instead does not help: GSAP 3.12 reads that
   too (it writes `translate:none` inline when it takes ownership).
   With no CSS offset at all, GSAP caches y = 0 and its own immediateRender
   from-state (yPercent:110) does the hiding, before first paint, because
   systems.js is a render-blocking script at the end of <body>. The no-JS,
   gsap-off and reduced-motion paths all render the line in place, which is
   exactly the contract .js gating exists to protect. */
.inner-hero h1 .line-inner{will-change:transform}
.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:.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{translate:none;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;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:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(30px,4.5vw,64px);align-items:center}
@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(189,155,108,.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);font-variant-numeric:tabular-nums}
.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)}
.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(189,155,108,.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{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)}}
/* two-up variant: used when only two genuine photographs exist for a bio */
@media(min-width:720px){.bio-gallery.two{grid-template-columns:repeat(2,1fr);max-width:900px}}

/* ---------- 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;font-variant-numeric:tabular-nums}
.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 Aureum Physio Mode B build)
   The master ships /blog/ as an index shell only. This block is the one
   sanctioned new stylesheet addition: it dresses blog/_article-template.html
   in the existing design language. Everything here either re-skins a class
   the template already owns (.inner-hero, .img-reveal, .sec-tint, .way) or
   styles long-form prose, which no other page type needed.
   ========================================================================== */

/* ---------- ARTICLE HERO ----------
   Post titles run long, so the H1 steps down from the .t-h1 page scale to a
   headline scale. The line-mask reveal, kicker and crumb are untouched. */
.article-hero h1{font-size:clamp(2rem,4.2vw,3.4rem);max-width:20ch;
  font-variation-settings:'opsz' 120,'wght' 520,'SOFT' 10}
.article-hero .sub{font-size:.9rem;letter-spacing:.02em;opacity:.65;max-width:60ch}
.article-hero .sub time{font-variant-numeric:tabular-nums}

/* ---------- FEATURED IMAGE ----------
   Sits directly under the hero and carries the System 4 reveal like every
   other content photo. 3:2 so wide WordPress featured images are not cropped
   into uselessness. */
.article-lead{padding-top:clamp(18px,2.5vw,32px);padding-bottom:0}
.article-lead .img-reveal{aspect-ratio:3/2;max-height:min(62vh,620px)}
.article-lead .img-reveal img{width:100%;height:100%;object-fit:cover}

/* ---------- LONG-FORM BODY ----------
   Reading measure matches /privacy/'s .legal wrapper so the two long-form
   surfaces on the site agree. Heading rhythm follows the detail pages. */
.article-wrap{padding-top:clamp(38px,5vw,64px)}
.video-embed{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;
  border-radius:16px;margin:28px auto 0;max-width:68ch;box-shadow:0 14px 40px rgba(20,35,28,.14)}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.article-body{max-width:68ch;margin:26px auto 0;font-size:1.02rem;line-height:1.78}
.article-body > :first-child{margin-top:0}
.article-body p{margin-top:20px;opacity:.86}
.article-body h2{margin-top:clamp(40px,4.6vw,58px);font-family:var(--font-display);
  font-variation-settings:'opsz' 90,'wght' 560,'SOFT' 12;
  font-size:clamp(1.45rem,2.6vw,2rem);line-height:1.22;letter-spacing:-.01em}
.article-body h3{margin-top:clamp(30px,3.4vw,42px);font-family:var(--font-display);
  font-variation-settings:'opsz' 60,'wght' 560;
  font-size:clamp(1.18rem,1.9vw,1.42rem);line-height:1.28}
.article-body h4{margin-top:28px;font-size:1.02rem;font-weight:700;letter-spacing:.01em}
.article-body ul,.article-body ol{margin-top:18px;padding-left:1.15em}
.article-body li{margin-top:9px;opacity:.86}
.article-body li::marker{color:var(--color-accent)}
.article-body strong{font-weight:600;opacity:1}
.article-body a{color:var(--color-accent-dim);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}
.article-body a:hover{color:var(--color-accent)}
.article-body img{max-width:100%;height:auto;border-radius:18px;margin-top:26px}
.article-body figure{margin-top:26px}
.article-body figcaption{margin-top:10px;font-size:.82rem;opacity:.6;text-align:center}
.article-body hr{margin-top:34px;border:0;border-top:1px solid rgba(27,36,48,.12)}

/* Inline pull-quote: the editorial voice of .editorial, scaled for body flow
   and kept on the light background so it does not fight the dark break. */
.article-body blockquote{margin:clamp(30px,3.6vw,44px) 0 0;padding:4px 0 4px 26px;
  border-left:3px solid var(--color-accent);
  font-family:var(--font-display);font-variation-settings:'opsz' 72,'wght' 380,'SOFT' 34;
  font-size:clamp(1.16rem,2.1vw,1.5rem);line-height:1.4;letter-spacing:-.005em;opacity:.94}
.article-body blockquote p{margin-top:12px;opacity:1;font-size:inherit;line-height:inherit}
.article-body blockquote > p:first-child{margin-top:0}

/* ---------- AUTHOR CARD (inside the page's one .sec-tint band) ---------- */
.author-card{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);
  gap:clamp(20px,3vw,38px);align-items:center;margin-top:26px;background:#fff;
  border:1px solid rgba(27,36,48,.07);border-radius:clamp(18px,2.4vw,26px);
  padding:clamp(18px,2.6vw,30px);box-shadow:0 8px 28px rgba(27,36,48,.07)}
.author-photo{aspect-ratio:4/5;border-radius:16px}
.author-photo img{width:100%;height:100%;object-fit:cover}
.author-body h3{font-family:var(--font-display);font-variation-settings:'opsz' 60,'wght' 560;
  font-size:clamp(1.1rem,1.8vw,1.35rem)}
.author-body p{margin-top:10px;font-size:.96rem;line-height:1.7;opacity:.78;max-width:56ch}
.author-cta{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;margin-top:20px}

/* ---------- BLOG INDEX LISTING ----------
   The date chip reuses .lnum's slot in the .landing-grid card body. */
.landing-grid .lnum.post-date{letter-spacing:.12em;font-size:.68rem}
.blog-pager{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  align-items:center;margin-top:clamp(34px,4vw,50px)}
.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(27,36,48,.12);color:var(--color-ink-light);
  transition:transform .5s var(--spring),background .3s,border-color .3s}
.blog-pager a:hover{border-color:var(--color-accent);background:var(--accent-soft)}
.blog-pager a:active{transform:scale(.94);transition:transform .1s ease-out}
.blog-pager .cur{background:var(--color-accent);border-color:var(--color-accent);color:#fff}

@media(max-width:640px){
  .author-card{grid-template-columns:1fr;text-align:left}
  .author-photo{max-width:180px}
  .article-body{font-size:1rem}
}

/* ---------- REDUCED MOTION (blog additions) ---------- */
@media (prefers-reduced-motion: reduce){
  .blog-pager a{transition:none}
  .blog-pager a:active{transform:none}
}

/* FAQ page questions section: spans the full content width, heading on one line
   (wraps only on narrow phones); answers widened but kept to a readable measure */
.faq-full h2{max-width:none}
.faq-full .faq-list{max-width:none}
.faq-full .faq-a p{max-width:80ch}

/* Spotlight interview cards: guest portraits are tall, so crop them from the
   top (faces stay in frame) instead of the centre */
.tcard[href^="/spotlight-series/"] .img-reveal img{object-position:50% 0}


/* ---------- CAREERS APPLICATION FORM (/hiring-pt/#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(24,25,27,.07);scroll-margin-top:120px;color:var(--color-ink-light)}
.dark .careers-card{margin-top:0;max-width:none}
.careers-card .cf-head{font-size:.95rem;line-height:1.55;margin-bottom:20px}
.careers-card .cf-head a,.cf-send-err a{color:var(--color-accent-dim)}
.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(24,25,27,.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);color:var(--color-ink-light);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}}