/* ============================================================
   Raydn svc210. Craft pass from the Hater Squad Pack A-D audit
   of svc209, DO NOW items 1 to 5.

   Five fixes, all CSS except two attribute edits in index.html.
   No copy changes. No new content. No red.

   Two diagnoses in the audit were wrong and were corrected by
   direct measurement before this file was written. Both
   corrections are recorded inline below.
   ============================================================ */


/* ------------------------------------------------------------
   1. Testimonial cards, desktop only.

   AUDIT CORRECTION. The audit prescribed adding
   display:flex, flex-direction:column and margin-top:auto.
   All three were already present in wave7p46-testimonials.css.
   The prescribed fix was a no-op.

   The real mechanism is the opposite. margin-top:auto is doing
   exactly what it was written to do: it pins the attribution to
   the bottom of an equal height grid row. Measured computed
   margin-top on the two short cards was 55.41px and 83.11px, so
   the whole slack lands in the gap between a quote and its own
   attribution. Measured gap quote to meta on desktop:
   73 / 18 / 101 / 18 px. Space below meta: 23px on all four.
   On mobile the cards size to content and the gap is a uniform
   18px on all four, which is the look we want.

   So: release the pin on desktop. The attribution then sits
   17.6px under its quote on every card at every breakpoint, and
   the leftover height falls to the card bottom where it reads as
   padding instead of a hole between two elements that belong
   together.
   ------------------------------------------------------------ */
@media (min-width: 721px) {
  .rr-testimonials__meta {
    margin-top: 0 !important;
  }
}


/* ------------------------------------------------------------
   2. Contrast inside .rr-billproof, the only white section on
   the site. Seven axe failures, all seven in this block, on the
   page's strongest proof asset.

   Ratios computed, not estimated. Before to after, against the
   real measured background:
     eyebrow            #c07d10 -> #8a5a00   3.40 -> 5.93
     note, cap, cap-em  #7a8494 -> #5c6675   3.78 -> 5.81
     ghost cta          #b26a00 -> #8a5a00   4.24 -> 5.93
     disclosure strong  #b26a00 -> #8a5a00   3.95 -> 5.52  (on #fef6e9)
     badge background   #1f8a52 -> #166b3f   4.36 -> 6.54  (white text)
   WCAG AA needs 4.5. All five clear it.

   Every replacement is a darker shade of a colour already in the
   palette family, chosen because nothing lighter clears AA on
   white. Dark amber is established precedent on this site:
   #b26a00 and #8a5200 were already in raydn.css. No red.

   The eyebrow also gets its size back. The source rule sets
   .78rem, 12.48px, but it renders at 10.88px because a later
   eyebrow calming rule shrinks it. 12.48px is the floor for
   uppercase text at 800 weight.
   ------------------------------------------------------------ */
.rr-billproof__eyebrow {
  color: #8a5a00 !important;
  font-size: .78rem !important;
  opacity: 1 !important;
}

.rr-billproof__note,
.rr-billproof__cap,
.rr-billproof__cap-em,
figcaption.rr-billproof__cap,
span.rr-billproof__cap-em {
  color: #5c6675 !important;
}

.rr-billproof__cta.rr-billproof__cta--ghost {
  color: #8a5a00 !important;
  border-color: rgba(138, 90, 0, .55) !important;
}

.rr-billproof__cta.rr-billproof__cta--ghost:hover {
  color: #6f4800 !important;
  border-color: #8a5a00 !important;
}

.rr-billproof__badge {
  background: #166b3f !important;
}

.rr-billproof__disclosure strong {
  color: #8a5a00 !important;
}


/* ------------------------------------------------------------
   3. The founder photo.

   Rendered 118x118 desktop and 96x96 mobile from a 400x533
   source, next to a 896px wide body block, in the one section
   whose entire argument is that you get the owner. The bill
   screenshot two sections up renders 340x331. That is 8.1 times
   the pixel area for the paper over the person.

   240 desktop, 160 mobile. Width and height attributes on the
   img are updated to match so nothing shifts.

   object-position moves from 55% to 76% on the y axis. The
   source is a rooftop photo with the face at roughly 57% of the
   frame height. A square crop of a 533px tall image leaves 133px
   of travel, so centring the face needs (304 - 200) / 133 = 78%.
   76% keeps the face centred and holds a little of the array.
   ------------------------------------------------------------ */
.rr-ownerband__photo img {
  width: 240px !important;
  height: 240px !important;
  border-radius: 18px !important;
  object-position: 50% 76% !important;
}

@media (max-width: 720px) {
  .rr-ownerband__photo img {
    width: 160px !important;
    height: 160px !important;
  }
}


/* ------------------------------------------------------------
   4. The logo tagline.

   AUDIT CORRECTION, and the defect is worse than published. The
   audit reported 11px italic. Measured computed values are
   9.92px on desktop and 8.8px on mobile, italic, because the
   element is an <i> tag. The legibility floor already in
   raydn.css targets [class*="logo"] [class*="tag"] and never
   matched, because the class is nav__logo-slogan-txt. Slogan,
   not tag.

   On mobile the element is visibility:hidden at 0x0, which is
   deliberate and is left alone. This is a desktop fix.

   12.5px, upright, full opacity amber.
   ------------------------------------------------------------ */
.nav__logo-slogan-txt,
.nav__logo-slogan-full,
.nav__logo-slogan-short {
  font-size: 12.5px !important;
  font-style: normal !important;
  color: #f5a524 !important;
  letter-spacing: .01em;
  line-height: 1.25;
}


/* ------------------------------------------------------------
   5. Hero trust chips.

   AUDIT CORRECTION. The audit called the full width fifth chip
   on mobile an orphan. It is not. raydn.css already carries
   .hero-trust > :last-child:nth-child(odd) { grid-column: 1 / -1 }
   so on mobile, where the container is a 2 column grid, the odd
   last chip spans the row on purpose. Mobile is correct as built
   and gets no change.

   The real defect is desktop only. There the container is
   display:flex with flex-wrap, so grid-column is inert, the
   chips wrap 3 then 2, and the rule never fires. Measured right
   edges at 1512px: row one 368 / 594 / 794, row two 364 / 589.
   Row one runs 205px past row two.

   Fix: make the container the same 2 column grid it already is
   on mobile. The existing full width rule then fires, chip widths
   become uniform, and the ragged edge goes away.

   SECOND CORRECTION, caught by measuring the other pages before
   shipping. The first version of this rule was unscoped and hit
   every page. Measured row raggedness before and after on the
   five secondary pages that carry this component:

     page                      before  first try  scoped
     index.html                  205        0        0
     commercial-solar.html       344        0      344
     solar.html                    0        0        0
     battery-storage.html          0        0        0
     ev-charger.html               0        0        0
     electrical-services.html      0        0        0

   Four of those pages were already clean. Their four chips sit in
   one flush row and the unscoped rule split them into two rows
   for no reason, which is editing a page that was not broken.

   So this is scoped by chip count. :has(> :nth-child(5)) matches
   only the 5 chip container, which is index. The four chip pages
   are left exactly as they were. commercial-solar is genuinely
   ragged at 344px, but that page has not been audited, so it is
   logged as a new finding rather than fixed blind.
   ------------------------------------------------------------ */
.hero-trust:has(> :nth-child(5)) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
  align-content: start;
}

.hero-trust:has(> :nth-child(5)) > .hero-trust__chip {
  justify-content: center;
  text-align: center;
}

.hero-trust:has(> :nth-child(5)) > :last-child:nth-child(odd) {
  grid-column: 1 / -1;
}


/* ============================================================
   svc211 FIX 1. commercial-solar.html hero chips, ragged right edge.

   MEASURED BEFORE, viewport 1512x900, fonts ready:
     4 chips, wrapping 3 then 1.
     row one max right edge 1011, row two max right edge 667.
     row one runs 344px past row two.

   Mobile is a different case and is NOT touched. Three of the four
   chips carry hero-trust__chip--hide-mobile, so only one chip is
   visible at 390 and at 320. Measured ragged 0 at both. Correct
   as built.

   Cause is the same one fixed on index in svc210: the container is
   flex wrap, so the full width rule in raydn.css is inert, and the
   longest chip (5.0 Google, 60+ reviews) is pushed alone onto row two.

   This page has 4 chips, the same count as solar, battery-storage,
   ev-charger and electrical-services, which all measured ragged 0
   and must not move. So it cannot be scoped by count the way index
   was. It is scoped by an explicit class on this one container.

   SECOND CORRECTION, caught by measuring the narrow viewport before
   shipping. The first version of this block was unscoped by width
   and it shrank the one visible mobile chip, because the existing
   mobile grid in raydn.css sizes columns differently from this one.
   Measured width of the single visible chip:

     viewport   before   unscoped   width scoped
     390px        197       191         191
     320px        194       156         194

   At 320 the chip lost 38px and the text inside it was being forced
   to wrap. Mobile measured ragged 0 before any of this, so there was
   nothing to fix there. The rule is now desktop only, at the same
   721px breakpoint the svc210 testimonial fix uses.
   ------------------------------------------------------------ */
@media (min-width: 721px) {
  .hero-trust--grid2 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
    align-content: start;
  }

  .hero-trust--grid2 > .hero-trust__chip {
    justify-content: center;
    text-align: center;
  }

  .hero-trust--grid2 > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* ============================================================
   svc211 FIX 2 support. Non ASCII glyph normalisation.

   The 13 calculator links carried 60&#8209;sec, a U+2011 non
   breaking hyphen. It was doing real work: measured, the link is
   exactly its parent width (217px desktop, 169px at 390, 138px at
   320) and already wraps to 3 and 4 lines, so a plain ASCII hyphen
   creates a break opportunity that can orphan "60-" at the end of
   a line.

   So the glyph goes ASCII and the break is prevented explicitly
   instead of by an invisible character.
   ------------------------------------------------------------ */
.wt-nb { white-space: nowrap; }

/* svc212: the file input inside .bill-upload is visually hidden but still
   focusable. The label no longer carries role=button or tabindex, which was
   an invalid ARIA role on a label element, so make the wrapper show focus
   when the real input is focused. */
.bill-upload:focus-within{outline:2px solid #f5a524;outline-offset:3px;border-color:#f5a524}

/* svc214: Score My Quote is the leverage tool, not a sixth calculator.
   The mobile drawer already says so with a full width amber chip.
   Say the same thing on desktop instead of burying it as row six of six. */
.nav__dropdown--sm a[href="/audit-my-quote"]{margin-top:7px;padding-top:13px;border-top:1px solid rgba(245,165,36,.20)}
.nav__dropdown--sm a[href="/audit-my-quote"] strong{color:#f5a524}
.nav__dropdown--sm a[href="/audit-my-quote"] .nav__dd-icon{background:linear-gradient(180deg,#f7b23a,#f5a524);color:#0a1526}
/* svc214: the panel was min-width 220px while the rows are white-space:nowrap and
   overflow:visible, so four sub copy lines were already painting outside the panel
   background. Widen to fit the longest row plus its right padding. */
.nav__dropdown--sm{min-width:252px}

/* svc214: the footer service area line rendered at 68% white under a further
   0.62 inline opacity, measuring 4.04:1. It names every town we serve, so it
   is the last line that should be hard to read. */
.footer__service-area{color:#c7d0dd !important;opacity:1 !important}

/* svc218 drawer review row */
.rdn-mnav__review{display:flex!important;align-items:center;gap:.6rem;margin-top:.5rem;padding:.6rem .85rem;
 border:1px solid rgba(245,165,36,.38);border-radius:10px;background:rgba(245,165,36,.07);color:#f5a524;
 min-height:44px;text-align:left}
.rdn-mnav__review svg{flex:0 0 auto;fill:#f5a524!important;stroke:none!important;color:#f5a524}
.rdn-mnav__review-txt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.rdn-mnav__review-txt strong{font-size:.9rem;font-weight:800;color:#f5a524}
.rdn-mnav__review-txt small{font-size:.72rem;color:#8a94a6;margin-top:.12rem}
.rdn-mnav__review:hover,.rdn-mnav__review:focus-visible{border-color:rgba(245,165,36,.7);background:rgba(245,165,36,.12)}


/* svc218 contrast fixes. Every value measured with axe-core 4.10.2 at 390x844
   and every replacement checked to >=4.5:1 before it was written. No red introduced.
   Dark surfaces use the palette grey #8a94a6. Light surfaces use a dark amber #6b4200. */

/* --- dark surfaces (#0d1b2e / #142133) --- */
.rdn-calc-action__label{color:#8a94a6!important}   /* 3.77 -> 5.66 */
.rr-watchlist__fine{color:#8a94a6!important}       /* 3.10 -> 5.66 */
.mob-bar__lbl{color:#8a94a6!important}             /* 2.51 -> 5.66 */
.w69d-rev__meta{color:#8a94a6!important}           /* 4.35 -> 5.30 */
.google-banner .container p,
.google-banner .container div{color:#8a94a6!important} /* 4.44 -> 5.66 */
#res-itc-note{color:#8a94a6!important}             /* 3.77 -> 5.66 */
#pb-yr-label,.pb-ends>span{color:#8a94a6!important} /* 2.68 -> 5.66 */
#pb-label-val{color:#4ade80!important}             /* 2.42 -> 9.93, palette green */

/* --- light surfaces, scoped to the three light-theme pages via body.rdn-light --- */
body.rdn-light .fee-mini__badge{color:#6b4200!important}          /* 1.79 -> 7.65 */
body.rdn-light .fee-mini__readmore a{color:#6b4200!important;border-bottom-color:rgba(107,66,0,.4)!important} /* 3.35 -> 8.40 */
body.rdn-light .section-header .label{color:#6b4200!important} /* 1.92 -> 8.21 */
body.rdn-light #bill-display,
body.rdn-light .lead-card__eyebrow{color:#6b4200!important}       /* 1.91 -> 8.21 */
/* svc222. The rdn-light page flag is set on solar-calculator and commercial-solar-calculator,
   but the stepper card on both pages is dark navy, so the light-surface grey #4a5464 was
   landing dark on dark at 2.17:1. The chips use the component default again. */
/* svc223. svc222 was wrong. Both solar-calculator and commercial-solar-calculator carry the
   rdn-light body flag, but the stepper CARD is dark navy on the residential page and off-white
   on the commercial one, so one blanket colour cannot serve both. svc222 set light grey for the
   whole flag, which fixed residential at 10.81:1 and broke commercial to 1.49:1, measured from
   rendered pixels. Scoped to the surface now, not to the page flag. */
body.rdn-light.solar-calc-page .rdn-stepper__chip{color:#c7d0dd!important}          /* dark card,  2.17 -> 10.81 */
body.rdn-light:not(.solar-calc-page) .rdn-stepper__chip{color:#4a5464!important}    /* light card, 1.49 -> 7.24 */
body.rdn-light .rdn-stepper__chip.is-active,body.rdn-light .rdn-stepper__chip.active{color:#0a1526!important}

/* .evx-edu sits on a white section inside a dark page, so it is section scoped not body scoped */
.evx-edu__eyebrow{color:#6b4200!important}         /* 2.86 -> 8.73 */
.evx-edu__num{color:#8a5300!important}             /* 1.42 -> 6.33 */

.evx-edu__block--feature .evx-edu__num{color:#f7b23a!important} /* 2.99 -> 9.38 */

/* svc218 contrast fixes, round two. Same method, all values measured then rechecked. */

/* dark surfaces #0d1b2e / #132033 / #172436 / #1b2940, all to #8a94a6 (4.78 to 5.66:1) */
.ba-more-divider__label{color:#8a94a6!important}      /* 4.44 -> 5.66 */
.manifesto__sub{color:#8a94a6!important}              /* 4.44 -> 5.66 */
.cc-field__hint,.cc-opt,.cc-divider>span,.cc-privacy{color:#8a94a6!important} /* 3.72 to 4.34 -> 5.36 */
.ev-loadmgmt__compare-vs{color:#8a94a6!important}     /* 3.70 -> 5.12 */
.bev-triangle__footnote-math li,
.bev-triangle__footnote-math li strong{color:#8a94a6!important} /* 1.94 -> 4.78 */
body:not(.rdn-light) a[href$="our-mission"]:not(.sanctuary-mini__cta){color:#f5a524!important} /* 3.44 -> 8.48. The sanctuary CTA also points at /our-mission but sits on an amber button, so it is excluded. */

/* light sections sitting inside dark pages, so class scoped not body scoped */
.rr-mini-calc__eyebrow,.rr-mini-calc__link,#applHours{color:#6b4200!important} /* 1.93 to 2.04 -> 8.26+ */
.rr-mini-calc__sub,.rr-mini-calc__fineprint,
.rr-appliance-chip,.rr-mini-calc__cell *{color:#4a5464!important} /* 2.69 to 2.84 -> 7.24+ */
#ev-pricing .section-header .label,
#ev-pricing .label,
a[href="/contact?tier=custom"]{color:#6b4200!important} /* 1.94 to 2.23 -> 8.33 */

/* light pages */
body.rdn-light button[data-bill]{color:#0d1b2e!important}   /* white on amber 2.04 -> 8.48 */
body.rdn-light .lead-card h3{color:#0d1b2e!important}       /* white on #f6f8fc 1.06 -> 16.28 */

/* the decorative step numerals are 35.2px, so the AA threshold is 3:1 for large text.
   They carried opacity .5 which blended #8a5300 to #c5a980 at 2.24. Opacity to 1 with a
   lighter amber keeps them faint and clears the bar. */
.evx-edu__block:not(.evx-edu__block--feature) .evx-edu__num{color:#b8802a!important;opacity:1!important}

/* svc218 contrast fixes, round three. Mechanism identified per element:
   some were low alpha, some were a dimmed parent opacity, some were solid. */

/* alpha and parent-opacity dimming, restored to full then coloured */
.rr-std-num{color:#f5a524!important}                    /* was rgba(245,165,36,.32) 1.94 -> 7.16, 24px/900 */
.services-range-item{opacity:1!important}               /* parent opacity .686 dimmed the text to 3.62 */
.receipt__eyebrow{opacity:1!important;color:#4a5464!important}  /* 3.86 -> 7.2 */
.receipt small{opacity:1!important;color:#4a5464!important}     /* 3.54 -> 7.2 */

/* solid colours on light surfaces */
.anatomy__num{color:#6b4200!important}                  /* 1.72 -> 8.2, 24px/800 */
.rr-appliance-chip__w,.rr-appliance-chip *{color:#4a5464!important} /* 2.84 -> 7.65 */
.calc-email-capture__title{color:#0d1b2e!important}     /* white on #f6f8fc 1.06 -> 16.28 */
.rr-after__year{color:#6b4200!important}                /* 1.89 -> 8.2 */

/* solid colours on dark surfaces */
.bev-triangle__footnote,.bev-triangle__footnote *{color:#8a94a6!important} /* 1.94 -> 4.78 */
.hg-rate__disc{color:#8a94a6!important}                 /* 4.45 -> 5.66 */
.partner-spotlight__meta{color:#8a94a6!important}       /* 2.46 -> 5.12 */
.rdn-result__eyebrow,.rdn-result__subcaption{color:#8a94a6!important} /* 4.49 -> 5.66 */
.sanctuary-mini__cta{color:#f4f6fb!important}           /* amber on #b45309 2.46 -> 5.9 */

/* ghost buttons sitting on the cream section read white on near white */
.section--cream .btn--ghost,.section--cream .btn--ghost:link{color:#0d1b2e!important;border-color:rgba(13,27,46,.35)!important}

/* links inside body text were distinguished by colour alone */
.lp-hero .wrap a,.wrap>a[href^="tel:"],.wrap>a[href="/"]{text-decoration:underline!important;text-underline-offset:2px}

/* svc218 contrast, round four. Mechanisms confirmed by reading computed style per element. */
.hg-rate__disc{opacity:1!important}   /* the colour rule was landing, an opacity of .85 was re-dimming it */
body a.sanctuary-mini__cta[href]{color:#f4f6fb!important}  /* amber on #b45309 2.46 -> 5.9 */

/* .section--cream appears on solar.html only and no background was ever defined for it,
   so an 800 weight navy heading was rendering on the dark page background at 1.09:1,
   effectively invisible. The child cards already render on #fdf6ea, so the cream
   background is the intended design and restoring it is the correct fix. */
.section--cream{background:#fdf6ea}
/* the lede and the closing note in that section were coloured for a dark background */
.section--cream>.container>p,.section--cream .rr-after__head p{color:#4a5464!important}
.section--cream a{color:#6b4200!important}


/* svc222. The bill and offset preset chips were all given the ACTIVE chip's navy text colour,
   #0d1b2e, including the five inactive ones sitting on a 3% white fill over navy. Measured from
   rendered pixels at 2.26:1, so on a phone in daylight they read as empty outlines. The active
   chip keeps navy because its fill is amber. */
.rdn-slider__chip:not(.active):not(.is-active){color:#c7d0dd!important}
.rdn-slider__chip.active,.rdn-slider__chip.is-active{color:#0a1526!important}


/* svc223. Two .calc-value readouts on commercial-solar-calculator, same class, same off-white
   card, different colours. The bill readout was already dark amber #6b4200 at 8.21:1. The demand
   readout was still bright amber #f5a524 at 1.92:1, measured from rendered pixels. Bright amber
   is a dark-surface colour. On the light card it goes dark amber, which is the approved light
   surface value. */
body.rdn-light:not(.solar-calc-page) .calc-value{color:#6b4200!important}


/* svc224. Third instance of the same root cause. craft-svc219.css:344 painted #bill-display
   dark amber for every body.rdn-light page. Correct on commercial-solar-calculator, whose bill
   card is off-white, 8.21:1. Wrong on solar-calculator, whose bill card is dark navy, where the
   same rule measured 1.99:1 from rendered pixels. Scoped to the surface. Swept the whole svc218
   light-surface block across all three rdn-light pages: this was the only remaining failure. */
body.rdn-light.solar-calc-page #bill-display{color:#f5a524!important}   /* 1.99 -> 8.58 */


/* svc224. Fourth instance of the same root cause, and the most visible one. The stepper rail is
   rgba(255,255,255,.12), a white haze. Over navy that reads as a grey rail. Over the off-white
   commercial card it renders 247,248,252 against a 246,248,252 card, measured 1.00:1 from the
   rendered pixel row. The rail is not faint there, it is absent, so the demand stepper at value 0
   shows a minus button, empty space, and a plus button. Palette grey on light cards instead. */
body.rdn-light:not(.solar-calc-page) .rdn-stepper__track{background:#8a94a6!important}