/* Styles for the fixes in scripts/lib/site-fixes.mjs. Scoped to the pfix- classes the
   fixes add, so nothing else on the site is affected. */

/* Top bar: the free-estimate phone link (the bar keeps its own size and colours). */
.xai-weather-ribbon a.pfix-ribbon-link,
.xai-weather-ribbon a.pfix-ribbon-link:hover {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Lead forms: link to the Reviews page where the review count used to fail (the second
   form on a page uses total-reviews-1 or -2). */
[id^="total-reviews"] a.pfix-reviews-link,
[id^="total-reviews"] a.pfix-reviews-link:hover {
  color: #111111;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Testimonials: every review visible, side by side (one per row on phones). */
.pfix-testimonials .pfix-testimonials__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 20px;
}
.pfix-testimonials .pfix-testimonials__grid > .swiper-slide {
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  /* side by side the cards line up: stars at the top, the reviewer at the bottom */
  justify-content: flex-start !important;
}
.pfix-testimonials .pfix-testimonials__grid > .swiper-slide > .review-text {
  flex-grow: 1;
}

/* Reviewer without a photo: initials in the photo's place. */
.pfix-avatar {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: none;
  /* fill the site's own round photo slot, whatever its size */
  width: 100% !important;
  height: 100% !important;
  min-width: 40px;
  min-height: 40px;
  border-radius: 50%;
  background: #9acd32;
  color: #111111;
  font-family: var(--robboto, Roboto), system-ui, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

/* A photo gallery without its tile whose photo is missing. At widths where all four
   tiles fit in one row (4 x 300px + 3 gaps), the ones left keep that size and are
   centered, instead of stretching over the empty column. Narrower, nothing changes. */
@media (min-width: 1272px) {
  .pi-gallery-grid.pfix-gallery {
    grid-template-columns: repeat(var(--pfix-gallery-n, 3), calc((100% - 4.5rem) / 4));
    justify-content: center;
  }
}

/* Blog share buttons, now links: keep their button look. */
a.bde-social-share-button,
a.bde-social-share-button:hover {
  text-decoration: none;
}

/* "Experts You Can Trust" (home page): the logos glide past in one continuous row instead
   of jumping a step every 2.5 seconds (site-fixes.js repeats them so the loop has no
   seam). Without JavaScript, or with reduced motion, they sit still in a centred row. */
.pfix-marquee {
  position: relative;
  overflow: hidden;
}
.pfix-marquee .pfix-marquee__track {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  transform: none;
}
.pfix-marquee .pfix-marquee__item {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: auto !important;
  height: 150px;
  margin: 0 !important;
  padding: 0 clamp(28px, 3.4vw, 48px);
}
.pfix-marquee .pfix-marquee__item img {
  display: block;
  width: auto;
  max-width: none;
  height: auto;
  max-height: 130px;
}
.pfix-marquee.is-running {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.pfix-marquee.is-running .pfix-marquee__track {
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: max-content;
  will-change: transform;
}

/* "About Our Team" / "Request an Appointment" sections: the award badges, with the other
   GAF certifications added in the space around them. Three GAF badges on top, the two
   Inc. 5000 badges nested between and below them. */
.pfix-badges {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: start;
  justify-items: center;
  width: min(100%, 620px);
  margin: 8px auto 0;
  padding: 0;
  list-style: none;
}
.pfix-badges .pfix-badges__item {
  grid-column: span 2;
  /* the badge files are 120px wide: never larger, so they stay sharp */
  width: min(120px, 88%);
  margin: 0;
  padding: 0;
}
.pfix-badges .pfix-badges__item--inc {
  /* up into the notch between two GAF badges */
  margin-top: calc(min(120px, 88%) * -0.2);
}
@media (max-width: 575.98px) {
  /* less nesting where the badges sit closer together */
  .pfix-badges .pfix-badges__item--inc {
    margin-top: calc(min(120px, 88%) * -0.06);
  }
}
.pfix-badges .pfix-badges__item--inc:nth-child(4) {
  grid-column: 2 / span 2;
}
.pfix-badges .pfix-badges__item--inc:nth-child(5) {
  grid-column: 4 / span 2;
}
.pfix-badges .pfix-badges__item img {
  display: block;
  width: 100%;
  height: auto;
}

/* /service-areas/ hero: says where Panda works, with numbers, state chips and buttons, over
   a sharp drone photo of the Laurel office and the homes around it. The photo replaces a
   2000x450 strip of roof that was pinned to the screen (background-attachment: fixed), so
   it was blown up about 2x and showed only shingles on phones. It scrolls with the page
   and is darkened behind the text so the white type stays readable. */
.hero-section.pfix-sa-hero {
  position: relative;
  isolation: isolate;
  background-color: #1f262a;
  background-image: url("/wp-content/uploads/2025/07/DJI_20250722134520_0995_D.jpg");
  background-image: image-set(
    url("/wp-content/uploads/2025/07/DJI_20250722134520_0995_D.jpg.webp") type("image/webp"),
    url("/wp-content/uploads/2025/07/DJI_20250722134520_0995_D.jpg") type("image/jpeg")
  );
  background-size: cover;
  background-position: 50% 45%;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-blend-mode: normal;
}
.hero-section.pfix-sa-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(9, 13, 15, 0.86) 0%, rgba(9, 13, 15, 0.66) 40%, rgba(9, 13, 15, 0.18) 72%, rgba(9, 13, 15, 0.1) 100%);
  pointer-events: none;
}
.pfix-sa-hero .text-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  color: #ffffff;
  font-family: var(--robboto, Roboto), system-ui, sans-serif;
  text-align: left;
}
.pfix-sa-hero .text-section > * {
  max-width: 100%;
  margin: 0;
}
.pfix-sa-hero .pfix-sa-hero__eyebrow {
  color: #c3ea79;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.pfix-sa-hero .pfix-sa-hero__title {
  padding: 0;
  color: #ffffff;
  font-family: inherit;
  font-size: 46px;
  font-weight: 700;
  line-height: 1.1;
  text-align: left;
  text-wrap: balance;
}
.pfix-sa-hero .pfix-sa-hero__sub {
  padding: 0;
  color: #eef0ea;
  font-size: 19px;
  line-height: 1.55;
  text-align: left;
}

/* Numbers: one row on wide screens, two by two where the column is narrower. */
.pfix-sa-hero .pfix-sa-hero__stats {
  display: flex;
  flex-wrap: wrap;
  margin-top: 4px;
}
.pfix-sa-hero .pfix-sa-hero__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 20px;
  border-left: 1px solid rgba(255, 255, 255, 0.28);
}
.pfix-sa-hero .pfix-sa-hero__stat:first-child {
  padding-left: 0;
  border-left: 0;
}
.pfix-sa-hero .pfix-sa-hero__stat b {
  color: #ffffff;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.pfix-sa-hero .pfix-sa-hero__stat span {
  color: #d4dacb;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pfix-sa-hero .pfix-sa-hero__stat .pfix-sa-hero__star {
  color: #f9b800;
  font-size: inherit;
  letter-spacing: 0;
}

/* State chips: each one glides down to the map and zooms it to that state (site-fixes.js). */
.pfix-sa-hero .pfix-sa-hero__areas {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
.pfix-sa-hero .pfix-sa-hero__label {
  margin: 0;
  color: #d4dacb;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pfix-sa-hero .pfix-sa-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
.pfix-sa-hero a.pfix-sa-hero__chip,
.pfix-sa-hero a.pfix-sa-hero__chip:hover {
  display: inline-flex;
  flex: none;
  align-items: baseline;
  gap: 6px;
  padding: 8px 13px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
}
.pfix-sa-hero a.pfix-sa-hero__chip:hover {
  background: rgba(255, 255, 255, 0.24);
}
.pfix-sa-hero a.pfix-sa-hero__chip span {
  color: #c3ea79;
  font-variant-numeric: tabular-nums;
}

/* Call and map buttons. */
.pfix-sa-hero .pfix-sa-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.pfix-sa-hero a.pfix-sa-hero__btn,
.pfix-sa-hero a.pfix-sa-hero__btn:hover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 24px;
  border: 2px solid transparent;
  border-radius: 30px;
  color: #ffffff;
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.pfix-sa-hero a.pfix-sa-hero__btn svg {
  flex: none;
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.pfix-sa-hero a.pfix-sa-hero__btn--call {
  background: #ff6600;
}
.pfix-sa-hero a.pfix-sa-hero__btn--call:hover {
  background: #e65c00;
}
.pfix-sa-hero a.pfix-sa-hero__btn--map {
  border-color: rgba(255, 255, 255, 0.75);
  background: transparent;
}
.pfix-sa-hero a.pfix-sa-hero__btn--map:hover {
  background: rgba(255, 255, 255, 0.12);
}
.pfix-sa-hero .pfix-sa-hero__short {
  display: none;
}
.pfix-sa-hero a.pfix-sa-hero__chip:focus-visible,
.pfix-sa-hero a.pfix-sa-hero__btn:focus-visible {
  outline: 3px solid #c3ea79;
  outline-offset: 2px;
}

@media (min-width: 1200px) {
  .pfix-sa-hero .text-section {
    width: 560px;
  }
}
/* Side by side in the narrower container: leave a gap before the form (the site's own
   493px column ends right where the form starts). */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .pfix-sa-hero .text-section {
    width: 456px;
  }
  .pfix-sa-hero .text-section .pfix-sa-hero__title {
    font-size: 38px;
  }
}
@media (max-width: 1199.98px) {
  .pfix-sa-hero .pfix-sa-hero__title {
    font-size: 40px;
  }
  .pfix-sa-hero .pfix-sa-hero__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 0;
    width: 100%;
  }
  .pfix-sa-hero .pfix-sa-hero__stat:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }
}
/* Columns stacked: the text above the form, darkened evenly. The text column takes the
   container's width (centred in it as before) instead of its content's, so the row of
   chips that scrolls sideways on phones can't make it wider than the screen. */
@media (max-width: 1023.98px) {
  .hero-section.pfix-sa-hero::before {
    background: linear-gradient(180deg, rgba(9, 13, 15, 0.82) 0%, rgba(9, 13, 15, 0.62) 55%, rgba(9, 13, 15, 0.5) 100%);
  }
  .pfix-sa-hero .hero-text-col {
    align-self: stretch;
    min-width: 0;
    max-width: 100%;
  }
  .pfix-sa-hero .text-section {
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
  }
}
@media (max-width: 767.98px) {
  .pfix-sa-hero .text-section {
    gap: 14px;
  }
  .pfix-sa-hero .pfix-sa-hero__title {
    font-size: 30px;
  }
  .pfix-sa-hero .pfix-sa-hero__sub {
    font-size: 16px;
    line-height: 1.5;
  }
  .pfix-sa-hero .pfix-sa-hero__stat b {
    font-size: 24px;
  }
  .pfix-sa-hero .pfix-sa-hero__stat span {
    font-size: 11px;
  }
  /* one row of chips that scrolls sideways */
  .pfix-sa-hero .pfix-sa-hero__chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .pfix-sa-hero .pfix-sa-hero__chips::-webkit-scrollbar {
    display: none;
  }
  .pfix-sa-hero .pfix-sa-hero__ctas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }
  .pfix-sa-hero a.pfix-sa-hero__btn,
  .pfix-sa-hero a.pfix-sa-hero__btn:hover {
    padding: 13px 10px;
    font-size: 15px;
  }
}
/* Narrow phones: "Call us" on the button (the number is still read out). */
@media (max-width: 479.98px) {
  .pfix-sa-hero .pfix-sa-hero__long {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .pfix-sa-hero .pfix-sa-hero__short {
    display: inline;
  }
}

/* Home hero: the award badges picture between two white lines. Above phone size it kept a
   fixed 562 px width in the 260 px column the lines mark (off the right of the screen on
   tablets, under the form on small laptops). The lines and the picture now share one
   width, no wider than the column, as they already do on phones. */
@media (min-width: 768px) {
  .logo-container.pfix-hero-awards {
    width: 100%;
    max-width: 562px;
  }
}
/* beside the form: a little space before it */
@media (min-width: 1024px) {
  .logo-container.pfix-hero-awards {
    width: calc(100% - 32px);
  }
}
.logo-container.pfix-hero-awards > .Flex-image {
  width: 100%;
  max-width: 100%;
}

/* Home hero video (.pfix-hero-video): a still of a Panda job fills the hero, the YouTube
   video fades in over it once it is playing (site-fixes.js adds .is-playing), so YouTube's
   spinner, play button and "Video unavailable" screen never show; a short buffering blip
   waits before fading. The overlay sits above the video (it was under it, so bright frames
   washed out the heading), darkest behind the heading and lighter where the form is. */
.hero > .pfix-hero-video {
  background: #0a0e0b;
}
.pfix-hero-video > picture.pfix-hero-video__poster {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.pfix-hero-video > picture.pfix-hero-video__poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}
.pfix-hero-video > .video > div {
  z-index: 1;
}
.pfix-hero-video iframe {
  opacity: 0;
  transition: opacity 0.8s ease 0.4s;
}
.pfix-hero-video.is-playing iframe {
  opacity: 1;
  transition-delay: 0s;
}
.pfix-hero-video > .video-overlay {
  z-index: 2;
  width: 100%;
  background: linear-gradient(90deg, rgba(10, 14, 11, 0.86) 0%, rgba(10, 14, 11, 0.72) 38%, rgba(10, 14, 11, 0.42) 68%, rgba(10, 14, 11, 0.34) 100%);
}
.hero > .pfix-hero-video ~ * .hero-text-col h1 {
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}
.hero > .pfix-hero-video ~ * .hero-text-col p {
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}
/* Columns stacked: the text above the form, darkened evenly. */
@media (max-width: 1023.98px) {
  .pfix-hero-video > .video-overlay {
    background: linear-gradient(180deg, rgba(10, 14, 11, 0.82) 0%, rgba(10, 14, 11, 0.66) 50%, rgba(10, 14, 11, 0.58) 100%);
  }
}
/* No moving background for people who prefer reduced motion: the still stays. */
@media (prefers-reduced-motion: reduce) {
  .pfix-hero-video iframe {
    visibility: hidden;
  }
}
/* Blocks with a fixed desktop width (1143 px rows, the 1198 px blog article) in a column
   that is only 960 px wide at 1120–1199 px: no wider than the column. (!important: the
   rows also have their own max-width.) */
.pfix-fit {
  max-width: 100% !important;
}
/* "What Makes Panda the Best?" (home page, site-fixes.mjs "why panda"): three rows under a
   dark rule, each claim on the left and what backs it up on the right: the crew at work, the
   partner brands' logos and the GAF badges, the last two in hairline grids. The photo and the
   logos carry the colour; nothing moves on hover, as nothing in it is a link. Below 768 px
   each claim sits above its proof. */
h3.pfix-best-label {
  margin: 0;
  padding: clamp(32px, 4.5vw, 52px) 0 20px;
  color: #1a2418;
  font-family: var(--robboto, Roboto), system-ui, sans-serif;
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.pfix-proof {
  --pfix-proof-rule: #e2e5dd;
  width: 100%;
  margin: 0;
  border-top: 2px solid #1a2418;
  font-family: var(--robboto, Roboto), system-ui, sans-serif;
}
.pfix-proof *,
.pfix-proof *::before,
.pfix-proof *::after {
  box-sizing: border-box;
}
.pfix-proof__row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  padding: clamp(28px, 3.4vw, 44px) 0;
}
.pfix-proof__row + .pfix-proof__row {
  border-top: 1px solid var(--pfix-proof-rule);
}
.pfix-proof h4.pfix-proof__title {
  margin: 0 0 12px;
  padding: 0;
  color: #1a2418;
  font-family: inherit;
  font-size: clamp(20px, 1.9vw, 24px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.008em;
  text-align: left;
  text-wrap: balance;
}
.pfix-proof p.pfix-proof__text {
  max-width: 42ch;
  margin: 0;
  padding: 0;
  color: #485244;
  font-size: 16.5px;
  line-height: 1.65;
  text-align: left;
}
.pfix-proof__evidence {
  min-width: 0;
}
/* The crew at work: a wide crop that keeps the roofers on the roof and the truck. */
.pfix-proof figure.pfix-proof__photo {
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
  background: #dfe3da;
  aspect-ratio: 16 / 7.5;
}
.pfix-proof__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}
/* Logos and badges: cells divided by 1 px hairlines (the list's colour showing through the
   gaps). (!important: the site's stylesheet indents every list, makes its items white list
   items, and stretches every picture to the height of its box.) */
.pfix-proof ul.pfix-proof__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid var(--pfix-proof-rule);
  border-radius: 10px;
  background: var(--pfix-proof-rule);
  list-style: none;
}
.pfix-proof ul.pfix-proof__grid > li {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: #ffffff;
  color: #1a2418 !important;
  list-style: none;
}
.pfix-proof ul.pfix-proof__grid > li::before,
.pfix-proof ul.pfix-proof__grid > li::marker {
  content: none;
}
.pfix-proof__grid picture {
  display: contents;
}
.pfix-proof ul.pfix-proof__logos > li {
  height: 96px;
  padding: 0 18px;
}
.pfix-proof .pfix-proof__logos img {
  display: block;
  width: auto;
  max-width: 82%;
  height: var(--h, 30px) !important;
  object-fit: contain;
}
.pfix-proof ul.pfix-proof__badges > li {
  flex-direction: column;
  gap: 10px;
  padding: 20px 12px 16px;
}
.pfix-proof .pfix-proof__badges img {
  display: block;
  width: 92px;
  max-width: 100%;
  height: auto !important;
}
.pfix-proof__badges span {
  color: #1a2418;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}
/* Tablets: the claim keeps a little more room. */
@media (max-width: 991.98px) {
  .pfix-proof__row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  }
  .pfix-proof ul.pfix-proof__logos > li {
    height: 80px;
    padding: 0 12px;
  }
  .pfix-proof .pfix-proof__logos img {
    height: calc(var(--h, 30px) * 0.82) !important;
  }
  .pfix-proof .pfix-proof__badges img {
    width: 76px;
  }
}
/* Phones: each claim above its proof. */
@media (max-width: 767.98px) {
  .pfix-proof__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding: 26px 0;
  }
  .pfix-proof p.pfix-proof__text {
    max-width: none;
    font-size: 16px;
  }
  .pfix-proof figure.pfix-proof__photo {
    aspect-ratio: 16 / 9;
  }
  .pfix-proof ul.pfix-proof__logos > li {
    height: 72px;
  }
  .pfix-proof ul.pfix-proof__badges > li {
    padding: 16px 8px 14px;
  }
  .pfix-proof .pfix-proof__badges img {
    width: 64px;
  }
  .pfix-proof__badges span {
    font-size: 12.5px;
  }
}
@media (max-width: 419.98px) {
  .pfix-proof ul.pfix-proof__logos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Blog posts and offer pages: lists in the article were white on white (the site's stylesheet
   sets ul, ul li { color: #fff !important }, which outranks its own li { color: #000
   !important }), so bullets showed with nothing beside them, on 11 pages. They now match the
   article's black text; links and coloured words in them keep their own colour. */
.Blog-detail .rich-text-blog li {
  color: #000000 !important;
}

/* A long word (an email address) wraps instead of running off a small phone's screen. */
.Blog-detail.pfix-fit {
  overflow-wrap: break-word;
}
/* Blog post heroes: the topic and date tags keep their 10 px right margin without it
   running off the smallest phones' screens when a tag fills its line. */
.text-section.pfix-fit {
  overflow-x: clip;
}
/* /roofing/residential/: the award badges picture is set 100 px in from the left, which
   ran it off the screen at 480–529 px; below 768 px it lines up with the text above it
   instead, as it already does below 480 px. */
@media (max-width: 767.98px) {
  .img-flex-logos.pfix-fit {
    margin-left: 0;
  }
}

/* The header at 1120–1199 px: its 960 px column was too narrow for the logo, menu and
   phone button in one row, so the button wrapped under the logo. The row uses the whole
   width there (it fits, as it does from 1200 px). */
@media (min-width: 1120px) and (max-width: 1199.98px) {
  .container.pfix-header-row {
    width: 100%;
    max-width: none;
    padding-right: 24px;
    padding-left: 24px;
  }
}
/* Header "Services" ▸ "Solar" (site-fixes.mjs): "Solar Panels" and "GAF Solar Shingles", each
   with a line under the label saying what it is. The line is smaller, lighter and not bold,
   and keeps its gray when the label turns green on hover (!important: the menu's colors are).
   Their flyout is as wide as the menu's other dropdowns at every size (it was 150 px at
   768–1199 px), so each line fits on one row. */
.main_menu .pfix-nav-hint {
  display: block;
  margin-top: 3px;
  color: #7c8577 !important;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}
@media (min-width: 768px) {
  .main_menu .ul .li .ul:has(.pfix-nav-hint) {
    width: 250px;
  }
}
/* Behind the menu button (up to 1024 px), "Solar Options" opens its page and its arrow opens
   the list of the two products (site-fixes.js): the arrow gets a 44 px tap area, set apart
   by a thin line. */
@media (max-width: 1024.98px) {
  .main_menu .has_dropdown > a[href="/solar-options/"] {
    align-items: stretch;
  }
  .main_menu .has_dropdown > a[href="/solar-options/"] > .oxy-html-code {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    margin: -10px -25px -10px 12px;
    border-left: 1px solid #e5e9df;
    cursor: pointer;
  }
}
/* On phones every list floats over what comes after it: a second-level list (Roofing's,
   Solar Options') covered the entries under its own (Gutters, Gutter Guards, Siding). It
   opens in place instead, pushing them down, set in a little on a pale tint. */
@media (max-width: 767.98px) {
  .main_menu .ul .li .ul .li > .ul {
    position: static;
    padding-left: 12px !important;
    background: #f7f9f2;
    box-shadow: none;
  }
}
/* From 768 to 1024 px the menu folds behind the menu button, but its lists keep the
   desktop styles (hidden until hovered, floating beside their entry) inside a menu that hides
   them, so none could be opened. A tapped entry's list (.pfix-open, site-fixes.js) shows in
   place under it, as on phones. */
@media (min-width: 768px) and (max-width: 1024.98px) {
  .main_menu .ul .li.pfix-open > .ul {
    display: block !important;
    position: static;
    width: 100%;
    margin-top: 0;
    padding-left: 15px;
    visibility: visible;
    opacity: 1;
    box-shadow: none;
  }
}

/* The header on phones (up to 768 px): a rule in every page stacked the header's row
   (.oxy-container-974-102 { display: block !important }), so the menu button sat under the
   logo, and the header was placed 46 px down, below a top bar of two lines (it is one). The
   header ended at 186 px while the page starts at 150 px, so it covered the top 36 px of every
   page: the top of the heading, on blog posts and the offer pages. The logo and the menu
   button are one row again (the opened menu still drops below them), the header sits right
   under the top bar, as on larger screens, and ends at 148 px. The menu button gets a
   44 px tap area. */
@media (max-width: 768px) {
  .oxy-container-974-100.nav {
    top: 32px !important;
  }
  .oxy-container-974-100.nav .oxy-container-974-102.row-flex {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center !important;
    justify-content: space-between !important;
  }
  .oxy-container-974-100.nav .row-flex > .Nav-Logo,
  .oxy-container-974-100.nav .row-flex > .mobile_btn {
    flex: 0 0 auto;
    width: auto;
  }
  .oxy-container-974-100.nav .mobile_btn .Mobile-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 22px;
    cursor: pointer;
  }
  .oxy-container-974-100.nav .row-flex > .main_menu {
    flex: 0 0 100%;
  }
}
/* /service-areas/ "Our Reliable Exterior Remodeling Services": a gliding row of photo
   cards, one per service page (the row moves with the logo row's script and eases to a
   stop under the mouse). Without JavaScript, or with reduced motion, the cards sit still
   in centred rows. */
.roofers-section.pfix-services {
  background: linear-gradient(180deg, #ffffff 0%, #f2f7e6 100%);
}
.pfix-services .roof-para p {
  max-width: 760px;
  margin-right: auto;
  margin-left: auto;
  color: #3b4238;
  text-align: center;
}
.pfix-marquee.pfix-marquee--cards {
  margin-top: 28px;
  padding: 10px 0 18px;
}
.pfix-marquee--cards .pfix-marquee__track {
  gap: 0;
  align-items: stretch;
}
.pfix-marquee--cards .pfix-marquee__item {
  display: flex;
  align-items: stretch;
  height: auto;
  padding: 0 11px;
}
.pfix-services a.pfix-svc,
.pfix-services a.pfix-svc:hover {
  display: flex;
  flex-direction: column;
  width: 296px;
  overflow: hidden;
  border: 1px solid #e3e9d6;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(17, 24, 14, 0.06), 0 8px 24px rgba(17, 24, 14, 0.07);
  color: #111111;
  font-family: var(--robboto, Roboto), system-ui, sans-serif;
  text-align: left;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.pfix-services a.pfix-svc:hover,
.pfix-services a.pfix-svc:focus-visible {
  transform: translateY(-4px);
  border-color: #9acd32;
  box-shadow: 0 2px 4px rgba(17, 24, 14, 0.06), 0 16px 34px rgba(17, 24, 14, 0.14);
}
.pfix-services a.pfix-svc:focus-visible {
  outline: 3px solid #5c8a12;
  outline-offset: 3px;
}
.pfix-svc .pfix-svc__media {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #e8eedc;
}
.pfix-marquee .pfix-marquee__item .pfix-svc__media img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.pfix-services a.pfix-svc:hover .pfix-svc__media img {
  transform: scale(1.05);
}
.pfix-svc .pfix-svc__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px 20px;
}
.pfix-svc .pfix-svc__group {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eef6dc;
  color: #4a7310;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pfix-svc .pfix-svc__title {
  margin: 2px 0 0;
  padding: 0;
  color: #111111;
  font-family: inherit;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}
.pfix-svc .pfix-svc__text {
  flex: 1;
  color: #4b5348;
  font-size: 15px;
  line-height: 1.55;
}
.pfix-svc .pfix-svc__more {
  margin-top: 4px;
  color: #4a7310;
  font-size: 15px;
  font-weight: 700;
}
.pfix-services .pfix-services__all {
  margin: 18px 0 0;
  text-align: center;
}
.pfix-services .pfix-services__all a,
.pfix-services .pfix-services__all a:hover {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 30px;
  background: #ff6600;
  color: #ffffff;
  font-family: var(--robboto, Roboto), system-ui, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
}
.pfix-services .pfix-services__all a:hover {
  background: #e65c00;
}
.pfix-services .pfix-services__all a:focus-visible {
  outline: 3px solid #5c8a12;
  outline-offset: 3px;
}
/* Still cards (no script, or reduced motion): centred rows with room between them; on
   phones one row to swipe through, instead of a column of cards several screens long. */
.pfix-marquee--cards:not(.is-running) .pfix-marquee__track {
  row-gap: 22px;
}
@media (max-width: 767.98px) {
  .pfix-marquee--cards:not(.is-running) {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 16px;
    scrollbar-width: none;
  }
  .pfix-marquee--cards:not(.is-running)::-webkit-scrollbar {
    display: none;
  }
  .pfix-marquee--cards:not(.is-running) .pfix-marquee__track {
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: max-content;
    padding: 0 8px;
  }
  .pfix-marquee--cards:not(.is-running) .pfix-marquee__item {
    scroll-snap-align: start;
  }
}
@media (max-width: 575.98px) {
  .pfix-services a.pfix-svc,
  .pfix-services a.pfix-svc:hover {
    width: 260px;
  }
  .pfix-marquee--cards .pfix-marquee__item {
    padding: 0 8px;
  }
}
/* /about/, /podcast/, /roofing/: the same row of photo cards in place of the icon-card
   slider, in that section's orange (the site's buttons and headings) instead of green. */
/* The intro's padding (Bootstrap's pb-3, !important) left a wide gap above the cards. */
.pfix-services--warm .Team-text-container,
.pfix-services--warm .Team-text-container p:last-child {
  margin-bottom: 0;
  padding-bottom: 0 !important;
}
.pfix-services--warm .pfix-marquee.pfix-marquee--cards {
  margin-top: 18px;
}
.pfix-services--warm a.pfix-svc,
.pfix-services--warm a.pfix-svc:hover {
  border-color: #f1e4da;
  box-shadow: 0 1px 2px rgba(40, 20, 8, 0.05), 0 8px 24px rgba(40, 20, 8, 0.07);
}
.pfix-services--warm a.pfix-svc:hover,
.pfix-services--warm a.pfix-svc:focus-visible {
  border-color: #f26924;
  box-shadow: 0 2px 4px rgba(40, 20, 8, 0.06), 0 16px 34px rgba(242, 105, 36, 0.18);
}
.pfix-services--warm a.pfix-svc:focus-visible,
.pfix-services--warm .pfix-services__all a:focus-visible {
  outline-color: #c2410c;
}
.pfix-services--warm .pfix-svc .pfix-svc__media {
  background: #f6ece4;
}
.pfix-services--warm .pfix-svc .pfix-svc__group {
  background: #fff0e6;
  color: #b23c0a;
}
.pfix-services--warm .pfix-svc .pfix-svc__more {
  color: #c2410c;
}
.pfix-services--warm a.pfix-svc .pfix-svc__more > span {
  display: inline-block;
  margin-left: 4px;
  transition: transform 0.25s ease;
}
.pfix-services--warm a.pfix-svc:hover .pfix-svc__more > span,
.pfix-services--warm a.pfix-svc:focus-visible .pfix-svc__more > span {
  transform: translateX(4px);
}
.pfix-services--warm .pfix-services__all a,
.pfix-services--warm .pfix-services__all a:hover {
  background: #f26924;
  box-shadow: 0 6px 16px rgba(242, 105, 36, 0.28);
}
.pfix-services--warm .pfix-services__all a:hover {
  background: #d9541a;
}
/* /gutters/ "East Coast Gutter Installations and Gutter Guards": on Panda orange, like the
   site's other orange bands, with the heading and line in white and the photo cards in white.
   (!important: the section is white by the page builder's class.) */
.Team-section.pfix-services--orange {
  background:
    radial-gradient(circle at 92% 10%, rgba(255, 255, 255, 0.14), transparent 38%),
    linear-gradient(120deg, #f26924 0%, #e2531a 100%) !important;
}
.pfix-services--orange .heading-2,
.pfix-services--orange .heading-2 * {
  color: #ffffff !important;
}
.pfix-services--orange .Team-text-container,
.pfix-services--orange .Team-text-container p {
  color: #fff6ef !important;
  font-weight: 500;
}
.pfix-services--orange a.pfix-svc,
.pfix-services--orange a.pfix-svc:hover {
  border-color: transparent;
  box-shadow: 0 16px 36px rgba(120, 40, 5, 0.22);
}
.pfix-services--orange a.pfix-svc:hover,
.pfix-services--orange a.pfix-svc:focus-visible {
  border-color: #ffffff;
  box-shadow: 0 20px 44px rgba(120, 40, 5, 0.3);
}
.pfix-services--orange a.pfix-svc:focus-visible {
  outline-color: #ffffff;
}
/* /services/, /solar/, /siding/, /gutters/, /commercial-roofing/: the same photo cards,
   standing still in a grid (three across, or a centred pair), each as tall as its row. */
.pfix-svc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin: 28px auto 0;
  padding: 0 0 8px;
}
.pfix-svc-grid.pfix-svc-grid--pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 880px;
}
.pfix-svc-grid .pfix-svc-grid__item {
  display: flex;
  min-width: 0;
}
.pfix-services .pfix-svc-grid a.pfix-svc,
.pfix-services .pfix-svc-grid a.pfix-svc:hover {
  width: 100%;
}
.pfix-svc-grid .pfix-svc .pfix-svc__media {
  aspect-ratio: 16 / 10;
}
.pfix-svc-grid .pfix-svc__media img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.pfix-services .pfix-svc-grid a.pfix-svc:hover .pfix-svc__media img {
  transform: scale(1.05);
}
.pfix-svc-grid .pfix-svc .pfix-svc__body {
  padding: 22px 24px 24px;
}
.pfix-svc-grid .pfix-svc .pfix-svc__title {
  margin-top: 0;
}
@media (max-width: 991.98px) {
  .pfix-svc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }
}
@media (max-width: 639.98px) {
  .pfix-svc-grid,
  .pfix-svc-grid.pfix-svc-grid--pair {
    grid-template-columns: minmax(0, 1fr);
    max-width: 440px;
    gap: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pfix-services a.pfix-svc,
  .pfix-marquee .pfix-marquee__item .pfix-svc__media img,
  .pfix-svc-grid .pfix-svc__media img {
    transition: none;
  }
  .pfix-services a.pfix-svc:hover,
  .pfix-services a.pfix-svc:hover .pfix-svc__media img,
  .pfix-services .pfix-svc-grid a.pfix-svc:hover .pfix-svc__media img,
  .pfix-services--warm a.pfix-svc:hover .pfix-svc__more > span,
  .pfix-services--warm a.pfix-svc:focus-visible .pfix-svc__more > span {
    transform: none;
  }
}

/* "About Our Team" (the lead-form block above the footer): white text on Panda lime was
   hard to read (about 1.7:1, the paragraphs also at 80% opacity). It sits on a charcoal
   green (Panda lime darkened) instead, about 11:1 for the paragraphs, with the lime kept
   for its button, and it stays distinct from the black footer below. */
.Request-Container.primary-bg.pfix-about {
  /* !important: an inline style on every page sets .primary-bg { background: … !important } */
  background-color: #1a2418 !important;
}
.pfix-about .local-text,
.pfix-about .local-text p {
  color: #d5dccb;
  opacity: 1;
}
.pfix-about .local-text a {
  color: #c3ea79;
}
.pfix-about .bde-button {
  --bde-button-custom-background-color: #9acd32;
  --bde-button-custom-background-color-hover: #b0dc5a;
  --bde-button-custom-text-color: #111827;
  --bde-button-custom-text-color-hover: #111827;
  --bde-button-custom-border-color: #9acd32;
  --bde-button-custom-border-color-hover: #b0dc5a;
}
.pfix-about .bde-button .button-atom--custom,
.pfix-about .bde-button .button-atom--custom .button-atom__text {
  color: var(--bde-button-custom-text-color);
}
.pfix-about .bde-button .button-atom--custom {
  background: var(--bde-button-custom-background-color);
}
.pfix-about .bde-button .button-atom--custom:hover {
  background: var(--bde-button-custom-background-color-hover);
  color: var(--bde-button-custom-text-color-hover);
}
.pfix-about .bde-button .button-atom--custom:focus-visible {
  outline: 3px solid #c3ea79;
  outline-offset: 3px;
}

/* Inc. 5000 awards section (/roofing/, /about/, /podcast/): one light band. The heading,
   paragraph and the two rankings the badges show sit on the left; the badges, on their
   own white ground, sit on a white card on the right. On /about/ and /podcast/ the wrapper
   painted lime with white swooshes (one ran through the paragraph); that is switched off. */
.service-section.awards-bg.pfix-awards-wrap {
  background-image: none !important;
  background-color: transparent !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.awards-section.pfix-awards {
  padding: 72px 0;
  background: linear-gradient(180deg, #f7faf0 0%, #eef6dc 100%);
  font-family: var(--robboto, Roboto), system-ui, sans-serif;
}
.pfix-awards .pfix-awards__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 56px;
  align-items: center;
}
.pfix-awards .pfix-awards__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.pfix-awards .pfix-awards__eyebrow {
  margin: 0;
  padding: 5px 12px;
  border-radius: 999px;
  background: #e1efc4;
  color: #4a7310;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pfix-awards .pfix-awards__title {
  margin: 14px 0 16px;
  padding: 0;
  color: #111827;
  font-family: inherit;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  text-wrap: balance;
}
.pfix-awards .pfix-awards__para {
  max-width: 62ch;
  margin: 0;
  color: #374151;
  font-size: 17px;
  line-height: 1.7;
  text-align: left;
}
.pfix-awards .pfix-awards__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  max-width: 560px;
  margin-top: 26px;
}
.pfix-awards .pfix-awards__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid #dfe9cb;
  border-radius: 14px;
  background: #ffffff;
}
.pfix-awards .pfix-awards__stat b {
  color: #4a7310;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.pfix-awards .pfix-awards__stat span {
  color: #4b5348;
  font-size: 14.5px;
  line-height: 1.45;
}
.pfix-awards .pfix-awards__badges {
  margin: 0;
  padding: 30px 26px;
  border: 1px solid #e3ebd3;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(26, 36, 24, 0.1);
}
.pfix-awards .pfix-awards__badges img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}
@media (max-width: 991.98px) {
  .awards-section.pfix-awards {
    padding: 52px 0;
  }
  .pfix-awards .pfix-awards__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }
  .pfix-awards .pfix-awards__title {
    font-size: 30px;
  }
  .pfix-awards .pfix-awards__badges {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
  }
}
@media (max-width: 575.98px) {
  .awards-section.pfix-awards {
    padding: 40px 0;
  }
  .pfix-awards .pfix-awards__title {
    font-size: 25px;
  }
  .pfix-awards .pfix-awards__para {
    font-size: 16px;
  }
  .pfix-awards .pfix-awards__stat {
    padding: 14px;
  }
  .pfix-awards .pfix-awards__stat b {
    font-size: 26px;
  }
  .pfix-awards .pfix-awards__badges {
    padding: 20px 16px;
  }
}

/* /siding/, /gutters/, /roofing/: the sections under the service cards (service-pages.mjs): siding
   types, signs it's time, what we check, how it works, questions and a call/estimate band.
   Roboto like the rest of the page; orange for actions, lime and charcoal green from the
   site's palette. */
.pfix-sp {
  --sp-ink: #14180f;
  --sp-text: #3f463a;
  --sp-muted: #5d6656;
  --sp-line: #e7e2d9;
  --sp-orange: #f26924;
  --sp-orange-ink: #c2410c;
  --sp-lime: #9acd32;
  --sp-dark: #1a2418;
  color: var(--sp-text);
  font-family: var(--robboto, Roboto), system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}
.pfix-sp *,
.pfix-sp *::before,
.pfix-sp *::after {
  box-sizing: border-box;
}
.pfix-sp .pfix-sp__sec {
  padding: clamp(48px, 7vw, 88px) 0;
}
.pfix-sp .pfix-sp__inner {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 20px;
}
.pfix-sp .pfix-sp__head {
  max-width: 760px;
  margin: 0 auto clamp(28px, 4vw, 44px);
  text-align: center;
}
.pfix-sp .pfix-sp__eyebrow {
  margin: 0 0 10px;
  color: var(--sp-orange-ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pfix-sp .pfix-sp__title {
  margin: 0;
  padding: 0;
  color: var(--sp-ink);
  font-family: inherit;
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.pfix-sp .pfix-sp__intro {
  margin: 14px 0 0;
  color: var(--sp-muted);
  font-size: 17px;
}
.pfix-sp h3 {
  margin: 0;
  padding: 0;
  color: var(--sp-ink);
  font-family: inherit;
  font-weight: 700;
  line-height: 1.25;
}
.pfix-sp p {
  margin: 0;
}
.pfix-sp a:focus-visible,
.pfix-sp summary:focus-visible {
  outline: 3px solid var(--sp-orange-ink);
  outline-offset: 3px;
  border-radius: 6px;
}
.pfix-sp svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* Ticked list (siding types, what we check). */
.pfix-sp .pfix-sp-list {
  display: grid;
  gap: 10px;
}
.pfix-sp .pfix-sp-list > div {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0;
  padding: 0;
  color: var(--sp-text);
}
.pfix-sp .pfix-sp-list svg {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  padding: 3px;
  border-radius: 50%;
  background: #eef7dc;
  color: #4a7310;
}
.pfix-sp .pfix-sp-list--big > div {
  font-size: 17px;
}
.pfix-sp .pfix-sp-link,
.pfix-sp .pfix-sp__note a,
.pfix-sp .pfix-sp-reads a {
  color: var(--sp-orange-ink);
  font-weight: 700;
  text-decoration: none;
}
.pfix-sp .pfix-sp-link:hover,
.pfix-sp .pfix-sp__note a:hover,
.pfix-sp .pfix-sp-reads a:hover {
  color: #9a3412;
  text-decoration: underline;
}

/* Siding types: two option cards side by side. */
.pfix-sp .pfix-sp__sec--types {
  background: linear-gradient(180deg, #fbf7f2 0%, #ffffff 100%);
}
.pfix-sp .pfix-sp-types {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  max-width: 980px;
  margin: 0 auto;
}
.pfix-sp .pfix-sp-type {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--sp-line);
  border-top: 4px solid var(--sp-orange);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(40, 20, 8, 0.05), 0 12px 32px rgba(40, 20, 8, 0.07);
}
.pfix-sp .pfix-sp-type + .pfix-sp-type {
  border-top-color: var(--sp-lime);
}
.pfix-sp .pfix-sp-type__top {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* (/solar/: an icon where a type has no logo.) */
.pfix-sp .pfix-sp-type__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #fff3ea;
  color: var(--sp-orange-ink);
}
.pfix-sp .pfix-sp-type + .pfix-sp-type .pfix-sp-type__icon {
  background: #f1f8e3;
  color: #4a7310;
}
.pfix-sp .pfix-sp-type__icon svg {
  width: 28px;
  height: 28px;
}
.pfix-sp .pfix-sp-type__logo img {
  display: block;
  width: auto;
  max-width: 180px;
  height: 34px;
  object-fit: contain;
  object-position: left center;
}
.pfix-sp .pfix-sp-type__name {
  font-size: 26px;
}
.pfix-sp .pfix-sp-type__name span {
  display: block;
  margin-top: 2px;
  color: var(--sp-muted);
  font-size: 15px;
  font-weight: 500;
}
.pfix-sp .pfix-sp-type__text {
  font-size: 17px;
}
.pfix-sp .pfix-sp-type .pfix-sp-list {
  flex: 1;
}
.pfix-sp .pfix-sp-type__best {
  padding: 12px 16px;
  border-radius: 12px;
  background: #fff3ea;
  color: var(--sp-ink);
}
.pfix-sp .pfix-sp-type + .pfix-sp-type .pfix-sp-type__best {
  background: #f1f8e3;
}
.pfix-sp .pfix-sp-type__best b {
  display: block;
  color: var(--sp-orange-ink);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pfix-sp .pfix-sp-type + .pfix-sp-type .pfix-sp-type__best b {
  color: #4a7310;
}
.pfix-sp .pfix-sp__note a {
  white-space: nowrap;
}
.pfix-sp .pfix-sp__note {
  margin-top: 28px;
  color: var(--sp-muted);
  text-align: center;
}
/* /solar/: the panels card says it is this page; the full comparison is a page of its own. */
.pfix-sp .pfix-sp-type__here {
  align-self: flex-start;
  padding: 6px 14px;
  border-radius: 999px;
  background: #fff3ea;
  color: var(--sp-orange-ink);
  font-size: 14px;
  font-weight: 700;
}
.pfix-sp .pfix-sp__more {
  margin-top: 22px;
  text-align: center;
}
.pfix-sp a.pfix-sp-btn--outline,
.pfix-sp a.pfix-sp-btn--outline:hover {
  border-color: var(--sp-ink);
  background: transparent;
  color: var(--sp-ink);
}
.pfix-sp a.pfix-sp-btn--outline:hover {
  background: var(--sp-ink);
  color: #ffffff;
}

/* Signs it's time: icon tiles. */
.pfix-sp .pfix-sp__sec--signs {
  background: #ffffff;
}
.pfix-sp .pfix-sp-signs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
/* Four cards (the commercial roof systems, the solar benefits): one row of four. */
@media (min-width: 1100px) {
  .pfix-sp .pfix-sp-signs:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 992px) and (max-width: 1099.98px) {
  .pfix-sp .pfix-sp-signs:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.pfix-sp .pfix-sp-sign {
  padding: 24px;
  border: 1px solid var(--sp-line);
  border-radius: 16px;
  background: #fffdfa;
}
.pfix-sp .pfix-sp-sign__icon {
  display: block;
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
  padding: 11px;
  border-radius: 12px;
  background: #fff0e6;
  color: var(--sp-orange-ink);
}
.pfix-sp .pfix-sp-sign h3 {
  margin-bottom: 6px;
  font-size: 19px;
}
.pfix-sp .pfix-sp-sign p {
  color: var(--sp-muted);
  font-size: 15.5px;
}
/* A card with a link (/commercial-roofing/'s buildings, to their projects): the links line
   up along the bottom of a row. */
.pfix-sp .pfix-sp-sign:has(> .pfix-sp-link) {
  display: flex;
  flex-direction: column;
}
.pfix-sp .pfix-sp-sign:has(> .pfix-sp-link) p {
  flex: 1;
}
.pfix-sp .pfix-sp-sign > .pfix-sp-link {
  margin-top: 16px;
  font-size: 15px;
}
/* /commercial-roofing/: the intro under "Commercial Roofing Installations" is three long
   sentences; in a readable column rather than the full width of the page. */
.pfix-sv-hero--commercial + .pfix-services .Team-text-container {
  max-width: 820px;
  margin-right: auto;
  margin-left: auto;
}
/* The buildings, in Panda lime, after the roof systems in orange. */
.pfix-sp #commercial-buildings .pfix-sp-sign__icon {
  background: #f1f8e3;
  color: #4a7310;
}
.pfix-sp .pfix-sp-signs__foot {
  max-width: 820px;
  margin: 32px auto 0;
  text-align: center;
}
.pfix-sp .pfix-sp-signs__foot > p:first-child {
  color: var(--sp-ink);
  font-size: 17px;
}
.pfix-sp .pfix-sp-reads {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  justify-content: center;
  margin-top: 12px;
  font-size: 15px;
}
.pfix-sp .pfix-sp-reads span {
  color: var(--sp-muted);
}

/* What we check (gutters): photo beside a ticked list. */
.pfix-sp .pfix-sp__sec--check {
  background: #f6f8f1;
}
.pfix-sp .pfix-sp-check {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.pfix-sp .pfix-sp-check__media {
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 18px 40px rgba(17, 24, 14, 0.16);
  aspect-ratio: 4 / 3;
}
.pfix-sp .pfix-sp-check__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pfix-sp .pfix-sp-check .pfix-sp__head {
  margin: 0 0 22px;
  text-align: left;
}
.pfix-sp .pfix-sp-check .pfix-sp-link {
  display: inline-block;
  margin-top: 22px;
}

/* How it works: numbered steps on charcoal green. */
.pfix-sp .pfix-sp__sec--steps {
  background: var(--sp-dark);
}
.pfix-sp .pfix-sp__sec--steps .pfix-sp__title {
  color: #ffffff;
}
.pfix-sp .pfix-sp-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.pfix-sp .pfix-sp-step {
  position: relative;
  margin: 0;
  padding: 28px 24px 26px;
  border: 1px solid rgba(195, 234, 121, 0.18);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
}
.pfix-sp .pfix-sp-steps__n {
  display: grid;
  width: 44px;
  height: 44px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--sp-lime);
  color: #111827;
  font-size: 20px;
  font-weight: 700;
  place-items: center;
}
.pfix-sp .pfix-sp-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.pfix-sp .pfix-sp-steps h3 {
  margin-bottom: 8px;
  color: #ffffff;
  font-size: 20px;
}
.pfix-sp .pfix-sp-steps p {
  color: #d5dccb;
}

/* Questions: an accordion (details/summary, no script needed). */
.pfix-sp .pfix-sp__sec--faq {
  background: #ffffff;
}
.pfix-sp .pfix-sp-faq {
  display: grid;
  gap: 12px;
  max-width: 860px;
  margin: 0 auto;
}
.pfix-sp .pfix-sp-faq__item {
  border: 1px solid var(--sp-line);
  border-radius: 14px;
  background: #ffffff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.pfix-sp .pfix-sp-faq__item[open] {
  border-color: #f3c3a6;
  box-shadow: 0 8px 24px rgba(40, 20, 8, 0.07);
}
.pfix-sp .pfix-sp-faq summary {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  color: var(--sp-ink);
  font-size: 17.5px;
  font-weight: 700;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}
.pfix-sp .pfix-sp-faq summary::-webkit-details-marker {
  display: none;
}
.pfix-sp .pfix-sp-faq summary::after {
  content: '';
  flex: none;
  width: 12px;
  height: 12px;
  margin-right: 4px;
  border-right: 2.5px solid var(--sp-orange-ink);
  border-bottom: 2.5px solid var(--sp-orange-ink);
  transform: translateY(-3px) rotate(45deg);
  transition: transform 0.2s ease;
}
.pfix-sp .pfix-sp-faq__item[open] summary::after {
  transform: translateY(3px) rotate(-135deg);
}
.pfix-sp .pfix-sp-faq__item p {
  padding: 0 22px 20px;
  color: var(--sp-text);
}
.pfix-sp .pfix-sp-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 32px;
  align-items: center;
  justify-content: space-between;
  max-width: 960px;
  margin: clamp(40px, 5vw, 56px) auto 0;
  padding: clamp(26px, 3.4vw, 38px) clamp(24px, 4vw, 44px);
  border-radius: 22px;
  background: linear-gradient(120deg, #f26924 0%, #e2531a 100%);
  box-shadow: 0 18px 40px rgba(242, 105, 36, 0.28);
  color: #ffffff;
}
.pfix-sp .pfix-sp-cta__title {
  color: #ffffff;
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 700;
  line-height: 1.2;
}
.pfix-sp .pfix-sp-cta__text {
  margin-top: 4px;
  color: #fff3ea;
  font-size: 17px;
}
.pfix-sp .pfix-sp-cta__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.pfix-sp .pfix-sp-btn,
.pfix-sp .pfix-sp-btn:hover {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 22px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.pfix-sp .pfix-sp-btn svg {
  width: 18px;
  height: 18px;
}
.pfix-sp .pfix-sp-btn--primary,
.pfix-sp .pfix-sp-btn--primary:hover {
  background: #ffffff;
  color: var(--sp-orange-ink);
}
.pfix-sp .pfix-sp-btn--primary:hover {
  background: #fff3ea;
}
.pfix-sp .pfix-sp-btn--ghost,
.pfix-sp .pfix-sp-btn--ghost:hover {
  background: transparent;
  color: #ffffff;
}
.pfix-sp .pfix-sp-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.14);
}
.pfix-sp .pfix-sp-cta a:focus-visible {
  outline-color: #ffffff;
}

@media (max-width: 991.98px) {
  .pfix-sp .pfix-sp-signs,
  .pfix-sp .pfix-sp-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pfix-sp .pfix-sp-check {
    grid-template-columns: minmax(0, 1fr);
  }
  .pfix-sp .pfix-sp-check__media {
    max-width: 640px;
    aspect-ratio: 16 / 9;
  }
}
@media (max-width: 767.98px) {
  .pfix-sp .pfix-sp-types,
  .pfix-sp .pfix-sp-steps {
    grid-template-columns: minmax(0, 1fr);
  }
  .pfix-sp .pfix-sp-cta {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .pfix-sp .pfix-sp-cta__btns {
    flex-direction: column;
  }
}
@media (max-width: 575.98px) {
  .pfix-sp .pfix-sp-signs {
    grid-template-columns: minmax(0, 1fr);
  }
  .pfix-sp .pfix-sp__inner {
    padding: 0 16px;
  }
  .pfix-sp .pfix-sp-sign {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    column-gap: 14px;
    padding: 18px;
  }
  .pfix-sp .pfix-sp-sign__icon {
    grid-row: span 2;
    margin: 0;
  }
  .pfix-sp .pfix-sp-faq summary {
    padding: 16px 18px;
    font-size: 16.5px;
  }
  .pfix-sp .pfix-sp-faq__item p {
    padding: 0 18px 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pfix-sp .pfix-sp-faq__item,
  .pfix-sp .pfix-sp-faq summary::after {
    transition: none;
  }
}

/* Service estimate forms (service-forms.mjs): the site's own field and button styles
   (.input-field, .submit-btn, .name-row) with labels for screen readers, the questions
   about the job, and the "not switched on yet" message shown on submit. */
.pfix-lead {
  width: 100%;
  font-family: var(--robboto, Roboto), system-ui, sans-serif;
}
.pfix-lead .pfix-lead__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}
.pfix-lead .name-row {
  margin: 0;
}
.pfix-lead .pfix-lead__field {
  display: block;
  flex: 1;
  min-width: 0;
  margin: 0;
}
.pfix-lead .pfix-lead__field .input-field,
.pfix-lead .pfix-lead__question .input-field {
  width: 100%;
  margin: 0;
}
.pfix-lead .pfix-lead__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.pfix-lead .pfix-lead__question {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  color: #1f2937;
  font-size: 14px;
  font-weight: 600;
}
.pfix-lead .input-field[aria-invalid='true'] {
  outline: 2px solid #dc2626;
  outline-offset: 0;
}
.pfix-lead .pfix-lead__consent {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 2px 0 0;
  color: #4b5563;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.45;
  cursor: pointer;
}
.pfix-lead .pfix-lead__consent input {
  flex: none;
  width: 15px;
  height: 15px;
  margin: 1px 0 0;
  accent-color: #f26924;
}
.pfix-lead .pfix-lead__consent a {
  color: inherit;
  text-decoration: underline;
}
.pfix-lead .pfix-lead__error {
  margin: 0;
  padding: 8px 12px;
  border-radius: 8px;
  background: #fef2f2;
  color: #b91c1c;
  font-size: 14px;
  font-weight: 600;
}
.pfix-lead .submit-btn {
  width: 100%;
  margin-top: 4px;
}
.pfix-lead .pfix-lead__call {
  margin: 0;
  color: #374151;
  font-size: 14px;
  text-align: center;
}
.pfix-lead .pfix-lead__done {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border-radius: 14px;
  background: #fff7f1;
  color: #374151;
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
}
.pfix-lead .pfix-lead__done[hidden],
.pfix-lead .pfix-lead__form[hidden],
.pfix-lead .pfix-lead__error[hidden] {
  display: none;
}
.pfix-lead .pfix-lead__done:focus {
  outline: none;
}
.pfix-lead .pfix-lead__done p {
  margin: 0;
}
.pfix-lead .pfix-lead__done-title {
  color: #111827;
  font-size: 20px;
  font-weight: 700;
}
.pfix-lead a.pfix-lead__done-call,
.pfix-lead a.pfix-lead__done-call:hover {
  display: block;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
}
.form-card:has(.pfix-lead) .form-text-p {
  text-align: center;
}

/* /referrals/ (referrals-page.mjs): the Refer & Earn page. Roboto like the rest of the
   page; charcoal green and Panda lime from the site's palette, orange for the numbers. */
.pfix-rf {
  --rf-ink: #14180f;
  --rf-text: #3f463a;
  --rf-muted: #5d6656;
  --rf-line: #e4e8dc;
  --rf-bg: #f5f7ef;
  --rf-orange: #f26924;
  --rf-orange-ink: #c2410c;
  --rf-lime: #9acd32;
  --rf-lime-ink: #4d7c0f;
  --rf-dark: #1a2418;
  width: 100%;
  overflow: hidden;
  color: var(--rf-text);
  font-family: var(--robboto, Roboto), system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}
.pfix-rf *,
.pfix-rf *::before,
.pfix-rf *::after {
  box-sizing: border-box;
}
.pfix-rf p,
.pfix-rf h1,
.pfix-rf h2 {
  margin: 0;
  padding: 0;
  font-family: inherit;
}
.pfix-rf svg {
  display: block;
  flex: none;
}
.pfix-rf .pfix-rf__inner {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 20px;
}
.pfix-rf .pfix-rf__sec {
  padding: clamp(56px, 7vw, 96px) 0;
  scroll-margin-top: 140px;
}
.pfix-rf .pfix-rf__sec--tint {
  background: var(--rf-bg);
}
.pfix-rf .pfix-rf__head {
  max-width: 680px;
  margin: 0 auto clamp(30px, 4vw, 48px);
  text-align: center;
}
.pfix-rf .pfix-rf__eyebrow {
  margin: 0 0 10px;
  color: var(--rf-orange-ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pfix-rf .pfix-rf__eyebrow--light {
  color: var(--rf-lime);
}
.pfix-rf .pfix-rf__title {
  color: var(--rf-ink);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  line-height: 1.15;
}
.pfix-rf .pfix-rf__sub {
  margin-top: 14px;
  color: var(--rf-muted);
  font-size: 17px;
}

/* Store buttons, in the style of Apple's and Google's own badges. */
.pfix-rf .pfix-rf-stores {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.pfix-rf a.pfix-rf-store {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 178px;
  min-height: 56px;
  padding: 8px 20px 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 12px;
  background: #000;
  color: #fff;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pfix-rf a.pfix-rf-store:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
  color: #fff;
}
.pfix-rf a.pfix-rf-store:focus-visible {
  outline: 3px solid var(--rf-lime);
  outline-offset: 3px;
}
.pfix-rf a.pfix-rf-store svg {
  width: 26px;
  height: 26px;
}
.pfix-rf a.pfix-rf-store span {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  text-align: left;
}
.pfix-rf a.pfix-rf-store small {
  font-size: 11px;
  letter-spacing: 0.02em;
}
.pfix-rf a.pfix-rf-store small::first-letter {
  text-transform: uppercase;
}
.pfix-rf a.pfix-rf-store b {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Hero: charcoal green with a lime glow, the text beside a phone. */
.pfix-rf .pfix-rf-hero {
  position: relative;
  padding: clamp(48px, 7vw, 96px) 0;
  background:
    radial-gradient(circle at 82% 30%, rgba(154, 205, 50, 0.28), transparent 46%),
    radial-gradient(circle at 10% 110%, rgba(242, 105, 36, 0.18), transparent 40%),
    var(--rf-dark);
  color: #e8eddf;
}
.pfix-rf .pfix-rf-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.pfix-rf .pfix-rf-hero__title {
  color: #fff;
  font-size: clamp(32px, 4.6vw, 54px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.pfix-rf .pfix-rf-hero__sub {
  max-width: 560px;
  margin: 18px 0 28px;
  color: #d3dbc6;
  font-size: clamp(17px, 1.6vw, 19px);
}
.pfix-rf .pfix-rf-hero__note {
  margin-top: 18px;
  color: #aab59c;
  font-size: 14px;
}
.pfix-rf .pfix-rf-hero__media {
  display: flex;
  justify-content: center;
}

/* The phone (decorative): the Panda logo and three reward notifications. */
.pfix-rf .pfix-rf-phone {
  width: min(300px, 100%);
  padding: 12px;
  border-radius: 46px;
  background: #0b0f09;
  box-shadow: 0 0 0 2px #3a4434, 0 30px 60px rgba(0, 0, 0, 0.45);
  transform: rotate(3deg);
}
.pfix-rf .pfix-rf-phone__screen {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 44px 14px 22px;
  border-radius: 36px;
  background: linear-gradient(180deg, #f7faf0 0%, #e9f2d6 100%);
}
.pfix-rf .pfix-rf-phone__notch {
  position: absolute;
  top: 12px;
  left: 50%;
  width: 92px;
  height: 22px;
  border-radius: 999px;
  background: #0b0f09;
  transform: translateX(-50%);
}
.pfix-rf img.pfix-rf-phone__logo {
  width: 128px;
  height: auto;
  margin: 0;
}
.pfix-rf .pfix-rf-phone__label {
  margin-bottom: 4px;
  color: var(--rf-ink);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pfix-rf .pfix-rf-phone__note {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(20, 24, 15, 0.1);
  color: var(--rf-muted);
  font-size: 12px;
  line-height: 1.3;
}
.pfix-rf .pfix-rf-phone__note i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--rf-lime);
  color: var(--rf-dark);
  flex: none;
}
.pfix-rf .pfix-rf-phone__note i svg {
  width: 16px;
  height: 16px;
}
.pfix-rf .pfix-rf-phone__note > span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.pfix-rf .pfix-rf-phone__note b {
  color: var(--rf-ink);
  font-size: 13px;
}
.pfix-rf .pfix-rf-phone__note em {
  margin-left: auto;
  color: var(--rf-lime-ink);
  font-size: 16px;
  font-style: normal;
  font-weight: 800;
}

.pfix-rf .pfix-rf-phone__note--bonus {
  background: var(--rf-dark);
  color: #c4ceb6;
}
.pfix-rf .pfix-rf-phone__note--bonus b {
  color: #fff;
}
.pfix-rf .pfix-rf-phone__note--bonus em {
  color: var(--rf-lime);
}

/* QR codes for the two stores, shown only on computers (a mouse and a wide screen): on a
   phone the store buttons are the way in. */
.pfix-rf .pfix-rf-qr {
  display: none;
}
@media (min-width: 861px) and (hover: hover) and (pointer: fine) {
  .pfix-rf .pfix-rf-qr {
    display: flex;
  }
}
.pfix-rf .pfix-rf-qr {
  align-items: center;
  gap: 20px;
  width: fit-content;
  max-width: 100%;
  margin-top: 20px;
  padding: 14px 18px 14px 20px;
  border-radius: 18px;
}
.pfix-rf .pfix-rf-qr--hero {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: #d3dbc6;
}
.pfix-rf .pfix-rf-qr--cta {
  margin: 22px auto 0;
  background: rgba(255, 255, 255, 0.45);
  color: var(--rf-dark);
  text-align: left;
}
.pfix-rf .pfix-rf-qr__text {
  max-width: 150px;
  font-size: 14px;
  line-height: 1.45;
}
.pfix-rf .pfix-rf-qr__text b {
  display: block;
  margin-bottom: 2px;
  font-size: 16px;
}
.pfix-rf .pfix-rf-qr--hero .pfix-rf-qr__text b {
  color: #fff;
}
.pfix-rf .pfix-rf-qr__codes {
  display: flex;
  gap: 14px;
}
.pfix-rf .pfix-rf-qr__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.pfix-rf svg.pfix-rf-qr__code {
  width: 112px;
  height: 112px;
  border-radius: 10px;
  background: #fff;
}
.pfix-rf .pfix-rf-qr__item figcaption {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1.2;
}
.pfix-rf .pfix-rf-qr__item figcaption svg {
  width: 16px;
  height: 16px;
}
.pfix-rf .pfix-rf-qr__item figcaption span {
  display: flex;
  flex-direction: column;
}
.pfix-rf .pfix-rf-qr__item figcaption b {
  font-size: 13px;
}
.pfix-rf .pfix-rf-qr--hero .pfix-rf-qr__item figcaption b {
  color: #fff;
}

/* What you can earn. */
.pfix-rf .pfix-rf-rewards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.pfix-rf .pfix-rf-reward {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 26px 22px;
  border: 1px solid var(--rf-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(20, 24, 15, 0.05);
}
.pfix-rf .pfix-rf-reward__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 8px;
  border-radius: 12px;
  background: #eef6dc;
  color: var(--rf-lime-ink);
}
.pfix-rf .pfix-rf-reward__icon svg {
  width: 24px;
  height: 24px;
}
.pfix-rf .pfix-rf-reward__amount {
  color: var(--rf-orange-ink);
  font-size: clamp(36px, 3.6vw, 44px);
  font-weight: 800;
  line-height: 1;
}
.pfix-rf .pfix-rf-reward__title {
  color: var(--rf-ink);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}
.pfix-rf .pfix-rf-reward__text {
  color: var(--rf-muted);
  font-size: 15px;
}
.pfix-rf .pfix-rf-reward--bonus {
  border-color: var(--rf-dark);
  background: var(--rf-dark);
  color: #d3dbc6;
}
.pfix-rf .pfix-rf-reward--bonus .pfix-rf-reward__icon {
  background: rgba(154, 205, 50, 0.18);
  color: var(--rf-lime);
}
.pfix-rf .pfix-rf-reward--bonus .pfix-rf-reward__amount {
  color: var(--rf-lime);
}
.pfix-rf .pfix-rf-reward--bonus .pfix-rf-reward__title {
  color: #fff;
}
.pfix-rf .pfix-rf-reward--bonus .pfix-rf-reward__text {
  color: #c4ceb6;
}
.pfix-rf .pfix-rf-example {
  max-width: 760px;
  margin: 28px auto 0;
  padding: 16px 20px;
  border-radius: 14px;
  background: #fff4ec;
  color: var(--rf-text);
  font-size: 16px;
  text-align: center;
}
.pfix-rf .pfix-rf-example b {
  color: var(--rf-ink);
}

/* How it works. */
.pfix-rf .pfix-rf-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  counter-reset: none;
}
.pfix-rf .pfix-rf-step {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px 24px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--rf-line);
}
.pfix-rf .pfix-rf-step__num {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: var(--rf-lime);
  color: var(--rf-dark);
  font-size: 18px;
  font-weight: 800;
}
.pfix-rf .pfix-rf-step__title {
  color: var(--rf-ink);
  font-size: 19px;
  line-height: 1.3;
}
.pfix-rf .pfix-rf-step__text {
  color: var(--rf-muted);
  font-size: 15.5px;
}
.pfix-rf .pfix-rf-step__text strong {
  color: var(--rf-ink);
  letter-spacing: 0.04em;
}

/* Closing band. */
.pfix-rf .pfix-rf-cta {
  padding: clamp(52px, 6vw, 80px) 0;
  background: var(--rf-lime);
  color: var(--rf-dark);
}
.pfix-rf .pfix-rf-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.pfix-rf .pfix-rf-cta__title {
  color: var(--rf-dark);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 800;
  line-height: 1.15;
}
.pfix-rf .pfix-rf-cta__sub {
  margin: 10px 0 26px;
  font-size: 18px;
}
.pfix-rf .pfix-rf-stores--cta {
  justify-content: center;
}
.pfix-rf .pfix-rf-cta__call {
  margin-top: 22px;
  font-size: 15px;
}
.pfix-rf .pfix-rf-cta__call a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--rf-dark);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pfix-rf .pfix-rf-cta__call a svg {
  width: 16px;
  height: 16px;
}
.pfix-rf .pfix-rf-cta__call a:focus-visible {
  outline: 3px solid var(--rf-dark);
  outline-offset: 3px;
}

@media (max-width: 1024px) {
  .pfix-rf .pfix-rf-rewards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 860px) {
  .pfix-rf .pfix-rf-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    text-align: center;
  }
  .pfix-rf .pfix-rf-hero__sub {
    margin-left: auto;
    margin-right: auto;
  }
  .pfix-rf .pfix-rf-stores--hero {
    justify-content: center;
  }
  .pfix-rf .pfix-rf-phone {
    width: min(260px, 100%);
  }
  .pfix-rf .pfix-rf-steps {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 767px) {
  /* !important: the site's stylesheet sets every h1 on phones to 22px !important */
  .pfix-rf .pfix-rf-hero__title {
    font-size: 32px !important;
  }
}
@media (max-width: 520px) {
  .pfix-rf .pfix-rf-rewards {
    grid-template-columns: minmax(0, 1fr);
  }
  .pfix-rf .pfix-rf-stores {
    flex-direction: column;
    align-items: stretch;
  }
  .pfix-rf a.pfix-rf-store {
    justify-content: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pfix-rf a.pfix-rf-store {
    transition: none;
  }
  .pfix-rf a.pfix-rf-store:hover {
    transform: none;
  }
}

/* /offers/ (offers-page.mjs): the hero and the sections that replace the five flyer bands.
   Roboto like the rest of the page; orange for actions, lime and charcoal green from the
   site's palette, the same look as the service page sections (.pfix-sp).

   Hero: a Panda GAF solar roof (dark shingles, white dormers) in place of the drone photo
   /service-areas/ uses, which was pinned to the screen (background-attachment: fixed) and
   so blown up. It scrolls with the page and is darkened behind the text. */
.hero-section.pfix-of-hero {
  position: relative;
  isolation: isolate;
  background-color: #1d2420;
  background-image: url("/wp-content/uploads/2025/05/item_19ea236e-ea45-4c67-b09d-85ae2170d35c.jpg");
  background-image: image-set(
    url("/wp-content/uploads/2025/05/item_19ea236e-ea45-4c67-b09d-85ae2170d35c.jpg.webp") type("image/webp"),
    url("/wp-content/uploads/2025/05/item_19ea236e-ea45-4c67-b09d-85ae2170d35c.jpg") type("image/jpeg")
  );
  background-size: cover;
  background-position: 62% 40%;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-blend-mode: normal;
}
.hero-section.pfix-of-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(10, 14, 11, 0.9) 0%, rgba(10, 14, 11, 0.72) 38%, rgba(10, 14, 11, 0.25) 70%, rgba(10, 14, 11, 0.12) 100%),
    linear-gradient(0deg, rgba(10, 14, 11, 0.35) 0%, rgba(10, 14, 11, 0) 40%);
  pointer-events: none;
}
.pfix-of-hero .text-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  color: #ffffff;
  font-family: var(--robboto, Roboto), system-ui, sans-serif;
  text-align: left;
}
.pfix-of-hero .text-section > * {
  max-width: 100%;
  margin: 0;
}
.pfix-of-hero .pfix-of-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #c3ea79;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.pfix-of-hero .pfix-of-hero__eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.pfix-of-hero .pfix-of-hero__title {
  padding: 0;
  color: #ffffff;
  font-family: inherit;
  font-size: 50px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-align: left;
  text-wrap: balance;
}
.pfix-of-hero .pfix-of-hero__sub {
  padding: 0;
  color: #eef0ea;
  font-size: 19px;
  line-height: 1.55;
  text-align: left;
}

/* The two offers as tickets: amount on top, what it's for below, a notch on each side. */
.pfix-of-hero .pfix-of-hero__deals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 470px;
  margin-top: 4px;
}
.pfix-of-hero a.pfix-of-hero__deal,
.pfix-of-hero a.pfix-of-hero__deal:hover {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px 14px 20px;
  border: 1px dashed rgba(195, 234, 121, 0.7);
  border-radius: 14px;
  background: rgba(13, 18, 14, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #e6ebdf;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.pfix-of-hero a.pfix-of-hero__deal:hover {
  background: rgba(13, 18, 14, 0.72);
  transform: translateY(-2px);
}
.pfix-of-hero .pfix-of-hero__deal b {
  color: #ffffff;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
}
.pfix-of-hero .pfix-of-hero__deal b span {
  color: #c3ea79;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* "See the offers" and call buttons. */
.pfix-of-hero .pfix-of-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.pfix-of-hero a.pfix-of-hero__btn,
.pfix-of-hero a.pfix-of-hero__btn:hover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 24px;
  border: 2px solid transparent;
  border-radius: 30px;
  color: #ffffff;
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.pfix-of-hero a.pfix-of-hero__btn svg {
  flex: none;
  width: 18px;
  height: 18px;
}
.pfix-of-hero a.pfix-of-hero__btn--primary {
  background: #f26924;
}
.pfix-of-hero a.pfix-of-hero__btn--primary:hover {
  background: #e2531a;
}
.pfix-of-hero a.pfix-of-hero__btn--ghost {
  border-color: rgba(255, 255, 255, 0.75);
  background: transparent;
}
.pfix-of-hero a.pfix-of-hero__btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
}
.pfix-of-hero .pfix-of-hero__short {
  display: none;
}
.pfix-of-hero a.pfix-of-hero__deal:focus-visible,
.pfix-of-hero a.pfix-of-hero__btn:focus-visible {
  outline: 3px solid #c3ea79;
  outline-offset: 2px;
}
@media (min-width: 1200px) {
  .pfix-of-hero .text-section {
    width: 570px;
  }
}
/* Side by side in the narrower container: leave a gap before the form. */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .pfix-of-hero .text-section {
    width: 456px;
  }
  .pfix-of-hero .text-section .pfix-of-hero__title {
    font-size: 40px;
  }
}
/* Columns stacked: the text above the form, darkened evenly. */
@media (max-width: 1023.98px) {
  .hero-section.pfix-of-hero::before {
    background: linear-gradient(180deg, rgba(10, 14, 11, 0.84) 0%, rgba(10, 14, 11, 0.66) 55%, rgba(10, 14, 11, 0.55) 100%);
  }
  .pfix-of-hero .hero-text-col {
    align-self: stretch;
    min-width: 0;
    max-width: 100%;
  }
  .pfix-of-hero .text-section {
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
  }
  .pfix-of-hero .pfix-of-hero__title {
    font-size: 42px;
  }
}
@media (max-width: 767.98px) {
  .pfix-of-hero .text-section {
    gap: 14px;
    padding-top: 8px;
  }
  /* !important: the site's stylesheet sets every h1 on phones to 22px !important */
  .pfix-of-hero .pfix-of-hero__title {
    font-size: 32px !important;
  }
  .pfix-of-hero .pfix-of-hero__sub {
    font-size: 16px;
    line-height: 1.5;
  }
  .pfix-of-hero .pfix-of-hero__deal b {
    font-size: 26px;
  }
  .pfix-of-hero .pfix-of-hero__deals {
    max-width: none;
  }
  .pfix-of-hero .pfix-of-hero__ctas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }
  .pfix-of-hero a.pfix-of-hero__btn,
  .pfix-of-hero a.pfix-of-hero__btn:hover {
    padding: 13px 10px;
    font-size: 15px;
  }
}
/* Narrow phones: "Call us" on the button (the number is still read out). */
@media (max-width: 479.98px) {
  .pfix-of-hero .pfix-of-hero__long {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .pfix-of-hero .pfix-of-hero__short {
    display: inline;
  }
  .pfix-of-hero a.pfix-of-hero__deal,
  .pfix-of-hero a.pfix-of-hero__deal:hover {
    padding: 12px 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pfix-of-hero a.pfix-of-hero__deal {
    transition: none;
  }
  .pfix-of-hero a.pfix-of-hero__deal:hover {
    transform: none;
  }
}

/* The sections under the hero. */
.pfix-of {
  --of-ink: #14180f;
  --of-text: #3f463a;
  --of-muted: #5d6656;
  --of-line: #e4e8dc;
  --of-bg: #f5f7ef;
  --of-orange: #f26924;
  --of-orange-ink: #c2410c;
  --of-lime: #9acd32;
  --of-lime-ink: #4d7c0f;
  --of-dark: #1a2418;
  color: var(--of-text);
  font-family: var(--robboto, Roboto), system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}
.pfix-of *,
.pfix-of *::before,
.pfix-of *::after {
  box-sizing: border-box;
}
.pfix-of .pfix-of__sec {
  padding: clamp(56px, 7vw, 96px) 0;
  scroll-margin-top: 140px;
}
.pfix-of .pfix-of__inner {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 20px;
}
.pfix-of .pfix-of__head {
  max-width: 720px;
  margin: 0 auto clamp(30px, 4vw, 48px);
  text-align: center;
}
.pfix-of .pfix-of__eyebrow {
  margin: 0 0 10px;
  color: var(--of-orange-ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pfix-of .pfix-of__title {
  margin: 0;
  padding: 0;
  color: var(--of-ink);
  font-family: inherit;
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.pfix-of .pfix-of__intro {
  margin: 14px 0 0;
  color: var(--of-muted);
  font-size: 17px;
}
.pfix-of h3 {
  margin: 0;
  padding: 0;
  color: var(--of-ink);
  font-family: inherit;
  font-weight: 700;
  line-height: 1.25;
}
.pfix-of p {
  margin: 0;
}
.pfix-of svg {
  display: block;
  width: 100%;
  height: 100%;
}
.pfix-of a:focus-visible {
  outline: 3px solid var(--of-orange-ink);
  outline-offset: 3px;
  border-radius: 6px;
}
.pfix-of .pfix-of-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Buttons and text links. */
.pfix-of .pfix-of-btn,
.pfix-of .pfix-of-btn:hover {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 13px 26px;
  border: 2px solid transparent;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.pfix-of .pfix-of-btn svg {
  width: 18px;
  height: 18px;
}
.pfix-of .pfix-of-btn--primary,
.pfix-of .pfix-of-btn--primary:hover {
  background: var(--of-orange);
  color: #ffffff;
  box-shadow: 0 10px 22px -10px rgba(242, 105, 36, 0.8);
}
.pfix-of .pfix-of-btn--primary:hover {
  background: #e2531a;
}
.pfix-of .pfix-of-link,
.pfix-of .pfix-of-link:hover {
  color: var(--of-orange-ink);
  font-weight: 700;
  text-decoration: none;
}
.pfix-of .pfix-of-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Ticked list. */
.pfix-of .pfix-of-list {
  display: grid;
  gap: 9px;
}
.pfix-of .pfix-of-list > div {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  color: var(--of-ink);
  font-weight: 500;
}
.pfix-of .pfix-of-list svg {
  width: 22px;
  height: 22px;
  padding: 3px;
  border-radius: 50%;
  background: #e6f4cc;
  color: var(--of-lime-ink);
}

/* Current offers: two coupon cards, the photo above a perforated edge. */
.pfix-of .pfix-of__sec--offers {
  background:
    radial-gradient(circle at 12% 0%, rgba(154, 205, 50, 0.16), transparent 42%),
    radial-gradient(circle at 92% 100%, rgba(242, 105, 36, 0.1), transparent 40%),
    var(--of-bg);
}
.pfix-of .pfix-of-deals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 32px);
  max-width: 1040px;
  margin: 0 auto;
}
.pfix-of .pfix-of-deal {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--of-line);
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 24px 48px -28px rgba(20, 24, 15, 0.38);
  scroll-margin-top: 140px;
}
.pfix-of .pfix-of-deal__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #dfe5d6;
}
.pfix-of .pfix-of-deal__media picture,
.pfix-of .pfix-of-deal__media img {
  display: block;
  width: 100%;
  height: 100%;
}
.pfix-of .pfix-of-deal__media img {
  object-fit: cover;
  transition: transform 0.6s ease;
}
.pfix-of .pfix-of-deal:hover .pfix-of-deal__media img {
  transform: scale(1.04);
}
.pfix-of .pfix-of-deal__tag {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--of-lime);
  color: #111827;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pfix-of .pfix-of-deal__body {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 16px;
  padding: 30px clamp(22px, 3vw, 34px) 28px;
  border-top: 2px dashed #d9dfcf;
}
/* the notches at each end of the perforation, in the section's colour */
.pfix-of .pfix-of-deal__body::before,
.pfix-of .pfix-of-deal__body::after {
  content: "";
  position: absolute;
  top: -15px;
  width: 28px;
  height: 28px;
  border: 1px solid var(--of-line);
  border-radius: 50%;
  background: var(--of-bg);
}
.pfix-of .pfix-of-deal__body::before {
  left: -15px;
}
.pfix-of .pfix-of-deal__body::after {
  right: -15px;
}
.pfix-of .pfix-of-deal__amount {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--of-ink);
  line-height: 1;
}
.pfix-of .pfix-of-deal__amount b {
  color: var(--of-orange);
  font-size: clamp(52px, 6vw, 68px);
  font-weight: 800;
  letter-spacing: -0.03em;
}
.pfix-of .pfix-of-deal__amount span {
  color: var(--of-ink);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pfix-of .pfix-of-deal__title {
  margin-top: -6px;
  font-size: 26px;
}
.pfix-of .pfix-of-deal__text {
  color: var(--of-text);
}
.pfix-of .pfix-of-deal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  align-items: center;
  margin-top: auto;
  padding-top: 8px;
}
.pfix-of .pfix-of-deal__fine {
  color: var(--of-muted);
  font-size: 13px;
}

/* What comes with every project: three cards. */
.pfix-of .pfix-of__sec--promises {
  background: #ffffff;
}
.pfix-of .pfix-of-promises {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.pfix-of .pfix-of-promise {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 30px 26px 28px;
  border: 1px solid var(--of-line);
  border-radius: 20px;
  background: linear-gradient(180deg, #fbfcf8 0%, #ffffff 100%);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.pfix-of .pfix-of-promise:hover {
  border-color: #cfe3a6;
  box-shadow: 0 20px 40px -28px rgba(20, 24, 15, 0.35);
  transform: translateY(-3px);
}
.pfix-of .pfix-of-promise__icon {
  display: grid;
  width: 56px;
  height: 56px;
  margin-bottom: 6px;
  padding: 13px;
  border-radius: 16px;
  background: #eef7dc;
  color: var(--of-lime-ink);
}
.pfix-of .pfix-of-promise h3 {
  font-size: 21px;
}
.pfix-of .pfix-of-promise p {
  flex: 1;
}
.pfix-of .pfix-of__note {
  max-width: 720px;
  margin: 26px auto 0;
  color: var(--of-muted);
  font-size: 13.5px;
  text-align: center;
}

/* How to claim an offer: numbered steps, then the estimate and call band. */
.pfix-of .pfix-of__sec--steps {
  background: var(--of-bg);
}
.pfix-of .pfix-of-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  counter-reset: none;
}
.pfix-of .pfix-of-step {
  position: relative;
  padding: 28px 24px 26px;
  border: 1px solid var(--of-line);
  border-radius: 20px;
  background: #ffffff;
}
/* a line joining the numbers, on wide screens */
.pfix-of .pfix-of-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50px;
  left: calc(24px + 44px + 12px);
  right: 24px;
  height: 2px;
  background: repeating-linear-gradient(90deg, #c7dd98 0 8px, transparent 8px 14px);
}
.pfix-of .pfix-of-step__n {
  display: grid;
  width: 44px;
  height: 44px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--of-lime);
  color: #111827;
  font-size: 20px;
  font-weight: 700;
  place-items: center;
}
.pfix-of .pfix-of-step h3 {
  margin-bottom: 8px;
  font-size: 20px;
}
.pfix-of .pfix-of-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 32px;
  align-items: center;
  justify-content: space-between;
  max-width: 960px;
  margin: clamp(40px, 5vw, 56px) auto 0;
  padding: clamp(26px, 3.4vw, 38px) clamp(24px, 4vw, 44px);
  border-radius: 22px;
  background: linear-gradient(120deg, #f26924 0%, #e2531a 100%);
  box-shadow: 0 18px 40px rgba(242, 105, 36, 0.28);
  color: #ffffff;
}
.pfix-of .pfix-of-cta__title {
  color: #ffffff;
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 700;
  line-height: 1.2;
}
.pfix-of .pfix-of-cta__text {
  margin-top: 4px;
  color: #fff3ea;
  font-size: 17px;
}
.pfix-of .pfix-of-cta__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.pfix-of .pfix-of-cta .pfix-of-btn {
  border-color: #ffffff;
  box-shadow: none;
}
.pfix-of .pfix-of-cta .pfix-of-btn--primary,
.pfix-of .pfix-of-cta .pfix-of-btn--primary:hover {
  background: #ffffff;
  color: var(--of-orange-ink);
}
.pfix-of .pfix-of-cta .pfix-of-btn--primary:hover {
  background: #fff3ea;
}
.pfix-of .pfix-of-btn--ghost,
.pfix-of .pfix-of-btn--ghost:hover {
  background: transparent;
  color: #ffffff;
}
.pfix-of .pfix-of-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.14);
}
.pfix-of .pfix-of-cta a:focus-visible {
  outline-color: #ffffff;
}

@media (max-width: 991.98px) {
  .pfix-of .pfix-of-promises {
    grid-template-columns: minmax(0, 1fr);
    max-width: 640px;
    margin: 0 auto;
  }
  .pfix-of .pfix-of-promise {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: 18px;
    row-gap: 8px;
  }
  .pfix-of .pfix-of-promise__icon {
    grid-row: span 3;
    margin: 0;
  }
  .pfix-of .pfix-of-steps {
    grid-template-columns: minmax(0, 1fr);
    max-width: 640px;
    margin: 0 auto;
  }
  .pfix-of .pfix-of-step {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 18px;
  }
  .pfix-of .pfix-of-step__n {
    grid-row: span 2;
    margin: 0;
  }
  .pfix-of .pfix-of-step:not(:last-child)::after {
    display: none;
  }
}
@media (max-width: 767.98px) {
  .pfix-of .pfix-of-deals {
    grid-template-columns: minmax(0, 1fr);
    max-width: 560px;
  }
  .pfix-of .pfix-of-cta {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .pfix-of .pfix-of-cta__btns {
    flex-direction: column;
  }
}
@media (max-width: 575.98px) {
  .pfix-of .pfix-of__inner {
    padding: 0 16px;
  }
  .pfix-of .pfix-of-deal__actions {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .pfix-of .pfix-of-promise {
    padding: 22px 20px;
    column-gap: 14px;
  }
  .pfix-of .pfix-of-promise__icon {
    width: 48px;
    height: 48px;
    padding: 11px;
    border-radius: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pfix-of .pfix-of-deal__media img,
  .pfix-of .pfix-of-promise,
  .pfix-of .pfix-of-btn {
    transition: none;
  }
  .pfix-of .pfix-of-deal:hover .pfix-of-deal__media img,
  .pfix-of .pfix-of-promise:hover {
    transform: none;
  }
}

/* The offer pages (/blog/offer/…/, offers-page.mjs): the hero's photo fills the whole hero
   (it kept its own shape and stopped short of the right edge) under a lighter overlay than
   the 90% black that hid it, darkest behind the heading; the line under the heading is in
   its styled paragraph again. */
.pfix-offer-hero .video-background picture.pfix-offer-hero__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.pfix-offer-hero .video-background picture.pfix-offer-hero__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}
.pfix-offer-hero .video-background .video-overlay {
  z-index: 1;
  background: linear-gradient(90deg, rgba(10, 14, 11, 0.88) 0%, rgba(10, 14, 11, 0.7) 40%, rgba(10, 14, 11, 0.3) 72%, rgba(10, 14, 11, 0.2) 100%);
}
.pfix-offer-hero .text-section .pfix-offer-hero__sub {
  color: #eef0ea;
  font-size: 19px;
  line-height: 1.55;
}
/* Columns stacked: the text above the form, darkened evenly. */
@media (max-width: 1023.98px) {
  .pfix-offer-hero .video-background .video-overlay {
    background: linear-gradient(180deg, rgba(10, 14, 11, 0.84) 0%, rgba(10, 14, 11, 0.66) 55%, rgba(10, 14, 11, 0.55) 100%);
  }
}
@media (max-width: 767.98px) {
  .pfix-offer-hero .text-section .pfix-offer-hero__sub {
    font-size: 16px;
    line-height: 1.5;
  }
}

/* /about/ (about-page.mjs): the hero and "Our Mission". Roboto like the rest of the page;
   orange for actions, lime and charcoal green from the site's palette, the same look as the
   other redesigned heroes (/offers/, /reviews/) and the Inc. 5000 band below.

   Hero: a Panda roofer in a Panda hoodie and harness on a roof, in place of a photo of an
   office ceiling. It scrolls with the page and is darkened behind the text. */
.hero-section.pfix-ab-hero {
  position: relative;
  isolation: isolate;
  background-color: #1a2418;
  background-image: url("/_custom/site-fixes/about-hero.webp");
  background-size: cover;
  background-position: 50% 35%;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-blend-mode: normal;
}
.hero-section.pfix-ab-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(12, 17, 11, 0.92) 0%, rgba(12, 17, 11, 0.8) 40%, rgba(12, 17, 11, 0.38) 68%, rgba(12, 17, 11, 0.2) 100%),
    linear-gradient(0deg, rgba(12, 17, 11, 0.4) 0%, rgba(12, 17, 11, 0) 45%);
  pointer-events: none;
}
.pfix-ab-hero .text-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  color: #ffffff;
  font-family: var(--robboto, Roboto), system-ui, sans-serif;
  text-align: left;
}
.pfix-ab-hero .text-section > * {
  max-width: 100%;
  margin: 0;
}
.pfix-ab-hero .pfix-ab-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #c3ea79;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.pfix-ab-hero .pfix-ab-hero__eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.pfix-ab-hero .text-section .pfix-ab-hero__title {
  padding: 0;
  color: #ffffff;
  font-family: inherit;
  font-size: 50px;
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-align: left;
  text-wrap: balance;
}
.pfix-ab-hero .pfix-ab-hero__sub {
  padding: 0;
  color: #eef0ea;
  font-size: 19px;
  line-height: 1.55;
  text-align: left;
}

/* The numbers, on frosted glass. */
.pfix-ab-hero .pfix-ab-hero__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, auto));
  justify-content: start;
  width: 100%;
  max-width: 540px;
  padding: 16px 4px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.pfix-ab-hero .pfix-ab-hero__stat {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  padding: 0 18px;
}
.pfix-ab-hero .pfix-ab-hero__stat + .pfix-ab-hero__stat {
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}
.pfix-ab-hero .pfix-ab-hero__stat b {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #ffffff;
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pfix-ab-hero .pfix-ab-hero__star {
  flex: none;
  align-self: center;
  width: 0.72em;
  height: 0.72em;
  color: #fbbc04;
}
.pfix-ab-hero .pfix-ab-hero__stat span {
  color: #d4dacb;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
}

/* Estimate and call buttons. */
.pfix-ab-hero .pfix-ab-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.pfix-ab-hero a.pfix-ab-hero__btn,
.pfix-ab-hero a.pfix-ab-hero__btn:hover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 24px;
  border: 2px solid transparent;
  border-radius: 30px;
  color: #ffffff;
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}
.pfix-ab-hero a.pfix-ab-hero__btn svg {
  flex: none;
  width: 18px;
  height: 18px;
}
.pfix-ab-hero a.pfix-ab-hero__btn--primary {
  background: #f26924;
}
.pfix-ab-hero a.pfix-ab-hero__btn--primary:hover {
  background: #e2531a;
}
.pfix-ab-hero a.pfix-ab-hero__btn--ghost {
  border-color: rgba(255, 255, 255, 0.75);
  background: transparent;
}
.pfix-ab-hero a.pfix-ab-hero__btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
}
.pfix-ab-hero .pfix-ab-hero__short {
  display: none;
}
.pfix-ab-hero a.pfix-ab-hero__btn:focus-visible {
  outline: 3px solid #c3ea79;
  outline-offset: 2px;
}
.pfix-ab-hero .pfix-ab-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}
.pfix-ab-hero .pfix-ab-hero__trust span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #eef0ea;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
}
.pfix-ab-hero .pfix-ab-hero__trust svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: #c3ea79;
}
@media (min-width: 1200px) {
  .pfix-ab-hero .text-section {
    width: 580px;
  }
}
/* Side by side in the narrower container: leave a gap before the form. */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .pfix-ab-hero .text-section {
    width: 470px;
  }
  .pfix-ab-hero .text-section .pfix-ab-hero__title {
    font-size: 40px;
  }
  .pfix-ab-hero .pfix-ab-hero__stat {
    padding: 0 13px;
  }
  .pfix-ab-hero .pfix-ab-hero__stat b {
    font-size: 24px;
  }
}
/* Columns stacked: the text above the form, darkened evenly. */
@media (max-width: 1023.98px) {
  .hero-section.pfix-ab-hero::before {
    background: linear-gradient(180deg, rgba(12, 17, 11, 0.86) 0%, rgba(12, 17, 11, 0.7) 55%, rgba(12, 17, 11, 0.58) 100%);
  }
  .pfix-ab-hero .hero-text-col {
    align-self: stretch;
    min-width: 0;
    max-width: 100%;
  }
  .pfix-ab-hero .text-section {
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
  }
  .pfix-ab-hero .text-section .pfix-ab-hero__title {
    font-size: 42px;
  }
}
@media (max-width: 767.98px) {
  .pfix-ab-hero .text-section {
    gap: 14px;
    padding-top: 8px;
  }
  /* !important: the site's stylesheet sets every h1 on phones to 22px !important */
  .pfix-ab-hero .text-section .pfix-ab-hero__title {
    font-size: 32px !important;
  }
  .pfix-ab-hero .pfix-ab-hero__sub {
    font-size: 16px;
    line-height: 1.5;
  }
  .pfix-ab-hero .pfix-ab-hero__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 0;
    max-width: none;
    padding: 14px 4px;
  }
  .pfix-ab-hero .pfix-ab-hero__stat {
    padding: 0 16px;
  }
  .pfix-ab-hero .pfix-ab-hero__stat:nth-child(odd) {
    border-left: 0;
  }
  .pfix-ab-hero .pfix-ab-hero__stat b {
    font-size: 25px;
  }
  .pfix-ab-hero .pfix-ab-hero__ctas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }
  .pfix-ab-hero a.pfix-ab-hero__btn,
  .pfix-ab-hero a.pfix-ab-hero__btn:hover {
    padding: 13px 10px;
    font-size: 15px;
  }
  .pfix-ab-hero .pfix-ab-hero__trust span {
    font-size: 13px;
  }
}
/* Narrow phones: "Call us" on the button (the number is still read out). */
@media (max-width: 479.98px) {
  .pfix-ab-hero .pfix-ab-hero__long {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .pfix-ab-hero .pfix-ab-hero__short {
    display: inline;
  }
}

/* "Our Mission": the text and three points on the left, a photo collage on the right. */
.pfix-ab-mission {
  position: relative;
  padding: 88px 0 96px;
  overflow: hidden;
  background: #ffffff;
  color: #374151;
  font-family: var(--robboto, Roboto), system-ui, sans-serif;
}
.pfix-ab-mission *,
.pfix-ab-mission *::before,
.pfix-ab-mission *::after {
  box-sizing: border-box;
}
.pfix-ab-mission .pfix-ab-mission__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 64px;
  align-items: center;
}
.pfix-ab-mission .pfix-ab-mission__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.pfix-ab-mission .pfix-ab-mission__eyebrow {
  margin: 0;
  padding: 5px 12px;
  border-radius: 999px;
  background: #e1efc4;
  color: #4a7310;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pfix-ab-mission .pfix-ab-mission__title {
  margin: 14px 0 18px;
  padding: 0;
  color: #111827;
  font-family: inherit;
  font-size: 38px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-align: left;
  text-wrap: balance;
}
.pfix-ab-mission .pfix-ab-mission__lead {
  max-width: 60ch;
  margin: 0;
  padding: 0;
  color: #374151;
  font-size: 17.5px;
  line-height: 1.7;
  text-align: left;
}
.pfix-ab-mission .pfix-ab-mission__points {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin: 28px 0 0;
}
.pfix-ab-mission .pfix-ab-mission__point {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid #e6eddb;
  border-radius: 16px;
  background: #fbfdf7;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.pfix-ab-mission .pfix-ab-mission__point:hover {
  border-color: #cfe3a8;
  box-shadow: 0 10px 24px rgba(26, 36, 24, 0.08);
  transform: translateY(-1px);
}
.pfix-ab-mission .pfix-ab-mission__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #1a2418;
  color: #c3ea79;
}
.pfix-ab-mission .pfix-ab-mission__icon svg {
  width: 22px;
  height: 22px;
}
.pfix-ab-mission .pfix-ab-mission__point-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.pfix-ab-mission .pfix-ab-mission__point-text b {
  color: #111827;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}
.pfix-ab-mission .pfix-ab-mission__point-text span {
  color: #4b5348;
  font-size: 15px;
  line-height: 1.55;
}
.pfix-ab-mission .pfix-ab-mission__places {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  color: #4b5348;
  font-size: 15px;
  line-height: 1.55;
  text-align: left;
}
.pfix-ab-mission .pfix-ab-mission__places svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: #f26924;
}
.pfix-ab-mission .pfix-ab-mission__places b {
  color: #111827;
  font-weight: 600;
}

/* The collage: the crew photo, the section's old photo overlapping its lower left corner,
   and the experience badge on its upper right. */
.pfix-ab-mission .pfix-ab-mission__media {
  position: relative;
  min-width: 0;
  padding: 0 0 72px 40px;
}
.pfix-ab-mission .pfix-ab-mission__media::before {
  content: "";
  position: absolute;
  top: -28px;
  right: -28px;
  z-index: 0;
  width: 62%;
  height: 70%;
  border-radius: 28px;
  background: radial-gradient(#c9e39a 1.6px, transparent 1.8px) 0 0 / 18px 18px;
  opacity: 0.8;
}
.pfix-ab-mission .pfix-ab-mission__photo {
  position: relative;
  z-index: 1;
  margin: 0;
  overflow: hidden;
  background: #e5eadf;
}
.pfix-ab-mission .pfix-ab-mission__photo img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.pfix-ab-mission .pfix-ab-mission__photo--main {
  aspect-ratio: 4 / 3.4;
  border-radius: 24px;
  box-shadow: 0 24px 50px rgba(26, 36, 24, 0.18);
}
.pfix-ab-mission .pfix-ab-mission__photo--main img {
  object-position: 40% 50%;
}
.pfix-ab-mission .pfix-ab-mission__photo--inset {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: 52%;
  aspect-ratio: 534 / 328;
  border: 6px solid #ffffff;
  border-radius: 20px;
  box-shadow: 0 18px 40px rgba(26, 36, 24, 0.22);
}
.pfix-ab-mission .pfix-ab-mission__photo--inset picture {
  display: block;
  height: 100%;
}
.pfix-ab-mission .pfix-ab-mission__badge {
  position: absolute;
  right: -12px;
  bottom: 28px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 230px;
  padding: 14px 18px;
  border-radius: 18px;
  background: #1a2418;
  box-shadow: 0 16px 34px rgba(26, 36, 24, 0.28);
}
.pfix-ab-mission .pfix-ab-mission__badge b {
  color: #c3ea79;
  font-size: 36px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
}
.pfix-ab-mission .pfix-ab-mission__badge span {
  color: #eef0ea;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
}
@media (max-width: 1199.98px) {
  .pfix-ab-mission .pfix-ab-mission__inner {
    gap: 48px;
  }
  .pfix-ab-mission .pfix-ab-mission__title {
    font-size: 34px;
  }
  .pfix-ab-mission .pfix-ab-mission__badge {
    right: 0;
  }
  .pfix-ab-mission .pfix-ab-mission__photo--inset {
    width: 46%;
  }
}
@media (max-width: 991.98px) {
  .pfix-ab-mission {
    padding: 60px 0 64px;
  }
  .pfix-ab-mission .pfix-ab-mission__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .pfix-ab-mission .pfix-ab-mission__media {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
  }
  .pfix-ab-mission .pfix-ab-mission__media::before {
    right: -12px;
  }
}
@media (max-width: 575.98px) {
  .pfix-ab-mission {
    padding: 44px 0 48px;
  }
  .pfix-ab-mission .pfix-ab-mission__title {
    margin: 12px 0 14px;
    font-size: 27px;
  }
  .pfix-ab-mission .pfix-ab-mission__lead {
    font-size: 16px;
    line-height: 1.65;
  }
  .pfix-ab-mission .pfix-ab-mission__point {
    gap: 14px;
    padding: 14px;
  }
  .pfix-ab-mission .pfix-ab-mission__icon {
    width: 40px;
    height: 40px;
  }
  .pfix-ab-mission .pfix-ab-mission__point-text b {
    font-size: 16px;
  }
  .pfix-ab-mission .pfix-ab-mission__media {
    padding: 0 0 56px 20px;
  }
  .pfix-ab-mission .pfix-ab-mission__media::before {
    top: -16px;
    right: -6px;
  }
  .pfix-ab-mission .pfix-ab-mission__photo--inset {
    width: 56%;
    border-width: 4px;
    border-radius: 14px;
  }
  .pfix-ab-mission .pfix-ab-mission__photo--main {
    border-radius: 18px;
  }
  .pfix-ab-mission .pfix-ab-mission__badge {
    bottom: 10px;
    gap: 10px;
    max-width: 170px;
    padding: 10px 12px;
    border-radius: 14px;
  }
  .pfix-ab-mission .pfix-ab-mission__badge b {
    font-size: 28px;
  }
  .pfix-ab-mission .pfix-ab-mission__badge span {
    font-size: 12.5px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pfix-ab-mission .pfix-ab-mission__point {
    transition: none;
  }
  .pfix-ab-mission .pfix-ab-mission__point:hover {
    transform: none;
  }
}

/* /faqs/ (faq-page.mjs): the hero and the questions. Roboto like the rest of the page;
   orange for actions, lime and charcoal green from the site's palette, the same look as the
   other redesigned heroes and the About page's "Our Mission".

   Hero: an aerial photo of a Panda solar-shingle roof (it was bare roof decking mid
   tear-off). It scrolls with the page and is darkened behind the text. */
.hero-section.pfix-fq-hero {
  position: relative;
  isolation: isolate;
  background-color: #1a2418;
  background-image: url("/_custom/site-fixes/faq-hero.webp");
  background-size: cover;
  background-position: 50% 55%;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-blend-mode: normal;
}
.hero-section.pfix-fq-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(12, 17, 11, 0.88) 0%, rgba(12, 17, 11, 0.7) 42%, rgba(12, 17, 11, 0.18) 70%, rgba(12, 17, 11, 0.05) 100%),
    linear-gradient(0deg, rgba(12, 17, 11, 0.3) 0%, rgba(12, 17, 11, 0) 40%);
  pointer-events: none;
}
.pfix-fq-hero .text-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  color: #ffffff;
  font-family: var(--robboto, Roboto), system-ui, sans-serif;
  text-align: left;
}
.pfix-fq-hero .text-section > * {
  max-width: 100%;
  margin: 0;
}
.pfix-fq-hero .pfix-fq-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #c3ea79;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.pfix-fq-hero .pfix-fq-hero__eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.pfix-fq-hero .text-section .pfix-fq-hero__title {
  padding: 0;
  color: #ffffff;
  font-family: inherit;
  font-size: 52px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-align: left;
  text-wrap: balance;
}
.pfix-fq-hero .pfix-fq-hero__sub {
  max-width: 34em;
  padding: 0;
  color: #eef0ea;
  font-size: 19px;
  line-height: 1.55;
  text-align: left;
}

/* The search box. */
.pfix-fq-search {
  width: 100%;
  max-width: 540px;
}
.pfix-fq-search[hidden] {
  display: none;
}
.pfix-fq-search .pfix-fq-search__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.pfix-fq-search .pfix-fq-search__box {
  position: relative;
  display: block;
}
.pfix-fq-search .pfix-fq-search__box svg {
  position: absolute;
  top: 50%;
  left: 20px;
  width: 20px;
  height: 20px;
  color: #4a7310;
  transform: translateY(-50%);
  pointer-events: none;
}
.pfix-fq-search input[type="search"] {
  display: block;
  width: 100%;
  height: 58px;
  margin: 0;
  padding: 0 22px 0 52px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
  color: #111827;
  font-family: inherit;
  font-size: 16.5px;
  line-height: 1;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.pfix-fq-search input[type="search"]::placeholder {
  color: #6b7280;
  opacity: 1;
}
.pfix-fq-search input[type="search"]:focus {
  border-color: #9acd32;
  box-shadow: 0 0 0 4px rgba(154, 205, 50, 0.35), 0 14px 34px rgba(0, 0, 0, 0.28);
}

/* Topic chips. */
.pfix-fq-hero .pfix-fq-hero__topics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pfix-fq-hero a.pfix-fq-hero__topic,
.pfix-fq-hero a.pfix-fq-hero__topic:hover {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px 7px 11px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.pfix-fq-hero a.pfix-fq-hero__topic:hover {
  border-color: rgba(195, 234, 121, 0.7);
  background: rgba(255, 255, 255, 0.18);
}
.pfix-fq-hero a.pfix-fq-hero__topic svg {
  flex: none;
  width: 17px;
  height: 17px;
  color: #c3ea79;
}
.pfix-fq-hero a.pfix-fq-hero__topic span {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: #c3ea79;
  color: #1a2418;
  font-size: 12.5px;
  font-weight: 700;
}
.pfix-fq-hero .pfix-fq-hero__call {
  padding: 0;
  color: #d4dacb;
  font-size: 15px;
  line-height: 1.4;
  text-align: left;
}
.pfix-fq-hero .pfix-fq-hero__call a,
.pfix-fq-hero .pfix-fq-hero__call a:hover {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
  color: #ffffff;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(195, 234, 121, 0.8);
  text-underline-offset: 3px;
}
.pfix-fq-hero .pfix-fq-hero__call svg {
  width: 15px;
  height: 15px;
  color: #c3ea79;
}
.pfix-fq-hero a:focus-visible {
  outline: 3px solid #c3ea79;
  outline-offset: 2px;
}
@media (min-width: 1200px) {
  .pfix-fq-hero .text-section {
    width: 580px;
  }
}
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .pfix-fq-hero .text-section {
    width: 470px;
  }
  .pfix-fq-hero .text-section .pfix-fq-hero__title {
    font-size: 42px;
  }
}
@media (max-width: 1023.98px) {
  .hero-section.pfix-fq-hero::before {
    background: linear-gradient(180deg, rgba(12, 17, 11, 0.84) 0%, rgba(12, 17, 11, 0.68) 55%, rgba(12, 17, 11, 0.56) 100%);
  }
  .pfix-fq-hero .hero-text-col {
    align-self: stretch;
    min-width: 0;
    max-width: 100%;
  }
  .pfix-fq-hero .text-section {
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
  }
  .pfix-fq-hero .text-section .pfix-fq-hero__title {
    font-size: 42px;
  }
  .pfix-fq-search {
    max-width: none;
  }
}
@media (max-width: 767.98px) {
  .pfix-fq-hero .text-section {
    gap: 14px;
    padding-top: 8px;
  }
  /* !important: the site's stylesheet sets every h1 on phones to 22px !important */
  .pfix-fq-hero .text-section .pfix-fq-hero__title {
    font-size: 33px !important;
  }
  .pfix-fq-hero .pfix-fq-hero__sub {
    font-size: 16px;
    line-height: 1.5;
  }
  .pfix-fq-search input[type="search"] {
    height: 52px;
    font-size: 16px;
  }
  .pfix-fq-hero a.pfix-fq-hero__topic,
  .pfix-fq-hero a.pfix-fq-hero__topic:hover {
    font-size: 13.5px;
  }
}

/* The questions: a topic menu and a help card on the left (they follow you down the page
   on larger screens), the groups of accordions on the right. */
.pfix-fq {
  padding: 80px 0 96px;
  background: linear-gradient(180deg, #ffffff 0%, #f7faf0 100%);
  color: #374151;
  font-family: var(--robboto, Roboto), system-ui, sans-serif;
}
.pfix-fq *,
.pfix-fq *::before,
.pfix-fq *::after {
  box-sizing: border-box;
}
.pfix-fq .pfix-fq__inner {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
/* On short screens the menu and the card stay where they are. */
@media (max-height: 759.98px) {
  .pfix-fq .pfix-fq__side {
    position: static;
  }
}
.pfix-fq .pfix-fq__side {
  position: sticky;
  /* below the fixed header (top bar and menu, 152 px) */
  top: 176px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.pfix-fq .pfix-fq__nav {
  padding: 18px 12px 12px;
  border: 1px solid #e6eddb;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(26, 36, 24, 0.06);
}
.pfix-fq .pfix-fq__nav-title {
  margin: 0 0 8px;
  padding: 0 10px;
  color: #4a7310;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pfix-fq .pfix-fq__nav ul {
  /* !important: the site's stylesheet indents every ul with !important */
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.pfix-fq .pfix-fq__nav li {
  margin: 0;
  padding: 0;
  color: inherit;
  list-style: none;
}
.pfix-fq .pfix-fq__nav li::before,
.pfix-fq .pfix-fq__nav li::marker {
  content: none;
}
.pfix-fq a.pfix-fq__nav-link,
.pfix-fq a.pfix-fq__nav-link:hover {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 12px;
  color: #1f2937;
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.pfix-fq a.pfix-fq__nav-link:hover {
  background: #f4f8ec;
}
.pfix-fq a.pfix-fq__nav-link.is-current {
  background: #1a2418;
  color: #ffffff;
}
.pfix-fq a.pfix-fq__nav-link.is-empty {
  opacity: 0.45;
}
.pfix-fq .pfix-fq__nav-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #eef6dc;
  color: #4a7310;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.pfix-fq .is-current .pfix-fq__nav-icon {
  background: rgba(195, 234, 121, 0.16);
  color: #c3ea79;
}
.pfix-fq .pfix-fq__nav-icon svg {
  width: 19px;
  height: 19px;
}
.pfix-fq .pfix-fq__nav-name {
  flex: 1;
  min-width: 0;
}
.pfix-fq .pfix-fq__nav-count {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background: #f1f4ec;
  color: #4b5348;
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pfix-fq .is-current .pfix-fq__nav-count {
  background: #c3ea79;
  color: #1a2418;
}

/* "Still have a question?" */
.pfix-fq .pfix-fq__help {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 24px 22px 22px;
  border-radius: 20px;
  background: #1a2418;
  color: #d4dacb;
  box-shadow: 0 18px 40px rgba(26, 36, 24, 0.22);
}
.pfix-fq .pfix-fq__help-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(195, 234, 121, 0.14);
  color: #c3ea79;
}
.pfix-fq .pfix-fq__help-icon svg {
  width: 23px;
  height: 23px;
}
.pfix-fq .pfix-fq__help-title {
  margin: 6px 0 0;
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}
.pfix-fq .pfix-fq__help-text {
  margin: 0 0 6px;
  color: #d4dacb;
  font-size: 15px;
  line-height: 1.55;
}
.pfix-fq a.pfix-fq__btn,
.pfix-fq a.pfix-fq__btn:hover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 18px;
  border: 2px solid transparent;
  border-radius: 30px;
  color: #ffffff;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}
.pfix-fq a.pfix-fq__btn svg {
  flex: none;
  width: 17px;
  height: 17px;
}
.pfix-fq a.pfix-fq__btn--primary {
  background: #f26924;
}
.pfix-fq a.pfix-fq__btn--primary:hover {
  background: #e2531a;
}
.pfix-fq a.pfix-fq__btn--ghost {
  border-color: rgba(255, 255, 255, 0.6);
  background: transparent;
}
.pfix-fq a.pfix-fq__btn--ghost:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* The groups. */
.pfix-fq .pfix-fq__main {
  display: flex;
  flex-direction: column;
  gap: 52px;
  min-width: 0;
}
.pfix-fq .pfix-fq__status:empty {
  display: none;
}
.pfix-fq .pfix-fq__status {
  margin: 0 0 -36px;
  color: #4a7310;
  font-size: 15px;
  font-weight: 600;
}
.pfix-fq .pfix-fq__group {
  scroll-margin-top: 176px;
}
.pfix-fq .pfix-fq__group[hidden] {
  display: none;
}
.pfix-fq .pfix-fq__group-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 18px;
}
.pfix-fq .pfix-fq__group-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #1a2418;
  color: #c3ea79;
}
.pfix-fq .pfix-fq__group-icon svg {
  width: 26px;
  height: 26px;
}
.pfix-fq .pfix-fq__group-text {
  flex: 1;
  min-width: 0;
}
.pfix-fq .pfix-fq__group-title {
  margin: 0;
  padding: 0;
  color: #111827;
  font-family: inherit;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-align: left;
}
.pfix-fq .pfix-fq__group-sub {
  margin: 4px 0 0;
  padding: 0;
  color: #4b5348;
  font-size: 15px;
  line-height: 1.5;
  text-align: left;
}
.pfix-fq .pfix-fq__group-count {
  color: #6b7280;
  white-space: nowrap;
}
.pfix-fq .pfix-fq__group-count::before {
  content: "·";
  margin: 0 6px 0 2px;
}
.pfix-fq a.pfix-fq__group-link,
.pfix-fq a.pfix-fq__group-link:hover {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  color: #c2410c;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.pfix-fq a.pfix-fq__group-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pfix-fq a.pfix-fq__group-link svg {
  width: 16px;
  height: 16px;
}
.pfix-fq .pfix-fq__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* One question. */
.pfix-fq .pfix-fq__item {
  border: 1px solid #e6eddb;
  border-radius: 16px;
  background: #ffffff;
  scroll-margin-top: 176px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.pfix-fq .pfix-fq__item[hidden] {
  display: none;
}
.pfix-fq .pfix-fq__item:hover {
  border-color: #cfe3a8;
}
.pfix-fq .pfix-fq__item[open] {
  border-color: #b9d98a;
  box-shadow: 0 12px 28px rgba(26, 36, 24, 0.08);
}
.pfix-fq .pfix-fq__item summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  border-radius: 16px;
  color: #111827;
  cursor: pointer;
  list-style: none;
}
.pfix-fq .pfix-fq__item summary::-webkit-details-marker {
  display: none;
}
.pfix-fq .pfix-fq__item summary::marker {
  content: "";
}
.pfix-fq .pfix-fq__item summary:focus-visible {
  outline: 3px solid #9acd32;
  outline-offset: 2px;
}
.pfix-fq .pfix-fq__q {
  flex: 1;
  min-width: 0;
  font-size: 17.5px;
  font-weight: 600;
  line-height: 1.4;
}
.pfix-fq .pfix-fq__q mark {
  padding: 0;
  border-radius: 3px;
  box-shadow: 0 0 0 2px #e1efc4;
  background: #e1efc4;
  color: inherit;
}
.pfix-fq .pfix-fq__toggle {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f1f6e7;
  transition: background-color 0.2s ease, transform 0.25s ease;
}
.pfix-fq .pfix-fq__toggle::before,
.pfix-fq .pfix-fq__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  margin: -1px 0 0 -6px;
  border-radius: 2px;
  background: #4a7310;
  transition: transform 0.25s ease, background-color 0.2s ease;
}
.pfix-fq .pfix-fq__toggle::after {
  transform: rotate(90deg);
}
.pfix-fq .pfix-fq__item[open] .pfix-fq__toggle {
  background: #9acd32;
  transform: rotate(180deg);
}
.pfix-fq .pfix-fq__item[open] .pfix-fq__toggle::before,
.pfix-fq .pfix-fq__item[open] .pfix-fq__toggle::after {
  background: #1a2418;
}
.pfix-fq .pfix-fq__item[open] .pfix-fq__toggle::after {
  transform: rotate(0deg);
}
.pfix-fq .pfix-fq__a {
  margin: 0 22px;
  padding: 16px 0 22px;
  border-top: 1px solid #eef2e6;
}
.pfix-fq .pfix-fq__a p {
  max-width: 68ch;
  margin: 0;
  padding: 0;
  color: #374151;
  font-size: 16px;
  line-height: 1.7;
  text-align: left;
}
/* Answers open and close smoothly where the browser can animate to the content's height. */
@supports (interpolate-size: allow-keywords) {
  .pfix-fq {
    interpolate-size: allow-keywords;
  }
  .pfix-fq .pfix-fq__item::details-content {
    height: 0;
    overflow: clip;
    transition: height 0.3s ease, content-visibility 0.3s allow-discrete;
  }
  .pfix-fq .pfix-fq__item[open]::details-content {
    height: auto;
  }
}
.pfix-fq .pfix-fq__empty {
  padding: 28px 26px;
  border: 1px dashed #cfe3a8;
  border-radius: 18px;
  background: #ffffff;
  color: #4b5348;
  font-size: 15.5px;
  line-height: 1.6;
}
.pfix-fq .pfix-fq__empty[hidden] {
  display: none;
}
.pfix-fq .pfix-fq__empty p {
  margin: 0;
}
.pfix-fq .pfix-fq__empty-title {
  margin-bottom: 4px;
  color: #111827;
  font-size: 18px;
  font-weight: 700;
}
.pfix-fq .pfix-fq__empty a {
  color: #c2410c;
  font-weight: 600;
}
@media (max-width: 1199.98px) {
  .pfix-fq .pfix-fq__inner {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 40px;
  }
}
/* Stacked: the topics as a row of chips above the questions, the help card below them. */
@media (max-width: 991.98px) {
  .pfix-fq {
    padding: 52px 0 64px;
  }
  .pfix-fq .pfix-fq__inner {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
  .pfix-fq .pfix-fq__side {
    display: contents;
  }
  .pfix-fq .pfix-fq__nav {
    order: -1;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .pfix-fq .pfix-fq__nav-title {
    padding: 0;
  }
  .pfix-fq .pfix-fq__nav ul {
    display: flex;
    gap: 8px;
    margin: 0 !important;
    padding: 2px 0 6px !important;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .pfix-fq .pfix-fq__nav ul::-webkit-scrollbar {
    display: none;
  }
  .pfix-fq a.pfix-fq__nav-link,
  .pfix-fq a.pfix-fq__nav-link:hover {
    gap: 8px;
    padding: 6px 8px 6px 6px;
    border: 1px solid #e6eddb;
    border-radius: 999px;
    background: #ffffff;
    white-space: nowrap;
  }
  .pfix-fq a.pfix-fq__nav-link.is-current {
    border-color: #1a2418;
    background: #1a2418;
  }
  .pfix-fq .pfix-fq__nav-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
  }
  .pfix-fq .pfix-fq__nav-icon svg {
    width: 16px;
    height: 16px;
  }
  .pfix-fq .pfix-fq__main {
    width: 100%;
    gap: 40px;
  }
  .pfix-fq .pfix-fq__help {
    order: 1;
    width: 100%;
  }
  .pfix-fq .pfix-fq__help {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 16px;
    align-items: start;
  }
  .pfix-fq .pfix-fq__help-icon {
    grid-row: span 2;
  }
  .pfix-fq .pfix-fq__help-title {
    margin: 0;
  }
  .pfix-fq .pfix-fq__help-text {
    margin: 0 0 8px;
  }
  .pfix-fq a.pfix-fq__btn,
  .pfix-fq a.pfix-fq__btn:hover {
    grid-column: 1 / -1;
  }
}
@media (max-width: 575.98px) {
  .pfix-fq {
    padding: 40px 0 52px;
  }
  /* the link goes under the text, so the text keeps the row's width */
  .pfix-fq .pfix-fq__group-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 6px 14px;
  }
  .pfix-fq .pfix-fq__group-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }
  .pfix-fq .pfix-fq__group-icon svg {
    width: 22px;
    height: 22px;
  }
  .pfix-fq .pfix-fq__group-title {
    font-size: 23px;
  }
  .pfix-fq .pfix-fq__group-sub {
    font-size: 14.5px;
  }
  .pfix-fq a.pfix-fq__group-link,
  .pfix-fq a.pfix-fq__group-link:hover {
    grid-column: 2;
    justify-self: start;
    font-size: 14.5px;
  }
  .pfix-fq .pfix-fq__item summary {
    gap: 12px;
    padding: 16px;
  }
  .pfix-fq .pfix-fq__q {
    font-size: 16px;
  }
  .pfix-fq .pfix-fq__toggle {
    width: 28px;
    height: 28px;
  }
  .pfix-fq .pfix-fq__a {
    margin: 0 16px;
    padding: 14px 0 18px;
  }
  .pfix-fq .pfix-fq__a p {
    font-size: 15.5px;
    line-height: 1.65;
  }
  .pfix-fq .pfix-fq__help {
    padding: 20px 18px;
  }
  .pfix-fq .pfix-fq__help-icon {
    width: 40px;
    height: 40px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pfix-fq .pfix-fq__toggle,
  .pfix-fq .pfix-fq__toggle::before,
  .pfix-fq .pfix-fq__toggle::after,
  .pfix-fq .pfix-fq__item::details-content {
    transition: none;
  }
}

/* /gallery/ (gallery-page.mjs): the hero above the photos. Charcoal green with a lime and
   an orange glow, the text beside a collage of five of the gallery's photos; Roboto, lime
   and orange from the site's palette. */
.pfix-gl-hero {
  --gl-dark: #141c12;
  --gl-lime: #9acd32;
  --gl-orange: #f26924;
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 6vw, 88px) 0;
  background:
    radial-gradient(circle at 88% 12%, rgba(154, 205, 50, 0.3), transparent 42%),
    radial-gradient(circle at 4% 100%, rgba(242, 105, 36, 0.22), transparent 38%),
    linear-gradient(160deg, #1f2b1c 0%, var(--gl-dark) 60%);
  color: #dfe6d4;
  font-family: var(--robboto, Roboto), system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}
/* A faint dot grid over the band. */
.pfix-gl-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.2px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 70%);
  mask-image: linear-gradient(90deg, #000 0%, transparent 70%);
  pointer-events: none;
}
.pfix-gl-hero *,
.pfix-gl-hero *::before,
.pfix-gl-hero *::after {
  box-sizing: border-box;
}
.pfix-gl-hero p,
.pfix-gl-hero h1 {
  margin: 0;
  padding: 0;
  font-family: inherit;
}
.pfix-gl-hero svg {
  display: block;
  flex: none;
}
.pfix-gl-hero .pfix-gl-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
}
.pfix-gl-hero .pfix-gl-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 6px 14px 6px 10px;
  border: 1px solid rgba(154, 205, 50, 0.4);
  border-radius: 999px;
  background: rgba(154, 205, 50, 0.1);
  color: var(--gl-lime);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pfix-gl-hero .pfix-gl-hero__eyebrow svg {
  width: 18px;
  height: 18px;
}
.pfix-gl-hero .pfix-gl-hero__title {
  color: #fff;
  font-size: clamp(36px, 4.8vw, 62px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.015em;
}
.pfix-gl-hero .pfix-gl-hero__sub {
  max-width: 540px;
  margin: 18px 0 24px;
  color: #c9d3bc;
  font-size: clamp(17px, 1.5vw, 19px);
}
.pfix-gl-hero .pfix-gl-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pfix-gl-hero a.pfix-gl-hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 6px 8px 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.pfix-gl-hero a.pfix-gl-hero__chip span {
  min-width: 26px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--gl-lime);
  color: var(--gl-dark);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}
.pfix-gl-hero a.pfix-gl-hero__chip:hover {
  border-color: var(--gl-lime);
  background: rgba(154, 205, 50, 0.14);
  color: #fff;
  transform: translateY(-1px);
}
.pfix-gl-hero .pfix-gl-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin: 28px 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.pfix-gl-hero .pfix-gl-hero__stat {
  display: flex;
  flex-direction: column;
}
.pfix-gl-hero .pfix-gl-hero__stat b {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #fff;
  font-size: clamp(26px, 2.4vw, 32px);
  font-weight: 800;
  line-height: 1.1;
}
.pfix-gl-hero .pfix-gl-hero__stat span {
  color: #a9b59a;
  font-size: 14px;
}
.pfix-gl-hero svg.pfix-gl-hero__star {
  width: 22px;
  height: 22px;
  color: #fbbc04;
}
.pfix-gl-hero .pfix-gl-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.pfix-gl-hero a.pfix-gl-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 24px;
  border: 2px solid transparent;
  border-radius: 999px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}
.pfix-gl-hero a.pfix-gl-hero__btn svg {
  width: 18px;
  height: 18px;
}
.pfix-gl-hero a.pfix-gl-hero__btn--primary {
  background: var(--gl-orange);
}
.pfix-gl-hero a.pfix-gl-hero__btn--primary:hover {
  background: #e2531a;
  color: #fff;
  transform: translateY(-1px);
}
.pfix-gl-hero a.pfix-gl-hero__btn--ghost {
  border-color: rgba(255, 255, 255, 0.7);
  background: transparent;
}
.pfix-gl-hero a.pfix-gl-hero__btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.pfix-gl-hero a:focus-visible {
  outline: 3px solid var(--gl-lime);
  outline-offset: 3px;
}

/* The collage: a large photo with four around it. */
.pfix-gl-hero .pfix-gl-mosaic {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: clamp(96px, 10.5vw, 150px);
  grid-template-areas:
    'a a b'
    'a a c'
    'd e e';
  gap: 12px;
}
.pfix-gl-hero a.pfix-gl-mosaic__tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 18px;
  background: #2a3526;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  animation: pfix-gl-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.pfix-gl-hero .pfix-gl-mosaic__tile--1 {
  grid-area: a;
}
.pfix-gl-hero .pfix-gl-mosaic__tile--2 {
  grid-area: b;
  animation-delay: 0.08s;
}
.pfix-gl-hero .pfix-gl-mosaic__tile--3 {
  grid-area: c;
  animation-delay: 0.16s;
}
.pfix-gl-hero .pfix-gl-mosaic__tile--4 {
  grid-area: d;
  animation-delay: 0.24s;
}
.pfix-gl-hero .pfix-gl-mosaic__tile--5 {
  grid-area: e;
  animation-delay: 0.32s;
}
.pfix-gl-hero a.pfix-gl-mosaic__tile img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.pfix-gl-hero a.pfix-gl-mosaic__tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(10, 14, 9, 0.6));
  pointer-events: none;
}
.pfix-gl-hero a.pfix-gl-mosaic__tile:hover img {
  transform: scale(1.06);
}
.pfix-gl-hero .pfix-gl-mosaic__label {
  position: absolute;
  z-index: 1;
  left: 10px;
  bottom: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(20, 28, 18, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}
.pfix-gl-hero .pfix-gl-mosaic__tile--1 .pfix-gl-mosaic__label {
  left: 14px;
  bottom: 14px;
  background: var(--gl-lime);
  color: var(--gl-dark);
}
@keyframes pfix-gl-rise {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* The chips and photos lead here, below the fixed header. */
.pfix-gl-anchor {
  display: block;
  scroll-margin-top: 150px;
}

@media (max-width: 860px) {
  .pfix-gl-hero .pfix-gl-hero__inner {
    grid-template-columns: minmax(0, 1fr);
  }
  .pfix-gl-hero .pfix-gl-mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: clamp(110px, 30vw, 190px);
    grid-template-areas:
      'a a'
      'b c'
      'd e';
    gap: 10px;
  }
  .pfix-gl-hero .pfix-gl-mosaic__tile--1 {
    grid-row: span 1;
  }
}
@media (max-width: 767px) {
  /* !important: the site's stylesheet sets every h1 on phones to 22px !important */
  .pfix-gl-hero .pfix-gl-hero__title {
    font-size: 36px !important;
  }
}
@media (max-width: 520px) {
  .pfix-gl-hero .pfix-gl-hero__ctas {
    flex-direction: column;
  }
  .pfix-gl-hero .pfix-gl-hero__stats {
    gap: 12px 24px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pfix-gl-hero a.pfix-gl-mosaic__tile {
    animation: none;
  }
  .pfix-gl-hero a.pfix-gl-mosaic__tile img,
  .pfix-gl-hero a.pfix-gl-hero__chip,
  .pfix-gl-hero a.pfix-gl-hero__btn {
    transition: none;
  }
  .pfix-gl-hero a.pfix-gl-mosaic__tile:hover img {
    transform: none;
  }
}

/* /charity-and-community/ (charity-page.mjs): the redesigned page. Roboto; charcoal green,
   Panda lime and orange from the site's palette, like the other redesigned pages. */
.pfix-cc {
  --cc-ink: #14180f;
  --cc-text: #3f463a;
  --cc-muted: #5d6656;
  --cc-line: #e4e8dc;
  --cc-bg: #f5f7ef;
  --cc-orange: #f26924;
  --cc-orange-ink: #c2410c;
  --cc-lime: #9acd32;
  --cc-lime-ink: #4d7c0f;
  --cc-dark: #172015;
  width: 100%;
  overflow: hidden;
  color: var(--cc-text);
  font-family: var(--robboto, Roboto), system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}
.pfix-cc *,
.pfix-cc *::before,
.pfix-cc *::after {
  box-sizing: border-box;
}
.pfix-cc p,
.pfix-cc h1,
.pfix-cc h2,
.pfix-cc h3,
.pfix-cc figure {
  margin: 0;
  padding: 0;
  font-family: inherit;
}
.pfix-cc svg {
  display: block;
  flex: none;
}
.pfix-cc img {
  max-width: 100%;
}
.pfix-cc .pfix-cc-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.pfix-cc .pfix-cc__inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.pfix-cc .pfix-cc__sec {
  padding: clamp(56px, 7vw, 96px) 0;
  scroll-margin-top: 140px;
}
.pfix-cc .pfix-cc__sec--tint {
  background: var(--cc-bg);
}
.pfix-cc .pfix-cc__head {
  max-width: 720px;
  margin: 0 auto clamp(30px, 4vw, 48px);
  text-align: center;
}
.pfix-cc .pfix-cc__eyebrow {
  margin-bottom: 10px;
  color: var(--cc-orange-ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pfix-cc .pfix-cc__eyebrow--light {
  color: var(--cc-lime);
}
.pfix-cc .pfix-cc__title {
  color: var(--cc-ink);
  text-wrap: balance;
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 800;
  line-height: 1.15;
}
.pfix-cc .pfix-cc__sub {
  margin-top: 14px;
  color: var(--cc-muted);
  font-size: 17px;
}
.pfix-cc .pfix-cc__sub b {
  color: var(--cc-ink);
}

/* Buttons. */
.pfix-cc .pfix-cc-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.pfix-cc a.pfix-cc-btn,
.pfix-cc button.pfix-cc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 24px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: none;
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.pfix-cc .pfix-cc-btn svg {
  width: 20px;
  height: 20px;
}
.pfix-cc a.pfix-cc-btn--primary {
  background: var(--cc-orange);
}
.pfix-cc a.pfix-cc-btn--primary:hover {
  background: #e2531a;
  color: #fff;
  transform: translateY(-1px);
}
.pfix-cc a.pfix-cc-btn--ghost {
  border-color: rgba(255, 255, 255, 0.7);
}
.pfix-cc a.pfix-cc-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.pfix-cc button.pfix-cc-btn--outline {
  border-color: var(--cc-ink);
  color: var(--cc-ink);
}
.pfix-cc button.pfix-cc-btn--outline:hover {
  background: var(--cc-ink);
  color: #fff;
}
.pfix-cc a:focus-visible,
.pfix-cc button:focus-visible {
  outline: 3px solid var(--cc-orange);
  outline-offset: 3px;
}

/* Hero: the text and the total beside a photo collage. */
.pfix-cc .pfix-cc-hero {
  position: relative;
  padding: clamp(48px, 6vw, 88px) 0;
  background:
    radial-gradient(circle at 92% 8%, rgba(154, 205, 50, 0.26), transparent 40%),
    radial-gradient(circle at 0% 100%, rgba(242, 105, 36, 0.28), transparent 42%),
    linear-gradient(160deg, #222f1e 0%, var(--cc-dark) 62%);
  color: #dfe6d4;
}
.pfix-cc .pfix-cc-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}
.pfix-cc .pfix-cc-hero__title {
  color: #fff;
  text-wrap: balance;
  font-size: clamp(36px, 4.6vw, 58px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.pfix-cc .pfix-cc-hero__sub {
  max-width: 560px;
  margin: 18px 0 26px;
  color: #c9d3bc;
  font-size: clamp(17px, 1.5vw, 19px);
}
.pfix-cc .pfix-cc-hero__total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin-bottom: 28px;
  padding: 16px 22px;
  border-left: 4px solid var(--cc-lime);
  border-radius: 0 16px 16px 0;
  background: rgba(255, 255, 255, 0.06);
}
.pfix-cc .pfix-cc-hero__total b {
  color: var(--cc-lime);
  font-size: clamp(38px, 4.4vw, 56px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
}
.pfix-cc .pfix-cc-hero__total span {
  color: #e8eddf;
  font-size: 17px;
  font-weight: 500;
}
.pfix-cc .pfix-cc-collage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(6, clamp(56px, 6vw, 84px));
  gap: 12px;
}
.pfix-cc .pfix-cc-collage__tile {
  overflow: hidden;
  border-radius: 18px;
  background: #2a3526;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  animation: pfix-cc-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.pfix-cc .pfix-cc-collage__tile img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
}
.pfix-cc .pfix-cc-collage__tile--1 {
  grid-column: 1;
  grid-row: 1 / 4;
}
.pfix-cc .pfix-cc-collage__tile--2 {
  grid-column: 2;
  grid-row: 1 / 5;
  animation-delay: 0.1s;
}
.pfix-cc .pfix-cc-collage__tile--3 {
  grid-column: 1;
  grid-row: 4 / 7;
  animation-delay: 0.2s;
}
.pfix-cc .pfix-cc-collage__tile--4 {
  grid-column: 2;
  grid-row: 5 / 7;
  animation-delay: 0.3s;
}
/* A tall photo in a wide tile: kept to its upper part, so the faces show (the centre cut
   off the man's head). */
.pfix-cc .pfix-cc-collage__tile--4 img {
  object-position: 50% 15%;
}
.pfix-cc .pfix-cc-collage__badge {
  position: absolute;
  left: 50%;
  bottom: -18px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px 8px 8px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
  color: var(--cc-ink);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  transform: translateX(-50%);
  animation: pfix-cc-fade 0.7s 0.45s ease both;
}
.pfix-cc .pfix-cc-collage__badge img {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50%;
  margin: 0;
}
@keyframes pfix-cc-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}
@keyframes pfix-cc-fade {
  from {
    opacity: 0;
  }
}

/* Recent gifts. */
.pfix-cc .pfix-cc-gifts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.pfix-cc .pfix-cc-gift {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 28px 20px;
  border: 1px solid var(--cc-line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(20, 24, 15, 0.05);
  text-align: center;
}
.pfix-cc .pfix-cc-gift__logo {
  position: relative;
  display: block;
  flex: none;
  overflow: hidden;
  width: 72px;
  height: 72px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 6px var(--cc-bg), 0 4px 12px rgba(20, 24, 15, 0.12);
}
/* !important: a stylesheet of the site's stretches these pictures' height. Each file is a
   240 px square with the logo centred in it, so it fills the circle. */
.pfix-cc .pfix-cc-gift__logo img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  margin: 0;
  object-fit: contain;
}
.pfix-cc .pfix-cc-gift__amount {
  color: var(--cc-orange-ink);
  font-size: clamp(30px, 3vw, 38px);
  font-weight: 800;
  line-height: 1.1;
}
.pfix-cc .pfix-cc-gift__name {
  color: var(--cc-ink);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
}

/* The organizations. */
.pfix-cc .pfix-cc-orgs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}
.pfix-cc .pfix-cc-org {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 30px 26px;
  border: 1px solid var(--cc-line);
  border-radius: 20px;
  background: #fff;
}
.pfix-cc .pfix-cc-org__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 6px;
  border-radius: 14px;
  background: #eef6dc;
  color: var(--cc-lime-ink);
}
.pfix-cc .pfix-cc-org__icon svg {
  width: 28px;
  height: 28px;
}
.pfix-cc .pfix-cc-org__name {
  color: var(--cc-ink);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
}
.pfix-cc .pfix-cc-org__text {
  color: var(--cc-muted);
  font-size: 15.5px;
}
.pfix-cc .pfix-cc-org--featured {
  border-color: var(--cc-dark);
  background: var(--cc-dark);
  color: #c9d3bc;
}
.pfix-cc .pfix-cc-org--featured .pfix-cc-org__icon {
  background: rgba(154, 205, 50, 0.16);
  color: var(--cc-lime);
}
.pfix-cc .pfix-cc-org--featured .pfix-cc-org__name {
  color: #fff;
}
.pfix-cc .pfix-cc-org--featured .pfix-cc-org__text {
  color: #c4ceb6;
}
.pfix-cc a.pfix-cc-org__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 8px;
  color: var(--cc-lime);
  font-weight: 700;
  text-decoration: none;
}
.pfix-cc a.pfix-cc-org__link svg {
  width: 16px;
  height: 16px;
}
.pfix-cc a.pfix-cc-org__link:hover {
  color: #c5ee6e;
  text-decoration: underline;
}

/* The photo wall: a grid of the event photos. Tall photos take two rows and the "wide" one
   runs across, so the first twelve and all of them both fill whole rows. */
.pfix-cc .pfix-cc-wall {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: clamp(150px, 18vw, 230px);
  grid-auto-flow: dense;
  gap: 14px;
}
.pfix-cc a.pfix-cc-wall__item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 16px;
  background: #e8ecdf;
}
.pfix-cc a.pfix-cc-wall__item.is-tall {
  grid-row: span 2;
}
.pfix-cc a.pfix-cc-wall__item.is-wide {
  grid-column: 1 / -1;
  grid-row: span 2;
}
.pfix-cc .pfix-cc-wall.is-collapsed .is-extra {
  display: none;
}
.pfix-cc a.pfix-cc-wall__item img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.pfix-cc .pfix-cc-wall__zoom {
  position: absolute;
  right: 10px;
  top: 10px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(20, 28, 18, 0.7);
  color: #fff;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.pfix-cc .pfix-cc-wall__zoom svg {
  width: 18px;
  height: 18px;
}
.pfix-cc a.pfix-cc-wall__item:hover img {
  transform: scale(1.04);
}
.pfix-cc a.pfix-cc-wall__item:hover .pfix-cc-wall__zoom,
.pfix-cc a.pfix-cc-wall__item:focus-visible .pfix-cc-wall__zoom {
  opacity: 1;
}
.pfix-cc .pfix-cc-wall__more {
  margin-top: 18px;
  text-align: center;
}

/* Tune in: the podcast in a dark card. */
.pfix-cc .pfix-cc-listen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  padding: clamp(28px, 4vw, 48px);
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0%, rgba(154, 205, 50, 0.22), transparent 45%),
    var(--cc-dark);
  color: #c9d3bc;
}
.pfix-cc .pfix-cc-listen__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--cc-lime);
  color: var(--cc-dark);
}
.pfix-cc .pfix-cc-listen__icon svg {
  width: 26px;
  height: 26px;
}
.pfix-cc .pfix-cc-listen__title {
  color: #fff;
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 800;
  line-height: 1.2;
}
.pfix-cc .pfix-cc-listen__body {
  margin-top: 12px;
}
.pfix-cc .pfix-cc-listen__player {
  overflow: hidden;
  padding: 10px;
  border-radius: 18px;
  background: #fff;
}
.pfix-cc .pfix-cc-listen__player iframe {
  display: block;
  width: 100%;
  height: 150px;
  border: 0;
}
.pfix-cc .pfix-cc-listen__source {
  padding: 6px 6px 2px;
  color: var(--cc-muted);
  font-size: 13px;
}

/* Closing band. */
.pfix-cc .pfix-cc-cta {
  padding: clamp(56px, 6vw, 84px) 0;
  background: var(--cc-lime);
  color: var(--cc-dark);
}
.pfix-cc .pfix-cc-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.pfix-cc .pfix-cc-cta__title {
  max-width: 760px;
  color: var(--cc-dark);
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 800;
  line-height: 1.15;
}
.pfix-cc .pfix-cc-cta__text {
  max-width: 680px;
  margin: 14px 0 28px;
  font-size: 18px;
}
.pfix-cc .pfix-cc-btns--cta {
  justify-content: center;
}
.pfix-cc .pfix-cc-btns--cta a.pfix-cc-btn--primary {
  background: var(--cc-dark);
}
.pfix-cc .pfix-cc-btns--cta a.pfix-cc-btn--primary:hover {
  background: #000;
}
.pfix-cc .pfix-cc-btns--cta a.pfix-cc-btn--ghost {
  border-color: var(--cc-dark);
  color: var(--cc-dark);
}
.pfix-cc .pfix-cc-btns--cta a.pfix-cc-btn--ghost:hover {
  background: var(--cc-dark);
  color: #fff;
}
.pfix-cc .pfix-cc-cta a:focus-visible {
  outline-color: var(--cc-dark);
}
.pfix-cc .pfix-cc-cta__call {
  margin-top: 20px;
}
.pfix-cc .pfix-cc-cta__call a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--cc-dark);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pfix-cc .pfix-cc-cta__call svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 1024px) {
  .pfix-cc .pfix-cc-gifts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pfix-cc .pfix-cc-orgs {
    grid-template-columns: minmax(0, 1fr);
    max-width: 640px;
    margin: 0 auto;
  }
}
@media (max-width: 860px) {
  .pfix-cc .pfix-cc-hero__inner,
  .pfix-cc .pfix-cc-listen {
    grid-template-columns: minmax(0, 1fr);
  }
  .pfix-cc .pfix-cc-collage {
    grid-template-rows: repeat(6, clamp(48px, 13vw, 84px));
    margin-bottom: 24px;
  }
  .pfix-cc .pfix-cc-collage__badge {
    bottom: -24px;
  }
  .pfix-cc .pfix-cc-wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: clamp(130px, 34vw, 230px);
    gap: 10px;
  }
  .pfix-cc a.pfix-cc-wall__item {
    border-radius: 12px;
  }
  .pfix-cc a.pfix-cc-wall__item.is-wide {
    grid-row: span 1;
  }
}
@media (max-width: 767px) {
  /* !important: the site's stylesheet sets every h1 on phones to 22px !important */
  .pfix-cc .pfix-cc-hero__title {
    font-size: 36px !important;
  }
}
@media (max-width: 520px) {
  .pfix-cc .pfix-cc-btns {
    flex-direction: column;
    align-items: stretch;
  }
  .pfix-cc .pfix-cc-gifts {
    gap: 12px;
  }
  .pfix-cc .pfix-cc-gift {
    padding: 22px 12px;
  }
  .pfix-cc .pfix-cc-gift__amount {
    font-size: 26px;
  }
  .pfix-cc .pfix-cc-gift__name {
    font-size: 14px;
  }
  .pfix-cc .pfix-cc-collage__badge {
    font-size: 13px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pfix-cc .pfix-cc-collage__tile,
  .pfix-cc .pfix-cc-collage__badge {
    animation: none;
  }
  .pfix-cc a.pfix-cc-wall__item img,
  .pfix-cc .pfix-cc-btn {
    transition: none;
  }
  .pfix-cc a.pfix-cc-wall__item:hover img {
    transform: none;
  }
}

/* /contact-us/ (contact-page.mjs): the redesigned page. Roboto; charcoal green, Panda lime
   and orange from the site's palette. The maps are SVG drawn from the US map's outlines. */
.pfix-ct {
  --ct-ink: #14180f;
  --ct-text: #3f463a;
  --ct-muted: #5d6656;
  --ct-line: #e4e8dc;
  --ct-bg: #f5f7ef;
  --ct-orange: #f26924;
  --ct-orange-ink: #c2410c;
  --ct-lime: #9acd32;
  --ct-lime-ink: #4d7c0f;
  --ct-dark: #172015;
  width: 100%;
  overflow: hidden;
  color: var(--ct-text);
  font-family: var(--robboto, Roboto), system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}
.pfix-ct *,
.pfix-ct *::before,
.pfix-ct *::after {
  box-sizing: border-box;
}
.pfix-ct p,
.pfix-ct h1,
.pfix-ct h2,
.pfix-ct h3 {
  margin: 0;
  padding: 0;
  font-family: inherit;
}
.pfix-ct svg {
  display: block;
  flex: none;
}
.pfix-ct .pfix-ct-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.pfix-ct .pfix-ct__inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.pfix-ct .pfix-ct__sec {
  padding: clamp(56px, 7vw, 96px) 0;
  background: var(--ct-bg);
}
.pfix-ct .pfix-ct__head {
  max-width: 680px;
  margin: 0 auto clamp(30px, 4vw, 48px);
  text-align: center;
}
.pfix-ct .pfix-ct__eyebrow {
  margin-bottom: 10px;
  color: var(--ct-orange-ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pfix-ct .pfix-ct__eyebrow--light {
  color: var(--ct-lime);
}
.pfix-ct .pfix-ct__title {
  color: var(--ct-ink);
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 800;
  line-height: 1.15;
  text-wrap: balance;
}
.pfix-ct .pfix-ct__sub {
  margin-top: 12px;
  color: var(--ct-muted);
  font-size: 17px;
}
.pfix-ct a:focus-visible {
  outline: 3px solid var(--ct-orange);
  outline-offset: 3px;
}

/* Buttons. */
.pfix-ct a.pfix-ct-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 20px;
  border: 2px solid transparent;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.pfix-ct a.pfix-ct-btn svg {
  width: 18px;
  height: 18px;
}
.pfix-ct a.pfix-ct-btn--call {
  background: var(--ct-orange);
  color: #fff;
}
.pfix-ct a.pfix-ct-btn--call:hover {
  background: #e2531a;
  color: #fff;
}
.pfix-ct a.pfix-ct-btn--ghost {
  border-color: var(--ct-line);
  color: var(--ct-ink);
}
.pfix-ct a.pfix-ct-btn--ghost:hover {
  border-color: var(--ct-ink);
  color: var(--ct-ink);
}
.pfix-ct a.pfix-ct-btn--dark {
  background: var(--ct-dark);
  color: #fff;
}
.pfix-ct a.pfix-ct-btn--dark:hover {
  background: #000;
  color: #fff;
}
.pfix-ct a.pfix-ct-btn--outline {
  border-color: var(--ct-dark);
  color: var(--ct-dark);
}
.pfix-ct a.pfix-ct-btn--outline:hover {
  background: var(--ct-dark);
  color: #fff;
}

/* The maps (SVG). Strokes keep their width however a map is scaled. */
.pfix-ct .pfix-ct-map path {
  vector-effect: non-scaling-stroke;
}
.pfix-ct .pfix-ct-pin__dot {
  fill: var(--ct-orange);
  stroke: #fff;
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
}
.pfix-ct .pfix-ct-pin__ring {
  fill: var(--ct-orange);
  opacity: 0.35;
  transform-box: fill-box;
  transform-origin: center;
  animation: pfix-ct-pulse 2.4s ease-out infinite;
}
@keyframes pfix-ct-pulse {
  0% {
    opacity: 0.45;
    transform: scale(0.5);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(1.4);
  }
}

/* Hero: the text and quick contacts beside the office map. */
.pfix-ct .pfix-ct-hero {
  padding: clamp(48px, 6vw, 84px) 0;
  background:
    radial-gradient(circle at 85% 20%, rgba(154, 205, 50, 0.22), transparent 45%),
    radial-gradient(circle at 0% 100%, rgba(242, 105, 36, 0.24), transparent 40%),
    linear-gradient(160deg, #222f1e 0%, var(--ct-dark) 62%);
  color: #dfe6d4;
}
.pfix-ct .pfix-ct-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.pfix-ct .pfix-ct-hero__title {
  color: #fff;
  font-size: clamp(36px, 4.6vw, 58px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.pfix-ct .pfix-ct-hero__sub {
  max-width: 540px;
  margin: 18px 0 28px;
  color: #c9d3bc;
  font-size: clamp(17px, 1.5vw, 19px);
}
.pfix-ct .pfix-ct-quick {
  display: grid;
  gap: 12px;
  max-width: 540px;
}
.pfix-ct a.pfix-ct-quick__item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.pfix-ct a.pfix-ct-quick__item:hover {
  border-color: var(--ct-lime);
  background: rgba(154, 205, 50, 0.12);
  color: #fff;
  transform: translateY(-1px);
}
.pfix-ct .pfix-ct-quick__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 50%;
  background: rgba(154, 205, 50, 0.16);
  color: var(--ct-lime);
}
.pfix-ct .pfix-ct-quick__icon svg {
  width: 22px;
  height: 22px;
}
.pfix-ct a.pfix-ct-quick__item > span:last-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}
.pfix-ct a.pfix-ct-quick__item small {
  color: #a9b59a;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pfix-ct a.pfix-ct-quick__item b {
  overflow-wrap: anywhere;
  font-size: 19px;
  font-weight: 700;
}
.pfix-ct a.pfix-ct-quick__item em {
  color: #c4ceb6;
  font-size: 14px;
  font-style: normal;
}
.pfix-ct a.pfix-ct-quick__item--call {
  border-color: var(--ct-orange);
  background: var(--ct-orange);
}
.pfix-ct a.pfix-ct-quick__item--call:hover {
  border-color: #e2531a;
  background: #e2531a;
}
.pfix-ct a.pfix-ct-quick__item--call .pfix-ct-quick__icon {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.pfix-ct a.pfix-ct-quick__item--call small,
.pfix-ct a.pfix-ct-quick__item--call em {
  color: #ffe6d6;
}
.pfix-ct a.pfix-ct-quick__item--call b {
  font-size: 24px;
}

/* The overview map, on the dark hero. */
.pfix-ct .pfix-ct-hero__map {
  min-width: 0;
}
.pfix-ct svg.pfix-ct-map--overview {
  width: 100%;
  height: auto;
  overflow: visible;
}
.pfix-ct .pfix-ct-map--overview .pfix-ct-map__state {
  fill: rgba(255, 255, 255, 0.06);
  stroke: rgba(255, 255, 255, 0.22);
  stroke-width: 0.8px;
}
.pfix-ct .pfix-ct-map--overview .pfix-ct-map__state.is-office {
  fill: rgba(154, 205, 50, 0.28);
  stroke: rgba(154, 205, 50, 0.7);
}
.pfix-ct .pfix-ct-map__lead {
  fill: none;
  stroke: rgba(255, 255, 255, 0.45);
  stroke-width: 1px;
  stroke-dasharray: 3 3;
}
.pfix-ct .pfix-ct-map__office text {
  fill: #fff;
  font-size: 11.5px;
  font-weight: 600;
  paint-order: stroke;
  stroke: var(--ct-dark);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.pfix-ct a.pfix-ct-map__office:hover text,
.pfix-ct a.pfix-ct-map__office:focus-visible text {
  fill: var(--ct-lime);
}
.pfix-ct a.pfix-ct-map__office:hover .pfix-ct-map__lead {
  stroke: var(--ct-lime);
}

/* The offices: the headquarters card runs across two columns. */
.pfix-ct .pfix-ct-offices {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.pfix-ct .pfix-ct-office {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--ct-line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(20, 24, 15, 0.05);
  scroll-margin-top: 150px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.pfix-ct .pfix-ct-office:hover {
  box-shadow: 0 14px 32px rgba(20, 24, 15, 0.1);
  transform: translateY(-2px);
}
.pfix-ct .pfix-ct-office:target {
  box-shadow: 0 0 0 3px var(--ct-lime), 0 14px 32px rgba(20, 24, 15, 0.1);
}
.pfix-ct .pfix-ct-office__map {
  position: relative;
  aspect-ratio: 8 / 5;
  background: #e9eee0;
}
.pfix-ct svg.pfix-ct-map--office {
  width: 100%;
  height: 100%;
}
.pfix-ct .pfix-ct-map--office .pfix-ct-map__state {
  fill: #f7f9f2;
  stroke: #cfd6c4;
  stroke-width: 1px;
}
.pfix-ct .pfix-ct-map--office .pfix-ct-map__state.is-office {
  fill: #d6eaa8;
  stroke: var(--ct-lime-ink);
  stroke-width: 1.5px;
}
.pfix-ct .pfix-ct-office__badge {
  position: absolute;
  left: 12px;
  top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 4px 8px;
  border-radius: 999px;
  background: var(--ct-dark);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.pfix-ct .pfix-ct-office__badge svg {
  width: 16px;
  height: 16px;
  color: var(--ct-lime);
}
.pfix-ct .pfix-ct-office__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  padding: 20px 20px 22px;
}
.pfix-ct .pfix-ct-office__name {
  display: flex;
  flex-direction: column;
  color: var(--ct-ink);
  font-size: 21px;
  font-weight: 800;
  line-height: 1.2;
}
.pfix-ct .pfix-ct-office__name span {
  margin-top: 2px;
  color: var(--ct-lime-ink);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pfix-ct .pfix-ct-office__address {
  display: flex;
  gap: 8px;
  color: var(--ct-text);
  font-size: 15.5px;
  line-height: 1.5;
}
/* One line each for the street and the town (the site's stylesheet hides <br>). */
.pfix-ct .pfix-ct-office__address > span > span {
  display: block;
}
.pfix-ct .pfix-ct-office__address svg {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--ct-muted);
}
.pfix-ct .pfix-ct-office__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}
.pfix-ct .pfix-ct-office__actions a.pfix-ct-btn {
  flex: 1 1 auto;
  padding-left: 14px;
  padding-right: 14px;
  font-size: 15px;
}
.pfix-ct .pfix-ct-office--hq {
  grid-column: span 2;
  flex-direction: row;
  border-color: var(--ct-dark);
}
.pfix-ct .pfix-ct-office--hq .pfix-ct-office__map {
  flex: 1.1 1 0;
  aspect-ratio: auto;
  min-height: 260px;
}
.pfix-ct .pfix-ct-office--hq .pfix-ct-office__body {
  flex: 1 1 0;
  justify-content: center;
  padding: 26px;
  background: var(--ct-dark);
}
.pfix-ct .pfix-ct-office--hq .pfix-ct-office__name {
  color: #fff;
  font-size: 26px;
}
.pfix-ct .pfix-ct-office--hq .pfix-ct-office__name span {
  color: var(--ct-lime);
}
.pfix-ct .pfix-ct-office--hq .pfix-ct-office__address {
  color: #dfe6d4;
}
.pfix-ct .pfix-ct-office--hq .pfix-ct-office__address svg {
  color: var(--ct-lime);
}
.pfix-ct .pfix-ct-office--hq .pfix-ct-office__actions {
  margin-top: 6px;
}
.pfix-ct .pfix-ct-office--hq a.pfix-ct-btn--ghost {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}
.pfix-ct .pfix-ct-office--hq a.pfix-ct-btn--ghost:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.1);
}
.pfix-ct .pfix-ct-office--hq a.pfix-ct-btn:focus-visible {
  outline-color: var(--ct-lime);
}

/* Closing band. */
.pfix-ct .pfix-ct-cta {
  padding: clamp(44px, 5vw, 64px) 0;
  background: var(--ct-lime);
  color: var(--ct-dark);
}
.pfix-ct .pfix-ct-cta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 40px;
}
.pfix-ct .pfix-ct-cta__title {
  color: var(--ct-dark);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 800;
  line-height: 1.15;
}
.pfix-ct .pfix-ct-cta__text {
  margin-top: 6px;
  font-size: 17px;
}
.pfix-ct .pfix-ct-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.pfix-ct .pfix-ct-cta a:focus-visible {
  outline-color: var(--ct-dark);
}

@media (max-width: 1100px) {
  .pfix-ct .pfix-ct-offices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 860px) {
  .pfix-ct .pfix-ct-hero__inner {
    grid-template-columns: minmax(0, 1fr);
  }
  .pfix-ct .pfix-ct-hero__map {
    max-width: 560px;
  }
}
@media (max-width: 767px) {
  /* !important: the site's stylesheet sets every h1 on phones to 22px !important */
  .pfix-ct .pfix-ct-hero__title {
    font-size: 36px !important;
  }
}
@media (max-width: 640px) {
  .pfix-ct .pfix-ct-offices {
    grid-template-columns: minmax(0, 1fr);
  }
  .pfix-ct .pfix-ct-office--hq {
    grid-column: auto;
    flex-direction: column;
  }
  .pfix-ct .pfix-ct-office--hq .pfix-ct-office__map {
    flex: none;
    aspect-ratio: 8 / 5;
    min-height: 0;
  }
  .pfix-ct .pfix-ct-cta__actions,
  .pfix-ct .pfix-ct-cta__actions a.pfix-ct-btn {
    width: 100%;
  }
  .pfix-ct a.pfix-ct-quick__item b {
    font-size: 17px;
  }
  .pfix-ct a.pfix-ct-quick__item--call b {
    font-size: 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pfix-ct .pfix-ct-pin__ring {
    animation: none;
  }
  .pfix-ct .pfix-ct-office,
  .pfix-ct a.pfix-ct-quick__item {
    transition: none;
  }
  .pfix-ct .pfix-ct-office:hover,
  .pfix-ct a.pfix-ct-quick__item:hover {
    transform: none;
  }
}

/* /services/ (services-hero.mjs): the hero. The same look as the other redesigned heroes
   (/about/, /offers/): the photo of a Panda roofer installing solar shingles (a WebP copy),
   darkened behind the text, with a chip per service and estimate and call buttons. */
.hero-section.pfix-sv-hero,
.types.pfix-sv-hero {
  position: relative;
  isolation: isolate;
  background-color: #1a2418;
  background-size: cover;
  background-position: 50% 40%;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-blend-mode: normal;
}
/* Each page's photo: /services/ a Panda roofer installing solar shingles, /gutters/ a gutter
   guard close up. */
.hero-section.pfix-sv-hero--services {
  background-image: url("/_custom/site-fixes/services-hero.webp");
}
.hero-section.pfix-sv-hero--gutters {
  background-image: url("/wp-content/uploads/2025/04/hero-gutters.jpg");
  background-position: 50% 50%;
}
.hero-section.pfix-sv-hero--guards {
  background-image: url("/_custom/site-fixes/gutter-guards-hero.webp");
  background-position: 50% 50%;
}
.hero-section.pfix-sv-hero--siding {
  background-image: url("/_custom/site-fixes/siding-hero.webp");
  background-position: 50% 40%;
}
.hero-section.pfix-sv-hero--costs {
  background-image: url("/wp-content/uploads/2025/05/GAF-Solar-Shingle-Installation-1.jpg.webp");
  background-position: 50% 45%;
}
.hero-section.pfix-sv-hero--roofing {
  background-image: url("/wp-content/uploads/2025/04/hero-roofing.jpg");
  background-position: 50% 55%;
}
.hero-section.pfix-sv-hero--solar {
  background-image: url("/wp-content/uploads/2025/03/8a443005-9df9-4777-839c-45cf7d4b9f2e-1.jpg.webp");
  background-position: 50% 40%;
}
.hero-section.pfix-sv-hero--solar-shingles {
  background-image: url("/wp-content/uploads/2025/05/GAF-Solar-Shingle-Installation-1.jpg.webp");
  background-position: 50% 45%;
}
/* /commercial-roofing/: the white TPO roof from Panda's "Expert TPO Roofing" project. */
.hero-section.pfix-sv-hero--commercial {
  background-image: url("/_custom/site-fixes/commercial-hero.webp");
  background-position: 50% 60%;
}
/* /roofing/types/: a close-up of shingles (its hero is the page's own block, .types, not a
   .hero-section). */
/* /roofing/attic-insulation/: a roofer fitting insulation between the rafters. */
.hero-section.pfix-sv-hero--attic {
  background-image: url("/wp-content/uploads/2025/04/Attic-Insulation.jpg");
  background-position: 50% 35%;
}
/* /roofing/replacement/: an aerial photo of a roof being replaced. */
.hero-section.pfix-sv-hero--replacement {
  background-image: url("/wp-content/uploads/2025/04/Roof-Replacement.jpg.webp");
  background-position: 50% 45%;
}
.types.pfix-sv-hero--types {
  background-image: url("/wp-content/uploads/2025/04/Roofing-Shingles.jpg");
  background-position: 50% 50%;
}
.hero-section.pfix-sv-hero::before,
.types.pfix-sv-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(12, 17, 11, 0.92) 0%, rgba(12, 17, 11, 0.8) 40%, rgba(12, 17, 11, 0.4) 68%, rgba(12, 17, 11, 0.25) 100%),
    linear-gradient(0deg, rgba(12, 17, 11, 0.45) 0%, rgba(12, 17, 11, 0) 45%);
  pointer-events: none;
}
.pfix-sv-hero .text-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  color: #ffffff;
  font-family: var(--robboto, Roboto), system-ui, sans-serif;
  text-align: left;
}
.pfix-sv-hero .text-section > * {
  max-width: 100%;
  margin: 0;
}
.pfix-sv-hero .pfix-sv-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #c3ea79;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.pfix-sv-hero .pfix-sv-hero__eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.pfix-sv-hero .text-section .pfix-sv-hero__title {
  padding: 0;
  color: #ffffff;
  font-family: inherit;
  font-size: 52px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-align: left;
  text-wrap: balance;
}
.pfix-sv-hero .pfix-sv-hero__sub {
  padding: 0;
  color: #eef0ea;
  font-size: 19px;
  line-height: 1.55;
  text-align: left;
}

/* A chip per service, on frosted glass. */
.pfix-sv-hero .pfix-sv-hero__services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 560px;
}
.pfix-sv-hero a.pfix-sv-hero__service {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #ffffff;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.pfix-sv-hero a.pfix-sv-hero__service svg {
  flex: none;
  width: 22px;
  height: 22px;
  color: #c3ea79;
}
.pfix-sv-hero a.pfix-sv-hero__service:hover {
  border-color: #9acd32;
  background: rgba(154, 205, 50, 0.22);
  color: #ffffff;
  transform: translateY(-1px);
}
.pfix-sv-hero a.pfix-sv-hero__service:focus-visible {
  outline: 3px solid #c3ea79;
  outline-offset: 2px;
}

/* Two chips with a line each (/gutters/). */
.pfix-sv-hero .pfix-sv-hero__services--wide {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pfix-sv-hero .pfix-sv-hero__services--wide a.pfix-sv-hero__service {
  align-items: flex-start;
  padding: 14px 16px;
}
.pfix-sv-hero .pfix-sv-hero__services--wide a.pfix-sv-hero__service svg {
  width: 26px;
  height: 26px;
}
.pfix-sv-hero a.pfix-sv-hero__service span {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pfix-sv-hero a.pfix-sv-hero__service b {
  font-size: 16.5px;
  font-weight: 700;
}
.pfix-sv-hero a.pfix-sv-hero__service small {
  color: #d4dacb;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.35;
}
/* A longer heading. */
.pfix-sv-hero--gutters .text-section .pfix-sv-hero__title,
.pfix-sv-hero--guards .text-section .pfix-sv-hero__title,
.pfix-sv-hero--siding .text-section .pfix-sv-hero__title,
.pfix-sv-hero--roofing .text-section .pfix-sv-hero__title,
.pfix-sv-hero--solar .text-section .pfix-sv-hero__title,
.pfix-sv-hero--solar-shingles .text-section .pfix-sv-hero__title,
.pfix-sv-hero--commercial .text-section .pfix-sv-hero__title,
.pfix-sv-hero--types .text-section .pfix-sv-hero__title,
.pfix-sv-hero--replacement .text-section .pfix-sv-hero__title,
.pfix-sv-hero--attic .text-section .pfix-sv-hero__title {
  font-size: 46px;
}
/* The brands a page installs (/siding/: James Hardie, CertainTeed), in white. */
.pfix-sv-hero .pfix-sv-hero__brands {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 32px;
  padding-top: 6px;
}
/* !important: the hero's own stylesheet sizes every picture in it. */
.pfix-sv-hero .pfix-sv-hero__brands img {
  display: block;
  width: auto !important;
  max-width: 100%;
  height: 34px !important;
  margin: 0;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

/* Estimate and call buttons. */
.pfix-sv-hero .pfix-sv-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.pfix-sv-hero a.pfix-sv-hero__btn,
.pfix-sv-hero a.pfix-sv-hero__btn:hover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 24px;
  border: 2px solid transparent;
  border-radius: 30px;
  color: #ffffff;
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}
.pfix-sv-hero a.pfix-sv-hero__btn svg {
  flex: none;
  width: 18px;
  height: 18px;
}
.pfix-sv-hero a.pfix-sv-hero__btn--primary {
  background: #f26924;
}
.pfix-sv-hero a.pfix-sv-hero__btn--primary:hover {
  background: #e2531a;
}
.pfix-sv-hero a.pfix-sv-hero__btn--ghost {
  border-color: rgba(255, 255, 255, 0.75);
  background: transparent;
}
.pfix-sv-hero a.pfix-sv-hero__btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
}
.pfix-sv-hero a.pfix-sv-hero__btn:focus-visible {
  outline: 3px solid #c3ea79;
  outline-offset: 2px;
}
@media (min-width: 1200px) {
  .pfix-sv-hero .text-section {
    width: 580px;
  }
}
/* Side by side in the narrower container: leave a gap before the form. */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .pfix-sv-hero .text-section {
    width: 470px;
  }
  .pfix-sv-hero .text-section .pfix-sv-hero__title {
    font-size: 42px;
  }
  .pfix-sv-hero .pfix-sv-hero__services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Columns stacked: the text above the form, darkened evenly. */
@media (max-width: 1023.98px) {
  .hero-section.pfix-sv-hero::before,
  .types.pfix-sv-hero::before {
    background: linear-gradient(180deg, rgba(12, 17, 11, 0.86) 0%, rgba(12, 17, 11, 0.7) 55%, rgba(12, 17, 11, 0.58) 100%);
  }
  .pfix-sv-hero .hero-text-col {
    align-self: stretch;
    min-width: 0;
    max-width: 100%;
  }
  .pfix-sv-hero .text-section {
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
  }
  .pfix-sv-hero .text-section .pfix-sv-hero__title {
    font-size: 42px;
  }
}
@media (max-width: 767.98px) {
  .pfix-sv-hero .text-section {
    gap: 14px;
    padding-top: 8px;
  }
  /* !important: the site's stylesheet sets every h1 on phones to 22px !important */
  .pfix-sv-hero .text-section .pfix-sv-hero__title {
    font-size: 34px !important;
  }
  .pfix-sv-hero .pfix-sv-hero__sub {
    font-size: 16px;
    line-height: 1.5;
  }
  .pfix-sv-hero .pfix-sv-hero__services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-width: none;
  }
  .pfix-sv-hero a.pfix-sv-hero__service {
    min-height: 48px;
    padding: 10px 12px;
    font-size: 15px;
  }
  .pfix-sv-hero .pfix-sv-hero__services--wide {
    grid-template-columns: minmax(0, 1fr);
  }
  .pfix-sv-hero .pfix-sv-hero__ctas {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pfix-sv-hero a.pfix-sv-hero__service {
    transition: none;
  }
  .pfix-sv-hero a.pfix-sv-hero__service:hover {
    transform: none;
  }
}

@media (max-width: 1199.98px) {
  .pfix-sv-hero--gutters .text-section .pfix-sv-hero__title,
  .pfix-sv-hero--guards .text-section .pfix-sv-hero__title,
  .pfix-sv-hero--siding .text-section .pfix-sv-hero__title,
  .pfix-sv-hero--roofing .text-section .pfix-sv-hero__title,
.pfix-sv-hero--solar .text-section .pfix-sv-hero__title,
.pfix-sv-hero--solar-shingles .text-section .pfix-sv-hero__title,
.pfix-sv-hero--commercial .text-section .pfix-sv-hero__title,
.pfix-sv-hero--types .text-section .pfix-sv-hero__title,
.pfix-sv-hero--replacement .text-section .pfix-sv-hero__title,
.pfix-sv-hero--attic .text-section .pfix-sv-hero__title {
    font-size: 38px;
  }
}
@media (max-width: 767.98px) {
  /* !important: the site's stylesheet sets every h1 on phones to 22px !important */
  .pfix-sv-hero--gutters .text-section .pfix-sv-hero__title,
  .pfix-sv-hero--guards .text-section .pfix-sv-hero__title,
  .pfix-sv-hero--siding .text-section .pfix-sv-hero__title,
  .pfix-sv-hero--roofing .text-section .pfix-sv-hero__title,
.pfix-sv-hero--solar .text-section .pfix-sv-hero__title,
.pfix-sv-hero--solar-shingles .text-section .pfix-sv-hero__title,
.pfix-sv-hero--commercial .text-section .pfix-sv-hero__title,
.pfix-sv-hero--types .text-section .pfix-sv-hero__title,
.pfix-sv-hero--replacement .text-section .pfix-sv-hero__title,
.pfix-sv-hero--attic .text-section .pfix-sv-hero__title {
    font-size: 30px !important;
  }
  .pfix-sv-hero .pfix-sv-hero__brands img {
    height: 28px !important;
  }
}

/* A spot a link jumps to, below the fixed header. */
.pfix-anchor {
  display: block;
  scroll-margin-top: 150px;
}

/* /gutters/ (gutters-page.mjs): "Why Work with Our East Coast Exterior Specialists?" as white
   cards with an icon each and dark text (it was white on lime). */
.roofers-section:has(.pfix-why) {
  background: #f5f7ef;
}
.roofers-section:has(.pfix-why) h2 {
  color: #14180f;
  font-weight: 800;
  text-wrap: balance;
}
.Roof-grid.pfix-why {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  max-width: 1160px;
  margin: 0 auto;
}
.pfix-why .pfix-why__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 30px 28px;
  border: 1px solid #e4e8dc;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(20, 24, 15, 0.05);
  font-family: var(--robboto, Roboto), system-ui, sans-serif;
  text-align: left;
}
.pfix-why .pfix-why__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 6px;
  border-radius: 14px;
  background: #eef6dc;
  color: #4d7c0f;
}
.pfix-why .pfix-why__icon svg {
  display: block;
  width: 28px;
  height: 28px;
}
.pfix-why h4.pfix-why__title {
  margin: 0;
  padding: 0;
  color: #14180f;
  font-family: inherit;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
}
.pfix-why p.pfix-why__text {
  margin: 0;
  color: #5d6656;
  font-size: 16px;
  line-height: 1.6;
  text-align: left;
}
@media (max-width: 900px) {
  .Roof-grid.pfix-why {
    grid-template-columns: minmax(0, 1fr);
    max-width: 560px;
  }
}

/* The offers band on other pages (offers-page.mjs, collectOffersStrip): the /offers/ page's
   coupon cards, then financing and a link to all the offers. */
.pfix-of--strip .pfix-of-strip__more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 28px;
  margin: 28px 0 0;
  color: var(--of-text, #3f463a);
  font-size: 16px;
  text-align: center;
}
.pfix-of--strip .pfix-of-strip__more > span {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.pfix-of--strip .pfix-of-strip__more svg {
  width: 22px;
  height: 22px;
  color: var(--of-lime-ink, #4d7c0f);
}
.pfix-of--strip .pfix-of-strip__more a.pfix-of-btn--ghost,
.pfix-of--strip .pfix-of-strip__more a.pfix-of-btn--ghost:hover {
  border: 2px solid var(--of-ink, #14180f);
  color: var(--of-ink, #14180f);
}
.pfix-of--strip .pfix-of-strip__more a.pfix-of-btn--ghost:hover {
  background: var(--of-ink, #14180f);
  color: #ffffff;
}

/* /gutters/gutter-guards/ (gutter-guards-page.mjs). Roboto; charcoal green, Panda lime and
   orange from the site's palette.

   The intro: its words, as a heading and two paragraphs beside a rounded photo. */
.Service-container.pfix-gg-intro {
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  padding-top: clamp(48px, 6vw, 88px) !important;
  padding-bottom: clamp(48px, 6vw, 88px) !important;
  font-family: var(--robboto, Roboto), system-ui, sans-serif;
}
.pfix-gg-intro .flext-head {
  color: #14180f;
  font-family: inherit;
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 800;
  line-height: 1.15;
  text-wrap: balance;
}
.pfix-gg-intro .flext-head::before {
  content: "Gutter guards";
  display: block;
  margin-bottom: 10px;
  color: #c2410c;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pfix-gg-intro .flex-para {
  color: #3f463a;
  font-size: 17px;
  line-height: 1.7;
}
.pfix-gg-intro .flex-para a {
  font-weight: 600;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}
.pfix-gg-intro .Flex-image img {
  border-radius: 22px;
  box-shadow: 0 20px 44px rgba(20, 24, 15, 0.16);
}

/* The sections under the intro. */
.pfix-gg {
  --gg-ink: #14180f;
  --gg-text: #3f463a;
  --gg-muted: #5d6656;
  --gg-line: #e4e8dc;
  --gg-bg: #f5f7ef;
  --gg-orange: #f26924;
  --gg-orange-ink: #c2410c;
  --gg-lime: #9acd32;
  --gg-lime-ink: #4d7c0f;
  --gg-dark: #172015;
  color: var(--gg-text);
  font-family: var(--robboto, Roboto), system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}
.pfix-gg *,
.pfix-gg *::before,
.pfix-gg *::after {
  box-sizing: border-box;
}
.pfix-gg p,
.pfix-gg h2,
.pfix-gg h3 {
  margin: 0;
  padding: 0;
  font-family: inherit;
}
.pfix-gg svg {
  display: block;
  flex: none;
}
.pfix-gg .pfix-gg-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.pfix-gg .pfix-gg__sec {
  padding: clamp(56px, 7vw, 92px) 0;
  scroll-margin-top: 140px;
}
.pfix-gg .pfix-gg__sec:first-child {
  background: var(--gg-bg);
}
.pfix-gg .pfix-gg__inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.pfix-gg .pfix-gg__inner--narrow {
  max-width: 880px;
}
.pfix-gg .pfix-gg__head {
  max-width: 760px;
  margin: 0 auto clamp(30px, 4vw, 46px);
  text-align: center;
}
.pfix-gg .pfix-gg__eyebrow {
  margin-bottom: 10px;
  color: var(--gg-orange-ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pfix-gg .pfix-gg__title {
  color: var(--gg-ink);
  font-size: clamp(28px, 3.3vw, 40px);
  font-weight: 800;
  line-height: 1.15;
  text-wrap: balance;
}
.pfix-gg .pfix-gg__sub {
  margin-top: 14px;
  color: var(--gg-muted);
  font-size: 17px;
}

/* Benefits. */
.pfix-gg .pfix-gg-benefits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.pfix-gg .pfix-gg-benefit {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 24px;
  border: 1px solid var(--gg-line);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(20, 24, 15, 0.05);
}
.pfix-gg .pfix-gg-benefit__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 4px;
  border-radius: 14px;
  background: #eef6dc;
  color: var(--gg-lime-ink);
}
.pfix-gg .pfix-gg-benefit__icon svg {
  width: 28px;
  height: 28px;
}
.pfix-gg .pfix-gg-benefit h3 {
  color: var(--gg-ink);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}
.pfix-gg .pfix-gg-benefit p {
  color: var(--gg-muted);
  font-size: 15.5px;
}

/* How it works. */
.pfix-gg .pfix-gg__sec--steps {
  background: var(--gg-dark);
}
.pfix-gg .pfix-gg__sec--steps .pfix-gg__title {
  color: #ffffff;
}
.pfix-gg .pfix-gg__sec--steps .pfix-gg__eyebrow {
  color: var(--gg-lime);
}
.pfix-gg .pfix-gg-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  counter-reset: none;
}
.pfix-gg .pfix-gg-step {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px 24px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
}
.pfix-gg .pfix-gg-step__n {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: var(--gg-lime);
  color: var(--gg-dark);
  font-size: 18px;
  font-weight: 800;
}
.pfix-gg .pfix-gg-step h3 {
  color: #ffffff;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
}
.pfix-gg .pfix-gg-step p {
  color: #c4ceb6;
  font-size: 15.5px;
}

/* Questions (<details>, so they work without JavaScript). */
.pfix-gg .pfix-gg-faq {
  display: grid;
  gap: 12px;
}
.pfix-gg .pfix-gg-faq__item {
  border: 1px solid var(--gg-line);
  border-radius: 16px;
  background: #ffffff;
  transition: box-shadow 0.2s ease;
}
.pfix-gg .pfix-gg-faq__item[open] {
  box-shadow: 0 10px 26px rgba(20, 24, 15, 0.08);
}
.pfix-gg .pfix-gg-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  color: var(--gg-ink);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}
.pfix-gg .pfix-gg-faq__item summary::-webkit-details-marker {
  display: none;
}
.pfix-gg .pfix-gg-faq__item summary:focus-visible {
  outline: 3px solid var(--gg-orange);
  outline-offset: 2px;
  border-radius: 16px;
}
.pfix-gg .pfix-gg-faq__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #eef6dc;
  color: var(--gg-lime-ink);
  transition: transform 0.2s ease;
}
.pfix-gg .pfix-gg-faq__icon svg {
  width: 16px;
  height: 16px;
}
.pfix-gg .pfix-gg-faq__item[open] .pfix-gg-faq__icon {
  transform: rotate(45deg);
}
.pfix-gg .pfix-gg-faq__item p {
  padding: 0 22px 20px;
  color: var(--gg-muted);
  font-size: 16px;
}

/* "Need new gutters too?" */
.pfix-gg .pfix-gg-band {
  padding: clamp(40px, 5vw, 60px) 0;
  background: var(--gg-lime);
  color: var(--gg-dark);
}
.pfix-gg .pfix-gg-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 40px;
}
.pfix-gg .pfix-gg-band__title {
  color: var(--gg-dark);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 800;
  line-height: 1.15;
}
.pfix-gg .pfix-gg-band__text {
  max-width: 620px;
  margin-top: 6px;
  font-size: 17px;
}
.pfix-gg .pfix-gg-band__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.pfix-gg a.pfix-gg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 12px 22px;
  border: 2px solid var(--gg-dark);
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.pfix-gg a.pfix-gg-btn svg {
  width: 18px;
  height: 18px;
}
.pfix-gg a.pfix-gg-btn--light {
  background: var(--gg-dark);
  color: #ffffff;
}
.pfix-gg a.pfix-gg-btn--light:hover {
  background: #000000;
  color: #ffffff;
}
.pfix-gg a.pfix-gg-btn--outline {
  background: transparent;
  color: var(--gg-dark);
}
.pfix-gg a.pfix-gg-btn--outline:hover {
  background: var(--gg-dark);
  color: #ffffff;
}
.pfix-gg a.pfix-gg-btn:focus-visible {
  outline: 3px solid var(--gg-dark);
  outline-offset: 3px;
}

@media (max-width: 1024px) {
  .pfix-gg .pfix-gg-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 860px) {
  .pfix-gg .pfix-gg-steps {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 560px) {
  .pfix-gg .pfix-gg-benefits {
    grid-template-columns: minmax(0, 1fr);
  }
  .pfix-gg .pfix-gg-band__btns,
  .pfix-gg .pfix-gg-band__btns a.pfix-gg-btn {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pfix-gg .pfix-gg-faq__icon,
  .pfix-gg .pfix-gg-faq__item,
  .pfix-gg a.pfix-gg-btn {
    transition: none;
  }
}

/* /solar/gaf-solar-roof/ (solar-pages.mjs): the Gutter Guards page's intro and sections,
   with the intro's own label and solar shingles and panels side by side. */
.pfix-ss-intro .flext-head::before {
  content: "GAF solar shingles";
}
.pfix-gg .pfix-ss-compare {
  background: var(--gg-bg);
}
.pfix-gg .pfix-ss-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 980px;
  margin: 0 auto;
}
.pfix-gg .pfix-ss-option {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid var(--gg-line);
  border-top: 4px solid var(--gg-orange);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(20, 24, 15, 0.05);
}
.pfix-gg .pfix-ss-option--here {
  border-top-color: var(--gg-lime);
}
.pfix-gg .pfix-ss-option__top {
  display: flex;
  align-items: center;
  gap: 16px;
}
.pfix-gg .pfix-ss-option__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #fff3ea;
  color: var(--gg-orange-ink);
}
.pfix-gg .pfix-ss-option--here .pfix-ss-option__icon {
  background: #eef6dc;
  color: var(--gg-lime-ink);
}
.pfix-gg .pfix-ss-option__icon svg {
  width: 28px;
  height: 28px;
}
.pfix-gg .pfix-ss-option h3 {
  color: var(--gg-ink);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
}
.pfix-gg .pfix-ss-option h3 span {
  display: block;
  margin-top: 2px;
  color: var(--gg-muted);
  font-size: 15px;
  font-weight: 500;
}
.pfix-gg .pfix-ss-option__list {
  display: grid;
  flex: 1;
  gap: 10px;
}
.pfix-gg .pfix-ss-option__list > div {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.pfix-gg .pfix-ss-option__list svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  color: var(--gg-lime-ink);
}
/* Under the two: the full comparison is on Solar Options. */
.pfix-gg .pfix-ss-more {
  margin: 28px 0 0;
  text-align: center;
}
.pfix-gg .pfix-ss-option__here {
  align-self: flex-start;
  padding: 6px 14px;
  border-radius: 999px;
  background: #eef6dc;
  color: var(--gg-lime-ink);
  font-size: 14px;
  font-weight: 700;
}
.pfix-gg a.pfix-ss-option__link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  color: var(--gg-orange-ink);
  font-weight: 700;
  text-decoration: none;
}
.pfix-gg a.pfix-ss-option__link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pfix-gg a.pfix-ss-option__link svg {
  width: 18px;
  height: 18px;
}
@media (max-width: 767.98px) {
  .pfix-gg .pfix-ss-options {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* /siding/'s heading there is an h3 in a block, set white (!important: Bootstrap's
   .text-white is). */
.roofers-section:has(.pfix-why) .heading-2,
.roofers-section:has(.pfix-why) .heading-2 h3 {
  color: #14180f !important;
  font-family: var(--robboto, Roboto), system-ui, sans-serif;
  font-size: clamp(28px, 3.3vw, 40px);
  font-weight: 800;
  line-height: 1.15;
  text-wrap: balance;
}
/* The light band also where the section is lime by class (/siding/'s .primary-bg). */
.roofers-section.primary-bg:has(.pfix-why) {
  background: #f5f7ef !important;
}
/* /roofing/: on Panda orange (the light offers band is above it, the white testimonials
   below), like /roofing-costs/' "Quality Roof Replacements", with the heading in white. */
.roofers-section.primary-bg.pfix-why-band--orange:has(.pfix-why) {
  background:
    radial-gradient(circle at 92% 10%, rgba(255, 255, 255, 0.14), transparent 38%),
    linear-gradient(120deg, #f26924 0%, #e2531a 100%) !important;
}
.roofers-section.pfix-why-band--orange:has(.pfix-why) .heading-2 {
  color: #ffffff !important;
}
.pfix-why-band--orange .pfix-why .pfix-why__card {
  border-color: transparent;
  box-shadow: 0 16px 36px rgba(120, 40, 5, 0.22);
}
.pfix-why-band--orange .pfix-why .pfix-why__icon {
  background: #fff1e8;
  color: #c2410c;
}

/* /customer-service/ (customer-service-page.mjs): a help page. The Contact page's hero and
   quick contacts, then the help topics as white icon cards on a light band. */
.pfix-cs {
  --cs-ink: #14180f;
  --cs-text: #3f463a;
  --cs-muted: #5d6656;
  --cs-line: #e4e8dc;
  --cs-bg: #f5f7ef;
  --cs-orange: #f26924;
  --cs-orange-ink: #c2410c;
  --cs-lime: #9acd32;
  --cs-lime-ink: #4d7c0f;
  --cs-dark: #172015;
  width: 100%;
  overflow: hidden;
  color: var(--cs-text);
  font-family: var(--robboto, Roboto), system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}
.pfix-cs *,
.pfix-cs *::before,
.pfix-cs *::after {
  box-sizing: border-box;
}
.pfix-cs p,
.pfix-cs h1,
.pfix-cs h2,
.pfix-cs h3 {
  margin: 0;
  padding: 0;
  font-family: inherit;
}
.pfix-cs svg {
  display: block;
  flex: none;
}
.pfix-cs .pfix-cs-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.pfix-cs .pfix-cs__inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.pfix-cs .pfix-cs__eyebrow {
  margin-bottom: 10px;
  color: var(--cs-orange-ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pfix-cs .pfix-cs__eyebrow--light {
  color: var(--cs-lime);
}
.pfix-cs a:focus-visible {
  outline: 3px solid var(--cs-orange);
  outline-offset: 3px;
}

/* Hero: the heading and line, then call, email and local offices in a row. */
.pfix-cs .pfix-cs-hero {
  padding: clamp(52px, 7vw, 96px) 0 clamp(48px, 6vw, 80px);
  background:
    radial-gradient(circle at 88% 12%, rgba(154, 205, 50, 0.22), transparent 42%),
    radial-gradient(circle at 0% 100%, rgba(242, 105, 36, 0.24), transparent 40%),
    linear-gradient(160deg, #222f1e 0%, var(--cs-dark) 62%);
  color: #dfe6d4;
}
.pfix-cs .pfix-cs-hero__title {
  max-width: 820px;
  color: #fff;
  font-size: clamp(36px, 4.8vw, 60px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.pfix-cs .pfix-cs-hero__sub {
  max-width: 620px;
  margin: 18px 0 clamp(28px, 4vw, 40px);
  color: #c9d3bc;
  font-size: clamp(17px, 1.5vw, 19px);
}
.pfix-cs .pfix-cs-quick {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.pfix-cs a.pfix-cs-quick__item {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.pfix-cs a.pfix-cs-quick__item:hover {
  border-color: var(--cs-lime);
  background: rgba(154, 205, 50, 0.12);
  color: #fff;
  transform: translateY(-1px);
}
.pfix-cs .pfix-cs-quick__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 50%;
  background: rgba(154, 205, 50, 0.16);
  color: var(--cs-lime);
}
.pfix-cs .pfix-cs-quick__icon svg {
  width: 22px;
  height: 22px;
}
.pfix-cs a.pfix-cs-quick__item > span:last-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}
.pfix-cs a.pfix-cs-quick__item small {
  color: #a9b59a;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pfix-cs a.pfix-cs-quick__item b {
  overflow-wrap: anywhere;
  font-size: 18px;
  font-weight: 700;
}
.pfix-cs a.pfix-cs-quick__item--call {
  border-color: var(--cs-orange);
  background: var(--cs-orange);
}
.pfix-cs a.pfix-cs-quick__item--call:hover {
  border-color: #e2531a;
  background: #e2531a;
}
.pfix-cs a.pfix-cs-quick__item--call .pfix-cs-quick__icon {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.pfix-cs a.pfix-cs-quick__item--call small {
  color: #ffe6d6;
}
.pfix-cs a.pfix-cs-quick__item--call b {
  font-size: 22px;
}

/* How can we help: white icon cards on a light band. */
.pfix-cs .pfix-cs__sec {
  padding: clamp(56px, 7vw, 96px) 0;
  background: var(--cs-bg);
}
.pfix-cs .pfix-cs__head {
  max-width: 680px;
  margin: 0 auto clamp(30px, 4vw, 48px);
  text-align: center;
}
.pfix-cs .pfix-cs__title {
  color: var(--cs-ink);
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 800;
  line-height: 1.15;
  text-wrap: balance;
}
.pfix-cs .pfix-cs__intro {
  margin-top: 12px;
  color: var(--cs-muted);
  font-size: 17px;
}
/* /contact-us/: the help topics as "Already a customer?" (the Customer Service page, merged in). */
.pfix-ct .pfix-ct-help {
  overflow: visible;
}
.pfix-cs .pfix-cs-topics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.pfix-cs .pfix-cs-topic {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(24px, 2.6vw, 32px);
  border: 1px solid var(--cs-line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(20, 24, 15, 0.04), 0 12px 32px -18px rgba(20, 24, 15, 0.22);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.pfix-cs .pfix-cs-topic:hover {
  border-color: #cfe3a6;
  box-shadow: 0 1px 2px rgba(20, 24, 15, 0.04), 0 18px 40px -18px rgba(20, 24, 15, 0.3);
  transform: translateY(-2px);
}
.pfix-cs .pfix-cs-topic__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 18px;
  border-radius: 14px;
  background: #eef6dc;
  color: var(--cs-lime-ink);
}
.pfix-cs .pfix-cs-topic__icon svg {
  width: 26px;
  height: 26px;
}
.pfix-cs .pfix-cs-topic h3 {
  margin-bottom: 8px;
  color: var(--cs-ink);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
}
.pfix-cs .pfix-cs-topic p {
  margin-bottom: 20px;
  color: var(--cs-muted);
  font-size: 16px;
}
.pfix-cs .pfix-cs-topic__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-top: auto;
}
.pfix-cs a.pfix-cs-topic__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--cs-orange-ink);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}
.pfix-cs a.pfix-cs-topic__link:hover {
  color: #9a3412;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pfix-cs a.pfix-cs-topic__link svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}
.pfix-cs a.pfix-cs-topic__link:hover svg {
  transform: translateX(3px);
}
.pfix-cs a.pfix-cs-topic__link--quiet {
  color: var(--cs-text);
}
.pfix-cs a.pfix-cs-topic__link--quiet:hover {
  color: var(--cs-ink);
}

@media (max-width: 1000px) {
  .pfix-cs .pfix-cs-topics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .pfix-cs .pfix-cs-quick {
    grid-template-columns: minmax(0, 1fr);
    max-width: 540px;
  }
}
@media (max-width: 767px) {
  /* !important: the site's stylesheet sets every h1 on phones to 22px !important */
  .pfix-cs .pfix-cs-hero__title {
    font-size: 36px !important;
  }
}
@media (max-width: 640px) {
  .pfix-cs .pfix-cs-topics {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pfix-cs a.pfix-cs-quick__item,
  .pfix-cs .pfix-cs-topic,
  .pfix-cs a.pfix-cs-topic__link svg {
    transition: none;
  }
  .pfix-cs a.pfix-cs-quick__item:hover,
  .pfix-cs .pfix-cs-topic:hover,
  .pfix-cs a.pfix-cs-topic__link:hover svg {
    transform: none;
  }
}

/* /customer-service/'s estimate block ("Planning a new project?") and /roofing/'s "About Our
   Team" (roofing-page.mjs), the white version of the block: on the charcoal green of
   the "About Our Team" blocks (.pfix-about: paragraphs, links and the lime button) instead
   of white. !important: Bootstrap's .bg-white and .text-black are !important. */
.Request-Container.pfix-cs-estimate {
  background:
    radial-gradient(circle at 92% 8%, rgba(154, 205, 50, 0.16), transparent 40%),
    radial-gradient(circle at 0% 100%, rgba(242, 105, 36, 0.16), transparent 38%),
    #1a2418 !important;
}
.pfix-cs-estimate .Local-text-col h2.heading {
  color: #fff !important;
}
.pfix-cs-estimate .Local-text-col .local-text {
  color: #d5dccb !important;
}

/* /roofing-costs/ (roofing-costs-page.mjs). Roboto; charcoal green, Panda lime and orange
   from the site's palette.

   The intro: its words, as a heading and paragraphs beside a rounded photo. */
.Service-container.pfix-rc-intro,
.Service-container.pfix-rt-intro,
.Service-container.pfix-rr-intro,
.Service-container.pfix-ai-intro {
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  padding-top: clamp(48px, 6vw, 88px) !important;
  padding-bottom: clamp(48px, 6vw, 88px) !important;
  font-family: var(--robboto, Roboto), system-ui, sans-serif;
}
.pfix-rc-intro .flext-head,
.pfix-rc-intro .flext-head h2,
.pfix-rt-intro .flext-head,
.pfix-rt-intro .flext-head h2,
.pfix-rr-intro .flext-head,
.pfix-rr-intro .flext-head h2,
.pfix-ai-intro .flext-head,
.pfix-ai-intro .flext-head h2 {
  color: #14180f;
  font-family: inherit;
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 800;
  line-height: 1.15;
  text-wrap: balance;
}
.pfix-rc-intro .flext-head .primary-color {
  color: #c2410c !important;
}
.pfix-rc-intro .flext-head::before,
.pfix-rt-intro .flext-head::before,
.pfix-rr-intro .flext-head::before,
.pfix-ai-intro .flext-head::before {
  content: "Roofing costs";
  display: block;
  margin-bottom: 10px;
  color: #c2410c;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pfix-rc-intro .flex-para,
.pfix-rt-intro .flex-para,
.pfix-rr-intro .flex-para,
.pfix-ai-intro .flex-para {
  padding-bottom: 14px !important;
  color: #3f463a;
  font-size: 17px;
  line-height: 1.7;
}
.pfix-rc-intro .flex-para .primary-color {
  color: #3f463a !important;
  font-weight: 700;
}
.pfix-rc-intro .Flex-image img,
.pfix-rt-intro .Flex-image img,
.pfix-ai-intro .Flex-image img {
  border-radius: 22px;
  box-shadow: 0 20px 44px rgba(20, 24, 15, 0.16);
}

/* The sections under the intro. */
.pfix-rc {
  --rc-ink: #14180f;
  --rc-text: #3f463a;
  --rc-muted: #5d6656;
  --rc-line: #e4e8dc;
  --rc-bg: #f5f7ef;
  --rc-orange: #f26924;
  --rc-orange-ink: #c2410c;
  --rc-lime: #9acd32;
  --rc-lime-ink: #4d7c0f;
  --rc-dark: #172015;
  color: var(--rc-text);
  font-family: var(--robboto, Roboto), system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}
.pfix-rc *,
.pfix-rc *::before,
.pfix-rc *::after {
  box-sizing: border-box;
}
.pfix-rc p,
.pfix-rc h2,
.pfix-rc h3,
.pfix-rc h4 {
  margin: 0;
  padding: 0;
  font-family: inherit;
}
.pfix-rc svg {
  display: block;
  flex: none;
}
.pfix-rc .pfix-rc-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.pfix-rc a:focus-visible {
  outline: 3px solid var(--rc-orange);
  outline-offset: 3px;
}
.pfix-rc .pfix-rc__sec,
.pfix-rc .pfix-rc-ins {
  padding: clamp(56px, 7vw, 92px) 0;
  scroll-margin-top: 140px;
}
.pfix-rc .pfix-rc__sec:first-child {
  background: var(--rc-bg);
}
.pfix-rc .pfix-rc__inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.pfix-rc .pfix-rc__inner--narrow {
  max-width: 880px;
}
.pfix-rc .pfix-rc__head {
  max-width: 780px;
  margin: 0 auto clamp(30px, 4vw, 46px);
  text-align: center;
}
.pfix-rc .pfix-rc__eyebrow {
  margin-bottom: 10px;
  color: var(--rc-orange-ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pfix-rc .pfix-rc__eyebrow--light {
  color: var(--rc-lime);
}
.pfix-rc .pfix-rc__title {
  color: var(--rc-ink);
  font-size: clamp(28px, 3.3vw, 40px);
  font-weight: 800;
  line-height: 1.15;
  text-wrap: balance;
}
.pfix-rc .pfix-rc__sub {
  margin-top: 14px;
  color: var(--rc-muted);
  font-size: 17px;
}

/* Cost factors and the quality cards. */
.pfix-rc .pfix-rc-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.pfix-rc .pfix-rc-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 24px;
  border: 1px solid var(--rc-line);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(20, 24, 15, 0.05);
}
/* "Quality Roof Replacements", on Panda orange (the offers' and solar's band), with the
   cards in white. */
.pfix-rc .pfix-rc__sec--orange {
  background:
    radial-gradient(circle at 92% 10%, rgba(255, 255, 255, 0.14), transparent 38%),
    linear-gradient(120deg, #f26924 0%, #e2531a 100%);
}
.pfix-rc .pfix-rc__sec--orange .pfix-rc__eyebrow {
  color: #ffe6d6;
}
.pfix-rc .pfix-rc__sec--orange .pfix-rc__title {
  color: #ffffff;
}
.pfix-rc .pfix-rc__sec--orange .pfix-rc__sub {
  color: #fff6ef;
  font-weight: 500;
}
.pfix-rc .pfix-rc__sec--orange .pfix-rc-card {
  border-color: transparent;
  box-shadow: 0 16px 36px rgba(120, 40, 5, 0.22);
}
.pfix-rc .pfix-rc-card__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 4px;
  border-radius: 14px;
  background: #eef6dc;
  color: var(--rc-lime-ink);
}
.pfix-rc .pfix-rc__sec--orange .pfix-rc-card__icon {
  background: #fff1e8;
  color: var(--rc-orange-ink);
}
.pfix-rc .pfix-rc-card__icon svg {
  width: 28px;
  height: 28px;
}
.pfix-rc .pfix-rc-card h3 {
  color: var(--rc-ink);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}
.pfix-rc .pfix-rc-card p {
  color: var(--rc-muted);
  font-size: 15.5px;
}
.pfix-rc a.pfix-rc-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
  color: var(--rc-orange-ink);
  font-size: 15.5px;
  font-weight: 700;
  text-decoration: none;
}
.pfix-rc a.pfix-rc-more:hover {
  color: #9a3412;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pfix-rc a.pfix-rc-more svg {
  width: 16px;
  height: 16px;
}

/* Insurance roofing, on charcoal green. */
.pfix-rc .pfix-rc-ins {
  background:
    radial-gradient(circle at 90% 6%, rgba(154, 205, 50, 0.18), transparent 40%),
    radial-gradient(circle at 0% 100%, rgba(242, 105, 36, 0.18), transparent 38%),
    linear-gradient(160deg, #222f1e 0%, var(--rc-dark) 62%);
  color: #dfe6d4;
}
.pfix-rc .pfix-rc-ins .pfix-rc__title {
  color: #ffffff;
}
.pfix-rc .pfix-rc-ins .pfix-rc__sub {
  color: #c9d3bc;
}
.pfix-rc .pfix-rc-cover {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: clamp(40px, 5vw, 60px);
}
.pfix-rc .pfix-rc-cover__col {
  padding: 26px 26px 22px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
}
.pfix-rc .pfix-rc-cover__col--yes {
  border-color: rgba(154, 205, 50, 0.45);
  background: rgba(154, 205, 50, 0.08);
}
.pfix-rc .pfix-rc-cover__col h3 {
  margin-bottom: 14px;
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
}
.pfix-rc .pfix-rc-cover__list {
  display: grid;
  gap: 10px;
}
.pfix-rc .pfix-rc-cover__list p {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #dfe6d4;
  font-size: 16px;
  line-height: 1.45;
}
.pfix-rc .pfix-rc-cover__list svg {
  width: 24px;
  height: 24px;
  padding: 4px;
  border-radius: 50%;
}
.pfix-rc .pfix-rc-cover__yes svg {
  background: var(--rc-lime);
  color: var(--rc-dark);
}
.pfix-rc .pfix-rc-cover__no svg {
  background: rgba(255, 255, 255, 0.14);
  color: #f3b391;
}
.pfix-rc .pfix-rc-ins__steps-title {
  margin-bottom: 20px;
  color: #ffffff;
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}
.pfix-rc .pfix-rc-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.pfix-rc .pfix-rc-step {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px 22px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
}
.pfix-rc .pfix-rc-step__n {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: var(--rc-lime);
  color: var(--rc-dark);
  font-size: 18px;
  font-weight: 800;
}
.pfix-rc .pfix-rc-step h4 {
  color: #ffffff;
  font-size: 18.5px;
  font-weight: 700;
  line-height: 1.3;
}
.pfix-rc .pfix-rc-step p {
  color: #c4ceb6;
  font-size: 15.5px;
}
.pfix-rc .pfix-rc-ins__foot {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 18px;
  margin-top: 18px;
}
.pfix-rc .pfix-rc-note {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 24px;
  border-left: 4px solid var(--rc-lime);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
}
.pfix-rc .pfix-rc-note svg {
  width: 26px;
  height: 26px;
  color: var(--rc-lime);
}
.pfix-rc .pfix-rc-note p {
  color: #d5dccb;
  font-size: 16px;
}
.pfix-rc .pfix-rc-note b {
  color: #ffffff;
}
.pfix-rc .pfix-rc-guides {
  display: flex;
  flex-direction: column;
  padding: 20px 24px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
}
.pfix-rc .pfix-rc-guides__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  color: var(--rc-lime);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pfix-rc .pfix-rc-guides__title svg {
  width: 20px;
  height: 20px;
}
.pfix-rc .pfix-rc-guides a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
}
.pfix-rc .pfix-rc-guides a:last-child {
  border-bottom: 0;
}
.pfix-rc .pfix-rc-guides a:hover {
  color: #c3ea79;
}
.pfix-rc .pfix-rc-guides a svg {
  width: 16px;
  height: 16px;
  color: var(--rc-lime);
}
.pfix-rc .pfix-rc-ins__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(30px, 4vw, 44px);
}
.pfix-rc a.pfix-rc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding: 13px 26px;
  border: 2px solid transparent;
  border-radius: 999px;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.pfix-rc a.pfix-rc-btn svg {
  width: 18px;
  height: 18px;
}
.pfix-rc a.pfix-rc-btn--primary {
  background: var(--rc-orange);
  color: #ffffff;
}
.pfix-rc a.pfix-rc-btn--primary:hover {
  background: #e2531a;
  color: #ffffff;
}
.pfix-rc a.pfix-rc-btn--ghost {
  border-color: rgba(255, 255, 255, 0.4);
  color: #ffffff;
}
.pfix-rc a.pfix-rc-btn--ghost:hover {
  border-color: var(--rc-lime);
  background: rgba(154, 205, 50, 0.12);
  color: #ffffff;
}

/* Questions (<details>, so they work without JavaScript). */
.pfix-rc .pfix-rc-faq {
  display: grid;
  gap: 12px;
}
.pfix-rc .pfix-rc-faq__item {
  border: 1px solid var(--rc-line);
  border-radius: 16px;
  background: #ffffff;
  transition: box-shadow 0.2s ease;
}
.pfix-rc .pfix-rc-faq__item[open] {
  box-shadow: 0 10px 26px rgba(20, 24, 15, 0.08);
}
.pfix-rc .pfix-rc-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  color: var(--rc-ink);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}
.pfix-rc .pfix-rc-faq__item summary::-webkit-details-marker {
  display: none;
}
.pfix-rc .pfix-rc-faq__item summary:focus-visible {
  outline: 3px solid var(--rc-orange);
  outline-offset: 2px;
  border-radius: 16px;
}
.pfix-rc .pfix-rc-faq__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #eef6dc;
  color: var(--rc-lime-ink);
  transition: transform 0.2s ease;
}
.pfix-rc .pfix-rc-faq__icon svg {
  width: 16px;
  height: 16px;
}
.pfix-rc .pfix-rc-faq__item[open] .pfix-rc-faq__icon {
  transform: rotate(45deg);
}
.pfix-rc .pfix-rc-faq__item p {
  padding: 0 22px 20px;
  color: var(--rc-muted);
  font-size: 16px;
}

@media (max-width: 1100px) {
  .pfix-rc .pfix-rc-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 1000px) {
  .pfix-rc .pfix-rc-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pfix-rc .pfix-rc-ins__foot {
    grid-template-columns: minmax(0, 1fr);
  }
  .pfix-rc .pfix-rc-note {
    align-items: flex-start;
  }
}
@media (max-width: 720px) {
  .pfix-rc .pfix-rc-cover {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 600px) {
  .pfix-rc .pfix-rc-cards,
  .pfix-rc .pfix-rc-steps {
    grid-template-columns: minmax(0, 1fr);
  }
  .pfix-rc .pfix-rc-ins__ctas,
  .pfix-rc .pfix-rc-ins__ctas a.pfix-rc-btn {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pfix-rc .pfix-rc-faq__icon,
  .pfix-rc .pfix-rc-faq__item,
  .pfix-rc a.pfix-rc-btn {
    transition: none;
  }
}

/* /roofing/attic-insulation/ (attic-insulation-page.mjs). The intro: its words beside a
   rounded photo, labelled like the other intros, with the page's facts. */
.pfix-ai-intro .flext-head::before {
  content: "Attic insulation";
}
.pfix-ai-intro .pfix-ai-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.pfix-ai-intro .pfix-ai-facts span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid #dfe8cc;
  border-radius: 999px;
  background: #f4f9e8;
  color: #14180f;
  font-family: var(--robboto, Roboto), system-ui, sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.2;
}
.pfix-ai-intro .pfix-ai-facts svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: #4d7c0f;
}

/* Why it matters, on cream: the paragraph and four benefits beside a drawing of heat leaving
   an attic without insulation and held in with it. */
.pfix-sp .pfix-sp__sec[id],
.pfix-sp.pfix-ai .pfix-sp__sec {
  scroll-margin-top: 140px;
}
.pfix-sp.pfix-ai .pfix-ai-why {
  background: #f6f8f1;
}
.pfix-sp .pfix-ai-why__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
}
.pfix-sp .pfix-ai-why__text .pfix-sp__head {
  margin: 0 0 26px;
  text-align: left;
}
.pfix-sp .pfix-ai-benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 24px;
}
.pfix-sp .pfix-ai-benefit {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.pfix-sp .pfix-ai-benefit__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(20, 24, 15, 0.08);
  color: #c2410c;
}
.pfix-sp .pfix-ai-benefit__icon svg {
  width: 22px;
  height: 22px;
}
.pfix-sp .pfix-ai-benefit h3 {
  margin-bottom: 4px;
  font-size: 17.5px;
}
.pfix-sp .pfix-ai-benefit p {
  color: var(--sp-muted);
  font-size: 15px;
  line-height: 1.5;
}
.pfix-sp .pfix-ai-diagram {
  display: grid;
  gap: 16px;
  margin: 0;
}
.pfix-sp .pfix-ai-diagram__panel {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  border: 1px solid #e4e8dc;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(20, 24, 15, 0.07);
}
.pfix-sp .pfix-ai-diagram__panel--good {
  border-color: #cfe5a6;
}
.pfix-sp .pfix-ai-diagram__panel p {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--sp-muted);
  font-size: 15px;
  line-height: 1.45;
}
.pfix-sp .pfix-ai-diagram__panel b {
  color: var(--sp-ink);
  font-size: 17px;
}
.pfix-sp .pfix-ai-diagram__panel--bad b {
  color: #c2410c;
}
.pfix-sp .pfix-ai-diagram__panel--good b {
  color: #4d7c0f;
}
.pfix-sp svg.pfix-ai-house {
  width: 100%;
  height: auto;
}
.pfix-ai-house .pfix-ai-house__ground {
  fill: #dfe6d2;
}
.pfix-ai-house .pfix-ai-house__rooms {
  fill: #fff4ec;
}
.pfix-ai-house .pfix-ai-house__walls {
  fill: none;
  stroke: #f3d9c6;
  stroke-width: 2;
}
.pfix-ai-house .pfix-ai-house__attic {
  fill: #f1ece4;
}
.pfix-ai-house .pfix-ai-house__roof {
  fill: none;
  stroke: #3b4038;
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pfix-ai-house .pfix-ai-house__ceiling {
  fill: none;
  stroke: #8a8f84;
  stroke-width: 3;
}
.pfix-ai-house .pfix-ai-house__insulation {
  fill: #f7c3b5;
}
.pfix-ai-house .pfix-ai-house__fluff {
  fill: none;
  stroke: #e79a86;
  stroke-width: 2;
  stroke-linejoin: round;
}
.pfix-ai-house .pfix-ai-house__fluff--thin {
  stroke: #f0b4a3;
}
.pfix-ai-house .pfix-ai-house__heat {
  fill: none;
  stroke: #f26924;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pfix-ai-diagram__panel--good .pfix-ai-house__heat {
  stroke: #e2531a;
}

/* The band's four cards, as white icon cards on Panda orange. */
.pfix-sp.pfix-ai .pfix-ai-panda {
  background:
    radial-gradient(circle at 92% 10%, rgba(255, 255, 255, 0.14), transparent 38%),
    linear-gradient(120deg, #f26924 0%, #e2531a 100%);
}
.pfix-sp .pfix-ai-panda .pfix-sp__eyebrow {
  color: #ffe6d6;
}
.pfix-sp .pfix-ai-panda .pfix-sp__title {
  color: #ffffff;
}
.pfix-sp .pfix-ai-panda .pfix-sp__intro {
  color: #fff6ef;
  font-weight: 500;
}
.pfix-sp .pfix-ai-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.pfix-sp .pfix-ai-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 24px;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 16px 36px rgba(120, 40, 5, 0.22);
}
.pfix-sp .pfix-ai-card__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 4px;
  border-radius: 14px;
  background: #fff1e8;
  color: #c2410c;
}
.pfix-sp .pfix-ai-card__icon svg {
  width: 28px;
  height: 28px;
}
.pfix-sp .pfix-ai-card h3 {
  font-size: 19px;
}
.pfix-sp .pfix-ai-card p {
  color: var(--sp-muted);
  font-size: 15.5px;
}
.pfix-sp a.pfix-ai-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
  color: #c2410c;
  font-size: 15.5px;
  font-weight: 700;
  text-decoration: none;
}
.pfix-sp a.pfix-ai-more:hover {
  color: #9a3412;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pfix-sp a.pfix-ai-more svg {
  width: 16px;
  height: 16px;
}
@media (max-width: 1100px) {
  .pfix-sp .pfix-ai-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 960px) {
  .pfix-sp .pfix-ai-why__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .pfix-sp .pfix-ai-diagram {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pfix-sp .pfix-ai-diagram__panel {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 10px;
  }
}
@media (max-width: 600px) {
  .pfix-sp .pfix-ai-benefits,
  .pfix-sp .pfix-ai-cards {
    grid-template-columns: minmax(0, 1fr);
  }
  .pfix-sp .pfix-ai-diagram {
    gap: 10px;
  }
  .pfix-sp .pfix-ai-diagram__panel {
    padding: 12px;
  }
  .pfix-sp .pfix-ai-diagram__panel p {
    font-size: 13.5px;
  }
  .pfix-sp .pfix-ai-diagram__panel b {
    font-size: 15px;
  }
}

/* /roofing/replacement/ (roofing-replacement-page.mjs). The intro: its words beside the
   video in a rounded frame, labelled like the other intros, with the page's facts. */
.pfix-rr-intro .flext-head::before {
  content: "Roof replacement";
}
.pfix-rr-intro .Flex-image {
  align-self: center;
}
.pfix-rr-intro .bde-video {
  width: 100%;
  overflow: hidden;
  border-radius: 22px;
  background: #172015;
  box-shadow: 0 20px 44px rgba(20, 24, 15, 0.16);
}
.pfix-rr-intro .pfix-rr-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.pfix-rr-intro .pfix-rr-facts span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid #dfe8cc;
  border-radius: 999px;
  background: #f4f9e8;
  color: #14180f;
  font-family: var(--robboto, Roboto), system-ui, sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.2;
}
.pfix-rr-intro .pfix-rr-facts svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: #4d7c0f;
}

/* The signs (service-pages.mjs's cards) on cream, then the four roof styles. */
.pfix-sp.pfix-rr .pfix-sp__sec--signs {
  background: #f6f8f1;
}
.pfix-sp.pfix-rr .pfix-sp-sign {
  background: #ffffff;
}
.pfix-sp.pfix-rr .pfix-sp__sec,
.pfix-sp #whats-included,
.pfix-sp #how-it-works {
  scroll-margin-top: 140px;
}
.pfix-sp.pfix-rr .pfix-rr-styles {
  background: #ffffff;
}
.pfix-sp .pfix-rr-styles__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.pfix-sp a.pfix-rr-style {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #e4e8dc;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(20, 24, 15, 0.06);
  color: inherit;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.pfix-sp a.pfix-rr-style:hover {
  border-color: #9acd32;
  box-shadow: 0 16px 36px rgba(20, 24, 15, 0.12);
  transform: translateY(-3px);
}
/* The roof's photo, 3:2, easing in a little on hover. (!important: a stylesheet of the
   site's stretches every picture's height.) */
.pfix-sp .pfix-rr-style__photo {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #2d312c;
}
.pfix-sp .pfix-rr-style__photo img,
.pfix-sp .pfix-rr-style__photo svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
  max-width: none;
  margin: 0;
  object-fit: cover;
}
.pfix-sp .pfix-rr-style__photo img {
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.pfix-sp a.pfix-rr-style:hover .pfix-rr-style__photo img {
  transform: scale(1.04);
}
.pfix-sp .pfix-rr-style__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px 20px;
}
.pfix-sp .pfix-rr-style__kicker {
  color: #4d7c0f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pfix-sp .pfix-rr-style__name {
  color: var(--sp-ink);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
}
.pfix-sp .pfix-rr-style__text {
  color: var(--sp-muted);
  font-size: 15px;
}
.pfix-sp .pfix-rr-style__more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 10px;
  color: var(--sp-orange-ink);
  font-size: 15px;
  font-weight: 700;
}
.pfix-sp .pfix-rr-style__more svg {
  width: 16px;
  height: 16px;
}
.pfix-sp .pfix-rr-styles__more {
  margin-top: clamp(26px, 3.5vw, 40px);
  text-align: center;
}
.pfix-sp a.pfix-rr-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 50px;
  padding: 12px 26px;
  border: 2px solid var(--sp-ink);
  border-radius: 999px;
  color: var(--sp-ink);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.pfix-sp a.pfix-rr-btn svg {
  width: 18px;
  height: 18px;
}
.pfix-sp a.pfix-rr-btn:hover {
  background: var(--sp-ink);
  color: #ffffff;
}
@media (max-width: 1000px) {
  .pfix-sp .pfix-rr-styles__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .pfix-sp .pfix-rr-styles__grid {
    gap: 12px;
  }
  .pfix-sp .pfix-rr-style__body {
    padding: 14px 14px 16px;
  }
  .pfix-sp .pfix-rr-style__kicker {
    font-size: 10.5px;
    letter-spacing: 0.06em;
  }
  .pfix-sp .pfix-rr-style__name {
    font-size: 17px;
  }
  .pfix-sp .pfix-rr-style__text,
  .pfix-sp .pfix-rr-style__more {
    font-size: 14px;
  }
  .pfix-sp a.pfix-rr-btn {
    justify-content: center;
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pfix-sp a.pfix-rr-style,
  .pfix-sp a.pfix-rr-btn {
    transition: none;
  }
  .pfix-sp a.pfix-rr-style:hover,
  .pfix-sp a.pfix-rr-style:hover .pfix-rr-style__photo img {
    transform: none;
  }
}

/* /roofing/types/ (roofing-types-page.mjs). The look of /roofing-costs/'s sections: Roboto;
   charcoal green, Panda lime and orange from the site's palette.

   The intro: its words beside a rounded photo, labelled like the other intros, with the
   Inc. 5000 badges under the paragraphs. */
.pfix-rt-intro .flext-head::before {
  content: "Roof types";
}
.pfix-rt-intro .Flex-text > picture img {
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
  margin-top: 12px;
}
.pfix-rt-intro .Flex-image img {
  width: 100%;
  max-height: 600px;
  object-fit: cover;
}

/* The sections under the intro. */
.pfix-rt {
  --rt-ink: #14180f;
  --rt-text: #3f463a;
  --rt-muted: #5d6656;
  --rt-line: #e4e8dc;
  --rt-bg: #f5f7ef;
  --rt-orange: #f26924;
  --rt-orange-ink: #c2410c;
  --rt-lime: #9acd32;
  --rt-lime-ink: #4d7c0f;
  --rt-dark: #172015;
  color: var(--rt-text);
  font-family: var(--robboto, Roboto), system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}
.pfix-rt *,
.pfix-rt *::before,
.pfix-rt *::after {
  box-sizing: border-box;
}
.pfix-rt p,
.pfix-rt h2,
.pfix-rt h3 {
  margin: 0;
  padding: 0;
  font-family: inherit;
}
.pfix-rt svg {
  display: block;
  flex: none;
}
.pfix-rt a:focus-visible,
.pfix-rt .pfix-rt-compare:focus-visible {
  outline: 3px solid var(--rt-orange);
  outline-offset: 3px;
}
.pfix-rt .pfix-rt__sec,
.pfix-rt .pfix-rt-choose {
  padding: clamp(56px, 7vw, 96px) 0;
  scroll-margin-top: 140px;
}
.pfix-rt .pfix-rt__sec--cream {
  background: var(--rt-bg);
}
.pfix-rt .pfix-rt__inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.pfix-rt .pfix-rt__inner--narrow {
  max-width: 880px;
}
.pfix-rt .pfix-rt__head {
  max-width: 800px;
  margin: 0 auto clamp(30px, 4vw, 48px);
  text-align: center;
}
.pfix-rt .pfix-rt__eyebrow {
  margin-bottom: 10px;
  color: var(--rt-orange-ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pfix-rt .pfix-rt__eyebrow--light {
  color: var(--rt-lime);
}
.pfix-rt .pfix-rt__title {
  color: var(--rt-ink);
  font-size: clamp(28px, 3.3vw, 40px);
  font-weight: 800;
  line-height: 1.15;
  text-wrap: balance;
}
.pfix-rt .pfix-rt__sub {
  margin-top: 14px;
  color: var(--rt-muted);
  font-size: 17px;
}

/* The four roof types: a drawn swatch of the material over each card. */
.pfix-rt .pfix-rt-types {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.pfix-rt .pfix-rt-type {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--rt-line);
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(20, 24, 15, 0.07);
  scroll-margin-top: 140px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.pfix-rt .pfix-rt-type:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(20, 24, 15, 0.12);
}
.pfix-rt .pfix-rt-type:target {
  border-color: var(--rt-lime);
  box-shadow: 0 0 0 3px rgba(154, 205, 50, 0.35), 0 18px 40px rgba(20, 24, 15, 0.12);
}
.pfix-rt .pfix-rt-swatch {
  position: relative;
  height: 150px;
  overflow: hidden;
  background: #2d312c;
}
.pfix-rt .pfix-rt-swatch__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* A photo of the roof in place of the swatch: wider than tall, easing in a little on hover.
   (!important: a stylesheet of the site's stretches every picture's height.) */
.pfix-rt .pfix-rt-swatch--photo {
  height: auto;
  aspect-ratio: 2 / 1;
}
.pfix-rt .pfix-rt-swatch--photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
  max-width: none;
  margin: 0;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.pfix-rt .pfix-rt-type:hover .pfix-rt-swatch--photo img {
  transform: scale(1.04);
}
.pfix-rt .pfix-rt-swatch__tag {
  position: absolute;
  z-index: 1;
  bottom: 14px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px 7px 10px;
  border-radius: 999px;
  background: rgba(12, 17, 11, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}
.pfix-rt .pfix-rt-swatch__tag svg {
  width: 16px;
  height: 16px;
  color: #c3ea79;
}
.pfix-rt .pfix-rt-type--flat .pfix-rt-swatch {
  background: #eef1f3;
}
.pfix-rt .pfix-rt-type__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  padding: 26px 28px 28px;
}
.pfix-rt .pfix-rt-type__kicker {
  color: var(--rt-lime-ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pfix-rt .pfix-rt-type__name {
  margin-top: -6px;
  color: var(--rt-ink);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
}
.pfix-rt .pfix-rt-type__text {
  color: var(--rt-muted);
  font-size: 16px;
}
.pfix-rt .pfix-rt-list {
  display: grid;
  gap: 9px;
  margin: 4px 0 2px;
}
.pfix-rt .pfix-rt-list p {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  color: var(--rt-text);
  font-size: 15.5px;
  line-height: 1.45;
}
.pfix-rt .pfix-rt-list svg {
  width: 22px;
  height: 22px;
  padding: 4px;
  border-radius: 50%;
  background: #eef6dc;
  color: var(--rt-lime-ink);
}
.pfix-rt .pfix-rt-type__best {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px;
  border-left: 3px solid var(--rt-orange);
  border-radius: 10px;
  background: #fff4ec;
  color: var(--rt-ink);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.4;
}
.pfix-rt .pfix-rt-type__best b {
  color: var(--rt-orange-ink);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pfix-rt a.pfix-rt-more {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
  color: var(--rt-orange-ink);
  font-size: 15.5px;
  font-weight: 700;
  text-decoration: none;
}
.pfix-rt a.pfix-rt-more:hover {
  color: #9a3412;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pfix-rt a.pfix-rt-more svg,
.pfix-rt a.pfix-rt-inline svg {
  width: 16px;
  height: 16px;
}
.pfix-rt a.pfix-rt-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--rt-orange-ink);
  font-weight: 700;
  text-decoration: none;
}
.pfix-rt a.pfix-rt-inline:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pfix-rt .pfix-rt-types__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 28px;
  margin-top: clamp(26px, 3.5vw, 40px);
  color: var(--rt-muted);
  font-size: 16px;
  text-align: center;
}

/* Buttons. */
.pfix-rt .pfix-rt-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.pfix-rt a.pfix-rt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding: 13px 26px;
  border: 2px solid transparent;
  border-radius: 999px;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.pfix-rt a.pfix-rt-btn svg {
  width: 18px;
  height: 18px;
}
.pfix-rt a.pfix-rt-btn--primary {
  background: var(--rt-orange);
  color: #ffffff;
}
.pfix-rt a.pfix-rt-btn--primary:hover {
  background: #e2531a;
  color: #ffffff;
}
.pfix-rt a.pfix-rt-btn--ghost {
  border-color: rgba(255, 255, 255, 0.4);
  color: #ffffff;
}
.pfix-rt a.pfix-rt-btn--ghost:hover {
  border-color: var(--rt-lime);
  background: rgba(154, 205, 50, 0.12);
  color: #ffffff;
}
.pfix-rt a.pfix-rt-btn--outline {
  border-color: var(--rt-ink);
  color: var(--rt-ink);
}
.pfix-rt a.pfix-rt-btn--outline:hover {
  background: var(--rt-ink);
  color: #ffffff;
}
.pfix-rt a.pfix-rt-btn--light {
  background: #ffffff;
  color: var(--rt-orange-ink);
}
.pfix-rt a.pfix-rt-btn--light:hover {
  background: #fff1e8;
  color: #9a3412;
}

/* Side by side: a table with a charcoal-green header and the type names as links; it scrolls
   sideways on narrow screens, with the row labels kept in view. */
.pfix-rt .pfix-rt-compare {
  overflow-x: auto;
  border: 1px solid var(--rt-line);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(20, 24, 15, 0.07);
  -webkit-overflow-scrolling: touch;
}
.pfix-rt .pfix-rt-compare__table {
  width: 100%;
  min-width: 860px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 15.5px;
  line-height: 1.45;
}
.pfix-rt .pfix-rt-compare__table th,
.pfix-rt .pfix-rt-compare__table td {
  padding: 16px 18px;
  border: 0;
  border-bottom: 1px solid var(--rt-line);
  vertical-align: top;
  text-align: left;
}
.pfix-rt .pfix-rt-compare__table thead th,
.pfix-rt .pfix-rt-compare__table thead td {
  border-bottom: 0;
  background: var(--rt-dark);
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
}
.pfix-rt .pfix-rt-compare__table thead td {
  width: 170px;
}
.pfix-rt .pfix-rt-compare__table thead a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #ffffff;
  text-decoration: none;
}
.pfix-rt .pfix-rt-compare__table thead a:hover {
  color: #c3ea79;
}
.pfix-rt .pfix-rt-dot {
  flex: none;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 4px;
}
.pfix-rt .pfix-rt-dot--asphalt {
  background: #545a51;
}
.pfix-rt .pfix-rt-dot--metal {
  background: linear-gradient(90deg, #6f7f89 0 40%, #c9d3d9 40% 55%, #4c5a63 55%);
}
.pfix-rt .pfix-rt-dot--flat {
  background: #eef1f3;
}
.pfix-rt .pfix-rt-dot--solar {
  background: #1d2838;
}
.pfix-rt .pfix-rt-compare__table tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #ffffff;
  color: var(--rt-ink);
  font-weight: 700;
}
.pfix-rt .pfix-rt-compare__table tbody td {
  color: var(--rt-text);
}
.pfix-rt .pfix-rt-compare__table tbody tr:nth-child(even) th,
.pfix-rt .pfix-rt-compare__table tbody tr:nth-child(even) td {
  background: #fafbf7;
}
.pfix-rt .pfix-rt-compare__table tbody tr.pfix-rt-compare__best th,
.pfix-rt .pfix-rt-compare__table tbody tr.pfix-rt-compare__best td {
  border-bottom: 0;
  background: #f1f8e3;
  color: var(--rt-ink);
  font-weight: 600;
}
.pfix-rt .pfix-rt-compare__hint {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--rt-muted);
  font-size: 14px;
  font-weight: 600;
}
.pfix-rt .pfix-rt-compare__hint svg {
  width: 18px;
  height: 18px;
  color: var(--rt-lime-ink);
}
.pfix-rt .pfix-rt-compare__note {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  max-width: 820px;
  margin: 22px auto 0;
  color: var(--rt-muted);
  font-size: 15px;
}
.pfix-rt .pfix-rt-compare__note > svg {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--rt-orange-ink);
}

/* How to choose, on charcoal green: the heading, facts and buttons beside six cards. */
.pfix-rt .pfix-rt-choose {
  background:
    radial-gradient(circle at 90% 6%, rgba(154, 205, 50, 0.18), transparent 40%),
    radial-gradient(circle at 0% 100%, rgba(242, 105, 36, 0.18), transparent 38%),
    linear-gradient(160deg, #222f1e 0%, var(--rt-dark) 62%);
  color: #dfe6d4;
}
.pfix-rt .pfix-rt-choose .pfix-rt__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr);
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
}
.pfix-rt .pfix-rt-choose__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.pfix-rt .pfix-rt-choose .pfix-rt__title {
  color: #ffffff;
}
.pfix-rt .pfix-rt-choose .pfix-rt__sub {
  margin-bottom: 18px;
  color: #c9d3bc;
}
.pfix-rt .pfix-rt-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.pfix-rt .pfix-rt-facts span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #eef2e6;
  font-size: 14px;
  font-weight: 600;
}
.pfix-rt .pfix-rt-facts svg {
  width: 16px;
  height: 16px;
  color: var(--rt-lime);
}
.pfix-rt .pfix-rt-choose__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.pfix-rt .pfix-rt-factor {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 22px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.pfix-rt .pfix-rt-factor:hover {
  border-color: rgba(154, 205, 50, 0.5);
  background: rgba(154, 205, 50, 0.07);
}
.pfix-rt .pfix-rt-factor__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 4px;
  border-radius: 13px;
  background: rgba(154, 205, 50, 0.16);
  color: #c3ea79;
}
.pfix-rt .pfix-rt-factor__icon svg {
  width: 24px;
  height: 24px;
}
.pfix-rt .pfix-rt-factor h3 {
  color: #ffffff;
  font-size: 18.5px;
  font-weight: 700;
  line-height: 1.3;
}
.pfix-rt .pfix-rt-factor p {
  color: #c4ceb6;
  font-size: 15.5px;
}

/* Why Panda, on Panda orange, with the cards in white. */
.pfix-rt .pfix-rt__sec--orange {
  background:
    radial-gradient(circle at 92% 10%, rgba(255, 255, 255, 0.14), transparent 38%),
    linear-gradient(120deg, #f26924 0%, #e2531a 100%);
}
.pfix-rt .pfix-rt__sec--orange .pfix-rt__eyebrow {
  color: #ffe6d6;
}
.pfix-rt .pfix-rt__sec--orange .pfix-rt__title {
  color: #ffffff;
}
.pfix-rt .pfix-rt__sec--orange .pfix-rt__sub {
  color: #fff6ef;
  font-weight: 500;
}
.pfix-rt .pfix-rt-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.pfix-rt .pfix-rt-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 24px;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 16px 36px rgba(120, 40, 5, 0.22);
}
.pfix-rt .pfix-rt-card__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 4px;
  border-radius: 14px;
  background: #fff1e8;
  color: var(--rt-orange-ink);
}
.pfix-rt .pfix-rt-card__icon svg {
  width: 28px;
  height: 28px;
}
.pfix-rt .pfix-rt-card h3 {
  color: var(--rt-ink);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
}
.pfix-rt .pfix-rt-card p {
  color: var(--rt-muted);
  font-size: 15.5px;
}

/* Questions (<details>, so they work without JavaScript), and a call band. */
.pfix-rt .pfix-rt-faq {
  display: grid;
  gap: 12px;
}
.pfix-rt .pfix-rt-faq__item {
  border: 1px solid var(--rt-line);
  border-radius: 16px;
  background: #ffffff;
  transition: box-shadow 0.2s ease;
}
.pfix-rt .pfix-rt-faq__item[open] {
  box-shadow: 0 10px 26px rgba(20, 24, 15, 0.08);
}
.pfix-rt .pfix-rt-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  color: var(--rt-ink);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}
.pfix-rt .pfix-rt-faq__item summary::-webkit-details-marker {
  display: none;
}
.pfix-rt .pfix-rt-faq__item summary:focus-visible {
  outline: 3px solid var(--rt-orange);
  outline-offset: 2px;
  border-radius: 16px;
}
.pfix-rt .pfix-rt-faq__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #eef6dc;
  color: var(--rt-lime-ink);
  transition: transform 0.2s ease;
}
.pfix-rt .pfix-rt-faq__icon svg {
  width: 16px;
  height: 16px;
}
.pfix-rt .pfix-rt-faq__item[open] .pfix-rt-faq__icon {
  transform: rotate(45deg);
}
.pfix-rt .pfix-rt-faq__item p {
  padding: 0 22px 20px;
  color: var(--rt-muted);
  font-size: 16px;
}
.pfix-rt .pfix-rt-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 28px;
  margin-top: clamp(36px, 5vw, 56px);
  padding: clamp(26px, 3.5vw, 36px);
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 10%, rgba(255, 255, 255, 0.16), transparent 40%),
    linear-gradient(120deg, #f26924 0%, #e2531a 100%);
  box-shadow: 0 18px 40px rgba(194, 65, 12, 0.25);
}
.pfix-rt .pfix-rt-cta__title {
  color: #ffffff;
  font-size: clamp(21px, 2.3vw, 26px);
  font-weight: 800;
  line-height: 1.2;
}
.pfix-rt .pfix-rt-cta__text {
  max-width: 440px;
  margin-top: 6px;
  color: #fff6ef;
  font-size: 16px;
}
.pfix-rt .pfix-rt-cta a.pfix-rt-btn--ghost {
  border-color: rgba(255, 255, 255, 0.75);
}
.pfix-rt .pfix-rt-cta a.pfix-rt-btn--ghost:hover {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
}

@media (max-width: 1100px) {
  .pfix-rt .pfix-rt-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pfix-rt .pfix-rt-choose .pfix-rt__inner {
    grid-template-columns: minmax(0, 1fr);
  }
  .pfix-rt .pfix-rt-choose__intro {
    align-items: center;
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
  }
  .pfix-rt .pfix-rt-facts,
  .pfix-rt .pfix-rt-choose .pfix-rt-ctas {
    justify-content: center;
  }
}
@media (max-width: 900px) {
  .pfix-rt .pfix-rt-types {
    grid-template-columns: minmax(0, 1fr);
    max-width: 640px;
    margin: 0 auto;
  }
  .pfix-rt .pfix-rt-compare__hint {
    display: flex;
  }
  .pfix-rt .pfix-rt-compare__table {
    min-width: 760px;
  }
  .pfix-rt .pfix-rt-compare__table thead td {
    width: 130px;
  }
  .pfix-rt .pfix-rt-compare__table tbody th {
    box-shadow: 6px 0 10px -6px rgba(20, 24, 15, 0.18);
  }
}
@media (max-width: 640px) {
  .pfix-rt .pfix-rt-cards,
  .pfix-rt .pfix-rt-choose__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .pfix-rt .pfix-rt-type__body {
    padding: 22px 20px 24px;
  }
  .pfix-rt .pfix-rt-type__name {
    font-size: 23px;
  }
  .pfix-rt .pfix-rt-swatch {
    height: 120px;
  }
  .pfix-rt .pfix-rt-swatch--photo {
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .pfix-rt .pfix-rt-compare__table th,
  .pfix-rt .pfix-rt-compare__table td {
    padding: 13px 14px;
    font-size: 14.5px;
  }
  .pfix-rt .pfix-rt-compare__table {
    min-width: 680px;
  }
  .pfix-rt .pfix-rt-compare__table thead td {
    width: 112px;
  }
  .pfix-rt .pfix-rt-ctas,
  .pfix-rt .pfix-rt-ctas a.pfix-rt-btn,
  .pfix-rt .pfix-rt-types__foot a.pfix-rt-btn {
    width: 100%;
  }
  .pfix-rt .pfix-rt-cta {
    text-align: left;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pfix-rt .pfix-rt-type,
  .pfix-rt .pfix-rt-factor,
  .pfix-rt .pfix-rt-faq__icon,
  .pfix-rt .pfix-rt-faq__item,
  .pfix-rt a.pfix-rt-btn {
    transition: none;
  }
  .pfix-rt .pfix-rt-type:hover,
  .pfix-rt .pfix-rt-type:hover .pfix-rt-swatch--photo img {
    transform: none;
  }
}

/* 404.html (not-found-page.mjs): the customer service page's dark hero with the message, a
   way home and a call button beside a big "4 (house) 4", then links to the main pages as
   white cards on a light band. */
.pfix-404 {
  --nf-ink: #14180f;
  --nf-muted: #5d6656;
  --nf-line: #e4e8dc;
  --nf-bg: #f5f7ef;
  --nf-orange: #f26924;
  --nf-lime: #9acd32;
  --nf-lime-ink: #4d7c0f;
  --nf-dark: #172015;
  display: block;
  width: 100%;
  overflow: hidden;
  color: var(--nf-muted);
  font-family: var(--robboto, Roboto), system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}
.pfix-404 *,
.pfix-404 *::before,
.pfix-404 *::after {
  box-sizing: border-box;
}
.pfix-404 p,
.pfix-404 h1,
.pfix-404 h2,
.pfix-404 ul {
  margin: 0;
  padding: 0;
  font-family: inherit;
}
.pfix-404 svg {
  display: block;
  flex: none;
}
.pfix-404 a:focus-visible {
  outline: 3px solid var(--nf-orange);
  outline-offset: 3px;
}
.pfix-404 .pfix-404__inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Hero: the message and buttons, the "4 (house) 4" beside them (above them on phones). */
.pfix-404 .pfix-404__hero {
  padding: clamp(56px, 8vw, 120px) 0 clamp(56px, 7vw, 104px);
  background:
    radial-gradient(circle at 88% 12%, rgba(154, 205, 50, 0.22), transparent 42%),
    radial-gradient(circle at 0% 100%, rgba(242, 105, 36, 0.24), transparent 40%),
    linear-gradient(160deg, #222f1e 0%, var(--nf-dark) 62%);
  color: #c9d3bc;
}
.pfix-404 .pfix-404__hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}
.pfix-404 .pfix-404__eyebrow {
  margin-bottom: 14px;
  color: var(--nf-lime);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pfix-404 .pfix-404__title {
  color: #fff;
  /* (!important: the site sets every h1 in .breakdance to 22px on phones) */
  font-size: clamp(38px, 5.2vw, 66px) !important;
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.pfix-404 .pfix-404__sub {
  max-width: 540px;
  margin: 20px 0 clamp(28px, 4vw, 40px);
  font-size: clamp(17px, 1.5vw, 19px);
}
.pfix-404 .pfix-404__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.pfix-404 a.pfix-404__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 26px;
  border: 2px solid transparent;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.pfix-404 a.pfix-404__btn svg {
  width: 20px;
  height: 20px;
}
.pfix-404 a.pfix-404__btn:hover {
  transform: translateY(-1px);
}
.pfix-404 a.pfix-404__btn--home,
.pfix-404 a.pfix-404__btn--home:visited {
  background: var(--nf-lime);
  color: var(--nf-ink);
}
.pfix-404 a.pfix-404__btn--home:hover {
  background: #b0dc55;
  color: var(--nf-ink);
}
.pfix-404 a.pfix-404__btn--call,
.pfix-404 a.pfix-404__btn--call:visited {
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}
.pfix-404 a.pfix-404__btn--call:hover {
  border-color: var(--nf-orange);
  background: var(--nf-orange);
  color: #fff;
}

/* "4 (house) 4": the 0 is a lime disc with a house whose roof lost a shingle. */
.pfix-404 .pfix-404__code {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.2vw, 16px);
  color: #fff;
  font-size: clamp(120px, 17vw, 230px);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.04em;
  user-select: none;
}
.pfix-404 .pfix-404__code > span:not(.pfix-404__house) {
  background: linear-gradient(180deg, #fff 30%, rgba(255, 255, 255, 0.55));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pfix-404 .pfix-404__house {
  display: grid;
  place-items: center;
  width: 0.78em;
  height: 0.78em;
  flex: none;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #b4e05a, var(--nf-lime) 55%, #7fae22);
  box-shadow: 0 24px 60px -20px rgba(154, 205, 50, 0.6), inset 0 -6px 0 rgba(0, 0, 0, 0.08);
}
.pfix-404 .pfix-404__house-art {
  width: 74%;
  height: 74%;
  overflow: visible;
}
.pfix-404 .pfix-404__shingle {
  transform-box: fill-box;
  transform-origin: center;
  animation: pfix-404-shingle 3.2s ease-in-out infinite;
}
@keyframes pfix-404-shingle {
  0%,
  100% {
    transform: translate(0, 0) rotate(-28deg);
  }
  50% {
    transform: translate(-3px, 7px) rotate(-12deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pfix-404 .pfix-404__shingle {
    animation: none;
    transform: rotate(-28deg);
  }
  .pfix-404 a.pfix-404__btn,
  .pfix-404 a.pfix-404__link {
    transition: none;
  }
}

/* "Looking for something else?": the main pages as white cards on a light band. */
.pfix-404 .pfix-404__more {
  padding: clamp(48px, 6vw, 80px) 0 clamp(56px, 7vw, 96px);
  background: var(--nf-bg);
}
.pfix-404 .pfix-404__more-title {
  margin-bottom: clamp(24px, 3vw, 36px);
  color: var(--nf-ink);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
}
.pfix-404 ul.pfix-404__links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 20px);
  /* (!important: the site's list styles indent lists and give them bullets) */
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.pfix-404 ul.pfix-404__links > li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.pfix-404 a.pfix-404__link {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
  padding: 20px 22px;
  border: 1px solid var(--nf-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(20, 24, 15, 0.04), 0 12px 32px -18px rgba(20, 24, 15, 0.22);
  color: var(--nf-ink);
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.pfix-404 a.pfix-404__link:hover {
  border-color: #cfe3a6;
  box-shadow: 0 1px 2px rgba(20, 24, 15, 0.04), 0 18px 40px -18px rgba(20, 24, 15, 0.3);
  color: var(--nf-ink);
  transform: translateY(-2px);
}
.pfix-404 .pfix-404__link-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 14px;
  background: #eef6dc;
  color: var(--nf-lime-ink);
}
.pfix-404 .pfix-404__link-icon svg {
  width: 24px;
  height: 24px;
}
.pfix-404 .pfix-404__link-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  line-height: 1.35;
}
.pfix-404 .pfix-404__link-text b {
  font-size: 18px;
  font-weight: 700;
}
.pfix-404 .pfix-404__link-text small {
  margin-top: 2px;
  color: var(--nf-muted);
  font-size: 14.5px;
}
.pfix-404 .pfix-404__link-arrow {
  color: var(--nf-lime-ink);
  transition: transform 0.2s ease;
}
.pfix-404 .pfix-404__link-arrow svg {
  width: 20px;
  height: 20px;
}
.pfix-404 a.pfix-404__link:hover .pfix-404__link-arrow {
  transform: translateX(3px);
}

@media (max-width: 991px) {
  .pfix-404 .pfix-404__hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .pfix-404 .pfix-404__code {
    order: -1;
    justify-content: flex-start;
    font-size: clamp(88px, 24vw, 160px);
  }
  .pfix-404 ul.pfix-404__links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .pfix-404 ul.pfix-404__links {
    grid-template-columns: minmax(0, 1fr);
  }
  .pfix-404 a.pfix-404__btn {
    width: 100%;
  }
}

/* /terms-and-conditions/ (legal-page.mjs): the customer service page's dark hero with three
   cards (STOP, HELP, rates), then the terms in a white card on a light band beside an
   "On this page" menu that follows you down the page. */
.pfix-legal {
  --lg-ink: #14180f;
  --lg-text: #3f463a;
  --lg-muted: #5d6656;
  --lg-line: #e4e8dc;
  --lg-bg: #f5f7ef;
  --lg-orange: #f26924;
  --lg-orange-ink: #c2410c;
  --lg-lime: #9acd32;
  --lg-lime-ink: #4d7c0f;
  --lg-dark: #172015;
  display: block;
  width: 100%;
  color: var(--lg-text);
  font-family: var(--robboto, Roboto), system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}
.pfix-legal *,
.pfix-legal *::before,
.pfix-legal *::after {
  box-sizing: border-box;
}
.pfix-legal p,
.pfix-legal h1,
.pfix-legal h2 {
  margin: 0;
  padding: 0;
  font-family: inherit;
}
.pfix-legal ul,
.pfix-legal ol {
  /* (!important: the site's list styles indent lists and give them bullets) */
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.pfix-legal li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  /* (!important: the site makes every list item white, 2-line-high and a plain list item:
     what hid the terms' lists, white on white) */
  color: inherit !important;
  line-height: inherit !important;
}
.pfix-legal svg {
  display: block;
  flex: none;
}
.pfix-legal a:focus-visible {
  outline: 3px solid var(--lg-orange);
  outline-offset: 3px;
}
.pfix-legal .pfix-legal__inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Hero */
.pfix-legal .pfix-legal__hero {
  padding: clamp(52px, 7vw, 96px) 0 clamp(48px, 6vw, 80px);
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 12%, rgba(154, 205, 50, 0.22), transparent 42%),
    radial-gradient(circle at 0% 100%, rgba(242, 105, 36, 0.24), transparent 40%),
    linear-gradient(160deg, #222f1e 0%, var(--lg-dark) 62%);
  color: #c9d3bc;
}
.pfix-legal .pfix-legal__eyebrow {
  margin-bottom: 12px;
  color: var(--lg-lime);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pfix-legal .pfix-legal__title {
  color: #fff;
  /* (!important: the site sets every h1 in .breakdance to 22px on phones) */
  font-size: clamp(36px, 4.8vw, 60px) !important;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.pfix-legal .pfix-legal__sub {
  max-width: 620px;
  margin: 18px 0 clamp(28px, 4vw, 40px);
  font-size: clamp(17px, 1.5vw, 19px);
}
.pfix-legal ul.pfix-legal__glance {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.pfix-legal .pfix-legal__glance li {
  display: flex !important;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 16px 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
}
.pfix-legal .pfix-legal__glance-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 50%;
  background: rgba(154, 205, 50, 0.16);
  color: var(--lg-lime);
}
.pfix-legal .pfix-legal__glance li:first-child .pfix-legal__glance-icon {
  background: rgba(242, 105, 36, 0.2);
  color: #ff8a4c;
}
.pfix-legal .pfix-legal__glance-icon svg {
  width: 22px;
  height: 22px;
}
.pfix-legal .pfix-legal__glance li > span:last-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.35;
}
.pfix-legal .pfix-legal__glance b {
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.pfix-legal .pfix-legal__glance small {
  color: #b7c2a9;
  font-size: 14.5px;
}

/* The terms beside the menu */
.pfix-legal .pfix-legal__body {
  padding: clamp(40px, 6vw, 80px) 0 clamp(56px, 7vw, 96px);
  background: var(--lg-bg);
}
.pfix-legal .pfix-legal__layout {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
/* The questions card scrolls away; the menu under it follows you down the page (the side
   column runs the card's full height so it can). */
.pfix-legal .pfix-legal__side {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-self: stretch;
}
.pfix-legal .pfix-legal__toc {
  position: sticky;
  /* below the fixed header (top bar and menu, 152 px) */
  top: 176px;
  /* a long menu (the policy's twelve sections) scrolls on short screens */
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding: 20px 12px 12px;
  border: 1px solid var(--lg-line);
  border-radius: 20px;
  background: #fff;
}
.pfix-legal .pfix-legal__toc-title {
  margin: 0 12px 10px;
  color: var(--lg-muted);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pfix-legal .pfix-legal__toc a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 12px;
  color: var(--lg-ink);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.pfix-legal .pfix-legal__toc a span {
  flex: none;
  color: var(--lg-lime-ink);
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.pfix-legal .pfix-legal__toc a:hover {
  background: #eef6dc;
  color: var(--lg-ink);
}
.pfix-legal .pfix-legal__help {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  border-radius: 20px;
  background: linear-gradient(160deg, #222f1e 0%, var(--lg-dark) 70%);
  color: #c9d3bc;
}
.pfix-legal .pfix-legal__help-title {
  color: #fff;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.25;
}
.pfix-legal .pfix-legal__help-text {
  margin-bottom: 6px;
  font-size: 15px;
}
.pfix-legal a.pfix-legal__help-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.pfix-legal a.pfix-legal__help-link span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.pfix-legal a.pfix-legal__help-link svg {
  width: 18px;
  height: 18px;
}
.pfix-legal a.pfix-legal__help-link:hover {
  border-color: var(--lg-lime);
  background: rgba(154, 205, 50, 0.12);
  color: #fff;
}
.pfix-legal a.pfix-legal__help-link--call {
  border-color: var(--lg-orange);
  background: var(--lg-orange);
}
.pfix-legal a.pfix-legal__help-link--call:hover {
  border-color: #e2531a;
  background: #e2531a;
}

/* The document */
.pfix-legal .pfix-legal__doc {
  min-width: 0;
  padding: clamp(24px, 4vw, 52px);
  border: 1px solid var(--lg-line);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(20, 24, 15, 0.04), 0 18px 48px -28px rgba(20, 24, 15, 0.25);
}
.pfix-legal .pfix-legal__notice {
  display: flex;
  gap: 16px;
  margin-bottom: clamp(32px, 4vw, 44px);
  padding: 20px 22px;
  border: 1px solid #fbd5bf;
  border-left: 4px solid var(--lg-orange);
  border-radius: 14px;
  background: #fff6f0;
}
.pfix-legal .pfix-legal__notice-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: #ffe4d3;
  color: var(--lg-orange-ink);
}
.pfix-legal .pfix-legal__notice-icon svg {
  width: 20px;
  height: 20px;
}
.pfix-legal .pfix-legal__notice-title {
  margin-bottom: 4px;
  color: var(--lg-orange-ink);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pfix-legal .pfix-legal__notice p:last-child {
  color: #4a3a30;
  font-size: 16px;
}
/* The policy's opening paragraph: a commitment, not a warning, so lime. */
.pfix-legal .pfix-legal__notice--info {
  border-color: #d5e8ae;
  border-left-color: var(--lg-lime);
  background: #f6fbec;
}
.pfix-legal .pfix-legal__notice--info .pfix-legal__notice-icon {
  background: #e3f1c4;
  color: var(--lg-lime-ink);
}
.pfix-legal .pfix-legal__notice--info .pfix-legal__notice-title {
  color: var(--lg-lime-ink);
}
.pfix-legal .pfix-legal__notice--info p:last-child {
  color: var(--lg-text);
}
.pfix-legal .pfix-legal__sec {
  scroll-margin-top: 176px;
  padding: clamp(26px, 3vw, 34px) 0;
  border-top: 1px solid var(--lg-line);
}
.pfix-legal .pfix-legal__sec:first-of-type {
  padding-top: 0;
  border-top: 0;
}
.pfix-legal .pfix-legal__sec-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  color: var(--lg-ink);
  font-size: clamp(22px, 2.3vw, 27px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.pfix-legal .pfix-legal__num {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
  background: #eef6dc;
  color: var(--lg-lime-ink);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.pfix-legal .pfix-legal__sec-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-left: 54px;
  font-size: 16.5px;
  line-height: 1.7;
}
.pfix-legal .pfix-legal__sec-body a {
  color: var(--lg-lime-ink);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.pfix-legal .pfix-legal__sec-body a:hover {
  color: var(--lg-ink);
}
.pfix-legal kbd {
  display: inline-block;
  padding: 1px 9px;
  border: 1px solid #d6dccb;
  border-bottom-width: 3px;
  border-radius: 8px;
  background: #f8faf4;
  color: var(--lg-ink);
  font-family: inherit;
  font-size: 0.9em;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.5;
  box-shadow: none;
}
.pfix-legal ul.pfix-legal__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px !important;
  border-radius: 16px;
  background: var(--lg-bg);
}
.pfix-legal .pfix-legal__list li {
  display: flex !important;
  align-items: flex-start;
  gap: 12px;
  color: var(--lg-ink) !important;
}
.pfix-legal .pfix-legal__check {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--lg-lime);
  color: #fff;
}
.pfix-legal .pfix-legal__check svg {
  width: 14px;
  height: 14px;
}
.pfix-legal a.pfix-legal__related {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: clamp(8px, 1vw, 12px);
  padding: 20px 22px;
  border: 1px solid var(--lg-line);
  border-radius: 18px;
  background: var(--lg-bg);
  color: var(--lg-ink);
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.pfix-legal a.pfix-legal__related:hover {
  border-color: #cfe3a6;
  background: #eef6dc;
  color: var(--lg-ink);
}
.pfix-legal .pfix-legal__related-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 14px;
  background: #fff;
  color: var(--lg-lime-ink);
}
.pfix-legal .pfix-legal__related-icon svg {
  width: 24px;
  height: 24px;
}
.pfix-legal .pfix-legal__related-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  line-height: 1.35;
}
.pfix-legal .pfix-legal__related-text small {
  color: var(--lg-muted);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pfix-legal .pfix-legal__related-text b {
  font-size: 18px;
  font-weight: 800;
}
.pfix-legal .pfix-legal__related-text > span {
  color: var(--lg-muted);
  font-size: 15px;
}
.pfix-legal .pfix-legal__related-arrow {
  color: var(--lg-lime-ink);
  transition: transform 0.2s ease;
}
.pfix-legal .pfix-legal__related-arrow svg {
  width: 20px;
  height: 20px;
}
.pfix-legal a.pfix-legal__related:hover .pfix-legal__related-arrow {
  transform: translateX(3px);
}
@media (prefers-reduced-motion: reduce) {
  .pfix-legal a,
  .pfix-legal .pfix-legal__related-arrow {
    transition: none;
  }
}

@media (max-width: 991px) {
  .pfix-legal .pfix-legal__layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .pfix-legal .pfix-legal__toc {
    position: static;
    max-height: none;
  }
  /* The menu above the text; the questions card after it. */
  .pfix-legal .pfix-legal__side {
    display: contents;
  }
  .pfix-legal .pfix-legal__help {
    order: 2;
  }
  .pfix-legal .pfix-legal__toc ol {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .pfix-legal ul.pfix-legal__glance {
    grid-template-columns: minmax(0, 1fr);
  }
  .pfix-legal .pfix-legal__toc ol {
    grid-template-columns: minmax(0, 1fr);
  }
  .pfix-legal .pfix-legal__sec-body {
    padding-left: 0;
  }
  .pfix-legal .pfix-legal__notice {
    flex-direction: column;
    gap: 12px;
    padding: 18px;
  }
}
@media (max-width: 600px) {
  .pfix-legal .pfix-legal__doc {
    padding: 22px 18px;
    border-radius: 20px;
  }
  .pfix-legal ul.pfix-legal__list {
    padding: 16px !important;
  }
}

/* /roofing/ and /commercial-roofing/ (roofing-page.mjs). "Our Process": the heading, paragraph, facts and estimate and
   call buttons beside the three steps as a numbered timeline, on the charcoal green of the
   other pages' "how it works" bands. Roboto; lime and orange from the site's palette. */
.pfix-rp-process {
  padding: clamp(56px, 7vw, 96px) 0;
  background:
    radial-gradient(circle at 96% 6%, rgba(154, 205, 50, 0.14), transparent 40%),
    radial-gradient(circle at 0% 100%, rgba(242, 105, 36, 0.14), transparent 38%),
    #1a2418;
  color: #d5dccb;
  font-family: var(--robboto, Roboto), system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  scroll-margin-top: 140px;
}
/* The site's stylesheet laid a 90% white veil over the old section (#process-section::before),
   to fade its mascot picture. */
#process-section.pfix-rp-process::before {
  content: none;
}
.pfix-rp-process *,
.pfix-rp-process *::before,
.pfix-rp-process *::after {
  box-sizing: border-box;
}
.pfix-rp-process .pfix-rp__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 20px;
}
.pfix-rp-process .pfix-rp-process__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.pfix-rp-process .pfix-rp-process__intro > * {
  margin: 0;
}
.pfix-rp-process .pfix-rp__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #c3ea79;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.pfix-rp-process .pfix-rp__eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.pfix-rp-process h2.pfix-rp__title {
  padding: 0;
  color: #ffffff;
  font-family: inherit;
  font-size: clamp(32px, 3.6vw, 44px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-align: left;
}
.pfix-rp-process p.pfix-rp__text {
  padding: 0;
  color: #d5dccb;
  font-size: 17.5px;
  line-height: 1.7;
  text-align: left;
}
.pfix-rp-process .pfix-rp-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pfix-rp-process .pfix-rp-facts > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgba(195, 234, 121, 0.25);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: #eef0ea;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.2;
}
.pfix-rp-process .pfix-rp-facts svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: #c3ea79;
}
.pfix-rp-process .pfix-rp-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 6px;
}
.pfix-rp-process a.pfix-rp-btn,
.pfix-rp-process a.pfix-rp-btn:hover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 24px;
  border: 2px solid transparent;
  border-radius: 30px;
  color: #ffffff;
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}
.pfix-rp-process a.pfix-rp-btn svg {
  flex: none;
  width: 18px;
  height: 18px;
}
.pfix-rp-process a.pfix-rp-btn--primary {
  background: #f26924;
}
.pfix-rp-process a.pfix-rp-btn--primary:hover {
  background: #e2531a;
}
.pfix-rp-process a.pfix-rp-btn--ghost {
  border-color: rgba(255, 255, 255, 0.75);
  background: transparent;
}
.pfix-rp-process a.pfix-rp-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
}
.pfix-rp-process a.pfix-rp-btn:focus-visible {
  outline: 3px solid #c3ea79;
  outline-offset: 2px;
}

/* The steps: numbered circles joined by a line, each beside a card. */
.pfix-rp-process .pfix-rp-steps {
  display: grid;
  gap: 18px;
}
.pfix-rp-process .pfix-rp-step {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 20px;
}
.pfix-rp-process .pfix-rp-step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 56px;
  bottom: -14px;
  left: 23px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(195, 234, 121, 0.55), rgba(195, 234, 121, 0.12));
}
.pfix-rp-process .pfix-rp-step__n {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #9acd32;
  box-shadow: 0 0 0 6px rgba(154, 205, 50, 0.16);
  color: #111827;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}
.pfix-rp-process .pfix-rp-step__body {
  padding: 22px 24px;
  border: 1px solid rgba(195, 234, 121, 0.18);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
}
.pfix-rp-process .pfix-rp-step h3 {
  margin: 0 0 8px;
  padding: 0;
  color: #ffffff;
  font-family: inherit;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
}
.pfix-rp-process .pfix-rp-step p {
  margin: 0;
  padding: 0;
  color: #d5dccb;
  font-size: 16px;
  line-height: 1.65;
  text-align: left;
}
.pfix-rp-process .pfix-rp-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
@media (max-width: 991.98px) {
  .pfix-rp-process .pfix-rp__inner {
    grid-template-columns: minmax(0, 1fr);
  }
  .pfix-rp-process .pfix-rp-process__intro {
    max-width: 680px;
  }
}
@media (max-width: 575.98px) {
  .pfix-rp-process .pfix-rp__inner {
    padding: 0 16px;
  }
  .pfix-rp-process p.pfix-rp__text {
    font-size: 16.5px;
  }
  .pfix-rp-process .pfix-rp-ctas {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    width: 100%;
  }
  .pfix-rp-process .pfix-rp-step {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 14px;
  }
  .pfix-rp-process .pfix-rp-step:not(:last-child)::before {
    top: 48px;
    left: 19px;
  }
  .pfix-rp-process .pfix-rp-step__n {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
  .pfix-rp-process .pfix-rp-step__body {
    padding: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pfix-rp-process a.pfix-rp-btn {
    transition: none;
  }
}

/* /roofing/'s "What Goes Into Every New Roof" (service-pages.mjs): a photo of a new ridge,
   framed square (taller than the gutters photo) so it sits beside the six-item list. */
.pfix-sp--roofing .pfix-sp-check__media {
  aspect-ratio: 1 / 1;
}
.pfix-sp--roofing .pfix-sp-check__media img {
  object-position: 50% 65%;
}
@media (max-width: 991.98px) {
  .pfix-sp--roofing .pfix-sp-check__media {
    aspect-ratio: 16 / 9;
  }
}

/* "Testimonials" (the review carousel's section, 17 pages): its heading was the browser's
   system font at medium weight, unlike every other section heading. It gets the site's
   section heading (Roboto, extra bold, dark ink), centred at every width, under an orange
   label. */
.Client-Logo-section:has(.Testimonial-container) > .heading-2 {
  padding-right: 16px !important;
  padding-left: 16px !important;
  text-align: center !important;
}
.Client-Logo-section:has(.Testimonial-container) > .heading-2::before {
  content: "Customer reviews";
  display: block;
  margin-bottom: 10px;
  color: #c2410c;
  font-family: var(--robboto, Roboto), system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.Client-Logo-section:has(.Testimonial-container) > .heading-2 h2 {
  color: #14180f;
  font-family: var(--robboto, Roboto), system-ui, sans-serif;
  font-size: clamp(28px, 3.3vw, 40px);
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
}

/* "Our Project Gallery" (the photo gallery's section, 7 pages): a thin system-font heading
   and a shadowed line in white on Panda lime (about 1.9:1, hard to read). Both go dark
   (about 10:1 and 8:1) in the site's section heading style, under a label, with the
   lime band, tabs and photos as they were. */
.Slideer-section:has(.ppg) h2.remodeler-padd {
  color: #14180f !important;
  font-family: var(--robboto, Roboto), system-ui, sans-serif;
  font-size: clamp(28px, 3.3vw, 40px);
  font-weight: 800;
  line-height: 1.15;
  text-wrap: balance;
}
.Slideer-section:has(.ppg) h2.remodeler-padd::before {
  content: "Our work";
  display: block;
  margin-bottom: 10px;
  color: #2f4a10;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.Slideer-section:has(.ppg) h2.remodeler-padd + p {
  color: #23301a !important;
  font-family: var(--robboto, Roboto), system-ui, sans-serif;
  font-size: 17px;
  font-weight: 500;
  text-shadow: none !important;
}

/* /contact-us/: each office card's link to the office's own page (new-pages.mjs). */
.pfix-ct a.pfix-ct-office__page {
  display: inline-block;
  margin-top: 14px;
  color: #c2410c;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}
.pfix-ct a.pfix-ct-office__page:hover {
  color: #f26924;
  text-decoration: underline;
}

/* /service-areas/ "Seven Local Offices, One Team" (site-fixes.mjs, serviceAreaOffices): a
   card per office with its state's map, linking to the office's page. */
.pfix-sa-offices {
  padding: clamp(56px, 7vw, 96px) 0;
  background: #f5f7ef;
  font-family: var(--robboto, Roboto), system-ui, sans-serif;
}
.pfix-sa-offices *,
.pfix-sa-offices *::before,
.pfix-sa-offices *::after {
  box-sizing: border-box;
}
.pfix-sa-offices p,
.pfix-sa-offices h2 {
  margin: 0;
}
.pfix-sa-offices__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.pfix-sa-offices__head {
  max-width: 720px;
  margin: 0 auto clamp(28px, 4vw, 44px);
  text-align: center;
}
.pfix-sa-offices .pfix-sa-offices__eyebrow {
  margin-bottom: 10px;
  color: #c2410c;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pfix-sa-offices .pfix-sa-offices__title {
  color: #14180f;
  font-family: inherit;
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 800;
  line-height: 1.15;
}
.pfix-sa-offices .pfix-sa-offices__intro {
  margin-top: 12px;
  color: #5d6656;
  font-size: 17px;
  line-height: 1.6;
}
.pfix-sa-offices__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}
.pfix-sa-offices a.pfix-sa-office {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #e4e8dc;
  border-radius: 18px;
  background: #fff;
  color: #14180f;
  text-decoration: none;
  box-shadow: 0 12px 32px -18px rgba(20, 24, 15, 0.25);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.pfix-sa-offices a.pfix-sa-office:hover {
  border-color: #f26924;
  color: #14180f;
  transform: translateY(-2px);
}
.pfix-sa-office__map {
  display: block;
  background: #24301f;
  aspect-ratio: 8 / 5;
}
.pfix-sa-office__map svg {
  display: block;
  width: 100%;
  height: 100%;
}
.pfix-sa-office .pfix-ct-map__state {
  fill: #33422c;
  stroke: #1b2416;
  stroke-width: 1;
}
.pfix-sa-office .pfix-ct-map__state.is-office {
  fill: #9acd32;
}
.pfix-sa-office .pfix-ct-pin__dot {
  fill: #f26924;
  stroke: #fff;
  stroke-width: 1.5;
}
.pfix-sa-office .pfix-ct-pin__ring {
  fill: rgba(242, 105, 36, 0.35);
}
.pfix-sa-office__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px 20px;
  font-size: 15px;
  line-height: 1.5;
}
.pfix-sa-office__state {
  color: #4d7c0f;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pfix-sa-office__city {
  font-size: 20px;
  font-weight: 800;
}
.pfix-sa-office__addr,
.pfix-sa-office__meta {
  color: #5d6656;
}
.pfix-sa-office__more {
  margin-top: 8px;
  color: #c2410c;
  font-weight: 700;
}
.pfix-sa-offices__all {
  margin-top: 28px;
  text-align: center;
}
.pfix-sa-offices__all a {
  color: #c2410c;
  font-weight: 700;
}
@media (max-width: 640px) {
  .pfix-sa-offices__inner {
    padding: 0 16px;
  }
}
.pfix-ct .pfix-ct-office--hq a.pfix-ct-office__page,
.pfix-ct .pfix-ct-office--hq a.pfix-ct-office__page:hover {
  color: #9acd32;
}

/* A hero headline made the page's h1 (site-fixes.mjs): it keeps the look it had as a div. */
h1.pfix-h1 {
  margin: 0;
  padding: 0;
}