/* Reference-style hero; titles, steps and actions remain accessible HTML. */
.di-hero.di-hero-reference { position:relative; display:block; min-height:350px; padding:24px 26px 112px; border:1px solid #294b60; border-radius:20px; background:#051827; }
.di-hero-reference .di-hero-photo { position:absolute; inset:0 0 0 auto; width:58%; height:100%; max-width:none; max-height:none; margin:0; z-index:-3; opacity:1; border-radius:0; object-fit:cover; object-position:center 15%; }
.di-hero-reference::before { display:block; background:linear-gradient(90deg,#05182770 0%,#05182740 43%,transparent 65%),linear-gradient(0deg,#051827b3,transparent 30%); }
.di-hero-reference .di-hero-copy { width:64%; max-width:760px; padding:0; margin:0; }
.di-hero-reference .di-hero-copy h1 { max-width:none; width:auto; font-size:clamp(32px,4.1vw,53px); line-height:1.04; margin:12px 0; }
.di-hero-reference .di-hero-copy h1 span { color:#ffad30; }
.di-hero-reference .di-hero-copy p { max-width:555px; font-size:14px; line-height:1.6; }
.di-hero-reference .di-hero-signature { position:absolute; top:20px; right:22px; bottom:auto; left:auto; width:145px; max-width:145px; margin:0; transform:rotate(-8deg); font-size:20px; text-shadow:0 2px 8px #000; }
.di-hero-reference .di-visual-steps { position:absolute; left:24px; bottom:18px; width:calc(100% - 245px); margin:0; gap:20px; }
.di-hero-reference .di-visual-steps li { min-height:82px; gap:10px; padding:8px; border-color:#4c6b7e; background:linear-gradient(120deg,#0b293de8,#0a2131e8); }
.di-hero-reference .di-visual-steps li:not(:last-child)::after { right:-17px; top:25px; color:#ffa331; font-size:22px; }
.di-hero-reference .di-step-art { width:60px; height:60px; flex:0 0 60px; }
.di-hero-reference .di-step-number { width:25px; height:25px; font-size:13px; background:linear-gradient(#ffd16f,#ff9f22); color:#092333; }
.di-hero-reference .di-hero-benefits { right:18px; bottom:18px; width:188px; padding:10px 12px; border-color:#446278; background:#081e2ee8; }
.di-hero-reference .di-hero-benefits li { margin:6px 0; font-size:10px; }
@media(max-width:1000px) and (min-width:761px) {
 .di-hero.di-hero-reference { min-height:390px; padding:22px 20px 118px; }
 .di-hero-reference .di-hero-copy { width:68%; }
 .di-hero-reference .di-hero-signature { font-size:16px; width:110px; right:15px; }
 .di-hero-reference .di-visual-steps { left:20px; width:calc(100% - 215px); gap:12px; }
 .di-hero-reference .di-hero-benefits { width:165px; }
 .di-hero-reference .di-step-art { width:35px; height:44px; flex-basis:35px; }
 .di-hero-reference .di-visual-steps li:not(:last-child)::after { right:-13px; font-size:15px; }
}
@media(max-width:760px) {
 .di-hero.di-hero-reference { display:block; min-height:235px; padding:19px 15px 13px; border-radius:18px; background:#061b29; }
 .di-hero-reference .di-hero-photo { position:absolute; inset:0 0 0 auto; width:76%; height:100%; min-height:0; max-height:none; aspect-ratio:auto; contain:none; margin:0; z-index:-3; object-fit:cover; object-position:38% 10%; border-radius:0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 23%); mask-image:linear-gradient(90deg,transparent,#000 23%); }
 .di-hero-reference::before { display:block; position:absolute; inset:0; width:auto; height:auto; z-index:-2; border-radius:0; background:linear-gradient(90deg,#061b29fa 0%,#061b29d9 26%,#061b2970 49%,#061b2915 73%,transparent 100%),linear-gradient(0deg,#061b29eb 0%,#061b2955 24%,transparent 65%); }
 .di-hero-reference .di-hero-copy { width:100%; max-width:none; padding:0; margin:0; }
 .di-hero-reference .di-hero-copy .di-kicker { font-size:8px; letter-spacing:.04em; }
 .di-hero-reference .di-hero-copy h1 { width:auto; max-width:none; font-size:clamp(23px,6.6vw,28px); line-height:1.08; margin:10px 0; }
 .di-hero-reference .di-hero-copy p { max-width:78%; font-size:11px; line-height:1.5; margin:0; color:#d0dfe7; text-shadow:0 1px 5px #03111d; }
 .di-hero-reference .di-hero-copy p br { display:none; }
 .di-hero-reference .di-hero-signature,.di-hero-reference .di-hero-benefits { display:none; }
 .di-hero-reference .di-visual-steps { position:relative; inset:auto; width:100%; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin:15px 0 0; padding:10px 0 0; border-top:1px solid #8fa7b838; }
 .di-hero-reference .di-visual-steps li { flex-direction:column; align-items:center; justify-content:flex-start; min-height:0; gap:5px; padding:0 5px; text-align:center; border:0; border-radius:0; background:none; box-shadow:none; backdrop-filter:none; }
 .di-hero-reference .di-visual-steps li + li { border-left:1px solid #8fa7b838; }
 .di-hero-reference .di-step-art { width:25px; height:25px; flex-basis:25px; }
 .di-hero-reference .di-step-number,.di-hero-reference .di-visual-steps small,.di-hero-reference .di-visual-steps li:not(:last-child)::after { display:none; }
 .di-hero-reference .di-visual-steps strong { font-size:10px; line-height:1.3; text-shadow:0 1px 5px #03111d; }
}

.di-hero-reference .di-visual-steps strong { font-size:12px; }
.di-hero-reference .di-visual-steps small { font-size:11px; }
@media(min-width:761px) {
 .di-hero-reference .di-hero-photo { -webkit-mask-image:linear-gradient(90deg,transparent,#000 26%); mask-image:linear-gradient(90deg,transparent,#000 26%); }
}

@media(max-width:760px) { .di-hero-reference .di-visual-steps strong { font-size:10px; } }