/* ============================================================
   Shingle Roofing page body - built live from Martin's comp.
   Proportions follow the comp (757px wide): two-column rows at
   roughly 47/53, five swatch cards at 17.6% with a 1.1% gutter,
   navy "why choose us" band, two-column FAQ, closing inspection row.
   Photos are their own files so any can be swapped for a full-size
   export without touching the markup.
   ============================================================ */
.sh-about,.sh-stand,.sh-styles,.sh-value,.sh-why,.sh-faq,.sh-inspect{
  container-type:inline-size;background:#fff;
}
.sh-eyebrow{
  margin:0 0 10px;font-family:var(--ui);font-weight:900;font-size:.82rem;
  letter-spacing:.16em;color:var(--navy);display:flex;align-items:center;gap:14px;
}
.sh-eyebrow::after{content:"";flex:0 0 52px;height:2px;background:var(--red);}
.sh-eyebrow-red{color:var(--red);}
.sh-eyebrow-light{color:#fff;}
.sh-eyebrow-light::after{background:#fff;}
.sh-h2{
  margin:0 0 16px;font-family:var(--display);font-weight:700;font-size:2.35rem;
  line-height:1.04;letter-spacing:-.005em;color:var(--navy);text-transform:uppercase;
}
.sh-h2 span{display:block;color:var(--red);font-family:inherit;font-weight:inherit;letter-spacing:inherit;}
.sh-h2 span.navy{color:var(--navy);}
.sh-h2-inline span{display:inline;color:var(--red);}
.sh-p:last-child{margin-bottom:0;}
.sh-p{
  margin:0 0 18px;font-family:var(--ui);font-size:1rem;line-height:1.62;color:#33404f;
}
.sh-btn{
  display:inline-flex;align-items:center;gap:14px;
  padding:15px 26px;border-radius:5px;background:var(--red);
  font-family:var(--ui);font-weight:900;font-size:.95rem;letter-spacing:.03em;
  color:#fff;text-decoration:none;
}
.sh-btn svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;}
.sh-btn:hover{background:var(--red-dark);}

/* ---- about Sunland ---- */
.sh-about-in{position:relative;min-height:1px;}
.sh-about-pic{position:absolute;right:0;top:0;bottom:0;width:56.4%;container-type:inline-size;}
.sh-about-txt{position:relative;z-index:2;padding:24px 16px;}
.sh-about-pic img{display:block;width:100%;height:100%;object-fit:cover;}
/* ---- About Sunland collage block ---- */
.sun-block{display:grid;grid-template-columns:51.5% 48.5%;align-items:center;background:#fff;}
.sun-collage{position:relative;container-type:inline-size;line-height:0;}
.sun-collage > img{display:block;width:100%;height:auto;}
.sh-fic{display:block;width:34px;height:34px;margin:0 auto 10px;}
.sh-fic svg{width:100%;height:100%;fill:var(--navy);}
.sun-copy{
  padding:44px 3% 44px 30px;
  background:#fff url("images/sun-about-edge.jpg") right top/auto 100% no-repeat;
}
.sun-copy .sh-h2{font-size:2.6rem;letter-spacing:-.012em;}
@media (min-width:1001px){
  .sun-copy{padding:3.2cqw 3% 3.2cqw 2.4cqw;}
  .sun-copy .sh-eyebrow{font-size:1.34cqw;letter-spacing:.17em;margin-bottom:1.2cqw;}
  .sun-copy .sh-h2{font-size:2.72cqw;line-height:1.14;margin-bottom:1.4cqw;}
  .sun-copy .sh-p{font-size:1.24cqw;line-height:1.55;margin-bottom:1.2cqw;}
}
.sun-copy .sh-p{font-size:1.02rem;line-height:1.6;color:#2f3b49;}
.sun-copy .sh-p:last-child{margin-bottom:0;}
.sun-strip{position:relative;display:grid;grid-template-columns:1fr;background:#f2f5f9;}
.sun-strip ul{
  display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin:0;
  padding:22px 26% 22px 3%;list-style:none;text-align:center;
}
.sun-strip li{padding:0 10px;border-right:1px solid #d3dbe6;}
.sun-strip li:last-child{border-right:0;}
.sun-strip b{font-family:var(--ui);font-weight:900;font-size:.86rem;line-height:1.2;letter-spacing:.01em;color:var(--navy);}
.sun-proud{
  position:absolute;right:0;bottom:0;width:25%;height:auto;
}
@media (max-width:1000px){
  .sun-block{grid-template-columns:1fr;}
  .sun-copy{padding:24px 16px;background-size:auto 100%;}
  .sun-copy .sh-h2{font-size:1.8rem;}
  .sun-strip ul{grid-template-columns:repeat(2,1fr);gap:16px 0;padding:20px 16px 0;}
  .sun-strip li{border-right:0;}
  .sun-proud{position:static;display:block;width:74%;margin:8px auto 14px;}
}

/* ============================================================
   Shingle Roofing Sunland article - long-form ranking copy.
   Single measured column so the lines stay readable on wide
   screens; headings use the page's navy/red type scale.
   ============================================================ */
.sh-article{background:#fff;padding:46px 0 54px;}
.sh-article-in{max-width:56rem;margin:0 auto;padding:0 4.6%;}
.sh-article .sh-h2{font-size:2.2rem;margin-bottom:22px;}
.sh-article h3{
  margin:34px 0 12px;font-family:var(--display);font-weight:700;font-size:1.5rem;
  line-height:1.15;color:var(--navy);
}
.sh-article p{
  margin:0 0 14px;font-family:var(--ui);font-size:1.02rem;line-height:1.68;color:#33404f;
}
.sh-article b{color:var(--navy);}
.sh-article a{color:var(--red);text-decoration:underline;text-underline-offset:2px;}
.sh-article a:hover{color:var(--red-dark);}
.sh-bullets{margin:0 0 16px;padding:0;list-style:none;display:grid;gap:10px;}
.sh-bullets li{
  position:relative;padding-left:26px;
  font-family:var(--ui);font-size:1.02rem;line-height:1.55;color:#33404f;
}
.sh-bullets li::before{
  content:"";position:absolute;left:4px;top:.6em;width:8px;height:8px;
  border-radius:50%;background:var(--red);
}
.sh-article-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:24px;}
.sh-article .sh-btn,
.sh-article .sh-btn:hover{color:#fff;text-decoration:none;}
.sh-btn-navy{background:var(--navy);}
.sh-btn-navy:hover{background:#081f43;}
@media (max-width:1000px){
  .sh-article{padding:30px 0 34px;}
  .sh-article-in{padding:0 16px;}
  .sh-article .sh-h2{font-size:1.7rem;}
  .sh-article h3{font-size:1.25rem;margin-top:26px;}
  .sh-article-cta .sh-btn{width:100%;justify-content:center;}
}

/* ============================================================
   Service area map - images/service-area-map.jpg, 1536x1024
   Every served city on the plate gets a pin and a hit area over its
   painted label, linking to that city's shingle page. Positions are
   percentages of the plate, so they hold at any width. Ojai,
   Fillmore and Port Hueneme are printed on the artwork but are not
   served, so they get no pin and no link.
   ============================================================ */
.sh-map{position:relative;container-type:inline-size;line-height:0;background:#fff;overflow:hidden;}
.sh-map > img.plate{display:block;width:100%;height:auto;}
.sh-map .layer{position:absolute;inset:0;}

/* one pin per city, dropped on its point; the anchor is the pin itself */
.sh-pin{
  position:absolute;width:.72cqw;height:.72cqw;margin:-.95cqw 0 0 -.36cqw;
  border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  background:var(--red);box-shadow:0 0 0 .09cqw #fff,0 .06cqw .14cqw rgba(0,0,0,.4);
  z-index:2;
}
.sh-pin::before{   /* point */
  content:"";position:absolute;left:50%;top:76%;margin-left:-.17cqw;
  border-left:.17cqw solid transparent;border-right:.17cqw solid transparent;
  border-top:.3cqw solid var(--red);
}
.sh-pin > span{    /* city name, shown on hover */
  position:absolute;left:50%;bottom:170%;transform:translateX(-50%);
  padding:.28cqw .55cqw;border-radius:.28cqw;
  background:var(--navy);color:#fff;
  font-family:var(--ui);font-weight:700;font-size:.8cqw;line-height:1.1;
  white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s ease;
  box-shadow:0 .12cqw .3cqw rgba(0,0,0,.35);
}
.sh-pin:hover,.sh-pin:focus-visible{
  background:var(--navy);z-index:5;transform:scale(1.5);transform-origin:50% 100%;
}
.sh-pin:hover::before,.sh-pin:focus-visible::before{border-top-color:var(--navy);}
.sh-pin:hover > span,.sh-pin:focus-visible > span{opacity:1;}
@media (max-width:1000px){
  .sh-pin{width:2.1cqw;height:2.1cqw;margin:-2.7cqw 0 0 -1.05cqw;box-shadow:0 0 0 .24cqw #fff,0 .18cqw .3cqw rgba(0,0,0,.45);}
  .sh-pin::before{margin-left:-.48cqw;border-left-width:.48cqw;border-right-width:.48cqw;border-top-width:.75cqw;}
  .sh-pin > span{font-size:1.7cqw;padding:.5cqw 1cqw;}
}

/* ============================================================
   Desktop type and spacing, measured off the comp and expressed in
   cqw so every block matches the artwork at the page's own width.
   Comp is 757px wide = the 1693px content column, so 1 comp px =
   0.1321cqw. Phone sizes stay in the max-width:1000px block above.
   ============================================================ */
@media (min-width:1001px){
  .sh-eyebrow{font-size:1.50cqw;letter-spacing:.15em;margin-bottom:1.45cqw;gap:1.3cqw;}
  .sh-eyebrow::after{flex:0 0 6.6cqw;height:.26cqw;}
  .sh-h2{font-size:4.10cqw;line-height:1.24;margin-bottom:1.72cqw;}
  .sh-p{font-size:1.52cqw;line-height:1.25;margin-bottom:1.72cqw;}
  .sh-btn{
    height:5.42cqw;padding:0 2.6cqw;gap:1.6cqw;border-radius:.5cqw;
    font-size:1.64cqw;letter-spacing:.02em;
  }
  .sh-btn svg{width:1.5cqw;height:1.5cqw;stroke-width:3;}

  /* about Sunland */
  .sh-about-txt{padding:3.04cqw 0 3.04cqw 4.62cqw;width:39.6cqw;box-sizing:content-box;}
  .sh-facts{padding:1.6cqw 3.96cqw;}
  .sh-fic{width:3.1cqw;height:3.1cqw;margin-bottom:.95cqw;}
  .sh-facts b{font-size:1.11cqw;line-height:1.12;}

  /* built to withstand */
  .sh-stand-txt{padding:3.83cqw 0 3.83cqw 4.62cqw;width:42.7cqw;box-sizing:content-box;}

  /* popular shingle styles */
  .sh-styles{padding:2.1cqw 3.7% 2.6cqw;}
  .sh-swatches b{font-size:1.28cqw;line-height:1.12;padding:1.5cqw .6cqw 1cqw;}

  /* enhance, protect, add value */
  .sh-value-txt{margin-left:53.6cqw;padding:3.8cqw 0;width:43.1cqw;box-sizing:content-box;}
  .sh-ticks{gap:1.15cqw;margin-top:2.1cqw;}
  .sh-ticks li{padding-left:3.6cqw;font-size:1.51cqw;line-height:1.25;}
  .sh-ticks li::before{width:2.38cqw;height:2.38cqw;}
  .sh-ticks li::after{left:.66cqw;width:1.05cqw;height:.55cqw;border-width:0 0 .24cqw .24cqw;}

  /* why choose us */
  .sh-why-in{padding:4.6cqw 3.3cqw 4.6cqw 4.62cqw;gap:1.2cqw;}
  .sh-why-h2{font-size:5.55cqw;line-height:1.12;}
  .sh-why-tiles{gap:1.1cqw;}
  .sh-why-tiles li{padding:1.7cqw .5cqw 1.4cqw;}
  .sh-why-tiles span{width:2.85cqw;height:2.85cqw;margin-bottom:1.1cqw;}
  .sh-why-tiles b{font-size:1.16cqw;line-height:1.2;}

  /* FAQ */
  .sh-faq-head > div{padding:2.8cqw 0 1.9cqw 4.62cqw;}
  .sh-faq-head img{position:absolute;right:0;top:0;width:38.9%;height:auto;}
  .sh-faq-grid{gap:1.05cqw;padding:0 3.7cqw;}
  .sh-faq-card{padding:1.35cqw 4.2cqw 1.35cqw 1.45cqw;border-radius:.45cqw;}
  .sh-faq-card h3{font-size:1.46cqw;line-height:1.3;}
  .sh-faq-card p{font-size:1.43cqw;line-height:1.3;margin-top:.6cqw;}
  .sh-faq-card::after{right:1.8cqw;top:1.9cqw;width:.95cqw;height:.95cqw;border-width:0 .26cqw .26cqw 0;}
  .sh-faq{padding-bottom:3.2cqw;}

  /* free roof inspection */
  .sh-inspect-txt{margin-left:55.5cqw;padding:3.8cqw 0;width:41cqw;box-sizing:content-box;}
}

/* ============================================================
   Full-size block plates supplied by Martin. Each one is finished
   artwork, so the section is just the plate at full width with the
   wording repeated in a screen-reader block for search engines.
   ============================================================ */
.sun-plate{display:block;background:#fff;line-height:0;}
.sun-plate > img.plate{display:block;width:100%;height:100%;object-fit:cover;}
/* full width, with the decorative sky/foliage margins trimmed so the
   blocks sit as bands instead of full-height panels. Nothing inside the
   artwork is cut - only the empty top or bottom of each plate. */
.sun-about-block > img.plate{aspect-ratio:1708/755;object-position:center 100%;}
.sun-options    > img.plate{aspect-ratio:2163/630;object-position:center 15%;}
.sun-environment> img.plate{aspect-ratio:2164/690;object-position:center 100%;}
.sun-banner     > img.plate{aspect-ratio:2156/350;object-position:center 72%;}
.sun-faq        > img.plate{aspect-ratio:1536/712;object-position:center 29%;}
@media (max-width:1000px){
  .sun-plate > img.plate{aspect-ratio:auto;height:auto;object-fit:fill;}
}

/* ---- FAQ: live drop-downs sitting exactly on the painted cards ----
   Each card is absolutely placed over its counterpart on the plate, so
   the closed state is the artwork. Opening one grows it over the cards
   below instead of pushing them, which keeps the plate aligned. */
.sun-faq > img.plate{aspect-ratio:1774/766;object-position:center;}
.sun-faq{position:relative;}
.faq-layer{position:absolute;inset:0;line-height:normal;}
/* while a card is open, a white sheet hides the painted cards underneath
   so nothing shows through where the open card overlaps its neighbour */
.faq-layer::before{
  content:"";position:absolute;left:11.9%;right:11.6%;top:21.9%;bottom:11.5%;
  background:rgba(255,255,255,.97);border-radius:.6cqw;opacity:0;transition:opacity .15s ease;
}
.faq-layer:has(.faq-card[open])::before{opacity:1;}
.faq-card{
  position:absolute;z-index:2;box-sizing:border-box;min-height:11.36%;
  padding:.95cqw 3.4cqw .95cqw 1.2cqw;border-radius:.45cqw;
  background:#fff;box-shadow:0 .12cqw .35cqw rgba(16,32,56,.16);
}
.faq-card summary{list-style:none;cursor:pointer;display:block;}
.faq-card summary::-webkit-details-marker{display:none;}
.faq-card summary b{
  display:block;font-family:var(--ui);font-weight:700;font-size:1.10cqw;
  line-height:1.25;color:var(--navy);
}
.faq-card summary span{
  display:block;margin-top:.3cqw;font-family:var(--ui);font-size:1.00cqw;
  line-height:1.32;color:#3c4a5b;
}
.faq-card p{
  margin:.8cqw 0 0;padding-top:.8cqw;border-top:1px solid #e3e9f1;
  font-family:var(--ui);font-size:.97cqw;line-height:1.45;color:#4a5768;
}
.faq-card::after{
  content:"";position:absolute;right:1.5cqw;top:1.9cqw;width:.7cqw;height:.7cqw;
  border-right:.17cqw solid var(--navy);border-bottom:.17cqw solid var(--navy);
  transform:rotate(-45deg);transition:transform .18s ease;
}
.faq-card[open]{z-index:5;bottom:12%;box-shadow:0 .3cqw .9cqw rgba(16,32,56,.3);}
.faq-card[open]::after{transform:rotate(45deg);}
.faq-card:hover{box-shadow:0 .2cqw .6cqw rgba(16,32,56,.26);}

@media (max-width:1000px){
  .sun-faq > img.plate{display:none;}
  .sun-faq{background:#eef3f9;padding:18px 16px 24px;}
  .faq-layer{position:static;display:grid;gap:10px;}
  .faq-card{position:static !important;width:auto !important;min-height:0;
    padding:14px 38px 14px 14px;border-radius:6px;}
  .faq-card summary b{font-size:1rem;}
  .faq-card summary span{font-size:.92rem;margin-top:4px;}
  .faq-card p{font-size:.92rem;margin-top:10px;padding-top:10px;}
  .faq-card::after{right:16px;top:20px;width:9px;height:9px;border-width:0 2.2px 2.2px 0;}
}

/* ---- monument sign wording on the About block ----
   The plate has the sign face cleared, so these two lines are live text.
   Measured on the 1708x921 plate: "Sunland" x1296-1593 baseline tilt
   -4.4deg, "CALIFORNIA" x1336-1576. Edit the words in the HTML per site. */
.sun-about-block{position:relative;}
.sun-monument-sign{
  position:absolute;left:75.55%;top:37.6%;width:17.9%;
  transform:rotate(-4.37deg);transform-origin:0 50%;
  text-align:center;line-height:1;pointer-events:none;
}
.sun-monument-sign b,.sun-monument-sign i{
  display:block;color:#f4f6fa;font-style:normal;line-height:1;
  text-shadow:.08cqw .12cqw .18cqw rgba(6,20,48,.75);
}
.sun-monument-sign b{
  font-family:"Times New Roman",Times,Georgia,serif;font-weight:400;
  font-size:var(--signfs,4.6cqw);
}
/* a long city name wraps rather than running off the sign face; set
   .sun-monument-sign b{font-size:3.4cqw} for names of 12+ characters */
.sun-monument-sign b{overflow-wrap:normal;}
.sun-monument-sign i{
  margin-top:.75cqw;font-family:var(--ui);font-weight:500;font-size:var(--statefs,1.68cqw);letter-spacing:.22em;
  text-indent:.22em;
}
@media (max-width:1000px){
  .sun-monument-sign b{font-size:var(--signfs,4.6cqw);}
}

/* ---- guide article set in two columns ---- */
@media (min-width:1001px){
  .sh-article-in{max-width:76rem;}
  .sh-article-cols{
    column-count:2;column-gap:3.2rem;column-rule:1px solid #e6ecf3;
  }
  .sh-article-cols > *{break-inside:avoid-column;}
  .sh-article-cols h3{break-after:avoid-column;margin-top:0;}
  .sh-article-cols > h3 ~ h3{margin-top:26px;}
  .sh-article-cols p,.sh-article-cols ul{break-inside:auto;}
  .sh-article-cta{column-span:all;margin-top:30px;}
}

/* ---- photos and a pull quote breaking up the guide ---- */
.sh-fig{margin:0 0 20px;break-inside:avoid;}
.sh-fig img{display:block;width:100%;height:auto;border-radius:6px;}
.sh-fig figcaption{
  margin-top:8px;font-family:var(--ui);font-size:.86rem;line-height:1.4;color:#61718a;
}
.sh-fig-swatches span{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;}
.sh-fig-swatches i{display:block;font-style:normal;}
.sh-fig-swatches img{border-radius:4px;aspect-ratio:1/1;object-fit:cover;}
.sh-fig-swatches b{
  display:block;margin-top:5px;font-family:var(--ui);font-weight:700;
  font-size:.72rem;line-height:1.2;color:var(--navy);text-align:center;
}
.sh-pull{
  margin:4px 0 20px;padding:14px 0 14px 18px;break-inside:avoid;
  border-left:4px solid var(--red);
  font-family:var(--display);font-weight:700;font-style:italic;font-size:1.35rem;
  line-height:1.3;color:var(--navy);
}
@media (max-width:1000px){
  .sh-fig{margin-bottom:16px;}
  .sh-pull{font-size:1.15rem;}
}
.sh-fig-pair span{display:grid;grid-template-columns:1fr 1fr;gap:7px;}
.sh-fig-pair img{border-radius:4px;aspect-ratio:1/1;object-fit:cover;}

/* ---- About block copy: live text over the cleared plate ----
   Measured on the 1708x921 plate: eyebrow y248, headline y280-406,
   paragraph y427-690, all inside x78-760. Every city mention is a
   <span class="city"> so one find-and-replace rebrands the page. */
.sun-about-copy{position:absolute;left:4.57%;top:10.86%;width:42.2%;}
.sun-about-copy .city{color:inherit;font:inherit;}
.ab-eyebrow{
  margin:0 0 1.15cqw;display:flex;align-items:center;gap:1.1cqw;
  font-family:var(--ui);font-weight:900;font-size:var(--ebfs,1.64cqw);letter-spacing:.19em;
  color:var(--navy);white-space:nowrap;
}
.ab-eyebrow::after{content:"";flex:1 1 auto;height:.16cqw;background:linear-gradient(90deg,var(--red) 0 55%,#12305e 55% 100%);}
.ab-h2{
  margin:0 0 1.35cqw;font-family:var(--display);font-weight:700;font-size:3.62cqw;
  line-height:1.06;letter-spacing:-.01em;color:var(--navy);text-transform:uppercase;
}
.ab-h2 span{display:block;color:var(--red);font-family:inherit;font-weight:inherit;letter-spacing:inherit;}
.ab-p{margin:0;font-family:var(--ui);font-size:var(--abfs,1.41cqw);line-height:1.45;color:#23303f;}
@media (max-width:1000px){
  .sun-about-copy{position:static;width:auto;padding:18px 16px 6px;background:#fff;}
  .ab-eyebrow{font-size:.76rem;}
  .ab-h2{font-size:1.7rem;}
  .ab-p{font-size:.98rem;line-height:1.55;}
}

/* ---- Built for <city>'s unique environment: live copy over the plate ----
   Plate is 2164x727 with the right-hand copy and the brush script cleared.
   Measured: eyebrow y40-57, headline y90-245, paragraph y266-432,
   ticks y456-665, all inside x1300-2130. Brush script sits x120-700 y460-655. */
.sun-environment{position:relative;}
.env-copy{position:absolute;left:60.1%;top:4.4%;width:38.3%;}
.env-eyebrow{
  margin:0 0 1.1cqw;font-family:var(--ui);font-weight:900;font-size:var(--envebfs,1.30cqw);
  letter-spacing:.22em;color:var(--navy);white-space:nowrap;
}
.env-h2{
  margin:0 0 1.25cqw;font-family:var(--display);font-weight:700;font-size:var(--envh2fs,3.55cqw);
  line-height:1.04;letter-spacing:-.01em;color:var(--navy);text-transform:uppercase;
}
.env-h2 span{display:block;color:var(--red);font-family:inherit;font-weight:inherit;letter-spacing:inherit;}
.env-h2 span.city{display:inline;color:inherit;}
.env-p{margin:0 0 1.35cqw;font-family:var(--ui);font-size:1.3cqw;line-height:1.42;color:#23303f;}
.env-ticks{margin:0;padding:0;list-style:none;display:grid;gap:.9cqw;}
.env-ticks li{
  position:relative;padding-left:2.9cqw;font-family:var(--ui);font-size:1.3cqw;
  line-height:1.3;color:#23303f;
}
.env-ticks li::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1.95cqw;height:1.95cqw;border-radius:50%;background:var(--red);
}
.env-ticks li::after{
  content:"";position:absolute;left:.52cqw;top:50%;width:.9cqw;height:.45cqw;
  margin-top:-.12cqw;border-left:.17cqw solid #fff;border-bottom:.17cqw solid #fff;
  transform:translateY(-50%) rotate(-45deg);
}
.env-script{
  position:absolute;left:4.4%;top:61.5%;width:29%;margin:0;text-align:center;line-height:1;
}
.env-script b{
  display:block;font-family:"Priestacy","Kaushan Script",cursive;font-weight:400;
  font-size:var(--envscriptfs,5.6cqw);line-height:.95;color:#fff;white-space:nowrap;
}
.env-script i{
  display:block;margin-top:.5cqw;font-style:normal;font-family:var(--ui);font-weight:500;
  font-size:1.03cqw;line-height:1.5;letter-spacing:.2em;text-indent:.2em;color:#fff;
}
@media (max-width:1000px){
  .env-copy,.env-script{position:static;width:auto;}
  .env-copy{padding:18px 16px;background:#fff;}
  .env-script{display:none;}
  .env-eyebrow{font-size:.74rem;}
  .env-h2{font-size:1.7rem;}
  .env-p,.env-ticks li{font-size:.98rem;}
  .env-ticks li{padding-left:30px;}
  .env-ticks li::before{width:20px;height:20px;}
  .env-ticks li::after{left:5px;width:9px;height:5px;border-width:0 0 2px 2px;}
}

/* ============================================================
   Shingle roofing FAQ - ten cards in two columns, built live from
   Martin's comp. Header and footer bands use photo crops that carry
   no painted type, so every word here is editable HTML.
   ============================================================ */
.sfaq{background:#eef4fb;container-type:inline-size;line-height:normal;}
.sfaq-head{
  position:relative;min-height:13.2cqw;padding:2.4cqw 3cqw 2.6cqw;
  background:#dce9f7 url("images/sfq-head.jpg") right center/cover no-repeat;
}
.sfaq-head::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,#eaf2fb 0%,rgba(234,242,251,.96) 30%,rgba(234,242,251,.35) 46%,rgba(234,242,251,0) 60%);
}
.sfaq-head > *{position:relative;z-index:2;}
.sfaq-eyebrow{
  display:inline-flex;align-items:center;gap:1cqw;margin:0 0 1cqw;padding:.5cqw 1.4cqw;
  background:linear-gradient(90deg,#c8102e 0%,#9c1020 100%);
  font-family:var(--ui);font-weight:900;font-size:1.12cqw;letter-spacing:.22em;color:#fff;
}
.sfaq-h2{
  margin:0 0 .7cqw;font-family:var(--display);font-weight:700;font-size:4cqw;line-height:1.02;
  letter-spacing:-.01em;color:var(--navy);text-transform:uppercase;
}
.sfaq-h2 span{display:block;font-size:.62em;color:var(--red);font-family:inherit;font-weight:inherit;}
.sfaq-sub{margin:0;font-family:var(--ui);font-weight:700;font-size:1.18cqw;letter-spacing:.2em;color:#42556e;text-transform:uppercase;}
.sfaq-script{position:absolute;right:16%;top:2.4cqw;margin:0;text-align:center;z-index:2;}
.sfaq-script b{display:block;font-family:"Priestacy","Kaushan Script",cursive;font-weight:400;font-size:3.6cqw;line-height:1;color:#fff;text-shadow:0 .1cqw .3cqw rgba(10,30,60,.45);}
.sfaq-script i{display:block;margin-top:.5cqw;font-style:normal;font-family:var(--ui);font-weight:700;font-size:1.08cqw;letter-spacing:.1em;line-height:1.45;color:#fff;text-shadow:0 .1cqw .3cqw rgba(10,30,60,.5);}
.sfaq-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1cqw;margin:0;padding:1.6cqw 1.5cqw;list-style:none;counter-reset:none;}
.sfaq-grid li{
  position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:1cqw;align-items:start;
  padding:1.2cqw 0 1.2cqw 1.2cqw;border-radius:.5cqw;overflow:hidden;
  background:linear-gradient(180deg,#ffffff 0%,#f2f7fd 100%);box-shadow:0 .1cqw .35cqw rgba(16,38,70,.1);
}
.sfaq-n{
  display:grid;place-items:center;width:2.9cqw;height:2.9cqw;border-radius:.4cqw;background:var(--navy);
  font-family:var(--ui);font-weight:900;font-size:1.24cqw;color:#fff;
}
.sfaq-grid h3{margin:0 0 .45cqw;font-family:var(--display);font-weight:700;font-size:1.6cqw;line-height:1.14;color:var(--navy);}
.sfaq-grid p{margin:0;font-family:var(--ui);font-size:1.06cqw;line-height:1.4;color:#3b4a5c;}
.sfaq-grid img{display:block;width:14.6cqw;height:100%;object-fit:cover;align-self:stretch;}
.sfaq-foot b{font-family:"Priestacy","Kaushan Script",cursive;font-weight:400;}
.sfaq-foot{
  position:relative;display:flex;align-items:center;justify-content:center;gap:2.4cqw;
  padding:2.1cqw 2cqw;background:#0d2a5c url("images/sfq-foot.jpg") center 60%/cover no-repeat;
  font-family:"Priestacy","Kaushan Script",cursive;font-size:3.2cqw;color:#fff;line-height:1;
}
.sfaq-foot::before{content:"";position:absolute;inset:0;background:rgba(9,28,62,.62);}
.sfaq-foot b,.sfaq-foot > span{position:relative;z-index:2;}
.sfaq-foot b{font-family:"Priestacy","Kaushan Script",cursive;font-weight:400;text-shadow:0 .1cqw .35cqw rgba(6,20,48,.6);}
.sfaq-foot > span{
  padding-left:2.4cqw;border-left:1px solid rgba(255,255,255,.5);
  font-family:var(--ui);font-weight:700;font-size:.4em;letter-spacing:.18em;line-height:1.5;
}
@media (max-width:1000px){
  .sfaq-head{padding:18px 16px 22px;background-size:cover;}
  .sfaq-head::before{background:linear-gradient(90deg,#eaf2fb 0%,rgba(234,242,251,.92) 60%,rgba(234,242,251,.6) 100%);}
  .sfaq-eyebrow{font-size:.7rem;padding:5px 12px;}
  .sfaq-h2{font-size:1.75rem;}
  .sfaq-sub{font-size:.78rem;}
  .sfaq-script{display:none;}
  .sfaq-grid{grid-template-columns:1fr;gap:12px;padding:16px;}
  .sfaq-grid li{grid-template-columns:auto 1fr;padding:14px;gap:12px;}
  .sfaq-n{width:34px;height:34px;font-size:.95rem;}
  .sfaq-grid h3{font-size:1.05rem;}
  .sfaq-grid p{font-size:.93rem;}
  .sfaq-grid img{display:none;}
  .sfaq-foot b{font-family:"Priestacy","Kaushan Script",cursive;font-weight:400;}
.sfaq-foot{flex-direction:column;gap:10px;font-size:1.8rem;padding:20px 16px;text-align:center;}
  .sfaq-foot span{border-left:0;padding-left:0;font-size:.75rem;}
}


/* pin tooltips are hidden on touch screens: there is no hover there and
   the labels were extending past the viewport edge */
@media (max-width:1000px){
  .sh-pin span{display:none !important;}
}