/* =====================================================================
   NJA visual polish v1, 11 Oct 2026. Load LAST (after nja-fixes.css).
   Scope: imagery, colour tone, overlays, transitions, spacing, alignment.
   No copy, section order, fonts, palette or component design changes.
   Rollback: remove this one <link>; original image files are untouched.
   ===================================================================== */

/* P1. Heroes: graded files replace live CSS desaturation (saturate .65-.82 made skin
   muddy brown against the navy shape). The grade is baked into the file instead:
   navy-tinted shadows, softened saturation, light sharpening. */
.hero .hero-photo[data-photo="0"]{background-image:url(assets/hero-disputes-g.webp)!important}
.hero .hero-photo[data-photo="1"]{background-image:url(assets/hero-business-g.webp)!important}
.hero .hero-photo[data-photo="2"]{background-image:url(assets/hero-recovery-g.webp)!important}
.hero .hero-photo[data-photo="3"]{background-image:url(assets/hero-family-g.webp)!important}
.hero .hero-photo{filter:none!important}

/* P2. Post-hero band: graded photo; the flat heavy navy veil becomes a directional
   veil (dense behind the copy, lighter on the right) so the photo reads instead of
   showing as a muddy blur. */
.support-introduction{background-image:url('assets/nja-documents-g.jpg');background-position:center 78%}
.support-introduction::before{background:linear-gradient(90deg,rgba(26,48,80,.93) 0%,rgba(26,48,80,.82) 45%,rgba(26,48,80,.50) 100%)}
@media(max-width:767px){.support-introduction{background-position:22% 70%}.support-introduction::before{background:linear-gradient(180deg,rgba(26,48,80,.70),rgba(26,48,80,.88))}}

/* P3. People band: graded group photo; overlay ramps 0.84 -> 0.48 so faces on the
   right read clearly while the headline keeps AA+ contrast on the left. */
.people-transition{background-image:url('assets/nja-team-g.jpg');background-position:center 58%}
.people-transition::before{background:linear-gradient(90deg,rgba(26,48,80,.86) 0%,rgba(26,48,80,.70) 42%,rgba(26,48,80,.46) 100%)}
@media(max-width:767px){.people-transition{background-position:50% 52%}.people-transition::before{background:linear-gradient(180deg,rgba(26,48,80,.50) 0%,rgba(26,48,80,.72) 55%,rgba(26,48,80,.80) 100%)}}

/* P4. Insights band: keep the approved light-grey overlay, but ramp it off on the
   right so the photo is crisp, not fogged; graded photo removes the warm/cyan mix. */
.insights-banner{background-image:url('assets/nja-partners-g.jpg');background-position:center 40%}
.insights-banner:before{background:linear-gradient(90deg,rgba(218,218,217,.97) 0%,rgba(218,218,217,.93) 38%,rgba(218,218,217,.55) 62%,rgba(218,218,217,.12) 100%)}
@media(max-width:767px){.insights-banner{background-position:62% center}.insights-banner:before{background:linear-gradient(180deg,rgba(218,218,217,.94) 0%,rgba(218,218,217,.86) 55%,rgba(218,218,217,.50) 100%)}}

/* ---------- Webinar page ---------- */
/* P5. Hero photo: graded, re-cropped so the pen hand and tie sit on the 1/3 line
   (live crop cut the hand at the frame edge), and a soft navy-to-grey seam so the
   photo meets the #DADAD9 panel without a hard warm/cool clash. */
.renewal-image{background:linear-gradient(90deg,rgba(26,48,80,.10),rgba(26,48,80,.18) 80%,rgba(218,218,217,.35)),url('assets/nja-documents-g.jpg') 6% 45%/cover}
@media(max-width:767px){.renewal-image{min-height:300px;background-position:30% 40%}}

/* P6. Video column: hairline gold frame + navy matte so the warm-lit video sits in
   the palette rather than floating on white. Video file untouched. */
.debt-video video{outline:1px solid rgba(189,155,84,.55);outline-offset:10px;box-shadow:0 30px 60px -30px rgba(26,48,80,.45)}

/* P7. Spacing rhythm: FAQ -> next-step band was 100px + band 72px; even 96px rhythm. */
.debt-questions{padding-bottom:96px}
.debt-video{padding:96px 0}
.debt-intro{padding:96px 0}
@media(max-width:767px){.debt-questions{padding-bottom:56px}.debt-video,.debt-intro{padding:56px 0}}

/* P8. Navy -> white disclaimer -> navy footer made a hard white slit between two navy
   blocks. Disclaimer now sits on the navy with a hairline divider, so the page ends
   in one calm navy run, matching the homepage "Let's talk" -> footer transition. */
main:has(.renewal-paths) .debt-disclaimer{background:#1A3050;color:#DADAD9b3;width:auto;margin:0;
  padding:20px max(48px,calc((100% - 1184px)/2)) 22px;border-top:1px solid #ffffff1a;font-size:14px}
@media(max-width:767px){main:has(.renewal-paths) .debt-disclaimer{padding:18px 20px}}


/* P10. Hero copy legibility (desktop). By the approved geometry the lower intro lines
   always run past the 45-degree shape edge onto the photo. On the dark handshake this
   reads; on the bright architecture, pen and sunset slides it did not (words sitting on
   white facade / sky). A soft scrim in each slide's own shape colour now sits between
   photo and shape, so the shape appears to "feather" into the photo behind the text.
   Shape geometry, colours, copy and measure unchanged. */
@media(min-width:768px){
 .hero::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;transition:background .45s;
   background:linear-gradient(90deg,rgba(26,48,80,.55) 0,rgba(26,48,80,.45) 380px,rgba(26,48,80,0) 820px)}
 .hero[data-slide="1"]::before{background:linear-gradient(90deg,rgba(86,96,110,.92) 0,rgba(86,96,110,.80) 420px,rgba(86,96,110,0) 860px)}
 .hero[data-slide="2"]::before{background:linear-gradient(90deg,rgba(189,155,84,.92) 0,rgba(189,155,84,.78) 420px,rgba(189,155,84,0) 860px)}
 .hero[data-slide="3"]::before{background:linear-gradient(90deg,rgba(64,78,99,.90) 0,rgba(64,78,99,.75) 420px,rgba(64,78,99,0) 860px)}
}
@media(prefers-reduced-motion:reduce){.hero::before{transition:none}}

/* P11. Mobile hero photo window: the live veil rose to .55-.85 navy over the photo
   area, so the handshake / facade / pen / family read as murk in a tall navy gap.
   The veil now clears through the photo window and only darkens at the very bottom
   where the 01-04 selectors sit. Order, heights and selectors unchanged. */
@media(max-width:767px){
 .hero:after{background:linear-gradient(180deg,rgba(26,48,80,.9) 0,rgba(26,48,80,.2) 200px,rgba(26,48,80,.18) 58%,rgba(26,48,80,.40) 80%,rgba(26,48,80,.92) 100%)}
 .hero[data-slide="2"]:after{background:linear-gradient(180deg,rgba(26,48,80,.92),rgba(26,48,80,0) 175px,rgba(26,48,80,0) 58%,rgba(26,48,80,.40) 80%,rgba(26,48,80,.92) 100%)}
}