/* ══════════════════════════════════════════════════════════════
   Quality Safe & Lock — homepage, rebuilt 1:1 from the HP-XX
   section mockups.

   SCALE SYSTEM
   Each mockup has its own canvas width, so every section sets
   --cw to that width and derives --px = one mockup pixel:
       --px: min(1px, calc(100vw / <canvas width>))
   Every length in a section is then calc(var(--px) * N) where N
   is the measurement taken off the mockup. Below the canvas
   width the whole section scales down as one rigid unit; above
   it, it caps at 1:1 and centres.

   TYPE (calibrated against the mockups)
   · display  Anton — cap height = 0.865em, horizontally
              compressed with scaleX(--sx) to match the mockups'
              narrower face
   · label    Roboto Condensed 700 — cap height ≈ 0.71em
   · body     Roboto 400

   PALETTE (sampled)
   navy #001231 · deep #000E22 · gold #D4A239 / #E5A93B
   ══════════════════════════════════════════════════════════════ */

.qsl-sec{
  --navy:#001231;
  --deep:#000E22;
  --gold:#D4A239;
  --gold-br:#E5A93B;
  --grey:#5F6062;
  --sx:.83;
  /* one mockup pixel — the section always reproduces the mockup's
     proportions exactly, at whatever width the viewport gives it */
  /* The documented cap, which had never actually been implemented: without
     min(1px, …) every section scaled up without limit past its canvas width,
     so a 1920 display rendered the page 12–37% oversized and a 2560 one up to
     83%. Worse, the canvases differ per section (1400–1717), so the sections
     grew by DIFFERENT amounts and stopped matching each other. */
  --px:min(1px, calc(100vw / var(--cw)));
  /* the composition's own width, and the slack either side of it */
  --frame:calc(var(--px) * var(--cw));
  --slack:max(0px, calc((100vw - var(--frame)) / 2));
  font-family:'Roboto','Helvetica Neue',Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  position:relative;
}
.qsl-sec *,
.qsl-sec *::before,
.qsl-sec *::after{box-sizing:border-box}

/* Anton is drawn narrower in the mockups than the real face, so
   every display line is compressed on its own axis. */
.qsl-display{
  font-family:'Anton','Arial Narrow',sans-serif;
  font-weight:400;
  line-height:1;
  text-transform:uppercase;
}
.qsl-display > span{
  display:block; white-space:nowrap;
  transform:scaleX(var(--sx));
  transform-origin:left center;
}
.qsl-display.is-centred > span{transform-origin:center}

.qsl-label{
  font-family:'Roboto Condensed','Arial Narrow',sans-serif;
  font-weight:700;
  line-height:1;
  text-transform:uppercase;
}

.qsl-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}


/* ══════════════════════════════════════════════════════════════
   HP-04 — Commercial Security feature  (mockup 1716×917)
   RE-CUT to a 1536 canvas so this section scales with the rest of
   the page instead of ~10% smaller. The 180 units came entirely out
   of the photo column (860 -> 680): the photograph is an
   object-fit:cover crop, so a narrower column re-crops it rather
   than distorting it, and every type, grid and button measurement
   stays exactly as drawn. photo 0–680 · navy panel 681–1536
   ══════════════════════════════════════════════════════════════ */
.hp04{
  --cw:1536;
  display:grid;
  grid-template-columns:calc(var(--px) * 680) 1fr;
  background:var(--deep);
  color:#fff;
  overflow:hidden;
}

.hp04__media{position:relative;min-height:calc(var(--px) * 917)}
.hp04__media img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block;
}
/* the mockup's photo dissolves into the panel along its right edge */
.hp04__media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to right,
    rgba(0,14,34,0) 62%, rgba(0,14,34,.55) 86%, var(--deep) 100%);
}

.hp04__panel{
  padding:calc(var(--px) * 79) calc(var(--px) * 75) calc(var(--px) * 39) 0;
}
.hp04__inner{width:calc(var(--px) * 780)}

.hp04__eyebrow{
  color:var(--gold-br);
  font-size:calc(var(--px) * 27);
  letter-spacing:.06em;
}
.hp04__eyebrow-rule{
  width:calc(var(--px) * 65);
  height:calc(var(--px) * 3);
  margin:calc(var(--px) * 17) 0 0;
  background:var(--gold-br);
  border:0;
}

.hp04__title{
  margin:calc(var(--px) * 20) 0 0;
  font-size:calc(var(--px) * 100);      /* → 88px cap height */
  color:#fff;
  --sx:.837;
}
.hp04__title > span + span{margin-top:calc(var(--px) * 4)}

.hp04__lede{
  margin:calc(var(--px) * 11) 0 0;
  font-size:calc(var(--px) * 24);
  line-height:calc(var(--px) * 37);
  color:rgba(255,255,255,.9);
}

.hp04__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin:calc(var(--px) * 8) calc(var(--px) * -6) 0;
}
.hp04__cell{
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
  padding:calc(var(--px) * 16) calc(var(--px) * 10) calc(var(--px) * 9);
  border-right:calc(var(--px) * 1) solid rgba(255,255,255,.13);
}
.hp04__cell:nth-child(3n){border-right:0}
.hp04__cell:nth-child(n+4){border-top:calc(var(--px) * 1) solid rgba(255,255,255,.13)}
.hp04__cell svg{
  width:auto;
  height:calc(var(--px) * 69);
  color:var(--gold-br);
  display:block;
}
.hp04__cell span{
  margin-top:calc(var(--px) * 17);
  font-family:'Roboto Condensed','Arial Narrow',sans-serif;
  font-weight:700;
  font-size:calc(var(--px) * 26);
  line-height:calc(var(--px) * 28);
  letter-spacing:.02em;
  text-transform:uppercase;
  color:#fff;
}

.hp04__cta{
  display:flex; align-items:center; justify-content:center;
  gap:calc(var(--px) * 22);
  width:calc(var(--px) * 621);
  height:calc(var(--px) * 81);
  margin:calc(var(--px) * 15) auto 0;
  background:var(--gold);
  color:var(--navy);
  border-radius:calc(var(--px) * 4);
  font-family:'Roboto Condensed','Arial Narrow',sans-serif;
  font-weight:700;
  font-size:calc(var(--px) * 30);
  letter-spacing:.03em;
  text-transform:uppercase;
  transition:background .25s ease, gap .25s ease;
}
.hp04__cta svg{width:calc(var(--px) * 38);height:calc(var(--px) * 30);flex:none}
.hp04__cta:hover{background:#E7B049;gap:calc(var(--px) * 30)}

@media (max-width:900px){
  .hp04{
    --px:clamp(.62px, calc(100vw / 545), .8px);
    grid-template-columns:1fr;
  }
  .hp04__media{min-height:calc(var(--px) * 420)}
  .hp04__media::after{
    background:linear-gradient(to bottom,
      rgba(0,14,34,0) 55%, rgba(0,14,34,.6) 85%, var(--deep) 100%);
  }
  .hp04__panel{padding:calc(var(--px) * 60) calc(var(--px) * 40) calc(var(--px) * 64)}
  .hp04__inner{width:auto}
  .hp04__title{font-size:calc(var(--px) * 74)}
  .hp04__title > span{white-space:normal}
  .hp04__cta{width:100%;max-width:calc(var(--px) * 621)}
}


/* ══════════════════════════════════════════════════════════════
   HP-05 — Access Control  (mockup 1536×1024)
   near-black ground · photo 0–660 · card rail 56–1479
   ══════════════════════════════════════════════════════════════ */
.hp05{
  --cw:1536;
  --ink:#00040A;
  --card:#000A16;
  background:var(--ink);
  color:#fff;
  padding-bottom:calc(var(--px) * 32);
  overflow:hidden;
}

.hp05__top{
  display:grid;
  grid-template-columns:calc(var(--px) * 660) 1fr;
  min-height:calc(var(--px) * 497);
}
.hp05__media{position:relative}
.hp05__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hp05__media::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to right,
    rgba(0,4,10,0) 58%, rgba(0,4,10,.6) 84%, var(--ink) 100%);
}

.hp05__panel{padding:calc(var(--px) * 49) calc(var(--px) * 58) 0 calc(var(--px) * 18)}

.hp05__eyebrow{
  color:var(--gold-br);
  font-size:calc(var(--px) * 26);
  letter-spacing:.055em;
}
.hp05__eyebrow-rule{
  width:calc(var(--px) * 66);
  height:calc(var(--px) * 3);
  margin:calc(var(--px) * 15) 0 0;
  background:var(--gold-br);
  border:0;
}
.hp05__title{
  margin:calc(var(--px) * 14) 0 0;
  font-size:calc(var(--px) * 91);      /* → 79px cap height */
  --sx:.80;
}
.hp05__title > span + span{margin-top:calc(var(--px) * 5)}

.hp05__lede{
  margin:calc(var(--px) * 20) 0 0;
  font-size:calc(var(--px) * 20);
  line-height:calc(var(--px) * 32);
  color:rgba(255,255,255,.86);
}

/* WHO → WHERE → WHEN */
.hp05__steps{
  display:flex; align-items:center;
  gap:calc(var(--px) * 16);
  margin-top:calc(var(--px) * 34);
}
.hp05__step{display:flex;align-items:center;gap:calc(var(--px) * 13)}
.hp05__step svg{
  width:calc(var(--px) * 67);
  height:calc(var(--px) * 67);
  color:var(--gold-br); flex:none;
}
.hp05__step b{
  display:block;
  font-family:'Anton','Arial Narrow',sans-serif;
  font-weight:400;
  font-size:calc(var(--px) * 38);
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.01em;
}
.hp05__step i{
  display:block; font-style:normal;
  margin-top:calc(var(--px) * 8);
  font-size:calc(var(--px) * 17);
  line-height:1;
  white-space:nowrap;
  color:rgba(255,255,255,.72);
}
.hp05__arrow{
  width:calc(var(--px) * 32);
  height:calc(var(--px) * 22);
  color:var(--gold-br); flex:none;
}

/* card rail */
.hp05__rail{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:calc(var(--px) * 13);
  width:calc(var(--px) * 1423);
  margin:calc(var(--px) * 10) auto 0;
}
.hp05-card{
  position:relative;
  display:flex; flex-direction:column;
  aspect-ratio:274 / 385;
  padding:0 calc(var(--px) * 25) calc(var(--px) * 26);
  background:var(--card);
  border:calc(var(--px) * 1) solid rgba(255,255,255,.11);
  border-radius:calc(var(--px) * 5);
  overflow:hidden;
  isolation:isolate;
}
.hp05-card__photo{
  position:absolute; inset:0 0 auto; z-index:-2;
  width:100%; height:53%;
  object-fit:cover;
  transition:transform .6s cubic-bezier(.4,0,.2,1);
}
.hp05-card__fade{
  position:absolute; inset:0 0 auto; z-index:-1;
  width:100%; height:53%;
  background:linear-gradient(to bottom,
    rgba(0,10,22,0) 0%, rgba(0,10,22,.15) 48%,
    rgba(0,10,22,.6) 74%, rgba(0,10,22,.92) 90%, var(--card) 100%);
}
.hp05-card svg.hp05-card__icon{
  width:auto;
  height:calc(var(--px) * 40);
  margin-top:calc(var(--px) * 184);
  color:var(--gold-br);
  flex:none;
}
.hp05-card h3{
  margin:calc(var(--px) * 17) 0 0;
  font-family:'Anton','Arial Narrow',sans-serif;
  font-weight:400;
  font-size:calc(var(--px) * 34);     /* → 29px cap height */
  line-height:1;
  text-transform:uppercase;
}
.hp05-card h3 > span{display:block;white-space:nowrap;transform:scaleX(.84);transform-origin:left center}
.hp05-card p{
  margin:calc(var(--px) * 24) 0 0;
  font-size:calc(var(--px) * 17);
  line-height:calc(var(--px) * 27);
  color:rgba(255,255,255,.82);
}
.hp05-card__hit{position:absolute;inset:0;z-index:1}
.hp05-card:hover .hp05-card__photo{transform:scale(1.05)}
.hp05-card:focus-within{outline:calc(var(--px) * 2) solid var(--gold);outline-offset:calc(var(--px) * 2)}

.hp05__cta{
  display:flex; align-items:center; justify-content:center;
  gap:calc(var(--px) * 24);
  width:calc(var(--px) * 572);
  height:calc(var(--px) * 78);
  margin:calc(var(--px) * 22) auto 0;
  background:var(--gold);
  color:#0B0B0B;
  border-radius:calc(var(--px) * 5);
  font-family:'Roboto Condensed','Arial Narrow',sans-serif;
  font-weight:700;
  font-size:calc(var(--px) * 30);
  letter-spacing:.03em;
  text-transform:uppercase;
  transition:background .25s ease, gap .25s ease;
}
.hp05__cta svg{width:calc(var(--px) * 36);height:calc(var(--px) * 28);flex:none}
.hp05__cta:hover{background:#E7B049;gap:calc(var(--px) * 32)}

@media (max-width:1100px){
  .hp05{--px:min(1px, calc(100vw / 1100))}
  .hp05__rail{grid-template-columns:repeat(3,1fr);width:calc(var(--px) * 1000)}
}
@media (max-width:820px){
  .hp05{--px:min(1px, calc(100vw / 820))}
  .hp05__top{grid-template-columns:1fr}
  .hp05__media{min-height:calc(var(--px) * 340)}
  .hp05__media::after{background:linear-gradient(to bottom,rgba(0,4,10,0) 55%,var(--ink) 100%)}
  .hp05__panel{padding:calc(var(--px) * 50) calc(var(--px) * 40) 0}
  .hp05__title{font-size:calc(var(--px) * 66)}
  .hp05__title > span{white-space:normal}
  .hp05__steps{flex-wrap:wrap;gap:calc(var(--px) * 20)}
  .hp05__arrow{display:none}
  .hp05__rail{grid-template-columns:repeat(2,1fr);width:calc(var(--px) * 740)}
  .hp05__cta{width:calc(var(--px) * 572);max-width:88vw}
}
@media (max-width:560px){
  .hp05{--px:min(1px, calc(100vw / 560))}
  .hp05__rail{grid-template-columns:1fr;width:calc(var(--px) * 400)}
}


/* ══════════════════════════════════════════════════════════════
   HP-06 — Safes & Showroom  (mockup 1536×1024)
   showroom photo 0–665 · panel 676–1490 · bar 47–1489
   ══════════════════════════════════════════════════════════════ */
.hp06{
  --cw:1536;
  --ink:#03080E;
  --card:#020E19;
  position:relative;
  background:var(--ink);
  color:#fff;
  min-height:calc(var(--px) * 1024);
  padding:0 calc(var(--px) * 46) calc(var(--px) * 33);
  overflow:hidden;
}
.hp06__media{position:absolute;inset:0 auto auto 0;width:calc(var(--px) * 665);height:calc(var(--px) * 726)}
.hp06__media img{width:100%;height:100%;object-fit:cover;display:block}
.hp06__media::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to right,rgba(3,8,14,0) 72%,rgba(3,8,14,.7) 90%,var(--ink) 100%);
}

.hp06__panel{
  position:relative;
  width:calc(var(--px) * 814);
  min-height:calc(var(--px) * 726);
  margin-left:calc(var(--px) * 630);
  padding-top:calc(var(--px) * 39);
}

.hp06__eyebrow{
  display:flex;align-items:center;justify-content:center;
  gap:calc(var(--px) * 18);
  color:var(--gold-br);
  font-size:calc(var(--px) * 26);
  letter-spacing:.055em;
}
.hp06__eyebrow::before,.hp06__eyebrow::after{
  content:'';display:block;flex:none;
  width:calc(var(--px) * 60);height:calc(var(--px) * 3);
  background:currentColor;
}
.hp06__title{
  margin:calc(var(--px) * 10) 0 0;
  font-size:calc(var(--px) * 104);     /* → 90px cap height */
  --sx:.86;
}
.hp06__title > span + span{margin-top:calc(var(--px) * 4)}
.hp06__lede{
  margin:calc(var(--px) * 12) 0 0;
  font-size:calc(var(--px) * 21);
  line-height:calc(var(--px) * 33);
  color:rgba(255,255,255,.9);
}

/* the two route cards */
.hp06__routes{
  display:grid;
  grid-template-columns:calc(var(--px) * 402) calc(var(--px) * 430);
  gap:calc(var(--px) * 25);
  margin:calc(var(--px) * 12) 0 0;
  margin-left:calc(var(--px) * -46);
}
.hp06-route{
  background:var(--card);
  border:calc(var(--px) * 1) solid rgba(255,255,255,.13);
  border-radius:calc(var(--px) * 8);
  padding:calc(var(--px) * 20) calc(var(--px) * 26) calc(var(--px) * 10);
}
.hp06-route__head{
  display:flex;align-items:center;gap:calc(var(--px) * 16);
  color:var(--gold-br);
  font-family:'Anton','Arial Narrow',sans-serif;
  font-weight:400;
  font-size:calc(var(--px) * 38);
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.01em;
}
.hp06-route__head svg{width:calc(var(--px) * 34);height:calc(var(--px) * 24);flex:none}
.hp06-route ul{list-style:none;margin:calc(var(--px) * 14) 0 0;padding:0}
.hp06-route li + li{border-top:calc(var(--px) * 1) solid rgba(255,255,255,.11)}
.hp06-route li a{
  display:flex;align-items:center;gap:calc(var(--px) * 20);
  padding:calc(var(--px) * 11) 0;
  font-size:calc(var(--px) * 24);
  line-height:1.2;
  color:#fff;
  transition:color .2s ease;
}
.hp06-route li a:hover{color:var(--gold-br)}
.hp06-route li svg{width:auto;height:calc(var(--px) * 30);color:var(--gold-br);flex:none}

/* showroom bar */
.hp06__bar{
  position:relative;
  display:grid;
  grid-template-columns:calc(var(--px) * 172) calc(var(--px) * 620) calc(var(--px) * 1) 1fr;
  align-items:center;
  width:calc(var(--px) * 1442);
  height:calc(var(--px) * 164);
  margin:0 auto;
  background:var(--card);
  border:calc(var(--px) * 1) solid rgba(224,161,53,.34);
  border-radius:calc(var(--px) * 8);
  overflow:hidden;
}
.hp06__bar-photo{position:absolute;inset:0 0 0 auto;width:calc(var(--px) * 332)}
.hp06__bar-photo img{width:100%;height:100%;object-fit:cover;display:block}
.hp06__bar-photo::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to right,var(--card) 0%,rgba(2,14,25,.55) 28%,rgba(2,14,25,0) 62%);
}
.hp06__bar-icon{justify-self:center}
.hp06__bar-icon svg{width:auto;height:calc(var(--px) * 84);color:var(--gold-br);display:block}
.hp06__bar-main{padding-right:calc(var(--px) * 24)}
.hp06__bar-main b{
  display:flex;align-items:center;gap:calc(var(--px) * 18);
  font-family:'Anton','Arial Narrow',sans-serif;
  font-weight:400;
  font-size:calc(var(--px) * 42);
  line-height:1;
  text-transform:uppercase;
  color:var(--gold-br);
}
.hp06__bar-main b svg{width:calc(var(--px) * 38);height:calc(var(--px) * 26);flex:none}
.hp06__bar-main p{
  margin:calc(var(--px) * 12) 0 0;
  font-size:calc(var(--px) * 21);
  line-height:calc(var(--px) * 32);
  color:rgba(255,255,255,.92);
}
.hp06__bar-div{width:calc(var(--px) * 1);height:calc(var(--px) * 108);background:rgba(255,255,255,.2)}
.hp06__bar-addr{position:relative;display:flex;gap:calc(var(--px) * 18);padding-left:calc(var(--px) * 30)}
.hp06__bar-addr svg.pin{width:auto;height:calc(var(--px) * 52);color:var(--gold-br);flex:none}
.hp06__bar-addr p{font-size:calc(var(--px) * 22);line-height:calc(var(--px) * 32)}
.hp06__bar-addr small{
  display:block;margin-top:calc(var(--px) * 10);
  font-family:'Roboto Condensed','Arial Narrow',sans-serif;
  font-weight:700;
  font-size:calc(var(--px) * 19);
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--gold-br);
}

/* trust strip */
.hp06__trust{
  position:relative;
  display:grid;grid-template-columns:repeat(4,1fr);
  width:calc(var(--px) * 1400);
  margin:calc(var(--px) * 34) auto 0;
}
.hp06__trust div{
  display:flex;gap:calc(var(--px) * 20);
  padding:0 calc(var(--px) * 18);
  border-right:calc(var(--px) * 1) solid rgba(255,255,255,.13);
}
.hp06__trust div:last-child{border-right:0}
.hp06__trust svg{width:auto;height:calc(var(--px) * 48);color:var(--gold-br);flex:none}
.hp06__trust b{
  display:block;
  font-family:'Roboto Condensed','Arial Narrow',sans-serif;
  font-weight:700;
  font-size:calc(var(--px) * 22);
  line-height:1;
  letter-spacing:.03em;
  text-transform:uppercase;
}
.hp06__trust p{
  margin-top:calc(var(--px) * 4);
  font-size:calc(var(--px) * 18);
  line-height:calc(var(--px) * 21);
  color:rgba(255,255,255,.8);
}

@media (max-width:1100px){
  .hp06{--px:clamp(.62px, calc(100vw / 545), .8px); min-height:0; padding:0 0 calc(var(--px) * 60)}
  .hp06__media{position:relative;width:auto;height:calc(var(--px) * 420)}
  .hp06__media::after{background:linear-gradient(to bottom,rgba(3,8,14,0) 60%,var(--ink) 100%)}
  .hp06__panel{width:auto;margin:0;padding:calc(var(--px) * 50) calc(var(--px) * 40) 0}
  .hp06__routes{grid-template-columns:1fr;margin-left:0}
  .hp06__bar{grid-template-columns:1fr;width:auto;height:auto;padding:calc(var(--px) * 34);gap:calc(var(--px) * 24);margin:calc(var(--px) * 24) calc(var(--px) * 40) 0}
  .hp06__bar-main b{flex-wrap:wrap;font-size:calc(var(--px) * 34)}
  .hp06__bar-main p,.hp06__bar-addr p{font-size:calc(var(--px) * 19);line-height:calc(var(--px) * 28)}
  .hp06__bar-addr{padding-left:0}
  .hp06__bar-icon{justify-self:start}
  .hp06__bar-photo,.hp06__bar-div{display:none}
  .hp06__trust{grid-template-columns:repeat(2,1fr);width:auto;gap:calc(var(--px) * 28);margin:calc(var(--px) * 34) calc(var(--px) * 40) 0}
  .hp06__trust p{white-space:normal}
  .hp06__trust b{white-space:normal}
  .hp06__trust div{border-right:0;padding:0}
  .hp06__title{font-size:calc(var(--px) * 76)}
  .hp06__title > span{white-space:normal}
}
@media (max-width:620px){
  .hp06{--px:min(1px, calc(100vw / 620))}
  .hp06__trust{grid-template-columns:1fr}
}


/* ══════════════════════════════════════════════════════════════
   HP-07 — Residential  (mockup 1536×1024)
   light ground · content 58–830 · photo 690–1536
   ══════════════════════════════════════════════════════════════ */
.hp07{
  --cw:1536;
  --paper:#F6F4F3;
  position:relative;
  background:var(--paper);
  color:var(--navy);
  min-height:calc(var(--px) * 1024);
  padding:calc(var(--px) * 72) 0 calc(var(--px) * 59) calc(var(--px) * 58);
  overflow:hidden;
}
.hp07__media{position:absolute;inset:0 0 0 auto;width:calc(var(--px) * 686)}
.hp07__media img{width:100%;height:100%;object-fit:cover;display:block}
.hp07__media::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to right,var(--paper) 0%,rgba(246,244,243,.72) 12%,rgba(246,244,243,0) 34%);
}
.hp07__inner{position:relative;width:calc(var(--px) * 772)}

.hp07__eyebrow{color:#CA8921;font-size:calc(var(--px) * 27);letter-spacing:.05em}
.hp07__eyebrow-rule{
  width:calc(var(--px) * 47);height:calc(var(--px) * 3);
  margin:calc(var(--px) * 15) 0 0;background:#CA8921;border:0;
}
.hp07__title{
  margin:calc(var(--px) * 14) 0 0;
  font-size:calc(var(--px) * 117);    /* → 101px cap height */
  line-height:.93;
  color:var(--navy);
  --sx:.78;
}
.hp07__title > span + span{margin-top:0}
.hp07__lede{
  margin:calc(var(--px) * 28) 0 0;
  font-size:calc(var(--px) * 22);
  line-height:calc(var(--px) * 35);
  color:#0A1730;
}

/* five service pills */
.hp07__pills{
  display:grid;grid-template-columns:repeat(5,1fr);
  margin-top:calc(var(--px) * 36);
  width:calc(var(--px) * 762);
}
.hp07__pills div{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:0 calc(var(--px) * 4);
  border-right:calc(var(--px) * 1) solid rgba(0,19,51,.16);
}
.hp07__pills div:last-child{border-right:0}
.hp07__pills svg{width:auto;height:calc(var(--px) * 73);color:#D0992D;display:block}
.hp07__pills b{
  margin-top:calc(var(--px) * 22);
  font-family:'Roboto Condensed','Arial Narrow',sans-serif;
  font-weight:700;
  font-size:calc(var(--px) * 21);
  line-height:calc(var(--px) * 26);
  letter-spacing:.005em;
  text-transform:uppercase;
  color:var(--navy);
}

/* "Just moved?" card */
.hp07__moved{
  display:grid;
  grid-template-columns:calc(var(--px) * 147) 1fr calc(var(--px) * 1) calc(var(--px) * 216);
  align-items:center;
  width:calc(var(--px) * 767);
  height:calc(var(--px) * 190);
  margin-top:calc(var(--px) * 40);
  background:#fff;
  border-radius:calc(var(--px) * 3);
  box-shadow:0 calc(var(--px) * 10) calc(var(--px) * 26) rgba(0,19,51,.11);
  overflow:hidden;
}
.hp07__moved-icon{
  display:flex;align-items:center;justify-content:center;
  height:100%;background:#D0992D;
}
.hp07__moved-icon svg{width:auto;height:calc(var(--px) * 92);color:#fff;display:block}
.hp07__moved-main{padding:0 calc(var(--px) * 30) 0 calc(var(--px) * 34)}
.hp07__moved-main b{
  display:block;
  font-family:'Anton','Arial Narrow',sans-serif;
  font-weight:400;
  font-size:calc(var(--px) * 46);
  line-height:1;
  text-transform:uppercase;
  color:var(--navy);
}
.hp07__moved-main p{
  margin-top:calc(var(--px) * 14);
  font-size:calc(var(--px) * 21);
  line-height:calc(var(--px) * 32);
  color:#16233C;
}
.hp07__moved-div{width:calc(var(--px) * 1);height:calc(var(--px) * 138);background:rgba(0,19,51,.18)}
.hp07__moved-cta{
  display:flex;flex-direction:column;align-items:flex-start;
  padding-left:calc(var(--px) * 34);
  color:#C4901F;
}
.hp07__moved-cta svg.keys{width:auto;height:calc(var(--px) * 66);display:block}
.hp07__moved-cta span{
  display:flex;align-items:center;gap:calc(var(--px) * 12);
  margin-top:calc(var(--px) * 14);
  font-family:'Roboto Condensed','Arial Narrow',sans-serif;
  font-weight:700;
  font-size:calc(var(--px) * 25);
  line-height:calc(var(--px) * 30);
  letter-spacing:.02em;
  text-transform:uppercase;
}
.hp07__moved-cta span svg{width:calc(var(--px) * 28);height:calc(var(--px) * 20);flex:none}

/* bottom row */
.hp07__foot{display:flex;align-items:center;gap:calc(var(--px) * 40);margin-top:calc(var(--px) * 36)}
.hp07__cta{
  display:flex;align-items:center;justify-content:center;
  gap:calc(var(--px) * 24);
  flex:none;
  width:calc(var(--px) * 602);height:calc(var(--px) * 78);
  background:#D0992D;color:var(--navy);
  border-radius:calc(var(--px) * 3);
  font-family:'Roboto Condensed','Arial Narrow',sans-serif;
  font-weight:700;
  font-size:calc(var(--px) * 30);
  letter-spacing:.03em;text-transform:uppercase;
  transition:background .25s ease,gap .25s ease;
}
.hp07__cta svg{width:calc(var(--px) * 34);height:calc(var(--px) * 26);flex:none}
.hp07__cta:hover{background:#E0A93C;gap:calc(var(--px) * 32)}
.hp07__cta-short{display:none}
.hp07__badge{display:flex;align-items:center;gap:calc(var(--px) * 18)}
.hp07__badge svg{width:auto;height:calc(var(--px) * 78);color:#D0992D;flex:none}
.hp07__badge p{
  white-space:nowrap;
  font-family:'Roboto Condensed','Arial Narrow',sans-serif;
  font-weight:700;
  font-size:calc(var(--px) * 23);
  line-height:calc(var(--px) * 27);
  letter-spacing:.02em;text-transform:uppercase;
  color:var(--navy);
}

@media (max-width:1000px){
  .hp07{--px:clamp(.62px, calc(100vw / 545), .8px); min-height:0; padding:calc(var(--px) * 56) calc(var(--px) * 40) calc(var(--px) * 60)}
  .hp07__media{position:relative;inset:auto;width:auto;height:calc(var(--px) * 360);margin:0 calc(var(--px) * -40) calc(var(--px) * 40)}
  .hp07__media::after{background:linear-gradient(to bottom,rgba(246,244,243,0) 60%,var(--paper) 100%)}
  .hp07__inner{width:auto}
  .hp07__title{font-size:calc(var(--px) * 82)}
  .hp07__title > span{white-space:normal}

  /* Swipeable card carousel, replacing the 3-col grid (5 items in 3
     columns orphaned the 5th — "High-Security Locks" — alone on a
     half-empty second row, reading as a stray fragment rather than part
     of the group; feedback, 2026-08-24). Each pill becomes a real card
     with its own surface, at ~88% width so ~1.1 are visible — the peek
     of the next card is the ONLY "this scrolls" affordance needed (the
     client's own reasoning: it reads as an invitation, not an accident).
     scroll-snap-type is a native CSS mechanism scoped to this ONE
     horizontal strip — it never touches the page's vertical scroll, so
     it does not conflict with the native-scrolling-only standard. */
  .hp07__pills{
    display:flex;width:auto;margin-top:calc(var(--px) * 26);
    gap:calc(var(--px) * 16);
    padding:calc(var(--px) * 4) 24px calc(var(--px) * 14);
    margin-inline:-24px;
    overflow-x:auto;scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .hp07__pills::-webkit-scrollbar{display:none}
  .hp07__pills a{
    flex:0 0 88%;scroll-snap-align:start;
    border-right:0;padding:calc(var(--px) * 26) calc(var(--px) * 18);
    background:#fff;border-radius:calc(var(--px) * 10);
    box-shadow:0 calc(var(--px) * 6) calc(var(--px) * 18) rgba(0,19,51,.08);
    border:1px solid rgba(0,19,51,.07);
  }
  .hp07__pills svg{height:calc(var(--px) * 64)}
  .hp07__pills b{font-size:calc(var(--px) * 24)}

  /* less air above "Just Moved?" now that the carousel is more compact */
  .hp07__moved{width:auto;height:auto;grid-template-columns:1fr;margin-top:calc(var(--px) * 18);padding-bottom:calc(var(--px) * 28)}
  /* gold header was tall for just a house icon (feedback) — trimmed ~24% */
  .hp07__moved-icon{padding:calc(var(--px) * 15) 0}
  .hp07__moved-icon svg{height:calc(var(--px) * 70)}
  .hp07__moved-div{display:none}
  .hp07__moved-main{padding:calc(var(--px) * 26) calc(var(--px) * 28) 0}
  .hp07__moved-cta{padding:calc(var(--px) * 22) calc(var(--px) * 28) 0}

  .hp07__foot{flex-direction:column;align-items:flex-start;gap:calc(var(--px) * 26)}
  /* was width:100% with the DESKTOP 30-unit font-size still attached — a
     602px-wide button's type stretched full-width and wrapped. Real fix
     is the shorter, single-line label ("Explore Residential ->", the
     "Services" is implied) at a size sized for a mobile button. */
  .hp07__cta{width:100%;font-size:calc(var(--px) * 24);gap:calc(var(--px) * 18)}
  .hp07__cta svg{width:calc(var(--px) * 28);height:calc(var(--px) * 22)}
  .hp07__cta-full{display:none}
  .hp07__cta-short{display:inline}

  /* trust badge: smaller shield, and the copy gets to wrap + breathe
     instead of a forced nowrap that was one nudge from clipping */
  .hp07__badge svg{height:calc(var(--px) * 56)}
  .hp07__badge p{white-space:normal;line-height:calc(var(--px) * 30)}
}


/* ══════════════════════════════════════════════════════════════
   HP-08 — Recent Quality Projects  (mockup 1536×1024)
   light ground · card rail 33–1499 · trust band 913–1024
   ══════════════════════════════════════════════════════════════ */
.hp08{
  --cw:1536;
  --paper:#F4F4F4;
  background:var(--paper);
  color:var(--navy);
  padding:calc(var(--px) * 32) 0 0;
  text-align:center;
}
.hp08__eyebrow{
  display:flex;align-items:center;justify-content:center;
  gap:calc(var(--px) * 20);
  color:#D89C22;
  font-size:calc(var(--px) * 28);
  letter-spacing:.05em;
}
.hp08__eyebrow::before,.hp08__eyebrow::after{
  content:'';display:block;flex:none;
  width:calc(var(--px) * 56);height:calc(var(--px) * 4);
  background:currentColor;
}
.hp08__title{
  display:flex;justify-content:center;
  margin:calc(var(--px) * 12) 0 0;
  font-size:calc(var(--px) * 119);    /* → 103px cap height */
  color:#011433;
  --sx:.813;
}
.hp08__lede{
  margin:calc(var(--px) * 13) 0 0;
  font-size:calc(var(--px) * 22);
  line-height:calc(var(--px) * 29);
  color:#0A1730;
}

.hp08__rail{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:calc(var(--px) * 15);
  width:calc(var(--px) * 1467);
  margin:calc(var(--px) * 14) auto 0;
}
.hp08-proj{
  position:relative;
  display:flex;flex-direction:column;
  background:#FBFBFB;
  border:calc(var(--px) * 1) solid rgba(0,19,51,.13);
  border-radius:calc(var(--px) * 10);
  overflow:hidden;
  box-shadow:0 calc(var(--px) * 6) calc(var(--px) * 16) rgba(0,19,51,.07);
}
.hp08-proj__photo{width:100%;height:calc(var(--px) * 349);object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.4,0,.2,1)}
.hp08-proj:hover .hp08-proj__photo{transform:scale(1.05)}
.hp08-proj__body{
  position:relative;
  padding:calc(var(--px) * 54) calc(var(--px) * 20) calc(var(--px) * 20);
  text-align:center;
}
.hp08-proj__badge{
  position:absolute;top:calc(var(--px) * -51);left:50%;
  transform:translateX(-50%);
  display:flex;align-items:center;justify-content:center;
  width:calc(var(--px) * 100);height:calc(var(--px) * 100);
  border-radius:50%;
  background:#04162B;
  border:calc(var(--px) * 4) solid #FBFBFB;
}
.hp08-proj__badge svg{width:auto;height:calc(var(--px) * 48);color:#E0A93C;display:block}
.hp08-proj h3{
  font-family:'Anton','Arial Narrow',sans-serif;
  font-weight:400;
  font-size:calc(var(--px) * 40);
  line-height:calc(var(--px) * 41);
  text-transform:uppercase;
  color:#011433;
}
.hp08-proj hr{
  width:calc(var(--px) * 260);height:calc(var(--px) * 1);
  margin:calc(var(--px) * 14) auto 0;
  background:rgba(214,154,37,.6);border:0;
}
.hp08-proj__loc{
  display:flex;align-items:center;justify-content:center;
  gap:calc(var(--px) * 10);
  margin-top:calc(var(--px) * 13);
  font-family:'Roboto Condensed','Arial Narrow',sans-serif;
  font-weight:700;
  font-size:calc(var(--px) * 25);
  letter-spacing:.02em;text-transform:uppercase;
  color:#011433;
}
.hp08-proj__loc svg{width:auto;height:calc(var(--px) * 28);color:#D89C22;flex:none}
.hp08-proj__hit{position:absolute;inset:0;z-index:1}
.hp08-proj:focus-within{outline:calc(var(--px) * 3) solid #D89C22;outline-offset:calc(var(--px) * 2)}

.hp08__cta{
  display:flex;align-items:center;justify-content:center;
  gap:calc(var(--px) * 26);
  width:calc(var(--px) * 459);height:calc(var(--px) * 72);
  margin:calc(var(--px) * 22) auto 0;
  background:#D79A26;color:#011433;
  border-radius:calc(var(--px) * 6);
  font-family:'Roboto Condensed','Arial Narrow',sans-serif;
  font-weight:700;
  font-size:calc(var(--px) * 32);
  letter-spacing:.03em;text-transform:uppercase;
  transition:background .25s ease,gap .25s ease;
}
.hp08__cta svg{width:calc(var(--px) * 36);height:calc(var(--px) * 28);flex:none}
.hp08__cta:hover{background:#E7B049;gap:calc(var(--px) * 34)}

.hp08__trust{
  display:grid;grid-template-columns:repeat(4,1fr);
  margin-top:calc(var(--px) * 29);
  padding:calc(var(--px) * 22) calc(var(--px) * 70);
  background:#F7F6F6;
  border-top:calc(var(--px) * 1) solid rgba(0,19,51,.09);
}
.hp08__trust div{
  display:flex;align-items:center;gap:calc(var(--px) * 18);
  text-align:left;
  padding:0 calc(var(--px) * 16);
  border-right:calc(var(--px) * 1) solid rgba(0,19,51,.14);
}
.hp08__trust div:last-child{border-right:0}
.hp08__trust svg{width:auto;height:calc(var(--px) * 52);color:#D89C22;flex:none}
.hp08__trust b{
  display:block;
  font-family:'Roboto Condensed','Arial Narrow',sans-serif;
  font-weight:700;
  font-size:calc(var(--px) * 23);
  line-height:1;letter-spacing:.01em;white-space:nowrap;text-transform:uppercase;
  color:#011433;
}
.hp08__trust p{
  margin-top:calc(var(--px) * 8);
  font-size:calc(var(--px) * 18);
  line-height:1.2;
  white-space:nowrap;
  color:#33405A;
}

@media (max-width:1080px){
  .hp08{--px:min(1px, calc(100vw / 1080)); padding:calc(var(--px) * 50) calc(var(--px) * 30) 0}
  .hp08__rail{grid-template-columns:repeat(2,1fr);width:auto}
  .hp08__title{font-size:calc(var(--px) * 84)}
  .hp08__title > span{white-space:normal}
  .hp08__trust{grid-template-columns:repeat(2,1fr);gap:calc(var(--px) * 24);padding:calc(var(--px) * 30);margin:calc(var(--px) * 34) calc(var(--px) * -30) 0}
  .hp08__trust div{border-right:0;padding:0}
}
@media (max-width:620px){
  .hp08{--px:min(1px, calc(100vw / 620))}
  .hp08__rail,.hp08__trust{grid-template-columns:1fr}
  .hp08__cta{width:100%}
}


/* ══════════════════════════════════════════════════════════════
   HP-09 — Memphis Security Since 1977  (mockup 1536×1024)
   sepia photo 0–520 · timeline 536–1029 · today photo 1000–1536
   ══════════════════════════════════════════════════════════════ */
.hp09{
  --cw:1536;
  --ink:#08172B;
  position:relative;
  background:var(--ink);
  color:#fff;
  min-height:calc(var(--px) * 1024);
  padding:calc(var(--px) * 39) 0 calc(var(--px) * 33);
  overflow:hidden;
}
.hp09__past,.hp09__now{position:absolute;top:0;bottom:0}
.hp09__past{left:0;width:calc(var(--px) * 520)}
.hp09__now{right:0;width:calc(var(--px) * 536)}
.hp09__past img,.hp09__now img{width:100%;height:100%;object-fit:cover;display:block}
.hp09__past::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to right,rgba(8,23,43,.15) 0%,rgba(8,23,43,.55) 62%,var(--ink) 100%)}
.hp09__now::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to left,rgba(8,23,43,.15) 0%,rgba(8,23,43,.55) 58%,var(--ink) 100%)}

.hp09__mid{position:relative;width:calc(var(--px) * 494);margin:0 auto;text-align:center}
.hp09__eyebrow{
  display:flex;align-items:center;justify-content:center;
  gap:calc(var(--px) * 18);
  color:#E0A93C;font-size:calc(var(--px) * 30);letter-spacing:.04em;
  white-space:nowrap;
}
.hp09__eyebrow::before,.hp09__eyebrow::after{
  content:'';display:block;flex:none;
  width:calc(var(--px) * 56);height:calc(var(--px) * 3);background:currentColor;
}
.hp09__title{
  display:flex;flex-direction:column;align-items:center;
  margin:calc(var(--px) * 14) 0 0;
  font-size:calc(var(--px) * 92);     /* → 80px cap height */
  line-height:calc(var(--px) * 95);
  --sx:.83;
}
.hp09__title > span{transform-origin:center}

.hp09__seal{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  margin-top:calc(var(--px) * 16);
}
.hp09__seal::before{
  content:'';position:absolute;left:0;right:0;top:50%;
  height:calc(var(--px) * 2);background:rgba(224,169,60,.55);
}
.hp09__seal svg{
  position:relative;width:auto;height:calc(var(--px) * 39);
  color:#E0A93C;background:var(--ink);
  padding:0 calc(var(--px) * 10);
}

/* timeline */
.hp09__line{margin-top:calc(var(--px) * 12);text-align:left}
.hp09-step{position:relative;display:flex;gap:calc(var(--px) * 30);padding-bottom:calc(var(--px) * 10)}
.hp09-step:last-child{padding-bottom:0}
.hp09-step::before{
  content:'';position:absolute;left:calc(var(--px) * 30);top:calc(var(--px) * 60);bottom:0;
  width:calc(var(--px) * 2);background:rgba(224,169,60,.45);
}
.hp09-step:last-child::before{display:none}
/* Desktop-only correction: :last-child is DOM-structural, so it does not
   care that the trailing .hp09__m-only step is display:none there — it
   still counts as "last", which un-hides step 4's own padding/connector
   (a real ~10px growth, caught by pixel-diffing this change against the
   approved render). On desktop the true final VISIBLE step is always
   nth-last-child(2) once the mobile-only 5th step exists in the DOM, so
   this restores step 4's original last-item treatment exactly. Mobile is
   untouched — there, the 5th step really is last, so the rules above
   already apply to it correctly. */
@media (min-width:1001px){
  .hp09-step:nth-last-child(2){padding-bottom:0}
  .hp09-step:nth-last-child(2)::before{display:none}
}
.hp09-step__dot{
  position:relative;flex:none;
  display:flex;align-items:center;justify-content:center;
  width:calc(var(--px) * 60);height:calc(var(--px) * 60);
  border:calc(var(--px) * 2) solid #E0A93C;border-radius:50%;
  background:var(--ink);
}
.hp09-step__dot svg{width:auto;height:calc(var(--px) * 32);color:#E0A93C;display:block}
.hp09-step b{
  display:block;color:#E0A93C;
  font-family:'Roboto Condensed','Arial Narrow',sans-serif;
  font-weight:700;font-size:calc(var(--px) * 27);line-height:1;
}
.hp09-step strong{
  display:block;margin-top:calc(var(--px) * 6);
  font-family:'Roboto Condensed','Arial Narrow',sans-serif;
  font-weight:700;font-size:calc(var(--px) * 25);line-height:1;
  letter-spacing:.02em;text-transform:uppercase;color:#fff;
}
.hp09-step p{
  margin-top:calc(var(--px) * 7);
  font-size:calc(var(--px) * 19);
  line-height:calc(var(--px) * 24);
  color:rgba(255,255,255,.88);
}

/* era captions over the two photos.
   These must be anchored to their PHOTO, not to the viewport: the photos
   bleed (outer edge pinned, width absorbs the slack), so a bare canvas
   `left` drifts off the photo and into the centre column as the viewport
   grows — at 1920 the TODAY block sat 180px over the timeline copy.
   past = 54 from the photo's outer (viewport-left) edge; now = a fixed
   249+slack from the viewport-right, which keeps it exactly 27 inside
   the photo's inner edge — and 12 clear of the timeline column — at
   every width. */
.hp09__era{position:absolute;top:calc(var(--px) * 677);width:calc(var(--px) * 260)}
.hp09__era--past{left:calc(var(--px) * 54)}
.hp09__era--now{left:auto;right:calc(var(--px) * 249 + var(--slack))}
.hp09__era b{
  display:inline-block;
  padding:calc(var(--px) * 8) calc(var(--px) * 14);
  border:calc(var(--px) * 2) solid #E0A93C;
  color:#E0A93C;
  font-family:'Roboto Condensed','Arial Narrow',sans-serif;
  font-weight:700;font-size:calc(var(--px) * 32);line-height:1;
  letter-spacing:.02em;text-transform:uppercase;
}
.hp09__era p{
  margin-top:calc(var(--px) * 14);
  font-size:calc(var(--px) * 21);
  line-height:calc(var(--px) * 26);
  color:#fff;
}

/* mobile-only milestones (the redesigned "1977 -> Today" continuous
   timeline) — hidden on desktop by default, unhidden inside the
   max-width:1000px block below. Desktop keeps the original photos +
   .hp09__era captions exactly as approved. */
.hp09__m-only{display:none}
.hp09__foot{position:relative;margin-top:calc(var(--px) * 18);text-align:center}
.hp09__foot hr{
  width:calc(var(--px) * 1010);height:calc(var(--px) * 1);
  margin:0 auto;background:rgba(224,169,60,.5);border:0;
}
.hp09__foot p{
  margin-top:calc(var(--px) * 20);
  font-size:calc(var(--px) * 27);
  line-height:1.2;
  color:#fff;
}
.hp09__cta{
  display:flex;align-items:center;justify-content:center;
  gap:calc(var(--px) * 26);
  width:calc(var(--px) * 396);height:calc(var(--px) * 61);
  margin:calc(var(--px) * 15) auto 0;
  background:#CF942C;color:#08172B;
  border-radius:calc(var(--px) * 4);
  font-family:'Roboto Condensed','Arial Narrow',sans-serif;
  font-weight:700;font-size:calc(var(--px) * 30);
  letter-spacing:.03em;text-transform:uppercase;
  transition:background .25s ease,gap .25s ease;
}
.hp09__cta svg{width:calc(var(--px) * 34);height:calc(var(--px) * 26);flex:none}
.hp09__cta:hover{background:#E7B049;gap:calc(var(--px) * 34)}

@media (max-width:1000px){
  /* Mobile Heritage is a REDESIGN, not the desktop composition squeezed
     down (client feedback, 2026-08-24): the two side photos and their
     "1977"/"Today" captions were desktop-only artifacts that landed as
     disconnected, flush-left boxes below the timeline on mobile. Both are
     hidden here; their COPY continues living on in .hp09__m-only elements
     inside the timeline itself (index.html) — the words are not deleted,
     only re-homed as real milestones. Desktop is untouched: it still
     renders the photos + .hp09__era captions exactly as approved. */
  .hp09__past,.hp09__now,.hp09__era{display:none}
  /* horizontal padding is set via padding-inline further down this file —
     a LATER, unconditional `.hp09{padding-inline:var(--slack)}` rule (part
     of the full-bleed system) wins the cascade over any horizontal value
     set here, no matter what this `padding` shorthand says. Vertical only. */
  .hp09{--px:clamp(.62px, calc(100vw / 545), .8px);min-height:0;padding-top:calc(var(--px) * 50);padding-bottom:calc(var(--px) * 84)}
  .hp09__mid{width:auto}
  .hp09__title{font-size:calc(var(--px) * 68);line-height:calc(var(--px) * 72)}
  .hp09__title > span{white-space:normal}
  /* Continues the SAME gold line: .hp09-step:last-child::before is already
     generic, so it re-targets the new final step (Today) automatically —
     step 4 (Access Control) is no longer last-child, so ITS connector now
     correctly draws all the way down to it. No connector CSS to touch. */
  .hp09__m-only{display:revert}
  .hp09-step p + .hp09__m-only{
    margin-top:calc(var(--px) * 10);
    padding-top:calc(var(--px) * 10);
    border-top:1px solid rgba(224,169,60,.25);
    color:rgba(255,255,255,.82);
  }
  .hp09__foot{margin-top:calc(var(--px) * 40)}
  .hp09__foot hr{width:auto}
}


/* ══════════════════════════════════════════════════════════════
   HP-10 — Reviews  (mockup 1536×1024)
   light ground · card rail 56–1465 · google bar 204–1313
   ══════════════════════════════════════════════════════════════ */
.hp10{
  --cw:1536;
  background:#F8F8F8;
  color:var(--navy);
  padding:calc(var(--px) * 24) 0 calc(var(--px) * 24);
  text-align:center;
}
.hp10__eyebrow{
  display:flex;align-items:center;justify-content:center;
  gap:calc(var(--px) * 18);
  color:#D89C22;font-size:calc(var(--px) * 26);letter-spacing:.045em;
}
.hp10__eyebrow::before,.hp10__eyebrow::after{
  content:'';display:block;flex:none;
  width:calc(var(--px) * 80);height:calc(var(--px) * 3);background:currentColor;
}
.hp10__title{
  display:flex;flex-direction:column;align-items:center;
  margin:calc(var(--px) * 8) 0 0;
  font-size:calc(var(--px) * 84);     /* -17%: a section headline, not the loudest thing here */
  line-height:calc(var(--px) * 80);
  color:#011535;
  --sx:.99;
}
.hp10__title > span{transform-origin:center}
.hp10__lede{
  margin:calc(var(--px) * 10) 0 0;
  font-size:calc(var(--px) * 22);
  line-height:calc(var(--px) * 30);
  color:#0A1730;
}

/* The 90px navy disc read as a service-card icon and competed with the
   reviewer's name. Now a small gold line mark set against the name line:
   contextual detail, fourth in the footer's hierarchy. */

/* google rating strip */
.hp10__google{
  display:flex;align-items:center;justify-content:center;
  gap:calc(var(--px) * 32);
  width:calc(var(--px) * 1110);height:calc(var(--px) * 96);
  margin:calc(var(--px) * 18) auto 0;
  border:calc(var(--px) * 2) solid rgba(214,154,37,.55);
  border-radius:calc(var(--px) * 8);
}
.hp10__google-g{width:auto;height:calc(var(--px) * 58);flex:none}
.hp10__google b{
  display:block;
  font-family:'Roboto Condensed','Arial Narrow',sans-serif;
  font-weight:700;font-size:calc(var(--px) * 22);line-height:1;
  letter-spacing:.03em;text-transform:uppercase;color:#011535;
}
.hp10__google strong{
  display:block;margin-top:calc(var(--px) * 4);
  font-family:'Roboto','Helvetica Neue',Arial,sans-serif;
  font-weight:500;font-size:calc(var(--px) * 44);line-height:1;color:#011535;
}
.hp10__google-div{width:calc(var(--px) * 1);height:calc(var(--px) * 62);background:rgba(0,19,51,.2);flex:none}
.hp10__google-stars{display:flex;gap:calc(var(--px) * 6);justify-content:center}
.hp10__google-stars svg{width:auto;height:calc(var(--px) * 30);color:#D89A28;display:block}
.hp10__google-count{
  margin-top:calc(var(--px) * 7);
  font-family:'Roboto Condensed','Arial Narrow',sans-serif;
  font-weight:700;font-size:calc(var(--px) * 26);line-height:1;
  letter-spacing:.02em;text-transform:uppercase;color:#011535;
}
.hp10__google-trust{display:flex;align-items:center;gap:calc(var(--px) * 14);text-align:left}
.hp10__google-trust svg{width:auto;height:calc(var(--px) * 46);color:#011535;flex:none}
.hp10__google-trust p{font-size:calc(var(--px) * 20);line-height:calc(var(--px) * 26);color:#0A1730}

.hp10__cta{
  display:flex;align-items:center;justify-content:center;
  gap:calc(var(--px) * 20);
  width:calc(var(--px) * 400);height:calc(var(--px) * 60);
  margin:calc(var(--px) * 14) auto 0;
  background:#D6992B;color:#011535;
  border-radius:calc(var(--px) * 5);
  font-family:'Roboto Condensed','Arial Narrow',sans-serif;
  font-weight:700;font-size:calc(var(--px) * 27);
  letter-spacing:.03em;text-transform:uppercase;
  transition:background .25s ease,gap .25s ease;
}
.hp10__cta svg{width:calc(var(--px) * 30);height:calc(var(--px) * 24);flex:none}
.hp10__cta:hover{background:#E7B049;gap:calc(var(--px) * 34)}

@media (max-width:1080px){
  .hp10{--px:clamp(.62px, calc(100vw / 545), .8px);padding:calc(var(--px) * 50) calc(var(--px) * 30) calc(var(--px) * 54)}
  .hp10__title{font-size:calc(var(--px) * 66);line-height:calc(var(--px) * 68)}
  .hp10__title > span{white-space:normal}
  .hp10__google{flex-wrap:wrap;height:auto;width:auto;padding:calc(var(--px) * 28);gap:calc(var(--px) * 26)}
  .hp10__google-div{display:none}
}


/* ══════════════════════════════════════════════════════════════
   HP-11 — Service Area  (mockup 1536×1024)
   navy ground · copy 68–680 · map 690–1536
   ══════════════════════════════════════════════════════════════ */
.hp11{
  --cw:1536;
  --ink:#011329;
  position:relative;
  background:var(--ink);
  color:#fff;
  min-height:calc(var(--px) * 1024);
  padding:calc(var(--px) * 68) 0 calc(var(--px) * 57) calc(var(--px) * 68);
  overflow:hidden;
}
.hp11__map{
  position:absolute;inset:0 0 0 auto;width:calc(var(--px) * 846);
  overflow:hidden;container-type:size;
}
/* scoped to the map photo's own <picture>: as a bare `.hp11__map img` this
   also captured the HOME BASE marker's logo (0,1,1 beats the marker's
   0,1,0) and forced width/height:100% + object-fit:cover onto it —
   the logo rendered 468px wide instead of 72 and would have been
   distorted. 7th instance of class+element beating class in this file. */
.hp11__map > picture img{width:100%;height:100%;object-fit:cover;display:block}
/* replicates the img's cover crop, so --x/--y image-percentages stay
   registered on the baked-in pins at every container aspect ratio */
.hp11__pins{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:max(100cqw, calc(100cqh * 1692 / 2048));
  height:max(100cqh, calc(100cqw * 2048 / 1692));
  pointer-events:none;
}
/* ── HOME BASE marker ──
   Own layer, but the SAME geometry as .hp11__pins above so it shares the
   image's cover-crop coordinate space and stays registered to the art at
   every container aspect ratio. Sits above the ::after fade (which would
   otherwise wash it out) — the fade is z-index auto, this is z-index 2. */
.hp11__home-layer{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:max(100cqw, calc(100cqh * 1692 / 2048));
  height:max(100cqh, calc(100cqw * 2048 / 1692));
  pointer-events:none;z-index:2;
}
.hp11-home{
  position:absolute;left:var(--x);top:var(--y);
  display:flex;align-items:center;gap:calc(var(--px) * 7);
  transform:translate(calc(var(--px) * -7), -50%);
}
/* the dot is the exact coordinate; the badge hangs off it to the right,
   into the clear pocket between Memphis and Germantown */
.hp11-home__dot{
  flex:none;display:block;
  width:calc(var(--px) * 14);height:calc(var(--px) * 14);
  border-radius:50%;
  background:#E9A415;
  box-shadow:0 0 0 calc(var(--px) * 3) rgba(1,19,41,.9), 0 0 0 calc(var(--px) * 4.5) rgba(233,164,21,.6);
}
.hp11-home__badge{
  display:flex;align-items:center;gap:calc(var(--px) * 9);
  padding:calc(var(--px) * 8) calc(var(--px) * 11);
  background:rgba(1,16,36,.94);
  border:calc(var(--px) * 1.5) solid rgba(233,164,21,.75);
  border-radius:calc(var(--px) * 7);
  box-shadow:0 calc(var(--px) * 5) calc(var(--px) * 14) rgba(0,0,0,.45);
  white-space:nowrap;
}
.hp11-home__logo{width:calc(var(--px) * 72);height:auto;display:block}
.hp11-home__seal{display:none;flex:none;color:#E9A415}
.hp11-home__seal svg{width:calc(var(--px) * 26);height:calc(var(--px) * 30);display:block}
.hp11-home__badge b{
  font-family:'Roboto Condensed','Arial Narrow',sans-serif;
  font-weight:700;font-size:calc(var(--px) * 12);line-height:1;
  letter-spacing:.12em;text-transform:uppercase;color:#E9A415;
}

.hp11__map::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to right,var(--ink) 0%,var(--ink) 13%,rgba(1,19,41,.55) 20%,rgba(1,19,41,0) 30%);
}
.hp11__inner{position:relative;width:calc(var(--px) * 648)}

.hp11__eyebrow{
  display:flex;align-items:center;gap:calc(var(--px) * 18);
  color:#D69325;font-size:calc(var(--px) * 27);letter-spacing:.045em;white-space:nowrap;
}
.hp11__eyebrow::before,.hp11__eyebrow::after{
  content:'';display:block;flex:none;
  width:calc(var(--px) * 58);height:calc(var(--px) * 3);background:currentColor;
}
.hp11__title{
  margin:calc(var(--px) * 12) 0 0;
  font-size:calc(var(--px) * 94);     /* → 81px cap height */
  line-height:calc(var(--px) * 98);
  --sx:.86;
}
.hp11__lede{
  margin:calc(var(--px) * 24) 0 0;
  font-size:calc(var(--px) * 24);
  line-height:calc(var(--px) * 38);
  color:rgba(255,255,255,.92);
}

.hp11__states{
  display:grid;grid-template-columns:calc(var(--px) * 330) 1fr;
  margin-top:calc(var(--px) * 32);
}
.hp11-state + .hp11-state{margin-top:0}
.hp11__states .hp11-state--ar{grid-column:1 / -1;margin-top:calc(var(--px) * 34)}
.hp11-state__head{display:flex;align-items:center}
.hp11-state__head b{
  font-family:'Roboto Condensed','Arial Narrow',sans-serif;
  font-weight:700;font-size:calc(var(--px) * 31);line-height:1;
  letter-spacing:.03em;text-transform:uppercase;color:#E0A93C;
}
.hp11-state__head b::after{
  content:'';display:block;
  height:calc(var(--px) * 2);margin-top:calc(var(--px) * 9);
  background:rgba(224,169,60,.6);
}
.hp11-state ul{list-style:none;margin:calc(var(--px) * 12) 0 0;padding:0}
.hp11-state li{
  display:flex;align-items:center;gap:calc(var(--px) * 16);
  height:calc(var(--px) * 41);
}
.hp11-state li svg{width:auto;height:calc(var(--px) * 28);color:#E0A93C;flex:none}
.hp11-state li a,.hp11-state li span{
  font-family:'Roboto Condensed','Arial Narrow',sans-serif;
  font-weight:700;font-size:calc(var(--px) * 27);line-height:1;
  letter-spacing:.03em;text-transform:uppercase;color:#fff;
  transition:color .2s ease;
}
.hp11-state li a:hover{color:#E0A93C}

/* ── DESKTOP base for the location-row markup ──
   The mobile redesign wrapped each city in <a class="hp11-loc"> with a pin,
   a name span and a chevron. Those pieces were styled ONLY inside the
   mobile media query at first, so desktop rendered them inline and the
   section blew out from ~1024px to 3262px — caught by the collision
   auditor, not by eye. Desktop keeps its original list appearance: the
   row lays out exactly like the old `li > svg + a` did, and the chevron
   (a touch affordance) is hidden. */
.hp11-loc{
  display:flex;align-items:center;gap:calc(var(--px) * 16);
  width:100%;text-decoration:none;
}
.hp11-loc__pin{width:auto;height:calc(var(--px) * 28);color:#E0A93C;flex:none}
.hp11-loc__name{
  font-family:'Roboto Condensed','Arial Narrow',sans-serif;
  font-weight:700;font-size:calc(var(--px) * 27);line-height:1;
  letter-spacing:.03em;text-transform:uppercase;color:#fff;
  transition:color .2s ease;
}
.hp11-loc:hover .hp11-loc__name{color:#E0A93C}
.hp11-loc__chev{display:none}
.hp11-state__count{display:none}
/* HOME BASE stays on desktop — hiding it would drop Memphis from the
   directory entirely — but as a quiet labelled lead-in, not a tinted card. */
.hp11__home{margin-bottom:calc(var(--px) * 26)}
.hp11__home-label{
  margin:0 0 calc(var(--px) * 8);
  font-family:'Roboto Condensed','Arial Narrow',sans-serif;
  font-weight:700;font-size:calc(var(--px) * 19);line-height:1;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(224,169,60,.85);
}
/* the closing "Don't see your city?" block is a mobile-only conversion
   panel; desktop's own CTA already closes the section */
.hp11__nocity{display:none}

.hp11__cta{
  display:flex;align-items:center;justify-content:center;
  gap:calc(var(--px) * 26);
  /* was a fixed 469px: the longer "See Our Full Coverage Area" label
     wrapped to two lines (76px of text in a 68px box) and spilled out of
     the gold plate. Sized to content with a floor at the original width,
     so the button can never be outgrown by its own label again — the
     width check missed this because wrapped text never exceeds
     scrollWidth; only the text-run HEIGHT revealed it. */
  width:auto;min-width:calc(var(--px) * 469);
  padding-inline:calc(var(--px) * 34);
  height:calc(var(--px) * 68);
  white-space:nowrap;
  margin:calc(var(--px) * 30) 0 0;
  background:#CA942F;color:#011329;
  border-radius:calc(var(--px) * 5);
  font-family:'Roboto Condensed','Arial Narrow',sans-serif;
  font-weight:700;font-size:calc(var(--px) * 32);
  letter-spacing:.03em;text-transform:uppercase;
  transition:background .25s ease,gap .25s ease;
}
.hp11__cta svg{width:calc(var(--px) * 36);height:calc(var(--px) * 28);flex:none}
.hp11__cta:hover{background:#E7B049;gap:calc(var(--px) * 34)}
.hp11__unsure{display:none}

@media (max-width:980px){
  .hp11{--px:clamp(.62px, calc(100vw / 545), .8px);min-height:0;padding:0 0 calc(var(--px) * 28)}
  /* Map is the section's hero: taller than before, and its bottom now fades
     into the navy ground so the art flows straight into the messaging
     instead of ending on a hard edge above an empty navy gap. */
  .hp11__map{position:relative;inset:auto;width:auto;height:calc(var(--px) * 330)}
  /* The source art is one shared image with the desktop crop (846x1024,
     nearly the full frame) — its baked "...MID-SOUTH." heading bleed (left
     edge, meant to sit BEHIND desktop's real copy panel) and its bottom-right
     "Local. Trusted. Responsive." badge both live outside the pin cluster.
     Desktop's near-full-frame crop shows both on purpose; mobile has no copy
     panel over it, so the crop is positioned to clear both rather than slice
     through either. */
  .hp11__map > picture img{object-position:center 51%}
  /* HOME BASE marker on mobile. The map is ~390px for a 1692px image, so a
     badge wide enough to hold the wordmark legibly would run from the dot
     clear past Germantown. Per the brief's own fallback ("rather than
     simply shrinking the full logo until it becomes unreadable") the
     wordmark is swapped for the site's shield-and-lock brand mark, which
     stays readable at this size. Sized in real px, not --px, so it does
     not shrink with the map. */
  /* On a 390px-wide map the whole 1692px image is on screen, so a badge
     wide enough for the wordmark spans ~26% of the map and its corner
     clips Collierville. The label is dropped here instead: the section's
     own "HOME BASE / MEMPHIS, TENNESSEE" row sits directly under the map
     and carries that meaning, so the marker only has to READ as the
     company rather than as another gold city pin. Compact branded disc,
     centred exactly on the coordinate. */
  .hp11-home{gap:0;transform:translate(-50%,-50%)}
  .hp11-home__dot{display:none}
  .hp11-home__badge{
    gap:0;padding:0;border-width:2px;border-radius:50%;
    width:26px;height:26px;align-items:center;justify-content:center;
    box-shadow:0 3px 9px rgba(0,0,0,.5);
  }
  .hp11-home__logo{display:none}
  .hp11-home__badge b{display:none}
  .hp11-home__seal{display:block}
  .hp11-home__seal svg{width:14px;height:16px}
  /* A taller banner cannot clear BOTH baked-in elements: the clean
     pin-cluster band is only ~900 raw px of the 2048px source, while a
     360px-tall window reads ~1560 raw px. Measured, not guessed. So the
     fade does the work the crop can't — the lower third dissolves to
     solid navy, which hides the baked "Local. Trusted. Responsive."
     badge AND delivers the seamless flow into the section ground. */
  .hp11__map::after{background:linear-gradient(to bottom,rgba(1,19,41,0) 34%,rgba(1,19,41,.55) 58%,rgba(1,19,41,.94) 82%,var(--ink) 93%)}
  /* the old ~44-unit gap under the map is what made the section feel like it
     restarted; the copy now begins right where the art dissolves */
  .hp11__inner{width:auto;padding:calc(var(--px) * 10) 24px 0}
  .hp11__eyebrow{white-space:normal;flex-wrap:wrap;row-gap:calc(var(--px) * 8)}
  .hp11__title{font-size:calc(var(--px) * 59); line-height:calc(var(--px) * 61)}
  .hp11__title > span{white-space:normal}
  .hp11__lede{margin-top:calc(var(--px) * 14);font-size:calc(var(--px) * 23);line-height:calc(var(--px) * 32)}
  .hp11__lede br{display:none}

  /* ── HOME BASE: Memphis reads as the home market, not one of ten ── */
  .hp11__home{margin-top:calc(var(--px) * 18)}
  .hp11__home-label{
    margin:0 0 6px;
    font-family:'Roboto Condensed','Arial Narrow',sans-serif;
    font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
    color:rgba(224,169,60,.85);
  }
  /* scoped by the parent so it outranks the generic .hp11-loc row rule
     below, which is later in the file and was flattening the home row
     back to the standard 52px */
  .hp11__home .hp11-loc--home{
    min-height:60px;
    padding:0 14px;
    background:linear-gradient(90deg, rgba(224,169,60,.15), rgba(224,169,60,.05));
    border:1px solid rgba(224,169,60,.42);
    border-radius:8px;
  }
  .hp11-loc--home .hp11-loc__name{font-size:19px;color:#F0B63A}
  .hp11-loc--home .hp11-loc__pin{color:#E9A415}
  .hp11-loc--home .hp11-loc__chev{color:rgba(233,164,21,.9)}

  /* ── premium 56-64px location rows ──
     The WHOLE row is the tap target, the chevron says it leads somewhere,
     and a hairline divider runs the full width of the container. */
  .hp11__states{grid-template-columns:1fr;row-gap:calc(var(--px) * 16)}
  .hp11__states .hp11-state--ar{margin-top:0}
  .hp11-state__head{
    display:flex;align-items:baseline;justify-content:space-between;gap:12px;
    padding-bottom:7px;margin-bottom:0;
    border-bottom:1px solid rgba(224,169,60,.45);
  }
  .hp11-state__head b{font-size:20px}
  .hp11-state__head b::after{display:none}
  /* the desktop base rule above sets display:none on these two (they are
     touch affordances); this block is later but never restated `display`,
     so they stayed hidden on mobile too — set it explicitly. */
  .hp11-state__count{
    display:block;flex:none;
    font-family:'Roboto Condensed','Arial Narrow',sans-serif;
    font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    color:rgba(255,255,255,.42);
  }
  .hp11-state ul{margin:0}
  .hp11-state__head b{line-height:1.05}
  .hp11-state li{display:block;height:auto;padding:0}
  .hp11-state li + li{border-top:1px solid rgba(255,255,255,.09)}
  .hp11-loc{
    display:flex;align-items:center;gap:12px;
    width:100%;min-height:52px;padding:0 2px;
    text-decoration:none;
    transition:color .2s ease,padding-left .2s ease;
  }
  .hp11-loc__pin{width:15px;height:auto;flex:none;color:rgba(224,169,60,.8)}
  .hp11-loc__name{
    flex:1 1 auto;min-width:0;
    font-family:'Roboto Condensed','Arial Narrow',sans-serif;
    font-weight:700;font-size:17px;line-height:1.2;
    letter-spacing:.04em;text-transform:uppercase;color:#fff;
  }
  .hp11-loc__chev{display:block;width:17px;height:17px;flex:none;color:rgba(255,255,255,.4);transition:transform .2s ease,color .2s ease}
  .hp11-loc:active .hp11-loc__name{color:#E0A93C}
  .hp11-loc:active .hp11-loc__chev{color:#E0A93C;transform:translateX(3px)}
  .hp11-loc:focus-visible{outline:2px solid #E0A93C;outline-offset:-2px;border-radius:4px}

  .hp11__cta{width:100%;min-width:0;padding-inline:14px;margin-top:calc(var(--px) * 18);height:56px;font-size:18px}

  /* ── closing conversion block, replacing the old grey one-liner ── */
  .hp11__nocity{
    display:block;margin-top:12px;padding:14px 16px 13px;
    background:rgba(255,255,255,.045);
    border-top:2px solid rgba(224,169,60,.65);
    border-radius:0 0 8px 8px;
    text-decoration:none;
  }
  .hp11__nocity b{
    display:block;
    font-family:'Roboto Condensed','Arial Narrow',sans-serif;
    font-weight:700;font-size:19px;letter-spacing:.03em;text-transform:uppercase;color:#fff;
  }
  .hp11__nocity span{
    display:block;margin-top:4px;
    font-size:14px;line-height:19px;color:rgba(255,255,255,.66);
  }
  .hp11__nocity em{
    display:flex;align-items:center;gap:8px;
    min-height:44px;margin-top:2px;font-style:normal;
    font-family:'Roboto Condensed','Arial Narrow',sans-serif;
    font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;
    color:#E0A93C;
  }
  .hp11__nocity em svg{width:16px;height:16px;flex:none;transition:transform .2s ease}
  .hp11__nocity:active{background:rgba(224,169,60,.1)}
  .hp11__nocity:active em svg{transform:translateX(3px)}
  .hp11__nocity:focus-visible{outline:2px solid #E0A93C;outline-offset:2px}
}

@media (prefers-reduced-motion:reduce){
  .hp11-loc,.hp11-loc__chev,.hp11__nocity,.hp11__nocity em svg{transition:none !important}
  .hp11-loc:active .hp11-loc__chev,.hp11__nocity:active em svg{transform:none}
}


/* ══════════════════════════════════════════════════════════════
   HP-12 — Emergency CTA  (mockup 1536×1024)
   near-black ground, lock photo top-right, navy signature band
   ══════════════════════════════════════════════════════════════ */
.hp12{
  --cw:1536;
  --ink:#00050A;
  position:relative;
  background:var(--ink);
  color:#fff;
  overflow:hidden;
  text-align:center;
}
.hp12__lock{
  position:absolute;top:0;right:0;
  width:calc(var(--px) * 496);height:calc(var(--px) * 522);
  pointer-events:none;
}
.hp12__lock img{width:100%;height:100%;object-fit:cover;display:block}
.hp12__lock::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(to right,var(--ink) 0%,rgba(0,5,10,.6) 26%,rgba(0,5,10,0) 62%),
    linear-gradient(to bottom,rgba(0,5,10,0) 62%,var(--ink) 100%);
}
.hp12__body{position:relative;padding:calc(var(--px) * 29) calc(var(--px) * 75) calc(var(--px) * 30)}

.hp12__seal{position:relative;display:flex;align-items:center;justify-content:center}
.hp12__seal::before{
  content:'';position:absolute;left:0;right:0;top:50%;
  height:calc(var(--px) * 2);background:rgba(224,169,60,.55);
}
.hp12__seal svg{
  position:relative;width:auto;height:calc(var(--px) * 57);
  color:#E0A93C;background:var(--ink);padding:0 calc(var(--px) * 14);
}

.hp12__title{margin:calc(var(--px) * 12) 0 0;text-align:left}
.hp12__title span{
  display:block;white-space:nowrap;
  font-family:'Anton','Arial Narrow',sans-serif;
  font-weight:400;line-height:1;text-transform:uppercase;
  color:#F2F2F2;
}
.hp12__title span:first-child{font-size:calc(var(--px) * 177);letter-spacing:.015em}
.hp12__title span:last-child{font-size:calc(var(--px) * 148);letter-spacing:.03em;margin-top:calc(var(--px) * 18)}

.hp12__sub{
  position:relative;
  display:flex;align-items:center;
  gap:calc(var(--px) * 26);
  margin-top:calc(var(--px) * 30);
}
.hp12__sub::before,.hp12__sub::after{
  content:'';display:block;height:calc(var(--px) * 3);background:rgba(224,169,60,.75);
}
.hp12__sub::before{width:calc(var(--px) * 130);flex:none}
.hp12__sub::after{flex:1}
.hp12__sub b{
  font-family:'Roboto Condensed','Arial Narrow',sans-serif;
  font-weight:700;font-size:calc(var(--px) * 70);line-height:1;
  letter-spacing:.11em;text-transform:uppercase;white-space:nowrap;
}

.hp12__call{
  display:flex;align-items:center;justify-content:center;
  gap:calc(var(--px) * 34);
  height:calc(var(--px) * 214);
  margin-top:calc(var(--px) * 39);
  border:calc(var(--px) * 4) solid #E0A93C;
  border-radius:calc(var(--px) * 18);
  transition:background .25s ease;
}
.hp12__call:hover{background:rgba(224,169,60,.08)}
.hp12__call i{
  font-style:normal;
  font-family:'Anton','Arial Narrow',sans-serif;
  font-size:calc(var(--px) * 116);line-height:1;
  letter-spacing:.02em;text-transform:uppercase;color:#F2F2F2;
}
.hp12__call b{
  display:block;
  font-family:'Anton','Arial Narrow',sans-serif;
  font-weight:400;font-size:calc(var(--px) * 201);line-height:1;
  color:#E0A93C;white-space:nowrap;
  transform:scaleX(.9);transform-origin:left center;
}

.hp12__hours{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  gap:calc(var(--px) * 26);
  margin-top:calc(var(--px) * 30);
}
.hp12__hours::before,.hp12__hours::after{
  content:'';display:block;flex:1;
  height:calc(var(--px) * 3);background:rgba(224,169,60,.7);
}
.hp12__hours svg{width:auto;height:calc(var(--px) * 96);color:#E0A93C;flex:none}
.hp12__hours b{
  font-family:'Anton','Arial Narrow',sans-serif;
  font-weight:400;font-size:calc(var(--px) * 84);line-height:1;
  letter-spacing:.01em;text-transform:uppercase;white-space:nowrap;
}

.hp12__band{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  height:calc(var(--px) * 156);
  background:#001127;
}
.hp12__band img{width:calc(var(--px) * 616);height:auto;display:block}

@media (max-width:900px){
  .hp12{--px:clamp(.62px, calc(100vw / 545), .8px)}
  .hp12__lock{width:100%;height:calc(var(--px) * 320)}
  .hp12__body{padding:calc(var(--px) * 40) calc(var(--px) * 32) calc(var(--px) * 44)}
  .hp12__title span:first-child{font-size:calc(var(--px) * 104)}
  .hp12__title span:last-child{font-size:calc(var(--px) * 88)}
  .hp12__sub b{font-size:calc(var(--px) * 40)}
  .hp12__sub::before{width:calc(var(--px) * 40)}
  .hp12__call{flex-direction:column;gap:calc(var(--px) * 6);height:auto;padding:calc(var(--px) * 24)}
  .hp12__call i{font-size:calc(var(--px) * 56)}
  .hp12__call b{font-size:calc(var(--px) * 92);transform:none}
  .hp12__hours svg{height:calc(var(--px) * 60)}
  .hp12__hours b{font-size:calc(var(--px) * 46)}
}


/* ══════════════════════════════════════════════════════════════
   HP-13 — Lead form  (mockup 1536×1024)
   light ground · cards 98–1430 · form panel 98–1430
   ══════════════════════════════════════════════════════════════ */
.hp13{
  --cw:1536;
  background:#F9F9F9;
  color:#02143A;
  padding:calc(var(--px) * 58) calc(var(--px) * 98) calc(var(--px) * 62);
  text-align:center;
}
/* .hp13__logo removed 2026-08-24 — the mark already appears in the header,
   the drawer and the footer; a fourth instance directly above "How Can We
   Help?" was redundant clutter between Service Areas and the contact form. */
.hp13__title{
  display:flex;justify-content:center;
  margin:0;
  font-size:calc(var(--px) * 108);    /* → 93px cap height */
  color:#02143A;
  --sx:.90;
}
.hp13__lede{
  margin:calc(var(--px) * 14) 0 0;
  font-size:calc(var(--px) * 24);line-height:1.3;color:#0A1730;
}
.hp13__seal{position:relative;display:flex;align-items:center;justify-content:center;margin-top:calc(var(--px) * 14)}
.hp13__seal::before{content:'';position:absolute;left:calc(var(--px) * 350);right:calc(var(--px) * 350);top:50%;
  height:calc(var(--px) * 2);background:rgba(213,149,38,.6)}
.hp13__seal svg{position:relative;width:auto;height:calc(var(--px) * 30);color:#D59526;background:#F9F9F9;padding:0 calc(var(--px) * 12)}

.hp13__choices{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:calc(var(--px) * 28);
  margin-top:calc(var(--px) * 8);
}
.hp13-choice{
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  height:calc(var(--px) * 364);
  padding:calc(var(--px) * 22) calc(var(--px) * 12) calc(var(--px) * 20);
  background:#FCFCFC;
  border:calc(var(--px) * 2) solid #02143A;
  border-radius:calc(var(--px) * 12);
  cursor:pointer;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.hp13-choice.is-active,.hp13-choice:hover{border-color:#D59526;box-shadow:0 calc(var(--px) * 6) calc(var(--px) * 18) rgba(213,149,38,.18)}
.hp13-choice__disc{
  display:grid;place-items:center;
  width:calc(var(--px) * 128);height:calc(var(--px) * 128);
  border-radius:50%;background:#EDEDED;
}
.hp13-choice__disc svg{width:calc(var(--px) * 72);height:calc(var(--px) * 72);color:#02143A;display:block}
.hp13-choice b{
  margin-top:calc(var(--px) * 15);
  font-family:'Roboto Condensed','Arial Narrow',sans-serif;
  font-weight:700;font-size:calc(var(--px) * 28);line-height:1;
  letter-spacing:.02em;text-transform:uppercase;color:#02143A;
}
.hp13-choice hr{
  width:calc(var(--px) * 110);height:calc(var(--px) * 2);
  margin:calc(var(--px) * 14) 0 0;background:#D59526;border:0;
}
.hp13-choice p{
  margin-top:calc(var(--px) * 14);
  font-size:calc(var(--px) * 18);line-height:calc(var(--px) * 23);color:#16233C;
}
.hp13-choice__go{
  display:grid;place-items:center;
  width:calc(var(--px) * 44);height:calc(var(--px) * 44);
  margin-top:auto;border-radius:50%;background:#D59526;
}
.hp13-choice__go svg{width:calc(var(--px) * 22);height:calc(var(--px) * 18);color:#fff;display:block}

/* form */
.hp13__form{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:calc(var(--px) * 30) calc(var(--px) * 42);
  margin-top:calc(var(--px) * 14);
  padding:calc(var(--px) * 22) calc(var(--px) * 50) calc(var(--px) * 24);
  background:#FBFBFB;
  border-radius:calc(var(--px) * 10);
  text-align:left;
}
.hp13__form label{
  display:block;
  font-family:'Roboto Condensed','Arial Narrow',sans-serif;
  font-weight:700;font-size:calc(var(--px) * 22);line-height:1;
  letter-spacing:.03em;text-transform:uppercase;color:#02143A;
}
.hp13__field{position:relative;margin-top:calc(var(--px) * 11)}
.hp13__field input,.hp13__field select{
  width:100%;height:calc(var(--px) * 52);
  padding:0 calc(var(--px) * 44) 0 calc(var(--px) * 16);
  font-family:'Roboto','Helvetica Neue',Arial,sans-serif;
  font-size:calc(var(--px) * 22);
  color:#02143A;background:#fff;
  border:calc(var(--px) * 1) solid #D6D6D8;
  border-radius:calc(var(--px) * 5);
  appearance:none;
}
.hp13__field input::placeholder{color:#9AA0AB}
.hp13__field input:focus,.hp13__field select:focus{outline:calc(var(--px) * 2) solid #D59526;outline-offset:0;border-color:#D59526}
.hp13__field svg{
  position:absolute;right:calc(var(--px) * 15);top:50%;transform:translateY(-50%);
  width:auto;height:calc(var(--px) * 24);color:#5A6478;pointer-events:none;
}
.hp13__submit{
  grid-column:2;
  display:flex;align-items:center;justify-content:center;
  gap:calc(var(--px) * 22);
  height:calc(var(--px) * 59);
  background:#D59526;color:#02143A;
  border:0;border-radius:calc(var(--px) * 5);
  font-family:'Roboto Condensed','Arial Narrow',sans-serif;
  font-weight:700;font-size:calc(var(--px) * 30);
  letter-spacing:.03em;text-transform:uppercase;
  cursor:pointer;
  transition:background .25s ease,gap .25s ease;
}
.hp13__submit svg{width:calc(var(--px) * 30);height:calc(var(--px) * 24);flex:none}
.hp13__submit:hover{background:#E7B049;gap:calc(var(--px) * 28)}

.hp13__foot{
  display:flex;align-items:center;justify-content:center;
  gap:calc(var(--px) * 34);
  margin-top:calc(var(--px) * 18);
  padding-top:calc(var(--px) * 18);
  border-top:calc(var(--px) * 1) solid #DEDEDE;
  text-align:left;
}
.hp13__foot-call{display:flex;align-items:center;gap:calc(var(--px) * 22)}
/* `.hp13__foot-call span{display:block}` further down is (0,1,1) and this
   was (0,1,0), so the disc silently computed to display:block and the
   handset sat flush at the TOP of the navy circle — 24px above centre on
   desktop, 17px on mobile — no matter what place-items said. Qualified
   here so grid actually applies. Same class+element-beats-class trap that
   hit .hp11__extra earlier; check specificity, not just source order. */
.hp13__foot-call span.hp13__foot-disc{
  display:grid;place-items:center;flex:none;
  width:calc(var(--px) * 92);height:calc(var(--px) * 92);
  border-radius:50%;background:#02143A;
  line-height:0;   /* the inherited 38px line-height has no business here */
}
/* the svg now IS the handset (viewBox fitted to the path), so this size is
   the glyph size: 37/92 = 40% of the circle, mid-range of the 38-42% ask */
.hp13__foot-disc svg{width:calc(var(--px) * 37);height:calc(var(--px) * 37);color:#D59526;display:block}
.hp13__foot-call b{
  display:block;
  font-family:'Roboto Condensed','Arial Narrow',sans-serif;
  font-weight:700;font-size:calc(var(--px) * 32);line-height:1;
  letter-spacing:.02em;text-transform:uppercase;color:#02143A;
}
.hp13__foot-call span{
  display:block;margin-top:calc(var(--px) * 10);
  font-family:'Roboto Condensed','Arial Narrow',sans-serif;
  font-weight:700;font-size:calc(var(--px) * 38);line-height:1;
  letter-spacing:.01em;text-transform:uppercase;color:#02143A;
}
.hp13__foot-call span a{color:#D59526}
.hp13__foot-div{width:calc(var(--px) * 2);height:calc(var(--px) * 84);background:rgba(213,149,38,.7);flex:none}
.hp13__foot-247{display:flex;align-items:center;gap:calc(var(--px) * 20)}
.hp13__foot-247 svg{width:auto;height:calc(var(--px) * 74);color:#02143A;flex:none}
.hp13__foot-247 b{
  display:block;
  font-family:'Roboto Condensed','Arial Narrow',sans-serif;
  font-weight:700;font-size:calc(var(--px) * 26);line-height:1;
  letter-spacing:.02em;text-transform:uppercase;color:#02143A;
}
.hp13__foot-247 p{margin-top:calc(var(--px) * 9);font-size:calc(var(--px) * 21);line-height:calc(var(--px) * 27);color:#16233C}

@media (max-width:1080px){
  .hp13{--px:clamp(.62px, calc(100vw / 545), .8px);padding:calc(var(--px) * 44) calc(var(--px) * 32) calc(var(--px) * 50)}
  .hp13__title{font-size:calc(var(--px) * 74)}
  .hp13__title > span{white-space:normal}
  .hp13__seal::before{left:0;right:0}
  .hp13__choices{grid-template-columns:repeat(2,1fr)}
  .hp13__form{grid-template-columns:1fr;padding:calc(var(--px) * 28)}
  .hp13__submit{grid-column:1}
  .hp13__foot{flex-direction:column;align-items:flex-start;gap:calc(var(--px) * 26)}
  .hp13__foot-div{display:none}
}


/* ══════════════════════════════════════════════════════════════
   HP-14 — Footer  (mockup 1717×916)
   RE-CUT to a 1536 canvas alongside HP-04. The 181 units came from
   the brand column, the inter-column gutters and the outer padding
   — never from the link columns, whose text is nowrap at a fixed
   size and would have overflowed.
   navy ground · 6 nav columns + contact · signature bar below
   ══════════════════════════════════════════════════════════════ */
.hp14{
  --cw:1536;
  --ink:#00142A;
  background:var(--ink);
  color:#fff;
  border-top:calc(var(--px) * 2) solid #C9922C;
}
.hp14__grid{
  display:grid;
  grid-template-columns:calc(var(--px) * 430) repeat(4, max-content) minmax(0, 1fr);
  padding:calc(var(--px) * 44) calc(var(--px) * 38) calc(var(--px) * 52);
}
.hp14__grid > * + *{
  padding-left:calc(var(--px) * 22);
  border-left:calc(var(--px) * 1) solid rgba(255,255,255,.14);
}

.hp14__brand img{width:calc(var(--px) * 370);height:auto;display:block}
.hp14__tag{
  margin-top:calc(var(--px) * 30);
  font-family:'Cinzel',Georgia,'Times New Roman',serif;
  font-style:italic;
  font-size:calc(var(--px) * 34);
  line-height:calc(var(--px) * 42);
  text-align:center;
  color:#D2952B;
}
.hp14__brand hr{
  width:calc(var(--px) * 348);height:calc(var(--px) * 1);
  margin:calc(var(--px) * 24) 0 0;
  background:rgba(201,146,44,.6);border:0;
}
.hp14__brand p{
  margin-top:calc(var(--px) * 20);
  max-width:calc(var(--px) * 400);
  font-size:calc(var(--px) * 21);
  line-height:calc(var(--px) * 31);
  color:rgba(255,255,255,.92);
}

.hp14-col h3{
  font-family:'Roboto Condensed','Arial Narrow',sans-serif;
  font-weight:700;font-size:calc(var(--px) * 30);line-height:1;
  letter-spacing:.03em;text-transform:uppercase;color:#E0A93C;
}
.hp14-col h3::after{
  content:'';display:block;
  width:calc(var(--px) * 106);height:calc(var(--px) * 3);
  margin-top:calc(var(--px) * 12);
  background:#C9922C;
}
.hp14-col ul{list-style:none;margin:calc(var(--px) * 22) 0 0;padding:0}
.hp14-col li + li{margin-top:calc(var(--px) * 18)}
.hp14-col a{
  display:flex;align-items:baseline;gap:calc(var(--px) * 14);
  font-size:calc(var(--px) * 22);line-height:1.2;white-space:nowrap;
  color:#fff;transition:color .2s ease;
}
.hp14-col a::before{
  content:'›';
  font-family:'Roboto Condensed','Arial Narrow',sans-serif;
  font-weight:700;font-size:calc(var(--px) * 26);color:#E0A93C;
}
.hp14-col a:hover{color:#E0A93C}
.hp14__contact a{display:inline;gap:0}
.hp14__contact a::before{content:none}

.hp14__contact ul{list-style:none;margin:calc(var(--px) * 22) 0 0;padding:0}
.hp14__contact li{display:flex;align-items:center;gap:calc(var(--px) * 18);padding:calc(var(--px) * 4) 0}
.hp14__contact li + li{
  margin-top:calc(var(--px) * 12);
  padding-top:calc(var(--px) * 16);
  border-top:calc(var(--px) * 1) solid rgba(201,146,44,.5);
}
.hp14__contact svg{width:auto;height:calc(var(--px) * 46);color:#E0A93C;flex:none}
.hp14__contact p,.hp14__contact a{font-size:calc(var(--px) * 23);line-height:calc(var(--px) * 31);color:#fff}
.hp14__contact small{white-space:nowrap}
.hp14__contact a:hover{color:#E0A93C}
.hp14__contact em{display:block;font-style:normal;color:#D2952B}

.hp14__bar{
  display:grid;
  grid-template-columns:auto auto auto minmax(0, 1fr);
  align-items:center;
  padding:calc(var(--px) * 32) calc(var(--px) * 38);
  background:#011125;
  border-top:calc(var(--px) * 2) solid #C9922C;
}
.hp14__bar > * + *{
  padding-left:calc(var(--px) * 26);
  border-left:calc(var(--px) * 1) solid rgba(255,255,255,.14);
}
.hp14__bar > :last-child{border-left:0}
.hp14__cop{display:flex;align-items:center;gap:calc(var(--px) * 20)}
.hp14__cop svg{width:auto;height:calc(var(--px) * 44);color:#C9922C;flex:none}
.hp14__cop p{font-size:calc(var(--px) * 21);line-height:calc(var(--px) * 30)}
.hp14__lic,.hp14__aloa{display:flex;align-items:center;gap:calc(var(--px) * 22)}
.hp14__lic svg,.hp14__aloa svg{width:auto;height:calc(var(--px) * 62);color:#C9922C;flex:none}
.hp14__lic b,.hp14__aloa b{
  display:block;
  font-family:'Roboto Condensed','Arial Narrow',sans-serif;
  font-weight:700;font-size:calc(var(--px) * 25);line-height:1;
  letter-spacing:.02em;text-transform:uppercase;color:#fff;
}
.hp14__lic span,.hp14__aloa span{
  display:block;margin-top:calc(var(--px) * 10);
  font-size:calc(var(--px) * 20);line-height:calc(var(--px) * 26);color:#D2952B;
}
.hp14__social{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:calc(var(--px) * 12)}
.hp14__social a{
  display:grid;place-items:center;
  width:calc(var(--px) * 64);height:calc(var(--px) * 64);
  border-radius:50%;
  transition:transform .2s ease;
}
.hp14__social a:hover{transform:translateY(calc(var(--px) * -3))}
.hp14__social svg{width:calc(var(--px) * 36);height:calc(var(--px) * 36);display:block}
.hp14__grate{
  width:auto !important;height:auto !important;border-radius:calc(var(--px) * 6) !important;
  grid-auto-flow:column;place-items:center;gap:calc(var(--px) * 10);
  padding:calc(var(--px) * 8) calc(var(--px) * 11);
  background:#fff;color:#02143A;text-decoration:none;
}
.hp14__grate svg{width:calc(var(--px) * 30);height:calc(var(--px) * 30)}
.hp14__grate b{
  display:block;
  font-family:'Roboto Condensed','Arial Narrow',sans-serif;
  font-weight:700;font-size:calc(var(--px) * 24);line-height:1;letter-spacing:.02em;color:#02143A;
}
.hp14__grate span span{
  display:block;margin-top:calc(var(--px) * 4);
  font-size:calc(var(--px) * 15);line-height:1.15;color:#4A5468;
}
.hp14__social .fb{background:#1877F2}
.hp14__social .gg{background:#fff}
.hp14__social .yp{background:#D32323}

@media (max-width:1100px){
  .hp14{--px:clamp(.62px, calc(100vw / 545), .8px)}
  .hp14__grid{grid-template-columns:repeat(2,1fr);gap:calc(var(--px) * 44);padding:calc(var(--px) * 44) calc(var(--px) * 36)}
  .hp14__grid > * + *{padding-left:0;border-left:0}
  .hp14__brand{grid-column:1 / -1}
  .hp14__bar{grid-template-columns:1fr;gap:calc(var(--px) * 30);padding:calc(var(--px) * 36)}
  .hp14__bar > * + *{padding-left:0;border-left:0}
  .hp14__social{justify-content:flex-start}
  .hp14__brand{text-align:center}
  .hp14__brand img{margin:0 auto}
  .hp14__brand hr{margin-left:auto;margin-right:auto}
  .hp14__brand p{max-width:46ch;margin-left:auto;margin-right:auto}
  .hp14-col a{white-space:normal}
}
@media (max-width:620px){
  .hp14__grid{grid-template-columns:1fr;gap:calc(var(--px) * 40)}
  .hp14__contact li + li{padding-top:calc(var(--px) * 22)}
}

/* ══════════════════════════════════════════════════════════════
   HP-14M · Footer accordion (Phase E, mobile only)
   Client ask: collapse the footer into SERVICES+/SERVICE AREAS+/
   COMPANY+/CONTACT+ groups, keep only copyright/license/legal
   always visible. The desktop 5-column grid (.hp14__grid) and the
   utility link row (.hp14__util) are hidden wholesale on mobile —
   same hide-and-replace pattern as Phase A/B, not a shared-DOM
   restructure — and this new block carries the same real links,
   regrouped: the 4 service nav columns merge into one Services
   accordion (sub-headed by category so nothing reads as flattened),
   Service Areas reuses hp11's own city list verbatim, Company is
   deliberately just About Us + Reviews (nothing invented — "Our
   Work" was dropped from the footer earlier this session for not
   having page depth yet, not reinstated here), Contact mirrors
   .hp14__contact. .hp14__bar (copyright/license/ALOA/social) is
   completely untouched and sits below this, unconditionally visible
   regardless of which accordion is open or closed.
   Native <details>/<summary> — no JS needed for open/close, keyboard
   and screen-reader accessible by default, consistent with this
   site's preference for native browser mechanics over custom JS
   (native scroll, scroll-snap carousels, this).
   ══════════════════════════════════════════════════════════════ */
.hp14m{display:none}
@media (max-width:900px){
  .hp14__grid{display:none}
  .hp14m{
    display:block;
    padding:8px 24px 6px;
  }
  .hp14m-acc{border-bottom:1px solid rgba(255,255,255,.12)}
  .hp14m-acc summary{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:18px 2px;
    font-family:'Roboto Condensed','Arial Narrow',sans-serif;
    font-weight:700;font-size:18px;letter-spacing:.03em;text-transform:uppercase;
    color:#fff;cursor:pointer;list-style:none;
  }
  .hp14m-acc summary::-webkit-details-marker{display:none}
  .hp14m-acc__chev{width:18px;height:18px;color:#E0A93C;flex:none;transition:transform .25s ease}
  .hp14m-acc[open] .hp14m-acc__chev{transform:rotate(180deg)}
  /* Explicit rather than relying on the UA stylesheet's own
     details:not([open]) hiding — verified via a bare, siteless test page
     that this Chrome build renders a closed <details>' body at full
     height/display:block regardless, so the native collapse can't be
     trusted here. CSS-only, still no JS needed for open/close. */
  .hp14m-acc:not([open]) .hp14m-acc__body{display:none}
  .hp14m-acc__body{padding:0 2px 20px}
  .hp14m-acc__sub{
    margin:16px 0 8px;
    font-family:'Roboto Condensed','Arial Narrow',sans-serif;
    font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
    color:#E0A93C;
  }
  .hp14m-acc__sub:first-child{margin-top:0}
  .hp14m-acc__body ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
  .hp14m-acc__body a{
    display:block;font-size:15px;line-height:1.3;color:rgba(255,255,255,.88);
  }
  .hp14m-acc__body a:hover{color:#E0A93C}
  .hp14m-acc__body--contact li{color:rgba(255,255,255,.88);font-size:15px;line-height:1.4}
  .hp14m-acc__body--contact em{display:block;margin-top:2px;font-style:normal;color:#D2952B}
}


/* ════════════════════════════════════════════════════════════
   HP-03 — "What Can We Help You With?"
   Rebuilt 1:1 from HP-03-What-Can-We-Help.png (1536×1024).

   --u is the section's scale unit and --px is one mockup pixel,
   so calc(var(--px) * N) === N px of the mockup. Every length
   below is the mockup's own measurement expressed that way,
   which keeps the section scaling as one rigid unit.

   Sampled palette: navy #001231 · gold #D4A239 / #E5A93B
   ════════════════════════════════════════════════════════════ */

.hp03{
  --navy:#001231;
  --gold:#D4A239;        /* gold on the light background */
  --gold-br:#E5A93B;     /* gold on navy — reads brighter in the mockup */
  --grey:#5F6062;
  --bg:#F3F3F3;
  --sx:.836;             /* horizontal compression of the display face */
  --sx-card:.806;

  /* 1536px-wide mockup → --u = 16px at a 1536px viewport */
  --u:calc(100vw / 96);
  --px:min(1px, calc(100vw / 1536));
  --frame:calc(var(--px) * 1536);
  --slack:max(0px, calc((100vw - var(--frame)) / 2));

  font-size:var(--u);
  background:var(--bg);
  padding:calc(var(--px) * 40) 0 calc(var(--px) * 29);
  font-family:'Roboto','Helvetica Neue',Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

.hp03__inner{
  width:calc(var(--px) * 1481);
  max-width:100%;
  margin:0 auto;
}

/* ── Eyebrow ──────────────────────────────────────────────── */
.hp03__eyebrow{
  display:flex; align-items:center; justify-content:center;
  gap:calc(var(--px) * 17);
  color:var(--gold);
  font-family:'Roboto Condensed','Arial Narrow',sans-serif;
  font-weight:700;
  font-size:calc(var(--px) * 23);
  line-height:1;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.hp03__eyebrow::before,
.hp03__eyebrow::after{
  content:''; display:block; flex:none;
  width:calc(var(--px) * 39);
  height:calc(var(--px) * 3);
  background:currentColor;
}

/* ── Headline ─────────────────────────────────────────────── */
.hp03__title{
  display:flex; justify-content:center;
  margin:calc(var(--px) * 14) 0 0;
  color:var(--navy);
  font-family:'Anton','Arial Narrow',sans-serif;
  font-weight:400;
  font-size:calc(var(--px) * 112);   /* → 97px cap height */
  line-height:1;
  text-transform:uppercase;
}
.hp03__title span{
  display:block; white-space:nowrap;
  transform:scaleX(var(--sx));
  transform-origin:center;
}

.hp03__rule{
  width:calc(var(--px) * 147);
  height:calc(var(--px) * 4);
  margin:calc(var(--px) * 12) auto 0;
  background:var(--gold);
  border:0;
}

/* ── Card grid ────────────────────────────────────────────── */
.hp03__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:calc(var(--px) * 13.67);
  /* tightened 25 -> 17: the gold rule under the headline was sitting too
     far off the top of the cards */
  margin-top:calc(var(--px) * 17);
}

.hp03-card{
  position:relative;
  display:flex; flex-direction:column;
  aspect-ratio:360 / 662;
  padding:calc(var(--px) * 30);
  border-radius:calc(var(--px) * 10);
  overflow:hidden;
  background:var(--navy);
  color:#fff;
  box-shadow:0 calc(var(--px) * 4) calc(var(--px) * 12) rgba(0,18,49,.14);
  isolation:isolate;
}

/* photo, then a fade that lands on solid navy exactly where the photo ends */
.hp03-card__photo{
  position:absolute; inset:0 0 auto; z-index:-2;
  width:100%; height:50%;
  object-fit:cover;
  transition:transform .6s cubic-bezier(.4,0,.2,1);
}
.hp03-card__photo-fade{
  position:absolute; inset:0 0 auto; z-index:-1;
  width:100%; height:50%;
  background:linear-gradient(to bottom,
    rgba(0,18,49,0)   0%,
    rgba(0,18,49,.12) 46%,
    rgba(0,18,49,.48) 68%,
    rgba(0,18,49,.86) 86%,
    var(--navy)       100%);
}

.hp03-card__icon{
  width:calc(var(--px) * 66);
  height:calc(var(--px) * 70);
  margin-top:calc(var(--px) * 257);   /* icon top = 287px below the card top */
  color:var(--gold-br);
  flex:none;
}
.hp03-card__icon svg{width:100%;height:100%;display:block}

.hp03-card__title{
  margin:calc(var(--px) * 29) 0 0;
  font-family:'Anton','Arial Narrow',sans-serif;
  font-weight:400;
  font-size:calc(var(--px) * 59);     /* → 51px cap height */
  line-height:1;
  text-transform:uppercase;
  color:#fff;
}
.hp03-card__title span{
  display:block; white-space:nowrap;
  transform:scaleX(var(--sx-card));
  transform-origin:left center;
}

.hp03-card__rule{
  width:calc(var(--px) * 65);
  height:calc(var(--px) * 4);
  margin:calc(var(--px) * 17) 0 0;
  background:var(--gold-br);
  border:0;
}

.hp03-card__copy{
  margin:calc(var(--px) * 17) 0 0;
  font-size:calc(var(--px) * 20);
  line-height:calc(var(--px) * 33);
  color:#fff;
}

.hp03-card__link{
  margin-top:calc(var(--px) * 37);
  display:flex; align-items:center;
  gap:calc(var(--px) * 14);
  white-space:nowrap;
  color:var(--gold-br);
  font-family:'Roboto Condensed','Arial Narrow',sans-serif;
  font-weight:700;
  font-size:calc(var(--px) * 22);
  line-height:1;
  letter-spacing:.015em;
  text-transform:uppercase;
  transition:gap .25s cubic-bezier(.4,0,.2,1);
}
.hp03-card__link svg{
  width:calc(var(--px) * 40);
  height:calc(var(--px) * 32);
  flex:none;
}
.hp03-card:hover .hp03-card__link{gap:calc(var(--px) * 26)}
.hp03-card:hover .hp03-card__photo{transform:scale(1.04)}

.hp03-card__hit{position:absolute;inset:0;z-index:1}
.hp03-card:focus-within{outline:calc(var(--px) * 3) solid var(--gold);outline-offset:calc(var(--px) * 3)}
.hp03-card__hit:focus-visible{outline:none}

/* ── Trust bar ────────────────────────────────────────────── */
.hp03__trust{
  display:flex; align-items:center; justify-content:center;
  gap:calc(var(--px) * 25);
  margin-top:calc(var(--px) * 32);
  color:var(--navy);
}
/* the shield is taller than the text row — let it overflow rather
   than push the "proudly serving" line down */
.hp03__shield{
  width:calc(var(--px) * 51);
  height:calc(var(--px) * 62);
  margin-top:calc(var(--px) * -3);
  margin-bottom:calc(var(--px) * -31);
  color:var(--gold); flex:none;
}
.hp03__shield svg{width:100%;height:100%;display:block}
.hp03__trust b{
  font-family:'Roboto Condensed','Arial Narrow',sans-serif;
  font-weight:700;
  font-size:calc(var(--px) * 24);
  line-height:1;
  letter-spacing:.03em;
  text-transform:uppercase;
}
.hp03__pipe{
  width:calc(var(--px) * 4);
  height:calc(var(--px) * 35);
  background:var(--gold); flex:none;
}

.hp03__serving{
  margin:calc(var(--px) * 12) 0 0;
  text-align:center;
  color:var(--grey);
  font-size:calc(var(--px) * 23);
  line-height:1.3;
}

/* ── Responsive: 2-up, then 1-up ──────────────────────────── */
@media (max-width:1239px){
  .hp03{--u:min(1.655px, calc(100vw / 58)); --px:min(1px, calc(100vw / 928)); padding:calc(var(--px) * 56) 0 calc(var(--px) * 40)}
  .hp03__inner{width:calc(var(--px) * 733.67)}   /* 2 cards + gap */
  .hp03__grid{grid-template-columns:repeat(2,1fr)}
  /* NB: do NOT hide these <br>s — with display:none the words either side
     run together ("door"+"hardware" -> "doorhardware"). Let them break. */
  .hp03__title{font-size:calc(var(--px) * 84)}
}
@media (max-width:767px){
  .hp03{--u:min(1.655px, calc(100vw / 24.5)); --px:min(1px, calc(100vw / 392)); padding:calc(var(--px) * 48) 0 calc(var(--px) * 36)}
  .hp03__inner{width:calc(var(--px) * 360)}      /* 1 card */
  .hp03__grid{grid-template-columns:1fr; gap:calc(var(--px) * 20)}
  .hp03__title{font-size:calc(var(--px) * 62); line-height:1.05}
  .hp03__title span{white-space:normal; text-align:center}
  .hp03__eyebrow{font-size:calc(var(--px) * 17); gap:calc(var(--px) * 12)}
  .hp03__eyebrow::before,.hp03__eyebrow::after{width:calc(var(--px) * 24)}
  .hp03__trust{flex-wrap:wrap; gap:calc(var(--px) * 12) calc(var(--px) * 16); text-align:center}
  .hp03__trust b{font-size:calc(var(--px) * 19)}
  .hp03__shield{margin-top:0;margin-bottom:0}
  .hp03__pipe{display:none}
  .hp03__serving{font-size:calc(var(--px) * 16)}
}

@media (prefers-reduced-motion:reduce){
  .hp03-card__photo,.hp03-card__link{transition:none}
  .hp03-card:hover .hp03-card__photo{transform:none}
}

/* the kept nav links target standalone anchor spans, never the sections
   themselves — the original stylesheet still has #services / #commercial /
   #access-control rules that would otherwise re-style the new markup. */
/* these ids still match the old stylesheet's #services / #commercial / ...
   rules (id beats class), which gave the spans real padding — hence !important:
   an anchor is a jump target and must never occupy layout. */
.qsl-anchor{
  display:block !important;
  height:0 !important; min-height:0 !important;
  margin:0 !important; padding:0 !important;
  border:0 !important; background:none !important;
  overflow:hidden !important; visibility:hidden;
}
/* The 4 hp03 markers live INSIDE their card (as siblings they were grid
   items and each silently consumed a cell, breaking the desktop 4-up row
   into a 2x2 with an empty column between every card). Absolute so they
   take no part in the card's flex flow, and pinned to top:0 so the jump
   target is the card's real top edge — as a static first child the marker
   sat at the CONTENT box start, which is 148px down on mobile because the
   card reserves that space for its photo. */
.hp03-card{position:relative}
.hp03-card > .qsl-anchor{position:absolute; top:0; left:0}
html{scroll-padding-top:104px}


/* ══════════════════════════════════════════════════════════════
   HP-A — Automotive Locksmith Services  (reference 1400×1123)
   paper ground · content 38–798 · photo 790–1400 · frame 38–1358

   Replaces the former Safes feature. Built on the same scale
   system as every other section: --cw is the reference canvas and
   every length is calc(var(--px) * N) taken off that reference.
   ══════════════════════════════════════════════════════════════ */
.hpA{
  --cw:1400;
  --paper:#F4F4F4;
  --ink:#001026;
  --g:#D2941F;
  --g-br:#E5A126;
  --btn:#DA9B23;
  background:var(--paper);
  color:#011229;
  box-sizing:border-box;
  /* min-height dropped 2026-08-23: the callbar + foot bands were removed
     on the client's instruction, so content now defines the height */
  padding:calc(var(--px) * 35) calc(var(--px) * 42) calc(var(--px) * 48) calc(var(--px) * 38);
  overflow:hidden;
}
.hpA__media{position:absolute;top:0;right:0;width:calc(var(--px) * 630);height:calc(var(--px) * 584)}
.hpA__media img{width:100%;height:100%;object-fit:cover;display:block}
.hpA__media::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to right,var(--paper) 0%,rgba(244,244,244,.42) 5%,rgba(244,244,244,0) 16%);
}
.hpA__inner{position:relative;width:calc(var(--px) * 760)}

.hpA__eyebrow{
  display:inline-block;color:var(--g);
  font-size:calc(var(--px) * 25);letter-spacing:.05em;
  transform:scaleX(.81);transform-origin:left center;
}
.hpA__eyebrow-rule{
  width:calc(var(--px) * 46);height:calc(var(--px) * 4);
  margin:calc(var(--px) * 12) 0 0;background:var(--g);border:0;
}
.hpA__title{
  margin:calc(var(--px) * 18) 0 0;
  font-size:calc(var(--px) * 90);
  line-height:.967;
  color:#011229;
  --sx:.90;
}
.hpA__lede{
  margin:calc(var(--px) * 23) 0 0;
  font-size:calc(var(--px) * 20);
  line-height:calc(var(--px) * 31);
  color:#0B1526;
}

/* five service pills */
.hpA__pills{
  display:grid;grid-template-columns:repeat(5,1fr);
  width:calc(var(--px) * 745);
  margin-top:calc(var(--px) * 32);
}
.hpA__pills div{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:0 calc(var(--px) * 6);
  border-right:calc(var(--px) * 1) solid rgba(1,18,41,.16);
}
.hpA__pills div:last-child{border-right:0}
.hpA__pills svg{width:auto;height:calc(var(--px) * 64);color:var(--g);display:block}
.hpA__pills b{
  margin-top:calc(var(--px) * 14);
  font-family:'Roboto Condensed','Arial Narrow',sans-serif;
  font-weight:700;
  font-size:calc(var(--px) * 20);
  line-height:calc(var(--px) * 24);
  letter-spacing:.02em;
  text-transform:uppercase;
  color:#011229;
}

/* the two route cards — same component as HP-06's safe routes */
.hpA__routes{
  position:relative;
  display:grid;grid-template-columns:1fr 1fr;
  gap:calc(var(--px) * 16);
  margin-top:calc(var(--px) * 42);
}
.hpA-route{
  background:var(--ink);
  border-radius:calc(var(--px) * 5);
  padding:calc(var(--px) * 30) calc(var(--px) * 30) calc(var(--px) * 26) calc(var(--px) * 36);
  min-height:calc(var(--px) * 258);
}
.hpA-route__head{display:flex;align-items:center;gap:calc(var(--px) * 24)}
.hpA-route__head svg{width:auto;height:calc(var(--px) * 46);color:var(--g-br);display:block;flex:none}
.hpA-route__head b{
  position:relative;
  font-family:'Roboto Condensed','Arial Narrow',sans-serif;
  font-weight:700;font-size:calc(var(--px) * 30);line-height:1;
  letter-spacing:.02em;text-transform:uppercase;color:var(--g-br);
  padding-bottom:calc(var(--px) * 11);
}
.hpA-route__head b::after{
  content:'';position:absolute;left:0;bottom:0;
  width:calc(var(--px) * 52);height:calc(var(--px) * 3);background:var(--g-br);
}
.hpA-route ul{list-style:none;margin:calc(var(--px) * 17) 0 0;padding:0 0 0 calc(var(--px) * 8)}
.hpA-route li + li{margin-top:calc(var(--px) * 8)}
.hpA-route a{
  display:flex;align-items:center;gap:calc(var(--px) * 16);
  font-size:calc(var(--px) * 20);line-height:calc(var(--px) * 20);
  color:#fff;transition:color .2s;
}
.hpA-route a:hover{color:var(--g-br)}
.hpA-route a svg{width:calc(var(--px) * 17);height:auto;color:var(--g-br);flex:none}

/* 24/7 mobile call bar */
.hpA__callbar{
  position:relative;
  display:flex;align-items:center;
  height:calc(var(--px) * 105);
  margin-top:calc(var(--px) * 13);
  padding:0 calc(var(--px) * 18) 0 calc(var(--px) * 40);
  background:var(--ink);border-radius:calc(var(--px) * 5);
}
.hpA__callbar-ico{width:auto;height:calc(var(--px) * 62);color:var(--g-br);flex:none}
.hpA__callbar b{
  margin-left:calc(var(--px) * 28);
  font-family:'Roboto Condensed','Arial Narrow',sans-serif;
  font-weight:700;font-size:calc(var(--px) * 34);line-height:1;
  letter-spacing:.01em;text-transform:uppercase;color:#fff;
}
.hpA__callbtn{
  display:flex;align-items:center;justify-content:center;
  gap:calc(var(--px) * 14);
  margin-left:auto;
  width:calc(var(--px) * 510);height:calc(var(--px) * 63);
  background:var(--btn);color:#001026;
  border-radius:calc(var(--px) * 4);
  font-family:'Roboto Condensed','Arial Narrow',sans-serif;
  font-weight:700;font-size:calc(var(--px) * 30);line-height:1;
  letter-spacing:.01em;text-transform:uppercase;
  transition:background .25s;
}
.hpA__callbtn svg{width:calc(var(--px) * 26);height:auto;flex:none}
.hpA__callbtn:hover{background:#E9A93A}

/* bottom assurance bar */
.hpA__foot{
  position:relative;
  display:flex;align-items:center;
  height:calc(var(--px) * 125);
  margin-top:calc(var(--px) * 14);
  padding:0 calc(var(--px) * 18) 0 calc(var(--px) * 40);
  background:var(--ink);border-radius:calc(var(--px) * 5);
}
.hpA__foot-ico{width:auto;height:calc(var(--px) * 66);color:var(--g-br);flex:none}
.hpA__foot > b{
  margin-left:calc(var(--px) * 26);
  font-family:'Roboto Condensed','Arial Narrow',sans-serif;
  font-weight:700;font-size:calc(var(--px) * 27);line-height:1;
  letter-spacing:.01em;text-transform:uppercase;color:var(--g-br);
  white-space:nowrap;
}
.hpA__foot-div{
  width:calc(var(--px) * 1);height:calc(var(--px) * 62);
  margin:0 calc(var(--px) * 24);background:rgba(255,255,255,.2);flex:none;
}
.hpA__foot p{
  flex:none;width:calc(var(--px) * 420);
  font-size:calc(var(--px) * 19);line-height:calc(var(--px) * 29);
  color:rgba(255,255,255,.86);
}
.hpA__cta{
  display:flex;align-items:center;justify-content:center;
  gap:calc(var(--px) * 14);
  flex:none;margin-left:auto;
  height:calc(var(--px) * 60);padding:0 calc(var(--px) * 28);
  border:calc(var(--px) * 2) solid var(--g);
  border-radius:calc(var(--px) * 4);
  font-family:'Roboto Condensed','Arial Narrow',sans-serif;
  font-weight:700;font-size:calc(var(--px) * 26);line-height:1;
  letter-spacing:.02em;text-transform:uppercase;color:#fff;
  transition:.25s;white-space:nowrap;
}
.hpA__cta svg{width:calc(var(--px) * 26);height:auto;color:var(--g-br);flex:none}
.hpA__cta:hover{background:var(--g);color:#001026}
.hpA__cta:hover svg{color:#001026}


/* ══════════════════════════════════════════════════════════════
   HP-B — 24/7 Emergency Locksmith  (reference 1402×1122)
   navy ground · content 37–797 · photo 750–1402 · frame 37–1365

   Replaces the old standalone "Need Help Now?" CTA strip with a
   full service section. Same components, urgent hierarchy.
   ══════════════════════════════════════════════════════════════ */
.hpB{
  --cw:1402;
  --ink:#000D21;
  --card:#000E22;
  --g:#D89827;
  --g-br:#E5A93B;
  background:var(--ink);
  color:#fff;
  box-sizing:border-box;
  /* min-height dropped 2026-08-23: the assure + foot bands were removed
     on the client's instruction, so content now defines the height */
  padding:calc(var(--px) * 35) calc(var(--px) * 37) calc(var(--px) * 48);
  overflow:hidden;
}
.hpB__media{position:absolute;top:0;right:0;width:calc(var(--px) * 652);height:calc(var(--px) * 614)}
.hpB__media img{width:100%;height:100%;object-fit:cover;display:block}
.hpB__media::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to right,var(--ink) 0%,rgba(0,13,33,.45) 5%,rgba(0,13,33,0) 17%);
}
.hpB__inner{position:relative;width:calc(var(--px) * 760)}

.hpB__eyebrow{
  display:inline-block;color:var(--g-br);
  font-size:calc(var(--px) * 25);letter-spacing:.05em;
  transform:scaleX(.88);transform-origin:left center;
}
.hpB__eyebrow-rule{
  width:calc(var(--px) * 46);height:calc(var(--px) * 4);
  margin:calc(var(--px) * 12) 0 0;background:var(--g);border:0;
}
.hpB__title{
  margin:calc(var(--px) * 14) 0 0;
  font-size:calc(var(--px) * 90);
  line-height:1.067;
  color:#fff;
  --sx:.89;
}
.hpB__lede{
  margin:calc(var(--px) * 18) 0 0;
  font-size:calc(var(--px) * 21);
  line-height:calc(var(--px) * 32);
  color:rgba(255,255,255,.9);
}
.hpB__pills{
  display:grid;grid-template-columns:repeat(5,1fr);
  width:calc(var(--px) * 745);
  margin-top:calc(var(--px) * 36);
}
.hpB__pills div{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:0 calc(var(--px) * 6);
  border-right:calc(var(--px) * 1) solid rgba(255,255,255,.18);
}
.hpB__pills div:last-child{border-right:0}
.hpB__pills svg{width:auto;height:calc(var(--px) * 65);color:var(--g-br);display:block}
.hpB__pills b{
  margin-top:calc(var(--px) * 16);
  font-family:'Roboto Condensed','Arial Narrow',sans-serif;
  font-weight:700;
  font-size:calc(var(--px) * 21);
  line-height:calc(var(--px) * 31);
  letter-spacing:.02em;
  text-transform:uppercase;
  color:#fff;
}

/* the dominant call card */
.hpB__call{
  position:relative;
  display:grid;
  grid-template-columns:calc(var(--px) * 130) calc(var(--px) * 470) calc(var(--px) * 1) calc(var(--px) * 208) 1fr;
  align-items:center;
  gap:0 calc(var(--px) * 26);
  min-height:calc(var(--px) * 209);
  margin-top:calc(var(--px) * 38);
  padding:calc(var(--px) * 22) calc(var(--px) * 26) calc(var(--px) * 22) calc(var(--px) * 36);
  background:var(--card);
  border:calc(var(--px) * 1) solid rgba(255,255,255,.1);
  border-radius:calc(var(--px) * 5);
}
.hpB__call-disc{
  display:flex;align-items:center;justify-content:center;
  width:calc(var(--px) * 100);height:calc(var(--px) * 100);
  border:calc(var(--px) * 3) solid var(--g-br);border-radius:50%;
  color:var(--g-br);
}
.hpB__call-disc svg{width:calc(var(--px) * 52);height:auto}
.hpB__call-main b{
  display:block;
  font-family:'Roboto Condensed','Arial Narrow',sans-serif;
  font-weight:700;font-size:calc(var(--px) * 32);line-height:1;
  letter-spacing:.01em;text-transform:uppercase;color:#fff;
}
.hpB__call-num{
  display:block;margin-top:calc(var(--px) * 12);
  font-family:'Roboto Condensed','Arial Narrow',sans-serif;
  font-weight:700;font-size:calc(var(--px) * 44);line-height:1;
  letter-spacing:.005em;text-transform:uppercase;color:var(--g-br);
  white-space:nowrap;transition:color .2s;
}
.hpB__call-num:hover{color:#F3BE5B}
.hpB__call-main p{
  margin-top:calc(var(--px) * 14);
  font-size:calc(var(--px) * 19);line-height:calc(var(--px) * 26);
  white-space:nowrap;color:rgba(255,255,255,.82);
}
.hpB__call-div{width:calc(var(--px) * 1);height:calc(var(--px) * 128);background:rgba(255,255,255,.18)}
.hpB__points{list-style:none;margin:0;padding:0}
.hpB__points li{
  display:flex;align-items:center;gap:calc(var(--px) * 15);
  font-size:calc(var(--px) * 20);line-height:calc(var(--px) * 20);
  color:#fff;
}
.hpB__points li + li{margin-top:calc(var(--px) * 22)}
.hpB__points svg{width:calc(var(--px) * 17);height:auto;color:var(--g-br);flex:none}
.hpB__call-btns{display:flex;flex-direction:column;gap:calc(var(--px) * 14)}
.hpB__btn{
  display:flex;align-items:center;justify-content:center;
  gap:calc(var(--px) * 13);
  height:calc(var(--px) * 60);
  border-radius:calc(var(--px) * 4);
  font-family:'Roboto Condensed','Arial Narrow',sans-serif;
  font-weight:700;font-size:calc(var(--px) * 27);line-height:1;
  letter-spacing:.01em;text-transform:uppercase;
  transition:.25s;white-space:nowrap;
}
.hpB__btn svg{width:calc(var(--px) * 24);height:auto;flex:none}
.hpB__btn.gold{background:var(--g-br);color:#00101F}
.hpB__btn.gold:hover{background:#F0B547}
.hpB__btn.line{border:calc(var(--px) * 2) solid rgba(255,255,255,.5);color:#fff}
.hpB__btn.line:hover{border-color:var(--g-br);color:var(--g-br)}

/* assurance card */
.hpB__assure{
  position:relative;
  display:flex;align-items:center;
  min-height:calc(var(--px) * 135);
  margin-top:calc(var(--px) * 17);
  padding:calc(var(--px) * 18) calc(var(--px) * 30) calc(var(--px) * 18) calc(var(--px) * 40);
  background:var(--card);
  border:calc(var(--px) * 1) solid rgba(255,255,255,.1);
  border-radius:calc(var(--px) * 5);
}
.hpB__assure-a,
.hpB__assure-b{display:flex;align-items:center;gap:calc(var(--px) * 24)}
.hpB__assure svg{width:auto;height:calc(var(--px) * 70);color:var(--g-br);flex:none}
.hpB__assure b{
  display:block;white-space:nowrap;
  font-family:'Roboto Condensed','Arial Narrow',sans-serif;
  font-weight:700;font-size:calc(var(--px) * 27);line-height:1.06;
  letter-spacing:.01em;text-transform:uppercase;color:var(--g-br);
}
.hpB__assure i{
  display:block;margin-top:calc(var(--px) * 8);font-style:normal;white-space:nowrap;
  font-family:'Roboto Condensed','Arial Narrow',sans-serif;
  font-weight:700;font-size:calc(var(--px) * 24);line-height:calc(var(--px) * 28);
  letter-spacing:.01em;text-transform:uppercase;color:#fff;
}
.hpB__assure-div{
  width:calc(var(--px) * 1);height:calc(var(--px) * 84);
  margin:0 calc(var(--px) * 30);background:rgba(255,255,255,.18);flex:none;
}
.hpB__assure p{
  flex:none;width:calc(var(--px) * 306);
  font-size:calc(var(--px) * 19);line-height:calc(var(--px) * 29);
  color:rgba(255,255,255,.82);
}
.hpB__assure > .hpB__assure-div:last-of-type{margin-left:auto}

/* bottom bar */
.hpB__foot{
  position:relative;
  display:flex;align-items:center;
  min-height:calc(var(--px) * 97);
  margin-top:calc(var(--px) * 17);
  padding:calc(var(--px) * 14) calc(var(--px) * 26) calc(var(--px) * 14) calc(var(--px) * 44);
  background:var(--card);
  border:calc(var(--px) * 1) solid rgba(255,255,255,.1);
  border-radius:calc(var(--px) * 5);
}
.hpB__foot-ico{width:auto;height:calc(var(--px) * 54);color:var(--g-br);flex:none}
.hpB__foot-txt{margin-left:calc(var(--px) * 26)}
.hpB__foot-txt b{
  display:block;
  font-family:'Roboto Condensed','Arial Narrow',sans-serif;
  font-weight:700;font-size:calc(var(--px) * 30);line-height:1;
  letter-spacing:.02em;text-transform:uppercase;color:#fff;
}
.hpB__foot-txt p{
  margin-top:calc(var(--px) * 9);
  font-size:calc(var(--px) * 20);line-height:1.3;color:rgba(255,255,255,.82);
}
.hpB__cta{
  display:flex;align-items:center;justify-content:center;
  gap:calc(var(--px) * 14);
  margin-left:auto;
  width:calc(var(--px) * 378);height:calc(var(--px) * 46);
  border:calc(var(--px) * 2) solid var(--g);
  border-radius:calc(var(--px) * 4);
  font-family:'Roboto Condensed','Arial Narrow',sans-serif;
  font-weight:700;font-size:calc(var(--px) * 27);line-height:1;
  letter-spacing:.02em;text-transform:uppercase;color:var(--g-br);
  transition:.25s;white-space:nowrap;
}
.hpB__cta svg{width:calc(var(--px) * 25);height:auto;flex:none}
.hpB__cta:hover{background:var(--g);color:#00101F}


/* ══════════════════════════════════════════════════════════════
   COMPOSITION FRAME
   Above its canvas width a section caps at 1:1 and centres, exactly
   as the scale system always specified. The section itself stays
   full-bleed so backgrounds still reach the viewport edge; only the
   padding box is inset, which brings the absolutely-positioned
   media (hp07/hpA/hpB/hp09/hp11) in with the rest of the design.
   ══════════════════════════════════════════════════════════════ */
.hp03{padding-inline:var(--slack) var(--slack)}
.hp04{padding-inline:var(--slack) var(--slack)}
.hp07{padding-inline:calc(var(--px) * 58 + var(--slack)) var(--slack)}
.hpA{padding-inline:calc(var(--px) * 38 + var(--slack)) calc(var(--px) * 42 + var(--slack))}
.hpB{padding-inline:calc(var(--px) * 37 + var(--slack)) calc(var(--px) * 37 + var(--slack))}
.hp09{padding-inline:var(--slack) var(--slack)}
.hp10{padding-inline:var(--slack) var(--slack)}
.hp11{padding-inline:calc(var(--px) * 68 + var(--slack)) var(--slack)}
.hp13{padding-inline:calc(var(--px) * 98 + var(--slack)) calc(var(--px) * 98 + var(--slack))}
.hp14{padding-inline:var(--slack) var(--slack)}

/* LATENT BUG, found + fixed 2026-08-24: hp03/hp04/hp09/hp10/hp14 above all
   set a BARE `padding-inline:var(--slack)`, which is exactly 0 below the
   1536 canvas (slack is max(0, (100vw-1536)/2)) — so on every mobile
   viewport these sections have ZERO horizontal section padding, no matter
   what an earlier `padding:` shorthand in their own @media(max-width:...)
   block says (this rule is unconditional and LATER in the file, so it
   always wins the cascade for the properties it touches). hp09 and hp10
   are the two that actually had a real intended value here (~24px/~21px)
   silently zeroed; hp03/hp04/hp14 rely on THEIR OWN children's padding at
   the section's true edge, so they're very likely fine as bare 0 — not
   re-verified visually in this pass, flagged for a quick look later
   rather than assumed identically broken. */
@media (max-width:1000px){
  .hp09{padding-inline:24px}
  .hp10{padding-inline:24px}
  /* hp07's own formula is ASYMMETRIC by design on desktop (extra 58 units
     left, for the media panel) via `calc(px*58 + slack) / slack` — on
     mobile slack=0, so the bare-slack RIGHT side collapsed to a real 0,
     sitting text flush against the screen edge (not clipped — scrollWidth
     matched clientWidth exactly — just no breathing room, caught visually
     rather than by the overflow-only collision audit). Symmetric 24px is
     safe here because this override only ever applies below 1000px, where
     desktop's asymmetric intent doesn't exist anyway. */
  .hp07{padding-inline:24px}
  /* 4th occurrence of the same bug this session: hp11's asymmetric
     desktop formula (extra 68 units left, for the copy panel that sits
     beside the map on wide screens) leaves a real ~49px unwanted navy
     gap on the LEFT of the mobile map only — .hp11__inner sets its own
     24px padding directly and is unaffected, but .hp11__map has no
     padding of its own and was inheriting the section's asymmetric
     value. The map is meant to be a full-bleed banner on mobile (it was
     a full-bleed absolutely-positioned panel on desktop before this
     block repositions it into flow), so 0 here, not 24px. */
  .hp11{padding-inline:0}
}

/* Absolutely-positioned media resolves against the PADDING box, which
   includes the padding — so the frame padding above does not inset it.
   These need the slack applied to their own offsets. */
/* Full-bleed media: the OUTER edge pins to the viewport and the box
   absorbs the slack, so the INNER edge (against the content) never
   moves — at exactly the canvas width nothing changes, and on wider
   screens the photography bleeds to the edge while the object-fit
   cover simply reveals more of the image. hpA/hpB keep their designed
   edge inset (their source crops are only ~630px wide — stretching
   them would soften the art), so they track the viewport edge instead. */
@media (min-width:1001px){
  .hp07__media{right:0; width:calc(var(--px) * 686 + var(--slack))}
  .hp09__past {left:0;  width:calc(var(--px) * 520 + var(--slack))}
  .hp09__now  {right:0; width:calc(var(--px) * 536 + var(--slack))}
  .hp11__map  {right:0; width:calc(var(--px) * 846 + var(--slack))}
  .hp04__media{margin-left:calc(var(--slack) * -1)}
}

/* hp14's inner grid and bar carry their own gutters, so the frame is
   applied to them rather than doubling up on the footer box. */
.hp14__grid,.hp14__bar,.hp14__util{max-width:calc(var(--px) * 1536);margin-inline:auto}


/* ══════════════════════════════════════════════════════════════
   REVENUE-CATEGORY REFACTOR — overrides
   The homepage was reorganised around Commercial → Residential →
   Automotive → Emergency. These rules adapt three existing
   components to the new content without changing their design:
   the HP-04 service cells and HP-07 pills became links, the
   HP-13 category cards became form controls, and the footer
   went from five nav columns to six.
   ══════════════════════════════════════════════════════════════ */

/* HP-04 — the six service cells now link to their interior pages */
a.hp04__cell{text-decoration:none;transition:background .25s ease}
a.hp04__cell:hover{background:rgba(212,162,57,.09)}
a.hp04__cell:hover svg{color:#F0BC55}
a.hp04__cell:hover span{color:#F0BC55}

/* HP-07 — the five service pills now link too */
.hp07__pills a{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:0 calc(var(--px) * 4);
  border-right:calc(var(--px) * 1) solid rgba(0,19,51,.16);
  text-decoration:none;transition:color .2s ease;
}
.hp07__pills a:last-child{border-right:0}
.hp07__pills a:hover svg{color:#B07C15}
.hp07__pills a:hover b{color:#B07C15}

/* HP-13 — category cards select the matching Service Needed option */
button.hp13-choice{
  appearance:none;-webkit-appearance:none;
  background:#fff;border:0;font:inherit;text-align:inherit;cursor:pointer;
}
button.hp13-choice:focus-visible{outline:calc(var(--px) * 3) solid #C9922C;outline-offset:calc(var(--px) * 2)}

/* HP-14 — brand + four service columns + contact.
   THIS is the authoritative desktop track list (it overrides the one in the
   main HP-14 block above). Widths are measured min-content per column plus a
   few units of slack — the link text is nowrap at a fixed size, so a track
   narrower than its longest link does not wrap, it overflows the page.
   Re-measure after any change to the link lists. Brand takes 276 (was 246):
   the extra 30 units are what stop the trust line wrapping awkwardly. */
@media (min-width:1101px){
  .hp14__grid{
    grid-template-columns:calc(var(--px) * 294) calc(var(--px) * 243) calc(var(--px) * 200) calc(var(--px) * 203) calc(var(--px) * 240) 1fr;
  }
  .hp14__grid > * + *{padding-left:calc(var(--px) * 10)}
}
.hp14__brand img{width:calc(var(--px) * 234)}
.hp14__tag{margin-top:calc(var(--px) * 22);font-size:calc(var(--px) * 26);line-height:calc(var(--px) * 32)}
.hp14__brand hr{width:calc(var(--px) * 226);margin-top:calc(var(--px) * 18)}
.hp14__brand p{margin-top:calc(var(--px) * 18);font-size:calc(var(--px) * 17);line-height:calc(var(--px) * 26)}
.hp14-col h3{font-size:calc(var(--px) * 24)}
.hp14-col h3::after{width:calc(var(--px) * 84);margin-top:calc(var(--px) * 10)}
.hp14-col ul{margin-top:calc(var(--px) * 22)}
.hp14-col li + li{margin-top:calc(var(--px) * 17)}
.hp14-col a{gap:calc(var(--px) * 8);font-size:calc(var(--px) * 17)}
.hp14-col a::before{font-size:calc(var(--px) * 20)}
.hp14__contact li{gap:calc(var(--px) * 13)}
.hp14__contact li + li{margin-top:calc(var(--px) * 14);padding-top:calc(var(--px) * 18)}
.hp14__contact svg{height:calc(var(--px) * 42)}
.hp14__contact p,.hp14__contact a{font-size:calc(var(--px) * 18);line-height:calc(var(--px) * 25)}

/* HP-14 — utility row under the columns.
   Replaces the old "Other Services:" strip, which read as leftover
   navigation. These are the pages that no longer justify a whole column
   (automotive, emergency) plus the company links, set quietly on one line. */
.hp14__util{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:calc(var(--px) * 10) calc(var(--px) * 26);
  margin:0 calc(var(--px) * 38);
  padding:calc(var(--px) * 20) 0 calc(var(--px) * 22);
  border-top:calc(var(--px) * 1) solid rgba(255,255,255,.14);
}
.hp14__util a{
  position:relative;
  font-family:'Roboto Condensed','Arial Narrow',sans-serif;
  font-weight:700;font-size:calc(var(--px) * 19);line-height:1;
  letter-spacing:.04em;text-transform:uppercase;
  color:rgba(255,255,255,.82);transition:color .2s ease;
}
.hp14__util a + a::before{
  content:'';position:absolute;
  left:calc(var(--px) * -14);top:50%;transform:translateY(-50%);
  width:calc(var(--px) * 3);height:calc(var(--px) * 3);border-radius:50%;
  background:#C9922C;
}
.hp14__util a:hover{color:#E0A93C}

/* .hp14__util's own base rule above is unconditional and later in the
   file than the hp14m block's original hide attempt, so it kept winning
   the cascade for `display` — 5th occurrence of the same later-rule-wins
   pattern this session, this time on a plain `display` property rather
   than padding. Overriding here, after the conflicting rule, same fix
   shape as every prior instance. */
@media (max-width:900px){
  .hp14__util{display:none}
}


/* ══════════════════════════════════════════════════════════════
   HP-A / HP-B — phone + tablet reflow
   Same treatment the other feature sections get: the section
   switches to the shared phone unit, the bleed photo moves above
   the copy, and every side-by-side row stacks. Phone CTAs stay
   full-width and at least 44px tall.
   ══════════════════════════════════════════════════════════════ */
@media (max-width:1000px){
  .hpA{
    --px:clamp(.62px, calc(100vw / 545), .8px);
    min-height:0;
    padding:calc(var(--px) * 56) calc(var(--px) * 40) calc(var(--px) * 60);
  }
  .hpA__media{
    position:relative;inset:auto;
    width:auto;height:calc(var(--px) * 360);
    margin:0 calc(var(--px) * -40) calc(var(--px) * 40);
  }
  .hpA__media::after{background:linear-gradient(to bottom,rgba(244,244,244,0) 60%,var(--paper) 100%)}
  .hpA__inner{width:auto}
  .hpA__title{font-size:calc(var(--px) * 82)}
  .hpA__title > span{white-space:normal}
  .hpA__lede br{display:none}
  .hpA__pills{width:auto;grid-template-columns:repeat(3,1fr);gap:calc(var(--px) * 26) 0}
  .hpA__pills div:nth-child(3n){border-right:0}
  .hpA__pills div:nth-child(n+4){border-top:calc(var(--px) * 1) solid rgba(1,18,41,.14);padding-top:calc(var(--px) * 22)}
  .hpA__routes{grid-template-columns:1fr;gap:calc(var(--px) * 20)}
  .hpA-route{min-height:0}
  .hpA__callbar{
    height:auto;flex-direction:column;align-items:flex-start;
    gap:calc(var(--px) * 22);padding:calc(var(--px) * 30) calc(var(--px) * 30);
  }
  .hpA__callbar b{margin-left:0;font-size:calc(var(--px) * 32)}
  .hpA__callbtn{margin-left:0;width:100%;height:calc(var(--px) * 72)}
  .hpA__foot{
    height:auto;flex-wrap:wrap;
    gap:calc(var(--px) * 20) 0;padding:calc(var(--px) * 30);
  }
  .hpA__foot > b{margin-left:calc(var(--px) * 20)}
  .hpA__foot-div{display:none}
  .hpA__foot p{flex:none;width:100%}
  .hpA__foot p br{display:none}
  .hpA__cta{margin-left:0;width:100%;height:calc(var(--px) * 72)}

  .hpB{
    --px:clamp(.62px, calc(100vw / 545), .8px);
    min-height:0;
    padding:calc(var(--px) * 56) calc(var(--px) * 40) calc(var(--px) * 60);
  }
  .hpB__media{
    position:relative;inset:auto;
    width:auto;height:calc(var(--px) * 360);
    margin:0 calc(var(--px) * -40) calc(var(--px) * 40);
  }
  .hpB__media::after{background:linear-gradient(to bottom,rgba(0,13,33,0) 58%,var(--ink) 100%)}
  .hpB__inner{width:auto}
  .hpB__title{font-size:calc(var(--px) * 82)}
  .hpB__title > span{white-space:normal}
  .hpB__lede br{display:none}
  .hpB__pills{width:auto;grid-template-columns:repeat(3,1fr);gap:calc(var(--px) * 26) 0}
  .hpB__pills div:nth-child(3n){border-right:0}
  .hpB__pills div:nth-child(n+4){border-top:calc(var(--px) * 1) solid rgba(255,255,255,.16);padding-top:calc(var(--px) * 22)}
  .hpB__call{
    grid-template-columns:1fr;
    gap:calc(var(--px) * 26);
    padding:calc(var(--px) * 32) calc(var(--px) * 30);
  }
  .hpB__call-disc{display:none}
  .hpB__call-div{display:none}
  .hpB__call-num{font-size:calc(var(--px) * 40)}
  .hpB__call-main p{white-space:normal}
  .hpB__btn{height:calc(var(--px) * 72)}
  .hpB__assure{flex-direction:column;align-items:flex-start;gap:calc(var(--px) * 24);padding:calc(var(--px) * 30)}
  .hpB__assure-div{display:none}
  .hpB__assure p{flex:none;width:auto}
  .hpB__assure b,.hpB__assure i{white-space:normal}
  .hpB__foot{flex-direction:column;align-items:flex-start;gap:calc(var(--px) * 22);padding:calc(var(--px) * 30)}
  .hpB__foot-txt{margin-left:0}
  .hpB__cta{margin-left:0;width:100%;height:calc(var(--px) * 72)}
}

@media (max-width:560px){
  .hpA__pills,.hpB__pills{grid-template-columns:repeat(2,1fr)}
  .hpA__pills div:nth-child(3n),.hpB__pills div:nth-child(3n){border-right:calc(var(--px) * 1) solid rgba(1,18,41,.14)}
  .hpB__pills div:nth-child(3n){border-right-color:rgba(255,255,255,.16)}
  .hpA__pills div:nth-child(2n),.hpB__pills div:nth-child(2n){border-right:0}
  .hpA__pills div:nth-child(n+3),.hpB__pills div:nth-child(n+3){border-top-width:calc(var(--px) * 1);border-top-style:solid}
  .hpA__pills div:nth-child(n+3){border-top-color:rgba(1,18,41,.14)}
  .hpB__pills div:nth-child(n+3){border-top-color:rgba(255,255,255,.16)}
  .hpA__title,.hpB__title{font-size:calc(var(--px) * 68)}
  .hpB__call-num{font-size:calc(var(--px) * 34)}
  .hpA__callbar b{font-size:calc(var(--px) * 28)}
  .hpA__foot > b{font-size:calc(var(--px) * 26)}
}

/* ══════════════════════════════════════════════════════════════
   PHONE LAYOUT PASS
   Appended last so it wins. The sections above are laid out from
   mockups drawn at 1536–1717px; several of them carry that
   geometry down to a phone, where it stops making sense:
   .hp03-card kept a 360:662 aspect ratio AND a 257px icon offset,
   so one card filled an entire phone screen. Below, cards become
   content-height with a fixed photo, and grids drop to two up.
   ══════════════════════════════════════════════════════════════ */
@media (max-width:760px){

  /* ── HP-03 · service cards ─────────────────────────────────── */
  .hp03__grid{gap:16px}
  .hp03-card{aspect-ratio:auto;padding:148px 24px 26px;border-radius:12px}
  .hp03-card__photo,.hp03-card__fade{height:184px}
  .hp03-card__icon{margin-top:0;width:56px;height:58px}
  .hp03-card__title{margin-top:14px;font-size:42px}
  .hp03-card__rule{margin-top:13px;width:56px;height:4px}
  .hp03-card__copy{margin-top:14px;font-size:17px;line-height:26px}
  .hp03-card__link{margin-top:20px;font-size:19px;gap:12px}
  .hp03-card__link svg{width:34px;height:24px}
  .hp03__trust{margin-top:30px}
  .hp03__serving{margin-top:10px}

  /* ── HP-04 · service tiles ─────────────────────────────────── */
  .hp04__grid{grid-template-columns:repeat(2,1fr);margin-inline:0}
  .hp04__cell{padding:20px 8px 18px}
  .hp04__cell:nth-child(3n){border-right:1px solid rgba(255,255,255,.13)}
  .hp04__cell:nth-child(2n){border-right:0}
  .hp04__cell:nth-child(n+3){border-top:1px solid rgba(255,255,255,.13)}
  .hp04__cell svg{height:52px}
  .hp04__cell span{margin-top:14px;font-size:16px;line-height:20px}
  .hp04__cta{height:62px;font-size:20px}
  .hp04__cta svg{width:26px;height:20px}

  /* ── HP-05 · access-control cards ──────────────────────────── */
  .hp05__rail{gap:16px}
  .hp05-card{aspect-ratio:auto;padding:0 22px 26px;border-radius:12px}
  .hp05-card__photo,.hp05-card__fade{height:168px}
  .hp05-card svg.hp05-card__icon{margin-top:126px;height:42px}
  .hp05-card h3{margin-top:14px;font-size:34px}
  .hp05-card p{margin-top:14px;font-size:17px;line-height:26px}
  .hp05__cta{height:62px;font-size:20px}
  .hp05__steps{gap:18px}
  .hp05__step svg{height:54px;width:54px}
  .hp05__step b{font-size:26px}
  .hp05__step i{font-size:15px}

  /* ── HP-06 · route lists ───────────────────────────────────── */
  .hp06-route li a{padding:13px 0;font-size:18px}
  .hp06-route li svg{height:26px}
  .hp06-route__head{font-size:30px}
  .hp06__bar-main b{font-size:28px}
  .hp06__bar-icon svg{height:64px}

  /* ── HP-07 · residential ───────────────────────────────────── */
  .hp07__pills{grid-template-columns:repeat(2,1fr);gap:26px 0}
  .hp07__pills div:nth-child(3n){border-right:1px solid rgba(0,19,51,.16)}
  .hp07__pills div:nth-child(2n){border-right:0}
  .hp07__pills svg{height:58px}
  .hp07__pills b{margin-top:14px;font-size:15px;line-height:19px}
  .hp07__moved-main b{font-size:34px}
  .hp07__badge p{white-space:normal}

  /* ── HP-08 · project cards ─────────────────────────────────── */
  .hp08-proj__photo{height:200px}
  .hp08-proj__body{padding:56px 18px 22px}
  .hp08-proj__badge{width:86px;height:86px;top:-44px}
  .hp08-proj h3{font-size:32px;line-height:34px}
  .hp08-proj hr{width:180px}
  .hp08-proj__loc{font-size:18px}
  .hp08__cta{height:62px;font-size:20px}

  /* ── HP-09 · timeline ──────────────────────────────────────── */
  .hp09-step{gap:18px}
  .hp09-step__dot{width:50px;height:50px}
  .hp09-step__dot svg{height:26px}
  .hp09-step::before{left:25px;top:52px}
  .hp09-step b{font-size:22px}
  .hp09-step strong{font-size:19px}
  .hp09-step p{font-size:16px;line-height:23px}
  .hp09__foot p{font-size:19px}
  .hp09__cta{height:58px;font-size:20px;width:100%;max-width:340px}

  /* ── HP-10 · reviews ───────────────────────────────────────── */
  .hp10__google-g{height:48px}
  .hp10__cta{height:62px;font-size:20px;width:100%;max-width:340px}

  /* ── HP-11 · service areas ─────────────────────────────────── */
  .hp11-state li{height:auto;padding:7px 0}
  .hp11-state li a,.hp11-state li span{font-size:19px}
  .hp11-state__head b{font-size:24px}
  .hp11__cta{height:60px;font-size:20px}

  /* ── HP-12 · emergency ─────────────────────────────────────── */
  .hp12__body{padding:34px 22px 36px}
  .hp12__sub b{font-size:26px;letter-spacing:.06em;white-space:normal}
  .hp12__call{border-radius:12px}
  .hp12__call b{font-size:52px}
  .hp12__hours b{font-size:30px;white-space:normal}
  .hp12__hours svg{height:46px}
  .hp12__band img{width:min(300px,78vw)}

  /* ── HP-13 · lead form ─────────────────────────────────────── */
  .hp13-choice{height:auto;padding:22px 16px 20px}
  .hp13-choice__disc{width:88px;height:88px}
  .hp13-choice__disc svg{width:50px;height:50px}
  .hp13-choice b{margin-top:14px;font-size:19px}
  .hp13-choice hr{width:70px;margin-top:11px}
  .hp13-choice p{margin-top:12px;font-size:15px;line-height:20px}
  .hp13-choice__go{width:38px;height:38px;margin-top:16px}
  .hp13__form input,.hp13__form select{height:52px;font-size:16px}
  .hp13__form label{font-size:14px}
  .hp13__submit{height:56px;font-size:20px}
  .hp13__foot-call span{font-size:26px}
  .hp13__foot-call b{font-size:20px}
  .hp13__foot-call span.hp13__foot-disc{width:66px;height:66px}
  .hp13__foot-disc svg{width:26px;height:26px}   /* 26/66 = 39% */
  .hp13__foot-247 svg{height:54px}
}

/* one-up only on the narrowest phones; at 390 two-up reads far better
   than a six-tile single column that runs on for a screen and a half */
@media (max-width:365px){
  .hp04__grid{grid-template-columns:1fr}
  .hp04__cell{border-right:0 !important;border-top:1px solid rgba(255,255,255,.13)}
  .hp07__pills{grid-template-columns:1fr}
  .hp07__pills div{border-right:0 !important;padding-bottom:6px}
  .hp13__choices{grid-template-columns:1fr}
  .hp03-card__title{font-size:38px}
  .hp12__call b{font-size:42px}
}

/* ══════════════════════════════════════════════════════════════
   MOBILE HOMEPAGE SIMPLIFICATION (2026-08-24, client-requested)
   The client's own framing: mobile presented the same service info
   twice — once as the compact hp03 revenue cards right after the
   hero, once again as the full desktop-style hp04/hp07/hpA/hpB
   sections further down. hp03 becomes the primary mobile
   service-discovery surface; the four large sections below it are
   HIDDEN on mobile only — content, pages and SEO are untouched,
   desktop is byte-for-byte the same experience it always was.
   The 4 `#commercial/residential/automotive/emergency` anchors that
   the mobile sticky nav (.qsl-mnav) scrolls to were RELOCATED (not
   duplicated) from immediately before these sections to immediately
   before their hp03 card counterpart — see index.html. The mobile
   active-section-tracking observer in motion.js was retargeted to
   watch the hp03 cards for the same reason: it used to watch these
   sections' geometry, which is meaningless once they're
   display:none (a hidden element never intersects, so the gold
   underline would simply stop working otherwise).
   ══════════════════════════════════════════════════════════════ */
@media (max-width:900px){
  .hp04,.hp07,.hpA,.hpB{display:none}
}

/* ══════════════════════════════════════════════════════════════
   HP-10 · Reviews simplification (Phase C, mobile only)
   Client ask: keep the Google rating card as-is, show ONE featured
   review instead of three, "Read All Google Reviews" label, swipe
   to the other two rather than deleting them. A native scroll-snap
   carousel (same mechanism as the hp07 residential pills) satisfies
   both halves at once — one card fills the viewport at a time, the
   next card's edge peeks in as the swipe affordance.
   ══════════════════════════════════════════════════════════════ */
/* Removing the fixed bottom CTA bar took Request Service off every screen,
   leaving it in only two places on the whole page (hero + lead form). This
   restores it after the reviews — the client's own list of high-intent
   moments — as a SECONDARY outlined button so it supports the Google
   reviews CTA above rather than competing with it. Mobile only: desktop's
   approved CTA structure is not to be modified. */
.hp10__req{display:none}
.hp10__cta-short{display:none}
@media (max-width:900px){
  .hp10__req{
    display:flex;align-items:center;justify-content:center;gap:10px;
    width:100%;max-width:340px;height:56px;
    margin:12px auto 0;
    background:transparent;color:#011535;
    border:2px solid rgba(214,153,43,.75);
    border-radius:calc(var(--px) * 5);
    font-family:'Roboto Condensed','Arial Narrow',sans-serif;
    font-weight:700;font-size:19px;
    letter-spacing:.03em;text-transform:uppercase;
    transition:background .2s ease,border-color .2s ease;
  }
  .hp10__req svg{width:18px;height:15px;flex:none}
  .hp10__req:active{background:rgba(214,153,43,.12);border-color:#D6992B}
  .hp10__req:focus-visible{outline:2px solid #D6992B;outline-offset:2px}
  .hp10__cta-full{display:none}
  .hp10__cta-short{display:inline}
}

/* ══════════════════════════════════════════════════════════════
   HP-03M · How Can We Help (mobile-only quick finder, Phase B)
   New component, not a repositioned/duplicated hp13. hp13 stays
   exactly where it is and keeps doing its job as the lead-gen
   form near the footer. This is a compact tap-target grid that
   fills the gap left when hp04/hp07/hpA/hpB were hidden above.
   Desktop never sees it — display:none until the same 900px
   breakpoint the rest of this simplification phase uses.
   ══════════════════════════════════════════════════════════════ */
@media (max-width:900px){
}
@media (max-width:365px){
}

/* The mobile-only card copy must be hidden by DEFAULT. It was only ever
   switched ON inside the <=767px block below, so on desktop BOTH the
   desktop and mobile copy rendered — two paragraphs per card. */
.hp03-card__copy--m{display:none}

/* ══════════════════════════════════════════════════════════════
   MOBILE REFINEMENT PASS — Phase A (2026-09-02 client handoff)
   Appended after the phone pass above so it wins at equal specificity.
   Phones only (<=767px per the handoff's own breakpoint table); the
   768-900 tablet treatment and desktop are untouched.
   ══════════════════════════════════════════════════════════════ */
@media (max-width:767px){

  /* ── §3 · four primary cards become a compact 2x2 ─────────────
     Was four stacked 415px cards = 2246px of page. The card kept its
     desktop anatomy (big standalone icon, gold rule, paragraph, full
     "Explore Commercial" label) which is what made it tall. Mobile
     keeps only photo + title + one short line + arrow. */
  .hp03__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .hp03-card{
    aspect-ratio:auto;
    padding:125px 13px 11px;      /* photo occupies the top band */
    border-radius:11px;
  }
  .hp03-card__photo,.hp03-card__fade,.hp03-card__photo-fade{height:125px}
  .hp03-card__icon{display:none}   /* oversized standalone icon */
  .hp03-card__rule{display:none}   /* decorative rule costs height */
  .hp03-card__copy--d{display:none}
  .hp03-card__title{margin-top:7px;font-size:27px;line-height:1.0}
  .hp03-card__copy{margin-top:5px;font-size:12.5px;line-height:1.32}
  .hp03-card__copy--m{display:block}
  /* keep the directional arrow, drop the long label: the text is a bare
     node inside the span, so font-size:0 is what removes it without a
     markup change; the svg carries explicit dimensions and survives. */
  .hp03-card__link{margin-top:6px;font-size:0;gap:0}
  .hp03-card__link svg{width:19px;height:14px}

  /* §3 spacing: the grid sat on a 13-16px gutter, narrower than this
     site's own established 24px mobile body gutter and below the
     handoff's 20-24px. Set explicitly here (a later unconditional
     padding-inline rule further up this file zeroes it otherwise —
     the recurring trap in this stylesheet). */
  .hp03{padding-inline:22px;padding-top:44px;padding-bottom:0}
  .hp03__grid{margin-top:24px}          /* heading -> grid: 22-28 */
  .hp03__trust{margin-top:26px}
  .hp03b{padding-inline:22px}

  /* ── Phase A refinement · the section introduction ────────────
     The heading was inheriting a desktop-scale display size (59-62px,
     three lines, ~195px) so the intro block ran 316-327px — taller
     than it should be above a grid that is now only 945px. Wording is
     unchanged; only the type scale and the gaps come down. */
  .hp03__eyebrow{font-size:13px;margin-bottom:12px}     /* gap 10-14 */
  .hp03__title{font-size:42px;line-height:1.0;margin-bottom:11px}  /* gap 10-12 */
  .hp03__rule{margin-top:0;margin-bottom:0}
  .hp03__grid{margin-top:22px}                          /* rule -> cards 20-24 */

  /* ── §5 · specialty row: clearly secondary to the four above ── */
  .hp03b__inner{margin-top:20px;margin-bottom:50px}
  .hp03b__row{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;max-width:none}
  .hp03b__tile{min-height:84px;padding:13px;gap:11px;border-radius:9px}
  .hp03b__ic{width:30px;height:30px;border-radius:5px}
  .hp03b__ic svg{width:17px;height:17px}
  .hp03b__txt b{font-size:15.5px;line-height:1.15}
  .hp03b__txt span{display:none}          /* descriptive sentence off */
  .hp03b__arw{width:15px;height:15px}
}

/* small phones — §3/§5 keep the 2x2 but step the type and box down */
@media (max-width:365px){
  .hp03__eyebrow{font-size:12.5px;margin-bottom:10px}
  .hp03__title{font-size:36px}      /* 3 lines permitted at this width */
  .hp03__grid{gap:11px}
  .hp03-card{padding:105px 11px 11px}
  .hp03-card__photo,.hp03-card__fade,.hp03-card__photo-fade{height:105px}
  .hp03-card__title{font-size:24px}
  .hp03-card__copy{font-size:12px}
  .hp03b__row{gap:10px}
  .hp03b__tile{min-height:70px;padding:11px;gap:9px}
  .hp03b__txt b{font-size:15px}
}

/* ══════════════════════════════════════════════════════════════
   MOBILE REFINEMENT — Phase B · hero (2026-09-02)
   Target 10-15% shorter WITHOUT dropping any content: the full
   3-line headline, category line, both CTAs and all four trust
   items stay. The height comes out of type scale, cell padding and
   the gaps between blocks — every value below is inside the ranges
   the handoff specifies. Mobile hero rules live in index.html's
   inline <style>, which loads BEFORE this file, so these win at
   equal specificity (the .hp-ti padding there is !important, so it
   is matched in kind).
   ══════════════════════════════════════════════════════════════ */
@media (max-width:767px){
  #hero{padding:30px 22px 32px}          /* was 34/20/40 — spec 26-32 top, 28-34 bottom, 20-24 sides */
  .hp-eyebrow{font-size:15px;margin-bottom:12px}          /* 14-16, gap 10-14 */
  .hp-h1{font-size:clamp(42px,11.5vw,56px);line-height:1.0;margin-bottom:14px}  /* gap 12-16 */
  .hp-line{margin-bottom:14px}                            /* gap 12-16 */
  .hp-services{font-size:16px;margin-bottom:20px}         /* 15-17, gap 20-22 */
  .hp-btns{gap:10px;margin-bottom:22px}                   /* gap 10, CTA->trust 22-26 */
  .hp-btns .hp-btn{min-height:54px;height:54px}           /* 52-56 */

  /* trust grid: rows were 83/83/108/108 because the licence cell wraps
     to three lines. grid-auto-rows:1fr equalises them, and the cell
     scale comes down to spec so nothing is lost to make room. */
  .hp-trust{grid-auto-rows:1fr}
  .hp-ti{padding:11px 13px!important;gap:10px!important}  /* 10-12 */
  .hp-ti .ico svg{width:30px;height:30px}                 /* 28-32 */
  .hp-ti .ico img{width:31px}
  .hp-ti .big{font-size:19px}                             /* primary 16-19 */
  .hp-ti .big.md{font-size:16px}
  .hp-ti .sub{font-size:11.5px;margin-top:5px}            /* supporting 11-13, never <11 */
}

@media (max-width:365px){
  /* headline must not go below 39px */
  .hp-h1{font-size:40px}
  .hp-ti .big{font-size:17.5px}
  .hp-ti .big.md{font-size:15px}
  /* the licence line wraps to 3 lines at this width, which is what made
     the 320 cells 106px vs 85px elsewhere. 11px is the floor the brief
     allows, and a tighter leading keeps it legible without clipping. */
  .hp-ti{padding:10px 11px!important;gap:9px!important}
  .hp-ti .sub{font-size:11px;line-height:1.25;margin-top:4px}
  .hp-ti .ico svg{width:28px;height:28px}
  .hp-ti .ico img{width:29px}
}

/* ══════════════════════════════════════════════════════════════
   MOBILE REFINEMENT — Phase D · heritage + reviews (2026-09-02)
   ══════════════════════════════════════════════════════════════ */
@media (max-width:767px){

  /* ── §9 · heritage timeline ─────────────────────────────────
     The milestone copy is already short (8-16 words); it rendered as
     four lines because the markup carries hard <br> breaks drawn for
     the desktop column. Dropping them on phones lets the copy wrap to
     the available width instead. A real space now precedes every <br>
     in the markup, so removing the break cannot fuse two words. */
  .hp09-step p br,
  .hp09__m-only br{display:none}
  .hp09{padding-top:52px;padding-bottom:56px}      /* §9: 48-64 */
  .hp09-step p{font-size:16px;line-height:1.5}     /* 15-17 / 1.45-1.6 */
  /* Spacing between milestones comes from padding, NOT margin: the gold
     connector is ::before{top:52px;bottom:0}, so it reaches the padding
     edge — a margin would open a visible break in the line. */
  .hp09-step{padding-bottom:22px}                  /* §9 item gap 18-24 */
  .hp09-step:last-child{padding-bottom:0}

  /* ── §10 · reviews: rating is the focus, two clear CTAs ────── */
  .hp10{padding-top:48px;padding-bottom:48px}      /* §10: 44-56 */
  .hp10__cta{min-height:58px;height:58px}          /* primary 54-60 */
  .hp10__req{min-height:54px;height:54px;margin-top:11px}  /* secondary 52-56, gap 10-12 */
}

/* ══════════════════════════════════════════════════════════════
   MOBILE REFINEMENT — Phase E · service areas (2026-09-02)
   §12 collapses the three state directories into accordions on
   phones ONLY. The markup ships <details open>, so a no-JS phone
   and every viewport >=768px behave exactly as before; js/motion.js
   closes them at init on phones. That ordering matters: shipping
   them closed would hide 12 city links from a no-JS visitor.
   ══════════════════════════════════════════════════════════════ */
@media (min-width:768px){
  /* tablet + desktop unchanged: always open, not interactive */
  .hp11-state > ul{display:block}
  .hp11-state__head{cursor:default;list-style:none}
  .hp11-state__head::-webkit-details-marker{display:none}
  .hp11-state__chev{display:none}
}

@media (max-width:767px){
  /* §11: map 280-340px, full-bleed to the section edges */
  .hp11__map{height:300px}
  .hp11-state{border-bottom:1px solid rgba(224,169,60,.22)}
  .hp11-state__head{
    display:flex;align-items:center;gap:10px;
    min-height:54px;                       /* §12: 52-58 */
    cursor:pointer;list-style:none;
  }
  .hp11-state__head::-webkit-details-marker{display:none}
  .hp11-state__head:focus-visible{outline:3px solid #E9A415;outline-offset:-3px}
  .hp11-state__count{margin-left:auto}     /* name + count both stay visible */
  .hp11-state__chev{
    display:block;width:20px;height:20px;flex:none;color:#E9A415;
    transition:transform .2s var(--ease-io, ease);   /* §12: 180-250ms */
  }
  .hp11-state[open] > .hp11-state__head .hp11-state__chev{transform:rotate(180deg)}
  /* Chrome has shipped builds where a closed <details> did not collapse
     its own body — this project hit exactly that on the footer accordion.
     Assert it rather than trusting the UA stylesheet. */
  .hp11-state:not([open]) > ul{display:none}
  .hp11-state[open] > ul{animation:hp11-reveal .2s var(--ease-io, ease) both}
  .hp11-loc{min-height:46px}               /* §12: >=44 */
}
@keyframes hp11-reveal{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .hp11-state__chev{transition:none !important}
  .hp11-state[open] > ul{animation:none !important}
}

/* ══════════════════════════════════════════════════════════════
   MOBILE REFINEMENT — Phase F · request-service (2026-09-02)
   §13 replaces the four illustrated category cards with a compact
   2x2 selector on phones. Desktop keeps the approved cards.
   ══════════════════════════════════════════════════════════════ */
@media (max-width:767px){
  .hp13{padding-inline:22px}                       /* §13: 20-24 */
  .hp13__choices{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;margin-bottom:18px;                    /* §13: gap 8-10 */
  }
  .hp13-choice{
    display:flex;align-items:center;justify-content:center;
    min-height:51px;padding:0 10px;                /* §13: 48-54 */
    border-radius:7px;                             /* §13: 6-8 */
    border:1px solid rgba(10,28,59,.22);background:#fff;
    transition:border-color .18s ease,background .18s ease,color .18s ease;
  }
  /* no descriptions, no large icons on phones — label only */
  .hp13-choice__disc,.hp13-choice hr,.hp13-choice p,.hp13-choice__go{display:none}
  .hp13-choice b{
    font-family:'Barlow Condensed',sans-serif;font-weight:700;
    font-size:16px;letter-spacing:.04em;text-transform:uppercase;  /* §13: 15-17 */
    line-height:1.1;color:var(--navy);
  }
  /* selected / pressed / focus states must all be distinguishable,
     and never by colour alone — the selected state also gains weight
     via the gold rule and a heavier border. */
  .hp13-choice[aria-pressed="true"]{
    border-color:var(--gold);background:#fdf7e8;box-shadow:inset 0 -3px 0 var(--gold);
  }
  .hp13-choice[aria-pressed="true"] b{color:#6b4d0d}
  .hp13-choice:active{background:#f2f2ef}
  .hp13-choice:focus-visible{outline:3px solid var(--navy);outline-offset:2px}

  /* fields */
  .hp13__form{padding:24px}                        /* §13: 22-28 */
  .hp13__form > div{margin-bottom:17px}            /* §13 field gap 16-18 */
  .hp13__form label{font-size:15px}                /* §13: 14-16 */
  .hp13__field input,.hp13__field select{
    min-height:54px;                               /* §13: 52-56 */
    font-size:16px;                                /* >=16 stops iOS zoom */
  }
  .hp13__submit{min-height:57px;width:100%}        /* §13: 54-60 */

  /* inline validation + the deferred-endpoint note */
  .hp13__err{
    margin:0 0 5px;font-family:'Inter',sans-serif;font-size:13px;line-height:1.35;
    color:#B4232A;
  }
  .hp13__err[hidden]{display:none}
  .hp13__field :is(input,select)[aria-invalid="true"]{
    border-color:#B4232A;box-shadow:0 0 0 2px rgba(180,35,42,.14)
  }
  .hp13__note{
    margin:12px 0 0;font-family:'Inter',sans-serif;font-size:14px;line-height:1.45;
    color:var(--navy);
  }
  .hp13__note:empty{display:none}
}
/* the error/note styling is not mobile-only — a desktop visitor must see
   the same messages, and neither element renders until it has content */
.hp13__err{color:#B4232A}
.hp13__err[hidden]{display:none}
.hp13__note:empty{display:none}

/* ══════════════════════════════════════════════════════════════
   MOBILE REFINEMENT — Phase G · footer (2026-09-02)
   §14 keeps the accordion footer; these are the measurements the
   handoff specifies. Legal/licence/copyright stay OUTSIDE the
   accordions in .hp14__bar, which already reserves clearance for
   the floating Call control.
   ══════════════════════════════════════════════════════════════ */
@media (max-width:767px){
  .hp14m-acc summary{
    min-height:57px;padding:14px 2px;             /* §14: 54-60 */
  }
  /* child links were 20px — far under the 44px minimum */
  .hp14m-acc__body a{
    display:flex;align-items:center;
    min-height:44px;                              /* §14: >=44 */
    line-height:1.3;
  }
  .hp14m-acc__body li + li{margin-top:0}
  .hp14m{padding-left:23px;padding-right:23px}    /* §14: 22-24 */
}