/* ==========================================================================
   HERO ARRANGEMENT
   The supplied transparent PNG (roofing_expert_and_dog_transparent.png) was
   split into two cut-outs — roofer.png and dog.png — and is composited over
   a clean backdrop crop. Every text element is live HTML, so nothing had to
   be painted out of any image.

   Colours sampled from the design:
     brand blue #061560 · gold #FDB918 · trust gold #FDB918
     nav ink #20212A · phone #081E8F · form border #FDB918
     CTA #FDB918 / text #593C00 · emergency red #FE1314
     services blue #0F1F9D · card title #1D28A6 · card body #474648
   ========================================================================== */
:root{
  --blue:#061560;
  --ink:#070708;
  --gold:#FDB918;
  --gold-trust:#FDB918;
  --gold-cta:#FDB918;
  --gold-border:#FDB918;
  --cta-text:#593C00;
  --nav-ink:#20212A;
  --phone:#081E8F;
  --red:#FE1314;
  --svc-blue:#0F1F9D;
  --card-title:#1D28A6;
  --card-body:#474648;
  --navy-a:#082373;
  --navy-b:#0A2684;
  --muted:#5A6472;
  --line:#DCE1EA;
  --wrap:1708px;
}
*,*::before,*::after{box-sizing:border-box}
html{max-width:100%;scroll-behavior:smooth}
body{
  margin:0;max-width:100%;background:#fff;color:var(--ink);
  font-family:'Nunito Sans',system-ui,sans-serif;
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:#fff;width:100%;box-shadow:0 1px 0 rgba(0,0,0,.07);
}
.site-header.is-stuck{box-shadow:0 4px 14px rgba(7,27,145,.14)}
.head-inner{
  width:min(100% - 28px,var(--wrap));margin-inline:auto;
  display:flex;align-items:center;gap:20px;padding:9px 0;min-height:74px;
}
.brand{display:flex;align-items:center;gap:13px;flex:none}
.brand-avatar{width:70px;height:70px;flex:none;border-radius:50%}
.brand-name{font-weight:900;text-transform:uppercase;line-height:1.03;letter-spacing:-.2px}
.brand-name span{display:block}
.brand-name .l1{color:var(--blue);font-size:clamp(15px,1.28vw,21px)}
.brand-name .l2{color:var(--ink);font-size:clamp(15px,1.28vw,21px)}
.brand-name .l3{color:var(--gold);font-size:clamp(15px,1.28vw,21px)}

.head-nav{display:flex;align-items:center;gap:clamp(6px,1.15vw,22px);
  flex:1;justify-content:center;flex-wrap:wrap}
.navlink{position:relative;white-space:nowrap;font-weight:800;text-transform:uppercase;
  letter-spacing:.2px;font-size:clamp(11.5px,.82vw,14px);color:var(--nav-ink);padding:5px 2px}
.navlink:hover,.navlink.is-active{color:var(--blue)}
.navlink.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;
  height:3px;background:var(--gold);border-radius:2px}
.caret{font-size:.7em;margin-left:3px}

/* --- Services dropdown -------------------------------------------------- */
.navitem{position:relative}
.navmenu{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);
  min-width:196px;margin:0;padding:6px 0;list-style:none;z-index:60;
  background:#fff;border:1px solid var(--line);border-radius:10px;
  box-shadow:0 14px 30px rgba(6,26,72,.16);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .14s ease,transform .14s ease;
}
.has-menu:hover .navmenu,
.has-menu:focus-within .navmenu{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
}
.navmenu a{
  display:block;padding:9px 16px;white-space:nowrap;
  font-weight:700;text-transform:uppercase;letter-spacing:.2px;
  font-size:clamp(11px,.78vw,13px);color:var(--nav-ink);
}
.navmenu a:hover,.navmenu a:focus-visible{background:var(--gold);color:var(--ink)}

.head-call{display:flex;align-items:center;gap:11px;flex:none}
.call-ic{width:44px;height:44px;flex:none;border-radius:50%;
  background:var(--blue);color:#fff;display:grid;place-items:center}
.call-txt{line-height:1.04;text-align:left}
.call-label{display:block;font-weight:800;color:#252426;font-size:clamp(10px,.76vw,13px)}
.call-num{display:block;font-weight:900;color:var(--phone);letter-spacing:-.6px;
  font-size:clamp(17px,1.6vw,27px);white-space:nowrap}
.call-num:hover{color:var(--gold)}
.call-ext{display:block;font-weight:900;color:var(--phone);
  font-size:clamp(10px,.76vw,13px);text-align:right}

.m-burger{display:none;width:44px;height:42px;place-items:center;flex:none}
.m-burger span{display:block;width:28px;height:4px;background:var(--blue);
  border-radius:2px;position:relative}
.m-burger span::before,.m-burger span::after{content:"";position:absolute;left:0;
  width:28px;height:4px;background:var(--blue);border-radius:2px;transition:transform .2s ease}
.m-burger span::before{top:-9px}
.m-burger span::after{top:9px}
.m-burger[aria-expanded="true"] span{background:transparent}
.m-burger[aria-expanded="true"] span::before{transform:translateY(9px) rotate(45deg)}
.m-burger[aria-expanded="true"] span::after{transform:translateY(-9px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{width:100%;position:relative}
/* One full-width stage. The form overlays the scene on the right rather
   than sitting in a separate column, so there is no blue gap beside it. */
.hero-grid{position:relative;width:100%}

/* One full-bleed plate. Everything except the form is baked into the artwork,
   so the stage is simply the image at its native 1708x921 (1.855) ratio. Using
   width-based sizing rather than object-fit:cover means the form keeps perfect
   registration with the painted scene at every viewport width. */
/* ==========================================================================
   HERO PLATE.  Target spec is 1700 x 550 (aspect 3.0909) - see the standing
   rule.  The art currently supplied is 1936x920 (2.1043), so the stage is
   width-driven and shows it WHOLE rather than cropping to 3.0909, which would
   cut 294 rows and clip the badge and the dog.  Width-based sizing also keeps
   the kicker and form registered to the artwork at every viewport width.
   When art arrives at a true 1700x550, this becomes an exact fit.
   ========================================================================== */
/* ==========================================================================
   HERO — composited from two supplied layers: the LA background (2225x707)
   scaled to the band, with the transparent character/headline layer placed
   over it at full band height. The plate is authored at exactly 1730x550
   (3.1455), so it fills the width with NO crop and never scales above 1:1.
   The stage is the container, so the kicker and form size in cqw.
   ========================================================================== */
.hero-grid{position:relative;width:100%;line-height:0}
.hero-stage{position:relative;width:100%;line-height:0;container-type:inline-size}
.hero-bg{display:block;width:100%;height:auto}


/* --------------------------------------------------------------------------
   KICKER LINE — the "Los Angeles' Trusted" strap is live HTML sitting on the
   painted gold brush, so it can be re-worded per site without a new plate.
   Geometry is measured on the composited plate: brush x 35-424, y 58-154 of
   1730x550, centred 13.27% / 19.27%, tilt -7.39deg. All units are % / vw so the text tracks the image at every width.
   -------------------------------------------------------------------------- */
.hero-kicker{
  position:absolute;left:13.27%;top:19.27%;
  transform:translate(-50%,-50%) rotate(-7.39deg) scaleX(0.60);
  z-index:4;white-space:nowrap;line-height:1;
  font-weight:900;font-style:italic;text-transform:uppercase;
  font-size:2.27cqw;letter-spacing:.02em;color:#0B0B0C;
}

/* quote form */
/* The plate is cropped to the 1730x550 band, so the form is placed against
   the visible right-hand area rather than the painted panel's full height. */
.hero-form{
  position:absolute;right:2.2%;top:50%;transform:translateY(-50%);
  z-index:5;width:19%;
  background:#fff;border:3px solid var(--gold-border);border-radius:14px;
  padding:clamp(6px,1.27cqw,13px) clamp(6px,1.30cqw,13px) clamp(7px,1.43cqw,15px);
  box-shadow:0 12px 30px rgba(6,26,72,.30);
}
.hero-form h2{margin:0 0 clamp(4px,.86cqw,9px);text-align:center;
  font-weight:900;text-transform:uppercase;color:var(--blue);
  font-size:clamp(9px,1.63cqw,17px);line-height:1.1;letter-spacing:-.3px}
/* honeypot: must beat the .hero-form input width rule on specificity */
.hp{position:absolute!important;left:-9999px!important;top:auto!important;
  width:1px!important;height:1px!important;padding:0!important;border:0!important;
  opacity:0;pointer-events:none}
.field{position:relative;margin-bottom:clamp(3px,.74cqw,8px)}
.hero-form label{display:block;margin:0 0 clamp(1px,.22cqw,2px);
  font-weight:700;color:var(--ink);
  font-size:clamp(6px,.89cqw,9px);line-height:1.2}
.hero-form input,.hero-form select{
  width:100%;font:inherit;font-size:clamp(6px,.96cqw,10px);
  padding:clamp(3px,.76cqw,8px) clamp(5px,.86cqw,9px);
  border:1.5px solid var(--line);border-radius:7px;background:#fff;color:var(--ink);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.hero-form input:focus,.hero-form select:focus{
  outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(254,184,11,.28)}
.send-btn{
  /* the button face is sliced straight out of the supplied artwork
     (x 1362-1671, y 710-779 of the character layer) so it matches exactly.
     The element stays a real <button>; its label is visually hidden. */
  display:block;width:100%;aspect-ratio:316/76;
  background:url("../images/btn-send.png") center/100% 100% no-repeat;
  border:0;padding:0;margin-top:clamp(3px,.76cqw,8px);
  font-size:0;line-height:0;color:transparent;
  transition:filter .15s ease,transform .15s ease;
}
.send-btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.send-btn:active{transform:translateY(0)}
.send-btn:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.form-ok{display:none;margin:7px 0 0;padding:8px 10px;border-radius:8px;
  background:#E8F6EC;border:1.5px solid #9AD5AC;color:#14603A;font-weight:700;font-size:12px;line-height:1.4}
.form-ok.show{display:block}

/* ---------- band under the hero ---------- */
.under{width:100%}
.svc-side{padding:18px 20px 22px;background:#fff}
.trust-row{display:grid;grid-template-columns:repeat(4,auto);
  gap:clamp(10px,2.4vw,46px);justify-content:center;align-items:center;margin:0 0 14px}
.trust{display:flex;align-items:center;gap:10px}
.trust img{width:clamp(34px,3.4vw,54px);height:auto;flex:none}
.trust-txt{line-height:1.14}
.trust-txt b{display:block;font-weight:900;text-transform:uppercase;
  font-size:clamp(11px,1.02vw,16px);color:var(--ink)}
.trust-em b{color:var(--red)}
.trust-em .num{display:block;font-weight:900;color:var(--red);
  font-size:clamp(13px,1.24vw,20px);line-height:1}
.trust-txt span{display:block;font-weight:700;font-size:clamp(9.5px,.8vw,13px);color:#303231}
.stars{color:var(--gold-trust);letter-spacing:2px;
  font-size:clamp(11px,1.05vw,17px);line-height:1}

.svc-head{text-align:center;margin:0 0 12px;font-weight:900;text-transform:uppercase;
  color:var(--svc-blue);font-size:clamp(13px,1.32vw,21px);letter-spacing:.2px}
.svc-head .arw{color:var(--gold)}
.svc-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(6px,.85vw,14px)}
.svc{border:1px solid #E3E6EE;border-radius:9px;padding:8px 7px 10px;
  text-align:center;display:flex;flex-direction:column;background:#fff;
  transition:border-color .15s ease,box-shadow .15s ease}
.svc:hover{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.svc img{width:100%;height:auto;margin-bottom:6px}
.svc h3{margin:0 0 4px;font-weight:900;text-transform:uppercase;
  color:var(--card-title);font-size:clamp(8.5px,.72vw,12.5px);line-height:1.12}
.svc p{margin:0;font-size:clamp(7.5px,.62vw,11px);color:var(--card-body);line-height:1.32}

/* ==========================================================================
   TRUST BAND + INSTANT-QUOTE CTA  (sits directly after the services block)
   ========================================================================== */
.tband{width:100%;background:#fff}

/* ---- row 1 : why choose us + four proof points ---- */
.tband-top{
  position:relative;
  display:grid;grid-template-columns:minmax(320px,32%) 1fr;
  align-items:center;gap:clamp(14px,2vw,34px);
  /* bottom padding leaves room for the dog, which rises above the gold bar */
  padding:clamp(14px,1.6vw,24px) clamp(16px,2vw,34px) clamp(30px,3.4vw,58px);
}
.tb-why{display:grid;grid-template-columns:1fr;align-items:end;
  /* keep the copy clear of the mascot now that it is out of flow */
  padding-left:calc(clamp(78px,8.6vw,150px) + clamp(6px,1vw,16px))}
/* Mascot sits flush on the gold bar: bottom:0 resolves to the bottom of
   .tband-top's padding box, which is the gold bar's top edge - no gap. */
.tb-mascot{
  position:absolute;left:clamp(16px,2vw,34px);bottom:0;
  width:clamp(78px,8.6vw,150px);height:auto;display:block;
}
.tb-why-h{
  margin:0 0 9px;font-weight:900;text-transform:uppercase;letter-spacing:-.2px;
  color:var(--ink);font-size:clamp(15px,1.36vw,25px);line-height:1.08;
}
.tb-why-h span{color:var(--blue)}
.tb-list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(3px,.42vw,7px)}
.tb-list li{display:flex;gap:8px;align-items:center;color:var(--ink);
  font-weight:700;font-size:clamp(10px,.82vw,14.5px);line-height:1.22}
.tb-list .ck{
  width:clamp(13px,1.06vw,18px);height:clamp(13px,1.06vw,18px);flex:none;
  border-radius:50%;background:var(--gold);color:var(--blue);
  display:flex;justify-content:center;align-items:center;font-size:.62em;font-weight:900;
}

.tb-feats{display:grid;grid-template-columns:repeat(4,1fr);align-items:start}
.tb-feat{
  text-align:center;padding:4px clamp(8px,1.1vw,20px);
  border-left:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;gap:5px;
}
.tb-feat:first-child{border-left:0}
.tb-ic{width:clamp(30px,3vw,46px);height:auto;color:var(--blue);flex:none}
.tb-ic-gold{color:var(--gold-trust)}
.tb-ic-img{width:clamp(30px,3vw,46px);height:auto;flex:none}
.tb-feat-h{
  font-weight:900;text-transform:uppercase;color:var(--blue);
  font-size:clamp(9.5px,.86vw,15px);line-height:1.1;letter-spacing:.1px;
}
.tb-ink{color:var(--ink)}
.tb-big{font-size:1.5em;line-height:1}
.tb-sub{display:block;color:var(--card-body);font-weight:600;
  font-size:clamp(8px,.66vw,11.5px);line-height:1.26}
/* caps variant — keeps the source text readable/editable per site */
.tb-sub-caps{text-transform:uppercase;letter-spacing:.02em}

/* ---- dog + speech bubble: straddles the top edge of the gold bar ---- */
.tb-dogwrap{
  position:absolute;right:clamp(10px,1.4vw,26px);
  bottom:calc(100% - 25px);
  width:clamp(84px,7.08vw,130px);z-index:3;
}
.tb-dog{
  display:block;width:100%;height:auto;
  filter:drop-shadow(0 6px 10px rgba(10,25,45,.22));
}
.tb-bubble{
  position:absolute;right:calc(100% + 10px);top:0;
  background:#fff;border:2px solid var(--blue);border-radius:13px;
  padding:clamp(4px,.4vw,7px) clamp(7px,.7vw,12px);
  font-weight:900;text-transform:uppercase;color:var(--blue);
  font-size:clamp(8px,.72vw,12.5px);line-height:1.14;
  text-align:center;white-space:nowrap;
  box-shadow:0 3px 8px rgba(10,25,45,.16);
}
.tb-bubble::before,.tb-bubble::after{
  content:"";position:absolute;width:0;height:0;
  border-style:solid;border-color:transparent;
}
.tb-bubble::before{right:-17px;top:11px;border-width:9px;border-left-color:var(--blue)}
.tb-bubble::after{right:-12px;top:13px;border-width:7px;border-left-color:#fff}

/* ---- row 3 : gold instant-quote bar ---- */
.tband-cta{
  position:relative;background:var(--gold);
  display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:clamp(12px,1.8vw,32px);
  padding:clamp(10px,1.2vw,18px) clamp(16px,2vw,34px);
}
.tb-devices{width:clamp(150px,17vw,300px);height:auto;display:block}
.tb-cta-copy h3{
  margin:0;font-weight:900;text-transform:uppercase;color:var(--ink);
  font-size:clamp(13px,1.34vw,24px);line-height:1.1;letter-spacing:-.2px;
}
.tb-cta-sub{margin:3px 0 0;font-weight:900;color:var(--blue);
  font-size:clamp(11px,1.06vw,19px);line-height:1.15}
.tb-mini{list-style:none;margin:clamp(6px,.8vw,12px) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:clamp(10px,1.8vw,34px)}
.tb-mini li{display:flex;align-items:center;gap:7px;color:var(--ink)}
.tb-mini svg{width:clamp(17px,1.7vw,28px);height:auto;flex:none}
.tb-mini b{font-weight:900;text-transform:uppercase;
  font-size:clamp(8px,.72vw,12.5px);line-height:1.14}
.tb-cta-act{display:flex;flex-direction:column;align-items:center;gap:6px}
.tb-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--blue);color:#fff;font-weight:900;text-transform:uppercase;
  font-size:clamp(11px,1.06vw,19px);letter-spacing:.3px;
  padding:clamp(10px,1vw,16px) clamp(16px,1.8vw,32px);border-radius:9px;
  box-shadow:0 6px 14px rgba(6,26,72,.24);
  transition:background .15s ease,transform .15s ease;
}
.tb-btn:hover{background:#0A24B8;transform:translateY(-1px)}
.tb-arrow{font-size:1.15em;line-height:1}
.tb-note{font-weight:700;color:var(--ink);
  font-size:clamp(8.5px,.72vw,12.5px);line-height:1}

/* ---------- sections below ---------- */
.wrap{width:min(100% - 32px,1400px);margin-inline:auto}
.section{padding:44px 0}
.section-soft{background:#F7F9FC}
.sec-head{text-align:center;margin:0 0 24px}
.sec-head h2{margin:0;font-weight:900;text-transform:uppercase;
  color:var(--blue);font-size:clamp(22px,2.9vw,34px)}
.sec-head p{margin:8px auto 0;color:var(--muted);max-width:70ch}
.rev-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.rev{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px}
.rev b{display:block;font-weight:900;color:var(--blue);margin:6px 0}
.rev p{margin:0;font-size:14px;color:var(--muted)}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.post{background:#fff;border:1px solid var(--line);border-radius:12px;
  overflow:hidden;display:flex;flex-direction:column}
.post-body{padding:15px;display:flex;flex-direction:column;flex:1}
.post-tag{align-self:flex-start;background:var(--gold);color:var(--ink);
  font-weight:900;text-transform:uppercase;font-size:11px;
  padding:3px 10px;border-radius:999px;margin-bottom:8px}
.post-date{font-weight:700;text-transform:uppercase;font-size:12px;
  color:var(--muted);margin-bottom:4px}
.post h3{margin:0 0 7px;font-weight:900;color:var(--blue);font-size:17px;line-height:1.2}
.post p{margin:0 0 13px;font-size:14px;color:var(--muted);flex:1}
.post .more{font-weight:900;text-transform:uppercase;font-size:13px;color:var(--blue)}
.blog-cta,.rev-cta{text-align:center;margin-top:22px}
.btn-navy{display:inline-block;background:var(--blue);color:#fff;font-weight:900;
  text-transform:uppercase;padding:13px 26px;border-radius:8px;letter-spacing:.4px}

.map-frame{position:relative;height:380px;
  border-top:5px solid var(--gold);border-bottom:5px solid var(--gold)}
.map-frame iframe{width:100%;height:100%;border:0;display:block}
.map-badge{position:absolute;left:24px;top:24px;z-index:2;background:var(--blue);
  color:#fff;border-radius:10px;padding:14px 18px;max-width:290px}
.map-badge b{display:block;font-weight:900;text-transform:uppercase;font-size:17px;line-height:1.1}
.map-badge span{display:block;font-size:13.5px;color:#CFD8F5;margin-top:5px}

.site-footer{background:var(--blue);color:#C7CEEA;padding:34px 0 0;font-size:14.5px}
.foot-grid{display:grid;grid-template-columns:1.2fr repeat(4,1fr);gap:22px}
.foot-name{font-weight:900;text-transform:uppercase;color:#fff;line-height:1.05;font-size:19px}
.foot-name .gold{color:var(--gold);display:block}
.foot-tag{margin:9px 0 13px;font-style:italic;color:#A9B4E0;font-size:13.5px}
.socials{display:flex;gap:8px}
.socials a{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.15);
  color:#fff;display:grid;place-items:center;font-weight:900;font-size:14px}
.socials a:hover{background:var(--gold);color:var(--ink)}
.foot-col h4{margin:0 0 10px;font-weight:900;text-transform:uppercase;
  font-size:15px;letter-spacing:1px;color:#fff}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.foot-col a:hover{color:var(--gold)}
.foot-contact li{display:flex;gap:8px;align-items:flex-start}
.foot-contact .ic{color:var(--gold);flex:none}
.foot-bar{margin-top:26px;border-top:1px solid rgba(255,255,255,.18);padding:14px 0;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:13px;color:#A9B4E0}

.to-top{position:fixed;right:18px;bottom:18px;z-index:70;width:46px;height:46px;
  border-radius:50%;background:var(--blue);color:#fff;font-size:19px;
  display:flex;justify-content:center;align-items:center;opacity:0;visibility:hidden;
  transition:opacity .2s ease,visibility .2s ease}
.to-top.show{opacity:1;visibility:visible}
/* the fixed call button owns the bottom centre, so lift back-to-top clear of
   it once the two would meet */
@media (max-width:620px){
  .to-top{bottom:calc(18px + clamp(58px,16vw,74px))}
}

/* ---------- responsive ---------- */
@media (max-width:1240px){
  .brand-avatar{width:58px;height:58px}
  .head-nav{gap:8px}
  .navlink{font-size:11.5px}
  .svc-grid{grid-template-columns:repeat(3,1fr);gap:10px}
}
/* Below this the panel gets too small to type in, so the form leaves the
   overlay and stacks beneath the plate at a usable size. */
@media (max-width:1260px){
  .hero-form{
    position:static;transform:none;width:calc(100% - 28px);max-width:520px;
    margin:16px auto 22px;padding:20px 20px 16px;box-shadow:none;
  }
  .hero-form h2{font-size:22px}
  .hero-form label{font-size:13px;margin-bottom:4px}
  .hero-form input,.hero-form select{font-size:15px;padding:12px 13px}
  .field{margin-bottom:9px}
  .send-btn{font-size:16px;padding:14px 18px;margin-top:8px}
}
@media (max-width:1080px){
  .head-inner{flex-wrap:wrap;min-height:0;padding:9px 0;gap:10px}
  .brand{flex:1}
  .brand-avatar{width:54px;height:54px}
  .brand-name .l1,.brand-name .l2,.brand-name .l3{font-size:clamp(14px,3vw,19px)}
  .head-call{order:2;margin-left:auto}
  .call-label,.call-ext{display:none}
  .call-num{font-size:clamp(15px,3vw,20px)}
  .call-ic{width:38px;height:38px}
  .m-burger{display:grid;order:3}
  .head-nav{order:4;flex:0 0 100%;display:none;flex-direction:column;
    align-items:stretch;gap:0;padding:6px 0 8px;border-top:1px solid var(--line)}
  .head-nav.open{display:flex}
  .navlink{font-size:16px;padding:12px 4px;border-bottom:1px solid var(--line)}
  /* dropdown sits inline in the stacked menu rather than floating */
  .navitem{width:100%}
  .navmenu{
    position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;
    min-width:0;border:0;border-radius:0;box-shadow:none;background:transparent;
    padding:0 0 6px 14px;
  }
  .navmenu a{font-size:14px;padding:9px 4px;border-bottom:1px solid var(--line)}
  .navmenu a:hover{background:transparent;color:var(--blue)}
  .navlink:last-child{border-bottom:0}
  .navlink.is-active::after{display:none}

  .trust-row{grid-template-columns:1fr 1fr;gap:14px 20px;justify-content:start}
  .svc-grid{grid-template-columns:repeat(3,1fr)}
  .svc h3{font-size:12px}
  .svc p{font-size:11px}
  /* trust band stacks: copy over proof points, then the review strip */
  .tband-top{grid-template-columns:1fr;gap:16px;align-items:start;
    padding-bottom:clamp(78px,6vw,84px)}
  .tb-why{grid-template-columns:1fr;padding-left:136px}
  .tb-why-h{font-size:22px}
  .tb-list li{font-size:14px}
  .tb-list .ck{width:18px;height:18px}
  .tb-mascot{width:120px;left:clamp(16px,2vw,34px)}
  .tb-feats{border-top:1px solid var(--line);padding-top:14px}
  .tb-feat-h{font-size:13px}
  .tb-sub{font-size:11px}
  .tband-cta{grid-template-columns:auto 1fr;row-gap:14px;
    padding-top:clamp(36px,2.4vw,42px)}
  .tb-cta-act{grid-column:1/-1;flex-direction:row;justify-content:center;gap:14px}
  .tb-cta-copy h3{font-size:20px}
  .tb-cta-sub{font-size:16px}

  .rev-grid{grid-template-columns:1fr 1fr}
  .blog-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .section{padding:32px 0}
  .svc-grid{grid-template-columns:1fr 1fr}
  .trust-row{grid-template-columns:1fr}
  .tband-top,.tband-cta{padding-left:14px;padding-right:14px}
  .tb-why{grid-template-columns:1fr;padding-left:0}
  .tb-mascot{display:none}
  .tb-why-h{font-size:19px}
  .tb-feats{grid-template-columns:1fr 1fr;row-gap:16px}
  .tb-feat:nth-child(3){border-left:0}
  /* dog leaves the overlay and heads the gold bar */
  .tb-dogwrap{position:static;width:120px;margin:0 auto 4px;order:-1}
  .tb-bubble{position:static;display:table;margin:0 auto 6px;font-size:12px}
  .tb-bubble::before,.tb-bubble::after{display:none}
  .tband-cta{grid-template-columns:1fr;justify-items:center;text-align:center;row-gap:12px;
    padding-top:14px}
  .tb-devices{width:min(78%,300px)}
  .tb-mini{justify-content:center;gap:16px}
  .tb-cta-act{flex-direction:column}
  .tb-btn{font-size:15px;padding:13px 22px}
  .rev-grid,.foot-grid{grid-template-columns:1fr}
  .brand-avatar{width:46px;height:46px}
  .brand-name .l1,.brand-name .l2,.brand-name .l3{font-size:14px}
  .call-num{font-size:15px}
  .map-badge{left:14px;right:14px;top:14px;max-width:none}
  .map-frame{height:300px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ==========================================================================
   MASCOT ASSETS — supplied transparent PNGs, placed unedited.
   mascot_2 trust band
   (hero figure is baked into hero-bg.png; footer uses avatar.png, the header mark;
    mascot_1, mascot_3, mascot_4, mascot_5, mascot_6 and mascot_7 unused)
   ========================================================================== */
/* Reviews heading is a graphic; the real <h2> sits behind it via .sr */
.reviews-head{display:flex;justify-content:center;margin-bottom:clamp(6px,1vw,18px)}
.reviews-head img{display:block;width:min(46%,430px);height:auto}

/* Blog heading: artwork sits above the text, both centred */
.blog-head{display:flex;flex-direction:column;align-items:center;gap:clamp(6px,.9vw,16px)}
.blog-head img{display:block;width:min(56%,720px);height:auto}

/* ==========================================================================
   ABOUT US  — copy column beside the crew photo. Everything below is fluid:
   type uses clamp(), the split collapses to one column at 980px and the
   feature pairs go single-file at 620px.
   ========================================================================== */
.about{background:#FAFAFA}
.about-grid{
  display:grid;grid-template-columns:minmax(0,41%) minmax(0,1fr);
  gap:clamp(22px,2.6vw,44px);align-items:start;text-align:left;
}

.about-eyebrow{
  display:flex;align-items:center;gap:14px;margin:0 0 clamp(8px,1vw,14px);
  font-weight:800;text-transform:uppercase;letter-spacing:.14em;
  color:var(--gold-trust);font-size:clamp(11px,.92vw,15px);
}
.about-eyebrow::after{content:"";flex:none;width:clamp(48px,4.4vw,74px);
  height:2px;background:var(--gold-trust)}

.about-h{
  margin:0 0 clamp(12px,1.3vw,20px);font-weight:900;text-transform:uppercase;
  color:var(--ink);font-size:clamp(26px,2.72vw,46px);line-height:1.06;
  letter-spacing:-.5px;
}
.about-h span{color:var(--blue)}

.about-lead{margin:0 0 clamp(18px,2vw,30px);color:#4A5261;
  font-size:clamp(14px,1.02vw,18px);line-height:1.62;max-width:56ch}

.about-feats{
  list-style:none;margin:0 0 clamp(18px,2vw,30px);padding:0;
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(14px,1.5vw,26px) clamp(14px,1.6vw,28px);
}
.about-feats li{display:grid;grid-template-columns:auto 1fr;
  gap:clamp(9px,.9vw,16px);align-items:start}
.af-ic{
  width:clamp(38px,3.4vw,58px);height:clamp(38px,3.4vw,58px);flex:none;
  border-radius:50%;background:var(--blue);color:#fff;
  display:flex;justify-content:center;align-items:center;
}
.af-ic svg{width:58%;height:58%;display:block}
.about-feats h3{
  margin:0 0 4px;font-weight:900;text-transform:uppercase;color:var(--blue);
  font-size:clamp(12px,.95vw,16px);line-height:1.16;letter-spacing:.01em;
}
.about-feats p{margin:0;color:#5A6472;
  font-size:clamp(12px,.88vw,15px);line-height:1.5}

.about-ins{
  display:grid;grid-template-columns:auto 1fr;
  gap:clamp(12px,1.2vw,22px);align-items:center;
  background:#fff;border:2px solid var(--gold-border);border-radius:12px;
  padding:clamp(14px,1.4vw,24px) clamp(15px,1.5vw,26px);
}
.ai-ic{width:clamp(40px,3.6vw,62px);height:auto;flex:none;color:var(--blue)}
.ai-ic svg{width:100%;height:auto;display:block}
.about-ins h3{
  margin:0 0 5px;font-weight:900;text-transform:uppercase;color:var(--gold-trust);
  font-size:clamp(13px,1.06vw,19px);line-height:1.16;
}
.about-ins p{margin:0;color:#4A5261;
  font-size:clamp(12px,.9vw,15.5px);line-height:1.5}

/* The photo is shown whole at its native 950x660 ratio. No object-fit:cover,
   no forced height - cropping it would reframe the subject. */
.about-photo{
  margin:0;border:3px solid var(--gold-border);border-radius:14px;
  overflow:hidden;line-height:0;
}
.about-photo img{display:block;width:100%;height:auto}

.sec-head-mascot{
  display:flex;align-items:center;justify-content:center;gap:16px;
}
.sec-mascot{width:clamp(56px,6.2vw,104px);height:auto;flex:none}

/* same mark as the header, same circular crop; the PNG is transparent
   outside the badge so no white shows against the navy footer */
.foot-logo{width:74px;height:74px;flex:none;border-radius:50%;
  display:block;margin:0 0 10px;background:transparent}

@media (max-width:980px){
  /* photo drops below the copy and takes a fixed, wide crop */
  .about-grid{grid-template-columns:1fr;gap:22px}
  .about-lead{max-width:none}
}
@media (max-width:900px){
  .reviews-head img{width:min(62%,380px)}
  .blog-head img{width:min(76%,560px)}
}
@media (max-width:620px){
  .reviews-head img{width:min(86%,330px)}
  .blog-head img{width:min(94%,420px)}
}
@media (max-width:620px){
  .about-feats{grid-template-columns:1fr;gap:14px}
  .about-ins{grid-template-columns:auto 1fr;gap:12px;align-items:start}
}
@media (max-width:400px){
  .about-ins{grid-template-columns:1fr;text-align:left}
  .ai-ic{width:44px}
}
@media (max-width:900px){
  .sec-mascot{width:54px}
  .sec-head-mascot{gap:12px}
}

/* ==========================================================================
   LA ROOFING — long-form content section.
   Every block is fluid: type uses clamp(), grids collapse at 1000px / 760px /
   560px, and each photo sits in a fixed-ratio frame so a replacement image of
   any size drops in without changing the layout.
   ========================================================================== */
.laroof{background:#fff}
.laroof p{margin:0 0 clamp(10px,1vw,16px);color:#4A5261;
  font-size:clamp(13px,.92vw,16px);line-height:1.62}
.lr-h{
  margin:0 0 clamp(8px,.9vw,14px);font-weight:900;text-transform:uppercase;
  color:var(--blue);font-size:clamp(15px,1.22vw,22px);line-height:1.18;
  letter-spacing:.01em;
}
.lr-h-wide{margin-top:clamp(22px,2.6vw,44px)}
.lr-intro{max-width:74ch}
.lr-after,.lr-note{color:#4A5261}
.lr-note{margin-top:clamp(10px,1.1vw,18px);font-weight:700;text-align:center;
  max-width:none}

/* ---- masthead ---- */
.lr-top{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,46.5%);
  /* photo column bleeds to the right edge of the section */
  gap:clamp(18px,2.2vw,38px);align-items:start;
  margin-bottom:clamp(18px,2vw,32px);
}
.lr-title{
  display:inline-block;margin:0 0 clamp(12px,1.3vw,20px);
  padding:clamp(8px,.9vw,15px) clamp(18px,2vw,34px);
  background:linear-gradient(180deg,var(--navy-a),var(--navy-b));
  border-bottom:5px solid var(--gold);border-radius:6px;
  color:#fff;font-weight:900;text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(24px,2.6vw,44px);line-height:1;
}
.lr-lead{max-width:62ch}
.lr-benefits{
  list-style:none;margin:clamp(14px,1.6vw,26px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.2vw,20px);
}
.lr-benefits li{display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:6px}
.lr-bic{width:clamp(34px,3.1vw,52px);height:clamp(34px,3.1vw,52px);flex:none;
  border-radius:50%;display:grid;place-items:center}
.lr-bic svg{width:60%;height:60%}
.lr-bic-navy{background:var(--blue);color:#fff}
.lr-bic-gold{background:var(--gold);color:var(--blue)}
.lr-benefits b{font-weight:900;text-transform:uppercase;color:var(--blue);
  font-size:clamp(10px,.78vw,13px);line-height:1.15}
.lr-benefits span:last-child{color:#5A6472;
  font-size:clamp(9.5px,.72vw,12px);line-height:1.35}
.lr-top-photo{margin:0;border-radius:12px;overflow:hidden;line-height:0}
.lr-top-photo img{display:block;width:100%;height:auto;aspect-ratio:432/341;
  object-fit:cover}

/* ---- contact strip ---- */
.lr-strip{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(12px,1.6vw,28px);
  padding:clamp(10px,1.1vw,18px);border-radius:12px;
  background:#F4F6FA;border:1px solid var(--line);
  margin-bottom:clamp(22px,2.6vw,44px);
}
.lr-phone{display:flex;align-items:center;gap:clamp(8px,.9vw,14px);
  background:linear-gradient(180deg,var(--navy-a),var(--navy-b));
  border-radius:10px;padding:clamp(9px,1vw,16px) clamp(12px,1.3vw,22px);color:#fff}
.lr-phone-ic{width:clamp(26px,2.4vw,40px);height:clamp(26px,2.4vw,40px);flex:none;
  border-radius:50%;background:var(--gold);color:var(--blue);display:grid;place-items:center}
.lr-phone-ic svg{width:62%;height:62%}
.lr-phone-txt{display:block;line-height:1.15}
.lr-phone-txt b{display:block;color:var(--gold);font-weight:900;
  text-transform:uppercase;font-size:clamp(9px,.68vw,12px)}
.lr-phone-txt span{display:block;font-weight:900;
  font-size:clamp(14px,1.28vw,22px)}
.lr-strip-feats{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.3vw,24px)}
.lr-strip-feats li{display:grid;grid-template-columns:auto 1fr;
  gap:clamp(7px,.8vw,12px);align-items:center;
  padding-left:clamp(8px,1vw,18px);border-left:1px solid var(--line)}
.lr-strip-feats li:first-child{border-left:0;padding-left:0}
.lr-sic{width:clamp(24px,2.2vw,36px);height:clamp(24px,2.2vw,36px);flex:none;
  color:var(--blue);display:grid;place-items:center}
.lr-sic svg{width:100%;height:100%}
.lr-strip-feats b{display:block;font-weight:900;text-transform:uppercase;
  color:var(--blue);font-size:clamp(9.5px,.74vw,12.5px);line-height:1.15}
.lr-strip-feats span{display:block;color:#5A6472;
  font-size:clamp(9px,.68vw,11.5px);line-height:1.3}
.lr-strip-cta{
  display:inline-flex;align-items:center;gap:8px;text-align:center;
  background:var(--gold-cta);color:var(--blue);border-radius:9px;
  padding:clamp(9px,1vw,16px) clamp(12px,1.4vw,24px);
  font-weight:900;text-transform:uppercase;line-height:1.15;
  font-size:clamp(10px,.8vw,13.5px);
  transition:filter .15s ease,transform .15s ease;
}
.lr-strip-cta:hover{filter:brightness(1.05);transform:translateY(-1px)}

/* ---- image + copy rows ---- */
.lr-row{
  display:grid;grid-template-columns:minmax(0,27%) minmax(0,1fr);
  gap:clamp(14px,1.8vw,32px);align-items:start;
  margin-bottom:clamp(20px,2.4vw,40px);
}
.lr-shot{margin:0;border-radius:10px;overflow:hidden;line-height:0}
.lr-shot img{display:block;width:100%;height:auto;aspect-ratio:16/10;
  object-fit:cover}
.lr-body{min-width:0}

/* ---- checklists ---- */
.lr-checks{list-style:none;margin:0 0 clamp(8px,.9vw,14px);padding:0;display:grid;
  gap:clamp(5px,.6vw,10px) clamp(12px,1.5vw,28px)}
.lr-checks-2{grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-flow:column;grid-template-rows:repeat(5,auto)}
.lr-checks-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.lr-checks li{position:relative;padding-left:clamp(20px,1.6vw,28px);
  color:#4A5261;font-size:clamp(12px,.86vw,15px);line-height:1.4}
.lr-checks li::before{
  content:"";position:absolute;left:0;top:.18em;
  width:clamp(13px,1.05vw,18px);height:clamp(13px,1.05vw,18px);
  border-radius:50%;background:var(--blue);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m6 12.5 4 4 8-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-size:72%;background-repeat:no-repeat;background-position:center;
}

/* ---- six-up icon rows ---- */
.lr-sixup{list-style:none;margin:clamp(10px,1.2vw,20px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(8px,1.1vw,20px)}
.lr-sixup li{display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:6px;padding:0 clamp(4px,.6vw,10px);
  border-left:1px solid var(--line)}
.lr-sixup li:first-child{border-left:0}
.lr-sixup b{font-weight:700;color:#4A5261;
  font-size:clamp(9.5px,.74vw,12.5px);line-height:1.3}
.lr-sixup-sm{grid-template-columns:repeat(6,1fr)}

/* ---- free roof promo ---- */
.lr-promo{
  display:grid;grid-template-columns:minmax(0,34%) minmax(0,1fr) minmax(0,25%);
  gap:0;align-items:stretch;border-radius:14px;overflow:hidden;
  background:linear-gradient(180deg,var(--navy-a),var(--navy-b));
  margin:clamp(22px,2.6vw,44px) 0;
}
/* Ripped wind-damage edge. Drawn as a clip-path rather than sliced from the
   artwork so it stays crisp at any size and needs no extra image. */
.lr-promo-shot{margin:0;line-height:0}
.lr-promo-shot img{
  display:block;width:100%;height:100%;object-fit:cover;
  /* Torn edge traced from the supplied design: the rip runs diagonally,
     narrow at the top widening to full width at the bottom, with shingle-tab
     jaggedness along it. */
  clip-path:polygon(0% 0%, 8% 0%, 40% 3%, 66% 5%, 67% 8%, 72% 10%, 73% 13%, 72% 15%, 74% 18%, 77% 20%, 82% 23%, 82% 25%, 81% 28%, 83% 30%, 85% 33%, 82% 35%, 83% 38%, 87% 40%, 85% 43%, 88% 45%, 85% 48%, 85.5% 51%, 91% 53%, 93% 56%, 93% 58%, 92.5% 61%, 99% 63%, 100% 66%, 100% 68%, 100% 71%, 95.5% 73%, 100% 76%, 98% 79%, 96% 82%, 100% 84%, 100% 87%, 100% 90%, 100% 92%, 95% 95%, 97% 97%, 94% 100%, 0% 100%);
}
.lr-promo-mid{padding:clamp(14px,1.8vw,30px);display:flex;flex-direction:column;
  justify-content:center;text-align:center}
.lr-promo-kick{margin:0 0 6px;color:#fff;font-weight:900;text-transform:uppercase;
  font-size:clamp(13px,1.36vw,26px);line-height:1.1}
.lr-promo-sub{margin:0 0 4px;display:inline-block;align-self:center;
  background:var(--gold);color:var(--ink);border-radius:6px;
  padding:4px clamp(8px,1vw,18px);font-weight:800;
  font-size:clamp(11px,1vw,18px);line-height:1.2}
.lr-promo-big{margin:0;color:#fff;font-weight:900;text-transform:uppercase;
  font-size:clamp(30px,4.4vw,84px);line-height:.95;letter-spacing:-.02em}
.lr-promo-big span{color:var(--gold)}
.lr-promo-side{background:var(--gold);padding:clamp(11px,1.25vw,22px);
  display:flex;flex-direction:column;justify-content:center;
  margin:clamp(7px,.7vw,12px) clamp(7px,.7vw,12px) clamp(7px,.7vw,12px) 0;
  border-radius:9px}
.lr-promo-side p{margin:0 0 8px;color:var(--ink);font-weight:600;
  font-size:clamp(10.5px,.82vw,14px);line-height:1.45}
.lr-promo-side b{color:#C1121F}
.lr-promo-push{font-weight:900!important;text-transform:uppercase;margin-bottom:0!important}

/* ---- split (repair or replace) ---- */
.lr-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(12px,1.6vw,30px);align-items:start}

/* ---- closing ---- */
.lr-close{margin-top:clamp(22px,2.6vw,44px);border-radius:12px;
  background:linear-gradient(180deg,var(--navy-a),var(--navy-b));
  padding:clamp(16px,1.9vw,32px)}
.lr-close h3{margin:0 0 10px;color:#fff;font-weight:900;text-transform:uppercase;
  font-size:clamp(20px,2.2vw,38px);line-height:1;
  border-bottom:4px solid var(--gold);display:inline-block;padding-bottom:6px}
.lr-close p{margin:0;color:#D8DEEC;font-size:clamp(12px,.86vw,15px);line-height:1.6}

.lr-cta{
  margin-top:clamp(12px,1.4vw,22px);border-radius:12px;
  background:var(--gold);padding:clamp(12px,1.4vw,24px);
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;
  gap:clamp(12px,1.6vw,28px);align-items:center;
}
.lr-cta-head{margin:0;line-height:1.18}
.lr-cta-head b{display:block;color:var(--ink);font-weight:900;
  text-transform:uppercase;font-size:clamp(13px,1.1vw,20px)}
.lr-cta-head span{display:block;color:var(--blue);font-weight:900;
  text-transform:uppercase;font-size:clamp(13px,1.1vw,20px)}
.lr-cta-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.lr-cta-list li{position:relative;padding-left:20px;color:var(--ink);
  font-weight:700;font-size:clamp(10px,.78vw,13px);line-height:1.3}
.lr-cta-list li::before{content:"\2713";position:absolute;left:0;top:0;
  color:var(--blue);font-weight:900}
.lr-cta-btn{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  background:linear-gradient(180deg,var(--navy-a),var(--navy-b));color:#fff;
  border-radius:9px;padding:clamp(10px,1.1vw,18px) clamp(14px,1.6vw,28px);
  font-weight:900;text-transform:uppercase;font-size:clamp(11px,.86vw,15px);
  transition:transform .15s ease,box-shadow .15s ease;
}
.lr-cta-btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(6,26,72,.25)}


/* ---- SEO content blocks --------------------------------------------------- */
.lr-seo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(12px,1.4vw,26px);align-items:start;margin-bottom:clamp(18px,2vw,34px)}
.lr-seocol{background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:clamp(12px,1.3vw,22px)}
.lr-seoh{margin:0 0 clamp(9px,1vw,16px);font-weight:900;text-transform:uppercase;
  color:var(--blue);font-size:clamp(12px,1vw,17px);line-height:1.2}
.lr-seolist{list-style:none;counter-reset:seo;margin:0;padding:0;
  display:grid;gap:clamp(8px,.9vw,14px)}
.lr-seolist li{counter-increment:seo;position:relative;
  padding-left:clamp(22px,1.9vw,32px)}
.lr-seolist li::before{
  content:counter(seo) ".";position:absolute;left:0;top:0;
  color:var(--gold-trust);font-weight:900;
  font-size:clamp(11px,.86vw,15px);
}
.lr-seolist h4{margin:0 0 3px;font-weight:800;color:var(--blue);
  font-size:clamp(11.5px,.86vw,15px);line-height:1.3}
.lr-seolist p,.lr-seocol > p{margin:0 0 clamp(8px,.85vw,14px);color:#4A5261;
  font-size:clamp(11.5px,.84vw,14.5px);line-height:1.55}
.lr-seocol > p:last-child{margin-bottom:0}
.lr-seo b{color:var(--blue);font-weight:800}
@media (max-width:900px){ .lr-seo{grid-template-columns:1fr} }
/* ---- responsive ---- */
@media (max-width:1000px){
  .lr-top{grid-template-columns:1fr}
  .lr-top-photo{order:-1}
  .lr-strip{grid-template-columns:1fr;gap:14px}
  .lr-strip-cta{justify-content:center}
  .lr-row{grid-template-columns:1fr;gap:14px}
  .lr-shot img{aspect-ratio:21/9}
  .lr-promo{grid-template-columns:minmax(0,34%) minmax(0,1fr)}
  .lr-promo-side{grid-column:1/-1}
  .lr-sixup{grid-template-columns:repeat(3,1fr);row-gap:16px}
  .lr-sixup li:nth-child(3n+1){border-left:0}
}
@media (max-width:760px){
  .lr-checks-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lr-strip-feats{grid-template-columns:1fr;gap:12px}
  .lr-strip-feats li{border-left:0;padding-left:0}
  .lr-split{grid-template-columns:1fr}
  .lr-benefits{grid-template-columns:repeat(2,1fr);row-gap:16px}
  .lr-cta{grid-template-columns:1fr;text-align:center;justify-items:center}
  .lr-cta-list{justify-items:start}
}
@media (max-width:560px){
  .lr-checks-2,.lr-checks-3{grid-template-columns:1fr}
  .lr-sixup{grid-template-columns:repeat(2,1fr)}
  .lr-sixup li:nth-child(3n+1){border-left:1px solid var(--line)}
  .lr-sixup li:nth-child(2n+1){border-left:0}
  .lr-promo{grid-template-columns:1fr}
  .lr-promo-shot img{aspect-ratio:21/9}
  .lr-systems{grid-template-columns:1fr}
}

/* ---- roofing system cards ---- */
.lr-systems{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(10px,1.3vw,24px);margin-top:clamp(10px,1.2vw,20px)}
.lr-systems article{border:1px solid var(--line);border-radius:10px;overflow:hidden;
  background:#fff;display:flex;flex-direction:column}
.lr-systems img{display:block;width:100%;height:auto;aspect-ratio:16/6;
  object-fit:cover}
.lr-systems h4{margin:clamp(8px,.9vw,14px) clamp(9px,1vw,16px) 6px;
  font-weight:900;text-transform:uppercase;color:var(--blue);
  font-size:clamp(10.5px,.82vw,13.5px);line-height:1.2}
.lr-systems p{margin:0 clamp(9px,1vw,16px) clamp(10px,1.1vw,18px);
  font-size:clamp(11px,.8vw,13.5px);line-height:1.45}
@media (max-width:1000px){ .lr-systems{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .lr-systems{grid-template-columns:1fr} }
/* ---- expanded blocks: seals, numbered cards, trust, FAQ, bar ------------- */
.lr-sub{margin:0 0 clamp(8px,.9vw,14px)!important;color:var(--blue)!important;
  font-weight:800;font-size:clamp(14px,1.16vw,21px)!important;line-height:1.25}
/* Photo fills the right column and bleeds to the top and right edges; the
   three seals overlay its right side rather than sitting beside it. */
.lr-top-right{position:relative}
.lr-seals{list-style:none;margin:0;padding:0;display:grid;gap:clamp(5px,.6vw,10px);
  position:absolute;top:clamp(6px,.9vw,16px);right:clamp(6px,.9vw,16px);z-index:2}
.lr-seal{
  width:clamp(58px,5.4vw,92px);aspect-ratio:1;border-radius:50%;
  background:linear-gradient(180deg,var(--navy-a),var(--navy-b));
  border:3px solid var(--gold);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:4px;line-height:1.05;
}
.lr-seal b{font-weight:900;text-transform:uppercase;font-size:clamp(11px,1.05vw,18px)}
.lr-seal span{font-weight:700;font-size:clamp(6.5px,.56vw,9.5px);text-transform:uppercase}
.lr-seal-gold{background:linear-gradient(180deg,var(--gold),#FDB918);
  border-color:var(--navy-b);color:var(--blue)}
.lr-phone-sub{display:block;font-weight:600;color:#C8D2EC;
  font-size:clamp(8px,.62vw,11px);line-height:1.25;margin-top:2px}
.lr-phone-num{display:block;font-weight:900;font-size:clamp(14px,1.28vw,22px)}

/* numbered cards */
.lr-cards{display:grid;gap:clamp(12px,1.4vw,24px);margin-bottom:clamp(18px,2vw,34px)}
.lr-cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.lr-cards-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.lr-card{background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:clamp(11px,1.2vw,20px);display:flex;flex-direction:column}
.lr-ch{
  display:flex;align-items:flex-start;gap:clamp(7px,.8vw,12px);
  margin:0 0 clamp(7px,.8vw,13px);font-weight:900;text-transform:uppercase;
  color:var(--blue);font-size:clamp(11.5px,.92vw,15.5px);line-height:1.2;
}
.lr-num{
  flex:none;width:clamp(18px,1.5vw,26px);height:clamp(18px,1.5vw,26px);
  border-radius:50%;background:var(--blue);color:#fff;
  display:grid;place-items:center;font-size:.82em;font-weight:900;
}
.lr-ch-band{
  background:linear-gradient(180deg,var(--navy-a),var(--navy-b));color:#fff;
  border-radius:10px;padding:clamp(9px,1vw,16px) clamp(12px,1.3vw,22px);
  margin:clamp(6px,.8vw,14px) 0 clamp(12px,1.4vw,22px);
  font-size:clamp(13px,1.1vw,20px);align-items:center;
}
.lr-ch-band .lr-num{background:var(--gold);color:var(--blue)}
.lr-cardshot{margin:auto 0 0;border-radius:8px;overflow:hidden;line-height:0;
  padding-top:clamp(8px,1vw,14px)}
.lr-cardshot img{display:block;width:100%;height:auto;aspect-ratio:16/6;
  object-fit:cover;border-radius:8px}

/* system cards get a body wrapper now */
.lr-sysbody{padding:clamp(9px,1vw,16px);display:flex;flex-direction:column;flex:1}
.lr-systems h4{margin:0 0 6px}
.lr-systems .lr-checks{gap:4px}
.lr-systems .lr-after{margin-top:auto;padding-top:8px;font-weight:600}

/* why homeowners trust */
.lr-trust{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26%);
  gap:clamp(14px,1.8vw,32px);align-items:start;margin-bottom:clamp(18px,2vw,34px)}
.lr-trustlist{list-style:none;counter-reset:t;margin:0;padding:0;display:grid;
  gap:clamp(7px,.8vw,13px)}
.lr-trustlist li{counter-increment:t;position:relative;
  padding-left:clamp(24px,2vw,34px);color:#4A5261;
  font-size:clamp(12px,.86vw,15px);line-height:1.5}
.lr-trustlist li::before{
  content:counter(t);position:absolute;left:0;top:.05em;
  width:clamp(17px,1.4vw,24px);height:clamp(17px,1.4vw,24px);border-radius:50%;
  background:var(--blue);color:#fff;display:grid;place-items:center;
  font-size:clamp(9px,.7vw,12px);font-weight:900;
}
.lr-trustlist b{color:var(--blue)}
.lr-trustshot{margin:0;border-radius:10px;overflow:hidden;line-height:0}
.lr-trustshot img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}

/* FAQ / insurance / tip */
.lr-lower{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1.2fr) minmax(0,.9fr);
  gap:clamp(12px,1.4vw,24px);align-items:start;margin-bottom:clamp(18px,2vw,34px)}
.lr-faq{margin:0;display:grid;gap:clamp(6px,.7vw,11px)}
.lr-faq dt{font-weight:800;color:var(--blue);
  font-size:clamp(11px,.82vw,14px);line-height:1.35}
.lr-faq dt::before{content:"Q: ";color:var(--gold-trust)}
.lr-faq dd{margin:2px 0 0;color:#4A5261;
  font-size:clamp(11px,.8vw,13.5px);line-height:1.45}
.lr-faq dd::before{content:"A: ";font-weight:800;color:var(--blue)}
.lr-tip{
  background:linear-gradient(180deg,var(--navy-a),var(--navy-b));border-radius:12px;
  padding:clamp(11px,1.2vw,20px);display:grid;
  grid-template-columns:auto 1fr;gap:clamp(9px,1vw,16px);align-items:start;
}
.lr-tip-ic{width:clamp(30px,2.6vw,44px);height:clamp(30px,2.6vw,44px);flex:none;
  border-radius:50%;background:var(--gold);color:var(--blue);display:grid;place-items:center}
.lr-tip-ic svg{width:62%;height:62%}
.lr-tip b{display:block;color:var(--gold);font-weight:900;text-transform:uppercase;
  font-size:clamp(11px,.86vw,15px);margin-bottom:4px}
.lr-tip p{margin:0;color:#D8DEEC;font-size:clamp(10.5px,.78vw,13px);line-height:1.45}
.lr-tipshot{grid-column:1/-1;margin:clamp(8px,1vw,14px) 0 0;border-radius:8px;
  overflow:hidden;line-height:0}
.lr-tipshot img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}

/* Closing CTA: navy bar, four zones — warning / phone / button / QR.
   Column proportions measured off the supplied design. */
.lr-cta{
  margin-top:clamp(12px,1.4vw,22px);border-radius:12px;
  background:linear-gradient(180deg,var(--navy-a),var(--navy-b));
  padding:clamp(11px,1.15vw,20px) clamp(12px,1.3vw,22px);
  display:grid;grid-template-columns:minmax(0,33%) minmax(0,26%) auto auto;
  gap:clamp(10px,1.4vw,26px);align-items:center;
}
.lr-cta-warn{display:flex;align-items:center;gap:clamp(8px,.95vw,15px)}
.lr-cta-ic{width:clamp(30px,2.7vw,46px);height:clamp(30px,2.7vw,46px);flex:none;
  border-radius:50%;background:var(--gold);color:var(--blue);display:grid;place-items:center}
.lr-cta-ic svg{width:58%;height:58%}
.lr-cta-warn p{margin:0;line-height:1.18}
.lr-cta-warn b{display:block;color:#fff;font-weight:900;text-transform:uppercase;
  font-size:clamp(11px,.92vw,17px)}
.lr-cta-warn span{display:block;color:var(--gold);font-weight:900;
  text-transform:uppercase;font-size:clamp(11px,.92vw,17px)}
.lr-cta-phone{display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:clamp(5px,.55vw,10px);text-align:center}
.lr-cta-star{width:clamp(11px,1vw,17px);height:clamp(11px,1vw,17px);color:var(--gold)}
.lr-cta-star svg{width:100%;height:100%;display:block}
.lr-cta-num{color:#fff;font-weight:900;font-size:clamp(15px,1.5vw,28px);line-height:1.1}
.lr-cta-sub{grid-column:1/-1;color:#C8D2EC;font-weight:600;
  font-size:clamp(8.5px,.66vw,11.5px);line-height:1.3}
.lr-cta-btn{
  display:inline-flex;align-items:center;gap:clamp(7px,.8vw,13px);white-space:nowrap;
  background:var(--gold-cta);color:var(--blue);border-radius:9px;
  padding:clamp(9px,.95vw,16px) clamp(12px,1.3vw,22px);
  font-weight:900;text-transform:uppercase;line-height:1.15;
  font-size:clamp(10px,.82vw,14px);text-align:left;
  transition:filter .15s ease,transform .15s ease;
}
.lr-cta-btn:hover{filter:brightness(1.05);transform:translateY(-1px)}
.lr-cta-chev{width:clamp(16px,1.5vw,26px);height:clamp(16px,1.5vw,26px);flex:none;
  border-radius:50%;background:var(--blue);color:#fff;
  display:grid;place-items:center;font-size:1.15em;line-height:1;padding-bottom:2px}
.lr-cta-qr{display:flex;align-items:center;gap:clamp(6px,.7vw,11px)}.lr-qr-txt{color:#fff;font-weight:900;text-transform:uppercase;line-height:1.15;
  font-size:clamp(8px,.64vw,11px)}

/* trust bar */
.lr-bar{
  list-style:none;margin:clamp(12px,1.4vw,22px) 0 0;padding:clamp(11px,1.2vw,20px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,26px);
  border-top:2px solid var(--line);
}
.lr-bar li{display:flex;align-items:center;justify-content:center;
  gap:clamp(7px,.8vw,13px);font-weight:900;text-transform:uppercase;
  color:var(--blue);font-size:clamp(10px,.86vw,15px);text-align:center}
.lr-bar-ic{width:clamp(22px,2vw,34px);height:clamp(22px,2vw,34px);flex:none;
  display:grid;place-items:center}
.lr-bar-ic svg{width:100%;height:100%;display:block}
.lr-bar-stars{color:var(--gold-trust);letter-spacing:1px;
  font-size:clamp(12px,1.05vw,18px)}

@media (max-width:1200px){
  .lr-cards-5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lr-lower{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lr-tip{grid-column:1/-1}
}
@media (max-width:1000px){
  .lr-cards-3{grid-template-columns:1fr}
  .lr-cards-5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lr-top-right{grid-template-columns:1fr}
  .lr-seals{grid-template-columns:repeat(3,1fr);justify-items:center}
  .lr-trust{grid-template-columns:1fr}
  .lr-trustshot{order:-1}
}
@media (max-width:1100px){
  .lr-cta{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:14px}
}
@media (max-width:760px){
  .lr-cards-5{grid-template-columns:1fr}
  .lr-lower{grid-template-columns:1fr}
  .lr-bar{grid-template-columns:1fr;gap:12px}
  .lr-cta{grid-template-columns:1fr;justify-items:center;text-align:center}
  .lr-cta-warn{flex-direction:column;text-align:center}
  .lr-cta-qr{justify-content:center}
}



/* ==========================================================================
   LA ROOFING FAQ — accordion. Built on <details>/<summary> so it opens with
   no JavaScript at all; the script only adds the one-at-a-time behaviour.
   ========================================================================== */
.faqsec{background:#F7F8FB}
.faq-head{text-align:center;margin-bottom:clamp(16px,1.9vw,32px)}
.faq-eyebrow{display:flex;align-items:center;justify-content:center;gap:12px;
  margin:0 0 clamp(6px,.8vw,12px);font-weight:800;text-transform:uppercase;
  letter-spacing:.14em;color:var(--gold-trust);font-size:clamp(10px,.86vw,14px)}
.faq-eyebrow::before,.faq-eyebrow::after{content:"";width:clamp(28px,3.4vw,58px);
  height:2px;background:var(--gold-trust)}
.faq-title{margin:0 0 clamp(8px,1vw,16px);font-weight:900;text-transform:uppercase;
  color:var(--ink);font-size:clamp(22px,2.5vw,42px);line-height:1.05;letter-spacing:-.4px}
.faq-title span{color:var(--blue)}
.faq-intro{margin:0 auto;max-width:62ch;color:#4A5261;
  font-size:clamp(13px,.92vw,16px);line-height:1.6}

.faq-acc{display:grid;gap:clamp(8px,.85vw,14px);
  grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}

.faq-item{
  background:#fff;border:1px solid var(--line);border-left:4px solid var(--gold);
  border-radius:10px;overflow:hidden;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.faq-item[open]{border-left-color:var(--blue);box-shadow:0 8px 20px rgba(6,26,72,.10)}
.faq-item summary{
  list-style:none;cursor:pointer;position:relative;
  padding:clamp(11px,1.05vw,18px) clamp(38px,3.4vw,54px) clamp(11px,1.05vw,18px) clamp(12px,1.2vw,20px);
  font-weight:800;color:var(--blue);
  font-size:clamp(12.5px,.92vw,16px);line-height:1.35;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"";position:absolute;right:clamp(11px,1.1vw,18px);top:50%;
  width:clamp(20px,1.8vw,28px);height:clamp(20px,1.8vw,28px);
  transform:translateY(-50%);border-radius:50%;
  background:var(--gold) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 5v14M5 12h14' fill='none' stroke='%23061560' stroke-width='3' stroke-linecap='round'/></svg>") center/62% no-repeat;
  transition:transform .18s ease,background-color .18s ease;
}
.faq-item[open] summary::after{
  background-color:var(--blue);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12h14' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'/></svg>");
  transform:translateY(-50%) rotate(180deg);
}
.faq-item summary:hover{background:#FCFCFE}
.faq-item summary:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}
.faq-a{padding:0 clamp(12px,1.2vw,20px) clamp(12px,1.15vw,19px);
  border-top:1px solid var(--line);margin-top:-1px}
.faq-a p{margin:clamp(9px,1vw,15px) 0 0;color:#4A5261;
  font-size:clamp(12px,.86vw,15px);line-height:1.6}

@media (max-width:860px){
  .faq-acc{grid-template-columns:1fr}
}


/* ==========================================================================
   SERVICE AREAS — surrounding cities. Links are href="#" until the city
   pages exist; swap each href and nothing else needs to change.
   ========================================================================== */
.citysec{background:#fff}
.city-head{text-align:center;margin-bottom:clamp(16px,1.9vw,32px)}
.city-eyebrow{display:flex;align-items:center;justify-content:center;gap:12px;
  margin:0 0 clamp(6px,.8vw,12px);font-weight:800;text-transform:uppercase;
  letter-spacing:.14em;color:var(--gold-trust);font-size:clamp(10px,.86vw,14px)}
.city-eyebrow::before,.city-eyebrow::after{content:"";width:clamp(28px,3.4vw,58px);
  height:2px;background:var(--gold-trust)}
.city-title{margin:0 0 clamp(8px,1vw,16px);font-weight:900;text-transform:uppercase;
  color:var(--ink);font-size:clamp(22px,2.5vw,42px);line-height:1.05;letter-spacing:-.4px}
.city-title span{color:var(--blue)}
.city-intro{margin:0 auto;max-width:64ch;color:#4A5261;
  font-size:clamp(13px,.92vw,16px);line-height:1.6}

.city-grid{
  list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(8px,.85vw,14px);
}
.city-grid a{
  display:flex;align-items:center;gap:clamp(7px,.75vw,11px);
  padding:clamp(10px,1vw,16px) clamp(10px,1vw,16px);
  background:#F7F8FB;border:1px solid var(--line);
  border-left:4px solid var(--gold);border-radius:9px;
  font-weight:800;color:var(--blue);
  font-size:clamp(11.5px,.85vw,14.5px);line-height:1.25;
  transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
.city-grid a:hover,.city-grid a:focus-visible{
  background:var(--blue);border-color:var(--blue);color:#fff;transform:translateY(-2px);
}
.city-pin{width:clamp(15px,1.25vw,20px);height:clamp(15px,1.25vw,20px);flex:none;
  color:var(--gold-trust)}
.city-grid a:hover .city-pin,.city-grid a:focus-visible .city-pin{color:var(--gold)}
.city-pin svg{width:100%;height:100%;display:block}

.city-note{margin:clamp(14px,1.6vw,26px) 0 0;text-align:center;color:#4A5261;
  font-size:clamp(12px,.86vw,15px);line-height:1.6}
.city-note a{color:var(--blue);font-weight:800;text-decoration:underline;
  text-underline-offset:2px}

@media (max-width:1180px){ .city-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:900px){  .city-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:640px){  .city-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:400px){  .city-grid{grid-template-columns:1fr} }


/* ==========================================================================
   CONTACT US — details column plus a message form. Posts to the same
   send-quote.php handler, flagged with formtype=contact.
   ========================================================================== */
.contactsec{background:#F7F8FB}
.ct-head{text-align:center;margin-bottom:clamp(16px,1.9vw,32px)}
.ct-eyebrow{display:flex;align-items:center;justify-content:center;gap:12px;
  margin:0 0 clamp(6px,.8vw,12px);font-weight:800;text-transform:uppercase;
  letter-spacing:.14em;color:var(--gold-trust);font-size:clamp(10px,.86vw,14px)}
.ct-eyebrow::before,.ct-eyebrow::after{content:"";width:clamp(28px,3.4vw,58px);
  height:2px;background:var(--gold-trust)}
.ct-title{margin:0 0 clamp(8px,1vw,16px);font-weight:900;text-transform:uppercase;
  color:var(--ink);font-size:clamp(22px,2.5vw,42px);line-height:1.05;letter-spacing:-.4px}
.ct-title span{color:var(--blue)}
.ct-intro{margin:0 auto;max-width:60ch;color:#4A5261;
  font-size:clamp(13px,.92vw,16px);line-height:1.6}

.ct-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(14px,1.6vw,30px);align-items:start}

.ct-info{display:grid;gap:clamp(9px,.95vw,15px);align-content:start}
.ct-card{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(10px,1.05vw,17px);
  align-items:center;background:#fff;border:1px solid var(--line);
  border-left:4px solid var(--gold);border-radius:11px;
  padding:clamp(12px,1.15vw,19px) clamp(12px,1.2vw,20px);
  transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
a.ct-card:hover,a.ct-card:focus-visible{
  border-left-color:var(--blue);transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(6,26,72,.12);
}
.ct-card-primary{background:linear-gradient(180deg,var(--navy-a),var(--navy-b));
  border-color:var(--navy-b);border-left-color:var(--gold)}
.ct-ic{width:clamp(34px,3vw,50px);height:clamp(34px,3vw,50px);flex:none;
  border-radius:50%;background:var(--gold);color:var(--blue);
  display:grid;place-items:center}
.ct-ic svg{width:56%;height:56%}
.ct-card-primary .ct-ic{background:var(--gold);color:var(--blue)}
.ct-txt{min-width:0}
.ct-txt b{display:block;font-weight:800;text-transform:uppercase;
  letter-spacing:.05em;color:var(--gold-trust);
  font-size:clamp(9px,.68vw,11.5px);line-height:1.2}
.ct-txt strong{display:block;font-weight:900;color:var(--blue);
  font-size:clamp(13px,1.02vw,19px);line-height:1.25;margin:2px 0 2px;
  overflow-wrap:anywhere}
.ct-txt span{display:block;color:#5A6472;
  font-size:clamp(10px,.74vw,12.5px);line-height:1.35}
.ct-card-primary .ct-txt strong{color:#fff}
.ct-card-primary .ct-txt span{color:#C8D2EC}

.ct-formwrap{background:#fff;border:1px solid var(--line);
  border-top:5px solid var(--gold);border-radius:12px;
  padding:clamp(14px,1.5vw,26px);box-shadow:0 10px 26px rgba(6,26,72,.07)}
.ct-formtitle{margin:0 0 clamp(10px,1.1vw,18px);font-weight:900;
  text-transform:uppercase;color:var(--blue);
  font-size:clamp(14px,1.15vw,21px);line-height:1.2}
.ct-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(9px,.95vw,15px)}
.ct-field{margin-bottom:clamp(9px,.95vw,15px)}
.ct-field label{display:block;font-weight:800;color:var(--ink);
  font-size:clamp(10.5px,.78vw,13px);margin-bottom:4px}
.ct-field input,.ct-field textarea{
  width:100%;font:inherit;color:var(--ink);
  font-size:clamp(12px,.86vw,15px);
  padding:clamp(9px,.85vw,14px) clamp(10px,.9vw,15px);
  background:#F7F8FB;border:1.5px solid var(--line);border-radius:8px;
  transition:border-color .15s ease,background .15s ease;
}
.ct-field textarea{resize:vertical;min-height:90px}
.ct-field input:focus,.ct-field textarea:focus{
  outline:none;background:#fff;border-color:var(--blue)}
.ct-field input::placeholder,.ct-field textarea::placeholder{color:#9AA3B2}
.ct-btn{
  display:inline-flex;align-items:center;gap:8px;width:100%;justify-content:center;
  background:var(--gold-cta);color:var(--blue);border:0;border-radius:9px;
  padding:clamp(11px,1.05vw,17px) 18px;cursor:pointer;
  font-weight:900;text-transform:uppercase;font-size:clamp(12px,.92vw,16px);
  transition:filter .15s ease,transform .15s ease;
}
.ct-btn:hover{filter:brightness(1.05);transform:translateY(-1px)}
.ct-btn:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.ct-btn[disabled]{opacity:.6;cursor:default;transform:none}
.ct-ok{margin:10px 0 0;padding:9px 12px;border-radius:8px;
  background:#E8F6EC;border:1px solid #BFE4CA;color:#1D6B33;
  font-size:clamp(11px,.8vw,13.5px);line-height:1.4;
  display:none}
.ct-ok.show{display:block}
.ct-ok.err{background:#FDEDED;border-color:#F5C2C2;color:#9B1C1C}

@media (max-width:900px){
  .ct-grid{grid-template-columns:1fr}
}
@media (max-width:520px){
  .ct-row{grid-template-columns:1fr}
}


/* ==========================================================================
   Fixed call button, bottom centre. Blue bar with a phone disc and the
   number, gold ribbon beneath - proportions and colours taken from the
   supplied graphic (bar black, disc black, ribbon #FDB918, text #D42A19).
   ========================================================================== */
.callbtn{
  position:fixed;left:50%;bottom:clamp(10px,1.4vw,22px);transform:translateX(-50%);
  z-index:120;display:block;width:max-content;max-width:calc(100vw - 24px);
  filter:drop-shadow(0 8px 20px rgba(6,26,72,.34));
  transition:transform .16s ease;
}
.callbtn:hover{transform:translateX(-50%) translateY(-3px)}
.callbtn:focus-visible{outline:3px solid var(--gold);outline-offset:4px;border-radius:12px}
.callbtn-bar{
  display:flex;align-items:center;gap:clamp(8px,1vw,14px);
  background:linear-gradient(180deg,#2A2A2A 0%,#0B0B0B 100%);
  border-radius:999px 12px 12px 999px;
  padding:clamp(5px,.6vw,8px) clamp(16px,1.6vw,26px) clamp(5px,.6vw,8px) clamp(5px,.6vw,7px);
}
.callbtn-ic{
  width:clamp(36px,3.2vw,50px);height:clamp(36px,3.2vw,50px);flex:none;border-radius:50%;
  background:#000;box-shadow:inset 0 0 0 3px rgba(255,255,255,.28);
  color:#FDB918;display:grid;place-items:center;
}
.callbtn-ic svg{width:60%;height:60%}
.callbtn-num{
  color:#fff;font-weight:900;font-style:italic;letter-spacing:.4px;white-space:nowrap;
  font-size:clamp(17px,1.7vw,30px);line-height:1;
}
.callbtn-ribbon{
  display:block;width:82%;margin:-6px auto 0;
  background:#FDB918;color:#D42A19;border-radius:6px;
  padding:clamp(3px,.35vw,6px) 10px;
  font-weight:900;font-style:italic;text-transform:uppercase;text-align:center;
  letter-spacing:.06em;font-size:clamp(12px,1.05vw,19px);line-height:1.15;
}
/* keep clear of the back-to-top control */
@media (max-width:560px){
  .callbtn-num{font-size:16px}
  .callbtn-ic{width:34px;height:34px}
}

/* ==========================================================================
   Mobile usability: Google flags text under 12px and tap targets under 48px.
   These raise both on small screens without touching the desktop design.
   ========================================================================== */
@media (max-width:1100px){
  .call-label{font-size:12px!important}
  .foot-col a,.foot-contact a{display:inline-block;padding:7px 0;font-size:14px!important}
  .foot-social a{width:44px;height:44px}
  .navlink{min-height:48px;display:flex;align-items:center}
  .navmenu a{min-height:46px;display:flex;align-items:center;font-size:14px!important}
  .rev-cta a,.blog-cta a{min-height:48px;display:inline-flex;align-items:center}
  .city-grid a{min-height:48px}
  .faq-item summary{min-height:48px;display:flex;align-items:center;font-size:14px!important}
  .post a,.post h3 a{font-size:14px!important}
  .tb-list .ck,.lr-checks li{font-size:13px!important}
  .trust-txt span,.trust-txt b{font-size:12px!important}
  .svc h3{font-size:12px!important}
  .svc p{font-size:11.5px!important}
}
@media (max-width:560px){
}

@media (max-width:1100px){
  /* remaining sub-11px text and undersized targets */
  .tb-note,.tb-sub,.tb-sub-caps{font-size:11.5px!important}
  .faq-eyebrow,.city-eyebrow,.ct-eyebrow{font-size:12px!important}
  .hero-form label,.ct-field label{font-size:12px!important}
  .tb-proof b,.tb-proof span{font-size:11.5px!important}
  .call-num{min-height:44px;display:inline-flex;align-items:center;font-size:20px!important}
  .map-badge span,.map-badge b{font-size:12px!important}
  .foot-bar span{font-size:12px!important}
  .rev-cta a,.blog-cta a,.btn-navy{min-height:48px}
  .foot-social a,.soc a{min-width:44px;min-height:44px}
}

@media (max-width:1100px){
  /* final pass: remaining sub-11px labels and undersized links */
  .tb-mini b,.tb-mini span{font-size:11.5px!important}
  .ct-txt b{font-size:11.5px!important}
  .ct-txt span{font-size:12px!important}
  .more{min-height:44px;display:inline-flex;align-items:center;font-size:13px!important}
  .foot-col a,.foot-contact a,.foot-social a{min-height:44px}
}

@media (max-width:1100px){
  /* inline links inside sentences still need a comfortable touch height */
  .city-note a{display:inline-block;padding:9px 0;min-height:36px}
  .foot-col li a{min-width:44px}
}

/* review + testimonial buttons — icon sizing, shared by every page that
   carries the reviews block, not just index */
.gmb-g{width:clamp(15px,1.2vw,20px);height:clamp(15px,1.2vw,20px);flex:none;
  background:#fff;border-radius:50%;padding:2px;box-sizing:border-box;display:grid;place-items:center}
.gmb-g svg{width:100%;height:100%;display:block}
.vid-ic{width:clamp(15px,1.2vw,20px);height:clamp(15px,1.2vw,20px);flex:none;display:grid;place-items:center}
.vid-ic svg{width:100%;height:100%;display:block}
.gmb-out{font-size:.9em;line-height:1}
.rev-cta{display:flex;flex-wrap:wrap;gap:clamp(8px,1vw,14px);justify-content:center;
  margin-top:clamp(14px,1.8vw,28px)}
.rev-cta a,.blog-cta a{min-height:48px;display:inline-flex;align-items:center;gap:10px}

/* the video testimonials button is gold — shared so every page matches home */
.btn-vid{display:inline-flex;align-items:center;gap:9px;
  background:var(--gold-cta)!important;color:var(--blue)!important}