: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(.stepper){display:block}
    section .shell:has(> .head):has(.cases) > .head,
    section .shell:has(> .head):has(.tiers) > .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}