/* =========================================================================
   Krieg - home page surfaces
   Hero, category tiles, service strip, stats, experience, promo, reviews,
   newsletter. Also loaded on About and Contact, which reuse several of these
   components.
   ========================================================================= */

/* ---------------------------------------------------------------- 11. Hero */

.k-hero {
	position: relative;
	background: var(--k-ink);
	color: var(--k-on-dark);
	min-height: clamp(540px, 76vh, 840px);
	display: flex;
	align-items: center;
	overflow: hidden;
}

.k-hero__media {
	position: absolute;
	inset: 0;
}

.k-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.06);
	animation: k-hero-drift 18s var(--k-ease) forwards;
}

/* A single slow settle on load. It gives the still photograph a sense of
   depth without the jitter of a looping Ken Burns pan. */
@keyframes k-hero-drift {
	to {
		transform: scale(1);
	}
}

.k-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			100deg,
			rgba(8, 8, 10, 0.93) 0%,
			rgba(8, 8, 10, 0.78) 38%,
			rgba(8, 8, 10, 0.26) 76%,
			rgba(8, 8, 10, 0.08) 100%
		),
		linear-gradient(to top, rgba(8, 8, 10, 0.7) 0%, transparent 42%);
}

.k-hero__inner {
	position: relative;
	z-index: 1;
	padding-block: clamp(var(--k-8), 9vw, var(--k-10));
	width: 100%;
}

.k-hero__content {
	max-width: 680px;
}

/* Each element arrives a beat after the one above it. */
.k-hero__eyebrow,
.k-hero__title span,
.k-hero__text,
.k-hero__actions,
.k-hero__points {
	animation: k-rise 720ms var(--k-ease) both;
}

.k-hero__eyebrow {
	animation-delay: 60ms;
}

.k-hero__title span {
	animation-delay: calc(150ms + var(--k-i, 0) * 110ms);
}

.k-hero__text {
	animation-delay: 420ms;
}

.k-hero__actions {
	animation-delay: 520ms;
}

.k-hero__points {
	animation-delay: 620ms;
}

@keyframes k-rise {
	from {
		opacity: 0;
		transform: translateY(26px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.k-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--k-2);
	margin: 0 0 var(--k-5);
	padding: 8px var(--k-4);
	border-radius: var(--k-radius-pill);
	background: rgba(255, 255, 255, 0.08);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.16);
	font-family: var(--k-font-display);
	font-size: var(--k-t-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.9);
}

.k-hero__eyebrow .k-pulse {
	color: var(--k-accent-light);
}

.k-hero__title {
	font-size: var(--k-t-display-1);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.03em;
	line-height: 0.94;
	color: var(--k-white);
	margin: 0 0 var(--k-5);
	text-wrap: balance;
}

.k-hero__title span {
	display: block;
}

.k-hero__title span + span {
	background: linear-gradient(100deg, #ff4d55 0%, #d8232a 55%, #8f1318 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.k-hero__text {
	font-size: clamp(1rem, 0.92rem + 0.4vw, 1.2rem);
	color: var(--k-on-dark-soft);
	max-width: 50ch;
	margin: 0 0 var(--k-7);
	line-height: 1.6;
}

.k-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--k-3);
}

.k-hero__points {
	display: flex;
	flex-wrap: wrap;
	gap: var(--k-3) var(--k-6);
	list-style: none;
	margin: var(--k-7) 0 0;
	padding: var(--k-5) 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.k-hero__points li {
	display: flex;
	align-items: center;
	gap: var(--k-2);
	font-size: var(--k-t-sm);
	font-weight: 500;
	color: rgba(255, 255, 255, 0.82);
}

.k-hero__points .k-icon {
	color: var(--k-accent-light);
	flex: none;
}

/* Scroll cue - a line that fills downward on a loop. */
.k-hero__scroll {
	position: absolute;
	left: 50%;
	bottom: var(--k-6);
	transform: translateX(-50%);
	width: 1px;
	height: 56px;
	background: rgba(255, 255, 255, 0.18);
	overflow: hidden;
	z-index: 1;
}

.k-hero__scroll-line {
	position: absolute;
	inset: 0 0 auto 0;
	height: 40%;
	background: var(--k-accent);
	animation: k-scrollcue 2.4s var(--k-ease) infinite;
}

@keyframes k-scrollcue {
	0% {
		transform: translateY(-100%);
	}
	100% {
		transform: translateY(250%);
	}
}

@media (max-width: 767px) {
	.k-hero {
		min-height: clamp(500px, 82vh, 700px);
	}

	.k-hero__scroll {
		display: none;
	}

	.k-hero__points {
		gap: var(--k-2) var(--k-5);
	}

	.k-hero__points li {
		font-size: var(--k-t-xs);
	}

	.k-hero__actions .k-btn {
		flex: 1 1 100%;
	}
}

/* ------------------------------------------------------- 12. Category tiles */

.k-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--k-4);
}

@media (min-width: 900px) {
	.k-tiles {
		gap: var(--k-5);
	}

	.k-tiles--5 {
		grid-template-columns: repeat(6, 1fr);
	}

	.k-tiles--5 > :nth-child(1),
	.k-tiles--5 > :nth-child(2) {
		grid-column: span 3;
	}

	.k-tiles--5 > :nth-child(n + 3) {
		grid-column: span 2;
	}
}

.k-tile {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--k-radius-lg);
	text-decoration: none;
	background: var(--k-surface);
	isolation: isolate;
	transition: transform var(--k-base) var(--k-ease), box-shadow var(--k-base) var(--k-ease);
}

.k-tile:hover {
	transform: translateY(-6px);
	box-shadow: var(--k-shadow-pop);
}

.k-tile__media {
	aspect-ratio: 4 / 5;
	overflow: hidden;
}

.k-tiles--5 > :nth-child(1) .k-tile__media,
.k-tiles--5 > :nth-child(2) .k-tile__media {
	aspect-ratio: 3 / 2;
}

.k-tile__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 800ms var(--k-ease);
}

.k-tile:hover .k-tile__media img {
	transform: scale(1.08);
}

.k-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(8, 8, 10, 0.92) 0%,
		rgba(8, 8, 10, 0.5) 38%,
		rgba(8, 8, 10, 0.04) 72%
	);
	z-index: 1;
	transition: opacity var(--k-base) var(--k-ease);
}

.k-tile:hover::after {
	opacity: 0.92;
}

.k-tile__body {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 2;
	padding: var(--k-5) var(--k-5) var(--k-6);
	color: var(--k-white);
}

.k-tile__count {
	display: inline-block;
	font-family: var(--k-font-display);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--k-white);
	background: rgba(255, 255, 255, 0.16);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-radius: var(--k-radius-pill);
	padding: 5px 11px;
	margin-bottom: var(--k-3);
	line-height: 1.4;
}

.k-tile__name {
	font-family: var(--k-font-display);
	font-size: var(--k-t-h3);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.015em;
	margin: 0;
	display: flex;
	align-items: center;
	gap: var(--k-2);
	color: var(--k-white);
}

.k-tile__name .k-icon {
	transition: transform var(--k-base) var(--k-spring), opacity var(--k-fast) var(--k-ease);
	opacity: 0.55;
}

.k-tile:hover .k-tile__name .k-icon {
	transform: translateX(6px);
	opacity: 1;
}

/* An accent rule that draws itself under the name on hover. */
.k-tile__body::after {
	content: "";
	display: block;
	height: 3px;
	width: 0;
	margin-top: var(--k-3);
	border-radius: 2px;
	background: var(--k-grad-accent);
	transition: width var(--k-base) var(--k-ease);
}

.k-tile:hover .k-tile__body::after {
	width: 64px;
}

/* ------------------------------------------------------ 13. Trust + stats */

.k-trust {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--k-4);
}

.k-trust__item {
	display: flex;
	align-items: center;
	gap: var(--k-4);
	padding: var(--k-5);
	background: var(--k-white);
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius);
	transition: border-color var(--k-base) var(--k-ease), box-shadow var(--k-base) var(--k-ease),
		transform var(--k-base) var(--k-ease);
}

.k-trust__item:hover {
	border-color: transparent;
	box-shadow: var(--k-shadow-md);
	transform: translateY(-3px);
}

.k-trust__icon {
	flex: none;
	width: 50px;
	height: 50px;
	display: grid;
	place-items: center;
	border-radius: var(--k-radius);
	background: var(--k-accent-soft);
	color: var(--k-accent);
	transition: background var(--k-base) var(--k-ease), color var(--k-base) var(--k-ease);
}

.k-trust__item:hover .k-trust__icon {
	background: var(--k-grad-accent);
	color: var(--k-white);
}

.k-trust__title {
	font-family: var(--k-font-display);
	font-size: var(--k-t-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin: 0;
	line-height: 1.3;
}

.k-trust__text {
	margin: 3px 0 0;
	font-size: var(--k-t-xs);
	color: var(--k-muted);
}

.k-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: var(--k-4);
	text-align: center;
}

.k-stat {
	padding: var(--k-6) var(--k-4);
	background: var(--k-white);
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius-lg);
	transition: border-color var(--k-base) var(--k-ease), box-shadow var(--k-base) var(--k-ease),
		transform var(--k-base) var(--k-ease);
}

.k-stat:hover {
	border-color: transparent;
	box-shadow: var(--k-shadow-md);
	transform: translateY(-4px);
}

.k-stat__value {
	font-family: var(--k-font-display);
	font-size: clamp(2.2rem, 1.4rem + 2.8vw, 3.4rem);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1;
	margin: 0;
	background: var(--k-grad-ink);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.k-stat__label {
	font-family: var(--k-font-display);
	font-size: var(--k-t-xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--k-muted);
	margin: var(--k-3) 0 0;
}

/* -------------------------------------------------- 14. Experience + promo */

.k-feature {
	position: relative;
	min-height: clamp(400px, 48vw, 620px);
	display: grid;
	place-items: center;
	text-align: center;
	overflow: hidden;
	background: var(--k-ink);
	color: var(--k-on-dark);
}

.k-feature__media {
	position: absolute;
	inset: 0;
}

.k-feature__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.k-feature__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at center, rgba(8, 8, 10, 0.3) 0%, rgba(8, 8, 10, 0.72) 100%),
		linear-gradient(to bottom, rgba(8, 8, 10, 0.45), rgba(8, 8, 10, 0.45));
}

.k-feature__inner {
	position: relative;
	z-index: 1;
	padding: var(--k-9) var(--k-gutter);
	max-width: 780px;
}

.k-feature__title {
	font-size: var(--k-t-display-2);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	color: var(--k-white);
	margin: 0 0 var(--k-4);
}

.k-feature__text {
	color: var(--k-on-dark-soft);
	font-size: clamp(1rem, 0.94rem + 0.3vw, 1.15rem);
	margin: 0 0 var(--k-7);
}

.k-play {
	position: relative;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.45);
	background: rgba(255, 255, 255, 0.12);
	color: var(--k-white);
	display: inline-grid;
	place-items: center;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: background var(--k-base) var(--k-ease), transform var(--k-base) var(--k-spring),
		color var(--k-base) var(--k-ease);
	text-decoration: none;
}

.k-play::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.5);
	animation: k-ring 3s var(--k-ease) infinite;
}

.k-play:hover {
	background: var(--k-white);
	color: var(--k-ink);
	transform: scale(1.08);
}

.k-promo {
	display: grid;
	gap: var(--k-7);
	align-items: center;
	padding: clamp(var(--k-7), 5vw, var(--k-9));
	background: var(--k-grad-ink);
	color: var(--k-on-dark);
	border-radius: var(--k-radius-xl);
	position: relative;
	overflow: hidden;
	box-shadow: var(--k-shadow-pop);
}

@media (min-width: 900px) {
	.k-promo {
		grid-template-columns: 1.1fr 0.9fr;
	}
}

.k-promo__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.k-promo__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.38;
}

.k-promo__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(95deg, rgba(8, 8, 10, 0.92) 0%, rgba(8, 8, 10, 0.5) 60%, transparent 100%);
}

.k-promo__body,
.k-promo__side {
	position: relative;
	z-index: 1;
}

.k-promo__title {
	font-size: var(--k-t-display-2);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	color: var(--k-white);
	margin: 0 0 var(--k-3);
}

.k-promo__text {
	color: var(--k-on-dark-soft);
	font-size: 1.05rem;
	margin: 0 0 var(--k-7);
}

.k-countdown {
	display: flex;
	gap: var(--k-3);
	flex-wrap: wrap;
}

.k-countdown__cell {
	min-width: 82px;
	padding: var(--k-4) var(--k-2);
	text-align: center;
	background: rgba(255, 255, 255, 0.08);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--k-radius);
}

.k-countdown__num {
	display: block;
	font-family: var(--k-font-display);
	font-size: 2rem;
	font-weight: 800;
	line-height: 1;
	color: var(--k-white);
	font-variant-numeric: tabular-nums;
}

.k-countdown__unit {
	display: block;
	font-family: var(--k-font-display);
	font-size: 0.5625rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
	margin-top: 7px;
}

.k-countdown__note {
	margin: var(--k-4) 0 0;
	font-size: var(--k-t-xs);
	color: rgba(255, 255, 255, 0.6);
}

/* -------------------------------------------------------- 15. Testimonials */

.k-quotes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--k-4);
}

.k-quote {
	position: relative;
	background: var(--k-white);
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius-lg);
	padding: var(--k-6);
	display: flex;
	flex-direction: column;
	gap: var(--k-4);
	overflow: hidden;
	transition: border-color var(--k-base) var(--k-ease), box-shadow var(--k-base) var(--k-ease),
		transform var(--k-base) var(--k-ease);
}

.k-quote:hover {
	border-color: transparent;
	box-shadow: var(--k-shadow-md);
	transform: translateY(-4px);
}

/* An oversized quote mark bled off the top corner. */
.k-quote::before {
	content: "\201C";
	position: absolute;
	top: -26px;
	right: var(--k-4);
	font-family: var(--k-font-display);
	font-size: 8rem;
	font-weight: 800;
	line-height: 1;
	color: var(--k-accent);
	opacity: 0.08;
	pointer-events: none;
}

.k-quote__stars {
	display: flex;
	gap: 3px;
	color: #f5a524;
}

.k-quote__stars .k-icon {
	fill: currentColor;
	stroke: none;
}

.k-quote__text {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--k-ink-soft);
	flex: 1;
}

.k-quote__person {
	display: flex;
	align-items: center;
	gap: var(--k-3);
	padding-top: var(--k-4);
	border-top: 1px solid var(--k-line);
}

.k-quote__avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--k-grad-ink);
	color: var(--k-white);
	display: grid;
	place-items: center;
	font-family: var(--k-font-display);
	font-size: var(--k-t-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	flex: none;
}

.k-quote__name {
	font-family: var(--k-font-display);
	font-weight: 700;
	font-size: var(--k-t-sm);
	display: block;
}

.k-quote__detail {
	font-size: var(--k-t-xs);
	color: var(--k-muted);
}

/* ----------------------------------------------------------- 16. Newsletter */

.k-news {
	display: grid;
	gap: var(--k-6);
	align-items: center;
	padding: clamp(var(--k-6), 4vw, var(--k-8));
	background: var(--k-white);
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius-xl);
	box-shadow: var(--k-shadow-md);
}

@media (min-width: 900px) {
	.k-news {
		grid-template-columns: 1fr 1fr;
		gap: var(--k-8);
	}
}

.k-news__title {
	font-size: var(--k-t-display-2);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	margin: 0 0 var(--k-3);
}

.k-news__text,
.k-news__lede {
	color: var(--k-muted);
	margin: 0;
	max-width: 48ch;
}

.k-news__lede {
	margin-top: var(--k-3);
}

.k-news__form {
	min-width: 0;
}

.k-news form {
	display: flex;
	gap: var(--k-2);
	flex-wrap: wrap;
}

.k-news input[type="email"],
.k-news input[type="text"] {
	flex: 1 1 240px;
	padding: 16px var(--k-4);
	border: 1px solid var(--k-line-strong);
	border-radius: var(--k-radius);
	background: var(--k-paper);
	font-size: var(--k-t-sm);
	transition: border-color var(--k-fast) var(--k-ease), box-shadow var(--k-fast) var(--k-ease);
}

.k-news input[type="email"]:focus,
.k-news input[type="text"]:focus {
	outline: none;
	background: var(--k-white);
	border-color: var(--k-accent);
	box-shadow: 0 0 0 4px var(--k-accent-ring);
}

.k-news input[type="submit"],
.k-news button[type="submit"] {
	padding: 16px var(--k-6);
	border: 0;
	border-radius: var(--k-radius);
	background: var(--k-grad-accent);
	color: var(--k-white);
	font-family: var(--k-font-display);
	font-size: var(--k-t-sm);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	box-shadow: 0 4px 14px -6px rgba(216, 35, 42, 0.5);
	transition: box-shadow var(--k-base) var(--k-ease), transform var(--k-fast) var(--k-ease);
}

.k-news input[type="submit"]:hover,
.k-news button[type="submit"]:hover {
	box-shadow: var(--k-shadow-accent);
	transform: translateY(-2px);
}

/* --------------------------------------------------------- Closing CTA band */

.k-cta {
	position: relative;
	overflow: hidden;
}

/* Two soft accent blooms so the dark band has depth behind the type. */
.k-cta::before,
.k-cta::after {
	content: "";
	position: absolute;
	width: 620px;
	height: 620px;
	border-radius: 50%;
	pointer-events: none;
	background: radial-gradient(circle, rgba(216, 35, 42, 0.26) 0%, transparent 66%);
}

.k-cta::before {
	top: -340px;
	left: -180px;
}

.k-cta::after {
	bottom: -400px;
	right: -200px;
	background: radial-gradient(circle, rgba(216, 35, 42, 0.18) 0%, transparent 66%);
}

.k-cta__inner {
	position: relative;
	z-index: 1;
	text-align: center;
	max-width: 760px;
	margin-inline: auto;
}

.k-cta__title {
	font-size: var(--k-t-display-2);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.025em;
	color: var(--k-white);
	margin: 0 0 var(--k-4);
}

.k-cta__text {
	color: var(--k-on-dark-soft);
	font-size: clamp(1rem, 0.94rem + 0.3vw, 1.15rem);
	margin: 0 0 var(--k-7);
}

.k-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--k-3);
	justify-content: center;
}

@media (max-width: 479px) {
	.k-cta__actions .k-btn {
		flex: 1 1 100%;
	}
}