/* ==========================================================================
   REcapture — Site Stylesheet
   Rebuilt 2026-08-03 around ember #E4643B. Ground is a deep complementary
   teal-ink so the accent reads hot rather than muddy; neutral grays are what
   make orange look machine-generated. Structure is carried by hairline rules
   and typographic hierarchy, not icon-card grids.
   All colour pairs verified against WCAG 2.1 AA.
   ========================================================================== */

/* --- 1. TOKENS ----------------------------------------------------------- */
:root{
  /* Ground. Hue ~198, the complement of ember. */
  --ink-900:#0D222B;       /* darkest field: hero, dark bands, footer */
  --ink-800:#12262F;       /* secondary dark field */
  --ink-700:#22404A;       /* hairlines on dark */
  --ink-text:#12232B;      /* body copy on paper */
  --ink-mute:#4C6470;      /* secondary copy on paper */

  --paper:#F6F1E9;         /* page ground, warm */
  --paper-lift:#FBF8F3;    /* raised panels */
  --paper-text:#EFEAE0;    /* copy on dark */
  --paper-mute:#A9B7BF;    /* secondary copy on dark */

  /* Accent. Ember #E4643B measures 2.93:1 on warm paper, so it is never used
     for text on light. --ember-deep is the same hue at 5.03:1. */
  --ember:#E4643B;         /* dark fields, display sizes only (4.83:1) */
  --ember-tint:#EC7651;    /* dark fields, small text (5.68:1 / 5.41:1) */
  --ember-deep:#B2431F;    /* light fields, and solid button grounds */
  --ember-press:#98391B;   /* button hover, 6.35:1 on paper */

  --rule:rgba(18,35,43,.17);
  --rule-soft:rgba(18,35,43,.10);
  --rule-dark:rgba(239,234,224,.20);

  --font-display:'Source Serif 4',Georgia,'Times New Roman',serif;
  --font-body:'Public Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;

  --wrap:1120px;
  --wrap-narrow:760px;
}

/* --- 2. BASE ------------------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  color:var(--ink-text);
  background:var(--paper);
  font-size:17px;
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.18;letter-spacing:-.005em}
a{color:inherit}
img{max-width:100%;display:block}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
.narrow{max-width:var(--wrap-narrow)}
section{padding:76px 0}
.lede{font-size:1.16rem;line-height:1.6;color:var(--ink-mute)}

/* Role subhead. Sits between the outcome H1 and the explanatory lede, so it
   reads as an apposition to the headline rather than the start of body copy. */
.lede-role{
  font-family:var(--font-display);
  font-size:clamp(1.16rem,1.9vw,1.4rem);
  font-weight:600;line-height:1.3;
  color:var(--ink-text);
  margin-top:18px;
}
.on-dark .lede-role{color:var(--paper-text)}
.lede-role + .lede{margin-top:14px}

/* Eyebrow label. A short ember rule sits above it; no monospace, no icons. */
.eyebrow{
  display:block;
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--ink-mute);
  padding-top:14px;
  border-top:2px solid var(--ember-deep);
  margin-bottom:22px;
  max-width:max-content;
}
.on-dark .eyebrow{color:var(--paper-text);border-top-color:var(--ember-tint)}

/* --- 3. LINKS AND BUTTONS ------------------------------------------------ */
.btn{
  display:inline-block;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.94rem;
  letter-spacing:.01em;
  text-decoration:none;
  padding:14px 26px;
  border:1px solid transparent;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.btn-solid{background:var(--ink-900);color:var(--paper);border-color:var(--ink-900)}
.btn-solid:hover{background:var(--ember-deep);border-color:var(--ember-deep)}
.btn-outline{border-color:var(--ink-900);color:var(--ink-900)}
.btn-outline:hover{background:var(--ink-900);color:var(--paper)}
.on-dark .btn-solid{background:var(--paper);color:var(--ink-900);border-color:var(--paper)}
.on-dark .btn-solid:hover{background:var(--ember-tint);border-color:var(--ember-tint);color:var(--ink-900)}
.on-dark .btn-outline{border-color:rgba(239,234,224,.62);color:var(--paper-text)}
.on-dark .btn-outline:hover{background:var(--paper);color:var(--ink-900);border-color:var(--paper)}

/* Text link with a rule under it — the site's default forward action. */
.tlink{
  display:inline-block;
  font-size:.9rem;font-weight:600;
  text-decoration:none;
  color:var(--ink-text);
  border-bottom:1px solid var(--ember-deep);
  padding-bottom:2px;
  transition:color .16s ease,border-color .16s ease;
}
.tlink:hover{color:var(--ember-deep)}
.on-dark .tlink{color:var(--paper-text);border-bottom-color:var(--ember)}
.on-dark .tlink:hover{color:var(--ember-tint)}

/* --- 4. NAV -------------------------------------------------------------- */
nav{
  position:sticky;top:0;z-index:50;
  background:rgba(246,241,233,.96);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--rule);
}
.nav-inner{display:flex;align-items:center;gap:18px;height:72px}
.wordmark{
  display:inline-flex;align-items:center;
  font-family:var(--font-body);
  font-weight:700;font-size:1.24rem;
  letter-spacing:-.018em;
  text-decoration:none;
  margin-right:auto;
  color:var(--ink-900);
}
.wordmark .re{color:var(--ink-900)}
.wordmark .cap{color:var(--ink-mute);font-weight:500}
.wordmark-light{color:var(--paper)}
.wordmark-light .re{color:var(--paper)}
.wordmark-light .cap{color:var(--paper-mute)}

/* Viewfinder mark: four corner brackets, ember centre. */
.brand-mark{width:1.04em;height:1.04em;margin-right:.42em;flex:0 0 auto}
.brand-mark path{stroke:var(--ink-900);stroke-width:3.5;fill:none;stroke-linecap:square}
.brand-mark circle{fill:var(--ember-deep)}
.wordmark-light .brand-mark path{stroke:var(--paper)}
.wordmark-light .brand-mark circle{fill:var(--ember)}

.nav-links{display:flex;gap:22px;align-items:center}
.nav-links a{
  font-size:.88rem;font-weight:500;
  color:var(--ink-text);text-decoration:none;
  padding-bottom:2px;border-bottom:1px solid transparent;
}
.nav-links a:hover{border-bottom-color:var(--ember-deep)}
.nav-links a.here{border-bottom-color:var(--ember-deep);color:var(--ink-900);font-weight:600}
.nav-cta{
  background:var(--ink-900);color:var(--paper)!important;
  padding:11px 20px;
  font-weight:600;font-size:.88rem;
  text-decoration:none;white-space:nowrap;flex:0 0 auto;
  transition:background .16s ease;
}
.nav-cta:hover{background:var(--ember-deep)}

.nav-toggle{display:none}
.nav-burger{display:none}
@media(max-width:900px){
  .nav-inner{height:64px;gap:12px}
  /* The toggle drives the menu, so it must stay in the tab order. Clipped
     rather than display:none, which would remove it entirely (WCAG 2.1.1). */
  .nav-toggle{
    display:block;position:absolute;width:1px;height:1px;
    margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0;
  }
  #nav-toggle:focus-visible ~ .nav-burger{
    outline:3px solid var(--ember-deep);outline-offset:2px;
  }
  .nav-burger{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:44px;padding:10px;margin-right:-10px;cursor:pointer;z-index:60;
  }
  .nav-burger span{display:block;width:24px;height:2px;background:var(--ink-900);transition:transform .2s ease,opacity .2s ease}
  .nav-links{
    display:none;position:absolute;top:64px;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-bottom:1px solid var(--rule);
    padding:6px 32px 16px;
  }
  #nav-toggle:checked ~ .nav-links{display:flex}
  .nav-links a{font-size:1rem;padding:14px 0;border-bottom:1px solid var(--rule-soft)}
  .nav-links a:last-child{border-bottom:none}
  .nav-cta{padding:9px 15px;font-size:.83rem}
  #nav-toggle:checked ~ .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  #nav-toggle:checked ~ .nav-burger span:nth-child(2){opacity:0}
  #nav-toggle:checked ~ .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
@media(max-width:400px){
  .wrap{padding:0 20px}
  .wordmark{font-size:1.08rem}
  .nav-cta{padding:8px 12px;font-size:.78rem}
}

/* --- 5. DARK FIELD ------------------------------------------------------- */
.on-dark{background:var(--ink-900);color:var(--paper-text)}
.on-dark h1,.on-dark h2,.on-dark h3{color:var(--paper)}
.on-dark .lede{color:var(--paper-mute)}
.field-mid{background:var(--ink-800)}

/* --- 6. HERO ------------------------------------------------------------- */
/* Asymmetric: statement left, proof column right against a hairline. */
.hero{background:var(--ink-900);color:var(--paper-text);padding:88px 0 76px}
.hero-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:64px;align-items:start}
.hero h1{
  font-size:clamp(2.15rem,4.4vw,3.15rem);
  font-weight:600;color:var(--paper);
  letter-spacing:-.012em;
}
.hero h1 em{font-style:italic;color:var(--ember)}
.hero .lede{margin-top:24px;font-size:1.13rem;color:var(--paper-mute);max-width:36em}
.hero-actions{margin-top:36px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}





@media(max-width:900px){
  .hero{padding:56px 0 52px}
  .hero-grid{grid-template-columns:1fr;gap:40px}
}

/* --- 7. PRACTICE COLUMN ------------------------------------------------- */
/* Sits opposite the hero statement. Replaces the metric column, because
   portfolio figures earned in a prior role do not belong above the fold. */
.practice-col{border-left:1px solid var(--rule-dark);padding-left:30px}
.practice-item{padding:15px 0;border-bottom:1px solid var(--rule-dark)}
.practice-item:first-child{padding-top:0}
.practice-item:last-child{border-bottom:none;padding-bottom:0}
.practice-item h2{font-size:1.05rem;line-height:1.3;color:var(--paper-text);margin-bottom:5px}
.practice-item p{font-size:.89rem;line-height:1.45;color:var(--paper-mute)}
@media(max-width:900px){
  .practice-col{border-left:none;border-top:1px solid var(--rule-dark);padding-left:0;padding-top:22px}
}

/* --- 7b. CREDENTIAL STRIP ------------------------------------------------ */
/* A single quiet line of third-party validation directly under the hero. */
.creds-strip{
  background:var(--ink-800);
  border-top:1px solid var(--ink-700);
  padding:20px 0;
}
.creds-strip ul{
  list-style:none;display:flex;flex-wrap:wrap;
  justify-content:center;gap:10px 34px;
}
.creds-strip li{
  font-size:.83rem;font-weight:500;letter-spacing:.07em;
  text-transform:uppercase;color:var(--paper-mute);
}
.creds-strip li::before{content:"";display:inline-block;width:4px;height:4px;background:var(--ember-tint);margin-right:11px;vertical-align:2px}

/* --- 8. TWO-COLUMN PROSE BLOCK ------------------------------------------ */
/* Heading holds the left column, argument the right. Replaces stacked cards. */
.split{display:grid;grid-template-columns:1fr 1.35fr;gap:64px;align-items:start}
.split h2{font-size:clamp(1.65rem,2.9vw,2.1rem)}
.split-body p{margin-bottom:17px}
.split-body p:last-child{margin-bottom:0}
@media(max-width:880px){.split{grid-template-columns:1fr;gap:30px}}

/* --- 9. LEDGER TABLE ----------------------------------------------------- */
/* Label / detail rows on hairlines. Used for pressures and track record. */
.ledger{margin-top:44px;border-top:1px solid var(--rule)}
.on-dark .ledger{border-top-color:var(--rule-dark)}
.ledger-row{
  display:grid;grid-template-columns:210px 1fr;gap:36px;
  padding:22px 0;border-bottom:1px solid var(--rule);
}
.on-dark .ledger-row{border-bottom-color:var(--rule-dark)}
.ledger-row dt,.ledger-key{
  font-family:var(--font-display);font-weight:600;
  font-size:1.02rem;color:var(--ink-text);line-height:1.3;
}
.on-dark .ledger-key{color:var(--paper)}
.ledger-key .fig{display:block;color:var(--ember-deep);font-size:1.3rem;line-height:1.2}
.on-dark .ledger-key .fig{color:var(--ember)}
.ledger-val{font-size:.96rem;color:var(--ink-mute);line-height:1.55}
.on-dark .ledger-val{color:var(--paper-mute)}
@media(max-width:760px){
  .ledger-row{grid-template-columns:1fr;gap:7px;padding:19px 0}
}

/* --- 10. NUMBERED INDEX -------------------------------------------------- */
/* The service list, set as a table of contents rather than a card grid. */
.index-list{margin-top:44px;border-top:1px solid var(--rule)}
.on-dark .index-list{border-top-color:var(--rule-dark)}
.index-row{
  display:grid;grid-template-columns:52px 300px 1fr;gap:28px;
  padding:24px 0;border-bottom:1px solid var(--rule);align-items:baseline;
}
.on-dark .index-row{border-bottom-color:var(--rule-dark)}
.index-num{
  font-family:var(--font-display);font-size:.95rem;font-weight:600;
  color:var(--ember-deep);letter-spacing:.04em;
}
.on-dark .index-num{color:var(--ember-tint)}
.index-row h3{font-size:1.1rem;line-height:1.3}
.index-row p{font-size:.95rem;color:var(--ink-mute);line-height:1.55}
.on-dark .index-row p{color:var(--paper-mute)}
@media(max-width:860px){
  .index-row{grid-template-columns:44px 1fr;gap:6px 18px;padding:20px 0}
  .index-row h3{grid-column:2}
  .index-row p{grid-column:2;margin-top:4px}
}

/* --- 10b. THREE PILLARS -------------------------------------------------- */
/* Co-equal columns separated by hairlines. Deliberately not cards: no fill,
   no radius, no shadow, so the three read as one structure. */
.pillars{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  margin-top:46px;border-top:1px solid var(--rule);
}
.on-dark .pillars{border-top-color:var(--rule-dark)}
.pillar{padding:30px 34px 4px;border-left:1px solid var(--rule)}
.on-dark .pillar{border-left-color:var(--rule-dark)}
.pillar:first-child{padding-left:0;border-left:none}
.pillar:last-child{padding-right:0}
.pillar .p-num{
  display:block;font-size:.78rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ember-deep);
}
.on-dark .pillar .p-num{color:var(--ember-tint)}
.pillar h3{font-size:1.18rem;margin:9px 0 9px}
.pillar > p{font-size:.94rem;line-height:1.55;color:var(--ink-mute);margin-bottom:18px}
.on-dark .pillar > p{color:var(--paper-mute)}
.pillar ul{list-style:none;border-top:1px solid var(--rule-soft)}
.on-dark .pillar ul{border-top-color:rgba(239,234,224,.18)}
.pillar li{
  font-size:.93rem;line-height:1.45;color:var(--ink-text);
  padding:10px 0;border-bottom:1px solid var(--rule-soft);
}
.on-dark .pillar li{color:var(--paper-text);border-bottom-color:rgba(239,234,224,.18)}
.pillar li:last-child{border-bottom:none}
@media(max-width:900px){
  .pillars{grid-template-columns:1fr}
  .pillar{padding:26px 0 4px;border-left:none;border-top:1px solid var(--rule)}
  .on-dark .pillar{border-top-color:var(--rule-dark)}
  .pillar:first-child{border-top:none;padding-top:26px}
}

/* --- 11. SECTION HEADING AND FOOT LINK ---------------------------------- */
.sec-h2{font-size:clamp(1.65rem,2.9vw,2.1rem);max-width:19em}
.sec-foot{margin-top:34px}

/* --- 12. PROGRAM COLUMNS (services page) -------------------------------- */
.prog{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:44px}
.prog-col > h3{
  font-size:1.24rem;padding-bottom:12px;
  border-bottom:2px solid var(--ember-deep);margin-bottom:4px;
}
.prog-col .prog-sub{
  display:block;font-size:.82rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-mute);margin:12px 0 6px;
}
.prog-col ul{list-style:none}
.prog-col li{
  font-size:.95rem;color:var(--ink-text);line-height:1.5;
  padding:13px 0;border-bottom:1px solid var(--rule-soft);
}
.prog-col li:last-child{border-bottom:none}
.on-dark .prog-col > h3{color:var(--paper);border-bottom-color:var(--ember)}
.on-dark .prog-col .prog-sub{color:var(--paper-mute)}
.on-dark .prog-col li{color:var(--paper-text);border-bottom-color:rgba(239,234,224,.18)}
@media(max-width:860px){.prog{grid-template-columns:1fr;gap:40px}}

/* --- 12b. ATTRIBUTION NOTE ----------------------------------------------- */
/* Every portfolio figure on this site was delivered in a prior in-house role.
   This component carries that statement next to the numbers. */
.attrib{
  margin-top:24px;padding:16px 20px;
  border-left:2px solid var(--ember-deep);
  background:var(--paper-lift);
  font-size:.92rem;line-height:1.55;color:var(--ink-mute);
}
.on-dark .attrib{
  border-left-color:var(--ember-tint);
  background:rgba(239,234,224,.05);
  color:var(--paper-mute);
}
.attrib strong{color:var(--ink-text);font-weight:600}
.on-dark .attrib strong{color:var(--paper-text)}

/* --- 12c. CAPABILITY GROUPS (Expertise page) ---------------------------- */
.capgroup{margin-top:40px}
.capgroup + .capgroup{margin-top:52px;padding-top:44px;border-top:1px solid var(--rule)}
.on-dark .capgroup + .capgroup{border-top-color:var(--rule-dark)}
.capgroup-head .icon{width:2rem;height:2rem}
.capgroup-head{display:flex;align-items:center;gap:15px;margin-bottom:8px}
.capgroup h2{font-size:1.42rem;margin:0}
.capgroup > p{font-size:1rem;line-height:1.55;color:var(--ink-mute);max-width:44em}
.on-dark .capgroup > p{color:var(--paper-mute)}
.capcols{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-top:26px}
.capcols.one{grid-template-columns:1fr;max-width:52em}
.capcol h3{
  font-size:.86rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  font-family:var(--font-body);color:var(--ink-mute);
  padding-bottom:10px;border-bottom:2px solid var(--ember-deep);margin-bottom:4px;
}
.on-dark .capcol h3{color:var(--paper-mute);border-bottom-color:var(--ember-tint)}
.capcol ul{list-style:none}
.capcol li{
  font-size:.95rem;line-height:1.5;color:var(--ink-text);
  padding:12px 0;border-bottom:1px solid var(--rule-soft);
}
.on-dark .capcol li{color:var(--paper-text);border-bottom-color:rgba(239,234,224,.18)}
.capcol li:last-child{border-bottom:none}
@media(max-width:760px){.capcols{grid-template-columns:1fr;gap:32px}}

/* --- 13. ASSET CLASS LINE ------------------------------------------------ */
.asset-line{
  margin-top:38px;padding-top:22px;border-top:1px solid var(--rule);
  font-size:.95rem;color:var(--ink-mute);
}
.asset-line strong{color:var(--ink-text);font-weight:600}
.on-dark .asset-line{border-top-color:var(--rule-dark);color:var(--paper-mute)}
.on-dark .asset-line strong{color:var(--paper)}

/* --- 14. ABOUT ----------------------------------------------------------- */
.bio-grid{display:grid;grid-template-columns:300px 1fr;gap:60px;align-items:start}
.portrait{border:1px solid var(--rule);padding:9px;background:var(--paper-lift)}
.portrait img{aspect-ratio:4/5;object-fit:cover;width:100%}
.portrait figcaption{
  margin-top:11px;font-size:.79rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-mute);
}
.bio-body p{margin-bottom:17px}
.bio-body p:last-child{margin-bottom:0}
.pull{
  font-family:var(--font-display);font-size:1.32rem;line-height:1.42;
  color:var(--ink-900);border-left:2px solid var(--ember-deep);
  padding-left:26px;margin:30px 0;
}
.arc{margin:38px 0 0;border-top:1px solid var(--rule)}
.arc-item{padding:24px 0;border-bottom:1px solid var(--rule)}
.arc-item .yr{
  display:block;font-size:.82rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ember-deep);
}
.arc-item .role{
  display:block;font-family:var(--font-display);font-weight:600;
  font-size:1.08rem;margin:5px 0 7px;
}
.arc-item .desc{font-size:.95rem;color:var(--ink-mute);line-height:1.55}
.creds{margin-top:34px;display:flex;flex-wrap:wrap;gap:9px}
.cred{
  font-size:.81rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  padding:8px 13px;border:1px solid var(--rule);color:var(--ink-mute);
  background:var(--paper-lift);
}
@media(max-width:860px){.bio-grid{grid-template-columns:1fr;gap:34px}.portrait{max-width:280px}}

/* --- 14b. AUDIENCE DOORS ------------------------------------------------- */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:44px;border-top:1px solid var(--rule)}
.on-dark .doors{border-top-color:var(--rule-dark)}
.door{padding:32px 38px 34px;border-left:1px solid var(--rule)}
.on-dark .door{border-left-color:var(--rule-dark)}
.door:first-child{padding-left:0;border-left:none}
.door:last-child{padding-right:0}
.door h3{font-size:1.3rem;margin-bottom:10px}
.door p{font-size:.97rem;line-height:1.55;color:var(--ink-mute);margin-bottom:20px}
.on-dark .door p{color:var(--paper-mute)}
@media(max-width:760px){
  .doors{grid-template-columns:1fr}
  .door{padding:26px 0;border-left:none;border-top:1px solid var(--rule)}
  .on-dark .door{border-top-color:var(--rule-dark)}
  .door:first-child{border-top:none}
}

/* --- 14c. NETWORK BLOCK -------------------------------------------------- */
/* Deliberately quieter than the paid-advisory CTA above it. */
.network{border-top:1px solid var(--rule);padding-top:40px;margin-top:14px}
.on-dark .network{border-top-color:var(--rule-dark)}
.network h3{font-size:1.22rem;margin-bottom:12px}
.network p{font-size:.97rem;line-height:1.6;color:var(--ink-mute);max-width:46em;margin-bottom:14px}
.on-dark .network p{color:var(--paper-mute)}

/* --- 15. PAGE HEADER (interior pages) ----------------------------------- */
.page-head{background:var(--ink-900);color:var(--paper-text);padding:66px 0 58px}
.page-head h1{font-size:clamp(1.95rem,3.8vw,2.7rem);font-weight:600;max-width:17em}
.page-head .lede{margin-top:20px;color:var(--paper-mute);max-width:44em}

/* --- 16. CTA ------------------------------------------------------------- */
.cta{background:var(--ink-900);color:var(--paper-text);padding:72px 0}
.cta-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:56px;align-items:end}
.cta h2{font-size:clamp(1.7rem,3vw,2.25rem);color:var(--paper)}
.cta p{margin-top:16px;color:var(--paper-mute);max-width:34em}
.cta-actions{display:flex;flex-direction:column;gap:13px;align-items:flex-start}
.cta-alt{font-size:.88rem;color:var(--paper-mute);margin-top:4px}
.cta-alt a{color:var(--ember-tint);text-decoration:none;border-bottom:1px solid rgba(228,100,59,.55)}
@media(max-width:860px){.cta-grid{grid-template-columns:1fr;gap:32px;align-items:start}}

/* --- 17. FOOTER ---------------------------------------------------------- */
footer{
  background:var(--ink-900);color:var(--paper-mute);
  padding:34px 0;font-size:.85rem;
  border-top:1px solid var(--ink-700);
}
.foot-inner{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;align-items:center}
footer a{color:var(--paper-text);text-decoration:none;border-bottom:1px solid transparent}
footer a:hover{border-bottom-color:var(--ember)}
.foot-legal{font-size:.83rem;color:rgba(239,234,224,.62)}

/* --- 18. UTILITIES ------------------------------------------------------- */
.tight{padding-top:0}
.rule-top{border-top:1px solid var(--rule)}
.center{text-align:center}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:12px;background:var(--paper);color:var(--ink-900);padding:9px 15px;z-index:99}

/* --- 19. ACCESSIBILITY --------------------------------------------------- */
/* Focus. The browser default ring is unreliable against a near-black ground,
   so both fields get an explicit indicator that clears 3:1 (WCAG 2.4.11). */
:focus-visible{
  outline:3px solid var(--ember-deep);
  outline-offset:3px;
  border-radius:1px;
}
.on-dark :focus-visible,
.hero :focus-visible,
.page-head :focus-visible,
.cta :focus-visible,
.creds-strip :focus-visible,
footer :focus-visible{outline-color:var(--ember)}

/* Links inside running prose carry an underline, so colour is never the only
   signal (WCAG 1.4.1). Navigation and button links are exempt by context. */
.split-body a:not(.tlink),
.bio-body a:not(.tlink),
.ledger-val a,
footer a{text-decoration:underline;text-underline-offset:3px}

/* Honour the OS reduced-motion setting (WCAG 2.3.3). */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .pillar,.btn,.tlink,.nav-links a{transition:none!important}
}

/* Windows High Contrast Mode: keep hairline structure visible. */
@media(forced-colors:active){
  .ledger-row,.index-row,.pillar,.proof-item,.arc-item{border-color:CanvasText}
  .btn{border:1px solid ButtonText}
}

/* --- 20. ICON SYSTEM ----------------------------------------------------- */
/* Two-colour line icons. Colour is driven by custom properties rather than
   baked hexes, so a single inline SVG serves both the paper and ink grounds.
   Always aria-hidden: every icon repeats the heading beside it. */
.icon{
  --icon-ink:var(--ink-text);
  --icon-hot:var(--ember-deep);
  width:2.2rem;height:2.2rem;
  display:block;flex:0 0 auto;
}
.on-dark .icon{
  --icon-ink:var(--paper-text);
  --icon-hot:var(--ember);
}

/* Ledger rows opt into a leading icon column. Rows without icons keep the
   original two-column grid, so .ledger is unchanged elsewhere. */
.ledger--icons .ledger-row{grid-template-columns:2.6rem 210px 1fr;gap:20px 28px}
@media(max-width:760px){
  .ledger--icons .ledger-row{grid-template-columns:2.2rem 1fr;gap:6px 16px}
  .ledger--icons .ledger-key{grid-column:2}
  .ledger--icons .ledger-val{grid-column:2}
  .ledger--icons .icon{grid-row:1;width:2rem;height:2rem}
}

/* Practice areas and pillars carry the icon above the label. */
.practice-item .icon{margin-bottom:10px}
.pillar .icon{margin-bottom:12px}

/* --- 21. NOI GAP CHART --------------------------------------------------- */
/* Concept diagram, not evidence, so it is deliberately small. It sits in the
   left column of the problem .split, directly under the headline, which caps it
   at roughly 420px on desktop. Below the split's 880px breakpoint the column
   collapses and the figure goes full width inline.
   Colour note: this is the paper ground, where --ember measures 3.02:1 and
   --ember-tint 2.57:1. Both fail. Line and marks use --ember-deep at 5.03:1. */
.noi{
  margin:26px 0 0;
  background:var(--paper-lift);
  border:1px solid var(--rule);
  border-left:3px solid var(--ember-deep);
  padding:18px 20px 16px;
}
.noi-plot{position:relative}

/* Static above the plot at every width. The container is never wider than the
   left column, so an overlaid legend would sit on top of the lines. */
.noi-legend{
  display:flex;flex-wrap:wrap;gap:4px 18px;
  margin-bottom:12px;
}
.noi-key{
  display:inline-flex;align-items:center;
  font-size:.83rem;font-weight:600;color:var(--ink-text);
  white-space:nowrap;
}
.noi-key::before{content:"";display:inline-block;width:22px;height:0;margin-right:8px}
.noi-key--pro::before{border-top:2px dashed var(--ink-mute)}
.noi-key--act::before{border-top:3px solid var(--ember-deep)}

.noi-svg{width:100%;height:auto;display:block;overflow:visible}
.noi-base{stroke:var(--rule);stroke-width:2}
.noi-gap{fill:var(--ember-deep);opacity:.10;stroke:none}
/* Strokes are set heavy in user units because the SVG renders at roughly 0.4x
   in the narrow column; these land at 2-3 CSS px. */
.noi-pro{fill:none;stroke:var(--ink-mute);stroke-width:6;stroke-dasharray:16 13}
.noi-act{fill:none;stroke:var(--ember-deep);stroke-width:9;stroke-linecap:round}
.noi-gap-label{
  font-family:var(--font-body);font-size:44px;font-weight:600;
  fill:var(--ink-text);letter-spacing:.01em;
}
.noi-cross path{fill:none;stroke:var(--ink-900);stroke-width:5;stroke-linecap:square}
.noi-cross circle{fill:var(--ember-deep)}
.noi-dot--pro{fill:var(--ink-mute)}
.noi-dot--act{fill:var(--ember-deep)}

/* Draw-in. Armed by script only when reduced motion is not requested, so the
   lines are never left hidden if JS or the observer is unavailable. */
.noi-armed .noi-act{stroke-dasharray:1400;stroke-dashoffset:1400}
.noi-armed .noi-gap,.noi-armed .noi-cross,.noi-armed .noi-dot,
.noi-armed .noi-gap-label{opacity:0}
.noi-draw .noi-act{
  stroke-dashoffset:0;
  transition:stroke-dashoffset 1.5s cubic-bezier(.4,0,.2,1);
}
.noi-draw .noi-gap{opacity:.10;transition:opacity .7s ease .5s}
.noi-draw .noi-gap-label,.noi-draw .noi-cross,.noi-draw .noi-dot{
  opacity:1;transition:opacity .5s ease 1.2s;
}
@media(prefers-reduced-motion:reduce){
  .noi-armed .noi-act{stroke-dashoffset:0}
  .noi-armed .noi-gap{opacity:.10}
  .noi-armed .noi-cross,.noi-armed .noi-dot,.noi-armed .noi-gap-label{opacity:1}
}

/* Below the split breakpoint the figure runs full width, so it renders larger
   and the strokes can come back down. */
@media(max-width:880px){
  .noi{margin:22px 0 0;padding:20px 22px 18px}
  .noi-pro{stroke-width:4}
  .noi-act{stroke-width:6}
  .noi-gap-label{font-size:40px}
  .noi-cross path{stroke-width:3.5}
}

/* --- 22. DOWNLOAD LINK --------------------------------------------------- */
/* Deliberately subordinate to the two buttons above it. The flyer's job is to
   be forwarded to a committee, not to compete with booking a call. */
.dl{
  display:inline-flex;align-items:center;gap:9px;
  margin-top:6px;padding:4px 0;
  font-size:.9rem;font-weight:600;
  color:var(--ink-text);text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .16s ease,border-color .16s ease;
}
.dl:hover{color:var(--ember-deep);border-bottom-color:var(--ember-deep)}
.dl-ico{width:1.05rem;height:1.05rem;flex:0 0 auto;fill:none;
  stroke:var(--ember-deep);stroke-width:2;stroke-linecap:square}
.dl-meta{font-weight:400;color:var(--ink-mute);white-space:nowrap}
.on-dark .dl{color:var(--paper-text)}
.on-dark .dl:hover{color:var(--ember-tint);border-bottom-color:var(--ember-tint)}
.on-dark .dl-ico{stroke:var(--ember-tint)}
.on-dark .dl-meta{color:var(--paper-mute)}
@media(max-width:420px){
  .dl{flex-wrap:wrap;gap:4px 9px}
  .dl-meta{flex-basis:100%;margin-left:1.7rem}
}