/* health-safety.css — H&S module page. Tokens from styles.css, layout patterns from platform.css, accents from theme-oxford.css. */
/* hero additions (pf-hero base comes from platform.css) */
/* proof band */
.hs-proof img{display:block;width:100%;height:clamp(340px,50vh,580px);object-fit:cover;filter:grayscale(1) contrast(1.06) brightness(.97)}
.hs-proof-bar{background:var(--ink);color:var(--paper)}
.hs-proof-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.hs-stat{padding:36px 32px 40px 0}
.hs-stat+.hs-stat{padding-left:32px;border-left:1px solid color-mix(in oklab,var(--paper) 14%,transparent)}
.hs-stat b{display:block;font-size:clamp(38px,4.6vw,68px);font-weight:500;letter-spacing:-0.025em;line-height:1}
.hs-stat span{display:block;margin-top:10px;font-family:var(--f-mono);font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in oklab,var(--paper) 68%,transparent)}
/* in-section photography — same grayscale treatment as the proof band */
.hs-shot{margin:0}
.hs-shot img{display:block;width:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.hs-shot figcaption{margin-top:14px;font-family:var(--f-mono);font-size:14px;letter-spacing:.05em;color:var(--ink-mute)}
/* two-up strip, sits between the pain grid and its point bar */
.hs-duo{margin-top:64px;display:grid;grid-template-columns:1fr 1fr;gap:32px}
.hs-duo .hs-shot img{height:clamp(320px,30vw,520px)}
/* section head with a photo alongside */
.hs-hd-media{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:64px;align-items:center;margin-bottom:80px}
.hs-hd-media .sec-hd{margin-bottom:0}
.hs-hd-media .hs-shot img{height:clamp(340px,32vw,540px)}
/* capability-card icons (Iconscout, cached under assets/icons, inlined by ub_icon)
   The icon is a block inside the h3 so it stacks above titles that carry a <br>;
   that makes the h3's first baseline the icon's, so the head grid switches from
   baseline to start alignment to keep the tag level with the title. */
.pf-mod-hd{align-items:start}
.pf-mod-ic{display:block;margin-bottom:22px;color:var(--hazard);transition:color .18s ease,transform .18s ease}
.pf-mod-ic svg{display:block}
.pf-mod:hover .pf-mod-ic{color:var(--ink)}
/* On sec-dark the cards go transparent over near-black, where --hazard is all
   but invisible — take the same lightened accent the tag and foot already use. */
.sec-dark .pf-mod-ic{color:var(--accent-on-dark,var(--hazard))}
.sec-dark .pf-mod:hover .pf-mod-ic{color:var(--paper)}
@media (prefers-reduced-motion:no-preference){
.pf-mod:hover .pf-mod-ic{transform:translateY(-2px)}
}
/* responsive */
@media (max-width:900px){
.hs-hd-media{grid-template-columns:1fr;gap:36px;margin-bottom:56px}
.hs-hd-media .hs-shot img{height:clamp(300px,52vw,420px)}
}
@media (max-width:640px){
.hs-duo{grid-template-columns:1fr;gap:28px;margin-top:48px}
.hs-duo .hs-shot img{height:280px}
.hs-proof-grid{grid-template-columns:1fr}
.hs-stat{padding:24px 0}
.hs-stat+.hs-stat{padding-left:0;border-left:0;border-top:1px solid color-mix(in oklab,var(--paper) 14%,transparent)}
.hs-proof img{height:300px}
}