/* =========================================================
   Grow Insights Digital — "Ledger" design system
   Concept: a performance studio should look like the thing it
   sells — an account you can audit. Hairline rules, mono figures,
   ledger red for cost, ledger green for return.
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  /* Ground */
  --paper:      #E9ECE5;
  --paper-hi:   #F3F5EF;
  --paper-lo:   #DFE3D9;

  /* Ink */
  --ink:        #0F1317;
  --ink-2:      #1A2026;
  --graphite:   #5A6169;
  --graphite-2: #7C838A;

  /* Rules */
  --rule:       #CDD3C6;
  --rule-soft:  #DDE1D6;
  --rule-faint: #E3E6DE;
  --rule-ink:   rgba(233,236,229,.16);

  /* Signals */
  --red:        #A81729;   /* cost / spend / the "before" line */
  --red-soft:   #E7C9CD;
  --profit:     #0E5C42;   /* return / the "after" line */
  --profit-soft:#C4DBD1;
  --amber:      #9C6407;

  /* Type */
  --display: "Archivo", "Archivo Expanded", Helvetica, Arial, sans-serif;
  --body:    "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Space */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --maxw: 1240px;
  --maxw-narrow: 760px;
  --band: clamp(4.5rem, 9vw, 8.5rem);

  --radius: 3px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:1.0625rem;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
h1,h2,h3,h4{ margin:0; font-family:var(--display); font-weight:640; letter-spacing:-.028em; line-height:1.02; font-stretch:108%; }
p{ margin:0 0 1em; }
ul,ol{ margin:0; padding:0; list-style:none; }
hr{ border:0; border-top:1px solid var(--rule); margin:0; }
::selection{ background:var(--ink); color:var(--paper); }

/* ---------- 3. Utilities ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.wrap--narrow{ max-width:var(--maxw-narrow); }
.band{ padding-block:var(--band); position:relative; }
.band--rule{ border-top:1px solid var(--rule); }
.band--ink{ background:var(--ink); color:var(--paper); }
.band--ink h1,.band--ink h2,.band--ink h3{ color:var(--paper); }
.band--hi{ background:var(--paper-hi); }
.screen-reader-text{
  position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap;
}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--ink); color:var(--paper); padding:.75rem 1.25rem;
}
.skip-link:focus{ left:1rem; top:1rem; }

:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:2px solid var(--red); outline-offset:3px; border-radius:2px;
}

/* Ledger paper texture — faint horizontal rules, on-concept, cheap */
.ledger-paper{
  background-image:repeating-linear-gradient(
    to bottom,
    transparent 0 31px,
    var(--rule-faint) 31px 32px
  );
}
.band--ink.ledger-paper{
  background-image:repeating-linear-gradient(
    to bottom, transparent 0 31px, rgba(233,236,229,.05) 31px 32px);
}

/* ---------- 4. Type components ---------- */
.eyebrow{
  font-family:var(--mono);
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--graphite);
  display:flex; align-items:flex-start; gap:.6rem;
  margin:0 0 1.5rem;
}
.eyebrow::before{
  content:""; width:1.75rem; height:1px; background:var(--red);
  flex:none; margin-top:.62em; /* optical centre of the FIRST line, not the block */
}
.band--ink .eyebrow{ color:var(--graphite-2); }

.display{ font-size:clamp(2.6rem, 6vw, 5.25rem); line-height:.98; }
h2.section-title{ font-size:clamp(1.9rem, 3.5vw, 3.1rem); max-width:18ch; }
h3{ font-size:1.25rem; letter-spacing:-.02em; }
.lede{
  font-size:clamp(1.0625rem,1.5vw,1.25rem);
  color:var(--graphite);
  max-width:56ch;
  line-height:1.6;
}
.band--ink .lede{ color:#A9B0B7; }
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
.fig{
  font-family:var(--mono); font-weight:600; font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}
.u-red{ color:var(--red); }
.u-profit{ color:var(--profit); }

/* ---------- 5. Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--mono); font-size:.75rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  padding:.95rem 1.4rem; border-radius:var(--radius);
  border:1px solid var(--ink); background:var(--ink); color:var(--paper);
  cursor:pointer; transition:background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
  min-height:44px;
}
.btn:hover{ background:var(--red); border-color:var(--red); }
.btn--ghost{ background:transparent; color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:var(--paper); }
.band--ink .btn{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.band--ink .btn:hover{ background:var(--red); border-color:var(--red); color:var(--paper); }
.band--ink .btn--ghost{ background:transparent; color:var(--paper); border-color:var(--rule-ink); }
.band--ink .btn--ghost:hover{ background:var(--paper); color:var(--ink); }
.btn__arrow{ transition:transform .18s var(--ease); }
.btn:hover .btn__arrow{ transform:translateX(3px); }

.link-arrow{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.5rem;
  border-bottom:1px solid var(--rule); padding-bottom:.25rem;
  transition:border-color .18s var(--ease), color .18s var(--ease);
}
.link-arrow:hover{ border-color:var(--red); color:var(--red); }

/* ---------- 6. Header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid var(--rule);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; min-height:72px;
}
.brand{ display:flex; align-items:center; gap:.6rem; flex:none; }
.brand__mark{ width:26px; height:26px; flex:none; }
.brand__name{
  font-family:var(--display); font-weight:700; font-stretch:112%;
  font-size:1.02rem; letter-spacing:-.03em; line-height:1; white-space:nowrap;
}
.brand__name span{ color:var(--red); }
.brand img{ max-height:38px; width:auto; }

.nav{ display:flex; align-items:center; gap:2rem; margin-left:auto; }
.nav ul{ display:flex; align-items:center; gap:1.75rem; }
.nav a{
  font-size:.9rem; color:var(--graphite); position:relative; padding-block:.25rem;
  transition:color .18s var(--ease);
}
.nav a:hover, .nav .current-menu-item > a{ color:var(--ink); }
.nav a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0;
  background:var(--red); transition:width .22s var(--ease);
}
.nav a:hover::after, .nav .current-menu-item > a::after{ width:100%; }
.header-cta{ flex:none; }
.nav > .btn{ display:none; } /* drawer-only; .header-cta covers desktop */

.nav-toggle{
  display:none; width:44px; height:44px; border:1px solid var(--rule);
  border-radius:var(--radius); background:transparent; align-items:center;
  justify-content:center; cursor:pointer;
}
.nav-toggle__bars{ display:block; width:18px; height:9px; position:relative; }
.nav-toggle__bars::before,.nav-toggle__bars::after{
  content:""; position:absolute; left:0; width:100%; height:1.5px; background:var(--ink);
  transition:transform .22s var(--ease), top .22s var(--ease);
}
.nav-toggle__bars::before{ top:0; }
.nav-toggle__bars::after{ top:8px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{ top:4px; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{ top:4px; transform:rotate(-45deg); }

/* ---------- 7. Hero ---------- */
.hero{ padding-block:clamp(3rem,7vw,6rem) clamp(3rem,6vw,5rem); overflow:hidden; }
.hero__grid{ display:grid; gap:clamp(2.5rem,5vw,4rem); }
.hero__claim{ max-width:22ch; }
.hero__sub{ margin-top:1.75rem; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2.25rem; }
.hero__meta{
  margin-top:2.5rem; display:flex; flex-wrap:wrap; gap:.5rem 1.25rem;
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--graphite);
}
.hero__meta li{ display:flex; align-items:center; gap:.5rem; }
.hero__meta li::before{ content:""; width:5px; height:5px; background:var(--profit); border-radius:50%; }

/* Signature: the annotated chart */
.chart{
  border:1px solid var(--rule); border-radius:var(--radius);
  background:var(--paper-hi); padding:1.25rem 1.25rem 1rem;
  box-shadow:0 1px 0 var(--paper-lo), 0 24px 48px -32px rgba(15,19,23,.35);
}
.chart__head{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:1rem; padding-bottom:1rem; border-bottom:1px solid var(--rule-soft); margin-bottom:1rem;
}
.chart__title{
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--graphite);
}
.chart__legend{ display:flex; gap:1rem; font-family:var(--mono); font-size:.6875rem; color:var(--graphite); }
.chart__legend span{ display:flex; align-items:center; gap:.4rem; }
.chart__swatch{ width:14px; height:2px; }
.chart__swatch--red{ background:var(--red); }
.chart__swatch--profit{ background:var(--profit); }
.chart svg{ width:100%; height:auto; }
.chart__note{
  margin-top:.85rem; font-family:var(--mono); font-size:.625rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--graphite-2);
}
.spark{ stroke-dasharray:1400; stroke-dashoffset:1400; }
.is-drawn .spark{ animation:draw 1.7s var(--ease) forwards; }
.is-drawn .spark--b{ animation-delay:.28s; }
.chart__pin{ opacity:0; }
.is-drawn .chart__pin{ animation:pin .5s var(--ease) forwards; }
.is-drawn .chart__pin--1{ animation-delay:1.05s; }
.is-drawn .chart__pin--2{ animation-delay:1.35s; }
.is-drawn .chart__pin--3{ animation-delay:1.65s; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes pin{ from{ opacity:0; transform:translateY(5px);} to{ opacity:1; transform:translateY(0);} }

/* ---------- 8. The ledger row (core repeated device) ---------- */
.ledger{ border-top:1px solid var(--rule); }
.ledger__row{
  display:grid;
  grid-template-columns:3.5rem 1fr auto;
  gap:1rem 1.5rem;
  align-items:baseline;
  padding-block:1.6rem;
  border-bottom:1px solid var(--rule);
  transition:background .2s var(--ease), padding-inline .2s var(--ease);
}
.ledger__row:hover{ background:var(--paper-hi); padding-inline:.85rem; }
.band--ink .ledger, .band--ink .ledger__row{ border-color:var(--rule-ink); }
.band--ink .ledger__row:hover{ background:var(--ink-2); }
.ledger__idx{
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.08em;
  color:var(--graphite-2); font-variant-numeric:tabular-nums;
}
.ledger__body h3{ margin-bottom:.4rem; }
.ledger__body p{ color:var(--graphite); max-width:62ch; margin:0; font-size:.9375rem; }
.band--ink .ledger__body p{ color:#9AA1A8; }
.ledger__val{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--graphite); text-align:right; white-space:nowrap;
}
.ledger__tags{ margin-top:.75rem; display:flex; flex-wrap:wrap; gap:.4rem; }
.tag{
  font-family:var(--mono); font-size:.625rem; letter-spacing:.08em; text-transform:uppercase;
  border:1px solid var(--rule); border-radius:2px; padding:.2rem .5rem; color:var(--graphite);
}
.band--ink .tag{ border-color:var(--rule-ink); color:var(--graphite-2); }

/* ---------- 9. Stat ledger (proof band) ---------- */
.statrow{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  border-top:1px solid var(--rule-ink);
}
.stat{ padding:2rem 1.5rem 2rem 0; border-bottom:1px solid var(--rule-ink); }
.stat__fig{
  font-family:var(--mono); font-weight:600; font-size:clamp(1.75rem,3vw,2.5rem);
  letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums;
}
.stat__label{
  margin-top:.65rem; font-size:.875rem; color:#9AA1A8; max-width:24ch;
}

/* ---------- 10. Section head ---------- */
.sec-head{
  display:grid; gap:1.5rem 3rem; margin-bottom:clamp(2.5rem,4vw,3.5rem);
  align-items:end;
}
@media(min-width:900px){
  .sec-head{ grid-template-columns:1fr 24rem; }
  .sec-head__aside{ padding-bottom:.4rem; }
}

/* ---------- 11. Cards grid ---------- */
.grid{ display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:var(--radius); overflow:hidden; }
.grid--3{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.grid--2{ grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.cell{ background:var(--paper); padding:clamp(1.5rem,2.5vw,2.25rem); transition:background .2s var(--ease); }
.cell:hover{ background:var(--paper-hi); }
.cell__icon{ width:28px; height:28px; margin-bottom:1.25rem; color:var(--red); }
.cell h3{ margin-bottom:.5rem; }
.cell p{ color:var(--graphite); font-size:.9375rem; margin:0; }

/* ---------- 12. Method / timeline ---------- */
.steps{ display:grid; gap:1px; background:var(--rule); border-block:1px solid var(--rule); }
.step{ background:var(--paper); padding:clamp(1.5rem,2.5vw,2.25rem) 0; }
@media(min-width:860px){
  .steps{ grid-template-columns:repeat(4,1fr); }
  .step{ padding-inline:clamp(1rem,2vw,1.75rem); }
  .step:first-child{ padding-left:0; }
}
.step__no{
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.1em; color:var(--red);
  display:block; margin-bottom:1rem;
}
.step h3{ font-size:1.05rem; margin-bottom:.5rem; }
.step p{ font-size:.875rem; color:var(--graphite); margin:0; }
.step__when{
  margin-top:1rem; font-family:var(--mono); font-size:.625rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--graphite-2);
}

/* ---------- 13. 30-day plan ---------- */
.plan{ border:1px solid var(--rule-ink); border-radius:var(--radius); overflow:hidden; }
.plan__row{
  display:grid; gap:.5rem 2rem; padding:1.5rem clamp(1.25rem,2.5vw,2rem);
  border-bottom:1px solid var(--rule-ink);
}
.plan__row:last-child{ border-bottom:0; }
@media(min-width:760px){ .plan__row{ grid-template-columns:9rem 1fr; align-items:baseline; } }
.plan__when{
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--profit-soft);
}
.plan__what h3{ font-size:1.05rem; margin-bottom:.35rem; }
.plan__what p{ font-size:.9375rem; color:#9AA1A8; margin:0; }

/* ---------- 14. Case cards ---------- */
.cases{ display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:var(--radius); overflow:hidden; }
@media(min-width:820px){ .cases{ grid-template-columns:1fr 1fr; } }
.case{ background:var(--paper); padding:clamp(1.5rem,3vw,2.5rem); display:flex; flex-direction:column; gap:1.25rem; transition:background .2s var(--ease); }
.case:hover{ background:var(--paper-hi); }
.case__top{ display:flex; justify-content:space-between; gap:1rem; align-items:baseline; }
.case__client{ font-family:var(--mono); font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase; color:var(--graphite); }
.case__industry{ font-family:var(--mono); font-size:.625rem; letter-spacing:.08em; text-transform:uppercase; color:var(--graphite-2); }
.case h3{ font-size:1.35rem; }
.case__metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; border-top:1px solid var(--rule-soft); padding-top:1.25rem; margin-top:auto; }
.case__metric .fig{ font-size:1.35rem; display:block; }
.case__metric span:last-child{ font-size:.75rem; color:var(--graphite); display:block; margin-top:.25rem; }
.case__thumb{ border:1px solid var(--rule-soft); border-radius:2px; background:var(--paper-hi); aspect-ratio:16/9; overflow:hidden; }
.case__thumb img{ width:100%; height:100%; object-fit:cover; }

/* ---------- 15. Engagements / pricing ---------- */
.plans{ display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:var(--radius); overflow:hidden; }
@media(min-width:900px){ .plans{ grid-template-columns:repeat(3,1fr); } }
.plan-card{ background:var(--paper); padding:clamp(1.75rem,2.5vw,2.25rem); display:flex; flex-direction:column; }
.plan-card--mark{ background:var(--paper-hi); }
.plan-card__tag{
  font-family:var(--mono); font-size:.625rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--red); margin-bottom:1rem; display:block; min-height:1em;
}
.plan-card h3{ font-size:1.45rem; margin-bottom:.5rem; }
.plan-card__for{ font-size:.875rem; color:var(--graphite); margin-bottom:1.5rem; }
.plan-card__price{ font-family:var(--mono); font-weight:600; font-size:1.5rem; letter-spacing:-.03em; }
.plan-card__price small{ font-size:.75rem; font-weight:400; color:var(--graphite); letter-spacing:0; }
.plan-card__list{ margin:1.5rem 0; display:grid; gap:.65rem; border-top:1px solid var(--rule-soft); padding-top:1.5rem; }
.plan-card__list li{ font-size:.875rem; display:flex; gap:.65rem; align-items:flex-start; color:var(--graphite); }
.plan-card__list li::before{ content:"+"; font-family:var(--mono); color:var(--profit); flex:none; }
.plan-card .btn{ margin-top:auto; justify-content:center; }

/* ---------- 16. Marquee (capabilities strip) ---------- */
.strip{ border-block:1px solid var(--rule); padding-block:1rem; overflow:hidden; }
.strip__track{ display:flex; gap:3rem; width:max-content; animation:slide 42s linear infinite; }
.strip__track span{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--graphite); display:flex; align-items:center; gap:3rem; white-space:nowrap;
}
.strip__track span::after{ content:"/"; color:var(--red); }
@keyframes slide{ to{ transform:translateX(-50%); } }
.strip:hover .strip__track{ animation-play-state:paused; }

/* ---------- 17. FAQ ---------- */
.faq{ border-top:1px solid var(--rule); }
.faq details{ border-bottom:1px solid var(--rule); }
.faq summary{
  list-style:none; cursor:pointer; padding-block:1.5rem; display:flex;
  justify-content:space-between; align-items:flex-start; gap:2rem;
  font-family:var(--display); font-weight:600; font-size:1.1rem; letter-spacing:-.02em;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; font-family:var(--mono); font-weight:400; color:var(--red);
  flex:none; transition:transform .22s var(--ease); font-size:1.25rem; line-height:1;
}
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq__a{ padding-bottom:1.75rem; color:var(--graphite); max-width:70ch; font-size:.9375rem; }
.faq__a p:last-child{ margin-bottom:0; }

/* ---------- 18. Contact / forms ---------- */
.form{ display:grid; gap:1.25rem; }
@media(min-width:700px){ .form__2{ grid-template-columns:1fr 1fr; display:grid; gap:1.25rem; } }
.field label{
  display:block; font-family:var(--mono); font-size:.6875rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--graphite); margin-bottom:.5rem;
}
.field .req{ color:var(--red); }
.field input,.field select,.field textarea{
  width:100%; font:inherit; font-size:.9375rem; color:var(--ink);
  background:var(--paper-hi); border:1px solid var(--rule); border-radius:var(--radius);
  padding:.85rem 1rem; min-height:48px; transition:border-color .18s var(--ease), background .18s var(--ease);
}
.field textarea{ min-height:140px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--ink); background:var(--paper); outline:none; }
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }
.field__help{ font-size:.75rem; color:var(--graphite-2); margin:.4rem 0 0; }
.field__error{ font-size:.75rem; color:var(--red); margin:.4rem 0 0; font-family:var(--mono); }
.field.has-error input,.field.has-error textarea,.field.has-error select{ border-color:var(--red); }
.hp{ position:absolute; left:-9999px; }
.form__status{ font-family:var(--mono); font-size:.8125rem; padding:.9rem 1rem; border-radius:var(--radius); display:none; }
.form__status.is-on{ display:block; }
.form__status--ok{ background:var(--profit-soft); color:var(--profit); border:1px solid var(--profit); }
.form__status--err{ background:var(--red-soft); color:var(--red); border:1px solid var(--red); }

.contact-grid{ display:grid; gap:clamp(2.5rem,5vw,4rem); }
@media(min-width:960px){ .contact-grid{ grid-template-columns:1fr 26rem; } }
.contact-card{ border:1px solid var(--rule); border-radius:var(--radius); padding:clamp(1.5rem,2.5vw,2rem); background:var(--paper-hi); }
.contact-list{ display:grid; gap:1.5rem; }
.contact-list dt{
  font-family:var(--mono); font-size:.625rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--graphite-2); margin-bottom:.35rem;
}
.contact-list dd{ margin:0; font-size:1rem; }
.contact-list a:hover{ color:var(--red); }

/* ---------- 19. Footer ---------- */
.site-footer{ background:var(--ink); color:var(--paper); padding-block:clamp(3.5rem,6vw,5rem) 2rem; }
.footer-grid{ display:grid; gap:2.5rem; }
@media(min-width:860px){ .footer-grid{ grid-template-columns:1.5fr 1fr 1fr 1fr; } }
.site-footer h4{
  font-family:var(--mono); font-size:.625rem; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--graphite-2); margin:0 0 1.25rem;
}
.site-footer ul{ display:grid; gap:.65rem; }
.site-footer li a{ font-size:.9rem; color:#B9C0C6; transition:color .18s var(--ease); }
.site-footer li a:hover{ color:var(--paper); }
.footer-brand p{ color:#9AA1A8; font-size:.9rem; max-width:34ch; margin-top:1.25rem; }
.footer-bottom{
  margin-top:clamp(2.5rem,5vw,4rem); padding-top:1.5rem; border-top:1px solid var(--rule-ink);
  display:flex; flex-wrap:wrap; gap:.75rem 2rem; justify-content:space-between;
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.08em; color:var(--graphite-2);
  text-transform:uppercase;
}
.site-footer .brand__name{ color:var(--paper); }

/* ---------- 20. Blog / article ---------- */
.post-list{ border-top:1px solid var(--rule); }
.post-item{
  display:grid; gap:.75rem 2rem; padding-block:2rem; border-bottom:1px solid var(--rule);
  transition:padding-inline .2s var(--ease), background .2s var(--ease);
}
.post-item:hover{ background:var(--paper-hi); padding-inline:.85rem; }
@media(min-width:820px){ .post-item{ grid-template-columns:8rem 1fr 10rem; align-items:baseline; } }
.post-item__date{ font-family:var(--mono); font-size:.6875rem; letter-spacing:.08em; color:var(--graphite-2); text-transform:uppercase; }
.post-item h2{ font-size:1.35rem; margin-bottom:.4rem; }
.post-item p{ color:var(--graphite); font-size:.9375rem; margin:0; max-width:62ch; }
.post-item__cat{ font-family:var(--mono); font-size:.625rem; letter-spacing:.1em; text-transform:uppercase; color:var(--graphite-2); text-align:right; }

.prose{ max-width:68ch; }
.prose h2{ font-size:1.75rem; margin:2.5rem 0 .85rem; }
.prose h3{ font-size:1.25rem; margin:2rem 0 .65rem; }
.prose p,.prose li{ color:var(--ink-2); }
.prose ul,.prose ol{ margin:0 0 1.25rem 1.25rem; }
.prose ul li{ list-style:none; position:relative; padding-left:1.1rem; margin-bottom:.5rem; }
.prose ul li::before{ content:"—"; position:absolute; left:0; color:var(--red); font-family:var(--mono); }
.prose ol{ list-style:decimal; }
.prose ol li{ margin-bottom:.5rem; padding-left:.35rem; }
.prose a{ color:var(--red); border-bottom:1px solid var(--red-soft); }
.prose a:hover{ border-color:var(--red); }
.prose blockquote{
  margin:2rem 0; padding:1.25rem 1.5rem; border-left:2px solid var(--red);
  background:var(--paper-hi); font-size:1.0625rem;
}
.prose img,.prose .wp-block-image{ margin:2rem 0; border-radius:var(--radius); }
.prose figcaption{ font-family:var(--mono); font-size:.6875rem; color:var(--graphite-2); margin-top:.5rem; }
.prose table{ width:100%; border-collapse:collapse; margin:2rem 0; font-size:.9rem; }
.prose th,.prose td{ text-align:left; padding:.75rem 1rem; border-bottom:1px solid var(--rule); }
.prose th{ font-family:var(--mono); font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase; color:var(--graphite); }
.prose code{ font-family:var(--mono); font-size:.85em; background:var(--paper-hi); padding:.15em .4em; border-radius:2px; }
.prose pre{ background:var(--ink); color:var(--paper); padding:1.25rem; border-radius:var(--radius); overflow:auto; }
.prose pre code{ background:none; color:inherit; }

.page-hero{ padding-block:clamp(3rem,6vw,5rem) clamp(2rem,4vw,3rem); border-bottom:1px solid var(--rule); }
.page-hero h1{ font-size:clamp(2.25rem,5vw,4rem); max-width:20ch; }
.page-hero .lede{ margin-top:1.5rem; }

.pagination{ display:flex; gap:.5rem; margin-top:3rem; font-family:var(--mono); font-size:.8125rem; }
.pagination .page-numbers{
  min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--rule); border-radius:var(--radius); padding-inline:.75rem;
}
.pagination .current,.pagination a:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

/* ---------- 21. Reveal ---------- */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

/* ---------- 22. Responsive ---------- */
@media(min-width:1000px){
  .hero__grid{ grid-template-columns:1fr 1fr; align-items:center; }
}
@media(max-width:900px){
  .nav-toggle{ display:inline-flex; }
  .nav{
    position:fixed; inset:72px 0 auto; background:var(--paper);
    border-bottom:1px solid var(--rule); flex-direction:column; align-items:stretch;
    gap:0; padding:1rem var(--gutter) 2rem; display:none;
    max-height:calc(100dvh - 72px); overflow-y:auto;
  }
  .nav.is-open{ display:flex; }
  .nav ul{ flex-direction:column; align-items:stretch; gap:0; }
  .nav li{ border-bottom:1px solid var(--rule-soft); }
  .nav a{ display:block; padding-block:1rem; font-size:1.05rem; color:var(--ink); }
  .nav a::after{ display:none; }
  .nav > .btn{ display:inline-flex; margin-top:1.5rem; justify-content:center; }
  .header-cta{ display:none; }
  .ledger__row{ grid-template-columns:2.5rem 1fr; }
  .ledger__val{ grid-column:2; text-align:left; }
  .case__metrics{ grid-template-columns:1fr; gap:.75rem; }
  .case__metric{ display:flex; align-items:baseline; gap:.6rem; }
  .case__metric span:last-child{ margin-top:0; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
  .spark{ stroke-dashoffset:0; }
  .chart__pin{ opacity:1; }
  .reveal{ opacity:1; transform:none; }
  .strip__track{ animation:none; }
}

@media print{
  .site-header,.site-footer,.strip,.btn{ display:none!important; }
  body{ background:#fff; color:#000; }
}