@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=DM+Sans:wght@400;500;700&display=swap');

/* JNF Hero Slider 1.1 — layout and type per Figma "Design v23" Homepage header (10121:4451) and mobile (10121:6476) */

/* ---- full-width breakout wrapper ---- */
.jnfhs{
	--hs-h:690px;
	--green:#60BB48;--green-dark:#4ea23a;--blue:#09487E;--gold:#F5AF00;
	position:relative;width:100vw;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;
	overflow:hidden;font-family:'DM Sans',system-ui,sans-serif;
}
.jnfhs *{box-sizing:border-box}
/* fit the whole hero (wave included) on screen under the ~200px site header: never taller than the screen allows, 440-640px */
.jnfhs__viewport{position:relative;width:100%;height:clamp(440px,calc(100vh - 210px),min(var(--hs-h),640px));height:clamp(440px,calc(100svh - 210px),min(var(--hs-h),640px));overflow:hidden}

/* ---- slides (stacked; JS drives which is visible) ---- */
.jnfhs__slide{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;will-change:transform,opacity}
.jnfhs__slide.is-active{opacity:1;visibility:visible;pointer-events:auto;z-index:2}
.jnfhs__bg{position:absolute;inset:0;background-size:cover;background-repeat:no-repeat;background-position:right top}
.jnfhs__overlay{position:absolute;inset:0}

/* content: 1280 container, 64px page padding, 80px below the nav; 656px text column */
.jnfhs__inner{position:relative;z-index:3;height:100%;max-width:1408px;margin:0 auto;padding:clamp(40px,8vh,72px) 64px 0;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start}
.jnfhs__content{width:100%;max-width:600px;color:#fff;display:flex;flex-direction:column;gap:20px}
.jnfhs .jnfhs__headline{font-family:'Poppins',sans-serif !important;font-weight:700 !important;line-height:1.1 !important;letter-spacing:-0.02em !important;
	font-size:46px !important;color:#fff !important;margin:0 !important;text-transform:uppercase !important}
.jnfhs .jnfhs__sub{font-size:18px;line-height:1.5;color:#fff}
.jnfhs__sub p{margin:0 0 .6em}.jnfhs__sub p:last-child{margin:0}

/* ---- buttons (Figma: 24 x 40 padding, Poppins Medium 16, 1.6px tracking) ---- */
.jnfhs__btns{display:flex;flex-wrap:wrap;gap:16px;margin-top:8px}
.jnfhs .jnfhs__btn{display:inline-flex;align-items:center;justify-content:center;font-family:'Poppins',sans-serif;
	font-weight:500;font-size:16px;line-height:1;letter-spacing:1.6px;text-transform:uppercase;text-decoration:none;
	border-radius:999px;padding:20px 36px;cursor:pointer;transition:transform .18s,background .18s,color .18s,border-color .18s;border:1px solid transparent}
.jnfhs .jnfhs__btn:hover{transform:translateY(-2px)}
.jnfhs .jnfhs__btn--green{background:var(--green);color:#fff;border-color:var(--green)}
.jnfhs .jnfhs__btn--green:hover{background:var(--green-dark);border-color:var(--green-dark);color:#fff}
.jnfhs .jnfhs__btn--blue{background:var(--blue);color:#fff;border-color:var(--blue)}
.jnfhs .jnfhs__btn--blue:hover{filter:brightness(1.1);color:#fff}
.jnfhs .jnfhs__btn--gold{background:var(--gold);color:#fff;border-color:var(--gold)}
.jnfhs .jnfhs__btn--gold:hover{filter:brightness(1.05);color:#fff}
.jnfhs .jnfhs__btn--white{background:#fff;color:var(--blue);border-color:#fff}
.jnfhs .jnfhs__btn--white:hover{filter:brightness(.96)}
.jnfhs .jnfhs__btn--ghost{background:transparent;color:#fff;border-color:#fff}
.jnfhs .jnfhs__btn--ghost:hover{background:#fff;color:var(--blue);border-color:#fff}

/* ---- bottom wave (Figma "Rectangle 49": 1440 x 311, its top 95px shows above the hero's bottom edge) ---- */
.jnfhs__wave{position:absolute;left:0;right:0;bottom:-15vw;height:21.61vw;line-height:0;z-index:4;pointer-events:none}
.jnfhs__wave svg{display:block;width:100%;height:100%}

/* ---- arrows + dots (button resets: the theme's global button padding otherwise squashes them) ---- */
.jnfhs .jnfhs__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:48px;height:48px;min-width:0;padding:0 !important;margin:0;
	border:none !important;border-radius:50% !important;background:rgba(255,255,255,.92) !important;color:var(--blue) !important;cursor:pointer;
	display:grid;place-items:center;box-shadow:0 12px 30px -12px rgba(6,40,72,.5);transition:transform .18s,background .18s}
.jnfhs .jnfhs__arrow:hover{background:#fff !important;transform:translateY(-50%) scale(1.06)}
.jnfhs .jnfhs__arrow svg{width:22px;height:22px}
.jnfhs .jnfhs__arrow.prev{left:24px}.jnfhs .jnfhs__arrow.next{right:24px}
.jnfhs .jnfhs__dots{position:absolute;left:64px;right:auto;bottom:max(48px,7vw);z-index:6;display:flex;gap:10px;justify-content:flex-start}
.jnfhs .jnfhs__dot{width:11px;height:11px;min-width:0;padding:0 !important;margin:0;border-radius:999px !important;border:2px solid rgba(255,255,255,.9) !important;
	background:transparent !important;cursor:pointer;transition:.2s}
.jnfhs .jnfhs__dot.is-active{background:#fff !important;width:30px}
.jnfhs .jnfhs__dot:focus-visible,.jnfhs .jnfhs__arrow:focus-visible{outline:3px solid var(--green);outline-offset:3px}

/* ================= ANIMATIONS ================= */
/* slide: incoming enters from a side, outgoing exits opposite */
.jnfhs--slide .jnfhs__slide{transition:transform var(--hs-anim,.8s) cubic-bezier(.62,.03,.2,1),opacity var(--hs-anim,.8s) ease;transform:translateX(0)}
.jnfhs--slide .jnfhs__slide.enter-right{transform:translateX(100%);opacity:1;visibility:visible}
.jnfhs--slide .jnfhs__slide.enter-left{transform:translateX(-100%);opacity:1;visibility:visible}
.jnfhs--slide .jnfhs__slide.leave-left{transform:translateX(-100%);opacity:1;visibility:visible;z-index:1}
.jnfhs--slide .jnfhs__slide.leave-right{transform:translateX(100%);opacity:1;visibility:visible;z-index:1}

/* fade */
.jnfhs--fade .jnfhs__slide{transition:opacity var(--hs-anim,.8s) ease}
.jnfhs--fade .jnfhs__slide.leave{opacity:0;visibility:visible;z-index:1}

/* wave: incoming reveals under a wavy mask sweeping left -> right */
.jnfhs--wave .jnfhs__slide{
	-webkit-mask-image:var(--hs-wavemask);mask-image:var(--hs-wavemask);
	-webkit-mask-size:320% 100%;mask-size:320% 100%;
	-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
	-webkit-mask-position:0% 0;mask-position:0% 0;
}
.jnfhs--wave .jnfhs__slide.is-active{-webkit-mask-position:100% 0;mask-position:100% 0}
.jnfhs--wave .jnfhs__slide.wave-in{opacity:1;visibility:visible;z-index:3;
	transition:-webkit-mask-position var(--hs-anim,.9s) ease,mask-position var(--hs-anim,.9s) ease;
	-webkit-mask-position:100% 0;mask-position:100% 0}
.jnfhs--wave .jnfhs__slide.wave-under{opacity:1;visibility:visible;z-index:2;-webkit-mask-position:100% 0;mask-position:100% 0}

/* ================= RESPONSIVE ================= */
/* shorter laptop screens: tighten the type so everything sits above the fold */
@media(min-width:981px) and (max-height:820px){
	.jnfhs .jnfhs__headline{font-size:40px !important}
	.jnfhs .jnfhs__sub{font-size:17px}
	.jnfhs__content{gap:16px}
	.jnfhs .jnfhs__btn{padding:17px 32px}
}
@media(max-width:1200px) and (min-width:981px){
	.jnfhs .jnfhs__headline{font-size:40px !important}
	.jnfhs__content{max-width:540px}
}
/* ---- MOBILE / TABLET (Figma 10121:6476): navy panel with centred text, waves, then the photo; rounded bottom ---- */
@media(max-width:980px){
	.jnfhs{--hs-h:auto;border-radius:0 0 24px 24px}
	.jnfhs__viewport{height:auto}
	.jnfhs__slide{display:none}
	.jnfhs__slide.is-active{display:flex;flex-direction:column;position:relative;inset:auto;opacity:1;visibility:visible;transform:none !important}
	/* the wave transition masks the whole slide, which hides text/heads on the tall stacked layout: off on mobile */
	.jnfhs--wave .jnfhs__slide,.jnfhs--wave .jnfhs__slide.is-active{-webkit-mask:none !important;mask:none !important}
	.jnfhs__inner{order:1;height:auto;max-width:none;width:100%;background:var(--blue);
		padding:28px 24px 40px;align-items:center;justify-content:flex-start;text-align:center}
	/* blue wave over a green wave, curving down into the photo */
	.jnfhs__inner::before,.jnfhs__inner::after{content:"";position:absolute;left:0;width:100%;pointer-events:none;background-size:100% 100%;background-repeat:no-repeat}
	.jnfhs__inner::after{bottom:-42px;height:44px;z-index:2;
		background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 375 60' preserveAspectRatio='none'%3E%3Cpath fill='%2309487E' d='M0 0H375V6C330 24 262 40 190 42C118 44 52 30 0 14Z'/%3E%3C/svg%3E")}
	.jnfhs__inner::before{bottom:-56px;height:58px;z-index:1;
		background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 375 76' preserveAspectRatio='none'%3E%3Cpath fill='%2360BB48' d='M0 0H375V18C330 38 262 54 190 56C118 58 52 42 0 28Z'/%3E%3C/svg%3E")}
	.jnfhs__content{max-width:520px;align-items:center;gap:14px}
	.jnfhs .jnfhs__headline{font-size:36px !important;line-height:1.05 !important}
	.jnfhs .jnfhs__sub{font-size:15px;line-height:1.45;max-width:none}
	.jnfhs__btns{flex-direction:column;align-items:stretch;gap:10px;width:260px;max-width:100%;margin-top:6px}
	.jnfhs .jnfhs__btn{padding:14px 24px;width:100%;white-space:nowrap}
	.jnfhs__bg{order:2;position:relative;inset:auto;width:100%;height:clamp(200px,52vw,380px);padding-top:30px;
		background-color:var(--blue);background-origin:content-box;background-clip:border-box}
	.jnfhs__overlay{display:none}
	.jnfhs .jnfhs__arrow{display:none}
	.jnfhs__wave{display:none}
	.jnfhs .jnfhs__dots{left:50%;right:auto;transform:translateX(-50%);bottom:16px;
		background:rgba(6,40,72,.5);padding:8px 12px;border-radius:999px}
}
@media(max-width:600px){
	.jnfhs .jnfhs__headline{font-size:28px !important}
	.jnfhs .jnfhs__sub{font-size:14px}
}
@media(prefers-reduced-motion:reduce){
	.jnfhs__slide,.jnfhs__btn,.jnfhs__arrow{transition:none !important}
}