/* ============================================================
   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 Golden Empire 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:8px !important;height:8px !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:9.5cqw;height:9.5cqw;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:76px;height:76px;
    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;}
}