/* NJA polish v3, 11 Oct 2026: natural image treatment. Load LAST.
   Photos are colour-corrected true to life (natural.py): no navy grade and no full-image
   navy washes. Text sits on a localised gradient, only where the copy is, at the minimum
   for WCAG AA (white text needs >=4.5:1; measured on the brightest pixel under copy). */

/* Heroes: new natural files; desktop and mobile focal points set separately */
.hero .hero-photo[data-photo="0"]{background-image:url(assets/hero-disputes-n.webp)!important}
.hero .hero-photo[data-photo="1"]{background-image:url(assets/hero-business-n.webp)!important;background-position:70% 40%!important}
.hero .hero-photo[data-photo="2"]{background-image:url(assets/hero-recovery-n.webp)!important}
.hero .hero-photo[data-photo="3"]{background-image:url(assets/hero-family-n.webp)!important}
.hero .hero-photo{filter:none!important}
@media(min-width:768px){
 .hero[data-slide]::before{background:linear-gradient(90deg,rgba(14,34,68,.38) 0,rgba(14,34,68,.22) 520px,rgba(14,34,68,0) 820px)!important}
 .hero:after{background:none!important}}
@media(max-width:767px){
 .hero .hero-photo[data-photo="1"]{background-position:78% 35%!important}
 /* only the top (header) and bottom (copy) get a gradient; the photo middle stays clean */
 .hero:after,.hero[data-slide="2"]:after{background:linear-gradient(180deg,rgba(14,34,68,.55) 0,rgba(14,34,68,0) 120px,rgba(14,34,68,0) 52%,rgba(14,34,68,.70) 78%,rgba(14,34,68,.88) 100%)!important}}

/* Post-hero band: two-person consultation (faces on the upper third), gradient only behind copy */
.support-introduction{background-image:url('assets/support-consultation-n.jpg')!important;background-position:70% 30%!important}
.support-introduction::before{background:linear-gradient(90deg,rgba(14,34,68,.78) 0%,rgba(14,34,68,.55) 34%,rgba(14,34,68,0) 58%)!important}
@media(max-width:767px){.support-introduction{background-position:62% 20%!important}
 .support-introduction::before{background:linear-gradient(180deg,rgba(14,34,68,0) 0%,rgba(14,34,68,.35) 45%,rgba(14,34,68,.80) 100%)!important}}

/* People band: neutral warm B&W studio portraits on stone, no navy duotone */
.people-transition.people-v2{background:#F4F1EC!important}
.people-v2 .pm-copy h2{color:#0E2244!important}
.people-mosaic img{box-shadow:none!important}
.pm-accent--m{background:#E6E0D6!important}

/* Webinar top: NJA signing photo, natural colour, no wash */
.renewal-image{background:url('assets/webinar-agreement-n.jpg') 42% 38%/cover!important}
@media(max-width:767px){.renewal-image{background-position:38% 35%!important}}

/* v3 fixes after the first render:
   - Hero 01 stays the approved handshake photo (now natural). The NJA meeting-room trial
     showed old-logo folders on the table and left the nav sitting on a bright wall.
   - Desktop: a short top gradient behind the nav only (white nav text needs AA on photo). */
@media(min-width:768px){.hero:after{background:linear-gradient(180deg,rgba(14,34,68,.55) 0,rgba(14,34,68,0) 150px)!important}}
/* Post-hero: the photo sits right-aligned at 60% width, so both faces are clear of the copy.
   Navy fills only the copy column and fades into the photo edge. */
.support-introduction{background:url('assets/support-consultation-n.jpg') 100% 22%/62% auto no-repeat,#1A3050!important}
.support-introduction::before{background:linear-gradient(90deg,#1A3050 0%,#1A3050 38%,rgba(26,48,80,0) 52%)!important}
@media(max-width:767px){.support-introduction{background:url('assets/support-consultation-n.jpg') 40% 0/auto 62% no-repeat,#1A3050!important}
 .support-introduction::before{background:linear-gradient(180deg,rgba(26,48,80,0) 0%,rgba(26,48,80,0) 38%,#1A3050 62%)!important}}

/* Hero 01, 03 and 04 keep the v1-tuned focal points (handshake, pen, family). Only the new
   skyline (hero 02) has its own. Desktop slide tabs get a short bottom gradient for AA on the bright water. */
@media(min-width:768px){.hero:after{background:linear-gradient(180deg,rgba(14,34,68,.55) 0,rgba(14,34,68,0) 150px,rgba(14,34,68,0) calc(100% - 140px),rgba(14,34,68,.62) 100%)!important}}
/* Mobile post-hero: photo occupies the top 220px clean (both faces on the upper third); copy
   moves onto solid navy beneath it, so no text sits on a face. */
@media(max-width:767px){.support-introduction{background:url('assets/support-consultation-n.jpg') 50% 0/auto 230px no-repeat,#1A3050!important;padding-top:236px!important}
 .support-introduction::before{background:linear-gradient(180deg,rgba(26,48,80,0) 0,rgba(26,48,80,0) 180px,#1A3050 232px)!important}}
@media(max-width:767px){html body .expertise .support-introduction{padding:248px 0 40px!important;align-items:flex-end!important;min-height:0!important}}