/* ==========================================================================
   John Mini — Homepage
   Loads ONLY on the Homepage template (see john_mini_assets in functions.php).
   Design source: Figma "Homepage" frame (1440px).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BANNER — Figma node 591:3637
   -------------------------------------------------------------------------- */
.jm-banner{
	position:relative;
	width:100%;
	height:100vh;
	height:100svh;
	min-height:720px;
	overflow:hidden;
	background:var(--jm-navy);
}

.jm-banner__media{position:absolute;inset:0;}
.jm-banner__media img{
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
}
/* Figma: flat 40% black scrim over the photo */
.jm-banner__media::after{
	content:"";
	position:absolute;
	inset:0;
	background:rgba(0,0,0,.4);
}

.jm-banner__inner{
	position:relative;
	z-index:5;
	height:100%;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:64px;
	padding-top:var(--jm-header-h);
	text-align:center;
}

.jm-banner__copy{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:32px;
	max-width:1095px;
	width:100%;
}

.jm-banner__tag{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:8px 24px;
	border-radius:36px;
	background:var(--jm-green);
	color:#000;
	font-family:var(--jm-font-body);
	font-size:24px;
	line-height:1.35;
}

.jm-banner__title{
	margin:0;
	font-family:var(--jm-font-head);
	font-weight:400;
	font-size:96px;
	line-height:1.1;
	color:#fff;
}

.jm-banner__text{
	margin:0;
	max-width:647px;
	font-family:var(--jm-font-body);
	font-size:24px;
	line-height:1.35;
	color:#fff;
}

.jm-banner__actions{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:24px;
}
.jm-banner__btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:12px 24px;
	font-family:var(--jm-font-body);
	font-size:16px;
	line-height:1.35;
	transition:background-color .25s ease, color .25s ease, border-color .25s ease;
}
.jm-banner__btn--primary{
	background:var(--jm-green);
	color:#000;
	font-weight:800;
}
.jm-banner__btn--primary:hover,
.jm-banner__btn--primary:focus-visible{background:#74b32f;}
.jm-banner__btn--secondary{
	border:2px solid #8ac53e;
	color:#fff;
	font-weight:400;
}
.jm-banner__btn--secondary:hover,
.jm-banner__btn--secondary:focus-visible{background:var(--jm-green);color:#000;}

/* --------------------------------------------------------------------------
   2. BANNER CONTENT ANIMATION (runs once the intro finishes)
   -------------------------------------------------------------------------- */
.jm-banner .jm-anim{
	opacity:0;
	transform:translateY(28px);
	will-change:opacity,transform;
}
.jm-banner .jm-anim--title{transform:translateY(28px) scale(1.03);filter:blur(12px);}

body.jm-ready .jm-banner .jm-anim{
	opacity:1;
	transform:none;
	filter:none;
	transition:opacity .8s ease var(--d,0s), transform .9s var(--jm-ease) var(--d,0s), filter .8s ease var(--d,0s);
}
.jm-banner__tag{--d:.10s;}
.jm-banner__title{--d:.25s;}
.jm-banner__text{--d:.45s;}
.jm-banner__actions{--d:.62s;}

/* --------------------------------------------------------------------------
   3. INTRO / LOGO REVEAL
   The logo fades in, the image then fills the blue panel from the bottom up,
   and finally expands to the whole screen.
   -------------------------------------------------------------------------- */
.jm-intro{
	position:fixed;
	inset:0;
	z-index:200;
	background:var(--jm-navy);
	overflow:hidden;

	/* size of the blue panel in the logo — everything else scales from it */
	--jm-pw:124px;
	--jm-ph:222px;
}
.jm-intro.is-done{
	opacity:0;
	visibility:hidden;
	transition:opacity .3s ease .05s, visibility .3s;
}

/* The blue panel doubles as the measuring box. It is NOT centred with a
   transform, which would create a stacking context and drop the splat
   behind the image. */
.jm-intro__panel{
	position:absolute;
	inset:0;
	margin:auto;
	width:var(--jm-pw);
	height:var(--jm-ph);
	background:var(--jm-blue);
	opacity:0;
	transition:opacity .6s ease;
}
.jm-intro.is-on .jm-intro__panel{opacity:1;}

.jm-intro__reveal{
	position:absolute;
	inset:0;
	z-index:2;
	background-position:center center;
	background-size:cover;
	background-repeat:no-repeat;
	will-change:clip-path;
}
.jm-intro.is-fill .jm-intro__reveal{transition:clip-path .85s cubic-bezier(.62,.02,.28,1);}
.jm-intro.is-open .jm-intro__reveal{transition:clip-path 1s cubic-bezier(.76,0,.24,1);}

.jm-intro__splat{
	position:absolute;
	z-index:3;
	left:-28.24%;
	top:8.52%;
	width:170%;
	height:97.7%;
	max-width:none;
	transform-origin:center center;
	will-change:transform,opacity;
}
.jm-intro.is-open .jm-intro__splat{
	opacity:0;
	transform:scale(7);
	transition:opacity .62s ease .06s, transform 1s cubic-bezier(.76,0,.24,1);
}

.jm-intro__word{
	position:absolute;
	z-index:3;
	left:-43.5%;
	top:117%;
	width:181.8%;
	height:auto;
	max-width:none;
}
.jm-intro__word img{
	width:100%;
	display:block;
	transition:opacity .4s ease, transform .4s var(--jm-ease);
}
/* the first word leaves, then the second */
.jm-intro.is-fill .jm-intro__word img{
	opacity:0;
	transform:translateY(-6px);
}
.jm-intro.is-fill .jm-intro__word img:nth-child(1){transition-delay:0s;}
.jm-intro.is-fill .jm-intro__word img:nth-child(2){transition-delay:.3s;}

/* --------------------------------------------------------------------------
   4. OUR CAPABILITIES — Figma node 591:3687
   Cards are 424px wide with a 24px gap, so three of them fill the 1320px
   container and the fourth peeks past the container edge.
   -------------------------------------------------------------------------- */
.jm-caps{
	position:relative;
	display:flex;
	flex-direction:column;
	justify-content:flex-end;
	height:100vh;
	height:100svh;
	min-height:760px;
	padding-bottom:60px;
	overflow:hidden;
	background:var(--jm-navy);
	color:#fff;
}

/* ---------- Background crossfade and slow zoom ---------- */
.jm-caps__media{position:absolute;inset:0;overflow:hidden;}
.jm-caps__bg{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
	opacity:0;
	/* the zoom end state, so removing the animation causes no jump */
	transform:scale(1);
	transition:opacity .8s ease;
	will-change:transform,opacity;
}
.jm-caps__bg.is-active{
	opacity:1;
	animation:jmCapsZoom var(--jm-dur,4000ms) linear forwards;
}
/* the image slowly zooms out across the slide */
@keyframes jmCapsZoom{
	from{transform:scale(1.09);}
	to{transform:scale(1);}
}
.jm-caps__media::after{
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 58.47%);
}

/* ---------- Layout ---------- */
.jm-caps__inner{
	position:relative;
	z-index:3;
	width:100%;
	/* the container's left edge, with the right side left open so the cards
	   can run past it */
	--jm-pad:max(var(--jm-gutter), calc((100% - var(--jm-container)) / 2));
	padding-left:var(--jm-pad);
}
.jm-caps__head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:24px;
	padding-right:var(--jm-pad);
	margin-bottom:64px;
}
.jm-caps__title{
	margin:0;
	font-family:var(--jm-font-head);
	font-weight:400;
	font-size:64px;
	line-height:1.1;
	color:#fff;
}

/* ---------- Prev / next ---------- */
.jm-caps__nav{display:flex;gap:14px;flex:none;}
.jm-caps__arrow{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:42px;
	height:42px;
	border-radius:50%;
	background:var(--jm-green);
	color:#fff;
	transition:background-color .25s ease, transform .25s var(--jm-ease);
}
.jm-caps__arrow svg{width:22px;height:22px;}
.jm-caps__arrow img{width:42px;height:42px;}
.jm-caps__arrow:hover{background:#74b32f;transform:translateY(-2px);}

/* ---------- Track ---------- */
.jm-caps__viewport{overflow:hidden;}
.jm-caps__track{
	display:flex;
	align-items:flex-start;
	gap:24px;
	list-style:none;
	margin:0;
	padding:0;
	transition:transform .7s var(--jm-ease);
	will-change:transform;
}

/* ---------- Card ---------- */
.jm-caps__card{
	flex:none;
	width:424px;
	display:flex;
	flex-direction:column;
	row-gap:18px;
	padding-top:4px;
}

/* the rule is a track plus a green fill that runs 0 to 100% per slide */
.jm-caps__rule{
	position:relative;
	display:block;
	height:2px;
	width:100%;
	background:rgba(255,255,255,.4);
	overflow:hidden;
}
.jm-caps__rule i{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:#8ac53e;
	transform:scaleX(0);
	transform-origin:left center;
}
.jm-caps__card.is-active .jm-caps__rule i{
	animation:jmCapsProgress var(--jm-dur,4000ms) linear forwards;
}
@keyframes jmCapsProgress{
	from{transform:scaleX(0);}
	to{transform:scaleX(1);}
}

/* the progress bar and the zoom both pause when the section is off screen */
.jm-caps.is-paused .jm-caps__card.is-active .jm-caps__rule i,
.jm-caps.is-paused .jm-caps__bg.is-active{animation-play-state:paused;}

.jm-caps__card-title{
	margin:0;
	font-family:var(--jm-font-head);
	font-weight:400;
	font-size:32px;
	line-height:1.1;
	color:#fff;
}

/* The description belongs to the active card only. The row reserves the
   height of the tallest card, so opening it never moves the rule — only the
   text appears and the link slides down. */
.jm-caps__card .jm-caps__desc{
	display:grid;
	grid-template-rows:0fr;
	margin-top:-18px;                 /* cancels the card row-gap while closed */
	transition:grid-template-rows .9s cubic-bezier(.22,1,.36,1),
	           margin-top .9s cubic-bezier(.22,1,.36,1);
}
.jm-caps__card.is-active .jm-caps__desc{
	grid-template-rows:1fr;
	margin-top:0;
	transition-delay:.2s;
}
/* everything must be open while the lines are measured */
.jm-caps.is-measuring .jm-caps__desc{grid-template-rows:1fr;margin-top:0;transition:none;}

/* On a loop reset the active card swaps element. Transitions are off for
   that single frame, otherwise the description blinks out and back in. */
.jm-caps.is-jumping .jm-caps__desc,
.jm-caps.is-jumping .jm-caps__line > span{transition:none;}

.jm-caps__line{
	display:block;
	overflow:hidden;
}
.jm-caps__line > span{
	display:block;
	transform:translateY(-110%);       /* drops in from above */
	opacity:0;
	transition:transform .9s cubic-bezier(.22,1,.36,1), opacity .6s ease;
}
.jm-caps__card.is-active .jm-caps__line > span{
	transform:translateY(0);
	opacity:1;
}

/* lines follow each other closely — the first is still settling when the
   second sets off */
.jm-caps__card.is-active .jm-caps__line:nth-child(1) > span{transition-delay:.35s;}
.jm-caps__card.is-active .jm-caps__line:nth-child(2) > span{transition-delay:.49s;}
.jm-caps__card.is-active .jm-caps__line:nth-child(3) > span{transition-delay:.63s;}
.jm-caps__card.is-active .jm-caps__line:nth-child(4) > span{transition-delay:.77s;}

.jm-caps__desc > p{
	margin:0;
	overflow:hidden;
	font-family:var(--jm-font-body);
	font-size:22px;
	line-height:1.1;
	color:#fff;
}

.jm-caps__cta{
	display:inline-flex;
	align-items:center;
	gap:8px;
	font-family:var(--jm-font-body);
	font-weight:800;
	font-size:22px;
	line-height:1.1;
	color:#8ac53e;
	align-self:flex-start;
	transition:color .25s ease;
}
.jm-caps__cta svg{width:24px;height:24px;flex:none;transition:transform .25s var(--jm-ease);}
.jm-caps__cta img{width:24px;height:24px;flex:none;}
.jm-caps__cta:hover{color:#fff;}
.jm-caps__cta:hover svg{transform:translate(2px,-2px);}

/* --------------------------------------------------------------------------
   5. SHARED — scroll reveal for sections without their own animation
   -------------------------------------------------------------------------- */
.jm-reveal{
	opacity:0;
	transform:translateY(28px);
}
.jm-reveal.is-in{
	opacity:1;
	transform:none;
	transition:opacity .8s ease var(--d,0s),
	           transform .9s cubic-bezier(.22,1,.36,1) var(--d,0s);
}

/* --------------------------------------------------------------------------
   6. WHO WE SERVE — Figma node 591:4092
   Left copy 648px, right cards 424px, inside the 1320px container.
   -------------------------------------------------------------------------- */
.jm-serve{
	position:relative;
	min-height:780px;
	display:flex;
	align-items:center;
	padding:36px 0;
	overflow:hidden;
	background:var(--jm-navy);
	color:#fff;
}
.jm-serve__media{position:absolute;inset:0;}
.jm-serve__media img{
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
}
.jm-serve__media::after{
	content:"";
	position:absolute;
	inset:0;
	background:rgba(0,0,0,.5);
}

.jm-serve__inner{
	position:relative;
	z-index:3;
	width:100%;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:40px;
}

.jm-serve__copy{
	display:flex;
	flex-direction:column;
	gap:32px;
	max-width:648px;
}
.jm-serve__title{
	margin:0;
	font-family:var(--jm-font-head);
	font-weight:400;
	font-size:64px;
	line-height:1.1;
	color:#fff;
}
.jm-serve__text{
	margin:0;
	font-family:var(--jm-font-body);
	font-size:24px;
	line-height:1.2;
	color:#fff;
}

.jm-serve__list{
	flex:none;
	width:424px;
	display:flex;
	flex-direction:column;
	gap:24px;
	list-style:none;
	margin:0;
	padding:0;
}
.jm-serve__card{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:14px;
	padding:32px;
	border-radius:18px;
	background:rgba(255,255,255,.1);
	-webkit-backdrop-filter:blur(20px);
	backdrop-filter:blur(20px);
}
/* darker fallback where backdrop-filter is unsupported */
@supports not ((backdrop-filter:blur(20px)) or (-webkit-backdrop-filter:blur(20px))){
	.jm-serve__card{background:rgba(20,28,20,.55);}
}
.jm-serve__icon{
	width:42px;
	height:42px;
	flex:none;
}
.jm-serve__card-title{
	margin:0;
	font-family:var(--jm-font-head);
	font-weight:400;
	font-size:32px;
	line-height:1.1;
	color:#fff;
}
.jm-serve__card-text{
	margin:0;
	font-family:var(--jm-font-body);
	font-size:20px;
	line-height:1.35;
	color:#fff;
}

/* --------------------------------------------------------------------------
   7. SERVICES — scroll-pinned, Figma nodes 591:3722 / 591:3751 / 591:3778
   Every image is revealed from the bottom up; the second image of a service
   carries a green border along its leading edge.
   -------------------------------------------------------------------------- */
.jm-serv{
	position:relative;
	--jm-step-h:90vh;
}
.jm-serv__track{
	position:relative;
	height:calc(var(--jm-steps,6) * var(--jm-step-h));
}
.jm-serv__sticky{
	position:sticky;
	top:0;
	height:100vh;
	height:100svh;
	overflow:hidden;
	background:var(--jm-navy);
	--jm-pad:max(var(--jm-gutter), calc((100% - var(--jm-container)) / 2));
}

.jm-serv__stack{position:absolute;inset:0;}
.jm-serv__layer{
	position:absolute;
	inset:0;
	clip-path:inset(100% 0 0 0);      /* driven by scroll from the script */
	will-change:clip-path;
}
.jm-serv__layer img{
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
}

.jm-serv__line{
	position:absolute;
	left:0;right:0;
	top:100%;
	height:9px;
	z-index:20;
	background:#8ac53e;
	opacity:0;
	pointer-events:none;
}

.jm-serv__scrim{
	position:absolute;
	inset:0;
	z-index:15;
	pointer-events:none;
	background:linear-gradient(180deg, rgba(28,35,28,0) 48.5%, rgba(28,35,28,.6) 70.4%);
}

.jm-serv__inner{
	position:absolute;
	z-index:25;
	left:var(--jm-pad);
	right:var(--jm-pad);
	bottom:80px;
}
.jm-serv__slide{
	position:absolute;
	left:0;right:0;bottom:0;
	display:flex;
	flex-direction:column;
	gap:24px;
	opacity:0;
	will-change:opacity,transform;
}
.jm-serv__head{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:32px;
}

.jm-serv__tag{
	display:inline-flex;
	align-items:center;
	gap:14px;
	padding:12px 24px;
	background:var(--jm-green);
	color:#172639;
	font-family:var(--jm-font-body);
	font-weight:800;
	font-size:18px;
	line-height:1.2;
}
.jm-serv__tag img,
.jm-serv__tag svg{width:24px;height:24px;flex:none;}

/* progress bar, split evenly across every image */
.jm-serv__bar{
	position:relative;
	display:block;
	width:100%;
	height:1px;
	background:rgba(255,255,255,.25);
}
.jm-serv__bar i{
	position:absolute;
	left:0;top:0;
	height:100%;
	width:var(--p,0%);
	background:#fff;
}

.jm-serv__row{
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap:40px;
	width:100%;
}
.jm-serv__copy{
	display:flex;
	flex-direction:column;
	gap:24px;
	max-width:872px;
}
.jm-serv__title{
	margin:0;
	font-family:var(--jm-font-head);
	font-weight:400;
	font-size:64px;
	line-height:1.1;
	color:#fff;
}
.jm-serv__text{
	margin:0;
	font-family:var(--jm-font-body);
	font-size:24px;
	line-height:1.35;
	color:#fff;
	opacity:.7;
}
.jm-serv__btn{
	display:inline-flex;
	align-items:center;
	gap:8px;
	flex:none;
	padding:12px 18px 12px 24px;
	background:#fff;
	color:#172639;
	font-family:var(--jm-font-body);
	font-weight:800;
	font-size:16px;
	line-height:1.2;
	transition:background-color .25s ease, color .25s ease;
}
.jm-serv__btn svg{width:24px;height:24px;flex:none;}
.jm-serv__btn:hover{background:var(--jm-green);color:#172639;}

/* --------------------------------------------------------------------------
   8. RANGE OF SCALE — Figma node 591:3805
   The section is sticky so the next section scrolls over the top of it.
   Images drift outwards from the centre; the speed comes from the script.
   -------------------------------------------------------------------------- */
.jm-scale{
	position:relative;
	z-index:1;
	height:250vh;                      /* scroll runway: drift, then the overlap */
}
.jm-scale__sticky{
	position:sticky;
	top:0;
	height:100vh;
	height:100svh;
	display:flex;
	align-items:center;
	justify-content:center;
	overflow:hidden;
	background:#203864;
}

.jm-scale__field{
	position:absolute;
	inset:0;
	pointer-events:none;
}
.jm-scale__item{
	position:absolute;
	left:50%;
	top:50%;
	margin:0;
	width:clamp(110px, 14vw, 210px);
	will-change:transform,opacity;
}
.jm-scale__item img{
	display:block;
	width:100%;
	height:auto;
}

.jm-scale__inner{
	position:relative;
	z-index:3;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:16px;
	text-align:center;
	color:#fff;
}
.jm-scale__logo{
	width:178px;
	height:auto;
}
.jm-scale__title{
	margin:0;
	font-family:var(--jm-font-head);
	font-weight:400;
	font-size:64px;
	line-height:1.1;
	color:#fff;
}
.jm-scale__text{
	margin:0;
	max-width:674px;
	font-family:var(--jm-font-body);
	font-size:20px;
	line-height:1.5;
	color:#fff;
}

/* --------------------------------------------------------------------------
   9. THE CLIENT PROMISE — Figma node 591:3831
   Sits above the sticky Range of Scale section and scrolls over it.
   -------------------------------------------------------------------------- */
.jm-promise{
	position:relative;
	z-index:2;
	/* pulled up over the pinned Range of Scale section, so it slides across
	   it while that section stays put and only then carries on */
	margin-top:-100vh;
	padding:80px 0;
	background:#203864;
	color:#fff;
}
.jm-promise__inner{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:100px;
}
.jm-promise__title{
	margin:0;
	width:100%;
	font-family:var(--jm-font-head);
	font-weight:400;
	font-size:64px;
	line-height:1.1;
	text-align:center;
	color:#fff;
}

.jm-promise__values{
	display:flex;
	align-items:flex-start;
	gap:24px;
	width:100%;
	list-style:none;
	margin:0;
	padding:0;
}
.jm-promise__value{
	flex:1 0 0;
	min-width:0;
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:14px;
}
.jm-promise__icon{width:42px;height:42px;flex:none;}
.jm-promise__value-title{
	margin:0;
	font-family:var(--jm-font-head);
	font-weight:400;
	font-size:32px;
	line-height:1.1;
	color:#fff;
}
.jm-promise__value-text{
	margin:0;
	font-family:var(--jm-font-body);
	font-size:20px;
	line-height:1.2;
	color:#fff;
	opacity:.6;
}

.jm-promise__btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:12px 24px;
	background:var(--jm-green);
	color:#000;
	font-family:var(--jm-font-body);
	font-weight:800;
	font-size:16px;
	line-height:1.2;
	transition:background-color .25s ease;
}
.jm-promise__btn:hover{background:#74b32f;}

.jm-promise__rule{
	width:100%;
	height:1px;
	margin:0;
	border:0;
	background:rgba(255,255,255,.25);
}

.jm-promise__stats{
	display:flex;
	align-items:flex-start;
	justify-content:center;
	gap:24px;
	width:100%;
	list-style:none;
	margin:0;
	padding:0;
}
.jm-promise__stat{
	flex:1 0 0;
	min-width:0;
	display:flex;
	flex-direction:column;
	gap:24px;
}
.jm-promise__stat-num{
	display:block;
	font-family:var(--jm-font-head);
	font-weight:400;
	font-size:54px;
	line-height:1.1;
	color:#8ac53e;
}
.jm-promise__stat-body{
	display:flex;
	flex-direction:column;
	gap:4px;
}
.jm-promise__stat-label{
	font-family:var(--jm-font-body);
	font-weight:800;
	font-size:24px;
	line-height:1.3;
	color:#fff;
}
.jm-promise__stat-note{
	font-family:var(--jm-font-body);
	font-size:18px;
	line-height:1.35;
	color:#fff;
	opacity:.6;
}

/* --------------------------------------------------------------------------
   9.1 FEATURED PROJECT — Figma node 601:4703
   Full-bleed photo with a 50% black scrim. Heading row at the top, three
   detail columns at the bottom. The photo is taller than the section so the
   script can drift it (parallax) without ever exposing an edge.
   -------------------------------------------------------------------------- */
.jm-feat{
	position:relative;
	z-index:2;
	display:flex;
	min-height:800px;
	padding:100px 0 60px;
	overflow:hidden;
	background:var(--jm-navy);
	color:#fff;

	/* written by the script while the section scrolls through the viewport */
	--jm-feat-y:0px;
	--jm-feat-s:1.08;
}

/* ---------- Background ---------- */
.jm-feat__media{
	position:absolute;
	inset:-12% 0;                      /* extra room for the parallax drift */
	overflow:hidden;
}
.jm-feat__bg{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
	transform:translate3d(0, var(--jm-feat-y), 0) scale(var(--jm-feat-s));
	will-change:transform;
}
/* Figma: flat 50% black scrim over the photo */
.jm-feat__media::after{
	content:"";
	position:absolute;
	inset:0;
	background:rgba(0,0,0,.5);
}

/* ---------- Layout ---------- */
.jm-feat__inner{
	position:relative;
	z-index:3;
	width:100%;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	gap:64px;
}

.jm-feat__head{
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap:40px;
}
.jm-feat__heading{
	flex:1 1 auto;
	min-width:0;
	display:flex;
	flex-direction:column;
	gap:8px;
}
.jm-feat__eyebrow{
	margin:0;
	font-family:var(--jm-font-body);
	font-weight:400;
	font-size:32px;
	line-height:1.35;
	color:#fff;
}
.jm-feat__title{
	margin:0;
	font-family:var(--jm-font-head);
	font-weight:400;
	font-size:64px;
	line-height:1.2;
	color:#fff;
}

/* ---------- Heading mask reveal ----------
   The text sits inside an overflow-hidden wrapper and rises into view once
   the section is on screen (.is-in is added by the script). */
.jm-feat__mask{
	display:block;
	overflow:hidden;
	padding-bottom:.06em;              /* keeps descenders from being clipped */
}
.jm-feat__mask > span{
	display:block;
	transform:translateY(105%);
	transition:transform 1s cubic-bezier(.22,1,.36,1);
}
.jm-feat__title .jm-feat__mask > span{transition-delay:.12s;}
.jm-feat.is-in .jm-feat__mask > span{transform:none;}

/* ---------- Button ---------- */
.jm-feat__btn{
	flex:none;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:12px 24px;
	background:var(--jm-green);
	color:#203864;
	font-family:var(--jm-font-body);
	font-weight:800;
	font-size:16px;
	line-height:1.2;
	opacity:0;
	transform:translateY(16px);
	transition:opacity .7s ease .35s,
	           transform .8s cubic-bezier(.22,1,.36,1) .35s,
	           background-color .25s ease;
}
.jm-feat.is-in .jm-feat__btn{opacity:1;transform:none;}
.jm-feat__btn:hover{background:#74b32f;}
.jm-feat__btn:focus-visible{
	outline:2px solid #fff;
	outline-offset:3px;
}

/* ---------- Detail columns ---------- */
.jm-feat__details{
	display:flex;
	align-items:flex-start;
	gap:24px;
	width:100%;
	list-style:none;
	margin:0;
	padding:0;
}
.jm-feat__item{
	flex:1 0 0;
	min-width:0;
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:14px;
}
.jm-feat__icon{width:42px;height:42px;flex:none;}
.jm-feat__item-title{
	margin:0;
	font-family:var(--jm-font-head);
	font-weight:400;
	font-size:32px;
	line-height:1.1;
	color:#fff;
}
.jm-feat__item-text{
	margin:0;
	font-family:var(--jm-font-body);
	font-size:16px;
	line-height:1.2;
	color:#fff;
}

/* --------------------------------------------------------------------------
   9.2 TESTIMONIALS & USEFUL INSIGHTS — Figma node 600:4303
   White section. Testimonial cards are 872px with a 136px gap, so the next
   card peeks in from the right edge of the screen. Blocks are separated by
   120px, as in the Figma auto-layout.
   -------------------------------------------------------------------------- */
.jm-voices{
	position:relative;
	z-index:2;
	padding:100px 0;
	overflow:hidden;
	background:#fff;
	color:#172639;
}

/* ---------- Testimonials head ---------- */
.jm-voices__head{
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap:40px;
	margin-bottom:120px;
}
.jm-voices__title{
	margin:0;
	max-width:722px;
	font-family:var(--jm-font-head);
	font-weight:400;
	font-size:64px;
	line-height:1.1;
	color:#172639;
}

/* ---------- Prev / next ----------
   Enabled buttons are green, disabled ones fall back to the Figma grey. */
.jm-voices__nav{display:flex;gap:14px;flex:none;}
.jm-voices__arrow{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:52px;
	height:52px;
	padding:14px;
	background:#8ac53e;
	color:#fff;
	transition:background-color .25s ease, transform .25s var(--jm-ease);
}
.jm-voices__arrow svg{
	width:24px;
	height:24px;
	flex:none;
	transform:rotate(90deg);           /* Figma rotates the glyph by 90deg */
}
.jm-voices__arrow:hover:not([disabled]){background:#74b32f;transform:translateY(-2px);}
.jm-voices__arrow[disabled]{
	background:rgba(0,0,0,.3);
	cursor:default;
}

/* ---------- Track ---------- */
.jm-voices__viewport{
	overflow:hidden;
	/* start at the container's left edge, run out to the screen edge */
	padding-left:max(var(--jm-gutter), calc((100% - var(--jm-container)) / 2));
	touch-action:pan-y;
}
.jm-voices__track{
	display:flex;
	align-items:flex-start;
	gap:136px;
	list-style:none;
	margin:0;
	padding:0;
	transition:transform .8s var(--jm-ease);
	will-change:transform;
}
.jm-voices__viewport.is-dragging{cursor:grabbing;user-select:none;-webkit-user-select:none;}
.jm-voices__viewport.is-dragging .jm-voices__track{transition:none;}
.jm-voices__slide{
	flex:none;
	width:872px;
	max-width:calc(100vw - (var(--jm-gutter) * 2));
}

/* ---------- Card ---------- */
.jm-voices__card{
	display:flex;
	flex-direction:column;
	gap:42px;
	margin:0;
}
.jm-voices__person{
	display:flex;
	align-items:flex-end;
	gap:14px;
	max-width:816px;
}
.jm-voices__photo{
	flex:none;
	width:120px;
	height:140px;
	object-fit:cover;
	object-position:50% 25%;
}
.jm-voices__meta{
	flex:1 1 auto;
	min-width:0;
	display:flex;
	flex-direction:column;
	gap:8px;
	line-height:1.1;
}
.jm-voices__name{
	font-family:var(--jm-font-head);
	font-style:normal;
	font-weight:700;
	font-size:32px;
	color:#172639;
}
.jm-voices__role{
	font-family:var(--jm-font-body);
	font-size:24px;
	color:#172639;
	opacity:.5;                        /* 24px counts as large text, still AA */
}
.jm-voices__quote{
	display:flex;
	flex-direction:column;
	gap:14px;
	margin:0;
}
.jm-voices__mark{width:52px;height:38px;flex:none;}
.jm-voices__quote p{
	margin:0;
	font-family:var(--jm-font-body);
	font-size:24px;
	line-height:1.2;
	color:#172639;
}

/* ---------- Divider ---------- */
.jm-voices__rule{
	width:100%;
	height:1px;
	margin:120px 0;
	border:0;
	background:rgba(23,38,57,.3);      /* Figma: #172639 at 30% */
}

/* ---------- Useful Insights ---------- */
.jm-insights__head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:24px;
	margin-bottom:42px;
}
.jm-insights__title{
	margin:0;
	font-family:var(--jm-font-head);
	font-weight:400;
	font-size:64px;
	line-height:1.1;
	color:#172639;
}
.jm-insights__more{
	display:inline-flex;
	align-items:center;
	gap:14px;
	flex:none;
	font-family:var(--jm-font-body);
	font-size:18px;
	line-height:1.35;
	color:#000;
	transition:color .25s ease;
}
.jm-insights__more svg{width:24px;height:24px;flex:none;transition:transform .3s var(--jm-ease);}
.jm-insights__more:hover{color:#172639;}
.jm-insights__more:hover svg{transform:translateX(4px);}

.jm-insights__grid{
	display:grid;
	grid-template-columns:repeat(3, minmax(0, 1fr));
	gap:64px 24px;
	list-style:none;
	margin:0;
	padding:0;
}
.jm-insights__card{height:100%;}
.jm-insights__link{
	display:flex;
	flex-direction:column;
	gap:24px;
	color:#000;
}
.jm-insights__media{
	display:block;
	position:relative;
	height:260px;
	overflow:hidden;
	background:#eef1ea;
}
.jm-insights__img{
	width:100%;
	height:100%;
	object-fit:cover;
	transition:transform .9s var(--jm-ease);
}
.jm-insights__card-title{
	margin:0;
	font-family:var(--jm-font-body);
	font-weight:400;
	font-size:24px;
	line-height:1.35;
	color:#000;
}
/* underline grows from the left on hover, following the text lines */
.jm-insights__card-title span{
	background:linear-gradient(#8ac53e, #8ac53e) 0 100% / 0 2px no-repeat;
	transition:background-size .45s var(--jm-ease);
}
.jm-insights__link:hover .jm-insights__img,
.jm-insights__link:focus-visible .jm-insights__img{transform:scale(1.05);}
.jm-insights__link:hover .jm-insights__card-title span,
.jm-insights__link:focus-visible .jm-insights__card-title span{background-size:100% 2px;}

/* --------------------------------------------------------------------------
   9.3 BUILD A CAREER — Figma node 591:3824, motion from "Option 1"
   The section is exactly one screen tall and scrolls normally (no pinning,
   so the page never pauses). Parallax and the heading reveal still follow
   the Figma timing.
   All picture geometry uses --u, one Figma pixel scaled to the screen: it
   follows the width on desktop and the height on tall/narrow screens, so
   the photo always covers the stage. Layers are centred on the 1440 frame.
   -------------------------------------------------------------------------- */
.jm-career{
	position:relative;
	z-index:2;
	background:#203864;
}
.jm-career__stage{
	position:relative;
	height:100vh;
	height:100svh;
	overflow:hidden;
	background:#203864;

	--u:max(calc(100vw / 1440), calc(100svh / 1126));
	--shift:0px;                           /* pushes the pictures below the copy on small screens */
}

/* ---------- Picture layers ---------- */
.jm-career__scene{position:absolute;inset:0;}
.jm-career__layer{
	position:absolute;
	transform:translate3d(0, var(--y, 0px), 0);
	will-change:transform;
	pointer-events:none;
}
.jm-career__img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
}

/* Figma: photo 1550x1034 at (-110, 133) */
.jm-career__layer--bg{
	left:calc(50% - 830 * var(--u));
	top:calc(133 * var(--u) + var(--shift));
	width:calc(1550 * var(--u));
	height:calc(1034 * var(--u));
}

/* Figma: Ellipse 4, 2284x722 at (-422, -299), #203864, foreground blur 200 */
.jm-career__layer--glow{
	left:calc(50% - 1142 * var(--u));
	top:calc(-299 * var(--u) + var(--shift));
	width:calc(2284 * var(--u));
	height:calc(722 * var(--u));
	border-radius:50%;
	background:#203864;
	filter:blur(calc(100 * var(--u)));    /* Figma blur 200 = CSS blur 100 */
}

/* Figma: Group 13 (cut-out) 1550x1034 at (-110, 216) */
.jm-career__layer--fg{
	z-index:1;
	left:calc(50% - 830 * var(--u));
	top:calc(216 * var(--u) + var(--shift));
	width:calc(1550 * var(--u));
	height:calc(1034 * var(--u));
}

/* ---------- Copy ---------- */
.jm-career__copy{
	position:relative;
	z-index:2;
	display:flex;
	flex-direction:column;
	align-items:center;
	width:min(872px, calc(100% - var(--jm-gutter) * 2));
	margin:0 auto;
	padding-top:max(calc(133 * var(--u)), 110px);
	text-align:center;
	color:#fff;
}
.jm-career__title{
	margin:0;
	font-family:var(--jm-font-head);
	font-weight:400;
	font-size:86px;
	line-height:1.1;
	color:#fff;
}
.jm-career__text{
	margin:32px 0 0;
	font-family:var(--jm-font-body);
	font-size:24px;
	line-height:1.2;
	color:#fff;
}
.jm-career__btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	margin-top:45px;
	padding:12px 24px;
	background:#86c53e;
	color:#203864;
	font-family:var(--jm-font-body);
	font-weight:800;
	font-size:16px;
	line-height:1.35;
}
.jm-career__btn:hover{background:#74b32f;}
.jm-career__btn:focus-visible{outline:2px solid #fff;outline-offset:3px;}

/* ---------- Character reveal ----------
   Figma keyframes per character: opacity 0 -> 1, y 40 -> 0, blur 20 -> 0,
   0.5s, cubic-bezier(0,0,.58,1), each character 20ms after the previous.
   The description and button follow on the same curve. */
.jm-career__word{display:inline-block;white-space:nowrap;}
.jm-career__char,
.jm-career__text,
.jm-career__btn{
	opacity:0;
	transform:translateY(40px);
	filter:blur(10px);
	transition:opacity .5s cubic-bezier(0,0,.58,1) calc(var(--i, 0) * 20ms),
	           transform .5s cubic-bezier(0,0,.58,1) calc(var(--i, 0) * 20ms),
	           filter .5s cubic-bezier(0,0,.58,1) calc(var(--i, 0) * 20ms),
	           background-color .25s ease;
}
.jm-career__char{display:inline-block;}
.jm-career.is-in .jm-career__char,
.jm-career.is-in .jm-career__text,
.jm-career.is-in .jm-career__btn{
	opacity:1;
	transform:none;
	filter:none;
}

/* --------------------------------------------------------------------------
   9.4 START A CONVERSATION — style from Figma node 601:4448
   Cream band, 708px picture column, 80px gap. On entry a green panel sweeps
   in from the left (1.4s) and the photo is uncovered 140ms later.
   -------------------------------------------------------------------------- */
.jm-contact{
	position:relative;
	z-index:2;
	display:flex;
	align-items:stretch;
	gap:80px;
	min-height:461px;
	background:#f2eedf;
	color:#172639;
}

/* ---------- Picture column ---------- */
.jm-contact__media{
	position:relative;
	flex:0 0 min(708px, 49%);
	overflow:hidden;
}
.jm-contact__panel,
.jm-contact__photo{
	position:absolute;
	inset:0;
}
.jm-contact__panel{
	background:#8ac53e;
	transform:scaleX(0);
	transform-origin:left center;
	transition:transform 1.4s cubic-bezier(.2,0,.2,1);
}
.jm-contact__photo{
	clip-path:inset(0 100% 0 0);
	transition:clip-path 1.4s cubic-bezier(.2,0,.2,1) .14s;
}
.jm-contact__img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
}
.jm-contact.is-in .jm-contact__panel{transform:scaleX(1);}
.jm-contact.is-in .jm-contact__photo{clip-path:inset(0 0 0 0);}

/* ---------- Copy column ---------- */
.jm-contact__body{
	flex:1 1 auto;
	min-width:0;
	max-width:652px;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:flex-start;
	padding:80px 60px 80px 0;
}
.jm-contact__title{
	margin:0;
	font-family:var(--jm-font-head);
	font-weight:400;
	font-size:64px;
	line-height:1.1;
	color:#172639;
}
.jm-contact__text{
	margin:24px 0 0;
	font-family:var(--jm-font-body);
	font-size:24px;
	line-height:1.2;
	color:#172639;
}
.jm-contact__address{
	align-self:stretch;
	margin:32px 0 0;
	padding-top:32px;
	border-top:1px solid rgba(32,56,100,.15);
	font-style:normal;
}
.jm-contact__list{
	display:flex;
	flex-direction:column;
	gap:12px;
	list-style:none;
	margin:0;
	padding:0;
}
.jm-contact__link{
	display:inline-flex;
	align-items:center;
	gap:16px;
	font-family:var(--jm-font-body);
	font-size:24px;
	line-height:1.2;
	color:#172639;
	transition:color .25s ease;
}
.jm-contact__icon{width:24px;height:24px;flex:none;color:#8ac53e;}
.jm-contact__chevron{
	width:16px;
	height:16px;
	flex:none;
	color:#8ac53e;
	transition:transform .3s var(--jm-ease);
}
a.jm-contact__link:hover{color:#86c53e;}
a.jm-contact__link:hover .jm-contact__chevron{transform:translateX(4px);}
.jm-contact__link:focus-visible,
.jm-contact__btn:focus-visible{outline:2px solid #203864;outline-offset:3px;}

.jm-contact__btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	margin-top:32px;
	padding:12px 24px;
	background:#86c53e;
	color:#203864;
	font-family:var(--jm-font-body);
	font-weight:800;
	font-size:16px;
	line-height:1.35;
	transition:background-color .25s ease;
}
.jm-contact__btn:hover{background:#74b32f;}

/* --------------------------------------------------------------------------
   10. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width:1400px){
	.jm-banner__title{font-size:104px;}
}
@media (max-width:1200px){
	.jm-banner__title{font-size:80px;}
	.jm-banner__tag,
	.jm-banner__text{font-size:21px;}
	.jm-banner__inner{gap:52px;}
	.jm-caps__title{font-size:52px;}
	.jm-caps__card{width:380px;}
	.jm-serve__title{font-size:52px;}
	.jm-serve__text{font-size:21px;}
	.jm-serve__list{width:380px;}
	.jm-serve__card{padding:26px;}
	.jm-serve__card-title{font-size:28px;}
	.jm-serve__card-text{font-size:18px;}
	.jm-serv__title{font-size:52px;}
	.jm-serv__text{font-size:21px;}
	.jm-feat__eyebrow{font-size:28px;}
	.jm-feat__title{font-size:52px;}
	.jm-feat__item-title{font-size:28px;}
	.jm-voices__title,
	.jm-insights__title{font-size:52px;}
	.jm-voices__slide{width:720px;}
	.jm-voices__track{gap:96px;}
	.jm-voices__quote p{font-size:21px;}
	.jm-insights__card-title{font-size:21px;}
	.jm-career__title{font-size:72px;}
	.jm-career__text{font-size:21px;}
	.jm-contact{gap:56px;}
	.jm-contact__title{font-size:52px;}
	.jm-contact__text,
	.jm-contact__link{font-size:21px;}
}
@media (max-width:991px){
	.jm-banner__title{font-size:62px;}
	.jm-banner__tag,
	.jm-banner__text{font-size:19px;}
	.jm-banner__copy{gap:26px;}
	.jm-banner__inner{gap:44px;}
	.jm-caps__title{font-size:42px;}
	.jm-caps__head{margin-bottom:44px;}
	.jm-caps__card{width:320px;}
	.jm-caps__card-title{font-size:26px;}
	.jm-caps__desc > p,
	.jm-caps__cta{font-size:18px;}
	.jm-serve{min-height:0;padding:80px 0;}
	.jm-serve__inner{flex-direction:column;align-items:stretch;gap:40px;}
	.jm-serve__copy{max-width:none;gap:24px;}
	.jm-serve__title{font-size:42px;}
	.jm-serve__text{font-size:19px;}
	.jm-serve__list{width:100%;}
	.jm-serv__inner{bottom:56px;}
	.jm-serv__slide{gap:20px;}
	.jm-serv__head{gap:22px;}
	.jm-serv__title{font-size:40px;}
	.jm-scale__title{font-size:42px;}
	.jm-scale__text{font-size:18px;}
	.jm-scale__logo{width:140px;}
	.jm-promise__inner{gap:64px;}
	.jm-promise__title{font-size:42px;}
	.jm-promise__values,
	.jm-promise__stats{flex-wrap:wrap;gap:32px 24px;}
	.jm-promise__value,
	.jm-promise__stat{flex:1 1 calc(50% - 12px);}
	.jm-promise__value-title{font-size:26px;}
	.jm-promise__value-text{font-size:18px;}
	.jm-promise__stat-num{font-size:44px;}
	.jm-promise__stat-label{font-size:20px;}
	.jm-serv__text{font-size:18px;}
	.jm-serv__tag{font-size:16px;padding:10px 18px;}
	.jm-serv__row{flex-direction:column;align-items:flex-start;gap:24px;}
	.jm-serv__copy{max-width:none;gap:16px;}
	.jm-feat{min-height:0;padding:80px 0 56px;}
	.jm-feat__inner{gap:56px;}
	.jm-feat__head{flex-direction:column;align-items:flex-start;gap:28px;}
	.jm-feat__eyebrow{font-size:24px;}
	.jm-feat__title{font-size:42px;}
	.jm-feat__details{flex-wrap:wrap;gap:36px 24px;}
	.jm-feat__item{flex:1 1 calc(50% - 12px);}
	.jm-feat__item-title{font-size:26px;}
	.jm-voices{padding:80px 0;}
	.jm-voices__head{margin-bottom:64px;}
	.jm-voices__title,
	.jm-insights__title{font-size:42px;}
	.jm-voices__slide{width:560px;}
	.jm-voices__track{gap:64px;}
	.jm-voices__card{gap:32px;}
	.jm-voices__photo{width:100px;height:117px;}
	.jm-voices__name{font-size:26px;}
	.jm-voices__role{font-size:20px;}
	.jm-voices__quote p{font-size:19px;}
	.jm-voices__rule{margin:80px 0;}
	.jm-insights__grid{grid-template-columns:repeat(2, minmax(0, 1fr));gap:48px 24px;}
	.jm-insights__media{height:240px;}
	.jm-insights__card-title{font-size:20px;}
	.jm-career__stage{--shift:180px;}
	.jm-career__title{font-size:56px;}
	.jm-career__text{margin-top:24px;font-size:19px;}
	.jm-career__btn{margin-top:32px;}
	.jm-contact{flex-direction:column;gap:0;min-height:0;}
	.jm-contact__media{flex:none;height:420px;}
	.jm-contact__body{max-width:none;padding:56px var(--jm-gutter) 64px;}
	.jm-contact__title{font-size:44px;}
	.jm-contact__text,
	.jm-contact__link{font-size:19px;}
}
@media (max-width:767px){
	.jm-banner{min-height:600px;}
	.jm-banner__title{font-size:44px;line-height:1.12;}
	.jm-banner__tag{font-size:15px;padding:7px 18px;}
	.jm-banner__text{font-size:16px;}
	.jm-banner__copy{gap:22px;}
	.jm-banner__inner{gap:34px;}
	.jm-banner__actions{gap:14px;}
	.jm-banner__btn{padding:11px 20px;font-size:15px;}
	.jm-intro{--jm-pw:96px;--jm-ph:172px;}
	.jm-caps{min-height:640px;padding-bottom:40px;}
	.jm-caps__title{font-size:34px;}
	.jm-caps__head{margin-bottom:32px;}
	.jm-caps__track{gap:16px;}
	.jm-caps__card{width:min(78vw,300px);row-gap:14px;}
	.jm-caps__card .jm-caps__desc{margin-top:-14px;}
	.jm-caps__arrow{width:36px;height:36px;}
	.jm-caps__arrow svg{width:18px;height:18px;}
	.jm-serve{padding:60px 0;}
	.jm-serve__title{font-size:34px;}
	.jm-serve__text{font-size:17px;}
	.jm-serve__card{padding:22px;gap:12px;border-radius:14px;}
	.jm-serve__card-title{font-size:24px;}
	.jm-serve__card-text{font-size:16px;}
	.jm-serve__icon{width:36px;height:36px;}
	.jm-serv{--jm-step-h:70vh;}
	.jm-serv__inner{bottom:40px;}
	.jm-serv__title{font-size:30px;}
	.jm-serv__text{font-size:16px;}
	.jm-serv__tag{font-size:14px;padding:9px 16px;gap:10px;}
	.jm-serv__tag img,.jm-serv__tag svg{width:20px;height:20px;}
	.jm-serv__head{gap:18px;}
	.jm-serv__btn{font-size:15px;padding:11px 16px 11px 20px;}
	.jm-serv__line{height:6px;}
	.jm-scale{height:180vh;}
	.jm-scale__title{font-size:30px;}
	.jm-scale__text{font-size:16px;}
	.jm-scale__logo{width:110px;}
	.jm-scale__item{width:clamp(64px, 22vw, 110px);}
	.jm-promise{padding:56px 0;}
	.jm-promise__inner{gap:44px;}
	.jm-promise__title{font-size:30px;}
	.jm-promise__values,
	.jm-promise__stats{flex-direction:column;gap:28px;}
	.jm-promise__value,
	.jm-promise__stat{flex:1 1 auto;width:100%;}
	.jm-promise__stat{gap:12px;}
	.jm-promise__value-title{font-size:24px;}
	.jm-promise__value-text{font-size:16px;}
	.jm-promise__stat-num{font-size:38px;}
	.jm-promise__stat-label{font-size:18px;}
	.jm-promise__stat-note{font-size:16px;}
	.jm-feat{padding:60px 0 44px;}
	.jm-feat__inner{gap:44px;}
	.jm-feat__head{gap:22px;}
	.jm-feat__eyebrow{font-size:18px;}
	.jm-feat__title{font-size:32px;}
	.jm-feat__btn{font-size:15px;padding:11px 20px;}
	.jm-feat__details{flex-direction:column;gap:32px;}
	.jm-feat__item{flex:1 1 auto;width:100%;gap:12px;}
	.jm-feat__icon{width:36px;height:36px;}
	.jm-feat__item-title{font-size:24px;}
	.jm-voices{padding:60px 0;}
	.jm-voices__head{margin-bottom:40px;gap:20px;}
	.jm-voices__title,
	.jm-insights__title{font-size:32px;}
	.jm-voices__arrow{width:44px;height:44px;padding:10px;}
	.jm-voices__slide{width:calc(100vw - (var(--jm-gutter) * 2) - 32px);}
	.jm-voices__track{gap:32px;}
	.jm-voices__card{gap:24px;}
	.jm-voices__person{gap:12px;}
	.jm-voices__photo{width:80px;height:94px;}
	.jm-voices__meta{gap:6px;}
	.jm-voices__name{font-size:22px;}
	.jm-voices__role{font-size:16px;}
	.jm-voices__mark{width:40px;height:29px;}
	.jm-voices__quote p{font-size:17px;line-height:1.35;}
	.jm-voices__rule{margin:56px 0;}
	.jm-insights__head{flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:28px;}
	.jm-insights__more{font-size:16px;}
	.jm-insights__grid{grid-template-columns:1fr;gap:40px;}
	.jm-insights__link{gap:16px;}
	.jm-insights__media{height:auto;aspect-ratio:424 / 260;}
	.jm-insights__card-title{font-size:19px;}
	.jm-career__stage{--shift:220px;}
	.jm-career__copy{padding-top:96px;}
	.jm-career__title{font-size:40px;}
	.jm-career__text{margin-top:20px;font-size:17px;line-height:1.35;}
	.jm-career__btn{margin-top:28px;font-size:15px;}
	.jm-contact__media{height:300px;}
	.jm-contact__body{padding:44px var(--jm-gutter) 52px;}
	.jm-contact__title{font-size:34px;}
	.jm-contact__text{margin-top:16px;font-size:17px;line-height:1.35;}
	.jm-contact__address{margin-top:24px;padding-top:24px;}
	.jm-contact__list{gap:14px;}
	.jm-contact__link{gap:12px;font-size:17px;}
	.jm-contact__icon{width:22px;height:22px;}
	.jm-contact__btn{margin-top:28px;font-size:15px;}
}
@media (max-width:479px){
	.jm-banner__title{font-size:36px;}
	.jm-banner__actions{width:100%;flex-direction:column;align-items:stretch;}
	.jm-caps__title{font-size:28px;}
	.jm-caps__card-title{font-size:22px;}
}

/* --------------------------------------------------------------------------
   9. REDUCED MOTION — show everything without movement
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
	.jm-intro{display:none;}
	.jm-banner .jm-anim{opacity:1 !important;transform:none !important;filter:none !important;}
	.jm-caps__track{transition:none;}
	.jm-caps__bg{transition:none;transform:none;}
	.jm-caps__bg.is-active,
	.jm-caps__card.is-active .jm-caps__rule i{animation:none;}
	.jm-caps__card.is-active .jm-caps__rule i{transform:scaleX(1);}
	.jm-caps__line > span{transition:none;}
	.jm-caps__card.is-active .jm-caps__line > span{transition-delay:0s;}
	.jm-reveal{opacity:1;transform:none;}
	.jm-feat__bg{transform:none;}
	.jm-feat__mask > span,
	.jm-feat__btn{opacity:1;transform:none;transition:background-color .25s ease;}
	.jm-voices__track{transition:none;}
	.jm-voices__arrow,
	.jm-insights__img,
	.jm-insights__more svg{transition:none;transform:none !important;}
	.jm-voices__arrow svg{transform:rotate(90deg);}
	.jm-career{height:auto;}
	.jm-career__stage{position:relative;}
	.jm-career__layer{transform:none;}
	.jm-career__char,
	.jm-career__text,
	.jm-career__btn{opacity:1;transform:none;filter:none;transition:background-color .25s ease;}
	.jm-contact__panel{transform:scaleX(1);transition:none;}
	.jm-contact__photo{clip-path:none;transition:none;}
}