/* ============================================================
   Hi-Speed Heating Services - shared stylesheet
   Brand colours taken from the company logo (blue + green)
   ============================================================ */

:root{
  --blue:#1b6ca8;
  --blue-dark:#12507e;
  --blue-light:#e7f0f6;
  --green:#4a9b2f;
  --green-dark:#3a7d24;
  --green-light:#eaf3e0;
  --navy:#132a33;
  --navy-soft:#1f3d48;
  --amber:#e0872f;
  --amber-light:#fbebd5;
  --terracotta:#b85c33;
  --cream:#f9f0e2;
  --cream-deep:#f2e3ce;
  --ink:#2c2620;
  --body:#665c50;
  --line:#e6d8c3;
  --bg:#fdf8f0;
  --bg-alt:#f6e9d7;
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 2px 18px rgba(120,80,40,.09);
  --shadow-lg:0 16px 48px rgba(120,80,40,.17);
  --wrap:1180px;
  --font:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  color:var(--body);
  background:var(--bg);
  font-size:17px;
  line-height:1.65;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}

h1,h2,h3,h4{color:var(--ink);line-height:1.2;font-weight:700}
h1{font-size:clamp(2rem,5vw,3.3rem);letter-spacing:-.02em}
h2{font-size:clamp(1.6rem,3.5vw,2.4rem);letter-spacing:-.01em}
h3{font-size:1.25rem}
p{margin-bottom:1rem}
p:last-child{margin-bottom:0}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.section{padding:72px 0}
.section-alt{background:var(--bg-alt);border-top:1px solid rgba(184,92,51,.13);border-bottom:1px solid rgba(184,92,51,.13)}
.center{text-align:center}
.lede{font-size:1.12rem;max-width:720px}
.center .lede{margin-left:auto;margin-right:auto}
.eyebrow{
  display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--terracotta);margin-bottom:12px;
}
.section-head{margin-bottom:44px}

/* ---------- Skip link (accessibility) ---------- */
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:12px 20px;z-index:200}
.skip:focus{left:0}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 28px;border-radius:var(--radius-sm);font-weight:700;font-size:1.02rem;
  border:2px solid transparent;cursor:pointer;transition:.18s ease;text-align:center;
  font-family:inherit;line-height:1.2;
}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn-primary{background:var(--green);color:#fff;box-shadow:0 4px 16px rgba(74,155,47,.32)}
.btn-primary:hover{background:var(--green-dark);color:#fff}
.btn-blue{background:var(--blue);color:#fff;box-shadow:0 4px 16px rgba(27,108,168,.3)}
.btn-blue:hover{background:var(--blue-dark);color:#fff}
.btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-outline:hover{background:rgba(255,255,255,.14);color:#fff}
.btn-ghost{background:#fff;color:var(--blue);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue-dark)}
.btn-lg{padding:18px 36px;font-size:1.1rem}
.btn-row{display:flex;gap:14px;flex-wrap:wrap}
.center .btn-row{justify-content:center}

/* ---------- Header ---------- */
.topbar{background:#1c3521;color:#d3d0c0;font-size:.86rem;padding:8px 0}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.topbar a{color:#fff;font-weight:600}
.topbar-items{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.topbar-items span{display:flex;align-items:center;gap:7px}

header.site{
  position:sticky;top:0;z-index:100;background:rgba(253,248,240,.94);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--line);box-shadow:0 1px 12px rgba(90,65,40,.06);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 0}
.logo img{height:58px;width:auto;display:block}
.logo{flex-shrink:0}

nav.main ul{list-style:none;display:flex;gap:4px;align-items:center;flex-wrap:wrap}
nav.main a{
  color:var(--ink);font-weight:600;font-size:.93rem;padding:9px 12px;
  border-radius:7px;display:block;transition:.15s;
}
nav.main a:hover{background:var(--amber-light);color:var(--terracotta);text-decoration:none}
nav.main a.active{color:var(--terracotta);background:var(--amber-light)}

/* ---------- Dropdown menu ---------- */
nav.main li.has-sub{position:relative}
nav.main .caret{font-size:.72rem;opacity:.7;margin-left:2px}
nav.main ul.sub{
  /* Two columns so all 15 services are visible at once. A scrolling
     dropdown was worse: on a hover menu people never find the bar,
     so anything below the fold may as well not be there. */
  display:none;position:absolute;top:calc(100% + 6px);left:0;
  width:600px;max-width:calc(100vw - 40px);
  /* Fill DOWN column one, then down column two. With the default
     row flow the indented child items landed in the opposite column
     from their parent, which read as if they belonged elsewhere. */
  grid-template-columns:1fr 1fr;
  grid-template-rows:repeat(8,auto);
  grid-auto-flow:column;
  gap:2px 8px;
  background:#fffdf8;border:1px solid var(--line);border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lg);padding:10px;z-index:120;
}
nav.main li.has-sub:hover > ul.sub,
nav.main li.has-sub.open > ul.sub{display:grid}
nav.main ul.sub li{width:100%}
nav.main ul.sub a{
  display:block;padding:10px 14px;font-size:.92rem;font-weight:600;
  color:var(--ink);border-radius:8px;white-space:nowrap;
}
nav.main ul.sub a:hover{background:var(--amber-light);color:var(--terracotta)}
nav.main ul.sub a.active{background:var(--amber-light);color:var(--terracotta)}

@media (max-width:860px){
  nav.main li.has-sub{position:static}
  /* Phone: single column, full width.
     This selector list must match EVERY desktop rule that sets display
     on ul.sub -- :hover and .open both -- and must reset every grid
     property, or the desktop two-column grid leaks onto a phone.
     A touch screen fires :hover on tap. When :hover was missing from
     this list the desktop rule won on a phone, so tapping a submenu
     link flipped that menu from a tall list to a short grid mid-tap:
     every link moved under the finger and the wrong page opened.
     Matching .open alone is NOT enough. */
  nav.main li.has-sub:hover > ul.sub,
  nav.main li.has-sub.open > ul.sub,
  nav.main li.has-sub > ul.sub,
  nav.main ul.sub{
    display:flex;flex-direction:column;position:static;
    box-shadow:none;border:0;background:transparent;
    padding:2px 0 8px 14px;min-width:0;width:auto;max-width:none;
    grid-template-columns:none;grid-template-rows:none;grid-auto-flow:row;
    border-left:2px solid var(--line);margin-left:12px;
    max-height:none;overflow-y:visible;
  }
  nav.main ul.sub a{padding:11px 12px;font-size:.95rem;white-space:normal}
  nav.main .caret{display:none}
}

.header-cta{display:flex;align-items:center;gap:12px;flex-shrink:0}
.header-phone{display:flex;flex-direction:column;line-height:1.15;text-align:right}
.header-phone small{font-size:.72rem;color:var(--body);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.header-phone strong{font-size:1.18rem;color:var(--blue);font-weight:800}

.menu-toggle{
  display:none;background:none;border:2px solid var(--line);border-radius:8px;
  padding:9px 12px;cursor:pointer;font-size:1.3rem;color:var(--ink);line-height:1;
}

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(135deg,#1c3521 0%,#2b5230 46%,#3a6b3a 100%);
  color:#fff;padding:80px 0 88px;position:relative;overflow:hidden;
}
.hero::after{
  content:"";position:absolute;right:-180px;top:-120px;width:620px;height:620px;
  background:radial-gradient(circle,rgba(240,166,74,.46),transparent 64%);pointer-events:none;
}
.hero::before{
  content:"";position:absolute;left:-140px;bottom:-200px;width:520px;height:520px;
  background:radial-gradient(circle,rgba(224,135,47,.22),transparent 68%);pointer-events:none;
}
.hero .wrap{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:54px;align-items:center}
.hero h1{color:#fff;margin-bottom:18px}
.hero h1 .hl{color:#7ed957}
.hero p.lede{color:#c8dcea;font-size:1.18rem;margin-bottom:28px}
.hero-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.hero-badge{
  display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:8px 16px;
  font-size:.86rem;font-weight:600;color:#fff;
}

/* Price card in hero */
.price-card{
  background:linear-gradient(170deg,#fffdf8,var(--cream));
  border-radius:var(--radius);padding:32px;box-shadow:var(--shadow-lg);
  border:1px solid var(--line);border-top:5px solid var(--green);
  color:var(--body);
}
.price-card h2,.price-card li{color:var(--ink)}
.price-card .tag{
  display:inline-block;background:var(--green-light);color:var(--green-dark);
  font-size:.76rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  padding:6px 13px;border-radius:100px;margin-bottom:14px;
}
.price-card h2{font-size:1.4rem;margin-bottom:6px}
.price-card .amount{font-size:3.4rem;font-weight:800;color:var(--green);line-height:1;margin:12px 0 4px}
.price-card .amount small{font-size:1rem;font-weight:600;color:var(--body);display:block;margin-top:6px}
.price-card ul{list-style:none;margin:18px 0;text-align:left}
.price-card ul li{padding:7px 0 7px 28px;position:relative;font-size:.95rem;border-bottom:1px solid var(--line)}
.price-card ul li:last-child{border-bottom:0}
.price-card ul li::before{content:"\2713";position:absolute;left:0;top:7px;color:var(--green);font-weight:800}

/* ---------- Cards / grids ---------- */
.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

.card{
  background:linear-gradient(170deg,#fffdf8 0%,var(--cream) 100%);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:30px;transition:.22s;height:100%;display:flex;flex-direction:column;
}
.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);border-color:var(--amber);background:linear-gradient(170deg,#fffdf8,#fbeedd)}
.card h3{margin-bottom:10px}
.card p{font-size:.97rem;flex-grow:1}
.card .card-link{margin-top:16px;font-weight:700;font-size:.95rem;display:inline-flex;align-items:center;gap:6px}
.card-icon{
  width:56px;height:56px;border-radius:16px;background:var(--amber-light);
  display:flex;align-items:center;justify-content:center;font-size:1.65rem;margin-bottom:16px;
  box-shadow:inset 0 0 0 1px rgba(200,106,63,.09);
}
.card-icon.green{background:var(--green-light);box-shadow:inset 0 0 0 1px rgba(74,155,47,.12)}

/* Brand card - boiler photo beside the detail */
.brand-card{flex-direction:row;gap:22px;align-items:flex-start}
.brand-photo{
  width:168px;flex-shrink:0;aspect-ratio:3/4;object-fit:cover;
  border-radius:14px;border:1px solid var(--line);
  box-shadow:0 4px 14px rgba(120,80,40,.12);
}
.brand-body{flex:1;display:flex;flex-direction:column;min-width:0}
.brand-cap{font-size:.78rem;color:var(--body);margin-top:8px;text-align:center;line-height:1.4}
@media (max-width:620px){
  .brand-card{flex-direction:column;align-items:center;text-align:center}
  .brand-photo{width:100%;max-width:230px}
  .brand-body{width:100%;text-align:left}
}

/* Feature list */
.feature{display:flex;gap:16px;align-items:flex-start}
.feature-num{
  flex-shrink:0;width:44px;height:44px;border-radius:50%;
  background:linear-gradient(140deg,var(--amber),var(--terracotta));
  color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.05rem;
}
.feature h3{font-size:1.1rem;margin-bottom:5px}
.feature p{font-size:.95rem}

/* Checklist */
.checklist{list-style:none;display:grid;gap:12px}
.checklist.cols-2{grid-template-columns:repeat(2,1fr)}
.checklist li{position:relative;padding-left:34px;font-weight:500;color:var(--ink)}
.checklist li::before{
  content:"\2713";position:absolute;left:0;top:-1px;width:23px;height:23px;border-radius:50%;
  background:var(--green);color:#fff;font-size:.78rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}

/* ---------- Photo slots ---------- */
.photo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.photo{border-radius:var(--radius);overflow:hidden;background:var(--bg-alt);border:1px solid var(--line)}
.photo-img{
  aspect-ratio:3/4;background:linear-gradient(135deg,var(--amber-light),var(--green-light));
  display:flex;align-items:center;justify-content:center;color:var(--terracotta);
  font-size:.85rem;font-weight:600;text-align:center;padding:16px;overflow:hidden;
}
.photo-img img{width:100%;height:100%;object-fit:cover;display:block}
.photo-img:has(img){padding:0;background:none}
.photo{transition:.2s}
.photo:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.photo-cap{padding:14px 16px;font-size:.92rem;font-weight:600;color:var(--ink)}

/* ---------- FAQ ---------- */
.faq{max-width:840px;margin:0 auto}
.faq details{background:linear-gradient(170deg,#fffdf8,var(--cream));border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:12px;overflow:hidden}
.faq details[open]{border-color:var(--amber);box-shadow:var(--shadow)}
.faq summary{
  padding:18px 52px 18px 22px;font-weight:700;color:var(--ink);cursor:pointer;
  position:relative;list-style:none;font-size:1.03rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);
  font-size:1.5rem;font-weight:400;color:var(--terracotta);line-height:1;
}
.faq details[open] summary::after{content:"\2212"}
.faq summary:hover{background:var(--amber-light)}
.faq .answer{padding:0 22px 20px;font-size:.98rem}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px}
.contact-item{display:flex;gap:15px;margin-bottom:24px;align-items:flex-start}
.contact-icon{
  flex-shrink:0;width:48px;height:48px;border-radius:14px;background:var(--amber-light);
  display:flex;align-items:center;justify-content:center;font-size:1.25rem;
}
.contact-item h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.07em;color:var(--body);margin-bottom:3px}
.contact-item p,.contact-item a{font-size:1.08rem;font-weight:700;color:var(--ink)}
.contact-item a:hover{color:var(--blue)}

.hours{list-style:none;background:linear-gradient(170deg,#fffdf8,var(--cream));border:1px solid var(--line);border-radius:var(--radius);padding:8px 20px}
.hours li{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line);font-size:.97rem}
.hours li:last-child{border-bottom:0}
.hours li span:first-child{font-weight:600;color:var(--ink)}
.hours .closed{color:#b3392f;font-weight:600}
.hours .open{color:var(--green-dark);font-weight:600}

form.enquiry{background:linear-gradient(170deg,#fffdf8,var(--cream));border:1px solid var(--line);border-radius:var(--radius);padding:32px;box-shadow:var(--shadow)}
.field{margin-bottom:18px}
.field label{display:block;font-weight:600;font-size:.92rem;color:var(--ink);margin-bottom:6px}
.field input,.field textarea,.field select{
  width:100%;padding:13px 15px;border:2px solid var(--line);border-radius:var(--radius-sm);
  font-family:inherit;font-size:1rem;color:var(--ink);background:#fffdf8;transition:.15s;
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(224,135,47,.15)}
.field textarea{min-height:130px;resize:vertical}
.form-note{font-size:.85rem;margin-top:14px;color:var(--body)}

/* ---------- Areas index list ---------- */
.area-list{list-style:none}
.area-list li{margin-bottom:10px}
.area-list a{
  display:block;background:linear-gradient(170deg,#fffdf8,var(--cream));
  border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:14px 18px;transition:.16s;
}
.area-list a:hover{border-color:var(--amber);box-shadow:var(--shadow);text-decoration:none;transform:translateX(3px)}
.area-list strong{display:block;color:var(--ink);font-size:1.04rem}
.area-list span{display:block;color:var(--body);font-size:.85rem;margin-top:3px}

/* ---------- Areas ---------- */
.areas{display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
.area-chip{
  background:#fffdf8;border:1px solid var(--line);border-radius:100px;
  padding:8px 17px;font-size:.9rem;font-weight:600;color:var(--ink);
  display:inline-block;transition:.15s;
}
a.area-chip:hover{border-color:var(--amber);color:var(--terracotta);background:var(--amber-light);text-decoration:none;box-shadow:var(--shadow)}

/* ---------- CTA band ---------- */
.cta-band{background:linear-gradient(135deg,#c2652f 0%,#a34f2a 100%);color:#fff;padding:64px 0;text-align:center}
.cta-band h2{color:#fff;margin-bottom:12px}
.cta-band p{color:rgba(255,255,255,.93);font-size:1.12rem;max-width:620px;margin:0 auto 26px}
.cta-band .btn-ghost{background:#fff;color:#a34f2a;border-color:#fff}
.cta-band .btn-ghost:hover{background:var(--cream);color:#8c421f}

/* ---------- Reviews ---------- */
/* dark band so the cards pop instead of blending into the cream */
.reviews-band{
  background:linear-gradient(135deg,#1c3521 0%,#2b5230 55%,#376438 100%);
  padding:76px 0;position:relative;overflow:hidden;
}
.reviews-band::after{
  content:"";position:absolute;right:-160px;top:-160px;width:560px;height:560px;
  background:radial-gradient(circle,rgba(240,166,74,.34),transparent 66%);pointer-events:none;
}
.reviews-band .wrap{position:relative;z-index:2}
.reviews-band h2{color:#fff}
.reviews-band .lede{color:#dbe8d4}
.reviews-band .eyebrow{color:#f5b869}

.google-mark{
  display:inline-flex;align-items:center;gap:8px;background:#fff;border-radius:100px;
  padding:6px 15px 6px 10px;font-size:.82rem;font-weight:700;color:#3c4043;
  box-shadow:0 2px 10px rgba(0,0,0,.16);margin-bottom:18px;
}
.google-mark svg{width:16px;height:16px;flex-shrink:0}


.stars{color:#fbbc04;letter-spacing:3px;font-size:1.25rem;line-height:1}
.rating-badge{
  display:inline-flex;align-items:center;gap:14px;background:#fff;border:0;
  border-radius:100px;padding:14px 26px;box-shadow:0 10px 30px rgba(0,0,0,.24);transition:.2s;
}
.rating-badge:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.3)}
.rating-badge .score{font-size:1.9rem;font-weight:800;color:var(--ink);line-height:1}
.rating-badge .meta{font-size:.82rem;color:var(--body);line-height:1.3}
.rating-badge .meta strong{color:var(--ink)}
.review-featured{
  background:#fff;border:1px solid rgba(255,255,255,.4);
  border-left:5px solid var(--amber);
  border-radius:var(--radius);padding:36px 40px;box-shadow:0 14px 38px rgba(0,0,0,.22);
  max-width:940px;margin:0 auto;
}
.review-featured blockquote{
  font-size:1.06rem;color:var(--ink);line-height:1.72;margin-top:12px;
}
.review-featured .who{
  margin-top:18px;padding-top:14px;border-top:1px solid rgba(14,34,51,.12);
  font-size:.95rem;font-weight:700;color:var(--ink);
}
.review-featured .who span{display:block;font-weight:500;color:var(--body);font-size:.85rem;margin-top:2px}
@media (max-width:560px){.review-featured{padding:24px 22px}.review-featured blockquote{font-size:1rem}}
.review-card{
  background:#fff;border:1px solid rgba(255,255,255,.35);border-radius:var(--radius);
  padding:28px;display:flex;flex-direction:column;height:100%;
  box-shadow:0 10px 30px rgba(0,0,0,.18);transition:.2s;
}
.review-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.24)}
.review-card .stars{margin-bottom:12px}
.review-card blockquote{
  font-size:.99rem;color:var(--ink);line-height:1.6;flex-grow:1;font-style:normal;
}
.review-card .who{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  font-size:.88rem;font-weight:700;color:var(--ink);
}
.review-card .who span{display:block;font-weight:500;color:var(--body);font-size:.82rem;margin-top:2px}
.hero-badge .stars{font-size:.9rem;letter-spacing:1px}

/* ---------- Trust strip ---------- */
.trust{background:linear-gradient(90deg,#f0dfc6,var(--cream-deep));border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0}
.trust-row{display:flex;justify-content:center;gap:44px;flex-wrap:wrap;align-items:center}
.trust-item{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--ink);font-size:.97rem}
.trust-item .ico{font-size:1.4rem}

/* ---------- Breadcrumb ---------- */
.crumb{background:var(--cream-deep);padding:14px 0;font-size:.88rem;border-bottom:1px solid var(--line)}
.crumb a{color:var(--body)}
.crumb span{color:var(--ink);font-weight:600}

/* ---------- Page header (inner pages) ---------- */
.page-head{background:linear-gradient(135deg,#1c3521 0%,#3a6b3a 100%);color:#fff;padding:60px 0;position:relative;overflow:hidden}
.page-head::after{
  content:"";position:absolute;right:-120px;top:-140px;width:420px;height:420px;
  background:radial-gradient(circle,rgba(240,166,74,.34),transparent 66%);pointer-events:none;
}
.page-head .wrap{position:relative;z-index:2}
.page-head h1{color:#fff;margin-bottom:12px}
.page-head p{color:#c8dcea;font-size:1.13rem;max-width:760px}

/* ---------- Prose ---------- */
.prose h2{margin:36px 0 14px}
.prose h3{margin:26px 0 10px}
.prose ul,.prose ol{margin:0 0 18px 22px}
.prose li{margin-bottom:8px}

/* Callout */
.callout{background:var(--amber-light);border-left:4px solid var(--amber);border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:22px 26px;margin:26px 0}
.callout.green{background:var(--green-light);border-left-color:var(--green)}
.callout h4{margin-bottom:6px;font-size:1.05rem}
.callout p{font-size:.97rem}

/* Pros / cons */
.proscons{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.pros,.cons{border-radius:var(--radius);padding:26px;border:1px solid var(--line)}
.pros{background:var(--green-light);border-color:#cfe6c5}
.cons{background:#fdf1ef;border-color:#f3d3ce}
.pros h3,.cons h3{margin-bottom:14px;display:flex;align-items:center;gap:9px}
.pros ul,.cons ul{list-style:none}
.pros li,.cons li{padding:8px 0 8px 26px;position:relative;font-size:.96rem}
.pros li::before{content:"\2713";position:absolute;left:0;color:var(--green-dark);font-weight:800}
.cons li::before{content:"\2715";position:absolute;left:0;color:#b3392f;font-weight:800}

/* ---------- Footer ---------- */
footer.site{background:linear-gradient(160deg,#1c3521,#2b4a2c);color:#cbc7b6;padding:56px 0 0;font-size:.95rem}
footer.site h4{color:#fff;font-size:1rem;margin-bottom:16px}
footer.site a{color:#cbc7b6}
footer.site a:hover{color:#fff}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:36px;padding-bottom:40px}
.foot-logo{background:#fff;border-radius:10px;padding:12px 16px;display:inline-block;margin-bottom:16px}
.foot-logo img{height:54px}
.foot-list{list-style:none}
.foot-list li{margin-bottom:9px}
.foot-areas{border-top:1px solid rgba(255,255,255,.1);padding:22px 0 4px}
.foot-areas h4{font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;opacity:.75;margin-bottom:10px}
.foot-areas p{font-size:.84rem;line-height:2;opacity:.8}
.foot-areas a{white-space:nowrap}

.foot-bottom{border-top:1px solid rgba(255,255,255,.12);padding:20px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.86rem}

/* ---------- Mobile sticky call bar ---------- */
.callbar{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:120;
  background:#fff;border-top:1px solid var(--line);padding:9px 12px;
  box-shadow:0 -3px 18px rgba(14,34,51,.13);gap:9px;
}
.callbar a{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:14px 8px;border-radius:9px;font-weight:700;font-size:.98rem}
.callbar .c-call{background:var(--green);color:#fff}
.callbar .c-wa{background:var(--blue);color:#fff}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr;gap:38px}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .photo-grid{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr;gap:30px}
  nav.main a{font-size:.88rem;padding:8px 9px}
  .header-phone{display:none}
}

@media (max-width:860px){
  .menu-toggle{display:block}
  nav.main{
    display:none;position:absolute;top:100%;left:0;right:0;background:#fff;
    border-bottom:1px solid var(--line);box-shadow:var(--shadow-lg);padding:10px 20px 18px;
  }
  nav.main.open{display:block}
  nav.main ul{flex-direction:column;align-items:stretch;gap:2px}
  nav.main a{padding:13px 12px;font-size:1rem;border-radius:8px}
  .header-inner{position:relative}
  .grid-3,.grid-2{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr;gap:32px}
  .proscons{grid-template-columns:1fr}
  .checklist.cols-2{grid-template-columns:1fr}
  .section{padding:52px 0}
  .callbar{display:flex}
  body{padding-bottom:68px}
  .topbar-items span.hide-sm{display:none}
}

@media (max-width:560px){
  body{font-size:16px}
  .grid-4,.photo-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .hero{padding:52px 0 60px}
  .price-card{padding:24px}
  .btn-row .btn{width:100%}
  .trust-row{gap:20px;flex-direction:column;align-items:flex-start}
  .logo img{height:56px}
}

/* ============================================================
   Mobile header fixes
   - logo centred, menu button pinned to the right
   - the menu has 15 links, which is taller than a phone screen,
     so it must scroll or the last items cannot be reached
   ============================================================ */
@media (max-width:860px){
  .header-inner{justify-content:center;position:relative;padding:10px 0}
  .logo{margin:0 auto}
  .header-cta{position:absolute;right:0;top:50%;transform:translateY(-50%);gap:0}

  nav.main{
    max-height:calc(100vh - 148px);
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  /* a little breathing room at the bottom so the last link is not
     flush against the edge when scrolled */
  nav.main ul{padding-bottom:6px}
}

@media (max-width:420px){
  .logo img{height:50px}
  .menu-toggle{padding:8px 10px;font-size:1.2rem}
}

/* ============================================================
   Mobile: price cards are set position:sticky INLINE on 35 pages,
   which beats a normal rule — hence !important. On a phone the
   column collapses to full width, and a stuck card would sit over
   the content as you scroll past it.
   ============================================================ */
@media (max-width:860px){
  .price-card{position:static !important;top:auto !important}
  /* long unbroken strings (emails, model names) must not widen the page */
  body{overflow-wrap:break-word}
  .prose a{overflow-wrap:anywhere}
}

/* ---------- Print ---------- */
@media print{
  header.site,footer.site,.callbar,.topbar,.cta-band{display:none}
  body{font-size:12pt;color:#000}
}