/*
 * Technology page.
 *
 * Layout follows the Stitch "Velocity Industrial" comp
 * (HILO Design files/stitch_hilo_official_brand_website): a dark full-bleed
 * hero, three alternating copy/image blocks with sharp-cornered spec chips
 * and a stat badge over the image, then a centred stats band.
 *
 * The comp's own palette and type (Anybody / Hanken Grotesk, red-orange, no
 * cyan) are deliberately NOT used — those belong to a different design system
 * from the one the rest of the site is built on. Everything here draws from
 * the tokens in base.css.
 */

/* ---------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------- */
.hl-tech-page__hero {
	position: relative;
	padding: clamp(56px, 8vw, 120px) 0 clamp(48px, 6vw, 96px);
	background: var(--hl-black-2);
	border-bottom: 1px solid var(--hl-line);
	overflow: hidden;
}

.hl-tech-page__hero-media {
	position: absolute;
	inset: 0;
}
.hl-tech-page__hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* The comp runs the headline over a dark cutaway photo. Without a scrim the
   headline's legibility depends entirely on which image is uploaded. */
.hl-tech-page__scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(90deg,
		rgba(11, 14, 18, 0.96) 0%,
		rgba(11, 14, 18, 0.86) 45%,
		rgba(11, 14, 18, 0.45) 100%);
}

.hl-tech-page__texture {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: linear-gradient(rgba(23, 231, 220, 0.05) 1px, transparent 1px);
	background-size: 100% 8px;
	animation: hiloDrift 14s linear infinite;
}

.hl-tech-page__hero-inner { position: relative; }

/* Bordered mono chip, as in the comp's "HILO ENGINEERING" label. */
.hl-tech-page__kicker {
	display: inline-block;
	margin: 18px 0 0;
	padding: 7px 12px;
	border: 1px solid var(--hl-cyan-hairline);
	border-radius: var(--hl-radius-btn);
	font: 500 10px/1 var(--hl-font-mono);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--hl-cyan);
}

.hl-tech-page__heading {
	margin: 22px 0 0;
	font: 700 clamp(36px, 5.6vw, 72px)/1.02 var(--hl-font-head);
	text-transform: uppercase;
	letter-spacing: -0.02em;
	max-width: 16ch;
}

.hl-tech-page__heading-accent {
	background: linear-gradient(100deg, var(--hl-orange), var(--hl-red));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.hl-tech-page__intro {
	margin: 24px 0 0;
	max-width: 560px;
	font: 400 16px/1.7 var(--hl-font-body);
	color: var(--hl-body);
	text-wrap: pretty;
}

/* ---------------------------------------------------------------------
   Alternating feature blocks
   --------------------------------------------------------------------- */
.hl-techblock {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: clamp(28px, 5vw, 72px);
	align-items: center;
	padding: clamp(44px, 6vw, 88px) 0;
	border-bottom: 1px solid var(--hl-line);
}
.hl-techblock:last-of-type { border-bottom: none; }

/* Every second block puts the image on the left. Done with grid order rather
   than by reversing the markup, so reading order stays copy-then-image for
   screen readers on every block. */
.hl-techblock--flip .hl-techblock__copy { order: 2; }
.hl-techblock--flip .hl-techblock__media { order: 1; }

.hl-techblock__title {
	margin: 0;
	font: 700 clamp(26px, 3.2vw, 40px)/1.08 var(--hl-font-head);
	text-transform: uppercase;
	letter-spacing: -0.01em;
	max-width: 11ch;
}

.hl-techblock__body {
	margin: 18px 0 0;
	max-width: 52ch;
	font: 400 15px/1.75 var(--hl-font-body);
	color: var(--hl-body);
	text-wrap: pretty;
}

/* Sharp corners on purpose — the comp specifies no radius on spec chips, to
   set them apart from the rounded pills used for filters elsewhere. */
.hl-specchips {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 24px 0 0;
	padding: 0;
}

.hl-specchip {
	padding: 7px 12px;
	border-radius: 0;
	background: var(--hl-black);
	border: 1px solid rgba(245, 160, 28, 0.35);
	font: 500 10px/1.2 var(--hl-font-mono);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--hl-orange);
}

.hl-techblock__media {
	position: relative;
	border: 1px solid var(--hl-line-2);
	border-radius: var(--hl-radius-card);
	overflow: hidden;
	background: var(--hl-surface);
	aspect-ratio: 16 / 10;
}
.hl-techblock__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Stat badge, bottom-right in the comp. Absolutely positioned over the image
   with its own solid ground so it stays readable on any photo. */
.hl-techblock__stat {
	position: absolute;
	right: 14px;
	bottom: 14px;
	padding: 12px 16px;
	background: rgba(7, 8, 10, 0.92);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: 1px solid var(--hl-line-2);
	border-radius: var(--hl-radius-btn);
	max-width: 60%;
}

.hl-techblock__stat-label {
	display: block;
	font: 500 9px/1.3 var(--hl-font-mono);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--hl-orange);
}

.hl-techblock__stat-value {
	display: inline-block;
	margin-top: 6px;
	font: 700 24px/1 var(--hl-font-head);
	color: var(--hl-text);
}

.hl-techblock__stat-note {
	display: inline-block;
	margin-left: 6px;
	font: 400 12px/1 var(--hl-font-body);
	color: var(--hl-muted);
}

/* ---------------------------------------------------------------------
   Global scale band
   --------------------------------------------------------------------- */
.hl-scale {
	padding: clamp(56px, 7vw, 104px) 0;
	background: var(--hl-black-2);
	border-top: 1px solid var(--hl-line);
	border-bottom: 1px solid var(--hl-line);
	text-align: center;
}

.hl-scale__heading {
	margin: 0;
	font: 700 clamp(30px, 4.4vw, 56px)/1.06 var(--hl-font-head);
	text-transform: uppercase;
	letter-spacing: -0.02em;
}

.hl-scale__body {
	margin: 20px auto 0;
	max-width: 62ch;
	font: 400 16px/1.7 var(--hl-font-body);
	color: var(--hl-body);
	text-wrap: pretty;
}

.hl-scale__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin: clamp(32px, 4vw, 56px) 0 0;
	text-align: left;
}

.hl-scale__card {
	padding: 26px 24px;
	background: var(--hl-surface);
	border: 1px solid var(--hl-line-2);
	border-radius: var(--hl-radius-card);
}

/* dd before dt in the markup so the figure is read first; both are block, so
   the visual order matches without an ordering override. */
.hl-scale__value {
	margin: 0;
	font: 700 clamp(34px, 4vw, 52px)/1 var(--hl-font-head);
	background: linear-gradient(100deg, var(--hl-orange), var(--hl-red));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.hl-scale__label {
	margin-top: 10px;
	font: 700 15px/1.2 var(--hl-font-head);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--hl-text);
}

.hl-scale__note {
	margin: 10px 0 0;
	font: 400 13px/1.6 var(--hl-font-body);
	color: var(--hl-muted);
}

/* ---------------------------------------------------------------------
   Tail
   --------------------------------------------------------------------- */
.hl-tech-page__content {
	padding-top: clamp(40px, 5vw, 64px);
	max-width: 780px;
	font: 400 16px/1.7 var(--hl-font-body);
	color: var(--hl-body);
}

.hl-tech-page__cta {
	padding: clamp(48px, 6vw, 80px) var(--hl-pad-x) clamp(56px, 7vw, 88px);
	text-align: center;
}
.hl-tech-page__cta p {
	margin: 14px auto 26px;
	max-width: 46ch;
	font: 400 16px/1.65 var(--hl-font-body);
	color: var(--hl-body);
}

/* ---------------------------------------------------------------------
   Breakpoints
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
	.hl-techblock {
		grid-template-columns: minmax(0, 1fr);
		gap: 26px;
	}
	/* Copy first on every block once they stack — alternating sides only
	   makes sense side by side. */
	.hl-techblock--flip .hl-techblock__copy,
	.hl-techblock--flip .hl-techblock__media { order: initial; }

	.hl-techblock__title { max-width: none; }
	.hl-scale__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
	.hl-scale__card { padding: 20px 18px; }
}

@media (max-width: 620px) {
	.hl-scale__grid { grid-template-columns: minmax(0, 1fr); }
	.hl-techblock__stat { max-width: 78%; right: 10px; bottom: 10px; }
	.hl-tech-page__heading { max-width: none; }
}