:root{
    --ink:#0F1E45;
    --paper:#FFFFFF;
    --paper-dim:#EDF1F7;
    --teal:#1B3B8C;
    --teal-deep:#0E2263;
    --clay:#77B644;
    --clay-deep:#558330;
    --algae:#6E7A3B;
    --slate:#55666B;
    --line: rgba(15,30,69,0.12);
    --radius: 4px;
    --wrap: 1160px;
  }
  *,*::before,*::after{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'IBM Plex Sans', system-ui, sans-serif;
    -webkit-font-smoothing:antialiased;
    line-height:1.55;
  }
  h1,h2,h3{
    font-family:'Fraunces', serif;
    font-weight:600;
    margin:0;
    letter-spacing:-0.01em;
  }
  .mono{
    font-family:'IBM Plex Mono', monospace;
    letter-spacing:0.04em;
  }
  a{color:inherit;}
  img{max-width:100%;display:block;}
  .wrap{max-width:var(--wrap); margin:0 auto; padding:0 28px;}
  section{padding:96px 0;}
  @media (max-width:720px){ section{padding:64px 0;} }

  /* -------- Buttons -------- */
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    font-family:'IBM Plex Mono', monospace;
    font-size:13px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
    padding:15px 26px;
    border-radius:var(--radius);
    text-decoration:none;
    border:1px solid transparent;
    cursor:pointer;
    transition: transform .15s ease, background .15s ease, border-color .15s ease;
  }
  .btn:hover{ transform: translateY(-1px); }
  .btn-primary{ background:var(--teal); color:#fff; }
  .btn-primary:hover{ background:var(--teal-deep); }
  .btn-ghost{ background:transparent; color:var(--paper); border-color:rgba(246,248,245,0.5); }
  .btn-ghost:hover{ border-color:#fff; }
  .btn-outline{ background:transparent; color:var(--ink); border-color:var(--line); }
  .btn-outline:hover{ border-color:var(--ink); }

  /* -------- Nav -------- */
  header.nav{
    position:fixed; top:0; left:0; right:0; z-index:50;
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 28px;
    background:#fff;
    box-shadow:0 1px 0 var(--line);
    transition: padding .25s ease, box-shadow .25s ease;
  }
  header.nav.solid{
    box-shadow:0 2px 12px rgba(15,30,69,0.10);
    padding:10px 28px;
  }
  .brand{
    display:flex; align-items:center;
    text-decoration:none;
  }
  .brand img{ height:74px; width:auto; display:block; transition:height .2s ease; }
  header.nav.solid .brand img{ height:58px; }
  nav.links{ display:flex; align-items:center; gap:28px; }
  nav.links a{
    color:var(--ink); text-decoration:none; font-size:14px; font-weight:500;
  }
  .nav-cta{ display:flex; align-items:center; gap:18px; }
  .nav-phone{ font-family:'IBM Plex Mono', monospace; font-size:14px; color:var(--ink); text-decoration:none; }
  .nav-links-phone{ display:none; }
  .nav-toggle{
    display:none; background:none; border:none; cursor:pointer;
    width:40px; height:40px; padding:0; align-items:center; justify-content:center;
  }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
    display:block; width:22px; height:2px; background:var(--ink); position:relative;
    transition:background .2s ease;
  }
  .nav-toggle span::before, .nav-toggle span::after{ content:""; position:absolute; left:0; }
  .nav-toggle span::before{ top:-7px; }
  .nav-toggle span::after{ top:7px; }

  @media (max-width:860px){
    nav.links{
      display:none;
      position:absolute; top:100%; left:0; right:0;
      background:#fff; flex-direction:column; align-items:flex-start;
      gap:0; padding:8px 28px 20px; box-shadow:0 8px 16px rgba(15,30,69,0.12);
    }
    nav.links.open{ display:flex; }
    nav.links a{ color:var(--ink); width:100%; padding:12px 0; border-bottom:1px solid var(--line); }
    nav.links a.nav-links-phone{ display:block; font-family:'IBM Plex Mono', monospace; font-weight:600; border-bottom:none; }
    .nav-phone{ display:none; }
    .nav-toggle{ display:flex; }
    header.nav{ flex-wrap:wrap; }
    .brand img{ height:52px; }
  }

  /* -------- Hero content pieces (shared) -------- */
  .review-badge{
    display:inline-flex; align-items:center; gap:9px;
    background:var(--paper); color:var(--ink);
    padding:9px 16px; border-radius:100px;
    text-decoration:none; margin-bottom:20px;
    box-shadow:0 2px 10px rgba(15,30,69,0.25);
  }
  .review-badge .stars{ color:#E3A028; font-size:14px; letter-spacing:1px; }
  .review-badge .mono{ font-size:12.5px; font-weight:600; color:var(--ink); }
  .review-badge .mono span{ color:var(--slate); font-weight:400; }
  .eyebrow{
    font-family:'IBM Plex Mono', monospace; font-size:13px; letter-spacing:0.14em;
    text-transform:uppercase; color:var(--paper); opacity:0.85; margin-bottom:18px;
  }
  .eyebrow::before{ content:"— "; color:var(--clay); }
  .page-hero h1 em{ font-style:italic; opacity:0.85; }
  .hero-actions{ display:flex; gap:16px; margin-top:34px; flex-wrap:wrap; }
  .hero-spray{
    position:absolute; top:0; right:0; width:44%; max-width:520px; height:100%;
    z-index:1; pointer-events:none; opacity:0.9;
  }
  @media (max-width:900px){ .hero-spray{ display:none; } }

  /* -------- Service area strip -------- */
  .strip{
    background:var(--ink); color:var(--paper);
    padding:16px 0;
  }
  .strip .wrap{ display:flex; justify-content:center; }
  .strip span{
    font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.12em;
    text-transform:uppercase; color:rgba(246,248,245,0.85);
    text-align:center;
  }
  .strip .dot{ color:var(--clay); margin:0 14px; }

  /* -------- Why row -------- */
  .why{ display:grid; grid-template-columns:repeat(3,1fr); gap:36px; }
  @media (max-width:760px){ .why{ grid-template-columns:1fr; gap:28px; } }

  /* -------- Trust badge grid -------- */
  .trust{ background:var(--paper-dim); }
  .trust-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:36px 32px; }
  @media (max-width:760px){ .trust-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:480px){ .trust-grid{ grid-template-columns:1fr; } }
  .trust-item{ display:flex; gap:16px; align-items:flex-start; }
  .trust-icon{
    flex:none; width:44px; height:44px; border-radius:50%;
    background:var(--paper); border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; color:var(--teal);
  }
  .trust-icon svg{ width:22px; height:22px; }
  .trust-item h3{ font-size:16.5px; font-weight:600; }
  .trust-item p{ color:var(--slate); font-size:14px; margin-top:5px; line-height:1.5; }

  /* -------- Fact list (proof-forward, no decoration) -------- */
  .fact-list{ display:grid; grid-template-columns:1fr 1fr; gap:22px 44px; }
  @media (max-width:700px){ .fact-list{ grid-template-columns:1fr; } }
  .fact-item{ display:flex; gap:12px; align-items:flex-start; font-size:15.5px; color:var(--ink); line-height:1.55; }
  .fact-item svg{ flex:none; width:19px; height:19px; margin-top:3px; color:var(--teal); }
  .fact-item strong{ font-weight:600; }

  /* -------- Promise list (Commercial) -------- */
  .promise-list{ margin-top:20px; }
  .promise-row{
    display:grid; grid-template-columns:200px 1fr; gap:36px;
    padding:28px 0; border-top:1px solid var(--line); align-items:baseline;
  }
  .promise-row:last-child{ border-bottom:1px solid var(--line); }
  .promise-name{
    font-family:'Fraunces', serif; font-weight:600; font-size:23px; color:var(--ink);
  }
  .promise-proof{ color:var(--slate); font-size:15.5px; line-height:1.65; }
  @media (max-width:700px){
    .promise-row{ grid-template-columns:1fr; gap:8px; }
  }


  /* -------- Service card photo -------- */
  .service-card-img{ width:100%; height:150px; object-fit:cover; border-radius:var(--radius); margin-bottom:16px; }
  .why-item{ border-top:1px solid var(--line); padding-top:20px; }
  .why-item .num{ font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--teal); }
  .why-item h3{ font-size:19px; margin-top:10px; font-weight:600; }
  .why-item p{ color:var(--slate); font-size:15px; margin-top:8px; }

  /* -------- Section heads -------- */
  .section-head{ max-width:640px; margin-bottom:52px; }
  .section-head .eyebrow{ color:var(--teal); opacity:1; }
  .section-head .eyebrow::before{ color:var(--clay); }
  .section-head h2{ font-size:clamp(28px,4vw,42px); }
  .section-head p{ color:var(--slate); margin-top:14px; font-size:16px; }
  .on-dark .section-head .eyebrow{ color:var(--paper); opacity:0.8; }

  /* -------- Services -------- */
  .services{ background:var(--paper); }
  .service-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
  @media (max-width:900px){ .service-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:600px){ .service-grid{ grid-template-columns:1fr; } }
  .service-grid.cols-2{ grid-template-columns:repeat(2,1fr); }
  @media (max-width:600px){ .service-grid.cols-2{ grid-template-columns:1fr; } }
  .service-card{ background:var(--paper); padding:30px 26px; display:flex; flex-direction:column; min-height:230px; }
  .service-card .svc-label{ font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--slate); letter-spacing:0.08em; text-transform:uppercase; }
  .service-card h3{ font-size:21px; margin-top:12px; }
  .service-card p{ color:var(--slate); font-size:14.5px; margin-top:10px; flex:1; }
  .service-price{ margin-top:18px; padding-top:16px; border-top:1px dashed var(--line); font-family:'IBM Plex Mono', monospace; font-size:15px; color:var(--teal-deep); font-weight:600; }
  .service-price small{ display:block; color:var(--slate); font-weight:400; font-size:12px; margin-top:3px; }

  .bundle-banner{
    margin-top:1px; background:var(--teal-deep); color:var(--paper);
    padding:22px 26px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;
    border:1px solid var(--line); border-top:none;
  }
  .bundle-banner p{ margin:0; font-size:15px; }
  .bundle-banner strong{ color:var(--paper); }
  .bundle-banner .mono{ color:rgba(246,248,245,0.75); font-size:12px; }

  /* -------- Process -------- */
  .process{ background:var(--ink); color:var(--paper); }
  .process-list{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; margin-top:10px; }
  @media (max-width:900px){ .process-list{ grid-template-columns:1fr 1fr; } }
  @media (max-width:560px){ .process-list{ grid-template-columns:1fr; } }
  .process-item .step-num{ font-family:'IBM Plex Mono', monospace; font-size:13px; color:var(--clay); }
  .process-item h3{ font-size:19px; margin-top:12px; color:#fff; font-weight:600; }
  .process-item p{ font-size:14.5px; color:rgba(246,248,245,0.72); margin-top:10px; }
  .process-item{ border-top:1px solid rgba(246,248,245,0.18); padding-top:18px; }

  /* -------- Gallery -------- */
  .gallery-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
  }
  @media (max-width:760px){ .gallery-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:460px){ .gallery-grid{ grid-template-columns:1fr; } }
  .gallery-grid img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--radius); display:block; }

  /* -------- Reviews CTA -------- */
  .reviews{ background:var(--paper-dim); }
  .reviews-inner{
    display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
    border:1px solid var(--line); background:var(--paper); padding:44px; border-radius:var(--radius);
  }
  .reviews-inner h2{ font-size:28px; max-width:420px; }
  .reviews-inner p{ color:var(--slate); margin-top:10px; max-width:420px; font-size:15px; }

  /* -------- Contact / Footer -------- */
  footer{ background:var(--ink); color:var(--paper); padding:80px 0 36px; }
  .footer-top{ display:flex; justify-content:space-between; gap:48px; flex-wrap:wrap; padding-bottom:56px; border-bottom:1px solid rgba(246,248,245,0.15); }
  .footer-brand{ max-width:360px; }
  .footer-brand .brand{ color:#fff; font-size:22px; }
  .footer-brand p{ color:rgba(246,248,245,0.7); font-size:14.5px; margin-top:14px; }
  .footer-contact{ display:flex; gap:56px; flex-wrap:wrap; }
  .footer-col h4{ font-family:'IBM Plex Mono', monospace; font-size:12px; text-transform:uppercase; letter-spacing:0.1em; color:rgba(246,248,245,0.55); margin:0 0 14px; }
  .footer-col a, .footer-col div{ display:block; color:#fff; text-decoration:none; font-size:15px; margin-bottom:8px; }
  .footer-bottom{ display:flex; justify-content:space-between; padding-top:26px; flex-wrap:wrap; gap:10px; }
  .footer-bottom span{ font-family:'IBM Plex Mono', monospace; font-size:12px; color:rgba(246,248,245,0.5); }

  .sr-only{ position:absolute; width:1px;height:1px; overflow:hidden; clip:rect(0,0,0,0); }
  :focus-visible{ outline:2px solid var(--clay); outline-offset:2px; }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
  }

  /* -------- Page header (Services / About) -------- */
  .page-hero{
    position:relative; padding:180px 0 70px; color:#fff;
    background-size:cover; background-position:center;
  }
  .page-hero::before{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(15,30,69,0.8), rgba(15,30,69,0.6));
  }
  .page-hero .wrap{ position:relative; z-index:2; }
  .page-hero h1{ font-size:clamp(34px,5vw,54px); color:#fff; max-width:700px; }
  .page-hero p{ margin-top:16px; max-width:540px; color:rgba(246,248,245,0.88); font-size:16.5px; }

  /* -------- Services teaser (Home) -------- */
  .teaser-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:8px; }
  @media (max-width:800px){ .teaser-grid{ grid-template-columns:1fr; } }
  .teaser-card{ border:1px solid var(--line); border-radius:var(--radius); padding:28px; background:var(--paper); }
  .teaser-card .svc-label{ font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--slate); letter-spacing:0.08em; text-transform:uppercase; }
  .teaser-card h3{ font-size:20px; margin-top:10px; }
  .teaser-card p{ color:var(--slate); font-size:14.5px; margin-top:10px; }
  .teaser-card .from{ margin-top:16px; font-family:'IBM Plex Mono', monospace; font-size:14px; color:var(--teal-deep); font-weight:600; }
  .teaser-cta{ margin-top:40px; text-align:center; }

  /* -------- About page -------- */
  .about-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:56px; align-items:start; }
  @media (max-width:860px){ .about-grid{ grid-template-columns:1fr; } }
  .about-story p{ margin-top:18px; color:var(--slate); font-size:16px; line-height:1.75; }
  .about-pull{
    font-family:'Fraunces', serif; font-size:24px; font-style:italic; color:var(--ink);
    border-left:3px solid var(--clay); padding-left:22px; margin:36px 0; max-width:620px; line-height:1.4;
  }
  .about-sidebar{
    background:var(--paper-dim); border:1px solid var(--line); border-radius:var(--radius);
    padding:32px; position:sticky; top:110px;
  }
  .about-sidebar h3{ font-size:18px; margin-bottom:20px; }
  .about-sidebar .contact-line{ display:flex; flex-direction:column; gap:18px; margin-bottom:24px; }
  .about-sidebar a, .about-sidebar div.val{ color:var(--ink); text-decoration:none; font-size:15px; }
  .about-sidebar .label{
    font-family:'IBM Plex Mono', monospace; font-size:11px; text-transform:uppercase;
    letter-spacing:0.08em; color:var(--slate); display:block; margin-bottom:4px;
  }

  /* -------- Hub cards (Home: Residential / Commercial routing) -------- */
  .hub-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
  @media (max-width:760px){ .hub-grid{ grid-template-columns:1fr; } }
  .hub-card{
    position:relative; min-height:340px; border-radius:var(--radius); overflow:hidden;
    display:flex; flex-direction:column; justify-content:flex-end; padding:32px;
    color:#fff; text-decoration:none; background-size:cover; background-position:center;
    isolation:isolate;
  }
  .hub-card::before{
    content:""; position:absolute; inset:0; z-index:0;
    background:linear-gradient(180deg, rgba(15,30,69,0.35) 0%, rgba(15,30,69,0.88) 100%);
    transition:background .2s ease;
  }
  .hub-card:hover::before{ background:linear-gradient(180deg, rgba(15,30,69,0.5) 0%, rgba(15,30,69,0.92) 100%); }
  .hub-card > *{ position:relative; z-index:1; }
  .hub-card .eyebrow{ color:var(--paper); margin-bottom:10px; }
  .hub-card h3{ font-size:28px; color:#fff; }
  .hub-card p{ margin-top:10px; color:rgba(246,248,245,0.85); font-size:15px; max-width:380px; }
  .hub-card .hub-arrow{
    margin-top:20px; display:inline-flex; align-items:center; gap:8px;
    font-family:'IBM Plex Mono', monospace; font-size:13px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
  }
  .hub-card .hub-arrow svg{ width:16px; height:16px; transition:transform .15s ease; }
  .hub-card:hover .hub-arrow svg{ transform:translateX(4px); }

  /* -------- Real Results: interactive before/after slider -------- */
  .results-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:32px 28px; }
  @media (max-width:860px){ .results-list{ grid-template-columns:1fr; } }
  .result-title{ font-size:15px; color:var(--ink); margin-top:14px; }
  .result-title strong{ font-weight:600; }

  .ba-slider{
    position:relative; width:100%; aspect-ratio:4/3; overflow:hidden;
    border-radius:var(--radius); user-select:none; -webkit-user-select:none;
    background:var(--ink);
  }
  .ba-slider img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    display:block; pointer-events:none;
  }
  .ba-slider .ba-after{ z-index:1; }
  .ba-before-wrap{
    position:absolute; inset:0; z-index:2;
    clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0);
  }
  .ba-handle{
    position:absolute; top:0; bottom:0; left:var(--pos, 50%); z-index:3;
    width:3px; background:#fff; transform:translateX(-50%);
    box-shadow:0 0 0 1px rgba(15,30,69,0.15);
    pointer-events:none;
  }
  .ba-handle::after{
    content:"↔"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:38px; height:38px; border-radius:50%; background:#fff; color:var(--ink);
    display:flex; align-items:center; justify-content:center; font-size:16px;
    box-shadow:0 2px 10px rgba(15,30,69,0.35);
  }
  .ba-range{
    position:absolute; inset:0; width:100%; height:100%; z-index:4;
    margin:0; opacity:0; cursor:ew-resize; appearance:none; -webkit-appearance:none;
  }
  .ba-range::-webkit-slider-thumb{ -webkit-appearance:none; width:100%; height:100%; }
  .ba-tag{
    position:absolute; bottom:12px; z-index:3;
    font-family:'IBM Plex Mono', monospace; font-size:11px; font-weight:600;
    letter-spacing:0.08em; text-transform:uppercase; color:#fff;
    background:rgba(15,30,69,0.7); padding:5px 12px; border-radius:100px;
    pointer-events:none;
  }
  .ba-tag.tag-before{ left:12px; }
  .ba-tag.tag-after{ right:12px; }

  /* -------- Real Results: static before/after card (mismatched framing) -------- */
  .ba-card{
    display:grid; grid-template-columns:1fr; gap:16px;
  }
  .ba-card-row{
    display:grid; grid-template-columns:1fr 1fr; gap:2px;
    background:var(--line); border-radius:var(--radius); overflow:hidden;
  }
  .ba-card-row figure{ position:relative; margin:0; }
  .ba-card-row img{
    width:100%; height:100%; aspect-ratio:1/1; object-fit:cover; display:block;
  }
  .ba-card-row figcaption{
    position:absolute; bottom:10px; left:10px; z-index:2;
    font-family:'IBM Plex Mono', monospace; font-size:11px; font-weight:600;
    letter-spacing:0.08em; text-transform:uppercase; color:#fff;
    background:rgba(15,30,69,0.7); padding:4px 11px; border-radius:100px;
  }
  .ba-card-label{ font-size:15px; color:var(--slate); }
  .ba-card-label strong{ color:var(--ink); }