.rr-hero .page-hero__img { object-position: 50% 78%; }

.rr-hero .page-hero__sub { text-wrap: pretty; }

.rr-what { align-items: start; }
.rr-what__body p { font-size: 19px; line-height: 1.6; text-wrap: pretty; }
.rr-what__body p:first-child { font-size: 21px; line-height: 1.5; color: var(--base); font-weight: 500; }

.rr-what__fig { padding-top: 6px; }
.rr-section { margin: 0; padding: 34px 34px 20px; background: var(--white); border: 1px solid var(--line); border-radius: 2px; }
.rr-section__layers { list-style: none; }
.rr-layer { display: grid; grid-template-columns: minmax(0, 40%) 52px minmax(0, 1fr); min-height: 58px; }
.rr-layer--coat2, .rr-layer--coat1 { min-height: 50px; }
.rr-layer--coat2 .rr-layer__text, .rr-layer--coat1 .rr-layer__text { padding: 7px 0; }
.rr-layer__swatch {
  position: relative;
  border-left: 1px solid rgba(17, 28, 46, .34);
  border-right: 1px solid rgba(17, 28, 46, .34);
  border-bottom: 1px solid rgba(17, 28, 46, .2);
  background-color: var(--stone);
}
.rr-layer:first-child .rr-layer__swatch { border-top: 1px solid rgba(17, 28, 46, .34); }
.rr-layer:last-child .rr-layer__swatch { border-bottom-color: rgba(17, 28, 46, .34); }
.rr-layer__lead { position: relative; }
.rr-layer__lead::before { content: ""; position: absolute; left: 0; right: 12px; top: 50%; border-top: 1px solid var(--muted); }
.rr-layer__lead::after { content: ""; position: absolute; left: -3px; top: 50%; width: 7px; height: 7px; margin-top: -3px; background: var(--base); }
.rr-layer__text { align-self: center; padding: 12px 0; }
.rr-layer__title { display: block; font-weight: 600; font-size: 17px; line-height: 1.3; color: var(--base); }
.rr-layer__note { display: block; margin-top: 2px; font-size: 15px; line-height: 1.45; color: var(--muted); }

.rr-layer--coat2 .rr-layer__swatch { background-color: var(--white); }
.rr-layer--coat1 .rr-layer__swatch { background-color: color-mix(in srgb, var(--stone) 50%, var(--white)); }
.rr-layer--repair .rr-layer__swatch {
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M0 9L9 0M-2 2L2 -2M7 11L11 7M0 0L9 9M-2 7L2 11M7 -2L11 2' stroke='rgba(17,28,46,0.32)' stroke-width='1'/%3E%3C/svg%3E");
}
.rr-layer--roof .rr-layer__swatch {
  background-color: var(--muted);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7'%3E%3Ccircle cx='1.6' cy='1.8' r='0.9' fill='rgba(255,255,255,0.22)'/%3E%3Ccircle cx='5' cy='5.2' r='0.8' fill='rgba(0,0,0,0.28)'/%3E%3C/svg%3E");
}
.rr-layer--insulation { min-height: 116px; }
.rr-layer--deck { min-height: 64px; }
.rr-layer--insulation .rr-layer__swatch {
  background-color: color-mix(in srgb, var(--stone) 70%, var(--white));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0L40 40M40 0L0 40M40 0V40' fill='none' stroke='rgba(17,28,46,0.3)' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  background-size: 64px 100%;
  background-repeat: repeat-x;
}
.rr-layer--deck .rr-layer__swatch {
  background-color: var(--base);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Cpath d='M0 8H10L15 32H25L30 8H40' fill='none' stroke='rgba(255,255,255,0.42)' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  background-size: 44px 100%;
  background-repeat: repeat-x;
}
.rr-section__cap { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.45; color: var(--muted); }

.rr-wty-wrap { align-items: start; }
.rr-wty { padding: 30px 32px 26px; background: var(--white); border: 1px solid var(--line); border-radius: 2px; }
.rr-wty__label {
  margin: 0; padding-bottom: 16px; border-bottom: 1px solid var(--line);
  font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1.1; letter-spacing: .06em; text-transform: uppercase; color: var(--base);
}
.rr-wty__label .fn-ref { color: var(--accent-dark); }
.rr-wty__row {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 16px;
  align-items: center; padding: 20px 0 18px; border-bottom: 1px solid var(--line);
}
.rr-wty__num { grid-row: 1 / span 2; align-self: center; font-family: var(--display); font-weight: 700; font-size: 52px; line-height: .82; color: var(--base); font-variant-numeric: tabular-nums; }
.rr-wty__unit { align-self: end; font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1; letter-spacing: .03em; text-transform: uppercase; color: var(--base); }
.rr-wty__note { align-self: start; margin-top: 4px; font-size: 15.5px; line-height: 1.4; color: var(--muted); }
.rr-wty__row--main .rr-wty__num { font-size: 96px; }
.rr-wty__row--main .rr-wty__unit { font-size: 26px; }
.rr-wty__row--main .rr-wty__note { color: var(--text); font-weight: 500; }
.rr-wty__foot { margin: 18px 0 0; font-size: 15px; line-height: 1.5; color: var(--text); }
.rr-wty__ask { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 24px; }
.rr-wty__ask p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--muted); max-width: 26ch; }
.rr-wty__list { margin-bottom: 20px; }
.rr-wty__list .ruled__row { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); }

.rr-energy { overflow: hidden; }
.rr-energy__photo { position: absolute; top: 0; bottom: 0; left: 0; width: calc(50% - var(--gap) / 2); margin: 0; }
.rr-energy__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 12% 50%; }
.rr-energy__inner { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding-top: 104px; padding-bottom: 104px; }
.rr-energy__text { grid-column: 8 / span 5; }
.rr-energy__text p:not(.fn) { font-size: 18px; line-height: 1.6; text-wrap: pretty; }
.rr-energy__text p:first-of-type:not(.fn) { font-size: 20px; line-height: 1.5; color: var(--white); }
.rr-energy__fn { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line-dark); }

@media (max-width: 1023px) {
  .rr-what__fig { padding-top: 0; max-width: 700px; }
  .rr-energy__photo { position: relative; width: auto; height: 360px; }
  .rr-energy__inner { padding-top: 72px; padding-bottom: 72px; }
  .rr-energy__text { grid-column: 1 / -1; max-width: 680px; }
}

@media (max-width: 767px) {
  .rr-what__body p { font-size: 17.5px; }
  .rr-what__body p:first-child { font-size: 19px; }
  .rr-section { padding: 22px 16px 14px; }
  .rr-layer { grid-template-columns: minmax(0, 30%) 30px minmax(0, 1fr); min-height: 56px; }
  .rr-layer--insulation { min-height: 84px; }
  .rr-layer__lead::before { right: 8px; }
  .rr-layer__title { font-size: 16px; }
  .rr-layer__note { font-size: 14px; }

  .rr-wty { padding: 24px 20px 20px; }
  .rr-wty__row--main .rr-wty__num { font-size: 80px; }
  .rr-wty__list .ruled__row { grid-template-columns: 1fr; }

  .rr-energy__photo { height: 240px; }
  .rr-energy__inner { padding-top: 56px; padding-bottom: 56px; }
  .rr-energy__text p:not(.fn), .rr-energy__text p:first-of-type:not(.fn) { font-size: 17.5px; }
}