/* ===== Base / tokens ===== */
:root{
  /* ============================================================
     COLOR SCHEME — every color on the site (including the SVG
     illustrations, icons, buttons, mobile call bar, focus ring and
     favicon) comes from these variables. To switch schemes, replace
     this block with one from /schemes/*.css (or link that file after
     styles.css). Active scheme: Hunter Green & Tan (same values as schemes/scheme-3-green-tan.css).
     ============================================================ */
  /* Brand */
  --primary:#1f3b2d;        /* hunter green: header, dark sections, headings, form button */
  --primary-2:#2a4d3b;      /* cards on dark sections, hover */
  --primary-deep:#142a1f;   /* hero gradient bottom */
  --hero-glow:#2f5a44;      /* hero radial glow */
  --footer-bg:#11241a;
  --accent:#dcc89c;         /* call buttons, mobile call bar, icon circles */
  --accent-hover:#ccb682;
  --accent-ink:#1f3b2d;        /* text/icons on top of --accent */
  --accent-text:#6b572b;    /* accent used as text on light backgrounds */
  --accent-soft:#f3ecdb;    /* light tint behind service icons */
  --icon-color:#2a4d3b;     /* service icon strokes */
  --accent-shadow:rgba(160,135,80,.30);
  --accent-ring:rgba(160,135,80,.40);
  --highlight:#e6d5ab;      /* eyebrows on dark, footer headings, nav hover */
  --focus:#e6d5ab;
  /* Neutrals */
  --ink:#1d2420;
  --muted:#56604f;
  --line:#e7e0cf;
  --line-strong:#d6ccb4;
  --input-border:#cdc4ad;
  --tint:#f7f2e7;
  --surface:#fff;
  --on-dark:#fff;
  --on-dark-lead:#d9e2da;
  --on-dark-soft:#eaefe9;
  --on-dark-body:#e5ebe5;
  --on-dark-muted:#c5d1c7;
  --nav-link:#e3e9e3;
  --footer-text:#b9c6bc;
  --error:#b42318;
  --error-bg:#fdecea;
  --success-bg:#e8f1ea;
  --success-border:#b9d3bf;
  --card-shadow:rgba(31,59,45,.10);
  /* Logo + illustrations */
  --mark-bg:var(--accent);
  --mark-house:var(--primary);
  --illus-roof:var(--accent);
  --illus-roof-shade:#bba574;
  --illus-wall:#f5efe1;
  --illus-door:#fff;
  --illus-line:var(--primary);
  --illus-window:#a9c3b3;
  --illus-ground:var(--footer-bg);
  --illus-drive:#3c5446;
  --illus-sun:#f1e3b8;

  /* Layout / type (not color) */
  --radius:14px;
  --shadow:0 10px 30px var(--card-shadow);
  --font: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-head: "Arial Black","Segoe UI Black","Helvetica Neue",Arial,system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--surface);line-height:1.6;font-size:17px;padding-bottom:64px}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--font-head);font-weight:900;line-height:1.12;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(2rem,7.5vw,3.4rem)}
h2{font-size:clamp(1.6rem,5.5vw,2.4rem);color:var(--primary)}
h3{font-size:1.15rem;color:var(--primary)}
p{margin:0 0 1em}
.wrap{width:100%;max-width:1160px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px;top:0;background:var(--accent);color:var(--accent-ink);padding:10px 14px;z-index:100}
.skip:focus{left:10px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;font-weight:800;text-decoration:none;border-radius:999px;border:2px solid transparent;cursor:pointer;font-family:var(--font);transition:transform .12s ease,background .15s ease,box-shadow .15s ease;line-height:1.1;text-align:center}
.btn svg{width:1.15em;height:1.15em;fill:currentColor;flex:none}
.btn:hover{transform:translateY(-1px)}
.btn-sm{padding:.6em 1.05em;font-size:.95rem}
.btn-lg{padding:1em 1.6em;font-size:1.1rem}
.btn-accent{background:var(--accent);color:var(--accent-ink);box-shadow:0 6px 18px var(--accent-shadow)}
.btn-accent:hover{background:var(--accent-hover)}
.btn-outline{background:transparent;color:var(--on-dark);border-color:rgba(255,255,255,.75)}
.btn-outline:hover{background:rgba(255,255,255,.1)}
.btn-navy{background:var(--primary);color:var(--on-dark)}
.btn-navy:hover{background:var(--primary-2)}

/* ===== Header ===== */
.site-header{position:sticky;top:0;z-index:50;background:var(--primary);color:var(--on-dark);box-shadow:0 2px 12px rgba(0,0,0,.18)}
.header-inner{display:flex;align-items:center;gap:16px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0;flex:1}
.brand-mark{width:38px;height:38px;flex:none}
.brand-name{font-family:var(--font-head);font-weight:900;font-size:1rem;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav{display:none}
.header-call{display:none}

/* ===== Hero ===== */
.hero{background:radial-gradient(1200px 500px at 85% -10%,var(--hero-glow) 0%,transparent 60%),linear-gradient(180deg,var(--primary) 0%,var(--primary-deep) 100%);color:var(--on-dark);padding:44px 0 56px;overflow:hidden}
.hero-inner{display:grid;gap:32px;align-items:center}
.eyebrow{display:inline-block;text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;font-weight:800;color:var(--highlight);margin-bottom:.8em}
.eyebrow.dark{color:var(--accent-text)}
.hero h1{color:var(--on-dark)}
.lead{font-size:1.12rem;color:var(--on-dark-lead);max-width:36em}
.hero-ctas{display:flex;flex-direction:column;gap:12px;margin:24px 0 22px}
.hero-ctas .btn{width:100%}
.hero-points{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px 18px;color:var(--on-dark-soft);font-weight:600;font-size:.95rem}
.hero-points li{display:flex;align-items:center;gap:8px}
.hero-points li::before{content:"";width:18px;height:18px;border-radius:50%;background:var(--accent);flex:none;box-sizing:border-box;position:relative}
.hero-points li::after{content:"";position:absolute;left:6.5px;top:50%;margin-top:-6.5px;width:5px;height:9px;border:solid var(--accent-ink);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.hero-points li{position:relative}
.hero-art{max-width:300px;width:100%;margin:0 auto}
.hero-art svg{width:100%;height:auto;filter:drop-shadow(0 20px 30px rgba(0,0,0,.35))}

/* ===== Sections ===== */
.section{padding:64px 0}
.section-lead{color:var(--muted);font-size:1.08rem;max-width:40em}
.section-dark{background:var(--primary);color:var(--on-dark-body)}
.section-dark h2,.section-dark h3{color:var(--on-dark)}
.section-tint{background:var(--tint)}

/* Services */
.cards{display:grid;gap:16px;margin-top:28px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.card p{color:var(--muted);margin:0}
.icon{width:52px;height:52px;border-radius:12px;background:var(--accent-soft);display:grid;place-items:center;margin-bottom:14px}
.icon svg{width:28px;height:28px;fill:none;stroke:var(--icon-color);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Why */
.why-grid{display:grid;gap:22px;margin-top:28px}
.why{background:var(--primary-2);border-radius:var(--radius);padding:26px;border:1px solid rgba(255,255,255,.08)}
.why p{margin:0;color:var(--on-dark-muted)}
.why-icon{width:52px;height:52px;border-radius:50%;background:var(--accent);display:grid;place-items:center;margin-bottom:14px}
.why-icon svg{width:26px;height:26px;fill:none;stroke:var(--accent-ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Area */
.area-inner{display:grid;gap:32px;align-items:center}
.area-list{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.area-list li{background:var(--tint);border:1px solid var(--line);color:var(--primary);font-weight:700;padding:.55em 1em;border-radius:999px;display:flex;align-items:center;gap:.45em}
.area-list li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent)}
.area-art{display:none;max-width:260px;margin:0 auto;width:100%}

/* Quote */
.quote-inner{display:grid;gap:32px;align-items:start}
.quote-copy .btn{margin-top:4px}
.quote-form{background:var(--surface);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);border:1px solid var(--line);display:grid;gap:16px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-weight:700;color:var(--primary);font-size:.95rem}
.field input,.field textarea,.field select{font:inherit;font-size:16px;padding:.8em .9em;border:1.5px solid var(--input-border);border-radius:10px;background:var(--surface);color:var(--ink);width:100%}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent);outline:3px solid var(--accent-ring);outline-offset:0}
.field textarea{resize:vertical}
.form-status{border-radius:10px;padding:14px 16px;font-weight:700;line-height:1.45}
.form-status.success{background:var(--success-bg);border:1px solid var(--success-border);color:var(--primary)}
.form-status.error{background:var(--error-bg);border:1px solid var(--error);color:var(--error)}
.form-status a{color:inherit;text-decoration:underline;white-space:nowrap}
.btn[disabled]{opacity:.7;cursor:wait;transform:none}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.quote-form{position:relative}
.form-error{color:var(--error);font-weight:700;margin:0}
.quote-form .btn{width:100%}

/* Footer */
.site-footer{background:var(--footer-bg);color:var(--footer-text);padding:48px 0 20px;font-size:.95rem}
.footer-inner{display:grid;gap:26px}
.site-footer p{margin:0 0 .4em}
.site-footer a{color:var(--on-dark);text-decoration:none;font-weight:700}
.site-footer a:hover{text-decoration:underline}
.footer-brand{font-family:var(--font-head);font-weight:900;color:var(--on-dark);font-size:1.15rem}
.footer-h{color:var(--highlight);text-transform:uppercase;letter-spacing:.1em;font-size:.78rem;font-weight:800}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:28px;padding-top:16px;font-size:.85rem}

/* Sticky mobile call bar */
.mobile-call{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;justify-content:center;gap:10px;height:64px;background:var(--accent);color:var(--accent-ink);font-weight:800;font-size:1.1rem;text-decoration:none;box-shadow:0 -4px 16px rgba(0,0,0,.2)}
.mobile-call svg{width:22px;height:22px;fill:currentColor}

/* ===== Tablet ===== */
@media (min-width:640px){
  .hero-ctas{flex-direction:row;flex-wrap:wrap}
  .hero-ctas .btn{width:auto}
  .cards{grid-template-columns:repeat(2,1fr)}
  .quote-form{grid-template-columns:1fr 1fr;padding:30px}
  .field-full{grid-column:1/-1}
  .footer-inner{grid-template-columns:repeat(3,1fr)}
  .brand-name{font-size:1.1rem}
  .hero-art{max-width:400px}
  .area-art{display:block}
}

/* ===== Desktop ===== */
@media (min-width:960px){
  body{padding-bottom:0}
  .mobile-call{display:none}
  .header-inner{min-height:76px}
  .brand{flex:0 1 auto}
  .nav{display:flex;gap:26px;margin-left:auto}
  .nav a{text-decoration:none;font-weight:700;color:var(--nav-link);font-size:.97rem}
  .nav a:hover{color:var(--highlight)}
  .header-call{display:inline-flex}
  .hero{padding:80px 0 90px}
  .hero-inner{grid-template-columns:1.15fr .85fr;gap:48px}
  .hero-art{max-width:460px}
  .section{padding:92px 0}
  .cards{grid-template-columns:repeat(2,1fr);gap:22px}
  .card{padding:30px}
  .why-grid{grid-template-columns:repeat(3,1fr)}
  .area-inner{grid-template-columns:1.3fr .7fr}
  .area-art{max-width:300px}
  .quote-inner{grid-template-columns:.8fr 1.2fr;gap:56px}
  .quote-copy{position:sticky;top:110px}
}