/**
 * Exact hero spec, ported from the client-supplied reference build.
 * Structural values (sizes, positions, clip-paths, breakpoints) kept exact.
 * Colors swapped to KCYPS brand: red/teal roles -> #31A1FF (primary) /
 * #FDA903 (secondary), per client instruction.
 *
 * Front-page only — see header-nav.css for the utility bar/main nav
 * that render on every page.
 */
.hero { position: relative; height: 754px; overflow: hidden; background: linear-gradient(rgba(255,255,255,.85), rgba(255,255,255,.85)), url('../images/world-black.png') center center / cover no-repeat, #fff; }
.hero::before { content: ''; position: absolute; z-index: 1; left: 0; width: 51%; bottom: 0; height: 40px; background: #fff; }
.hero .map-texture { position: absolute; inset: 0 53% 0 0; opacity: .56; background-image: radial-gradient(ellipse at 53% 37%, transparent 0 28%, rgba(225,226,226,.8) 29% 30%, transparent 31%), radial-gradient(ellipse at 20% 76%, transparent 0 27%, rgba(225,226,226,.62) 28% 29%, transparent 30%), linear-gradient(125deg, transparent 0 45%, rgba(237,237,237,.9) 45.2% 49%, transparent 49.2%); transform: scale(1.5) rotate(-8deg); pointer-events: none; }
.hero .hero-copy { position: relative; z-index: 2; width: 42%; max-width: 600px; max-height: 475px; overflow: hidden; padding: 108px 0 0 7.5%; }
.hero .eyebrow { margin: 0 0 8px; color: #31A1FF; font-size: 12px; font-weight: 800; letter-spacing: 3px; }
.hero h1 { margin: 0; font-size: clamp(75px, 8.7vw, 108px); font-weight: 800; letter-spacing: -7px; line-height: .95; font-family: var(--wp--preset--font-family--display); color: #28282d; }
.hero h1 span { color: transparent; -webkit-text-stroke: 1.5px #000; }
.hero .intro { width: 365px; margin: 21px 0 0; color: #555664; font-size: clamp(1rem, 0.95rem + 0.4vw, 1.25rem); font-weight: 800; line-height: 1.68; }
.hero .btn { position: relative; z-index: 4; }
.hero .gold-panel { position: absolute; z-index: 1; left: 0; bottom: 40px; width: 51%; height: 229px; background: #FDA903; opacity: .97; display: flex; align-items: center; padding-left: 7.5%; }
.hero .gold-panel::after { content: ''; position: absolute; inset: 0; opacity: .17; background-image: repeating-linear-gradient(56deg, transparent 0 28px, #fff 29px 31px, transparent 32px 80px), repeating-linear-gradient(-38deg, transparent 0 40px, #9d6a05 41px 43px, transparent 44px 100px); }
.hero .photo-wrap { position: absolute; z-index: 2; top: 0; right: -1%; width: 61%; height: 100%; overflow: hidden; clip-path: polygon(9% 0,78% 0,82% 5%,86% 1%,90% 5%,94% 1%,100% 0,100% 100%,18% 100%,16% 95%,15% 88%,18% 84%,15% 78%,17% 71%,14% 67%,17% 62%,14% 57%,17% 50%,14% 46%,17% 39%,14% 33%,18% 28%,15% 23%,18% 16%,13% 10%); }
.hero .slide-track { display: flex; width: 100%; height: 100%; transition: transform .8s cubic-bezier(.65,0,.35,1); }
.hero .slide { flex: 0 0 100%; width: 100%; height: 100%; }
.hero .slide figure { margin: 0; width: 100%; height: 100%; }
.hero .photo-wrap img { width: 100%; height: 100%; display: block; object-fit: cover; }
.hero .photo-tint { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(49,161,255,.12), transparent 35%); }
.hero .slider-dots { position: absolute; z-index: 4; bottom: 8px; left: 70%; display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.hero .slider-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: #e9e9e9; cursor: pointer; }
.hero .slider-dots button.active { background: #31A1FF; }

.impact-bar { position: relative; z-index: 6; min-height: 72px; padding: 0 16px 0 23%; display: flex; align-items: center; gap: clamp(20px, 3vw, 47px); color: #fff; background: #31A1FF; font-size: clamp(17px, 2vw, 27px); font-weight: 800; list-style: none; margin: -1px 0 0; }
.impact-bar li { white-space: nowrap; }
.impact-bar li span { margin-right: 12px; font-size: 20px; }

@media (max-width: 900px) {
	.hero .hero-copy { padding-left: 5%; }
	.hero h1 { font-size: 82px; }
	.hero .intro { width: 310px; }
	.impact-bar { padding-left: 5%; gap: 18px; }
}
@media (max-width: 700px) {
	.hero { height: 857px; }
	.hero .photo-wrap { top: 360px; right: 0; width: 100%; height: 497px; clip-path: polygon(18% 0,100% 0,100% 100%,0 100%,4% 91%,0 84%,5% 74%,1% 64%,6% 54%,2% 44%,7% 35%,3% 24%,10% 12%); }
	.hero .hero-copy { width: 100%; max-height: 560px; padding: 42px 24px 0; }
	.hero .eyebrow { font-size: 10px; }
	.hero h1 { font-size: 78px; letter-spacing: -5px; }
	.hero .intro { width: min(360px, 84%); margin-top: 15px; line-height: 1.5; }
	.hero .btn { margin-top: 22px; }
	.hero::before { height: 28px; width: 100%; }
	.hero .gold-panel { width: 100%; height: 260px; opacity: .91; bottom: 28px; }
	.hero .slider-dots { left: 50%; bottom: 9px; }
	.impact-bar { min-height: 68px; padding: 12px 18px; justify-content: center; flex-wrap: wrap; gap: 9px 22px; }
	.impact-bar li { font-size: 16px; }
	.impact-bar li span { margin-right: 5px; font-size: 14px; }
}