/* =========================================================
   JULKLAPPSSPELET — HOMEPAGE PREMIUM 1.1
   Editorial warmth + interaction + dice identity
========================================================= */


/* ---------------------------------------------------------
   1. BREAK OUT OF GENERATEPRESS CONTENT CONSTRAINTS
--------------------------------------------------------- */

body.home .site,
body.home .site-content,
body.home .content-area,
body.home main.site-main {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

body.home .site-content {
	display: block;
}

body.home .content-area {
	float: none;
}

body.home #right-sidebar,
body.home #left-sidebar,
body.home .widget-area {
	display: none !important;
}

body.home .jks-home {
	width: 100vw;
	max-width: none;
	margin: 0;
}


/* ---------------------------------------------------------
   2. HEADER REFINEMENT
--------------------------------------------------------- */

body.home .jks-header {
	background: rgba(248,243,234,.96);
	border-bottom: 1px solid rgba(23,42,37,.11);
	position: relative;
	z-index: 50;
}

body.home .jks-header__inner {
	min-height: 82px;
}

body.home .jks-brand__name {
	letter-spacing: .145em;
}

body.home .jks-nav a {
	position: relative;
}

body.home .jks-nav > a:not(.jks-nav__play)::after {
	background: var(--jks-wine);
	bottom: -.45rem;
	content: "";
	height: 1px;
	left: 0;
	position: absolute;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 260ms var(--jks-ease);
	width: 100%;
}

body.home .jks-nav > a:not(.jks-nav__play):hover::after {
	transform: scaleX(1);
	transform-origin: left;
}

body.home .jks-nav__play {
	transition:
		background-color 200ms var(--jks-ease),
		transform 200ms var(--jks-ease);
}

body.home .jks-nav__play:hover {
	transform: translateY(-2px);
}


/* ---------------------------------------------------------
   3. FULL BLEED + RHYTHM
--------------------------------------------------------- */

.jks-home section {
	position: relative;
}

.jks-home .jks-section {
	padding-bottom: clamp(5.5rem, 9vw, 9rem);
	padding-top: clamp(5.5rem, 9vw, 9rem);
}

.jks-home .jks-eyebrow {
	font-size: .67rem;
	font-weight: 800;
	letter-spacing: .18em;
	margin-bottom: 1.25rem;
	text-transform: uppercase;
}


/* ---------------------------------------------------------
   4. DICE DNA
--------------------------------------------------------- */

.jks-dice-mark {
	display: inline-grid;
	gap: 4px;
	grid-template-columns: repeat(3, 4px);
	grid-template-rows: repeat(3, 4px);
	height: 20px;
	margin-bottom: 1.2rem;
	width: 20px;
}

.jks-dice-mark i {
	background: currentColor;
	border-radius: 50%;
	height: 4px;
	opacity: 0;
	width: 4px;
}

.jks-dice-mark--five i:nth-child(1),
.jks-dice-mark--five i:nth-child(3),
.jks-dice-mark--five i:nth-child(5),
.jks-dice-mark--five i:nth-child(7),
.jks-dice-mark--five i:nth-child(9) {
	opacity: 1;
}

.jks-dice-mark--three i:nth-child(1),
.jks-dice-mark--three i:nth-child(5),
.jks-dice-mark--three i:nth-child(9) {
	opacity: 1;
}

.jks-dice-mark--four i:nth-child(1),
.jks-dice-mark--four i:nth-child(3),
.jks-dice-mark--four i:nth-child(7),
.jks-dice-mark--four i:nth-child(9) {
	opacity: 1;
}


/* ---------------------------------------------------------
   5. HERO POLISH
--------------------------------------------------------- */

.jks-hero {
	isolation: isolate;
}

.jks-hero::after {
	background:
		linear-gradient(
			90deg,
			rgba(247,241,231,.09),
			transparent 32%
		);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 1;
}

.jks-hero h1 {
	letter-spacing: -.038em;
	line-height: .94;
	text-wrap: balance;
}

.jks-hero__content > p:not(.jks-hero__alias) {
	line-height: 1.65;
}

.jks-hero__actions .jks-button {
	box-shadow: 0 14px 40px rgba(0,0,0,.11);
}

.jks-hero__textlink {
	text-underline-offset: 5px;
}

.jks-hero__textlink:hover {
	text-decoration-color: var(--jks-champagne);
}


/* ---------------------------------------------------------
   6. NEED CARDS — LESS "CARD UI", MORE EDITORIAL
--------------------------------------------------------- */

.jks-need {
	overflow: hidden;
}

.jks-need::before {
	background: var(--jks-wine);
	content: "";
	height: 3px;
	left: 0;
	position: absolute;
	right: 100%;
	top: 0;
	transition: right 420ms var(--jks-ease);
}

.jks-need:hover::before {
	right: 0;
}

.jks-need__arrow {
	transition: transform 220ms var(--jks-ease);
}

.jks-need:hover .jks-need__arrow {
	transform: translateX(6px);
}


/* ---------------------------------------------------------
   7. HOW — PROCESS LINE
--------------------------------------------------------- */

.jks-how__steps {
	position: relative;
}

.jks-how__steps::before {
	background: var(--jks-wine);
	content: "";
	height: 1px;
	left: 0;
	position: absolute;
	top: -1px;
	transform: scaleX(.08);
	transform-origin: left;
	transition: transform 1200ms cubic-bezier(.22,.61,.36,1);
	width: 100%;
}

.jks-how__steps.is-visible::before {
	transform: scaleX(1);
}

.jks-how__dots {
	transition:
		letter-spacing 450ms var(--jks-ease),
		transform 450ms var(--jks-ease);
}

.jks-how__steps article:hover .jks-how__dots {
	letter-spacing: .32em;
	transform: translateY(-2px);
}


/* ---------------------------------------------------------
   8. IMAGE SLOTS — MAKE PLACEHOLDERS FEEL INTENTIONAL
--------------------------------------------------------- */

.jks-image-slot {
	background:
		radial-gradient(
			circle at 72% 34%,
			rgba(204,185,150,.23),
			transparent 28%
		),
		linear-gradient(
			135deg,
			rgba(20,48,40,.22),
			rgba(116,45,56,.06) 56%,
			rgba(204,185,150,.14)
		),
		var(--jks-cream-deep);
}

.jks-image-slot::after {
	background:
		linear-gradient(
			115deg,
			transparent 25%,
			rgba(255,255,255,.055) 46%,
			transparent 68%
		);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.jks-image-slot__label {
	position: relative;
	z-index: 3;
}


/* ---------------------------------------------------------
   9. STEAL FACTOR — SIGNATURE MODULE
--------------------------------------------------------- */

.jks-score-card {
	background: rgba(255,255,255,.025);
	box-shadow: 0 30px 80px rgba(30,11,15,.11);
	position: relative;
}

.jks-score-card::before {
	border-left: 1px solid var(--jks-champagne);
	border-top: 1px solid var(--jks-champagne);
	content: "";
	height: 26px;
	left: -1px;
	position: absolute;
	top: -1px;
	width: 26px;
}

.jks-score-card__meter span {
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 400ms var(--jks-ease);
}

.jks-score-card.is-visible .jks-score-card__meter span:nth-child(1) {
	transition-delay: 50ms;
}

.jks-score-card.is-visible .jks-score-card__meter span:nth-child(2) {
	transition-delay: 100ms;
}

.jks-score-card.is-visible .jks-score-card__meter span:nth-child(3) {
	transition-delay: 150ms;
}

.jks-score-card.is-visible .jks-score-card__meter span:nth-child(4) {
	transition-delay: 200ms;
}

.jks-score-card.is-visible .jks-score-card__meter span:nth-child(5) {
	transition-delay: 250ms;
}

.jks-score-card.is-visible .jks-score-card__meter span:nth-child(6) {
	transition-delay: 300ms;
}

.jks-score-card.is-visible .jks-score-card__meter span:nth-child(7) {
	transition-delay: 350ms;
}

.jks-score-card.is-visible .jks-score-card__meter span:nth-child(8) {
	transition-delay: 400ms;
}

.jks-score-card.is-visible .jks-score-card__meter span:nth-child(9) {
	transition-delay: 450ms;
}

.jks-score-card.is-visible .jks-score-card__meter span {
	transform: scaleX(1);
}


/* ---------------------------------------------------------
   10. BUDGETS
--------------------------------------------------------- */

.jks-budgets a {
	position: relative;
	transition:
		background-color 220ms var(--jks-ease),
		transform 220ms var(--jks-ease);
}

.jks-budgets a::after {
	background: var(--jks-wine);
	bottom: 0;
	content: "";
	height: 3px;
	left: 50%;
	position: absolute;
	right: 50%;
	transition:
		left 250ms var(--jks-ease),
		right 250ms var(--jks-ease);
}

.jks-budgets a:hover::after {
	left: 0;
	right: 0;
}


/* ---------------------------------------------------------
   11. FAQ
--------------------------------------------------------- */

.jks-questions details {
	transition: background-color 220ms var(--jks-ease);
}

.jks-questions details:hover {
	background: rgba(255,255,255,.2);
}

.jks-questions summary {
	transition: padding-left 220ms var(--jks-ease);
}

.jks-questions details:hover summary {
	padding-left: .5rem;
}


/* ---------------------------------------------------------
   12. FINAL — FIX CONTRAST
--------------------------------------------------------- */

.jks-final .jks-eyebrow {
	color: var(--jks-champagne) !important;
	text-shadow: 0 1px 12px rgba(0,0,0,.15);
}

.jks-final h2 {
	letter-spacing: -.03em;
	text-wrap: balance;
}

.jks-final__content > p {
	color: rgba(247,241,231,.74);
}


/* ---------------------------------------------------------
   13. SCROLL REVEAL
--------------------------------------------------------- */

html.jks-motion-ready .jks-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition:
		opacity 760ms cubic-bezier(.22,.61,.36,1),
		transform 760ms cubic-bezier(.22,.61,.36,1);
}

html.jks-motion-ready .jks-reveal.jks-reveal--soft {
	transform: translateY(14px);
}

html.jks-motion-ready .jks-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

html.jks-motion-ready .jks-reveal[data-delay="1"] {
	transition-delay: 90ms;
}

html.jks-motion-ready .jks-reveal[data-delay="2"] {
	transition-delay: 180ms;
}

html.jks-motion-ready .jks-reveal[data-delay="3"] {
	transition-delay: 270ms;
}


/* ---------------------------------------------------------
   14. FOCUS / KEYBOARD — PREMIUM ALSO MEANS ACCESSIBLE
--------------------------------------------------------- */

.jks-home a:focus-visible,
.jks-home button:focus-visible,
.jks-header a:focus-visible,
.jks-header button:focus-visible {
	outline: 2px solid var(--jks-champagne);
	outline-offset: 4px;
}


/* ---------------------------------------------------------
   15. MOBILE REFINEMENT
--------------------------------------------------------- */

@media (max-width: 768px) {

	.jks-home .jks-section {
		padding-bottom: 5rem;
		padding-top: 5rem;
	}

	.jks-hero h1 {
		letter-spacing: -.045em;
		line-height: .96;
	}

	.jks-need {
		min-height: 210px;
	}

	.jks-planner__field {
		min-height: auto;
	}

	.jks-score-card {
		box-shadow: none;
	}

	.jks-questions summary {
		line-height: 1.15;
	}

}


/* ---------------------------------------------------------
   16. REDUCED MOTION
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	html.jks-motion-ready .jks-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.jks-how__steps::before,
	.jks-score-card__meter span,
	.jks-need::before,
	.jks-nav a::after {
		transition: none !important;
	}

}


/* =========================================================
   PLANNER 1.1 — EDITORIAL TOOL
========================================================= */

.jks-planner {
	overflow: hidden;
}

.jks-planner .jks-wrap {
	max-width: 1180px;
}

.jks-planner__editorial {
	align-items: stretch;
	display: grid;
	gap: clamp(3.5rem, 8vw, 8rem);
	grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
	margin-bottom: clamp(4rem, 8vw, 7rem);
}

.jks-planner__lead {
	align-self: center;
	max-width: 660px;
}

.jks-planner__lead h2 {
	color: var(--jks-cream);
	font-size: clamp(3.4rem, 6.5vw, 6.1rem);
	letter-spacing: -.045em;
	line-height: .92;
	margin: 0;
	max-width: 760px;
}

.jks-planner__promise {
	color: rgba(247,241,231,.78);
	font-size: 1.02rem;
	line-height: 1.7;
	margin: 2rem 0 0;
	max-width: 480px;
}

.jks-planner__live {
	align-items: center;
	color: var(--jks-champagne);
	display: flex;
	flex-wrap: wrap;
	font-size: .68rem;
	font-weight: 750;
	gap: .75rem;
	letter-spacing: .11em;
	margin-top: 2rem;
	text-transform: uppercase;
}

.jks-planner__live i {
	background: rgba(247,241,231,.35);
	border-radius: 50%;
	height: 3px;
	width: 3px;
}

.jks-image-slot--planner {
	aspect-ratio: 4 / 5;
	min-height: 390px;
}

.jks-planner__visual {
	box-shadow: 0 28px 70px rgba(0,0,0,.12);
	position: relative;
}

.jks-planner__visual::before {
	border-color: rgba(247,241,231,.25);
}

.jks-planner__visual .jks-image-slot__label {
	color: rgba(247,241,231,.58);
}

.jks-planner__visual-note {
	align-items: center;
	background: rgba(13,29,24,.82);
	bottom: 18px;
	color: var(--jks-cream);
	display: flex;
	gap: .7rem;
	left: 18px;
	padding: .7rem .9rem;
	position: absolute;
	z-index: 4;
}

.jks-planner__visual-note > span {
	color: var(--jks-champagne);
	font-size: .55rem;
}

.jks-planner__visual-note small {
	font-family: var(--jks-serif);
	font-size: .82rem;
}


/* TOOL */

.jks-planner__tool {
	border-top: 1px solid rgba(247,241,231,.28);
	margin: 0 auto;
	max-width: 1080px;
}

.jks-planner__field {
	align-items: center;
	border-bottom: 1px solid rgba(247,241,231,.22);
	display: grid;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	grid-template-columns: 42px minmax(230px, .85fr) minmax(360px, 1.15fr);
	min-height: 138px;
	padding: 1.6rem 0;
}

.jks-planner__question {
	display: flex;
	flex-direction: column;
	gap: .45rem;
}

.jks-planner__question label,
.jks-planner__question .jks-planner__label {
	color: var(--jks-cream);
	font-family: var(--jks-serif);
	font-size: clamp(1.45rem, 2.1vw, 1.9rem);
	line-height: 1.08;
}

.jks-planner__question small {
	color: rgba(247,241,231,.5);
	font-size: .72rem;
	line-height: 1.45;
	max-width: 260px;
}

.jks-planner__step {
	align-self: start;
	color: var(--jks-champagne);
	font-size: .62rem;
	letter-spacing: .13em;
	padding-top: .5rem;
}

.jks-counter {
	justify-self: start;
}

.jks-counter button,
.jks-choice-group button {
	cursor: pointer;
	transition:
		background-color 180ms var(--jks-ease),
		border-color 180ms var(--jks-ease),
		color 180ms var(--jks-ease),
		transform 180ms var(--jks-ease);
}

.jks-counter button:hover,
.jks-choice-group button:not(.is-selected):hover {
	border-color: rgba(247,241,231,.65);
	transform: translateY(-1px);
}

.jks-choice-group button.is-selected {
	box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

.jks-planner__finish {
	align-items: center;
	display: grid;
	gap: 2rem;
	grid-template-columns: 1fr auto;
	padding-top: 2.2rem;
}

.jks-planner__finish-summary {
	display: flex;
	flex-direction: column;
	gap: .45rem;
}

.jks-planner__finish-summary > span {
	color: var(--jks-champagne);
	font-size: .59rem;
	font-weight: 800;
	letter-spacing: .15em;
}

.jks-planner__finish-summary strong {
	color: var(--jks-cream);
	font-family: var(--jks-serif);
	font-size: clamp(1.2rem, 2vw, 1.55rem);
	font-weight: 400;
}

.jks-planner__finish-action {
	align-items: center;
	display: flex;
	gap: 1.3rem;
}

.jks-planner__finish-action > small {
	color: rgba(247,241,231,.5);
	font-size: .7rem;
}


/* Hide obsolete 1.0 intro if browser ever receives cached markup */
.jks-planner > .jks-wrap > .jks-planner__intro {
	display: none;
}


@media (max-width: 900px) {

	.jks-planner__editorial {
		gap: 3rem;
		grid-template-columns: minmax(0, 1fr) 230px;
	}

	.jks-planner__field {
		grid-template-columns: 36px minmax(190px, .75fr) minmax(300px, 1.25fr);
	}

}


@media (max-width: 768px) {

	.jks-planner__editorial {
		display: flex;
		flex-direction: column;
		margin-bottom: 3.5rem;
	}

	.jks-planner__lead h2 {
		font-size: clamp(3.25rem, 14vw, 4.6rem);
	}

	.jks-planner__promise {
		font-size: .96rem;
		margin-top: 1.5rem;
	}

	.jks-image-slot--planner {
		aspect-ratio: 16 / 10;
		min-height: 0;
		width: 100%;
	}

	.jks-planner__field {
		align-items: start;
		gap: .8rem 1rem;
		grid-template-columns: 28px 1fr;
		min-height: 0;
		padding: 1.8rem 0;
	}

	.jks-planner__step {
		grid-column: 1;
		grid-row: 1;
	}

	.jks-planner__question {
		grid-column: 2;
		grid-row: 1;
	}

	.jks-planner__field > .jks-counter,
	.jks-planner__field > .jks-choice-group {
		grid-column: 2;
		grid-row: 2;
		margin-top: .8rem;
	}

	.jks-planner__question small {
		max-width: 100%;
	}

	.jks-planner__finish {
		align-items: start;
		grid-template-columns: 1fr;
	}

	.jks-planner__finish-action {
		align-items: flex-start;
		flex-direction: column;
	}

}


/* =========================================================
   PLANNER 1.2 — COMPOSITION POLISH
   Final override after Planner 1.1
========================================================= */

/*
 * The planner should feel like one composed editorial
 * instrument — not a heading floating above a form.
 */

.jks-planner {
	padding-top: clamp(5.5rem, 8vw, 8rem);
	padding-bottom: clamp(5.5rem, 8vw, 8rem);
}

.jks-planner .jks-wrap {
	max-width: 1200px;
}


/* ---------------------------------------------------------
   TOP COMPOSITION
--------------------------------------------------------- */

.jks-planner__editorial {
	align-items: center;
	gap: clamp(4rem, 9vw, 8.5rem);
	grid-template-columns: minmax(0, 1.25fr) minmax(280px, 380px);
	margin-bottom: clamp(4.5rem, 7vw, 6.5rem);
}

.jks-planner__lead {
	align-self: center;
	max-width: 650px;
}

.jks-planner__lead .jks-eyebrow {
	color: var(--jks-champagne);
	display: block;
	margin-bottom: 1.45rem;
}


/*
 * IMPORTANT:
 * Previous .92 line-height caused the descenders/next content
 * to visually collide. Give the display type room to breathe.
 */
.jks-planner__lead h2 {
	color: var(--jks-cream);
	font-size: clamp(3.8rem, 5.7vw, 5.65rem);
	letter-spacing: -.045em;
	line-height: 1.01;
	margin: 0;
	max-width: 620px;
	text-wrap: balance;
}

.jks-planner__promise {
	color: rgba(247,241,231,.82);
	display: block;
	font-size: clamp(.98rem, 1.2vw, 1.08rem);
	line-height: 1.65;
	margin: 1.65rem 0 0;
	max-width: 450px;
}

.jks-planner__live {
	margin-top: 2.2rem;
}


/* ---------------------------------------------------------
   IMAGE 6
--------------------------------------------------------- */

.jks-image-slot--planner {
	aspect-ratio: 4 / 5;
	min-height: 0;
	width: 100%;
}

.jks-planner__visual {
	align-self: center;
	max-width: 360px;
	justify-self: end;
	width: 100%;
}


/* ---------------------------------------------------------
   TOOL
--------------------------------------------------------- */

.jks-planner__tool {
	border-top: 1px solid rgba(247,241,231,.27);
	max-width: 1200px;
	width: 100%;
}

.jks-planner__field {
	gap: clamp(1.5rem, 4vw, 4rem);
	grid-template-columns:
		48px
		minmax(280px, .95fr)
		minmax(390px, 1.05fr);
	min-height: 142px;
	padding: 1.8rem 0;
}

.jks-planner__step {
	padding-top: .35rem;
}

.jks-planner__question {
	gap: .55rem;
}

.jks-planner__question label,
.jks-planner__question .jks-planner__label {
	font-size: clamp(1.55rem, 2vw, 1.9rem);
}

.jks-planner__question small {
	color: rgba(247,241,231,.55);
	font-size: .72rem;
	max-width: 300px;
}


/* Make controls read as one deliberate horizontal system */

.jks-counter,
.jks-choice-group {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: .55rem;
}

.jks-counter {
	gap: 1rem;
}

.jks-counter output {
	min-width: 2.2rem;
	text-align: center;
}

.jks-counter button {
	height: 48px;
	width: 48px;
}

.jks-choice-group button {
	min-height: 46px;
	padding-left: 1rem;
	padding-right: 1rem;
}


/* ---------------------------------------------------------
   RESULT / CTA
--------------------------------------------------------- */

.jks-planner__finish {
	border-bottom: 0;
	gap: 3rem;
	grid-template-columns: minmax(0, 1fr) auto;
	padding: 2.5rem 0 0;
}

.jks-planner__finish-summary {
	position: relative;
	padding-left: 48px;
}

/* Small dice-dot signature beside result */
.jks-planner__finish-summary::before {
	color: var(--jks-champagne);
	content: "••\A••\A••";
	font-size: .72rem;
	left: 0;
	letter-spacing: .35em;
	line-height: .72;
	position: absolute;
	top: .15rem;
	white-space: pre;
}

.jks-planner__finish-summary > span {
	margin-bottom: .15rem;
}

.jks-planner__finish-summary strong {
	font-size: clamp(1.35rem, 2.2vw, 1.8rem);
	line-height: 1.25;
}

.jks-planner__finish-action {
	align-items: flex-start;
}

.jks-planner__finish-action .jks-button {
	min-height: 58px;
	padding-left: 1.6rem;
	padding-right: 1.6rem;
}


/* ---------------------------------------------------------
   TABLET
--------------------------------------------------------- */

@media (max-width: 1000px) {

	.jks-planner__editorial {
		gap: 3.5rem;
		grid-template-columns: minmax(0, 1fr) 290px;
	}

	.jks-planner__lead h2 {
		font-size: clamp(3.5rem, 6.5vw, 4.8rem);
	}

	.jks-planner__field {
		grid-template-columns:
			38px
			minmax(230px, .85fr)
			minmax(330px, 1.15fr);
	}

}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 768px) {

	.jks-planner {
		padding-top: 4.5rem;
		padding-bottom: 4.5rem;
	}

	.jks-planner__editorial {
		gap: 2.5rem;
		margin-bottom: 3.5rem;
	}

	.jks-planner__lead h2 {
		font-size: clamp(3.1rem, 14vw, 4.25rem);
		line-height: .99;
		max-width: 100%;
	}

	.jks-planner__promise {
		margin-top: 1.35rem;
		max-width: 34rem;
	}

	.jks-planner__live {
		gap: .55rem;
		margin-top: 1.7rem;
	}

	.jks-planner__visual {
		max-width: none;
	}

	.jks-image-slot--planner {
		aspect-ratio: 16 / 10;
	}

	.jks-planner__field {
		grid-template-columns: 28px minmax(0, 1fr);
		padding: 1.8rem 0;
	}

	.jks-planner__finish {
		gap: 2rem;
		grid-template-columns: 1fr;
	}

	.jks-planner__finish-summary {
		padding-left: 42px;
	}

	.jks-planner__finish-action {
		gap: .9rem;
	}

}


/* ---------------------------------------------------------
   SMALL MOBILE
--------------------------------------------------------- */

@media (max-width: 480px) {

	.jks-planner__lead h2 {
		font-size: clamp(2.8rem, 14.5vw, 3.65rem);
	}

	.jks-choice-group {
		gap: .45rem;
	}

	.jks-choice-group button {
		font-size: .72rem;
		min-height: 42px;
		padding-left: .75rem;
		padding-right: .75rem;
	}

	.jks-planner__finish-action .jks-button {
		justify-content: space-between;
		width: 100%;
	}

}


/* =========================================================
   TYPOGRAPHY / WRAPPING PASS 1.0
   Final overrides
========================================================= */

/*
 * Important display headings:
 * balance line lengths rather than allowing ugly final words.
 */
.jks-home h1,
.jks-home h2,
.jks-home h3,
.jks-home .jks-planner__label,
.jks-home .jks-planner__question label {
	text-wrap: balance;
}


/*
 * Body copy:
 * browsers supporting pretty wrapping get better last lines.
 */
.jks-home p,
.jks-home li,
.jks-home small {
	text-wrap: pretty;
}


/* =========================================================
   PLANNER — FIX HEADING / INTRO COLLISION
========================================================= */

.jks-planner__lead h2 {
	font-size: clamp(3.65rem, 5.35vw, 5.35rem);
	line-height: 1.02;
	margin: 0;
	max-width: 650px;
}

/*
 * Use padding instead of relying only on collapsing margins.
 * This guarantees visual separation from the display heading.
 */
.jks-planner__promise {
	margin: 0;
	padding-top: 2rem;
	max-width: 470px;
}


/*
 * Give the live configuration its own breathing room.
 */
.jks-planner__live {
	margin-top: 2.15rem;
}


/* =========================================================
   DESKTOP COMPOSITION
========================================================= */

@media (min-width: 1001px) {

	.jks-planner__editorial {
		grid-template-columns:
			minmax(0, 1.3fr)
			minmax(300px, 360px);
	}

	.jks-planner__lead {
		max-width: 680px;
	}

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

	.jks-planner__lead h2 {
		font-size: clamp(3.4rem, 7vw, 4.65rem);
		line-height: 1.02;
	}

	.jks-planner__promise {
		padding-top: 1.75rem;
	}

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

	.jks-planner__lead h2 {
		font-size: clamp(3rem, 13vw, 4.1rem);
		line-height: 1.01;
		max-width: 11ch;
	}

	.jks-planner__promise {
		font-size: .96rem;
		line-height: 1.65;
		padding-top: 1.55rem;
	}

	/*
	 * On mobile we don't force desktop editorial line breaks
	 * to create awkward compositions.
	 */
	.jks-planner__lead h2 br {
		display: none;
	}

	.jks-planner__question label,
	.jks-planner__question .jks-planner__label {
		text-wrap: balance;
	}

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

	.jks-planner__lead h2 {
		font-size: clamp(2.75rem, 13.5vw, 3.5rem);
		line-height: 1.02;
		max-width: 10.5ch;
	}

	.jks-planner__promise {
		padding-top: 1.4rem;
	}

	/*
	 * Keep short configuration values together where possible.
	 */
	.jks-planner__live span {
		white-space: nowrap;
	}

	/*
	 * Buttons may wrap internally only when genuinely needed.
	 */
	.jks-choice-group button {
		white-space: nowrap;
	}

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 370px) {

	.jks-planner__lead h2 {
		font-size: 2.65rem;
		max-width: 10ch;
	}

	.jks-planner__live {
		align-items: flex-start;
		row-gap: .7rem;
	}

	/*
	 * Allow choice buttons to form clean multiple rows instead
	 * of squeezing their labels.
	 */
	.jks-choice-group {
		align-items: stretch;
	}

}


/* =========================================================
   HERO IMAGE 1 — REAL PHOTOGRAPH
========================================================= */

.jks-hero__photo {
	height: 100%;
	inset: 0;
	margin: 0;
	overflow: hidden;
	position: absolute;
	width: 100%;
	z-index: 0;
}

.jks-hero__photo img {
	display: block;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	width: 100%;
}


/*
 * Preserve headline readability while allowing the photograph
 * to remain visible and atmospheric.
 */
.jks-hero__photo::after {
	background:
		linear-gradient(
			90deg,
			rgba(12,31,25,.91) 0%,
			rgba(12,31,25,.78) 28%,
			rgba(12,31,25,.38) 54%,
			rgba(12,31,25,.08) 78%,
			rgba(12,31,25,0) 100%
		),
		linear-gradient(
			0deg,
			rgba(8,22,18,.28) 0%,
			rgba(8,22,18,0) 42%
		);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}


/*
 * Hero content must always sit above image and readability
 * treatment.
 */
.jks-hero__content {
	position: relative;
	z-index: 2;
}


/* Tablet */
@media (max-width: 900px) {

	.jks-hero__photo img {
		object-position: 58% center;
	}

	.jks-hero__photo::after {
		background:
			linear-gradient(
				90deg,
				rgba(12,31,25,.92) 0%,
				rgba(12,31,25,.76) 45%,
				rgba(12,31,25,.28) 78%,
				rgba(12,31,25,.08) 100%
			);
	}

}


/* Mobile */
@media (max-width: 600px) {

	.jks-hero__photo img {
		object-position: 63% center;
	}

	.jks-hero__photo::after {
		background:
			linear-gradient(
				90deg,
				rgba(12,31,25,.91) 0%,
				rgba(12,31,25,.67) 72%,
				rgba(12,31,25,.35) 100%
			),
			linear-gradient(
				0deg,
				rgba(8,22,18,.42) 0%,
				rgba(8,22,18,.05) 58%
			);
	}

}


/* =========================================================
   HERO IMAGE 1 — FINAL INTEGRATION
========================================================= */

.jks-hero {
	overflow: hidden;
	position: relative;
}

.jks-hero__media {
	inset: 0;
	overflow: hidden;
	position: absolute;
	z-index: 0;
}

.jks-hero__media .jks-hero__image {
	display: block;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center center;
	width: 100%;
}


/*
 * Existing jks-hero__shade remains the single readability
 * treatment. Do not stack another pseudo-element gradient.
 */
.jks-hero__shade {
	background:
		linear-gradient(
			90deg,
			rgba(10,29,23,.91) 0%,
			rgba(10,29,23,.79) 28%,
			rgba(10,29,23,.48) 48%,
			rgba(10,29,23,.16) 70%,
			rgba(10,29,23,.04) 100%
		),
		linear-gradient(
			0deg,
			rgba(7,20,16,.24) 0%,
			rgba(7,20,16,0) 45%
		);
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 1;
}

.jks-hero__content {
	position: relative;
	z-index: 2;
}


/* TABLET */

@media (max-width: 900px) {

	.jks-hero__media .jks-hero__image {
		object-position: 58% center;
	}

	.jks-hero__shade {
		background:
			linear-gradient(
				90deg,
				rgba(10,29,23,.93) 0%,
				rgba(10,29,23,.79) 42%,
				rgba(10,29,23,.40) 72%,
				rgba(10,29,23,.15) 100%
			);
	}

}


/* MOBILE */

@media (max-width: 600px) {

	.jks-hero__media .jks-hero__image {
		object-position: 63% center;
	}

	.jks-hero__shade {
		background:
			linear-gradient(
				90deg,
				rgba(10,29,23,.92) 0%,
				rgba(10,29,23,.76) 55%,
				rgba(10,29,23,.42) 100%
			),
			linear-gradient(
				0deg,
				rgba(7,20,16,.38) 0%,
				rgba(7,20,16,.04) 62%
			);
	}

}


/* ==========================================================
   JKS HOMEPAGE BUTTON CONTRAST 0.1.47
   Component scoped.
   Prevents light CTA from inheriting light link colours.
   ========================================================== */

.jks-home .jks-button--light,
.jks-home .jks-button--light:link,
.jks-home .jks-button--light:visited {
    background: #f4efe6;
    color: #17362f;
}

.jks-home .jks-button--light:hover,
.jks-home .jks-button--light:focus,
.jks-home .jks-button--light:focus-visible {
    background: #ffffff;
    color: #102d27;
}

.jks-home .jks-button--light span,
.jks-home .jks-button--light:hover span,
.jks-home .jks-button--light:focus span {
    color: inherit;
}



/* ==========================================================
   JKS HOMEPAGE LIGHT TEXT LINKS 0.1.48

   Keeps editorial text links readable on dark sections.
   Buttons are intentionally NOT affected.
   ========================================================== */

.jks-home a:not(.jks-button) {
    transition:
        color .18s ease,
        opacity .18s ease,
        text-decoration-color .18s ease;
}

/*
 * Links which are explicitly rendered light inside the
 * homepage dark surfaces must stay light on interaction.
 */
.jks-home .jks-section--dark a:not(.jks-button),
.jks-home .jks-section--dark a:not(.jks-button):link,
.jks-home .jks-section--dark a:not(.jks-button):visited,
.jks-home .jks-dark a:not(.jks-button),
.jks-home .jks-dark a:not(.jks-button):link,
.jks-home .jks-dark a:not(.jks-button):visited {
    color: #f7f2e8;
}

.jks-home .jks-section--dark a:not(.jks-button):hover,
.jks-home .jks-section--dark a:not(.jks-button):focus,
.jks-home .jks-section--dark a:not(.jks-button):focus-visible,
.jks-home .jks-dark a:not(.jks-button):hover,
.jks-home .jks-dark a:not(.jks-button):focus,
.jks-home .jks-dark a:not(.jks-button):focus-visible {
    color: #ffffff;
    opacity: .82;
}



/* ==========================================================
   JKS HERO TEXT LINKS — EXACT COMPONENT FIX 0.1.49
   Homepage hero links only.
   ========================================================== */

.jks-home .jks-hero__textlink,
.jks-home .jks-hero__textlink:link,
.jks-home .jks-hero__textlink:visited {
    color: #f7f2e8 !important;
    opacity: 1 !important;
    text-decoration-color: rgba(247, 242, 232, .48);
}

.jks-home .jks-hero__textlink:hover,
.jks-home .jks-hero__textlink:focus,
.jks-home .jks-hero__textlink:focus-visible {
    color: #ffffff !important;
    opacity: 1 !important;
    text-decoration-color: #dfb66f !important;
}


/* ==========================================================
   JKS ACTUAL NEED CARD HOVER 0.1.56

   Real homepage component: .jks-need

   The existing ::before layer is the hover surface.
   Background and foreground are now synchronised.

   Homepage only.
   ========================================================== */

/*
 * Keep card content above the animated ::before surface.
 */
.jks-home .jks-need {
    position: relative;
    isolation: isolate;
}

.jks-home .jks-need::before {
    z-index: -1;
}

/*
 * Do not allow inherited link transitions to make text
 * temporarily disappear while the surface changes.
 */
.jks-home .jks-need,
.jks-home .jks-need *,
.jks-home .jks-need::before {
    transition-delay: 0s !important;
}

/*
 * Foreground changes at exactly the same speed as the
 * existing hover surface.
 */
.jks-home .jks-need h2,
.jks-home .jks-need h3,
.jks-home .jks-need p,
.jks-home .jks-need small,
.jks-home .jks-need span,
.jks-home .jks-need .jks-need__arrow {
    transition:
        color .18s ease,
        opacity .18s ease !important;
}

/*
 * Force ALL readable foreground elements light as soon as
 * the actual card enters hover/focus.
 */
.jks-home .jks-need:hover,
.jks-home .jks-need:focus,
.jks-home .jks-need:focus-visible,
.jks-home .jks-need:hover h2,
.jks-home .jks-need:hover h3,
.jks-home .jks-need:hover p,
.jks-home .jks-need:hover small,
.jks-home .jks-need:hover span,
.jks-home .jks-need:hover .jks-need__arrow,
.jks-home .jks-need:focus-visible h2,
.jks-home .jks-need:focus-visible h3,
.jks-home .jks-need:focus-visible p,
.jks-home .jks-need:focus-visible small,
.jks-home .jks-need:focus-visible span,
.jks-home .jks-need:focus-visible .jks-need__arrow {
    color: #f7f2e8 !important;
    opacity: 1 !important;
}

/*
 * Kill any conflicting generic link-hover colour on this
 * component specifically.
 */
.jks-home a.jks-need:hover,
.jks-home a.jks-need:focus,
.jks-home a.jks-need:focus-visible {
    color: #f7f2e8 !important;
}

/*
 * Keep the small decorative accent warm gold.
 */
.jks-home .jks-need:hover .jks-need__mark,
.jks-home .jks-need:focus-visible .jks-need__mark {
    color: #dfb66f !important;
    opacity: 1 !important;
}