:root{
    --green:#2B4A45; --green-deep:#1F3833; --green-line:rgba(246,246,233,.18);
    --bone:#F3EFE3; --cream:#F6F6E9; --ink:#14120F; --ink-soft:#4A4A44;
    --gold:#EBAC66; --gold-ink:#8C4A17; --rule:rgba(43,74,69,.16);
    --brand:"29LT Burka Semi Wide","Burka",Figtree,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
    --pad:1.125rem;
  }
  *,*::before,*::after{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
  body{margin:0;background:var(--bone);color:var(--ink);font-family:var(--brand);
    font-size:1rem;line-height:1.5;-webkit-font-smoothing:antialiased;
    overflow-wrap:break-word}
  img{max-width:100%;height:auto;display:block}
  .shell{max-width:70rem;margin:0 auto;padding:0 var(--pad)}

  /* ---------- nav ---------- */
  .topbar{position:sticky;top:0;z-index:50;background:var(--green-deep);
    border-bottom:1px solid var(--green-line)}
  .topbar .shell{display:flex;align-items:center;justify-content:space-between;
    gap:.75rem;min-height:3.5rem}
  .brandmark{width:7.25rem}
  .nav{display:none;gap:1.75rem;align-items:center}
  .nav a{color:rgba(246,246,233,.82);text-decoration:none;font-size:.875rem;font-weight:500}
  .nav a:hover{color:var(--gold)}
  .btn{display:inline-block;text-decoration:none;font-weight:700;font-size:.875rem;
    padding:.6rem .9rem;white-space:nowrap;border:2px solid transparent;line-height:1.2}
  .btn-gold{background:var(--gold);color:var(--green-deep);border-color:var(--gold)}
  .btn-gold:hover{background:#F2BB80;border-color:#F2BB80}
  .btn-outline{background:transparent;color:var(--cream);border-color:var(--green-line)}
  .btn-outline:hover{border-color:var(--gold);color:var(--gold)}
  a:focus-visible,.btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

  /* ---------- type ---------- */
  h1{font-size:clamp(2rem,7.4vw,3.75rem);line-height:1.02;letter-spacing:-.035em;
    font-weight:900;margin:0}
  h2{font-size:clamp(1.5rem,5.2vw,2.375rem);line-height:1.1;letter-spacing:-.028em;
    font-weight:800;margin:0 0 .75rem;max-width:20ch}
  h3{font-size:1.0625rem;line-height:1.25;font-weight:700;margin:0;letter-spacing:-.01em}
  p{margin:0 0 .8rem;max-width:62ch}
  p:last-child{margin-bottom:0}
  .kicker{font-size:.6875rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
    color:var(--gold);margin:0 0 .6rem}
  .kicker-dark{color:var(--gold-ink)}
  .lead{font-size:clamp(1rem,2.6vw,1.1875rem);line-height:1.4;max-width:38ch;font-weight:400}

  /* ---------- hero ---------- */
  .hero{background:var(--green);color:var(--cream);padding:2.5rem 0 2.75rem}
  .hero .lead{color:rgba(246,246,233,.84);margin-top:.9rem}
  .cta-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem}
  .hero-grid{display:grid;gap:1.75rem;align-items:start}
  .card-spec{background:var(--green-deep);border:1px solid var(--green-line);padding:1.15rem 1.25rem}
  .card-spec h3{color:var(--gold);font-size:.6875rem;letter-spacing:.15em;text-transform:uppercase;
    font-weight:800;margin-bottom:.85rem}
  .card-spec dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.6rem 1rem;align-items:baseline}
  .card-spec dt{color:var(--gold);font-weight:800;font-variant-numeric:tabular-nums;
    font-size:.9375rem;white-space:nowrap}
  .card-spec dd{margin:0;color:rgba(246,246,233,.82);font-size:.875rem;line-height:1.35}

  /* ---------- sections ---------- */
  section{padding:2.75rem 0}
  .sec-light{background:var(--bone)}
  .sec-dark{background:var(--green);color:var(--cream)}
  .sec-dark p{color:rgba(246,246,233,.85)}
  .sec-deep{background:var(--green-deep);color:var(--cream)}
  .sec-deep p{color:rgba(246,246,233,.85)}
  .head{max-width:44rem;margin-bottom:1.5rem}
  .sec-light .head p{color:var(--ink-soft)}
  .sec-light h2,.sec-light h3{color:var(--green)}

  /* ---------- problem ---------- */
  .probs{display:grid;gap:0;border-top:2px solid var(--green)}
  .prob{padding:.95rem 0;border-bottom:1px solid var(--rule)}
  .prob h3{margin-bottom:.2rem}
  .prob p{color:var(--ink-soft);margin:0;font-size:.9375rem}

  /* ---------- services ---------- */
  .cards{display:grid;gap:.6rem}
  .card{background:var(--cream);border:1px solid var(--rule);padding:1rem 1.1rem}
  .card-hd{display:flex;align-items:center;gap:.65rem;margin-bottom:.35rem}
  .card .ico{color:var(--gold-ink);flex:0 0 auto;line-height:0}
  .card p{color:var(--ink-soft);margin:0;font-size:.9375rem;line-height:1.4}

  /* ---------- faq ---------- */
  .faq{display:grid;gap:0;border-top:1px solid var(--rule)}
  .qa{padding:.9rem 0;border-bottom:1px solid var(--rule)}
  .qa h3{color:var(--green);margin-bottom:.25rem;font-size:1rem}
  .qa p{color:var(--ink-soft);margin:0;font-size:.9375rem;line-height:1.45}

  /* ---------- steps ---------- */
  .stepper{display:grid;gap:.5rem}
  .stp{display:grid;grid-template-columns:2.25rem 1fr;gap:.85rem;align-items:start;
    border-top:1px solid var(--green-line);padding-top:.75rem}
  .stp:first-child{border-top:2px solid var(--gold)}
  .stp .n{font-size:1.25rem;font-weight:900;color:var(--gold);line-height:1.15;
    font-variant-numeric:tabular-nums;grid-column:1;grid-row:1/span 2}
  .stp h3{grid-column:2;grid-row:1}
  .stp p{grid-column:2;grid-row:2}
  .stp p{font-size:.875rem;margin:.15rem 0 0;line-height:1.4}

  /* ---------- price ---------- */
  .pricewrap{display:grid;gap:1.75rem;align-items:start}
  .pricebox{background:var(--green-deep);border:1px solid var(--green-line);padding:1.35rem 1.4rem}
  .price{font-size:clamp(2.75rem,11vw,4.25rem);line-height:.95;font-weight:900;color:var(--gold);
    letter-spacing:-.04em;font-variant-numeric:tabular-nums;margin:0}
  .price .was{display:block;font-size:.42em;font-weight:800;letter-spacing:-.01em;
    color:rgba(246,246,233,.55);text-decoration:line-through;text-decoration-thickness:2px;
    margin-bottom:.1rem}
  .pricebox .sub{color:rgba(246,246,233,.8);margin:.5rem 0 1rem;font-size:.9375rem}
  .checks{list-style:none;margin:0 0 1.1rem;padding:0}
  .checks li{padding:.5rem 0;border-bottom:1px solid var(--green-line);
    color:rgba(246,246,233,.9);font-size:.875rem;display:flex;gap:.6rem;line-height:1.35}
  .checks li::before{content:"\2014";color:var(--gold);font-weight:700;flex:0 0 auto}

  /* ---------- cases ---------- */
  .notice{border:1px dashed var(--gold);color:var(--gold);padding:.6rem .8rem;
    font-size:.75rem;font-weight:700;margin:0 0 1.25rem;max-width:none;line-height:1.35}
  .cases{display:grid;gap:.6rem}
  .casecard{background:rgba(246,246,233,.05);border:1px solid var(--green-line);padding:1.1rem 1.25rem}
  .casecard .who{font-size:.625rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
    color:var(--gold);margin:0 0 .5rem}
  .casecard .stat{font-size:clamp(1.75rem,6vw,2.25rem);line-height:1;font-weight:900;color:var(--cream);
    letter-spacing:-.035em;font-variant-numeric:tabular-nums;margin:0 0 .15rem}
  .casecard h3{color:var(--cream);margin-bottom:.4rem}
  .casecard .stat2{font-size:1rem;font-weight:800;color:var(--gold);letter-spacing:-.01em;
    font-variant-numeric:tabular-nums;margin:0 0 .6rem}
  .casecard p{font-size:.875rem;margin:0;line-height:1.4}

  /* ---------- cta ---------- */
  .ctaband{background:var(--gold);color:var(--green-deep);padding:2.5rem 0}
  .ctaband h2{color:var(--green-deep);max-width:22ch}
  .ctaband p{color:rgba(31,56,51,.85);max-width:52ch;font-size:.9375rem}
  .mail{display:inline-block;margin-top:1rem;font-size:clamp(1.0625rem,4.6vw,1.75rem);
    font-weight:800;color:var(--green-deep);text-decoration:none;
    border-bottom:3px solid rgba(31,56,51,.35);letter-spacing:-.02em;
    overflow-wrap:anywhere}
  .mail:hover{border-bottom-color:var(--green-deep)}

  footer{background:var(--green-deep);color:rgba(246,246,233,.7);padding:1.25rem 0;
    font-size:.8125rem;line-height:1.5}
  footer a{color:rgba(246,246,233,.7)}

  /* ---------- responsive ---------- */
  @media (min-width:30rem){
    :root{--pad:1.5rem}
    .cards{grid-template-columns:repeat(2,1fr)}
    .cases{grid-template-columns:repeat(2,1fr)}
  }
  @media (min-width:48rem){
    :root{--pad:2rem}
    body{font-size:1.0625rem}
    .nav{display:flex}
    .topbar .shell{min-height:4rem}
    .brandmark{width:8.5rem}
    .hero{padding:4rem 0 4rem}
    section{padding:4rem 0}
    .hero-grid{grid-template-columns:1.4fr .85fr;gap:2.5rem}
    .head{margin-bottom:2rem}
    .cards{grid-template-columns:repeat(3,1fr);gap:.85rem}
    .stepper{grid-template-columns:repeat(5,1fr);gap:1.25rem}
    .stp{display:block;border-top:2px solid var(--gold);padding-top:.85rem}
    .stp .n{display:block;margin-bottom:.35rem;font-size:1.75rem}
    .pricewrap{grid-template-columns:1fr .9fr;gap:3rem}
    .cases{grid-template-columns:repeat(3,1fr);gap:.85rem}
    .faq{grid-template-columns:repeat(2,1fr);column-gap:3rem}
    .probs{grid-template-columns:repeat(3,1fr);column-gap:2.25rem}
    .prob{border-bottom:0}
    .ctaband{padding:3.5rem 0}
  }
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

  /* ---------- site nav (multi-page) ---------- */
  .vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .brandlink{display:block;line-height:0;flex:0 0 auto}
  .topbar .shell{gap:.5rem}
  .topbar .brandmark{width:7.75rem}
  .topbar .shell{flex-wrap:wrap}
  .nav a[aria-current="page"]{color:var(--gold)}
  .navcta{order:2;font-size:.8125rem;padding:.55rem .7rem;margin-left:auto}

  .navtoggle{order:3;display:inline-flex;align-items:center;justify-content:center;
    width:2.5rem;height:2.375rem;flex:0 0 auto;background:transparent;
    border:1px solid var(--green-line);cursor:pointer;padding:0}
  .navtoggle .bars{position:relative;display:block;width:18px;height:2px;background:var(--cream)}
  .navtoggle .bars::before,.navtoggle .bars::after{content:"";position:absolute;left:0;
    width:18px;height:2px;background:var(--cream)}
  .navtoggle .bars::before{top:-6px}
  .navtoggle .bars::after{top:6px}
  .navtoggle:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

  .nav{order:4;flex-basis:100%}
  .nav.open{display:flex;flex-direction:column;align-items:flex-start;gap:0;
    padding:.5rem 0 .85rem;border-top:1px solid var(--green-line);margin-top:.65rem}
  .nav.open a{padding:.6rem 0;font-size:1rem;width:100%}

  @media (min-width:48rem){
    .navtoggle{display:none}
    .topbar .brandmark{width:10.5rem}
    .navcta{font-size:.875rem;padding:.6rem .9rem;margin-left:0}
    .topbar .shell{gap:1rem}
    .nav{order:0;flex-basis:auto;display:flex;margin-top:0;padding:0;border-top:0}
    .navcta{order:0}
    .topbar .shell{flex-wrap:nowrap}
  }

  /* ---------- cross-page links ---------- */
  .morelink{display:inline-block;margin-top:1.5rem;font-weight:700;font-size:.9375rem;
    color:var(--gold-ink);text-decoration:none;
    border-bottom:2px solid rgba(140,74,23,.35)}
  .morelink:hover{border-bottom-color:var(--gold-ink)}
  .sec-dark .morelink,.sec-deep .morelink{color:var(--gold);border-bottom-color:rgba(235,172,102,.4)}
  .sec-dark .morelink:hover,.sec-deep .morelink:hover{border-bottom-color:var(--gold)}
  .pagehead{padding:2.5rem 0 0}
  .pagehead .kicker{margin-bottom:.5rem}

  /* ---------- logo placements ---------- */
  .heromark{width:5rem;height:auto;margin:0 0 1rem}
  .logoband{background:var(--green);padding:2.5rem 0 2.25rem}
  .logoband .shell{display:flex;justify-content:center}
  .fulllogo{width:100%;max-width:15rem;height:auto}
  @media (min-width:48rem){
    .heromark{width:6.5rem;margin-bottom:1.25rem}
    .logoband{padding:3.5rem 0 3rem}
    .fulllogo{max-width:20rem}
  }

  /* ---------- build pricing tiers (uses the existing .card component) ---------- */
  .tierprice{font-size:1.5rem;line-height:1.1;font-weight:900;color:var(--green);
    letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin:0 0 .2rem}
  .tiers .card h3{margin-bottom:.35rem}
  .tierlist{list-style:none;margin:.9rem 0 0;padding:0}
  .tierlist li{padding:.45rem 0;border-top:1px solid var(--rule);
    font-size:.875rem;line-height:1.35;color:var(--ink-soft)}
  .tiernote{color:var(--ink-soft);margin-top:1.5rem}
  .tiers{grid-template-columns:1fr}
  @media (min-width:48rem){ .tiers{grid-template-columns:repeat(3,1fr)} }

/* =====================================================================
   VISUAL REFRESH — rule lists, left-column headers, alternating bone,
   Georgia stat + pull-quote registers, wider rhythm.
   ===================================================================== */

  :root{
    --bone:#F4EFE6;
    --bone-recessed:#EBE4D7;
    --hairline:#D8CFBE;
    --quote:#6B2226;
    --serif:Georgia,"Times New Roman",Times,serif;
  }

  html{scroll-behavior:auto}
  body{background:var(--bone);line-height:1.65}

  /* --- 3. alternating surfaces (green and gold bands are left alone) --- */
  .sec-light{background:var(--bone)}
  .sec-light:nth-of-type(even){background:var(--bone-recessed)}

  /* --- 5. measure and rhythm --- */
  section{padding:112px 0}
  p{max-width:34em}
  .head{margin-bottom:0}

  /* --- 2. section headers in a narrow left column --- */
  @media (min-width:48rem){
    section .shell:has(> .head){
      display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);
      column-gap:64px;align-items:start}
    section .shell:has(> .head) > .head{grid-column:1;max-width:none}
    section .shell:has(> .head) > .head ~ *{grid-column:2}
  }

  /* --- 1. rule lists replace the card grids --- */
  .rulelist{display:block}
  .rl{display:grid;grid-template-columns:240px minmax(0,1fr);column-gap:32px;
    padding:28px 0;border-top:1px solid var(--hairline)}
  .rl h3{margin:0}
  .rl p{margin:0;max-width:34em;font-size:1rem;line-height:1.65;color:var(--ink-soft)}
  .sec-dark .rl,.sec-deep .rl{border-top-color:rgba(246,246,233,.22)}
  .sec-dark .rl p,.sec-deep .rl p{color:rgba(246,246,233,.85)}

  /* --- 4a. stats and dollar figures set in the serif --- */
  .price,.price .was,.card p.tierprice,.tierprice,.card-spec dt{
    font-family:var(--serif);font-weight:700;letter-spacing:0}
  .card p.tierprice{font-size:40px;line-height:1.05;margin:0 0 6px}
  .card-spec dl{grid-template-columns:1fr;gap:20px}
  .card-spec dt{font-size:40px;line-height:1;margin-bottom:2px}
  .card-spec dd{font-size:.9375rem;line-height:1.5}

  /* --- 4b. pull quote --- */
  p.pullquote,.ctaband p.pullquote,.sec-light p.pullquote{
    font-family:var(--serif);font-style:italic;font-size:26px;line-height:1.4;
    color:var(--quote);margin:48px 0;max-width:30em;border:0}

  @media (max-width:47.99rem){
    section{padding:72px 0}
    .rl{grid-template-columns:1fr;row-gap:6px}
    .card p.tierprice,.card-spec dt{font-size:30px}
    p.pullquote,.ctaband p.pullquote,.sec-light p.pullquote{font-size:21px}
  }

  /* grid promotes inline-block children to block; keep link underlines on the text */
  .morelink{justify-self:start;width:max-content;max-width:100%}

  /* --- example project cards: label, headline stat, secondary figure --- */
  .casecard .who{font-size:.625rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
    color:var(--gold);margin:0 0 12px;line-height:1.5}
  .casecard .stat{font-family:var(--serif);font-weight:700;letter-spacing:0;font-size:40px;
    line-height:1;color:var(--cream);margin:0 0 4px}
  .casecard .stat2{font-family:var(--serif);font-weight:700;letter-spacing:0;font-size:20px;
    line-height:1.2;color:var(--gold);margin:0 0 14px}
  @media (max-width:47.99rem){
    .casecard .stat{font-size:30px}
  }

  /* Sections whose content is a full-width card row keep the header stacked
     above it — a three-across row has no room beside a label column. */
  @media (min-width:48rem){
    section .shell:has(> .head):has(.cases),
    section .shell:has(> .head):has(.tiers),
    section .shell:has(> .head):has(.capgrid),
    section .shell:has(> .head):has(.stepper){display:block}
    section .shell:has(> .head):has(.cases) > .head,
    section .shell:has(> .head):has(.tiers) > .head,
    section .shell:has(> .head):has(.capgrid) > .head,
    section .shell:has(> .head):has(.stepper) > .head{margin-bottom:32px;max-width:44rem}
  }


/* =====================================================================
   COPPER — accent shrinks to small marks; the contact band becomes
   deep green instead of a full-width warm field.
   ===================================================================== */

  .ctaband{background:var(--green-deep);color:var(--cream)}
  .ctaband h2{color:var(--cream)}
  .ctaband p{color:rgba(246,246,233,.85)}
  .ctaband .mail{color:var(--gold);border-bottom-color:rgba(235,172,102,.45)}
  .ctaband .mail:hover{border-bottom-color:var(--gold)}
  /* the quote voice needs a light tint on a dark ground */
  .ctaband p.pullquote{color:#E5B4B0}

  /* --- touch targets: 44px minimum, and full width on narrow phones --- */
  .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .cta-row{gap:10px}
  @media (max-width:26rem){
    .cta-row{flex-direction:column;align-items:stretch}
    .cta-row .btn{width:100%}
  }
  .navcta{min-height:40px}

  /* --- anchor targets must clear the sticky header --- */
  html{scroll-padding-top:76px}

  /* --- sub-page h1s carry the section-heading look --- */
  .head h1{font-size:clamp(1.5rem,5.2vw,2.375rem);line-height:1.1;letter-spacing:-.028em;
    font-weight:800;margin:0 0 .75rem;max-width:20ch}
  .sec-light .head h1{color:var(--green)}
  .sec-dark .head h1,.sec-deep .head h1{color:var(--cream)}
  h1.kicker{font-size:.6875rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
    margin:0 0 .6rem;max-width:none;line-height:1.5}

/* =====================================================================
   TYPE SYSTEM — one scale for the whole site. Everything above that set
   a size ad hoc is normalised here.
   ===================================================================== */

  :root{
    --fs-hero:clamp(32px,6.6vw,54px);
    --fs-h2:clamp(25px,4.4vw,36px);
    --fs-h3:17px;
    --fs-body:17px;
    --fs-small:15px;
    --fs-micro:12px;
    --fs-stat:clamp(30px,5.2vw,40px);
    --fs-stat-2:18px;
    --fs-quote:clamp(21px,2.8vw,26px);
    --fs-display:clamp(40px,8vw,58px);
    --sp-section:80px;
    --sp-section-m:56px;
  }

  /* --- headings --- */
  body{font-size:var(--fs-body)}
  .hero h1{font-size:var(--fs-hero)}
  h1,h2{font-size:var(--fs-h2);line-height:1.12;letter-spacing:-.028em;font-weight:800}
  .hero h1{font-size:var(--fs-hero);line-height:1.04;letter-spacing:-.035em;font-weight:900}
  h3,.rl h3,.qa h3,.card h3,.casecard h3,.stp h3{font-size:var(--fs-h3);line-height:1.3;
    font-weight:700;letter-spacing:-.01em}

  /* --- body copy --- */
  p,li,dd{font-size:var(--fs-body)}
  .rl p,.card p,.casecard p,.qa p,.stp p,.tiernote,.checks li,.tierlist li,
  .card-spec dd,.ctaband p,.lead{font-size:var(--fs-small)}
  .lead{font-size:clamp(17px,2.2vw,19px)}

  /* --- labels --- */
  .kicker,h1.kicker,.card-spec h3,.casecard .who,.capt{font-size:var(--fs-micro);
    letter-spacing:.14em;font-weight:800;text-transform:uppercase;line-height:1.5}

  /* --- numerals --- */
  .price{font-size:var(--fs-display)}
  .card p.tierprice,.card-spec dt,.casecard .stat{font-size:var(--fs-stat)}
  .casecard .stat2{font-size:var(--fs-stat-2)}
  .stp .n{font-size:22px}
  p.pullquote,.ctaband p.pullquote,.sec-light p.pullquote{font-size:var(--fs-quote)}

  /* --- buttons and links --- */
  .btn,.nav a,.morelink{font-size:var(--fs-small)}

  /* =====================================================================
     SPACING — tighter between and within sections
     ===================================================================== */
  section,.logoband{padding:var(--sp-section) 0}
  .head{margin-bottom:28px}
  .rl{padding:22px 0}
  .cta-row{margin-top:22px}
  .cards,.cases,.tiers{gap:14px}
  .stepper{gap:10px}
  .faq{gap:0}
  .qa{padding:16px 0}
  p{margin-bottom:14px}
  .pullquote{margin:36px 0}
  .tiernote{margin-top:24px}

  /* the contact sign-off mark */
  .signoff{width:52px;height:auto;margin:0 0 18px;opacity:.9}

  /* an outline button that works on the light surfaces */
  .sec-light .btn-outline{color:var(--green);border-color:rgba(43,74,69,.35)}
  .sec-light .btn-outline:hover{border-color:var(--green);background:var(--green);color:var(--cream)}

  @media (max-width:47.99rem){
    section,.logoband{padding:var(--sp-section-m) 0}
    .head{margin-bottom:22px}
    .rl{padding:18px 0}
    .pullquote{margin:28px 0}
    .signoff{width:44px}
  }

  /* new lockup is 3.09:1 (was 4:1) — resize so bar height stays put */
  .topbar .brandmark{width:7rem}
  @media (min-width:48rem){ .topbar .brandmark{width:9.5rem} }

  /* h1 outside the hero needs the same breathing room as h2 */
  h1{margin:0 0 12px}
  .hero h1{margin:0}

  /* .sec-deep p / .sec-dark p were outranking the price colour */
  p.price,.sec-deep p.price,.sec-dark p.price{color:var(--gold)}
  p.price .was{color:rgba(246,246,233,.5)}
  .sec-deep p.sub,.sec-dark p.sub{color:rgba(246,246,233,.8)}

/* =====================================================================
   TIGHTEN — sections were still too airy; footer cut back sharply.
   ===================================================================== */
  :root{--sp-section:56px;--sp-section-m:40px}
  section,.logoband{padding:var(--sp-section) 0}
  .head{margin-bottom:22px}
  .rl{padding:18px 0}
  .cta-row{margin-top:18px}
  .hero{padding:44px 0 48px}
  .pullquote{margin:28px 0}
  .tiernote{margin-top:20px}
  .qa{padding:14px 0}

  /* footer ~70% shorter */
  footer{padding:7px 0;font-size:11.5px;line-height:1.5}

  /* the contact quote reads better in cream than the rose */
  .ctaband p.pullquote{color:rgba(246,246,233,.92)}

  @media (max-width:47.99rem){
    section,.logoband{padding:var(--sp-section-m) 0}
    .hero{padding:32px 0 36px}
    .head{margin-bottom:18px}
    .rl{padding:15px 0}
    .pullquote{margin:22px 0}
    footer{padding:6px 0;font-size:11px}
  }

  /* footer: down to roughly a third of its old height */
  footer{padding:3px 0;font-size:11px;line-height:1.35}
  @media (max-width:47.99rem){ footer{padding:3px 0;font-size:10.5px} }

  /* a section that is only a heading should not sit in a third-width column */
  @media (min-width:48rem){
    section .shell:has(> .head):not(:has(.head ~ *)){display:block}
    section .shell:has(> .head):not(:has(.head ~ *)) > .head{max-width:36rem;margin-bottom:0}
    section .shell:has(> .head):not(:has(.head ~ *)) h2{max-width:none}
  }

  /* a pull quote on the dark surfaces needs the light tone, not the maroon */
  .sec-deep p.pullquote,.sec-dark p.pullquote{color:rgba(246,246,233,.92)}

/* =====================================================================
   WEIGHT — headings were 900/800 and read as shouting. One step down.
   ===================================================================== */
  .hero h1{font-weight:700}
  h1,h2,.head h1{font-weight:700}
  h3,.rl h3,.qa h3,.card h3,.casecard h3,.stp h3{font-weight:600}
  .kicker,h1.kicker,.card-spec h3,.casecard .who{font-weight:700}
  .stp .n{font-weight:700}
  .btn{font-weight:600}
  .morelink{font-weight:600}
  .price,.card p.tierprice,.card-spec dt,.casecard .stat,.casecard .stat2{font-weight:700}

/* =====================================================================
   CONTACT BAND — was 509px of sign-off. Compressed to a closing note.
   ===================================================================== */
  .ctaband{padding:30px 0}
  .ctaband .signoff{width:30px;margin:0 0 10px}
  .ctaband h2{font-size:clamp(20px,2.6vw,26px);line-height:1.15;margin:0 0 8px;max-width:26ch}
  .ctaband p{font-size:15px;line-height:1.5;margin:0 0 10px;max-width:52ch}
  .ctaband p.pullquote{font-size:17px;line-height:1.4;margin:10px 0 0;max-width:44ch}
  .ctaband .mail{font-size:clamp(16px,2.2vw,20px);margin-top:14px;border-bottom-width:2px}
  @media (max-width:47.99rem){
    .ctaband{padding:24px 0}
    .ctaband .signoff{width:26px;margin-bottom:8px}
    .ctaband h2{font-size:20px}
    .ctaband p.pullquote{font-size:16px}
    .ctaband .mail{font-size:16px;margin-top:12px}
  }

/* =====================================================================
   LIGHT SITE — everything between the header and the contact band sits
   on one bone tone. Header, contact band and footer keep their green.
   ===================================================================== */

  /* surfaces: one tone, no recessed variant */
  .hero,.sec-light,.sec-dark,.sec-deep{background:var(--bone);color:var(--ink)}
  .sec-light:nth-of-type(even){background:var(--bone)}

  /* type on the reclaimed sections */
  .hero h1,.sec-dark h1,.sec-deep h1,.sec-dark h2,.sec-deep h2,
  .sec-dark h3,.sec-deep h3{color:var(--green)}
  .hero .lead,.sec-dark p,.sec-deep p{color:var(--ink-soft)}
  .hero .kicker,.sec-dark .kicker,.sec-deep .kicker{color:var(--gold-ink)}
  .sec-dark .rl,.sec-deep .rl{border-top-color:var(--hairline)}
  .sec-dark .rl p,.sec-deep .rl p{color:var(--ink-soft)}
  .sec-deep p.pullquote,.sec-dark p.pullquote{color:var(--quote)}
  .sec-dark .morelink,.sec-deep .morelink{color:var(--gold-ink);
    border-bottom-color:rgba(140,74,23,.35)}

  /* cards lift off the page in cream, an existing tone */
  .card-spec,.casecard,.pricebox{background:var(--cream);border:1px solid var(--rule)}
  .card-spec h3,.casecard .who{color:var(--gold-ink)}
  .card-spec dt,.casecard .stat{color:var(--green)}
  .card-spec dd,.casecard p{color:var(--ink-soft)}
  .casecard .stat2{color:var(--gold-ink)}

  /* the price block */
  p.price,.sec-deep p.price,.sec-dark p.price{color:var(--gold-ink)}
  p.price .was{color:rgba(20,18,15,.42)}
  .pricebox .sub,.sec-deep p.sub,.sec-dark p.sub{color:var(--ink-soft)}
  .checks li{border-bottom-color:var(--rule);color:var(--ink-soft)}
  .checks li::before{color:var(--gold-ink)}

  /* the five steps */
  .stp{border-top-color:var(--rule)}
  .stp:first-child{border-top-color:var(--gold-ink)}
  .stp .n{color:var(--gold-ink)}
  .stp h3{color:var(--green)}
  .stp p{color:var(--ink-soft)}

  /* outline button needs dark ink on a light ground */
  .btn-outline,.hero .btn-outline,.sec-dark .btn-outline,.sec-deep .btn-outline{
    color:var(--green);border-color:rgba(43,74,69,.35);background:transparent}
  .btn-outline:hover{background:var(--green);color:var(--cream);border-color:var(--green)}

  /* focus ring must be visible on bone */
  a:focus-visible,.btn:focus-visible{outline-color:var(--green)}
  .topbar a:focus-visible,.navtoggle:focus-visible{outline-color:var(--gold)}

/* =====================================================================
   FOOTER — a real one: copyright left, links right, single hairline.
   ===================================================================== */
  footer{background:var(--green-deep);color:rgba(246,246,233,.72);
    padding:14px 0;font-size:12.5px;line-height:1.5;border-top:0}
  .footrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
    gap:6px 20px}
  .fcopy{white-space:nowrap}
  .fnav{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
  footer a{color:rgba(246,246,233,.72);text-decoration:none}
  footer a:hover{color:var(--gold);text-decoration:underline;text-underline-offset:.2em}
  @media (max-width:47.99rem){
    footer{padding:12px 0;font-size:12px}
    .footrow{flex-direction:column;align-items:flex-start;gap:8px}
    .fnav{gap:6px 14px}
  }

  /* pull quote: maroon out, brand copper in */
  p.pullquote,.ctaband p.pullquote,.sec-light p.pullquote,
  .sec-deep p.pullquote,.sec-dark p.pullquote{color:var(--gold-ink)}
  .ctaband p.pullquote{color:rgba(246,246,233,.92)}
  .card p.tierprice{color:var(--green)}

  /* hero panel explains the service; these are labels, not statistics */
  .card-spec dt{font-family:var(--brand);font-size:19px;font-weight:700;line-height:1.3;
    color:var(--green);letter-spacing:-.01em;margin-bottom:2px}
  .card-spec dl{gap:16px}
  .card-spec dd{font-size:15px;line-height:1.5;color:var(--ink-soft)}
  @media (max-width:47.99rem){ .card-spec dt{font-size:18px} }

  /* headings promoted for document outline keep their visual size */
  .qa h2,.rl h2{font-size:var(--fs-h3);line-height:1.3;font-weight:600;letter-spacing:-.01em;
    margin:0;max-width:none}
  .qa h2{color:var(--green);margin-bottom:.25rem}
  .rl h2{color:var(--green)}
  .speclabel{font-size:var(--fs-micro);letter-spacing:.14em;font-weight:700;
    text-transform:uppercase;color:var(--gold-ink);margin:0 0 12px;max-width:none}

  /* credibility line under the hero buttons */
  .trustline{margin-top:20px;font-size:var(--fs-small);line-height:1.5;
    color:var(--ink-soft);max-width:46ch;border-top:1px solid var(--hairline);padding-top:16px}

  /* ==== capability pages ================================================ */
  .io{display:grid;gap:1.75rem;margin:1.5rem 0 0}
  .iocol h2{font-size:var(--fs-micro);font-weight:700;letter-spacing:.15em;
    text-transform:uppercase;color:var(--gold-ink);margin:0 0 .2rem}
  .iocol p.iosub{font-size:var(--fs-small);color:var(--ink-soft);margin:0 0 .7rem}
  .iolist{list-style:none;margin:0;padding:0}
  .iolist li{padding:.55rem 0;border-bottom:1px solid var(--rule);font-size:var(--fs-small)}
  .iolist li:last-child{border-bottom:0}
  .capgrid{display:grid;gap:.6rem;margin-top:.75rem}
  .grouphead{margin:2rem 0 0;font-size:var(--fs-micro);font-weight:700;
    letter-spacing:.15em;text-transform:uppercase;color:var(--gold-ink)}
  .grouphead:first-of-type{margin-top:0}
  .capcard{background:var(--bone-recessed);border:1px solid var(--hairline)}
  .capcard a{display:flex;flex-direction:column;height:100%;padding:1.4rem;
    color:inherit;text-decoration:none}
  .capcard h2,.capcard h3{margin:.3rem 0 .4rem;font-size:1.0625rem;line-height:1.25}
  .capcard p{margin:0;font-size:var(--fs-small);color:var(--ink-soft)}
  .capcard .who{font-size:var(--fs-micro);font-weight:700;letter-spacing:.13em;
    text-transform:uppercase;color:var(--gold-ink);margin:0}
  /* the affordance: every card ends in a link that looks like one */
  .capmore{margin-top:auto !important;padding-top:1rem;font-weight:700;
    font-size:.9375rem;color:var(--gold-ink) !important}
  .capmore span{border-bottom:2px solid rgba(140,74,23,.35);padding-bottom:2px}
  .capcard:hover{border-color:var(--gold-ink);background:var(--cream)}
  .capcard:hover h2,.capcard:hover h3{color:var(--gold-ink)}
  .capcard:hover .capmore span{border-bottom-color:var(--gold-ink)}
  .capcard a:focus-visible{outline:2px solid var(--gold-ink);outline-offset:2px}
  .timing{font-size:var(--fs-small);color:var(--ink-soft);margin-top:1.2rem;
    padding-top:.9rem;border-top:1px solid var(--rule)}
  @media(min-width:760px){
    .io{grid-template-columns:1fr 1fr;gap:2.75rem}
    .capgrid{grid-template-columns:repeat(2,1fr);gap:.85rem}
    /* a lone card in its group should not sit in a half-width column */
    .capgrid:has(> .capcard:only-child){grid-template-columns:1fr}
  }

  /* ==== "start a conversation" dialog ==================================== */
  .modal[hidden]{display:none}
  .modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;
    justify-content:center;padding:1.25rem}
  .modal-backdrop{position:absolute;inset:0;background:rgba(20,18,15,.66)}
  .modal-panel{position:relative;width:100%;max-width:26rem;background:var(--bone);
    border:1px solid var(--hairline);padding:2rem 1.75rem 1.75rem}
  .modal-panel h2{margin:0 0 .5rem;font-size:1.375rem;line-height:1.2}
  .modal-panel p{margin:0 0 1.25rem;font-size:var(--fs-small);color:var(--ink-soft)}
  .modal-panel .btn{display:block;width:100%;text-align:center;margin-bottom:.6rem}
  .modal-panel .btn-plain{background:transparent;color:var(--green);
    border-color:rgba(43,74,69,.35)}
  .modal-panel .btn-plain:hover{background:var(--green);border-color:var(--green);
    color:var(--cream)}
  .modal-note{margin:1.1rem 0 0 !important;padding-top:.9rem;
    border-top:1px solid var(--rule);font-size:var(--fs-micro) !important}
  .modal-x{position:absolute;top:.35rem;right:.35rem;width:44px;height:44px;
    background:none;border:0;font-size:1.5rem;line-height:1;color:var(--ink-soft);
    cursor:pointer}
  .modal-x:hover{color:var(--ink)}
  .talkbtn{margin:0 0 1.1rem}
  .ctaband .talkbtn .btn{min-width:15rem}

  /* ---- phone in the contact band, a step below the email ---- */
  .ctatel{margin:.55rem 0 0 !important}
  .ctatel a{font-size:var(--fs-small);font-weight:700;letter-spacing:.02em;
    color:var(--gold);text-decoration:none;
    border-bottom:2px solid rgba(235,172,102,.4)}
  .ctatel a:hover{border-bottom-color:var(--gold)}

  /* ==== repositioning: hero note, case note, services projects, pricing examples ==== */
  .heronote{margin:.9rem 0 0;font-size:var(--fs-small);color:rgba(246,246,233,.78);max-width:46ch}
  .casenote{margin:1rem 0 0;font-size:var(--fs-micro);opacity:.75}
  .projects{display:grid}
  .project{padding:1.4rem 0;border-top:1px solid var(--rule)}
  .project:last-child{border-bottom:1px solid var(--rule)}
  .project h2{font-size:1.25rem;margin:0 0 .6rem}
  .projdl{margin:0;display:grid;gap:.35rem}
  .projdl dt{font-size:var(--fs-micro);font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-ink);margin-top:.45rem}
  .projdl dd{margin:0;font-size:var(--fs-small);color:var(--ink-soft);line-height:1.5}
  .projnote{margin:.8rem 0 0;font-size:var(--fs-small);color:var(--ink)}
  .card p.tierex{margin-top:.7rem;font-size:var(--fs-small)}
  .tierex em{display:block;margin-top:.25rem;font-style:normal;color:var(--ink-soft)}

  /* ==== project inquiry form ==== */
  .inquiry{display:grid;gap:1.1rem;max-width:44rem}
  .inquiry .field{display:grid;gap:.35rem;margin:0;border:0;padding:0;min-width:0}
  .inquiry label,.inquiry legend{font-weight:700;font-size:var(--fs-small);color:var(--ink)}
  .inquiry legend{margin-bottom:.35rem;padding:0}
  .inquiry .req{font-weight:400;color:var(--ink-soft);font-size:var(--fs-micro);margin-left:.35rem}
  .inquiry input[type=text],.inquiry input[type=email],.inquiry input[type=tel],.inquiry select,.inquiry textarea{
    width:100%;box-sizing:border-box;font:inherit;font-size:16px;color:var(--ink);background:#fff;
    border:1px solid var(--hairline);border-radius:0;padding:.7rem .8rem;min-height:44px}
  .inquiry textarea{resize:vertical;min-height:8rem}
  .inquiry input:focus,.inquiry select:focus,.inquiry textarea:focus{outline:2px solid var(--gold-ink);outline-offset:1px}
  .inquiry .choice{display:flex;gap:.6rem;align-items:center;font-weight:400;min-height:44px}
  .inquiry .choice input{width:20px;height:20px;margin:0}
  .fieldrow{display:grid;gap:1.1rem}
  .formerr{margin:0;padding:.75rem .9rem;border-left:3px solid #9B2C2C;background:#FBEFEF;color:#5B1A1A;font-size:var(--fs-small)}
  .formerr a{color:inherit}
  .formdone{max-width:44rem}
  .formdone:focus{outline:none}
  @media(min-width:640px){.fieldrow{grid-template-columns:1fr 1fr}}

  /* the contact band is dark: its secondary button needs light text */
  .ctaband .btn-outline{color:var(--cream);border-color:rgba(246,246,233,.45)}
  .ctaband .btn-outline:hover{color:var(--gold);border-color:var(--gold)}

  /* the hidden attribute must win over component display rules (the form uses display:grid) */
  [hidden]{display:none !important}

  /* ==== audit fixes, 11 September ==== */
  /* the hero is light now, so its note takes the same soft ink as the lead and trust line */
  .heronote{color:var(--ink-soft)}
  /* touch targets: header button and menu toggle at 44px */
  .navcta{min-height:44px}
  .navtoggle{min-width:44px;min-height:44px}
  /* footer links reach the 24px WCAG 2.2 minimum without making the footer noticeably taller */
  .fnav a{padding:3px 0}

/* =====================================================================
   DESKTOP LAYOUT — 11 September. The header column travels with long
   content, right-column rows size to their own content, reading pages get
   paragraph rhythm, and same-tone sections are separated by a hairline.
   ===================================================================== */

  /* in-text links take the brand copper instead of browser blue */
  :is(.sec-light,.sec-dark,.sec-deep) :is(p,dd,li):not(.formerr) a:not([class]){
    color:var(--gold-ink);text-decoration:underline;text-decoration-thickness:1px;
    text-underline-offset:.18em;text-decoration-color:rgba(140,74,23,.45)}
  :is(.sec-light,.sec-dark,.sec-deep) :is(p,dd,li):not(.formerr) a:not([class]):hover{
    text-decoration-color:var(--gold-ink)}

  /* a plain kicker on the light ground needs the dark copper to be legible */
  .sec-light .kicker{color:var(--gold-ink)}

  /* same-tone sections: a hairline at the content width marks where one ends */
  :is(.sec-light,.sec-dark,.sec-deep) + :is(.sec-light,.sec-dark,.sec-deep){padding-top:0}
  :is(.sec-light,.sec-dark,.sec-deep) + :is(.sec-light,.sec-dark,.sec-deep) > .shell{
    padding-top:var(--sp-section);
    background:linear-gradient(var(--hairline),var(--hairline)) no-repeat center top/calc(100% - 2 * var(--pad)) 1px}
  /* a heading-only section introduces the next one, so no line and no gap between them */
  section:has(> .shell > .head:only-child){padding-bottom:0}
  section:has(> .shell > .head:only-child) + section > .shell{background:none;padding-top:36px}
  @media (max-width:47.99rem){
    :is(.sec-light,.sec-dark,.sec-deep) + :is(.sec-light,.sec-dark,.sec-deep) > .shell{padding-top:var(--sp-section-m)}
    section:has(> .shell > .head:only-child) + section > .shell{padding-top:28px}
  }

  /* multi-paragraph answers, guides and the privacy policy: space between paragraphs */
  .qa p + p{margin-top:12px}
  #guide .qa,#privacy .qa{padding:24px 0}
  #guide .qa h2,#privacy .qa h2{font-size:19px;line-height:1.3;margin-bottom:10px}
  #guide .qa p,#privacy .qa p{font-size:16px;line-height:1.7}
  @media (min-width:48rem){
    #guide .qa,#privacy .qa{padding:30px 0}
    #guide .qa h2,#privacy .qa h2{font-size:21px}
  }

  /* capability page column labels are uppercase micro type; the h2 20ch cap wrapped them */
  .iocol h2{max-width:none}

  /* rule rows with a heading and no text should not reserve an empty text column */
  .rl:not(:has(> :nth-child(2))){grid-template-columns:minmax(0,1fr)}

  /* services: each project reads as label / answer rows once there is room */
  .project{padding:26px 0}
  .projnote{color:var(--green);font-weight:600}
  .timing .morelink{display:block;margin-top:10px}
  @media (min-width:40rem){
    .projdl{grid-template-columns:9.5rem minmax(0,1fr);column-gap:24px;row-gap:10px;align-items:baseline}
    .projdl dt{margin-top:0}
    .projdl dd{max-width:60ch}
    .projnote{margin-top:14px;padding-left:calc(9.5rem + 24px)}
  }

  @media (min-width:48rem){
    /* heading-only rule rows sit two across */
    .rulelist:not(:has(.rl > :nth-child(2))){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
    /* a single example card should not sit in a third-width slot */
    .cases:has(> .casecard:only-child){grid-template-columns:minmax(0,28rem)}
    .rulelist + .cases{margin-top:28px}
    /* the FAQ page: header above, two columns of answers with a real gutter */
    .faq{column-gap:48px}
    section .shell:has(> .head):has(.faq){display:block}
    section .shell:has(> .head):has(.faq) > .head{margin-bottom:32px;max-width:44rem}
  }

  /* phones and tablets: the contact actions sit a step below the message */
  @media (max-width:63.99rem){ .ctaact{margin-top:18px} }

  /* tablets: a one-third header column is too narrow, so headers stack above content */
  @media (min-width:48rem) and (max-width:63.99rem){
    section .shell:has(> .head){display:block}
    section .shell:has(> .head) > .head{max-width:44rem;margin-bottom:28px}
  }

  @media (min-width:64rem){
    /* the header spans every row, so the right column's rows size to their own content */
    section .shell:has(> .head) > .head{grid-row:1 / span 40}
    /* rule-row labels scale with the content column instead of a fixed 240px */
    .rl{grid-template-columns:minmax(0,34%) minmax(0,1fr)}
    /* one example card goes back into the content column beside the header */
    section .shell:has(> .head):has(.cases > .casecard:only-child){display:grid}
    section .shell:has(> .head):has(.cases > .casecard:only-child) > .head{margin-bottom:0;max-width:none}
    /* contact band: the message on the left, the ways to reach us on the right */
    .ctaband .shell{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:64px;align-items:end}
  }

  /* beside long content, the header column stays in view where the screen is tall enough.
     Limited to the long sections: capability page intros have headers taller than a laptop screen. */
  @media (min-width:64rem) and (min-height:40rem){
    :is(#build,#stack,#ai,#agencies,#start,#guide,#privacy,#about,#questions,#improvements,#upkeep) > .shell:has(> .head) > .head{
      position:sticky;top:97px}
  }

/* =====================================================================
   MILLHQ — the /millhq product page. Built on the site's own tokens and
   components: two green bands (hero, waitlist), everything else on bone.
   ===================================================================== */

  /* green bands */
  .mhq-band{background:var(--green);color:var(--cream)}
  .mhq-band h1,.mhq-band h2,.mhq-band h3{color:var(--cream)}
  .mhq-band p:not(.formerr){color:rgba(246,246,233,.86)}
  .mhq-band .kicker{color:var(--gold)}
  .mhq-band p:not(.formerr) a:not([class]){color:var(--gold)}
  .mhq-band .btn:focus-visible,.mhq-band a:focus-visible{outline-color:var(--gold)}

  /* hero */
  .mhq-hero{padding:44px 0 48px;text-align:center}
  .mhq-hero .shell{display:flex;flex-direction:column;align-items:center}
  .mhq-logo{width:140px;height:auto;margin:4px 0 20px}
  .mhq-hero h1{font-size:var(--fs-hero);line-height:1.06;letter-spacing:-.03em;max-width:16ch;margin:0 auto}
  .mhq-band p.lead{margin:16px auto 0;max-width:44ch}
  .mhq-hero .cta-row{justify-content:center;margin-top:24px}
  .mhq-band p.mhq-micro{margin:12px 0 0;font-size:var(--fs-small);color:rgba(246,246,233,.74)}
  @media (min-width:48rem){
    .mhq-hero{padding:48px 0 56px}
    .mhq-logo{width:176px;margin-bottom:22px}
    .mhq-hero h1{max-width:22ch}
    .mhq-band p.lead{max-width:58ch}
  }

  /* comparison: header above a full-width table */
  section .shell:has(> .head):has(.mhq-table){display:block}
  section .shell:has(> .head):has(.mhq-table) > .head{max-width:46rem;margin-bottom:28px}
  #compare .head h2{max-width:24ch}
  .mhq-table{width:100%;border-collapse:collapse;font-size:var(--fs-small);line-height:1.45}
  .mhq-table th,.mhq-table td{text-align:left;vertical-align:top;padding:14px 16px 14px 0;
    border-top:1px solid var(--hairline);font-size:var(--fs-small)}
  .mhq-table thead th{font-size:var(--fs-micro);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
    color:var(--gold-ink);border-top:0;padding-bottom:10px;vertical-align:bottom}
  .mhq-table tbody th{font-weight:600;color:var(--green)}
  .mhq-table td{color:var(--ink-soft)}
  .mhq-table .mhq-col{background:var(--bone-recessed);padding-left:16px;color:var(--green);font-weight:600}
  .mhq-table thead .mhq-col{color:var(--gold-ink)}
  .mhq-table tbody tr:last-child > *{border-bottom:1px solid var(--hairline)}
  .mhq-table thead th:nth-child(1){width:22%}
  .mhq-table thead th:nth-child(2){width:28%}
  .mhq-table thead th:nth-child(3){width:24%}
  #compare p.pullquote{margin:32px 0 0;max-width:40em}
  .mhq-notes{margin-top:22px;max-width:60rem}
  .mhq-notes p{font-size:var(--fs-micro);line-height:1.55;color:var(--ink-soft);max-width:none;margin:0 0 6px}

  /* phones: one card per capability, never a sideways scroll */
  @media (max-width:47.99rem){
    .mhq-table,.mhq-table tbody,.mhq-table tr,.mhq-table th,.mhq-table td{display:block;width:auto}
    .mhq-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
    .mhq-table tbody tr{background:var(--cream);border:1px solid var(--hairline);padding:14px 16px 6px;margin-bottom:10px}
    .mhq-table tbody th{border-top:0;padding:0 0 8px;font-size:var(--fs-h3)}
    .mhq-table td{display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);column-gap:12px;
      border-top:1px solid var(--rule);padding:9px 0}
    .mhq-table td::before{content:attr(data-label);font-size:var(--fs-micro);font-weight:700;letter-spacing:.06em;
      text-transform:uppercase;color:var(--gold-ink);line-height:1.5;padding-top:2px}
    .mhq-table .mhq-col{background:none;padding-left:0}
    .mhq-table tbody tr:last-child > *{border-bottom:0}
  }

  /* waitlist */
  .mhq-waitlist .shell{display:grid;gap:26px}
  .mhq-waitlist h2{max-width:16ch}
  .mhq-form{max-width:36rem}
  .mhq-form .formerr{max-width:none}
  .mhq-band .inquiry label,.mhq-band .inquiry legend{color:var(--cream)}
  .mhq-band .inquiry .req{color:rgba(246,246,233,.74)}
  .mhq-band .inquiry input:focus,.mhq-band .inquiry select:focus{outline-color:var(--gold)}
  .mhq-band p.mhq-fine{font-size:var(--fs-small);margin:0;color:rgba(246,246,233,.74)}
  .mhq-form .mhq-send{margin:4px 0 0}
  .mhq-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
  .mhq-done{max-width:36rem;border-left:3px solid var(--gold);padding:4px 0 4px 18px}
  .mhq-done h3{font-size:var(--fs-h2);line-height:1.12;letter-spacing:-.02em;font-weight:700;margin:0 0 8px}
  @media (min-width:64rem){
    .mhq-waitlist .shell{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);column-gap:64px;align-items:start}
  }

  /* the MillHQ band above the site footer */
  .mhq-foot{background:var(--green-deep);padding:26px 0 20px;border-bottom:1px solid var(--green-line)}
  .mhq-foot .shell{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px}
  .mhq-wordmark{font-family:var(--serif);font-size:26px;line-height:1;color:var(--cream);margin:0;letter-spacing:-.01em}
  .mhq-foot p{margin:0;max-width:none;font-size:var(--fs-small);color:rgba(246,246,233,.8)}
  .mhq-foot a{color:var(--gold)}
  .mhq-foot p.mhq-tm{flex-basis:100%;margin-top:6px;font-size:var(--fs-micro);color:rgba(246,246,233,.66)}

  /* the rest of the page: problem, what we are building, who it is for, why */
  #problem .shell,#planned .shell{display:block}
  #problem .shell > .head,#planned .shell > .head{max-width:46rem;margin-bottom:28px}
  #problem .head h2{max-width:26ch}
  #problem .probs{border-top:0;gap:26px}
  #problem .prob{border-top:2px solid var(--gold-ink);border-bottom:0;padding:14px 0 0}
  #problem .prob h3{margin-bottom:6px}
  #problem .prob p{font-size:var(--fs-small);line-height:1.55;max-width:none}
  #planned .card h3{margin:0 0 6px}
  .mhq-fitlist{margin:0}
  .mhq-fitlist li{font-size:var(--fs-body)}
  #fit p.pullquote{margin:24px 0 0}
  .mhq-sign{display:flex;align-items:center;gap:12px;margin-top:22px;padding-top:18px;
    border-top:1px solid var(--hairline);font-size:var(--fs-small);font-weight:600;color:var(--green)}
  .mhq-sign img{width:40px;height:40px;object-fit:contain;background:var(--green-deep);padding:6px;flex:0 0 auto}
  :is(#millhq,#problem,#planned,#compare,#fit,#why,#waitlist) :is(h1,h2){text-wrap:balance}

/* =====================================================================
   HOMEPAGE 2026 — calculator hero, results strip, build menu, audit
   ledger, founder note. Square corners, no shadows, no motion.
   ===================================================================== */
  :root{--mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace}

  /* hero: the one green band on the page */
  .hx{background:var(--green);color:var(--cream);padding:40px 0 44px}
  .hx-grid{display:grid;gap:28px;align-items:start}
  .hx .kicker{color:var(--gold)}
  .hx h1{font-size:var(--fs-hero);line-height:1.04;letter-spacing:-.035em;font-weight:700;color:var(--cream);margin:0;max-width:16ch}
  .hx .lead{color:rgba(246,246,233,.86);margin-top:16px;max-width:44ch}
  .hx .btn-outline{color:var(--cream);border-color:rgba(246,246,233,.5);background:transparent}
  .hx .btn-outline:hover{color:var(--gold);border-color:var(--gold);background:transparent}
  .hx .btn:focus-visible,.hx a:focus-visible{outline-color:var(--gold)}
  .hx-note{margin-top:18px;font-size:var(--fs-small);color:rgba(246,246,233,.78);max-width:44ch;
    border-top:1px solid rgba(246,246,233,.2);padding-top:14px}
  @media (min-width:56rem){
    .hx{padding:56px 0 60px}
    .hx-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);column-gap:56px}
  }

  /* the calculator */
  .calc{background:var(--cream);color:var(--ink);padding:22px 22px 18px;border:1px solid rgba(0,0,0,.12)}
  .calc-h{font-size:var(--fs-h3);line-height:1.3;font-weight:700;letter-spacing:-.01em;color:var(--green);margin:0 0 16px;max-width:none}
  .calc-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:4px 12px;margin-bottom:14px}
  .calc-row label{font-weight:600;font-size:14px;line-height:1.35;color:var(--ink)}
  .calc-v{font:600 15px/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--gold-ink)}
  .calc-row input[type=range]{grid-column:1/-1;width:100%;margin:6px 0 0;accent-color:#2B4A45;min-height:28px}
  .calc-row select{grid-column:1/-1;font:inherit;font-size:15px;min-height:44px;padding:8px 10px;border:1px solid var(--hairline);
    background:#fff;color:var(--ink);border-radius:0}
  .calc-out{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;border-top:2px solid var(--ink);padding-top:14px;margin-top:4px}
  .calc-n{font:600 clamp(26px,3.2vw,34px)/1 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.03em;color:var(--green);margin:0}
  .calc-t{font-size:13px;color:var(--ink-soft);margin:6px 0 0}
  .calc-verdict{grid-column:1/-1;margin:0;font-size:14px;font-weight:600;line-height:1.4;padding:10px 12px;border:1px solid currentColor}
  .calc-verdict.is-yes{color:#2F6B4F}
  .calc-verdict.is-no{color:var(--gold-ink)}
  .calc-cta{display:flex;width:100%;margin-top:14px}
  .calc-fine{font-size:12px;line-height:1.45;color:var(--ink-soft);margin:10px 0 0;max-width:none}

  /* real results, set large */
  #results{padding:36px 0 40px}
  .actuals{display:grid;gap:0;border-top:2px solid var(--ink);margin-top:4px}
  .act{padding:16px 0;border-bottom:1px solid var(--hairline)}
  .act p{margin:0;max-width:none}
  .act-n{font:600 clamp(30px,4vw,44px)/1 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.035em;color:var(--green)}
  .act-d{font:700 18px/1.2 var(--serif);color:var(--gold-ink);margin-top:6px !important}
  .act-w{font-size:var(--fs-small);color:var(--ink-soft);margin-top:8px !important;max-width:36ch}
  @media (min-width:48rem){
    .actuals{grid-template-columns:repeat(3,minmax(0,1fr))}
    .act{border-bottom:0;padding:18px 24px 6px 0}
    .act + .act{padding-left:24px;border-left:1px solid var(--hairline)}
  }

  /* section header used by the new sections (stacked, never the side column) */
  .mh{max-width:46rem;margin-bottom:22px}
  .mh h2{max-width:24ch}
  .mh p:not(.kicker){color:var(--ink-soft)}

  /* the build menu */
  .chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
  .chips button{font:600 14px/1 var(--sans, inherit);font-family:inherit;min-height:40px;padding:10px 13px;background:transparent;
    border:1px solid var(--hairline);color:var(--ink);cursor:pointer;border-radius:0}
  .chips button:hover{border-color:var(--green)}
  .chips button[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:var(--cream)}
  .chips button:focus-visible{outline:2px solid var(--green);outline-offset:2px}
  .tickets{display:grid;grid-template-columns:1fr;border:1px solid var(--hairline);background:var(--cream)}
  .tk{padding:18px 18px 16px;display:flex;flex-direction:column;gap:8px;transition:opacity .2s}
  .tk + .tk{border-top:1px dashed var(--hairline)}
  .tk.is-dim{opacity:.35}
  .tk p{margin:0;max-width:none}
  .tk-id{font:600 11px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--gold-ink)}
  .tk h3{font-size:17px;line-height:1.25;color:var(--green);margin:0}
  .tk-price{font:600 28px/1 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.03em;color:var(--ink);margin-top:2px !important}
  .tk-price span{font:500 12px var(--mono);letter-spacing:0;color:var(--ink-soft);margin-left:6px}
  .tk dl{margin:4px 0 0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 12px;font-size:14px;line-height:1.4}
  .tk dt{font:600 11px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft)}
  .tk dd{margin:0;color:var(--ink)}
  .tk-audit{background:var(--green-deep);color:var(--cream)}
  .tk-audit .tk-id{color:var(--gold)}
  .tk-audit h3{color:var(--cream)}
  .tk-audit p:not(.tk-id){font-size:14px;color:rgba(246,246,233,.82)}
  .tk-audit .btn{margin-top:auto;align-self:stretch}
  .tk-audit .btn:focus-visible{outline-color:var(--gold)}
  @media (min-width:40rem){
    .tickets{grid-template-columns:1fr 1fr}
    .tk:nth-child(2){border-top:0;border-left:1px dashed var(--hairline)}
    .tk:nth-child(4){border-left:1px dashed var(--hairline)}
  }
  @media (min-width:64rem){
    .tickets{grid-template-columns:repeat(4,minmax(0,1fr))}
    .tk + .tk{border-top:0;border-left:1px dashed var(--hairline)}
  }
  .menu-more{font-size:var(--fs-small);color:var(--ink-soft);margin:14px 0 0}
  .menu-links{display:flex;flex-wrap:wrap;gap:8px 22px;margin:8px 0 0;max-width:none}
  .menu-links .morelink{margin-top:0}
  @media (max-width:40rem){
    .chips{gap:6px}
    .chips button{font-size:13px;padding:9px 11px;min-height:40px}
  }
  .flow{margin-top:30px}
  .flow-h{font-weight:700;color:var(--green);margin:0 0 12px}
  .flow ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;border-top:1px solid var(--hairline);counter-reset:step}
  .flow li{counter-increment:step;display:grid;grid-template-columns:2.2rem minmax(0,1fr);column-gap:10px;padding:12px 0;
    border-bottom:1px solid var(--hairline);font-size:var(--fs-small);color:var(--ink-soft);line-height:1.45}
  .flow li::before{content:counter(step);grid-row:1/span 2;font:600 15px/1.2 var(--mono);color:var(--gold-ink)}
  .flow li b{display:block;color:var(--ink);font-weight:700}
  @media (min-width:64rem){
    .flow ol{grid-template-columns:repeat(5,minmax(0,1fr));border-bottom:1px solid var(--hairline)}
    .flow li{display:block;border-bottom:0;padding:14px 18px 12px 0}
    .flow li + li{padding-left:18px;border-left:1px solid var(--hairline)}
    .flow li::before{display:block;margin-bottom:6px}
    .flow li b{margin-bottom:4px}
  }

  /* the audit ledger */
  .ledger{border-top:2px solid var(--ink);font-size:15px}
  .lg-h,.lg-r{display:grid;grid-template-columns:minmax(0,1fr) 4.5rem 6rem 7.5rem;gap:0 12px;align-items:baseline;
    padding:12px 0;border-bottom:1px solid var(--hairline)}
  .lg-h{font:600 11px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);padding:10px 0}
  .lg-h span:nth-child(2),.lg-h span:nth-child(3),.lg-r span:nth-child(2),.lg-r span:nth-child(3){text-align:right}
  .lg-r span:nth-child(2),.lg-r span:nth-child(3){font:500 15px var(--mono);font-variant-numeric:tabular-nums}
  .lg-yes{font-weight:700;color:#2F6B4F}
  .lg-no{font-weight:700;color:var(--gold-ink)}
  .lg-leave span:first-child{text-decoration:line-through;text-decoration-color:var(--gold-ink);color:var(--ink-soft)}
  @media (max-width:40rem){
    .lg-h,.lg-r{grid-template-columns:minmax(0,1fr) 3.4rem 6.5rem}
    .lg-h span:nth-child(3),.lg-r span:nth-child(3){display:none}
  }
  .audit-facts{display:grid;gap:12px 28px;margin-top:22px;grid-template-columns:1fr}
  .audit-facts p{margin:0;font-size:var(--fs-small);color:var(--ink-soft);max-width:none}
  .audit-facts b{display:block;color:var(--ink);font-size:var(--fs-body)}
  @media (min-width:48rem){.audit-facts{grid-template-columns:repeat(3,minmax(0,1fr)) auto;align-items:start}
    .audit-facts .audit-cta{align-self:center}}
  .audit-cta .btn{margin-top:4px}

  /* contact band: the two buttons get a gap when they wrap on phones (sitewide) */
  .talkbtn{display:flex;flex-wrap:wrap;gap:10px}

  /* the founder note */
  .note-grid{display:grid;gap:36px}
  .note-lede{font:400 clamp(22px,2.6vw,28px)/1.35 var(--serif);color:var(--green);max-width:30ch;margin:0 0 18px}
  .note-letter p:not(.kicker):not(.note-lede){color:var(--ink-soft)}
  .note-sign{font-weight:700;color:var(--ink) !important;margin-top:16px}
  .reading{list-style:none;margin:0 0 18px;padding:0;border-top:1px solid var(--hairline)}
  .reading li{border-bottom:1px solid var(--hairline)}
  .reading a{display:block;padding:12px 0;font-weight:600;color:var(--green);text-decoration:none;line-height:1.35}
  .reading a:hover{color:var(--gold-ink)}
  @media (min-width:56rem){.note-grid{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);column-gap:64px}}

  /* industry pages: the calculator beside its section header */
  #savings-section .calc{max-width:34rem}

  /* contact band phone link: 24px minimum tap height */
  .ctatel a{display:inline-block;padding:3px 0}

/* =====================================================================
   THEME 2026 — Geist on clean white (chosen 18 September 2026).
   One font for headings, text and numbers. White pages, pale-grey
   panels, near-black main buttons, green kept for headings, 8px radius.
   This block is last on purpose: it settles every earlier surface.
   ===================================================================== */
  :root{
    --brand:Geist,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
    --serif:var(--brand); --mono:var(--brand);
    --bone:#FFFFFF; --bone-recessed:#F6F6F4; --surface:#F6F6F4;
    --ink:#111413; --ink-soft:#5A605D; --hairline:#E6E5E1; --rule:#E6E5E1;
    --line2:#CFCDC7; --field:#8A8F8C; --black:#111413;
    --green:#1F3833; --green-deep:#1F3833; --r:8px;
  }
  html{background:#FFFFFF}
  body{background:#FFFFFF;color:var(--ink);font-family:var(--brand);letter-spacing:-.005em;
    text-rendering:optimizeLegibility}
  h1,h2,h3,.head h1{font-family:var(--brand);font-weight:600;letter-spacing:-.035em}
  h3,.rl h3,.qa h3,.card h3,.casecard h3,.stp h3,.qa h2,.rl h2{letter-spacing:-.015em}
  .sec-light h1,.sec-light h2,.sec-light h3,.sec-light .head h1{color:var(--green)}
  .kicker,h1.kicker,.speclabel,.grouphead,.iocol h2,.projdl dt,.tk-id,.casecard .who,.capcard .who{letter-spacing:.12em}

  /* ---- header ---- */
  .topbar{background:#FFFFFF;border-bottom:1px solid var(--hairline)}
  .nav a{color:var(--ink-soft);font-weight:500}
  .nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
  .nav a[aria-current="page"]{font-weight:600}
  .navtoggle{border-color:var(--hairline);border-radius:var(--r)}
  .navtoggle .bars,.navtoggle .bars::before,.navtoggle .bars::after{background:var(--ink)}
  .nav.open{border-top-color:var(--hairline)}
  .topbar a:focus-visible,.navtoggle:focus-visible{outline-color:var(--ink)}

  /* ---- buttons ---- */
  .btn{border-radius:var(--r);font-weight:600;letter-spacing:-.005em}
  .btn-gold,.hx .btn-gold,.ctaband .btn-gold,.calc .btn-gold{background:var(--black);color:#FFFFFF;border-color:var(--black)}
  .btn-gold:hover,.hx .btn-gold:hover,.ctaband .btn-gold:hover{background:#2C3230;border-color:#2C3230;color:#FFFFFF}
  .btn-outline,.hx .btn-outline,.ctaband .btn-outline,.sec-light .btn-outline,.sec-dark .btn-outline,.sec-deep .btn-outline,
  .modal-panel .btn-plain{background:#FFFFFF;color:var(--ink);border-color:var(--line2)}
  .btn-outline:hover,.hx .btn-outline:hover,.ctaband .btn-outline:hover,.sec-light .btn-outline:hover,
  .modal-panel .btn-plain:hover{background:#FFFFFF;color:var(--ink);border-color:var(--ink)}
  a:focus-visible,.btn:focus-visible,.hx a:focus-visible,.hx .btn:focus-visible,.mhq-band a:focus-visible,.mhq-band .btn:focus-visible{
    outline:2px solid var(--ink);outline-offset:2px}

  /* ---- homepage hero: white, no band ---- */
  .hx{background:#FFFFFF;color:var(--ink);border-bottom:1px solid var(--hairline)}
  .hx .kicker{color:var(--gold-ink)}
  .hx h1{color:var(--green);letter-spacing:-.045em;font-weight:600}
  .hx .lead{color:var(--ink-soft)}
  .hx-note{color:var(--ink-soft);border-top-color:var(--hairline)}

  /* ---- calculator ---- */
  .calc{background:#FFFFFF;border:1px solid var(--hairline);border-radius:12px;padding:24px 24px 20px}
  .calc-h{color:var(--green);letter-spacing:-.015em}
  .calc-row label{font-weight:500}
  .calc-v{font-weight:600;letter-spacing:-.01em}
  .calc-row input[type=range]{accent-color:#1F3833}
  .calc-row select{border-color:var(--field);border-radius:var(--r);background:#FFFFFF}
  .calc-out{border-top:1px solid var(--hairline)}
  .calc-n{font-weight:600;letter-spacing:-.04em}
  .calc-verdict{border:0;border-radius:var(--r);padding:11px 13px;font-weight:600}
  .calc-verdict.is-yes{background:#EEF5F0;color:#2A5F46}
  .calc-verdict.is-no{background:#FBF1E7;color:var(--gold-ink)}

  /* ---- numbers set in Geist ---- */
  .act-n,.tk-price,.calc-n,.price,.card p.tierprice,.tierprice,.casecard .stat,.casecard .stat2,
  .lg-r span:nth-child(2),.lg-r span:nth-child(3){font-family:var(--brand);font-weight:600;letter-spacing:-.035em;
    font-variant-numeric:tabular-nums}
  .act-d{font-family:var(--brand);font-weight:600;letter-spacing:-.01em}
  .tk-price span,.calc-v,.lg-h,.tk dt,.tk-id,.flow li::before{font-family:var(--brand)}
  .actuals{border-top:1px solid var(--ink)}
  .ledger{border-top:1px solid var(--ink)}
  .flow li::before{font-weight:600}

  /* ---- quotes and the founder note, without the serif ---- */
  p.pullquote,.ctaband p.pullquote,.sec-light p.pullquote,.sec-deep p.pullquote,.sec-dark p.pullquote{
    font-family:var(--brand);font-style:normal;font-weight:500;letter-spacing:-.02em;color:var(--green);
    font-size:clamp(19px,2.2vw,23px);line-height:1.45;border-left:2px solid var(--gold-ink);padding-left:18px}
  .note-lede{font-family:var(--brand);font-weight:500;letter-spacing:-.025em;color:var(--green);font-size:clamp(21px,2.4vw,26px)}

  /* ---- cards and panels ---- */
  .card,.casecard,.pricebox,.card-spec{background:#FFFFFF;border:1px solid var(--hairline);border-radius:var(--r)}
  .capcard{background:#FFFFFF;border:1px solid var(--hairline);border-radius:var(--r);transition:border-color .15s}
  .capcard a{border-radius:var(--r)}
  .capcard:hover{background:#FFFFFF;border-color:var(--ink)}
  .capcard:hover h2,.capcard:hover h3{color:var(--green)}
  .tickets{background:#FFFFFF;border-color:var(--hairline);border-radius:12px;overflow:hidden}
  .tk + .tk{border-color:var(--hairline)}
  .tk-audit{background:var(--black)}
  .tk-audit .tk-id{color:#E3B98A}
  .tk-audit .btn-gold{background:#FFFFFF;color:var(--ink);border-color:#FFFFFF}
  .tk-audit .btn-gold:hover{background:#ECECE9;border-color:#ECECE9;color:var(--ink)}
  .tk-audit .btn:focus-visible{outline-color:#FFFFFF}
  .chips button{border-radius:999px;border-color:var(--line2);font-family:var(--brand);font-weight:500}
  .chips button:hover{border-color:var(--ink)}
  .chips button[aria-pressed="true"]{background:var(--black);border-color:var(--black);color:#FFFFFF}
  .chips button:focus-visible{outline-color:var(--ink)}
  .mhq-table .mhq-col{background:var(--surface)}

  /* ---- forms ---- */
  .inquiry input[type=text],.inquiry input[type=email],.inquiry input[type=tel],.inquiry select,.inquiry textarea{
    border-color:var(--field);border-radius:var(--r)}
  .inquiry input:focus,.inquiry select:focus,.inquiry textarea:focus{outline-color:var(--ink)}
  .inquiry .choice input{accent-color:#1F3833}
  .formerr{border-radius:var(--r)}
  .modal-panel{background:#FFFFFF;border-color:var(--hairline);border-radius:14px}

  /* ---- contact band and footer: light panels ---- */
  .ctaband{background:var(--surface);color:var(--ink);border-top:1px solid var(--hairline)}
  .ctaband h2{color:var(--green)}
  .ctaband p{color:var(--ink-soft)}
  .ctaband p.pullquote{color:var(--ink-soft);border-left:0;padding-left:0;font-size:16px;font-weight:500;letter-spacing:-.01em;margin-top:6px}
  .ctaband .mail,.mail{color:var(--ink);border-bottom-color:var(--line2)}
  .ctaband .mail:hover,.mail:hover{border-bottom-color:var(--ink)}
  .ctatel a{color:var(--ink);border-bottom-color:var(--line2)}
  .ctatel a:hover{border-bottom-color:var(--ink)}
  .ctaband .signoff{opacity:1}
  footer{background:var(--surface);color:var(--ink-soft);border-top:1px solid var(--hairline)}
  footer a{color:var(--ink-soft)}
  footer a:hover{color:var(--ink)}

  /* ---- about page logo band ---- */
  .logoband{background:#FFFFFF;border-bottom:1px solid var(--hairline)}

  /* ---- MillHQ page: light bands ---- */
  .mhq-band{background:#FFFFFF;color:var(--ink)}
  .mhq-hero{border-bottom:1px solid var(--hairline)}
  .mhq-waitlist{background:var(--surface);border-top:1px solid var(--hairline)}
  .mhq-band h1,.mhq-band h2,.mhq-band h3{color:var(--green)}
  .mhq-band p:not(.formerr),.mhq-band p.mhq-micro,.mhq-band p.mhq-fine{color:var(--ink-soft)}
  .mhq-band .kicker{color:var(--gold-ink)}
  .mhq-band p:not(.formerr) a:not([class]){color:var(--gold-ink)}
  .mhq-band .inquiry label,.mhq-band .inquiry legend{color:var(--ink)}
  .mhq-band .inquiry .req{color:var(--ink-soft)}
  .mhq-band .inquiry input:focus,.mhq-band .inquiry select:focus{outline-color:var(--ink)}
  .mhq-done{border-left-color:var(--gold-ink)}
  .mhq-foot{background:var(--surface);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
  .mhq-wordmark{font-family:var(--brand);font-weight:600;letter-spacing:-.03em;color:var(--green)}
  .mhq-foot p,.mhq-foot p.mhq-tm{color:var(--ink-soft)}
  .mhq-foot a{color:var(--gold-ink)}
  .mhq-sign img{background:none;padding:0}

  /* ---- small phones: header on one line, audit list stacked ---- */
  @media (max-width:26rem){
    .topbar .brandmark{width:6.25rem}
    .navcta{font-size:13px;padding:0 .7rem}
    .topbar .shell{gap:.4rem}
  }
  @media (max-width:40rem){
    .lg-h{display:none}
    .lg-r{grid-template-columns:minmax(0,1fr) auto;row-gap:4px;padding:14px 0}
    .lg-r span:first-child{grid-column:1/-1;font-weight:500;color:var(--ink)}
    .lg-r span:nth-child(2){display:none}
    .lg-r span:nth-child(3){display:block;text-align:left;color:var(--ink-soft)}
    .lg-r span:nth-child(3)::after{content:" a year"}
    .lg-leave span:nth-child(3)::after{content:""}
    .lg-r span:nth-child(4){text-align:right}
  }

  /* ---- smallest phones (320px) ---- */
  .hx-grid > *{min-width:0}
  .calc-row select{min-width:0;max-width:100%;text-overflow:ellipsis}
  @media (max-width:22.5rem){
    .topbar .brandmark{width:5.4rem}
    .navcta{font-size:12.5px;padding:0 .55rem}
    .topbar .shell{gap:.35rem}
    .calc{padding:18px 16px 16px}
    .calc-n{font-size:24px}
  }

  /* the black audit card keeps white type over the section heading colour */
  .sec-light .tk-audit h3,.tk-audit h3{color:#FFFFFF}

  @media (max-width:22.5rem){
    :root{--pad:14px}
    .topbar .brandmark{width:5rem}
    .navcta{font-size:12px;padding:0 .5rem;letter-spacing:-.01em}
    .navtoggle{min-width:42px;width:42px}
  }
  /* the struck-through regular price stays readable */
  p.price .was,.price .was{color:rgba(17,20,19,.58)}

/* =====================================================================
   COHESION PASS (18 September 2026): one section layout sitewide.
   Every section header stacks above its content at every width, the
   way the new homepage reads. Replaces the left-column headers.
   ===================================================================== */
  section .shell:has(> .head){display:block}
  section .shell:has(> .head) > .head{max-width:46rem;margin-bottom:32px;position:static;grid-row:auto}
  section .shell:has(> .head):not(:has(.head ~ *)) > .head{margin-bottom:0}
  .head h1,.head h2,.mh h2{max-width:26ch}
  .head p:not(.kicker){max-width:62ch}
  @media (max-width:47.99rem){ section .shell:has(> .head) > .head{margin-bottom:22px} }

  /* labels above headings are copper everywhere (some were picking up the grey body colour) */
  .head .kicker,.head .kicker-dark,.sec-light .head .kicker,.mh .kicker{color:var(--gold-ink)}

  /* long reading content stays at a comfortable measure now that it is full width */
  #guide .qa,#privacy .qa,.faq .qa{max-width:none}
  #guide .qa p,#privacy .qa p,#questions .qa p,.projdl dd{max-width:68ch}
  #about .shell > p{max-width:68ch}
  .rulelist{max-width:none}

  /* build cards: labels sit above their values, so four columns read easily */
  .tk h3{font-size:16px}
  .tk dl{display:block;font-size:14px}
  .tk dt{margin-top:10px}
  .tk dd{margin:2px 0 0;color:var(--ink-soft)}
  .tk-audit .btn{margin-top:18px}
  @media (min-width:64rem){ .tk{padding:20px 20px 18px} }

  /* industry and area pages: the calculator sits beside its intro on wide screens */
  @media (min-width:64rem){
    #savings-section .shell:has(> .head){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);column-gap:56px;align-items:start}
    #savings-section .shell:has(> .head) > .head{margin-bottom:0}
    #savings-section .calc{max-width:none}
  }

  /* the single-result sections on industry pages follow the same stacked layout */
  section .shell:has(> .head):has(.cases > .casecard:only-child){display:block}
  section .shell:has(> .head):has(.cases > .casecard:only-child) > .head{margin-bottom:32px;max-width:46rem}
  @media (min-width:48rem){ .rulelist:not(:has(.rl > :nth-child(2))){grid-template-columns:repeat(4,minmax(0,1fr))} }

/* =====================================================================
   SECTION RHYTHM (18 September 2026): sections alternate white and pale
   grey with more room between them, so each one reads as its own block.
   Replaces the hairline-only separators.
   ===================================================================== */
  :root{--sp-section:76px;--sp-section-m:52px}
  section.sec-light,section.sec-dark,section.sec-deep{padding:var(--sp-section) 0}
  :is(.sec-light,.sec-dark,.sec-deep) + :is(.sec-light,.sec-dark,.sec-deep){padding-top:var(--sp-section)}
  :is(.sec-light,.sec-dark,.sec-deep) + :is(.sec-light,.sec-dark,.sec-deep) > .shell{padding-top:0;background:none}
  section:has(> .shell > .head:only-child){padding-bottom:var(--sp-section)}
  section:has(> .shell > .head:only-child) + section > .shell{padding-top:0}
  @media (max-width:47.99rem){
    section.sec-light,section.sec-dark,section.sec-deep,
    :is(.sec-light,.sec-dark,.sec-deep) + :is(.sec-light,.sec-dark,.sec-deep){padding:var(--sp-section-m) 0}
  }
  /* every second section on a page sits on the pale grey */
  body > section.sec-light:nth-of-type(even),body > section.sec-dark:nth-of-type(even),body > section.sec-deep:nth-of-type(even){background:var(--surface)}
  .mhq-table .mhq-col{background:#FFFFFF}
  /* the contact band is white with a rule above it, so a grey section never runs into it */
  .ctaband{background:#FFFFFF;border-top:1px solid var(--hairline);padding:64px 0}
  @media (max-width:47.99rem){ .ctaband{padding:44px 0} }

  /* homepage: explicit rhythm under the white hero */
  #results{padding:var(--sp-section) 0 !important;background:var(--surface) !important}
  #menu{background:#FFFFFF !important}
  #audit{background:var(--surface) !important}
  #note{background:#FFFFFF !important}
  @media (max-width:47.99rem){ #results{padding:var(--sp-section-m) 0 !important} }
  #audit .audit-facts{margin-top:8px}
  #audit .mh{margin-bottom:26px}

  /* founder note: agency and MillHQ lines across the bottom */
  .note-grid .also{grid-column:1/-1;display:grid;gap:14px 40px;border-top:1px solid var(--hairline);padding-top:24px;margin-top:8px}
  .also p{margin:0;max-width:none;font-size:var(--fs-small);color:var(--ink-soft);line-height:1.55}
  .also b{color:var(--ink);font-weight:600}
  .also .morelink{margin:0 0 0 6px;display:inline;font-size:var(--fs-small)}
  @media (min-width:56rem){ .note-grid .also{grid-template-columns:1fr 1fr} }

  /* MillHQ page labels stay copper (a paragraph colour rule was winning) */
  .mhq-band p.kicker{color:var(--gold-ink)}

/* =====================================================================
   BRAND ACCENTS (18 September 2026): no black. Primary buttons, the
   selected filter, the audit card and accent rules use the logo green.
   ===================================================================== */
  :root{--black:#1F3833}
  .btn-gold,.hx .btn-gold,.ctaband .btn-gold,.calc .btn-gold{background:#1F3833;border-color:#1F3833;color:#FFFFFF}
  .btn-gold:hover,.hx .btn-gold:hover,.ctaband .btn-gold:hover,.calc .btn-gold:hover{background:#2B4A45;border-color:#2B4A45;color:#FFFFFF}
  .chips button[aria-pressed="true"]{background:#1F3833;border-color:#1F3833;color:#FFFFFF}
  .chips button:hover{border-color:#1F3833}
  .tk-audit{background:#1F3833}
  .tk-audit .btn-gold{background:#FFFFFF;border-color:#FFFFFF;color:#1F3833}
  .tk-audit .btn-gold:hover{background:#F1EFE6;border-color:#F1EFE6;color:#1F3833}
  .tk-audit .tk-id{color:#EBAC66}
  .actuals,.ledger{border-top-color:#1F3833}
  .btn-outline:hover,.hx .btn-outline:hover,.ctaband .btn-outline:hover,.sec-light .btn-outline:hover,.modal-panel .btn-plain:hover{border-color:#1F3833;color:#1F3833}
  .capcard:hover{border-color:#1F3833}
  .calc-cta:focus-visible,.btn:focus-visible{outline-color:#1F3833}

/* ---- sticky headers are retired everywhere (an id-based rule was still pinning some) ---- */
  section .shell > .head,:is(#build,#stack,#ai,#agencies,#start,#guide,#privacy,#about,#questions,#improvements,#upkeep) > .shell:has(> .head) > .head{position:static !important;top:auto}

/* ---- build menu: industry view swaps the priced cards for a list, the audit card stays ---- */
  .ind-panel{padding:22px 24px 20px;display:flex;flex-direction:column;gap:12px}
  .ind-panel[hidden]{display:none !important}
  .ind-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:0 28px}
  .ind-list li{padding:11px 0 11px 26px;border-bottom:1px solid var(--hairline);position:relative;font-size:15px;line-height:1.4;color:var(--ink)}
  .ind-list li::before{content:"";position:absolute;left:4px;top:17px;width:9px;height:9px;border-radius:50%;background:#1F3833}
  .ind-foot{font-size:var(--fs-small);color:var(--ink-soft);margin:6px 0 0;max-width:none}
  .ind-foot .morelink{display:inline;margin:0 0 0 4px}
  @media (min-width:40rem){
    .ind-list{grid-template-columns:1fr 1fr}
    .tickets.is-industry{grid-template-columns:1fr}
    .tickets.is-industry .tk-audit{border-left:0;border-top:1px dashed var(--hairline)}
  }
  @media (min-width:64rem){
    .tickets.is-industry{grid-template-columns:minmax(0,3fr) minmax(0,1fr)}
    .tickets.is-industry .tk-audit{border-top:0;border-left:1px dashed var(--hairline)}
  }
  @media (max-width:39.99rem){ .tickets.is-industry .tk-audit{border-top:1px dashed var(--hairline)} }

  /* section labels coded as headings keep the label look */
  h2.kicker,h3.tk-id{font-size:var(--fs-micro);font-weight:700;letter-spacing:.12em;text-transform:uppercase;line-height:1.5;max-width:none;margin:0 0 .6rem}
  h2.kicker{color:var(--gold-ink)}
  #results h2.kicker{margin-bottom:10px}
  .ind-panel h3.tk-id{margin:0;color:var(--gold-ink)}

/* ---- mobile polish (18 September): leftover cream and tap targets ---- */
  :root{--cream:#FFFFFF}
  @media (max-width:47.99rem){
    .mhq-table tbody tr{background:#FFFFFF;border-color:var(--hairline);border-radius:var(--r)}
    .mhq-table .mhq-col,.mhq-table td.mhq-col{background:none}
  }
  .fnav a{display:inline-block;min-width:24px;text-align:center}
  .also .morelink{display:inline-block;padding:3px 0;line-height:1.3}
  .inquiry .choice input{width:24px;height:24px}

/* =====================================================================
   DESIGN V3 (September 2026): "the work order". Paper ground with a
   drafting grid on page tops, monospace tags, large tight Geist type,
   white cards with a soft shadow, brand green and gold only.
   Last layer on purpose: it settles everything above.
   ===================================================================== */
  :root{
    --paper:#F7F5EF; --g:#1F3833; --g2:#2B4A45; --gold:#EBAC66; --cu:#8C4A17;
    --ink:#141816; --ink-soft:#5A605C; --line:#E3DFD5; --hairline:#E3DFD5; --surface:#FFFFFF;
    --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    --shadow:0 1px 0 rgba(20,24,22,.03),0 24px 48px -30px rgba(31,56,51,.40);
    --radius:16px; --r:10px;
    --sp-section:96px; --sp-section-m:60px;
    --grid:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  }
  html,body{background:var(--paper)}
  body{color:var(--ink);font-family:var(--brand)}

  /* ---- sections: paper, every second one white ---- */
  body > section.sec-light,body > section.sec-dark,body > section.sec-deep{background:var(--paper)}
  body > section.sec-light:nth-of-type(even),body > section.sec-dark:nth-of-type(even),body > section.sec-deep:nth-of-type(even){background:#FFFFFF}
  section.sec-light,section.sec-dark,section.sec-deep,
  :is(.sec-light,.sec-dark,.sec-deep) + :is(.sec-light,.sec-dark,.sec-deep){padding:var(--sp-section) 0}
  @media (max-width:47.99rem){
    section.sec-light,section.sec-dark,section.sec-deep,
    :is(.sec-light,.sec-dark,.sec-deep) + :is(.sec-light,.sec-dark,.sec-deep){padding:var(--sp-section-m) 0}
  }

  /* ---- page tops carry the drafting grid ---- */
  .topbar + section{background-color:var(--paper) !important;
    background-image:linear-gradient(180deg,rgba(247,245,239,0) 45%,var(--paper) 100%),var(--grid) !important;
    background-size:auto,44px 44px,44px 44px !important;background-position:0 0,-1px -1px,-1px -1px !important}
  .topbar + section .head h1,.topbar + section h1{font-size:clamp(36px,4.8vw,62px);line-height:1;letter-spacing:-.05em;max-width:18ch}

  /* ---- header ---- */
  .topbar{background:rgba(247,245,239,.92);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
  .brandlink{display:flex;align-items:center;gap:10px;line-height:1;text-decoration:none}
  .brandbadge{width:40px;height:40px;border-radius:10px;display:block;flex:0 0 auto}
  .brandname{display:flex;flex-direction:column;font:700 17px/1 var(--brand);letter-spacing:-.035em;color:var(--g)}
  .brandname small{font:500 11px/1.3 var(--mono);letter-spacing:.02em;color:var(--cu);margin-top:3px}
  .nav a{color:var(--ink-soft);font-size:15px}
  .nav a:hover,.nav a[aria-current="page"]{color:var(--g)}
  .navcta{border-radius:var(--r)}
  @media (max-width:47.99rem){ .brandbadge{width:36px;height:36px;border-radius:9px} .brandname{font-size:15px} }
  @media (max-width:22.5rem){ .brandname{display:none} }

  /* ---- type ---- */
  .head h1,.head h2,.mh h2{color:var(--g);font-size:clamp(30px,4vw,50px);line-height:1.03;letter-spacing:-.048em;font-weight:700;max-width:22ch}
  .head p:not(.kicker),.mh p:not(.kicker){font-size:clamp(16.5px,1.4vw,18.5px);line-height:1.6;color:var(--ink-soft)}
  .kicker,h1.kicker,h2.kicker,.sec-light .kicker,.head .kicker,.mh .kicker{font:500 12.5px/1.5 var(--mono);letter-spacing:.01em;text-transform:none;color:var(--cu)}
  .kicker::before{content:"// ";color:var(--gold)}
  .tk-id,h3.tk-id,.projdl dt,.casecard .who,.capcard .who,.grouphead,.speclabel,.iocol h2,.lg-h,.act-k,.mhq-table thead th,.mhq-table td::before{
    font-family:var(--mono);font-weight:500;letter-spacing:.04em}

  /* ---- buttons ---- */
  .btn{border-radius:var(--r);transition:background-color .15s,border-color .15s,transform .15s,color .15s}
  .btn:hover{transform:translateY(-1px)}
  .btn-gold:not(.navcta)::after{content:"\2192";margin-left:10px;color:var(--gold);font-weight:600;transition:transform .15s}
  .btn-gold:not(.navcta):hover::after{transform:translateX(3px)}
  .btn-outline,.hx .btn-outline,.sec-light .btn-outline{background:#FFFFFF;border-color:#CFCAB9;color:var(--g)}
  @media (prefers-reduced-motion:reduce){ .btn,.btn::after{transition:none} .btn:hover{transform:none} }

  /* ---- homepage hero: copy and the live example ---- */
  .hx{border-bottom:0;padding:76px 0 70px;background-color:var(--paper);
    background-image:linear-gradient(180deg,rgba(247,245,239,0) 55%,var(--paper) 100%),var(--grid);
    background-size:auto,44px 44px,44px 44px;background-position:0 0,-1px -1px,-1px -1px}
  .hx-grid{gap:48px;align-items:center}
  @media (min-width:56rem){ .hx-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);column-gap:56px} }
  .hx-tag{display:inline-block;font:500 12.5px/1 var(--mono);color:var(--cu);background:#FFFFFF;border:1px solid var(--line);padding:8px 11px;border-radius:7px;margin:0 0 24px;max-width:none}
  .hx-tag::before{content:"// ";color:var(--gold)}
  .hx h1{font-size:clamp(40px,5.5vw,72px);line-height:.98;letter-spacing:-.056em;font-weight:700;color:var(--g);max-width:14ch}
  .hx .lead{font-size:clamp(17px,1.6vw,19.5px);line-height:1.55;color:var(--ink-soft);max-width:42ch;margin-top:22px}
  .hx .cta-row{margin-top:30px}
  @media (max-width:47.99rem){ .hx{padding:44px 0 44px} }

  .demo{position:relative;height:410px;margin:0}
  .dcard{position:absolute;background:#FFFFFF;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
  .dmail{left:0;top:0;width:68%;padding:18px 20px}
  .dmail p{margin:0;max-width:none}
  .dfrom{font:500 11.5px var(--mono);color:var(--ink-soft);margin-bottom:10px !important}
  .dsubj{font-weight:700;font-size:15px;color:var(--ink);margin-bottom:6px !important}
  .dbody{font-size:14px;line-height:1.6;color:var(--ink-soft)}
  .dbody mark{color:var(--ink);background:#FBEBD4;padding:0 3px;border-radius:3px;animation:d-mark 7s infinite}
  .darrow{position:absolute;left:50%;top:43%;font:600 28px var(--brand);color:var(--cu);animation:d-arrow 7s infinite}
  .dsys{right:0;bottom:30px;width:76%;overflow:hidden}
  .dsys-h{display:flex;justify-content:space-between;align-items:center;margin:0;max-width:none;padding:12px 16px;background:var(--g);color:#FFFFFF;font-weight:600;font-size:13.5px}
  .dsys-h span{font:500 11px var(--mono);color:var(--gold)}
  .dsys table{width:100%;border-collapse:collapse;font:500 12.5px var(--mono)}
  .dsys td{padding:10px 16px;border-top:1px solid var(--line);color:var(--ink)}
  .dsys td:last-child{text-align:right;color:var(--ink-soft)}
  .dsys .dnew td{animation:d-row 7s infinite;background:#E4F0E8}
  .dpill{position:absolute;right:8%;top:41%;margin:0;background:var(--gold);color:var(--g);font-weight:700;font-size:13.5px;padding:9px 15px;border-radius:999px;box-shadow:0 10px 24px -12px rgba(140,74,23,.55);animation:d-pill 7s infinite}
  .demo figcaption{position:absolute;left:0;bottom:0;font:500 11.5px var(--mono);color:var(--ink-soft)}
  @keyframes d-mark{0%,18%{background:#FBEBD4}32%,100%{background:#F6D39E}}
  @keyframes d-arrow{0%,24%{opacity:.25;transform:translateX(-8px)}38%,100%{opacity:1;transform:none}}
  @keyframes d-row{0%,40%{background:#FFFFFF}54%,100%{background:#E4F0E8}}
  @keyframes d-pill{0%,52%{opacity:.35;transform:translateY(6px) scale(.97)}64%,100%{opacity:1;transform:none}}
  @media (max-width:47.99rem){
    .demo{height:400px}
    .dmail{width:86%}
    .dsys{width:90%;bottom:34px}
    .darrow{left:auto;right:6%;top:36%;transform:rotate(90deg)}
    .dpill{right:auto;left:0;top:47%}
  }
  @media (prefers-reduced-motion:reduce){ .dbody mark,.darrow,.dsys .dnew td,.dpill{animation:none !important;opacity:1;transform:none} }

  /* ---- homepage: results strip right under the hero ---- */
  #results{background:#FFFFFF !important;padding:0 !important;border-block:1px solid var(--line)}
  #results .actuals{display:grid;grid-template-columns:1fr;border-top:0;margin:0}
  #results .act{padding:26px 0;border-bottom:1px solid var(--line)}
  #results .act p{margin:0;max-width:none}
  .act-k{font-size:11.5px !important;text-transform:uppercase;color:var(--cu)}
  #results .act-n{font:700 clamp(46px,5.4vw,76px)/.95 var(--brand);letter-spacing:-.06em;color:var(--g);margin-top:12px !important}
  #results .act-w{font-size:15px;color:var(--ink-soft);margin-top:12px !important;max-width:34ch}
  #results .casenote{margin:0;padding:14px 0 20px;border-top:1px solid var(--line)}
  @media (min-width:48rem){
    #results .actuals{grid-template-columns:repeat(3,minmax(0,1fr))}
    #results .act{border-bottom:0;padding:36px 28px 34px 0}
    #results .act + .act{padding-left:28px;border-left:1px solid var(--line)}
  }

  /* ---- homepage rhythm below the strip ---- */
  #savings-home{background:radial-gradient(60% 60% at 50% 0%,#F1E6CF 0%,rgba(247,245,239,0) 70%),var(--paper) !important}
  #menu{background:#FFFFFF !important}
  #audit{background:var(--paper) !important}
  #note{background:#FFFFFF !important}
  .mh-center{text-align:center;margin:0 auto 40px;max-width:44rem}
  .mh-center h2,.mh-center p{margin-left:auto;margin-right:auto}

  /* ---- the calculator as an app window ---- */
  .app{max-width:980px;margin:0 auto;background:#FFFFFF;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);overflow:hidden}
  .appbar{display:flex;align-items:center;gap:7px;padding:13px 16px;border-bottom:1px solid #EFECE4;background:#FCFBF8}
  .appbar i{width:10px;height:10px;border-radius:50%;background:#E4DFD3;flex:0 0 auto}
  .appbar .calc-h{margin:0 0 0 10px;font:500 12.5px/1.3 var(--mono);color:var(--ink-soft);letter-spacing:0;max-width:none}
  .app .calc{display:grid;grid-template-columns:1fr;border:0;border-radius:0;box-shadow:none;padding:0;background:transparent;max-width:none}
  .calc-in{padding:26px 24px 10px}
  .calc-res{padding:24px;background:#FBFAF6;border-top:1px solid #EFECE4}
  .calc-row label{font-size:14.5px}
  .calc-v{font:600 15px var(--mono);color:var(--cu)}
  .calc-row input[type=range]{accent-color:#1F3833}
  .calc-row select{border-color:#CFCAB9;border-radius:var(--r)}
  .app .calc-out{border-top:0;padding-top:0;margin-top:0;gap:16px}
  .calc-n{font:700 clamp(32px,3.6vw,46px)/1 var(--brand);letter-spacing:-.05em;color:var(--g)}
  .calc-verdict{border-radius:var(--r)}
  .calc-cta{margin-top:18px}
  @media (min-width:52rem){
    .app .calc{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
    .calc-in{padding:30px 30px 18px}
    .calc-res{border-top:0;border-left:1px solid #EFECE4;padding:30px}
  }
  #savings-section .app{max-width:none}
  @media (min-width:64rem) and (max-width:79.99rem){ #savings-section .app .calc{grid-template-columns:1fr} #savings-section .calc-res{border-left:0;border-top:1px solid #EFECE4} }

  /* ---- cards ---- */
  .card,.casecard,.capcard,.pricebox,.tickets{background:#FFFFFF;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
  .capcard{transition:transform .15s,border-color .15s}
  .capcard:hover{transform:translateY(-2px);border-color:var(--g)}
  .tickets{border-radius:20px}
  .tk + .tk{border-color:var(--line)}
  .tk-price{font:700 34px/1 var(--brand);letter-spacing:-.05em}
  .tk-audit{background:var(--g)}
  .casecard .stat{font:700 44px/1 var(--brand);letter-spacing:-.05em}
  .chips button{border-radius:999px;border-color:#CFCAB9;background:#FFFFFF}
  .chips button[aria-pressed="true"]{background:var(--g);border-color:var(--g);color:#FFFFFF}

  /* ---- steps, audit, note ---- */
  .flow ol{counter-reset:step}
  .flow li::before{content:counter(step,decimal-leading-zero);font:600 13px var(--mono);color:var(--cu)}
  .audit-facts b{font-size:19px;letter-spacing:-.02em;color:var(--g)}
  .note-lede{font:600 clamp(22px,2.6vw,30px)/1.3 var(--brand);letter-spacing:-.035em;color:var(--g)}

  /* ---- forms, dialog ---- */
  .inquiry input[type=text],.inquiry input[type=email],.inquiry input[type=tel],.inquiry select,.inquiry textarea{border-color:#BDB8A9;border-radius:var(--r);background:#FFFFFF}
  .modal-panel{border-radius:20px;background:#FFFFFF}

  /* ---- closing call to action: a green card ---- */
  .ctaband{background:transparent !important;border-top:0 !important;padding:8px 0 var(--sp-section) !important}
  .ctaband .shell{background:var(--g);color:#F6F6E9;border-radius:24px;padding:56px;box-shadow:var(--shadow);
    background-image:linear-gradient(rgba(246,246,233,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(246,246,233,.05) 1px,transparent 1px);background-size:44px 44px}
  .ctaband .signoff{display:none}
  .ctaband h2{color:#FFFFFF;font-size:clamp(28px,3.4vw,44px);line-height:1.05;letter-spacing:-.048em;max-width:18ch}
  .ctaband p{color:rgba(246,246,233,.8)}
  .ctaband p.pullquote{color:var(--gold);font-size:16px;font-weight:500}
  .ctaband .btn-gold{background:var(--gold);border-color:var(--gold);color:var(--g)}
  .ctaband .btn-gold:hover{background:#F2BB80;border-color:#F2BB80;color:var(--g)}
  .ctaband .btn-gold::after{color:var(--g)}
  .ctaband .btn-outline{background:transparent;color:#FFFFFF;border-color:rgba(246,246,233,.45)}
  .ctaband .btn-outline:hover{border-color:var(--gold);color:var(--gold);background:transparent}
  .ctaband .mail,.ctaband .ctatel a{color:var(--gold);border-bottom-color:rgba(235,172,102,.45)}
  .ctaband .btn:focus-visible,.ctaband a:focus-visible{outline-color:var(--gold)}
  @media (max-width:47.99rem){ .ctaband{padding:0 0 var(--sp-section-m) !important} .ctaband .shell{padding:34px 22px;border-radius:18px;margin-inline:12px} }
  .tk-audit .btn-gold::after{color:var(--g)}

  /* ---- footer ---- */
  footer{background:var(--paper);border-top:1px solid var(--line)}
  footer a:hover{color:var(--g)}

  /* ---- about page logo ---- */
  .logoband{background-color:var(--paper)}
  .logoband .fulllogo{width:min(260px,62vw);height:auto;border-radius:24px;box-shadow:var(--shadow)}

  #results .act-n small{font-size:.3em;font-weight:600;letter-spacing:-.02em;color:var(--ink-soft);margin-left:6px}
  #results .act-n{white-space:nowrap}

  /* ---- phones: calculator stays inside the screen, the example stacks ---- */
  .app,.app .calc,.calc-in,.calc-res,.app .calc > *,.calc-row > *{min-width:0}
  .app{width:100%}
  .calc-row select{width:100%}
  @media (max-width:47.99rem){
    .calc-in{padding:20px 18px 6px}
    .calc-res{padding:20px 18px}
    .demo{height:auto;display:flex;flex-direction:column;gap:10px}
    .dcard{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:100%}
    .dmail,.dsys{width:100%}
    .darrow{position:static;align-self:center;transform:rotate(90deg);animation:none;opacity:1;font-size:22px;line-height:1}
    .dpill{position:static;align-self:flex-start;margin-top:4px}
    .demo figcaption{position:static;margin-top:2px}
  }

  /* the drafting grid frames the page top only, then fades out */
  .topbar + section{background-image:linear-gradient(180deg,rgba(247,245,239,.15) 0px,var(--paper) 380px),var(--grid) !important}
  @media (max-width:47.99rem){ .topbar + section{background-image:linear-gradient(180deg,rgba(247,245,239,.15) 0px,var(--paper) 300px),var(--grid) !important} }

  /* industry pages: the calculator gets the full width under its heading */
  #savings-section .shell:has(> .head){display:block !important}
  #savings-section .shell:has(> .head) > .head{margin-bottom:32px !important;max-width:44rem}
  #savings-section .app{max-width:980px}
  @media (min-width:52rem){ #savings-section .app .calc{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) !important} #savings-section .calc-res{border-top:0;border-left:1px solid #EFECE4} }

  /* MillHQ: its sections sit inside <main> */
  .topbar + main > section:first-child{background-color:var(--paper) !important;
    background-image:linear-gradient(180deg,rgba(247,245,239,.15) 0px,var(--paper) 380px),var(--grid) !important;
    background-size:auto,44px 44px,44px 44px !important;background-position:0 0,-1px -1px,-1px -1px !important}
  main > section.sec-light{background:var(--paper)}
  main > section.sec-light:nth-of-type(even){background:#FFFFFF}
  .mhq-waitlist{background:#FFFFFF !important}

  /* homepage reading section: guides as a two-column list, then the agency and MillHQ lines */
  #note .reading{display:grid;grid-template-columns:1fr;gap:0 40px;margin:0 0 28px;border-top:1px solid var(--line)}
  #note .reading li{border-bottom:1px solid var(--line)}
  #note .reading a{padding:16px 0;font-size:17px;font-weight:600;letter-spacing:-.015em;color:var(--g);text-decoration:none;display:flex;justify-content:space-between;gap:16px}
  #note .reading a::after{content:"\2192";color:var(--gold);flex:0 0 auto}
  #note .reading a:hover{color:var(--cu)}
  #note .also{display:grid;gap:12px 40px;border-top:0;padding-top:4px;margin:0}
  @media (min-width:48rem){ #note .reading{grid-template-columns:1fr 1fr} #note .also{grid-template-columns:1fr 1fr} }
  #menu .menu-links{margin-bottom:0}

  /* the wordmark shows from 360px up; only the smallest phones get the badge alone */
  @media (max-width:22.5rem){ .brandname{display:flex} }
  @media (max-width:22.4rem){ .brandname{display:none} }
  @media (min-width:22.45rem) and (max-width:24rem){ .brandname{font-size:14px} .brandname small{font-size:10px} .topbar .shell{gap:.4rem} .navcta{padding:0 .6rem;font-size:13px} }

/* =====================================================================
   LANDING PAGE MOTION: quick, subtle, and off for reduced motion.
   Content is only hidden while the .anim class is present, and a
   4-second safety class shows everything regardless.
   ===================================================================== */
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  @keyframes fadein{from{opacity:0}to{opacity:1}}
  html.anim .hx-copy > *{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
  html.anim .hx-copy > :nth-child(1){animation-delay:.05s}
  html.anim .hx-copy > :nth-child(2){animation-delay:.14s}
  html.anim .hx-copy > :nth-child(3){animation-delay:.26s}
  html.anim .hx-copy > :nth-child(4){animation-delay:.36s}
  html.anim .demo{animation:rise .9s cubic-bezier(.2,.7,.2,1) .45s both}
  html.anim .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
  html.anim .reveal.in,html.anim-safe .reveal{opacity:1;transform:none}
  .ind-panel:not([hidden]){animation:fadein .35s ease both}
  .calc-n{transition:color .2s}
  @media (prefers-reduced-motion:reduce){
    html.anim .hx-copy > *,html.anim .demo,.ind-panel:not([hidden]){animation:none !important}
    html.anim .reveal{opacity:1 !important;transform:none !important;transition:none !important}
  }

  /* build card prices read "From" then the amount */
  .tk-price span{display:block;margin:0 0 4px;font:500 11.5px/1.3 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft)}

/* =====================================================================
   HERO EXAMPLE, animated as a story (8s loop, phones and desktop):
   the email is read, the arrow nudges, the new order drops into the
   shop system, then the result tag pops in. Static for reduced motion.
   ===================================================================== */
  .dmail{overflow:hidden}
  .dmail::after{content:"";position:absolute;left:0;right:0;top:10%;height:2px;opacity:0;pointer-events:none;
    background:linear-gradient(90deg,rgba(235,172,102,0),#EBAC66 30%,#EBAC66 70%,rgba(235,172,102,0));box-shadow:0 0 12px rgba(235,172,102,.7);
    animation:ex-scan 8s cubic-bezier(.4,0,.2,1) infinite}
  .dbody mark{animation:ex-mark 8s ease infinite}
  .darrow{animation:ex-arrow-x 8s ease infinite}
  .dsys-h span{animation:ex-tag 8s ease infinite}
  .dsys .dnew td{animation:ex-row 8s cubic-bezier(.2,.7,.2,1) infinite}
  .dpill{animation:ex-pill 8s cubic-bezier(.2,.8,.2,1.2) infinite}
  @keyframes ex-scan{0%,4%{top:10%;opacity:0}7%{opacity:1}24%{top:90%;opacity:1}28%,100%{top:90%;opacity:0}}
  @keyframes ex-mark{0%,8%{background:rgba(251,235,212,0)}18%,90%{background:#F6D39E}100%{background:rgba(251,235,212,0)}}
  @keyframes ex-arrow-x{0%,26%{opacity:.25;transform:translateX(-10px)}33%{opacity:1;transform:translateX(6px)}38%,92%{opacity:1;transform:none}100%{opacity:.25;transform:translateX(-10px)}}
  @keyframes ex-arrow-y{0%,26%{opacity:.25;transform:rotate(90deg) translateX(-8px)}33%{opacity:1;transform:rotate(90deg) translateX(6px)}38%,92%{opacity:1;transform:rotate(90deg)}100%{opacity:.25;transform:rotate(90deg) translateX(-8px)}}
  @keyframes ex-row{0%,36%{opacity:0;background:#FFFFFF}44%{opacity:1;background:#C9E3D3}58%,92%{opacity:1;background:#E4F0E8}100%{opacity:0;background:#FFFFFF}}
  @keyframes ex-tag{0%,40%{opacity:.35}46%,92%{opacity:1}100%{opacity:.35}}
  @keyframes ex-pill{0%,54%{opacity:0;transform:translateY(8px) scale(.85)}62%{opacity:1;transform:translateY(0) scale(1.06)}67%,92%{opacity:1;transform:none}100%{opacity:0;transform:translateY(4px) scale(.95)}}
  @media (max-width:47.99rem){ .darrow{animation:ex-arrow-y 8s ease infinite} }
  @media (prefers-reduced-motion:reduce){
    .dmail::after{display:none}
    .dbody mark,.darrow,.dsys-h span,.dsys .dnew td,.dpill{animation:none !important;opacity:1 !important}
    .dbody mark{background:#F6D39E}
    .dsys .dnew td{background:#E4F0E8}
  }
  /* iPhone: no automatic underlines inside the example */
  .demo a[href^="x-apple-data-detectors"],.demo a[x-apple-data-detectors]{color:inherit !important;text-decoration:none !important}

  /* the example holds at its first frame until it scrolls into view */
  html.anim .demo:not(.play) .dmail::after,html.anim .demo:not(.play) .dbody mark,html.anim .demo:not(.play) .darrow,
  html.anim .demo:not(.play) .dsys-h span,html.anim .demo:not(.play) .dsys .dnew td,html.anim .demo:not(.play) .dpill{animation-play-state:paused}