/* ============================================================
   HEARTWOOD DESIGN SYSTEM
   Shared stylesheet for the Heartwood visual language — a
   business records its history in documents the way a tree
   records years in rings, and reading that record is the
   practice. Reused across every rebuilt page, not homepage-only.

   PALETTE — OCL brand hexes ONLY (+ alpha tints of the same):
     #252525 Dark Nav   — page ground
     #333333 Charcoal   — raised panels
     #FFBD48 Primary Gold — ring line-work, accents, CTA ground
     #DA8C00 Heading Gold — decorative accents only
     #FFFFFF White      — text on dark, light section ground

   WCAG AA: gold text only on dark grounds. On white/light grounds
   headings use --panel (charcoal); gold there fails contrast.
   ============================================================ */
:root{
  --ground:#252525;
  --panel:#333333;
  --gold:#FFBD48;
  --gold-deep:#DA8C00;
  --white:#FFFFFF;
  --line:rgba(255,189,72,.28);
  --line-soft:rgba(255,255,255,.14);
  --ink-soft:rgba(255,255,255,.72);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ground);
  color:var(--white);
  font-family:"museo-sans",sans-serif;
  font-weight:400;
  line-height:1.65;
  overflow-x:hidden;
}
h1,h2,h3{font-family:"jubilat",serif;font-weight:500;line-height:1.1;letter-spacing:-0.012em}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.wrap{max-width:1140px;margin:0 auto;padding:0 32px}
em{font-style:italic;color:var(--gold)}

/* ---------- ring glyph: n rings = position in the lifecycle ---------- */
.rings{flex:none}
.rings circle{fill:none;stroke:var(--gold);stroke-width:1.5}
.rings .core{fill:var(--gold);stroke:none}

/* ============================================================
   HEADER
   ============================================================ */
header{
  position:sticky;top:0;z-index:60;
  background:rgba(37,37,37,.94);
  border-bottom:1px solid var(--line-soft);
  backdrop-filter:blur(6px);
}
.nav-row{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.brand{display:flex;align-items:center;gap:13px}
.brand .word{font-family:"jubilat",serif;font-size:19px;color:var(--white)}
.brand .word span{display:block;font-family:"museo-sans",sans-serif;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-top:2px}
nav.links{display:flex;align-items:center;gap:26px}
nav.links a{font-size:14px;color:var(--ink-soft);transition:color .15s}
nav.links a:hover,nav.links a.active{color:var(--gold)}
.nav-cta{border:1px solid var(--gold);color:var(--gold);padding:8px 18px;font-size:13px;letter-spacing:.04em;transition:background .15s,color .15s}
.nav-cta:hover{background:var(--gold);color:var(--ground)}
.nav-phone{font-size:13px;color:var(--ink-soft)}
.lang-toggle{font-size:13px;color:var(--ink-soft);display:flex;align-items:center;gap:2px}
.lang-active{color:var(--gold);font-weight:700}
.lang-link{color:var(--ink-soft)}
.lang-link:hover{color:var(--gold)}
.burger{display:none;background:none;border:1px solid var(--line-soft);padding:8px 10px;cursor:pointer}
.burger span{display:block;width:20px;height:2px;background:var(--white);margin:4px 0}

/* ============================================================
   HERO — rings emanate from an off-canvas core: the founding
   of the practice sits off-page, you are looking at the growth.
   ============================================================ */
.hero{position:relative;padding:110px 0 120px;overflow:hidden;border-bottom:1px solid var(--line-soft)}
.hero-rings{position:absolute;top:-42%;right:-22%;width:min(78vw,980px);height:auto;pointer-events:none}
.hero-rings circle{fill:none;stroke:var(--gold);opacity:.5}
.hero-rings .yr{font-family:"museo-sans",sans-serif;font-size:11px;letter-spacing:.14em;fill:var(--gold);opacity:.85}
.hero-inner{position:relative;max-width:640px}
.hero-vertical{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:14px}
.eyebrow{font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:26px}
.hero h1{font-size:clamp(38px,5.4vw,62px);margin-bottom:26px}
.hero .lede{font-size:17px;color:var(--ink-soft);max-width:520px;margin-bottom:38px}
.cta-row{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.hero-meta{display:flex;flex-wrap:wrap;gap:28px;margin-top:44px;font-size:12.5px;color:var(--ink-soft)}
.hero-meta strong{color:var(--gold);display:block;font-size:11px;letter-spacing:.1em;margin-bottom:2px}
.btn-gold{background:var(--gold);color:var(--ground);font-weight:700;padding:15px 30px;font-size:15px;letter-spacing:.02em;display:inline-block;transition:background .15s}
.btn-gold:hover{background:var(--gold-deep);color:var(--white)}
.btn-quiet{border-bottom:1px solid var(--line);padding-bottom:3px;font-size:15px;color:var(--white)}
.btn-quiet:hover{color:var(--gold)}

/* ============================================================
   THE RECORD — core-sample strip. A bore through the trunk:
   the lifecycle stages a commercial practice reads, in order.
   Order carries information here; the numbering is earned.
   ============================================================ */
.record{background:var(--panel);border-bottom:1px solid var(--line-soft);padding:78px 0 84px}
.record .kicker{font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.record h2{font-size:clamp(26px,3.2vw,36px);max-width:640px;margin-bottom:14px}
.record .sub{color:var(--ink-soft);max-width:600px;margin-bottom:54px}
.core-sample{position:relative;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr)}
.stage{padding:26px 20px 30px;border-left:1px solid var(--line);position:relative}
.stage:first-child{border-left:none}
.stage::before{content:"";position:absolute;top:-5px;left:-5px;width:9px;height:9px;border-radius:50%;background:var(--gold);transform:scale(0);transition:transform .4s ease}
.stage:first-child::before{left:0}
.stage:nth-child(1)::before{transition-delay:0ms}
.stage:nth-child(2)::before{transition-delay:80ms}
.stage:nth-child(3)::before{transition-delay:160ms}
.stage:nth-child(4)::before{transition-delay:240ms}
.stage:nth-child(5)::before{transition-delay:320ms}
.reveal.in .stage::before{transform:scale(1)}
.stage b{display:block;font-family:"jubilat",serif;font-weight:500;font-size:17px;margin-bottom:6px}
.stage span{font-size:13px;color:var(--ink-soft);line-height:1.5;display:block}

/* ============================================================
   FIRM — white breather section
   ============================================================ */
.firm{background:var(--white);color:var(--panel);padding:96px 0 90px}
.firm .kicker{color:var(--panel)}
.firm h2{color:var(--panel);font-size:clamp(30px,3.8vw,44px);margin-bottom:28px;max-width:560px}
.firm-cols{display:grid;grid-template-columns:1.25fr .9fr;gap:64px;align-items:start}
.firm p{margin-bottom:18px;color:var(--panel)}
.firm .es{font-style:italic}
.firm em{color:inherit;font-style:italic}
.facts{border-top:3px solid var(--gold);font-size:14px}
.facts div{display:grid;grid-template-columns:110px 1fr;gap:14px;padding:13px 2px;border-bottom:1px solid rgba(51,51,51,.16)}
.facts dt{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--panel);padding-top:3px}
.facts dd{color:var(--panel)}

/* ============================================================
   PRACTICE — three ring-bands. Ring count = distance from the
   founding core: counsel (inner), disputes (middle), construction
   (outer, where the practice grew).
   ============================================================ */
.practice{padding:96px 0 40px}
.practice .kicker{font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.practice h2{font-size:clamp(30px,3.8vw,44px);margin-bottom:64px;max-width:560px}
.band{display:grid;grid-template-columns:88px 1fr;gap:34px;padding:44px 0 48px;border-top:1px solid var(--line)}
.band h3{font-size:24px;margin-bottom:14px}
.band p{color:var(--ink-soft);max-width:640px;margin-bottom:20px}
.band .more{font-size:14px;color:var(--gold);border-bottom:1px solid var(--line);padding-bottom:2px}
.band .more:hover{color:var(--white)}

/* ---------- item-list: title + sub, ring-band detail lists ----------
   New for interior listing pages (practice areas): a band's body can
   carry a longer enumerated list than the homepage's one-liner bands. */
.item-list{margin-top:8px;border-top:1px solid var(--line)}
.item-list li{list-style:none;padding:18px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:4px}
.item-list b{font-family:"jubilat",serif;font-weight:500;font-size:16px;color:var(--white)}
.item-list span{font-size:14px;color:var(--ink-soft);max-width:680px;line-height:1.55}

/* ============================================================
   PAGE HEADER — interior-page hero variant. No off-canvas ring
   burst; a single corner ring-glyph instead, same palette/type.
   ============================================================ */
.page-hd{position:relative;padding:84px 0 70px;border-bottom:1px solid var(--line-soft);overflow:hidden}
.page-hd .corner-ring,.hero .corner-ring{position:absolute;top:-70px;right:-70px;width:220px;height:220px;opacity:.45;pointer-events:none}
.page-hd .corner-ring circle,.hero .corner-ring circle{fill:none;stroke:var(--gold)}
.page-hd-grid{position:relative;display:grid;grid-template-columns:1.3fr .85fr;gap:56px;align-items:end}
.page-hd h1{font-size:clamp(34px,4.6vw,54px);margin-bottom:16px}
.page-hd .tag{font-size:16px;color:var(--ink-soft);margin-bottom:30px}
.portrait-fig{position:relative}
.portrait-fig img{width:100%;height:auto;display:block;border:1px solid var(--line-soft)}
.portrait-fig figcaption{margin-top:16px}
.portrait-fig .name{display:block;font-family:"jubilat",serif;font-size:18px;color:var(--white)}
.portrait-fig .name em{display:block;font-style:italic;color:var(--gold);font-size:13px;margin-top:3px;font-family:"museo-sans",sans-serif}
.portrait-fig .mark{display:block;margin-top:8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}

/* ---------- pull-quote breather ---------- */
.pull-quote{padding:68px 0 76px;border-bottom:1px solid var(--line-soft)}
.pull-quote p{font-family:"jubilat",serif;font-size:clamp(24px,3.4vw,42px);font-weight:500;line-height:1.2;max-width:26ch;color:var(--white)}

/* ============================================================
   CONTENT SECTION — two-column eyebrow/heading + prose, reused
   for every prose block on interior pages.
   ============================================================ */
.content-sec{padding:76px 0;border-bottom:1px solid var(--line-soft)}
.content-grid{display:grid;grid-template-columns:.9fr 1.4fr;gap:56px;align-items:start}
.content-grid h2{font-size:clamp(26px,3.2vw,38px);max-width:20ch}
.content-grid .prose p{color:var(--ink-soft);margin-bottom:18px;max-width:64ch}
.content-grid .prose p:last-child{margin-bottom:0}
.text-link{font-size:14px;color:var(--gold);border-bottom:1px solid var(--line);padding-bottom:2px}
.text-link:hover{color:var(--white)}

/* ---------- case-box callout ---------- */
.case-box{background:var(--panel);border:1px solid var(--line-soft);border-left:3px solid var(--gold);padding:28px 30px;margin-bottom:24px}
.case-box .label{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.case-box h3{font-size:19px;margin-bottom:14px;color:var(--white)}
.case-box p{color:var(--ink-soft);margin-bottom:14px}
.case-box p:last-child{margin-bottom:0}
.fine-print{font-size:10.5px;letter-spacing:.08em;color:rgba(255,255,255,.6);margin-top:18px;line-height:1.6}
.pull-stat{font-size:17px;color:var(--gold);border-left:2px solid var(--gold);padding-left:20px;margin-top:26px}

/* ============================================================
   CREDENTIALS — panel-ground four-column record.
   ============================================================ */
.creds-sec{background:var(--panel);padding:86px 0 88px;border-bottom:1px solid var(--line-soft)}
.creds-head{margin-bottom:52px}
.creds-head h2{font-size:clamp(28px,3.6vw,40px)}
.creds-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:36px}
.creds-cols .col-label{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.creds-cols ul{list-style:none}
.creds-cols li{padding:12px 0;border-top:1px solid var(--line-soft)}
.creds-cols li:first-child{border-top:none}
.creds-cols strong{display:block;font-size:14px;color:var(--white);margin-bottom:3px}
.creds-cols li span{display:block;font-size:12px;color:var(--ink-soft)}

/* ============================================================
   BLOG — index listing (blog.html). Card grid markup/classes are
   fixed by scripts/blog-scheduler.py; only colors/type restyled.
   ============================================================ */
.blog-hd{padding:110px 0 90px;border-bottom:1px solid var(--line-soft)}
.blog-hd .num{font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.blog-hd h1{font-size:clamp(38px,5.4vw,62px)}
.blog-hd .tag{margin-top:18px;font-size:14px;letter-spacing:.04em;color:var(--ink-soft)}
.blog-index{padding:80px 0 120px}
.blog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-soft)}
.blog-card{background:var(--panel);padding:44px 40px 48px;display:flex;flex-direction:column;gap:14px;transition:background .25s ease}
.blog-card:hover{background:#3d3d3d}
.blog-tag{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.blog-card-title{font-size:26px;margin-top:4px;max-width:22ch}
.blog-card-excerpt{font-size:14px;color:var(--ink-soft);line-height:1.65;margin-top:auto;padding-top:12px}
.blog-card-link{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);padding-top:18px;border-top:1px solid var(--line-soft);display:flex;justify-content:space-between;align-items:center;margin-top:8px}

/* ============================================================
   CTA — the one loud block on the page: full brand gold.
   ============================================================ */
.talk{background:var(--gold);color:var(--ground);padding:92px 0}
.talk .kicker{font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--ground);margin-bottom:18px}
.talk-inner{display:grid;grid-template-columns:1.2fr 1fr;gap:56px;align-items:center}
.talk h2{font-size:clamp(34px,4.4vw,54px);margin-bottom:26px}
.talk em{color:inherit}
.btn-dark{background:var(--panel);color:var(--white);font-weight:700;padding:15px 30px;font-size:15px;display:inline-block;border-radius:10px;transition:background .15s}
.btn-dark:hover{background:var(--ground)}
.talk .call{display:block;margin-top:18px;font-size:15px;font-weight:700}
.talk-facts{font-size:14.5px;line-height:1.7}
.talk-facts b{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:2px}
.talk-facts>div{padding:14px 0;border-top:1px solid rgba(37,37,37,.28)}

/* ============================================================
   FOOTER
   ============================================================ */
footer{background:var(--ground);padding:70px 0 46px;border-top:1px solid var(--line-soft)}
.foot-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:44px;margin-bottom:50px}
.foot-cols h4{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:16px;font-family:"museo-sans",sans-serif;font-weight:700}
.foot-cols p,.foot-cols a{font-size:13.5px;color:var(--ink-soft);display:block;margin-bottom:9px}
.foot-cols a:hover{color:var(--gold)}
.disclaimer{border-top:1px solid var(--line-soft);padding-top:28px;font-size:11.5px;line-height:1.7;color:rgba(255,255,255,.6)}
.copyline{margin-top:16px;font-size:12px;color:var(--ink-soft)}

/* ============================================================
   GROWTH COMPANION — fixed scroll-progress ring glyph
   (index.html + index-es.html only). Never intercepts clicks.
   ============================================================ */
.growth-companion{
  position:fixed;right:24px;bottom:24px;z-index:80;
  display:flex;align-items:center;gap:10px;
  background:rgba(37,37,37,.88);
  border:1px solid var(--line-soft);
  padding:10px 14px;border-radius:40px;
  
  backdrop-filter:blur(4px);
  transition:box-shadow .3s ease;
}
.growth-companion .rings circle{opacity:0;transition:opacity .3s ease}
.growth-companion .rings circle.lit{opacity:1}
.growth-companion .gc-year{font-family:"museo-sans",sans-serif;font-size:11px;letter-spacing:.08em;color:var(--gold);min-width:34px;text-align:right}
.growth-companion.pulse{animation:pulse 1s ease}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(255,189,72,.6)}
  70%{box-shadow:0 0 0 14px rgba(255,189,72,0)}
  100%{box-shadow:0 0 0 0 rgba(255,189,72,0)}
}
@media (max-width:700px){
  .growth-companion{display:none}
}

/* ---------- reveal motion ---------- */
:root{
  --ease-out:cubic-bezier(.215,.61,.355,1);   /* reveals */
  --ease-soft:cubic-bezier(.25,.46,.45,.94);  /* continuous */
  --ease-pop:cubic-bezier(.175,.885,.32,1.275) /* pulse/finish */
}
.reveal{opacity:0;transform:translateY(32px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.hero-rings circle{stroke-dasharray:4000;stroke-dashoffset:4000;animation:draw 2.4s ease-out forwards}
.hero-rings circle:nth-child(2){animation-delay:.12s}
.hero-rings circle:nth-child(3){animation-delay:.24s}
.hero-rings circle:nth-child(4){animation-delay:.36s}
.hero-rings circle:nth-child(5){animation-delay:.48s}
.hero-rings circle:nth-child(6){animation-delay:.6s}
@keyframes draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero-rings circle{animation:none;stroke-dashoffset:0}
  .stage::before{transition:none;transform:scale(1)}
  .growth-companion.pulse{animation:none}
  html{scroll-behavior:auto}
}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .firm-cols,.talk-inner,.content-grid{grid-template-columns:1fr;gap:40px}
  .core-sample{grid-template-columns:1fr;border-left:1px solid var(--line);border-top:none;border-bottom:none}
  .stage{border-left:none;border-top:1px solid var(--line)}
  .stage:first-child{border-top:none}
  .stage::before{top:-5px;left:-5px}
  .foot-cols{grid-template-columns:1fr 1fr}
  .page-hd-grid{grid-template-columns:1fr;gap:32px}
  .creds-cols{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  nav.links,.nav-phone{display:none}
  .burger{display:block}
  nav.links.open{display:flex;position:absolute;top:100%;left:0;right:0;background:var(--ground);flex-direction:column;padding:22px 32px;border-bottom:1px solid var(--line-soft)}
  nav.links.open .nav-phone{display:block}
  .band{grid-template-columns:1fr;gap:18px}
  .hero{padding:78px 0 84px}
  .page-hd{padding:64px 0 52px}
  .creds-cols{grid-template-columns:1fr}
  .blog-hd{padding:78px 0 64px}
  .blog-grid{grid-template-columns:1fr}
  .blog-card{padding:36px 28px 40px}
}

/* ---------- real brand assets (assets pass, 2026-07-08) ---------- */
.brand-logo{height:42px;width:auto;display:block}
.foot-logo{height:34px;width:auto;display:block;margin-bottom:18px}
@media (max-width:760px){.brand-logo{height:34px}}
.firm .place{margin-top:64px;border-top:3px solid var(--gold);padding-top:0;background:none}
.firm .place img{display:block;width:100%;aspect-ratio:21/9;object-fit:cover;object-position:center 18%}
.firm .place figcaption{color:var(--panel);font-size:13px;letter-spacing:.04em;padding:12px 2px 0;text-align:right}
.firm .place figcaption b{color:var(--panel);font-weight:700}
.firm-side{display:flex;flex-direction:column;gap:26px}
.firm-portrait{width:100%;height:auto;display:block;border-bottom:3px solid var(--gold)}
.facts dd .role{display:block;font-style:italic;color:var(--panel);opacity:.75;font-size:12.5px;margin-top:2px}

/* italic transitions: heading tracking + jubilat italic slant swallow the
   word gap on either side of an <em>; restore it optically */
h1 em,h2 em,h3 em,.lede em,p em{margin-left:.14em;margin-right:.1em}

/* companion is a link to the firm's story (Option A, 2026-07-08) */
a.growth-companion{cursor:pointer;text-decoration:none;transition:transform .2s ease}
a.growth-companion:hover,a.growth-companion:focus-visible{transform:scale(1.06)}
a.growth-companion .gc-label{position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%);white-space:nowrap;background:var(--ground);color:var(--white);border:1px solid var(--line);font-size:12px;letter-spacing:.05em;padding:7px 12px;opacity:0;pointer-events:none;transition:opacity .2s ease}
a.growth-companion:hover .gc-label,a.growth-companion:focus-visible .gc-label{opacity:1}
@media (prefers-reduced-motion:reduce){a.growth-companion{transition:none}}

/* ============ motion v2 (evaluation brief, options 1+2) ============ */

/* --- orchestrated hero load --- */
.js-motion .hero .eyebrow,.js-motion .hero h1,.js-motion .hero .lede,.js-motion .hero .cta-row{
  opacity:0;transform:translateY(34px);
  animation:heroRise .85s var(--ease-out) forwards}
.js-motion .hero .eyebrow{animation-delay:.1s}
.js-motion .hero h1{animation-delay:.28s}
.js-motion .hero .lede{animation-delay:.55s}
.js-motion .hero .cta-row{animation-delay:.72s}
@keyframes heroRise{to{opacity:1;transform:none}}
.js-motion .hero-rings circle{animation-delay:.5s}
.js-motion .hero-rings{transition:transform .1s linear;will-change:transform;transform-origin:100% 0}

/* --- practice glyphs draw their rings on reveal --- */
.js-motion .band .rings circle:not(.core){stroke-dasharray:200;stroke-dashoffset:200}
.js-motion .band.in .rings circle:not(.core){animation:drawRing 1s var(--ease-out) forwards}
.js-motion .band.in .rings circle:nth-of-type(3){animation-delay:.15s}
.js-motion .band.in .rings circle:nth-of-type(4){animation-delay:.3s}
.js-motion .band.in .rings circle:nth-of-type(5){animation-delay:.45s}
@keyframes drawRing{to{stroke-dashoffset:0}}

/* --- header compresses after 40px scroll --- */
header{transition:border-color .3s var(--ease-soft)}
header .nav-row{transition:padding .3s var(--ease-soft)}
header.scrolled{border-bottom-color:var(--gold)}
header.scrolled .nav-row{padding:11px 0}

/* --- photo band breathe --- */
.js-motion .firm .place img{will-change:object-position}

/* --- companion pulse gets the pop curve --- */
.growth-companion.pulse{animation:pulse .9s var(--ease-pop)}

@media (prefers-reduced-motion:reduce){
  .js-motion .hero .eyebrow,.js-motion .hero h1,.js-motion .hero .lede,.js-motion .hero .cta-row{animation:none;opacity:1;transform:none}
  .js-motion .band .rings circle:not(.core){stroke-dasharray:none;stroke-dashoffset:0;animation:none}
  header,.hero-rings{transition:none}
}

/* ============ 125 pass ============ */

/* --- The Bore: record section pins while the five stages illuminate --- */
@media (min-width:961px){
  .js-motion .record.bore{height:260vh;padding:0;position:relative}
  .js-motion .record.bore .record-sticky{position:sticky;top:0;min-height:100vh;display:flex;align-items:center;padding:78px 0 84px;box-sizing:border-box}
  .js-motion .record.bore .wrap{width:100%}
  .js-motion .record.bore .stage{opacity:.22;transition:opacity .45s var(--ease-soft)}
  .js-motion .record.bore .stage.on{opacity:1}
  .js-motion .record.bore .stage.on::before{transform:scale(1)}
  .js-motion .record.bore .bore-line{position:absolute;left:0;top:-1px;height:2px;width:100%;background:var(--gold);transform-origin:0 50%;transform:scaleX(0);z-index:2}
}
.bore-line{display:none}
.js-motion .record.bore .core-sample{position:relative}
@media (min-width:961px){.js-motion .record.bore .bore-line{display:block}}
@media (prefers-reduced-motion:reduce){
  .record.bore{height:auto!important}
  .record.bore .stage{opacity:1!important}
}

/* --- micro-interactions --- */
nav.links a,.more{background-image:linear-gradient(var(--gold),var(--gold));background-repeat:no-repeat;background-size:0% 1px;background-position:0 100%;transition:background-size .35s var(--ease-out),color .15s}
nav.links a:hover,nav.links a:focus-visible,.more:hover,.more:focus-visible{background-size:100% 1px}
.more{border-bottom:none;padding-bottom:3px}
.stage{transition:transform .35s var(--ease-out),opacity .45s var(--ease-soft)}
.stage:hover{transform:translateY(-3px)}
.facts div{transition:background .25s var(--ease-soft)}
.facts div:hover{background:rgba(255,189,72,.06)}
.btn-gold,.btn-dark{transition:transform .25s var(--ease-out),background .15s}
.btn-gold:active,.btn-dark:active{transform:scale(.97)}

/* --- skip link --- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--gold);color:var(--ground);font-weight:700;padding:12px 20px}
.skip-link:focus{left:0}

/* --- print --- */
@media print{
  header,.growth-companion,.skip-link,.hero-rings,.btn-gold,.btn-quiet,.nav-cta{display:none!important}
  body{background:#ffffff;color:#333333}
  .hero,.record,.practice,footer{background:#ffffff;color:#333333}
  .hero h1,.practice h2,.record h2{color:#333333}
  a{color:#333333;text-decoration:underline}
}
@media (prefers-reduced-motion:reduce){
  nav.links a,.more,.stage,.facts div,.btn-gold,.btn-dark{transition:none}
}

/* ============ blog article layout (Heartwood) ============ */
.article-hd .article-date{color:var(--ink-soft);font-size:13px;letter-spacing:.06em;margin-top:14px}
.article{background:var(--white);color:var(--panel);padding:72px 0 96px}
.article-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(240px,.7fr);gap:64px;align-items:start}
.article-body{font-size:17px;line-height:1.75;max-width:680px}
.article-body p{margin-bottom:20px}
.article-body h2,.article-body h3{color:var(--panel);margin:40px 0 14px;font-size:23px}
.article-body h3{border-bottom:2px solid var(--gold);display:inline-block;padding-bottom:4px}
.article-body ul,.article-body ol{margin:0 0 20px 24px}
.article-body li{margin-bottom:8px}
.article-body a{color:var(--panel);background-image:linear-gradient(var(--gold),var(--gold));background-repeat:no-repeat;background-size:100% 2px;background-position:0 100%}
.article-body blockquote{border-left:3px solid var(--gold);padding:6px 0 6px 22px;margin:28px 0;font-family:"jubilat",serif;font-size:19px}
.article-aside{position:sticky;top:96px}
.aside-box{border-top:3px solid var(--gold);background:rgba(51,51,51,.04);padding:24px 22px}
.aside-box .kicker{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--panel);font-weight:700;margin-bottom:10px}
.aside-box p{font-size:14.5px;margin-bottom:18px}
@media (max-width:860px){.article-grid{grid-template-columns:1fr}.article-aside{position:static}}

/* CTA payoff: the completed ring set, where the companion finishes */
.talk-emblem{display:block;margin-bottom:26px}
.talk-emblem circle{stroke:var(--ground)}
.talk-emblem .core{fill:var(--ground)}
.js-motion .talk.emblem-in .talk-emblem circle:not(.core){stroke-dasharray:210;stroke-dashoffset:210;animation:drawRing 1.1s var(--ease-out) forwards}
.js-motion .talk.emblem-in .talk-emblem circle:nth-of-type(3){animation-delay:.12s}
.js-motion .talk.emblem-in .talk-emblem circle:nth-of-type(4){animation-delay:.24s}
.js-motion .talk.emblem-in .talk-emblem circle:nth-of-type(5){animation-delay:.36s}
.js-motion .talk.emblem-in .talk-emblem circle:nth-of-type(6){animation-delay:.48s}
@media (prefers-reduced-motion:reduce){.talk-emblem circle{animation:none!important;stroke-dashoffset:0!important;stroke-dasharray:none!important}}

/* ============ LIGHT CHROME (PO: standard logo, never inverted) ============ */
header{background:rgba(255,255,255,.96);border-bottom:1px solid rgba(51,51,51,.14)}
header.scrolled{border-bottom-color:var(--gold);box-shadow:0 1px 0 rgba(51,51,51,.06)}
nav.links a{color:var(--panel);opacity:.85}
nav.links a:hover,nav.links a:focus-visible{color:var(--panel);opacity:1}
nav.links a[aria-current="page"]{color:var(--panel);opacity:1;background-size:100% 1px}
.nav-phone{color:var(--panel);opacity:.7}
.nav-cta{border-color:var(--panel);color:var(--panel)}
.nav-cta:hover{background:var(--panel);color:var(--white)}
.burger span{background:var(--panel)}
nav.links.open{background:var(--white);border-bottom:1px solid rgba(51,51,51,.14)}
footer{background:var(--white);border-top:3px solid var(--gold);color:var(--panel)}
.foot-cols h4{color:var(--panel)}
.foot-cols p,.foot-cols a{color:rgba(51,51,51,.78)}
.foot-cols a:hover{color:var(--panel)}
.disclaimer{border-top:1px solid rgba(51,51,51,.16);color:rgba(51,51,51,.62)}
.copyline{color:rgba(51,51,51,.78)}
.brand-logo{height:46px}
.foot-logo{height:38px}
@media print{header{display:block!important;background:#ffffff;border:none}nav.links,.nav-cta,.burger,.nav-phone{display:none!important}}

/* light-chrome AA fixes: language toggle + disclaimer */
.lang-toggle .lang-active{color:var(--panel);font-weight:700}
.lang-toggle,.lang-toggle .lang-sep,.lang-toggle a{color:rgba(51,51,51,.74)}
.lang-toggle a:hover{color:var(--panel)}
.disclaimer,.disclaimer span{color:rgba(51,51,51,.72)}

nav.links a.active{color:var(--panel);opacity:1;background-size:100% 1px}

/* stages are navigation: affordance + focus illumination inside the bore */
a.stage{display:block;color:inherit}
.stage-go{position:absolute;right:16px;bottom:14px;color:var(--gold);font-size:15px;opacity:0;transform:translateX(-6px);transition:opacity .3s var(--ease-out),transform .3s var(--ease-out)}
a.stage:hover .stage-go,a.stage:focus-visible .stage-go{opacity:1;transform:none}
.js-motion .record.bore .stage:focus-visible,.js-motion .record.bore .stage:focus-within{opacity:1}
.band{scroll-margin-top:90px}

/* cross-page fades */
.page-fade-in body{animation:pageIn .38s var(--ease-soft)}
.page-fade-out body{opacity:0;transition:opacity .19s var(--ease-soft)}
@keyframes pageIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.page-fade-in body{animation:none}.page-fade-out body{opacity:1;transition:none}}

/* print letterhead */
@media print{
  .brand-logo{display:block;height:40px;margin:0 0 8px}
  .growth-companion,.talk-emblem,.hero-rings,.bore-line{display:none!important}
  .record.bore{height:auto!important}
  .article-aside,.aside-box{display:none}
}

/* ============ lifecycle as actual rings (PO option 2) ============ */
.lifecycle-rings{display:none}
.lc-core{fill:var(--gold)}
.lc-ring{fill:none;stroke:rgba(255,189,72,.16);stroke-width:1.5;transition:stroke .5s var(--ease-soft)}
@media (min-width:961px){
  .js-motion .record.bore .record-duo{display:grid;grid-template-columns:1.05fr .85fr;gap:64px;align-items:center}
  .js-motion .record.bore .lifecycle-rings{display:block;width:100%;max-width:420px;justify-self:center}
  /* stages become a vertical reading list beside the rings */
  .js-motion .record.bore .core-sample{grid-template-columns:1fr;border-top:none;border-bottom:none}
  .js-motion .record.bore .stage{border-left:none;border-top:1px solid var(--line);padding:18px 44px 20px 2px}
  .js-motion .record.bore .stage:first-of-type{border-top:none}
  .js-motion .record.bore .stage::before{top:24px;left:auto;right:20px;transform:scale(0)}
  .js-motion .record.bore .stage.on::before{transform:scale(1)}
  .js-motion .record.bore .bore-line{display:none}
  .js-motion .record.bore .lc-ring.on{stroke:var(--gold);stroke-width:2}
  .js-motion .record.bore .lc-ring{stroke-dasharray:1100;stroke-dashoffset:0}
  .js-motion .record.bore .lc-ring.on{animation:drawRing 1.1s var(--ease-out)}
  .js-motion .record.bore .stage-go{bottom:auto;top:20px}
}


/* the main ring diagram overlaps the stage text (PO 2026-07-08) */
@media (min-width:961px){
  .js-motion .record.bore .record-duo{display:block;position:relative}
  .js-motion .record.bore .core-sample{position:relative;z-index:1;max-width:660px}
  .js-motion .record.bore .lifecycle-rings{
    display:block;position:absolute;z-index:0;
    width:min(56vw,760px);max-width:none;
    right:-40px;top:50%;transform:translateY(-50%);
    pointer-events:none}
  .js-motion .record.bore .lc-ring{opacity:.6}
  .js-motion .record.bore .lc-ring.on{opacity:1}
  .js-motion .record.bore .stage::before{display:none}
  .js-motion .record.bore .stage{padding-left:2px}
}

/* inscribed rings: faint underlay, gold stroke drawn by scroll, glowing tip */
.lc-under{fill:none;stroke:rgba(255,189,72,.14);stroke-width:1.2}
path.lc-ring{fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round}
.lc-tip{fill:var(--gold);filter:drop-shadow(0 0 5px rgba(255,189,72,.9));opacity:0;transition:opacity .2s linear}

/* FAQ (visible companion to FAQPage JSON-LD) */
.faq{background:var(--white);color:var(--panel);padding:80px 0 96px}
.faq .kicker{color:var(--panel)}
.faq h2{color:var(--panel);font-size:clamp(26px,3.2vw,36px);margin-bottom:36px}
.faq-item{border-top:1px solid rgba(51,51,51,.16);max-width:720px}
.faq-item:last-of-type{border-bottom:1px solid rgba(51,51,51,.16)}
.faq-item summary{font-family:"jubilat",serif;font-weight:500;font-size:18px;padding:18px 34px 18px 2px;cursor:pointer;list-style:none;position:relative}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:8px;top:50%;transform:translateY(-50%);color:var(--gold-deep);font-size:22px;transition:transform .3s var(--ease-out)}
.faq-item[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq-item summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.faq-item p{padding:0 2px 20px;max-width:640px}
@media (prefers-reduced-motion:reduce){.faq-item summary::after{transition:none}}