/* ============================================================
   The Right Choice Home Care — Landing
   Warm, reassuring, trustworthy. Sage + terracotta on cream.
   Type: Newsreader (display serif) + Mulish (humanist sans)
   ============================================================ */

:root{
  /* palette — red / grey / white */
  --bg:        #f6f6f7;   /* soft cool grey-white */
  --bg-2:      #eeeef0;   /* light grey band */
  --surface:   #ffffff;   /* card / panel */
  --ink:       #1d1d20;   /* charcoal near-black */
  --ink-soft:  #565a60;   /* secondary text */
  --ink-faint: #8b8e95;

  --primary:    #2b2c31;  /* charcoal (structural dark) */
  --primary-700:#3a3b41;
  --primary-900:#19191d;  /* deep charcoal sections */
  --primary-100:#e3e4e7;
  --primary-050:#f0f0f2;

  --accent:     #c41e2a;  /* signature red */
  --accent-700: #a3141f;  /* deep red (hover) */
  --accent-100: #f6d8da;  /* soft red tint */

  --line:      rgba(20,20,24,.10);
  --line-2:    rgba(20,20,24,.16);
  --shadow-sm: 0 1px 2px rgba(20,20,24,.06), 0 2px 6px rgba(20,20,24,.05);
  --shadow-md: 0 6px 20px -6px rgba(20,20,24,.18), 0 2px 8px rgba(20,20,24,.06);
  --shadow-lg: 0 24px 60px -18px rgba(20,20,24,.30), 0 8px 24px -10px rgba(20,20,24,.14);

  --maxw: 1200px;
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-pill: 999px;

  --ease: cubic-bezier(.22,.61,.36,1);

  --ff-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --ff-sans:  "Mulish", system-ui, -apple-system, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--ff-sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font-family:inherit}

h1,h2,h3,h4{font-family:var(--ff-serif); font-weight:500; line-height:1.08; letter-spacing:-.01em; margin:0; color:var(--ink)}
.serif-italic{font-style:italic}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px}
.section{padding:104px 0}
.section-tight{padding:72px 0}

/* eyebrow */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); margin-bottom:18px;
}
.eyebrow::before{content:""; width:26px; height:1.5px; background:var(--accent); display:inline-block}
.eyebrow.center{justify-content:center}

.section-head{max-width:680px}
.section-head.center{margin:0 auto; text-align:center}
.section-head h2{font-size:clamp(30px,4vw,46px)}
.section-head p{color:var(--ink-soft); font-size:18.5px; margin:18px 0 0}

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-weight:800; font-size:15.5px; letter-spacing:.01em;
  padding:15px 26px; border-radius:var(--r-pill); border:1.5px solid transparent;
  cursor:pointer; transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .2s, color .2s, border-color .2s;
  white-space:nowrap;
}
.btn svg{width:18px; height:18px}
.btn-primary{background:var(--accent); color:#fff; box-shadow:0 8px 20px -8px rgba(168,98,58,.7)}
.btn-primary:hover{background:var(--accent-700); transform:translateY(-2px); box-shadow:0 14px 30px -10px rgba(168,98,58,.7)}
.btn-dark{background:var(--primary); color:#fff}
.btn-dark:hover{background:var(--primary-700); transform:translateY(-2px); box-shadow:var(--shadow-md)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--primary); color:var(--primary); background:var(--surface)}
.btn-white{background:#fff; color:var(--primary-900)}
.btn-white:hover{transform:translateY(-2px); box-shadow:var(--shadow-md)}
.btn-lg{padding:18px 32px; font-size:16.5px}

/* ---------------- Top utility bar ---------------- */
.topbar{
  background:var(--primary-900); color:#e7e7ea;
  font-size:13.5px; letter-spacing:.01em;
}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; height:42px; gap:20px}
.topbar a, .topbar span{display:inline-flex; align-items:center; gap:7px; color:#c2c3c8}
.topbar a:hover{color:#fff}
.topbar .tb-right{display:flex; gap:24px}
.topbar svg{width:14px; height:14px; opacity:.8}

/* ---------------- Nav ---------------- */
.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(246,246,247,.82); backdrop-filter:blur(12px) saturate(1.1);
  border-bottom:1px solid transparent;
  transition:box-shadow .3s var(--ease), background .3s, border-color .3s;
}
.nav.scrolled{background:rgba(255,255,255,.95); box-shadow:0 6px 24px -14px rgba(20,20,24,.3); border-bottom-color:var(--line)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:78px; gap:24px}
.brand{display:flex; align-items:center; gap:13px}
.brand-mark{
  width:46px; height:46px; border-radius:13px; flex:none;
  background:linear-gradient(150deg,var(--accent),var(--accent-700));
  display:grid; place-items:center; color:#fff; box-shadow:var(--shadow-sm);
  position:relative;
}
.brand-mark svg{width:24px; height:24px}
.brand-text{line-height:1.05}
.brand-text .bt-1{font-family:var(--ff-serif); font-size:20px; font-weight:600; letter-spacing:-.01em; display:block; white-space:nowrap}
.brand-text .bt-2{font-size:10.5px; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); display:block; margin-top:2px}

.nav-links{display:flex; align-items:center; gap:6px}
.nav-links a{
  padding:10px 15px; border-radius:var(--r-pill); font-size:15px; font-weight:700; color:var(--ink-soft);
  transition:color .2s, background .2s;
}
.nav-links a:hover{color:var(--accent); background:var(--primary-050)}
.nav-cta{display:flex; align-items:center; gap:12px}
.nav-phone{display:flex; align-items:center; gap:9px; font-weight:800; color:var(--accent); font-size:15.5px}
.nav-phone svg{width:17px; height:17px}

.hamburger{display:none; width:46px; height:46px; border-radius:12px; border:1px solid var(--line-2); background:var(--surface); cursor:pointer; align-items:center; justify-content:center}
.hamburger svg{width:22px; height:22px}

/* mobile menu */
.mobile-menu{
  display:none; position:fixed; inset:0; z-index:80;
}
.mobile-menu.open{display:block}
.mm-scrim{position:absolute; inset:0; background:rgba(20,20,24,.5); backdrop-filter:blur(2px)}
.mm-panel{
  position:absolute; right:0; top:0; height:100%; width:min(360px,86vw);
  background:var(--surface); padding:28px 26px; display:flex; flex-direction:column; gap:6px;
  box-shadow:var(--shadow-lg); transform:translateX(100%); transition:transform .35s var(--ease);
}
.mobile-menu.open .mm-panel{transform:translateX(0)}
.mm-panel .mm-close{align-self:flex-end; width:42px; height:42px; border-radius:10px; border:1px solid var(--line-2); background:transparent; cursor:pointer; margin-bottom:8px}
.mm-panel a{padding:14px 12px; border-radius:12px; font-weight:700; font-size:18px; border-bottom:1px solid var(--line)}
.mm-panel a:hover{background:var(--primary-050); color:var(--primary)}
.mm-panel .btn{margin-top:16px}

/* ---------------- Hero ---------------- */
.hero{position:relative; padding:64px 0 96px; overflow:hidden}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center}
.hero h1{font-size:clamp(40px,5.4vw,68px); line-height:1.02}
.hero h1 em{font-style:italic; color:var(--accent)}
.hero .lead{font-size:20px; color:var(--ink-soft); margin:24px 0 0; max-width:520px}
.hero-cta{display:flex; gap:14px; margin-top:34px; flex-wrap:wrap}
.hero-trust{display:flex; gap:26px; margin-top:36px; flex-wrap:wrap}
.hero-trust .ht{display:flex; align-items:center; gap:10px; font-size:14.5px; font-weight:700; color:var(--ink-soft)}
.hero-trust .ht .dot{width:34px; height:34px; border-radius:10px; background:var(--primary-050); color:var(--primary); display:grid; place-items:center; flex:none}
.hero-trust .ht svg{width:18px; height:18px}

.hero-media{position:relative}
.hero-photo{
  position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg);
  aspect-ratio:4/4.4;
}
.hero-photo img{width:100%; height:100%; object-fit:cover}
.hero-photo::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(20,20,24,.30))}
.hero-badge{
  position:absolute; left:-26px; bottom:42px; background:var(--surface);
  border-radius:var(--r-md); padding:18px 22px; box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:14px;
  border:1px solid var(--line);
}
.hero-badge .hb-num{font-family:var(--ff-serif); font-size:34px; font-weight:600; color:var(--primary); line-height:1}
.hero-badge .hb-lab{font-size:13px; font-weight:700; color:var(--ink-soft); line-height:1.3; max-width:130px}
.hero-chip{
  position:absolute; right:-18px; top:34px; background:var(--primary); color:#fff;
  border-radius:var(--r-pill); padding:11px 18px 11px 13px; box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:10px;
  font-weight:800; font-size:14px;
}
.hero-chip .hc-stars{display:flex; gap:1px; color:#f3c98b}
.hero-chip svg{width:15px; height:15px}
.hero-deco{position:absolute; z-index:-1; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle at 30% 30%,var(--accent-100),transparent 70%); top:-40px; right:-60px; opacity:.7}

/* ---------------- Logos / trust strip ---------------- */
.trustband{background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.trustband .wrap{display:flex; align-items:center; justify-content:space-between; gap:28px; padding-top:26px; padding-bottom:26px; flex-wrap:wrap}
.trustband .tb-item{display:flex; align-items:center; gap:12px; color:var(--ink-soft); font-weight:700; font-size:15px}
.trustband .tb-item svg{width:26px; height:26px; color:var(--primary); flex:none}

/* ---------------- Services ---------------- */
.bg-soft{background:var(--bg-2)}
.svc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:54px}
.svc-card{
  background:var(--surface); border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--shadow-sm); transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  display:flex; flex-direction:column;
}
.svc-card:hover{transform:translateY(-8px); box-shadow:var(--shadow-lg)}
.svc-photo{position:relative; aspect-ratio:3/2; overflow:hidden}
.svc-photo img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease)}
.svc-card:hover .svc-photo img{transform:scale(1.06)}
.svc-photo .svc-ico{
  position:absolute; left:18px; bottom:-22px; width:52px; height:52px; border-radius:15px;
  background:var(--surface); color:var(--primary); display:grid; place-items:center; box-shadow:var(--shadow-md); border:1px solid var(--line);
}
.svc-photo .svc-ico svg{width:26px; height:26px}
.svc-body{padding:36px 26px 28px; display:flex; flex-direction:column; flex:1}
.svc-body h3{font-size:23px}
.svc-body p{color:var(--ink-soft); font-size:15.5px; margin:12px 0 20px; flex:1}
.svc-link{display:inline-flex; align-items:center; gap:8px; font-weight:800; color:var(--accent-700); font-size:14.5px}
.svc-link svg{width:16px; height:16px; transition:transform .25s var(--ease)}
.svc-card:hover .svc-link svg{transform:translateX(4px)}

/* ---------------- Why us / About ---------------- */
.why-grid{display:grid; grid-template-columns:.95fr 1.05fr; gap:64px; align-items:center}
.why-media{position:relative}
.why-media .wm-main{border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg); aspect-ratio:1/1}
.why-media .wm-main img{width:100%; height:100%; object-fit:cover}
.why-stats{position:absolute; right:-20px; bottom:-26px; background:var(--primary); color:#fff; border-radius:var(--r-md); padding:22px 26px; box-shadow:var(--shadow-lg); display:flex; gap:26px}
.why-stats .ws-num{font-family:var(--ff-serif); font-size:36px; font-weight:600; line-height:1}
.why-stats .ws-lab{font-size:12px; font-weight:700; opacity:.85; margin-top:5px; max-width:90px}
.why-list{display:grid; gap:18px; margin:30px 0 32px}
.why-list li{display:flex; gap:15px; list-style:none}
.why-list .wl-ico{width:40px; height:40px; border-radius:12px; background:var(--primary-050); color:var(--primary); display:grid; place-items:center; flex:none}
.why-list .wl-ico svg{width:20px; height:20px}
.why-list h4{font-family:var(--ff-sans); font-size:16.5px; font-weight:800; margin:2px 0 3px}
.why-list p{margin:0; color:var(--ink-soft); font-size:15px}
.why-grid ul{padding:0; margin:0}

/* ---------------- How it works ---------------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:54px; position:relative}
.step{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:34px 28px; position:relative; box-shadow:var(--shadow-sm)}
.step .step-n{font-family:var(--ff-serif); font-size:18px; font-weight:600; width:46px; height:46px; border-radius:50%; background:var(--accent); color:#fff; display:grid; place-items:center; margin-bottom:22px}
.step h3{font-size:21px}
.step p{color:var(--ink-soft); font-size:15.5px; margin:11px 0 0}

/* ---------------- Testimonials ---------------- */
.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:54px}
.quote{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:34px 30px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column}
.quote .stars{display:flex; gap:3px; color:var(--accent); margin-bottom:18px}
.quote .stars svg{width:18px; height:18px}
.quote p{font-family:var(--ff-serif); font-size:19px; line-height:1.5; color:var(--ink); margin:0 0 24px; flex:1}
.quote .q-by{display:flex; align-items:center; gap:13px}
.quote .q-by img{width:48px; height:48px; border-radius:50%; object-fit:cover}
.quote .q-by .qn{font-weight:800; font-size:15px}
.quote .q-by .qr{font-size:13px; color:var(--ink-faint)}

/* ---------------- Service area ---------------- */
.area{background:var(--primary-900); color:#e7e7ea; border-radius:var(--r-lg); overflow:hidden}
.area-grid{display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:stretch}
.area-info{padding:60px 56px}
.area-info .eyebrow{color:#e8868c}
.area-info .eyebrow::before{background:var(--accent)}
.area-info h2{color:#fff; font-size:clamp(28px,3.6vw,40px)}
.area-info p{color:#b6b8bf; margin:18px 0 28px}
.town-list{display:grid; grid-template-columns:1fr 1fr; gap:10px 22px; margin:0; padding:0}
.town-list li{list-style:none; display:flex; align-items:center; gap:9px; font-weight:600; font-size:15px; color:#d6d7db}
.town-list li svg{width:15px; height:15px; color:var(--accent); flex:none}
.area-map{position:relative; background:linear-gradient(135deg,#34353b,#19191d); min-height:380px; overflow:hidden}
.area-map img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.4; mix-blend-mode:luminosity}

/* ---------------- Referral band ---------------- */
.referral{position:relative; background:var(--accent); color:#fff; border-radius:var(--r-lg); padding:54px 56px; overflow:hidden; box-shadow:var(--shadow-md)}
.referral::before{content:""; position:absolute; right:-60px; top:-60px; width:320px; height:320px; border-radius:50%; background:rgba(255,255,255,.10)}
.referral::after{content:""; position:absolute; right:60px; bottom:-90px; width:220px; height:220px; border-radius:50%; background:rgba(255,255,255,.08)}
.referral .ref-inner{position:relative; display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap}
.referral h2{color:#fff; font-size:clamp(26px,3.4vw,38px)}
.referral p{color:rgba(255,255,255,.9); margin:12px 0 0; max-width:540px}
.referral .ref-eyebrow{color:rgba(255,255,255,.85); font-weight:800; letter-spacing:.16em; text-transform:uppercase; font-size:12.5px; display:block; margin-bottom:12px}

/* ---------------- Contact ---------------- */
.contact-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:start}
.contact-info h2{font-size:clamp(28px,3.6vw,42px)}
.contact-info p{color:var(--ink-soft); margin:18px 0 30px}
.ci-list{display:grid; gap:18px; margin:0; padding:0}
.ci-list li{list-style:none; display:flex; gap:15px; align-items:flex-start}
.ci-list .ci-ico{width:46px; height:46px; border-radius:13px; background:var(--accent); color:#fff; display:grid; place-items:center; flex:none}
.ci-list .ci-ico svg{width:21px; height:21px}
.ci-list .ci-lab{font-size:12.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint)}
.ci-list .ci-val{font-weight:700; font-size:17px; margin-top:2px}
.ci-list .ci-val a:hover{color:var(--primary)}

.form-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:38px 36px; box-shadow:var(--shadow-md)}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.field{margin-bottom:18px; display:flex; flex-direction:column}
.field label{font-size:13.5px; font-weight:800; margin-bottom:8px; color:var(--ink)}
.field label .req{color:var(--accent-700)}
.field input, .field select, .field textarea{
  font-family:inherit; font-size:16px; padding:14px 16px; border-radius:var(--r-sm);
  border:1.5px solid var(--line-2); background:#fff; color:var(--ink); transition:border-color .2s, box-shadow .2s;
}
.field textarea{resize:vertical; min-height:120px}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-050)}
.field.invalid input, .field.invalid select, .field.invalid textarea{border-color:#c0492f; box-shadow:0 0 0 4px rgba(192,73,47,.1)}
.field .err{color:#c0492f; font-size:12.5px; font-weight:700; margin-top:6px; display:none}
.field.invalid .err{display:block}
.form-foot{display:flex; align-items:center; gap:16px; margin-top:6px; flex-wrap:wrap}
.form-note{font-size:13px; color:var(--ink-faint)}
.form-success{
  display:none; text-align:center; padding:30px 10px;
}
.form-success.show{display:block; animation:pop .5s var(--ease)}
@keyframes pop{from{opacity:0; transform:scale(.95)}to{opacity:1; transform:scale(1)}}
.form-success .fs-ico{width:72px; height:72px; border-radius:50%; background:var(--primary-050); color:var(--primary); display:grid; place-items:center; margin:0 auto 18px}
.form-success .fs-ico svg{width:38px; height:38px}
.form-success h3{font-size:26px}
.form-success p{color:var(--ink-soft); margin:10px 0 0}

/* ---------------- FAQ ---------------- */
.faq-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:56px; align-items:start}
.faq-list{display:grid; gap:14px}
.faq-item{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; transition:box-shadow .3s, border-color .3s}
.faq-item.open{box-shadow:var(--shadow-md); border-color:var(--primary-100)}
.faq-q{width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:22px 24px; display:flex; align-items:center; justify-content:space-between; gap:18px; font-family:var(--ff-sans); font-weight:800; font-size:17.5px; color:var(--ink)}
.faq-q .faq-pm{width:30px; height:30px; border-radius:50%; background:var(--primary-050); color:var(--primary); display:grid; place-items:center; flex:none; transition:transform .3s var(--ease), background .3s}
.faq-q .faq-pm svg{width:16px; height:16px}
.faq-item.open .faq-pm{background:var(--primary); color:#fff; transform:rotate(45deg)}
.faq-a{max-height:0; overflow:hidden; transition:max-height .4s var(--ease)}
.faq-a-inner{padding:0 24px 24px; color:var(--ink-soft); font-size:15.5px}

/* ---------------- Footer ---------------- */
.footer{background:var(--primary-900); color:#c2c3c8; padding:72px 0 0}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:54px}
.footer .f-brand .brand-text .bt-1{color:#fff}
.footer .f-brand p{color:#9b9da4; font-size:14.5px; margin:18px 0 0; max-width:280px}
.footer h4{font-family:var(--ff-sans); font-size:13px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#85878e; margin:0 0 18px}
.footer ul{list-style:none; padding:0; margin:0; display:grid; gap:11px}
.footer ul a, .footer .f-contact div{color:#c2c3c8; font-size:15px}
.footer ul a:hover{color:#fff}
.footer .f-contact{display:grid; gap:14px}
.footer .f-contact .fc-row{display:flex; gap:11px; align-items:flex-start; font-size:14.5px}
.footer .f-contact svg{width:17px; height:17px; color:var(--accent); flex:none; margin-top:2px}
.f-social{display:flex; gap:10px; margin-top:20px}
.f-social a{width:40px; height:40px; border-radius:11px; background:rgba(255,255,255,.08); display:grid; place-items:center; transition:background .2s}
.f-social a:hover{background:var(--accent)}
.f-social svg{width:18px; height:18px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1); padding:24px 0; display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; font-size:13.5px; color:#85878e}

/* ---------------- Reveal animation ---------------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.in{opacity:1; transform:none}
.reveal.d1{transition-delay:.08s}
.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
  html{scroll-behavior:auto}
  .am-dot{animation:none}
}

/* ---------------- Responsive ---------------- */
@media (max-width:1040px){
  .nav-links{display:none}
  .hamburger{display:flex}
  .nav-cta .btn{display:none}
  .hero{padding:48px 0 80px}
  .hero-grid{grid-template-columns:1fr; gap:46px}
  .hero-media{max-width:480px; margin:0 auto}
  .why-grid{grid-template-columns:1fr; gap:64px}
  .why-media{max-width:460px}
  .svc-grid{grid-template-columns:1fr 1fr}
  .area-grid{grid-template-columns:1fr}
  .area-map{min-height:280px}
  .contact-grid{grid-template-columns:1fr; gap:44px}
  .faq-grid{grid-template-columns:1fr; gap:36px}
  .footer-grid{grid-template-columns:1fr 1fr; gap:36px}
  .trustband .wrap{justify-content:center; gap:18px 30px}
}

@media (max-width:720px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  .section{padding:64px 0}
  .section-tight{padding:48px 0}
  .topbar{font-size:12px}
  .topbar .wrap{height:auto; padding:9px 20px; gap:6px; justify-content:center; text-align:center}
  .topbar .tb-addr{display:none}
  .topbar .tb-right{gap:18px}
  .topbar .tb-right .tb-fax{display:none}
  .nav .wrap{height:66px; gap:14px}
  .brand-mark{width:42px; height:42px; border-radius:12px}
  .brand-mark svg{width:22px; height:22px}
  .brand-text .bt-1{font-size:18px}
  .svc-grid{grid-template-columns:1fr; gap:20px}
  .steps{grid-template-columns:1fr; gap:18px}
  .quotes{grid-template-columns:1fr; gap:18px}
  .form-row{grid-template-columns:1fr; gap:0}
  .town-list{grid-template-columns:1fr 1fr}
  .area-info{padding:40px 26px}
  .referral{padding:36px 26px}
  .referral .ref-inner{gap:24px}
  .form-card{padding:28px 22px}
  .why-stats{right:0; padding:18px 20px; gap:20px}
  .why-stats .ws-num{font-size:30px}
  .hero-badge{left:0; padding:14px 18px}
  .hero-chip{right:0; top:18px}
  .hero h1{font-size:clamp(34px,8.5vw,46px)}
  .hero .lead{font-size:18px}
  /* full-width primary actions on phones */
  .hero-cta{gap:12px}
  .hero-cta .btn{width:100%}
  .footer-grid{grid-template-columns:1fr; gap:30px}
  .footer-bottom{justify-content:center; text-align:center}
}

@media (max-width:430px){
  .wrap{padding:0 16px}
  .nav-phone span, .nav-phone{font-size:0}
  .nav-phone svg{width:20px; height:20px}
  .nav-phone{gap:0}
  .hero-trust{gap:14px}
  .hero-trust .ht{font-size:14px}
  .town-list{grid-template-columns:1fr}
  .section-head h2, .hero h1{letter-spacing:-.02em}
  .quote p{font-size:18px}
  .area-info h2{font-size:26px}
}