/* Reylan Residential page widgets — self-contained (independent of About, Contact and Service).
   Loads after the theme's theme.css. Every rule is scoped to .rrs / .rrs-* and the
   service widgets' Elementor wrappers, so nothing else on the site changes. */

.elementor-widget[class*="elementor-widget-reylan-residential-"] > .elementor-widget-container { max-width: none; width: 100%; padding: 0 !important; }
.elementor-element[class*="elementor-widget-reylan-residential-"] { width: 100%; max-width: 100%; margin-bottom: 0 !important; }
.e-con:has(> .elementor-widget[class*="elementor-widget-reylan-residential-"]),
.e-con > .e-con-inner:has(> .elementor-widget[class*="elementor-widget-reylan-residential-"]) { --gap: 0px; --row-gap: 0px; --column-gap: 0px; }
.e-con > .e-con-inner:has(> .elementor-widget[class*="elementor-widget-reylan-residential-"]) { max-width: none; padding-inline: 0; overflow: visible; }

/* ---------- Shared base ---------- */
.rrs {
  --rrs-blue: var(--blue, #1d2d3b);
  --rrs-cream: var(--cream, #ffebcb);
  --rrs-red: var(--red, #d83d00);
  --rrs-line: var(--line, #c6cace);
  --rrs-stage-left: var(--stage-left, max(24px, calc((100% - 1440px) / 2 + 160px)));
  --rrs-stage-right: var(--stage-right, max(0px, calc((100% - 1440px) / 2)));
  --rrs-band-w: var(--band-w, min(100%, calc(max(0px, (100% - 1440px) / 2) + 1280px)));
  --rrs-to-edge: calc(50% - 50vw);
  --rrs-to-page: calc(-1 * min(130px, max(0px, (100vw - 1120px) / 2)));
  position: relative;
  overflow: visible;
  color: var(--rrs-blue);
  background: var(--white, #fff);
  /* break out of any boxed Elementor container so bands line up with the homepage */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.rrs figure { margin: 0; }
.rrs .media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rrs .body,
.rrs .lede { font-size: var(--type-body, 18px); line-height: 1.5; }
.rrs .display-sm { line-height: 1.17; }
.rrs-stage {
  position: relative;
  z-index: 1;
  width: min(1280px, calc(100% - var(--rrs-stage-left) - var(--rrs-stage-right)));
  max-width: 100%;
  margin-left: var(--rrs-stage-left);
  margin-right: var(--rrs-stage-right);
  box-sizing: border-box;
}
.rrs-actions { display: flex; flex-wrap: wrap; gap: 20px; }
.rrs-actions .btn { flex: 1 1 auto; min-height: 58px; }
.rrs-pattern { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.rrs-pattern img { width: 120%; height: 120%; max-width: none; object-fit: cover; object-position: left top; animation: patternDrift 36s linear infinite reverse; }
@media (prefers-reduced-motion: reduce) { .rrs-pattern img { animation: none; } }

/* The theme's scroll reveal (theme.js) leaves clip-path: inset(0) on every revealed element,
   which cuts off anything that hangs outside it (the red badge, card shadows). Inside the
   residential sections, keep the fade/slide animation but drop that clip once revealed. */
.rrs [data-reveal]:not([data-reveal="clip"]).is-in,
.rrs[data-reveal]:not([data-reveal="clip"]).is-in { clip-path: none; }
@media (max-width: 1100px) { .rrs-stage { width: calc(100% - 48px); margin-left: 24px; margin-right: 24px; } }
@media (max-width: 767px) { .rrs-actions .btn { flex: 1 1 100%; white-space: normal; } .rrs .display-sm { font-size: 36px; } }

/* =====================================================================
   1 · HERO — navy from the gutter, big photo straddling its edge, red badge on the photo
   ===================================================================== */
.rrs-hero { color: var(--rrs-cream); }
.rrs-hero-panel { position: absolute; top: 0; bottom: 0; left: var(--rrs-stage-left); right: 0; background: var(--rrs-blue); overflow: hidden; z-index: 0; }
.rrs-hero-panel .rrs-pattern img { animation-duration: 28s; }
.rrs-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 660fr) minmax(0, 563fr);
  column-gap: 80px;
  align-items: center;
  width: min(calc(100% - 80px), 1360px);
  margin: 0 auto;
  padding: 120px 0 130px;
}
.rrs-hero-media { position: relative; }
.rrs-hero-photo { aspect-ratio: 660 / 600; width: 100%; }
.rrs-badge {
  position: absolute;
  right: -40px;
  bottom: -56px;
  width: min(330px, 70%);
  padding: 26px 28px;
  background: var(--rrs-red);
  color: var(--rrs-cream);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.28);
}
.rrs-badge-kicker {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-display, "Roboto Condensed", sans-serif);
  font-weight: var(--type-label-weight, 500);
  font-size: var(--type-label, 20px);
  text-transform: uppercase;
}
.rrs-badge p { margin: 0; font-size: 17px; line-height: 1.45; }
.rrs-hero-copy { max-width: 563px; justify-self: end; }
.rrs-crumbs { display: flex; gap: 10px; margin-bottom: 26px; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--rrs-cream); opacity: 0.8; }
.rrs-crumbs a { color: var(--rrs-cream); text-decoration: underline; text-underline-offset: 3px; }
.rrs-hero-copy .eyebrow { color: var(--rrs-cream); }
.rrs-hero-copy h1,
.rrs-hero-copy .display-sm { margin: 0 0 20px; font-size: var(--type-hero, 54px); line-height: 1.12; color: var(--rrs-cream); }
.rrs-hero-copy .accent { color: var(--rrs-red); }
.rrs-hero-copy .lede { margin: 0 0 36px; line-height: 1.5; color: var(--rrs-cream); }
.rrs-hero-facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 36px 0 0; padding: 0; list-style: none; }
.rrs-hero-facts li {
  padding: 8px 14px;
  border: 1px solid rgba(255, 235, 203, 0.4);
  font-family: var(--font-display, "Roboto Condensed", sans-serif);
  font-weight: var(--type-label-weight, 500);
  font-size: 15px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--rrs-cream);
}


/* hero extras: emergency card hanging off the navy */
.rrs-hero.has-emergency .rrs-hero-panel { bottom: 90px; }
.rrs-hero.has-emergency .rrs-hero-grid { padding-bottom: 150px; }
.rrs-em-row { position: relative; z-index: 2; width: min(1120px, calc(100% - 48px)); margin: -60px auto 0; display: flex; justify-content: flex-end; }
.rrs-em { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 24px; align-items: center; width: min(100%, 920px); padding: 32px 36px; background: var(--rrs-red); color: var(--rrs-cream); box-shadow: 0 30px 60px rgba(29, 45, 59, 0.25); }
.rrs-em-icon { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; background: var(--rrs-cream); color: var(--rrs-red); }
.rrs-em .rrs-em-title { margin: 0 0 6px; font-family: var(--font-display, "Roboto Condensed", sans-serif); font-weight: var(--type-display-weight, 500); font-size: 40px; line-height: 1.1; text-transform: uppercase; color: var(--rrs-cream); }
.rrs-em .body { margin: 0; color: var(--rrs-cream); }
.rrs-em .btn { white-space: nowrap; min-height: 58px; }

/* =====================================================================
   2 · WHAT WE REPAIR — navy band, 6 cards hang off it
   ===================================================================== */
.rrs-list { padding: 120px 0 140px; }
.rrs-list-head { position: relative; padding: 110px 0 200px; color: var(--rrs-cream); }
.rrs-list-head::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--rrs-to-edge); right: var(--rrs-to-page); background: var(--rrs-blue); z-index: 0; }
.rrs-list-head .rrs-pattern { left: var(--rrs-to-edge); right: var(--rrs-to-page); opacity: 0.22; }
.rrs-list-head-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: end; }
.rrs-list-head .eyebrow { color: var(--rrs-red); }
.rrs-list-head .display-sm { margin: 0; color: var(--rrs-cream); }
.rrs-list-head .accent { color: var(--rrs-red); }
.rrs-list-head .body { margin: 0; color: var(--rrs-cream); max-width: 520px; }
.rrs-cards { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: -140px auto 0; padding: 0; list-style: none; }
.rrs-card { display: flex; flex-direction: column; gap: 14px; padding: 36px 32px 34px; background: #fff; border: 1px solid var(--rrs-line); box-shadow: 0 24px 50px rgba(29, 45, 59, 0.12); transition: transform 0.35s var(--ease, ease), box-shadow 0.35s var(--ease, ease); }
.rrs-card:hover { transform: translateY(-6px); box-shadow: 0 32px 60px rgba(29, 45, 59, 0.2); }
.rrs-card-top { display: flex; justify-content: space-between; align-items: flex-start; }
.rrs-card-icon { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; background: var(--rrs-red); color: #fff; }
.rrs-card-num { font-family: var(--font-display, "Roboto Condensed", sans-serif); font-weight: 700; font-size: 40px; line-height: 1; color: var(--rrs-line); }
.rrs-card h3 { margin: 10px 0 0; font-family: var(--font-display, "Roboto Condensed", sans-serif); font-weight: var(--type-display-weight, 500); font-size: 26px; line-height: 1.1; text-transform: uppercase; color: var(--rrs-blue); }
.rrs-card .body { margin: 0; color: var(--rrs-blue); }

/* =====================================================================
   3 · HOW A REPAIR WORKS — photo hangs into a cream band, numbered steps on a line
   ===================================================================== */
.rrs-steps { padding: 0 0 140px; }
.rrs-steps-top { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: end; }
.rrs-steps-top .eyebrow { color: var(--rrs-red); }
.rrs-steps-top .display-sm { margin: 0 0 20px; color: var(--rrs-blue); }
.rrs-steps-top .body { margin: 0 0 160px; color: var(--rrs-blue); max-width: 520px; }
.rrs-steps-photo { aspect-ratio: 540 / 400; width: 100%; margin-bottom: -150px; box-shadow: 0 30px 60px rgba(29, 45, 59, 0.2); }
.rrs-steps-band { position: relative; padding: 220px 0 110px; }
.rrs-steps-band::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--rrs-to-edge); right: var(--rrs-to-edge); background: var(--rrs-cream); z-index: 0; }
.rrs-steps-list { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin: 0; padding: 0; list-style: none; }
.rrs-step { position: relative; padding-top: 52px; border-top: 3px solid var(--rrs-blue); }
.rrs-step-num { position: absolute; top: -28px; left: 0; width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; background: var(--rrs-blue); color: var(--rrs-cream); font-family: var(--font-display, "Roboto Condensed", sans-serif); font-weight: 700; font-size: 22px; }
.rrs-step:last-child .rrs-step-num { background: var(--rrs-red); color: #fff; }
.rrs-step h3 { margin: 0 0 10px; font-family: var(--font-display, "Roboto Condensed", sans-serif); font-weight: var(--type-display-weight, 500); font-size: 24px; line-height: 1.12; text-transform: uppercase; color: var(--rrs-blue); }
.rrs-step .body { margin: 0; color: var(--rrs-blue); }

/* =====================================================================
   4 · WHEN IT ISN'T A REPAIR — copy + overlapping quote card, red block, testimonial
   ===================================================================== */
.rrs-truth { padding: 40px 0 160px; }
.rrs-truth-grid { display: grid; grid-template-columns: minmax(0, 500fr) minmax(0, 580fr); gap: 40px; align-items: flex-start; }
.rrs-truth-copy .eyebrow { color: var(--rrs-red); }
.rrs-truth-copy .display-sm { margin: 0 0 20px; color: var(--rrs-blue); }
.rrs-truth-copy .body { margin: 0 0 32px; color: var(--rrs-blue); }
.rrs-truth-copy .rrs-actions .btn { flex: 0 0 auto; }
.rrs-truth-stack { position: relative; padding: 0px 0 120px 40px; }
.rrs-truth-stack::before { content: ""; position: absolute; top: 0; right: -40px; width: 62%; height: 70%; background: var(--rrs-red); z-index: 0; }
.rrs-quote { position: relative; z-index: 1; margin: 0; padding: 56px 52px 52px; background: var(--rrs-blue); color: var(--rrs-cream); box-shadow: 0 30px 60px rgba(29, 45, 59, 0.3); overflow: hidden; }
.rrs-quote .rrs-pattern { opacity: 0.18; }
.rrs-quote-mark { position: relative; display: block; height: 56px; margin-bottom: 8px; font-family: Georgia, serif; font-size: 120px; line-height: 0.9; color: var(--rrs-red); }
.rrs-quote-text { position: relative; margin: 0; font-family: var(--font-display, "Roboto Condensed", sans-serif); font-weight: var(--type-display-weight, 500); font-size: clamp(28px, 2.8vw, 36px); line-height: 1.12; text-transform: uppercase; color: var(--rrs-cream); }
.rrs-quote-text .accent { color: var(--rrs-red); }
.rrs-review { position: absolute; z-index: 2; left: 0; bottom: 0; width: min(78%, 440px); margin: 0; padding: 28px 30px; background: var(--rrs-cream); color: var(--rrs-blue); box-shadow: 0 24px 50px rgba(29, 45, 59, 0.22); }
.rrs-stars { display: flex; gap: 4px; margin-bottom: 12px; color: var(--rrs-red); }
.rrs-review p { margin: 0 0 12px; font-size: 16px; line-height: 1.5; }
.rrs-review cite { font-style: normal; font-family: var(--font-display, "Roboto Condensed", sans-serif); font-weight: var(--type-label-weight, 500); font-size: 18px; text-transform: uppercase; }

/* the theme's reveal leaves clip-path on revealed items; keep hanging cards and shadows visible */
.rrs [data-reveal]:not([data-reveal="clip"]).is-in { clip-path: none; }

/* =====================================================================
   Tablet / phone
   ===================================================================== */
@media (max-width: 1100px) {
  .rrs-hero-grid,
  .rrs-list-head-grid,
  .rrs-steps-top,
  .rrs-truth-grid { grid-template-columns: minmax(0, 1fr); }
  .rrs-hero-panel { left: 0; }
  .rrs-hero-grid { width: calc(100% - 48px); padding: 80px 0 140px; row-gap: 90px; }
  .rrs-hero-copy { justify-self: start; }
  .rrs-badge { right: 16px; }
  .rrs-em { grid-template-columns: 56px minmax(0, 1fr); }
  .rrs-em .btn { grid-column: 1 / -1; justify-self: start; }
  .rrs-list-head::before, .rrs-list-head .rrs-pattern { right: var(--rrs-to-edge); }
  .rrs-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rrs-steps-top .body { margin-bottom: 32px; }
  .rrs-steps-photo { margin-bottom: -120px; }
  .rrs-steps-band { padding-top: 180px; }
  .rrs-steps-list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 56px; }
  .rrs-truth-stack { padding-left: 0; }
  .rrs-truth-stack::before { right: 0; }
}
@media (max-width: 767px) {
  .rrs-hero-copy h1, .rrs-hero-copy .display-sm { font-size: 36px; }
  .rrs-badge { position: relative; right: auto; bottom: auto; width: auto; margin: -40px 16px 0; }
  .rrs-hero-grid { row-gap: 40px; }
  .rrs-em-row { margin-top: -40px; }
  .rrs-em { padding: 24px; grid-template-columns: minmax(0, 1fr); }
  .rrs-em .rrs-em-title { font-size: 24px; }
  .rrs-em .btn { width: 100%; white-space: normal; }
  .rrs-list { padding: 80px 0; }
  .rrs-list-head { padding: 64px 0 160px; }
  .rrs-cards { grid-template-columns: minmax(0, 1fr); margin-top: -110px; }
  .rrs-steps { padding-bottom: 80px; }
  .rrs-steps-band { padding: 160px 0 64px; }
  .rrs-steps-list { grid-template-columns: minmax(0, 1fr); }
  .rrs-truth { padding-bottom: 80px; }
  .rrs-truth-stack { padding-bottom: 0; }
  .rrs-quote { padding: 40px 24px; }
  .rrs-review { position: relative; width: auto; margin: -24px 16px 0; }
}
.rrs-review blockquote { margin: 0; }

/* fixes after preview: photo must hang into the cream band; quote text clears the review card.
   Elementor's frontend sets "figure { margin: 0 }" with a stronger selector, so the hang uses !important. */
.rrs .rrs-steps-photo { margin: 0 0 -150px !important; }
.rrs .rrs-quote { padding-bottom: 150px; }
.rrs-truth-stack { padding-bottom: 150px; }
@media (max-width: 1100px) { .rrs .rrs-steps-photo { margin-bottom: -120px !important; } }
@media (max-width: 767px) { .rrs .rrs-quote { padding-bottom: 40px; } .rrs-truth-stack { padding-bottom: 0; } }