/* ============================================================
   GOLD ACCENTS  (aa-gold.css)
   A thin layer of gold over the red/white/blue theme, loaded last on
   every page so it only adds accents - nothing here changes a layout,
   a size or a position. Matches the gold in the quote bar's
   60 SECOND INSTANT QUOTE button.
   ============================================================ */
:root{
  /* sampled from the Los Angeles Commercial Roofing logo: mid #D01A28, highlight #ffd978,
     shadow #b8891d */
  --gold:#D01A28;
  --gold-light:#e8505c;
  --gold-deep:#A9121D;
  --gold-soft:rgba(11,42,91,.25);
}

/* ---------- footer ------------------------------------------- */
.site-foot{border-top:3px solid var(--red);}

.site-foot .foot-grid h4{letter-spacing:.08em;}


/* ---------- trust strips ------------------------------------- */
/* hairline dividers warm up instead of plain navy tint */
.tl-strip li + li,.ic-strip li + li,.rc-strip li + li,.tg-trust li + li,
.tp-benefits li + li,.rq-feats li + li{border-left-color:var(--gold-soft);}

/* ---------- logo glow ---------------------------------------
   The gold-and-black mark sits on flag, sky and photo backgrounds,
   so it carries a soft white halo to keep its edges readable. */
.brand img{
  filter:drop-shadow(0 0 .3cqw rgba(255,255,255,1))
         drop-shadow(0 0 .8cqw rgba(255,255,255,.9))
         drop-shadow(0 0 2cqw rgba(255,255,255,.6))
         drop-shadow(0 .12cqw .5cqw rgba(0,0,0,.28));
}
@media (max-width:1000px){
  .brand img{
    filter:drop-shadow(0 0 4px rgba(255,255,255,.95))
           drop-shadow(0 0 12px rgba(255,255,255,.7));
  }
}

/* the "Proudly Serving Sunland, CA and Beyond" script over the About photo:
   gold with a soft dark edge so it holds on the sky */
.ab-script{
  color:#fff !important;
  text-shadow:0 1px 2px rgba(10,24,52,.6), 0 0 14px rgba(10,24,52,.4);
}

/* ---------- service areas banner (new artwork) ----------------
   The plate now carries the headline, paragraph, gold button, county
   names, filter chips and the right-hand county list. The live
   elements stay in place as hit areas and for screen readers, but
   draw nothing; only the pins are visible. */
.areas .areas-copy,.areas .areas-list,.areas .cty{opacity:0;}
.areas .btn-gold{opacity:0;}
.areas .pin-filter{left:44.2%;top:3.2%;}
.areas .pin-filter button{opacity:0;}
.areas .pin-filter button.on{opacity:0;}

/* ---------- storm damage banner (new artwork) -----------------
   Copy, ticks, the gold button and the inset label are painted into
   the plate, so the live elements stay as hit areas only. */
.storm .storm-copy,.storm .storm-inset,.storm .storm-script{opacity:0;}
.storm .btn-gold{opacity:0;}

/* ---------- roof coating hero (new artwork) -------------------
   Headline, sub-line, paragraph and the four icons are painted into
   the plate; the live copy stays for screen readers and Google but
   draws nothing. */
.rc-hero .rc-hero-eb,.rc-hero .rc-h1,.rc-hero .rc-hero-sub,
.rc-hero .rc-hero-p,.rc-hero .rc-feats{opacity:0;}
.rc-hero .rc-hero-btn{opacity:0;}
@media (max-width:1000px){
  /* the mobile crop shows the photo side only, so the live copy comes back */
  .rc-hero > img.plate{aspect-ratio:1 / 1;object-position:100% 50%;}
  .rc-hero .rc-hero-eb,.rc-hero .rc-h1,.rc-hero .rc-hero-sub,
  .rc-hero .rc-hero-p,.rc-hero .rc-feats,.rc-hero .rc-hero-btn{opacity:1;}
}

/* ---------- instant roof quote hero (new artwork) --------------
   The plate carries the stopwatch, headline, sub-line and the four
   feature items, with a clean white band at the top for the header.
   Live copy stays for screen readers, hidden on desktop, shown on
   mobile where the plate crops to the photo. */
.rqhero .rq-eb,.rqhero .rq-h1,.rqhero .rq-sub,.rqhero .rq-feats{opacity:0;}
@media (max-width:1000px){
  .rqhero > img.plate{aspect-ratio:1 / 1;object-position:100% 60%;}
  .rqhero .rq-eb,.rqhero .rq-h1,.rqhero .rq-sub,.rqhero .rq-feats{opacity:1;}
}
@media (min-width:1001px){
  /* the quote hero is light at the top, so a scrim keeps the standard
     white nav readable - the header itself is the same on every page */
  .rqhero .layer::before{
    content:"";position:absolute;left:0;right:0;top:0;height:22%;pointer-events:none;z-index:0;
    background:linear-gradient(180deg,rgba(11,42,91,.55),rgba(11,42,91,.18) 60%,rgba(11,42,91,0));
  }
}

/* ---------- mobile legibility ---------------------------------
   Overlay type that is sized against its plate gets a floor on small
   screens, and the hero sub-lines that only exist for the desktop
   artwork are read by screen readers instead of printed at 4px. */
@media (max-width:1000px){
  .faq .faq-eyebrow{font-size:.78rem !important;}
  .faq .faq-ribbon{font-size:1.02rem !important;}
  .sv-sub,.sv-lede,.mb-eyebrow,.ma-sub{
    position:absolute !important;width:1px !important;height:1px !important;
    overflow:hidden !important;clip:rect(0 0 0 0) !important;clip-path:inset(50%) !important;
  }
}
@media (max-width:1000px){
  /* map pins: bigger targets and a readable label when tapped */
  .sh-pin,.pin{width:6px !important;height:6px !important;}
  .sh-pin span,.pin span{font-size:11px !important;padding:5px 8px !important;white-space:nowrap;}
}
@media (max-width:1000px){
  /* floors so nothing scaled against a plate drops below legible size */
  .hero-eyebrow{font-size:max(1.2cqw,11px) !important;}
  .hero-sub{font-size:max(1.25cqw,11.5px) !important;}
  .hero-list li{font-size:max(1.15cqw,11px) !important;}
  .ic-feats b,.rc-feats b,.rq-feats b,.tp-benefits span,.tp-pills li,.tg-icons b,
  .tg-trust b,.rc-strip b,.ic-strip b{font-size:11px !important;line-height:1.25;}
  .tl-feats b{font-size:10px !important;line-height:1.2;white-space:normal;}
}

@media (min-width:1001px) and (max-width:1200px){
  /* narrow desktops: the cqw type stays above a legible floor */
  .ic-feats b,.rc-feats b,.rq-feats b,.tl-feats b,.tg-icons b,.tp-benefits span,
  .faq-sub2 span,.rc-strip b,.ic-strip b,.tg-trust b{font-size:11.5px !important;}
  .hero-eyebrow,.hero-sub,.hero-list li{font-size:max(1.2cqw,11.5px) !important;}
}
@media (max-width:420px){
  /* very narrow phones: the five-across feature rows wrap instead of pushing wide */
  .tl-feats,.ic-feats,.rc-feats,.rq-feats{display:grid !important;grid-template-columns:repeat(3,1fr) !important;gap:14px 6px !important;}
  .tl-feats li,.ic-feats li,.rc-feats li,.rq-feats li{width:auto !important;border-left:0 !important;}
  .tl-feats b,.ic-feats b,.rc-feats b,.rq-feats b{font-size:10px !important;}
  .mb-feats,.metal-feats{grid-template-columns:repeat(2,1fr) !important;}
}
@media (max-width:420px){
  /* metal hero: the sr-only overlay copy must not push the page wide */
  .metalpage .sv-corner,.metalpage .sv-h1,.metalpage .sv-sub,.metalpage .sv-lede{
    position:absolute !important;width:1px !important;height:1px !important;left:0 !important;
    overflow:hidden !important;clip:rect(0 0 0 0) !important;clip-path:inset(50%) !important;white-space:nowrap !important;
  }
  .metalpage{overflow-x:hidden;}
}
@media (max-width:1000px){
  /* the About hillside plate is mostly empty sky at phone size, and its
     painted-in city name renders at 7px - drop it and keep the copy */
  .metal-about > img.plate,.sun-about > img.plate{display:none;}
  .ma-hillside,.sun-hillside{
    position:absolute !important;width:1px !important;height:1px !important;
    overflow:hidden !important;clip:rect(0 0 0 0) !important;clip-path:inset(50%) !important;
  }
}

/* the home hero already carries the seal in its own layout */
.homepage > section.band:first-of-type::after,
.page:has(.hero-badge) > section.band:first-of-type::after{content:none;}

/* ---------- 10 year badge on every hero -----------------------
   One seal, dropped on the first banner of the page. It sits clear
   of the headline on the right and shrinks on phones. */
.page > section.band:first-of-type{position:relative;}
.page > section.band:first-of-type::after{
  content:"";position:absolute;left:36cqw;right:auto;top:24%;bottom:auto;
  width:13cqw;height:13cqw;z-index:6;pointer-events:none;
  background:url("images/badge-10-years.png") center/contain no-repeat;
  filter:drop-shadow(0 .25cqw .9cqw rgba(0,0,0,.35));
}
@media (max-width:1000px){
  .page > section.band:first-of-type::after{
    left:12px;right:auto;top:auto;bottom:10px;transform:none;width:104px;height:104px;
    filter:drop-shadow(0 2px 6px rgba(0,0,0,.4));
  }
}
@media (min-width:1001px){
  /* the headline width differs per hero, so the seal sits just past it */
  .coatingpage > section.band:first-of-type::after{left:auto;right:30cqw;top:7%;}
  .claimspage  > section.band:first-of-type::after{left:44cqw;top:16%;}
  .rooftoolpage > section.band:first-of-type::after{left:auto;right:5cqw;top:34%;}
  .tpopage > section.band:first-of-type::after{left:33cqw;top:20%;}
}

/* ============================================================
   FAQ - numbered navy bars, two columns, gold accents
   ============================================================ */
.faq{background:#fff;padding:clamp(28px,3.4vw,56px) clamp(16px,3vw,48px) clamp(34px,4vw,64px);}
.faq-top{text-align:center;margin:0 auto clamp(20px,2.4vw,34px);max-width:900px;}
.faq-kicker{
  margin:0;font-family:var(--ui);font-weight:700;letter-spacing:.42em;
  font-size:clamp(.72rem,1.1vw,1rem);color:#c79a2e;text-indent:.42em;
}
.faq-title{
  margin:.1em 0 0;font-family:var(--display,"Archivo Narrow",Arial,sans-serif);font-weight:700;
  font-size:clamp(2.6rem,6.4vw,5.2rem);line-height:1;letter-spacing:-.01em;
  color:#0d2a57;text-shadow:0 2px 0 rgba(255,255,255,.6);
}
.faq-rule{display:flex;align-items:center;justify-content:center;gap:12px;margin:.5em 0 0;}
.faq-rule i{display:block;width:clamp(70px,12vw,170px);height:2px;background:linear-gradient(90deg,rgba(199,154,46,0),#c79a2e);}
.faq-rule i:last-of-type{background:linear-gradient(90deg,#c79a2e,rgba(199,154,46,0));}
.faq-rule b{color:#d4a53a;font-size:1.1rem;line-height:1;}
.faq-lead{margin:.9em 0 0;font-family:var(--ui);font-size:clamp(.98rem,1.3vw,1.22rem);color:#2b3b55;}

.faq-inner{max-width:1500px;margin:0 auto;}
.faq-inner .faq-sub,.faq-inner .faq-sub2{display:none;}
.faq-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.3vw,20px) clamp(16px,2vw,34px);
  counter-reset:faq;align-items:start;
}
.faq-item{counter-increment:faq;border:0;background:none;border-radius:12px;overflow:hidden;}
.faq-item summary{
  list-style:none;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(12px,1.2vw,20px);padding:clamp(12px,1.1vw,18px) clamp(14px,1.3vw,22px);
  border-radius:12px;border:1px solid rgba(199,154,46,.55);
  background:linear-gradient(180deg,#143059,#0a1f3f);
  box-shadow:0 3px 10px rgba(6,18,40,.25);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::before{
  content:counter(faq);display:grid;place-items:center;
  width:clamp(34px,2.6vw,46px);height:clamp(34px,2.6vw,46px);border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ffe9a8,#e3b23c 45%,#b7861d);
  color:#15284a;font-family:var(--ui);font-weight:800;font-size:clamp(1rem,1.3vw,1.3rem);
  box-shadow:0 2px 6px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.45);
}
.faq-item .faq-ic{display:none;}
.faq-item .faq-q{
  font-family:var(--ui);font-weight:800;color:#fff;line-height:1.25;
  font-size:clamp(.95rem,1.15vw,1.12rem);
}
.faq-item:nth-child(even) .faq-t,
.faq-item .faq-t{
  position:relative;width:clamp(26px,2vw,34px);height:clamp(26px,2vw,34px);border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ffe9a8,#e3b23c 45%,#b7861d) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);border:0 !important;
}
.faq-item .faq-t::before,.faq-item .faq-t::after{
  content:"";position:absolute;left:50%;top:50%;background:#15284a;border-radius:2px;transform:translate(-50%,-50%);
}
.faq-item .faq-t::before{width:52%;height:2.5px;}
.faq-item .faq-t::after{width:2.5px;height:52%;}
.faq-item[open] .faq-t::after{display:none;}
.faq-item[open] summary{border-radius:12px 12px 0 0;}
.faq-item > p{
  margin:0;padding:clamp(14px,1.3vw,20px) clamp(16px,1.5vw,24px);
  background:#f6f8fc;border:1px solid rgba(13,42,87,.12);border-top:0;border-radius:0 0 12px 12px;
  font-family:var(--ui);font-size:clamp(.95rem,1.1vw,1.06rem);line-height:1.5;color:#22365c;
}
@media (max-width:900px){
  .faq-grid{grid-template-columns:1fr;}
}
@media (min-width:1001px){
  /* torch down hero: the seal sits in the sky between the headline and the worker */
  .torchpage > section.band:first-of-type::after{left:45cqw;right:auto;top:19%;}
}
@media (max-width:1000px){
  .torchpage > section.band:first-of-type::after{left:auto;right:10px;top:8px;bottom:auto;width:70px;height:70px;}
}
@media (min-width:1001px),(max-width:1000px){
  /* the torch down hero carries its own seal, so the shared one steps aside */
  .torchpage > section.band:first-of-type::after{content:none;}
}
/* the coating hero carries its own seal and flag band */
.coatingpage > section.band:first-of-type::after{content:none;}
@media (max-width:1000px){
  /* show the whole composite rather than cropping into the painted copy */
  .rc-hero > img.plate{aspect-ratio:auto !important;object-fit:fill !important;height:auto !important;}
  .rc-hero .rc-hero-eb,.rc-hero .rc-h1,.rc-hero .rc-hero-sub,
  .rc-hero .rc-hero-p,.rc-hero .rc-feats,.rc-hero .rc-hero-btn{
    position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;
    overflow:hidden !important;clip:rect(0 0 0 0) !important;clip-path:inset(50%) !important;white-space:nowrap !important;
  }
  .rc-hero .layer{padding:0 !important;}
}
/* the shingle hero carries its own seal, cards and flag band */
.shinglepage > section.band:first-of-type::after{content:none;}
.shero .sh-h1,.shero .sh-durable,.shero .sh-tag,.shero .sh-badges,.shero .sh-quality{
  position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;
  overflow:hidden !important;clip:rect(0 0 0 0) !important;clip-path:inset(50%) !important;white-space:nowrap !important;
}
@media (max-width:1000px){
  .shero > img.plate,.shero picture img{aspect-ratio:auto !important;object-fit:fill !important;height:auto !important;}
  .shero .layer{padding:0 !important;}
}
/* the tile hero carries its own seal, cards and flag band */
.tile2page > section.band:first-of-type::after{content:none;}
.tl-hero .tl-hero-eb,.tl-hero .tl-h1,.tl-hero .tl-hero-sub,.tl-hero .tl-hero-p,.tl-hero .tl-feats{
  position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;
  overflow:hidden !important;clip:rect(0 0 0 0) !important;clip-path:inset(50%) !important;white-space:nowrap !important;
}
@media (max-width:1000px){
  .tl-hero > img.plate{aspect-ratio:auto !important;object-fit:fill !important;height:auto !important;}
  .tl-hero .layer{padding:0 !important;}
}
/* the metal hero carries its own seal, cards and flag band */
.metalpage > section.band:first-of-type::after{content:none;}
.metalhero .sv-corner,.metalhero .sv-h1,.metalhero .sv-sub,.metalhero .sv-lede,.metalhero .sv-badges{
  position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;
  overflow:hidden !important;clip:rect(0 0 0 0) !important;clip-path:inset(50%) !important;white-space:nowrap !important;
}
@media (max-width:1000px){
  .metalhero > img.plate,.metalhero picture img.plate{aspect-ratio:auto !important;object-fit:fill !important;height:auto !important;}
  .metalhero .layer{padding:0 !important;}
}
/* the TPO hero carries its own seal, cards and flag band */
.tpopage > section.band:first-of-type::after{content:none;}
.tp-hero .tp-h1,.tp-hero .tp-kicker,.tp-hero .tp-pills,.tp-hero .tp-hero-p{
  position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;
  overflow:hidden !important;clip:rect(0 0 0 0) !important;clip-path:inset(50%) !important;white-space:nowrap !important;
}
@media (max-width:1000px){
  .tp-hero > img.plate{aspect-ratio:auto !important;object-fit:fill !important;height:auto !important;}
  .tp-hero .layer{padding:0 !important;}
}
/* the instant quote hero is one composite: headline, seal strip and all */
.rooftoolpage > section.band:first-of-type::after{content:none;}
.rqhero .rq-eb,.rqhero .rq-h1,.rqhero .rq-sub,.rqhero .rq-feats{
  position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;
  overflow:hidden !important;clip:rect(0 0 0 0) !important;clip-path:inset(50%) !important;white-space:nowrap !important;
}
@media (max-width:1000px){
  .rqhero > img.plate{aspect-ratio:auto !important;object-fit:fill !important;height:auto !important;}
  .rqhero .layer{padding:0 !important;}
  /* the clipped copy must not stretch the band on narrow screens */
  .rqhero{overflow:hidden;}
  .rqhero .rq-eb,.rqhero .rq-h1,.rqhero .rq-sub,.rqhero .rq-feats{left:0 !important;top:0 !important;}
}
@media (max-width:1000px){
  /* the quote bar always stacks on mobile, whatever the stylesheet order */
  .page .aa-qbar .layer{position:static !important;inset:auto !important;padding:0 16px 22px !important;}
}
/* testimonials hero: one composite, so the live copy only serves screen readers */
.tmpage > section.band:first-of-type::after{content:none;}
.tm-hero .tm-eyebrow,.tm-hero .tm-h1,.tm-hero .tm-lede,.tm-hero .tm-badges{
  position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;
  overflow:hidden !important;clip:rect(0 0 0 0) !important;clip-path:inset(50%) !important;white-space:nowrap !important;
}
@media (max-width:1000px){
  .tm-hero > img.plate{aspect-ratio:auto !important;object-fit:fill !important;height:auto !important;}
  .tm-hero .layer{padding:0 !important;}
  .tm-hero{overflow:hidden;}
}
/* contact hero is one composite */
.contactpage > section.band:first-of-type::after{content:none;}
@media (max-width:1000px){
  .ct-hero > img.plate{aspect-ratio:auto !important;object-fit:fill !important;height:auto !important;}
}

/* ---------- nearest cities block ------------------------------ */
.nb-near{background:#f4f7fb;padding:clamp(22px,2.6vw,40px) clamp(16px,3vw,52px);}
.nb-in{max-width:1500px;margin:0 auto;}
.nb-near h2{margin:0 0 10px;font-family:var(--ui);font-weight:800;color:var(--navy);font-size:clamp(1.15rem,1.7vw,1.6rem);}
.nb-near p{margin:0 0 14px;font-family:var(--ui);font-size:clamp(.93rem,1.02vw,1.02rem);color:#24365a;}
.nb-near ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:10px;}
.nb-near li{background:#fff;border:1px solid rgba(13,42,87,.14);border-radius:10px;padding:12px 14px;}
.nb-near a{font-family:var(--ui);font-weight:800;color:var(--navy);text-decoration:none;font-size:clamp(.9rem,1vw,1rem);}
.nb-near a:hover{color:var(--red);text-decoration:underline;}
.nb-near li span{display:block;margin-top:4px;font-family:var(--ui);font-size:.82rem;color:#5b6b86;}
.nb-tail{margin:14px 0 0 !important;color:#3a4a66 !important;}
@media (max-width:1000px){ .nb-near ul{grid-template-columns:repeat(2,1fr);} }
@media (max-width:1000px){
  /* 158 pins on a phone-width map cannot be tapped reliably, so below the
     map they become a wrapped list of real city links instead of dots */
  .sh-map .layer,.areas .layer{position:static !important;inset:auto !important;
    display:flex;flex-wrap:wrap;gap:8px;padding:14px 12px 18px;background:#f4f7fb;}
  .sh-map .sh-pin,.areas .pin{
    position:static !important;left:auto !important;top:auto !important;
    width:auto !important;height:auto !important;border-radius:999px !important;
    background:#fff !important;border:1px solid rgba(13,42,87,.18) !important;
    box-shadow:none !important;padding:9px 13px;min-height:38px;display:inline-flex;align-items:center;
  }
  .sh-map .sh-pin::after,.areas .pin::after{content:none;}
  .sh-map .sh-pin span,.areas .pin span{
    display:inline !important;position:static !important;opacity:1 !important;transform:none !important;
    background:none !important;color:var(--navy) !important;box-shadow:none !important;
    font-family:var(--ui);font-weight:700;font-size:.82rem;white-space:nowrap;padding:0 !important;
  }
  .sh-map .sh-pin:active span{color:var(--red) !important;}
}

/* ---------- other services in this city ---------------------- */
.il-row{background:#fff;padding:clamp(20px,2.4vw,36px) clamp(16px,3vw,52px);border-top:1px solid rgba(13,42,87,.1);}
.il-in{max-width:1500px;margin:0 auto;}
.il-row h2{margin:0 0 6px;font-family:var(--ui);font-weight:800;color:var(--navy);font-size:clamp(1.1rem,1.6vw,1.5rem);}
.il-row p{margin:0 0 14px;font-family:var(--ui);font-size:clamp(.9rem,1vw,1rem);color:#3a4a66;}
.il-row ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.il-row li{border:1px solid rgba(13,42,87,.16);border-radius:10px;padding:12px 14px;background:#f7f9fd;}
.il-row li.il-alt{border-color:rgba(199,154,46,.6);background:#fffdf6;}
.il-row a{font-family:var(--ui);font-weight:800;color:var(--navy);text-decoration:none;font-size:clamp(.9rem,1vw,1rem);}
.il-row a:hover{color:var(--red);text-decoration:underline;}
.il-row li span{display:block;margin-top:3px;font-family:var(--ui);font-size:.78rem;color:#6b7a94;}
@media (max-width:1000px){ .il-row ul{grid-template-columns:1fr;} }

/* footer sitemap link */
.foot-legal .foot-sitemap{display:inline-flex;align-items:center;gap:7px;margin-left:18px;}
.foot-legal .foot-sitemap svg{width:14px;height:14px;}