/**
 * Homepage sections: hero, applications finder, capabilities.
 * Loaded only where these template parts render (the front page); shared
 * rules such as the CTA band live in style.css.
 */

/* ============================================================
 * Hero
 *
 * .hero alone is the light design (photo under a white veil), kept as the
 * rollback; .hero--dark is the KDL dark split. hero.php emits one or the
 * other (Customizer: upton_hero_variant).
 * ========================================================= */
.hero {
	position: relative;
	isolation: isolate;
	min-height: clamp(380px, 48vh, 500px);
	display: flex;
	align-items: flex-start;
	overflow: hidden;
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(244, 246, 248, 0.9) 100%),
		repeating-linear-gradient(135deg, rgba(206, 32, 41, 0.045) 0 1px, transparent 1px 28px);
	color: var(--kdl-text-strong, #0a0d11);
}

/* Photo region: the whole hero here, the right-hand side of the dark split. */
.hero__media {
	position: absolute;
	inset: 0;
}

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

.hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: 0.58;
	filter: grayscale(10%) contrast(1.04);
	object-position: center right;
}

.hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.88) 46%, rgba(255, 255, 255, 0.3) 100%),
		linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(244, 246, 248, 0.48) 100%);
}

/* Below 900px the copy spans the full width, so the right-hand side needs
 * more veil too: keeps the red headline words at 4.5:1+ over dark areas of
 * any hero photo. */
@media (max-width: 899px) {
	.hero__overlay {
		background:
			linear-gradient(90deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.74) 100%),
			linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(244, 246, 248, 0.48) 100%);
	}
}

.hero__content {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1320px;
	margin: 0 auto;
	padding: clamp(28px, 4vw, 44px) 24px;
}

.hero__text {
	max-width: 720px;
}

/* Keep the copy on the light side of the overlay, clear of the image
   (the width the former two-column hero grid gave it). */
@media (min-width: 900px) {
	.hero__text {
		max-width: min(720px, 55%);
	}
}

.hero__eyebrow {
	color: var(--kdl-text-accent, #CE2029);
	margin-bottom: 20px;
}

.hero__headline {
	font-family: var(--kdl-font-sans, "IBM Plex Sans", sans-serif);
	font-size: clamp(36px, 5.5vw, 64px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0 0 20px;
	max-width: 720px;
	color: var(--kdl-text-strong, #0a0d11);
}

.hero__headline strong {
	color: var(--kdl-text-accent, #CE2029);
	font-weight: 700;
}

.hero__description {
	font-size: clamp(16px, 1.6vw, 20px);
	line-height: 1.5;
	color: var(--kdl-text-default, #3f4751);
	margin: 0 0 32px;
	max-width: 560px;
}

.hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

/* Neutral secondary next to the red primary. The link states match the
 * specificity of style.css's a.kdl-btn--secondary:link (0,2,1) so this
 * component's colour wins in every state, not only on hover. */
.hero__btn-secondary,
a.hero__btn-secondary:link,
a.hero__btn-secondary:visited {
	background: var(--kdl-gray-0, #fff);
	border-color: var(--kdl-border-default, #cfd6dd);
	color: var(--kdl-text-strong, #0a0d11);
}

.hero__btn-secondary:hover,
a.hero__btn-secondary:hover {
	background: var(--kdl-gray-50, #f4f6f8);
	border-color: var(--kdl-border-strong, #6c7682);
	color: var(--kdl-text-strong, #0a0d11);
}

/* ------------------------------------------------------------
 * Dark split: copy on steel with the KDL grid, the line photo at full
 * strength from 36% to the edge with the UPTON sign clear of the copy.
 * The photo is the LCP, so it is at its final opacity from frame 1.
 * --------------------------------------------------------- */
.hero--dark {
	--lens-r: 140px;
	align-items: center;
	background: var(--kdl-surface-inverse, #14181d);
	color: var(--kdl-text-on-dark, #f4f6f8);
	min-height: min(78vh, 720px);
}

/* The grid sits on the steel and dissolves into the photo. */
.hero--dark::after {
	background: var(--upton-grid-dark);
	content: "";
	inset: 0;
	-webkit-mask-image: linear-gradient(90deg, #000 30%, transparent 56%);
	mask-image: linear-gradient(90deg, #000 30%, transparent 56%);
	pointer-events: none;
	position: absolute;
	z-index: 1;
}

.hero--dark .hero__media {
	inset: 0 0 0 36%;
}

.hero--dark .hero__image {
	filter: contrast(1.05) saturate(0.92);
	object-position: 0% 8%;
	opacity: 1;
}

.hero--dark .hero__overlay {
	background: linear-gradient(90deg, #14181d 0%, #14181d 36%, rgba(20, 24, 29, 0.82) 44%, rgba(20, 24, 29, 0.32) 62%, rgba(20, 24, 29, 0.1) 100%);
}

@media (min-width: 900px) {
	.hero--dark .hero__text {
		max-width: min(620px, 42%);
	}
}

.hero--dark .hero__eyebrow {
	color: var(--kdl-copper-300, #f0a370);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.16em;
	margin: 0 0 24px;
}

.hero--dark .hero__headline {
	color: var(--kdl-gray-50, #f4f6f8);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

/* Quenched: copper-300 (8.6:1 on steel) with a faint cherry ember. */
.hero--dark .hero__headline strong {
	color: var(--kdl-copper-300, #f0a370);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 0 0.6em rgba(206, 32, 41, 0.34);
}

.hero--dark .hero__description {
	color: var(--kdl-gray-200, #cfd6dd);
}

.hero--dark .hero__btn-secondary,
.hero--dark a.hero__btn-secondary:link,
.hero--dark a.hero__btn-secondary:visited {
	background: transparent;
	border-color: rgba(244, 246, 248, 0.6);
	color: #fff;
}

.hero--dark .hero__btn-secondary:hover,
.hero--dark a.hero__btn-secondary:hover {
	background: rgba(244, 246, 248, 0.08);
	border-color: var(--kdl-gray-50, #f4f6f8);
	color: #fff;
}

.hero--dark .kdl-btn:focus-visible,
.hero__lens-toggle:focus-visible {
	outline: 2px solid var(--kdl-copper-300, #f0a370);
	outline-offset: 3px;
}

/* Thermal view: a stylized (not measured) thermal twin of the photo, laid
 * over it by hero.js. With a fine pointer a true-colour lens is cut out of
 * it at --lx / --ly. */
.hero__thermal {
	display: block;
	height: 100%;
	inset: 0;
	max-width: none;
	object-fit: cover;
	object-position: 0% 8%;
	opacity: 0;
	position: absolute;
	transition: opacity var(--kdl-dur-slow, 360ms) var(--kdl-ease-standard, ease);
	width: 100%;
}

.hero--dark[data-view="thermal"] .hero__thermal {
	opacity: 1;
}

.hero__lens {
	aspect-ratio: 1;
	border-radius: 50%;
	box-shadow: 0 0 0 1.5px rgba(255, 246, 229, 0.9), 0 0 0 3px rgba(10, 13, 17, 0.45);
	display: none;
	left: var(--lx, 50%);
	pointer-events: none;
	position: absolute;
	top: var(--ly, 30%);
	translate: -50% -50%;
	width: calc(2 * var(--lens-r));
	z-index: 1;
}

.hero__lens-label {
	background: rgba(10, 13, 17, 0.82);
	border-radius: var(--kdl-radius-xs, 2px);
	color: var(--kdl-gray-50, #f4f6f8);
	font: 500 11px/1 var(--kdl-font-mono, Lilex, monospace);
	left: 50%;
	letter-spacing: 0.14em;
	padding: 5px 8px;
	position: absolute;
	text-transform: uppercase;
	top: 100%;
	translate: -50% 8px;
	white-space: nowrap;
}

.is-lens-low .hero__lens-label {
	top: auto;
	bottom: 100%;
	translate: -50% -8px;
}

@media (pointer: fine) {
	.hero--dark[data-view="thermal"][data-lens] .hero__thermal {
		-webkit-mask-image: radial-gradient(circle var(--lens-r) at var(--lx) var(--ly), transparent 98%, #000 100%);
		mask-image: radial-gradient(circle var(--lens-r) at var(--lx) var(--ly), transparent 98%, #000 100%);
	}

	.hero--dark[data-view="thermal"][data-lens] .hero__lens {
		display: block;
	}
}

.hero__lens-toggle {
	align-items: center;
	background: rgba(10, 13, 17, 0.76);
	border: 1px solid rgba(244, 246, 248, 0.45);
	border-radius: var(--kdl-radius-sm, 4px);
	bottom: 20px;
	color: var(--kdl-gray-50, #f4f6f8);
	cursor: pointer;
	display: inline-flex;
	font: 500 12px/1.2 var(--kdl-font-mono, Lilex, monospace);
	gap: 10px;
	letter-spacing: 0.12em;
	min-height: 40px;
	padding: 8px 14px;
	position: absolute;
	right: 24px;
	text-transform: uppercase;
	transition: --heat var(--upton-heat-cool, 650ms) var(--upton-heat-cool-ease, ease-out);
	z-index: 3;
}

/* Heats like every other control: a bar runs out along the ramp. */
.hero__lens-toggle::after {
	background: var(--heat-c);
	bottom: 5px;
	content: "";
	height: 2px;
	left: 14px;
	pointer-events: none;
	position: absolute;
	right: 14px;
	transform: scaleX(var(--heat-len));
	transform-origin: left center;
}

.hero__lens-toggle:focus-visible {
	--heat: 1;
	transition-duration: var(--upton-heat-rise, 360ms);
}

@media (hover: hover) {
	.hero__lens-toggle:hover {
		--heat: 1;
		border-color: var(--kdl-gray-50, #f4f6f8);
		transition-duration: var(--upton-heat-rise, 360ms);
	}
}

@media (pointer: coarse) {
	.hero__lens-toggle {
		min-height: 44px;
	}
}

.hero__lens-toggle[aria-pressed="true"] {
	background: var(--kdl-gray-50, #f4f6f8);
	border-color: var(--kdl-gray-50, #f4f6f8);
	color: var(--kdl-gray-900, #0a0d11);
}

.hero__lens-toggle[aria-busy="true"] {
	cursor: progress;
}

.hero__lens-swatch {
	background: linear-gradient(90deg, #0b1636, #261650 18%, #6a1242 36%, var(--upton-heat-3, #CE2029) 52%, var(--upton-heat-5, #e8541e) 68%, var(--upton-heat-6, #f5a13a) 84%, var(--upton-heat-8, #fff6e5));
	border-radius: 1px;
	box-shadow: 0 0 0 1px rgba(163, 174, 184, 0.5);
	flex: none;
	height: 8px;
	width: 28px;
}

/* Below 900px: the photo full-bleed above the copy (the whole 16:9 frame
 * on tablets, 4:3 on phones), no veil, a 6px heat edge between them. */
@media (max-width: 899px) {
	.hero--dark {
		--lens-r: 92px;
		align-items: stretch;
		background: var(--upton-grid-dark), var(--kdl-surface-inverse, #14181d);
		flex-direction: column;
		min-height: 0;
	}

	.hero--dark::after,
	.hero--dark .hero__overlay {
		display: none;
	}

	/* The media follows the copy in the DOM (tab order); show it first. */
	.hero--dark .hero__media {
		aspect-ratio: 16 / 9;
		flex: none;
		inset: auto;
		order: -1;
		position: relative;
	}

	.hero--dark .hero__media::after {
		background: var(--upton-heat-bar);
		bottom: 0;
		content: "";
		height: 6px;
		left: 0;
		position: absolute;
		right: 0;
		z-index: 1;
	}

	.hero--dark .hero__image,
	.hero--dark .hero__thermal {
		object-position: 10% 0%;
	}

	.hero--dark .hero__content {
		padding: 28px 24px 36px;
	}

	.hero--dark .hero__lens-toggle {
		bottom: 18px;
		right: 12px;
	}

	.hero--dark .hero__eyebrow {
		margin-bottom: 20px;
	}
}

/* Phones: 4:3 keeps the photo tall enough to read; the buttons share a row
 * when they fit and fill it when they wrap. */
@media (max-width: 599px) {
	.hero--dark .hero__media {
		aspect-ratio: 4 / 3;
	}

	.hero--dark .hero__eyebrow {
		font-size: 12px;
		letter-spacing: 0.12em;
	}

	.hero--dark .hero__cta {
		gap: 12px;
	}

	.hero--dark .hero__cta .kdl-btn {
		flex: 1 1 auto;
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* Load: the headline's words rise in turn; the <strong> phrase arrives white
 * hot and quenches through yellow and orange to copper-300 (every step is
 * 8:1 or better on steel). */
@media (prefers-reduced-motion: no-preference) {
	.hero--dark .hero__word {
		animation: upton-hero-rise 640ms cubic-bezier(0.2, 0.7, 0.2, 1) calc(90ms + var(--i, 0) * 60ms) both;
		display: inline-block;
	}

	.hero--dark .hero__headline strong .hero__word {
		animation:
			upton-hero-rise-hot 640ms cubic-bezier(0.2, 0.7, 0.2, 1) calc(90ms + var(--i, 0) * 60ms) both,
			upton-hero-quench 900ms cubic-bezier(0.22, 0.6, 0.35, 1) calc(150ms + var(--i, 0) * 60ms) both;
	}
}

@keyframes upton-hero-rise {
	from {
		opacity: 0;
		transform: translateY(0.42em);
	}

	55% {
		opacity: 1;
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* Hot words are opaque almost at once so they read as white heat, not grey. */
@keyframes upton-hero-rise-hot {
	from {
		opacity: 0;
		transform: translateY(0.42em);
	}

	16% {
		opacity: 1;
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes upton-hero-quench {
	0% {
		color: var(--upton-heat-8, #fff6e5);
		text-shadow: 0 0 0.08em var(--upton-heat-7, #ffd98a), 0 0 0.42em rgba(245, 161, 58, 1), 0 0 1.15em rgba(232, 84, 30, 0.9);
	}

	22% {
		color: var(--upton-heat-7, #ffd98a);
		text-shadow: 0 0 0.05em rgba(245, 161, 58, 0.9), 0 0 0.42em rgba(232, 84, 30, 0.9), 0 0 1.1em rgba(206, 32, 41, 0.75);
	}

	50% {
		color: var(--upton-heat-6, #f5a13a);
		text-shadow: 0 0 0 transparent, 0 0 0.38em rgba(206, 32, 41, 0.65), 0 0 1em rgba(139, 19, 24, 0.6);
	}

	100% {
		color: var(--kdl-copper-300, #f0a370);
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 0 0.6em rgba(206, 32, 41, 0.34), 0 0 0 transparent;
	}
}

@media (forced-colors: active) {
	.hero--dark::after,
	.hero--dark .hero__overlay {
		display: none;
	}

	/* Inline-block words get their own backplates, which clip descenders. */
	.hero--dark .hero__word {
		animation: none;
		display: inline;
	}

	/* No scrim in this mode, so keep the photo clear of the copy. */
	@media (min-width: 900px) {
		.hero--dark .hero__media {
			inset: 0 0 0 50%;
		}
	}

	.hero__lens {
		outline: 2px solid CanvasText;
	}

	.hero__lens-toggle[aria-pressed="true"] {
		outline: 2px solid Highlight;
		outline-offset: 2px;
	}
}

@media print {
	.hero--dark {
		background: #fff !important;
		color: #000 !important;
	}

	.hero--dark::after,
	.hero--dark .hero__media {
		display: none !important;
	}

	.hero--dark .hero__text {
		max-width: none;
	}

	.hero--dark :is(.hero__eyebrow, .hero__headline, .hero__headline strong, .hero__word, .hero__description) {
		animation: none !important;
		color: #000 !important;
		opacity: 1 !important;
		text-shadow: none !important;
		transform: none !important;
	}
}

/* ============================================================
 * Applications finder
 * ========================================================= */
.applications-finder-section {
	background: var(--kdl-surface-base, #fff);
}

.applications-finder-section__header {
	margin-bottom: clamp(24px, 4vw, 40px);
	max-width: 760px;
	width: 100%;
}

.applications-finder {
	border-bottom: 1px solid var(--kdl-border-default, #cfd6dd);
	border-top: 1px solid var(--kdl-border-default, #cfd6dd);
	display: grid;
	gap: clamp(28px, 4vw, 56px);
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-left: auto;
	margin-right: auto;
	max-width: 1320px;
	padding: clamp(24px, 4vw, 40px) 0;
	width: 100%;
}

.applications-finder__group {
	min-width: 0;
}

.applications-finder-section .upton-section__title,
.applications-finder-section .upton-section__lede {
	max-width: 100%;
	overflow-wrap: anywhere;
}

.applications-finder__group-title {
	color: var(--kdl-text-muted, #6c7682);
	font-family: var(--kdl-font-mono, Lilex, monospace);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.3;
	margin: 0 0 12px;
	text-transform: uppercase;
}

.applications-finder__links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.applications-finder__item {
	border-top: 1px solid var(--kdl-border-subtle, #e7ebef);
	margin: 0;
}

.applications-finder__link {
	align-items: center;
	/* Heated, a warm wash spreads from the left and a bar runs out under
	 * the row along the heat ramp (--heat, style.css). */
	background: linear-gradient(90deg, color-mix(in srgb, var(--upton-heat-6, #f5a13a) calc(var(--heat) * 13%), transparent), transparent 75%);
	color: var(--kdl-text-strong, #0a0d11);
	display: flex;
	font-size: clamp(16px, 1.3vw, 18px);
	font-weight: 600;
	gap: 12px;
	justify-content: space-between;
	line-height: 1.35;
	min-height: 48px;
	padding: 11px 4px 11px 2px;
	position: relative;
	text-decoration: none;
	transition: --heat var(--upton-heat-cool, 650ms) var(--upton-heat-cool-ease, ease-out);
}

.applications-finder__link::after {
	background: var(--heat-c);
	bottom: -1px;
	box-shadow: 0 0 calc(var(--heat) * 10px) var(--heat-glow);
	content: "";
	height: 2px;
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	transform: scaleX(var(--heat-len));
	transform-origin: left center;
}

.applications-finder__link:focus-visible {
	--heat: 1;
	transition-duration: var(--upton-heat-rise, 360ms);
	transition-timing-function: var(--upton-heat-rise-ease, ease-out);
}

@media (hover: hover) {
	.applications-finder__link:hover {
		--heat: 1;
		transition-duration: var(--upton-heat-rise, 360ms);
		transition-timing-function: var(--upton-heat-rise-ease, ease-out);
	}
}

.applications-finder__link span:first-child {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* The arrow rests muted and turns copper as the row heats. */
.applications-finder__arrow {
	color: color-mix(in oklab, var(--kdl-copper-500, #c2632a) calc(var(--heat) * 100%), var(--kdl-gray-400, #6c7682));
	flex: 0 0 auto;
	transform: translateX(calc(var(--heat) * 4px));
}

.applications-finder__link:hover,
.applications-finder__link:focus {
	color: var(--kdl-text-strong, #0a0d11);
	text-decoration: none;
}

.applications-finder__link:focus-visible {
	border-radius: 2px;
	outline: 2px solid var(--kdl-copper-500, #B66723);
	outline-offset: 4px;
}

.applications-finder__cta {
	display: flex;
	margin: clamp(24px, 4vw, 36px) auto 0;
	max-width: 1320px;
	width: 100%;
}

@media screen and (max-width: 1080px) {
	.applications-finder {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media screen and (max-width: 640px) {
	.applications-finder {
		gap: 28px;
		grid-template-columns: 1fr;
	}

	.applications-finder__cta .kdl-btn {
		width: 100%;
	}
}

/* ============================================================
 * Capabilities
 * ========================================================= */
.capabilities-section {
	background: var(--kdl-surface-base, #fff);
}

.capabilities-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: clamp(24px, 3vw, 40px);
}

.capability {
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 8px 0;
}

.capability__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: var(--kdl-accent-50, #fde8ea);
	color: var(--kdl-accent-500, #CE2029);
	border-radius: 8px;
	font-size: 22px;
}

.capability__heading {
	margin: 0;
	font-family: var(--kdl-font-sans, "IBM Plex Sans", sans-serif);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--kdl-text-strong, #0a0d11);
}

.capability__body {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--kdl-text-default, #3f4751);
}