/* TREE MOCK TEMPLATE — "LOCAL CREW TRUST" (warm residential craft)
   Earthy cream + forest green + amber CTA. Neighborly, real-faces, reviews-forward.
   Shared class vocabulary; this file is the warm/light skin. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --cream:#f6f1e7; --paper:#fffdf8; --panel:#fbf7ee; --green:#2f5d3a; --green-d:#234a2d;
  --bark:#5b4636; --amber:#e29327; --amber-d:#c97f15; --ink:#23281f; --muted:#6d7363;
  --line:#e6ddcb; --line2:#d8ccb3; --ok:#2f8f55; --err:#c0392b; --wrap:1180px;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--cream);color:var(--ink);font-family:Inter,system-ui,sans-serif;line-height:1.65;-webkit-font-smoothing:antialiased;padding-bottom:64px;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
.wrap{width:min(100% - 40px,var(--wrap));margin:0 auto;}
.lab{font-family:Inter;font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:12.5px;color:var(--amber-d);}
.accent{color:var(--green);}
h1,h2,h3,h4{font-family:Fraunces,Georgia,serif;font-weight:600;line-height:1.08;color:var(--green-d);}
.lead{color:var(--muted);font-size:17.5px;max-width:60ch;margin-top:14px;}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:Inter;font-weight:700;font-size:15px;padding:14px 26px;border-radius:999px;border:2px solid transparent;cursor:pointer;transition:transform .15s var(--ease),box-shadow .15s var(--ease),background .15s;}
.btn-primary,.btn-call{background:var(--amber);color:#3a2b10;border-color:var(--amber);}
.btn-primary:hover,.btn-call:hover{background:var(--amber-d);transform:translateY(-2px);box-shadow:0 12px 26px rgba(226,147,39,.32);}
.btn-ghost{background:transparent;color:var(--green-d);border-color:var(--green);}
.btn-ghost:hover{background:rgba(47,93,58,.08);}
.btn-lg{font-size:17px;padding:17px 32px;}

/* header */
.hdr{position:sticky;top:0;z-index:40;background:rgba(255,253,248,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:70px;gap:16px;}
.brand{display:flex;align-items:center;gap:11px;font-family:Fraunces;font-weight:700;font-size:21px;color:var(--green-d);}
.brand .mk{width:38px;height:38px;display:grid;place-items:center;background:var(--green);color:#fff;border-radius:50%;font-size:19px;}
.brand small{display:block;font-family:Inter;font-weight:600;font-size:11px;color:var(--muted);}
.nav-links{display:flex;align-items:center;gap:22px;}
.nav-links a{font-family:Inter;font-weight:600;font-size:14.5px;color:var(--ink);}
.nav-links a:hover,.nav-links a.active{color:var(--green);}
.hdr-cta{display:flex;align-items:center;gap:14px;}
.hdr-phone{font-family:Fraunces;font-weight:700;font-size:21px;color:var(--green-d);white-space:nowrap;}
.hdr-phone span{display:block;font-family:Inter;font-weight:600;font-size:10.5px;color:var(--amber-d);text-transform:uppercase;letter-spacing:.08em;}
.nav-toggle{display:none;background:none;border:1px solid var(--line2);border-radius:8px;color:var(--green-d);font-size:20px;padding:7px 11px;cursor:pointer;}
.brand-logo{height:60px;width:auto;display:block;box-sizing:content-box;}
.ftr .brand-logo{height:56px;}

/* sticky mobile call bar */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;grid-template-columns:1fr 1fr;background:var(--paper);border-top:1px solid var(--line2);box-shadow:0 -6px 18px rgba(0,0,0,.08);}
.callbar a{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px 8px;font-family:Inter;font-weight:700;font-size:15px;}
.callbar a:first-child{background:var(--green);color:#fff;}
.callbar a:last-child{color:var(--green-d);}

/* hero — split: copy/form + photo */
.hero{padding:54px 0 60px;}
.hero .grid2{align-items:center;}
.hero .badge24{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line2);color:var(--green-d);font-family:Inter;font-weight:700;font-size:13px;padding:7px 15px;border-radius:999px;}
.hero h1{font-size:clamp(34px,5.6vw,60px);margin-top:18px;max-width:16ch;}
.hero h1 span{color:var(--amber-d);}
.hero .sub{color:var(--muted);font-size:18px;max-width:46ch;margin-top:16px;}
.hero .cta{display:flex;gap:13px;flex-wrap:wrap;margin-top:24px;}
.hero .rating{display:flex;align-items:center;gap:10px;margin-top:20px;font-size:14px;color:var(--muted);}
.hero .rating .stars{color:#e6a52e;letter-spacing:1px;font-size:16px;}

/* trust bar */
.trustbar{background:var(--green);color:#fff;}
.trustbar .wrap{display:grid;grid-template-columns:repeat(4,1fr);}
.trustbar .t{padding:18px 14px;text-align:center;border-right:1px solid rgba(255,255,255,.16);}
.trustbar .t:last-child{border-right:0;}
.trustbar .t b{display:block;font-family:Fraunces;font-weight:700;font-size:17px;}
.trustbar .t small{color:rgba(255,255,255,.78);font-size:12px;}
.trustbar .stars{color:#ffd479;}

/* sections */
section{padding:72px 0;}
section.alt{background:var(--paper);border-block:1px solid var(--line);}
section.green{background:var(--green-d);color:#f4efe4;}
section.green h2,section.green h3{color:#fff;} section.green .lead{color:rgba(255,255,255,.8);}
h2{font-size:clamp(28px,4vw,42px);}
.sec-head{max-width:62ch;margin-bottom:34px;}

/* photo placeholders */
.ph{position:relative;background:linear-gradient(135deg,#ece4d2,#e3d8bf);border:1px dashed var(--line2);border-radius:18px;min-height:240px;display:grid;place-items:center;overflow:hidden;}
.ph .ph-label{color:#6e5f44;font-size:13px;text-align:center;padding:18px;max-width:32ch;}
.ph .ph-label b{display:block;font-family:Inter;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:11px;color:var(--green);margin-bottom:6px;}
.ph-wide{min-height:320px;} .ph-tall{min-height:440px;} .ph-sq{aspect-ratio:1;min-height:0;}
.ph-round{border-radius:50%;aspect-ratio:1;min-height:0;}

/* services */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.svc{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:26px;transition:transform .25s var(--ease),box-shadow .25s;}
.svc:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(35,40,31,.1);}
.svc .ic{width:50px;height:50px;border-radius:50%;background:rgba(47,93,58,.1);display:grid;place-items:center;font-size:24px;margin-bottom:14px;}
.svc h3{font-size:21px;}
.svc p{color:var(--muted);font-size:14.5px;margin-top:8px;}
.svc .more{display:inline-block;margin-top:13px;color:var(--green);font-weight:700;font-size:13.5px;}

/* band (insurance / storm callout) */
.band{background:var(--paper);border:1px solid var(--line2);border-radius:22px;padding:38px;display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center;}
.band p{color:var(--muted);margin-top:12px;}
.band ul{list-style:none;margin-top:16px;display:grid;gap:10px;}
.band li{padding-left:28px;position:relative;color:var(--ink);}
.band li::before{content:"\2713";position:absolute;left:0;color:var(--green);font-weight:800;}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:s;}
.step{text-align:center;}
.step::before{counter-increment:s;content:counter(s);display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--green);color:#fff;font-family:Fraunces;font-weight:700;font-size:22px;margin:0 auto 14px;}
.step h3{font-size:18px;} .step p{color:var(--muted);font-size:14px;margin-top:6px;}

/* reviews */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.review{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:24px;}
.review .stars{color:#e6a52e;letter-spacing:2px;}
.review p{margin-top:10px;color:var(--ink);font-size:14.5px;font-style:italic;}
.review .who{margin-top:13px;color:var(--muted);font-size:12.5px;font-weight:600;}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:center;}
.stat .num{font-family:Fraunces;font-weight:700;font-size:42px;color:var(--green);}
.stat .lbl{color:var(--muted);font-size:13.5px;}

/* areas */
.areas{display:flex;flex-wrap:wrap;gap:10px;}
.area{background:var(--paper);border:1px solid var(--line2);border-radius:999px;padding:9px 18px;font-size:13.5px;color:var(--bark);}

/* form */
.lead-form{background:var(--paper);border:1px solid var(--line2);border-radius:20px;padding:28px;box-shadow:0 18px 40px rgba(35,40,31,.08);}
.lead-form h3{font-size:23px;}
.lead-form .field{margin-top:12px;}
.lead-form input,.lead-form select,.lead-form textarea{width:100%;background:#fff;border:1px solid var(--line2);border-radius:12px;padding:14px;color:var(--ink);font:inherit;}
.lead-form input:focus,.lead-form select:focus,.lead-form textarea:focus{outline:none;border-color:var(--green);}
.lead-form .btn{width:100%;margin-top:14px;}
.form-msg{font-size:13.5px;font-weight:600;margin-top:11px;display:none;}
.form-msg.ok{display:block;color:var(--ok);} .form-msg.err{display:block;color:var(--err);}
.fine{color:var(--muted);font-size:12px;margin-top:9px;}

/* faq */
.faq details{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:18px 22px;margin-bottom:11px;}
.faq summary{cursor:pointer;font-family:Fraunces;font-weight:600;font-size:18px;color:var(--green-d);list-style:none;display:flex;justify-content:space-between;gap:12px;}
.faq summary::after{content:"+";color:var(--amber-d);}
.faq details[open] summary::after{content:"\2212";}
.faq p{color:var(--muted);font-size:14.5px;margin-top:11px;}

/* cta band */
.cta-band{background:var(--green-d);text-align:center;color:#fff;}
.cta-band h2{color:#fff;} .cta-band p{color:rgba(255,255,255,.82);max-width:50ch;margin:12px auto 22px;}

/* footer */
.ftr{background:#1c3a25;color:rgba(255,255,255,.72);padding:46px 0 90px;font-size:14px;}
.ftr-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:28px;}
.ftr h5{font-family:Fraunces;font-weight:700;color:#fff;font-size:16px;margin-bottom:12px;}
.ftr a{display:block;color:rgba(255,255,255,.72);padding:4px 0;} .ftr a:hover{color:#ffd479;}
.ftr-bottom{border-top:1px solid rgba(255,255,255,.16);margin-top:30px;padding-top:16px;font-size:12.5px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;}

/* helpers + reveal */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;}
.center{text-align:center;margin-inline:auto;}
@media(prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
  .reveal.in{opacity:1;transform:none;}
}
@media(max-width:900px){
  .nav-links{display:none;} .nav-links.open{display:flex;position:absolute;top:70px;left:0;right:0;flex-direction:column;background:var(--paper);padding:14px 24px;border-bottom:1px solid var(--line);}
  .nav-toggle{display:inline-block;order:3;} .brand-logo{height:52px;}
  /* keep a tap-to-call button in the mobile header; Free Estimate lives in the sticky call bar */
  .hdr-cta{display:flex;order:2;gap:8px;} .hdr-cta>.btn{display:none;}
  .hdr-phone{display:inline-flex;align-items:center;gap:7px;background:var(--green);color:#fff;border-radius:999px;padding:9px 14px;font-size:15px;line-height:1;white-space:nowrap;}
  .hdr-phone span{display:none;} .hdr-phone::before{content:"\260E";font-size:15px;}
  .callbar{display:grid;}
  .services,.reviews,.steps,.stats{grid-template-columns:1fr 1fr;}
  .band,.grid2{grid-template-columns:1fr;} .trustbar .wrap{grid-template-columns:1fr 1fr;}
  .ftr-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:560px){
  .services,.reviews,.steps,.stats,.ftr-grid,.trustbar .wrap{grid-template-columns:1fr;}
  .hero .cta .btn{width:100%;}
  .hdr-phone{font-size:0;padding:10px 12px;} .hdr-phone::before{font-size:18px;}
}