/* ==========================================================
   Review callouts — one shared desktop style ("watermark").
   Desktop block first, then the phone block at the bottom
   (added v129: phones now get the same no-box look).
   Covers every small review callout except the one on the
   dark photo band on Roof Repairs (.repairs-cta-quote).
   ========================================================== */
@media (min-width: 769px) {

  /* The callout itself: no box, no line */
  .about-pq,
  .faq-sidebar-quote,
  .scope-quote-card,
  .claim-persistent-quote,
  .why-pullquote,
  .siding-signs-quote,
  .spec-inline-quote,
  .hs-faq-quote {
    position: relative !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 26px 0 4px 22px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Big, faint gold quote mark sitting behind the start of the text */
  .about-pq::before,
  .faq-sidebar-quote::before,
  .scope-quote-card::before,
  .claim-persistent-quote::before,
  .why-pullquote::before,
  .siding-signs-quote::before,
  .spec-inline-quote::before,
  .hs-faq-quote::before {
    content: "\201C" !important;
    display: block !important;
    position: absolute !important;
    top: -38px !important;
    left: -6px !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 12rem !important;
    font-style: normal !important;
    line-height: 1 !important;
    color: var(--amber-400) !important;
    opacity: 0.17 !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }
  .about-pq::after,
  .faq-sidebar-quote::after,
  .scope-quote-card::after,
  .claim-persistent-quote::after,
  .why-pullquote::after,
  .siding-signs-quote::after,
  .spec-inline-quote::after,
  .hs-faq-quote::after {
    content: none !important;
    display: none !important;
  }

  /* Keep the words above the quote mark */
  .about-pq p,
  .faq-sidebar-quote p,
  .scope-quote-card p,
  .claim-persistent-quote p,
  .why-pullquote p,
  .siding-signs-quote p,
  .spec-inline-quote p,
  .hs-faq-quote p,
  .about-pq :is([class$='footer'], [class$='-attr']),
  .faq-sidebar-quote :is([class$='footer'], [class$='-attr']),
  .scope-quote-card :is([class$='footer'], [class$='-attr']),
  .claim-persistent-quote :is([class$='footer'], [class$='-attr']),
  .why-pullquote :is([class$='footer'], [class$='-attr']),
  .siding-signs-quote :is([class$='footer'], [class$='-attr']),
  .spec-inline-quote :is([class$='footer'], [class$='-attr']),
  .hs-faq-quote :is([class$='footer'], [class$='-attr']) {
    position: relative !important;
    z-index: 1 !important;
  }

  /* The quote: medium gray, a step bigger than body text, not italic */
  .about-pq p,
  .faq-sidebar-quote p,
  .scope-quote-card p,
  .claim-persistent-quote p,
  .why-pullquote p,
  .siding-signs-quote p,
  .spec-inline-quote p,
  .hs-faq-quote p {
    font-family: var(--font-body) !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 1.3rem !important;           /* a step bigger than the 18px body text */
    line-height: 1.5 !important;
    text-wrap: balance !important;          /* even line lengths, no lone last word */
    color: var(--neutral-600) !important;
    margin: 0 0 12px !important;
  }

  /* Bottom line: Google G + stars on top, then name and town */
  .about-pq :is([class$='footer'], [class$='-attr']),
  .faq-sidebar-quote :is([class$='footer'], [class$='-attr']),
  .scope-quote-card :is([class$='footer'], [class$='-attr']),
  .claim-persistent-quote :is([class$='footer'], [class$='-attr']),
  .why-pullquote :is([class$='footer'], [class$='-attr']),
  .siding-signs-quote :is([class$='footer'], [class$='-attr']),
  .spec-inline-quote :is([class$='footer'], [class$='-attr']),
  .hs-faq-quote :is([class$='footer'], [class$='-attr']) {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
  .about-pq :is([class$='footer'], [class$='-attr']) svg,
  .faq-sidebar-quote :is([class$='footer'], [class$='-attr']) svg,
  .scope-quote-card :is([class$='footer'], [class$='-attr']) svg,
  .claim-persistent-quote :is([class$='footer'], [class$='-attr']) svg,
  .why-pullquote :is([class$='footer'], [class$='-attr']) svg,
  .siding-signs-quote :is([class$='footer'], [class$='-attr']) svg,
  .spec-inline-quote :is([class$='footer'], [class$='-attr']) svg,
  .hs-faq-quote :is([class$='footer'], [class$='-attr']) svg {
    order: -2 !important;
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
  }
  .about-pq [class$='stars'],
  .faq-sidebar-quote [class$='stars'],
  .scope-quote-card [class$='stars'],
  .claim-persistent-quote [class$='stars'],
  .why-pullquote [class$='stars'],
  .siding-signs-quote [class$='stars'],
  .spec-inline-quote [class$='stars'],
  .hs-faq-quote [class$='stars'] {
    order: -1 !important;
    flex-basis: calc(100% - 28px) !important;
    color: var(--amber-500) !important;
    font-size: 0.85rem !important;
    letter-spacing: 2px !important;
    margin: 0 0 -4px !important;
  }
  .about-pq [class$='name'],
  .faq-sidebar-quote [class$='name'],
  .scope-quote-card [class$='name'],
  .claim-persistent-quote [class$='name'],
  .why-pullquote [class$='name'],
  .siding-signs-quote [class$='name'],
  .spec-inline-quote [class$='name'],
  .hs-faq-quote [class$='name'] {
    font-family: var(--font-display) !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--neutral-700) !important;
  }
  .about-pq [class$='loc'],
  .faq-sidebar-quote [class$='loc'],
  .scope-quote-card [class$='loc'],
  .claim-persistent-quote [class$='loc'],
  .why-pullquote [class$='loc'],
  .siding-signs-quote [class$='loc'],
  .spec-inline-quote [class$='loc'],
  .hs-faq-quote [class$='loc'] {
    font-size: 0.8rem !important;
    color: var(--neutral-400) !important;
  }

  /* Hide the dot separator and the "Read all reviews" link */
  .about-pq [class$='divider'],
  .faq-sidebar-quote [class$='divider'],
  .scope-quote-card [class$='divider'],
  .claim-persistent-quote [class$='divider'],
  .why-pullquote [class$='divider'],
  .siding-signs-quote [class$='divider'],
  .spec-inline-quote [class$='divider'],
  .hs-faq-quote [class$='divider'],
  .about-pq [class$='google'],
  .faq-sidebar-quote [class$='google'],
  .scope-quote-card [class$='google'],
  .claim-persistent-quote [class$='google'],
  .why-pullquote [class$='google'],
  .siding-signs-quote [class$='google'],
  .spec-inline-quote [class$='google'],
  .hs-faq-quote [class$='google'] {
    display: none !important;
  }
}

/* ==========================================================
   Phones (768px and down): same look as desktop — no box,
   big faint gold quote mark, plain gray text, stars on top.
   Covers the quotes inside sections AND the stand-alone quote
   bands, which are stone boxes on phones today.
   Written with "html body ... :not(#_)" so it wins over the
   older per-page box styles without touching them.
   ========================================================== */
@media (max-width: 768px) {

  /* The callout itself: no box */
  html body :is(.about-pq, .faq-sidebar-quote, .scope-quote-card, .claim-persistent-quote, .why-pullquote, .siding-signs-quote, .spec-inline-quote, .hs-faq-quote, .quote-band-inner, .repairs-quote-inner, .replacement-quote-inner, .siding-quote-inner, .spec-quote-inner, .canton-quote-inner, .hs-quote-inner, .storm-mobile-pq-inner):not(#_) {
    position: relative !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 30px 0 0 22px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    text-align: left !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Quotes that sit inside a section get a large gap above them */
  html body :is(.about-pq, .faq-sidebar-quote, .why-pullquote, .siding-signs-quote, .spec-inline-quote, .hs-faq-quote):not(#_) {
    margin-top: var(--space-l, 40px) !important;
  }

  /* Big, faint gold quote mark behind the start of the text */
  html body :is(.about-pq, .faq-sidebar-quote, .scope-quote-card, .claim-persistent-quote, .why-pullquote, .siding-signs-quote, .spec-inline-quote, .hs-faq-quote, .quote-band-inner, .repairs-quote-inner, .replacement-quote-inner, .siding-quote-inner, .spec-quote-inner, .canton-quote-inner, .hs-quote-inner, .storm-mobile-pq-inner):not(#_)::before {
    content: "\201C" !important;
    display: block !important;
    position: absolute !important;
    top: -26px !important;
    left: -4px !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 9rem !important;
    font-style: normal !important;
    line-height: 1 !important;
    color: var(--amber-400) !important;
    opacity: 0.17 !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }
  html body :is(.about-pq, .faq-sidebar-quote, .scope-quote-card, .claim-persistent-quote, .why-pullquote, .siding-signs-quote, .spec-inline-quote, .hs-faq-quote, .quote-band-inner, .repairs-quote-inner, .replacement-quote-inner, .siding-quote-inner, .spec-quote-inner, .canton-quote-inner, .hs-quote-inner, .storm-mobile-pq-inner):not(#_)::after {
    content: none !important;
    display: none !important;
  }

  /* The quote: plain gray, a step bigger than body text, not slanted */
  html body :is(.about-pq, .faq-sidebar-quote, .scope-quote-card, .claim-persistent-quote, .why-pullquote, .siding-signs-quote, .spec-inline-quote, .hs-faq-quote, .quote-band-inner, .repairs-quote-inner, .replacement-quote-inner, .siding-quote-inner, .spec-quote-inner, .canton-quote-inner, .hs-quote-inner, .storm-mobile-pq-inner):not(#_) > p {
    position: relative !important;
    z-index: 1 !important;
    font-family: var(--font-body) !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 1.25rem !important;          /* 20px: a step bigger than the 17px body text */
    line-height: 1.5 !important;
    text-wrap: balance !important;          /* even line lengths, no lone last word */
    color: var(--neutral-600) !important;
    text-align: left !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
  }

  /* Bottom line: Google G + stars, then name and town */
  html body :is(.about-pq, .faq-sidebar-quote, .scope-quote-card, .claim-persistent-quote, .why-pullquote, .siding-signs-quote, .spec-inline-quote, .hs-faq-quote, .quote-band-inner, .repairs-quote-inner, .replacement-quote-inner, .siding-quote-inner, .spec-quote-inner, .canton-quote-inner, .hs-quote-inner, .storm-mobile-pq-inner):not(#_) > :is([class$='-footer'], [class$='-attr']) {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 8px 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    text-align: left !important;
  }
  html body :is(.about-pq, .faq-sidebar-quote, .scope-quote-card, .claim-persistent-quote, .why-pullquote, .siding-signs-quote, .spec-inline-quote, .hs-faq-quote, .quote-band-inner, .repairs-quote-inner, .replacement-quote-inner, .siding-quote-inner, .spec-quote-inner, .canton-quote-inner, .hs-quote-inner, .storm-mobile-pq-inner):not(#_) > :is([class$='-footer'], [class$='-attr']) svg {
    order: -2 !important;
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
  }
  html body :is(.about-pq, .faq-sidebar-quote, .scope-quote-card, .claim-persistent-quote, .why-pullquote, .siding-signs-quote, .spec-inline-quote, .hs-faq-quote, .quote-band-inner, .repairs-quote-inner, .replacement-quote-inner, .siding-quote-inner, .spec-quote-inner, .canton-quote-inner, .hs-quote-inner, .storm-mobile-pq-inner):not(#_) > :is([class$='-footer'], [class$='-attr']) [class$='stars'] {
    order: -1 !important;
    flex-basis: calc(100% - 28px) !important;
    color: var(--amber-500) !important;
    font-size: 0.85rem !important;
    letter-spacing: 2px !important;
    margin: 0 0 -2px !important;
  }
  html body :is(.about-pq, .faq-sidebar-quote, .scope-quote-card, .claim-persistent-quote, .why-pullquote, .siding-signs-quote, .spec-inline-quote, .hs-faq-quote, .quote-band-inner, .repairs-quote-inner, .replacement-quote-inner, .siding-quote-inner, .spec-quote-inner, .canton-quote-inner, .hs-quote-inner, .storm-mobile-pq-inner):not(#_) > :is([class$='-footer'], [class$='-attr']) [class$='name'] {
    font-family: var(--font-display) !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--neutral-700) !important;
  }
  html body :is(.about-pq, .faq-sidebar-quote, .scope-quote-card, .claim-persistent-quote, .why-pullquote, .siding-signs-quote, .spec-inline-quote, .hs-faq-quote, .quote-band-inner, .repairs-quote-inner, .replacement-quote-inner, .siding-quote-inner, .spec-quote-inner, .canton-quote-inner, .hs-quote-inner, .storm-mobile-pq-inner):not(#_) > :is([class$='-footer'], [class$='-attr']) [class$='loc'] {
    font-size: 0.8rem !important;
    color: var(--neutral-400) !important;
  }

  /* Hide the dot and the "Read all reviews" link, same as desktop */
  html body :is(.about-pq, .faq-sidebar-quote, .scope-quote-card, .claim-persistent-quote, .why-pullquote, .siding-signs-quote, .spec-inline-quote, .hs-faq-quote, .quote-band-inner, .repairs-quote-inner, .replacement-quote-inner, .siding-quote-inner, .spec-quote-inner, .canton-quote-inner, .hs-quote-inner, .storm-mobile-pq-inner):not(#_) > :is([class$='-footer'], [class$='-attr']) :is([class$='divider'], [class$='google']) {
    display: none !important;
  }
}