/* ===========================================================
   ProLift Towing & Recovery — SIMPLE, calm, call-first system
   =========================================================== */
:root{
  --green:#16A34A;        /* primary */
  --green-d:#15803D;      /* deep, used for buttons (strong contrast w/ white) */
  --green-deep:#14532D;
  --soft:#ECFDF5;         /* soft green panel */
  --ink:#111827;          /* main text */
  --muted:#566472;        /* secondary text */
  --line:#E6EAE8;
  --bg:#FFFFFF;
  --bg2:#F5F8F6;          /* light section */
  --star:#F59E0B;
  --maxw:1000px;
  --pad:clamp(20px,5vw,40px);
  --r:16px;
  --shadow:0 1px 2px rgba(17,24,39,.05), 0 12px 28px -16px rgba(17,24,39,.25);
  --f:"Barlow", system-ui, -apple-system, sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--f); color:var(--ink); background:var(--bg);
  font-size:18px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3{margin:0; line-height:1.12; letter-spacing:-.01em; font-weight:800}
p{margin:0}
.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:11px;
  font-weight:700; font-size:19px; line-height:1; border:0; cursor:pointer;
  border-radius:12px; padding:17px 24px; transition:background .15s, transform .1s;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn svg{width:1.2em; height:1.2em; flex:none}
.btn--call{background:var(--green-d); color:#fff; box-shadow:0 8px 20px -8px rgba(21,128,61,.6)}
.btn--call:hover{background:var(--green)}
.btn--big{font-size:clamp(20px,2.4vw,24px); padding:20px 30px; border-radius:14px}
.btn--ghost{background:#fff; color:var(--green-d); border:2px solid var(--line)}
.btn--ghost:hover{border-color:var(--green); color:var(--green)}
.btn--ghost-light{background:transparent; color:#fff; border:2px solid rgba(255,255,255,.4)}
.btn--ghost-light:hover{border-color:#fff; background:rgba(255,255,255,.08)}

/* ---------- header ---------- */
.head{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.95);
  backdrop-filter:saturate(160%) blur(8px); border-bottom:1px solid var(--line);
}
.head__in{display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:68px}
.brand{display:flex; align-items:center; gap:11px}
.brand__mark{width:42px; height:42px; border-radius:11px; background:var(--green); color:#fff; display:grid; place-items:center; flex:none}
.brand__mark svg{width:26px; height:26px}
.brand__name{font-weight:800; font-size:20px; letter-spacing:-.02em}
.brand__name span{color:var(--green-d)}
.brand__sub{font-size:12.5px; color:var(--muted); font-weight:600; margin-top:1px}
.head .btn{padding:13px 20px; font-size:17px}
.head .btn .full{display:inline}
@media(max-width:560px){
  .brand__sub{display:none}
  .head .btn .full{display:none}
  .brand__name{font-size:18px}
}

/* ---------- hero ---------- */
.hero{background:var(--bg2); border-bottom:1px solid var(--line)}
.hero__in{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,56px); align-items:center; padding-block:clamp(40px,6vw,68px)}
.hero__rate{display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:16px; margin-bottom:18px}
.hero__rate .stars{color:var(--star); letter-spacing:1px}
.hero__rate .sep{color:var(--line)}
.hero h1{font-size:clamp(32px,5vw,50px)}
.hero h1 .u{color:var(--green-d)}
.hero__sub{margin-top:18px; font-size:clamp(17px,2vw,20px); color:var(--muted); max-width:46ch}
.hero__cta{margin-top:26px; display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.hero__note{margin-top:16px; font-size:15.5px; color:var(--muted); display:flex; align-items:center; gap:8px}
.hero__note svg{width:18px; height:18px; color:var(--green-d); flex:none}
.hero__photo{position:relative}
.hero__photo image-slot, .hero__photo img{width:100%; height:auto; aspect-ratio:3/2; border-radius:var(--r); box-shadow:var(--shadow); object-fit:cover}
@media(max-width:820px){
  .hero__in{grid-template-columns:1fr; gap:26px; text-align:left}
  .hero__photo{order:-1}
  .hero__photo image-slot, .hero__photo img{aspect-ratio:3/2}
}

/* ---------- trust strip ---------- */
.trust{background:var(--green-deep); color:#fff}
.trust__in{display:grid; grid-template-columns:repeat(4,1fr); gap:6px 24px; padding-block:18px}
.trust__i{display:flex; align-items:center; gap:10px; font-weight:600; font-size:16px}
.trust__i svg{width:20px; height:20px; color:#86EFAC; flex:none}
@media(max-width:680px){.trust__in{grid-template-columns:repeat(2,1fr); gap:14px 20px}}

/* ---------- generic section ---------- */
.section{padding-block:clamp(48px,7vw,84px)}
.section--soft{background:var(--bg2)}
.shead{text-align:center; max-width:600px; margin:0 auto clamp(30px,4vw,46px)}
.shead h2{font-size:clamp(28px,4vw,40px)}
.shead p{margin-top:12px; color:var(--muted); font-size:18px}

/* ---------- services (calm grid) ---------- */
.svc{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.svc__i{background:#fff; border:1px solid var(--line); border-radius:14px; padding:22px 18px; text-align:center; transition:border-color .15s, box-shadow .15s}
.svc__i:hover{border-color:var(--green); box-shadow:var(--shadow)}
.svc__ic{width:52px; height:52px; margin:0 auto 12px; border-radius:50%; background:var(--soft); color:var(--green-d); display:grid; place-items:center}
.svc__ic svg{width:27px; height:27px}
.svc__i b{display:block; font-size:18px; font-weight:700}
.svc__i span{display:block; color:var(--muted); font-size:14.5px; margin-top:3px; line-height:1.4}
@media(max-width:760px){.svc{grid-template-columns:repeat(2,1fr)}}

/* ---------- photo gallery ---------- */
.gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.gallery image-slot, .gallery img{width:100%; height:auto; aspect-ratio:3/2; border-radius:14px; object-fit:cover; box-shadow:var(--shadow)}
.gallery .tall{grid-row:span 2; aspect-ratio:auto; height:100%}
@media(max-width:760px){.gallery{grid-template-columns:repeat(2,1fr)}}

/* ---------- area ---------- */
.area{max-width:760px; margin:0 auto; text-align:center}
.area p{color:var(--muted); font-size:18px}
.area p + p{margin-top:14px}
.area b{color:var(--ink)}
.cities{display:flex; flex-wrap:wrap; justify-content:center; gap:9px; margin-top:24px}
.cities .c{background:#fff; border:1px solid var(--line); border-radius:100px; padding:8px 16px; font-size:15.5px; font-weight:600}
.cities .c--hub{background:var(--green-d); color:#fff; border-color:var(--green-d)}

/* ---------- reviews ---------- */
.revs{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.rev{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:24px; display:flex; flex-direction:column; gap:12px}
.section--soft .rev{background:#fff}
.rev .stars{color:var(--star); letter-spacing:1px; font-size:16px}
.rev p{color:var(--ink); font-size:16px; line-height:1.55; flex:1}
.rev__by{display:flex; align-items:center; gap:11px}
.rev__av{width:40px; height:40px; border-radius:50%; background:var(--soft); color:var(--green-d); display:grid; place-items:center; font-weight:800; flex:none}
.rev__by b{font-weight:700; display:block; font-size:16px}
.rev__by small{color:var(--muted); font-size:13.5px}
.revs__more{text-align:center; margin-top:26px}
@media(max-width:760px){.revs{grid-template-columns:1fr}}

/* ---------- big call band ---------- */
.callband{background:var(--green-d); color:#fff; text-align:center}
.callband h2{font-size:clamp(28px,4.5vw,44px)}
.callband p{margin-top:14px; font-size:19px; color:#D7F5E3}
.callband .phone{display:block; font-size:clamp(30px,5vw,46px); font-weight:800; letter-spacing:-.02em; margin:22px 0 6px}
.callband .row{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:18px}
.callband .btn--call{background:#fff; color:var(--green-d)}
.callband .btn--call:hover{background:#F0FdF4}
.callband small{display:block; margin-top:18px; color:#BBE9CC; font-size:15px}

/* ---------- footer ---------- */
.foot{background:var(--ink); color:#AAB4C0; padding-block:40px 96px; font-size:15.5px}
.foot__in{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:28px}
.foot .brand__name{color:#fff}
.foot p{margin-top:12px; max-width:36ch; line-height:1.55}
.foot h4{color:#fff; font-size:14px; text-transform:uppercase; letter-spacing:.06em; margin:0 0 12px}
.foot a.fp{color:#fff; font-weight:800; font-size:22px}
.foot ul{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.foot ul a:hover{color:#86EFAC}
.foot__bot{border-top:1px solid rgba(255,255,255,.1); margin-top:30px; padding-top:18px; font-size:13.5px; display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between}
.foot__bot a{color:#86EFAC}
@media(max-width:680px){.foot__in{grid-template-columns:1fr; gap:24px} .foot{padding-bottom:104px}}

/* ---------- sticky mobile call bar ---------- */
.callbar{position:fixed; left:0; right:0; bottom:0; z-index:60; display:none; gap:10px; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); background:#fff; border-top:1px solid var(--line); box-shadow:0 -8px 24px -12px rgba(17,24,39,.2)}
.callbar .btn{flex:1; padding:16px 12px}
.callbar .btn--call{flex:2}
.callbar .btn--ghost{flex:1}
@media(max-width:820px){.callbar{display:flex}}