.site-hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0,1.05fr) minmax(280px,.95fr); align-items: center; gap: clamp(2rem,5vw,5rem); min-height: clamp(390px,52vw,590px); overflow: hidden; padding: clamp(3.5rem,7vw,7rem) max(1.25rem,calc((100% - 1180px)/2)); background: radial-gradient(circle at 83% 18%,rgba(194,65,12,.16),transparent 18rem),linear-gradient(135deg,#f9fcfd 0%,#eaf2f7 58%,#dceaf2 100%); text-align: left; }
.site-hero::before { position: absolute; right: clamp(-8rem,1vw,3rem); width: clamp(260px,32vw,470px); aspect-ratio: 1; border: clamp(18px,2.4vw,32px) solid rgba(11,45,77,.065); border-radius: 43% 43% 52% 52%/34% 34% 66% 66%; content: ""; transform: rotate(45deg); z-index: -1; }
.site-hero > div { max-width: 720px; }
.site-hero h1 { margin: 0 0 1.2rem; color: #0b2d4d; font-size: clamp(2.55rem,5vw,4.8rem); line-height: 1.03; letter-spacing: -.045em; }
.site-hero p { max-width: 680px; margin: 0; color: #405b70; font-size: clamp(1.08rem,1rem + .45vw,1.4rem); font-weight: 600; line-height: 1.55; }
.site-hero img { position: relative; z-index: 1; display: block; width: 100%; max-height: 390px; border: 8px solid rgba(255,255,255,.75); border-radius: 24px; object-fit: cover; box-shadow: 0 24px 65px rgba(11,45,77,.2); transform: rotate(1.2deg); }
.layout-hero--content .site-hero { margin-inline: auto; }
@media (max-width: 800px) { .site-hero { grid-template-columns: 1fr; min-height: 0; padding-block: 3.5rem; } .site-hero h1 { max-width: 14ch; } .site-hero img { max-height: 330px; } }