/* Koloab Spotlight */

.koloab-bar__nav-btn--fx { position: relative; }
.koloab-fx-dot {
	display: inline-block;
	width: 5px;
	height: 5px;
	margin-right: 6px;
	border-radius: 50%;
	background: var(--klb-red, #444444);
	vertical-align: middle;
	animation: koloab-fx-pulse 2.4s ease-in-out infinite;
}
@keyframes koloab-fx-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: .45; transform: scale(.72); }
}

.koloab-fx {
	--fx-ease: cubic-bezier(.22,.61,.36,1);
	--fx-gutter: clamp(18px, 5vw, 64px);
	--fx-maxw: 1180px;
	background: var(--klb-white, #ffffff);
	padding-bottom: clamp(56px, 8vw, 112px);
}
.koloab-fx ::selection {
	background: var(--klb-red, #444444);
	color: #fff;
}
.koloab-fx :focus-visible {
	outline: 2px solid var(--klb-red, #444444);
	outline-offset: 3px;
	border-radius: 3px;
}

/* --- hero ------------------------------------------------------- */

.koloab-fx__hero {
	position: relative;
	min-height: min(78vh, 680px);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background-color: var(--klb-navy-900, #0b0b0b);
	background-size: cover;
	background-position: center;
	isolation: isolate;
}
.koloab-fx__hero--short  { min-height: min(58vh, 460px); }
.koloab-fx__hero--normal { min-height: min(78vh, 680px); }
.koloab-fx__hero--tall   { min-height: min(92vh, 880px); }

.koloab-fx__hero-media {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.koloab-fx__hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity .5s linear;
}
.koloab-fx__hero.is-loaded .koloab-fx__hero-media img {
	opacity: 1;
}

.koloab-fx__hero.has-parallax .koloab-fx__hero-media {
	inset: -12% 0 -12% 0;
	transform: translate3d(0, var(--fx-shift, 0%), 0);
	will-change: transform;
}
.koloab-fx__hero.has-parallax .koloab-fx__hero-inner {
	opacity: var(--fx-fade, 1);
}

.koloab-fx__hero-scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(to top, rgba(12,16,22,.92) 0%, rgba(12,16,22,.55) 38%, rgba(12,16,22,.12) 68%, rgba(12,16,22,.30) 100%),
		radial-gradient(120% 80% at 20% 100%, rgba(255,255,255,.08) 0%, transparent 60%);
}

.koloab-fx__hero-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding: clamp(30px, 6vw, 74px) var(--fx-gutter) clamp(34px, 6vw, 68px);
}

.koloab-fx__eyebrow,
.koloab-fx__title,
.koloab-fx__standfirst,
.koloab-fx__hero-actions {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .8s var(--fx-ease), transform .8s var(--fx-ease);
}
.koloab-fx__hero.is-in .koloab-fx__eyebrow       { opacity: 1; transform: none; transition-delay: .10s; }
.koloab-fx__hero.is-in .koloab-fx__title         { opacity: 1; transform: none; transition-delay: .20s; }
.koloab-fx__hero.is-in .koloab-fx__standfirst    { opacity: 1; transform: none; transition-delay: .32s; }
.koloab-fx__hero.is-in .koloab-fx__hero-actions  { opacity: 1; transform: none; transition-delay: .44s; }

.koloab-fx__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	margin-bottom: 16px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(255,255,255,.78);
}
.koloab-fx__eyebrow-rule {
	width: 34px;
	height: 2px;
	background: var(--klb-red, #444444);
	transform-origin: left center;
	animation: koloab-fx-rule 1s var(--fx-ease) .3s both;
}
@keyframes koloab-fx-rule {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

.koloab .koloab-fx .koloab-fx__hero-inner h1.koloab-fx__title,
.koloab-fx__title {
	margin: 0 0 14px !important;
	font-size: clamp(30px, 6.2vw, 66px) !important;
	line-height: 1.02 !important;
	font-weight: 900 !important;
	letter-spacing: -.028em !important;
	color: #fff !important;
	text-shadow: 0 2px 26px rgba(0,0,0,.34);
}
.koloab .koloab-fx .koloab-fx__standfirst,
.koloab-fx__standfirst {
	max-width: 46ch;
	margin: 0;
	font-size: clamp(14px, 1.9vw, 19px);
	line-height: 1.55;
	color: rgba(255,255,255,.86);
}

.koloab-fx__hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 11px;
	margin-top: clamp(20px, 3vw, 32px);
}
.koloab .koloab-fx__cta {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 12px 20px;
	border: 0;
	border-radius: 999px;
	background: var(--klb-red, #444444);
	color: #fff;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: .01em;
	box-shadow: 0 10px 26px -10px rgba(0,0,0,.55);
	transition: transform .32s var(--fx-ease), box-shadow .32s var(--fx-ease), background .2s linear;
}
.koloab .koloab-fx__cta:hover {
	transform: translateY(-2px);
	background: var(--klb-red-700, #353535);
	box-shadow: 0 16px 34px -12px rgba(0,0,0,.65);
	color: #fff;
}
.koloab .koloab-fx__cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.koloab .koloab-fx__cta svg { transition: transform .32s var(--fx-ease); flex: none; }
.koloab .koloab-fx__cta:hover svg { transform: translateY(2px); }

.koloab-fx__hero-credit {
	position: absolute;
	right: var(--fx-gutter);
	bottom: 14px;
	z-index: 2;
	font-size: 10.5px;
	letter-spacing: .10em;
	text-transform: uppercase;
	color: rgba(255,255,255,.42);
}

/* --- block frame ------------------------------------------------ */

.koloab-fx [data-koloab-fx-reveal] {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .75s var(--fx-ease), transform .75s var(--fx-ease);
}
.koloab-fx [data-koloab-fx-reveal].is-in { opacity: 1; transform: none; }

.koloab-fx-b {
	position: relative;
	--fx-space: clamp(30px, 5vw, 64px);
	padding-top: var(--fx-space);
}
.koloab-fx-b__inner {
	max-width: var(--fx-maxw);
	margin: 0 auto;
	padding: 0 var(--fx-gutter);
}

.koloab-fx-b--sp-none   { --fx-space: 0px; }
.koloab-fx-b--sp-small  { --fx-space: clamp(14px, 2.4vw, 28px); }
.koloab-fx-b--sp-normal { --fx-space: clamp(30px, 5vw, 64px); }
.koloab-fx-b--sp-large  { --fx-space: clamp(46px, 7.5vw, 96px); }

.koloab-fx-b--bg-grey,
.koloab-fx-b--bg-navy {
	--fx-inset: clamp(26px, 4vw, 52px);
	margin-top: var(--fx-space);
	padding-top: var(--fx-inset);
	padding-bottom: var(--fx-inset);
}

/* The space above a block is margin, so it shows the page through it. Between
   two blocks of the same colour that reads as a white stripe; the gap becomes
   padding instead, so the run of colour is continuous and nothing moves. */
.koloab-fx-b--bg-grey + .koloab-fx-b--bg-grey,
.koloab-fx-b--bg-navy + .koloab-fx-b--bg-navy {
	margin-top: 0;
	padding-top: calc(var(--fx-space) + var(--fx-inset));
}

.koloab-fx-b:last-child { padding-bottom: clamp(16px, 2.5vw, 30px); }
.koloab-fx-b--bg-grey:last-child,
.koloab-fx-b--bg-navy:last-child { padding-bottom: var(--fx-inset); }

.koloab-fx-b.is-first { padding-top: clamp(24px, 4vw, 52px); }
.koloab-fx-b--bg-grey.is-first,
.koloab-fx-b--bg-navy.is-first { margin-top: 0; padding-top: var(--fx-inset); }

.koloab-fx-b--w-wide { --fx-maxw: 1480px; }
.koloab-fx-b--w-full .koloab-fx-b__inner {
	max-width: none;
	padding: 0;
}

.koloab-fx-b--bg-grey { background: var(--klb-grey-50, #f5f6f8); }
.koloab-fx-b--bg-navy { background: var(--klb-navy-900, #0b0b0b); }

.koloab-fx-b--bg-navy .koloab-fx__kicker { color: rgba(255,255,255,.62); }
.koloab-fx-b--bg-navy .koloab-fx__intro-text,
.koloab-fx-b--bg-navy .koloab-fx__split-text,
.koloab-fx-b--bg-navy .koloab-fx__mstone-body,
.koloab-fx-b--bg-navy .koloab-fx__figure figcaption,
.koloab-fx-b--bg-navy .koloab-fx__compare-cap span { color: rgba(255,255,255,.78); }
.koloab-fx-b--bg-navy .koloab-fx__compare-cap strong { color: #fff; }
.koloab-fx-b--bg-navy .koloab-fx__foot { border-top-color: rgba(255,255,255,.16); }
.koloab-fx-b--bg-navy .koloab-fx__foot p { color: rgba(255,255,255,.55); }
.koloab .koloab-fx-b--bg-navy .koloab-fx__blockhead h2,
.koloab .koloab-fx-b--bg-navy .koloab-fx__split-title,
.koloab .koloab-fx-b--bg-navy .koloab-fx__mstone-title,
.koloab .koloab-fx-b--bg-navy .koloab-fx__quote p { color: #fff !important; }
.koloab-fx-b--bg-navy .koloab-fx__stats {
	background: rgba(255,255,255,.14);
	border-color: rgba(255,255,255,.14);
}
.koloab-fx-b--bg-navy .koloab-fx__stat { background: rgba(255,255,255,.04); }
.koloab-fx-b--bg-navy .koloab-fx__stat-value { color: #fff; }
.koloab-fx-b--bg-navy .koloab-fx__stat-label { color: rgba(255,255,255,.60); }
.koloab-fx-b--bg-navy .koloab-fx__mstone-marker {
	background: var(--klb-navy-900, #0b0b0b);
	border-color: rgba(255,255,255,.22);
}
.koloab-fx-b--bg-navy .koloab-fx__spine { background: rgba(255,255,255,.16); }

.koloab-fx-b--stats .koloab-fx__stats { margin-top: 0; }
.koloab-fx-b--gallery .koloab-fx__shots { margin-top: 0; }
.koloab-fx-b--note .koloab-fx__foot { margin-top: 0; }

/* --- headings and words ----------------------------------------- */

.koloab-fx__blockhead { margin-bottom: clamp(22px, 3.5vw, 38px); }
.koloab-fx__blockhead--centre { text-align: center; }
.koloab-fx__blockhead--centre .koloab-fx__kicker { justify-content: center; }
.koloab-fx__kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--klb-grey-400, #5b6068);
}
.koloab-fx__kicker .koloab-rule { width: 26px; height: 2px; display: inline-block; }
.koloab .koloab-fx__blockhead h2 {
	margin: 0 !important;
	font-size: clamp(21px, 3.4vw, 34px) !important;
	font-weight: 800 !important;
	letter-spacing: -.022em !important;
	color: var(--klb-navy, #111111) !important;
	text-wrap: balance;
}

.koloab .koloab-fx__intro-text,
.koloab-fx__intro-text {
	max-width: 68ch;
	margin: 0 auto !important;
	font-size: clamp(15.5px, 2.1vw, 21px);
	line-height: 1.68;
	color: var(--klb-navy, #111111);
	text-align: center;
	text-wrap: pretty;
}
.koloab .koloab-fx__intro-text + .koloab-fx__intro-text { margin-top: 1em !important; }
.koloab .koloab-fx__intro-text--left { margin-left: 0 !important; text-align: left; }

/* --- stats ------------------------------------------------------ */

.koloab-fx__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1px;
	margin-top: clamp(32px, 5vw, 58px);
	background: var(--klb-grey-200, #dfe2e6);
	border: 1px solid var(--klb-grey-200, #dfe2e6);
	border-radius: var(--klb-radius, 14px);
	overflow: hidden;
}
.koloab-fx__stat {
	padding: clamp(18px, 3vw, 28px) 18px;
	background: var(--klb-grey-50, #f5f6f8);
	text-align: center;
}
.koloab-fx__stat-value {
	display: block;
	font-size: clamp(24px, 4vw, 38px);
	font-weight: 900;
	letter-spacing: -.02em;
	color: var(--klb-navy, #111111);
	font-variant-numeric: tabular-nums;
}
.koloab-fx__stat-label {
	display: block;
	margin-top: 6px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--klb-grey-400, #5b6068);
}

/* --- before / after --------------------------------------------- */

.koloab-fx__compares {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	gap: clamp(18px, 3vw, 30px);
}
.koloab-fx__compares[data-cols="1"] { grid-template-columns: minmax(0, 1fr); }
.koloab-fx__compares[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.koloab-fx__compares[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.koloab-fx__compares[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.koloab-fx__compare { margin: 0; }
.koloab-fx__compare-stage {
	position: relative;
	aspect-ratio: var(--fx-ratio, 4 / 3);
	border-radius: var(--klb-radius, 14px);
	overflow: hidden;
	background: var(--klb-grey-100, #ecedef);
	box-shadow: 0 4px 14px -4px rgba(22,28,37,.10);
	cursor: ew-resize;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
}
.koloab-fx__compare-stage:focus-visible { outline: 2px solid var(--klb-red, #444444); outline-offset: 3px; }
.koloab-fx__compare-stage > img,
.koloab-fx__compare-clip > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	pointer-events: none;
}
.koloab-fx__compare-clip {
	position: absolute;
	inset: 0;
	-webkit-clip-path: inset(0 calc(100% - var(--split, 50%)) 0 0);
	clip-path: inset(0 calc(100% - var(--split, 50%)) 0 0);
	will-change: clip-path;
}
.koloab-fx__compare-stage.is-ready .koloab-fx__compare-clip {
	transition: -webkit-clip-path .5s var(--fx-ease), clip-path .5s var(--fx-ease);
}
.koloab-fx__compare-stage.is-dragging .koloab-fx__compare-clip { transition: none; }

.koloab-fx__compare-tag {
	position: absolute;
	top: 12px;
	z-index: 3;
	padding: 5px 11px;
	border-radius: 999px;
	background: rgba(12,16,22,.66);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
	pointer-events: none;
	transition: opacity .28s var(--fx-ease), transform .28s var(--fx-ease);
}
.koloab-fx__compare-tag--before { left: 12px; }
.koloab-fx__compare-tag--after  { right: 12px; }

.koloab-fx__compare-stage.is-hidebefore .koloab-fx__compare-tag--before {
	opacity: 0;
	transform: translateX(-7px);
}
.koloab-fx__compare-stage.is-hideafter .koloab-fx__compare-tag--after {
	opacity: 0;
	transform: translateX(7px);
}

.koloab-fx__compare-handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--split, 50%);
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1px;
	width: 42px;
	margin-left: -21px;
	color: var(--klb-navy, #111111);
	pointer-events: none;
}
.koloab-fx__compare-handle::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 2px;
	margin-left: -1px;
	background: #fff;
	box-shadow: 0 0 12px rgba(0,0,0,.4);
}
.koloab-fx__compare-handle svg {
	position: relative;
	z-index: 1;
	padding: 1px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 10px rgba(0,0,0,.3);
}
.koloab-fx__compare-stage.is-ready .koloab-fx__compare-handle { transition: left .5s var(--fx-ease); }
.koloab-fx__compare-stage.is-dragging .koloab-fx__compare-handle { transition: none; }
.koloab-fx__compare-stage.is-hinting .koloab-fx__compare-handle svg {
	animation: koloab-fx-nudge 1.5s var(--fx-ease) 2;
}
@keyframes koloab-fx-nudge {
	0%, 100% { transform: translateX(0); }
	35%      { transform: translateX(-4px); }
	65%      { transform: translateX(4px); }
}

.koloab-fx__compare-cap {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 14px 2px 0;
}
.koloab-fx__compare-cap strong {
	font-size: 15px;
	font-weight: 700;
	color: var(--klb-navy, #111111);
}
.koloab-fx__compare-cap span {
	font-size: 13px;
	line-height: 1.5;
	color: var(--klb-grey-400, #5b6068);
}

/* --- timeline --------------------------------------------------- */

.koloab-fx__timeline { position: relative; }
.koloab-fx__spine {
	position: absolute;
	top: 6px;
	bottom: 6px;
	left: 11px;
	width: 2px;
	background: var(--klb-grey-200, #dfe2e6);
	border-radius: 2px;
}
.koloab-fx__spine i {
	position: absolute;
	inset: 0 0 auto 0;
	display: block;
	height: var(--drawn, 0%);
	background: linear-gradient(to bottom, var(--klb-red, #444444), var(--klb-navy, #111111));
	border-radius: 2px;
	transition: height .18s linear;
}

.koloab-fx__milestone {
	position: relative;
	padding: 0 0 clamp(30px, 5vw, 54px) 44px;
}
.koloab-fx__milestone:last-child { padding-bottom: 0; }
.koloab-fx__timeline--nospine .koloab-fx__milestone { padding-left: 0; }
.koloab-fx__timeline--single .koloab-fx__milestone { padding-bottom: 0; }

.koloab-fx__mstone-marker {
	position: absolute;
	top: 4px;
	left: 0;
	width: 24px;
	height: 24px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--klb-white, #ffffff);
	border: 2px solid var(--klb-grey-200, #dfe2e6);
	transition: border-color .5s var(--fx-ease), transform .5s var(--fx-ease);
}
.koloab-fx__mstone-marker span {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--klb-grey-200, #dfe2e6);
	transition: background .5s var(--fx-ease), transform .5s var(--fx-ease);
}
.koloab-fx__milestone.is-in .koloab-fx__mstone-marker {
	border-color: var(--klb-red, #444444);
	transform: scale(1.08);
}
.koloab-fx__milestone.is-in .koloab-fx__mstone-marker span {
	background: var(--klb-red, #444444);
	transform: scale(1.15);
}

.koloab-fx__mstone-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 8px;
}
.koloab .koloab-fx__phase {
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--klb-navy, #111111);
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
}
.koloab-fx__mstone-meta time {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .05em;
	color: var(--klb-grey-400, #5b6068);
}
.koloab .koloab-fx__mstone-title {
	margin: 0 0 8px !important;
	font-size: clamp(17px, 2.5vw, 24px) !important;
	font-weight: 800 !important;
	letter-spacing: -.018em !important;
	color: var(--klb-navy, #111111) !important;
	text-wrap: balance;
}
.koloab .koloab-fx__mstone-body,
.koloab-fx__mstone-body {
	max-width: 62ch;
	margin: 0;
	font-size: 14.5px;
	line-height: 1.64;
	color: var(--klb-grey-400, #5b6068);
	text-wrap: pretty;
}

/* --- photo grids ------------------------------------------------ */

.koloab-fx__shots {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(clamp(120px, 15vw, 172px), 1fr));
	gap: 8px;
	margin-top: 16px;
}
.koloab-fx__shots[data-cols="1"] { grid-template-columns: minmax(0, 1fr); }
.koloab-fx__shots[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.koloab-fx__shots[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.koloab-fx__shots[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.koloab .koloab-fx__shot {
	position: relative;
	aspect-ratio: var(--fx-ratio, 4 / 3);
	padding: 0;
	border: 0;
	border-radius: var(--klb-radius-sm, 8px);
	overflow: hidden;
	background: var(--klb-grey-100, #ecedef);
	opacity: 0;
	transform: translateY(12px) scale(.97);
	transition: opacity .55s var(--fx-ease), transform .55s var(--fx-ease), box-shadow .3s var(--fx-ease);
}
.koloab-fx__milestone.is-in .koloab-fx__shot {
	opacity: 1;
	transform: none;
	transition-delay: calc(.18s + var(--j) * .055s);
}
.koloab-fx__shot img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform .6s var(--fx-ease);
}
.koloab-fx__shot:hover { box-shadow: 0 22px 50px -20px rgba(22,28,37,.22); z-index: 1; }
.koloab-fx__shot:hover img { transform: scale(1.07); }
.koloab-fx__shot:focus-visible { outline: 2px solid var(--klb-red, #444444); outline-offset: 2px; }
.koloab-fx__shot-zoom {
	position: absolute;
	right: 7px;
	bottom: 7px;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(12,16,22,.62);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	color: #fff;
	opacity: 0;
	transform: translateY(5px) scale(.9);
	transition: opacity .3s var(--fx-ease), transform .3s var(--fx-ease);
}
.koloab-fx__shot:hover .koloab-fx__shot-zoom,
.koloab-fx__shot:focus-visible .koloab-fx__shot-zoom {
	opacity: 1;
	transform: none;
}
.koloab-fx__shotcount {
	display: inline-block;
	margin-top: 10px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .06em;
	color: var(--klb-grey-500, #8a8f97);
}

/* --- drawings --------------------------------------------------- */

.koloab-fx__plans {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	gap: clamp(12px, 2vw, 20px);
}
.koloab-fx__plans[data-cols="1"] { grid-template-columns: minmax(0, 1fr); }
.koloab-fx__plans[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.koloab-fx__plans[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.koloab-fx__plans[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.koloab .koloab-fx__plan {
	padding: 12px;
	border: 1px solid var(--klb-grey-200, #dfe2e6);
	border-radius: var(--klb-radius, 14px);
	background: #fff;
	transition: transform .4s var(--fx-ease), box-shadow .4s var(--fx-ease), border-color .3s linear;
}
.koloab-fx__plan img {
	width: 100%;
	height: auto;
	border-radius: var(--klb-radius-sm, 8px);
	background: #fff;
}
.koloab-fx__plan:hover {
	transform: translateY(-3px);
	border-color: var(--klb-red, #444444);
	box-shadow: 0 22px 50px -20px rgba(22,28,37,.22);
}
.koloab-fx__plan:focus-visible { outline: 2px solid var(--klb-red, #444444); outline-offset: 2px; }

/* --- split, figure, quote, note, spacer ------------------------- */

.koloab-fx__split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(20px, 4vw, 52px);
	align-items: center;
}
.koloab-fx__split--flip .koloab-fx__split-media { order: 2; }

.koloab .koloab-fx__split-media,
.koloab .koloab-fx__figure-media {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	border-radius: var(--klb-radius, 14px);
	overflow: hidden;
	background: var(--klb-grey-100, #ecedef);
	aspect-ratio: var(--fx-ratio, 4 / 3);
}
.koloab-fx__split-media img,
.koloab-fx__figure-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform .6s var(--fx-ease);
}
.koloab .koloab-fx__split-media:hover img,
.koloab .koloab-fx__figure-media:hover img { transform: scale(1.04); }
.koloab .koloab-fx__split-media:focus-visible,
.koloab .koloab-fx__figure-media:focus-visible {
	outline: 2px solid var(--klb-red, #444444);
	outline-offset: 3px;
}
.koloab-fx__split-media:hover .koloab-fx__shot-zoom,
.koloab-fx__split-media:focus-visible .koloab-fx__shot-zoom,
.koloab-fx__figure-media:hover .koloab-fx__shot-zoom,
.koloab-fx__figure-media:focus-visible .koloab-fx__shot-zoom { opacity: 1; transform: none; }

.koloab .koloab-fx__split-title {
	margin: 0 0 12px !important;
	font-size: clamp(20px, 3.1vw, 31px) !important;
	line-height: 1.14 !important;
	font-weight: 800 !important;
	letter-spacing: -.022em !important;
	color: var(--klb-navy, #111111) !important;
}
.koloab .koloab-fx__split-text,
.koloab-fx__split-text {
	margin: 0;
	font-size: 15px;
	line-height: 1.66;
	color: var(--klb-grey-400, #5b6068);
	text-wrap: pretty;
}
.koloab-fx__split-text + .koloab-fx__split-text { margin-top: .9em; }

.koloab-fx__figure { margin: 0; }
.koloab .koloab-fx__figure--auto .koloab-fx__figure-media { aspect-ratio: auto; }
.koloab-fx__figure--auto .koloab-fx__figure-media img {
	position: static;
	width: 100%;
	height: auto;
	object-fit: contain;
}
.koloab-fx__figure figcaption {
	margin-top: 12px;
	font-size: 13px;
	line-height: 1.55;
	color: var(--klb-grey-400, #5b6068);
	text-wrap: pretty;
}

.koloab-fx__quote {
	--q-gutter: clamp(38px, 6vw, 64px);
	position: relative;
	width: 100%;
	max-width: min(100%, 880px);
	margin: 0 auto;
	padding-left: var(--q-gutter);
}
.koloab-fx__quote-mark,
.koloab-fx__quote-close {
	position: absolute;
	font-size: clamp(50px, 7vw, 88px);
	line-height: 1;
	font-weight: 900;
	color: var(--klb-red, #444444);
	opacity: .9;
}
.koloab-fx__quote-mark { top: -.14em; left: 0; }
.koloab-fx__quote-close { bottom: -.14em; right: 0; transform: rotate(180deg); }
.koloab .koloab-fx__quote p,
.koloab-fx__quote p {
	position: relative;
	padding-right: var(--q-gutter);
	margin: 0;
	font-size: clamp(19px, 3vw, 30px);
	line-height: 1.32;
	font-weight: 600;
	letter-spacing: -.02em;
	color: var(--klb-navy, #111111);
	text-wrap: pretty;
}
.koloab-fx__quote footer {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	margin-top: 16px;
}
.koloab-fx__quote cite {
	font-style: normal;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--klb-navy, #111111);
}
.koloab-fx__quote footer span {
	font-size: 12.5px;
	letter-spacing: .02em;
	color: var(--klb-grey-500, #8a8f97);
}
.koloab-fx-b--bg-navy .koloab-fx__quote cite { color: #fff; }
.koloab-fx-b--bg-navy .koloab-fx__quote footer span { color: rgba(255,255,255,.60); }

.koloab-fx__foot {
	margin-top: clamp(44px, 7vw, 84px);
	padding-top: 24px;
	border-top: 1px solid var(--klb-grey-200, #dfe2e6);
	text-align: center;
}
.koloab-fx__foot p {
	font-size: 13px;
	letter-spacing: .04em;
	color: var(--klb-grey-500, #8a8f97);
}

.koloab-fx__spacer { display: flex; align-items: center; }
.koloab-fx__spacer > span {
	display: block;
	width: calc(100% - var(--fx-gutter) * 2);
	max-width: calc(var(--fx-maxw) - var(--fx-gutter) * 2);
	margin: 0 auto;
}
.koloab-fx__spacer--small  { height: clamp(20px, 3vw, 34px); }
.koloab-fx__spacer--normal { height: clamp(38px, 6vw, 70px); }
.koloab-fx__spacer--large  { height: clamp(64px, 10vw, 124px); }
.koloab-fx__spacer--rule > span { border-top: 1px solid var(--klb-grey-200, #dfe2e6); }

/* --- video ------------------------------------------------------ */

.koloab-fx__video {
	display: flex;
	justify-content: center;
	background: var(--klb-navy-900, #0b0b0b);
	border-radius: var(--klb-radius, 14px);
	overflow: hidden;
}
.koloab-fx__video video {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: min(76vh, 760px);
	height: auto;
	background: #000;
}

/* --- photo viewer ----------------------------------------------- */

.koloab-fx__lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
}
.koloab-fx__lightbox[hidden] { display: none; }
.koloab-fx__lb-overlay {
	position: absolute;
	inset: 0;
	background: rgba(8,10,14,.94);
	opacity: 0;
	transition: opacity .35s linear;
}
.koloab-fx__lightbox.is-open .koloab-fx__lb-overlay { opacity: 1; }

.koloab-fx__lb-figure {
	position: relative;
	z-index: 1;
	margin: 0;
	max-width: min(94vw, 1500px);
	max-height: 88vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	opacity: 0;
	transform: scale(.965);
	transition: opacity .35s var(--fx-ease, cubic-bezier(.22,.61,.36,1)), transform .35s var(--fx-ease, cubic-bezier(.22,.61,.36,1));
}
.koloab-fx__lightbox.is-open .koloab-fx__lb-figure { opacity: 1; transform: none; }
.koloab-fx__lb-figure img {
	max-width: 100%;
	max-height: 78vh;
	width: auto;
	height: auto;
	border-radius: var(--klb-radius-sm, 8px);
	box-shadow: 0 40px 90px -30px rgba(0,0,0,.8);
	transition: opacity .18s linear;
}
.koloab-fx__lb-figure figcaption {
	max-width: 68ch;
	font-size: 13.5px;
	line-height: 1.55;
	text-align: center;
	color: rgba(255,255,255,.82);
}
.koloab-fx__lb-figure.is-swapping img { opacity: .3; }

.koloab .koloab-fx__lb-btn {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	margin: 0;
	border: 1px solid rgba(255,255,255,.20);
	border-radius: 50%;
	background: rgba(255,255,255,.09);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: #fff;
	line-height: 0;
	transition: background .25s linear, transform .25s var(--fx-ease, cubic-bezier(.22,.61,.36,1));
}
.koloab .koloab-fx__lb-btn > svg { display: block; flex: none; }
.koloab .koloab-fx__lb-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.koloab .koloab-fx__lb-btn:hover { background: rgba(255,255,255,.20); transform: scale(1.07); }

.koloab .koloab-fx__lb-btn--prev,
.koloab .koloab-fx__lb-btn--next {
	top: 50%;
	bottom: auto;
	margin-top: -23px;
}
.koloab .koloab-fx__lb-btn--prev  { left: clamp(10px, 3vw, 34px); right: auto; }
.koloab .koloab-fx__lb-btn--next  { right: clamp(10px, 3vw, 34px); left: auto; }
.koloab .koloab-fx__lb-btn--close {
	top: clamp(12px, 3vw, 26px);
	right: clamp(10px, 3vw, 34px);
	left: auto;
	bottom: auto;
	width: 40px;
	height: 40px;
	margin-top: 0;
}
.koloab-fx__lb-btn[hidden] { display: none; }

.koloab-fx__lb-count {
	position: absolute;
	bottom: clamp(12px, 3vw, 26px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .12em;
	color: rgba(255,255,255,.55);
	font-variant-numeric: tabular-nums;
}

/* --- phone teaser card ------------------------------------------ */

.koloab .koloab-fxspot {
	display: none;
	position: relative;
	width: 100%;
	margin: 22px 0 0;
	padding: 0;
	border: 0;
	border-radius: var(--klb-radius, 14px);
	overflow: hidden;
	background: var(--klb-navy-900, #0b0b0b);
	isolation: isolate;
	text-align: left;
	box-shadow: 0 14px 34px -18px rgba(12, 16, 22, .7);
	transition: transform .3s var(--fx-ease, cubic-bezier(.22,.61,.36,1));
}
.koloab .koloab-fxspot:active { transform: scale(.985); }
.koloab .koloab-fxspot:focus-visible { outline: 2px solid var(--klb-red, #444444); outline-offset: 3px; }

.koloab-fxspot__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-size: cover;
	background-position: center 38%;
}
.koloab-fxspot__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(100deg, rgba(12,16,22,.93) 0%, rgba(12,16,22,.72) 40%, rgba(12,16,22,.20) 100%),
		radial-gradient(150% 130% at 0% 100%, rgba(255,255,255,.12) 0%, transparent 60%);
}

.koloab-fxspot__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 7px;
	min-height: 118px;
	padding: 18px 20px;
}

.koloab-fxspot__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: rgba(255,255,255,.72);
}
.koloab-fxspot__eyebrow .koloab-fx-dot { margin-right: 0; }

.koloab-fxspot__title {
	max-width: 22ch;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.022em;
	color: #fff;
	text-shadow: 0 2px 14px rgba(0,0,0,.45);
}

.koloab-fxspot__go {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 2px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .02em;
	color: rgba(255,255,255,.92);
}
.koloab-fxspot__go svg { flex: none; }

/* --- responsive -------------------------------------------------- */

@media (max-width: 820px) {
	.koloab-fx__hero { min-height: min(72vh, 560px); }
	.koloab-fx__compares { grid-template-columns: 1fr; }
	.koloab-fx__milestone { padding-left: 34px; }
	.koloab-fx__spine { left: 8px; }
	.koloab-fx__mstone-marker { width: 18px; height: 18px; top: 5px; }
	.koloab-fx__mstone-marker span { width: 6px; height: 6px; }
	.koloab-fx__lb-btn--prev  { left: 8px; }
	.koloab-fx__lb-btn--next  { right: 8px; }
	.koloab-fx__split { grid-template-columns: minmax(0, 1fr); }
	.koloab-fx__split--flip .koloab-fx__split-media { order: 0; }
	.koloab-fx__compares[data-cols="2"],
	.koloab-fx__compares[data-cols="3"],
	.koloab-fx__compares[data-cols="4"] { grid-template-columns: minmax(0, 1fr); }
	.koloab-fx__plans[data-cols="2"],
	.koloab-fx__plans[data-cols="3"],
	.koloab-fx__plans[data-cols="4"] { grid-template-columns: minmax(0, 1fr); }
	.koloab-fx__shots[data-cols="4"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.koloab .koloab-fxspot { display: block; }
}

@media (max-width: 640px) {
	.koloab-fx__hero { min-height: 78vh; }
	.koloab-fx__hero--short,
	.koloab-fx__hero--normal { min-height: 72vh; }
	.koloab-fx__hero--tall { min-height: 86vh; }
	.koloab-fx__hero-actions { gap: 8px; }
	.koloab-fx__cta { padding: 11px 16px; font-size: 12.5px; }
	.koloab-fx__hero-credit { display: none; }
	.koloab-fx__stats { grid-template-columns: repeat(2, 1fr); }
	.koloab-fx__lb-figure img { max-height: 68vh; }
	.koloab-fx__shots[data-cols="3"],
	.koloab-fx__shots[data-cols="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.koloab-fx__quote { padding-left: 0; padding-top: clamp(34px, 12vw, 54px); }
	.koloab-fx__quote p { padding-right: 0; padding-bottom: clamp(34px, 12vw, 54px); }
	.koloab-fx__quote-mark { top: 0; }
	.koloab-fx__quote-close { bottom: 0; }
	.koloab-fx__video video { width: 100%; max-height: none; }
}

@media (prefers-reduced-motion: reduce) {
	.koloab-fx-dot { animation: none; }
	.koloab-fx__hero-media img { transition: opacity .2s linear; }
	.koloab-fx__hero.has-parallax .koloab-fx__hero-media {
		inset: 0 !important;
		transform: none !important;
	}
	.koloab-fx__hero.has-parallax .koloab-fx__hero-inner { opacity: 1 !important; }
	.koloab-fx__eyebrow-rule { animation: none; }
	.koloab-fx__eyebrow,
	.koloab-fx__title,
	.koloab-fx__standfirst,
	.koloab-fx__hero-actions,
	.koloab-fx [data-koloab-fx-reveal],
	.koloab-fx__shot {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.koloab-fx__spine i { transition: none; }
	.koloab-fx__cta:hover,
	.koloab-fx__plan:hover,
	.koloab-fx__shot:hover img,
	.koloab .koloab-fx__lb-btn--close:hover { transform: none; }
	.koloab .koloab-fx__lb-btn--prev:hover,
	.koloab .koloab-fx__lb-btn--next:hover { transform: translateY(-50%); }
	.koloab-fx__compare-stage.is-ready .koloab-fx__compare-clip,
	.koloab-fx__compare-stage.is-ready .koloab-fx__compare-handle { transition: none !important; }
	.koloab-fx__compare-stage.is-hinting .koloab-fx__compare-handle svg { animation: none; }
	.koloab-fx__lb-figure { transition: none; }
	.koloab-fx__split-media img,
	.koloab-fx__figure-media img { transition: none; }
	.koloab .koloab-fx__split-media:hover img,
	.koloab .koloab-fx__figure-media:hover img { transform: none; }
	.koloab .koloab-fxspot { transition: none; }
	.koloab .koloab-fxspot:active { transform: none; }
}


/* ---- Featured story draft preview strip ---- */

/* First thing on the page, so it has to clear the WordPress admin bar itself;
   the ticker's matching margin only exists to cover the header's sticky shift,
   which the strip already prevents. */
.koloab .koloab-fxprev {
	margin-top: var(--klb-wpbar, 0px);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	padding: 9px 18px;
	background: var(--klb-navy-900, #0b0b0b);
	color: var(--klb-white, #fff);
	font-size: 13px;
	line-height: 1.35;
	text-align: center;
}
.koloab .koloab-fxprev__tag {
	flex: none;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--klb-red);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.koloab .koloab-fxprev__text { opacity: .88; }
.koloab .koloab-fxprev ~ .koloab-ticker { margin-top: 0 !important; }