/* ==========================================================================
   Trashgo — shared stylesheet
   Theme: white / red #E63946 / sky blue #0EA5E9 on navy #0F172A · Poppins
   ========================================================================== */

:root{
  --red:#E63946;
  --red-dark:#C1121F;
  --red-light:#FF7A85;
  --red-pale:#FFF1F2;
  --sky:#0EA5E9;
  --sky-dark:#0369A1;
  --sky-light:#7DD3FC;
  --sky-pale:#E0F2FE;
  --sky-wash:#F0F9FF;
  --hero-top:#DCEEFA;   /* top of every hero — the header sits on this exact colour */
  --navy:#0F172A;
  --navy-soft:#1E293B;

  --white:#FFFFFF;
  --surface:#F8FAFC;
  --text:#0F172A;
  --text-2:#475569;
  --text-3:#94A3B8;
  --border:#E2E8F0;
  --star:#F59E0B;

  --shadow-sm:0 2px 10px rgba(15,23,42,.05);
  --shadow:0 10px 34px rgba(15,23,42,.09);
  --shadow-lg:0 24px 60px rgba(15,23,42,.16);
  --shadow-red:0 8px 22px rgba(230,57,70,.30);
  --shadow-sky:0 8px 22px rgba(14,165,233,.28);

  --r-sm:10px;
  --r:14px;
  --r-lg:20px;
  --r-xl:26px;

  --nav-h:86px;
}

*{box-sizing:border-box;margin:0;padding:0;}
/* author display rules (e.g. .form-row{display:grid}) beat the UA rule for [hidden] */
[hidden]{display:none !important;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:100px;}
body{
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--text);background:var(--white);
  overflow-x:hidden;line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit;}
h1,h2,h3,h4{line-height:1.18;letter-spacing:-.02em;font-weight:700;}
:focus-visible{outline:3px solid var(--sky);outline-offset:2px;border-radius:4px;}

.container{width:100%;max-width:1200px;margin:0 auto;padding:0 24px;}
.container-narrow{max-width:900px;}
.section{padding:clamp(44px,5.2vw,76px) 0;}
.section-tight{padding:clamp(26px,3vw,42px) 0;}
.band-sky{background:linear-gradient(180deg,var(--sky-pale) 0%,var(--sky-wash) 100%);}
.band-surface{background:var(--surface);}
.band-navy{background:var(--navy);color:#fff;}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;color:var(--red);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;font-size:.75rem;margin-bottom:14px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:currentColor;border-radius:2px;}
.eyebrow.center{justify-content:center;}
.eyebrow.sky{color:var(--sky);}
.eyebrow.light{color:var(--sky-light);}

.section-head{text-align:center;max-width:680px;margin:0 auto clamp(26px,3.4vw,44px);}
.section-head h2{font-size:clamp(1.75rem,4.2vw,2.7rem);}
.section-head p{color:var(--text-2);font-size:clamp(.95rem,1.6vw,1.08rem);margin-top:14px;}
.section-head.on-navy h2{color:#fff;}
.section-head.on-navy p{color:rgba(255,255,255,.72);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:600;
  font-size:.95rem;padding:12px 24px;border-radius:var(--r);min-height:46px;
  transition:transform .2s ease,background .2s ease,color .2s ease,border-color .2s ease;
  white-space:nowrap;border:2px solid transparent;text-align:center;
}
.btn svg{width:18px;height:18px;flex-shrink:0;}
.btn-red{background:var(--red);color:#fff;}
.btn-red:hover{background:var(--red-dark);}
.btn-sky{background:var(--sky);color:#fff;}
.btn-sky:hover{background:var(--sky-dark);}
.btn-navy{background:var(--navy);color:#fff;}
.btn-navy:hover{background:var(--navy-soft);transform:translateY(-2px);box-shadow:var(--shadow);}
.btn-outline{background:#fff;border-color:var(--border);color:var(--text);}
.btn-outline:hover{border-color:var(--red);color:var(--red);}
.btn-outline-dark{background:transparent;border-color:var(--navy);color:var(--navy);}
.btn-outline-dark:hover{background:var(--navy);color:#fff;}
.btn-white{background:#fff;color:var(--red);}
.btn-white:hover{background:#FFF1F2;}
.btn-ghost{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.5);color:#fff;}
.btn-ghost:hover{background:rgba(255,255,255,.26);}
.btn-lg{padding:14px 30px;font-size:1rem;min-height:52px;}
.btn-full{width:100%;}

/* ---------- Announcement ---------- */
.announce{
  background:linear-gradient(90deg,var(--red) 0%,var(--red-dark) 100%);
  color:#fff;text-align:center;font-size:.84rem;font-weight:500;padding:11px 18px;
}
.announce strong{font-weight:700;text-decoration:underline;text-underline-offset:3px;}

/* ---------- Header ---------- */
/* Floating pill header — a white card that rides above the page */
header{
  position:sticky;top:0;z-index:100;padding:14px 0;
  background:#fff;
}
.nav-wrap{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  height:var(--nav-h);background:#fff;border-radius:22px;
  width:calc(100% - 48px);max-width:1200px;margin:0 auto;
  padding:0 12px 0 24px;
  box-shadow:0 12px 32px rgba(15,23,42,.13),0 2px 6px rgba(15,23,42,.05);
}
.logo{display:flex;align-items:center;flex-shrink:0;}
.logo img{height:64px;width:auto;display:block;}
footer .logo img{height:68px;}
.mobile-panel .logo img{height:60px;}

nav.main-nav{display:flex;align-items:center;justify-content:center;gap:28px;flex:1 1 auto;}
.nav-item{position:relative;}
.nav-item > a,.nav-item > button{
  display:inline-flex;align-items:center;gap:5px;font-size:.94rem;font-weight:500;
  color:var(--text-2);padding:8px 0;transition:color .2s;white-space:nowrap;position:relative;
}
.nav-item > a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:3px;background:var(--red);
  border-radius:3px;transition:width .25s ease;
}
.nav-item > a:hover,.nav-item > button:hover{color:var(--red);}
.nav-item > a:hover::after{width:100%;}
.nav-item > a.active{color:var(--red);}
.nav-item > a.active::after{width:100%;}
.nav-item .caret{width:14px;height:14px;transition:transform .25s;}
.nav-item:hover .caret{transform:rotate(180deg);}

.dropdown{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(8px);
  background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  padding:10px;min-width:264px;opacity:0;visibility:hidden;transition:opacity .22s,transform .22s,visibility .22s;
}
.nav-item:hover .dropdown,.nav-item:focus-within .dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.dropdown::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px;}
.dropdown a{display:flex;gap:12px;align-items:flex-start;padding:11px 12px;border-radius:var(--r-sm);transition:background .2s;}
.dropdown a:hover{background:var(--sky-wash);}
.dropdown .di{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.dropdown .di svg{width:18px;height:18px;}
.dropdown a > span:last-child{display:flex;flex-direction:column;gap:2px;min-width:0;}
.dropdown .dt{display:block;font-weight:600;font-size:.9rem;color:var(--text);}
.dropdown .dd{display:block;font-size:.78rem;color:var(--text-3);line-height:1.45;}

.header-ctas{display:flex;align-items:center;gap:28px;flex-shrink:0;}
.header-ctas .btn-red{border-radius:16px;padding:15px 28px;min-height:58px;font-size:1rem;font-weight:700;}
.header-phone{display:flex;align-items:center;gap:9px;font-weight:600;color:var(--text);font-size:.92rem;white-space:nowrap;}
.header-phone .ico{width:38px;height:38px;border-radius:50%;background:var(--sky-pale);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.header-phone svg{width:17px;height:17px;color:var(--sky);}

.burger{display:none;width:48px;height:48px;border-radius:var(--r-sm);align-items:center;justify-content:center;background:var(--red-pale);color:var(--red);}
.burger svg{width:24px;height:24px;}

/* ---------- Mobile panel ---------- */
.mobile-panel{
  position:fixed;inset:0;background:#fff;z-index:200;display:flex;flex-direction:column;
  padding:22px 24px calc(32px + env(safe-area-inset-bottom));
  transform:translateX(100%);transition:transform .34s cubic-bezier(.4,0,.2,1);overflow-y:auto;
}
.mobile-panel.open{transform:translateX(0);}
.mobile-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px;}
.mobile-close{width:48px;height:48px;border-radius:var(--r-sm);background:var(--red-pale);color:var(--red);display:flex;align-items:center;justify-content:center;}
.mobile-close svg{width:24px;height:24px;}
.mobile-panel nav{display:flex;flex-direction:column;margin-bottom:26px;}
.mobile-panel nav a{
  font-size:1.18rem;font-weight:600;padding:15px 0;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
}
.mobile-panel nav a svg{width:18px;height:18px;color:var(--text-3);}
.mobile-panel nav a.active{color:var(--red);}
.mobile-actions{display:flex;flex-direction:column;gap:12px;margin-top:auto;}
.mobile-call{
  display:flex;align-items:center;justify-content:center;gap:10px;margin-top:20px;padding:14px;
  border-radius:var(--r);background:var(--sky-pale);color:var(--sky-dark);font-weight:600;
}
.mobile-call svg{width:18px;height:18px;}

/* ==========================================================================
   HERO (landing)
   ========================================================================== */
.hero{position:relative;overflow:hidden;background:linear-gradient(178deg,#DCEEFA 0%,#CFE6F6 55%,#C6E1F4 100%);}
.hero-grid{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,500px);gap:clamp(24px,3.4vw,56px);align-items:center;padding:clamp(26px,3vw,40px) 24px clamp(140px,13vw,170px);}
.hero-copy{min-width:0;}

/* Calgary illustration — fills the right side and the bottom of the hero */
.hero-art{position:absolute;left:0;right:0;bottom:0;top:0;z-index:1;line-height:0;pointer-events:none;}
.hero-art img{width:100%;height:100%;object-fit:cover;object-position:center bottom;}
.hero-art::before{
  content:"";position:absolute;left:0;right:0;top:0;height:30%;z-index:2;
  background:linear-gradient(180deg,#CFE6F6 0%,rgba(207,230,246,.55) 55%,transparent 100%);
}
/* keep the left column readable where the artwork rises behind it */
.hero-art::after{
  content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(100deg,rgba(214,235,249,.92) 0%,rgba(214,235,249,.72) 26%,rgba(214,235,249,0) 52%);
}

.pill{
  display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--border);
  padding:10px 20px 10px 10px;border-radius:999px;font-size:.86rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-2);margin-bottom:20px;box-shadow:var(--shadow-sm);
}
.pill .dot{width:27px;height:27px;border-radius:50%;background:var(--red);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.pill .dot svg{width:14px;height:14px;color:#fff;}

.hero h1{font-size:clamp(2.3rem,6.4vw,4.4rem);font-weight:800;line-height:1.06;margin-bottom:30px;}
.hero h1 .mark{position:relative;display:inline-block;color:var(--sky-dark);z-index:1;}
.hero h1 .mark::after{content:"";position:absolute;left:-2px;right:-2px;bottom:.07em;height:.28em;background:var(--sky-light);opacity:.45;border-radius:4px;z-index:-1;}
.hero p.lede{color:var(--text-2);font-size:clamp(.98rem,1.7vw,1.1rem);max-width:520px;margin-bottom:26px;}

/* animated SVG skyline — background of the How It Works band */
.hiw{--sky-h:clamp(140px,15vw,230px);position:relative;overflow:hidden;padding-bottom:calc(var(--sky-h) + 52px);}
.hiw > .container{position:relative;z-index:2;}
.hiw-skyline{position:absolute;left:0;right:0;bottom:0;z-index:1;pointer-events:none;line-height:0;height:var(--sky-h);}
.hiw-skyline svg{width:100%;height:100%;display:block;}
.cloud{animation:cloudDrift 26s ease-in-out infinite;transform-origin:center;}
.cloud-2{animation-duration:34s;animation-delay:-6s;}
.cloud-3{animation-duration:30s;animation-delay:-14s;}
@keyframes cloudDrift{0%,100%{transform:translateX(0)}50%{transform:translateX(26px)}}
.truck{animation:truckRoll 18s linear infinite;}
@keyframes truckRoll{0%{transform:translateX(-140px)}100%{transform:translateX(1120px)}}

/* ---------- Quote card ---------- */
.quote-card{background:#fff;border-radius:var(--r-xl);padding:clamp(22px,2.6vw,32px);box-shadow:var(--shadow-lg);border:1px solid var(--border);position:relative;}
.quote-card h3{font-size:clamp(1.2rem,2.2vw,1.45rem);margin-bottom:5px;}
.quote-card .sub{color:var(--text-3);font-size:.86rem;margin-bottom:20px;line-height:1.5;}
.quote-card form .btn[type="submit"],.quote-card form button[type="submit"]{
  margin-top:6px;min-height:68px;font-size:1.24rem;font-weight:700;letter-spacing:.04em;
  border-radius:var(--r);
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px;}
.form-row.one{grid-template-columns:1fr;}
.field{display:flex;flex-direction:column;min-width:0;}
.quote-card form > .field{margin-bottom:10px;}
/* Labels stay for screen readers; the bold inputs carry their own placeholders */
.field label{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.field input,.field select,.field textarea{
  width:100%;border:2.5px solid var(--navy);border-radius:var(--r);padding:14px 16px;
  font-size:16px;font-weight:500;font-family:inherit;color:var(--text);background:#FBFDFF;min-height:54px;
  transition:border-color .2s,box-shadow .2s,background .2s;appearance:none;-webkit-appearance:none;
}
.field input::placeholder,.field textarea::placeholder{color:#64748B;font-weight:500;}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F172A' stroke-width='3'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:18px;padding-right:44px;color:#64748B;
}
.field select:valid{color:var(--text);}
.field input:hover,.field select:hover,.field textarea:hover{background:#fff;}
.field textarea{min-height:120px;resize:vertical;line-height:1.55;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--red);background:#fff;box-shadow:0 0 0 4px rgba(230,57,70,.15);}
.quote-note{display:flex;align-items:center;gap:7px;justify-content:center;color:var(--text-3);font-size:.78rem;margin-top:14px;text-align:center;}
.quote-note svg{width:14px;height:14px;color:var(--sky);flex-shrink:0;}
.form-success{display:none;text-align:center;padding:28px 6px;}
.form-success.show{display:block;}
.form-success .tick{width:60px;height:60px;border-radius:50%;background:var(--red-pale);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;}
.form-success .tick svg{width:30px;height:30px;color:var(--red);}
.form-success h4{font-size:1.16rem;margin-bottom:8px;}
.form-success p{color:var(--text-2);font-size:.93rem;}

/* ---------- Trust badges under form ---------- */
.trust-badges{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px;}
/* 2x2 on the hero so the copy column carries the same visual weight as the form */
.hero .trust-badges{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;
  max-width:560px;margin-top:34px;}
.hero .tb{padding:17px 18px;font-size:.95rem;justify-content:flex-start;line-height:1.3;}
.hero .tb svg{width:19px;height:19px;}
.tb{
  display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--border);
  padding:9px 14px;border-radius:var(--r-sm);font-size:.82rem;font-weight:600;color:var(--text-2);box-shadow:var(--shadow-sm);
}
.tb svg{width:16px;height:16px;flex-shrink:0;}
.tb.r svg{color:var(--red);}
.tb.s svg{color:var(--sky);}

/* ---------- Triple CTA row ---------- */
.triple{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.triple .btn{width:100%;font-size:1rem;letter-spacing:.02em;text-transform:uppercase;font-weight:700;}

/* ---------- Credentials strip ---------- */
.creds{border-top:3px solid var(--sky-light);border-bottom:3px solid var(--sky-light);background:#fff;overflow:hidden;padding:20px 0;}
.creds-inner{display:flex;align-items:center;gap:26px;}
.creds-label{font-weight:700;color:var(--text-3);font-size:.82rem;line-height:1.3;flex-shrink:0;max-width:120px;text-transform:uppercase;letter-spacing:.06em;}
.creds-viewport{flex:1 1 auto;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);}
.creds-track{display:flex;gap:40px;white-space:nowrap;animation:credScroll 32s linear infinite;width:max-content;}
.cred{display:flex;align-items:center;gap:10px;font-weight:700;font-size:.98rem;color:var(--navy);}
.cred svg{width:22px;height:22px;flex-shrink:0;}
.cred:nth-child(odd) svg{color:var(--red);}
.cred:nth-child(even) svg{color:var(--sky);}
@keyframes credScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ---------- Star feature list + phone ---------- */
.feat-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,4vw,60px);align-items:center;}
.star-list{display:flex;flex-direction:column;gap:16px;margin-top:26px;}
.star-list li{display:flex;gap:15px;align-items:flex-start;font-size:1rem;color:var(--text-2);}
.star-list li svg{width:26px;height:26px;flex-shrink:0;color:var(--red);margin-top:1px;}
.star-list li b{color:var(--sky-dark);font-weight:600;}

.phone-wrap{display:flex;justify-content:center;position:relative;}
.phone-wrap::before{content:"";position:absolute;width:78%;aspect-ratio:1;background:var(--sky-light);opacity:.28;filter:blur(60px);border-radius:50%;}
.phone{
  position:relative;width:min(300px,80vw);aspect-ratio:9/18.5;background:var(--navy);border-radius:38px;
  padding:11px;box-shadow:0 30px 70px rgba(15,23,42,.35);
}
.phone-screen{width:100%;height:100%;background:#fff;border-radius:28px;overflow:hidden;display:flex;flex-direction:column;}
.phone-notch{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:110px;height:22px;background:var(--navy);border-radius:0 0 14px 14px;z-index:2;}
.ph-top{background:var(--navy);color:#fff;padding:26px 16px 12px;display:flex;align-items:center;justify-content:space-between;}
.ph-logo{font-weight:800;font-size:.86rem;letter-spacing:-.02em;}
.ph-logo span{color:var(--red-light);}
.ph-menu{width:22px;height:16px;display:flex;flex-direction:column;justify-content:space-between;}
.ph-menu i{display:block;height:2px;background:var(--red-light);border-radius:2px;}
.ph-body{padding:14px;flex:1;overflow:hidden;}
.ph-h{font-size:.82rem;font-weight:700;margin-bottom:3px;}
.ph-p{font-size:.63rem;color:var(--text-3);margin-bottom:12px;line-height:1.4;}
.ph-opt{border:1.5px solid var(--border);border-radius:9px;padding:9px 11px;font-size:.68rem;font-weight:500;margin-bottom:7px;display:flex;justify-content:space-between;align-items:center;color:var(--text-2);}
.ph-opt.sel{border-color:var(--red);background:var(--red-pale);color:var(--red);font-weight:700;}
.ph-opt .tag{font-size:.58rem;font-weight:700;color:var(--sky-dark);background:var(--sky-pale);padding:2px 6px;border-radius:5px;}
.ph-opt.sel .tag{background:var(--red);color:#fff;}
.ph-btn{margin-top:12px;background:var(--red);color:#fff;text-align:center;padding:11px;border-radius:9px;font-size:.72rem;font-weight:700;}

/* ---------- Services cards ---------- */
.services-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.6vw,30px);}
.services-grid.services-3{grid-template-columns:repeat(3,1fr);}
.service-card{background:#fff;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-sm);transition:transform .3s,box-shadow .3s;display:flex;flex-direction:column;}
.service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);}
.service-media{aspect-ratio:16/10;position:relative;overflow:hidden;background:var(--surface);}
.service-media img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease;}
.service-card:hover .service-media img{transform:scale(1.07);}
.service-media .tag{position:absolute;top:15px;left:15px;color:#fff;font-size:.7rem;font-weight:600;padding:7px 14px;border-radius:999px;letter-spacing:.06em;text-transform:uppercase;}
.tag.t-red{background:var(--red);}
.tag.t-sky{background:var(--sky);}
.service-body{padding:clamp(22px,2.6vw,30px);flex:1;display:flex;flex-direction:column;}
.service-icon{width:54px;height:54px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;margin-bottom:18px;flex-shrink:0;}
.service-icon svg{width:26px;height:26px;}
.ic-red{background:var(--red-pale);} .ic-red svg{color:var(--red);}
.ic-sky{background:var(--sky-pale);} .ic-sky svg{color:var(--sky);}
.service-body h3{font-size:clamp(1.25rem,2.3vw,1.5rem);margin-bottom:11px;}
.service-body > p{color:var(--text-2);font-size:.96rem;margin-bottom:20px;}
.service-feats{margin-bottom:24px;display:flex;flex-direction:column;gap:11px;}
.service-feats li{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;color:var(--text-2);}
.service-feats svg{width:19px;height:19px;flex-shrink:0;margin-top:2px;}
.service-feats.f-red svg{color:var(--red);} .service-feats.f-sky svg{color:var(--sky);}
.service-link{margin-top:auto;display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:.96rem;}
.service-link svg{width:17px;height:17px;transition:transform .25s;}
.service-card:hover .service-link svg{transform:translateX(5px);}
.l-red{color:var(--red);} .l-sky{color:var(--sky-dark);}

/* ---------- Steps ---------- */
.steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,32px);}
.steps.steps-3{grid-template-columns:repeat(3,1fr);max-width:1000px;margin:0 auto;}
.steps::before{content:"";position:absolute;top:31px;left:12%;right:12%;height:2px;background:repeating-linear-gradient(90deg,var(--sky-light) 0 10px,transparent 10px 20px);}
.step{position:relative;text-align:center;}
.step-num{width:62px;height:62px;border-radius:50%;background:#fff;border:2px solid var(--sky-light);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.15rem;color:var(--sky-dark);margin:0 auto 20px;box-shadow:var(--shadow-sm);position:relative;z-index:2;}
.step:nth-child(even) .step-num{border-color:var(--red-light);color:var(--red);}
.step h3{font-size:1.06rem;margin-bottom:9px;}
.step p{color:var(--text-2);font-size:.9rem;}

/* ---------- Benefits ---------- */
.benefits-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,26px);}
.benefit-card{
  position:relative;overflow:hidden;border-radius:var(--r-lg);padding:clamp(22px,2.5vw,30px);
  border:1.5px solid transparent;transition:transform .25s,box-shadow .25s;
}
.benefit-card::after{content:"";position:absolute;left:0;right:0;top:0;height:4px;}
.benefit-card:nth-child(odd){background:var(--red-pale);border-color:#FBD5D8;}
.benefit-card:nth-child(odd)::after{background:var(--red);}
.benefit-card:nth-child(even){background:var(--sky-wash);border-color:#C9E7F8;}
.benefit-card:nth-child(even)::after{background:var(--sky);}
.benefit-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);}
.benefit-card:nth-child(odd) .benefit-icon{background:#fff;}
.benefit-card:nth-child(even) .benefit-icon{background:#fff;}
.benefit-icon{width:52px;height:52px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;margin-bottom:18px;}
.benefit-icon svg{width:24px;height:24px;}
.benefit-card h3{font-size:1.06rem;margin-bottom:9px;}
.benefit-card p{color:var(--text-2);font-size:.91rem;}

/* ---------- Audience panels (property managers / residents) ---------- */
.audience-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,30px);}
.audience{
  position:relative;overflow:hidden;border-radius:var(--r-xl);padding:clamp(24px,2.8vw,36px);
  border:1.5px solid transparent;display:flex;flex-direction:column;
}
.audience::after{content:"";position:absolute;left:0;right:0;top:0;height:4px;}
.audience.a-red{background:var(--red-pale);border-color:#FBD5D8;}
.audience.a-red::after{background:var(--red);}
.audience.a-sky{background:var(--sky-wash);border-color:#C9E7F8;}
.audience.a-sky::after{background:var(--sky);}
.aud-icon{width:56px;height:56px;border-radius:var(--r);background:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:18px;}
.aud-icon svg{width:27px;height:27px;}
.audience h3{font-size:clamp(1.2rem,2.2vw,1.45rem);margin-bottom:12px;}
.audience > p{color:var(--text-2);font-size:.96rem;margin-bottom:20px;}
.aud-list{display:flex;flex-direction:column;gap:11px;margin-bottom:26px;}
.aud-list li{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;color:var(--text-2);}
.aud-list svg{width:18px;height:18px;flex-shrink:0;margin-top:2px;}
.a-red .aud-list svg{color:var(--red);}
.a-sky .aud-list svg{color:var(--sky);}
.audience .btn{margin-top:auto;align-self:flex-start;}

/* ---------- Service area ---------- */
.area-section{position:relative;padding:clamp(64px,8vw,110px) 0;background-size:cover;background-position:center;
  background-image:linear-gradient(135deg,rgba(15,23,42,.93) 0%,rgba(3,105,161,.85) 100%),url('https://images.pexels.com/photos/28445902/pexels-photo-28445902.jpeg?auto=compress&cs=tinysrgb&w=1920');}
.area-section .container{text-align:center;max-width:740px;}
.area-section h2{color:#fff;font-size:clamp(1.75rem,4.2vw,2.7rem);margin-bottom:18px;}
.area-section > .container > p{color:rgba(255,255,255,.82);font-size:clamp(.95rem,1.7vw,1.08rem);margin-bottom:36px;}
.area-pill{display:inline-flex;flex-direction:column;align-items:center;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);backdrop-filter:blur(10px);border-radius:var(--r-xl);padding:clamp(24px,3vw,34px) clamp(32px,5vw,52px);margin-bottom:36px;}
.area-pill .pin{width:60px;height:60px;border-radius:50%;background:var(--red);display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.area-pill .pin svg{width:27px;height:27px;color:#fff;}
.area-pill h3{color:#fff;font-size:clamp(1.2rem,2.4vw,1.45rem);}
.area-pill span{color:var(--sky-light);font-weight:600;font-size:.88rem;margin-top:5px;}
.area-also{margin-bottom:36px;}
.area-also-label{display:block;font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin-bottom:14px;}
.area-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;}
.area-chip{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px);border-radius:999px;
  padding:9px 16px;color:#fff;font-weight:600;font-size:.9rem;white-space:nowrap;}
.area-chip svg{width:15px;height:15px;color:var(--sky-light);flex-shrink:0;}

/* ---------- Testimonials ---------- */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,26px);}
.testi-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:clamp(22px,2.5vw,30px);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;}
.stars{color:var(--star);font-size:1rem;letter-spacing:3px;margin-bottom:15px;}
.testi-card .quote{color:var(--text-2);font-size:.94rem;margin-bottom:22px;flex:1;}
.testi-person{display:flex;align-items:center;gap:13px;}
.testi-person .av{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.95rem;color:#fff;flex-shrink:0;}
.testi-person .name{font-weight:600;font-size:.93rem;}
.testi-person .loc{color:var(--text-3);font-size:.8rem;}
.testi-caveat{text-align:center;color:var(--text-3);font-size:.78rem;margin-top:30px;}

/* ---------- FAQ ---------- */
.faq-wrap{max-width:820px;margin:0 auto;}
.faq-item{background:#fff;border:1px solid var(--border);border-radius:var(--r);margin-bottom:13px;overflow:hidden;transition:border-color .25s,box-shadow .25s;}
.faq-item.open{border-color:var(--red-light);box-shadow:var(--shadow-sm);}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:19px 22px;text-align:left;font-weight:600;font-size:1rem;min-height:60px;}
.faq-q .ico{width:30px;height:30px;border-radius:8px;background:var(--sky-pale);color:var(--sky-dark);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .28s,background .28s,color .28s;}
.faq-q .ico svg{width:17px;height:17px;}
.faq-item.open .faq-q .ico{transform:rotate(45deg);background:var(--red);color:#fff;}
.faq-a{max-height:0;overflow:hidden;transition:max-height .32s ease;}
.faq-item.open .faq-a{max-height:460px;}
.faq-a p{color:var(--text-2);padding:0 22px 21px;font-size:.94rem;}

/* ---------- CTA banner ---------- */
.cta-banner{position:relative;overflow:hidden;padding:clamp(56px,7vw,100px) 0;background:linear-gradient(125deg,var(--red) 0%,var(--red-dark) 100%);}
.cta-banner .blob{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;}
.cta-banner .b1{width:min(320px,45vw);aspect-ratio:1;background:var(--sky);opacity:.42;top:-110px;right:-70px;}
.cta-banner .b2{width:min(300px,42vw);aspect-ratio:1;background:#fff;opacity:.16;bottom:-120px;left:-70px;}
.cta-banner .container{position:relative;z-index:2;text-align:center;max-width:700px;}
.cta-banner h2{color:#fff;font-size:clamp(1.75rem,4.2vw,2.7rem);margin-bottom:16px;}
.cta-banner > .container > p{color:rgba(255,255,255,.9);font-size:clamp(.98rem,1.8vw,1.1rem);margin-bottom:34px;}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:30px;}
.cta-phone{display:inline-flex;align-items:center;gap:11px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.32);padding:13px 26px;border-radius:999px;color:#fff;font-weight:600;font-size:.95rem;backdrop-filter:blur(8px);}
.cta-phone svg{width:18px;height:18px;flex-shrink:0;}

/* ---------- Footer ---------- */
footer{background:var(--navy);color:#fff;padding-top:clamp(48px,6vw,76px);}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:clamp(28px,4vw,46px);padding-bottom:clamp(36px,5vw,56px);}
.footer-col h4{font-size:1rem;margin-bottom:20px;}
.footer-col ul{display:flex;flex-direction:column;gap:13px;}
.footer-col a,.footer-col p,.footer-col span{color:rgba(255,255,255,.68);font-size:.9rem;}
.footer-col a{transition:color .2s;}
.footer-col a:hover{color:var(--red-light);}
.footer-brand .logo{color:#fff;margin-bottom:15px;}
.footer-brand p{max-width:290px;}
.footer-contact li{display:flex;align-items:flex-start;gap:12px;}
.footer-contact .ico{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.09);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.footer-contact .ico svg{width:16px;height:16px;color:var(--sky-light);}
.footer-contact li:first-child .ico svg{color:var(--red-light);}
.footer-bottom{border-top:1px solid rgba(255,255,255,.11);padding:22px 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:rgba(255,255,255,.5);font-size:.8rem;}

/* ---------- WhatsApp floating button ---------- */
.wa-fab{
  position:fixed;right:18px;bottom:22px;z-index:96;width:58px;height:58px;border-radius:50%;
  background:#25D366;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(37,211,102,.42);transition:transform .25s,box-shadow .25s;
}
.wa-fab:hover{transform:scale(1.08);box-shadow:0 14px 34px rgba(37,211,102,.55);}
.wa-fab svg{width:31px;height:31px;fill:#fff;}
.wa-fab::after{
  content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;
  animation:waPulse 2.4s ease-out infinite;
}
@keyframes waPulse{0%{transform:scale(1);opacity:.7}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}

/* ---------- Mobile header CTA row (under the header) ---------- */
.header-cta-row{display:none;gap:10px;padding:12px 18px 14px;background:#fff;}
.header-cta-row .btn{flex:1;padding:14px 10px;font-size:.94rem;min-height:52px;border-radius:16px;}
.header-cta-row .btn-outline{box-shadow:0 6px 18px rgba(15,23,42,.08);}

/* ---------- Sticky mobile bar ---------- */
.mobile-bar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:95;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-top:1px solid var(--border);padding:11px 14px calc(11px + env(safe-area-inset-bottom));gap:10px;}
.mobile-bar .btn{flex:1;padding:13px 14px;font-size:.92rem;min-height:50px;}

/* ==========================================================================
   INNER PAGE components
   ========================================================================== */
.page-hero{position:relative;overflow:hidden;padding:clamp(52px,6.5vw,92px) 0;background:linear-gradient(170deg,var(--hero-top) 0%,var(--sky-wash) 60%,#fff 100%);}
.page-hero .blob{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;}
.page-hero .pb1{width:min(420px,55vw);aspect-ratio:1;background:var(--sky-light);opacity:.45;top:-150px;right:-90px;}
.page-hero .pb2{width:min(360px,50vw);aspect-ratio:1;background:var(--red-light);opacity:.24;bottom:-170px;left:-110px;}
.page-hero .container{position:relative;z-index:2;}
.page-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,4vw,56px);align-items:center;}
.page-hero h1{font-size:clamp(2rem,5vw,3.2rem);font-weight:800;margin-bottom:16px;}
.page-hero h1 .mark{position:relative;display:inline-block;color:var(--sky-dark);z-index:1;}
.page-hero h1 .mark::after{content:"";position:absolute;left:-2px;right:-2px;bottom:.07em;height:.28em;background:var(--sky-light);opacity:.45;border-radius:4px;z-index:-1;}
.page-hero p.lede{color:var(--text-2);font-size:clamp(1rem,1.8vw,1.12rem);max-width:560px;margin-bottom:26px;}
.page-hero-actions{display:flex;flex-wrap:wrap;gap:13px;}
.hero-figure{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/3;position:relative;}
.hero-figure img{width:100%;height:100%;object-fit:cover;}

.crumbs{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--text-3);margin-bottom:16px;flex-wrap:wrap;}
.crumbs a:hover{color:var(--red);}
.crumbs svg{width:13px;height:13px;}

/* split rows (services detail / about story) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4.5vw,64px);align-items:center;}
.split.flip .split-media{order:2;}
.split-media{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow);position:relative;aspect-ratio:4/3;}
.split-media img{width:100%;height:100%;object-fit:cover;}
.split-body h2{font-size:clamp(1.6rem,3.4vw,2.3rem);margin-bottom:14px;}
.split-body > p{color:var(--text-2);margin-bottom:20px;}

.check-list{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;margin-bottom:26px;}
.check-list li{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;color:var(--text-2);}
.check-list svg{width:19px;height:19px;flex-shrink:0;margin-top:2px;color:var(--red);}
.check-list.sky svg{color:var(--sky);}

/* photo strip */
.photo-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.photo-strip figure{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:1;box-shadow:var(--shadow-sm);position:relative;}
.photo-strip img{width:100%;height:100%;object-fit:cover;transition:transform .5s;}
.photo-strip figure:hover img{transform:scale(1.08);}
.photo-strip figcaption{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(15,23,42,.85));color:#fff;font-size:.8rem;font-weight:600;padding:22px 12px 11px;}

/* pricing / plan cards */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,26px);align-items:start;}
.plan{background:#fff;border:1.6px solid var(--border);border-radius:var(--r-xl);padding:clamp(24px,2.6vw,32px);box-shadow:var(--shadow-sm);position:relative;transition:transform .25s,box-shadow .25s;}
.plan:hover{transform:translateY(-5px);box-shadow:var(--shadow);}
.plan.featured{border-color:var(--red);box-shadow:var(--shadow);}
.plan .ribbon{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--red);color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:6px 16px;border-radius:999px;white-space:nowrap;}
.plan h3{font-size:1.2rem;margin-bottom:6px;}
.plan .freq{color:var(--text-3);font-size:.85rem;margin-bottom:18px;}
.plan .save{display:inline-flex;align-items:center;gap:7px;background:var(--sky-pale);color:var(--sky-dark);font-weight:700;font-size:.86rem;padding:8px 14px;border-radius:var(--r-sm);margin-bottom:18px;}
.plan .save svg{width:15px;height:15px;}
.plan ul{display:flex;flex-direction:column;gap:10px;margin-bottom:24px;}
.plan li{display:flex;gap:9px;align-items:flex-start;font-size:.9rem;color:var(--text-2);}
.plan li svg{width:17px;height:17px;flex-shrink:0;margin-top:2px;color:var(--red);}

/* stat / value cards */
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,24px);}
.value{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:clamp(20px,2.4vw,28px);box-shadow:var(--shadow-sm);}
.value .vi{width:48px;height:48px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.value .vi svg{width:23px;height:23px;}
.value h3{font-size:1rem;margin-bottom:8px;}
.value p{font-size:.88rem;color:var(--text-2);}

/* contact cards */
.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,4vw,56px);align-items:start;}
.contact-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:26px;}
.cc{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow-sm);transition:transform .25s,box-shadow .25s;}
.cc:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.cc .ci{width:46px;height:46px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.cc .ci svg{width:22px;height:22px;}
.cc h3{font-size:.95rem;margin-bottom:6px;}
.cc a,.cc p{font-size:.92rem;color:var(--text-2);word-break:break-word;}
.cc a:hover{color:var(--red);}
.cc .muted{font-size:.8rem;color:var(--text-3);margin-top:4px;}

.hours{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:26px;box-shadow:var(--shadow-sm);}
.hours h3{font-size:1.05rem;margin-bottom:16px;display:flex;align-items:center;gap:10px;}
.hours h3 svg{width:20px;height:20px;color:var(--sky);}
.hours li{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px dashed var(--border);font-size:.9rem;color:var(--text-2);}
.hours li:last-child{border-bottom:0;}
.hours li b{color:var(--text);font-weight:600;}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease;}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .creds-track,.cloud,.truck{animation:none;}
  html{scroll-behavior:auto;}
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1180px){
  nav.main-nav{gap:20px;}
  .header-phone span{display:none;}
  .btn{padding:13px 22px;}
}

/* the extra Book Online nav item needs the room the phone chip was using */
@media (max-width:1140px){
  nav.main-nav{gap:16px;}
  .header-phone{display:none;}
}

/* tablet landscape → touch nav */
@media (max-width:1024px){
  :root{--nav-h:82px;}
  .logo img{height:62px;}
  header{padding:10px 0;}
  .nav-wrap{padding:0 10px 0 14px;border-radius:18px;width:calc(100% - 32px);}
  .header-cta-row{padding:12px 16px 14px;}
  nav.main-nav,.header-ctas{display:none;}
  .burger{display:flex;}
  .hero-grid{grid-template-columns:1fr;gap:30px;padding-bottom:clamp(170px,26vw,230px);}
  /* landing hero centres up once it stacks */
  .hero-grid{text-align:center;}
  .hero-grid .pill{margin-left:auto;margin-right:auto;}
  .hero h1,.hero p.lede{margin-left:auto;margin-right:auto;}
  .hero .trust-badges{justify-content:center;margin-left:auto;margin-right:auto;}
  .quote-card .field,.quote-card .field label{text-align:left;}
  .hero p.lede{max-width:640px;}
  .quote-card{max-width:580px;margin-left:auto;margin-right:auto;width:100%;}
  /* on stacked layouts the art returns to a bottom band */
  .hero-art{top:auto;height:clamp(190px,40vw,320px);}
  .hero-art::after{display:none;}
  .page-hero-grid{grid-template-columns:1fr;gap:34px;}
  .feat-grid{grid-template-columns:1fr;gap:40px;}
  /* stacked feature block centres with the rest of the page */
  .feat-grid > div:first-child{text-align:center;}
  .feat-grid .eyebrow{justify-content:center;}
  .feat-grid .star-list{display:inline-block;text-align:left;}
  .feat-grid > div:first-child > div[style*="flex"]{justify-content:center;}
  .split{grid-template-columns:1fr;gap:30px;}
  .split.flip .split-media{order:0;}
  .steps{grid-template-columns:repeat(2,1fr);row-gap:40px;}
  .steps::before{display:none;}
  .benefits-grid,.testi-grid,.values{grid-template-columns:repeat(2,1fr);}
  .audience-grid{grid-template-columns:1fr;max-width:620px;margin:0 auto;}
  .audience .btn{align-self:stretch;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .contact-grid{grid-template-columns:1fr;gap:36px;}
  .plans{grid-template-columns:1fr;max-width:520px;margin:0 auto;}
  .plan.featured{order:-1;}
}

/* tablet portrait */
@media (max-width:900px){
  .services-grid,.services-grid.services-3{grid-template-columns:1fr;max-width:600px;margin:0 auto;}
  .service-media{aspect-ratio:16/9;}
  .testi-grid{grid-template-columns:1fr;max-width:600px;margin:0 auto;}
  .photo-strip{grid-template-columns:repeat(2,1fr);}
  .triple{grid-template-columns:1fr;max-width:480px;margin:0 auto;}
  .creds-inner{flex-direction:column;align-items:flex-start;gap:14px;}
  .creds-label{max-width:none;}
}

/* mobile */
@media (max-width:768px){
  .container{padding:0 18px;}
  body{padding-bottom:76px;}
  .mobile-bar{display:flex;}
  .header-cta-row{display:flex;}

  /* 2-up card grids on mobile */
  .benefits-grid{grid-template-columns:1fr 1fr;gap:12px;}
  .benefit-card{padding:18px 14px;border-radius:var(--r);}
  .benefit-icon{width:42px;height:42px;margin-bottom:12px;border-radius:11px;}
  .benefit-icon svg{width:20px;height:20px;}
  .benefit-card h3{font-size:.92rem;margin-bottom:6px;line-height:1.25;}
  .benefit-card p{font-size:.79rem;line-height:1.45;}

  .values{grid-template-columns:1fr 1fr;gap:12px;}
  .value{padding:18px 14px;border-radius:var(--r);}
  .value .vi{width:42px;height:42px;margin-bottom:12px;border-radius:11px;}
  .value .vi svg{width:20px;height:20px;}
  .value h3{font-size:.92rem;margin-bottom:6px;line-height:1.25;}
  .value p{font-size:.79rem;line-height:1.45;}

  .steps{grid-template-columns:1fr 1fr;gap:30px 12px;}
  .step-num{width:52px;height:52px;font-size:1rem;margin-bottom:13px;}
  .step h3{font-size:.94rem;margin-bottom:6px;line-height:1.25;}
  .step p{font-size:.79rem;line-height:1.45;}

  /* phone mockup above the starred list */
  .feat-grid .phone-wrap{order:-1;}

  /* inner-page heroes centre up on mobile */
  .page-hero-grid > div:first-child{text-align:center;}
  .page-hero .crumbs{justify-content:center;}
  .page-hero p.lede{margin-left:auto;margin-right:auto;}
  .page-hero-actions{justify-content:center;}
  .page-hero .trust-badges{justify-content:center;}
  .wa-fab{bottom:88px;right:14px;width:54px;height:54px;}
  .wa-fab svg{width:29px;height:29px;}

  /* Hellamaid-style centred mobile hero with a prominent form */
  .hero-grid{padding-top:26px;padding-left:18px;padding-right:18px;padding-bottom:clamp(150px,44vw,220px);text-align:center;}
  .hero-grid .pill{margin-left:auto;margin-right:auto;}
  .hero h1{font-size:clamp(2rem,8.4vw,2.7rem);}
  .hero p.lede{margin-left:auto;margin-right:auto;}
  .quote-card{margin-top:22px;padding:22px 18px 24px;border-radius:22px;}
  .quote-card .field{text-align:left;}
  .quote-card .btn{font-size:1.08rem;letter-spacing:.03em;min-height:60px;}
  .trust-badges{justify-content:center;}
  /* the hero badges are only supersized on desktop, where they balance the form */
  .hero .trust-badges{margin-left:auto;margin-right:auto;gap:10px;max-width:none;margin-top:24px;}
  .hero .tb{padding:12px 10px;font-size:.8rem;line-height:1.3;justify-content:center;text-align:center;}
  .hero .tb svg{width:16px;height:16px;}
  .footer-grid{grid-template-columns:1fr;gap:32px;}
  .footer-brand p{max-width:none;}
  .announce{font-size:.76rem;padding:10px 14px;}
  .cta-actions .btn,.page-hero-actions .btn{width:100%;max-width:340px;}
  .footer-bottom{justify-content:center;text-align:center;}
  .contact-cards{grid-template-columns:1fr;}
  .check-list{grid-template-columns:1fr;}
  .hero-grid{padding-bottom:clamp(150px,42vw,200px);}
}

/* Touch targets: inline links that are standalone actions (footer nav, contact
   cards, breadcrumbs) are only ~20px tall by default. Give them a real hit area
   on touch widths without changing how they look. */
@media (max-width:768px){
  .footer-col ul a{display:inline-block;padding:8px 0;}
  .footer-contact a{display:inline-block;padding:6px 0;}
  .foot-legal{display:inline-block;padding:8px 0;}
  .crumbs a{display:inline-block;padding:7px 0;}
  .cc a{display:inline-block;padding:7px 0;}
  .cta-call a,.cta-phone a{display:inline-block;padding:9px 4px;}
  .policy-contact a{display:inline-block;padding:6px 2px;}
  .quote-consent a{display:inline-block;padding:7px 2px;}
}

/* small mobile */
@media (max-width:520px){
  .hero h1{font-size:clamp(1.85rem,8vw,2.3rem);}
  .logo{font-size:1.22rem;}
  .logo svg{width:32px;height:32px;}
  .tb{font-size:.78rem;padding:8px 12px;}
  .faq-q{padding:16px 17px;font-size:.94rem;}
  .faq-a p{padding:0 17px 18px;}
  .photo-strip{grid-template-columns:1fr 1fr;gap:10px;}
}

/* ==========================================================================
   ACCOUNT + BOOKING  (account.html, book.html)
   ========================================================================== */
.auth-hero{padding:clamp(30px,5vw,58px) 0 clamp(56px,7vw,92px);}
.auth-hero .crumbs{margin-bottom:clamp(18px,2.6vw,26px);}
.auth-card{max-width:520px;margin:0 auto;}
.auth-card + .auth-card{margin-top:20px;}
.auth-tabs{display:flex;gap:6px;background:var(--surface);padding:5px;border-radius:14px;margin-bottom:22px;}
.auth-tab{flex:1;padding:11px 10px;border:0;border-radius:10px;background:transparent;font:inherit;font-weight:600;font-size:.9rem;color:var(--text-2);cursor:pointer;transition:background .18s,color .18s;}
.auth-tab.active{background:#fff;color:var(--navy);box-shadow:0 1px 3px rgba(15,23,42,.10);}
.auth-title{font-size:clamp(1.4rem,3.4vw,1.85rem);line-height:1.2;margin-bottom:6px;}
.auth-sub{color:var(--text-2);font-size:.92rem;margin-bottom:20px;}
.auth-alert{padding:12px 14px;border-radius:12px;font-size:.87rem;line-height:1.45;margin-bottom:16px;}
.auth-alert.err{background:#FEF2F2;color:#B91C1C;border:1px solid #FECACA;}
.auth-alert.ok{background:#F0FDF4;color:#15803D;border:1px solid #BBF7D0;}
.auth-foot{margin-top:18px;text-align:center;font-size:.85rem;color:var(--text-2);}
.auth-foot a{color:var(--red);font-weight:600;}
.auth-note{margin-top:14px;font-size:.8rem;line-height:1.5;color:var(--text-3);text-align:center;}
.book-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:4px;}
.link-btn{border:0;background:none;padding:0;font:inherit;font-size:.85rem;font-weight:600;color:var(--text-2);text-decoration:underline;cursor:pointer;flex-shrink:0;}
.link-btn:hover{color:var(--red);}
.sent-icon{width:52px;height:52px;border-radius:15px;background:#F0FDF4;color:#16A34A;display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.sent-icon svg{width:26px;height:26px;}
.sms-preview{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 15px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem;line-height:1.6;color:var(--navy);white-space:pre-wrap;word-break:break-word;margin:4px 0 20px;}
.sent-actions{display:flex;flex-direction:column;gap:10px;}
/* the booking form keeps its labels visible — they are not placeholders here */
.auth-card .field label{position:static;width:auto;height:auto;clip:auto;clip-path:none;display:block;margin-bottom:7px;font-size:.82rem;font-weight:600;color:var(--text-2);}
.form-success a{color:var(--red);font-weight:600;text-decoration:underline;}
/* customer's own booking history on book.html */
.mine-list{display:flex;flex-direction:column;gap:10px;margin-top:4px;}
.mine-list li{display:grid;grid-template-columns:1fr auto;gap:4px 10px;padding:12px 14px;background:var(--surface);border:1px solid var(--border);border-radius:12px;font-size:.85rem;}
.mine-svc{font-weight:600;color:var(--navy);}
.mine-when{color:var(--text-2);text-align:right;}
.mine-addr{grid-column:1/-1;color:var(--text-3);font-size:.79rem;}
.mine-status{grid-column:2;grid-row:2;justify-self:end;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 8px;border-radius:999px;}
.mine-status.s-new{background:#FEF3C7;color:#B45309;}
.mine-status.s-contacted{background:var(--sky-pale);color:var(--sky-dark);}
.mine-status.s-done{background:#DCFCE7;color:#15803D;}
/* quiet account link in the header pill, left of the red CTA */
.header-login{display:inline-flex;align-items:center;gap:7px;font-size:.88rem;font-weight:600;color:var(--text-2);white-space:nowrap;transition:color .18s;}
.header-login:hover{color:var(--red);}
.header-login svg{width:17px;height:17px;flex-shrink:0;}
@media (max-width:1240px){ .header-login span{display:none;} }

/* ==========================================================================
   SEVEN-SERVICE GRID · QUOTE FORM · PROPERTY MANAGERS
   ========================================================================== */
/* fixed-width cards + centred wrapping, so any short last row sits centred:
   desktop 3-up (nine services tile as 3x3), tablet/phone 2-up */
.services-grid.sc-grid{--sc-gap:clamp(14px,1.8vw,20px);--sc-cols:3;
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sc-gap);max-width:none;}
.services-grid.sc-grid .service-card{
  flex:0 0 calc((100% - (var(--sc-cols) - 1) * var(--sc-gap)) / var(--sc-cols));
  max-width:calc((100% - (var(--sc-cols) - 1) * var(--sc-gap)) / var(--sc-cols));}
.service-card.sc-flat{padding:clamp(22px,2.4vw,28px);display:flex;flex-direction:column;align-items:flex-start;}
.service-card.sc-flat .service-icon{margin-bottom:16px;}
.service-card.sc-flat h3{font-size:1.08rem;margin:0 0 8px;line-height:1.3;}
.service-card.sc-flat p{font-size:.87rem;line-height:1.6;color:var(--text-2);margin:0;}
.sc-tag{display:inline-block;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:3px 9px;border-radius:999px;margin-bottom:10px;}
.sc-tag.t-red{background:var(--red-pale);color:var(--red-dark);}
.sc-tag.t-sky{background:var(--sky-pale);color:var(--sky-dark);}

/* tablet and phone drop to 2-up; a lone last card centres itself */
@media (max-width:900px){
  .services-grid.sc-grid{--sc-cols:2;max-width:640px;margin-left:auto;margin-right:auto;}
}
/* phones: 2-up, the lone seventh card centres itself */
@media (max-width:768px){
  .services-grid.sc-grid{--sc-cols:2;--sc-gap:12px;max-width:none;}
  .service-card.sc-flat{padding:16px 13px;border-radius:var(--r);}
  .service-card.sc-flat .service-icon{width:42px;height:42px;border-radius:11px;margin-bottom:12px;}
  .service-card.sc-flat .service-icon svg{width:20px;height:20px;}
  .service-card.sc-flat .sc-tag{font-size:.6rem;letter-spacing:.04em;padding:3px 8px;margin-bottom:8px;}
  .service-card.sc-flat h3{font-size:.92rem;margin-bottom:6px;line-height:1.25;}
  .service-card.sc-flat p{font-size:.78rem;line-height:1.45;}
}

.quote-card textarea{width:100%;padding:12px 15px;border:2.5px solid var(--navy);border-radius:var(--r);font:inherit;font-size:.95rem;background:#FBFDFF;color:var(--text);resize:vertical;min-height:62px;}
.quote-card textarea:focus{outline:none;border-color:var(--red);}
.quote-card textarea::placeholder{color:var(--text-3);}
.quote-hint{margin-top:11px;font-size:.75rem;line-height:1.5;color:var(--text-3);text-align:center;}

.lead-p{font-size:1.02rem;line-height:1.75;color:var(--text-2);text-align:center;max-width:760px;margin:0 auto;}
.pm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(16px,2vw,22px);}
.pm-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg,20px);padding:clamp(24px,2.6vw,30px);}
.pm-card h3{font-size:1.1rem;margin:14px 0 14px;}
.pm-card .check-list{grid-template-columns:1fr;}

/* ---------- Built-by credit ---------- */
/* A white pill on the dark footer, sized like the one on smartechsolution.ca
   but in TrashGo red instead of that site's blue/purple. */
.footer-credit{flex:0 0 100%;display:flex;justify-content:center;margin-top:18px;}

.built-by{
  /* hugs its text — no stretched box */
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  width:auto;max-width:100%;
  padding:12px 22px;border-radius:999px;
  font-family:Nunito,system-ui,sans-serif;
  font-size:.98rem;font-weight:800;letter-spacing:-.01em;
  color:var(--navy);white-space:nowrap;
  border:2.5px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(100deg,#FF7A85 0%,var(--red) 42%,#C1121F 100%) border-box;
  box-shadow:0 0 0 6px rgba(230,57,70,.10), 0 10px 30px rgba(230,57,70,.22);
  transition:transform .18s ease,box-shadow .18s ease;
}
.built-by:hover{
  transform:translateY(-2px);
  box-shadow:0 0 0 7px rgba(230,57,70,.14), 0 14px 34px rgba(230,57,70,.3);
}
.built-by svg{width:18px;height:18px;fill:var(--red);flex-shrink:0;}
.built-by b{
  font-weight:800;
  background:linear-gradient(95deg,var(--red) 0%,#C1121F 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--red);
}

/* The badge should read as sitting above the floating WhatsApp button, so the
   footer keeps clear space beneath it for the button to float over. */
.footer-bottom{padding-bottom:calc(22px + var(--fab-clear,0px));}

@media (max-width:1024px){ :root{--fab-clear:62px;} }
@media (max-width:768px){
  :root{--fab-clear:92px;}
  .built-by{font-size:.92rem;padding:12px 18px;gap:8px;}
  .built-by svg{width:17px;height:17px;}
}
@media (max-width:360px){
  .built-by{font-size:.84rem;padding:11px 14px;gap:7px;}
}

/* ---------- Privacy policy ---------- */
.policy-hero .lede{max-width:640px;}
.policy-updated{margin-top:14px;font-size:.82rem;color:var(--text-3);}
.policy{max-width:760px;margin-left:auto;margin-right:auto;}
.policy-intro{font-size:1.02rem;line-height:1.8;color:var(--text-2);
  padding-bottom:22px;margin-bottom:8px;border-bottom:1px solid var(--border);}
.policy h2{font-size:clamp(1.15rem,2.2vw,1.42rem);margin:34px 0 12px;letter-spacing:-.02em;}
.policy h2::before{content:"";display:block;width:26px;height:3px;border-radius:3px;
  background:var(--red);margin-bottom:12px;}
.policy p{font-size:.98rem;line-height:1.8;color:var(--text-2);margin-bottom:14px;}
.policy a{color:var(--red);font-weight:600;}
.policy a:hover{text-decoration:underline;}
.policy strong{color:var(--text);font-weight:700;}
.policy-list{list-style:none;margin:0 0 16px;display:grid;gap:11px;}
.policy-list li{position:relative;padding-left:26px;font-size:.98rem;line-height:1.75;color:var(--text-2);}
.policy-list li::before{content:"";position:absolute;left:2px;top:.72em;width:8px;height:8px;
  border-radius:50%;background:var(--sky);}
.policy-contact{margin-top:38px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg,20px);padding:clamp(20px,3vw,28px);text-align:center;}
.policy-contact h3{font-size:1.05rem;margin-bottom:10px;}
.policy-contact p{margin-bottom:4px;font-size:.95rem;}

/* the consent line that sits under the quote button */
.quote-consent{margin-top:12px;font-size:.78rem;line-height:1.55;color:var(--text-3);text-align:center;}
.quote-consent a{color:var(--red);font-weight:600;text-decoration:underline;}
.foot-legal{color:rgba(255,255,255,.78);font-weight:600;}
.foot-legal:hover{color:#fff;text-decoration:underline;}

/* ---------- Service-area city grid (property-managers) ---------- */
.city-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,18px);}
.city-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg,20px);
  padding:clamp(18px,2vw,24px);display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:14px;align-items:center;
  box-shadow:var(--shadow-sm);transition:border-color .18s,transform .18s;}
.city-card:hover{border-color:var(--red);transform:translateY(-2px);}
.city-card .pin{grid-row:1 / span 2;width:42px;height:42px;border-radius:12px;
  background:var(--red-pale);color:var(--red);display:flex;align-items:center;justify-content:center;}
.city-card .pin svg{width:20px;height:20px;}
.city-name{font-weight:700;font-size:1rem;color:var(--navy);line-height:1.25;align-self:end;}
.city-note{font-size:.79rem;color:var(--text-3);line-height:1.4;margin-top:2px;align-self:start;}
.city-foot{margin-top:clamp(20px,2.4vw,28px);text-align:center;font-size:.88rem;color:var(--text-2);}
.city-foot a{color:var(--red);font-weight:600;}
.city-foot a:hover{text-decoration:underline;}
@media (max-width:900px){ .city-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .city-grid{grid-template-columns:1fr;} }