:root{
    --ink:#16232E;
    --ink-soft:#4E5D66;
    --paper:#FCFCFA;
    --ledger:#E9EFE6;
    --rule:#C7D5C2;
    --rule-fine:#DFE6DB;
    --pencil:#6B7A6E;
    --red:#B4322C;
    --tick:#2E6B4F;

    --display:"Newsreader",Georgia,serif;
    --body:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;

    --gut:clamp(20px,5vw,64px);
    --maxw:1120px;
  }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--body);
    font-size:17px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
  a{color:inherit}

  h1,h2,h3{font-family:var(--display);font-weight:500;letter-spacing:-.015em;margin:0}
  .num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

  .eyebrow{
    font-family:var(--mono);font-size:11px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--pencil);margin:0 0 18px
  }

  /* ---------- header ---------- */
  .masthead{
    position:sticky;top:0;z-index:20;background:rgba(252,252,250,.92);
    backdrop-filter:blur(6px);border-bottom:1px solid var(--rule-fine)
  }
  .masthead .wrap{display:flex;align-items:center;justify-content:space-between;height:70px;gap:20px}
  .mark{
    font-family:var(--display);font-size:21px;font-weight:600;letter-spacing:-.02em;
    text-decoration:none;white-space:nowrap;display:flex;align-items:baseline;gap:10px
  }
  .mark .bar{color:var(--rule);font-weight:400;margin:0 2px}
  .mark small{
    font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:.14em;
    text-transform:uppercase;color:var(--pencil)
  }
  @media(max-width:640px){
    .mark .bar,.mark small{display:none}
  }
  .nav{display:flex;gap:30px;align-items:center}
  .nav a{font-size:14.5px;text-decoration:none;color:var(--ink-soft)}
  .nav a:hover{color:var(--ink)}
  @media(max-width:820px){.nav a:not(.btn){display:none}}

  .btn{
    display:inline-block;background:var(--ink);color:var(--paper);
    padding:12px 22px;border-radius:2px;text-decoration:none;
    font-size:15px;font-weight:500;border:1px solid var(--ink);transition:.15s
  }
  .btn:hover{background:transparent;color:var(--ink)}
  .btn-ghost{background:transparent;color:var(--ink)}
  .btn-ghost:hover{background:var(--ink);color:var(--paper)}
  .masthead .btn{padding:10px 18px;font-size:14px}

  /* ---------- hero ---------- */
  .hero{padding:clamp(56px,8vw,104px) 0 clamp(48px,7vw,88px)}
  .hero .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);align-items:center}
  @media(max-width:900px){.hero .wrap{grid-template-columns:1fr}}

  .hero h1{font-size:clamp(38px,5.4vw,62px);line-height:1.04}
  .hero h1 em{font-style:normal;position:relative;white-space:nowrap}
  .hero h1 em:after{
    content:"";position:absolute;left:0;right:0;bottom:.08em;height:3px;
    background:var(--tick);transform:scaleX(0);transform-origin:left;
    animation:rule .7s .5s cubic-bezier(.2,.7,.2,1) forwards
  }
  @keyframes rule{to{transform:scaleX(1)}}
  .hero p.lede{font-size:19px;color:var(--ink-soft);max-width:44ch;margin:22px 0 32px}
  .cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
  .cta-note{font-size:14px;color:var(--pencil)}

  /* ---------- ledger card (signature) ---------- */
  .ledger{
    background:var(--ledger);border:1px solid var(--rule);border-radius:2px;
    padding:0;overflow:hidden;box-shadow:0 1px 0 var(--rule),0 18px 40px -28px rgba(22,35,46,.4)
  }
  .ledger-head{
    display:flex;justify-content:space-between;align-items:baseline;
    padding:16px 20px;border-bottom:2px solid var(--rule);
    font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--pencil)
  }
  .ledger-body{padding:4px 0}
  .row{
    display:grid;grid-template-columns:1fr auto 34px;align-items:center;gap:14px;
    padding:13px 20px;border-bottom:1px solid var(--rule-fine);font-size:15px
  }
  .row:last-child{border-bottom:0}
  .row .label{color:var(--ink)}
  .row .amt{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:14.5px}
  .row.flag .label{color:var(--red)}
  .row.flag .amt{color:var(--red)}
  .row .state{justify-self:end;width:22px;height:22px;position:relative}

  .x{position:absolute;inset:0;opacity:0}
  .check{position:absolute;inset:0;opacity:1}
  body.js .check{opacity:0}
  .x{color:var(--red);font-family:var(--mono);font-size:17px;line-height:22px;text-align:center}
  .check svg{width:22px;height:22px;display:block}
  .check path{
    stroke:var(--tick);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;
    stroke-dasharray:26;stroke-dashoffset:0
  }
  body.js .check path{stroke-dashoffset:26}

  .ledger.run .x{animation:xin .01s var(--d) forwards, xout .3s calc(var(--d) + 1.15s) forwards}
  .ledger.run .check{animation:cin .01s calc(var(--d) + 1.3s) forwards}
  .ledger.run .check path{animation:draw .35s calc(var(--d) + 1.3s) forwards}
  .ledger.run .row.flag{animation:settle .4s calc(var(--d) + 1.3s) forwards}
  @keyframes xin{to{opacity:1}}
  @keyframes xout{to{opacity:0}}
  @keyframes cin{to{opacity:1}}
  @keyframes draw{to{stroke-dashoffset:0}}
  @keyframes settle{to{}}
  .ledger.run .row.flag .label,.ledger.run .row.flag .amt{
    animation:decolor .4s calc(var(--d) + 1.3s) forwards
  }
  @keyframes decolor{to{color:var(--ink)}}
  .ledger.run .row.flag .amt{animation-name:decolor}

  .ledger-foot{
    display:grid;grid-template-columns:1fr auto 34px;gap:14px;
    padding:16px 20px;border-top:2px solid var(--rule);background:rgba(255,255,255,.5);
    font-size:15px;font-weight:600
  }
  .ledger-foot .amt{font-family:var(--mono);font-variant-numeric:tabular-nums}
  .ledger-caption{font-size:13.5px;color:var(--pencil);margin-top:14px;text-align:right}

  @media(prefers-reduced-motion:reduce){
    .hero h1 em:after{animation:none;transform:scaleX(1)}
    body.js .ledger.run .x{display:none}
    .ledger.run .check,.ledger.run .check path{animation:none;opacity:1;stroke-dashoffset:0}
    .ledger.run .row.flag .label,.ledger.run .row.flag .amt{animation:none;color:var(--ink)}
    body.js .reveal{opacity:1;transform:none}
  }

  /* ---------- sections ---------- */
  section{padding:clamp(60px,8vw,110px) 0;border-top:1px solid var(--rule-fine)}
  .sec-head{max-width:56ch;margin-bottom:clamp(36px,5vw,60px)}
  .sec-head h2{font-size:clamp(28px,3.6vw,42px);line-height:1.12}
  .sec-head p{color:var(--ink-soft);margin:16px 0 0;font-size:18px}

  /* services as ruled ledger entries, not cards */
  .service{
    display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) auto;
    gap:clamp(20px,4vw,56px);align-items:start;
    padding:34px 0;border-bottom:1px solid var(--rule-fine)
  }
  .service:first-of-type{border-top:2px solid var(--rule)}
  .service:last-of-type{border-bottom:2px solid var(--rule)}
  .service h3{font-size:24px;line-height:1.2}
  .service .acct{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--pencil);display:block;margin-bottom:8px}
  .service p{margin:0;color:var(--ink-soft);font-size:16.5px}
  .service ul{margin:14px 0 0;padding:0;list-style:none;font-size:15.5px;color:var(--ink-soft)}
  .service li{padding-left:20px;position:relative;margin-bottom:6px}
  .service li:before{content:"✓";position:absolute;left:0;color:var(--tick);font-size:13px}
  .service .price{
    font-family:var(--mono);font-size:14px;color:var(--ink);white-space:nowrap;
    text-align:right;justify-self:end
  }
  .service .price small{
    display:block;color:var(--pencil);font-size:10.5px;letter-spacing:.09em;
    text-transform:uppercase;margin-bottom:6px;white-space:nowrap
  }
  .service .price .tag{
    display:block;margin:10px 0 0 auto;font-family:var(--body);font-size:12.5px;
    line-height:1.4;color:var(--pencil);letter-spacing:0;white-space:normal;
    max-width:16ch;text-align:right
  }
  .fit-note{
    margin:30px 0 0;padding-top:24px;border-top:1px solid var(--rule);
    font-size:15px;line-height:1.6;color:var(--pencil);max-width:none
  }
  .fit-note strong{color:var(--ink);font-weight:600}
  @media(max-width:860px){
    .service{grid-template-columns:1fr;gap:16px}
    .service .price{text-align:left;justify-self:start}
    .service .price .tag{margin-left:0;text-align:left}
  }

  /* process — a real sequence, so numbers earn their place */
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,48px);counter-reset:s}
  @media(max-width:800px){.steps{grid-template-columns:1fr}}
  .step{counter-increment:s;padding-top:22px;border-top:2px solid var(--ink)}
  .step:before{
    content:counter(s,decimal-leading-zero);font-family:var(--mono);font-size:12px;
    color:var(--pencil);letter-spacing:.1em;display:block;margin-bottom:14px
  }
  .step h3{font-size:20px;margin-bottom:10px}
  .step p{margin:0;color:var(--ink-soft);font-size:16px}

  /* who it's for */
  .fit{background:var(--ledger);border:1px solid var(--rule);padding:clamp(28px,4vw,44px);border-radius:2px}
  .fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px)}
  @media(max-width:800px){.fit-grid{grid-template-columns:1fr}}
  .fit h3{font-size:18px;margin-bottom:16px;font-family:var(--body);font-weight:600}
  .fit ul{margin:0;padding:0;list-style:none;font-size:16px;color:var(--ink-soft)}
  .fit li{padding-left:24px;position:relative;margin-bottom:11px;line-height:1.5}
  .yes li:before{content:"✓";position:absolute;left:0;color:var(--tick)}
  .no li:before{content:"×";position:absolute;left:2px;color:var(--red);font-family:var(--mono)}

  /* faq */
  details{border-bottom:1px solid var(--rule-fine);padding:20px 0}
  details:first-of-type{border-top:1px solid var(--rule-fine)}
  summary{
    cursor:pointer;font-size:18px;font-weight:500;list-style:none;
    display:flex;justify-content:space-between;gap:20px;align-items:center
  }
  summary::-webkit-details-marker{display:none}
  summary:after{content:"+";font-family:var(--mono);color:var(--pencil);font-size:20px;flex-shrink:0}
  details[open] summary:after{content:"–"}
  details p{margin:14px 0 0;color:var(--ink-soft);max-width:70ch;font-size:16.5px}

  /* close */
  .close{background:var(--ink);color:var(--paper);text-align:center;border-top:0}
  .close h2{font-size:clamp(30px,4.2vw,50px);max-width:20ch;margin:0 auto;line-height:1.1}
  .close p{color:#A9B6BE;max-width:48ch;margin:20px auto 34px;font-size:18px}
  .close .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
  .close .btn:hover{background:transparent;color:var(--paper)}
  .close .cta-note{color:#7E8D96;margin-top:22px}

  .credential{
    display:inline-flex;align-items:center;gap:9px;
    font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--pencil);border:1px solid var(--rule);border-radius:2px;
    padding:8px 14px;background:var(--ledger)
  }
  .credential:before{content:"✓";color:var(--tick);font-size:12px;letter-spacing:0}
  .close .credential{background:transparent;border-color:#3B4A54;color:#A9B6BE}
  .close .credential:before{color:#6FA98A}

  footer{padding:38px 0;font-size:14px;color:var(--pencil)}
  footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
  footer a{text-decoration:none}
  footer a:hover{color:var(--ink)}

  .reveal{opacity:1;transform:none}
  body.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
  body.js .reveal.in{opacity:1;transform:none}

  :focus-visible{outline:2px solid var(--tick);outline-offset:3px}


/* ---------- multi-page additions ---------- */
.nav a.active{color:var(--ink);font-weight:500}
@media(max-width:820px){
  .masthead .wrap{height:auto;padding-top:14px;padding-bottom:14px;flex-wrap:wrap}
  .nav{gap:18px;width:100%;order:2;flex-wrap:wrap}
  .nav a:not(.btn){display:inline-block;font-size:14px}
  .nav .btn{order:-1;margin-left:auto}
}
.page-hero{padding:clamp(48px,6vw,84px) 0 clamp(28px,3vw,44px);border-top:0}
.page-hero h1{font-size:clamp(34px,4.6vw,54px);line-height:1.06;max-width:18ch}
.page-hero p{font-size:19px;color:var(--ink-soft);max-width:56ch;margin:22px 0 0}
.next{border-top:1px solid var(--rule-fine);padding:clamp(44px,5vw,72px) 0}
.next .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.next p{margin:0;font-family:var(--display);font-size:clamp(22px,2.6vw,30px);max-width:22ch;line-height:1.2}
footer .wrap{align-items:flex-start}
.foot-cred{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}


/* ---------- home: service summary (teaser rows) ---------- */
  .summary{border-top:2px solid var(--rule)}
  .srow{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) auto;
    gap:clamp(16px,3vw,44px);align-items:baseline;
    padding:22px 4px;border-bottom:1px solid var(--rule-fine);
    text-decoration:none;transition:background .15s,padding .15s
  }
  .srow:last-child{border-bottom:2px solid var(--rule)}
  .srow:hover{background:var(--ledger);padding-left:14px;padding-right:14px}
  .sname{font-family:var(--display);font-size:21px;letter-spacing:-.015em}
  .sdesc{color:var(--ink-soft);font-size:16px}
  .sprice{
    font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:15px;
    text-align:right;justify-self:end;white-space:nowrap
  }
  .sprice small{color:var(--pencil);font-size:12px}
  .summary-note{margin:22px 0 0;font-size:15px}
  .summary-note a{color:var(--tick);text-decoration:none;font-weight:500}
  .summary-note a:hover{text-decoration:underline}
  @media(max-width:760px){
    .srow{grid-template-columns:1fr auto;gap:6px 16px;padding:18px 4px}
    .sdesc{grid-column:1;font-size:15px}
    .sprice{grid-row:1;grid-column:2}
  }


/* ---------- testimonial ---------- */
  .testimonial{
    padding:clamp(56px,7vw,96px) 0;
    background:var(--ledger);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)
  }
  .testimonial figure{margin:0;max-width:60ch}
  .testimonial blockquote{margin:0;position:relative;padding-left:28px}
  .testimonial blockquote:before{
    content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;background:var(--tick)
  }
  .testimonial blockquote p{
    margin:0;font-family:var(--display);font-size:clamp(21px,2.4vw,27px);
    line-height:1.38;letter-spacing:-.01em;color:var(--ink)
  }
  .testimonial figcaption{margin:26px 0 0 28px;display:flex;flex-direction:column;gap:4px}
  .cite-name{font-size:15px;font-weight:600;color:var(--ink)}
  .cite-role{
    font-family:var(--mono);font-size:11px;letter-spacing:.11em;
    text-transform:uppercase;color:var(--pencil)
  }