:root{
  --hero:url('../images/hero.jpg');
  --window:url('../images/window.jpg');
  --gutter:url('../images/gutter.jpg');
  --glass:url('../images/glass.jpg');
  --xmas:url('../images/xmas.jpg');
  --g1:url('../images/g1.jpg'); --g2:url('../images/g2.jpg'); --g3:url('../images/g3.jpg');
  --g4:url('../images/g4.jpg'); --g5:url('../images/g5.jpg'); --g6:url('../images/g6.jpg');
  --about:url('../images/about.jpg');
  --screen:url('../images/screen.jpg');
  --interior:url('../images/interior.jpg');
  --skylight:url('../images/skylight.jpg');
  --xmasnight:url('../images/xmas-night.jpg');
  --ba1:url('../images/ba-before.jpg'); --ba2:url('../images/ba-after.jpg');

  --navy:#213B6C;
  --navy-deep:#16294D;
  --ink-dark:#0F1F3D;
  --blue:#057BDD;
  --blue-dark:#0466BA;
  --sky:#29B1EF;
  --sky-tint:#E9F5FD;
  --sky-line:#CDE6F7;
  --ink:#1B2A44;
  --grey:#5C6B82;
  --soft:#F5F9FC;
  --line:#E3EBF3;
  --star:#FBBF24;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body{font-family:'Poppins',system-ui,-apple-system,sans-serif;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;line-height:1.6}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.disp{font-family:'Archivo',sans-serif;font-weight:900;letter-spacing:-.02em;line-height:1.02;text-transform:uppercase}
.eyebrow{color:var(--blue);font-weight:700;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;text-align:center}
.sec{padding:96px 0}
.sec-head{text-align:center;max-width:820px;margin:0 auto 56px}
.sec-head h2{font-size:clamp(2.4rem,6vw,4.2rem);margin:14px 0 0}
/* Two smaller section-heading sizes. These used to be set inline on each h2,
   which beat the mobile rules further down, so headings like "Our Other
   Services" stayed at full size on phones and ran edge to edge. As classes
   they can be stepped down properly. */
.disp.h-sm{font-size:clamp(1.9rem,4.4vw,2.9rem)}
.disp.h-md{font-size:clamp(2rem,5vw,3.2rem)}
@media(max-width:720px){
  .disp.h-sm{font-size:clamp(1.45rem,5.6vw,1.9rem)}
  .disp.h-md{font-size:clamp(1.55rem,6vw,2rem)}
}
.sec-head p{color:var(--grey);margin-top:18px;font-size:1.05rem}

/* ---------- header ---------- */
.hdr{position:fixed;top:16px;left:0;right:0;z-index:200;padding:0 24px}
.hdr-in{max-width:1200px;margin:0 auto;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);
  border-radius:18px;box-shadow:0 8px 30px rgba(15,31,61,.13);display:flex;align-items:center;
  gap:20px;padding:12px 14px 12px 22px;transition:background .3s}
.hdr-in .logo{height:52px;width:auto;flex:none}
.nav{display:flex;align-items:center;gap:26px;margin-left:auto}
.nav a{font-weight:600;font-size:.95rem;color:var(--ink);white-space:nowrap;transition:color .2s}
.nav a:hover{color:var(--blue)}
.hdr-tel{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--ink);white-space:nowrap;
  padding-left:22px;border-left:1px solid var(--line)}
.hdr-tel svg{width:18px;height:18px;stroke:var(--blue)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--blue);color:#fff;
  font-weight:700;border-radius:12px;padding:14px 24px;border:none;cursor:pointer;transition:.2s;font-family:inherit;font-size:1rem}
.btn:hover{background:var(--blue-dark);transform:translateY(-1px)}
.btn-lg{padding:20px 36px;font-size:1.02rem;letter-spacing:.06em;text-transform:uppercase;border-radius:14px}
.btn-ghost{background:#fff;color:var(--blue);border:2px solid var(--blue)}
.btn-ghost:hover{background:var(--sky-tint)}
.hdr .btn{flex:none;padding:13px 22px;font-size:.95rem}
.burger{display:none;background:none;border:none;cursor:pointer;padding:10px;margin-left:auto}
.burger span{display:block;width:24px;height:2px;background:var(--ink);border-radius:2px}
.burger span+span{margin-top:6px}
.mnav{display:none;position:fixed;inset:88px 24px auto;background:#fff;border-radius:18px;z-index:199;
  box-shadow:0 20px 50px rgba(15,31,61,.2);padding:14px}
.mnav.open{display:block}
.mnav a{display:block;padding:14px 16px;font-weight:600;border-radius:10px}
.mnav a:hover{background:var(--soft)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;padding:170px 0 190px;overflow:hidden}
.hero-bg{position:absolute;inset:0;background-image:var(--hero);background-size:cover;background-position:center}
.hero-bg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(15,31,61,.92) 0%,rgba(15,31,61,.74) 45%,rgba(15,31,61,.5) 100%)}
.hero .wrap{position:relative;z-index:2}
.pill{text-decoration:none;transition:background .2s;display:inline-flex;align-items:center;gap:12px;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.24);backdrop-filter:blur(8px);border-radius:999px;
  padding:11px 20px;color:#fff;font-weight:600;font-size:.95rem;margin-bottom:30px}
.pill:hover{background:rgba(255,255,255,.24)}
/* at full size the badge wraps to two lines on a ~390px phone, which breaks
   the pill shape — trim it just enough to stay on one line */
@media(max-width:720px){.pill{font-size:.86rem;padding:9px 16px;gap:9px;margin-bottom:24px}}
.rev-meta .txt{transition:color .2s}
.rev-meta .txt:hover{color:var(--blue)}
.plan .big .save{display:block;font-family:'Poppins',sans-serif;font-weight:600;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin-bottom:4px}
.stars{color:var(--star);letter-spacing:2px;font-size:1rem}
.hero h1{font-family:'Archivo',sans-serif;font-weight:900;letter-spacing:-.035em;line-height:.95;
  font-size:clamp(3.2rem,9.5vw,7rem);color:#fff}
.hero h1 em{display:block;font-style:normal;color:var(--sky)}
.hero p.lede{color:rgba(255,255,255,.9);font-size:clamp(1.05rem,2vw,1.3rem);max-width:640px;margin:32px 0 42px;line-height:1.65}
.badges{position:absolute;left:0;right:0;bottom:104px;z-index:2}
.badges ul{display:flex;flex-wrap:wrap;gap:42px;list-style:none}
.badges li{display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.92);font-weight:500;font-size:1rem}
.badges svg{width:22px;height:22px;stroke:var(--sky);flex:none}

/* ---------- contact strip ---------- */
.strip-sec{background:var(--soft);position:relative}
.strip{display:grid;grid-template-columns:1fr 1fr 1.15fr;background:#fff;border-radius:16px;overflow:hidden;
  box-shadow:0 24px 60px rgba(15,31,61,.16);margin-top:-92px;position:relative;z-index:5}
.strip-cell{padding:40px 30px;text-align:center;border-right:1px solid var(--line)}
.strip-cell svg{width:34px;height:34px;stroke:var(--blue);margin:0 auto 16px;display:block}
.strip-cell .lbl{font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;color:var(--grey);font-weight:600}
.strip-cell .val{font-family:'Archivo',sans-serif;font-weight:800;font-size:1.7rem;margin-top:10px;color:var(--ink-dark)}
.strip-cell a.val{color:var(--blue)}
.strip-map{border-right:none;padding:0;min-height:230px}
.strip-map iframe{width:100%;height:100%;min-height:230px;border:0;display:block}

/* ---------- services ---------- */
.svc-sec{background:linear-gradient(180deg,var(--soft) 0%,#fff 100%)}
.svc{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.svc-card{position:relative;border-radius:16px;overflow:hidden;min-height:470px;display:flex;
  align-items:flex-end;background-size:cover;background-position:center;box-shadow:0 14px 40px rgba(15,31,61,.14);
  transition:transform .3s}
.svc-card:hover{transform:translateY(-6px)}
.svc-card::before{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(11,21,40,.9) 0%,rgba(11,21,40,.45) 40%,rgba(11,21,40,.05) 75%)}
.svc-card .txt{position:relative;padding:30px 26px}
.svc-card h3{font-family:'Poppins',sans-serif;font-weight:700;font-size:1.35rem;color:#fff;line-height:1.25}
.svc-card p{color:rgba(255,255,255,.82);font-size:.95rem;margin-top:8px;line-height:1.5}
.svc-note{text-align:center;color:var(--grey);font-size:.95rem;margin-top:40px}
.svc-note a{color:var(--blue);font-weight:600}

/* ---------- plans ---------- */
.plans-sec{background:var(--soft)}
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;align-items:start}
.plan{background:#fff;border-radius:16px;padding:38px 28px;box-shadow:0 10px 34px rgba(15,31,61,.08);
  position:relative;display:flex;flex-direction:column;height:100%}
.plan.pop{border:2px solid var(--blue);box-shadow:0 20px 50px rgba(5,123,221,.2)}
.pop-tag{position:absolute;top:-15px;left:50%;transform:translateX(-50%);background:var(--blue);color:#fff;
  font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;padding:8px 20px;border-radius:999px;white-space:nowrap}
.plan .tier{color:var(--blue);font-weight:700;font-size:.83rem;letter-spacing:.13em;text-transform:uppercase}
.plan .big{font-family:'Archivo',sans-serif;font-weight:900;font-size:3.3rem;line-height:1;margin-top:14px;color:var(--ink-dark);letter-spacing:-.03em}
.plan .big.word{font-size:2.4rem}
.plan .freq{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);font-weight:600;margin-top:12px}
.plan .blurb{color:var(--grey);font-size:.95rem;margin:22px 0 26px;line-height:1.6}
.plan ul{list-style:none;margin-bottom:30px}
.plan li{display:flex;gap:12px;align-items:flex-start;font-size:.95rem;padding:8px 0;line-height:1.5}
.plan li svg{width:18px;height:18px;flex:none;margin-top:3px}
.plan li.yes svg{stroke:var(--blue)}
.plan li.no{color:#94A3B8;text-decoration:line-through}
.plan li.no svg{stroke:#EF4444}
.plan .btn{width:100%;margin-top:auto}
.plans-note{text-align:center;color:var(--grey);font-size:.92rem;margin-top:42px}

/* ---------- reviews ---------- */
.rev-meta{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;margin:32px 0 56px}
.rev-meta .stars{font-size:1.35rem}
.rev-meta .txt{color:var(--ink);font-weight:600}
.gbtn{display:inline-flex;align-items:center;gap:10px;background:var(--ink-dark);color:#fff;font-weight:600;
  border-radius:999px;padding:13px 26px;transition:.2s}
.gbtn:hover{background:var(--navy)}
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.rev{background:#fff;border:1px solid var(--line);border-radius:16px;padding:34px 30px;
  box-shadow:0 8px 28px rgba(15,31,61,.06);display:flex;flex-direction:column}
.rev .stars{font-size:1.2rem;margin-bottom:20px}
.rev q{quotes:none;color:var(--ink);font-size:1rem;line-height:1.72;flex:1}
.rev .foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border-top:1px solid var(--line);margin-top:28px;padding-top:22px}
.rev .who{font-weight:700}
.rev .tag{background:var(--sky-tint);color:var(--blue);font-weight:600;font-size:.85rem;padding:7px 15px;border-radius:999px}
.rev.ph{border:2px dashed var(--sky-line);background:var(--soft);box-shadow:none;
  align-items:center;justify-content:center;text-align:center;color:var(--grey);min-height:280px}

/* ---------- gallery ---------- */
.work-sec{background:linear-gradient(180deg,#fff 0%,var(--soft) 100%)}
.social{display:flex;justify-content:center;gap:14px;margin:26px 0 52px}
.social a{width:52px;height:52px;border-radius:50%;background:var(--ink-dark);display:flex;align-items:center;
  justify-content:center;transition:.2s}
.social a:hover{background:var(--blue);transform:translateY(-3px)}
.social svg{width:22px;height:22px;stroke:#fff;fill:none}
.grid6{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.grid6 div{aspect-ratio:3/4;border-radius:14px;background-size:cover;background-position:center;
  box-shadow:0 10px 30px rgba(15,31,61,.12)}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.about h2{font-family:'Archivo',sans-serif;font-weight:800;font-size:clamp(2rem,4vw,2.9rem);
  line-height:1.12;letter-spacing:-.02em;margin:14px 0 26px}
.about .eyebrow{text-align:left}
.about p{color:var(--grey);margin-bottom:20px;line-height:1.8}
.about ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px 26px;margin:32px 0 36px}
.about li{display:flex;gap:11px;align-items:flex-start;font-size:.97rem}
.about li svg{width:18px;height:18px;stroke:var(--blue);flex:none;margin-top:4px}
.about-img{border-radius:18px;overflow:hidden;box-shadow:0 24px 60px rgba(15,31,61,.2);
  aspect-ratio:4/3;background-image:var(--about);background-size:cover;background-position:center}

/* ---------- quote ---------- */
.quote-sec{background:var(--ink-dark);color:#fff;padding:100px 0}
.quote-sec .eyebrow{color:var(--sky)}
.quote-sec h2{font-family:'Archivo',sans-serif;font-weight:800;font-size:clamp(2.3rem,5vw,3.6rem);
  text-align:center;margin:14px 0 22px;letter-spacing:-.02em}
.quote-sec .sub{text-align:center;color:rgba(255,255,255,.72);max-width:640px;margin:0 auto 34px;font-size:1.08rem;line-height:1.7}
.qcontact{display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap;margin-bottom:56px}
.qcontact a{display:flex;align-items:center;gap:10px;color:#fff;font-weight:600}
.qcontact svg{width:20px;height:20px;stroke:var(--sky)}
.qcontact .div{color:rgba(255,255,255,.3)}
.form-card{background:#EDEFF2;border-radius:20px;padding:34px;max-width:820px;margin:0 auto}
.form-card iframe{width:100%;min-height:1180px;border:0;border-radius:14px;background:#fff;display:block}
.form-fallback{text-align:center;padding:30px 10px 4px}
.form-fallback p{color:var(--grey);font-size:.93rem;margin-top:14px}

/* ---------- faq ---------- */
.faq-sec{background:var(--soft)}
.faq{max-width:840px;margin:0 auto}
.faq details{background:#fff;border-radius:14px;margin-bottom:16px;box-shadow:0 6px 20px rgba(15,31,61,.06);overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:26px 30px;font-weight:600;font-size:1.1rem;
  display:flex;align-items:center;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';width:26px;height:26px;flex:none;border-radius:50%;border:1.5px solid var(--sky-line);
  background:no-repeat center/11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23057BDD' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  transition:transform .25s}
.faq details[open] summary::after{transform:rotate(180deg)}
.faq .ans{padding:0 30px 28px;color:var(--grey);line-height:1.75}

/* ---------- footer ---------- */
footer{background:var(--ink-dark);color:rgba(255,255,255,.72);padding:84px 0 34px}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:52px}
/* the logo artwork is drawn for a light background — its outlines, roofs and
   "property services" line are the same navy as this footer, so they vanish
   against it. sitting it on a white plate keeps the mark legible and crisp. */
.flogo{display:inline-block;background:#fff;padding:14px 18px;border-radius:14px;
  margin-bottom:22px;line-height:0;box-shadow:0 6px 20px rgba(0,0,0,.22)}
footer .logo{height:76px;width:auto;display:block}
footer h4{color:#fff;font-weight:700;font-size:.85rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:24px}
footer ul{list-style:none}
footer li{margin-bottom:13px;font-size:.96rem}
footer a:hover{color:var(--sky)}
.fcontact{margin-top:22px}
.fcontact a{display:flex;align-items:center;gap:11px;margin-bottom:12px;font-size:.98rem}
.fcontact svg{width:18px;height:18px;stroke:var(--sky);flex:none}
.fsocial{display:flex;gap:12px;margin-top:24px}
.fsocial a{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;
  align-items:center;justify-content:center;transition:.2s}
.fsocial a:hover{background:var(--blue)}
.fsocial svg{width:19px;height:19px;stroke:#fff;fill:none}
.fbot{border-top:1px solid rgba(255,255,255,.1);margin-top:58px;padding-top:30px;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:.88rem;color:rgba(255,255,255,.5)}
.callbar{display:none}

/* ---------- responsive ---------- */
@media(max-width:1080px){
  .nav,.hdr-tel{display:none}
  .burger{display:block}
  .hdr .btn{display:none}
  .svc,.plans{grid-template-columns:repeat(2,1fr)}
  .grid6{grid-template-columns:repeat(3,1fr)}
  .strip{grid-template-columns:1fr 1fr}
  .strip-map{grid-column:1/-1;border-top:1px solid var(--line)}
  .about{grid-template-columns:1fr;gap:44px}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .sec{padding:70px 0}
  .hero{padding:150px 0 210px;min-height:auto}
  .badges{bottom:70px}
  .badges ul{gap:16px 26px}
  .badges li{font-size:.88rem;width:calc(50% - 13px)}
  .svc,.plans,.revs{grid-template-columns:1fr}
  .svc-card{min-height:340px}
  .grid6{grid-template-columns:repeat(2,1fr)}
  .strip{grid-template-columns:1fr;margin-top:-70px}
  .strip-cell{border-right:none;border-bottom:1px solid var(--line);padding:32px 24px}
  .about ul{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr;gap:40px}
  .form-card{padding:16px}
  .form-card iframe{min-height:1320px}
  body{padding-bottom:72px}
  .callbar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:250;
    box-shadow:0 -6px 20px rgba(15,31,61,.16)}
  .callbar a{flex:1;padding:19px 8px;text-align:center;font-weight:700;color:#fff;background:var(--blue);font-size:.98rem}
  .callbar a+a{background:var(--ink-dark)}
}

/* ---------- dropdown nav ---------- */
.nav .has-sub{position:relative}
.nav .has-sub>a{display:inline-flex;align-items:center;gap:5px;cursor:pointer}
.nav .has-sub>a svg{width:11px;height:11px;stroke:currentColor;stroke-width:3;fill:none;transition:transform .2s}
.nav .has-sub:hover>a svg{transform:rotate(180deg)}
.sub{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);
  min-width:262px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px;
  box-shadow:0 20px 50px rgba(15,31,61,.16);opacity:0;visibility:hidden;transition:opacity .18s,transform .18s;
  z-index:250}
.sub::before{content:'';position:absolute;top:-14px;left:0;right:0;height:14px}
.nav .has-sub:hover .sub{opacity:1;visibility:visible;transform:translateX(-50%) translateY(2px)}
.sub a{display:block;padding:10px 14px;border-radius:9px;font-size:.92rem;font-weight:500;color:var(--ink)}
.sub a:hover{background:var(--sky-tint);color:var(--blue)}
.sub.two{min-width:430px;display:grid;grid-template-columns:1fr 1fr;gap:0 4px}

/* mobile nav groups */
.mnav .grp{margin:4px 0 8px}
.mnav .grp>span{display:block;padding:12px 16px 6px;font-size:.72rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey)}
.mnav .grp a{padding-left:28px;font-weight:500;font-size:.94rem}

/* ---------- inner-page hero ---------- */
.hero.inner{min-height:auto;padding:190px 0 200px}
.hero.inner h1{font-size:clamp(2.3rem,5.2vw,4rem)}
.hero.inner .lede{margin:26px 0 38px}

/* ---------- prose / detail blocks ---------- */
.prose{max-width:820px;margin:0 auto}
.prose h2{font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:-.02em;color:var(--ink-dark);
  font-size:clamp(1.6rem,3.2vw,2.2rem);margin:0 0 18px;line-height:1.15}
.prose h3{font-family:'Poppins',sans-serif;font-weight:700;font-size:1.16rem;color:var(--ink-dark);margin:32px 0 10px}
.prose p{color:var(--grey);line-height:1.85;margin-bottom:18px}
.prose ul{list-style:none;margin:20px 0 26px}
.prose ul li{position:relative;padding-left:32px;margin-bottom:13px;color:var(--ink);line-height:1.6}
.prose ul li svg{position:absolute;left:0;top:3px;width:20px;height:20px}
.prose a{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:3px}

.two-col{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.two-col .pic{border-radius:18px;aspect-ratio:1/1;background-size:cover;background-position:center;
  box-shadow:0 24px 60px rgba(15,31,61,.2)}

/* ---------- video embeds ---------- */
/* These are YouTube Shorts, so the frames are vertical 9:16. Three full-width
   9:16 tiles would each be ~700px tall on a laptop, so the row is capped at
   900px to keep every video roughly phone-sized. */
.vids{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:900px;margin:0 auto}
.vid{margin:0}
.vid-frame{position:relative;aspect-ratio:9/16;border-radius:16px;overflow:hidden;
  background:#0B1B33;box-shadow:0 14px 38px rgba(15,31,61,.18)}
.vid-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.vids-more{text-align:center;margin-top:26px}
.vids-more a{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:3px}
/* one per row on phones, at natural Shorts proportions */
@media(max-width:720px){.vids{grid-template-columns:1fr;max-width:330px;gap:26px}}

/* ---------- link card grids ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cards.c4{grid-template-columns:repeat(4,1fr)}
.lcard{display:block;background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 24px;
  transition:transform .22s,box-shadow .22s,border-color .22s}
.lcard:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(15,31,61,.11);border-color:var(--sky-line)}
.lcard h3{font-family:'Poppins',sans-serif;font-weight:700;font-size:1.1rem;color:var(--ink-dark);margin-bottom:9px}
.lcard p{font-size:.93rem;color:var(--grey);line-height:1.6}
.lcard .more{display:inline-flex;align-items:center;gap:6px;margin-top:15px;font-weight:600;
  font-size:.9rem;color:var(--blue)}
.lcard .more svg{width:15px;height:15px;stroke:currentColor;stroke-width:2.5;fill:none}

.chips{display:flex;flex-wrap:wrap;gap:11px;justify-content:center;margin-top:34px}
.chips a{padding:11px 20px;border-radius:999px;background:#fff;border:1px solid var(--line);
  font-weight:600;font-size:.93rem;color:var(--ink);transition:all .2s}
.chips a:hover{background:var(--blue);border-color:var(--blue);color:#fff}

/* ---------- local info band ---------- */
.band{background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:14px}
.fact{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px}
.fact h4{font-family:'Poppins',sans-serif;font-weight:700;font-size:1rem;color:var(--ink-dark);margin-bottom:8px}
.fact p{font-size:.93rem;color:var(--grey);line-height:1.65}

@media(max-width:900px){
  .two-col{grid-template-columns:1fr;gap:38px}
  .cards,.cards.c4{grid-template-columns:repeat(2,1fr)}
  .facts{grid-template-columns:1fr}
  .hero.inner{padding:150px 0 190px}
}
@media(max-width:560px){
  .cards,.cards.c4{grid-template-columns:1fr}
}

/* 6-up service grid (3 across) */
.svc.six{grid-template-columns:repeat(3,1fr)}
.svc.six .svc-card{min-height:400px}
@media(max-width:900px){.svc.six{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.svc.six{grid-template-columns:1fr}}

/* anchor targets clear the fixed header */
html{scroll-behavior:smooth}
section[id],footer[id]{scroll-margin-top:112px}
@media(max-width:900px){section[id],footer[id]{scroll-margin-top:96px}}

/* mobile menu is long now — let it scroll */
.mnav{max-height:calc(100vh - 150px);overflow-y:auto;-webkit-overflow-scrolling:touch}

/* before / after pair */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
.ba figure{margin:0;position:relative}
.ba .shot{aspect-ratio:4/3;border-radius:16px;background-size:cover;background-position:center;
  border:1px solid var(--line);box-shadow:0 8px 26px rgba(15,31,61,.10)}
.ba figcaption{position:absolute;top:12px;left:12px;background:rgba(15,31,61,.86);color:#fff;
  font-family:Poppins,sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;padding:6px 12px;border-radius:999px}
@media(max-width:640px){.ba{grid-template-columns:1fr;gap:14px}}

/* ---------- draggable before / after comparison ---------- */
.cmp-hint{text-align:center;color:var(--grey);font-size:.95rem;margin-top:34px}
.cmp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:18px}
.cmp{margin:0}
.cmp-media{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;
  border:1px solid var(--line);box-shadow:0 8px 26px rgba(15,31,61,.10);background:var(--soft);
  cursor:ew-resize;touch-action:pan-y}
.cmp-media.is-dragging{cursor:grabbing}
.cmp-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  user-select:none;-webkit-user-drag:none;pointer-events:none}
/* clip (rather than resize) the top image so it never squashes */
.cmp-media .shot-before{clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0)}
.cmp-tag{position:absolute;top:12px;background:rgba(15,31,61,.86);color:#fff;
  font-family:Poppins,sans-serif;font-size:.68rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;padding:5px 11px;border-radius:999px;pointer-events:none}
.cmp-tag.is-before{left:12px}
.cmp-tag.is-after{right:12px}
/* keyboard / screen-reader control only — pointer dragging is handled on
   .cmp-media so a finger can grab the handle instead of just tapping to jump */
.cmp-range{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;
  opacity:0;background:transparent;pointer-events:none;
  -webkit-appearance:none;appearance:none}
.cmp-handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:3px;margin-left:-1.5px;
  background:#fff;box-shadow:0 0 0 1px rgba(15,31,61,.28);pointer-events:none}
.cmp-handle::after{content:'';position:absolute;top:50%;left:50%;width:44px;height:44px;
  transform:translate(-50%,-50%);border-radius:50%;background:#fff center/20px 20px no-repeat;
  box-shadow:0 4px 14px rgba(15,31,61,.38);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23213B6C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6 3 12l6 6'/%3E%3Cpath d='m15 6 6 6-6 6'/%3E%3C/svg%3E")}
.cmp-range:focus-visible+.cmp-handle::after{box-shadow:0 0 0 4px var(--blue),0 4px 14px rgba(15,31,61,.38)}
.cmp figcaption{margin-top:12px;text-align:center;color:var(--grey);font-size:.93rem}
@media(max-width:980px){.cmp-grid{grid-template-columns:repeat(2,1fr);gap:18px}}
@media(max-width:640px){.cmp-grid{grid-template-columns:1fr;gap:20px}}

/* image background utilities (must live in the stylesheet so relative
   urls resolve against css/, not against the page's folder) */
.bg-window{background-image:var(--window)}
.bg-screen{background-image:var(--screen)}
.bg-interior{background-image:var(--interior)}
.bg-skylight{background-image:var(--skylight)}
.bg-xmasnight{background-image:var(--xmasnight)}
.bg-gutter{background-image:var(--gutter)}
.bg-glass{background-image:var(--glass)}
.bg-xmas{background-image:var(--xmas)}
.bg-g1{background-image:var(--g1)}
.bg-g2{background-image:var(--g2)}
.bg-g3{background-image:var(--g3)}
.bg-g4{background-image:var(--g4)}
.bg-g5{background-image:var(--g5)}
.bg-g6{background-image:var(--g6)}
.bg-ba1{background-image:var(--ba1)}
.bg-ba2{background-image:var(--ba2)}
.svc-card.nopic{background:linear-gradient(150deg,var(--navy) 0%,var(--blue) 55%,var(--sky) 100%)}

/* ---------- per-service hero images ---------- */
.hero-bg.h-window{background-image:url('../images/hero-window.jpg')}
.hero-bg.h-screen{background-image:url('../images/hero-screen.jpg')}
.hero-bg.h-interior{background-image:url('../images/hero-interior.jpg')}
.hero-bg.h-gutter{background-image:url('../images/hero-gutter.jpg')}
.hero-bg.h-glass {background-image:url('../images/hero-glass.jpg')}
.hero-bg.h-xmas  {background-image:url('../images/hero-xmas.jpg')}
.hero-bg.h-skylight{background-image:url('../images/hero-skylight.jpg')}

/* ---------- 4 step process ---------- */
.proc-sec{background:#fff}
.proc{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:44px}
.proc figure{margin:0}
.proc .ph{aspect-ratio:3/4;border-radius:16px;background-size:cover;background-position:center;
  box-shadow:0 14px 38px rgba(15,31,61,.16)}
.proc figcaption{display:flex;align-items:baseline;gap:10px;margin-top:18px;
  font-family:'Archivo',sans-serif;font-weight:800;font-size:1.12rem;color:var(--ink-dark);letter-spacing:-.01em}
.proc figcaption span{font-size:1.5rem;color:var(--blue);line-height:1}
.proc .p1 .ph{background-image:url('../images/proc1.jpg')}
.proc .p2 .ph{background-image:url('../images/proc2.jpg')}
.proc .p3 .ph{background-image:url('../images/proc3.jpg')}
.proc .p4 .ph{background-image:url('../images/proc4.jpg')}
@media(max-width:900px){.proc{grid-template-columns:repeat(2,1fr);gap:18px}}
@media(max-width:460px){.proc{grid-template-columns:1fr}}

/* ---------- about page ---------- */
.exp{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:44px}
.exp article{background:#fff;border:1px solid var(--line);border-radius:18px;padding:34px 30px;
  box-shadow:0 10px 30px rgba(15,31,61,.06)}
.exp .ic{width:52px;height:52px;border-radius:14px;background:var(--sky-tint);display:flex;
  align-items:center;justify-content:center;margin-bottom:20px}
.exp .ic svg{width:25px;height:25px;stroke:var(--blue);fill:none;stroke-width:2}
.exp h3{font-family:'Archivo',sans-serif;font-weight:800;font-size:1.2rem;color:var(--ink-dark);
  margin-bottom:12px;letter-spacing:-.01em}
.exp p{color:var(--grey);font-size:.97rem;line-height:1.8}
@media(max-width:900px){.exp{grid-template-columns:1fr}}
.prose p{color:var(--grey);line-height:1.85;margin-bottom:20px;font-size:1.04rem}
.promise{background:var(--sky-tint);border-left:4px solid var(--blue);border-radius:0 16px 16px 0;
  padding:30px 34px;margin-top:44px}
.promise p{margin-bottom:0;color:var(--ink);line-height:1.85}
/* the note sits inside a prose section, so its heading is scaled up to catch
   the eye like a section title rather than a sub-point */
.promise h3{font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:-.02em;
  color:var(--ink-dark);font-size:clamp(1.45rem,2.9vw,1.9rem);line-height:1.15;margin:0 0 14px}

/* ---------- Christmas page: festive treatment ---------- */
.xmas{--evergreen:#0B3B2E;--holly:#14543F;--berry:#C0282D;--gold:#E5B045;--warm:#FFF4DC}
.xmas .hero::after{background:linear-gradient(100deg,rgba(6,32,25,.88) 0%,rgba(6,32,25,.66) 52%,rgba(11,59,46,.42) 100%)}
.xmas .hero h1 em{color:var(--gold)}
.xmas .badges{background:rgba(6,32,25,.55)}

/* string of bulbs that hangs under the header */
.lights{position:absolute;top:0;left:0;right:0;height:26px;overflow:hidden;z-index:2}
.lights::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:rgba(0,0,0,.35)}
.lights i{position:absolute;top:9px;width:11px;height:15px;border-radius:0 0 50% 50%/0 0 60% 60%;
  display:block;animation:twinkle 3.4s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:1}50%{opacity:.45}}

/* early-bird offer + countdown */
.offer-sec{background:var(--evergreen);color:#fff;padding:74px 0;position:relative;overflow:hidden}
.offer-sec::before{content:'';position:absolute;inset:0;opacity:.5;
  background:radial-gradient(circle at 12% 18%,rgba(229,176,69,.22),transparent 42%),
             radial-gradient(circle at 88% 78%,rgba(192,40,45,.20),transparent 46%)}
.offer-in{position:relative;text-align:center;max-width:860px;margin:0 auto}
.offer-tag{display:inline-flex;align-items:center;gap:9px;background:var(--berry);color:#fff;
  font-family:'Archivo',sans-serif;font-weight:800;font-size:.78rem;letter-spacing:.12em;
  text-transform:uppercase;padding:9px 20px;border-radius:999px}
.offer-in h2{font-family:'Archivo',sans-serif;font-weight:900;letter-spacing:-.02em;line-height:1.04;
  font-size:clamp(2.2rem,5.6vw,3.6rem);margin:22px 0 0}
.offer-in h2 span{color:var(--gold)}
.offer-in .offer-sub{color:rgba(255,255,255,.8);font-size:1.06rem;line-height:1.75;margin-top:18px}
.cdown{display:flex;justify-content:center;gap:14px;margin:38px 0 34px;flex-wrap:wrap}
.cdown div{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);border-radius:14px;
  padding:16px 10px;min-width:96px;backdrop-filter:blur(4px)}
.cdown b{display:block;font-family:'Archivo',sans-serif;font-weight:900;font-size:2.5rem;
  line-height:1;color:var(--gold);font-variant-numeric:tabular-nums}
.cdown small{display:block;margin-top:8px;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.68)}
.offer-sec .btn{background:var(--berry)}
.offer-sec .btn:hover{background:#a81f24}
.offer-fine{margin-top:20px;font-size:.85rem;color:rgba(255,255,255,.6)}
@media(max-width:560px){.cdown div{min-width:70px;padding:13px 6px}.cdown b{font-size:1.8rem}}

/* six-card install process */
.steps6{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:46px}
.steps6 article{background:#fff;border:1px solid var(--line);border-radius:18px;padding:32px 28px;
  position:relative;box-shadow:0 10px 30px rgba(15,31,61,.06)}
.steps6 .n{font-family:'Archivo',sans-serif;font-weight:900;font-size:.95rem;color:#fff;
  width:40px;height:40px;border-radius:50%;background:var(--holly);display:flex;
  align-items:center;justify-content:center;margin-bottom:20px}
.steps6 article:nth-child(even) .n{background:var(--berry)}
.steps6 h3{font-family:'Archivo',sans-serif;font-weight:800;font-size:1.14rem;color:var(--ink-dark);
  margin-bottom:11px;letter-spacing:-.01em}
.steps6 p{color:var(--grey);font-size:.96rem;line-height:1.78}
@media(max-width:980px){.steps6{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.steps6{grid-template-columns:1fr}}

/* badges bar joins the green band below it on the Christmas page */
.xmas .badges{bottom:0;background:var(--evergreen);padding:18px 0;border-top:1px solid rgba(255,255,255,.07)}
.xmas .hero{padding-bottom:120px}
.xmas .offer-sec{padding-top:86px}

/* falling snow over the hero */
.snow{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.snow i{position:absolute;top:-12px;border-radius:50%;background:#fff;opacity:.75;
  animation:fall linear infinite}
@keyframes fall{
  0%{transform:translate3d(0,-12px,0) rotate(0)}
  100%{transform:translate3d(var(--dx,14px),105vh,0) rotate(360deg)}
}
@media(prefers-reduced-motion:reduce){
  .snow{display:none}
  .lights i{animation:none}
}

/* limited-spots line */
.spots{display:inline-block;margin:0 0 30px;
  background:rgba(0,0,0,.26);border:1px solid rgba(229,176,69,.4);border-radius:999px;
  padding:12px 22px;color:rgba(255,255,255,.92);font-size:.97rem}
.spots b{color:var(--gold);font-weight:800}
.spots .dot{display:inline-block;vertical-align:middle;margin-right:9px;position:relative;top:-1px;width:9px;height:9px;border-radius:50%;background:#48D18A;
  box-shadow:0 0 0 0 rgba(72,209,138,.65);animation:pulse 2.2s ease-out infinite}
@keyframes pulse{70%{box-shadow:0 0 0 11px rgba(72,209,138,0)}100%{box-shadow:0 0 0 0 rgba(72,209,138,0)}}
@media(max-width:560px){.spots{font-size:.88rem;padding:11px 16px}}

/* reviews page: masonry-ish grid that takes any number of reviews */
.revs.all{grid-template-columns:repeat(3,1fr);align-items:start}
.revs.all .rev{height:auto}
@media(max-width:980px){.revs.all{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.revs.all{grid-template-columns:1fr}}
.quote-sec .qsub{text-align:center;color:rgba(255,255,255,.72);max-width:640px;margin:0 auto 34px;font-size:1.08rem;line-height:1.7}

.offer-plus{display:flex;align-items:center;justify-content:center;gap:12px;margin:18px 0 0;
  font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:-.01em;color:#fff;
  font-size:clamp(1.15rem,2.8vw,1.7rem)}
.offer-plus span{display:flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:50%;background:var(--berry);color:#fff;font-size:1.25rem;line-height:1;flex:none}

/* ============================================================
   HOVER / LIFT STATES
   Applied only where a pointer actually exists, so touch
   devices never get stuck in a hover state after a tap.
   ============================================================ */
.plan,.rev,.proc figure .ph,.proc figure,.steps6 article,.exp article{
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}

@media(hover:hover) and (pointer:fine){
  .plan:hover{transform:translateY(-6px);border-color:var(--blue);
    box-shadow:0 22px 52px rgba(5,123,221,.22)}
  .plan:not(.pop){border:1px solid transparent}
  .plan.pop:hover{box-shadow:0 26px 60px rgba(5,123,221,.3)}

  .rev:hover{transform:translateY(-6px);border-color:var(--blue);
    box-shadow:0 22px 52px rgba(5,123,221,.18)}

  .proc figure:hover{transform:translateY(-6px)}
  .proc figure:hover .ph{box-shadow:0 22px 52px rgba(5,123,221,.3);
    outline:2px solid var(--blue);outline-offset:3px}
  .proc figure:hover figcaption{color:var(--blue)}

  .steps6 article:hover{transform:translateY(-6px);border-color:var(--blue);
    box-shadow:0 22px 52px rgba(5,123,221,.18)}

  .exp article:hover{transform:translateY(-6px);border-color:var(--blue);
    box-shadow:0 22px 52px rgba(5,123,221,.18)}
}
/* keyboard users get the same affordance */
.plan:focus-within,.rev:focus-within,.steps6 article:focus-within{
  border-color:var(--blue);box-shadow:0 22px 52px rgba(5,123,221,.18)}
@media(prefers-reduced-motion:reduce){
  .plan,.rev,.proc figure,.steps6 article,.exp article{transition:none}
  .plan:hover,.rev:hover,.proc figure:hover,.steps6 article:hover,.exp article:hover{transform:none}
}

/* ============================================================
   PHONE LAYOUT PASS
   Desktop rules above are untouched; everything here is
   scoped to narrow viewports only.
   ============================================================ */
@media(max-width:720px){
  /* type scale — the old clamp() floors were desktop-sized */
  .hero h1{font-size:clamp(2.3rem,9vw,3.3rem);line-height:1.02;letter-spacing:-.03em}
  .hero p.lede{font-size:1rem;line-height:1.6;margin:20px 0 30px}
  .sec-head h2,.disp{font-size:clamp(1.85rem,7.4vw,2.6rem);line-height:1.06}
  .sec-head{margin-bottom:38px}
  .sec-head p{font-size:.98rem;margin-top:14px}
  .sec{padding:56px 0}
  .wrap{padding-left:20px;padding-right:20px}

  /* hero: shorter, and the badges sit in a tidy 2-up block */
  /* bottom padding reserves room for the 2x2 badge block below the CTA */
  .hero{padding:120px 0 190px}
  .hero.inner{padding:120px 0 180px}

  /* the hero art is a 1920x860 landscape shot sitting in a tall phone-shaped
     box, so `cover` only ever shows a narrow vertical slice of it. centred,
     that slice misses whoever is working in the photo. these nudge the slice
     onto the subject instead. */
  .hero-bg.h-screen{background-position:85% center}
  .hero-bg.h-interior{background-position:18% center}
  .hero-bg.h-window{background-position:60% center}
  .badges{bottom:54px}
  .badges ul{gap:11px 16px}
  .badges li{font-size:.82rem;width:calc(50% - 8px);gap:8px;align-items:flex-start}
  .badges svg{width:17px;height:17px}
  .hero .btn.btn-lg{width:100%;justify-content:center}

  /* contact strip: stop the map collapsing to a tall blank box */
  .strip{margin-top:-52px}
  .strip-cell{padding:24px 20px}
  .strip-cell .val{font-size:1.35rem}
  .strip-cell svg{width:27px;height:27px;margin-bottom:11px}
  .strip-map,.strip-map iframe{min-height:200px;height:200px}

  /* cards */
  .svc-card{min-height:260px}
  .svc-card h3{font-size:1.28rem}
  .plan{padding:28px 22px}
  .rev{padding:26px 22px}
  .rev q{font-size:.97rem;line-height:1.68}
  .two-col{gap:28px}
  .two-col .pic{aspect-ratio:4/3}

  /* christmas page */
  .offer-sec{padding:52px 0}
  .offer-in h2{font-size:clamp(1.9rem,8vw,2.6rem)}
  .offer-plus{font-size:1.05rem;gap:9px}
  .offer-plus span{width:28px;height:28px;font-size:1.05rem}
  .offer-in .offer-sub{font-size:.96rem;margin-top:14px}
  .cdown{gap:9px;margin:26px 0 24px}
  .steps6 article{padding:26px 22px}
  .proc{gap:16px}
  .proc figcaption{font-size:1rem;margin-top:13px}
  .xmas .hero{padding-bottom:112px}

  /* forms and footer */
  .quote-sec h2{font-size:clamp(1.85rem,7.4vw,2.6rem)}
  .qcontact{flex-direction:column;gap:12px}
  .qcontact .div{display:none}
  .promise{padding:24px 22px}
}

@media(max-width:420px){
  .hero h1{font-size:2.15rem}
  .sec-head h2,.disp{font-size:1.7rem}
  .cdown div{min-width:0;flex:1;padding:12px 4px}
  .cdown b{font-size:1.55rem}
  .cdown small{font-size:.62rem;letter-spacing:.1em}
  .strip-cell .val{font-size:1.2rem}
}

/* never let a photo or embed push the page sideways */
img,iframe,video{max-width:100%}

/* scarcity pill: keep it readable when it has to wrap */
@media(max-width:720px){
  .spots{display:block;text-align:left;border-radius:16px;
    padding:14px 18px;line-height:1.6;max-width:100%}
  .offer-sec .btn.btn-lg{width:100%;justify-content:center}
  .offer-fine{font-size:.8rem;line-height:1.6}
}