/* Shared stylesheet for every page except the home page.
   index.html keeps its own copy of these styles inline (one request fewer on the page that
   matters most, and it still works if only index.html is copied to Netlify). The brand tokens
   and the nav, button, card, FAQ, CTA band and footer rules here are the same as the ones in
   index.html: change a colour in one, change it in the other. */

/* Plus Jakarta Sans, served from this origin (the latin variable font from Google Fonts, OFL licensed). */
@font-face{
  font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:400 800; font-display:swap;
  src:url(/fonts/plus-jakarta-sans-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ─────────────  Brand tokens  ───────────── */
/* --muted and --green-text are the darkest shades that still read as the brand: both clear
   WCAG AA (4.5:1) for small text on white and on the pale green bands. */
:root{
  --green:#4ac316; --green-dark:#3a9e10; --green-deep:#2f8f0c; --green-text:#2a760a;
  --green-soft:#f4faf0; --green-tint:#eef8e4; --green-glow:#bdec93;
  --ink:#11160f; --ink-soft:#3a423c; --muted:#5f6861;
  --line:#e4e9e1; --bg:#ffffff; --bg-alt:#f7faf5;
  --radius:18px; --shadow:0 18px 50px -22px rgba(44,94,22,.35);
  --maxw:1140px;
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth; scroll-padding-top:84px}
body{
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.55; -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto; display:block}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
section{position:relative}

.eyebrow{font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--green-text)}
h1,h2,h3{line-height:1.12; letter-spacing:-.02em; font-weight:800}
h2{font-size:clamp(28px,4vw,40px)}
.lede{color:var(--muted); font-size:clamp(16px,1.6vw,18px); max-width:60ch}

/* ─────────────  Buttons  ───────────── */
.btn{
  display:inline-flex; align-items:center; gap:9px; font-weight:700; font-size:16px;
  padding:15px 26px; border-radius:999px; cursor:pointer; border:0; transition:.18s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--green); color:#fff; box-shadow:0 12px 26px -10px rgba(113,194,44,.7)}
.btn-primary:hover{background:var(--green-dark); transform:translateY(-2px)}
.btn-ghost{background:#fff; color:var(--ink); border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--green); color:var(--green-dark)}
.btn-lg{padding:17px 32px; font-size:17px}

/* ─────────────  Nav  ───────────── */
header.nav{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.85);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line)}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:68px}
.brand{display:flex; align-items:center; gap:8px; font-weight:800; font-size:24px;
  text-transform:uppercase; letter-spacing:.02em; color:var(--ink)}
.brand-logo{height:38px; width:auto; display:block}
footer .brand-logo{height:44px}
.nav-links{display:flex; align-items:center; gap:30px}
.nav-links a{font-size:15px; font-weight:600; color:var(--ink-soft)}
.nav-links a:hover{color:var(--green-dark)}
.nav-cta{display:flex; align-items:center; gap:14px}
.nav-phone{font-weight:700; color:var(--ink); font-size:15px}
.nav-phone:hover{color:var(--green-dark)}
.burger{display:none; background:none; border:0; cursor:pointer; padding:8px}
.burger span{display:block; width:24px; height:2.5px; background:var(--ink); border-radius:2px; margin:5px 0; transition:.2s}
.nav-mobile{display:none}

/* ─────────────  Page hero (service pages)  ───────────── */
.page-hero{background:var(--bg-alt); border-bottom:1px solid var(--line); padding:clamp(36px,6vw,72px) 0}
.page-hero .wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,5vw,60px); align-items:center}
.page-hero h1{font-size:clamp(34px,5vw,56px); margin:14px 0 18px}
.page-hero .lede{margin-bottom:26px}
.page-hero .hero-img{width:100%; aspect-ratio:4/5; max-height:520px; object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow)}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:22px}
.hero-trust{display:flex; gap:10px 22px; flex-wrap:wrap; color:var(--ink-soft); font-size:14px; font-weight:600}
.hero-trust span{display:flex; align-items:center; gap:7px}
.hero-trust svg{color:var(--green-dark); flex:0 0 auto}
.crumbs{font-size:13.5px; color:var(--muted); font-weight:600; display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px}
.crumbs a:hover{color:var(--green-text)}
.crumbs span[aria-hidden]{opacity:.6}
.meta{font-size:14px; color:var(--muted); font-weight:600; margin-top:-10px; margin-bottom:22px}
@media(max-width:900px){ .page-hero .wrap{grid-template-columns:1fr} .page-hero .hero-img{aspect-ratio:16/10; max-height:none} }

/* ─────────────  Sections shared  ───────────── */
.pad{padding:clamp(56px,8vw,92px) 0}
.head{text-align:center; max-width:680px; margin:0 auto clamp(36px,5vw,52px)}
.head .lede{margin:14px auto 0}

/* Service page body: article + sticky quote card */
.content-grid{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:clamp(30px,5vw,64px); align-items:start}
.article h2{font-size:clamp(24px,3vw,32px); margin:38px 0 14px}
.article h2:first-child{margin-top:0}
.article h3{font-size:19px; margin:26px 0 10px}
.article p{color:var(--ink-soft); font-size:16.5px; margin-bottom:14px; max-width:68ch}
.article p a, .article li a{color:var(--green-text); font-weight:700; text-decoration:underline; text-underline-offset:2px}
.article ul{margin:0 0 16px; padding-left:0; list-style:none}
.article ol{margin:0 0 16px; padding-left:24px}
.article ol li{margin-bottom:10px; color:var(--ink-soft); font-size:16px; padding-left:4px}
.article li strong, .article p strong{color:var(--ink)}
/* Guides: a plain reading column */
.prose h2{margin-top:34px}
.prose ul{padding-left:22px; list-style:disc}
.prose ul li{margin-bottom:9px; color:var(--ink-soft); font-size:16px}
.card .subs{font-size:13.5px; color:var(--muted); margin-top:8px}
.checklist li, .notes li{position:relative; padding-left:30px; margin-bottom:9px; color:var(--ink-soft); font-size:16px}
.checklist li::before{content:""; position:absolute; left:0; top:3px; width:20px; height:20px; border-radius:50%; background:var(--green-tint);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233a9e10'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2Z'/%3E%3C/svg%3E");
  background-size:14px; background-position:center; background-repeat:no-repeat}
.notes li::before{content:"";  position:absolute; left:6px; top:10px; width:7px; height:7px; border-radius:50%; background:var(--green)}
.why-list{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:0 0 10px}
.why-list li{background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px 18px; list-style:none}
.why-list b{display:block; font-size:15.5px; margin-bottom:4px}
.why-list span{color:var(--muted); font-size:14.5px}
@media(max-width:640px){ .why-list{grid-template-columns:1fr} }
.aside{position:sticky; top:92px}
.quote-card{background:var(--ink); color:#fff; border-radius:var(--radius); padding:28px 26px; box-shadow:var(--shadow)}
.quote-card h3{font-size:22px; margin-bottom:8px}
.quote-card p{color:#cdd4cb; font-size:15px; margin-bottom:18px}
.quote-card .btn{width:100%; justify-content:center}
.quote-card .btn-ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.35); margin-top:10px}
.quote-card .btn-ghost:hover{border-color:#fff}
.quote-card ul{list-style:none; margin-top:20px; padding-top:18px; border-top:1px solid rgba(255,255,255,.12)}
.quote-card li{display:flex; gap:9px; align-items:center; font-size:14px; color:#e3e9e1; margin-bottom:9px}
.quote-card svg{color:var(--green-glow); flex:0 0 auto}
@media(max-width:900px){ .content-grid{grid-template-columns:1fr} .aside{position:static} }

/* Quote form (the same form as the home page; these rules are a copy of the home page's) */
.form-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center}
.form-copy h2{margin-bottom:6px}
.quote-form{margin-top:22px}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.fld{margin-bottom:14px; display:flex; flex-direction:column}
.fld label{font-size:13px; font-weight:700; color:var(--ink-soft); margin-bottom:6px}
.quote-form input, .quote-form select, .quote-form textarea{
  font-family:inherit; font-size:16px; padding:12px 14px; border:1.5px solid var(--line);
  border-radius:12px; background:#fff; color:var(--ink); width:100%}
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus{
  outline:none; border-color:var(--green); box-shadow:0 0 0 3px var(--green-soft)}
.quote-form textarea{resize:vertical}
.svc-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.svc-opt{display:flex; align-items:center; gap:10px; padding:11px 14px; border:1.5px solid var(--line);
  border-radius:12px; background:#fff; cursor:pointer; font-size:14px; font-weight:600; color:var(--ink);
  transition:border-color .15s, background .15s}
.svc-opt:hover{border-color:var(--green)}
.svc-opt input{width:auto; margin:0; padding:0; flex:0 0 auto; accent-color:var(--green)}
.svc-opt:has(input:checked){border-color:var(--green); background:var(--green-soft)}
.quote-form .btn{margin-top:6px}
.form-note{margin-top:14px; font-size:14px; color:var(--muted)}
.form-note a{color:var(--green-text); font-weight:700}
.form-success{background:var(--green-tint); border:1px solid var(--green-glow); border-radius:14px;
  padding:24px; color:var(--ink); font-size:16px; line-height:1.5}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form-photo img{width:100%; height:100%; max-height:580px; object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow)}
.form-side{background:var(--ink); color:#fff; border-radius:var(--radius); padding:30px 28px; box-shadow:var(--shadow); align-self:stretch; display:flex; flex-direction:column; justify-content:center}
.form-side h3{font-size:22px; margin-bottom:10px}
.form-side p{color:#cdd4cb; font-size:15.5px; margin-bottom:18px}
.form-side ul{list-style:none}
.form-side li{display:flex; gap:9px; align-items:flex-start; font-size:14.5px; color:#e3e9e1; margin-bottom:10px}
.form-side svg{color:var(--green-glow); flex:0 0 auto; margin-top:2px}
@media(max-width:900px){ .form-grid{grid-template-columns:1fr; gap:30px} }
@media(max-width:560px){ .row2{grid-template-columns:1fr} .svc-grid{grid-template-columns:1fr} .quote-form .btn{width:100%; justify-content:center; padding:16px} }

/* Services cards */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px 26px;
  transition:.2s ease; position:relative; overflow:hidden; display:flex; flex-direction:column}
.card:hover{border-color:var(--green-glow); transform:translateY(-4px); box-shadow:var(--shadow)}
.card .ic{width:52px; height:52px; border-radius:14px; background:var(--green-tint);
  display:flex; align-items:center; justify-content:center; font-size:26px; margin-bottom:16px}
.card h3{font-size:20px; margin-bottom:8px}
.card p{color:var(--muted); font-size:15px}
.card h3 a:hover{color:var(--green-text)}
.card .more{display:inline-block; margin-top:14px; color:var(--green-text); font-weight:700; font-size:14px}
.card .links{display:flex; gap:18px; margin-top:auto; padding-top:14px}
.card .links .more{margin-top:0}

/* Why us (light band) */
.why{background:var(--bg-alt)}

/* Reviews (same cards as the home page) */
.quotes{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px}
.quote{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px}
.stars{color:#f5a623; font-size:16px; letter-spacing:2px; margin-bottom:12px}
.quote p{font-size:15.5px; color:var(--ink-soft)}
.quote .who{margin-top:16px; font-weight:700; font-size:14px}
.quote .who span{color:var(--muted); font-weight:500}

/* Before/after sliders (same as the home page gallery) */
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.baslide{--pos:50%; position:relative; aspect-ratio:3/4; border-radius:var(--radius); overflow:hidden;
  background:var(--bg-alt); border:1px solid var(--line); cursor:ew-resize; outline:none; touch-action:none; user-select:none}
.baslide img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; -webkit-user-drag:none}
.baslide .bef{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.baslide:focus-visible{box-shadow:0 0 0 3px var(--green-glow)}
.baslide .ba-lbl{position:absolute; top:12px; z-index:3; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 11px; border-radius:999px; color:#fff; background:rgba(17,22,15,.6); backdrop-filter:blur(4px)}
.baslide .ba-before{left:12px}
.baslide .ba-after{right:12px; background:var(--green)}
.baslide .ba-divider{position:absolute; top:0; bottom:0; left:var(--pos); width:3px; z-index:3; background:#fff; transform:translateX(-50%); box-shadow:0 0 6px rgba(0,0,0,.4); pointer-events:none}
.baslide .ba-grip{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:38px; height:38px; border-radius:50%; background:#fff; box-shadow:0 4px 12px rgba(0,0,0,.35)}
.baslide .ba-grip::before, .baslide .ba-grip::after{content:""; position:absolute; top:50%; transform:translateY(-50%); border-top:5px solid transparent; border-bottom:5px solid transparent}
.baslide .ba-grip::before{left:9px; border-right:6px solid var(--green-deep)}
.baslide .ba-grip::after{right:9px; border-left:6px solid var(--green-deep)}
.ba-cap{text-align:center; font-size:13.5px; color:var(--muted); margin-top:10px; font-weight:600}
.work-item h3{font-size:18px; margin:12px 0 2px}
.work-item .ba-cap{text-align:left; margin-top:4px}
@media(max-width:900px){ .gallery{grid-template-columns:1fr 1fr} }
@media(max-width:640px){ .gallery{grid-template-columns:1fr 1fr; gap:12px} .baslide .ba-lbl{font-size:9.5px; padding:4px 8px; top:8px} .baslide .ba-grip{width:32px; height:32px} }

/* Areas */
.area-chips{display:flex; flex-wrap:wrap; gap:10px 12px; justify-content:center; max-width:840px; margin:0 auto}
.area-chips span, .area-chips a{background:#fff; border:1px solid var(--line); color:var(--ink-soft);
  padding:8px 15px; border-radius:999px; font-size:14px; font-weight:600}
.area-chips a:hover{border-color:var(--green); color:var(--green-text)}

/* FAQ */
.faq{max-width:760px; margin:0 auto}
details{border:1px solid var(--line); border-radius:14px; padding:4px 20px; margin-bottom:12px; background:#fff}
details[open]{border-color:var(--green-glow)}
summary{cursor:pointer; font-weight:700; font-size:16.5px; padding:16px 0; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:14px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; font-size:24px; font-weight:400; color:var(--green-dark); transition:.2s}
details[open] summary::after{transform:rotate(45deg)}
details p{color:var(--muted); padding:0 0 18px; font-size:15px}

/* Final CTA */
.cta-band{background:linear-gradient(135deg,var(--green) 0%,var(--green-dark) 100%);
  color:#fff; border-radius:24px; padding:clamp(40px,6vw,64px); text-align:center; box-shadow:var(--shadow)}
.cta-band h2{color:#fff; margin-bottom:14px}
.cta-band p{color:rgba(255,255,255,.9); max-width:52ch; margin:0 auto 28px; font-size:17px}
.cta-band .btn-primary{background:#fff; color:var(--green-text)}
.cta-band .btn-primary:hover{background:#f0f4fa}
.cta-band .btn-ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.5)}
.cta-band .btn-ghost:hover{border-color:#fff; color:#fff}

/* Footer */
footer{background:var(--ink); color:#cdd4cb; padding:clamp(44px,6vw,64px) 0 28px; margin-top:8px}
.foot-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:36px; margin-bottom:36px}
footer .brand{color:#fff; margin-bottom:14px}
footer p{font-size:14.5px; color:#9aa39a; max-width:34ch}
footer h4, footer .foot-h{color:#fff; font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; margin-bottom:16px; max-width:none}
footer ul{list-style:none}
footer ul li{margin-bottom:10px}
footer ul a{color:#aeb6ad; font-size:14.5px}
footer ul a:hover{color:var(--green-glow)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1); padding-top:22px; display:flex;
  justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:13px; color:#7d857c}
.foot-bottom a{color:#aeb6ad; text-decoration:underline; text-underline-offset:2px}
.foot-bottom a:hover{color:var(--green-glow)}

/* Sticky mobile CTA */
.mobile-cta{display:none; position:fixed; bottom:0; left:0; right:0; z-index:60; gap:10px;
  padding:12px 14px calc(12px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.95);
  backdrop-filter:blur(10px); border-top:1px solid var(--line)}
.mobile-cta .btn{flex:1; justify-content:center; padding:14px}

/* ─────────────  Responsive  ───────────── */
@media(max-width:900px){
  .cards{grid-template-columns:1fr 1fr !important}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .nav-links,.nav-phone{display:none}
  .burger{display:block}
  .nav-mobile{display:none; flex-direction:column; gap:4px; padding:14px 22px 22px; border-bottom:1px solid var(--line); background:#fff}
  .nav-mobile.open{display:flex}
  .nav-mobile a{padding:11px 0; font-weight:600; color:var(--ink-soft); border-bottom:1px solid var(--line)}
  .cards,.foot-grid{grid-template-columns:1fr !important}
  .hero-actions .btn{flex:1; justify-content:center}
  .mobile-cta{display:flex}
  body{padding-bottom:74px}
  .nav-cta .btn{display:none}
  .pad{padding:42px 0}
  .head{margin-bottom:24px}
  h2{font-size:26px}
  .page-hero h1{font-size:34px}
  .card{padding:22px 20px}
}