/* Patch 15: shared hero image slot (.hero-media) and the mobile first-CTA fix. Loaded only on pages that use them. */
.has-media{position:relative;overflow:hidden;isolation:isolate}
.has-media>.hero-media{position:absolute;inset:0;z-index:0;pointer-events:none;margin:0}
.has-media>.hero-media picture,.has-media>.hero-media img{display:block;width:100%;height:100%}
.has-media>.hero-media img{object-fit:cover;object-position:60% 50%}
.has-media>.hero-media:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,15,31,.97) 0%,rgba(10,15,31,.92) 34%,rgba(10,15,31,.62) 58%,rgba(10,15,31,.28) 100%),linear-gradient(0deg,rgba(10,15,31,.55) 0%,rgba(10,15,31,0) 30%)}
.has-media:before{display:none}
.has-media>.container,.has-media>.lp-wrap{position:relative;z-index:1}
/* plain heroes: left edge of the site container, text column capped at 600px (sa.css centres an 880px box) */
@media (width>=761px){
 .hm-plain>.container{max-width:var(--container)!important;text-align:left}
 .hm-plain>.container>*,.hm-plain>.container>div>*{max-width:min(600px,100%);margin-left:0;margin-right:0}
 .hm-plain>.container>div{max-width:none;margin-left:0;margin-right:0;text-align:left}
}
/* muted text over photos (review 3.5) */
.has-media{--muted:#b8c4dc}
.has-media .hero-stat .lbl,.has-media .disclaimer{color:var(--lead-ink,#c9d3e6)}
.hm-banner>.hero-media:after{background:linear-gradient(0deg,rgba(10,15,31,.9),rgba(10,15,31,.78))}
.hm-banner>.hero-media img{object-position:50% 60%}
/* phones: no photo behind the text; the photo sits below the hero text as a 4:3 image without overlay (review 3.1) */
@media (width<=760px){
 .hm-plain.has-media,.hm-grid.has-media,.hm-lp.has-media{display:flex;flex-direction:column}
 .hm-plain.has-media>.container,.hm-grid.has-media>.container,.hm-lp.has-media>.lp-wrap{order:1;width:100%}
 .hm-plain.has-media>.hero-media,.hm-grid.has-media>.hero-media,.hm-lp.has-media>.hero-media{position:relative;inset:auto;order:2;margin:22px 24px 0;aspect-ratio:4/3;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.08)}
 .hm-plain.has-media>.hero-media:after,.hm-grid.has-media>.hero-media:after,.hm-lp.has-media>.hero-media:after{display:none}
 .has-media>.hero-media img[class*="op-"]{object-position:50% 50%}
 .hm-banner>.hero-media:after{background:linear-gradient(180deg,rgba(10,15,31,.82),rgba(10,15,31,.9))}
}
/* mobile: first CTA directly under the H1, tighter hero top (fixes /comparisons/agv-vs-amr, /contact, /de/) */
@media (width<=760px){
 .p15-fold.hero{padding-top:28px;padding-bottom:28px}
 .p15-fold.hero .hero-grid>div:first-child>*,.p15-fold.hero .hero-grid>div:first-child>.lead{order:5}
 .p15-fold.hero .hero-grid>div:first-child>.eyebrow{order:1}
 .p15-fold.hero .hero-grid>div:first-child>h1{order:2}
 .p15-fold.hero .hero-grid>div:first-child>.hero-cta{order:3;margin-top:4px;margin-bottom:18px}
 .p15-fold.hero .hero-grid>div:first-child>p.lead:first-of-type{order:4}
 .p15-fold.hero .hero-grid>div:first-child>.proof-chips{order:6}
 .p15-fold.hero .hero-grid>div:first-child>.hero-stats{order:7}
 .p15-fold.hero .eyebrow{margin-bottom:10px}
 .p15-fold.page-banner{padding:16px 0 10px}
 .p15-fold.page-banner .eyebrow{margin-bottom:8px}
 .p15-fold+.section-sm [data-sa="9ddbcf4f"]{grid-template-columns:1fr!important;gap:12px!important}
 .p15-fold+.section-sm [data-sa="2301dfd1"]{padding:18px!important}
 .p15-fold+.section-sm .card h3{margin-bottom:4px}
 .p15-fold.page-banner h1{font-size:clamp(1.6rem,6.6vw,2rem);line-height:1.12;margin-bottom:10px}
 .p15-fold.page-banner .lead{font-size:1rem}
 .p15-fold+.section-sm{padding-top:10px}
 /* plain photo heroes (one container, or one wrapper div inside it): CTA straight under the H1 */
 .p15-fold.hm-plain :is(.container,.container>div):has(>h1){display:flex;flex-direction:column}
 .p15-fold.hm-plain :is(.container,.container>div):has(>h1)>*{order:5}
 .p15-fold.hm-plain :is(.container,.container>div):has(>h1)>.eyebrow{order:1;margin-bottom:10px}
 .p15-fold.hm-plain :is(.container,.container>div):has(>h1)>h1{order:2}
 .p15-fold.hm-plain :is(.container,.container>div):has(>h1)>.hero-cta{order:3;margin-top:4px;margin-bottom:18px}
 .p15-fold.hm-plain :is(.container,.container>div):has(>h1)>p.lead:first-of-type{order:4}
 .p15-fold.hm-plain.hero,.p15-fold.hm-grid.hero{padding-top:24px}
}
/* in-page figure strip (/industries/defence): three 4:3 photos, lazy; phones show the first only */
.p15-figs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0 0 28px}
.p15-figs figure{margin:0;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.08);aspect-ratio:4/3}
.p15-figs img{display:block;width:100%;height:100%;object-fit:cover}
@media (width<=760px){.p15-figs{grid-template-columns:1fr}.p15-figs figure+figure{display:none}}
/* p15 measurement: at 761-1199px the hero text column reaches ~60% of the width; keep the overlay dark under it (AA at 1024x768) */
@media (761px<=width<=1199px){.has-media>.hero-media:after{background:linear-gradient(90deg,rgba(10,15,31,.97) 0%,rgba(10,15,31,.93) 45%,rgba(10,15,31,.8) 66%,rgba(10,15,31,.36) 100%),linear-gradient(0deg,rgba(10,15,31,.55) 0%,rgba(10,15,31,0) 30%)}}
/* per-image object-position (desktop); phones use the pre-cropped 4:3 file */
.has-media>.hero-media img.op-aerospace{object-position:15% 60%}
.has-media>.hero-media img.op-aerospace-fod-prevention{object-position:85% 50%}
.has-media>.hero-media img.op-aerospace-mro{object-position:75% 50%}
.has-media>.hero-media img.op-aerospace-mro-tool-accountability{object-position:65% 40%}
.has-media>.hero-media img.op-amr-agv-advisory{object-position:60% 60%}
.has-media>.hero-media img.op-aviation{object-position:85% 55%}
.has-media>.hero-media img.op-consulting{object-position:70% 45%}
.has-media>.hero-media img.op-contact{object-position:60% 70%}
.has-media>.hero-media img.op-defence{object-position:70% 50%}
.has-media>.hero-media img.op-defence-aircraft-mro{object-position:85% 45%}
.has-media>.hero-media img.op-defence-manufacturing{object-position:80% 50%}
.has-media>.hero-media img.op-defence-vehicle-fleet{object-position:80% 55%}
.has-media>.hero-media img.op-dock-door-rfid{object-position:85% 50%}
.has-media>.hero-media img.op-fleet-orchestration{object-position:55% 50%}
.has-media>.hero-media img.op-healthcare{object-position:20% 55%}
.has-media>.hero-media img.op-home-hero-photo{object-position:85% 60%}
.has-media>.hero-media img.op-independence-hero{object-position:60% 50%}
.has-media>.hero-media img.op-logistics{object-position:85% 50%}
.has-media>.hero-media img.op-manufacturing{object-position:80% 50%}
.has-media>.hero-media img.op-medical-equipment-locating{object-position:85% 55%}
.has-media>.hero-media img.op-military-training{object-position:30% 45%}
.has-media>.hero-media img.op-programme-rescue{object-position:80% 50%}
.has-media>.hero-media img.op-retail{object-position:75% 50%}
.has-media>.hero-media img.op-rfid-consulting{object-position:60% 55%}
.has-media>.hero-media img.op-serialisation-custody{object-position:75% 45%}
.has-media>.hero-media img.op-services-hub{object-position:60% 50%}
.has-media>.hero-media img.op-tool-control{object-position:100% 45%}
.has-media>.hero-media img.op-vda-5050-consulting{object-position:85% 55%}
.has-media>.hero-media img.op-vendor-selection{object-position:60% 50%}