/* ============================================================================
   Riddle Brothers — homepage section treatments  ("measured drawing")
   Loaded by mu-plugins/rb-sections.php

   Everything here styles NATIVE Elementor containers and widgets, so all copy
   and every photograph stays editable in the Elementor editor. Classes land on
   the Elementor element wrappers; text lives one level in, on
   .elementor-heading-title / .elementor-widget-container, which is why several
   selectors reach through those.

   Tokens are the site's own Elementor globals: #061F35 navy, #C71310 red,
   #F9F9F9 bone, Montserrat. No new colours, no second typeface.
   ========================================================================== */

.rb-sec{
  --rb-navy:#061F35; --rb-red:#C71310; --rb-bone:#F9F9F9;
  --rb-slate:#5D6E7C; --rb-slate-lt:#9DB0C0;
  --rb-hair:rgba(6,31,53,.16); --rb-hair-w:rgba(255,255,255,.16);
  --rb-swift:180ms linear;
  --rb-move:320ms cubic-bezier(.2,.7,.2,1);
  --rb-slow:640ms cubic-bezier(.2,.7,.2,1);
  --rb-lift:-3px; --rb-zoom:1.055;
  --rb-gut:clamp(20px,5vw,56px);
  --rb-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 8'%3E%3Cpath d='M0 4h16M12.5 .8 16.2 4l-3.7 3.2' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E");
  font-family:"Montserrat",sans-serif;
  overflow-x:clip; max-width:100%;
}
@media (prefers-reduced-motion:reduce){
  .rb-sec{--rb-lift:0px; --rb-zoom:1.001}
  .rb-sec *,.rb-sec *::before,.rb-sec *::after{
    transition-duration:1ms !important; animation-duration:1ms !important;
  }
}

/* Elementor puts default padding/gap on containers; neutralise inside our sections
   so the layout below is the only thing setting spacing. The first selector is
   deliberately compound, not descendant — the section element carries BOTH
   .rb-sec and .e-con, so `.rb-sec .e-con` alone would skip it and leave the
   default 10px inline padding on the section itself. */
.rb-sec.e-con,.rb-sec .e-con,.rb-sec .e-con-inner{padding:0; --gap:0px}
.rb-sec .elementor-widget-container{margin:0}
.rb-sec .elementor-heading-title{margin:0; font-family:inherit}

.rb-sec .rb-in{
  max-width:1240px; width:100%; margin-inline:auto;
  padding-inline:var(--rb-gut); display:flex; flex-direction:column;
}
.rb-sec .rb-head{gap:11px; max-width:56ch; margin-bottom:34px}
.rb-sec .rb-eye .elementor-heading-title{
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--rb-red); line-height:1.35;
}
.rb-sec .rb-h2 .elementor-heading-title{
  font-size:clamp(25px,3.1vw,38px); font-weight:700; line-height:1.14;
  letter-spacing:-.022em; color:#000; text-wrap:balance;
}
.rb-sec .rb-lede,.rb-sec .rb-lede p{
  font-size:16px; font-weight:400; line-height:1.6; color:var(--rb-slate);
}
.rb-sec .rb-lede{max-width:56ch}

/* shared "more" affordance — arrow is a masked SVG so it takes currentColor */
.rb-sec .rb-more .elementor-heading-title{
  display:inline-flex; align-items:center; gap:9px;
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--rb-slate); transition:color var(--rb-swift);
}
.rb-sec .rb-more .elementor-heading-title::after{
  content:""; width:18px; height:8px; flex:none; background:currentColor;
  -webkit-mask:var(--rb-arrow) no-repeat center/contain;
          mask:var(--rb-arrow) no-repeat center/contain;
}

/* ── 1. STAT BAND ─────────────────────────────────────────────────────── */
.rb-sec.rb-band{
  position:relative; isolation:isolate; padding-block:64px 48px; overflow:hidden;
  background-color:var(--rb-navy);
}
.rb-sec.rb-band::after{                       /* navy wash over the photograph */
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(rgba(6,31,53,.90),rgba(4,20,34,.985));
}
.rb-sec.rb-band > *{position:relative; z-index:1}
.rb-sec .rb-band__head{gap:12px; max-width:52ch; margin-bottom:38px}
.rb-sec .rb-band__eye .elementor-heading-title{
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--rb-slate-lt);
}
.rb-sec .rb-band__h2 .elementor-heading-title{
  font-size:clamp(25px,3.1vw,38px); font-weight:700; line-height:1.14;
  letter-spacing:-.022em; color:#fff; text-wrap:balance;
}
.rb-sec .rb-band__grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px;
  background:var(--rb-hair-w); border-block:1px solid var(--rb-hair-w);
}
.rb-sec .rb-band__cell{
  container-type:inline-size;
  background:var(--rb-navy); padding:26px clamp(14px,1.6vw,22px) 24px;
  display:flex; flex-direction:column; gap:9px;
}
.rb-sec .rb-band__cell::before{
  content:""; display:block; width:16px; height:2px; background:var(--rb-red);
}
.rb-sec .rb-band__num .elementor-heading-title{
  font-size:clamp(32px,26cqi,68px); font-weight:700; line-height:.94;
  letter-spacing:-.035em; color:#fff; font-variant-numeric:tabular-nums;
}
@supports not (container-type:inline-size){
  .rb-sec .rb-band__num .elementor-heading-title{font-size:clamp(32px,5.2vw,68px)}
}
.rb-sec .rb-band__num--ratio .elementor-heading-title{letter-spacing:-.01em}
.rb-sec .rb-band__lbl .elementor-heading-title{
  font-size:11px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--rb-slate-lt); line-height:1.35;
}
.rb-sec .rb-band__foot{
  margin-top:26px; flex-direction:row; flex-wrap:wrap; align-items:center; gap:10px 18px;
}
.rb-sec .rb-band__note .elementor-heading-title{
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--rb-slate-lt);
}
.rb-sec .rb-band__link a,.rb-sec .rb-band__link .elementor-heading-title a{
  color:#fff; font-size:13px; font-weight:700; text-decoration:none;
  border-bottom:2px solid rgba(255,255,255,.34); padding-bottom:2px;
  transition:border-color var(--rb-swift);
}
@media (hover:hover) and (pointer:fine){
  .rb-sec .rb-band__link a:hover{border-bottom-color:#fff}
}
.rb-sec .rb-band__link a:focus-visible{
  outline:3px solid #fff; outline-offset:6px; border-bottom-color:transparent;
}
@media (max-width:860px){
  .rb-sec .rb-band__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* The figures are editable, so leave room for a longer one than "6,000+".
     At 23cqi a 2-column cell on a 375px screen carries ~9 glyphs before it
     runs out of cell; at 26cqi it ran out at 7. */
  .rb-sec .rb-band__num .elementor-heading-title{font-size:clamp(30px,23cqi,60px)}
}
@media (max-width:400px){ .rb-sec .rb-band__cell{padding:20px 14px} }

/* ── shared card chrome (spotlight plates + service cards) ────────────── */
.rb-sec .rb-card{
  position:relative; isolation:isolate; text-decoration:none; color:inherit;
  background:#fff; border:1px solid var(--rb-hair);
  transition:transform var(--rb-move), box-shadow var(--rb-move);
}
.rb-sec .rb-card::after{
  content:""; position:absolute; inset:0; z-index:4; pointer-events:none;
  border:1px solid var(--rb-red); opacity:0; transition:opacity var(--rb-move);
}
.rb-sec .rb-card__frame{
  position:relative; overflow:hidden; aspect-ratio:3/2;
  background:var(--rb-navy); display:block;
}
.rb-sec .rb-card__img{position:absolute; inset:0; z-index:0}
.rb-sec .rb-card__img .elementor-widget-container,
.rb-sec .rb-card__img figure,
.rb-sec .rb-card__img a{display:block; height:100%}
.rb-sec .rb-card__img img{
  width:100%; height:100%; object-fit:cover; object-position:50% 56%;
  display:block; transform:scale(1.001); transform-origin:50% 60%;
  filter:saturate(.9) contrast(1.02);
  transition:transform var(--rb-slow), filter var(--rb-slow);
}
@media (hover:hover) and (pointer:fine){
  .rb-sec .rb-card:hover{transform:translateY(var(--rb-lift)); box-shadow:0 22px 46px -30px rgba(6,31,53,.6)}
  .rb-sec .rb-card:hover::after{opacity:1}
  .rb-sec .rb-card:hover .rb-card__img img{transform:scale(var(--rb-zoom)); filter:saturate(1) contrast(1.05)}
  .rb-sec .rb-card:hover .rb-more .elementor-heading-title{color:var(--rb-red)}
}
.rb-sec .rb-card:focus-visible{
  outline:3px solid var(--rb-red); outline-offset:0; box-shadow:inset 0 0 0 2px #fff;
}
.rb-sec .rb-card:focus-visible::after{opacity:1}
.rb-sec .rb-card:active{transform:translateY(-1px)}

/* ── 2. PROJECT SPOTLIGHT ─────────────────────────────────────────────── */
.rb-sec.rb-spot{background:#fff; padding-block:64px}
.rb-sec .rb-spot__grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px}
@media (max-width:820px){ .rb-sec .rb-spot__grid{grid-template-columns:minmax(0,1fr); gap:22px} }
.rb-sec .rb-spot__block{
  position:absolute; left:0; bottom:0; z-index:2; background:var(--rb-navy);
  padding:15px 20px 14px; max-width:78%; gap:5px;
}
.rb-sec .rb-spot__block::before{
  content:""; display:block; width:22px; height:2px; background:var(--rb-red);
  transform-origin:left center; transition:transform var(--rb-move);
}
.rb-sec .rb-spot__loc .elementor-heading-title{
  font-size:clamp(19px,1.8vw,23px); font-weight:700; line-height:1.16;
  letter-spacing:-.018em; color:#fff;
}
.rb-sec .rb-spot__kind .elementor-heading-title{
  font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--rb-slate-lt);
}
.rb-sec .rb-spot__body{padding:20px 20px 22px; gap:14px}
.rb-sec .rb-spot__quote,.rb-sec .rb-spot__quote p{
  font-size:15.5px; font-weight:400; line-height:1.58; color:#1B2C3A;
}
.rb-sec .rb-spot__quote{max-width:52ch}
@media (hover:hover) and (pointer:fine){
  .rb-sec .rb-card:hover .rb-spot__block::before{transform:scaleX(1.9)}
}

/* ── 3. SERVICE CARDS ─────────────────────────────────────────────────── */
.rb-sec.rb-svcs{background:var(--rb-bone); padding-block:64px}
/* Four services since Flooring was pulled from this section (client review
   2026-09-08). Four across on desktop, then 2x2, then stacked - every state
   fills its rows, so nothing is ever left orphaned on a row of its own. */
.rb-sec .rb-svcs__grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px}
@media (max-width:1100px){ .rb-sec .rb-svcs__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .rb-sec .rb-svcs__grid{grid-template-columns:minmax(0,1fr)} }
/* scrim is a pseudo-element on the frame, so there is no stray widget to edit */
.rb-sec .rb-svc .rb-card__frame::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(0deg,rgba(6,31,53,.86) 0%,rgba(6,31,53,.52) 42%,rgba(6,31,53,.12) 100%);
  opacity:.86; transition:opacity var(--rb-move);
}
.rb-sec .rb-svc__name{
  position:absolute; left:18px; right:18px; bottom:15px; z-index:2; gap:8px;
}
.rb-sec .rb-svc__name::before{
  content:""; display:block; width:22px; height:2px; background:#fff;
  transform-origin:left center; transition:transform var(--rb-move);
}
.rb-sec .rb-svc__h3 .elementor-heading-title{
  font-size:clamp(17px,1.5vw,20px); font-weight:700; line-height:1.2;
  letter-spacing:-.014em; color:#fff;
}
.rb-sec .rb-svc__body{padding:16px 18px 18px; gap:13px; flex:1}
.rb-sec .rb-svc__desc,.rb-sec .rb-svc__desc p{
  font-size:14.5px; font-weight:400; line-height:1.52; color:#33434F;
}
.rb-sec .rb-svc__desc{max-width:36ch; flex:1}
/* text legibility only ever improves on hover, never degrades */
@media (hover:hover) and (pointer:fine){
  .rb-sec .rb-card:hover .rb-card__frame::after{opacity:1}
  .rb-sec .rb-card:hover .rb-svc__name::before{transform:scaleX(1.9)}
}

/* flooring: no photograph exists — a measured drawing of a plank course,
   and a stamp that says so. Delete the modifier class once a photo lands. */
.rb-sec .rb-svc--plan .rb-card__frame{
  background-color:var(--rb-navy);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='rgba(255,255,255,.26)'%3E%3Cpath d='M0 40h300M0 80h300M0 120h300M0 160h300'/%3E%3Cpath d='M40 40v40M140 40v40M240 40v40M-10 80v40M90 80v40M190 80v40M290 80v40M40 120v40M140 120v40M240 120v40M-10 160v40M90 160v40M190 160v40'/%3E%3C/g%3E%3Cg fill='none' stroke='%23C71310' stroke-width='1.2'%3E%3Cpath d='M40 174h100M40 170v8M140 170v8'/%3E%3C/g%3E%3C/svg%3E");
  background-size:cover; background-position:center;
}
.rb-sec .rb-svc__stamp{position:absolute; top:14px; right:14px; z-index:3}
.rb-sec .rb-svc__stamp .elementor-heading-title{
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; border:1px solid rgba(255,255,255,.42); padding:5px 9px;
}

/* ── numbered step rows ───────────────────────────────────────────────────
   Each card was width:25%, i.e. exactly 100% across four, so the flex gap
   pushed the fourth card onto a second row on every service page. A grid sizes
   the tracks after the gap is taken out, so four genuinely fit. */
.rb-steps{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:22px;
  align-items:stretch;
}
.rb-steps > .e-con,
.rb-steps > .elementor-element{
  width:auto !important; max-width:none !important; flex:0 1 auto !important;
}
@media (max-width:980px){ .rb-steps{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .rb-steps{grid-template-columns:minmax(0,1fr)} }

/* ── pre-footer CTA band ──────────────────────────────────────────────────
   Was a transparent strip with a heading and a button on every page. */
.rb-cta{position:relative; isolation:isolate}
.rb-cta > *{position:relative; z-index:1}
.rb-cta .elementor-button{
  transition:background-color 180ms linear, transform 320ms cubic-bezier(.2,.7,.2,1),
             box-shadow 320ms cubic-bezier(.2,.7,.2,1);
}
@media (hover:hover) and (pointer:fine){
  .rb-cta .elementor-button:hover{
    background-color:#A50F0D !important;
    transform:translateY(-2px);
    box-shadow:0 18px 34px -22px rgba(0,0,0,.75);
  }
}
.rb-cta .elementor-button:focus-visible{outline:3px solid #fff; outline-offset:4px}
.rb-cta .elementor-button:active{transform:translateY(0)}

/* the "or call" secondary action */
.rb-cta__call .elementor-heading-title a{
  color:#fff; text-decoration:none;
  border-bottom:2px solid rgba(255,255,255,.32);
  padding-bottom:2px;
  transition:border-color 180ms linear;
}
@media (hover:hover) and (pointer:fine){
  .rb-cta__call .elementor-heading-title a:hover{border-bottom-color:#fff}
}
.rb-cta__call .elementor-heading-title a:focus-visible{
  outline:3px solid #fff; outline-offset:6px; border-bottom-color:transparent;
}
@media (max-width:520px){
  .rb-cta__actions{flex-direction:column !important}
  .rb-cta__actions .elementor-button{width:100%}
}

/* ── eyebrow, usable outside an .rb-sec section ───────────────────────────
   The scoped rule below only matches inside sections built with .rb-sec. Older
   sections (e.g. "Built Right, Backed by Our Name") carry .rb-eye on their own,
   so the label needs a standalone rule to match "WHAT WE DO" and "RECENT WORK". */
.rb-eye .elementor-heading-title{
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#C71310;
  line-height:1.35;
}

/* Solid white nav bar — extra height under the logo. */
.elementor-location-header .elementor-element-fcc62a6{
  padding-top:12px !important;
  padding-bottom:18px !important;
}
/* Menu label colours come from the widget itself (normal #000, hover and
   active white on #C71310, all set in the editor via global colours). A
   blanket "color:#000 !important" on the labels used to live here and it
   flattened all three states, so the active/hovered item rendered black on
   red (3.5:1). Removed 2026-09-15 — do not force label colours from CSS. */

/* Emergency tarping block on Residential Roofing */
.rb-tarp h2{ margin:0 0 16px; }
.rb-tarp h3{ margin:28px 0 12px; }
.rb-tarp p{ margin:0 auto; max-width:820px; }
.rb-tarp__call, .rb-tarp a{ white-space:nowrap; }
.rb-tarp a{ color:#C71310; text-decoration:none; border-bottom:1px solid #C71310; }

/* ── nav on dark heroes: REMOVED 2026-09-15 ──────────────────────────────
   This used to force every header <a> white on the 13 navy-hero pages, from
   when the header was transparent over the hero. The header is now a solid
   white bar on every page, so the rule only served to paint the Services
   dropdown items white-on-white on those pages (Preston, 2026-09-15). The
   header now styles identically everywhere. Do not re-add per-page colours
   unless the header goes transparent again. */

/* ── financing ────────────────────────────────────────────────────────────
   Service Finance authenticates the dealer from a POSTed id and key, so this has
   to be a real form, not a link — a plain GET to the same URL returns /Home/denied.
   Styled to sit with the other primary actions. */
.rb-finance{margin:14px 0 0}
.rb-finance__btn{
  appearance:none; border:0; cursor:pointer;
  font-family:"Montserrat",sans-serif; font-size:15px; font-weight:600;
  color:#FFFFFF; background:#C71310;
  padding:14px 28px; border-radius:6px;
  transition:background-color 180ms linear, transform 320ms cubic-bezier(.2,.7,.2,1),
             box-shadow 320ms cubic-bezier(.2,.7,.2,1);
}
@media (hover:hover) and (pointer:fine){
  .rb-finance__btn:hover{
    background:#A50F0D; transform:translateY(-2px);
    box-shadow:0 18px 34px -22px rgba(0,0,0,.6);
  }
}
.rb-finance__btn:focus-visible{outline:3px solid #C71310; outline-offset:4px}
.rb-finance__btn:active{transform:translateY(0)}
/* in the footer it sits under a list of links, so keep it compact there */
.elementor-location-footer .rb-finance__btn{font-size:13px; padding:12px 22px}
.elementor-location-footer .rb-finance{margin:26px 0 6px}

/* ── footer ───────────────────────────────────────────────────────────────
   The service and location lists render as plain <ul> from text widgets, so
   they were arriving with disc bullets and a 40px browser indent. */
/* The footer inner had padding 70px 0 0 — nothing at the bottom — and the copyright
   row sits as the last flex child with zero margin, so the columns and the Apply
   button ran straight into it. Space goes ABOVE the copyright, not just below. */
.elementor-location-footer .e-con-inner{ padding-bottom:34px }
.elementor-location-footer .e-con-inner .e-con-inner{ padding-bottom:0 }

.elementor-location-footer .e-con-inner > .e-con:last-child{
  margin-top:44px;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,.12);
}

@media (max-width:768px){
  .elementor-location-footer .e-con-inner{ padding-bottom:26px }
  .elementor-location-footer .e-con-inner > .e-con:last-child{ margin-top:32px; padding-top:20px }
  .elementor-location-footer .rb-finance{ margin:20px 0 4px }
}

.elementor-location-footer ul,
.elementor-location-footer ol{
  list-style:none !important;
  padding-left:0 !important;
  margin:0;
  display:flex; flex-direction:column; gap:9px;
}
.elementor-location-footer li{margin:0}
.elementor-location-footer li::marker{content:none}

/* Column headings were centred inside their column while the lists under them were
   flush left, so every heading sat ~15px right of its own list. Pull everything to
   one edge and give the heading a short red rule so the columns read as columns. */
.elementor-location-footer .elementor-widget-heading .elementor-heading-title{
  text-align:left;
  font-size:13px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#FFFFFF;
  padding-bottom:10px;
  margin-bottom:12px;
  position:relative;
}
.elementor-location-footer .elementor-widget-heading .elementor-heading-title::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:26px; height:2px; background:#C71310;
}
.elementor-location-footer .elementor-widget-text-editor,
.elementor-location-footer .elementor-widget-heading{ text-align:left }

/* The list widgets carry margin-left:-15px, a nudge that used to cancel the browser's
   40px bullet indent. With the bullets gone it is pure offset, and it is why every
   column heading appeared 15px right of its own list. */
.elementor-location-footer .elementor-widget-text-editor{
  margin-left:0 !important;
}

.elementor-location-footer a{
  color:#D0D5DD;
  text-decoration:none;
  transition:color 180ms linear, border-color 180ms linear;
  border-bottom:1px solid transparent;
}
@media (hover:hover) and (pointer:fine){
  .elementor-location-footer a:hover{
    color:#FFFFFF;
    border-bottom-color:#C71310;
  }
}
.elementor-location-footer a:focus-visible{
  outline:3px solid #C71310; outline-offset:3px; border-bottom-color:transparent;
}

@media (forced-colors:active){
  .rb-sec .rb-card::after{border-color:Highlight}
  .rb-sec .rb-card:focus-visible,
  .rb-sec .rb-band__link a:focus-visible{outline-color:Highlight}
  .rb-sec .rb-svc__name,.rb-sec .rb-spot__block,.rb-sec .rb-band__cell{
    background:Canvas; color:CanvasText; forced-color-adjust:none;
  }
}

/* Centred text box - About intro. Container is width-limited, so auto margins
   are what actually centre it; text-align is set per widget in Elementor. */
.rb-sec .rb-centre,.rb-centre.e-con{margin-left:auto;margin-right:auto}

/* Consent checkbox inside the Request a Quote popup.
   Elementor's form_label_text_color control only styles .ff-el-input--label, so
   FluentForm's check label keeps its dark default and is unreadable on the popup's
   dark panel. Scoped to .elementor-popup-modal so the light Contact page form,
   which uses the same form, is untouched. */
.elementor-popup-modal .ff-el-form-check-label,
.elementor-popup-modal .ff-el-form-check-label span{color:#FFFFFF}

/* (per-page black nav labels removed 2026-09-15 — see note above) */

/* --- Header: Services dropdown (mega menu) --------------------------------
   Added 2026-09-09 for the client's requested Services dropdown. Elementor
   positions the panel relative to the whole menu widget, not the hovered item,
   so "Content Horizontal Position: center" is what lands it under Services.
   Padding and shadow live here because the mega-menu stylesheet overrides the
   container's own block padding. Colours are literal on purpose: the --rb-*
   tokens are scoped to .rb-sec and never reach the header. */
.elementor-element-4f2dc91 .e-n-menu-content > .e-con{
  padding-block:14px !important;
  border-radius:4px;
  box-shadow:0 12px 30px rgba(6,31,53,.16);
}
.elementor-element-4f2dc91 .e-n-menu-content .elementor-icon-list-item > a{
  padding-block:7px;
}
.elementor-element-4f2dc91 .e-n-menu-content .elementor-icon-list-text{
  font-size:16px; line-height:1.4; color:#061F35 !important; white-space:nowrap;
  transition:color 180ms linear;
}
.elementor-element-4f2dc91 .e-n-menu-content a:hover .elementor-icon-list-text{
  color:#C71310 !important;
}
/* On the hamburger layout (Elementor tablet breakpoint and below) the panel is
   stacked inline under "Services", not floated - so the desktop fit-to-content
   width just lets the page show through beside it. Span the full menu width
   and drop the floating-panel chrome. */
@media (max-width:1024px){
  .elementor-element-4f2dc91 .e-n-menu-content > .e-con{
    --width:100% !important; width:100% !important; max-width:none !important;
    border-radius:0; box-shadow:none;
  }
  .elementor-element-4f2dc91 .e-n-menu-content .elementor-icon-list-text{ white-space:normal; }
}
/* Hamburger layout, tapped item. Elementor's dropdown layout only defines a
   normal and an active label colour - no hover - yet it still paints the
   widget's hover background on the tapped title (touch browsers leave :hover
   stuck after a tap). So the label sat black on the red hover background.
   Same condition, same fix: wherever the background goes red, the label and
   its caret go white. Specificity beats Elementor's own dropdown label rule
   (8 vs 7) so no !important is needed. */
.elementor-element-4f2dc91 .e-n-menu[data-layout="dropdown"] .e-n-menu-title:hover:not(.e-current) .e-n-menu-title-container .e-n-menu-title-text,
.elementor-element-4f2dc91 .e-n-menu[data-layout="dropdown"] .e-n-menu-title:hover:not(.e-current) .e-n-menu-dropdown-icon{
  color:#FFFFFF;
}
/* the caret is an inline SVG, painted via fill - and Elementor's dropdown-layout
   "normal" fill rule out-ranks its own hover rule, exactly like the label */
.elementor-element-4f2dc91 .e-n-menu[data-layout="dropdown"] .e-n-menu-title:hover:not(.e-current) .e-n-menu-dropdown-icon svg{
  fill:#FFFFFF;
}

/* --- Contact Form 7 -------------------------------------------------------
   The build was designed around Fluent Forms; CF7 replaced it so the CRM
   lead-forwarding and ad-attribution plugins (which hook CF7) keep working
   unmodified. These values are measured from the Fluent Forms controls they
   replace, so the forms look identical to the approved design.
   Literal colours on purpose: the --rb-* tokens are scoped to .rb-sec and do
   not reach popups or the theme-builder templates. */
.rbf-cf7{ width:100%; }
.rbf-cf7__row{ margin-bottom:14px; }
.rbf-cf7__row--2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:560px){ .rbf-cf7__row--2{ grid-template-columns:1fr; } }

/* CF7 wraps every control in a span; it must not break the grid */
.rbf-cf7 .wpcf7-form-control-wrap{ display:block; width:100%; }

.rbf-cf7 input[type="text"],
.rbf-cf7 input[type="email"],
.rbf-cf7 input[type="tel"],
.rbf-cf7 input[type="date"],
.rbf-cf7 select,
.rbf-cf7 textarea{
  width:100%; box-sizing:border-box;
  padding:11px 15px; font-size:16px; line-height:1.4;
  color:#606266; background:#fff;
  border:1px solid #D0D5DD; border-radius:7px;
  font-family:inherit;
  transition:border-color 180ms linear, box-shadow 180ms linear;
}
.rbf-cf7 input[type="text"],
.rbf-cf7 input[type="email"],
.rbf-cf7 input[type="tel"],
.rbf-cf7 input[type="date"],
.rbf-cf7 select{ height:46px; }
.rbf-cf7 textarea{ height:120px; min-height:90px; resize:vertical; }
/* CF7 templates are authored with explicit .rbf-cf7__row spacing */
.rbf-cf7 p{ margin:0; }
.rbf-cf7 br{ display:none; }

.rbf-cf7 ::placeholder{ color:#98A2B3; opacity:1; }
.rbf-cf7 select:invalid,
.rbf-cf7 select option[value=""]{ color:#98A2B3; }

.rbf-cf7 input:focus,
.rbf-cf7 select:focus,
.rbf-cf7 textarea:focus{
  outline:none; border-color:#C71310;
  box-shadow:0 0 0 3px rgba(199,19,16,.12);
}

/* submit */
.rbf-cf7 input[type="submit"],
.rbf-cf7 button[type="submit"]{
  width:100%; cursor:pointer;
  padding:13px 20px; font-size:15px; font-weight:600; line-height:1.2;
  color:#fff; background:#C71310;
  border:1px solid transparent; border-radius:7px;
  font-family:inherit;
  transition:background 180ms linear;
}
.rbf-cf7 input[type="submit"]:hover,
.rbf-cf7 button[type="submit"]:hover{ background:#A50F0D; }

/* CF7's own messaging - keep it inside the form, not full-bleed */
.rbf-cf7 .wpcf7-not-valid-tip{ font-size:13px; color:#C71310; margin-top:5px; }
.rbf-cf7 input.wpcf7-not-valid,
.rbf-cf7 select.wpcf7-not-valid,
.rbf-cf7 textarea.wpcf7-not-valid{ border-color:#C71310; }
.wpcf7 form .wpcf7-response-output{
  margin:14px 0 0; padding:12px 15px; border-radius:7px;
  font-size:14px; line-height:1.5; border-width:1px;
}
.wpcf7 form.sent .wpcf7-response-output{ border-color:#0F9D58; color:#0F9D58; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output{ border-color:#C71310; color:#C71310; }
/* CF7's spinner is always in the DOM; as display:block it reserved an empty
   row under the button. Only show it while the form is actually sending. */
.rbf-cf7 .wpcf7-spinner{ display:none; }
.wpcf7 form.submitting .rbf-cf7 .wpcf7-spinner{ display:block; margin:10px auto 0; }

/* --- Free Inspection popup (1160) -----------------------------------------
   Swapping the Fluent Forms widget for a CF7 shortcode dropped the widget's
   own chrome, which was carrying the modal's whole look. These values are taken
   from the live site's .rr-modal so the rebuilt popup reads the same: 520px
   card, 16px radius, 45/32/32 padding so the close button clears the first row,
   circular close, centred title. Colours are this build's, not the old site's. */
/* The modal is deliberately glassy - an existing !important rule sets
   rgba(6,31,53,.1) + backdrop-filter blur, the same treatment the live
   .rr-modal uses. Left alone; only the sizing and edge treatment are set here. */
#elementor-popup-modal-1160 .dialog-widget-content,
#elementor-popup-modal-1160 .dialog-message{
  border-radius:20px;
  max-width:520px;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 32px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.15);
}
/* the card supplies the padding, so the inner container must not fight it */
#elementor-popup-modal-1160 .elementor-location-popup > .e-con{ padding:0; }
#elementor-popup-modal-1160 .e-con-inner{ padding:44px 32px 32px; }

/* circular close, clear of the first field row */
#elementor-popup-modal-1160 .dialog-close-button{
  top:12px; right:12px; width:30px; height:30px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.15); border-radius:50%;
  color:#fff; opacity:1; transition:background 180ms linear;
}
#elementor-popup-modal-1160 .dialog-close-button:hover{ background:rgba(255,255,255,.3); }
#elementor-popup-modal-1160 .dialog-close-button svg{ width:12px; height:12px; fill:#fff; }

/* title */
.rbf-cf7__title,
#elementor-popup-modal-1160 .rbf-cf7__title .elementor-heading-title{
  font-size:20px; font-weight:700; line-height:1.3;
  color:#fff; text-align:center;
}
#elementor-popup-modal-1160 .rbf-cf7__title{ margin-bottom:24px; }

/* the popup is a tighter space than a page section */
.rbf-cf7--popup .rbf-cf7__row{ margin-bottom:12px; }
.rbf-cf7--popup input[type="text"],
.rbf-cf7--popup input[type="email"],
.rbf-cf7--popup input[type="tel"],
.rbf-cf7--popup input[type="date"],
.rbf-cf7--popup select{ height:44px; font-size:15px; }
.rbf-cf7--popup textarea{ height:92px; min-height:92px; font-size:15px; }
.rbf-cf7--popup input[type="submit"]{ height:52px; font-size:16px; font-weight:700; margin-top:4px; }

/* --- Legal / plain pages (Privacy Policy, Terms, Join Our Team) ------------
   Ported from the Divi site at launch as plain HTML inside the theme's default
   page template, so they need their own measure and rhythm. Literal colours on
   purpose - the --rb-* tokens are scoped to .rb-sec. */
.rb-legal{ max-width:860px; margin:0 auto; padding:48px 24px 88px; color:#2A2F36; font-size:17px; line-height:1.7; }
.rb-legal h2{ font-size:26px; line-height:1.25; margin:40px 0 14px; color:#061F35; }
.rb-legal h3{ font-size:21px; line-height:1.3; margin:32px 0 10px; color:#061F35; }
.rb-legal p{ margin:0 0 16px; }
.rb-legal ul, .rb-legal ol{ margin:0 0 18px 22px; }
.rb-legal a{ color:#C71310; }
.rb-legal .sjb-page{ margin-top:8px; }
.page-template-default .site-main > .page-header .entry-title,
.page-template-default h1.entry-title{ max-width:860px; margin:40px auto 0; padding:0 24px; font-size:38px; line-height:1.2; color:#061F35; }

/* --- Popup on phones (Elementor's mobile breakpoint) ----------------------
   Elementor fixes the card at 520px with no mobile override, so on a 375px
   phone it hung 72px off BOTH edges and the close button sat off-screen at
   x=406: visitors were stuck behind a modal they could not close (reported
   2026-09-16). Fit the card to the viewport with a 12px margin, let the body
   scroll inside the card, tighten the padding, and make the close button a
   solid disc at a real tap size. The date field's placeholder is handled in
   rb-sections.php (iOS paints an empty <input type=date> completely blank). */
@media (max-width:767px){
  #elementor-popup-modal-1160 .dialog-widget-content{
    width:calc(100% - 24px) !important; max-width:calc(100% - 24px) !important;
    max-height:calc(100% - 24px) !important; border-radius:16px;
  }
  #elementor-popup-modal-1160 .dialog-message{
    max-width:100% !important; max-height:calc(100vh - 24px) !important; border-radius:16px;
  }
  #elementor-popup-modal-1160 .e-con-inner{ padding:42px 18px 22px; }
  #elementor-popup-modal-1160 .dialog-close-button{
    top:10px; right:10px; width:36px; height:36px;
    background:#fff; color:#061F35; box-shadow:0 2px 10px rgba(0,0,0,.25);
  }
  #elementor-popup-modal-1160 .dialog-close-button:hover{ background:#fff; }
  #elementor-popup-modal-1160 .dialog-close-button svg{ width:14px; height:14px; fill:#061F35; }
  #elementor-popup-modal-1160 .rbf-cf7__title .elementor-heading-title{ font-size:18px; padding:0 30px; }
  #elementor-popup-modal-1160 .rbf-cf7__title{ margin-bottom:16px; }
  .rbf-cf7--popup .rbf-cf7__row{ margin-bottom:10px; }
}
/* the date field while empty is shown as a text box with a placeholder (see
   rb-sections.php) - match the placeholder colour of the other controls */
.rbf-cf7 input.rbf-date-empty{ color:#8A94A6; }