/* One responsive hero system for the homepage and all inner pages. */
main#top > .hero{
 --hero-glow:radial-gradient(ellipse 60% 115% at 50% 50%,rgba(255,255,255,.98) 0%,rgba(255,255,255,.92) 38%,rgba(255,255,255,.45) 70%,rgba(255,255,255,0) 100%);
 border-top:1px solid #E2EAF0;background-color:#fff;padding:54px 0 56px;
}
main#top .hero h1{background:none;color:#093463;-webkit-text-fill-color:#093463;line-height:1.04;padding-bottom:0;letter-spacing:-.055em}
main#top .hero .btn{border:1px solid var(--blue);padding:15px 25px;transition:background-color .26s ease,color .26s ease,box-shadow .26s ease}
main#top .hero .btn:focus-visible{outline:3px solid var(--heading);outline-offset:3px}
@media(hover:hover){main#top .hero .btn:hover{background:#fff;color:var(--blue);text-decoration:none;box-shadow:0 5px 14px rgba(47,128,237,.09)}}
@media(min-width:761px){
 main#top .hero{background-image:var(--hero-glow),var(--hero-desktop);background-size:100% 100%,cover;background-position:center;background-repeat:no-repeat}
 main#top .hero::after{background:none}
}
@media(max-width:760px){
 main#top .hero{padding:40px 0 42px}
 main#top .hero .wrap{isolation:isolate}
 main#top .hero .wrap > *{position:relative;z-index:1}
 main#top .hero .wrap::before{content:"";position:absolute;inset:-40px -90px -38px;z-index:0;pointer-events:none;background:radial-gradient(ellipse 50% 50% at center,rgba(255,255,255,.9) 0%,rgba(255,255,255,.72) 45%,rgba(255,255,255,.3) 70%,rgba(255,255,255,0) 95%)}
}
@media(min-width:480px) and (max-width:1199px){
 main#top .hero{background-image:linear-gradient(to bottom,#fff 0%,rgba(255,255,255,.8) 16%,rgba(255,255,255,0) 48%),var(--hero-glow),var(--hero-tablet,var(--hero-desktop));background-size:100% 100%,100% 100%,cover;background-position:center;background-repeat:no-repeat;min-height:55.556vw}
 main#top .hero h1{max-width:15ch;text-wrap:balance}
 main#top .hero::after{background:none}
}
@media(min-width:480px) and (max-width:760px){
 main#top .hero{min-height:480px;padding:40px 0 150px}
 main#top .hero h1{font-size:clamp(2rem,6vw,2.75rem)}
}
@media(max-width:479px){
 main#top .hero{background-image:var(--hero-mobile);background-size:100% auto;background-position:center bottom;background-repeat:no-repeat;min-height:133.333vw;padding-bottom:clamp(160px,42vw,280px)}
 main#top .hero::after{background:none}
}
@media(prefers-reduced-motion:reduce){main#top .hero .btn{transition:none}}

/* Shared copy geometry keeps wrapping and artwork spacing consistent. */
main#top .hero .hero-text{position:relative;display:flow-root}
main#top .hero h1{margin:0 auto 22px;max-width:860px;font-size:clamp(2.35rem,5vw,4.35rem);text-wrap:balance}
main#top .hero p{margin:0 auto 28px;max-width:780px;font-size:clamp(1.02rem,1.9vw,1.16rem);line-height:1.55}
@media(max-width:760px){main#top .hero h1{font-size:clamp(2rem,11vw,3.2rem)}main#top .hero p{font-size:1rem}}
@media(min-width:480px) and (max-width:1199px){main#top .hero h1{max-width:15ch}}
@media(min-width:480px) and (max-width:760px){main#top .hero h1{font-size:clamp(2rem,6vw,2.75rem)}}

/* Consistent hero canvas across pages, with room for the longest copy. */
@media(min-width:1200px){main#top > .hero{min-height:420px}}
@media(min-width:761px) and (max-width:1199px){main#top > .hero{min-height:max(520px,55.556vw)}}
@media(min-width:480px) and (max-width:760px){main#top > .hero{min-height:520px}}
@media(max-width:479px){main#top > .hero{min-height:max(600px,133.333vw)}}

/* Center the Contact hero copy vertically within the shared canvas. */
main#top > .hero.hero--contact{display:flex;align-items:center;padding-top:40px;padding-bottom:40px}
main#top .hero--contact .hero-text > p{margin-bottom:0}

/* A slightly more compact canvas for the Contact introduction. */
@media(min-width:1200px){main#top > .hero.hero--contact{min-height:360px}}
@media(min-width:761px) and (max-width:1199px){main#top > .hero.hero--contact{min-height:max(460px,49.445vw)}}
@media(min-width:480px) and (max-width:760px){main#top > .hero.hero--contact{min-height:460px}}
@media(max-width:479px){main#top > .hero.hero--contact{min-height:max(540px,120vw)}}

/* Mobile copy starts near the header, leaving the artwork below it. */
@media(max-width:760px){main#top > .hero.hero--contact{align-items:flex-start;padding-top:32px}}

/* Inner-page mobile heroes match the homepage composition. */
@media(max-width:760px){
 main#top > section.hero:not(.hero--home){background-image:var(--hero-mobile);background-position:center top;background-size:cover;background-repeat:no-repeat;display:flex;align-items:center;min-height:500px;padding:32px 0}
 main#top > section.hero:not(.hero--home) > .wrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:28px;transform:none}
 main#top > section.hero:not(.hero--home) .hero-text{isolation:isolate;width:100%}
 main#top > section.hero:not(.hero--home) .hero-text > p:last-child{margin-bottom:0}
 main#top > section.hero:not(.hero--home) .hero-actions{margin:0;line-height:0}
 main#top > section.hero:not(.hero--home) .btn{box-shadow:0 0 24px 18px rgba(255,255,255,.9),0 0 48px 32px rgba(255,255,255,.45)}
 main#top > section.hero:not(.hero--home) .hero-text::before{content:"";position:absolute;inset:-64px -48px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse closest-side at center,rgba(255,255,255,.98) 0%,rgba(255,255,255,.88) 42%,rgba(255,255,255,.35) 72%,rgba(255,255,255,0) 100%);filter:blur(18px)}
 main#top > section.hero:not(.hero--home) > .wrap::before{content:"";position:absolute;inset:-40px -90px -38px;z-index:0;pointer-events:none;background:radial-gradient(ellipse closest-side at center,rgba(255,255,255,.9) 0%,rgba(255,255,255,.6) 45%,rgba(255,255,255,0) 100%);filter:blur(18px)}
 main#top > section.hero:not(.hero--home)::after{background:none}
}

/* Keep tablet heroes compact instead of scaling their height with viewport width. */
@media(min-width:761px) and (max-width:1199px){
 main#top > section.hero{min-height:420px;display:flex;align-items:center;padding:40px 0}
 main#top > section.hero.hero--contact{min-height:420px;padding:40px 0}
 main#top > section.hero h1{max-width:22ch}
}

/* Feathered readability glow behind tablet hero copy, matching mobile. */
@media(min-width:761px) and (max-width:1199px){
 main#top > section.hero .hero-text{position:relative;isolation:isolate}
 main#top > section.hero .hero-text::before{content:"";position:absolute;inset:-64px -48px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse closest-side at center,rgba(255,255,255,.98) 0%,rgba(255,255,255,.88) 42%,rgba(255,255,255,.35) 72%,rgba(255,255,255,0) 100%);filter:blur(18px)}
}

/* Keep tablet CTA buttons above the text-only readability layer. */
@media(min-width:761px) and (max-width:1199px){
 main#top > section.hero > .wrap{isolation:isolate}
 main#top > section.hero .hero-text{z-index:0}
 main#top > section.hero .hero-actions,
 main#top > section.hero > .wrap > .btn{position:relative;z-index:1}
}

/* Keep hero controls above readability gradients at every breakpoint. */
main#top > section.hero > .wrap{isolation:isolate}
main#top > section.hero .hero-text{position:relative;z-index:0;isolation:isolate}
main#top > section.hero .hero-actions,
main#top > section.hero > .wrap > .btn{position:relative;z-index:2}