/* v3.0 additive image sections; no existing CSS or components are altered. */
.ng-image-hero { margin: clamp(28px,4vw,58px) 0 8px; }
.ng-image-hero__layout, .ng-image-body__layout { display:grid; grid-template-columns: minmax(0, 1.18fr) minmax(0,.82fr); gap: clamp(20px,3vw,46px); align-items: center; }
.ng-image-hero__copy, .ng-image-body__copy { min-width: 0; max-width: 62ch; }
.ng-image-hero__copy p, .ng-image-body__copy p { font-size: clamp(1rem,1.1vw,1.11rem); line-height:1.75; margin:0; }
.ng-image-body { padding-block: clamp(44px,6vw,88px); }
.ng-image-body .container { max-width: 1180px; }
.ng-image-body__heading { font-size: clamp(1.65rem,2.6vw,2.5rem); line-height:1.15; margin:0 0 clamp(22px,3vw,38px); max-width: 25ch; }
.ng-image-figure { min-width:0; margin: 0 10px 0 0; }
.ng-image-frame { display:block; border:3px solid #101010; box-shadow:9px 9px 0 #101010; background: #fff; overflow: hidden; }
.ng-image-figure picture { display:block; }
.ng-image-figure img { display:block; width:100%; height:auto; background: #fff; object-fit:contain; }
.ng-image-figure figcaption { margin: 16px 0 0; max-width: 65ch; font-size:.85rem; line-height:1.5; color:#343434; }
.ng-image-hero__copy { border-left: 4px solid #142bff; padding-left: clamp(16px,2vw,28px); }
.ng-image-body__copy { border-left: 4px solid #142bff; padding-left: clamp(16px,2vw,28px); }
@media (max-width: 800px) {
 .ng-image-hero__layout, .ng-image-body__layout { grid-template-columns: minmax(0,1fr); gap:24px; }
 .ng-image-figure { margin-right: 9px; }
 .ng-image-body { padding-block: 46px; }
 .ng-image-body__heading { max-width: none; }
 .ng-image-hero__copy, .ng-image-body__copy { max-width:none; }
}
@media (max-width: 450px) {
 .ng-image-frame {border-width:3px;box-shadow:7px 7px 0 #101010;}
 .ng-image-figure { margin-right: 7px; }
 .ng-image-figure figcaption { font-size:.79rem; }
}
@media (prefers-reduced-motion: reduce) { .ng-image-frame {transition:none;} }
