  /* ============ BIO SANS (self-hosted — .otf files live in the root /fonts folder) ============ */
  @font-face{font-family:"Bio Sans";src:url("../fonts/bio-sans.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
  @font-face{font-family:"Bio Sans";src:url("../fonts/bio-sans-bold.otf") format("opentype");font-weight:600;font-style:normal;font-display:swap}
  @font-face{font-family:"Bio Sans";src:url("../fonts/bio-sans-bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}
  @font-face{font-family:"Bio Sans";src:url("../fonts/bio-sans-bold.otf") format("opentype");font-weight:800;font-style:normal;font-display:swap}

  /* ============ TOKENS ============ */
  :root{
    --green:#53a030;         /* brand green */
    --green-bright:#63b83c;
    --green-deep:#3f7d24;
    --ink:#161616;           /* brand black */
    --ink-deep:#0f0f0f;
    --ink-deeper:#080808;

    --paper:#f5f7f2;
    --card:#ffffff;
    --line:#e4e8e0;
    --text:#161616;
    --muted:#5c6459;
    --muted-2:#7c8377;

    /* always-dark surfaces */
    --d-bg:#161616;
    --d-line:#2c2c2c;
    --d-text:#f2f4ef;
    --d-muted:#a6ada2;

    --radius:14px;
    --radius-sm:9px;
    --shadow:0 1px 2px rgba(0,0,0,.06),0 12px 30px -12px rgba(0,0,0,.18);
    --shadow-lg:0 30px 60px -20px rgba(0,0,0,.4);
    --maxw:1160px;
    --body:"Open Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
    --font:"Bio Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
    --display:"Bio Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  }
  @media (prefers-color-scheme:dark){
    :root{
      --paper:#0f0f0f;--card:#1a1a1a;--line:#2a2a2a;--text:#f0f2ed;--muted:#a0a79c;--muted-2:#868d82;
      --shadow:0 1px 2px rgba(0,0,0,.5),0 14px 34px -14px rgba(0,0,0,.7);
    }
  }
  :root[data-theme="dark"]{
    --paper:#0f0f0f;--card:#1a1a1a;--line:#2a2a2a;--text:#f0f2ed;--muted:#a0a79c;--muted-2:#868d82;
    --shadow:0 1px 2px rgba(0,0,0,.5),0 14px 34px -14px rgba(0,0,0,.7);
  }
  :root[data-theme="light"]{
    --paper:#f5f7f2;--card:#ffffff;--line:#e4e8e0;--text:#161616;--muted:#5c6459;--muted-2:#7c8377;
    --shadow:0 1px 2px rgba(0,0,0,.06),0 12px 30px -12px rgba(0,0,0,.18);
  }

  /* ============ BASE ============ */
  *{box-sizing:border-box}
  html{scroll-behavior:smooth;scroll-padding-top:80px}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
  body{margin:0;background:var(--paper);color:var(--text);
    font-family:var(--body);font-size:17px;line-height:1.6;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.04;letter-spacing:-.01em;text-wrap:balance;margin:0}
  h1,h2{text-transform:uppercase;letter-spacing:0}
  p{margin:0}
  a{color:inherit;text-decoration:none}
  img,svg{display:block;max-width:100%}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
  .nav,.callbar{font-family:var(--font)}
  .eyebrow{font-family:var(--body);font-weight:700;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--green-deep)}
  .eyebrow.on-dark{color:var(--green-bright)}
  :focus-visible{outline:3px solid var(--green-bright);outline-offset:2px;border-radius:6px}

  /* ============ LOGO ============ */
  .pps-word{height:36px;width:auto}
  .footer-logo{height:44px}

  /* ============ BUTTONS ============ */
  .btn{display:inline-flex;align-items:center;gap:.55em;font-family:var(--font);font-weight:800;
    font-size:1rem;padding:.92em 1.5em;border-radius:var(--radius-sm);border:2px solid transparent;
    cursor:pointer;transition:transform .12s ease,box-shadow .2s ease,background .2s ease;white-space:nowrap}
  .btn:active{transform:translateY(1px)}
  .btn-green{background:var(--green);color:#fff;box-shadow:0 8px 20px -8px rgba(83,160,48,.75)}
  .btn-green:hover{background:var(--green-bright)}
  .btn-ghost{background:transparent;border-color:rgba(255,255,255,.28);color:#fff}
  .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
  .btn-lg{font-size:1.08rem;padding:1.05em 1.8em}

  /* ============ HEADER ============ */
  header.site{position:sticky;top:0;z-index:50;background:rgba(22,22,22,.9);
    backdrop-filter:blur(10px);border-bottom:1px solid var(--d-line)}
  .nav{position:relative;display:flex;align-items:center;justify-content:space-between;height:70px;gap:1rem}
  .desktop-nav{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:1.75rem}
  .desktop-nav a{color:var(--d-muted);font-weight:700;font-size:.92rem;white-space:nowrap}
  .desktop-nav a:hover{color:#fff}
  .nav .cta{display:flex;align-items:center;gap:.9rem}
  .phone-link{display:inline-flex;align-items:center;gap:.5rem;color:#fff;font-weight:800;font-size:1.05rem}
  .phone-link small{display:block;color:var(--green-bright);font-size:.64rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;line-height:1}
  @media(max-width:1050px){.desktop-nav{display:none}}
  @media(max-width:560px){.header-quote{display:none}}

  /* ============ HERO ============ */
  .hero{position:relative;background:var(--d-bg);color:var(--d-text);overflow:hidden;border-bottom:4px solid var(--green)}
  .hero::before{content:"";position:absolute;inset:0;pointer-events:none;
    background:
      radial-gradient(1100px 480px at 80% -12%,rgba(83,160,48,.22),transparent 60%),
      radial-gradient(760px 420px at 6% 112%,rgba(83,160,48,.10),transparent 60%)}
  .hero .roof{position:absolute;right:-5%;bottom:-4%;width:min(50vw,660px);opacity:.85;pointer-events:none}
  .hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:48px;
    padding:60px 22px 72px;align-items:center}
  .hero-grid>.quote-card{width:min(100%,400px);justify-self:end}
  @media(max-width:940px){.hero-grid{grid-template-columns:1fr;gap:30px;padding:42px 22px 52px}.hero-grid>.quote-card{width:100%;justify-self:stretch}}
  .hero h1{font-size:clamp(2rem,5.6vw,4.5rem);letter-spacing:-.01em}
  .hero h1 .l1{white-space:normal}
  .hero h1 .hl{color:var(--green-bright)}
  .hero .sub{margin-top:1.15rem;font-size:1.18rem;color:var(--d-muted);max-width:40ch}
  .hero .badges{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem}
  .chip{display:inline-flex;align-items:center;gap:.45rem;background:rgba(255,255,255,.06);
    border:1px solid var(--d-line);color:var(--d-text);padding:.5rem .85rem;border-radius:999px;font-size:.85rem;font-weight:700}
  .chip svg{width:16px;height:16px;color:var(--green-bright)}
  .hero .actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem}
  .hero .actions .btn{width:min(100%,240px);justify-content:center}

  /* quote card */
  .quote-card{background:var(--card);color:var(--text);border-radius:var(--radius);
    box-shadow:var(--shadow-lg);padding:26px 24px;border:1px solid var(--line)}
  .quote-card h3{font-family:var(--body);font-weight:700;font-size:1.28rem;line-height:1.25;
    letter-spacing:.01em;padding-top:.04em}
  .quote-card .qsub{color:var(--muted);font-size:.95rem;margin-top:.25rem}
  .field{margin-top:.85rem}
  .field label{display:block;font-size:.78rem;font-weight:700;letter-spacing:.04em;
    text-transform:uppercase;color:var(--muted);margin-bottom:.32rem}
  .field input,.field select{width:100%;padding:.8rem .9rem;border:1.5px solid var(--line);
    border-radius:10px;font:inherit;font-size:1rem;background:var(--paper);color:var(--text)}
  .field input:focus,.field select:focus{border-color:var(--green);outline:none;background:var(--card)}
  .quote-card .btn{width:100%;justify-content:center;margin-top:1.05rem}
  .quote-card .btn:disabled{cursor:wait;opacity:.72;transform:none}
  .quote-card .fineprint{font-size:.78rem;color:var(--muted-2);margin-top:.7rem;text-align:center}
  .hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  .qerror{display:flex;align-items:flex-start;gap:.6rem;background:#fdecec;color:#a33;
    border:1px solid #f3c8c8;border-radius:10px;padding:.8rem 1rem;margin-bottom:1rem;font-size:.92rem}
  .qerror svg{flex:none;margin-top:.1rem}
  .qerror-messages{display:grid;gap:.3rem}
  .qerror-messages p{margin:0}
  .rate-limit-dialog{width:min(92vw,460px);border:0;border-radius:var(--radius);padding:0;
    color:var(--text);background:var(--card);box-shadow:var(--shadow-lg)}
  .rate-limit-dialog::backdrop{background:rgba(16,16,16,.68);backdrop-filter:blur(3px)}
  .rate-limit-dialog form{position:relative;padding:30px}
  .rate-limit-dialog h3{font-size:1.45rem;padding-right:2rem}
  .rate-limit-dialog p{margin-top:.7rem;color:var(--muted)}
  .rate-limit-dialog .dialog-actions{display:grid;gap:.7rem;margin-top:1.4rem}
  .rate-limit-dialog .btn{justify-content:center}
  .rate-limit-dialog .dialog-dismiss{border:0;background:transparent;color:var(--muted);
    padding:.55rem;font:inherit;font-weight:700;cursor:pointer}
  .rate-limit-dialog .dialog-close{position:absolute;right:16px;top:12px;border:0;background:transparent;
    color:var(--muted);font:inherit;font-size:1.65rem;line-height:1;cursor:pointer}

  /* ============ TRUST STRIP (credentials, not stats) ============ */
  .trust{background:var(--ink-deep);color:#fff;border-bottom:1px solid var(--d-line)}
  .trust-in{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:22px}
  .cred{display:flex;align-items:center;gap:12px;justify-content:center;text-align:left}
  .cred svg{width:26px;height:26px;color:var(--green-bright);flex:none}
  .cred b{display:block;font-size:.98rem;line-height:1.15}
  .cred span{display:block;font-size:.78rem;color:var(--d-muted)}
  @media(max-width:760px){
    .trust-in{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:20px 14px}
    .cred{display:grid;grid-template-columns:26px minmax(0,1fr);align-items:start;justify-content:stretch;min-width:0}
    .cred>div{min-width:0}
    .cred b{min-height:2.3em}
  }

  /* ============ SECTION SHELL ============ */
  section.band{padding:82px 0}
  @media(max-width:720px){section.band{padding:56px 0}}
  .head{max-width:56ch;margin-bottom:40px}
  .head h2{font-size:clamp(1.9rem,4vw,2.9rem);margin-top:.55rem}
  .head p{margin-top:.9rem;color:var(--muted);font-size:1.1rem}
  .center{margin-left:auto;margin-right:auto;text-align:center}

  /* ============ COMPLIANCE CALLOUT ============ */
  #services{border-bottom:0}
  .compliance{border:0}
  .comp-card{display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:center;
    background:rgba(83,160,48,.07);border:1px solid var(--line);border-left:6px solid var(--green);
    border-radius:var(--radius);padding:26px 30px;box-shadow:var(--shadow)}
  .comp-card .ic{width:52px;height:52px;color:var(--green-deep);flex:none}
  .comp-card h3{font-family:var(--font);font-weight:800;font-size:1.35rem;letter-spacing:-.01em}
  .comp-card p{color:var(--muted);margin-top:.35rem;max-width:64ch}
  @media(max-width:820px){.comp-card{grid-template-columns:1fr;gap:16px}.comp-card .btn{width:100%;justify-content:center}}

  /* ============ SERVICES ============ */
  .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  @media(max-width:900px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:560px){.svc-grid{grid-template-columns:1fr}}
  .svc{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
    padding:26px 24px;transition:transform .16s ease,box-shadow .2s ease,border-color .2s;position:relative}
  .svc:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#cfd8c8}
  .svc .icon{width:48px;height:48px;border-radius:12px;background:rgba(83,160,48,.12);
    color:var(--green-deep);display:grid;place-items:center;margin-bottom:16px}
  .svc .icon svg{width:26px;height:26px}
  .svc h3{font-family:var(--font);font-weight:800;font-size:1.18rem;letter-spacing:-.01em}
  .svc p{color:var(--muted);font-size:.97rem;margin-top:.5rem}

  /* ============ WHY / SPLIT ============ */
  .split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
  @media(max-width:880px){.split{grid-template-columns:1fr;gap:34px}}
  .why-list{display:grid;gap:18px;margin-top:26px}
  .why-item{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
  .why-item .tick{width:30px;height:30px;flex:none;border-radius:8px;background:var(--green);
    color:#fff;display:grid;place-items:center}
  .why-item .tick svg{width:18px;height:18px}
  .why-item h4{margin:0 0 .15rem;font-family:var(--font);font-size:1.05rem;font-weight:800}
  .why-item p{margin:0;color:var(--muted);font-size:.96rem}
  .why-visual{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);
    aspect-ratio:4/5;background:var(--ink)}
  .why-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 14%}
  .why-visual .cap{position:absolute;left:0;right:0;bottom:0;padding:104px 26px 24px;
    display:flex;gap:16px 26px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;
    background:linear-gradient(to top,rgba(8,8,8,.98) 0%,rgba(8,8,8,.9) 26%,rgba(8,8,8,.5) 58%,rgba(8,8,8,.12) 82%,transparent 100%);color:#fff}
  .why-visual .cap-item{display:flex;align-items:center;gap:12px}
  .why-visual .cap-lic{flex-direction:column;align-items:flex-start;gap:3px;
    border-left:3px solid var(--green);padding-left:13px}
  .why-visual .cap-k{font-family:var(--font);font-size:.72rem;letter-spacing:.14em;
    text-transform:uppercase;color:var(--green-bright);font-weight:700;text-shadow:0 1px 6px rgba(0,0,0,.8)}
  .why-visual .cap-v{font-family:var(--display);font-weight:800;font-size:1.2rem;line-height:1.05;text-shadow:0 2px 10px rgba(0,0,0,.6)}
  .why-visual .cap-guar .seal{width:30px;height:30px;color:var(--green-bright);flex:none}

  /* ============ PROCESS ============ */
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:s}
  @media(max-width:820px){.steps{grid-template-columns:1fr}}
  .step{counter-increment:s;background:var(--card);border:1px solid var(--line);
    border-radius:var(--radius);padding:28px 26px;position:relative}
  .step .n{width:48px;height:48px;border-radius:12px;background:var(--green);color:#fff;
    display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:1.5rem;margin-bottom:16px}
  .step .n::before{content:counter(s)}
  .step h3{font-family:var(--font);font-weight:800;font-size:1.18rem}
  .step p{color:var(--muted);margin-top:.5rem;font-size:.97rem}

  /* ============ REASSURANCE STRIP ============ */
  .reassure{background:var(--card);border-bottom:1px solid var(--line)}
  .reassure .wrap{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;padding:34px 22px}
  .reassure h3{font-family:var(--display);font-size:clamp(1.4rem,3vw,2rem);letter-spacing:-.02em}
  .reassure p{color:var(--muted);margin-top:.5rem;max-width:60ch}
  @media(max-width:760px){.reassure .wrap{grid-template-columns:1fr}.reassure .btn{width:100%;justify-content:center}}

  /* ============ FAQ ============ */
  .faq{max-width:820px;margin:0 auto;display:grid;gap:12px}
  details{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:4px 20px}
  details[open]{border-color:#cfd8c8}
  summary{cursor:pointer;list-style:none;padding:18px 0;font-weight:800;font-family:var(--font);
    font-size:1.05rem;display:flex;justify-content:space-between;align-items:center;gap:16px}
  summary::-webkit-details-marker{display:none}
  summary .pm{width:24px;height:24px;flex:none;color:var(--green);transition:transform .2s}
  details[open] summary .pm{transform:rotate(45deg)}
  details p{color:var(--muted);padding:0 0 20px;margin:0}

  /* ============ FINAL CTA ============ */
  .final{background:var(--ink-deep);color:#fff;position:relative;overflow:hidden;border-top:4px solid var(--green)}
  .final::before{content:"";position:absolute;inset:0;
    background:radial-gradient(800px 400px at 50% -30%,rgba(83,160,48,.3),transparent 60%)}
  .final .wrap{position:relative;text-align:center;padding:76px 22px}
  .final h2{font-size:clamp(2rem,5vw,3.2rem)}
  .final p{color:var(--d-muted);font-size:1.15rem;margin:1rem auto 0;max-width:52ch}
  .final .phone-big{font-family:var(--display);font-size:clamp(1.7rem,4vw,2.5rem);color:var(--green-bright);margin-top:1.4rem}
  .final .actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:1.6rem}
  .final .actions .btn{width:min(100%,220px);justify-content:center}

  /* ============ FOOTER ============ */
  footer.site{background:var(--ink-deeper);color:var(--d-muted);padding:54px 0 40px;border-top:1px solid var(--d-line)}
  .foot-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:36px}
  .footer-contact{position:relative;top:30px}
  @media(max-width:760px){.foot-grid{grid-template-columns:1fr;gap:26px}}
  footer.site h4{color:#fff;font-family:var(--font);font-size:.8rem;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;margin:0 0 14px}
  footer.site a{display:block;padding:.28rem 0;color:var(--d-muted)}
  footer.site a:hover{color:var(--green-bright)}
  .foot-bottom{border-top:1px solid var(--d-line);margin-top:36px;padding-top:22px;
    display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.85rem}
  .foot-licence-code::before{content:" · "}
  @media(max-width:700px){
    .foot-licence-code{display:block}
    .foot-licence-code::before{content:""}
  }

  /* ============ MOBILE CALL BAR ============ */
  .callbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
    grid-template-columns:1fr 1fr;gap:1px;background:var(--d-line);box-shadow:0 -6px 20px rgba(0,0,0,.3)}
  .callbar a{padding:15px;text-align:center;font-weight:800;font-size:1rem;display:flex;align-items:center;justify-content:center;gap:.5rem}
  .callbar .c1{background:var(--green);color:#fff}
  .callbar .c2{background:var(--ink);color:#fff}
  @media(max-width:700px){.callbar{display:grid}body{padding-bottom:56px}}

