:root{
    --ivy:#16331F;        /* deep botanical green - dark surfaces & text   */
    --leaf:#2E7D43;       /* primary brand green                           */
    --fresh:#5BA94E;      /* lighter fresh-grass green                     */
    --paper:#FAF7EF;      /* warm off-white background                     */
    --cream:#F0EAD9;      /* secondary warm panel                          */
    --soil:#6B4A2B;       /* earthy brown, used sparingly                  */
    --sun:#F4B43A;        /* honey / Irish-summer accent (offer badge)     */
    --wa:#1FAF54;         /* WhatsApp-style action green                   */
    --wa-dark:#178a42;
    --ink:#1B2A1E;        /* body text                                     */
    --muted:#56654F;      /* secondary text                                */
    --line:#E2DAC6;       /* hairline on paper                             */
    --shadow:0 18px 50px -20px rgba(22,51,31,.45);
    --r:18px;
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:'Inter',system-ui,sans-serif;
    color:var(--ink);
    background:var(--paper);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  h1,h2,h3,.display{font-family:'Bricolage Grotesque','Inter',sans-serif;line-height:1.05;letter-spacing:-.02em}
  img{max-width:100%;display:block}
  a{color:inherit}
  .wrap{max-width:1140px;margin:0 auto;padding:0 22px}
  .eyebrow{
    font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    color:var(--leaf);display:inline-flex;align-items:center;gap:8px;
  }
  /* .eyebrow::before{content:"";width:22px;height:2px;background:var(--leaf);border-radius:2px} */

  /* ---------- buttons ---------- */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:10px;
    font-weight:700;font-size:1.02rem;border:none;cursor:pointer;
    padding:16px 26px;border-radius:999px;text-decoration:none;
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
    white-space:nowrap;
  }
  .btn:active{transform:translateY(1px)}
  .btn-wa{background:var(--wa);color:#fff;box-shadow:0 10px 24px -8px rgba(31,175,84,.7)}
  .btn-wa:hover{background:var(--wa-dark)}
  .btn-ghost{background:transparent;color:var(--ivy);border:2px solid var(--ivy)}
  .btn-ghost:hover{background:var(--ivy);color:#fff}
  .btn-sun{background:var(--ivy);color:#fff}
  .btn-sun:hover{background:#0e2415}
  .btn svg{width:20px;height:20px;flex:none}
  .btn i{font-size:20px;line-height:1}

  /* ---------- top bar ---------- */
  header.nav{position:sticky;top:0;z-index:40;background:rgba(250,247,239,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
  .nav-in{display:flex;align-items:center;justify-content:space-between;height:66px}
  .brand{display:flex;align-items:center;gap:10px;font-family:'Bricolage Grotesque';font-weight:800;font-size:1.18rem;color:var(--ivy);text-decoration:none}
  .brand .mark{width:34px;height:34px;background:var(--leaf);border-radius:10px;display:grid;place-items:center;color:#fff;flex:none}
  .brand .mark svg{width:20px;height:20px}
  .nav-cta{display:flex;gap:10px;align-items:center}
  .nav-phone{font-weight:700;color:var(--ivy);text-decoration:none;display:none}
  .nav-phone:hover{color:var(--leaf)}
  .nav .btn{padding:11px 18px;font-size:.95rem}

  /* ---------- hero ---------- */
  .hero{position:relative;padding:54px 0 64px;overflow:hidden}
  .hero::before{content:"";position:absolute;inset:0;background:
    radial-gradient(60% 60% at 88% 6%, rgba(91,169,78,.16), transparent 60%),
    radial-gradient(50% 50% at 0% 90%, rgba(244,180,58,.12), transparent 60%);z-index:-1}
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
  .hero h1{font-size:clamp(2.3rem,5.4vw,3.7rem);font-weight:800;color:var(--ivy);margin:18px 0 16px}
  .hero h1 .hl{color:var(--leaf)}
  .hero p.lead{font-size:1.15rem;color:var(--muted);max-width:34ch}
  .hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
  .reassure{display:flex;gap:18px;flex-wrap:wrap;margin-top:22px;font-size:.92rem;color:var(--muted);font-weight:500}
  .reassure span{display:inline-flex;align-items:center;gap:7px}
  .reassure svg{width:17px;height:17px;color:var(--leaf)}

  .offer-tag{
    display:inline-flex;align-items:center;gap:10px;background:var(--sun);color:#3d2c05;
    font-weight:700;font-size:.92rem;padding:9px 16px;border-radius:999px;
    box-shadow:0 8px 20px -10px rgba(244,180,58,.9)
  }
  .offer-tag b{font-weight:800}

  /* ---------- before/after slider (SIGNATURE) ---------- */
  .ba{position:relative;width:100%;aspect-ratio:4/5;border-radius:24px;overflow:hidden;box-shadow:var(--shadow);user-select:none;touch-action:none;background:var(--cream)}
  .ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
  .ba .after-layer{clip-path:inset(0 0 0 50%);}
  .ba .tag{position:absolute;top:14px;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(22,51,31,.72);padding:6px 12px;border-radius:999px;backdrop-filter:blur(3px)}
  .ba .tag.before{left:14px}
  .ba .tag.after{right:14px}
  .ba .handle{position:absolute;top:0;bottom:0;left:50%;width:4px;background:#fff;transform:translateX(-50%);box-shadow:0 0 0 1px rgba(0,0,0,.06)}
  .ba .knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 6px 18px -4px rgba(0,0,0,.5);cursor:ew-resize}
  .ba .knob svg{width:24px;height:24px;color:var(--leaf)}
  .ba-hint{text-align:center;font-size:.86rem;color:var(--muted);margin-top:12px;font-weight:500}

  /* ---------- trust strip ---------- */
  .trust{background:var(--ivy);color:#dfe9df}
  .trust .wrap{display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;align-items:center;padding:20px 22px}
  .trust .item{display:flex;align-items:center;gap:11px;font-weight:600;font-size:.96rem}
  .trust .item .big{font-family:'Bricolage Grotesque';font-weight:800;font-size:1.4rem;color:#fff}
  .stars{color:var(--sun);letter-spacing:1px}

  /* ---------- sections ---------- */
  section{padding:74px 0}
  .sec-head{max-width:620px;margin-bottom:42px}
  .sec-head h2{font-size:clamp(1.8rem,3.6vw,2.6rem);font-weight:700;color:var(--ivy);margin:14px 0 12px}
  .sec-head p{color:var(--muted);font-size:1.08rem}

  /* services */
  .services{background:var(--cream)}
  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:26px 22px;transition:transform .18s ease, box-shadow .18s ease}
  .card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
  .card .ico{width:46px;height:46px;border-radius:12px;background:rgba(46,125,67,.12);display:grid;place-items:center;color:var(--leaf);margin-bottom:16px}
  .card .ico svg{width:24px;height:24px}
  .card h3{font-size:1.18rem;color:var(--ivy);margin-bottom:7px}
  .card p{color:var(--muted);font-size:.97rem}

  /* steps */
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;counter-reset:step}
  .step{position:relative;padding-top:14px}
  .step .num{font-family:'Bricolage Grotesque';font-weight:800;font-size:2.6rem;color:var(--fresh);line-height:1;opacity:.85}
  .step h3{font-size:1.25rem;color:var(--ivy);margin:8px 0 8px}
  .step p{color:var(--muted)}

  /* reviews */
  .reviews{background:var(--ivy);color:#e8efe6}
  .reviews .sec-head h2{color:#fff}
  .reviews .sec-head p{color:#b7c7b4}
  .rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .rev{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--r);padding:24px}
  .rev .stars{font-size:1rem;margin-bottom:12px}
  .rev p{font-size:1.02rem;margin-bottom:16px}
  .rev .who{font-weight:700;color:#fff}
  .rev .where{font-size:.86rem;color:#9fb29c}

  /* areas */
  .areas{text-align:center}
  .area-tags{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:8px}
  .area-tags span{background:var(--cream);border:1px solid var(--line);color:var(--ivy);font-weight:600;font-size:.95rem;padding:9px 16px;border-radius:999px}

  /* quote / form */
  .quote{background:var(--cream)}
  .quote-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
  .quote-copy h2{font-size:clamp(1.9rem,3.6vw,2.7rem);color:var(--ivy);font-weight:700;margin:14px 0 14px}
  .quote-copy p{color:var(--muted);font-size:1.08rem;margin-bottom:22px}
  .perks{list-style:none;display:grid;gap:13px}
  .perks li{display:flex;gap:11px;align-items:flex-start;font-weight:500}
  .perks svg{width:22px;height:22px;color:var(--leaf);flex:none;margin-top:1px}
  .form-card{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:30px;box-shadow:var(--shadow)}
  .form-card h3{font-size:1.35rem;color:var(--ivy);margin-bottom:4px}
  .form-card .sub{color:var(--muted);font-size:.95rem;margin-bottom:20px}
  .field{margin-bottom:15px}
  .field label{display:block;font-weight:600;font-size:.9rem;margin-bottom:6px;color:var(--ivy)}
  .field input,.field select,.field textarea{
    width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:12px;
    font:inherit;background:#fff;color:var(--ink);transition:border-color .15s ease, box-shadow .15s ease;
  }
  .field input:focus,.field select:focus,.field textarea:focus{
    outline:none;border-color:var(--leaf);box-shadow:0 0 0 4px rgba(46,125,67,.14)
  }
  .field textarea{resize:vertical;min-height:78px}
  .form-card .btn{width:100%;margin-top:6px}
  .form-foot{text-align:center;font-size:.84rem;color:var(--muted);margin-top:14px}
  .form-foot a{color:var(--leaf);font-weight:600;text-decoration:none}

  /* faq */
  details{border-bottom:1px solid var(--line);padding:18px 0}
  details summary{cursor:pointer;font-weight:700;font-size:1.08rem;color:var(--ivy);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
  details summary::-webkit-details-marker{display:none}
  details summary .plus{flex:none;width:24px;height:24px;border-radius:50%;background:rgba(46,125,67,.12);color:var(--leaf);display:grid;place-items:center;font-weight:700;transition:transform .2s ease}
  details[open] summary .plus{transform:rotate(45deg)}
  details p{color:var(--muted);margin-top:12px;max-width:62ch}

  /* footer */
  footer{background:var(--ivy);color:#cdd9cb;padding:50px 0 120px}
  .foot-grid{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start}
  footer .brand{color:#fff}
  footer .brand .mark{background:var(--fresh)}
  .foot-links{display:flex;gap:26px;flex-wrap:wrap}
  .foot-links a{text-decoration:none;color:#cdd9cb;font-weight:500}
  .foot-links a:hover{color:#fff}
  .foot-bottom{margin-top:30px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);font-size:.85rem;color:#90a48d}

  /* sticky mobile action bar */
  .mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;gap:10px;padding:10px 14px;background:rgba(250,247,239,.94);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
  .mobile-bar .btn{flex:1;padding:14px;font-size:1rem}

  /* ---------- responsive ---------- */
  @media (max-width:900px){
    .hero-grid{grid-template-columns:1fr;gap:34px}
    .hero{padding:34px 0 44px}
    .ba{max-width:430px;margin:0 auto;aspect-ratio:1/1}
    .cards,.steps,.rev-grid{grid-template-columns:1fr}
    .quote-grid{grid-template-columns:1fr;gap:30px}
    .nav .btn-ghost{display:none}
    section{padding:56px 0}
    .mobile-bar{display:flex}
    footer{padding-bottom:50px}
  }
  @media (min-width:560px){ .nav-phone{display:inline-flex} }
  @media (prefers-reduced-motion:reduce){*{transition:none !important;scroll-behavior:auto}}