/*
Theme Name: Ventilationsmästarna Theme
Theme URI: https://ventilationsmastarna.se/
Author: Muhammad Saleem
Author URI: https://saleemwahid.com
Description: Custom WordPress theme developed by Muhammad Saleem for Ventilationsmästarna, designed for professional ventilation cleaning and ventilation services. Built with WordPress and Elementor compatibility while preserving the original website design.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: ventilationsmastarna
*/

  @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

  :root{
    --bg:#F5F7F6;
    --surface:#FFFFFF;
    --surface-2:#EAF0EE;
    --ink:#0E2A29;
    --ink-soft:#4B6664;
    --teal:#146B64;
    --teal-deep:#0B4744;
    --teal-bright:#1C8A80;
    --amber:#C97A2B;
    --line:#D8E3E0;
    --shadow: 0 20px 60px -30px rgba(11,71,68,0.35);
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#0A1615;
      --surface:#0F1E1D;
      --surface-2:#153230;
      --ink:#EAF3F1;
      --ink-soft:#A9C4C1;
      --teal:#4FD1C0;
      --teal-deep:#2E9C90;
      --teal-bright:#5FE0CE;
      --amber:#E3A25C;
      --line:#1E3A38;
      --shadow: 0 20px 60px -30px rgba(0,0,0,0.6);
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"]{
    --bg:#0A1615;
    --surface:#0F1E1D;
    --surface-2:#153230;
    --ink:#EAF3F1;
    --ink-soft:#A9C4C1;
    --teal:#4FD1C0;
    --teal-deep:#2E9C90;
    --teal-bright:#5FE0CE;
    --amber:#E3A25C;
    --line:#1E3A38;
    --shadow: 0 20px 60px -30px rgba(0,0,0,0.6);
    color-scheme: dark;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;display:block;}
  a{color:inherit;}
  .wrap{max-width:1180px;margin:0 auto;padding:0 28px;}
  h1,h2,h3{
    font-family:'Fraunces', Georgia, serif;
    font-weight:600;
    text-wrap:balance;
    margin:0;
    color:var(--ink);
  }
  .eyebrow{
    font-family:'IBM Plex Mono', ui-monospace, monospace;
    font-size:0.78rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--teal);
    display:inline-flex;
    align-items:center;
    gap:10px;
  }
  .eyebrow::before{
    content:"";
    width:22px;height:1px;
    background:var(--teal);
    display:inline-block;
  }
  p{margin:0;}
  .lede{
    color:var(--ink-soft);
    max-width:52ch;
    font-size:1.08rem;
  }
  .btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-family:'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
    font-weight:600;
    font-size:0.98rem;
    padding:14px 26px;
    border-radius:100px;
    text-decoration:none;
    border:1px solid transparent;
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
    white-space:nowrap;
  }
  .btn:hover{transform:translateY(-2px);}
  .btn-primary{
    background:var(--teal-deep);
    color:#F5F7F6;
    box-shadow:var(--shadow);
  }
  .btn-primary:hover{background:var(--teal);}
  .btn-ghost{
    background:transparent;
    border-color:var(--line);
    color:var(--ink);
  }
  .btn-ghost:hover{border-color:var(--teal);color:var(--teal);}
  .btn-ghost svg{width:16px;height:16px;}

  /* ---------- NAV ---------- */
  header.site{
    position:sticky;top:0;z-index:50;
    background:color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
    transform:translateY(0);
    transition:transform .28s ease;
  }
  header.site.site--hidden{transform:translateY(-100%);}
  .nav{
    display:flex;align-items:center;justify-content:space-between;
    padding:18px 28px;
    max-width:1180px;margin:0 auto;
  }
  .brand{
    display:flex;align-items:center;gap:10px;
    font-family:'Fraunces', Georgia, 'Times New Roman', serif;font-weight:600;font-size:1.15rem;
    text-decoration:none;color:var(--ink);
  }
  .brand .mark{width:30px;height:30px;flex:none;}
  .navlinks{
    display:flex;gap:30px;list-style:none;margin:0;padding:0;
    font-size:0.95rem;font-weight:500;
  }
  .navlinks a{text-decoration:none;color:var(--ink-soft);transition:color .15s;}
  .navlinks a:hover{color:var(--teal);}
  .navcta{display:flex;align-items:center;gap:18px;}
  .navtoggle{
    display:none;background:none;border:none;cursor:pointer;padding:6px;
    width:40px;height:40px;flex:none;align-items:center;justify-content:center;
    flex-direction:column;gap:5px;
  }
  .navtoggle span{display:block;width:22px;height:2px;border-radius:2px;background:var(--ink);transition:transform .2s,opacity .2s;}
  header.site.menu-open{position:fixed;top:0;left:0;right:0;}

  /* mobile slide-in drawer ("rullgardin") */
  .mobilemenu{position:fixed;inset:0;z-index:100;visibility:hidden;}
  .mobilemenu-backdrop{
    position:absolute;inset:0;background:rgba(6,16,15,0.55);
    opacity:0;transition:opacity .25s ease;
  }
  .mobilemenu-panel{
    position:absolute;top:0;left:0;bottom:0;width:min(320px,84vw);
    background:var(--surface);border-right:1px solid var(--line);
    box-shadow:24px 0 60px -20px rgba(0,0,0,0.35);
    transform:translateX(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);
    display:flex;flex-direction:column;padding:20px 22px 28px;overflow-y:auto;
  }
  .mobilemenu.is-open{visibility:visible;}
  .mobilemenu.is-open .mobilemenu-backdrop{opacity:1;}
  .mobilemenu.is-open .mobilemenu-panel{transform:translateX(0);}
  .mobilemenu-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;}
  .mobilemenu-close{
    background:none;border:1px solid var(--line);border-radius:10px;
    width:38px;height:38px;color:var(--ink);cursor:pointer;font-size:1.3rem;line-height:1;
  }
  .mobilemenu-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
  .mobilemenu-links a{
    display:block;padding:14px 4px;text-decoration:none;color:var(--ink);
    font-family:'Fraunces', Georgia, 'Times New Roman', serif;font-size:1.15rem;font-weight:500;
    border-bottom:1px solid var(--line);
  }
  .mobilemenu-links a:hover{color:var(--teal);}
  .mobilemenu .navcta{margin-top:22px;}
  .mobilemenu .btn-primary{width:100%;justify-content:center;}
  body.menu-locked{overflow:hidden;}

  @media (max-width:880px){
    .navlinks{display:none;}
    header.site .navcta{display:none;}
    .mobilemenu .navcta{display:flex;}
    .navtoggle{display:flex;}
  }
  @media (min-width:881px){
    .mobilemenu{display:none;}
  }

  section{padding:96px 0;}
  @media (max-width:720px){section{padding:64px 0;}}

  /* ---------- HERO ---------- */
  .hero{padding-top:64px;padding-bottom:60px;}
  .hero .wrap{
    display:grid;
    grid-template-columns:1.05fr 0.95fr;
    gap:40px;
    align-items:center;
  }
  @media (max-width:920px){
    .hero .wrap{grid-template-columns:1fr;}
  }
  .hero h1{font-size:clamp(2.3rem,4.6vw,3.6rem);line-height:1.06;margin:18px 0 20px;}
  .hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px;}
  .hero-stats{
    display:flex;gap:28px;margin-top:48px;flex-wrap:wrap;
  }
  .stat b{
    display:block;font-family:'Fraunces', Georgia, 'Times New Roman', serif;font-size:1.6rem;color:var(--teal-deep);
  }
  :root[data-theme="dark"] .stat b, @media (prefers-color-scheme:dark){ }
  .stat span{font-size:0.85rem;color:var(--ink-soft);}
  .hero-art{position:relative;}
  .hero-art svg{width:100%;height:auto;}

  /* ---------- FEATURE STRIP ---------- */
  .features{
    background:var(--surface);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:56px 0;
  }
  .feat-grid{
    display:grid;grid-template-columns:repeat(4,1fr);gap:36px;
  }
  @media (max-width:880px){.feat-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:520px){.feat-grid{grid-template-columns:1fr;}}
  .feat{display:flex;flex-direction:column;gap:12px;}
  .feat .icn{
    width:44px;height:44px;color:var(--teal);
  }
  .feat h3{font-size:1.02rem;font-family:'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;font-weight:600;}
  .feat p{color:var(--ink-soft);font-size:0.92rem;}

  /* ---------- SERVICES ---------- */
  .services-head{
    display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:52px;
  }
  @media (max-width:760px){.services-head{flex-direction:column;align-items:start;}}
  .services-head h2{font-size:clamp(1.8rem,3vw,2.5rem);max-width:14ch;}
  .services-head .lede{margin-top:14px;}
  .svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line);border:1px solid var(--line);border-radius:20px;overflow:hidden;}
  @media (max-width:920px){.svc-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:520px){.svc-grid{grid-template-columns:1fr;}}
  .svc-card{
    background:var(--surface);padding:34px 28px;display:flex;flex-direction:column;gap:16px;min-height:230px;
    transition:background .2s;
  }
  .svc-card:hover{background:var(--surface-2);}
  .svc-index{font-family:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;font-size:0.78rem;color:var(--teal);letter-spacing:.06em;}
  .svc-card h3{font-size:1.12rem;font-weight:600;font-family:'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;}
  .svc-card p{color:var(--ink-soft);font-size:0.92rem;flex:1;}
  .svc-icn{width:34px;height:34px;color:var(--teal-deep);}

  /* ---------- VENTILATION SKETCH (dark band) ---------- */
  .sketch{
    background:var(--teal-deep);
    color:#EAF3F1;
    padding:110px 0;
    position:relative;
    overflow:hidden;
  }
  .sketch .eyebrow{color:#8FE0D4;}
  .sketch .eyebrow::before{background:#8FE0D4;}
  .sketch h2{color:#F4FAF8;font-size:clamp(1.9rem,3.4vw,2.7rem);max-width:16ch;margin:18px 0 18px;}
  .sketch .lede{color:#BFE0DA;max-width:46ch;}
  .sketch-grid{
    display:grid;grid-template-columns:0.95fr 1.05fr;gap:60px;align-items:center;margin-top:56px;
  }
  @media (max-width:920px){.sketch-grid{grid-template-columns:1fr;}}
  .benefit-list{list-style:none;margin:34px 0 0;padding:0;display:flex;flex-direction:column;gap:16px;}
  .benefit-list li{display:flex;gap:14px;align-items:flex-start;font-size:1rem;color:#DCEFEA;}
  .benefit-list svg{width:20px;height:20px;flex:none;margin-top:2px;color:#8FE0D4;}
  .sketch-art{position:relative;}
  .sketch-art svg{width:100%;height:auto;}
  .sketch-toggle{
    display:inline-flex;gap:4px;background:rgba(255,255,255,0.08);padding:4px;border-radius:100px;margin-top:34px;
    font-family:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;font-size:0.78rem;
  }
  .sketch-toggle button{
    border:none;background:transparent;color:#BFE0DA;padding:9px 16px;border-radius:100px;cursor:pointer;font-family:inherit;font-size:inherit;letter-spacing:.04em;
  }
  .sketch-toggle button.active{background:#0B4744;color:#8FE0D4;}
  :root[data-theme="dark"] .sketch-toggle button.active, .sketch-toggle button.active{}
  .duct-line{fill:none;stroke:#8FE0D4;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
  .duct-line.warm{stroke:var(--amber);}
  .house-line{fill:none;stroke:#BFE0DA;stroke-width:1.6;opacity:0.55;}
  .duct-node{fill:#0B4744;stroke:#8FE0D4;stroke-width:2;}
  .duct-label{font-family:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;font-size:9px;fill:#BFE0DA;letter-spacing:.03em;}

  @media (prefers-reduced-motion:no-preference){
    .draw{stroke-dasharray:400;stroke-dashoffset:400;transition:stroke-dashoffset 1.4s ease;}
    .sketch-art.revealed .draw{stroke-dashoffset:0;}
    .fadein{opacity:0;transform:translateY(6px);transition:opacity .7s ease, transform .7s ease;}
    .sketch-art.revealed .fadein{opacity:1;transform:translateY(0);}
  }

  /* ---------- FAQ ---------- */
  .faq-wrap{max-width:820px;margin:0 auto;padding:0 28px;}
  .faq-head{text-align:center;margin-bottom:48px;}
  .faq-head h2{font-size:clamp(1.8rem,3vw,2.4rem);}
  .faq-item{border-bottom:1px solid var(--line);}
  .faq-q{
    width:100%;text-align:left;background:none;border:none;cursor:pointer;
    display:flex;justify-content:space-between;align-items:center;gap:20px;
    padding:24px 0;font-family:'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;font-size:1.02rem;font-weight:600;color:var(--ink);
  }
  .faq-q .plus{
    width:22px;height:22px;flex:none;position:relative;color:var(--teal);
  }
  .faq-q .plus::before,.faq-q .plus::after{
    content:"";position:absolute;background:currentColor;border-radius:2px;
  }
  .faq-q .plus::before{width:14px;height:2px;top:10px;left:4px;}
  .faq-q .plus::after{width:2px;height:14px;top:4px;left:10px;transition:transform .25s ease;}
  .faq-item.open .faq-q .plus::after{transform:rotate(90deg);}
  .faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;}
  .faq-a p{padding:0 0 26px;color:var(--ink-soft);max-width:64ch;}

  /* ---------- BEFORE/AFTER ---------- */
  .compare-wrap{max-width:820px;margin:0 auto;padding:0 28px;text-align:center;}
  .compare-wrap .eyebrow{justify-content:center;}
  .compare-wrap h2{margin-top:16px;font-size:clamp(1.8rem,3vw,2.4rem);}
  .compare{
    position:relative;max-width:720px;margin:48px auto 14px;
    aspect-ratio:16/9;border-radius:20px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);
    cursor:ew-resize;user-select:none;
  }
  .compare .pane{position:absolute;inset:0;}
  .compare .pane img{width:100%;height:100%;object-fit:cover;display:block;}
  .compare:focus-visible{outline:3px solid var(--teal);outline-offset:4px;}
  .compare .after{clip-path:inset(0 0 0 50%);}
  .compare .handle{
    position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;transform:translateX(-50%);
    box-shadow:0 0 0 1px rgba(0,0,0,.15);
  }
  .compare .knob{
    position:absolute;top:50%;left:50%;width:44px;height:44px;border-radius:50%;background:#fff;
    transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;color:var(--teal-deep);
    box-shadow:0 6px 20px rgba(0,0,0,.25);
  }
  .compare .tag{
    position:absolute;top:16px;font-family:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;font-size:0.72rem;letter-spacing:.08em;text-transform:uppercase;
    background:rgba(14,42,41,0.75);color:#fff;padding:6px 12px;border-radius:100px;
  }
  .compare .tag.before{left:16px;}
  .compare .tag.after{right:16px;}
  .compare-caption{color:var(--ink-soft);font-size:0.85rem;margin-top:8px;}

  /* ---------- REVIEWS ---------- */
  .reviews{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
  .review-box{
    display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:center;
    background:var(--surface-2);border:1px solid var(--line);border-radius:20px;padding:40px;
  }
  @media (max-width:760px){.review-box{grid-template-columns:1fr;text-align:center;}}
  .stars{display:flex;gap:4px;color:var(--amber);}
  .stars svg{width:26px;height:26px;}
  .review-score{font-family:'Fraunces', Georgia, 'Times New Roman', serif;font-size:2.6rem;line-height:1;color:var(--ink);}
  .review-score span{display:block;font-family:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;font-size:0.72rem;color:var(--ink-soft);letter-spacing:.05em;margin-top:6px;}
  .review-mid h3{font-family:'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;font-size:1.1rem;font-weight:600;margin-bottom:8px;}
  .review-mid p{color:var(--ink-soft);font-size:0.95rem;max-width:46ch;}

  /* ---------- CTA BANNER ---------- */
  .cta-band{
    background:var(--ink);
    color:#F1F6F5;
    border-radius:28px;
    padding:72px 56px;
    margin:0 28px;
    max-width:1180px;
    margin-inline:auto;
    display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap;
  }
  :root[data-theme="dark"] .cta-band{background:var(--surface-2);}
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cta-band{background:var(--surface-2);}}
  .cta-band h2{color:inherit;font-size:clamp(1.7rem,3vw,2.3rem);max-width:18ch;}
  .cta-band .btn-primary{background:var(--teal-bright);color:var(--teal-deep);}
  .cta-band .btn-primary:hover{background:#F1F6F5;color:var(--teal-deep);}

  /* ---------- FOOTER ---------- */
  footer{padding:80px 0 40px;}
  .foot-grid{
    display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:48px;padding-bottom:56px;border-bottom:1px solid var(--line);
  }
  @media (max-width:760px){.foot-grid{grid-template-columns:1fr;gap:36px;}}
  .foot-brand .brand{margin-bottom:14px;}
  .foot-brand p{color:var(--ink-soft);max-width:34ch;font-size:0.92rem;}
  .foot-col h2{
    font-family:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;font-size:0.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:18px;
  }
  .foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
  .foot-col a{text-decoration:none;color:var(--ink-soft);font-size:0.92rem;display:flex;gap:10px;align-items:flex-start;}
  .foot-col a:hover{color:var(--teal);}
  .foot-col svg{width:16px;height:16px;flex:none;margin-top:3px;}
  .social{display:flex;gap:14px;margin-top:18px;}
  .social a{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink-soft);}
  .social a:hover{color:var(--teal);border-color:var(--teal);}
  .social svg{width:17px;height:17px;}
  .foot-bottom{display:flex;justify-content:space-between;padding-top:28px;color:var(--ink-soft);font-size:0.85rem;flex-wrap:wrap;gap:12px;}
  .foot-bottom a{text-decoration:underline;text-underline-offset:3px;}

  .brand{display:inline-flex;align-items:center;text-decoration:none;line-height:0;}
  .brand img{height:48px;width:auto;display:block;}
  .brand .logo-light{display:none;}
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .brand .logo-dark{display:none;}
    :root:not([data-theme="light"]) .brand .logo-light{display:block;}
  }
  :root[data-theme="dark"] .brand .logo-dark{display:none;}
  :root[data-theme="dark"] .brand .logo-light{display:block;}
  @media (max-width:520px){ .brand img{height:36px;} }
  .foot-brand .brand img{height:44px;}


/* ===== SOURCE PAGE STYLES ===== */

  .current{color:var(--teal)!important;position:relative;}
  .current::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--teal);border-radius:2px;}

  .k-hero{padding-top:70px;padding-bottom:44px;}
  .k-hero h1{font-size:clamp(2rem,4vw,3.1rem);line-height:1.06;margin:18px 0 20px;max-width:17ch;}

  .talk{display:grid;grid-template-columns:1.15fr 0.85fr;gap:0;border:1px solid var(--line);
    border-radius:24px;overflow:hidden;margin-top:8px;}
  @media (max-width:880px){.talk{grid-template-columns:1fr;}}
  .talk-main{background:var(--teal-deep);color:#EAF3F1;padding:44px 40px;}
  .talk-main .eyebrow{color:#8FE0D4;}
  .talk-main .eyebrow::before{background:#8FE0D4;}
  .talk-main h2{color:#F4FAF8;font-size:clamp(1.4rem,2.3vw,1.85rem);margin:16px 0 16px;max-width:20ch;}
  .talk-main p{color:#BFE0DA;max-width:50ch;font-size:0.99rem;}
  .talk-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:26px;}
  .talk-tags span{font-family:'IBM Plex Mono',monospace;font-size:0.7rem;letter-spacing:.05em;
    background:rgba(255,255,255,.09);color:#BFE0DA;padding:7px 13px;border-radius:100px;}
  .talk-side{background:var(--surface);padding:44px 36px;display:flex;flex-direction:column;justify-content:center;gap:22px;}
  .talk-side .lbl{font-family:'IBM Plex Mono',monospace;font-size:0.72rem;letter-spacing:.1em;
    text-transform:uppercase;color:var(--ink-soft);}
  .bignum{font-family:'Fraunces',Georgia,serif;font-size:clamp(1.5rem,2.6vw,2rem);color:var(--ink);
    text-decoration:none;display:block;margin-top:8px;font-variant-numeric:tabular-nums;line-height:1.15;}
  .bignum:hover{color:var(--teal);}

  /* form */
  .form-grid{display:grid;grid-template-columns:1.25fr 0.75fr;gap:52px;align-items:start;}
  @media (max-width:960px){.form-grid{grid-template-columns:1fr;gap:36px;}}
  .form-card{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:40px 36px;}
  @media (max-width:520px){.form-card{padding:28px 22px;}}
  .fields{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
  @media (max-width:640px){.fields{grid-template-columns:1fr;}}
  .field{display:flex;flex-direction:column;gap:8px;}
  .field.wide{grid-column:1 / -1;}
  .field label{font-size:0.86rem;font-weight:600;color:var(--ink);}
  .field label .req{color:var(--teal);margin-left:3px;}
  .field input,.field select,.field textarea{
    font-family:'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;font-size:0.97rem;color:var(--ink);
    background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:13px 14px;
    width:100%;transition:border-color .16s,box-shadow .16s;
  }
  .field textarea{min-height:132px;resize:vertical;}
  .field input:focus,.field select:focus,.field textarea:focus{
    outline:none;border-color:var(--teal);box-shadow:0 0 0 3px color-mix(in srgb, var(--teal) 18%, transparent);
  }
  .field input[aria-invalid="true"],.field textarea[aria-invalid="true"],.field select[aria-invalid="true"]{
    border-color:#C4432B;
  }
  :root[data-theme="dark"] .field input[aria-invalid="true"]{border-color:#E8836A;}
  .err{font-size:0.8rem;color:#C4432B;min-height:1em;}
  :root[data-theme="dark"] .err{color:#E8836A;}
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .err{color:#E8836A;}}
  .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
  .form-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:28px;}
  .form-actions .btn{justify-content:center;}
  .form-foot{font-size:0.82rem;color:var(--ink-soft);max-width:40ch;}

  .sent{
    display:none;border:1px solid var(--teal);background:var(--surface-2);border-radius:16px;
    padding:24px 22px;margin-top:24px;
  }
  .sent.show{display:block;}
  .sent h3{font-family:'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;font-size:1rem;font-weight:600;margin-bottom:10px;}
  .sent p{font-size:0.92rem;color:var(--ink-soft);margin-bottom:14px;}
  .sent .row{display:flex;gap:10px;flex-wrap:wrap;}
  .sent .btn{font-size:0.9rem;padding:11px 18px;}

  .aside{display:flex;flex-direction:column;gap:22px;position:sticky;top:104px;}
  @media (max-width:960px){.aside{position:static;}}
  .aside-card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:30px 28px;}
  .aside-card h3{font-family:'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;font-size:1.03rem;font-weight:600;margin-bottom:12px;}
  .aside-card p{color:var(--ink-soft);font-size:0.92rem;}
  .aside-list{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:13px;}
  .aside-list li{display:flex;gap:12px;align-items:flex-start;font-size:0.92rem;color:var(--ink-soft);}
  .aside-list svg{width:17px;height:17px;flex:none;margin-top:3px;color:var(--teal);}
  .pill{display:inline-flex;align-items:center;gap:8px;font-family:'IBM Plex Mono',monospace;
    font-size:0.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-deep);
    background:var(--surface-2);border:1px solid var(--line);padding:7px 12px;border-radius:100px;}
  :root[data-theme="dark"] .pill{color:var(--teal);}
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pill{color:var(--teal);}}
  .dotlive{width:7px;height:7px;border-radius:50%;background:var(--teal);flex:none;}

  .facts{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:14px;}
  .facts a,.facts span{display:flex;gap:12px;align-items:flex-start;font-size:0.93rem;
    color:var(--ink-soft);text-decoration:none;}
  .facts a:hover{color:var(--teal);}
  .facts svg{width:17px;height:17px;flex:none;margin-top:3px;color:var(--teal);}

  /* audit-fixes */
  /* Contrast: the eyebrow and the primary button in the dark CTA band were
     2.4:1 and 2.5:1 against their own background — well under the 4.5:1 that
     WCAG AA asks for. Light teal on the near-black band gives 6.7:1. */
  .cta-band .eyebrow{color:#8FE0D4;}
  .cta-band .eyebrow::before{background:#8FE0D4;}
  .cta-band .btn-primary{background:#8FE0D4;color:var(--teal-deep);}
  .cta-band .btn-primary:hover{background:#F1F6F5;color:var(--teal-deep);}

  /* The sketch sits on a dark ground, where the light-theme amber (#C97A2B)
     only reached 3.15:1. Use the palette's dark-theme amber inside that
     section so the legend and the duct lines stay the same colour. */
  .sketch{--amber:#E3A25C;}

  /* Footer links were 24px tall on phones; padding lifts them over the
     36px tap-target floor without changing the desktop layout. */
  @media (max-width:640px){
    .foot-col ul a{display:inline-block;padding:7px 0;}
    .foot-bottom a{display:inline-block;padding:8px 0;}
  }

  /* Section headings that are announced but not painted. */
  .sr-only{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }
  /* audit-fixes-2 */

  /* symmetry-fixes */
  /* Hairline card panels: let the final card fill the row so no empty cell
     shows through as a grey block. */
  .cardgrid > :last-child:nth-child(5){grid-column:span 2;}
  @media (max-width:560px){.cardgrid > :last-child:nth-child(5){grid-column:span 1;}}

  /* Price packages: wrap and centre, so a 5-in-3 layout ends symmetrically
     instead of leaving a hole on the right. */
  .tiers{
    display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:22px;
  }
  .tiers > .tier{flex:0 1 calc((100% - 44px) / 3);min-width:0;}
  @media (max-width:1000px){.tiers > .tier{flex-basis:calc((100% - 22px) / 2);}}
  @media (max-width:640px){.tiers > .tier{flex-basis:100%;}}

  /* Review strips: same treatment, so a two-card strip sits centred rather
     than hugging the left edge of a three-column track. */
  .revgrid{
    display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;
  }
  .revgrid > .revcard{flex:0 1 calc((100% - 40px) / 3);min-width:0;}
  @media (max-width:960px){.revgrid > .revcard{flex-basis:calc((100% - 20px) / 2);}}
  @media (max-width:620px){.revgrid > .revcard{flex-basis:100%;}}

  /* One vertical rhythm for content sections. */
  .process, .mission, .sketch{padding-top:96px;padding-bottom:96px;}

  /* layout-fixes */
  /* A hidden element must actually hide. .btn sets display:flex, which beat
     the [hidden] attribute, so a button the script had hidden still showed
     up on the thank-you page. */
  [hidden]{display:none !important;}

  /* .cta-band declared `margin:0 28px` and then `margin-inline:auto`, which
     overrode the horizontal margins. Below 1180px the band therefore ran edge
     to edge while every other block kept a 28px gutter. */
  .cta-band{max-width:min(1180px, calc(100% - 56px));}

  /* .crumbs overrode .wrap's `padding:0 28px` with `padding:26px 0 0`, so the
     breadcrumb sat flush against the screen edge. */
  .crumbs{padding-left:28px;padding-right:28px;}

  /* Display headings inherited the body's 1.6 line-height while h1 used 1.06,
     so multi-line h2/h3 looked far airier than the hero. */
  h2, h3{line-height:1.18;}

  /* Three hero stats did not fit on one row and the third dropped alone. */
  @media (min-width:560px){
    .hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  }

  /* The score panel is a three-column grid that collapses at 760px, but the
     button kept its intrinsic width and pushed past the padding. */
  @media (max-width:760px){
    .review-box{padding:28px;}
    .review-box .btn{width:100%;justify-content:center;}
  }

  /* .trust cells centre their text but the icon is a flex sibling pinned left,
     so the icon never lined up with the words it belongs to. */
  .trust > div{text-align:left;}
  .trust > div > div{text-align:left;}

  /* Hairline card panel: five cards over six tracks, so the last row splits
     into two equal halves instead of leaving an empty grey cell or one
     double-wide card. */
  .cardgrid{grid-template-columns:repeat(6,1fr);}
  .cardgrid > *{grid-column:span 2;}
  .cardgrid > :nth-child(4):nth-last-child(2),
  .cardgrid > :nth-child(5):last-child{grid-column:span 3;}
  @media (max-width:900px){
    .cardgrid{grid-template-columns:repeat(2,1fr);}
    .cardgrid > *{grid-column:span 1;}
    .cardgrid > :nth-child(4):nth-last-child(2){grid-column:span 1;}
    .cardgrid > :nth-child(5):last-child{grid-column:span 2;}
  }
  @media (max-width:560px){
    .cardgrid{grid-template-columns:1fr;}
    .cardgrid > *,
    .cardgrid > :nth-child(4):nth-last-child(2),
    .cardgrid > :nth-child(5):last-child{grid-column:span 1;}
  }

  /* A two-card review strip was stuck at one third width each and looked
     stranded inside a much wider page. */
  .revgrid:has(> .revcard:nth-child(2):last-child) > .revcard{
    flex-basis:calc((100% - 20px) / 2);
  }

  /* Stacked buttons had ragged right edges. Below 520px they fill the row. */
  @media (max-width:520px){
    .hero-actions{flex-direction:column;align-items:stretch;}
    .hero-actions .btn{width:100%;justify-content:center;}
  }

  /* In the centred heroes the h1 has its own max-width but no auto margins,
     so it sat left of the eyebrow and the buttons above and below it. */
  .wrap[style*="text-align:center"] h1{margin-inline:auto;}

  /* Inputs and selects sharing a row ended on different baselines. */
  .field input, .field select{min-height:48px;}
  .field input[type="file"]{padding:11px 12px;font-size:0.92rem;}
  .field input[type="file"]::file-selector-button{
    font-family:inherit;font-size:0.88rem;font-weight:600;
    color:var(--teal-deep);background:var(--surface-2);
    border:1px solid var(--line);border-radius:9px;
    padding:7px 13px;margin-right:12px;cursor:pointer;
  }

  /* The split panel's two halves used 40px and 36px padding, which showed as
     a small step where they stack on a phone. */
  @media (max-width:900px){
    .talk-main, .talk-side{padding-left:32px;padding-right:32px;}
  }

  /* Desktop right-alignment inside the order summary followed the columns
     when they stacked, leaving a label adrift in empty space. */
  @media (max-width:640px){
    .tack-card [style*="text-align:right"]{text-align:left !important;}
  }

  /* Comparison matrix: tighten a little more on small phones so it fits the
     screen instead of needing a sideways drag. */
  @media (max-width:430px){
    table.matrix{font-size:0.66rem;}
    table.matrix th, table.matrix td{padding:8px 3px;}
    table.matrix tbody th{font-size:0.66rem;padding-left:6px;}
    table.matrix thead th span{font-size:0.58rem;}
  }

  /* layout-fixes-2 */
  /* The score panel's single mobile column was still 295px wide inside a
     278px content box, because the button refused to wrap and set the track's
     min-content width. Let it wrap and let the track shrink. */
  @media (max-width:760px){
    .review-box > *{min-width:0;}
    .review-box .btn{white-space:normal;text-align:center;}
  }

  /* A long call-to-action button ran 26px past the content column on phones
     because .btn never wraps. Allow wrapping where the label is long. */
  @media (max-width:520px){
    .btn{white-space:normal;text-align:center;max-width:100%;}
  }

  /* layout-fixes-3 */
  .trust > div > div{padding:0 !important;border:0 !important;margin:0 !important;}
  @media (max-width:760px){
    .trust > div{border-right:none;border-bottom:1px solid var(--line);}
    .trust > div:last-child{border-bottom:none;}
  }

  /* layout-fixes-4 */
  @media (max-width:640px){
    .foot-col ul a:has(svg){display:flex;align-items:flex-start;gap:10px;}
    .foot-col ul a:has(svg) svg{flex:none;margin-top:2px;}
  }


/* ===== SOURCE PAGE STYLES ===== */

  .b-hero{padding-top:70px;padding-bottom:20px;}
  .b-hero h1{font-size:clamp(2rem,4vw,3rem);line-height:1.06;margin:18px 0 18px;max-width:16ch;}

  .book-grid{display:grid;grid-template-columns:1.35fr 0.65fr;gap:52px;align-items:start;}
  @media (max-width:980px){.book-grid{grid-template-columns:1fr;gap:34px;}}

  .stepblock{margin-bottom:52px;}
  .steptag{display:flex;align-items:center;gap:13px;margin-bottom:8px;}
  .stepnum{width:30px;height:30px;border-radius:50%;background:var(--teal-deep);color:#EAF3F1;
    font-family:'IBM Plex Mono',monospace;font-size:0.8rem;display:flex;align-items:center;
    justify-content:center;flex:none;}
  .stepblock h2{font-size:clamp(1.35rem,2.2vw,1.7rem);}
  .stephint{color:var(--ink-soft);font-size:0.94rem;margin:10px 0 24px;max-width:56ch;}

  /* service picker */
  .svcpick{display:flex;flex-direction:column;gap:12px;}
  .svcpick label{
    display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;
    background:var(--surface);border:1px solid var(--line);border-radius:16px;
    padding:20px 22px;cursor:pointer;transition:border-color .16s,background .16s;
  }
  .svcpick label:hover{background:var(--surface-2);}
  .svcpick input{position:absolute;opacity:0;pointer-events:none;}
  .radio{width:21px;height:21px;border-radius:50%;border:2px solid var(--line);flex:none;
    display:flex;align-items:center;justify-content:center;transition:border-color .16s;}
  .radio::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--teal);
    transform:scale(0);transition:transform .16s;}
  .svcpick input:checked ~ .radio{border-color:var(--teal);}
  .svcpick input:checked ~ .radio::after{transform:scale(1);}
  .svcpick label:has(input:checked){border-color:var(--teal);background:var(--surface-2);}
  .svcpick input:focus-visible ~ .radio{outline:3px solid var(--teal);outline-offset:3px;}
  .svcpick .nm{display:block;font-weight:600;font-size:0.99rem;}
  .svcpick .ds{display:block;color:var(--ink-soft);font-size:0.86rem;margin-top:3px;}
  .svcpick .pr{font-family:'Fraunces',Georgia,serif;font-size:1.3rem;white-space:nowrap;
    font-variant-numeric:tabular-nums;}

  /* slots */
  .slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px;margin-top:18px;}
  .slot{
    background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 12px;
    font-family:'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;font-size:0.94rem;color:var(--ink);cursor:pointer;
    text-align:center;transition:border-color .16s,background .16s;font-variant-numeric:tabular-nums;
  }
  .slot:hover{background:var(--surface-2);}
  .slot[aria-pressed="true"]{border-color:var(--teal);background:var(--surface-2);color:var(--teal);font-weight:600;}
  .slot:focus-visible{outline:3px solid var(--teal);outline-offset:3px;}

  .fields{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
  @media (max-width:640px){.fields{grid-template-columns:1fr;}}
  .field{display:flex;flex-direction:column;gap:8px;}
  .field.wide{grid-column:1 / -1;}
  .field label{font-size:0.86rem;font-weight:600;}
  .field label .req{color:var(--teal);margin-left:3px;}
  .field input,.field select,.field textarea{
    font-family:'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;font-size:0.97rem;color:var(--ink);background:var(--bg);
    border:1px solid var(--line);border-radius:12px;padding:13px 14px;width:100%;
    transition:border-color .16s,box-shadow .16s;
  }
  .field textarea{min-height:108px;resize:vertical;}
  .field input:focus,.field select:focus,.field textarea:focus{
    outline:none;border-color:var(--teal);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--teal) 18%, transparent);
  }
  .field [aria-invalid="true"]{border-color:#C4432B;}
  .err{font-size:0.8rem;color:#C4432B;min-height:1em;}
  :root[data-theme="dark"] .err{color:#E8836A;}
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .err{color:#E8836A;}}
  .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

  /* summary */
  .summary{position:sticky;top:104px;background:var(--surface);border:1px solid var(--line);
    border-radius:22px;padding:30px 28px;box-shadow:var(--shadow);}
  @media (max-width:980px){.summary{position:static;}}
  .summary h3{font-family:'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;font-size:1.05rem;font-weight:600;margin-bottom:20px;}
  .srow{display:flex;justify-content:space-between;gap:14px;padding:13px 0;
    border-bottom:1px solid var(--line);font-size:0.93rem;}
  .srow dt{color:var(--ink-soft);}
  .srow dd{margin:0;text-align:right;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;}
  .srow dd.empty{color:var(--ink-soft);font-weight:400;}
  .total{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:20px 0 6px;}
  .total span{font-size:0.9rem;color:var(--ink-soft);}
  .total b{font-family:'Fraunces',Georgia,serif;font-size:1.9rem;color:var(--ink);
    font-variant-numeric:tabular-nums;}
  .sumnote{font-size:0.8rem;color:var(--ink-soft);margin-top:10px;}
  .summary .btn{width:100%;justify-content:center;margin-top:22px;}

  /* confirmation */
  .conf{display:none;}
  .conf.show{display:block;}
  .conf-card{background:var(--surface);border:1px solid var(--teal);border-radius:24px;
    padding:44px 40px;box-shadow:var(--shadow);}
  @media (max-width:520px){.conf-card{padding:28px 22px;}}
  .conf-mark{width:56px;height:56px;border-radius:50%;background:var(--surface-2);
    display:flex;align-items:center;justify-content:center;color:var(--teal);margin-bottom:22px;}
  .conf-mark svg{width:28px;height:28px;}
  .conf h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:14px;}
  .conf p{color:var(--ink-soft);max-width:56ch;}
  .refbox{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;
    padding:18px 20px;margin:24px 0;display:flex;justify-content:space-between;
    align-items:center;gap:16px;flex-wrap:wrap;}
  .refbox span{font-family:'IBM Plex Mono',monospace;font-size:0.72rem;letter-spacing:.1em;
    text-transform:uppercase;color:var(--ink-soft);display:block;}
  .refbox b{font-family:'IBM Plex Mono',monospace;font-size:1.15rem;color:var(--ink);letter-spacing:.04em;}
  .conf-actions{display:flex;gap:11px;flex-wrap:wrap;margin-top:24px;}
  .conf-actions .btn{font-size:0.92rem;padding:12px 20px;}
  .recap{list-style:none;margin:24px 0 0;padding:22px 0 0;border-top:1px solid var(--line);
    display:flex;flex-direction:column;gap:11px;}
  .recap li{display:flex;justify-content:space-between;gap:16px;font-size:0.93rem;}
  .recap li span{color:var(--ink-soft);}
  .recap li b{font-weight:600;text-align:right;}

  /* audit-fixes */
  /* Contrast: the eyebrow and the primary button in the dark CTA band were
     2.4:1 and 2.5:1 against their own background — well under the 4.5:1 that
     WCAG AA asks for. Light teal on the near-black band gives 6.7:1. */
  .cta-band .eyebrow{color:#8FE0D4;}
  .cta-band .eyebrow::before{background:#8FE0D4;}
  .cta-band .btn-primary{background:#8FE0D4;color:var(--teal-deep);}
  .cta-band .btn-primary:hover{background:#F1F6F5;color:var(--teal-deep);}

  /* The sketch sits on a dark ground, where the light-theme amber (#C97A2B)
     only reached 3.15:1. Use the palette's dark-theme amber inside that
     section so the legend and the duct lines stay the same colour. */
  .sketch{--amber:#E3A25C;}

  /* Footer links were 24px tall on phones; padding lifts them over the
     36px tap-target floor without changing the desktop layout. */
  @media (max-width:640px){
    .foot-col ul a{display:inline-block;padding:7px 0;}
    .foot-bottom a{display:inline-block;padding:8px 0;}
  }

  /* Section headings that are announced but not painted. */
  .sr-only{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }
  /* audit-fixes-2 */

  /* reco-cards */
  .revgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:26px;align-items:start;}
  @media (max-width:960px){.revgrid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:620px){.revgrid{grid-template-columns:1fr;}}
  .revcard{
    background:var(--surface);border:1px solid var(--line);border-radius:20px;
    padding:26px 24px;display:flex;flex-direction:column;gap:14px;margin:0;
  }
  .revcard .revstars{display:flex;gap:3px;color:var(--amber);}
  .revcard .revstars svg{width:15px;height:15px;}
  .revcard blockquote{margin:0;font-size:0.96rem;line-height:1.62;color:var(--ink);}
  /* figcaption, not footer: the site's global footer{} rules leak into any
     <footer> element and padded these cards out to 142px. */
  .revcard figcaption{font-size:0.84rem;color:var(--ink-soft);margin:0;padding:0;}
  .revcard figcaption b{color:var(--ink);font-weight:600;}
  .revsource{margin-top:22px;font-size:0.84rem;color:var(--ink-soft);text-align:center;}
  .revsource a{color:var(--teal);}
  .revstrip-head{text-align:center;margin-bottom:4px;}
  .revstrip-head h2{font-size:clamp(1.5rem,2.5vw,2rem);margin-top:14px;}
  .revstrip-head .eyebrow{justify-content:center;}

  /* symmetry-fixes */
  /* Hairline card panels: let the final card fill the row so no empty cell
     shows through as a grey block. */
  .cardgrid > :last-child:nth-child(5){grid-column:span 2;}
  @media (max-width:560px){.cardgrid > :last-child:nth-child(5){grid-column:span 1;}}

  /* Price packages: wrap and centre, so a 5-in-3 layout ends symmetrically
     instead of leaving a hole on the right. */
  .tiers{
    display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:22px;
  }
  .tiers > .tier{flex:0 1 calc((100% - 44px) / 3);min-width:0;}
  @media (max-width:1000px){.tiers > .tier{flex-basis:calc((100% - 22px) / 2);}}
  @media (max-width:640px){.tiers > .tier{flex-basis:100%;}}

  /* Review strips: same treatment, so a two-card strip sits centred rather
     than hugging the left edge of a three-column track. */
  .revgrid{
    display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;
  }
  .revgrid > .revcard{flex:0 1 calc((100% - 40px) / 3);min-width:0;}
  @media (max-width:960px){.revgrid > .revcard{flex-basis:calc((100% - 20px) / 2);}}
  @media (max-width:620px){.revgrid > .revcard{flex-basis:100%;}}

  /* One vertical rhythm for content sections. */
  .process, .mission, .sketch{padding-top:96px;padding-bottom:96px;}

  /* layout-fixes */
  /* A hidden element must actually hide. .btn sets display:flex, which beat
     the [hidden] attribute, so a button the script had hidden still showed
     up on the thank-you page. */
  [hidden]{display:none !important;}

  /* .cta-band declared `margin:0 28px` and then `margin-inline:auto`, which
     overrode the horizontal margins. Below 1180px the band therefore ran edge
     to edge while every other block kept a 28px gutter. */
  .cta-band{max-width:min(1180px, calc(100% - 56px));}

  /* .crumbs overrode .wrap's `padding:0 28px` with `padding:26px 0 0`, so the
     breadcrumb sat flush against the screen edge. */
  .crumbs{padding-left:28px;padding-right:28px;}

  /* Display headings inherited the body's 1.6 line-height while h1 used 1.06,
     so multi-line h2/h3 looked far airier than the hero. */
  h2, h3{line-height:1.18;}

  /* Three hero stats did not fit on one row and the third dropped alone. */
  @media (min-width:560px){
    .hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  }

  /* The score panel is a three-column grid that collapses at 760px, but the
     button kept its intrinsic width and pushed past the padding. */
  @media (max-width:760px){
    .review-box{padding:28px;}
    .review-box .btn{width:100%;justify-content:center;}
  }

  /* .trust cells centre their text but the icon is a flex sibling pinned left,
     so the icon never lined up with the words it belongs to. */
  .trust > div{text-align:left;}
  .trust > div > div{text-align:left;}

  /* Hairline card panel: five cards over six tracks, so the last row splits
     into two equal halves instead of leaving an empty grey cell or one
     double-wide card. */
  .cardgrid{grid-template-columns:repeat(6,1fr);}
  .cardgrid > *{grid-column:span 2;}
  .cardgrid > :nth-child(4):nth-last-child(2),
  .cardgrid > :nth-child(5):last-child{grid-column:span 3;}
  @media (max-width:900px){
    .cardgrid{grid-template-columns:repeat(2,1fr);}
    .cardgrid > *{grid-column:span 1;}
    .cardgrid > :nth-child(4):nth-last-child(2){grid-column:span 1;}
    .cardgrid > :nth-child(5):last-child{grid-column:span 2;}
  }
  @media (max-width:560px){
    .cardgrid{grid-template-columns:1fr;}
    .cardgrid > *,
    .cardgrid > :nth-child(4):nth-last-child(2),
    .cardgrid > :nth-child(5):last-child{grid-column:span 1;}
  }

  /* A two-card review strip was stuck at one third width each and looked
     stranded inside a much wider page. */
  .revgrid:has(> .revcard:nth-child(2):last-child) > .revcard{
    flex-basis:calc((100% - 20px) / 2);
  }

  /* Stacked buttons had ragged right edges. Below 520px they fill the row. */
  @media (max-width:520px){
    .hero-actions{flex-direction:column;align-items:stretch;}
    .hero-actions .btn{width:100%;justify-content:center;}
  }

  /* In the centred heroes the h1 has its own max-width but no auto margins,
     so it sat left of the eyebrow and the buttons above and below it. */
  .wrap[style*="text-align:center"] h1{margin-inline:auto;}

  /* Inputs and selects sharing a row ended on different baselines. */
  .field input, .field select{min-height:48px;}
  .field input[type="file"]{padding:11px 12px;font-size:0.92rem;}
  .field input[type="file"]::file-selector-button{
    font-family:inherit;font-size:0.88rem;font-weight:600;
    color:var(--teal-deep);background:var(--surface-2);
    border:1px solid var(--line);border-radius:9px;
    padding:7px 13px;margin-right:12px;cursor:pointer;
  }

  /* The split panel's two halves used 40px and 36px padding, which showed as
     a small step where they stack on a phone. */
  @media (max-width:900px){
    .talk-main, .talk-side{padding-left:32px;padding-right:32px;}
  }

  /* Desktop right-alignment inside the order summary followed the columns
     when they stacked, leaving a label adrift in empty space. */
  @media (max-width:640px){
    .tack-card [style*="text-align:right"]{text-align:left !important;}
  }

  /* Comparison matrix: tighten a little more on small phones so it fits the
     screen instead of needing a sideways drag. */
  @media (max-width:430px){
    table.matrix{font-size:0.66rem;}
    table.matrix th, table.matrix td{padding:8px 3px;}
    table.matrix tbody th{font-size:0.66rem;padding-left:6px;}
    table.matrix thead th span{font-size:0.58rem;}
  }

  /* layout-fixes-2 */
  /* The score panel's single mobile column was still 295px wide inside a
     278px content box, because the button refused to wrap and set the track's
     min-content width. Let it wrap and let the track shrink. */
  @media (max-width:760px){
    .review-box > *{min-width:0;}
    .review-box .btn{white-space:normal;text-align:center;}
  }

  /* A long call-to-action button ran 26px past the content column on phones
     because .btn never wraps. Allow wrapping where the label is long. */
  @media (max-width:520px){
    .btn{white-space:normal;text-align:center;max-width:100%;}
  }

  /* layout-fixes-3 */
  .trust > div > div{padding:0 !important;border:0 !important;margin:0 !important;}
  @media (max-width:760px){
    .trust > div{border-right:none;border-bottom:1px solid var(--line);}
    .trust > div:last-child{border-bottom:none;}
  }

  /* layout-fixes-4 */
  @media (max-width:640px){
    .foot-col ul a:has(svg){display:flex;align-items:flex-start;gap:10px;}
    .foot-col ul a:has(svg) svg{flex:none;margin-top:2px;}
  }


/* ===== SOURCE PAGE STYLES ===== */

  @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

  :root{
    --bg:#F5F7F6;
    --surface:#FFFFFF;
    --surface-2:#EAF0EE;
    --ink:#0E2A29;
    --ink-soft:#4B6664;
    --teal:#146B64;
    --teal-deep:#0B4744;
    --teal-bright:#1C8A80;
    --amber:#C97A2B;
    --line:#D8E3E0;
    --shadow: 0 20px 60px -30px rgba(11,71,68,0.35);
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#0A1615;
      --surface:#0F1E1D;
      --surface-2:#153230;
      --ink:#EAF3F1;
      --ink-soft:#A9C4C1;
      --teal:#4FD1C0;
      --teal-deep:#2E9C90;
      --teal-bright:#5FE0CE;
      --amber:#E3A25C;
      --line:#1E3A38;
      --shadow: 0 20px 60px -30px rgba(0,0,0,0.6);
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"]{
    --bg:#0A1615;
    --surface:#0F1E1D;
    --surface-2:#153230;
    --ink:#EAF3F1;
    --ink-soft:#A9C4C1;
    --teal:#4FD1C0;
    --teal-deep:#2E9C90;
    --teal-bright:#5FE0CE;
    --amber:#E3A25C;
    --line:#1E3A38;
    --shadow: 0 20px 60px -30px rgba(0,0,0,0.6);
    color-scheme: dark;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;display:block;}
  a{color:inherit;}
  .wrap{max-width:1180px;margin:0 auto;padding:0 28px;}
  h1,h2,h3{
    font-family:'Fraunces', Georgia, serif;
    font-weight:600;
    text-wrap:balance;
    margin:0;
    color:var(--ink);
  }
  .eyebrow{
    font-family:'IBM Plex Mono', ui-monospace, monospace;
    font-size:0.78rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--teal);
    display:inline-flex;
    align-items:center;
    gap:10px;
  }
  .eyebrow::before{
    content:"";
    width:22px;height:1px;
    background:var(--teal);
    display:inline-block;
  }
  p{margin:0;}
  .lede{
    color:var(--ink-soft);
    max-width:52ch;
    font-size:1.08rem;
  }
  .btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-family:'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
    font-weight:600;
    font-size:0.98rem;
    padding:14px 26px;
    border-radius:100px;
    text-decoration:none;
    border:1px solid transparent;
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
    white-space:nowrap;
  }
  .btn:hover{transform:translateY(-2px);}
  .btn-primary{
    background:var(--teal-deep);
    color:#F5F7F6;
    box-shadow:var(--shadow);
  }
  .btn-primary:hover{background:var(--teal);}
  .btn-ghost{
    background:transparent;
    border-color:var(--line);
    color:var(--ink);
  }
  .btn-ghost:hover{border-color:var(--teal);color:var(--teal);}
  .btn-ghost svg{width:16px;height:16px;}

  /* ---------- NAV ---------- */
  header.site{
    position:sticky;top:0;z-index:50;
    background:color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
    transform:translateY(0);
    transition:transform .28s ease;
  }
  header.site.site--hidden{transform:translateY(-100%);}
  .nav{
    display:flex;align-items:center;justify-content:space-between;
    padding:18px 28px;
    max-width:1180px;margin:0 auto;
  }
  .brand{
    display:flex;align-items:center;gap:10px;
    font-family:'Fraunces', Georgia, 'Times New Roman', serif;font-weight:600;font-size:1.15rem;
    text-decoration:none;color:var(--ink);
  }
  .brand .mark{width:30px;height:30px;flex:none;}
  .navlinks{
    display:flex;gap:30px;list-style:none;margin:0;padding:0;
    font-size:0.95rem;font-weight:500;
  }
  .navlinks a{text-decoration:none;color:var(--ink-soft);transition:color .15s;}
  .navlinks a:hover{color:var(--teal);}
  .navcta{display:flex;align-items:center;gap:18px;}
  .navtoggle{
    display:none;background:none;border:none;cursor:pointer;padding:6px;
    width:40px;height:40px;flex:none;align-items:center;justify-content:center;
    flex-direction:column;gap:5px;
  }
  .navtoggle span{display:block;width:22px;height:2px;border-radius:2px;background:var(--ink);transition:transform .2s,opacity .2s;}
  header.site.menu-open{position:fixed;top:0;left:0;right:0;}

  /* mobile slide-in drawer ("rullgardin") */
  .mobilemenu{position:fixed;inset:0;z-index:100;visibility:hidden;}
  .mobilemenu-backdrop{
    position:absolute;inset:0;background:rgba(6,16,15,0.55);
    opacity:0;transition:opacity .25s ease;
  }
  .mobilemenu-panel{
    position:absolute;top:0;left:0;bottom:0;width:min(320px,84vw);
    background:var(--surface);border-right:1px solid var(--line);
    box-shadow:24px 0 60px -20px rgba(0,0,0,0.35);
    transform:translateX(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);
    display:flex;flex-direction:column;padding:20px 22px 28px;overflow-y:auto;
  }
  .mobilemenu.is-open{visibility:visible;}
  .mobilemenu.is-open .mobilemenu-backdrop{opacity:1;}
  .mobilemenu.is-open .mobilemenu-panel{transform:translateX(0);}
  .mobilemenu-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;}
  .mobilemenu-close{
    background:none;border:1px solid var(--line);border-radius:10px;
    width:38px;height:38px;color:var(--ink);cursor:pointer;font-size:1.3rem;line-height:1;
  }
  .mobilemenu-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
  .mobilemenu-links a{
    display:block;padding:14px 4px;text-decoration:none;color:var(--ink);
    font-family:'Fraunces', Georgia, 'Times New Roman', serif;font-size:1.15rem;font-weight:500;
    border-bottom:1px solid var(--line);
  }
  .mobilemenu-links a:hover{color:var(--teal);}
  .mobilemenu .navcta{margin-top:22px;}
  .mobilemenu .btn-primary{width:100%;justify-content:center;}
  body.menu-locked{overflow:hidden;}

  @media (max-width:880px){
    .navlinks{display:none;}
    header.site .navcta{display:none;}
    .mobilemenu .navcta{display:flex;}
    .navtoggle{display:flex;}
  }
  @media (min-width:881px){
    .mobilemenu{display:none;}
  }

  section{padding:96px 0;}
  @media (max-width:720px){section{padding:64px 0;}}

  /* ---------- HERO ---------- */
  .hero{padding-top:64px;padding-bottom:60px;}
  .hero .wrap{
    display:grid;
    grid-template-columns:1.05fr 0.95fr;
    gap:40px;
    align-items:center;
  }
  @media (max-width:920px){
    .hero .wrap{grid-template-columns:1fr;}
  }
  .hero h1{font-size:clamp(2.3rem,4.6vw,3.6rem);line-height:1.06;margin:18px 0 20px;}
  .hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px;}
  .hero-stats{
    display:flex;gap:28px;margin-top:48px;flex-wrap:wrap;
  }
  .stat b{
    display:block;font-family:'Fraunces', Georgia, 'Times New Roman', serif;font-size:1.6rem;color:var(--teal-deep);
  }
  :root[data-theme="dark"] .stat b, @media (prefers-color-scheme:dark){ }
  .stat span{font-size:0.85rem;color:var(--ink-soft);}
  .hero-art{position:relative;}
  .hero-art svg{width:100%;height:auto;}

  /* ---------- FEATURE STRIP ---------- */
  .features{
    background:var(--surface);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:56px 0;
  }
  .feat-grid{
    display:grid;grid-template-columns:repeat(4,1fr);gap:36px;
  }
  @media (max-width:880px){.feat-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:520px){.feat-grid{grid-template-columns:1fr;}}
  .feat{display:flex;flex-direction:column;gap:12px;}
  .feat .icn{
    width:44px;height:44px;color:var(--teal);
  }
  .feat h3{font-size:1.02rem;font-family:'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;font-weight:600;}
  .feat p{color:var(--ink-soft);font-size:0.92rem;}

  /* ---------- SERVICES ---------- */
  .services-head{
    display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:52px;
  }
  @media (max-width:760px){.services-head{flex-direction:column;align-items:start;}}
  .services-head h2{font-size:clamp(1.8rem,3vw,2.5rem);max-width:14ch;}
  .services-head .lede{margin-top:14px;}
  .svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line);border:1px solid var(--line);border-radius:20px;overflow:hidden;}
  @media (max-width:920px){.svc-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:520px){.svc-grid{grid-template-columns:1fr;}}
  .svc-card{
    background:var(--surface);padding:34px 28px;display:flex;flex-direction:column;gap:16px;min-height:230px;
    transition:background .2s;
  }
  .svc-card:hover{background:var(--surface-2);}
  .svc-index{font-family:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;font-size:0.78rem;color:var(--teal);letter-spacing:.06em;}
  .svc-card h3{font-size:1.12rem;font-weight:600;font-family:'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;}
  .svc-card p{color:var(--ink-soft);font-size:0.92rem;flex:1;}
  .svc-icn{width:34px;height:34px;color:var(--teal-deep);}

  /* ---------- VENTILATION SKETCH (dark band) ---------- */
  .sketch{
    background:var(--teal-deep);
    color:#EAF3F1;
    padding:110px 0;
    position:relative;
    overflow:hidden;
  }
  .sketch .eyebrow{color:#8FE0D4;}
  .sketch .eyebrow::before{background:#8FE0D4;}
  .sketch h2{color:#F4FAF8;font-size:clamp(1.9rem,3.4vw,2.7rem);max-width:16ch;margin:18px 0 18px;}
  .sketch .lede{color:#BFE0DA;max-width:46ch;}
  .sketch-grid{
    display:grid;grid-template-columns:0.95fr 1.05fr;gap:60px;align-items:center;margin-top:56px;
  }
  @media (max-width:920px){.sketch-grid{grid-template-columns:1fr;}}
  .benefit-list{list-style:none;margin:34px 0 0;padding:0;display:flex;flex-direction:column;gap:16px;}
  .benefit-list li{display:flex;gap:14px;align-items:flex-start;font-size:1rem;color:#DCEFEA;}
  .benefit-list svg{width:20px;height:20px;flex:none;margin-top:2px;color:#8FE0D4;}
  .sketch-art{position:relative;}
  .sketch-art svg{width:100%;height:auto;}
  .sketch-toggle{
    display:inline-flex;gap:4px;background:rgba(255,255,255,0.08);padding:4px;border-radius:100px;margin-top:34px;
    font-family:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;font-size:0.78rem;
  }
  .sketch-toggle .legend-dot{
    display:inline-block;color:#BFE0DA;padding:9px 16px;border-radius:100px;font-family:inherit;font-size:inherit;letter-spacing:.04em;
  }
  .sketch-toggle .legend-dot.active{background:#0B4744;color:#8FE0D4;}
  .duct-line{fill:none;stroke:#8FE0D4;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
  .duct-line.warm{stroke:var(--amber);}
  .house-line{fill:none;stroke:#BFE0DA;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
  .duct-node{fill:#0B4744;stroke:#8FE0D4;stroke-width:2;}
  .duct-node.warm{stroke:var(--amber);}
  .duct-label{font-family:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;font-size:9px;fill:#BFE0DA;letter-spacing:.03em;}
  .sketch-art{--progress:0;}
  #ductSvg [data-kind]{opacity:0;}
  #ductSvg [data-kind="dot"]{transform-box:fill-box;transform-origin:center;transform:scale(0.3);}
  #ductSvg [data-kind="label"]{transform-box:fill-box;transform:translateX(-4px);}
  .sketch-progress{
    position:absolute;left:0;right:0;bottom:-6px;height:3px;background:rgba(255,255,255,0.1);
    border-radius:100px;overflow:hidden;
  }
  .sketch-progress-bar{height:100%;width:0%;background:linear-gradient(90deg,#8FE0D4,var(--amber));border-radius:inherit;}
  @media (prefers-reduced-motion:reduce){
    #ductSvg [data-kind]{opacity:1 !important;transform:none !important;}
  }

  /* ---------- FAQ ---------- */
  .faq-wrap{max-width:820px;margin:0 auto;padding:0 28px;}
  .faq-head{text-align:center;margin-bottom:48px;}
  .faq-head h2{font-size:clamp(1.8rem,3vw,2.4rem);}
  .faq-item{border-bottom:1px solid var(--line);}
  .faq-q{
    width:100%;text-align:left;background:none;border:none;cursor:pointer;
    display:flex;justify-content:space-between;align-items:center;gap:20px;
    padding:24px 0;font-family:'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;font-size:1.02rem;font-weight:600;color:var(--ink);
  }
  .faq-q .plus{
    width:22px;height:22px;flex:none;position:relative;color:var(--teal);
  }
  .faq-q .plus::before,.faq-q .plus::after{
    content:"";position:absolute;background:currentColor;border-radius:2px;
  }
  .faq-q .plus::before{width:14px;height:2px;top:10px;left:4px;}
  .faq-q .plus::after{width:2px;height:14px;top:4px;left:10px;transition:transform .25s ease;}
  .faq-item.open .faq-q .plus::after{transform:rotate(90deg);}
  .faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;}
  .faq-a p{padding:0 0 26px;color:var(--ink-soft);max-width:64ch;}

  /* ---------- BEFORE/AFTER ---------- */
  .compare-wrap{max-width:820px;margin:0 auto;padding:0 28px;text-align:center;}
  .compare-wrap .eyebrow{justify-content:center;}
  .compare-wrap h2{margin-top:16px;font-size:clamp(1.8rem,3vw,2.4rem);}
  .compare{
    position:relative;max-width:720px;margin:48px auto 14px;
    aspect-ratio:16/9;border-radius:20px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);
    cursor:ew-resize;user-select:none;
  }
  .compare .pane{position:absolute;inset:0;}
  .compare .pane img{width:100%;height:100%;object-fit:cover;display:block;}
  .compare:focus-visible{outline:3px solid var(--teal);outline-offset:4px;}
  .compare .pane.after{clip-path:inset(0 0 0 50%);}
  .compare .handle{
    position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;transform:translateX(-50%);
    box-shadow:0 0 0 1px rgba(0,0,0,.15);
  }
  .compare .knob{
    position:absolute;top:50%;left:50%;width:44px;height:44px;border-radius:50%;background:#fff;
    transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;color:var(--teal-deep);
    box-shadow:0 6px 20px rgba(0,0,0,.25);
  }
  .compare .tag{
    position:absolute;top:16px;font-family:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;font-size:0.72rem;letter-spacing:.08em;text-transform:uppercase;
    background:rgba(14,42,41,0.75);color:#fff;padding:6px 12px;border-radius:100px;
  }
  .compare .tag.before{left:16px;}
  .compare .tag.after{right:16px;}
  .compare-caption{color:var(--ink-soft);font-size:0.85rem;margin-top:8px;}

  /* ---------- REVIEWS ---------- */
  .reviews{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
  .review-box{
    display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:center;
    background:var(--surface-2);border:1px solid var(--line);border-radius:20px;padding:40px;
  }
  @media (max-width:760px){.review-box{grid-template-columns:1fr;text-align:center;}}
  .stars{display:flex;gap:4px;color:var(--amber);}
  .stars svg{width:26px;height:26px;}
  .review-score{font-family:'Fraunces', Georgia, 'Times New Roman', serif;font-size:2.6rem;line-height:1;color:var(--ink);}
  .review-score span{display:block;font-family:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;font-size:0.72rem;color:var(--ink-soft);letter-spacing:.05em;margin-top:6px;}
  .review-mid h3{font-family:'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;font-size:1.1rem;font-weight:600;margin-bottom:8px;}
  .review-mid p{color:var(--ink-soft);font-size:0.95rem;max-width:46ch;}

  /* ---------- CTA BANNER ---------- */
  .cta-band{
    background:var(--ink);
    color:#F1F6F5;
    border-radius:28px;
    padding:72px 56px;
    margin:0 28px;
    max-width:1180px;
    margin-inline:auto;
    display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap;
  }
  :root[data-theme="dark"] .cta-band{background:var(--surface-2);}
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cta-band{background:var(--surface-2);}}
  .cta-band h2{color:inherit;font-size:clamp(1.7rem,3vw,2.3rem);max-width:18ch;}
  .cta-band .btn-primary{background:var(--teal-bright);color:var(--teal-deep);}
  .cta-band .btn-primary:hover{background:#F1F6F5;color:var(--teal-deep);}

  /* ---------- FOOTER ---------- */
  footer{padding:80px 0 40px;}
  .foot-grid{
    display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:48px;padding-bottom:56px;border-bottom:1px solid var(--line);
  }
  @media (max-width:760px){.foot-grid{grid-template-columns:1fr;gap:36px;}}
  .foot-brand .brand{margin-bottom:14px;}
  .foot-brand p{color:var(--ink-soft);max-width:34ch;font-size:0.92rem;}
  .foot-col h2{
    font-family:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;font-size:0.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:18px;
  }
  .foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
  .foot-col a{text-decoration:none;color:var(--ink-soft);font-size:0.92rem;display:flex;gap:10px;align-items:flex-start;}
  .foot-col a:hover{color:var(--teal);}
  .foot-col svg{width:16px;height:16px;flex:none;margin-top:3px;}
  .social{display:flex;gap:14px;margin-top:18px;}
  .social a{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink-soft);}
  .social a:hover{color:var(--teal);border-color:var(--teal);}
  .social svg{width:17px;height:17px;}
  .foot-bottom{display:flex;justify-content:space-between;padding-top:28px;color:var(--ink-soft);font-size:0.85rem;flex-wrap:wrap;gap:12px;}
  .foot-bottom a{text-decoration:underline;text-underline-offset:3px;}

  .brand{display:inline-flex;align-items:center;text-decoration:none;line-height:0;}
  .brand img{height:48px;width:auto;display:block;}
  .brand .logo-light{display:none;}
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .brand .logo-dark{display:none;}
    :root:not([data-theme="light"]) .brand .logo-light{display:block;}
  }
  :root[data-theme="dark"] .brand .logo-dark{display:none;}
  :root[data-theme="dark"] .brand .logo-light{display:block;}
  @media (max-width:520px){ .brand img{height:36px;} }
  .foot-brand .brand img{height:44px;}

  /* audit-fixes */
  /* Contrast: the eyebrow and the primary button in the dark CTA band were
     2.4:1 and 2.5:1 against their own background — well under the 4.5:1 that
     WCAG AA asks for. Light teal on the near-black band gives 6.7:1. */
  .cta-band .eyebrow{color:#8FE0D4;}
  .cta-band .eyebrow::before{background:#8FE0D4;}
  .cta-band .btn-primary{background:#8FE0D4;color:var(--teal-deep);}
  .cta-band .btn-primary:hover{background:#F1F6F5;color:var(--teal-deep);}

  /* The sketch sits on a dark ground, where the light-theme amber (#C97A2B)
     only reached 3.15:1. Use the palette's dark-theme amber inside that
     section so the legend and the duct lines stay the same colour. */
  .sketch{--amber:#E3A25C;}

  /* Footer links were 24px tall on phones; padding lifts them over the
     36px tap-target floor without changing the desktop layout. */
  @media (max-width:640px){
    .foot-col ul a{display:inline-block;padding:7px 0;}
    .foot-bottom a{display:inline-block;padding:8px 0;}
  }

  /* Section headings that are announced but not painted. */
  .sr-only{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }
  /* audit-fixes-2 */

  /* Real reviews pulled from Reco — card grid under the score panel. */
  .reviews-list{background:var(--surface);}
  .revgrid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:26px;
    align-items:start;
  }
  @media (max-width:960px){.revgrid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:620px){.revgrid{grid-template-columns:1fr;}}
  .revcard{
    background:var(--surface);border:1px solid var(--line);border-radius:20px;
    padding:26px 24px;display:flex;flex-direction:column;gap:14px;
  }
  .revcard .revstars{display:flex;gap:3px;color:var(--amber);}
  .revcard .revstars svg{width:15px;height:15px;}
  .revcard blockquote{
    margin:0;font-size:0.96rem;line-height:1.62;color:var(--ink);
  }
  /* figcaption, not footer: the site's global footer{} rules leak into any
     <footer> element and were padding these cards out to 142px. */
  .revcard figcaption{
    font-size:0.84rem;color:var(--ink-soft);margin:0;padding:0;
  }
  .revcard figcaption b{color:var(--ink);font-weight:600;}
  .revcard{margin:0;}
  .revsource{
    margin-top:22px;font-size:0.84rem;color:var(--ink-soft);text-align:center;
  }
  .revsource a{color:var(--teal);}

  /* symmetry-fixes */
  /* Hairline card panels: let the final card fill the row so no empty cell
     shows through as a grey block. */
  .cardgrid > :last-child:nth-child(5){grid-column:span 2;}
  @media (max-width:560px){.cardgrid > :last-child:nth-child(5){grid-column:span 1;}}

  /* Price packages: wrap and centre, so a 5-in-3 layout ends symmetrically
     instead of leaving a hole on the right. */
  .tiers{
    display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:22px;
  }
  .tiers > .tier{flex:0 1 calc((100% - 44px) / 3);min-width:0;}
  @media (max-width:1000px){.tiers > .tier{flex-basis:calc((100% - 22px) / 2);}}
  @media (max-width:640px){.tiers > .tier{flex-basis:100%;}}

  /* Review strips: same treatment, so a two-card strip sits centred rather
     than hugging the left edge of a three-column track. */
  .revgrid{
    display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;
  }
  .revgrid > .revcard{flex:0 1 calc((100% - 40px) / 3);min-width:0;}
  @media (max-width:960px){.revgrid > .revcard{flex-basis:calc((100% - 20px) / 2);}}
  @media (max-width:620px){.revgrid > .revcard{flex-basis:100%;}}

  /* One vertical rhythm for content sections. */
  .process, .mission, .sketch{padding-top:96px;padding-bottom:96px;}

  /* layout-fixes */
  /* A hidden element must actually hide. .btn sets display:flex, which beat
     the [hidden] attribute, so a button the script had hidden still showed
     up on the thank-you page. */
  [hidden]{display:none !important;}

  /* .cta-band declared `margin:0 28px` and then `margin-inline:auto`, which
     overrode the horizontal margins. Below 1180px the band therefore ran edge
     to edge while every other block kept a 28px gutter. */
  .cta-band{max-width:min(1180px, calc(100% - 56px));}

  /* .crumbs overrode .wrap's `padding:0 28px` with `padding:26px 0 0`, so the
     breadcrumb sat flush against the screen edge. */
  .crumbs{padding-left:28px;padding-right:28px;}

  /* Display headings inherited the body's 1.6 line-height while h1 used 1.06,
     so multi-line h2/h3 looked far airier than the hero. */
  h2, h3{line-height:1.18;}

  /* Three hero stats did not fit on one row and the third dropped alone. */
  @media (min-width:560px){
    .hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  }

  /* The score panel is a three-column grid that collapses at 760px, but the
     button kept its intrinsic width and pushed past the padding. */
  @media (max-width:760px){
    .review-box{padding:28px;}
    .review-box .btn{width:100%;justify-content:center;}
  }

  /* .trust cells centre their text but the icon is a flex sibling pinned left,
     so the icon never lined up with the words it belongs to. */
  .trust > div{text-align:left;}
  .trust > div > div{text-align:left;}

  /* Hairline card panel: five cards over six tracks, so the last row splits
     into two equal halves instead of leaving an empty grey cell or one
     double-wide card. */
  .cardgrid{grid-template-columns:repeat(6,1fr);}
  .cardgrid > *{grid-column:span 2;}
  .cardgrid > :nth-child(4):nth-last-child(2),
  .cardgrid > :nth-child(5):last-child{grid-column:span 3;}
  @media (max-width:900px){
    .cardgrid{grid-template-columns:repeat(2,1fr);}
    .cardgrid > *{grid-column:span 1;}
    .cardgrid > :nth-child(4):nth-last-child(2){grid-column:span 1;}
    .cardgrid > :nth-child(5):last-child{grid-column:span 2;}
  }
  @media (max-width:560px){
    .cardgrid{grid-template-columns:1fr;}
    .cardgrid > *,
    .cardgrid > :nth-child(4):nth-last-child(2),
    .cardgrid > :nth-child(5):last-child{grid-column:span 1;}
  }

  /* A two-card review strip was stuck at one third width each and looked
     stranded inside a much wider page. */
  .revgrid:has(> .revcard:nth-child(2):last-child) > .revcard{
    flex-basis:calc((100% - 20px) / 2);
  }

  /* Stacked buttons had ragged right edges. Below 520px they fill the row. */
  @media (max-width:520px){
    .hero-actions{flex-direction:column;align-items:stretch;}
    .hero-actions .btn{width:100%;justify-content:center;}
  }

  /* In the centred heroes the h1 has its own max-width but no auto margins,
     so it sat left of the eyebrow and the buttons above and below it. */
  .wrap[style*="text-align:center"] h1{margin-inline:auto;}

  /* Inputs and selects sharing a row ended on different baselines. */
  .field input, .field select{min-height:48px;}
  .field input[type="file"]{padding:11px 12px;font-size:0.92rem;}
  .field input[type="file"]::file-selector-button{
    font-family:inherit;font-size:0.88rem;font-weight:600;
    color:var(--teal-deep);background:var(--surface-2);
    border:1px solid var(--line);border-radius:9px;
    padding:7px 13px;margin-right:12px;cursor:pointer;
  }

  /* The split panel's two halves used 40px and 36px padding, which showed as
     a small step where they stack on a phone. */
  @media (max-width:900px){
    .talk-main, .talk-side{padding-left:32px;padding-right:32px;}
  }

  /* Desktop right-alignment inside the order summary followed the columns
     when they stacked, leaving a label adrift in empty space. */
  @media (max-width:640px){
    .tack-card [style*="text-align:right"]{text-align:left !important;}
  }

  /* Comparison matrix: tighten a little more on small phones so it fits the
     screen instead of needing a sideways drag. */
  @media (max-width:430px){
    table.matrix{font-size:0.66rem;}
    table.matrix th, table.matrix td{padding:8px 3px;}
    table.matrix tbody th{font-size:0.66rem;padding-left:6px;}
    table.matrix thead th span{font-size:0.58rem;}
  }

  /* layout-fixes-2 */
  /* The score panel's single mobile column was still 295px wide inside a
     278px content box, because the button refused to wrap and set the track's
     min-content width. Let it wrap and let the track shrink. */
  @media (max-width:760px){
    .review-box > *{min-width:0;}
    .review-box .btn{white-space:normal;text-align:center;}
  }

  /* A long call-to-action button ran 26px past the content column on phones
     because .btn never wraps. Allow wrapping where the label is long. */
  @media (max-width:520px){
    .btn{white-space:normal;text-align:center;max-width:100%;}
  }

  /* layout-fixes-3 */
  .trust > div > div{padding:0 !important;border:0 !important;margin:0 !important;}
  @media (max-width:760px){
    .trust > div{border-right:none;border-bottom:1px solid var(--line);}
    .trust > div:last-child{border-bottom:none;}
  }

  /* layout-fixes-4 */
  @media (max-width:640px){
    .foot-col ul a:has(svg){display:flex;align-items:flex-start;gap:10px;}
    .foot-col ul a:has(svg) svg{flex:none;margin-top:2px;}
  }


/* ===== SOURCE PAGE STYLES ===== */

  .current{color:var(--teal)!important;position:relative;}
  .current::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--teal);border-radius:2px;}

  .about-hero{padding-top:72px;padding-bottom:56px;}
  .about-hero .wrap{display:grid;grid-template-columns:1.1fr 0.9fr;gap:56px;align-items:center;}
  @media (max-width:920px){.about-hero .wrap{grid-template-columns:1fr;gap:36px;}}
  .about-hero h1{font-size:clamp(2.2rem,4.4vw,3.4rem);line-height:1.05;margin:18px 0 20px;}
  .hero-frame{position:relative;border-radius:24px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);aspect-ratio:16/11;}
  .hero-frame img{width:100%;height:100%;object-fit:cover;display:block;}
  .hero-frame figcaption{
    position:absolute;left:16px;bottom:16px;right:16px;
    font-family:'IBM Plex Mono',monospace;font-size:0.68rem;letter-spacing:.06em;text-transform:uppercase;
    background:rgba(11,71,68,0.82);color:#DCEFEA;padding:8px 12px;border-radius:10px;
  }

  .rail{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
  @media (max-width:760px){.rail{grid-template-columns:repeat(2,1fr);}}
  .rail div{padding:28px 24px;border-right:1px solid var(--line);}
  .rail div:last-child{border-right:none;}
  @media (max-width:760px){
    .rail div:nth-child(2n){border-right:none;}
    .rail div:nth-child(-n+2){border-bottom:1px solid var(--line);}
  }
  .rail b{display:block;font-family:'Fraunces',Georgia,serif;font-size:1.7rem;color:var(--teal-deep);line-height:1.1;}
  :root[data-theme="dark"] .rail b{color:var(--teal);}
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .rail b{color:var(--teal);}}
  .rail span{display:block;font-size:0.82rem;color:var(--ink-soft);margin-top:8px;}

  .story{display:grid;grid-template-columns:0.85fr 1.15fr;gap:56px;align-items:start;}
  @media (max-width:880px){.story{grid-template-columns:1fr;gap:28px;}}
  .story h2{font-size:clamp(1.8rem,3vw,2.4rem);max-width:15ch;}
  .story-body{display:flex;flex-direction:column;gap:20px;}
  .story-body p{color:var(--ink-soft);max-width:62ch;font-size:1.02rem;}
  .story-body p strong{color:var(--ink);font-weight:600;}
  .pull{
    border-left:3px solid var(--teal);padding:6px 0 6px 22px;
    font-family:'Fraunces',Georgia,serif;font-size:1.18rem;color:var(--ink);max-width:44ch;
  }

  .why-head{max-width:56ch;margin-bottom:52px;}
  .why-head h2{font-size:clamp(1.8rem,3vw,2.5rem);}
  .why-head p{color:var(--ink-soft);margin-top:14px;}
  .why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);border:1px solid var(--line);border-radius:20px;overflow:hidden;}
  @media (max-width:900px){.why-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:560px){.why-grid{grid-template-columns:1fr;}}
  .why-card{background:var(--surface);padding:34px 28px;display:flex;flex-direction:column;gap:14px;transition:background .2s;}
  .why-card:hover{background:var(--surface-2);}
  .why-card svg{width:30px;height:30px;color:var(--teal);}
  .why-card h3{font-family:'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;font-size:1.05rem;font-weight:600;}
  .why-card p{color:var(--ink-soft);font-size:0.92rem;}

  .mission{background:var(--teal-deep);color:#EAF3F1;padding:104px 0;}
  .mission .eyebrow{color:#8FE0D4;}
  .mission .eyebrow::before{background:#8FE0D4;}
  .mission-grid{display:grid;grid-template-columns:0.8fr 1.2fr;gap:56px;align-items:start;}
  @media (max-width:880px){.mission-grid{grid-template-columns:1fr;gap:28px;}}
  .mission h2{color:#F4FAF8;font-size:clamp(1.9rem,3.2vw,2.6rem);max-width:14ch;margin-top:18px;}
  .mission p{color:#BFE0DA;max-width:60ch;font-size:1.04rem;}
  .mission .mission-body{display:flex;flex-direction:column;gap:20px;}

  .values{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--line);border:1px solid var(--line);border-radius:20px;overflow:hidden;margin-top:48px;}
  @media (max-width:700px){.values{grid-template-columns:1fr;}}
  .value{background:var(--surface);padding:30px 28px;display:flex;gap:18px;align-items:flex-start;}
  .value .dot{width:34px;height:34px;border-radius:50%;background:var(--surface-2);display:flex;align-items:center;justify-content:center;flex:none;color:var(--teal);}
  .value .dot svg{width:17px;height:17px;}
  .value h3{font-family:'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;font-size:1rem;font-weight:600;margin-bottom:6px;}
  .value p{color:var(--ink-soft);font-size:0.9rem;}
  .values .value:last-child:nth-child(odd){grid-column:1 / -1;}

  /* audit-fixes */
  /* Contrast: the eyebrow and the primary button in the dark CTA band were
     2.4:1 and 2.5:1 against their own background — well under the 4.5:1 that
     WCAG AA asks for. Light teal on the near-black band gives 6.7:1. */
  .cta-band .eyebrow{color:#8FE0D4;}
  .cta-band .eyebrow::before{background:#8FE0D4;}
  .cta-band .btn-primary{background:#8FE0D4;color:var(--teal-deep);}
  .cta-band .btn-primary:hover{background:#F1F6F5;color:var(--teal-deep);}

  /* The sketch sits on a dark ground, where the light-theme amber (#C97A2B)
     only reached 3.15:1. Use the palette's dark-theme amber inside that
     section so the legend and the duct lines stay the same colour. */
  .sketch{--amber:#E3A25C;}

  /* Footer links were 24px tall on phones; padding lifts them over the
     36px tap-target floor without changing the desktop layout. */
  @media (max-width:640px){
    .foot-col ul a{display:inline-block;padding:7px 0;}
    .foot-bottom a{display:inline-block;padding:8px 0;}
  }

  /* Section headings that are announced but not painted. */
  .sr-only{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }
  /* audit-fixes-2 */

  /* symmetry-fixes */
  /* Hairline card panels: let the final card fill the row so no empty cell
     shows through as a grey block. */
  .cardgrid > :last-child:nth-child(5){grid-column:span 2;}
  @media (max-width:560px){.cardgrid > :last-child:nth-child(5){grid-column:span 1;}}

  /* Price packages: wrap and centre, so a 5-in-3 layout ends symmetrically
     instead of leaving a hole on the right. */
  .tiers{
    display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:22px;
  }
  .tiers > .tier{flex:0 1 calc((100% - 44px) / 3);min-width:0;}
  @media (max-width:1000px){.tiers > .tier{flex-basis:calc((100% - 22px) / 2);}}
  @media (max-width:640px){.tiers > .tier{flex-basis:100%;}}

  /* Review strips: same treatment, so a two-card strip sits centred rather
     than hugging the left edge of a three-column track. */
  .revgrid{
    display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;
  }
  .revgrid > .revcard{flex:0 1 calc((100% - 40px) / 3);min-width:0;}
  @media (max-width:960px){.revgrid > .revcard{flex-basis:calc((100% - 20px) / 2);}}
  @media (max-width:620px){.revgrid > .revcard{flex-basis:100%;}}

  /* One vertical rhythm for content sections. */
  .process, .mission, .sketch{padding-top:96px;padding-bottom:96px;}

  /* layout-fixes */
  /* A hidden element must actually hide. .btn sets display:flex, which beat
     the [hidden] attribute, so a button the script had hidden still showed
     up on the thank-you page. */
  [hidden]{display:none !important;}

  /* .cta-band declared `margin:0 28px` and then `margin-inline:auto`, which
     overrode the horizontal margins. Below 1180px the band therefore ran edge
     to edge while every other block kept a 28px gutter. */
  .cta-band{max-width:min(1180px, calc(100% - 56px));}

  /* .crumbs overrode .wrap's `padding:0 28px` with `padding:26px 0 0`, so the
     breadcrumb sat flush against the screen edge. */
  .crumbs{padding-left:28px;padding-right:28px;}

  /* Display headings inherited the body's 1.6 line-height while h1 used 1.06,
     so multi-line h2/h3 looked far airier than the hero. */
  h2, h3{line-height:1.18;}

  /* Three hero stats did not fit on one row and the third dropped alone. */
  @media (min-width:560px){
    .hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  }

  /* The score panel is a three-column grid that collapses at 760px, but the
     button kept its intrinsic width and pushed past the padding. */
  @media (max-width:760px){
    .review-box{padding:28px;}
    .review-box .btn{width:100%;justify-content:center;}
  }

  /* .trust cells centre their text but the icon is a flex sibling pinned left,
     so the icon never lined up with the words it belongs to. */
  .trust > div{text-align:left;}
  .trust > div > div{text-align:left;}

  /* Hairline card panel: five cards over six tracks, so the last row splits
     into two equal halves instead of leaving an empty grey cell or one
     double-wide card. */
  .cardgrid{grid-template-columns:repeat(6,1fr);}
  .cardgrid > *{grid-column:span 2;}
  .cardgrid > :nth-child(4):nth-last-child(2),
  .cardgrid > :nth-child(5):last-child{grid-column:span 3;}
  @media (max-width:900px){
    .cardgrid{grid-template-columns:repeat(2,1fr);}
    .cardgrid > *{grid-column:span 1;}
    .cardgrid > :nth-child(4):nth-last-child(2){grid-column:span 1;}
    .cardgrid > :nth-child(5):last-child{grid-column:span 2;}
  }
  @media (max-width:560px){
    .cardgrid{grid-template-columns:1fr;}
    .cardgrid > *,
    .cardgrid > :nth-child(4):nth-last-child(2),
    .cardgrid > :nth-child(5):last-child{grid-column:span 1;}
  }

  /* A two-card review strip was stuck at one third width each and looked
     stranded inside a much wider page. */
  .revgrid:has(> .revcard:nth-child(2):last-child) > .revcard{
    flex-basis:calc((100% - 20px) / 2);
  }

  /* Stacked buttons had ragged right edges. Below 520px they fill the row. */
  @media (max-width:520px){
    .hero-actions{flex-direction:column;align-items:stretch;}
    .hero-actions .btn{width:100%;justify-content:center;}
  }

  /* In the centred heroes the h1 has its own max-width but no auto margins,
     so it sat left of the eyebrow and the buttons above and below it. */
  .wrap[style*="text-align:center"] h1{margin-inline:auto;}

  /* Inputs and selects sharing a row ended on different baselines. */
  .field input, .field select{min-height:48px;}
  .field input[type="file"]{padding:11px 12px;font-size:0.92rem;}
  .field input[type="file"]::file-selector-button{
    font-family:inherit;font-size:0.88rem;font-weight:600;
    color:var(--teal-deep);background:var(--surface-2);
    border:1px solid var(--line);border-radius:9px;
    padding:7px 13px;margin-right:12px;cursor:pointer;
  }

  /* The split panel's two halves used 40px and 36px padding, which showed as
     a small step where they stack on a phone. */
  @media (max-width:900px){
    .talk-main, .talk-side{padding-left:32px;padding-right:32px;}
  }

  /* Desktop right-alignment inside the order summary followed the columns
     when they stacked, leaving a label adrift in empty space. */
  @media (max-width:640px){
    .tack-card [style*="text-align:right"]{text-align:left !important;}
  }

  /* Comparison matrix: tighten a little more on small phones so it fits the
     screen instead of needing a sideways drag. */
  @media (max-width:430px){
    table.matrix{font-size:0.66rem;}
    table.matrix th, table.matrix td{padding:8px 3px;}
    table.matrix tbody th{font-size:0.66rem;padding-left:6px;}
    table.matrix thead th span{font-size:0.58rem;}
  }

  /* layout-fixes-2 */
  /* The score panel's single mobile column was still 295px wide inside a
     278px content box, because the button refused to wrap and set the track's
     min-content width. Let it wrap and let the track shrink. */
  @media (max-width:760px){
    .review-box > *{min-width:0;}
    .review-box .btn{white-space:normal;text-align:center;}
  }

  /* A long call-to-action button ran 26px past the content column on phones
     because .btn never wraps. Allow wrapping where the label is long. */
  @media (max-width:520px){
    .btn{white-space:normal;text-align:center;max-width:100%;}
  }

  /* layout-fixes-3 */
  .trust > div > div{padding:0 !important;border:0 !important;margin:0 !important;}
  @media (max-width:760px){
    .trust > div{border-right:none;border-bottom:1px solid var(--line);}
    .trust > div:last-child{border-bottom:none;}
  }

  /* layout-fixes-4 */
  @media (max-width:640px){
    .foot-col ul a:has(svg){display:flex;align-items:flex-start;gap:10px;}
    .foot-col ul a:has(svg) svg{flex:none;margin-top:2px;}
  }


/* ===== SOURCE PAGE STYLES ===== */

  .current{color:var(--teal)!important;position:relative;}
  .current::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--teal);border-radius:2px;}

  .p-hero{padding-top:74px;padding-bottom:44px;text-align:center;}
  .p-hero .eyebrow{justify-content:center;}
  .p-hero h1{font-size:clamp(2.1rem,4.2vw,3.2rem);line-height:1.06;margin:18px auto 20px;max-width:18ch;}
  .p-hero .lede{margin:0 auto;text-align:center;max-width:54ch;}

  .trust{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);margin-top:52px;}
  @media (max-width:760px){.trust{grid-template-columns:repeat(2,1fr);}}
  .trust div{padding:24px 20px;border-right:1px solid var(--line);display:flex;gap:12px;align-items:flex-start;}
  .trust div:last-child{border-right:none;}
  @media (max-width:760px){
    .trust div:nth-child(2n){border-right:none;}
    .trust div:nth-child(-n+2){border-bottom:1px solid var(--line);}
  }
  .trust svg{width:20px;height:20px;color:var(--teal);flex:none;margin-top:2px;}
  .trust b{display:block;font-size:0.94rem;font-weight:600;}
  .trust span{display:block;font-size:0.84rem;color:var(--ink-soft);margin-top:4px;}

  /* price cards */
  .tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
  @media (max-width:1000px){.tiers{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:640px){.tiers{grid-template-columns:1fr;}}
  .tier{
    background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:32px 28px 28px;
    display:flex;flex-direction:column;position:relative;transition:transform .18s ease,box-shadow .18s ease;
  }
  .tier:hover{transform:translateY(-3px);box-shadow:var(--shadow);}
  .tier.feature{border-color:var(--teal);box-shadow:var(--shadow);}
  .tier-flag{
    position:absolute;top:-11px;left:28px;background:var(--teal-deep);color:#EAF3F1;
    font-family:'IBM Plex Mono',monospace;font-size:0.66rem;letter-spacing:.1em;text-transform:uppercase;
    padding:5px 12px;border-radius:100px;
  }
  .tier h3{font-family:'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;font-size:1.08rem;font-weight:600;}
  .tier .sub{font-size:0.85rem;color:var(--ink-soft);margin-top:5px;min-height:1.2em;}
  .price{
    font-family:'Fraunces',Georgia,serif;font-size:2.5rem;line-height:1;color:var(--ink);
    margin:22px 0 4px;font-variant-numeric:tabular-nums;
  }
  .price small{font-size:1rem;font-family:'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;color:var(--ink-soft);margin-left:4px;}
  .price-note{font-size:0.78rem;color:var(--ink-soft);}
  .save{
    display:inline-block;margin-top:12px;background:var(--surface-2);color:var(--teal-deep);
    font-family:'IBM Plex Mono',monospace;font-size:0.72rem;letter-spacing:.04em;
    padding:6px 11px;border-radius:100px;border:1px solid var(--line);font-variant-numeric:tabular-nums;
  }
  :root[data-theme="dark"] .save{color:var(--teal);}
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .save{color:var(--teal);}}
  .tier ul{list-style:none;margin:24px 0 26px;padding:22px 0 0;border-top:1px solid var(--line);
    display:flex;flex-direction:column;gap:12px;flex:1;}
  .tier li{display:flex;gap:11px;align-items:flex-start;font-size:0.93rem;color:var(--ink-soft);}
  .tier li svg{width:17px;height:17px;flex:none;margin-top:3px;color:var(--teal);}
  .tier .btn{width:100%;justify-content:center;}

  /* matrix */
  .matrix-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:20px;background:var(--surface);}
  table.matrix{border-collapse:collapse;width:100%;min-width:720px;font-size:0.92rem;}
  table.matrix th,table.matrix td{padding:16px 18px;text-align:center;border-bottom:1px solid var(--line);}
  table.matrix thead th{
    font-family:'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;font-weight:600;font-size:0.88rem;color:var(--ink);
    background:var(--surface-2);position:sticky;top:0;
  }
  table.matrix thead th span{display:block;font-family:'IBM Plex Mono',monospace;font-size:0.76rem;
    color:var(--ink-soft);font-weight:400;margin-top:5px;font-variant-numeric:tabular-nums;}
  table.matrix tbody th{text-align:left;font-weight:500;color:var(--ink);white-space:nowrap;}
  table.matrix tr:last-child td,table.matrix tr:last-child th{border-bottom:none;}
  table.matrix .yes{color:var(--teal);}
  table.matrix .no{color:var(--ink-soft);opacity:.45;}
  table.matrix svg{width:18px;height:18px;}

  .fine{background:var(--surface-2);border:1px solid var(--line);border-radius:20px;padding:34px 32px;}
  .fine ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;}
  .fine li{display:flex;gap:13px;align-items:flex-start;font-size:0.94rem;color:var(--ink-soft);}
  .fine svg{width:18px;height:18px;flex:none;margin-top:3px;color:var(--teal);}
  .fine strong{color:var(--ink);font-weight:600;}

  /* mobile-fixes */
  /* `.trust div` is a descendant selector, so it also turned the inner
     text wrapper into a flex row — squeezing each label and its
     description side by side into ~50px. Scope the flex to direct
     children so <b> and <span> stack as the block rules intend. */
  .trust > div{display:flex;gap:12px;align-items:flex-start;min-width:0;}
  .trust > div > div{display:block;min-width:0;}

  /* Grid items default to min-width:auto, so the longest line in a cell set
     a floor wider than a phone screen. Chrome then widened the whole mobile
     layout viewport and the page rendered zoomed out. */
  @media (max-width:520px){
    .trust{grid-template-columns:1fr;}
    .trust > div{border-right:none;border-bottom:1px solid var(--line);}
    .trust > div:last-child{border-bottom:none;}
  }

  /* Comparison matrix: drop the 720px min-width on phones and go compact,
     so it fits the screen and only scrolls inside its own container. */
  @media (max-width:700px){
    table.matrix{min-width:0;font-size:0.72rem;}
    table.matrix th, table.matrix td{padding:9px 4px;}
    table.matrix tbody th{white-space:normal;font-size:0.72rem;line-height:1.25;padding-left:8px;}
    table.matrix thead th{font-size:0.7rem;padding:9px 3px;}
    table.matrix thead th span{font-size:0.62rem;margin-top:3px;}
    table.matrix svg{width:14px;height:14px;}
  }

  /* audit-fixes */
  /* Contrast: the eyebrow and the primary button in the dark CTA band were
     2.4:1 and 2.5:1 against their own background — well under the 4.5:1 that
     WCAG AA asks for. Light teal on the near-black band gives 6.7:1. */
  .cta-band .eyebrow{color:#8FE0D4;}
  .cta-band .eyebrow::before{background:#8FE0D4;}
  .cta-band .btn-primary{background:#8FE0D4;color:var(--teal-deep);}
  .cta-band .btn-primary:hover{background:#F1F6F5;color:var(--teal-deep);}

  /* The sketch sits on a dark ground, where the light-theme amber (#C97A2B)
     only reached 3.15:1. Use the palette's dark-theme amber inside that
     section so the legend and the duct lines stay the same colour. */
  .sketch{--amber:#E3A25C;}

  /* Footer links were 24px tall on phones; padding lifts them over the
     36px tap-target floor without changing the desktop layout. */
  @media (max-width:640px){
    .foot-col ul a{display:inline-block;padding:7px 0;}
    .foot-bottom a{display:inline-block;padding:8px 0;}
  }

  /* Section headings that are announced but not painted. */
  .sr-only{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }
  /* audit-fixes-2 */

  /* reco-cards */
  .revgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:26px;align-items:start;}
  @media (max-width:960px){.revgrid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:620px){.revgrid{grid-template-columns:1fr;}}
  .revcard{
    background:var(--surface);border:1px solid var(--line);border-radius:20px;
    padding:26px 24px;display:flex;flex-direction:column;gap:14px;margin:0;
  }
  .revcard .revstars{display:flex;gap:3px;color:var(--amber);}
  .revcard .revstars svg{width:15px;height:15px;}
  .revcard blockquote{margin:0;font-size:0.96rem;line-height:1.62;color:var(--ink);}
  /* figcaption, not footer: the site's global footer{} rules leak into any
     <footer> element and padded these cards out to 142px. */
  .revcard figcaption{font-size:0.84rem;color:var(--ink-soft);margin:0;padding:0;}
  .revcard figcaption b{color:var(--ink);font-weight:600;}
  .revsource{margin-top:22px;font-size:0.84rem;color:var(--ink-soft);text-align:center;}
  .revsource a{color:var(--teal);}
  .revstrip-head{text-align:center;margin-bottom:4px;}
  .revstrip-head h2{font-size:clamp(1.5rem,2.5vw,2rem);margin-top:14px;}
  .revstrip-head .eyebrow{justify-content:center;}

  /* symmetry-fixes */
  /* Hairline card panels: let the final card fill the row so no empty cell
     shows through as a grey block. */
  .cardgrid > :last-child:nth-child(5){grid-column:span 2;}
  @media (max-width:560px){.cardgrid > :last-child:nth-child(5){grid-column:span 1;}}

  /* Price packages: wrap and centre, so a 5-in-3 layout ends symmetrically
     instead of leaving a hole on the right. */
  .tiers{
    display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:22px;
  }
  .tiers > .tier{flex:0 1 calc((100% - 44px) / 3);min-width:0;}
  @media (max-width:1000px){.tiers > .tier{flex-basis:calc((100% - 22px) / 2);}}
  @media (max-width:640px){.tiers > .tier{flex-basis:100%;}}

  /* Review strips: same treatment, so a two-card strip sits centred rather
     than hugging the left edge of a three-column track. */
  .revgrid{
    display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;
  }
  .revgrid > .revcard{flex:0 1 calc((100% - 40px) / 3);min-width:0;}
  @media (max-width:960px){.revgrid > .revcard{flex-basis:calc((100% - 20px) / 2);}}
  @media (max-width:620px){.revgrid > .revcard{flex-basis:100%;}}

  /* One vertical rhythm for content sections. */
  .process, .mission, .sketch{padding-top:96px;padding-bottom:96px;}

  /* layout-fixes */
  /* A hidden element must actually hide. .btn sets display:flex, which beat
     the [hidden] attribute, so a button the script had hidden still showed
     up on the thank-you page. */
  [hidden]{display:none !important;}

  /* .cta-band declared `margin:0 28px` and then `margin-inline:auto`, which
     overrode the horizontal margins. Below 1180px the band therefore ran edge
     to edge while every other block kept a 28px gutter. */
  .cta-band{max-width:min(1180px, calc(100% - 56px));}

  /* .crumbs overrode .wrap's `padding:0 28px` with `padding:26px 0 0`, so the
     breadcrumb sat flush against the screen edge. */
  .crumbs{padding-left:28px;padding-right:28px;}

  /* Display headings inherited the body's 1.6 line-height while h1 used 1.06,
     so multi-line h2/h3 looked far airier than the hero. */
  h2, h3{line-height:1.18;}

  /* Three hero stats did not fit on one row and the third dropped alone. */
  @media (min-width:560px){
    .hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  }

  /* The score panel is a three-column grid that collapses at 760px, but the
     button kept its intrinsic width and pushed past the padding. */
  @media (max-width:760px){
    .review-box{padding:28px;}
    .review-box .btn{width:100%;justify-content:center;}
  }

  /* .trust cells centre their text but the icon is a flex sibling pinned left,
     so the icon never lined up with the words it belongs to. */
  .trust > div{text-align:left;}
  .trust > div > div{text-align:left;}

  /* Hairline card panel: five cards over six tracks, so the last row splits
     into two equal halves instead of leaving an empty grey cell or one
     double-wide card. */
  .cardgrid{grid-template-columns:repeat(6,1fr);}
  .cardgrid > *{grid-column:span 2;}
  .cardgrid > :nth-child(4):nth-last-child(2),
  .cardgrid > :nth-child(5):last-child{grid-column:span 3;}
  @media (max-width:900px){
    .cardgrid{grid-template-columns:repeat(2,1fr);}
    .cardgrid > *{grid-column:span 1;}
    .cardgrid > :nth-child(4):nth-last-child(2){grid-column:span 1;}
    .cardgrid > :nth-child(5):last-child{grid-column:span 2;}
  }
  @media (max-width:560px){
    .cardgrid{grid-template-columns:1fr;}
    .cardgrid > *,
    .cardgrid > :nth-child(4):nth-last-child(2),
    .cardgrid > :nth-child(5):last-child{grid-column:span 1;}
  }

  /* A two-card review strip was stuck at one third width each and looked
     stranded inside a much wider page. */
  .revgrid:has(> .revcard:nth-child(2):last-child) > .revcard{
    flex-basis:calc((100% - 20px) / 2);
  }

  /* Stacked buttons had ragged right edges. Below 520px they fill the row. */
  @media (max-width:520px){
    .hero-actions{flex-direction:column;align-items:stretch;}
    .hero-actions .btn{width:100%;justify-content:center;}
  }

  /* In the centred heroes the h1 has its own max-width but no auto margins,
     so it sat left of the eyebrow and the buttons above and below it. */
  .wrap[style*="text-align:center"] h1{margin-inline:auto;}

  /* Inputs and selects sharing a row ended on different baselines. */
  .field input, .field select{min-height:48px;}
  .field input[type="file"]{padding:11px 12px;font-size:0.92rem;}
  .field input[type="file"]::file-selector-button{
    font-family:inherit;font-size:0.88rem;font-weight:600;
    color:var(--teal-deep);background:var(--surface-2);
    border:1px solid var(--line);border-radius:9px;
    padding:7px 13px;margin-right:12px;cursor:pointer;
  }

  /* The split panel's two halves used 40px and 36px padding, which showed as
     a small step where they stack on a phone. */
  @media (max-width:900px){
    .talk-main, .talk-side{padding-left:32px;padding-right:32px;}
  }

  /* Desktop right-alignment inside the order summary followed the columns
     when they stacked, leaving a label adrift in empty space. */
  @media (max-width:640px){
    .tack-card [style*="text-align:right"]{text-align:left !important;}
  }

  /* Comparison matrix: tighten a little more on small phones so it fits the
     screen instead of needing a sideways drag. */
  @media (max-width:430px){
    table.matrix{font-size:0.66rem;}
    table.matrix th, table.matrix td{padding:8px 3px;}
    table.matrix tbody th{font-size:0.66rem;padding-left:6px;}
    table.matrix thead th span{font-size:0.58rem;}
  }

  /* layout-fixes-2 */
  /* The score panel's single mobile column was still 295px wide inside a
     278px content box, because the button refused to wrap and set the track's
     min-content width. Let it wrap and let the track shrink. */
  @media (max-width:760px){
    .review-box > *{min-width:0;}
    .review-box .btn{white-space:normal;text-align:center;}
  }

  /* A long call-to-action button ran 26px past the content column on phones
     because .btn never wraps. Allow wrapping where the label is long. */
  @media (max-width:520px){
    .btn{white-space:normal;text-align:center;max-width:100%;}
  }

  /* layout-fixes-3 */
  .trust > div > div{padding:0 !important;border:0 !important;margin:0 !important;}
  @media (max-width:760px){
    .trust > div{border-right:none;border-bottom:1px solid var(--line);}
    .trust > div:last-child{border-bottom:none;}
  }

  /* layout-fixes-4 */
  @media (max-width:640px){
    .foot-col ul a:has(svg){display:flex;align-items:flex-start;gap:10px;}
    .foot-col ul a:has(svg) svg{flex:none;margin-top:2px;}
  }


/* ===== SOURCE PAGE STYLES ===== */

  .current{color:var(--teal)!important;position:relative;}
  .current::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--teal);border-radius:2px;}

  .crumbs{font-size:0.85rem;color:var(--ink-soft);padding:26px 0 0;}
  .crumbs a{color:var(--ink-soft);text-decoration:none;}
  .crumbs a:hover{color:var(--teal);}
  .crumbs span{margin:0 8px;opacity:.5;}

  .d-hero{padding-top:34px;padding-bottom:56px;}
  .d-hero h1{font-size:clamp(2rem,3.9vw,3.1rem);line-height:1.07;margin:18px 0 20px;max-width:19ch;}

  .about-row{display:grid;grid-template-columns:1.05fr 0.95fr;gap:60px;align-items:center;}
  @media (max-width:920px){.about-row{grid-template-columns:1fr;gap:36px;}}
  .about-row h2{font-size:clamp(1.6rem,2.7vw,2.2rem);margin-bottom:22px;}
  .prose{display:flex;flex-direction:column;gap:18px;}
  .prose p{color:var(--ink-soft);max-width:60ch;font-size:1.01rem;}
  .art-panel{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:26px;box-shadow:var(--shadow);}
  .art-panel svg{width:100%;height:auto;display:block;}
  .sk{fill:none;stroke:var(--teal);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
  .sk-soft{fill:none;stroke:var(--ink-soft);stroke-width:1.5;opacity:.5;stroke-linecap:round;}
  .sk-warm{fill:none;stroke:var(--amber);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
  .sk-fill{fill:var(--surface-2);}
  .sk-label{font-family:'IBM Plex Mono',monospace;font-size:9px;fill:var(--ink-soft);letter-spacing:.03em;}

  .sec-head{max-width:58ch;margin-bottom:44px;}
  .sec-head h2{font-size:clamp(1.6rem,2.7vw,2.2rem);margin-top:16px;}
  .sec-head p{color:var(--ink-soft);margin-top:14px;}

  .cardgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);
    border:1px solid var(--line);border-radius:20px;overflow:hidden;}
  @media (max-width:900px){.cardgrid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:560px){.cardgrid{grid-template-columns:1fr;}}
  .cardgrid > div{background:var(--surface);padding:32px 28px;display:flex;flex-direction:column;gap:12px;transition:background .2s;}
  .cardgrid > div:hover{background:var(--surface-2);}
  .cardgrid h3{font-family:'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;font-size:1.03rem;font-weight:600;}
  .cardgrid p{color:var(--ink-soft);font-size:0.92rem;}

  .split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;}
  @media (max-width:880px){.split{grid-template-columns:1fr;gap:32px;}}
  .checklist{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:13px;}
  .checklist li{display:flex;gap:13px;align-items:flex-start;font-size:0.97rem;color:var(--ink-soft);}
  .checklist svg{width:19px;height:19px;flex:none;margin-top:3px;color:var(--teal);}
  .list-label{font-family:'IBM Plex Mono',monospace;font-size:0.72rem;letter-spacing:.1em;
    text-transform:uppercase;color:var(--ink-soft);display:block;margin-bottom:18px;}
  .panel{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:34px 30px;}

  .photo-frame{border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);}
  .photo-frame img{width:100%;height:auto;display:block;}
  .photo-cap{font-family:'IBM Plex Mono',monospace;font-size:0.68rem;letter-spacing:.06em;
    text-transform:uppercase;color:var(--ink-soft);margin-top:14px;text-align:center;}

  .process{background:var(--teal-deep);color:#EAF3F1;padding:100px 0;}
  .process .eyebrow{color:#8FE0D4;}
  .process .eyebrow::before{background:#8FE0D4;}
  .process h2{color:#F4FAF8;font-size:clamp(1.7rem,3vw,2.4rem);margin-top:18px;max-width:18ch;}
  .process .lede{color:#BFE0DA;margin-top:16px;}
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;margin-top:56px;}
  @media (max-width:880px){.steps{grid-template-columns:repeat(2,1fr);gap:30px;}}
  @media (max-width:520px){.steps{grid-template-columns:1fr;}}
  .step{padding-top:26px;border-top:1px solid rgba(143,224,212,.35);}
  .step b{font-family:'IBM Plex Mono',monospace;font-size:0.78rem;letter-spacing:.1em;color:#8FE0D4;display:block;margin-bottom:12px;}
  .step h3{color:#F4FAF8;font-family:'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;font-size:1.03rem;font-weight:600;margin-bottom:9px;}
  .step p{color:#BFE0DA;font-size:0.92rem;}

  .closing{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
  .closing-inner{display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap;}
  .closing h2{font-size:clamp(1.6rem,2.8vw,2.2rem);max-width:20ch;}
  .closing p{color:var(--ink-soft);max-width:52ch;margin-top:14px;}

  .other{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);
    border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-top:36px;}
  @media (max-width:760px){.other{grid-template-columns:1fr;}}
  .other a{background:var(--surface);padding:22px 24px;text-decoration:none;color:var(--ink);
    font-weight:600;font-size:0.95rem;display:flex;align-items:center;justify-content:space-between;gap:14px;transition:background .18s,color .18s;}
  .other a:hover{background:var(--surface-2);color:var(--teal);}
  .other svg{width:16px;height:16px;color:var(--teal);flex:none;}

  /* audit-fixes */
  /* Contrast: the eyebrow and the primary button in the dark CTA band were
     2.4:1 and 2.5:1 against their own background — well under the 4.5:1 that
     WCAG AA asks for. Light teal on the near-black band gives 6.7:1. */
  .cta-band .eyebrow{color:#8FE0D4;}
  .cta-band .eyebrow::before{background:#8FE0D4;}
  .cta-band .btn-primary{background:#8FE0D4;color:var(--teal-deep);}
  .cta-band .btn-primary:hover{background:#F1F6F5;color:var(--teal-deep);}

  /* The sketch sits on a dark ground, where the light-theme amber (#C97A2B)
     only reached 3.15:1. Use the palette's dark-theme amber inside that
     section so the legend and the duct lines stay the same colour. */
  .sketch{--amber:#E3A25C;}

  /* Footer links were 24px tall on phones; padding lifts them over the
     36px tap-target floor without changing the desktop layout. */
  @media (max-width:640px){
    .foot-col ul a{display:inline-block;padding:7px 0;}
    .foot-bottom a{display:inline-block;padding:8px 0;}
  }

  /* Section headings that are announced but not painted. */
  .sr-only{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }
  /* audit-fixes-2 */

  /* reco-cards */
  .revgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:26px;align-items:start;}
  @media (max-width:960px){.revgrid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:620px){.revgrid{grid-template-columns:1fr;}}
  .revcard{
    background:var(--surface);border:1px solid var(--line);border-radius:20px;
    padding:26px 24px;display:flex;flex-direction:column;gap:14px;margin:0;
  }
  .revcard .revstars{display:flex;gap:3px;color:var(--amber);}
  .revcard .revstars svg{width:15px;height:15px;}
  .revcard blockquote{margin:0;font-size:0.96rem;line-height:1.62;color:var(--ink);}
  /* figcaption, not footer: the site's global footer{} rules leak into any
     <footer> element and padded these cards out to 142px. */
  .revcard figcaption{font-size:0.84rem;color:var(--ink-soft);margin:0;padding:0;}
  .revcard figcaption b{color:var(--ink);font-weight:600;}
  .revsource{margin-top:22px;font-size:0.84rem;color:var(--ink-soft);text-align:center;}
  .revsource a{color:var(--teal);}
  .revstrip-head{text-align:center;margin-bottom:4px;}
  .revstrip-head h2{font-size:clamp(1.5rem,2.5vw,2rem);margin-top:14px;}
  .revstrip-head .eyebrow{justify-content:center;}

  /* symmetry-fixes */
  /* Hairline card panels: let the final card fill the row so no empty cell
     shows through as a grey block. */
  .cardgrid > :last-child:nth-child(5){grid-column:span 2;}
  @media (max-width:560px){.cardgrid > :last-child:nth-child(5){grid-column:span 1;}}

  /* Price packages: wrap and centre, so a 5-in-3 layout ends symmetrically
     instead of leaving a hole on the right. */
  .tiers{
    display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:22px;
  }
  .tiers > .tier{flex:0 1 calc((100% - 44px) / 3);min-width:0;}
  @media (max-width:1000px){.tiers > .tier{flex-basis:calc((100% - 22px) / 2);}}
  @media (max-width:640px){.tiers > .tier{flex-basis:100%;}}

  /* Review strips: same treatment, so a two-card strip sits centred rather
     than hugging the left edge of a three-column track. */
  .revgrid{
    display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;
  }
  .revgrid > .revcard{flex:0 1 calc((100% - 40px) / 3);min-width:0;}
  @media (max-width:960px){.revgrid > .revcard{flex-basis:calc((100% - 20px) / 2);}}
  @media (max-width:620px){.revgrid > .revcard{flex-basis:100%;}}

  /* One vertical rhythm for content sections. */
  .process, .mission, .sketch{padding-top:96px;padding-bottom:96px;}

  /* layout-fixes */
  /* A hidden element must actually hide. .btn sets display:flex, which beat
     the [hidden] attribute, so a button the script had hidden still showed
     up on the thank-you page. */
  [hidden]{display:none !important;}

  /* .cta-band declared `margin:0 28px` and then `margin-inline:auto`, which
     overrode the horizontal margins. Below 1180px the band therefore ran edge
     to edge while every other block kept a 28px gutter. */
  .cta-band{max-width:min(1180px, calc(100% - 56px));}

  /* .crumbs overrode .wrap's `padding:0 28px` with `padding:26px 0 0`, so the
     breadcrumb sat flush against the screen edge. */
  .crumbs{padding-left:28px;padding-right:28px;}

  /* Display headings inherited the body's 1.6 line-height while h1 used 1.06,
     so multi-line h2/h3 looked far airier than the hero. */
  h2, h3{line-height:1.18;}

  /* Three hero stats did not fit on one row and the third dropped alone. */
  @media (min-width:560px){
    .hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  }

  /* The score panel is a three-column grid that collapses at 760px, but the
     button kept its intrinsic width and pushed past the padding. */
  @media (max-width:760px){
    .review-box{padding:28px;}
    .review-box .btn{width:100%;justify-content:center;}
  }

  /* .trust cells centre their text but the icon is a flex sibling pinned left,
     so the icon never lined up with the words it belongs to. */
  .trust > div{text-align:left;}
  .trust > div > div{text-align:left;}

  /* Hairline card panel: five cards over six tracks, so the last row splits
     into two equal halves instead of leaving an empty grey cell or one
     double-wide card. */
  .cardgrid{grid-template-columns:repeat(6,1fr);}
  .cardgrid > *{grid-column:span 2;}
  .cardgrid > :nth-child(4):nth-last-child(2),
  .cardgrid > :nth-child(5):last-child{grid-column:span 3;}
  @media (max-width:900px){
    .cardgrid{grid-template-columns:repeat(2,1fr);}
    .cardgrid > *{grid-column:span 1;}
    .cardgrid > :nth-child(4):nth-last-child(2){grid-column:span 1;}
    .cardgrid > :nth-child(5):last-child{grid-column:span 2;}
  }
  @media (max-width:560px){
    .cardgrid{grid-template-columns:1fr;}
    .cardgrid > *,
    .cardgrid > :nth-child(4):nth-last-child(2),
    .cardgrid > :nth-child(5):last-child{grid-column:span 1;}
  }

  /* A two-card review strip was stuck at one third width each and looked
     stranded inside a much wider page. */
  .revgrid:has(> .revcard:nth-child(2):last-child) > .revcard{
    flex-basis:calc((100% - 20px) / 2);
  }

  /* Stacked buttons had ragged right edges. Below 520px they fill the row. */
  @media (max-width:520px){
    .hero-actions{flex-direction:column;align-items:stretch;}
    .hero-actions .btn{width:100%;justify-content:center;}
  }

  /* In the centred heroes the h1 has its own max-width but no auto margins,
     so it sat left of the eyebrow and the buttons above and below it. */
  .wrap[style*="text-align:center"] h1{margin-inline:auto;}

  /* Inputs and selects sharing a row ended on different baselines. */
  .field input, .field select{min-height:48px;}
  .field input[type="file"]{padding:11px 12px;font-size:0.92rem;}
  .field input[type="file"]::file-selector-button{
    font-family:inherit;font-size:0.88rem;font-weight:600;
    color:var(--teal-deep);background:var(--surface-2);
    border:1px solid var(--line);border-radius:9px;
    padding:7px 13px;margin-right:12px;cursor:pointer;
  }

  /* The split panel's two halves used 40px and 36px padding, which showed as
     a small step where they stack on a phone. */
  @media (max-width:900px){
    .talk-main, .talk-side{padding-left:32px;padding-right:32px;}
  }

  /* Desktop right-alignment inside the order summary followed the columns
     when they stacked, leaving a label adrift in empty space. */
  @media (max-width:640px){
    .tack-card [style*="text-align:right"]{text-align:left !important;}
  }

  /* Comparison matrix: tighten a little more on small phones so it fits the
     screen instead of needing a sideways drag. */
  @media (max-width:430px){
    table.matrix{font-size:0.66rem;}
    table.matrix th, table.matrix td{padding:8px 3px;}
    table.matrix tbody th{font-size:0.66rem;padding-left:6px;}
    table.matrix thead th span{font-size:0.58rem;}
  }

  /* layout-fixes-2 */
  /* The score panel's single mobile column was still 295px wide inside a
     278px content box, because the button refused to wrap and set the track's
     min-content width. Let it wrap and let the track shrink. */
  @media (max-width:760px){
    .review-box > *{min-width:0;}
    .review-box .btn{white-space:normal;text-align:center;}
  }

  /* A long call-to-action button ran 26px past the content column on phones
     because .btn never wraps. Allow wrapping where the label is long. */
  @media (max-width:520px){
    .btn{white-space:normal;text-align:center;max-width:100%;}
  }

  /* layout-fixes-3 */
  .trust > div > div{padding:0 !important;border:0 !important;margin:0 !important;}
  @media (max-width:760px){
    .trust > div{border-right:none;border-bottom:1px solid var(--line);}
    .trust > div:last-child{border-bottom:none;}
  }

  /* layout-fixes-4 */
  @media (max-width:640px){
    .foot-col ul a:has(svg){display:flex;align-items:flex-start;gap:10px;}
    .foot-col ul a:has(svg) svg{flex:none;margin-top:2px;}
  }


/* ===== SOURCE PAGE STYLES ===== */

  .tack-card{background:var(--surface);border:1px solid var(--line);border-radius:26px;
    padding:52px 46px;box-shadow:var(--shadow);}
  @media (max-width:560px){.tack-card{padding:32px 24px;}}
  .tack-mark{width:64px;height:64px;border-radius:50%;background:var(--surface-2);
    display:flex;align-items:center;justify-content:center;color:var(--teal);margin-bottom:26px;}
  .tack-mark svg{width:32px;height:32px;}
  .tack-card h1{font-size:clamp(1.9rem,3.6vw,2.7rem);line-height:1.08;margin:16px 0 16px;max-width:18ch;}
  .tack-lede{color:var(--ink-soft);font-size:1.06rem;max-width:52ch;}

  .refbox{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;
    padding:20px 22px;margin:30px 0 0;display:flex;justify-content:space-between;
    align-items:center;gap:16px;flex-wrap:wrap;}
  .refbox span{font-family:'IBM Plex Mono',monospace;font-size:0.72rem;letter-spacing:.1em;
    text-transform:uppercase;color:var(--ink-soft);display:block;margin-bottom:5px;}
  .refbox b{font-family:'IBM Plex Mono',monospace;font-size:1.2rem;color:var(--ink);letter-spacing:.04em;}

  .recap{list-style:none;margin:26px 0 0;padding:24px 0 0;border-top:1px solid var(--line);
    display:flex;flex-direction:column;gap:12px;}
  .recap li{display:flex;justify-content:space-between;gap:18px;font-size:0.94rem;}
  .recap li span{color:var(--ink-soft);}
  .recap li b{font-weight:600;text-align:right;}

  .tack-actions{display:flex;gap:11px;flex-wrap:wrap;margin-top:28px;}
  .tack-actions .btn{font-size:0.92rem;padding:12px 20px;}

  .fallback{border:1px dashed var(--line);border-radius:20px;padding:30px 28px;margin-top:26px;
    background:var(--bg);}
  .fallback h2{font-family:'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;font-size:1.04rem;font-weight:600;margin-bottom:10px;}
  .fallback p{color:var(--ink-soft);font-size:0.93rem;max-width:60ch;}

  .process{background:var(--teal-deep);color:#EAF3F1;padding:96px 0;margin-top:80px;}
  .process .eyebrow{color:#8FE0D4;}
  .process .eyebrow::before{background:#8FE0D4;}
  .process h2{color:#F4FAF8;font-size:clamp(1.7rem,3vw,2.4rem);margin-top:18px;max-width:18ch;}
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:52px;}
  @media (max-width:820px){.steps{grid-template-columns:1fr;gap:28px;}}
  .step{padding-top:26px;border-top:1px solid rgba(143,224,212,.35);}
  .step b{font-family:'IBM Plex Mono',monospace;font-size:0.78rem;letter-spacing:.1em;
    color:#8FE0D4;display:block;margin-bottom:12px;}
  .step h3{color:#F4FAF8;font-family:'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;font-size:1.03rem;
    font-weight:600;margin-bottom:9px;}
  .step p{color:#BFE0DA;font-size:0.92rem;}

  /* audit-fixes */
  /* Contrast: the eyebrow and the primary button in the dark CTA band were
     2.4:1 and 2.5:1 against their own background — well under the 4.5:1 that
     WCAG AA asks for. Light teal on the near-black band gives 6.7:1. */
  .cta-band .eyebrow{color:#8FE0D4;}
  .cta-band .eyebrow::before{background:#8FE0D4;}
  .cta-band .btn-primary{background:#8FE0D4;color:var(--teal-deep);}
  .cta-band .btn-primary:hover{background:#F1F6F5;color:var(--teal-deep);}

  /* The sketch sits on a dark ground, where the light-theme amber (#C97A2B)
     only reached 3.15:1. Use the palette's dark-theme amber inside that
     section so the legend and the duct lines stay the same colour. */
  .sketch{--amber:#E3A25C;}

  /* Footer links were 24px tall on phones; padding lifts them over the
     36px tap-target floor without changing the desktop layout. */
  @media (max-width:640px){
    .foot-col ul a{display:inline-block;padding:7px 0;}
    .foot-bottom a{display:inline-block;padding:8px 0;}
  }

  /* Section headings that are announced but not painted. */
  .sr-only{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }
  /* audit-fixes-2 */

  /* symmetry-fixes */
  /* Hairline card panels: let the final card fill the row so no empty cell
     shows through as a grey block. */
  .cardgrid > :last-child:nth-child(5){grid-column:span 2;}
  @media (max-width:560px){.cardgrid > :last-child:nth-child(5){grid-column:span 1;}}

  /* Price packages: wrap and centre, so a 5-in-3 layout ends symmetrically
     instead of leaving a hole on the right. */
  .tiers{
    display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:22px;
  }
  .tiers > .tier{flex:0 1 calc((100% - 44px) / 3);min-width:0;}
  @media (max-width:1000px){.tiers > .tier{flex-basis:calc((100% - 22px) / 2);}}
  @media (max-width:640px){.tiers > .tier{flex-basis:100%;}}

  /* Review strips: same treatment, so a two-card strip sits centred rather
     than hugging the left edge of a three-column track. */
  .revgrid{
    display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;
  }
  .revgrid > .revcard{flex:0 1 calc((100% - 40px) / 3);min-width:0;}
  @media (max-width:960px){.revgrid > .revcard{flex-basis:calc((100% - 20px) / 2);}}
  @media (max-width:620px){.revgrid > .revcard{flex-basis:100%;}}

  /* One vertical rhythm for content sections. */
  .process, .mission, .sketch{padding-top:96px;padding-bottom:96px;}

  /* layout-fixes */
  /* A hidden element must actually hide. .btn sets display:flex, which beat
     the [hidden] attribute, so a button the script had hidden still showed
     up on the thank-you page. */
  [hidden]{display:none !important;}

  /* .cta-band declared `margin:0 28px` and then `margin-inline:auto`, which
     overrode the horizontal margins. Below 1180px the band therefore ran edge
     to edge while every other block kept a 28px gutter. */
  .cta-band{max-width:min(1180px, calc(100% - 56px));}

  /* .crumbs overrode .wrap's `padding:0 28px` with `padding:26px 0 0`, so the
     breadcrumb sat flush against the screen edge. */
  .crumbs{padding-left:28px;padding-right:28px;}

  /* Display headings inherited the body's 1.6 line-height while h1 used 1.06,
     so multi-line h2/h3 looked far airier than the hero. */
  h2, h3{line-height:1.18;}

  /* Three hero stats did not fit on one row and the third dropped alone. */
  @media (min-width:560px){
    .hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  }

  /* The score panel is a three-column grid that collapses at 760px, but the
     button kept its intrinsic width and pushed past the padding. */
  @media (max-width:760px){
    .review-box{padding:28px;}
    .review-box .btn{width:100%;justify-content:center;}
  }

  /* .trust cells centre their text but the icon is a flex sibling pinned left,
     so the icon never lined up with the words it belongs to. */
  .trust > div{text-align:left;}
  .trust > div > div{text-align:left;}

  /* Hairline card panel: five cards over six tracks, so the last row splits
     into two equal halves instead of leaving an empty grey cell or one
     double-wide card. */
  .cardgrid{grid-template-columns:repeat(6,1fr);}
  .cardgrid > *{grid-column:span 2;}
  .cardgrid > :nth-child(4):nth-last-child(2),
  .cardgrid > :nth-child(5):last-child{grid-column:span 3;}
  @media (max-width:900px){
    .cardgrid{grid-template-columns:repeat(2,1fr);}
    .cardgrid > *{grid-column:span 1;}
    .cardgrid > :nth-child(4):nth-last-child(2){grid-column:span 1;}
    .cardgrid > :nth-child(5):last-child{grid-column:span 2;}
  }
  @media (max-width:560px){
    .cardgrid{grid-template-columns:1fr;}
    .cardgrid > *,
    .cardgrid > :nth-child(4):nth-last-child(2),
    .cardgrid > :nth-child(5):last-child{grid-column:span 1;}
  }

  /* A two-card review strip was stuck at one third width each and looked
     stranded inside a much wider page. */
  .revgrid:has(> .revcard:nth-child(2):last-child) > .revcard{
    flex-basis:calc((100% - 20px) / 2);
  }

  /* Stacked buttons had ragged right edges. Below 520px they fill the row. */
  @media (max-width:520px){
    .hero-actions{flex-direction:column;align-items:stretch;}
    .hero-actions .btn{width:100%;justify-content:center;}
  }

  /* In the centred heroes the h1 has its own max-width but no auto margins,
     so it sat left of the eyebrow and the buttons above and below it. */
  .wrap[style*="text-align:center"] h1{margin-inline:auto;}

  /* Inputs and selects sharing a row ended on different baselines. */
  .field input, .field select{min-height:48px;}
  .field input[type="file"]{padding:11px 12px;font-size:0.92rem;}
  .field input[type="file"]::file-selector-button{
    font-family:inherit;font-size:0.88rem;font-weight:600;
    color:var(--teal-deep);background:var(--surface-2);
    border:1px solid var(--line);border-radius:9px;
    padding:7px 13px;margin-right:12px;cursor:pointer;
  }

  /* The split panel's two halves used 40px and 36px padding, which showed as
     a small step where they stack on a phone. */
  @media (max-width:900px){
    .talk-main, .talk-side{padding-left:32px;padding-right:32px;}
  }

  /* Desktop right-alignment inside the order summary followed the columns
     when they stacked, leaving a label adrift in empty space. */
  @media (max-width:640px){
    .tack-card [style*="text-align:right"]{text-align:left !important;}
  }

  /* Comparison matrix: tighten a little more on small phones so it fits the
     screen instead of needing a sideways drag. */
  @media (max-width:430px){
    table.matrix{font-size:0.66rem;}
    table.matrix th, table.matrix td{padding:8px 3px;}
    table.matrix tbody th{font-size:0.66rem;padding-left:6px;}
    table.matrix thead th span{font-size:0.58rem;}
  }

  /* layout-fixes-2 */
  /* The score panel's single mobile column was still 295px wide inside a
     278px content box, because the button refused to wrap and set the track's
     min-content width. Let it wrap and let the track shrink. */
  @media (max-width:760px){
    .review-box > *{min-width:0;}
    .review-box .btn{white-space:normal;text-align:center;}
  }

  /* A long call-to-action button ran 26px past the content column on phones
     because .btn never wraps. Allow wrapping where the label is long. */
  @media (max-width:520px){
    .btn{white-space:normal;text-align:center;max-width:100%;}
  }

  /* layout-fixes-3 */
  .trust > div > div{padding:0 !important;border:0 !important;margin:0 !important;}
  @media (max-width:760px){
    .trust > div{border-right:none;border-bottom:1px solid var(--line);}
    .trust > div:last-child{border-bottom:none;}
  }

  /* layout-fixes-4 */
  @media (max-width:640px){
    .foot-col ul a:has(svg){display:flex;align-items:flex-start;gap:10px;}
    .foot-col ul a:has(svg) svg{flex:none;margin-top:2px;}
  }


/* ===== SOURCE PAGE STYLES ===== */

  .current{color:var(--teal)!important;position:relative;}
  .current::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--teal);border-radius:2px;}

  .svc-hero{padding-top:76px;padding-bottom:52px;}
  .svc-hero h1{font-size:clamp(2.1rem,4.2vw,3.3rem);line-height:1.06;margin:18px 0 20px;max-width:16ch;}
  .svc-hero .lede{font-size:1.06rem;}

  /* jump index */
  .index-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line);
    border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-top:44px;}
  @media (max-width:880px){.index-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:520px){.index-grid{grid-template-columns:1fr;}}
  .index-grid a{
    background:var(--surface);padding:22px 22px;text-decoration:none;display:flex;
    align-items:center;justify-content:space-between;gap:14px;
    font-weight:600;font-size:0.95rem;color:var(--ink);transition:background .18s,color .18s;
  }
  .index-grid a:hover{background:var(--surface-2);color:var(--teal);}
  .index-grid svg{width:16px;height:16px;flex:none;color:var(--teal);}

  /* service rows */
  .svc-row{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding:84px 0;border-top:1px solid var(--line);}
  @media (max-width:920px){.svc-row{grid-template-columns:1fr;gap:36px;padding:56px 0;}}
  .svc-row:nth-child(even) .svc-art{order:-1;}
  @media (max-width:920px){.svc-row:nth-child(even) .svc-art{order:0;}}
  .svc-row h2{font-size:clamp(1.6rem,2.7vw,2.2rem);margin:16px 0 16px;}
  .svc-row .lede{margin-bottom:26px;}
  .svc-art{
    background:var(--surface);border:1px solid var(--line);border-radius:22px;
    padding:26px;box-shadow:var(--shadow);
  }
  .svc-art svg{width:100%;height:auto;display:block;}
  .svc-art img{width:100%;height:auto;display:block;border-radius:12px;}
  .svc-art figcaption{
    font-family:'IBM Plex Mono',monospace;font-size:0.68rem;letter-spacing:.06em;text-transform:uppercase;
    color:var(--ink-soft);margin-top:16px;text-align:center;
  }

  .sig{margin:0 0 26px;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px;}
  .sig li{display:flex;gap:12px;align-items:flex-start;font-size:0.95rem;color:var(--ink-soft);}
  .sig svg{width:18px;height:18px;flex:none;margin-top:3px;color:var(--teal);}
  .sig-label{
    font-family:'IBM Plex Mono',monospace;font-size:0.72rem;letter-spacing:.1em;text-transform:uppercase;
    color:var(--ink-soft);display:block;margin-bottom:14px;
  }
  .svc-link{
    display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--teal);
    font-weight:600;font-size:0.95rem;border-bottom:1px solid transparent;transition:border-color .18s;
  }
  .svc-link:hover{border-color:var(--teal);}
  .svc-link svg{width:15px;height:15px;}

  /* sketch styling */
  .sk{fill:none;stroke:var(--teal);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
  .sk-soft{fill:none;stroke:var(--ink-soft);stroke-width:1.5;opacity:.5;stroke-linecap:round;}
  .sk-warm{fill:none;stroke:var(--amber);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
  .sk-fill{fill:var(--surface-2);}
  .sk-label{font-family:'IBM Plex Mono',monospace;font-size:9px;fill:var(--ink-soft);letter-spacing:.03em;}

  /* process */
  .process{background:var(--teal-deep);color:#EAF3F1;padding:100px 0;}
  .process .eyebrow{color:#8FE0D4;}
  .process .eyebrow::before{background:#8FE0D4;}
  .process h2{color:#F4FAF8;font-size:clamp(1.8rem,3.1vw,2.5rem);margin-top:18px;max-width:18ch;}
  .process .lede{color:#BFE0DA;margin-top:16px;}
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;margin-top:56px;}
  @media (max-width:880px){.steps{grid-template-columns:repeat(2,1fr);gap:30px;}}
  @media (max-width:520px){.steps{grid-template-columns:1fr;}}
  .step{position:relative;padding-top:26px;border-top:1px solid rgba(143,224,212,.35);}
  .step b{
    font-family:'IBM Plex Mono',monospace;font-size:0.78rem;letter-spacing:.1em;color:#8FE0D4;
    display:block;margin-bottom:12px;
  }
  .step h3{color:#F4FAF8;font-family:'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;font-size:1.04rem;font-weight:600;margin-bottom:9px;}
  .step p{color:#BFE0DA;font-size:0.92rem;}

  /* audit-fixes */
  /* Contrast: the eyebrow and the primary button in the dark CTA band were
     2.4:1 and 2.5:1 against their own background — well under the 4.5:1 that
     WCAG AA asks for. Light teal on the near-black band gives 6.7:1. */
  .cta-band .eyebrow{color:#8FE0D4;}
  .cta-band .eyebrow::before{background:#8FE0D4;}
  .cta-band .btn-primary{background:#8FE0D4;color:var(--teal-deep);}
  .cta-band .btn-primary:hover{background:#F1F6F5;color:var(--teal-deep);}

  /* The sketch sits on a dark ground, where the light-theme amber (#C97A2B)
     only reached 3.15:1. Use the palette's dark-theme amber inside that
     section so the legend and the duct lines stay the same colour. */
  .sketch{--amber:#E3A25C;}

  /* Footer links were 24px tall on phones; padding lifts them over the
     36px tap-target floor without changing the desktop layout. */
  @media (max-width:640px){
    .foot-col ul a{display:inline-block;padding:7px 0;}
    .foot-bottom a{display:inline-block;padding:8px 0;}
  }

  /* Section headings that are announced but not painted. */
  .sr-only{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }
  /* audit-fixes-2 */

  /* reco-cards */
  .revgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:26px;align-items:start;}
  @media (max-width:960px){.revgrid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:620px){.revgrid{grid-template-columns:1fr;}}
  .revcard{
    background:var(--surface);border:1px solid var(--line);border-radius:20px;
    padding:26px 24px;display:flex;flex-direction:column;gap:14px;margin:0;
  }
  .revcard .revstars{display:flex;gap:3px;color:var(--amber);}
  .revcard .revstars svg{width:15px;height:15px;}
  .revcard blockquote{margin:0;font-size:0.96rem;line-height:1.62;color:var(--ink);}
  /* figcaption, not footer: the site's global footer{} rules leak into any
     <footer> element and padded these cards out to 142px. */
  .revcard figcaption{font-size:0.84rem;color:var(--ink-soft);margin:0;padding:0;}
  .revcard figcaption b{color:var(--ink);font-weight:600;}
  .revsource{margin-top:22px;font-size:0.84rem;color:var(--ink-soft);text-align:center;}
  .revsource a{color:var(--teal);}
  .revstrip-head{text-align:center;margin-bottom:4px;}
  .revstrip-head h2{font-size:clamp(1.5rem,2.5vw,2rem);margin-top:14px;}
  .revstrip-head .eyebrow{justify-content:center;}

  /* symmetry-fixes */
  /* Hairline card panels: let the final card fill the row so no empty cell
     shows through as a grey block. */
  .cardgrid > :last-child:nth-child(5){grid-column:span 2;}
  @media (max-width:560px){.cardgrid > :last-child:nth-child(5){grid-column:span 1;}}

  /* Price packages: wrap and centre, so a 5-in-3 layout ends symmetrically
     instead of leaving a hole on the right. */
  .tiers{
    display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:22px;
  }
  .tiers > .tier{flex:0 1 calc((100% - 44px) / 3);min-width:0;}
  @media (max-width:1000px){.tiers > .tier{flex-basis:calc((100% - 22px) / 2);}}
  @media (max-width:640px){.tiers > .tier{flex-basis:100%;}}

  /* Review strips: same treatment, so a two-card strip sits centred rather
     than hugging the left edge of a three-column track. */
  .revgrid{
    display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;
  }
  .revgrid > .revcard{flex:0 1 calc((100% - 40px) / 3);min-width:0;}
  @media (max-width:960px){.revgrid > .revcard{flex-basis:calc((100% - 20px) / 2);}}
  @media (max-width:620px){.revgrid > .revcard{flex-basis:100%;}}

  /* One vertical rhythm for content sections. */
  .process, .mission, .sketch{padding-top:96px;padding-bottom:96px;}

  /* layout-fixes */
  /* A hidden element must actually hide. .btn sets display:flex, which beat
     the [hidden] attribute, so a button the script had hidden still showed
     up on the thank-you page. */
  [hidden]{display:none !important;}

  /* .cta-band declared `margin:0 28px` and then `margin-inline:auto`, which
     overrode the horizontal margins. Below 1180px the band therefore ran edge
     to edge while every other block kept a 28px gutter. */
  .cta-band{max-width:min(1180px, calc(100% - 56px));}

  /* .crumbs overrode .wrap's `padding:0 28px` with `padding:26px 0 0`, so the
     breadcrumb sat flush against the screen edge. */
  .crumbs{padding-left:28px;padding-right:28px;}

  /* Display headings inherited the body's 1.6 line-height while h1 used 1.06,
     so multi-line h2/h3 looked far airier than the hero. */
  h2, h3{line-height:1.18;}

  /* Three hero stats did not fit on one row and the third dropped alone. */
  @media (min-width:560px){
    .hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  }

  /* The score panel is a three-column grid that collapses at 760px, but the
     button kept its intrinsic width and pushed past the padding. */
  @media (max-width:760px){
    .review-box{padding:28px;}
    .review-box .btn{width:100%;justify-content:center;}
  }

  /* .trust cells centre their text but the icon is a flex sibling pinned left,
     so the icon never lined up with the words it belongs to. */
  .trust > div{text-align:left;}
  .trust > div > div{text-align:left;}

  /* Hairline card panel: five cards over six tracks, so the last row splits
     into two equal halves instead of leaving an empty grey cell or one
     double-wide card. */
  .cardgrid{grid-template-columns:repeat(6,1fr);}
  .cardgrid > *{grid-column:span 2;}
  .cardgrid > :nth-child(4):nth-last-child(2),
  .cardgrid > :nth-child(5):last-child{grid-column:span 3;}
  @media (max-width:900px){
    .cardgrid{grid-template-columns:repeat(2,1fr);}
    .cardgrid > *{grid-column:span 1;}
    .cardgrid > :nth-child(4):nth-last-child(2){grid-column:span 1;}
    .cardgrid > :nth-child(5):last-child{grid-column:span 2;}
  }
  @media (max-width:560px){
    .cardgrid{grid-template-columns:1fr;}
    .cardgrid > *,
    .cardgrid > :nth-child(4):nth-last-child(2),
    .cardgrid > :nth-child(5):last-child{grid-column:span 1;}
  }

  /* A two-card review strip was stuck at one third width each and looked
     stranded inside a much wider page. */
  .revgrid:has(> .revcard:nth-child(2):last-child) > .revcard{
    flex-basis:calc((100% - 20px) / 2);
  }

  /* Stacked buttons had ragged right edges. Below 520px they fill the row. */
  @media (max-width:520px){
    .hero-actions{flex-direction:column;align-items:stretch;}
    .hero-actions .btn{width:100%;justify-content:center;}
  }

  /* In the centred heroes the h1 has its own max-width but no auto margins,
     so it sat left of the eyebrow and the buttons above and below it. */
  .wrap[style*="text-align:center"] h1{margin-inline:auto;}

  /* Inputs and selects sharing a row ended on different baselines. */
  .field input, .field select{min-height:48px;}
  .field input[type="file"]{padding:11px 12px;font-size:0.92rem;}
  .field input[type="file"]::file-selector-button{
    font-family:inherit;font-size:0.88rem;font-weight:600;
    color:var(--teal-deep);background:var(--surface-2);
    border:1px solid var(--line);border-radius:9px;
    padding:7px 13px;margin-right:12px;cursor:pointer;
  }

  /* The split panel's two halves used 40px and 36px padding, which showed as
     a small step where they stack on a phone. */
  @media (max-width:900px){
    .talk-main, .talk-side{padding-left:32px;padding-right:32px;}
  }

  /* Desktop right-alignment inside the order summary followed the columns
     when they stacked, leaving a label adrift in empty space. */
  @media (max-width:640px){
    .tack-card [style*="text-align:right"]{text-align:left !important;}
  }

  /* Comparison matrix: tighten a little more on small phones so it fits the
     screen instead of needing a sideways drag. */
  @media (max-width:430px){
    table.matrix{font-size:0.66rem;}
    table.matrix th, table.matrix td{padding:8px 3px;}
    table.matrix tbody th{font-size:0.66rem;padding-left:6px;}
    table.matrix thead th span{font-size:0.58rem;}
  }

  /* layout-fixes-2 */
  /* The score panel's single mobile column was still 295px wide inside a
     278px content box, because the button refused to wrap and set the track's
     min-content width. Let it wrap and let the track shrink. */
  @media (max-width:760px){
    .review-box > *{min-width:0;}
    .review-box .btn{white-space:normal;text-align:center;}
  }

  /* A long call-to-action button ran 26px past the content column on phones
     because .btn never wraps. Allow wrapping where the label is long. */
  @media (max-width:520px){
    .btn{white-space:normal;text-align:center;max-width:100%;}
  }

  /* layout-fixes-3 */
  .trust > div > div{padding:0 !important;border:0 !important;margin:0 !important;}
  @media (max-width:760px){
    .trust > div{border-right:none;border-bottom:1px solid var(--line);}
    .trust > div:last-child{border-bottom:none;}
  }

  /* layout-fixes-4 */
  @media (max-width:640px){
    .foot-col ul a:has(svg){display:flex;align-items:flex-start;gap:10px;}
    .foot-col ul a:has(svg) svg{flex:none;margin-top:2px;}
  }