/* Brand signature face, supplied by the client. */
@font-face{
  font-family:"Priestacy";
  src:url("fonts/Priestacy.woff2") format("woff2"),
      url("fonts/Priestacy.otf") format("opentype");
  font-weight:400;font-style:normal;font-display:swap;
}

/* ============================================================
   Golden Empire Roofing & Construction — Sunland
   Redesigned homepage stylesheet
   NOTE: index page must never crop. Every plate is rendered
   width-based (width:100%; height:auto; object-fit:contain) and
   all overlay type is sized in cqw so text scales with the plate.
   ============================================================ */

:root{
  --navy:#0B2A5B;
  --navy-deep:#071B3D;
  --red:#D01A28;
  --red-dark:#A9121D;
  --gold:#F5C518;
  --ink:#12203A;
  --line:rgba(11,42,91,.14);
  --shell:1400px;
  --display:"Archivo Narrow",Arial Narrow,Arial,sans-serif;
  --ui:"Archivo",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{font-size:16px;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--ui);
  color:var(--ink);
  background:#fff;
  line-height:1.5;
  padding-bottom:0;
}
img{max-width:100%;}
a{color:inherit;}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

.shell{max-width:var(--shell);margin:0 auto;padding:0 20px;}

/* ---------- Page shell ---------------------------------- */
/* The comp is a fixed-proportion composition, so the whole page is one
   container and every pinned element is expressed in cqw of it. The cap is
   set to 1311px because that is the width at which the 1024x578 hero plate
   renders exactly 740px tall; wider than that and the hero would grow. */
.page{max-width:1693px;margin:0 auto;position:relative;container-type:inline-size;background:#fff;}

/* ---------- Header -------------------------------------- */
/* The comp sits the header on the hero sky, flag showing through
   behind the logo, so it overlays the plate rather than stacking above it. */
.site-head{position:absolute;top:0;left:0;right:0;z-index:40;background:transparent;}

/* Logo lock-up already carries the wordmark and tagline, so the header
   places the single artwork rather than rebuilding the type. */
.brand{position:absolute;left:1.95cqw;top:.9cqw;display:block;line-height:0;}
.brand img{display:block;width:21.5cqw;height:auto;}

.credentials{
  position:absolute;right:26.4cqw;top:1.27cqw;margin:0;white-space:nowrap;
  font-family:var(--ui);font-weight:500;font-size:.78cqw;line-height:1;color:#fff;
  text-shadow:0 .08cqw .28cqw rgba(0,0,0,.5);
}

.mainnav{position:absolute;left:30cqw;top:4.28cqw;}
.mainnav ul{list-style:none;display:flex;gap:min(1.1cqw,15px);margin:0;padding:0;align-items:flex-start;}
.mainnav a{
  display:block;text-decoration:none;font-family:var(--ui);font-weight:500;
  font-size:min(1.068cqw,14px);line-height:1;color:#fff;
  text-shadow:0 .08cqw .28cqw rgba(0,0,0,.55),0 0 .12cqw rgba(0,0,0,.35);
  padding-bottom:.42cqw;border-bottom:.18cqw solid transparent;white-space:nowrap;
}
.mainnav a:hover{border-bottom-color:var(--red);color:#fff;}
.mainnav a[aria-current="page"]{color:#fff;border-bottom-color:var(--red);}

/* Top-right phone button, at the comp's measured slot:
   x792-1010, y10-62 of the 1024-wide composition. */
.head-call{
  position:absolute;left:74.855cqw;top:.98cqw;width:21.39cqw;height:5.18cqw;
  display:flex;align-items:center;justify-content:center;gap:1.1cqw;
  text-decoration:none;background:var(--red);color:#fff;border-radius:.6cqw;
}
.head-call .num{font-family:var(--ui);font-weight:800;font-size:2.05cqw;display:block;line-height:1.1;}
.head-call .sub{font-family:var(--ui);font-weight:600;font-size:.95cqw;letter-spacing:.04em;display:block;text-align:center;}
.head-call svg{width:2.3cqw;height:2.3cqw;flex:0 0 auto;fill:#fff;}
.head-call:hover{background:var(--red-dark);}

.navtoggle{display:none;background:var(--navy);color:#fff;border:0;border-radius:6px;padding:10px 13px;font-size:1.1rem;line-height:1;cursor:pointer;}

/* ---------- Plate bands (never cropped) ----------------- */
.band{position:relative;container-type:inline-size;line-height:0;}
.band > img.plate,
.band > picture{display:block;width:100%;}
.band > picture > img.plate{display:block;width:100%;height:auto;}
.band > img.plate,
.band > picture > img.plate{
  display:block;width:100%;height:auto;object-fit:contain;
}
.band .layer{position:absolute;inset:0;line-height:normal;}

/* every overlay child positions in % of the plate */
.ov{position:absolute;}

/* ---------- Hero ----------------------------------------
   New plate is 1897x829 (2.288:1) with no panel, inset or badge painted in,
   so the estimate form is a real CSS panel and the badge is an overlay.
   Everything is a % of the plate, so it scales with it. */
.hero-inner{position:relative;width:100%;container-type:inline-size;line-height:0;}
.hero-inner > picture,.hero-inner > picture > img.plate{display:block;width:100%;height:auto;}

.hero .layer{color:#fff;}
.hero .layer::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:52%;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,.90) 0%,rgba(255,255,255,.78) 32%,
             rgba(255,255,255,.40) 56%,rgba(255,255,255,0) 80%);
}

.hero-copy{left:0;top:0;right:0;bottom:0;}
.hero-eyebrow{
  position:absolute;left:4.6%;top:19.5%;margin:0;
  font-family:var(--ui);font-weight:700;
  font-size:.95cqw;line-height:1;letter-spacing:.246em;color:var(--navy);
}
.hero-title{margin:0;}
.hero-title span{
  position:absolute;left:4%;display:block;white-space:nowrap;
  font-family:var(--display);font-weight:700;line-height:1;color:var(--navy);
}
.hero-title .t1{top:22.6%;font-size:4.2cqw;letter-spacing:-.0415em;}
.hero-title .t2{top:33.4%;font-size:3.15cqw;letter-spacing:.0209em;}
.hero-title .t3{top:41.9%;font-size:3.94cqw;letter-spacing:-.0693em;font-style:italic;color:var(--red);}
.hero-title .t4{top:51.4%;left:3.6%;font-size:3.94cqw;letter-spacing:-.0028em;font-style:italic;color:var(--red);}

.hero-sub{
  position:absolute;left:4.6%;top:62.5%;width:24%;margin:0;
  font-size:1.01cqw;line-height:1.25;color:#17294a;font-weight:500;
}
.hero-checks{position:absolute;left:4.8%;top:76.5%;list-style:none;margin:0;padding:0;}
.hero-checks li{
  display:flex;align-items:center;gap:.85cqw;height:1.45cqw;margin-bottom:.22cqw;
  font-family:var(--display);font-weight:700;font-size:.95cqw;
  letter-spacing:.052em;color:var(--navy);
}
.hero-checks li:last-child{margin-bottom:0;}
.tick{width:1.45cqw;height:1.45cqw;flex:0 0 auto;border-radius:50%;background:var(--red);display:grid;place-items:center;}
.tick svg{width:.85cqw;height:.85cqw;fill:#fff;}

.hero-script{
  position:absolute;left:6.5%;top:89.5%;margin:0;
  font-family:"Priestacy",cursive;
  font-size:1.66cqw;line-height:1.18;color:var(--navy);
  transform:rotate(-6deg);transform-origin:left center;
}
.hero-script .l2{display:inline-block;margin-left:1.4cqw;}
.hero-swash{left:5.4%;top:97.5%;width:10.8%;transform:rotate(-6deg);transform-origin:left center;}
.hero-swash svg{display:block;width:100%;height:auto;}

.hero-badge{left:61.4%;top:29%;width:12.1%;line-height:0;}
.hero-badge img{display:block;width:100%;height:auto;}

/* estimate panel - drawn, not painted into the plate */
.hero-form{
  position:absolute;right:3.2%;top:16%;width:22.5%;
  background:rgba(9,32,70,.94);border:.16cqw solid var(--gold);
  border-radius:.65cqw;padding:1.5cqw 1.5cqw 1.3cqw;line-height:normal;
  box-shadow:0 .5cqw 1.6cqw rgba(0,0,0,.42);
}
.hero-form h2{
  margin:0;font-family:var(--ui);font-weight:800;white-space:nowrap;
  font-size:1.55cqw;letter-spacing:.005em;color:#fff;text-align:center;line-height:1;
}
.hero-form h2 em{font-style:normal;color:var(--gold);}
.hero-form .fine{
  margin:.5cqw 0 0;font-family:var(--ui);font-weight:600;
  text-align:center;font-size:.82cqw;letter-spacing:.03em;color:#dbe7f9;
}
.hero-form input,.hero-form select{
  display:block;width:100%;height:2.55cqw;margin-top:.72cqw;border:0;border-radius:.3cqw;
  padding:0 .85cqw;font-family:var(--ui);font-size:1.02cqw;color:#1d2b45;background:#fff;
}
.hero-form select{
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z' fill='%230B2A5B'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .6cqw center;background-size:1.6cqw 1.6cqw;
  padding-right:2.6cqw;
}
.hero-form select:invalid{color:#8b97ab;}
.hero-form select option{color:#1d2b45;}
.hero-form input::placeholder{color:#8b97ab;}
.hero-form button{
  display:flex;align-items:center;justify-content:center;gap:.6cqw;
  width:100%;height:3cqw;margin-top:.95cqw;border:0;border-radius:.3cqw;
  background:var(--red);color:#fff;cursor:pointer;white-space:nowrap;
  font-family:var(--ui);font-weight:800;font-size:1.15cqw;letter-spacing:.04em;
}
.hero-form button svg{width:1.2cqw;height:1.2cqw;fill:#fff;flex:0 0 auto;}
.hero-form button:hover{background:var(--red-dark);}
.hero-form .privacy{
  margin:.75cqw 0 0;display:flex;align-items:center;justify-content:center;gap:.45cqw;
  font-family:var(--ui);text-align:center;font-size:.82cqw;color:#dbe7f9;
}
.hero-form .privacy svg{width:.9cqw;height:.9cqw;fill:#dbe7f9;flex:0 0 auto;}

/* ---------- Trust strip --------------------------------- */
.trust{border-bottom:1px solid var(--line);background:#fff;}
.trust ul{
  list-style:none;margin:0 auto;padding:16px 20px;max-width:var(--shell);
  display:grid;grid-template-columns:repeat(6,1fr);gap:0;
}
.trust li{
  display:flex;align-items:center;gap:11px;padding:0 16px;
  border-right:1px solid var(--line);
}
.trust li:last-child{border-right:0;}
.trust svg{width:34px;height:34px;fill:var(--navy);color:var(--navy);flex:0 0 auto;}
/* outline marks: drawn with strokes so they read like the comp's line icons */
.trust svg.ic-stroke{fill:none;stroke:currentColor;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;}
.trust b{
  display:block;font-family:var(--ui);font-weight:800;
  font-size:.8rem;letter-spacing:.04em;color:var(--navy);line-height:1.2;
}
.trust span{display:block;font-size:.72rem;color:#5a6a83;letter-spacing:.03em;}

/* ---------- Services ------------------------------------ */
.services{padding:44px 0 52px;}
.svc-head{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:end;margin-bottom:26px;}
.rule{display:flex;align-items:center;gap:12px;margin:0 0 10px;}
.rule i{display:block;width:44px;height:3px;background:var(--red);}
.rule span{font-family:var(--ui);font-weight:700;font-size:.76rem;letter-spacing:.22em;color:var(--navy);}
.svc-head h2{
  font-family:var(--display);font-weight:700;font-size:2.85rem;letter-spacing:-.005em;
  line-height:1.06;margin:0;color:var(--navy);
}
.svc-head h2 .light{display:block;font-weight:400;color:#334f7d;}
.svc-head p{margin:0 0 14px;font-size:1rem;color:#3d4d68;max-width:56ch;}
.svc-head .all{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-family:var(--ui);font-weight:800;font-size:.9rem;
  letter-spacing:.06em;color:var(--navy);border-bottom:2px solid var(--red);padding-bottom:4px;
}

.svc-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;}
.svc-card{
  position:relative;display:block;text-decoration:none;overflow:visible;
  border-radius:4px;background:var(--navy);
}
.svc-card img{display:block;width:100%;max-width:none;height:auto;margin:0;border:0;border-radius:4px 4px 0 0;}
.svc-card .body{padding:14px 14px 18px;color:#fff;}
.svc-card h3{
  margin:0 0 5px;font-family:var(--ui);font-weight:800;
  font-size:1rem;letter-spacing:.03em;
}
.svc-card p{margin:0;font-size:.82rem;line-height:1.35;color:#c6d6ee;padding-right:34px;}
.svc-card .go{
  position:absolute;right:12px;bottom:14px;width:30px;height:30px;border-radius:50%;
  background:var(--red);display:grid;place-items:center;
}
.svc-card .go svg{width:14px;height:14px;fill:#fff;}
.svc-card:hover{background:var(--navy-deep);}

/* ---------- Storm band ---------------------------------- */
.storm .layer{color:#fff;}
.storm-copy{left:3.81%;top:6%;width:36%;}
.storm-eyebrow{
  font-family:var(--ui);font-weight:700;font-size:.95cqw;
  letter-spacing:.28em;margin:0 0 .5em;color:#fff;
}
.storm h2{
  margin:0;font-weight:700;
  font-size:3.05cqw;line-height:1.02;color:#fff;font-family:var(--display);
}
.storm h2 b{color:var(--gold);font-weight:900;}
.storm .lede{margin:.7cqw 0 0;font-size:1.05cqw;color:#e7eefb;}
.storm ul{list-style:none;margin:.75cqw 0 0;padding:0;display:grid;gap:.45cqw;}
.storm li{
  display:flex;align-items:center;gap:.7cqw;font-size:.95cqw;letter-spacing:.05em;
  color:#fff;font-family:var(--ui);font-weight:600;text-transform:uppercase;
}
.tick-gold{width:1.45cqw;height:1.45cqw;flex:0 0 auto;border-radius:50%;background:var(--gold);display:grid;place-items:center;}
.tick-gold svg{width:.9cqw;height:.9cqw;fill:var(--navy);}
/* The gold CTA is painted into each plate. The anchor is positioned
   over it and carries only the label, so nothing is drawn twice. */
.btn-gold{
  position:absolute;display:flex;align-items:center;
  color:var(--navy);text-decoration:none;background:transparent;
  border-radius:.3cqw;white-space:nowrap;
  font-family:var(--ui);font-weight:800;letter-spacing:.03em;
}
.btn-gold svg{display:none;}
.btn-gold:hover{background:rgba(255,255,255,.16);}
/* Painted arrow starts at 87% of the storm button and 80% of the areas
   button, so each label is centred in the space before it. */
.storm .btn-gold{left:3.81%;top:76.07%;width:24.22%;height:17.95%;
  padding-left:1.6cqw;padding-right:4.7cqw;font-size:1.33cqw;justify-content:center;}
.areas .btn-gold{left:3.81%;top:73.25%;width:21.88%;height:18.86%;
  padding-left:1.4cqw;padding-right:6.2cqw;font-size:1.02cqw;justify-content:center;}
.storm-inset{left:41.4%;top:63.7%;width:12.8%;height:11.5%;background:var(--red);display:flex;align-items:center;justify-content:center;}
.storm-inset span{font-family:var(--ui);font-weight:800;font-size:.92cqw;letter-spacing:.04em;color:#fff;}
.storm-script{
  right:3.5%;top:13%;width:26%;text-align:center;margin:0;
  font-family:"Priestacy",cursive;font-size:2.3cqw;line-height:1.2;color:#fff;
}

/* eyebrow rule scales with the plate when used inside a band */
.band .rule{margin:0 0 .8cqw;gap:.8cqw;}
.band .rule i{width:3.2cqw;height:.28cqw;}
.band .rule span{font-size:1cqw;letter-spacing:.22em;}

/* ---------- Service areas band -------------------------- */
.areas .layer{color:var(--navy);}
.areas-copy{left:3.81%;top:9%;width:41%;}
.areas h2{
  margin:0;font-weight:700;
  font-size:2.4cqw;line-height:1.05;color:var(--navy);font-family:var(--display);
}
.areas h2 span{display:block;}
.areas p{margin:.8cqw 0 0;font-size:.95cqw;line-height:1.38;color:#20395f;max-width:40ch;}


/* ---------- Interactive city map ------------------------- */
/* The painted pins were removed from the plate; every served city has its
   own pin, placed by latitude/longitude projected into the map area and
   linking to that city's page. */
.pinmap{left:0;top:0;right:0;bottom:0;pointer-events:none;z-index:4;}
.pinmap .pin{
  position:absolute;transform:translate(-50%,-100%);pointer-events:auto;
  text-decoration:none;line-height:0;z-index:2;
}
.pinmap .dot{
  display:block;width:.52cqw;height:.72cqw;
  background:var(--red);border:.055cqw solid rgba(255,255,255,.95);
  border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  box-shadow:0 .06cqw .18cqw rgba(0,0,0,.3);
  transition:transform .12s ease,background .12s ease;
}
.pinmap .pin:hover .dot,.pinmap .pin:focus-visible .dot{
  transform:scale(2.2);background:#0B2A5B;z-index:5;
}
.pinmap .lbl{
  position:absolute;left:50%;bottom:115%;transform:translateX(-50%);
  white-space:nowrap;opacity:0;visibility:hidden;transition:opacity .12s ease;
  background:var(--navy);color:#fff;border:.1cqw solid var(--gold);
  border-radius:.3cqw;padding:.35cqw .7cqw;
  font-family:var(--ui);font-weight:700;font-size:.85cqw;line-height:1.2;
  box-shadow:0 .2cqw .6cqw rgba(0,0,0,.4);
}
.pinmap .pin:hover .lbl,.pinmap .pin:focus-visible .lbl{opacity:1;visibility:visible;z-index:6;}
.pinmap .pin:hover,.pinmap .pin:focus-visible{z-index:9;}

.pin-filter{position:absolute;left:48.4%;top:2.5%;display:flex;gap:.35cqw;pointer-events:auto;}
.pin-filter button{
  cursor:pointer;border:.1cqw solid rgba(11,42,91,.35);background:rgba(255,255,255,.9);
  color:var(--navy);border-radius:.25cqw;padding:.22cqw .55cqw;
  font-family:var(--ui);font-weight:800;font-size:.75cqw;letter-spacing:.03em;
}
.pin-filter button.on{background:var(--navy);color:#fff;border-color:var(--navy);}
.pin-filter button:hover{background:var(--gold);color:var(--navy);}

/* County names sit on the map between the painted pins (pins span
   x508-770, y25-186 of the 1024x228 plate). */
.areas .cty{pointer-events:none;
  text-align:center;line-height:1.15;color:var(--navy);
  font-family:var(--ui);font-weight:800;font-size:1.12cqw;letter-spacing:.02em;
  text-shadow:0 1px 0 rgba(255,255,255,.85);
}
.areas .cty1{left:50.6%;top:14.5%;width:8cqw;}
.areas .cty2{left:58.4%;top:32.5%;width:10cqw;}
.areas .cty3{left:66.2%;top:62.5%;width:8cqw;}

/* Gold check circles are painted into the plate at x=841-862;
   each label is pinned beside its own circle. */
.areas-list{left:0;top:0;right:0;bottom:0;pointer-events:none;}
.areas-list h3,.areas-list li{pointer-events:auto;}
.areas-list h3{
  position:absolute;left:81.4%;top:11%;width:17.5%;margin:0;font-family:var(--ui);font-weight:800;
  font-size:1.25cqw;letter-spacing:.03em;color:#fff;line-height:1.25;
}
.areas-list ul{list-style:none;margin:0;padding:0;}
.areas-list li{
  position:absolute;left:86.2%;width:13.6%;
  font-size:.8cqw;letter-spacing:.04em;color:#fff;white-space:nowrap;
  font-family:var(--ui);font-weight:600;text-transform:uppercase;line-height:1.15;
}
.areas-list .c1{top:36.6%;} .areas-list .c2{top:51.1%;}
.areas-list .c3{top:65.5%;} .areas-list .c4{top:80%;}

/* ---------- Stats bar ----------------------------------- */
.stats .layer{color:#fff;}
.stats .item{top:22%;width:max-content;}
.stats .item b{
  display:block;font-weight:700;
  font-family:var(--display);font-size:2.4cqw;line-height:1;letter-spacing:-.01em;
}
.stats .item span{
  display:block;font-size:.82cqw;letter-spacing:.09em;line-height:1.35;
  font-family:var(--ui);font-weight:600;color:#dbe6f8;
}
.stats .s1{left:11%;} .stats .s2{left:33.5%;}
.stats .s3{left:53.2%;} .stats .s4{left:72.4%;}
.stats-swash{right:9.4%;top:45.5%;width:8.2%;transform:rotate(-8deg);}
.stats-swash svg{display:block;width:100%;height:auto;}
.stats .script{
  right:1.5%;top:14%;width:23%;text-align:center;margin:0;
  font-family:"Priestacy",cursive;font-size:2.15cqw;line-height:1.2;color:#fff;
}


/* ---------- Footer -------------------------------------- */
.site-foot{background:var(--navy-deep);color:#cfdcf2;margin-top:0;padding:40px 0 165px;}
.foot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
.site-foot h4{
  font-family:var(--ui);font-weight:800;font-size:.88rem;
  letter-spacing:.12em;color:#fff;margin:0 0 14px;
}
.site-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;}
.site-foot a{color:#cfdcf2;text-decoration:none;font-size:.88rem;}
.site-foot a:hover{color:var(--gold);}
.site-foot .u-text-2{margin:0 0 10px;font-size:.9rem;line-height:1.5;color:#cfdcf2;}
.foot-phone{
  display:inline-block;font-family:var(--ui);font-weight:800;
  font-size:1.3rem;color:#fff;text-decoration:none;margin-bottom:6px;
}
.foot-legal{
  border-top:1px solid rgba(255,255,255,.14);margin-top:30px;padding-top:18px;
  display:flex;flex-wrap:wrap;gap:8px 20px;font-size:.8rem;color:#9fb3d4;
}

/* ---------- Floating call / text buttons ---------------- */
/* Free-floating pair, bottom centre, following the scroll. */
.sticky-bar{
  position:fixed;left:50%;bottom:16px;transform:translateX(-50%);
  z-index:9000;display:flex;flex-direction:column;align-items:center;gap:7px;
  background:none;border:0;width:auto;max-width:calc(100% - 24px);pointer-events:none;
}
.sticky-bar a{
  display:block;line-height:0;padding:0;background:none;pointer-events:auto;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.45));
}
.sticky-call img{display:block;height:clamp(51.5px,15.1vw,67px);width:auto;}
.sticky-text img{display:block;height:clamp(34px,10vw,44px);width:auto;}
.sticky-bar a:hover img{filter:brightness(1.06);}
/* Step aside while someone is filling in the estimate form. */
.sticky-bar{transition:opacity .18s ease,visibility .18s ease;}
.page:has(.hero-form :focus) ~ .sticky-bar,
body:has(.hero-form :focus) .sticky-bar{opacity:0;visibility:hidden;}
@media (prefers-reduced-motion:reduce){.sticky-bar{transition:none;}}

/* ---------- Responsive ---------------------------------- */
@media (max-width:1000px){
  /* Below 1000px the pinned header returns to a normal stacked bar. */
  .site-head{position:relative;background:#fff;border-bottom:1px solid var(--line);
    display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 14px;}
  .brand,.credentials,.mainnav,.head-call{position:static;left:auto;top:auto;right:auto;width:auto;height:auto;}
  .brand img{width:178px;}
  .credentials{font-size:.68rem;margin-left:auto;}
  .navtoggle{display:block;}
  .head-call{width:100%;height:auto;order:5;padding:8px 14px;border-radius:6px;gap:10px;}
  .head-call .num{font-size:1.18rem;}
  .head-call .sub{font-size:.6rem;}
  .head-call svg{width:20px;height:20px;}
  .mainnav{display:none;width:100%;order:6;}
  .mainnav.open{display:block;background:#fff;}
  .mainnav ul{flex-direction:column;gap:0;}
  .mainnav a{display:block;font-size:.95rem;padding:11px 4px;border-bottom:1px solid var(--line);
    color:var(--navy) !important;text-shadow:none !important;}
  .credentials{color:#12203A !important;text-shadow:none !important;}

  .trust ul{grid-template-columns:repeat(3,1fr);gap:14px 0;}
  .trust li:nth-child(3n){border-right:0;}
  .svc-head{grid-template-columns:1fr;gap:16px;}
  .svc-head h2{font-size:2rem;}
  .svc-grid{grid-template-columns:repeat(3,1fr);}
}

/* ---------- Small screens ---------------------------------
   The composition is proportional, so phones and tablets get the same
   pinned desktop layout, scaled down, rather than a re-stacked one.
   Two exceptions are made for usability, both noted below.        */

/* Tablets and phones keep every band pinned exactly as on desktop. */


/* The plate bands stay pinned at every width. These are the flow
   sections underneath them, which still need to reflow to fit. */
@media (max-width:1000px){
  .svc-head{grid-template-columns:1fr;gap:16px;}
  .svc-head h2{font-size:2rem;}
  .svc-grid{grid-template-columns:repeat(3,1fr);}
  .trust ul{grid-template-columns:repeat(3,1fr);gap:14px 0;}
  .trust li:nth-child(3n){border-right:0;}
}
@media (max-width:700px){
  .svc-grid{grid-template-columns:repeat(3,1fr);}
  .svc-head h2{font-size:1.6rem;}
  .trust ul{grid-template-columns:repeat(2,1fr);}
  .trust li{border-right:1px solid var(--line);padding:0 10px;}
  .trust li:nth-child(2n){border-right:0;}
  .trust b{font-size:.72rem;}
  .trust span{font-size:.66rem;}
  .trust svg{width:24px;height:24px;}
  .foot-grid{grid-template-columns:1fr;gap:26px;}
}
@media (max-width:460px){
  .svc-grid{grid-template-columns:1fr;}
}

@media (max-width:600px){
  /* Plate stays whole; the copy and the estimate panel stack beneath it. */
  .hero .layer{position:static;padding:16px 16px 2px;background:#f2f5fa;}
  .hero .layer::before{display:none;}
  .hero .ov,.hero-copy,.hero-eyebrow,.hero-title span,.hero-sub,
  .hero-checks,.hero-script,.hero-swash,.hero-badge{
    position:static;left:auto;top:auto;right:auto;bottom:auto;width:auto;transform:none;
  }
  .hero-eyebrow{font-size:.72rem;letter-spacing:.28em;}
  .hero-title span{display:block;white-space:normal;letter-spacing:normal;}
  .hero-title .t1{font-size:2.05rem;}
  .hero-title .t2{font-size:1.7rem;}
  .hero-title .t3,.hero-title .t4{font-size:1.9rem;}
  .hero-sub{font-size:.93rem;margin-top:11px;}
  .hero-checks{margin-top:13px;}
  .hero-checks li{height:auto;margin-bottom:9px;font-size:.85rem;gap:10px;}
  .tick{width:21px;height:21px;}
  .tick svg{width:12px;height:12px;}
  .hero-script{font-size:1.6rem;margin-top:14px;}
  .hero-script .l2{margin-left:0;}
  .hero-swash{display:none;}
  .hero-badge img{width:118px;height:auto;}
  .hero-badge{width:auto;margin:12px auto 0;text-align:center;}

  .hero-form{
    position:static;width:auto;margin:12px 14px 16px;padding:16px;
    border-radius:8px;border:2px solid var(--gold);background:var(--navy);box-shadow:none;
  }
  .hero-form h2{font-size:1.2rem;white-space:normal;}
  .hero-form .fine{font-size:.72rem;margin-top:4px;}
  .hero-form input,.hero-form select{height:46px;font-size:1rem;margin-top:9px;border-radius:4px;padding:0 12px;}
  .hero-form button{height:52px;margin-top:12px;font-size:1rem;border-radius:4px;gap:8px;}
  .hero-form button svg{width:16px;height:16px;}
  .hero-form .privacy{font-size:.72rem;margin-top:10px;gap:6px;}
  .hero-form .privacy svg{width:12px;height:12px;}

}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;}
}


/* ---------- Sitewide typography -------------------------- */
/* One pair across the whole site: Archivo for text, Archivo Narrow
   for headings and display. Kaushan Script only where the artwork uses it. */
html body,html body *{font-family:var(--ui);}
html body h1,html body h2,html body h3,html body h4,html body h5,html body h6,
html body .hero-title span,html body .storm h2,html body .areas h2,
html body .svc-head h2,html body .stats .item b,html body .hero-badge .n,
html body .hero-checks li,html body .site-foot h4{font-family:var(--display);}
/* The script accents contain spans, and a direct rule on a child always
   beats the family inherited from its parent — so descendants are named too. */
html body .ab-script,html body .ab-tag,
html body .hero-script,html body .hero-script *,
html body .storm-script,html body .storm-script *,
html body .stats .script,html body .stats .script *{
  font-family:"Priestacy",cursive !important;
}

/* ---------- About the company ---------------------------
   A real two-column layout: the photo is an image, everything else is
   flowing HTML, so the copy can be edited or translated without any
   coordinates needing to change. */
.about{background:#fff;color:var(--navy);}
.ab-top{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);align-items:stretch;}
.ab-photo{position:relative;overflow:hidden;background:#dfe8f4;}
.ab-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:left center;}
.ab-script{
  position:absolute;left:4%;top:3%;margin:0;
  font-family:"Priestacy",cursive;
  font-size:clamp(1.4rem,2.5vw,2.4rem);line-height:1.16;color:var(--navy);
}

.ab-text{padding:clamp(22px,3.2vw,54px) clamp(20px,3.4vw,58px);display:flex;flex-direction:column;}
.ab-eyebrow{display:flex;align-items:center;gap:16px;margin:0 0 14px;}
.ab-eyebrow i{display:block;flex:1 1 auto;height:2px;background:var(--red);}
.ab-eyebrow span{
  font-family:var(--ui);font-weight:800;font-size:clamp(.72rem,1vw,.95rem);
  letter-spacing:.13em;color:var(--red);white-space:nowrap;
}
.ab-h2{
  margin:0 0 12px;font-family:var(--display);font-weight:700;
  font-size:clamp(1.5rem,2.9vw,2.9rem);line-height:1.1;color:var(--navy);
}
.ab-tag{
  margin:0 0 20px;font-family:"Priestacy",cursive;
  font-size:clamp(1.4rem,2.6vw,2.6rem);line-height:1.12;color:var(--red);
}
.ab-text > p:not([class]){
  margin:0 0 16px;font-family:var(--ui);color:#1d3055;
  font-size:clamp(.92rem,1.05vw,1.05rem);line-height:1.55;
}

.ab-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px;}
.ab-btn{
  display:flex;align-items:center;gap:10px;flex:1 1 260px;
  text-decoration:none;color:#fff;border-radius:7px;padding:13px 16px;
  box-shadow:0 3px 12px rgba(6,24,56,.22);
}
.ab-btn svg{width:26px;height:26px;flex:0 0 auto;background:#fff;border-radius:50%;padding:3px;box-sizing:border-box;}
.ab-btn .arw{width:20px;height:20px;background:none;padding:0;margin-left:auto;}
.ab-btn .lbl{font-family:var(--ui);font-weight:800;font-size:.86rem;letter-spacing:.03em;line-height:1.2;color:#fff;}
.ab-btn .stars{font-size:.95rem;color:var(--gold);letter-spacing:.06em;}
.ab-btn-g{background:var(--navy);}
.ab-btn-y{background:var(--red);}
.ab-btn-g:hover{background:#0d356f;}
.ab-btn-y:hover{background:var(--red-dark);}

.ab-strip{position:relative;container-type:inline-size;line-height:0;}
.ab-strip > img{display:block;width:100%;height:auto;}
/* The painted icons are not evenly spaced (centres 170, 440, 702, 963,
   1225, 1497 of 1672), so each label is placed on its own icon rather than
   sitting in an even six-column grid. */
.ab-feats{
  position:absolute;left:0;right:0;top:41%;margin:0;padding:0;list-style:none;
  text-align:center;
}
.ab-feats li{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap;}
.ab-feats li:nth-child(1){left:10.17%;}
.ab-feats li:nth-child(2){left:26.32%;}
.ab-feats li:nth-child(3){left:41.99%;}
.ab-feats li:nth-child(4){left:57.60%;}
.ab-feats li:nth-child(5){left:73.27%;}
.ab-feats li:nth-child(6){left:89.53%;}
.ab-feats li{
  font-family:var(--ui);font-weight:800;font-size:.92cqw;
  letter-spacing:.04em;line-height:1.28;color:#fff;
}

@media (max-width:760px){
  /* Phone layout per the supplied mockup: photo with the script over it,
     then a white copy panel, full-width buttons and the six-up trust strip. */
  .ab-top{grid-template-columns:1fr;}
  .ab-photo{aspect-ratio:1010/620;}
  .ab-photo img{height:100%;object-fit:cover;object-position:58% top;}
  .ab-script{font-size:1.3rem;left:4%;top:2.5%;color:var(--navy);line-height:1.16;}
  .ab-text{background:#fff;padding:22px 16px 20px;}
  .ab-eyebrow{gap:12px;}
  .ab-eyebrow i{height:2px;}
  .ab-eyebrow span{color:var(--red);}
  .ab-h2{color:var(--navy);font-size:1.62rem;text-align:center;}
  .ab-eyebrow{justify-content:center;}
  .ab-tag{font-size:1.75rem;text-align:center;color:var(--red);}
  .ab-text > p:not([class]){color:#22375c;font-size:1rem;}
  .ab-btns{gap:10px;}
  .ab-btn{flex:1 1 100%;padding:14px 16px;border-radius:8px;}
  .ab-btn .lbl{font-size:.92rem;}
  /* six across needs room; below 480 it drops to three so the labels stay
     readable rather than shrinking to four pixels */
  .ab-feats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));}
  .ab-feats li{position:static;transform:none;white-space:normal;font-size:2.05cqw;line-height:1.22;padding:0 2px;}
}
@media (max-width:480px){
  .ab-feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));row-gap:14px;}
  .ab-feats li{position:static;transform:none;white-space:normal;font-size:3.3cqw;}
  .ab-feats li:nth-child(3n){border-right:0;}
}

/* ---------- Footer map ----------------------------------- */
.foot-map{
  display:grid;grid-template-columns:1fr 2fr;gap:26px;align-items:stretch;
  margin-top:34px;padding-top:30px;border-top:1px solid rgba(255,255,255,.14);
}
.foot-map-info h4{margin:0 0 12px;}
.foot-map-info p{margin:0 0 8px;font-size:.9rem;line-height:1.5;color:#cfdcf2;}
.site-foot .foot-map-phone{
  display:inline-block;margin:4px 0 10px;text-decoration:none;color:#fff;
  font-family:var(--display);font-weight:700;font-size:1.4rem;
}
.site-foot .foot-map-link{
  display:block;margin-top:14px;line-height:0;max-width:300px;
}
.site-foot .foot-map-link img{display:block;width:100%;height:auto;}
.site-foot .foot-map-link:hover img{filter:brightness(1.06);}
.foot-map-frame{
  position:relative;min-height:280px;border-radius:8px;overflow:hidden;
  border:2px solid rgba(255,255,255,.18);background:#0d2444;
}
.foot-map-frame iframe{
  display:block;width:100%;height:100%;min-height:280px;border:0;filter:saturate(.95);
}
@media (max-width:900px){
  .foot-map{grid-template-columns:1fr;gap:18px;}
  .foot-map-frame,.foot-map-frame iframe{min-height:230px;}
}

/* the header overlays the top of each band, so anchored jumps stop clear of it */
#about,#services{scroll-margin-top:90px;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

/* ---------- Sunland local block --------------------------
   Plate is 1671x941. Painted: four icon circles (y557-659 at x48-148,
   222-322, 400-500, 580-681), the navy strip (y765-912) with the
   California mark at x63-151 and the mountains at x359-498, the blank road
   sign (x760-1149, y330-559) and the map circle (from x719). The eyebrow
   bar and the button are drawn, since the plate has neither. */
.sunland .layer{color:var(--navy);}
.sl-eyebrow{
  left:3.6%;top:3.6%;width:35%;height:4.8%;margin:0;
  display:flex;align-items:center;justify-content:center;gap:1cqw;
  background:var(--red);border-radius:.25cqw;box-sizing:border-box;
  font-family:var(--ui);font-weight:800;font-size:1.28cqw;
  letter-spacing:.05em;color:#fff;white-space:nowrap;
}
.sl-eyebrow b{font-size:.85em;color:#fff;}
.sl-h2{left:3.7%;top:9.1%;width:48%;margin:0;}
.sl-h2 .l1,.sl-h2 .l2{
  display:block;font-family:var(--ui);font-weight:900;
  line-height:.92;letter-spacing:-.022em;white-space:nowrap;
  text-shadow:0 .09cqw .16cqw rgba(6,20,45,.28);
}
.sl-h2 .l1{font-size:5.62cqw;color:var(--navy);}
.sl-h2 .l2{font-size:8.1cqw;color:var(--red);margin-top:-.9cqw;
  text-shadow:0 .09cqw .16cqw rgba(90,0,10,.3);}
.sl-sub{
  left:3.6%;top:29.8%;width:43%;margin:0;font-family:var(--ui);font-weight:800;
  font-size:1.32cqw;line-height:1.3;letter-spacing:.005em;color:var(--navy);
}
.sl-rules{left:3.6%;top:37.6%;width:6.8cqw;display:flex;gap:.5cqw;}
.sl-rules i{display:block;flex:1 1 0;height:.3cqw;}
.sl-rules i:first-child{background:var(--red);}
.sl-rules i:last-child{background:var(--navy);}
.sl-copy{
  left:3.5%;top:39.6%;width:38.4%;margin:0;font-family:var(--ui);
  font-size:1.07cqw;line-height:1.5;color:#1d3055;
}
/* labels sit under the painted icon circles, which end at y659 */
.sl-feats{
  left:1.9%;top:70.2%;width:41.5%;margin:0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(4,1fr);text-align:center;
}
.sl-feats li{
  font-family:var(--ui);font-weight:800;font-size:.9cqw;
  letter-spacing:.02em;line-height:1.22;color:var(--navy);
}
.sl-btn{
  left:3.6%;top:76.2%;width:30%;height:6.2%;
  display:flex;align-items:center;justify-content:center;gap:1.2cqw;
  background:var(--red);border-radius:.45cqw;box-sizing:border-box;
  box-shadow:0 .25cqw .8cqw rgba(0,0,0,.3);
  text-decoration:none;font-family:var(--ui);font-weight:800;
  font-size:1.5cqw;letter-spacing:.02em;color:#fff;
}
.sl-script{
  left:75.5%;top:4.7%;width:21%;margin:0;text-align:center;
  font-family:"Priestacy",cursive;font-size:3.05cqw;line-height:1;color:#fff;
}
.sl-script-sub{
  left:74.5%;top:15.2%;width:23%;margin:0;text-align:center;
  font-family:var(--ui);font-weight:600;font-size:1cqw;
  letter-spacing:.2em;color:#fff;
}
/* road sign face x760-1149, y330-559, tilted about 3 degrees */
.sl-sign{
  left:47.4%;top:40.5%;width:16.4%;margin:0;text-align:center;
  transform:rotate(3deg);transform-origin:center center;color:#fff;
  text-shadow:0 .08cqw .18cqw rgba(0,0,0,.45);
}
.sl-sign .s1{display:block;font-family:var(--ui);font-weight:500;font-size:2.9cqw;line-height:1.02;letter-spacing:-.005em;}
.sl-sign .s2{display:block;font-family:var(--ui);font-weight:500;font-size:1.1cqw;line-height:1.1;letter-spacing:.015em;margin-top:.4cqw;}
.sl-map{
  margin:0;font-family:var(--ui);font-weight:600;font-size:.92cqw;color:#3b4657;white-space:nowrap;
}
.sl-map-1{left:52%;top:63.5%;}
.sl-map-2{left:56.5%;top:72%;}
.sl-map-3{left:46.5%;top:81%;}
.sl-map-4{left:53.5%;top:86%;}
.sl-map-pin{left:48.5%;top:72.5%;font-weight:800;color:var(--navy);}
/* strip marks: California x63-151, mountains x359-498, circle from x719 */
.sl-strip{left:0;right:0;top:84.2%;margin:0;padding:0;list-style:none;}
.sl-strip li:nth-child(1){left:10.2%;}
.sl-strip li:nth-child(2){left:31.5%;}
.sl-strip li{
  position:absolute;top:0;
  font-family:var(--ui);font-weight:800;font-size:.95cqw;
  letter-spacing:.015em;line-height:1.42;color:#fff;white-space:nowrap;
}

/* ---------- Long-form local SEO -------------------------- */
.seo{background:#fff;color:var(--navy);}
.seo-inner{max-width:1000px;margin:0 auto;padding:clamp(34px,4vw,72px) clamp(18px,3vw,40px);}
.seo h1{
  margin:0 0 18px;font-family:var(--display);font-weight:700;
  font-size:clamp(1.6rem,3vw,2.6rem);line-height:1.14;color:var(--navy);
}
.seo h2{
  margin:34px 0 12px;font-family:var(--display);font-weight:700;
  font-size:clamp(1.15rem,1.8vw,1.55rem);line-height:1.2;color:var(--navy);
}
.seo p{margin:0 0 15px;font-family:var(--ui);font-size:1.02rem;line-height:1.68;color:#22375c;}
.seo .seo-lead{font-size:1.12rem;line-height:1.62;color:#12203A;}
.seo-list{margin:0 0 15px;padding:0 0 0 20px;}
.seo-list li{margin-bottom:9px;font-family:var(--ui);font-size:1.02rem;line-height:1.6;color:#22375c;}
.seo-list strong{color:var(--navy);}
.seo-cta{
  margin-top:26px;padding:18px 20px;border-left:4px solid var(--gold);
  background:#f2f6fc;font-weight:600;
}
.seo a{color:var(--red);font-weight:700;}
.seo a:hover{color:var(--navy);}


/* ---------- About Sunland -------------------------------
   Plate is 1669x942 with the photo, the gold wedges and the navy strip
   painted in; the four feature icons are drawn, since the plate has none. */
.aboutsl .layer{color:var(--navy);}
.as-eyebrow{
  left:61.3%;top:4.4%;width:34%;margin:0;display:flex;align-items:center;gap:1.7cqw;
}
.as-eyebrow i{display:block;width:7.4cqw;height:.36cqw;background:var(--red);flex:0 0 auto;}
.as-eyebrow span{
  font-family:var(--ui);font-weight:700;font-size:1.42cqw;
  letter-spacing:.34em;color:var(--navy);
}
.as-h2{left:59.4%;top:8.7%;width:39%;margin:0;}
.as-city{
  display:block;font-family:var(--display);font-weight:700;
  font-size:6.1cqw;line-height:.96;letter-spacing:-.015em;color:var(--navy);
}
.as-state{
  display:block;font-family:var(--ui);font-weight:700;
  font-size:2.02cqw;line-height:1;letter-spacing:.395em;color:var(--red);margin-top:.5cqw;
}
.as-tagline{
  left:58.6%;top:26.7%;width:40%;margin:0;
  font-family:var(--ui);font-weight:600;font-size:1.06cqw;
  letter-spacing:.115em;color:#33445f;white-space:nowrap;
}
.as-tagline b{color:var(--red);font-size:.86em;}
.as-copy{left:55.4%;top:31.9%;width:37.6%;}
.as-copy p{
  margin:0 0 1.25cqw;font-family:var(--ui);font-size:1.08cqw;
  line-height:1.5;color:#22375c;
}
.as-copy strong{font-weight:800;color:var(--navy);}
.as-rule{display:block;width:6.2cqw;height:.3cqw;background:var(--red);margin-top:.6cqw;}

/* the navy strip runs y758-941 with red wedges to x110 and from x1560,
   so the row sits inside that clear band */
.as-feats{
  left:7.8%;right:auto;width:84.4%;top:82.3%;margin:0;padding:0;list-style:none;box-sizing:border-box;
  display:grid;grid-template-columns:repeat(4,1fr);text-align:center;
}
.as-feats li{
  font-family:var(--ui);font-weight:800;font-size:.98cqw;
  letter-spacing:.02em;line-height:1.26;color:#fff;
  display:flex;flex-direction:column;align-items:center;gap:.75cqw;
  border-right:1px solid rgba(255,255,255,.22);
}
.as-feats li:last-child{border-right:0;}
.as-ic{
  width:4.3cqw;height:4.3cqw;border-radius:50%;background:var(--red);
  display:grid;place-items:center;
}
.as-ic svg{width:2.3cqw;height:2.3cqw;fill:#fff;color:#fff;}

@media (max-width:760px){
  /* Phone layout per the mockup: photo, then a white centred copy panel,
     then the four features across the navy strip. */
  .aboutsl .layer{position:static;padding:0;background:none;}
  .aboutsl .ov{position:static;width:auto !important;}
  .aboutsl > .plate{aspect-ratio:1010/430;object-fit:cover;object-position:center 6%;}
  .as-eyebrow{gap:12px;margin:20px 16px 8px;justify-content:center;}
  .as-eyebrow i{width:52px;height:2px;flex:0 0 auto;background:var(--red);}
  .as-eyebrow span{font-size:.86rem;letter-spacing:.3em;color:var(--navy);}
  .as-h2{margin:0 16px 6px;text-align:center;}
  .as-city{font-size:2.9rem;color:var(--navy);}
  .as-state{font-size:1.28rem;letter-spacing:.3em;color:var(--red);margin-top:2px;}
  .as-tagline{
    font-size:.82rem;letter-spacing:.06em;white-space:normal;text-align:center;
    color:var(--navy);margin:10px 16px 16px;
  }
  .as-copy{margin:0 16px;}
  .as-copy p{font-size:1rem;line-height:1.5;color:#22375c;margin-bottom:16px;}
  .as-copy strong{color:var(--navy);}
  .as-rule{margin:2px auto 20px;width:74px;height:3px;}
  .as-feats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:18px 4px 20px;
    background:var(--navy);margin-top:0;}
  .as-feats li{border-right:1px solid rgba(255,255,255,.22);font-size:.68rem;gap:9px;padding:0 3px;min-width:0;}
  .as-feats li:last-child{border-right:0;}
  .as-ic{width:46px;height:46px;flex:0 0 auto;background:var(--red);}
  .as-ic svg{width:23px;height:23px;}
}

/* ---------- FAQ ------------------------------------------
   The header artwork is an image; the ten questions are real
   <details> elements so they open natively and stay crawlable. */
.faq{background:#fff;color:var(--navy);}
/* the poster is drawn at 1024 wide, so the header is capped there and
   centred rather than scaled up to the full page width */
.faq-head{position:relative;container-type:inline-size;line-height:0;}
.faq-head > .plate{display:block;width:100%;height:auto;}
/* the plate paints dashes at x55-129 and x411-481 with stars at x143-166
   and x376-397, so the label sits centred in the gap between the stars */
.faq-eyebrow{
  position:absolute;left:16.3%;top:26.1%;width:20.5%;height:6.1%;margin:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--ui);font-weight:800;font-size:1.62cqw;
  letter-spacing:.1em;color:var(--navy);white-space:nowrap;
}
.faq-ribbon{
  position:absolute;left:3.6%;top:76.7%;width:44.2%;height:15.6%;margin:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--ui);font-weight:800;font-size:1.98cqw;
  letter-spacing:.01em;color:#fff;white-space:nowrap;
}

.faq-inner{max-width:none;margin:0;padding:16px clamp(14px,2vw,30px) 24px;}
.faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;align-items:start;}
.faq-item{
  background:#fbfcfe;border:1px solid #e3e9f2;border-radius:11px;overflow:hidden;
  box-shadow:0 3px 10px rgba(12,34,74,.07);
}
.faq-item summary{
  display:flex;align-items:flex-start;gap:14px;cursor:pointer;list-style:none;
  padding:14px 14px 6px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-ic{
  width:58px;height:58px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  align-self:flex-start;box-shadow:0 2px 6px rgba(12,34,74,.25);
}
.faq-ic svg{width:28px;height:28px;fill:#fff;color:#fff;}
.ic-red{background:var(--red);}
.ic-navy{background:var(--navy);}
.faq-q{
  flex:1 1 auto;font-family:var(--display);font-weight:700;
  font-size:clamp(.95rem,1.15vw,1.12rem);line-height:1.22;color:var(--navy);
}
.faq-t{
  width:26px;height:26px;flex:0 0 auto;border-radius:50%;position:relative;
  border:2px solid var(--navy);
}
.faq-t::before,.faq-t::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--navy);
  transform:translate(-50%,-50%);
}
.faq-t::before{width:12px;height:2px;}
.faq-t::after{width:2px;height:12px;transition:opacity .15s ease;}


.faq-item[open] .faq-t::after{opacity:0;}
.faq-item > p{
  margin:0;padding:0 18px 16px 86px;font-family:var(--ui);
  font-size:.93rem;line-height:1.5;color:#3a4a63;
}
.faq-item[open]{background:#fbfcfe;}

.faq-bar{background:var(--navy);color:#fff;}
.faq-bar-inner{
  max-width:none;margin:0;padding:18px clamp(16px,2.5vw,30px);
  display:flex;align-items:center;gap:clamp(16px,3vw,44px);flex-wrap:wrap;
}
.faq-bi{
  display:flex;align-items:center;gap:12px;margin:0;
  font-family:var(--ui);font-weight:800;font-size:.82rem;
  letter-spacing:.02em;line-height:1.35;color:#fff;
}
.faq-bic{width:36px;height:36px;flex:0 0 auto;display:grid;place-items:center;}
.faq-bic svg{width:32px;height:32px;fill:#fff;}
.faq-cta{
  margin-left:auto;display:inline-flex;align-items:center;gap:12px;
  background:var(--red);color:#fff;text-decoration:none;border-radius:8px;
  padding:15px 26px;font-family:var(--ui);font-weight:800;
  font-size:1.05rem;letter-spacing:.04em;box-shadow:0 4px 14px rgba(0,0,0,.28);
}
.faq-cta svg{width:20px;height:20px;}
.faq-cta:hover{background:var(--red-dark);}

@media (max-width:860px){
  .faq-grid{grid-template-columns:1fr;}
  .faq-ic{width:46px;height:46px;}
  .faq-ic svg{width:23px;height:23px;}
  .faq-item > p{padding-left:16px;}
  .faq-cta{margin-left:0;width:100%;justify-content:center;}
}

/* subtitle lines under the FAQ ribbon.
   They sit in .faq-inner, so they flow under the banner instead of
   being pinned to it - no gap between the banner and the questions. */
.faq-inner .faq-sub{
  margin:0 0 6px;text-align:left;
  font-family:var(--display);font-weight:700;font-size:clamp(1.15rem,1.8vw,1.75rem);
  letter-spacing:.005em;color:var(--navy);
}
.faq-inner .faq-sub2{
  margin:0 0 16px;display:flex;align-items:center;gap:14px;
}
.faq-inner .faq-sub2 i{display:block;width:34px;height:2px;background:var(--navy);}
.faq-inner .faq-sub2 span{
  font-family:var(--ui);font-weight:800;font-size:clamp(.8rem,1.1vw,1rem);
  letter-spacing:.05em;color:var(--navy);white-space:nowrap;
}

/* ---------- Mobile hero and header -----------------------
   Matches the supplied phone mockup: one header row (logo, phone, menu),
   then the copy set over the photo with the estimate panel overlaid. */
.fld-ic{display:none;}
.fldwrap{display:block;}

@media (max-width:1000px){
  .site-head{gap:10px;padding:8px 12px;}
  .brand img{width:150px;}
  .credentials{display:none;}
  .head-call{
    order:0;width:auto;flex:1 1 auto;margin:0 0 0 6px;
    padding:7px 12px;border-radius:7px;gap:9px;justify-content:center;
  }
  .head-call .num{font-size:1.05rem;}
  .head-call .sub{font-size:.55rem;}
  .head-call svg{width:17px;height:17px;}
  .navtoggle{order:1;margin-left:2px;background:none;border:0;padding:4px 2px;display:grid;place-items:center;}
  .navtoggle .lbl{display:none;}
  .navtoggle .bars{display:block;width:30px;height:21px;position:relative;}
  .navtoggle .bars::before,.navtoggle .bars::after,.navtoggle .bars{background:none;}
  .navtoggle .bars::before{content:"";position:absolute;left:0;right:0;top:0;height:3.5px;border-radius:2px;
    background:var(--navy);box-shadow:0 8.5px 0 var(--navy),0 17px 0 var(--navy);}
  .mainnav{order:6;}
}

@media (max-width:600px){
  /* The copy sits on the photo, so the plate becomes the band background
     and the picture element is dropped. */
  .hero .hero-inner{
    background:url("images/01-hero-mobile.jpg") center top/cover no-repeat;
    position:relative;
  }
  .hero .hero-inner > picture{display:none;}
  .hero .layer{
    position:static;padding:22px 16px 0;background:none;
    background-image:linear-gradient(102deg,rgba(255,255,255,.94) 0%,
      rgba(255,255,255,.9) 40%,rgba(255,255,255,.5) 68%,rgba(255,255,255,.08) 92%);
  }
  .hero .layer::before{display:none;}
  .hero-eyebrow{display:none;}
  .hero-copy{position:relative;}
  .hero-title span{display:block;white-space:normal;letter-spacing:normal;}
  .hero-title .t1{font-size:2.25rem;letter-spacing:-.02em;}
  .hero-title .t2{font-size:1.6rem;}
  .hero-title .t3,.hero-title .t4{font-size:2rem;}
  .hero-sub{font-size:.93rem;margin-top:11px;width:74%;}
  .hero-checks{margin-top:13px;}
  .hero-script{font-size:1.5rem;margin-top:12px;}
  .hero .hero-badge{
    position:absolute;right:10px;top:14px;width:auto;margin:0;z-index:4;text-align:right;
  }
  .hero .hero-badge img{width:124px;}
  .hero-form{margin:14px 10px 16px;padding:16px 14px 14px;border-radius:10px;}
  .fldwrap{position:relative;}
  .fld-ic{
    display:grid;place-items:center;position:absolute;left:11px;top:50%;
    transform:translateY(-50%);width:22px;height:22px;pointer-events:none;z-index:2;
  }
  .fld-ic svg{width:19px;height:19px;fill:var(--navy);}
  .hero-form input,.hero-form select{padding-left:41px;}
  .hero-form select{
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z' fill='%230B2A5B'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 11px center;background-size:20px 20px;
    padding-right:38px;
  }
}

/* ---------- Services on phones ---------------------------
   Per the mockup: centred heading block, then each card runs sideways with
   the photo on the left and the navy panel and arrow on the right. */
@media (max-width:760px){
  .svc-head{grid-template-columns:1fr;gap:12px;text-align:center;}
  .svc-head .rule{justify-content:center;}
  .svc-head h2{font-size:1.68rem;line-height:1.1;}
  .svc-head h2 .light{font-size:1.5rem;}
  .svc-head p{font-size:1rem;line-height:1.45;}
  .svc-head .all{
    display:inline-flex;margin:14px auto 0;background:var(--red);color:#fff;
    border-radius:7px;padding:13px 22px;font-size:1rem;border:0;
  }
  .svc-head .all svg{fill:#fff;}
  .svc-head .all:hover{background:var(--red-dark);}

  .svc-grid{grid-template-columns:1fr;gap:12px;}
  .svc-card{
    display:grid;grid-template-columns:42% 1fr;align-items:stretch;
    background:var(--navy);border-radius:9px;overflow:hidden;min-height:126px;
  }
  .svc-card img{width:100%;height:100%;object-fit:cover;display:block;}
  .svc-card .body{
    position:static;padding:12px 52px 12px 14px;display:flex;
    flex-direction:column;justify-content:center;background:none;
  }
  .svc-card .body h3{font-size:.98rem;margin:0 0 5px;color:#fff;line-height:1.15;}
  .svc-card .body p{font-size:.84rem;line-height:1.32;color:#dbe7f9;margin:0;}
  .svc-card .go{
    position:absolute;right:11px;top:50%;transform:translateY(-50%);
    width:36px;height:36px;border-radius:50%;background:var(--red);
    display:grid;place-items:center;
  }
  .svc-card .go svg{width:18px;height:18px;fill:#fff;}
  .svc-card{position:relative;}
}

/* ---------- Storm band on phones -------------------------
   The phone artwork carries its own lettering, so the overlay is dropped and
   only the call to action is kept, as a transparent tap target over the
   painted button (x54-932, y1116-1318 of 1024x1536). */
@media (max-width:700px){
  .storm .layer > .ov:not(.btn-gold),
  .storm .storm-script,
  .storm .storm-inset{display:none !important;}
  .storm .btn-gold{
    left:5.27%;top:72.7%;width:85.7%;height:13.2%;
    background:none;box-shadow:none;font-size:0;
  }
  .storm .btn-gold svg,.storm .btn-gold::after{display:none;}
}

/* ---------- Service areas on phones ----------------------
   The phone artwork carries the copy, the painted pins and the stats, so the
   overlay and the separate stats band are both dropped and only the button
   is kept, as a tap target over the painted one (x51-535, y834-928). */
@media (max-width:700px){
  .areas .layer > .ov:not(.btn-gold),
  .areas .pinmap,
  .areas .areas-list,
  .areas .cty{display:none !important;}
  .areas .btn-gold{
    left:4.98%;top:54.3%;width:47.3%;height:6.1%;
    background:none;box-shadow:none;font-size:0;
  }
  .areas .btn-gold svg,.areas .btn-gold::after{display:none;}
  .band.stats{display:none;}
}

/* ---------- Sunland block on phones ----------------------
   The phone artwork carries all of the lettering, so the overlay is dropped
   and only the call to action is kept, as a tap target over the painted
   button (x44-585, y932-1013 of 1024x1536). */
@media (max-width:700px){
  /* the layer must stay pinned so the tap target can be a % of the artwork */
  .sunland .layer{position:absolute;inset:0;padding:0;background:none;}
  .sunland .layer > .ov:not(.sl-btn),
  .sunland .sl-strip,
  .sunland .sl-feats,
  .sunland .sl-map,
  .sunland .sl-sign{display:none !important;}
  .sunland .sl-btn{
    left:4.3%;top:60.7%;width:52.9%;height:5.3%;
    background:none;box-shadow:none;font-size:0;padding:0;
  }
  .sunland .sl-btn svg,.sunland .sl-btn::after{display:none;}
}

/* ---------- Sticky call/text on phones --------------------
   Stacked, the floating pair is ~105px tall and lands on top of the
   estimate form. Side by side it is half the height, and it steps aside
   entirely while a field is focused. */
@media (max-width:700px){
  .sticky-bar{flex-direction:row;gap:8px;bottom:12px;}
  .sticky-bar a img{max-height:44px;width:auto;}
}
body.form-focus .sticky-bar{opacity:0;visibility:hidden;}

/* ---------- Services submenu -----------------------------
   Hover-opened on desktop, tap-expanded inside the phone drawer. */
.mainnav .has-sub{position:relative;}
.mainnav .subtoggle{
  display:none;background:none;border:0;padding:6px 8px;cursor:pointer;line-height:0;
}
.mainnav .subtoggle span{
  display:block;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:6px solid #fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));
}
.mainnav .subnav{
  position:absolute;left:0;top:100%;margin:0;padding:10px 0 0;list-style:none;
  min-width:170px;background:none;border:0;box-shadow:none;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .15s ease,transform .15s ease,visibility .15s;
  z-index:60;display:block;
}
.mainnav .has-sub:hover .subnav,
.mainnav .has-sub:focus-within .subnav,
.mainnav .has-sub.open .subnav{opacity:1;visibility:visible;transform:translateY(0);}
.mainnav .subnav li{display:block;margin-bottom:9px;}
.mainnav .subnav a{
  display:inline-block;font-family:var(--ui);font-weight:500;
  font-size:min(1.068cqw,14px);line-height:1;color:#fff;
  text-shadow:0 .08cqw .28cqw rgba(0,0,0,.55),0 0 .12cqw rgba(0,0,0,.35);
  padding-bottom:.42cqw;border-bottom:.18cqw solid transparent;white-space:nowrap;
}
.mainnav .subnav a:hover,
.mainnav .subnav a[aria-current]{border-bottom-color:var(--red);color:#fff;}
/* when a submenu page is open, underline the parent "Services" too so the
   top-level nav still shows where you are while the dropdown is closed */
.mainnav li.has-sub:has(.subnav a[aria-current]) > a,
.mainnav li.sub-active > a{
  color:#fff;border-bottom-color:var(--red);
}

@media (max-width:1000px){
  .mainnav .has-sub{display:flex;flex-wrap:wrap;align-items:center;}
  .mainnav .has-sub > a{flex:1 1 auto;}
  .mainnav .subtoggle{display:block;flex:0 0 auto;}
  .mainnav .subnav{
    position:static;opacity:1;visibility:visible;transform:none;display:none;
    width:100%;box-shadow:none;border:0;border-radius:0;background:#f6f9fd;
    padding:2px 0 6px;margin:0 0 4px;min-width:0;
  }
  .mainnav .has-sub.open .subnav{display:block;}
  .mainnav .subnav li{margin-bottom:0;}
  .mainnav .subnav a{
    display:block;font-size:.92rem;padding:10px 4px 10px 18px;
    color:var(--navy) !important;text-shadow:none !important;
    border-bottom:1px solid var(--line);
  }
  .mainnav .subnav a:hover,
  .mainnav .subnav a[aria-current]{border-bottom-color:var(--red);}
  .mainnav .subtoggle span{border-top-color:var(--navy);filter:none;}
}

/* ---------- About Sunland on phones ----------------------
   The phone artwork carries all of its own lettering, so the overlay is
   dropped and the plate stands alone. */
@media (max-width:700px){
  .aboutsl .layer{display:none !important;}
  .aboutsl > picture > .plate{aspect-ratio:auto;object-fit:fill;width:100%;height:auto;}
}

@media (max-width:1000px){
  .shero .layer{position:static;padding:0;}
}

/* ---------- Shingle page header --------------------------
   The hero artwork already carries the logo, credentials and nav, so the
   live header is made invisible and its links are held over the painted
   nav (x530-1212, y78-100 of 1816) as tap targets. */
.shingle .head-call{display:none;}   /* the hero carries its own phone box */

/* Shingle hero copy, measured against the comp at 1816x866:
   SHINGLE y192-264, ROOFING y286-359, BUILT FOR A y360-429,
   STRONGER TOMORROW y437-475, sub y495-569, checks y577-689, script y690-779. */
.sh-copy{left:3.36%;top:22.5%;width:40%;}

@media (max-width:1000px){
  .shero .layer{position:static;padding:18px 16px 0;background:#f2f5fa;}
  .shingle .head-call{display:flex;}
}

/* ---------- Tile Roofing page ----------------------------
   Plate is 1008x1560. Painted: five icon circles y408-475 centred at
   x122/315/502/690/880; four slanted tile panels y490-860; process circles
   y1030-1181 centred at x106/304/502/701/897; navy band y1204-1337; four
   bottom swatches. The white "why" panel is not on the plate, so it is
   drawn here. Text positions come from the comp. */
.tilepage .site-head{background:none;border-bottom:0;}
.tilepage .head-call{display:none;}
.tbody .layer{color:var(--navy);}
.tbody .layer::before{
  content:"";position:absolute;left:0;top:0;width:52%;height:25%;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,.93) 0%,rgba(255,255,255,.86) 45%,rgba(255,255,255,0) 92%);
}
.tbody .ov{z-index:2;}

/* ---------- Torch Down page ------------------------------
   Plate is 1008x1560. Painted: five icon circles y425-489 centred at
   x122/316/504/692/885; four photo cards y500-990; process circles
   y1080-1228; navy band y1250-1399; four finish swatches. The top badges,
   the Polyfresko panel, the seal and the caption bars are drawn. */
.torchpage .site-head{background:none;border-bottom:0;}
.torchpage .head-call{display:none;}
.pbody .layer{color:var(--navy);}
.pbody .layer::before{
  content:"";position:absolute;left:0;top:0;width:52%;height:27%;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.88) 45%,rgba(255,255,255,0) 94%);
}
.pbody .ov{z-index:2;}

/* ---------- TPO page -------------------------------------
   Plate is 1008x1560. Painted: four badges y30-96 at x544-954; five service
   circles y421-491 centred at x121/317/503/690/883; navy panel y502-860;
   four photo cards; process circles y1099-1259 centred at
   x101/301/528/711/905; navy band y1252-1356; five finish swatches. */
.tpopage .site-head{background:none;border-bottom:0;}


/* ---------- Silicone Roof Coating page -------------------
   Plate is 1008x1560. Painted: four badges y29-96 at x544-954; five service
   circles y421-490 centred at x121/317/504/690/883; navy panel y507-860;
   four card caption bars y1003-1060; process circles y1098-1259 centred at
   x106/305/~505/~700/897; navy band y1256-1424; four finish swatches. */
.siliconepage .site-head{background:none;border-bottom:0;}


/* Service-page SEO heading matches the homepage h1 scale but stays an h2,
   since each service page already carries its own h1 in the hero. */
.seo .seo-title{
  margin:0 0 18px;font-family:var(--display);font-weight:700;
  font-size:clamp(1.6rem,3vw,2.6rem);line-height:1.14;color:var(--navy);
}

@media (max-width:1000px){
  .thero .layer{position:static;padding:18px 16px 0;background:#f2f5fa;}
  .tilepage .head-call{display:flex;}
}

@media (max-width:1000px){
  .mhero .layer{position:static;padding:18px 16px 0;background:#f2f5fa;}
}

@media (max-width:1000px){
  .dhero .layer{position:static;padding:18px 16px 0;background:#f2f5fa;}
  .torchpage .head-call{display:flex;}
}

/* ---------- Drone in the service-page heroes --------------
   Cut from the homepage hero plate, dropped into the clear sky on each
   service hero, clear of the copy, the badge and the estimate panel. */
.hero-drone{
  height:auto;pointer-events:none;z-index:3;
  filter:drop-shadow(0 .5cqw .9cqw rgba(6,20,45,.28));
}
/* lost in a CSS cleanup — the privacy plate is 1024x1536 and the drone
   cutout is 780x419, sized to keep its rendered height as before */
.ppband .hero-drone{left:33.33%;top:4.6%;width:9.34%;}


@media (max-width:1000px){
  .shero .hero-drone,.thero .hero-drone,.mhero .hero-drone,.dhero .hero-drone{display:none;}
}
@media (max-width:700px){
  .xbody .hero-drone,.sbody2 .hero-drone,.ppband .hero-drone{display:none;}
}
.ybody .layer::before{
  content:"";position:absolute;left:0;top:0;width:50%;height:28%;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.88) 46%,rgba(255,255,255,0) 96%);
}
.ybody .ov{z-index:2;}

/* ---------- Contact Us page ------------------------------
   Plate is 1536x1024. Painted: phone box x1174-1515 y14-83; four gold icon
   circles y352-427 centred at x108/236/363/488; form panel x39-550 y460-915
   with white fields at y490/536/581/627/673/719 and the send button y820-871;
   right navy panel x1105-1535 y559-903 with five gold ticks from y698. */
.contactpage .site-head{background:none;border-bottom:0;}

.chero{background:#fff;}
.chero .layer{color:var(--navy);}
.chero .ov{z-index:2;}

.ch-h1{
  left:4.1%;top:15.2%;width:46%;margin:0;font-family:var(--ui);font-weight:900;
  font-size:4.6cqw;line-height:1;letter-spacing:-.02em;color:var(--navy);
}
.ch-h1 b{color:var(--red);}
.ch-sub{
  left:4.1%;top:23.2%;width:46%;margin:0;display:flex;align-items:center;gap:1.3cqw;
}
.ch-sub span{font-family:var(--ui);font-weight:800;font-size:1.75cqw;letter-spacing:.005em;color:var(--navy);white-space:nowrap;}
.ch-sub i{display:block;flex:1 1 auto;height:.16cqw;background:var(--red);max-width:11cqw;}
.ch-copy{
  left:4.1%;top:26.6%;width:34%;margin:0;font-family:var(--ui);
  font-size:1.06cqw;line-height:1.5;color:#1d3055;
}

.ch-icons{left:0;right:0;top:42.1%;margin:0;padding:0;list-style:none;}
.ch-icons li{position:absolute;top:0;transform:translateX(-50%);text-align:center;white-space:nowrap;}
.ch-icons li:nth-child(1){left:7.03%;}
.ch-icons li:nth-child(2){left:15.36%;}
.ch-icons li:nth-child(3){left:23.63%;}
.ch-icons li:nth-child(4){left:31.77%;}
.ch-icons a{
  position:relative;display:inline-block;
  font-family:var(--ui);font-weight:800;font-size:.98cqw;letter-spacing:.02em;
  color:var(--navy);text-decoration:none;
}
.ch-icons a::before{
  content:"";position:absolute;left:50%;bottom:100%;
  width:5.9cqw;height:5.9cqw;transform:translateX(-50%);
  border-radius:50%;background:transparent;
}
.ch-icons a:hover::before{background:rgba(239,176,36,.16);}
.ch-icons a:hover{color:var(--red);}

/* Labels for the six trust icons painted along the bottom of the plate.
   Centres measured off contact-hero.jpg: 80 / 334 / 566 / 811 / 1036 / 1287
   of 1536, so each label sits under its own icon. */
.ch-trust{left:0;right:0;top:96.9%;margin:0;padding:0;list-style:none;}
.ch-trust li{
  position:absolute;top:0;transform:translateX(-50%);
  font-family:var(--ui);font-weight:800;font-size:1cqw;letter-spacing:.02em;
  color:var(--navy);white-space:nowrap;
}
.ch-trust li:nth-child(1){left:5.24%;}
.ch-trust li:nth-child(2){left:21.78%;}
.ch-trust li:nth-child(3){left:36.85%;}
.ch-trust li:nth-child(4){left:52.80%;}
.ch-trust li:nth-child(5){left:67.48%;}
.ch-trust li:nth-child(6){left:83.82%;}

.ch-call{
  left:76.4%;top:1.4%;width:22.2%;height:6.7%;
  display:flex;align-items:center;justify-content:center;gap:1cqw;
  background:none;color:#fff;text-decoration:none;
}
.ch-call svg{width:1.9cqw;height:1.9cqw;flex:0 0 auto;}
.ch-call .num{display:block;font-family:var(--ui);font-weight:800;font-size:1.85cqw;line-height:1.1;}
.ch-call .sub{display:block;font-family:var(--ui);font-weight:700;font-size:.85cqw;letter-spacing:.04em;text-align:center;}

.ch-script{
  left:62%;top:9.4%;width:20%;margin:0;
  font-family:"Priestacy",cursive;font-size:3cqw;line-height:1;color:#fff;
}
.ch-counties{
  left:67.8%;top:13.8%;width:26%;margin:0;font-family:var(--ui);font-weight:800;
  font-size:1.85cqw;line-height:1.16;color:#fff;
}

.ch-form{
  left:2.54%;top:44.9%;width:33.3%;height:44.4%;box-sizing:border-box;
  padding:.9cqw 1.45cqw 1cqw;line-height:normal;
  background:#0d2450;border:.26cqw solid #fff;border-radius:.85cqw;
  box-shadow:inset 0 0 0 .16cqw #0d2450, inset 0 0 0 .30cqw rgba(255,255,255,.92),
             0 .5cqw 1.6cqw rgba(3,14,34,.45);
}
.ch-form-title{margin:0 0 .3cqw;font-family:var(--ui);font-weight:900;font-size:1.18cqw;letter-spacing:.02em;color:var(--gold);}
.ch-form-sub{display:none;}
.ch-form .fldwrap{position:relative;margin-bottom:.46cqw;}
.ch-form .fld-ic{
  display:grid;place-items:center;position:absolute;left:1.55cqw;top:50%;
  transform:translateY(-50%);width:1.3cqw;height:1.3cqw;pointer-events:none;
}
.ch-form .fld-ic svg{width:1.2cqw;height:1.2cqw;fill:var(--navy);color:var(--navy);}
.ch-form input,.ch-form select,.ch-form textarea{
  width:100%;box-sizing:border-box;height:2.55cqw;border:0;border-radius:.3cqw;
  padding:0 .8cqw 0 3.4cqw;font-family:var(--ui);font-size:.95cqw;color:#1d2b45;background:#fff;
}
.ch-form textarea{height:5.1cqw;padding-top:.6cqw;resize:none;}
.ch-form select{
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z' fill='%230B2A5B'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .7cqw center;background-size:1.3cqw 1.3cqw;padding-right:2.4cqw;
}
.ch-form select:invalid{color:#8b97ab;}
.ch-form button{
  position:absolute;left:4.3%;top:79.12%;width:91.4%;height:11.21%;
  margin:0;border:0;border-radius:.3cqw;cursor:pointer;
  background:var(--red);color:#fff;font-family:var(--ui);font-weight:900;
  font-size:1.35cqw;letter-spacing:.06em;display:flex;align-items:center;justify-content:center;gap:.8cqw;
}
.ch-form button:hover{background:var(--red-dark);}
.ch-form button svg{width:1.5cqw;height:1.5cqw;}
.ch-form .privacy{
  position:absolute;left:4.3%;top:92.75%;width:91.4%;margin:0;
  display:flex;align-items:center;justify-content:center;gap:.4cqw;
  font-family:var(--ui);font-size:.82cqw;color:#dbe7f9;
}
.ch-form .privacy svg{width:.9cqw;height:.9cqw;fill:#dbe7f9;}

.ch-map-script{
  left:37.5%;top:73.5%;width:16%;margin:0;
  font-family:"Priestacy",cursive;font-size:2.5cqw;line-height:1.1;color:#fff;
}
.ch-serving{
  left:82.2%;top:57.2%;width:17.4%;margin:0;font-family:var(--ui);font-weight:800;
  font-size:1.25cqw;line-height:1.22;color:#fff;
}
.ch-list{left:0;right:0;top:0;bottom:0;margin:0;padding:0;list-style:none;}
.ch-list li{
  position:absolute;height:2.4%;display:flex;align-items:center;
  font-family:var(--ui);font-weight:800;font-size:1cqw;letter-spacing:.02em;color:#fff;white-space:nowrap;
}
.ch-list li:nth-child(1){left:82.4%;top:67.5%;}
.ch-list li:nth-child(2){left:83%;top:70.7%;}
.ch-list li:nth-child(3){left:83.7%;top:73.9%;}
.ch-list li:nth-child(4){left:84.3%;top:77.2%;}
.ch-list li:nth-child(5){left:84.9%;top:80.5%;}

@media (max-width:1000px){
  .band.chero > img.plate{display:none;}
  .chero .layer{position:static;padding:18px 16px 22px;background:#f2f5fa;}
  .chero .ov{position:static;width:auto !important;height:auto !important;}
  .ch-h1{font-size:2.5rem;}
  .ch-sub{margin:10px 0 0;}
  .ch-sub span{font-size:1.1rem;}
  .ch-sub i{max-width:80px;height:2px;}
  .ch-copy{font-size:.95rem;margin-top:12px;}
  .ch-icons{display:flex;flex-wrap:wrap;gap:10px 18px;margin:16px 0 0;}
  .ch-icons li{position:static;transform:none;}
  .ch-icons a{font-size:.88rem;}
  .ch-icons a::before{display:none;}
  .ch-trust{display:flex;flex-wrap:wrap;gap:8px 16px;margin:14px 0 0;}
  .ch-trust li{position:static;transform:none;font-size:.8rem;}
  .ch-call{display:none;}
  .contactpage .head-call{display:flex;}
  .ch-script{font-size:1.9rem;color:var(--navy);margin-top:16px;}
  .ch-counties{font-size:1.15rem;color:var(--navy);margin-top:4px;}
  .ch-form{
    background:#0d2450;border:2px solid var(--gold);border-radius:10px;
    margin:16px 0 0;padding:16px 14px 14px;
  }
  .ch-form-title{font-size:1.35rem;}
  .ch-form-sub{font-size:.78rem;margin:4px 0 12px;}
  .ch-form .fldwrap{margin-bottom:9px;}
  .ch-form .fld-ic{left:11px;width:22px;height:22px;}
  .ch-form .fld-ic svg{width:19px;height:19px;}
  .ch-form input,.ch-form select,.ch-form textarea{height:46px;font-size:1rem;padding:0 12px 0 41px;border-radius:5px;}
  .ch-form textarea{height:88px;padding-top:12px;}
  .ch-form select{background-position:right 11px center;background-size:20px 20px;padding-right:38px;}
  .ch-form button{position:static;width:100%;height:52px;margin-top:4px;font-size:1.05rem;border-radius:6px;}
  .ch-form button svg{width:20px;height:20px;}
  .ch-form .privacy{position:static;width:auto;margin:10px 0 0;font-size:.82rem;}
  .ch-form .privacy svg{width:14px;height:14px;}
  .ch-map-script{display:none;}
  .ch-serving{font-size:1.05rem;color:var(--navy);margin-top:18px;}
  .ch-list{display:grid;gap:8px;margin:12px 0 0;}
  .ch-list li{position:relative;left:auto !important;top:auto !important;height:auto;
    font-size:.9rem;color:var(--navy);padding-left:24px;white-space:normal;}
  .ch-list li::before{
    content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
    width:16px;height:16px;border-radius:50%;background:var(--gold);
  }
  .ch-list li{position:relative;}
}

/* ---------- Privacy Policy page --------------------------
   Built entirely in HTML: no plate was supplied for this one, so the hero
   is a light band rather than artwork. */
/* the site header is normally pinned over a photo hero; this page has no
   photo, so it becomes a real white bar with its own height */
.privacypage .site-head{position:relative;height:7.7cqw;background:#fff;border-bottom:1px solid var(--line);}
.privacypage .mainnav a{color:var(--navy) !important;text-shadow:none !important;}
.privacypage .credentials{color:#12203A !important;text-shadow:none !important;}
.privacypage .mainnav .subnav a{color:var(--navy) !important;}
.privacypage .head-call{background:var(--red);}

.pp-hero{
  background:linear-gradient(115deg,#f5f8fc 0%,#eaf1fa 46%,#dbe7f6 100%);
  border-bottom:1px solid var(--line);
}
.pp-hero-inner{
  max-width:1180px;margin:0 auto;padding:34px clamp(16px,3vw,32px);
  display:grid;grid-template-columns:1.55fr 1fr;gap:28px;align-items:center;
}
.pp-hero h1{
  margin:0;font-family:var(--ui);font-weight:900;letter-spacing:-.02em;
  font-size:clamp(2.4rem,5.2vw,4.2rem);line-height:.98;color:var(--navy);
}
.pp-hero h1 b{color:var(--red);}
.pp-rule{display:block;width:210px;max-width:60%;height:3px;background:var(--gold);margin:14px 0 12px;}
.pp-lede{
  margin:0;font-family:var(--ui);font-weight:800;letter-spacing:.02em;
  font-size:clamp(1rem,1.6vw,1.3rem);color:var(--navy);
}
.pp-intro{
  margin:10px 0 0;max-width:44ch;font-family:var(--ui);
  font-size:clamp(.92rem,1.1vw,1.02rem);line-height:1.55;color:#1d3055;
}
.pp-badges{
  margin:20px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:22px 30px;
}
.pp-badges li{
  font-family:var(--ui);font-weight:800;font-size:.82rem;letter-spacing:.04em;
  color:var(--navy);text-align:center;
}
.pp-bic{
  display:grid;place-items:center;width:58px;height:58px;margin:0 auto 8px;
  border-radius:50%;background:var(--navy);border:3px solid var(--gold);
}
.pp-bic svg{width:26px;height:26px;fill:#fff;}
.pp-script{
  margin:18px 0 0;font-family:"Priestacy",cursive;font-size:1.75rem;
  line-height:1.1;color:var(--navy);
}
.pp-hero-side{text-align:center;}
.pp-badge{width:min(200px,52%);height:auto;}
.pp-serving-script{
  margin:14px 0 0;font-family:"Priestacy",cursive;font-size:1.85rem;line-height:1;color:var(--navy);
}
.pp-serving{
  margin:2px 0 0;font-family:var(--ui);font-weight:800;font-size:1.05rem;
  line-height:1.2;color:var(--navy);
}

.pp-body{background:#fff;}
.pp-inner{max-width:1180px;margin:0 auto;padding:44px clamp(16px,3vw,32px) 46px;}
.pp-eyebrow{
  margin:0;text-align:center;font-family:var(--ui);font-weight:800;
  font-size:.82rem;letter-spacing:.06em;color:var(--navy);
}
.pp-title{
  margin:8px 0 0;text-align:center;font-family:var(--display);font-weight:700;
  font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.1;color:var(--navy);
}
.pp-title-rule{display:block;width:150px;height:4px;background:var(--red);margin:12px auto 18px;}
.pp-summary{
  margin:0 auto;max-width:78ch;text-align:center;font-family:var(--ui);
  font-size:1rem;line-height:1.6;color:#22375c;
}
.pp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:30px;}
.pp-card{
  display:flex;gap:18px;align-items:flex-start;
  background:#f5f8fc;border:1px solid #e3eaf4;border-radius:10px;padding:20px 22px;
}
.pp-ic{
  display:grid;place-items:center;width:56px;height:56px;flex:0 0 auto;
  border-radius:50%;background:var(--navy);border:3px solid var(--gold);
}
.pp-ic svg{width:26px;height:26px;fill:#fff;}
.pp-card h3{
  margin:0 0 8px;font-family:var(--display);font-weight:700;
  font-size:1.22rem;line-height:1.2;color:var(--navy);
}
.pp-card p{margin:0;font-family:var(--ui);font-size:.95rem;line-height:1.55;color:#3a4a63;}

.pp-cta{background:var(--navy);}
.pp-cta-inner{
  max-width:1180px;margin:0 auto;padding:44px clamp(16px,3vw,32px);
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
}
.pp-cta h2{
  margin:0;font-family:var(--ui);font-weight:900;letter-spacing:-.01em;
  font-size:clamp(1.5rem,3vw,2.4rem);line-height:1.12;color:#fff;
}
.pp-cta-btn{
  display:inline-flex;align-items:center;gap:12px;margin-top:20px;
  background:var(--red);color:#fff;text-decoration:none;border-radius:7px;
  padding:14px 26px;font-family:var(--ui);font-weight:800;font-size:1.05rem;letter-spacing:.03em;
}
.pp-cta-btn:hover{background:var(--red-dark);}
.pp-cta-btn svg{width:20px;height:20px;}
.pp-cta-script{
  margin:0;text-align:right;font-family:"Priestacy",cursive;
  font-size:clamp(1.6rem,3vw,2.5rem);line-height:1.15;color:var(--gold);
}

.pp-bar{background:var(--navy-deep);border-top:1px solid rgba(255,255,255,.12);}
.pp-bar-inner{
  max-width:1180px;margin:0 auto;padding:22px clamp(16px,3vw,32px);
  display:flex;align-items:center;gap:clamp(18px,4vw,48px);flex-wrap:wrap;
}
.pp-bar-inner > img{width:190px;height:auto;flex:0 0 auto;}
.pp-bar ul{
  margin:0;padding:0;list-style:none;display:flex;gap:clamp(16px,3vw,44px);flex-wrap:wrap;
}
.pp-bar li{
  display:flex;align-items:center;gap:12px;
  font-family:var(--ui);font-size:.85rem;line-height:1.3;color:#cfdcf2;
}
.pp-bar li b{display:block;font-weight:800;color:#fff;}
.pp-bar .pp-bic{
  width:44px;height:44px;margin:0;background:#fff;border-color:#fff;
}
.pp-bar .pp-bic svg{width:21px;height:21px;fill:var(--navy);}

@media (max-width:860px){
  .pp-hero-inner{grid-template-columns:1fr;gap:18px;}
  .pp-hero-side{display:flex;align-items:center;gap:18px;text-align:left;}
  .pp-badge{width:120px;}
  .pp-serving-script{margin:0;}
  .pp-grid{grid-template-columns:1fr;}
  .pp-cta-script{text-align:left;}
}

/* ---------- Privacy Policy on its plate -------------------
   Plate is 1024x1536. Painted: four hero circles y364-429 at x54/159/269/376;
   ten cards in two columns x147-474 and x636-965, rows y590/717/846/974/1100,
   each with its own gold icon; bottom band from y1286. */
.privacypage.haveplate .site-head{position:absolute;height:auto;background:none;border-bottom:0;}
.privacypage.haveplate .mainnav a{color:#fff !important;text-shadow:0 .08cqw .28cqw rgba(0,0,0,.55) !important;}
.privacypage.haveplate .credentials{color:#fff !important;text-shadow:0 .08cqw .28cqw rgba(0,0,0,.5) !important;}
.privacypage.haveplate .mainnav .subnav a{color:#fff !important;}

.pv-h1{
  left:4.4%;top:8.6%;width:44%;margin:0;font-family:var(--ui);font-weight:900;
  font-size:5.2cqw;line-height:.98;letter-spacing:-.02em;color:#fff;
  text-shadow:0 .12cqw .35cqw rgba(6,20,45,.55);
}
.pv-h1 b{color:#ff5262;}
.pv-lede{
  left:4.4%;top:16.4%;width:44%;margin:0;font-family:var(--ui);font-weight:800;
  font-size:1.6cqw;letter-spacing:.02em;color:#fff;text-shadow:0 .1cqw .3cqw rgba(6,20,45,.6);
}
.pv-intro{
  left:4.4%;top:18.1%;width:33%;margin:0;font-family:var(--ui);
  font-size:1.02cqw;line-height:1.45;color:#fff;text-shadow:0 .1cqw .3cqw rgba(6,20,45,.7);
}
.pv-badges{left:0;right:0;top:28.9%;margin:0;padding:0;list-style:none;}
.pv-badges li{
  position:absolute;top:0;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--ui);font-weight:800;font-size:1cqw;letter-spacing:.03em;color:var(--navy);
}
.pv-badges li:nth-child(1){left:8.4%;}
.pv-badges li:nth-child(2){left:18.6%;}
.pv-badges li:nth-child(3){left:29.3%;}
.pv-badges li:nth-child(4){left:39.8%;}
.pv-script{
  left:4.4%;top:22.7%;width:32%;margin:0;text-align:left;
  font-family:"Priestacy",cursive;font-size:1.9cqw;line-height:1.12;color:var(--navy);
}

.pv-eyebrow{display:none;
  left:0;right:0;top:33.5%;margin:0;text-align:center;font-family:var(--ui);font-weight:800;
  font-size:1.05cqw;letter-spacing:.05em;color:var(--navy);
}
.pv-title{display:none;
  left:0;right:0;top:34.9%;margin:0;text-align:center;font-family:var(--display);font-weight:700;
  font-size:3.1cqw;line-height:1.1;color:var(--navy);
}
.pv-summary{display:none;
  left:14%;width:72%;top:36.4%;margin:0;text-align:center;font-family:var(--ui);
  font-size:1.1cqw;line-height:1.55;color:#22375c;
}

.pv-cards{left:0;right:0;top:0;bottom:0;margin:0;padding:0;list-style:none;}
.pv-cards li{
  position:absolute;width:32%;
  font-family:var(--ui);color:#3a4a63;
}
.pv-cards b{display:block;font-family:var(--display);font-weight:700;font-size:1.35cqw;line-height:1.2;color:var(--navy);margin-bottom:.35cqw;}
.pv-cards span{display:block;font-size:.98cqw;line-height:1.42;}
.pv-cards li:nth-child(1){left:14.35%;top:39%;}
.pv-cards li:nth-child(2){left:62.1%;top:39%;}
.pv-cards li:nth-child(3){left:14.35%;top:47.3%;}
.pv-cards li:nth-child(4){left:62.1%;top:47.3%;}
.pv-cards li:nth-child(5){left:14.35%;top:55.7%;}
.pv-cards li:nth-child(6){left:62.1%;top:55.7%;}
.pv-cards li:nth-child(7){left:14.35%;top:64.05%;}
.pv-cards li:nth-child(8){left:62.1%;top:64.05%;}
.pv-cards li:nth-child(9){left:14.35%;top:72.3%;}
.pv-cards li:nth-child(10){left:62.1%;top:72.3%;}

.pv-cta-h{
  left:4.4%;top:85.5%;width:34%;margin:0;font-family:var(--ui);font-weight:900;
  font-size:2.4cqw;line-height:1.14;color:#fff;text-shadow:0 .12cqw .3cqw rgba(6,20,45,.5);
}
.pv-cta-btn{
  left:4.4%;top:94%;width:20%;height:3.2%;
  display:flex;align-items:center;justify-content:center;gap:.9cqw;
  background:var(--red);color:#fff;border-radius:.35cqw;text-decoration:none;
  font-family:var(--ui);font-weight:800;font-size:1.15cqw;letter-spacing:.03em;
}
.pv-cta-btn:hover{background:var(--red-dark);}
.pv-cta-btn svg{width:1.4cqw;height:1.4cqw;}
.pv-cta-script{
  left:66%;top:88%;width:31%;margin:0;text-align:center;
  font-family:"Priestacy",cursive;font-size:2.6cqw;line-height:1.15;color:var(--gold);
}

@media (max-width:860px){
  .privacypage.haveplate .site-head{position:relative;background:#fff;border-bottom:1px solid var(--line);}
  .privacypage.haveplate .mainnav a{color:var(--navy) !important;text-shadow:none !important;}
  .privacypage.haveplate .credentials{color:#12203A !important;text-shadow:none !important;}
  .pv-h1{font-size:2.5rem;color:var(--navy);text-shadow:none;}
  .pv-h1 b{color:var(--red);}
  .pv-lede{font-size:1.1rem;color:var(--navy);text-shadow:none;margin-top:10px;}
  .pv-intro{font-size:.95rem;color:#1d3055;text-shadow:none;margin-top:8px;}
  .pv-badges{display:flex;flex-wrap:wrap;gap:8px 18px;margin:14px 0 0;}
  .pv-badges li{position:static;transform:none;font-size:.82rem;}
  .pv-script{display:block;font-size:1.6rem;margin-top:14px;color:var(--navy);}
  .pv-eyebrow{display:block;font-size:.78rem;margin-top:24px;}
  .pv-title{display:block;font-size:1.9rem;margin-top:6px;}
  .pv-summary{display:block;font-size:.95rem;margin-top:10px;}
  .pv-cards{display:grid;gap:14px;margin-top:20px;}
  .pv-cards li{position:static;width:auto;background:#fff;border:1px solid #e3eaf4;border-radius:9px;padding:14px 16px;}
  .pv-cards b{font-size:1.08rem;}
  .pv-cards span{font-size:.92rem;}
  .pv-cta-h{font-size:1.5rem;color:var(--navy);text-shadow:none;margin-top:24px;}
  .pv-cta-btn{display:inline-flex;margin-top:14px;padding:13px 22px;font-size:1rem;border-radius:7px;}
  .pv-cta-btn svg{width:18px;height:18px;}
  .pv-cta-script{font-size:1.6rem;color:var(--navy);margin-top:14px;text-align:left;}
}

/* ---------- Estimate strip -------------------------------
   For the two service pages whose plates carry no form panel, so every page
   can take a lead. Posts to the same lead-send.php as the rest. */
.est-strip{background:var(--navy);}
.est-inner{
  max-width:1180px;margin:0 auto;padding:38px clamp(16px,3vw,32px);
  display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(20px,3vw,44px);align-items:center;
}
.est-copy h2{
  margin:0;font-family:var(--ui);font-weight:900;letter-spacing:-.01em;
  font-size:clamp(1.5rem,2.8vw,2.3rem);line-height:1.12;color:#fff;
}
.est-copy h2 b{color:var(--gold);}
.est-copy p{margin:12px 0 0;font-family:var(--ui);font-size:1rem;line-height:1.5;color:#dbe7f9;}
.est-phone{
  display:inline-block;margin-top:14px;font-family:var(--ui);font-weight:900;
  font-size:clamp(1.4rem,2.4vw,2rem);color:#fff;text-decoration:none;letter-spacing:.01em;
}
.est-phone:hover{color:var(--gold);}
.est-form{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  background:#0d2450;border:2px solid var(--gold);border-radius:10px;padding:18px;
}
.est-form .fldwrap{position:relative;}
.est-form .fld-ic{
  display:grid;place-items:center;position:absolute;left:11px;top:50%;
  transform:translateY(-50%);width:22px;height:22px;pointer-events:none;
}
.est-form .fld-ic svg{width:19px;height:19px;fill:var(--navy);}
.est-form input,.est-form select{
  width:100%;box-sizing:border-box;height:46px;border:0;border-radius:5px;
  padding:0 12px 0 41px;font-family:var(--ui);font-size:1rem;color:#1d2b45;background:#fff;
}
.est-form select{
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z' fill='%230B2A5B'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:20px 20px;padding-right:38px;
}
.est-form select:invalid{color:#8b97ab;}
.est-form button{
  grid-column:1 / -1;height:52px;border:0;border-radius:6px;cursor:pointer;
  background:var(--red);color:#fff;font-family:var(--ui);font-weight:800;
  font-size:1.05rem;letter-spacing:.03em;display:flex;align-items:center;justify-content:center;gap:10px;
}
.est-form button:hover{background:var(--red-dark);}
.est-form button svg{width:19px;height:19px;}
.est-fine{
  grid-column:1 / -1;margin:0;text-align:center;
  font-family:var(--ui);font-size:.82rem;color:#cfdcf2;
}

@media (max-width:860px){
  .est-inner{grid-template-columns:1fr;gap:20px;}
  .est-form{grid-template-columns:1fr;}
}

@media (max-width:1000px){
  .hfo-title,.hfo-sub{
    position:static;width:auto;text-align:left;color:var(--navy);text-shadow:none;
  }
}

/* On a service page the Services parent is underlined too, so the section
   the visitor is in is obvious without opening the dropdown. */
.mainnav .has-sub.current > a{border-bottom-color:var(--red);}
@media (max-width:1000px){
  .mainnav .has-sub.current > a{border-bottom-color:var(--red);}
}

/* ============================================================
   Services dropdown panel
   The submenu was transparent and relied on whatever plate sat
   behind it. Over the light sky in shingle-hero, tile-hero,
   metal-hero and 01-hero the white links had nothing to read
   against. It now carries its own panel on desktop; the mobile
   accordion above is untouched.
   ============================================================ */
@media (min-width:1001px){
  .mainnav .subnav{
    padding:.9cqw 1.1cqw .75cqw !important;
    margin-top:.35cqw;
    background:rgba(7,27,61,.94) !important;
    border:1px solid rgba(239,176,36,.30) !important;
    border-radius:.45cqw !important;
    box-shadow:0 .55cqw 1.5cqw rgba(3,14,34,.42) !important;
    backdrop-filter:blur(2px);
  }
  /* little pointer up to the Services link */
  .mainnav .subnav::before{
    content:"";position:absolute;left:1.4cqw;top:-.42cqw;
    width:.85cqw;height:.85cqw;transform:rotate(45deg);
    background:rgba(7,27,61,.94);
    border-left:1px solid rgba(245,197,24,.30);
    border-top:1px solid rgba(245,197,24,.30);
  }
  .mainnav .subnav li{margin-bottom:.55cqw;}
  .mainnav .subnav li:last-child{margin-bottom:0;}
  .mainnav .subnav a{
    color:#fff !important;text-shadow:none !important;
    padding-bottom:.28cqw;
  }
  .mainnav .subnav a:hover{color:#fff !important;border-bottom-color:var(--red) !important;}
  /* the privacy page forces navy nav text for its light plate — the panel
     is dark, so the submenu inside it goes back to white */
  .privacypage .mainnav .subnav a{color:#fff !important;}
}