/* ---------- tokens ---------- */
  :root{
    --paper:#f2f6f3;
    --surface:#ffffff;
    --surface-2:#e7eee9;
    --ink:#0d2320;
    --ink-soft:#3c5450;
    --murk:#55643c;
    --murk-deep:#37421f;
    --murk-line:#7c8a52;
    --clear:#0e93a1;
    --clear-deep:#076b76;
    --clear-line:#7fd6d0;
    --gold:#c97a3d;
    --border:#d2ddd4;
    --shadow: 0 1px 2px rgba(13,35,32,.06), 0 8px 24px -12px rgba(13,35,32,.18);
    --radius: 14px;
    --maxw: 1180px;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --paper:#081415;
      --surface:#0e2022;
      --surface-2:#12292b;
      --ink:#e7f3ef;
      --ink-soft:#a9c4bd;
      --murk:#7c8c56;
      --murk-deep:#42502a;
      --murk-line:#9fae72;
      --clear:#29d6c6;
      --clear-deep:#1aa89c;
      --clear-line:#79efe6;
      --gold:#e0975c;
      --border:#1c3436;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 30px -14px rgba(0,0,0,.5);
    }
  }
  :root[data-theme="dark"]{
    --paper:#081415;
    --surface:#0e2022;
    --surface-2:#12292b;
    --ink:#e7f3ef;
    --ink-soft:#a9c4bd;
    --murk:#7c8c56;
    --murk-deep:#42502a;
    --murk-line:#9fae72;
    --clear:#29d6c6;
    --clear-deep:#1aa89c;
    --clear-line:#79efe6;
    --gold:#e0975c;
    --border:#1c3436;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 30px -14px rgba(0,0,0,.5);
  }

  *{box-sizing:border-box;}
  html{-webkit-text-size-adjust:100%;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:"Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size:16px;
    line-height:1.55;
    padding-inline:20px;
  }
  @media (min-width:720px){ body{ padding-inline:32px; } }

  h1,h2,h3{
    font-family:"Fraunces", Georgia, "Times New Roman", serif;
    font-weight:650;
    line-height:1.08;
    text-wrap:balance;
    margin:0;
    color:var(--ink);
  }
  em{ font-style:italic; font-weight:650; color:inherit; }
  a{ color:inherit; }
  img,svg{ max-width:100%; display:block; }
  .mono{ font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
  .kicker{
    font-family:"IBM Plex Mono", ui-monospace, monospace;
    font-size:.78rem;
    font-weight:600;
    letter-spacing:.11em;
    text-transform:uppercase;
    color:var(--clear-deep);
    display:flex;
    align-items:center;
    gap:.6em;
  }
  .kicker::before{
    content:"";
    width:22px; height:2px;
    background:var(--gold);
    display:inline-block;
    flex:none;
  }

  .wrap{ max-width:var(--maxw); margin-inline:auto; }
  section{ padding-block: clamp(52px, 8vw, 96px); }
  .section-head{ max-width:640px; margin-bottom: clamp(28px,4vw,44px); display:flex; flex-direction:column; gap:14px; }
  .section-head h2{ font-size:clamp(1.7rem, 3.2vw, 2.4rem); }
  .section-head p{ color:var(--ink-soft); font-size:1.05rem; max-width:60ch; }

  /* ---------- nav ---------- */
  header.site{
    position:sticky; top:0; z-index:40;
    background:color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: blur(10px) saturate(1.1);
    border-bottom:1px solid var(--border);
  }
  .nav{
    max-width:var(--maxw); margin-inline:auto;
    display:flex; align-items:center; justify-content:space-between;
    gap:18px; padding-block:14px; flex-wrap:wrap;
  }
  .brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
  .brand svg{ width:30px; height:30px; flex:none; }
  .brand-word{ font-family:"Fraunces",serif; font-weight:700; font-size:1.18rem; letter-spacing:-.01em; }
  .brand-word span{ color:var(--clear-deep); }
  nav.links{ display:flex; gap:26px; flex-wrap:wrap; }
  nav.links a{
    text-decoration:none; font-weight:600; font-size:.94rem; color:var(--ink-soft);
    padding-block:4px; border-bottom:2px solid transparent;
  }
  nav.links a:hover{ color:var(--ink); border-color:var(--gold); }
  .nav-actions{ display:flex; align-items:center; gap:12px; }
  .tel{
    font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:.92rem;
    text-decoration:none; color:var(--ink); white-space:nowrap;
  }
  nav.links a[aria-current="page"]{ color:var(--ink); border-color:var(--gold); }
  .menu{ display:none; position:relative; }
  .menu summary{
    list-style:none; cursor:pointer; font-weight:700; font-size:.92rem;
    padding:10px 16px; border-radius:999px; border:1px solid var(--border);
  }
  .menu summary::-webkit-details-marker{ display:none; }
  .menu[open] summary{ border-color:var(--gold); }
  .menu-panel{
    position:absolute; right:0; top:calc(100% + 10px); min-width:240px;
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    box-shadow:var(--shadow); padding:10px; display:flex; flex-direction:column;
  }
  .menu-panel a{ text-decoration:none; font-weight:600; padding:10px 12px; border-radius:9px; }
  .menu-panel a:hover{ background:var(--surface-2); }
  @media (max-width: 1100px){ nav.links{ display:none; } .menu{ display:block; } }
  @media (max-width: 900px){ .nav-actions .tel{ display:none; } }
  @media (max-width: 420px){ .nav-actions .btn-primary{ display:none; } }

  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-family:"Public Sans",sans-serif; font-weight:700; font-size:.95rem;
    padding:11px 20px; border-radius:999px; text-decoration:none; cursor:pointer;
    border:1px solid transparent; white-space:nowrap;
  }
  .btn-primary{ background:var(--clear-deep); color:#f4fbfa; }
  .btn-primary:hover{ background:var(--clear); }
  .btn-ghost{ background:transparent; color:var(--ink); border-color:var(--border); }
  .btn-ghost:hover{ border-color:var(--gold); color:var(--ink); }
  .btn-lg{ padding:14px 26px; font-size:1rem; }
  .btn svg{ width:16px; height:16px; }

  /* ---------- hero ---------- */
  .hero{ padding-top: clamp(40px,6vw,72px); }
  .hero-grid{
    display:grid; grid-template-columns: 1.05fr .95fr; gap:48px; align-items:center;
  }
  @media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; } }
  .hero h1{ font-size:clamp(2.3rem, 5vw, 3.6rem); margin-block:16px 18px; }
  .hero-sub{ color:var(--ink-soft); font-size:1.12rem; max-width:52ch; margin-bottom:26px; }
  .hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:22px; }
  .hero-trust{ color:var(--ink-soft); font-size:.86rem; }
  .hero-trust strong{ color:var(--ink); font-weight:600; }

  .hero-art{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--border); }
  .hero-art svg{ width:100%; height:auto; display:block; }

  /* ---------- stat/callout cards ---------- */
  .grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  @media (max-width:820px){ .grid-3{ grid-template-columns:1fr; } }
  .card{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:24px; display:flex; flex-direction:column; gap:10px; box-shadow:var(--shadow);
  }
  .card .icon{ width:34px; height:34px; color:var(--clear-deep); }
  .card h3{ font-size:1.08rem; font-weight:650; }
  .card p{ color:var(--ink-soft); font-size:.95rem; margin:0; }

  .problem-lede{ color:var(--ink-soft); font-size:1.08rem; max-width:68ch; margin-bottom:32px; }

  /* ---------- process ---------- */
  .process{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--surface); box-shadow:var(--shadow); }
  @media (max-width:900px){ .process{ grid-template-columns:1fr; } }
  .step{ padding:26px 22px; border-right:1px solid var(--border); position:relative; }
  .step:last-child{ border-right:none; }
  @media (max-width:900px){ .step{ border-right:none; border-bottom:1px solid var(--border); } .step:last-child{border-bottom:none;} }
  .step .num{ font-family:"IBM Plex Mono",monospace; color:var(--gold); font-weight:600; font-size:.82rem; }
  .step .icon{ width:30px; height:30px; color:var(--clear-deep); margin-block:12px 10px; }
  .step h3{ font-size:1rem; margin-bottom:6px; }
  .step p{ color:var(--ink-soft); font-size:.92rem; margin:0; }

  /* ---------- compare slider ---------- */
  .compare-wrap{ max-width:560px; margin-inline:auto; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow); }
  .compare{
    position:relative; aspect-ratio: 653/739; overflow:hidden; --reveal:50%;
    touch-action:pan-y; background:var(--surface-2);
  }
  .compare .layer{ position:absolute; inset:0; }
  .compare .layer img{ width:100%; height:100%; object-fit:cover; display:block; }
  .compare .after-layer{ clip-path: inset(0 0 0 var(--reveal)); }
  .tag{
    position:absolute; top:14px; font-family:"IBM Plex Mono",monospace; font-size:.72rem; font-weight:600;
    letter-spacing:.08em; text-transform:uppercase; padding:6px 11px; border-radius:999px;
    background:color-mix(in srgb, var(--surface) 78%, transparent); backdrop-filter:blur(4px);
    border:1px solid var(--border); color:var(--ink);
  }
  .tag.before{ left:14px; }
  .tag.after{ right:14px; }
  .handle-line{
    position:absolute; top:0; bottom:0; left:var(--reveal); width:2px; background:var(--surface);
    box-shadow:0 0 0 1px var(--border); pointer-events:none;
  }
  .handle-grip{
    position:absolute; top:50%; left:var(--reveal); transform:translate(-50%,-50%);
    width:42px; height:42px; border-radius:50%; background:var(--surface); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow); pointer-events:none;
  }
  .handle-grip svg{ width:18px; height:18px; color:var(--ink); }
  .compare input[type="range"]{
    position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; -webkit-appearance:none;
  }
  .compare-caption{ display:flex; justify-content:space-between; gap:16px; padding:14px 18px; background:var(--surface); font-size:.85rem; color:var(--ink-soft); flex-wrap:wrap; }

  /* ---------- services ---------- */
  .grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
  @media (max-width:980px){ .grid-4{ grid-template-columns:1fr 1fr; } }
  @media (max-width:560px){ .grid-4{ grid-template-columns:1fr; } }

  /* ---------- service area ---------- */
  .area-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:40px; align-items:center; }
  @media (max-width:900px){ .area-grid{ grid-template-columns:1fr; } }
  .lake-map{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); }
  .lake-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
  .lake-list li{ display:flex; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid var(--border); align-items:baseline; }
  .lake-list li:last-child{ border-bottom:none; }
  .lake-list .name{ font-weight:650; font-size:1.02rem; }
  .lake-list .svc{ color:var(--ink-soft); font-size:.9rem; text-align:right; }
  .lake-list .svc.request{ color:var(--gold); font-family:"IBM Plex Mono",monospace; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; }

  /* ---------- guarantee ---------- */
  .guarantee{
    background:var(--murk-deep); color:#eef4e9; border-radius:var(--radius); padding:clamp(30px,5vw,52px);
    display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center;
  }
  @media (max-width:820px){ .guarantee{ grid-template-columns:1fr; } }
  .guarantee h2{ color:#f4f8ef; font-size:clamp(1.6rem,3vw,2.1rem); }
  .guarantee p{ color:#d7e2cc; }
  .guarantee ul{ list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; }
  .guarantee li{ display:flex; gap:10px; align-items:flex-start; color:#eef4e9; font-size:.96rem; }
  .guarantee li svg{ width:18px; height:18px; flex:none; margin-top:3px; color:var(--gold); }
  .guarantee-tag{ font-family:"Fraunces",serif; font-style:italic; font-weight:650; font-size:1.5rem; color:#f4f8ef; }

  /* ---------- contact / quote ---------- */
  .quote-grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap:44px; }
  @media (max-width:900px){ .quote-grid{ grid-template-columns:1fr; } }
  .contact-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:16px; }
  .contact-line{ display:flex; align-items:center; gap:12px; }
  .contact-line .icon{ width:20px; height:20px; color:var(--clear-deep); flex:none; }
  .contact-line a{ text-decoration:none; font-weight:650; }
  .contact-line .label{ display:block; font-size:.78rem; color:var(--ink-soft); font-family:"IBM Plex Mono",monospace; text-transform:uppercase; letter-spacing:.06em; }

  form.quote{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:18px; }
  .field{ display:flex; flex-direction:column; gap:6px; }
  .field label{ font-size:.82rem; font-weight:600; color:var(--ink-soft); }
  .field input[type="text"], .field input[type="tel"], .field select, .field textarea{
    font:inherit; font-size:.98rem; padding:11px 13px; border-radius:9px; border:1px solid var(--border);
    background:var(--paper); color:var(--ink); width:100%;
  }
  .field textarea{ resize:vertical; min-height:80px; }
  .field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--clear); outline-offset:1px; }
  .check-row{ display:flex; flex-wrap:wrap; gap:10px; }
  .chip{ position:relative; }
  .chip input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
  .chip span{
    display:inline-flex; padding:9px 14px; border-radius:999px; border:1px solid var(--border);
    font-size:.88rem; font-weight:600; color:var(--ink-soft); background:var(--paper);
  }
  .chip input:checked + span{ background:var(--clear-deep); border-color:var(--clear-deep); color:#f4fbfa; }
  .chip input:focus-visible + span{ outline:2px solid var(--gold); outline-offset:2px; }
  .quote-actions{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
  .quote-note{ font-size:.82rem; color:var(--ink-soft); }
  .copied-msg{ font-size:.82rem; color:var(--clear-deep); font-weight:600; opacity:0; transition:opacity .2s; }
  .copied-msg.show{ opacity:1; }

  footer.site{ border-top:1px solid var(--border); padding-block:32px; margin-top:20px; }
  .footer-grid{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center; }
  .footer-grid .brand-word{ font-size:1rem; }
  .footer-links{ display:flex; gap:20px; flex-wrap:wrap; font-size:.86rem; }
  .footer-links a{ text-decoration:none; color:var(--ink-soft); }
  .footer-links a:hover{ color:var(--ink); }
  .footer-fine{ font-size:.8rem; color:var(--ink-soft); margin-top:14px; }

  /* Only hide for animation when JS is running, so crawlers and no-JS readers always see content */
  @media (prefers-reduced-motion: no-preference){
    .js .reveal{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }
    .js .reveal.in{ opacity:1; transform:none; }
  }

  :focus-visible{ outline:2px solid var(--clear-deep); outline-offset:2px; }

  /* ---------- multi-page additions ---------- */
  .hero-h1 .h1-eyebrow{
    display:block; font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:.8rem; font-weight:600;
    letter-spacing:.11em; text-transform:uppercase; color:var(--clear-deep); margin-bottom:14px; line-height:1.4;
  }

  .crumbs{ max-width:var(--maxw); margin-inline:auto; padding-top:22px; font-size:.84rem; color:var(--ink-soft); }
  .crumbs ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
  .crumbs li+li::before{ content:"/"; margin-right:6px; color:var(--border); }
  .crumbs a{ text-decoration:none; }
  .crumbs a:hover{ text-decoration:underline; }

  .page-hero{ padding-block: clamp(28px,5vw,56px) clamp(24px,4vw,40px); }
  .page-hero h1{ font-size:clamp(2rem, 4.4vw, 3.1rem); margin-block:14px 16px; max-width:22ch; }
  .page-hero .lede{ color:var(--ink-soft); font-size:1.12rem; max-width:62ch; margin:0 0 22px; }
  .answer{
    background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--clear-deep);
    border-radius:var(--radius); padding:18px 22px; max-width:72ch; box-shadow:var(--shadow); margin:0 0 24px;
  }
  .answer strong{ display:block; font-family:"IBM Plex Mono",monospace; font-size:.74rem; letter-spacing:.09em; text-transform:uppercase; color:var(--clear-deep); margin-bottom:6px; }
  .answer p{ margin:0; }

  .split{ display:grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); gap:48px; align-items:start; }
  @media (max-width:900px){ .split{ grid-template-columns:1fr; } }
  .aside-card{ position:sticky; top:96px; }
  @media (max-width:900px){ .aside-card{ position:static; } }

  .prose{ max-width:70ch; }
  .prose h2{ font-size:clamp(1.45rem,2.6vw,1.9rem); margin:44px 0 14px; }
  .prose h2:first-child{ margin-top:0; }
  .prose h3{ font-size:1.15rem; margin:28px 0 8px; }
  .prose p, .prose li{ color:var(--ink-soft); font-size:1.03rem; }
  .prose p{ margin:0 0 16px; }
  .prose ul, .prose ol{ margin:0 0 18px; padding-left:1.25em; }
  .prose li{ margin-bottom:8px; }
  .prose strong{ color:var(--ink); }
  .prose a{ color:var(--clear-deep); font-weight:600; }
  .prose figure{ margin:28px 0; }

  figure.photo{ margin:0; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); background:var(--surface); box-shadow:var(--shadow); }
  figure.photo img{ width:100%; height:auto; }
  figure.photo figcaption, .compare-wrap figcaption{ padding:12px 16px; font-size:.86rem; color:var(--ink-soft); }
  .photo-pair{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  @media (max-width:560px){ .photo-pair{ grid-template-columns:1fr; } }

  .table-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); margin:20px 0 26px; }
  table{ border-collapse:collapse; width:100%; min-width:620px; font-size:.93rem; }
  th, td{ text-align:left; padding:12px 14px; border-bottom:1px solid var(--border); vertical-align:top; }
  th{ font-family:"IBM Plex Mono",monospace; font-size:.74rem; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-soft); background:var(--surface-2); }
  tr:last-child td{ border-bottom:none; }
  td:first-child{ font-weight:650; color:var(--ink); }

  .faq{ display:flex; flex-direction:column; gap:10px; max-width:820px; }
  .faq details{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:0 20px; }
  .faq summary{ cursor:pointer; list-style:none; padding:17px 30px 17px 0; font-weight:650; position:relative; }
  .faq summary::-webkit-details-marker{ display:none; }
  .faq summary::after{ content:"+"; position:absolute; right:0; top:14px; font-family:"IBM Plex Mono",monospace; font-size:1.2rem; color:var(--gold); }
  .faq details[open] summary::after{ content:"–"; }
  .faq details > div{ padding-bottom:18px; color:var(--ink-soft); }
  .faq details > div p{ margin:0 0 10px; }
  .faq details > div p:last-child{ margin:0; }
  .faq a{ color:var(--clear-deep); font-weight:600; }

  a.card{ text-decoration:none; transition:border-color .15s; }
  a.card:hover{ border-color:var(--gold); }
  a.card .more{ margin-top:auto; padding-top:6px; font-weight:700; font-size:.88rem; color:var(--clear-deep); }
  .grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
  @media (max-width:720px){ .grid-2{ grid-template-columns:1fr; } }

  .towns{ display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
  .towns li{ font-size:.86rem; font-weight:600; padding:6px 12px; border-radius:999px; border:1px solid var(--border); background:var(--surface); color:var(--ink-soft); }

  .cta-band{
    background:var(--clear-deep); color:#f4fbfa; border-radius:var(--radius); padding:clamp(28px,4vw,44px);
    display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;
  }
  .cta-band h2{ color:#f4fbfa; font-size:clamp(1.5rem,2.8vw,2rem); }
  .cta-band p{ margin:8px 0 0; color:#d6f1ee; max-width:52ch; }
  .cta-band .btn-light{ background:#f4fbfa; color:#073f45; }
  .cta-band .btn-light:hover{ background:#ffffff; }
  .cta-band .btn-outline{ border-color:rgba(244,251,250,.55); color:#f4fbfa; }
  .cta-band .btn-outline:hover{ border-color:#f4fbfa; }
  .cta-band .actions{ display:flex; gap:12px; flex-wrap:wrap; }

  .lake-list a{ text-decoration:none; }
  .lake-list a:hover .name{ color:var(--clear-deep); }
  .footer-cols{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:28px; }
  @media (max-width:820px){ .footer-cols{ grid-template-columns:1fr 1fr; } }
  .footer-cols h2{ font-family:"IBM Plex Mono",monospace; font-size:.74rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:12px; font-weight:600; }
  .footer-cols ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; font-size:.9rem; }
  .footer-cols a{ text-decoration:none; color:var(--ink-soft); }
  .footer-cols a:hover{ color:var(--ink); }
  .updated{ font-size:.82rem; color:var(--ink-soft); font-family:"IBM Plex Mono",monospace; }