@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:block;src:url('../fonts/cormorant-regular.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300 700;font-display:block;src:url('../fonts/cormorant-italic.woff2') format('woff2');}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400 600;font-display:block;src:url('../fonts/ebgaramond-regular.woff2') format('woff2');}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400 600;font-display:block;src:url('../fonts/ebgaramond-italic.woff2') format('woff2');}

:root{
  --ink:#15140E;
  --ink-2:#1E1C14;
  --ink-3:#2A2719;
  --paper:#F9F5EB;
  --paper-2:#F2ECDC;
  --paper-3:#E9E1CB;
  --card:#FDFBF5;
  --sagecard:#DADDD2;
  --brass-dk:#67512A;
  --brass:#A2854A;
  --brass-text:#8A7038;
  --brass-lt:#C7AC72;
  --muted:#6E6755;
  --muted-lt:#A79E87;
  --rule:#DDD3BB;
  --rule-dk:#332F20;
  --pos:#4C6B45;
  --neg:#8C4A3F;

  --disp:'Cormorant Garamond',Baskerville,'Palatino Linotype',Georgia,serif;
  --body:'EB Garamond',Georgia,'Times New Roman',serif;
  --ui:ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  --maxw:72rem;
  --pad:clamp(1.15rem,4vw,3rem);
}

*{box-sizing:border-box;}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:1.0625rem;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{font-family:var(--disp);font-weight:400;margin:0;text-wrap:balance;letter-spacing:-0.005em;}
p{margin:0;}
a{color:inherit;}
img{max-width:100%;display:block;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}

:is(a,button,summary,input,textarea):focus-visible{
  outline:2px solid var(--brass);
  outline-offset:3px;
}

.eyebrow{
  font-family:var(--ui);
  font-size:0.72rem;
  font-weight:600;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--brass-text);
}
.dark .eyebrow{color:var(--brass-lt);}

.shell{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);}
.narrow{max-width:44rem;}

/* ============ NAV ============ */
.topbar{
  position:sticky;top:0;z-index:60;
  background:rgba(249,245,235,0.92);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--rule);
}
.topbar-in{
  max-width:var(--maxw);margin:0 auto;
  padding:0.85rem var(--pad);
  display:flex;align-items:center;gap:1.25rem;
}
.brand{
  text-decoration:none;
  font-family:var(--disp);
  font-size:0.9rem;letter-spacing:0.3em;text-transform:uppercase;
  white-space:nowrap;margin-right:auto;
}
.nav{display:flex;align-items:center;gap:0.15rem;}
.nav a{
  font-family:var(--ui);
  font-size:0.68rem;letter-spacing:0.13em;text-transform:uppercase;
  text-decoration:none;color:var(--muted);
  padding:0.5rem 0.6rem;border-bottom:1px solid transparent;
  transition:color .18s,border-color .18s;
}
.nav a:hover{color:var(--ink);}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--brass);}
.nav-cta{
  font-family:var(--ui);font-size:0.66rem;letter-spacing:0.13em;text-transform:uppercase;
  text-decoration:none;background:var(--ink);color:var(--paper);
  padding:0.62rem 1rem;white-space:nowrap;
  transition:background .18s;
}
.nav-cta:hover{background:var(--brass);}
.burger{display:none;padding:0.4rem;}
.burger svg{display:block;}

@media (max-width:60rem){
  .nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-bottom:1px solid var(--rule);
    padding:0.5rem var(--pad) 1rem;
  }
  .nav.open{display:flex;}
  .nav a{padding:0.7rem 0;border-bottom:1px solid var(--rule);font-size:0.75rem;}
  .nav a[aria-current="page"]{border-bottom-color:var(--brass);}
  .burger{display:block;}
  .nav-cta{display:none;}
}

/* ============ PAGE ROUTING ============ */
.page{display:none;}
.page.active{display:block;}

/* ============ SECTIONS ============ */
section{padding:clamp(2.4rem,5vw,4.2rem) 0;}
.dark{background:var(--ink);color:var(--paper);}
.dark h1,.dark h2,.dark h3{color:var(--paper);}
.tint{background:var(--paper-2);}

.intro{padding:clamp(2.6rem,5.5vw,4.4rem) 0 clamp(2.4rem,4.8vw,3.8rem);}
.intro-lead{
  font-family:var(--disp);font-style:italic;
  font-size:clamp(1.9rem,4.2vw,3rem);line-height:1.14;
  color:var(--ink);text-align:center;text-wrap:balance;
}
/* the sequence is set as type, not boxed -- the hero already carries a button,
   and four more bordered cards directly under it read as furniture */
/* the outcome, given the scale the claim deserves */
/* the sticky header would otherwise sit over the heading we jump to */
@media (max-width:52rem){
  .intro-lead{text-align:left;}
}

.sec-head{display:flex;flex-direction:column;gap:0.7rem;margin-bottom:2.1rem;max-width:40rem;}
.sec-head h1,.sec-head h2{font-size:clamp(2rem,4.6vw,3rem);line-height:1.08;}
.sec-head p{color:var(--muted);font-size:1.2rem;font-weight:450;line-height:1.5;}
.dark .sec-head p{color:var(--muted-lt);}
.sec-head p.eyebrow{color:var(--brass-text);font-size:0.88rem;font-weight:600;letter-spacing:0.16em;}
.dark .sec-head p.eyebrow{color:var(--brass-lt);}

/* ============ HERO ============ */
.hero{
  position:relative;background:var(--ink);color:var(--paper);
  min-height:min(86vh,44rem);
  display:flex;align-items:center;
  padding:6rem 0 5rem;overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center 56%;
  opacity:1;
}
/* scrim concentrated behind the type rather than flattening the whole image,
   so the house stays bright at the edges while the wordmark keeps its contrast */
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 64% 54% at 50% 42%,
      rgba(21,20,14,.90) 0%, rgba(21,20,14,.74) 38%, rgba(21,20,14,.44) 66%, rgba(21,20,14,.18) 86%),
    linear-gradient(180deg,
      rgba(21,20,14,.52) 0%, rgba(21,20,14,.26) 18%,
      rgba(21,20,14,.28) 70%, rgba(21,20,14,.68) 100%);
}
.hero-in{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.5rem;}
@media (max-width:46rem){
  /* the scrim ellipse is sized to the container, so a narrow hero needs a wider one */
  .hero-bg::after{
    background:
      radial-gradient(ellipse 98% 48% at 50% 44%,
        rgba(21,20,14,.90) 0%, rgba(21,20,14,.74) 44%, rgba(21,20,14,.42) 72%, rgba(21,20,14,.18) 92%),
      linear-gradient(180deg,
        rgba(21,20,14,.48) 0%, rgba(21,20,14,.24) 18%,
        rgba(21,20,14,.26) 68%, rgba(21,20,14,.64) 100%);
  }
  .hero-actions{flex-direction:column;align-items:stretch;width:min(20rem,100%);}
  .hero-actions .btn{text-align:center;}
}

.hero-mark{
  font-family:var(--disp);
  font-size:clamp(1.6rem,5.2vw,3.1rem);
  letter-spacing:0.3em;text-transform:uppercase;line-height:1.1;
  display:flex;align-items:baseline;justify-content:center;
}
/* the trailing letter-space would push each word off centre */
.hero-mark span,.hero-dot{padding-left:0.3em;}
.hero-dot{font-style:normal;}
@media (max-width:34rem){
  /* too narrow for one line -- stack it, dot centred between the words */
  .hero-mark{flex-direction:column;align-items:center;line-height:1.02;}
  .hero-mark span,.hero-dot{padding-left:0.3em;}
  .hero-dot{font-size:0.42em;line-height:1;padding:0.28em 0 0.3em 0.3em;opacity:.85;}
}
.hero-rule{display:flex;align-items:center;gap:1rem;width:min(22rem,80%);}
.hero-rule span{height:1px;background:var(--brass-lt);flex:1;opacity:.7;}
.hero-rule em{
  font-family:var(--ui);font-style:normal;
  font-size:0.6rem;letter-spacing:0.24em;text-transform:uppercase;color:var(--brass-lt);
}
.hero h1{
  font-size:clamp(2.1rem,6.2vw,4rem);
  font-style:italic;line-height:1.05;max-width:16em;
}
.hero .kicker{
  font-family:var(--ui);font-size:0.66rem;font-weight:600;letter-spacing:0.24em;
  text-transform:uppercase;color:#E3DCCB;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:0.75rem;justify-content:center;margin-top:0.75rem;}

.btn{
  display:inline-block;font-family:var(--ui);
  font-size:0.68rem;letter-spacing:0.15em;text-transform:uppercase;
  padding:0.9rem 1.6rem;text-decoration:none;border:1px solid transparent;
  transition:background .2s,color .2s,border-color .2s;
}
.btn-solid{background:var(--brass);color:#14130D;}
.btn-solid:hover{background:var(--brass-lt);}
.btn-ghost{border-color:rgba(199,172,114,.6);color:var(--paper);background:rgba(21,20,14,.45);backdrop-filter:blur(2px);}
.btn-ghost:hover{border-color:var(--brass-lt);background:rgba(21,20,14,.7);}
.btn-dark{background:var(--ink);color:var(--paper);}
.btn-dark:hover{background:var(--brass);color:#14130D;}

/* ============ REVEAL ============ */
.js .rv{opacity:0;transform:translateY(14px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1);}
.js .rv.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none;}
  *{scroll-behavior:auto !important;}
}


/* ---- the opening: problem, solution, then what we do as a strip ---- */
.ps{
  display:grid;grid-template-columns:1fr 1fr;
  margin-top:clamp(2rem,4vw,3rem);padding-top:clamp(1.6rem,3vw,2.4rem);border-top:1px solid var(--rule);
}
.ps>div+div{padding-left:clamp(1.6rem,4vw,3.5rem);border-left:1px solid var(--rule);}
.ps>div:first-child{padding-right:clamp(1.6rem,4vw,3.5rem);}
.ps-h{font-family:var(--disp);font-style:italic;font-weight:400;font-size:1.5rem;line-height:1.2;color:#6F5A2C;margin-bottom:0.55rem;}
.ps p{font-family:var(--body);font-size:1.2rem;line-height:1.5;color:var(--ink);}
.ps p b{font-weight:700;}

.what{margin-top:clamp(2.4rem,4.5vw,3.4rem);}
.what-h{display:block;text-align:center;font-size:0.88rem;margin-bottom:1.5rem;}
.journey{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr;align-items:start;}
.jstep{text-align:center;padding:0 0.4rem;}
/* one character, five moments -- the same figure with a different prop each time */
.pict{
  width:6.4rem;height:6.4rem;margin:0 auto;display:grid;place-items:center;
  color:#6F5A2C;background:var(--sagecard);border-radius:50%;padding:0.9rem;
}
.pict svg{width:100%;height:100%;display:block;}
.n{font-family:var(--disp);font-size:1.15rem;line-height:1;color:var(--brass-text);margin-top:0.8rem;}
.jstep p{font-family:var(--body);font-size:1.06rem;line-height:1.42;color:var(--ink);max-width:15em;margin:0.45rem auto 0;}
.jstep p b{font-weight:700;}
.jstep p a{color:#6F5A2C;text-decoration:none;border-bottom:1px solid #B39A62;}
.jstep p a:hover{color:var(--ink);border-color:var(--ink);}
.jarrow{align-self:start;margin-top:2.6rem;padding:0 0.2rem;color:var(--brass-text);
  font-family:ui-sans-serif,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;font-size:1.2rem;line-height:1;}
.jarrow::before{content:'\2192';}

.close{margin-top:clamp(2.4rem,4.5vw,3.4rem);text-align:center;}
.btn-line{color:#6F5A2C;border-color:var(--brass);background:transparent;}
.btn-line:hover{background:var(--brass);color:#14130D;}
#sample-transaction{scroll-margin-top:5rem;}
#self-build-mortgage,#ten-percent,#energy-bills{scroll-margin-top:5rem;}

@media (max-width:52rem){
  .ps{grid-template-columns:1fr;gap:1.6rem;}
  .ps>div:first-child{padding-right:0;}
  .ps>div+div{padding-left:0;border-left:0;padding-top:1.4rem;border-top:1px solid var(--rule);}
  .journey{grid-template-columns:1fr;}
  .jstep{display:grid;grid-template-columns:4.4rem 1fr;gap:0 1rem;text-align:left;align-items:center;padding:0;}
  .pict{width:4.4rem;height:4.4rem;margin:0;padding:0.6rem;}
  .n{display:none;}
  .jstep p{margin:0;max-width:none;}
  .jarrow{margin:0.5rem 0 0.5rem 1.65rem;}
  .jarrow::before{content:'\2193';}
}

/* ============ TIMES HAVE CHANGED ============ */


.benefits{display:grid;grid-template-columns:repeat(2,1fr);gap:0.85rem;}
.benefit{background:var(--card);border:1px solid var(--rule);
         padding:1.75rem 1.5rem;display:flex;flex-direction:column;gap:0.5rem;}
.benefit:first-child{background:var(--sagecard);border-color:#C2C6B8;color:var(--ink);}
.benefit:first-child h3{color:var(--ink);}
.benefit:first-child p{color:#5E5745;font-weight:500;}
/* a circled i: a footnote mark that links to the FAQ answer behind the claim */
.fn{
  display:inline-flex;align-items:center;justify-content:center;
  width:1.15em;height:1.15em;margin-left:0.35em;vertical-align:0.12em;
  border:1px solid var(--brass-text);border-radius:50%;
  color:var(--brass-text);text-decoration:none;
  font-family:var(--disp);font-style:italic;font-size:0.82em;font-weight:600;line-height:1;
  transition:background .15s,color .15s;
}
.fn:hover,.fn:focus-visible{background:var(--brass-text);color:var(--paper);outline:none;}
.benefit h3{font-size:clamp(1.6rem,3.4vw,2.15rem);line-height:1;font-style:italic;}
.benefit p{font-size:1.06rem;line-height:1.45;color:var(--muted);}


@media (max-width:52rem){
}
@media (max-width:32rem){
}

/* ============ PANEL (switchable ground for content-heavy sections) ============ */
/* Default: Stone. Swap via data-panel on <html>; see the prototype switcher. */
:root{
  --pnl-bg:#F4EFE1; --pnl-card:#FCFAF4; --pnl-rule:#E3DCC8;
  --pnl-text:#1F1D16; --pnl-muted:#4A453A; --pnl-accent:#8F7334;
  --pnl-pos:#3E6B44; --pnl-neg:#A63B2C; --pnl-hover:rgba(0,0,0,.04); --pnl-weight:400;
  --pnl-total-bg:#16140D; --pnl-total-text:#F7F3E8; --pnl-chip-bg:#6E5B2E; --pnl-chip-fg:#F7F3E8; --pnl-col-bg:#FCFAF4;
}

.panel{background:var(--pnl-bg);color:var(--pnl-text);}
/* the case study keeps a fixed warm-dark ground whatever the switcher says --
   the annotated watercolour needs it, and it breaks up the run of light panels */
.panel.fixed-ink{
  --pnl-bg:#2F2A21; --pnl-card:#3A342A; --pnl-rule:#57503F;
  --pnl-text:#FEFCF7; --pnl-muted:#EFEBE1; --pnl-accent:#E0C58C;
  --pnl-col-bg:#372F25; --pnl-weight:500;
}
/* 04 sits straight after 03; the sage ground keeps the two from running together */
.panel.fixed-sage{
  --pnl-bg:#DADDD2; --pnl-card:#FCFAF4; --pnl-rule:#E3DCC8;
  --pnl-text:#1B1E18; --pnl-muted:#4C5147; --pnl-accent:#5E4A22;
  --pnl-pos:#3F5D46; --pnl-neg:#84443B; --pnl-col-bg:#FCFAF4;
  --pnl-hover:rgba(0,0,0,.045); --pnl-weight:400;
}
.panel .strip-link a{color:var(--pnl-accent);border-color:var(--pnl-rule);}
.panel .strip-link a:hover{border-color:var(--pnl-accent);}
.panel .hs-hint{color:var(--pnl-muted);}
.panel h1,.panel h2,.panel h3{color:var(--pnl-text);}
.panel .sec-head p{color:var(--pnl-muted);}
.panel .eyebrow,.panel .sec-head p.eyebrow{color:var(--pnl-accent);}
.panel .disclaimer{color:var(--pnl-muted);}

/* ledger */
.panel .col{background:transparent;}
.panel .row{background:var(--pnl-col-bg,transparent);border-color:var(--pnl-rule);}
.panel .col-head{border-bottom-color:var(--pnl-rule);}

.panel .col.buy .col-head span{background:transparent;border:1px solid var(--pnl-accent);color:var(--pnl-accent);}
.panel .col.build .col-head span{background:var(--pnl-chip-bg);color:var(--pnl-chip-fg);}
.panel .row{border-bottom-color:var(--pnl-rule);}
.panel .row-top b{color:var(--pnl-accent);}
.panel .row p{color:var(--pnl-muted);font-weight:500;}
.panel .row p b{font-weight:700;color:var(--pnl-text);}
.panel .row p em{font-style:italic;}
.panel .row.total{background:var(--pnl-total-bg);border-color:var(--pnl-total-bg);color:var(--pnl-total-text);}
.panel .row.total .row-top b{color:var(--pnl-total-text);opacity:1;font-weight:700;font-size:0.86rem;letter-spacing:0.17em;}
.panel .row.total .row-top strong{color:var(--pnl-total-text);}
.panel .row.equity{background:var(--pnl-col-bg,transparent);border-color:var(--pnl-rule);}
.panel .eq-neg strong,.panel .eq-neg b{color:var(--pnl-neg) !important;}
.panel .eq-pos strong,.panel .eq-pos b{color:var(--pnl-pos) !important;}
.panel .verdict-label{color:var(--pnl-text);}
.panel .verdict{border-color:var(--pnl-rule);background:var(--pnl-col-bg,transparent);color:var(--pnl-text);}
.panel .vdiv{background:var(--pnl-rule);}

/* stats */
.panel .stats{background:none;border:none;}
.panel .stat{background:var(--pnl-col-bg,transparent);border-color:var(--pnl-rule);}
.panel .stat b{color:var(--pnl-text);}
.panel .stat-soft{color:var(--pnl-accent);}
.panel .stat-ico{color:var(--pnl-accent);}
.panel .stat p{color:var(--pnl-muted);font-weight:500;}
.panel .stat p em{font-style:normal;font-weight:700;color:var(--pnl-text);}
.panel .stat p em{color:var(--pnl-text);}
.panel .jv-quote{background:#2F2A21;border-left-color:var(--brass);}
.panel .jv-quote p{color:#FEFCF7;}
.panel .jv-quote p.eyebrow{color:#E0C58C;}

/* de-risked Q&A */
.panel .qa{border-top-color:var(--pnl-rule);}
.panel .qa-row{border-bottom-color:var(--pnl-rule);}
.qa-q{display:flex;gap:.55rem;align-items:baseline;flex-wrap:wrap;}
.panel .qa-row q{color:var(--pnl-text);}
.panel .qa-row p{color:var(--pnl-muted);font-weight:var(--pnl-weight,400);}
.panel .qa-row p b{color:var(--pnl-text);font-weight:700;}

/* gut-check */
.panel .check-list{border-top-color:var(--pnl-rule);}
.panel .check{border-bottom-color:var(--pnl-rule);}
.panel .check:hover{background:var(--pnl-hover);}
.panel .box{border-color:var(--pnl-muted);}
.panel .check[aria-pressed="true"] .box{background:var(--brass);border-color:var(--brass);}
.panel .check span{color:var(--pnl-muted);font-weight:var(--pnl-weight,400);}
.panel .check[aria-pressed="true"] span{color:var(--pnl-text);}
.panel .tally-n{color:var(--pnl-accent);}
.panel .tally p{color:var(--pnl-muted);}
.panel .tally.hit p{color:var(--pnl-text);}

/* ============ TRANSACTION ============ */
.ledger{display:flex;flex-direction:column;gap:1.6rem;}
.col{display:flex;flex-direction:column;gap:0.7rem;}
.col-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:0 0.2rem 0.35rem;
}
.col-head h3{font-size:1.68rem;}
.col-head span{
  font-family:var(--ui);font-size:0.58rem;letter-spacing:0.16em;text-transform:uppercase;
  padding:0.3rem 0.55rem;white-space:nowrap;
}
.col.buy .col-head span{background:var(--rule-dk);color:var(--muted-lt);}
.col.build .col-head span{background:var(--brass);color:#14130D;}
.row{padding:1.05rem 1.2rem;border:1px solid var(--rule-dk);display:flex;flex-direction:column;gap:0.32rem;}
.row-top{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;}
.ghost{visibility:hidden;}
.row-top b{
  font-family:var(--body);font-size:0.78rem;letter-spacing:0.11em;text-transform:uppercase;
  color:var(--brass-text);font-weight:600;
}
.row-top strong{font-family:var(--disp);font-size:1.45rem;font-weight:500;font-variant-numeric:tabular-nums;}
.row p{font-size:0.98rem;line-height:1.5;color:var(--muted-lt);font-weight:500;}
.row.total{background:var(--ink-3);border-color:var(--ink-3);}
.row.total .row-top strong{font-size:1.68rem;}
.row.equity{border:1px solid var(--rule-dk);}
.row.equity .row-top strong{font-size:1.5rem;}
.eqfig{display:inline-flex;align-items:center;gap:0.85rem;}
.eqfig .vdiv{align-self:auto;height:1.05em;opacity:.55;}
.eqamt{font-size:0.8em;}
.eq-neg strong,.eq-neg b{color:#D4948A !important;}
.eq-pos strong,.eq-pos b{color:#A9C79E !important;}



.verdict-wrap{
  margin-top:2rem;display:flex;flex-direction:column;
  align-items:center;gap:0.9rem;text-align:center;
}
.verdict-label{
  font-family:var(--body);font-size:0.85rem;font-weight:600;
  letter-spacing:0.16em;text-transform:uppercase;color:var(--ink);
}
.verdict{
  display:inline-flex;align-items:center;gap:1.6rem;
  border:1px solid var(--rule);background:var(--paper-2);
  padding:0.8rem 2.1rem;
  font-family:var(--disp);font-weight:500;
  font-size:clamp(1.5rem,3.6vw,2.1rem);
  font-variant-numeric:tabular-nums;
}
.verdict em{font-style:normal;}
.vdiv{width:1px;align-self:stretch;background:var(--rule);}
.disclaimer{margin-top:1.5rem;font-size:0.88rem;color:var(--muted);line-height:1.55;}
.dark .disclaimer{color:#6D6753;}

@media (min-width:46.0625rem){
  .ledger{display:grid;grid-template-columns:1fr 1fr;gap:0.7rem 1.5rem;align-items:stretch;}
  .col{display:contents;}
  .col.buy > *{grid-column:1;}
  .col.build > *{grid-column:2;}
  .col > *:nth-child(1){grid-row:1;}
  .col > *:nth-child(2){grid-row:2;}
  .col > *:nth-child(3){grid-row:3;}
  .col > *:nth-child(4){grid-row:4;}
  .col > *:nth-child(5){grid-row:5;}
  .col > *:nth-child(6){grid-row:6;}
  .col > *:nth-child(7){grid-row:7;}
}
@media (max-width:30rem){
  .row-top{flex-direction:column;align-items:flex-start;gap:.15rem;}
  .row-top strong{white-space:nowrap;}
}

/* ============ PROCESS ============ */
.steps{display:flex;flex-direction:column;gap:0;}
.step{
  display:grid;grid-template-columns:3.25rem 1fr;gap:0 1.4rem;
  padding:1.4rem 1.5rem;border:1px solid var(--rule);background:var(--card);
  align-items:start;
}
.step-arrow{text-align:center;color:var(--brass-text);font-size:1.1rem;line-height:1;padding:0.6rem 0;}
.step.final{background:#2F2A21;border-color:#2F2A21;}
.step.final h3{color:#FEFCF7;}
.step.final p{color:#DCD5C4;}
.step.final p b{color:#FEFCF7;}
.step-n{
  width:2.4rem;height:2.4rem;border-radius:50%;
  background:#7E7955;border:1px solid #7E7955;color:#F9F5EB;
  display:grid;place-items:center;
  font-family:var(--disp);font-size:1.05rem;
}
.step-b{display:flex;flex-direction:column;gap:0.35rem;}
.step h3{font-size:1.4rem;}
.step p{color:var(--ink);font-size:0.98rem;max-width:46em;}
.step p b{font-weight:700;color:var(--ink);}

/* ============ STATS ============ */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:0.85rem;}
.stat{background:var(--card);border:1px solid var(--rule);padding:1.6rem 1.5rem;display:flex;flex-direction:column;gap:0.5rem;}
.stat-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;}
.stat b{font-family:var(--disp);font-size:clamp(2rem,5vw,2.9rem);line-height:1;color:var(--ink);font-weight:400;}
.stat-soft{color:var(--brass-text);}
.stat-ico{flex:none;width:1.7rem;height:1.7rem;color:var(--brass-text);margin-top:.4rem;}
.stat-ico svg{width:100%;height:100%;display:block;}
.stat p{font-size:0.99rem;color:var(--muted-lt);}
.stat p em{color:var(--paper);font-style:normal;}
@media (max-width:40rem){ .stats{grid-template-columns:1fr;} }

.jv-quote{
  background:#2F2A21;color:#FEFCF7;
  border:none;border-left:4px solid var(--brass);
  padding:1.4rem 1.8rem;margin:2rem 0;
}
.jv-quote p{color:#FEFCF7;}
.jv-quote p.eyebrow{color:#E0C58C;}
.jv-quote p{font-family:var(--disp);font-style:italic;font-size:clamp(1.15rem,2.6vw,1.5rem);line-height:1.35;}
.jv-quote p.eyebrow{font-family:var(--ui);font-style:normal;font-size:0.82rem;line-height:1.4;}

/* ============ HOTSPOT FIGURE ============ */
.hs{position:relative;margin:0;}
.hs-img{width:100%;height:auto;}
.hs-frame{position:relative;overflow:hidden;background:var(--ink-2);}
.hs-media{position:relative;}
.hs-cap{
  position:absolute;left:0;bottom:0;right:0;
  padding:2.5rem 1.5rem 1.25rem;
  background:linear-gradient(180deg,rgba(21,20,14,0) 0%,rgba(21,20,14,.82) 70%);
  color:var(--paper);pointer-events:none;
}
.hs-cap h3{font-size:clamp(1.3rem,3vw,1.9rem);color:var(--paper);}
.hs-cap span{font-family:var(--ui);font-size:0.6rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--brass-lt);}

.dot{
  position:absolute;width:1.85rem;height:1.85rem;border-radius:50%;
  transform:translate(-50%,-50%);
  background:rgba(21,20,14,.62);border:1px solid rgba(249,245,235,.75);
  color:var(--paper);
  display:grid;place-items:center;
  font-family:var(--disp);font-style:italic;font-size:1rem;line-height:1;
  backdrop-filter:blur(3px);
  transition:background .2s,transform .2s,border-color .2s;
  z-index:3;
}
.dot::after{
  content:"";position:absolute;inset:-0.55rem;border-radius:50%;
  border:1px solid rgba(249,245,235,.35);opacity:0;transition:opacity .3s;
}
.dot:hover,.dot.on{background:var(--brass);border-color:var(--brass);color:#14130D;transform:translate(-50%,-50%) scale(1.1);}
.dot:hover::after,.dot.on::after{opacity:1;}

.pop{
  position:absolute;z-index:5;width:min(19rem,72%);
  background:rgba(21,20,14,.95);color:var(--paper);
  border:1px solid rgba(199,172,114,.4);
  padding:1rem 1.1rem;
  display:none;flex-direction:column;gap:0.4rem;
  backdrop-filter:blur(6px);
}
.pop.show{display:flex;}
.pop,.hs-panel{line-height:1.5;}
.pop h4{font-family:var(--ui);font-size:0.6rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--brass-lt);font-weight:400;}
.pop p{font-size:0.9rem;line-height:1.5;color:#D9D2BE;}
.pop dl{display:grid;grid-template-columns:auto 1fr;gap:0.35rem 1rem;margin:0;font-size:0.88rem;line-height:1.4;}
.pop dt{font-family:var(--ui);font-size:0.6rem;letter-spacing:0.13em;text-transform:uppercase;color:var(--muted-lt);align-self:center;}
.pop dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;color:var(--paper);}

.hs-panel{
  display:none;background:var(--ink-2);color:var(--paper);
  border:1px solid var(--rule-dk);border-top:none;padding:1.1rem 1.25rem;
  flex-direction:column;gap:0.4rem;
}
.hs-panel.show{display:flex;}
.hs-panel h4{font-family:var(--ui);font-size:0.6rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--brass-lt);font-weight:400;}
.hs-panel p{font-size:0.92rem;color:#D9D2BE;}
.hs-panel dl{display:grid;grid-template-columns:auto 1fr;gap:0.35rem 1rem;margin:0;font-size:0.9rem;line-height:1.4;}
.hs-panel dt{font-family:var(--ui);font-size:0.6rem;letter-spacing:0.13em;text-transform:uppercase;color:var(--muted-lt);}
.hs-panel dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;}

.hs-hint{
  margin-top:0.75rem;font-family:var(--ui);font-size:0.63rem;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--muted);
}
.dark .hs-hint{color:var(--muted-lt);}

@media (max-width:46rem){
  .pop{display:none !important;}
  .hs-cap{position:static;background:var(--ink-2);padding:1rem 1.15rem;display:flex;flex-direction:column;gap:.2rem;}
}
@media (min-width:46.0625rem){ .hs-panel{display:none !important;} }

/* ============ PROJECT GRID ============ */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;}
.card{
  position:relative;overflow:hidden;background:var(--ink-2);
  text-decoration:none;color:var(--paper);display:block;
}
.card img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;transition:transform .8s cubic-bezier(.2,.7,.3,1);}
.card:hover img{transform:scale(1.045);}
.card-cap{
  position:absolute;inset:auto 0 0 0;padding:2.5rem 1.1rem 1rem;
  background:linear-gradient(180deg,rgba(21,20,14,0),rgba(21,20,14,.85));
}
.card-cap h3{font-size:1.25rem;color:var(--paper);}
.card-cap span{font-family:var(--ui);font-size:0.58rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--brass-lt);}
@media (max-width:52rem){ .grid3{grid-template-columns:repeat(2,1fr);} }
@media (max-width:34rem){ .grid3{grid-template-columns:1fr;} }

/* ============ REASONS ============ */
.reasons{display:flex;flex-direction:column;}
.reason{
  display:grid;grid-template-columns:4.5rem 1fr;gap:0 1.5rem;
  padding:2rem 0;border-bottom:1px solid var(--rule);align-items:start;
}
.reason:first-child{border-top:1px solid var(--rule);}
.reason .rn{
  font-family:var(--disp);font-size:1.5rem;color:var(--brass-text);
  letter-spacing:0.08em;padding-top:0.15rem;
}
.reason-b{display:flex;flex-direction:column;gap:0.7rem;}
.reason h3{font-size:clamp(1.4rem,3vw,1.8rem);}
.reason p{color:var(--muted);}
@media (max-width:40rem){
  .reason{grid-template-columns:1fr;gap:0.5rem;}
  .reason .rn{font-size:1.15rem;}
}

/* ============ Q&A / DE-RISKED ============ */
.qa{display:flex;flex-direction:column;border-top:1px solid var(--rule-dk);}
.qa-row{
  display:grid;grid-template-columns:minmax(12rem,1fr) 1.4fr;gap:1rem 2rem;
  padding:1.5rem 0;border-bottom:1px solid var(--rule-dk);
}
.qa-row q{
  font-family:var(--disp);font-style:italic;font-size:1.32rem;line-height:1.25;
  quotes:"\201C" "\201D";color:var(--paper);
}
.qa-row p{color:#C3BCA6;font-size:0.98rem;}
.qa-row p b{color:var(--paper);font-weight:700;}
@media (max-width:46rem){ .qa-row{grid-template-columns:1fr;} }

/* ============ COMPARISON TABLE ============ */
.band{margin:0;width:100%;overflow:hidden;}
.band img{width:100%;height:clamp(13rem,28vw,19rem);object-fit:cover;display:block;}
.fig-inline{margin:1.9rem 0 0.4rem;}
.fig-inline img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;}
.fig-inline figcaption{
  margin-top:.65rem;font-family:var(--ui);font-size:.66rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}

.quotes-split{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:stretch;}
.quotes-col{display:flex;flex-direction:column;gap:1.5rem;}
.quotes-col .quote{flex:1;}
.quotes-fig{margin:0;overflow:hidden;}
.quotes-fig img{width:100%;height:100%;min-height:18rem;object-fit:cover;display:block;}
@media (max-width:46rem){ .quotes-split{grid-template-columns:1fr;} .quotes-fig img{min-height:14rem;} }

.sec-head-split{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center;margin-bottom:2.1rem;}
.sec-head-split .sec-head{margin-bottom:0;}
.head-fig{margin:0;overflow:hidden;}
.head-fig img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;}
@media (max-width:52rem){ .sec-head-split{grid-template-columns:1fr;gap:1.6rem;} }

.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:0.85rem;margin-top:0.9rem;}
.strip-img{display:block;overflow:hidden;background:var(--ink-2);}
.strip-img img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.3,1);}
.strip-img:hover img{transform:scale(1.05);}
.strip-link{margin-top:0.9rem;text-align:right;}
.strip-link a{
  font-family:var(--ui);font-size:0.7rem;font-weight:600;letter-spacing:0.15em;
  text-transform:uppercase;color:var(--brass-text);text-decoration:none;
  border-bottom:1px solid var(--rule);padding-bottom:0.2rem;
}
.strip-link a:hover{border-color:var(--brass);}
@media (max-width:40rem){
  .strip{grid-template-columns:1fr 1fr;}
  .strip-img:nth-child(3){display:none;}
}

.scroller{overflow-x:auto;}
.cmp{width:100%;border-collapse:collapse;min-width:36rem;}
.cmp th,.cmp td{text-align:left;padding:1.15rem 1.15rem;border-bottom:1px solid var(--rule);vertical-align:top;}
.cmp thead th{
  font-family:var(--ui);font-size:0.72rem;letter-spacing:0.15em;text-transform:uppercase;
  color:var(--muted);font-weight:600;border-bottom:1px solid var(--ink);
}
.cmp tbody th{
  font-family:var(--ui);font-size:0.75rem;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--ink);font-weight:600;width:11.5rem;
}
.cmp .fig{font-family:var(--disp);font-size:1.7rem;display:block;margin-bottom:0.35rem;font-variant-numeric:tabular-nums;}
.cmp .b .fig{color:var(--neg);}
.cmp .s .fig{color:var(--pos);}
.cmp td p{font-size:1rem;line-height:1.5;color:var(--muted);}
.cmp .note{background:var(--paper-2);}
.cmp .note td{font-family:var(--disp);font-style:italic;font-size:1.22rem;color:var(--ink);}

/* ============ ESSAY ============ */
.essay{display:grid;grid-template-columns:1fr 17rem;gap:3.5rem;align-items:start;}
.essay-body{display:flex;flex-direction:column;gap:1.35rem;max-width:38rem;}
.essay-body p{font-size:1.115rem;}
.essay-body .lede{font-size:1.35rem;line-height:1.45;font-style:italic;}
.pull{
  font-family:var(--disp);font-style:italic;font-size:clamp(1.5rem,3.4vw,2rem);
  line-height:1.3;border-left:2px solid var(--brass);padding:0.4rem 0 0.4rem 1.5rem;
  margin:0.75rem 0;color:var(--ink);
}
.sig{font-family:var(--ui);font-size:0.66rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);margin-top:0.5rem;}
.bio{border:1px solid var(--rule);background:var(--sagecard);position:sticky;top:5.5rem;padding:0.9rem;}
.bio img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center 12%;filter:saturate(.9);}
.bio-b{padding:1.2rem 0.45rem 0.35rem;display:flex;flex-direction:column;gap:0.6rem;}
.bio-b h3{font-size:1.5rem;}
.bio-b ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.3rem;}
.bio-b li{font-size:0.92rem;color:var(--muted);padding-left:1rem;position:relative;}
.bio-b li::before{content:"\2022";position:absolute;left:0;color:var(--brass-text);}
.bio-b p{font-size:0.92rem;color:var(--muted);}
@media (max-width:56rem){ .essay{grid-template-columns:1fr;} .bio{position:static;max-width:22rem;} }

/* ============ FAQ ============ */
.faq{border-top:1px solid var(--rule);}
details{border-bottom:1px solid var(--rule);}
summary{
  list-style:none;cursor:pointer;padding:1.35rem 2.5rem 1.35rem 0;
  position:relative;display:flex;gap:1.25rem;align-items:baseline;
}
summary::-webkit-details-marker{display:none;}
summary .qn{font-family:var(--disp);color:var(--brass-text);font-size:1rem;min-width:2.2rem;letter-spacing:0.06em;}
summary h3{font-size:clamp(1.15rem,2.6vw,1.45rem);}
summary::after{
  content:"";position:absolute;right:0.35rem;top:1.85rem;
  width:0.62rem;height:0.62rem;border-right:1px solid var(--brass);border-bottom:1px solid var(--brass);
  transform:rotate(45deg);transition:transform .25s;
}
details[open] summary::after{transform:rotate(-135deg);}
.answer{padding:0 2.5rem 1.6rem 3.45rem;display:flex;flex-direction:column;gap:0.9rem;}
.answer p{color:var(--muted);}
@media (max-width:40rem){ .answer{padding-left:0;} }

/* ============ GUT CHECK ============ */
.check-list{display:flex;flex-direction:column;border-top:1px solid var(--rule-dk);margin-bottom:2rem;}
.check{
  display:flex;gap:1rem;align-items:flex-start;text-align:left;width:100%;
  padding:1.05rem 0.5rem 1.05rem 0;border-bottom:1px solid var(--rule-dk);
  transition:background .2s;
}
.check:hover{background:rgba(199,172,114,.06);}
.box{
  flex:none;width:1.35rem;height:1.35rem;border:1px solid var(--muted-lt);
  display:grid;place-items:center;margin-top:0.15rem;transition:all .2s;
}
.box svg{opacity:0;transform:scale(.6);transition:all .2s;}
.check[aria-pressed="true"] .box{background:var(--brass);border-color:var(--brass);}
.check[aria-pressed="true"] .box svg{opacity:1;transform:none;}
.check span{font-size:1.05rem;color:#C3BCA6;transition:color .2s;}
.check[aria-pressed="true"] span{color:var(--paper);}

.tally{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:1.25rem 0;
}
.tally-n{font-family:var(--disp);font-size:2.5rem;color:var(--brass-lt);line-height:1;font-variant-numeric:tabular-nums;}
.tally p{color:var(--muted-lt);font-size:1rem;}
.tally.hit p{color:var(--paper);}

/* ============ FORM ============ */
.form-wrap{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start;}
form{display:flex;flex-direction:column;gap:1.1rem;}
.field{display:flex;flex-direction:column;gap:0.4rem;}
label{font-family:var(--ui);font-size:0.62rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--muted);}
input,textarea{
  font-family:var(--body);font-size:1rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);
  padding:0.75rem 0.9rem;width:100%;
}
input:focus,textarea:focus{border-color:var(--brass);outline:none;}
textarea{min-height:7rem;resize:vertical;}
.two{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;}
.contact-direct{display:flex;flex-direction:column;gap:1.25rem;}
.contact-direct a{font-family:var(--disp);font-size:1.4rem;text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:0.2rem;}
.contact-direct a:hover{border-color:var(--brass);}
.note{font-size:0.85rem;color:var(--muted);}
@media (max-width:52rem){ .form-wrap{grid-template-columns:1fr;} .two{grid-template-columns:1fr;} }

/* ============ QUOTES ============ */
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;}
.quote{border:1px solid var(--rule);padding:1.75rem;display:flex;flex-direction:column;gap:1rem;background:var(--paper);}
.dark .quote{border-color:var(--rule-dk);background:var(--ink-2);}
.quote p{font-family:var(--disp);font-style:italic;font-size:1.22rem;line-height:1.4;}
.quote cite{font-family:var(--ui);font-size:0.62rem;letter-spacing:0.16em;text-transform:uppercase;font-style:normal;color:var(--muted);}
.dark .quote cite{color:var(--brass-lt);}
@media (max-width:46rem){ .quotes{grid-template-columns:1fr;} }

/* ============ CTA BAND ============ */
.band{text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.25rem;}
.band h2{font-size:clamp(2rem,5vw,3.2rem);font-style:italic;line-height:1.1;max-width:14em;}
.band p{color:var(--muted-lt);max-width:34rem;}

/* ============ FOOTER ============ */
footer{background:var(--ink);color:var(--muted-lt);padding:3.5rem 0 2.5rem;border-top:1px solid var(--rule-dk);}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem;padding-bottom:2.5rem;border-bottom:1px solid var(--rule-dk);}
.foot-brand{font-family:var(--disp);font-size:1rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--paper);}
.foot-col h4{font-family:var(--ui);font-size:0.6rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--brass-lt);font-weight:400;margin-bottom:0.85rem;}
.foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.5rem;}
.foot-col a{font-size:0.95rem;text-decoration:none;color:var(--muted-lt);}
.foot-col a:hover{color:var(--paper);}
.legal{padding-top:1.75rem;font-size:0.8rem;line-height:1.6;color:#6D6753;display:flex;flex-direction:column;gap:0.75rem;}
.legal strong{color:var(--muted-lt);font-weight:400;}
@media (max-width:46rem){ .foot-top{grid-template-columns:1fr;gap:1.75rem;} }