/* ==========================================================================
   HvacLowTemp. Precision-industrial grid, cold-room controller signature.

   Grid maths: .wrap pads by gutter + cell. Every band draws six column rules
   inside the gutter box, BEHIND its content (::before at z-index -1 in an
   isolated band). Twelve-column grids use a column gap of 2 x cell, so every
   even column starts exactly one cell to the right of a rule.
   ========================================================================== */

:root {
	--ink: #141618;
	--ink-2: #1b1e21;
	--bezel: #0d0e0f;
	--glass: #05080a;
	--paper: #eeefec;
	--paper-2: #e3e5e1;
	--text: #141618;
	--text-2: #474d53;
	--text-ink: #f2f3f1;
	--text-ink-2: #a9afb5;
	--line: rgba(20, 22, 24, 0.14);
	--line-strong: rgba(20, 22, 24, 0.32);
	--line-ink: rgba(255, 255, 255, 0.1);
	--line-ink-strong: rgba(255, 255, 255, 0.24);
	--rule: rgba(128, 128, 128, 0.17);
	--blue: #0a12df;
	--blue-hover: #070bb0;
	--blue-ink: #9fb0ff;
	--lcd: #8fd3ff;
	--lcd-glow: rgba(143, 211, 255, 0.5);
	--alarm: #ff3b30;
	--error: #b3261e;
	--error-ink: #ff8a80;

	--f-display: "Sofia Sans Extra Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
	--f-label: "Sofia Sans Semi Condensed", "Sofia Sans", "Segoe UI", sans-serif;
	--f-body: "Sofia Sans", "Segoe UI", system-ui, sans-serif;

	--gutter: clamp(16px, 4vw, 56px);
	--cell: clamp(10px, 1.4vw, 22px);
	--band-y: clamp(72px, 9vw, 144px);
	--head-h: 72px;
	--ease: cubic-bezier(0.22, 1, 0.36, 1);

	/* Form palette, re-pointed inside dark bands. */
	--f-bg: #fff;
	--f-text: var(--text);
	--f-label-c: var(--text);
	--f-hint: var(--text-2);
	--f-border: rgba(20, 22, 24, 0.3);
	--f-focus: var(--blue);
	--f-error: var(--error);
	--focus: var(--blue);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--head-h) + 16px); }
body {
	margin: 0;
	background: var(--paper);
	color: var(--text);
	font: 400 1.0625rem/1.55 var(--f-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
address { font-style: normal; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.band--ink :focus-visible, .foot :focus-visible { --focus: var(--lcd); }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.skip {
	position: absolute; left: 16px; top: -100px; z-index: 200;
	padding: 12px 18px; background: var(--blue); color: #fff;
	font: 700 1rem var(--f-label); text-decoration: none;
}
.skip:focus { top: 12px; }
.main:focus { outline: none; }

/* ---------- Frame & column rules ---------- */
.wrap {
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: calc(var(--gutter) + var(--cell));
}
.band, .head, .foot { isolation: isolate; }
.band::before, .head::before, .foot::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(50% - min(50%, 720px) + var(--gutter));
	right: calc(50% - min(50%, 720px) + var(--gutter));
	z-index: -1;
	pointer-events: none;
	border-right: 1px solid var(--rule);
	background: repeating-linear-gradient(to right, var(--rule) 0 1px, transparent 1px calc(100% / var(--cols)));
}
:root { --cols: 1; }
@media (min-width: 720px) { :root { --cols: 3; } }
@media (min-width: 1100px) { :root { --cols: 6; } }

/* ---------- Type ---------- */
.hero__title, .phead__title, h2[class], .eq__title, .team__name {
	font-family: var(--f-display);
	font-weight: 800;
	letter-spacing: -0.01em;
	text-wrap: balance;
}
h2[class] { font-size: clamp(2.375rem, 1.55rem + 2.6vw, 4rem); line-height: 0.94; }
.prose h2, .prose h3 { font-family: var(--f-display); text-wrap: balance; }

/* ---------- Bands ---------- */
.band { position: relative; padding-block: var(--band-y); }
.band--tight { padding-block: clamp(48px, 6vw, 80px) 0; }
.band--ink {
	background: var(--ink);
	color: var(--text-ink);
	--f-bg: #0b0d0f;
	--f-text: var(--text-ink);
	--f-label-c: var(--text-ink);
	--f-hint: var(--text-ink-2);
	--f-border: rgba(255, 255, 255, 0.26);
	--f-focus: var(--lcd);
	--f-error: var(--error-ink);
	--line: var(--line-ink);
	--line-strong: var(--line-ink-strong);
}
.band--paper { background: var(--paper); }
.band--paper + .band--paper { border-top: 1px solid var(--line); }

/* ---------- Grids (12 columns on desktop, one below) ---------- */
.job__grid, .hero__grid, .routes__grid, .svc__grid, .std__grid, .close__grid, .phead__grid,
.detail, .sgroup__grid, .miles__grid, .team__grid, .contact__grid, .range__head,
.foot__in, .proof__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: calc(2 * var(--cell));
	row-gap: clamp(40px, 5vw, 64px);
}
@media (min-width: 960px) {
	.job__grid, .hero__grid, .routes__grid, .svc__grid, .std__grid, .close__grid, .phead__grid,
	.detail, .sgroup__grid, .miles__grid, .team__grid, .contact__grid, .range__head,
	.foot__in, .proof__grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}
}

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55em;
	min-height: 52px;
	padding: 0 1.35em;
	border: 1.5px solid transparent;
	border-radius: 3px;
	font: 700 1rem/1 var(--f-label);
	letter-spacing: 0.02em;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.btn .icon { width: 20px; height: 20px; flex: none; }
.btn--primary, .btn--header { background: var(--blue); color: #fff; }
.btn--primary:hover, .btn--header:hover { background: var(--blue-hover); }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: var(--blue); }
.btn--outline, .btn--outline-call { border-color: var(--line-strong); color: var(--text); }
.btn--outline:hover, .btn--outline-call:hover { border-color: var(--text); background: var(--text); color: var(--paper); }
.band--ink .btn--outline, .band--ink .btn--outline-call { border-color: rgba(255, 255, 255, 0.4); color: var(--text-ink); }
.band--ink .btn--outline:hover, .band--ink .btn--outline-call:hover { background: var(--text-ink); border-color: var(--text-ink); color: var(--ink); }
.btn--ghost { border-color: var(--blue); color: var(--blue); }
.btn--ghost:hover { background: var(--blue); color: #fff; }
.btn__num { font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.btn--call .btn__num { font-weight: 800; }

.more {
	display: inline-flex; align-items: center; gap: 0.5em;
	font: 700 1rem var(--f-label);
	color: var(--text);
	text-decoration: none;
}
.more .icon { width: 20px; height: 20px; transition: transform 0.25s var(--ease); }
.more:hover { color: var(--blue); }
.more:hover .icon { transform: translateX(4px); }

/* ---------- Header ---------- */
.head {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--paper);
	border-bottom: 1px solid var(--line);
}
.admin-bar .head { top: 32px; }
@media (max-width: 782px) { .admin-bar .head { top: 0; } }
.head__in {
	display: flex;
	align-items: center;
	gap: 24px;
	height: var(--head-h);
}
.brand { display: block; flex: none; }
.brand__logo { height: 50px; width: auto; }
.nav { margin-inline: auto; }
.nav__list { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 36px); }
.nav__list a {
	display: block;
	padding: 8px 0;
	font: 700 1rem var(--f-label);
	letter-spacing: 0.01em;
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
	transition: background-size 0.3s var(--ease), color 0.2s;
}
.nav__list a:hover { color: var(--blue); background-size: 100% 2px; }
.nav__list .current-menu-item > a, .nav__list a[aria-current="page"] { color: var(--blue); background-size: 100% 2px; }
.nav__extra { display: none; }
.head__act { display: flex; align-items: center; gap: 10px; flex: none; }
.btn--header { min-height: 46px; padding: 0 1.1em; }
.head__toggle { display: none; }

@media (max-width: 1159px) {
	.btn--header .btn__num { display: none; }
}
@media (max-width: 959px) {
	:root { --head-h: 64px; }
	.brand__logo { height: 40px; }
	.head__act { margin-left: auto; }
	.head__toggle {
		display: inline-grid; place-items: center;
		width: 46px; height: 46px;
		border: 1.5px solid var(--line-strong); border-radius: 3px;
		background: transparent;
	}
	.head__toggle .icon { width: 22px; height: 22px; grid-area: 1 / 1; }
	.head__toggle .is-open, .head.is-open .head__toggle .is-closed { display: none; }
	.head.is-open .head__toggle .is-open { display: block; }
	.nav {
		position: absolute;
		top: 100%; left: 0; right: 0;
		max-height: calc(100vh - var(--head-h));
		overflow: auto;
		background: var(--paper);
		border-bottom: 1px solid var(--line-strong);
		padding: 8px calc(var(--gutter) + var(--cell)) 28px;
		display: none;
	}
	.head.is-open .nav { display: block; }
	.nav__list { display: block; }
	.nav__list li { border-bottom: 1px solid var(--line); }
	.nav__list a { padding: 16px 0; font: 800 2rem/1 var(--f-display); background: none; }
	.nav__extra { display: block; margin-top: 24px; }
	.nav__extra .btn { width: 100%; }
}
@media (max-width: 400px) {
	.brand__logo { height: 34px; }
	.btn--header { padding: 0 0.85em; }
}

/* ---------- Frames ---------- */
.frame {
	position: relative;
	display: block;
	background: var(--paper-2);
}
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame--ink { background: var(--ink-2); }

/* ---------- Seven-segment display ---------- */
.seg { width: 100%; height: auto; overflow: visible; }
.seg__s, .seg__dp { fill: var(--lcd); opacity: 0.075; }
.seg .is-on { opacity: 1; filter: drop-shadow(0 0 5px var(--lcd-glow)); }

/* ---------- Alarm LED line ---------- */
.alarm {
	display: inline-flex; align-items: center; gap: 12px;
	margin-top: 28px;
	font: 700 0.875rem var(--f-label);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-ink-2);
}
.alarm__led {
	width: 10px; height: 10px; border-radius: 50%;
	background: var(--alarm);
	box-shadow: 0 0 8px 1px rgba(255, 59, 48, 0.55);
}

/* ---------- Hero ---------- */
.hero { padding-block: clamp(56px, 8vw, 128px) clamp(72px, 9vw, 136px); }
.hero__grid { align-items: start; }
.hero__title {
	font-size: clamp(3rem, 1.6rem + 5vw, 6rem);
	line-height: 0.9;
	max-width: 15.5ch;
}
.hero__lede {
	margin-top: clamp(20px, 2.2vw, 30px);
	max-width: 54ch;
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
	line-height: 1.5;
	color: var(--text-ink-2);
}
.hero__act { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(28px, 3vw, 40px); }
.hero__ctl { max-width: 600px; width: 100%; }
@media (min-width: 960px) {
	.hero__text { grid-column: 1 / span 7; }
	.hero__ctl { grid-column: 8 / span 5; justify-self: end; margin-top: 0.4rem; }
}

/* ---------- Controller ----------
   A photographed housing; live parts are positioned in % of the photo, which
   is cropped to 1985 x 1594. Measured: screen window x 8.97% y 11.10% w 81.71%
   h 37.77%; LED centres x 18.69/39.50/60.30/81.06% y 57.84%, d 3.43%;
   keys x 11.74/32.54/53.35/74.11% y 66.25% w 13.65% h 16.94%. */
.ctl { margin: 0; }
.ctl__dev {
	position: relative;
	aspect-ratio: 1985 / 1594;
	width: 100%;
	container-type: inline-size;
	filter: drop-shadow(0 40px 46px rgba(0, 0, 0, 0.55));
}
.ctl__housing { position: absolute; inset: 0; width: 100%; height: 100%; }
.ctl__screen {
	position: absolute;
	left: 8.97%; top: 11.1%; width: 81.71%; height: 37.77%;
	display: flex; align-items: center; justify-content: center; gap: 2.4cqw;
	padding: 0 5cqw 0 3cqw;
}
.ctl__screen .seg { width: auto; height: 74%; flex: 0 1 auto; min-width: 0; }
.ctl__unit {
	align-self: flex-start;
	margin-top: 4.6cqw;
	font: 700 4.2cqw/1 var(--f-label);
	color: var(--lcd);
	text-shadow: 0 0 6px var(--lcd-glow);
}
.ctl__led {
	position: absolute;
	top: 57.84%;
	width: 3.43%;
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
}
.ctl__led--1 { left: 18.69%; }
.ctl__led--2 { left: 39.5%; }
.ctl__led--3 { left: 60.3%; }
.ctl__led--4 { left: 81.06%; }
.ctl__led i { position: absolute; inset: 18%; border-radius: 50%; }
.ctl__led.is-on i { background: var(--lcd); box-shadow: 0 0 1.6cqw 0.3cqw var(--lcd-glow); }
.ctl__led--alm.is-on i { background: var(--alarm); box-shadow: 0 0 1.6cqw 0.3cqw rgba(255, 59, 48, 0.6); }
.ctl__led span {
	position: absolute;
	top: 50%; left: calc(100% + 1.3cqw);
	transform: translateY(-50%);
	font: 700 2.05cqw/1 var(--f-label);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #8d959c;
	white-space: nowrap;
}
.ctl__key {
	position: absolute;
	top: 66.25%; width: 13.65%; height: 16.94%;
	display: grid; place-items: center;
	padding: 0;
	border: 0;
	border-radius: 1.2cqw;
	background: transparent;
	color: #c3c9ce;
	font: 700 2.6cqw/1 var(--f-label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	transition: background-color 0.15s, transform 0.08s;
}
.ctl__key--1 { left: 11.74%; }
.ctl__key--2 { left: 32.54%; }
.ctl__key--3 { left: 53.35%; }
.ctl__key--4 { left: 74.11%; }
.ctl__key .icon { width: 5.2cqw; height: 5.2cqw; }
.ctl__key--print { color: #9aa1a7; }
button.ctl__key { cursor: pointer; }
button.ctl__key:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
button.ctl__key:active { background: rgba(0, 0, 0, 0.28); transform: translateY(0.25cqw); }
button.ctl__key:focus-visible { outline: 3px solid var(--lcd); outline-offset: 3px; }
.ctl__cap { display: grid; gap: 4px; min-height: 4.6em; margin-top: 20px; padding-left: 4%; }
.ctl__label { font: 700 1.5rem/1.1 var(--f-display); color: var(--text-ink); }
.ctl__ind { font: 500 0.9375rem/1.4 var(--f-label); color: var(--text-ink-2); }

/* ---------- Routes ---------- */
.route { display: flex; flex-direction: column; padding-top: 28px; border-top: 1.5px solid var(--text); }
.route__title { font-size: clamp(2.375rem, 1.6rem + 2.4vw, 3.75rem); }
.route__title a { text-decoration: none; }
.route__title a:hover { color: var(--blue); }
.route__text { margin-top: 16px; max-width: 46ch; color: var(--text-2); font-size: 1.125rem; }
.route__media { flex: 1; min-height: 300px; margin-top: 36px; overflow: hidden; }
.route__media img { position: absolute; inset: 0; transition: transform 0.8s var(--ease); }
.route__media:hover img { transform: scale(1.025); }
.route__links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 36px; }
@media (min-width: 960px) {
	.route--repairs { grid-column: 1 / span 7; }
	.route--equipment { grid-column: 8 / span 5; }
	.route__media { min-height: 380px; }
}

/* ---------- Services (home) ---------- */
.svc__title { max-width: 12ch; }
.svc__text { margin-top: 20px; max-width: 40ch; color: var(--text-2); font-size: 1.125rem; }
.svc__media { margin-top: 40px; aspect-ratio: 4 / 5; overflow: hidden; max-width: 360px; }
.svc__media img { position: absolute; inset: 0; }
.svc__group + .svc__group { margin-top: 48px; }
.svc__gname {
	padding-bottom: 12px;
	border-bottom: 1.5px solid var(--text);
	font: 700 0.8125rem var(--f-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.line {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 24px;
	column-gap: 20px;
	row-gap: 4px;
	align-items: center;
	padding: 18px 0;
	border-bottom: 1px solid var(--line);
	text-decoration: none;
}
.line__name { font: 700 1.5rem/1.1 var(--f-display); transition: color 0.2s; }
.line__desc { grid-column: 1; color: var(--text-2); font-size: 0.9688rem; line-height: 1.45; }
.line__go { grid-column: 2; grid-row: 1 / span 2; width: 22px; height: 22px; color: var(--text-2); transition: transform 0.25s var(--ease), color 0.2s; }
.line:hover .line__name, .line:hover .line__go { color: var(--blue); }
.line:hover .line__go { transform: translateX(4px); }
@media (min-width: 960px) {
	.svc__intro { grid-column: 1 / span 4; align-self: start; position: sticky; top: calc(var(--head-h) + 32px); }
	.svc__list { grid-column: 5 / span 8; }
}
@media (min-width: 1240px) {
	.line { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) 24px; }
	.line__desc { grid-column: 2; grid-row: 1; }
	.line__go { grid-column: 3; grid-row: 1; }
}

/* ---------- Range ---------- */
.range__head { align-items: end; }
.range__text { color: var(--text-ink-2); font-size: 1.125rem; max-width: 44ch; }
@media (min-width: 960px) {
	.range__title { grid-column: 1 / span 7; }
	.range__text { grid-column: 9 / span 4; }
}
.range::before { display: none; }
.range__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: clamp(48px, 6vw, 88px);
	border-top: 1px solid var(--line-ink);
	border-right: 1px solid var(--line-ink);
}
.range__item {
	min-width: 0;
	padding: clamp(24px, 3vw, 40px) var(--cell) 28px;
	border-left: 1px solid var(--line-ink);
	border-bottom: 1px solid var(--line-ink);
}
.range__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 720px) { .range__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } .range__item:last-child:nth-child(odd) { grid-column: auto; } }
@media (min-width: 1100px) { .range__list { grid-template-columns: repeat(5, minmax(0, 1fr)); } .range__item { border-bottom: 0; } }
.range__screen { display: flex; align-items: flex-start; gap: 6px; }
.range__screen .seg { flex: 1 1 auto; width: auto; min-width: 0; }
.range__unit { flex: none; font: 700 clamp(0.875rem, 0.7rem + 0.4vw, 1.125rem)/1 var(--f-label); color: var(--lcd); text-shadow: 0 0 6px var(--lcd-glow); margin-top: 2px; }
.range__label { margin-top: 22px; font: 700 1.5rem/1.1 var(--f-display); }
.range__ind { margin-top: 12px; }
.range__ind li {
	padding: 7px 0;
	border-top: 1px solid var(--line-ink);
	font: 500 0.9375rem/1.35 var(--f-label);
	color: var(--text-ink-2);
}

/* ---------- Standards ---------- */
.std__text { margin-top: 20px; color: var(--text-2); font-size: 1.125rem; max-width: 42ch; }
.std__list { border-top: 1.5px solid var(--text); }
.std__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px 32px;
	padding: 24px 0;
	border-bottom: 1px solid var(--line);
}
.std__row dt { font: 800 clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem)/1 var(--f-display); }
.std__row dd { color: var(--text-2); font-size: 1.0625rem; max-width: 52ch; align-self: center; }
@media (min-width: 720px) { .std__row { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
@media (min-width: 960px) {
	.std__head { grid-column: 1 / span 4; }
	.std__list { grid-column: 5 / span 8; }
}

/* ---------- Proof ---------- */
.proof__title { max-width: 16ch; }
.names {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	column-gap: calc(2 * var(--cell));
	margin-top: clamp(32px, 4vw, 56px);
	border-top: 1.5px solid var(--text);
}
.names li {
	display: flex; align-items: center; gap: 12px;
	padding: 16px 0;
	border-bottom: 1px solid var(--line);
	font: 700 clamp(1.25rem, 1rem + 0.7vw, 1.625rem)/1.1 var(--f-display);
}
.names li::before { content: ""; width: 6px; height: 6px; flex: none; background: var(--blue); }
.proof__grid { margin-top: clamp(56px, 7vw, 104px); align-items: start; }
.proof__media { aspect-ratio: 4 / 5; overflow: hidden; max-width: 460px; }
.proof__media img { position: absolute; inset: 0; }
.quote blockquote p {
	font: 600 clamp(1.625rem, 1.15rem + 1.5vw, 2.5rem)/1.1 var(--f-display);
	text-wrap: pretty;
	quotes: "\201C" "\201D";
}
.quote blockquote p::before { content: open-quote; }
.quote blockquote p::after { content: close-quote; }
.quote figcaption {
	margin-top: 16px;
	font: 700 0.8125rem var(--f-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-2);
}
.quote + .quote { margin-top: 44px; padding-top: 44px; border-top: 1px solid var(--line); }
@media (min-width: 960px) {
	.proof__media { grid-column: 1 / span 5; }
	.proof__quotes { grid-column: 7 / span 6; }
	.proof__grid:not(.has-image) .proof__quotes { grid-column: 1 / span 9; }
}
.makes { margin-top: clamp(56px, 7vw, 96px); padding-top: 24px; border-top: 1.5px solid var(--text); }
.makes__title { font: 700 0.8125rem var(--f-label) !important; letter-spacing: 0.1em; text-transform: uppercase; }
.makes__list { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 18px; }
.makes__list li { font: 600 1.0625rem var(--f-label); color: var(--text-2); }

/* ---------- Closing CTA ---------- */
.close__title { max-width: 11ch; }
.close__text { margin-top: 18px; color: var(--text-ink-2); font-size: 1.125rem; max-width: 46ch; }
.readout {
	display: inline-flex;
	flex-direction: column;
	gap: 14px;
	width: min(100%, 560px);
	margin-top: 36px;
	text-decoration: none;
}
.readout__screen {
	display: block;
	padding: 18px 20px 16px;
	background: var(--glass);
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 10px;
	box-shadow: inset 0 3px 14px rgba(0, 0, 0, 0.85);
	transition: border-color 0.25s, box-shadow 0.25s;
}
.readout:hover .readout__screen { border-color: rgba(143, 211, 255, 0.55); box-shadow: inset 0 3px 14px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(143, 211, 255, 0.25); }
.readout__cta { display: inline-flex; align-items: center; gap: 10px; font: 700 1.0625rem var(--f-label); color: var(--text-ink); }
.readout__cta .icon { width: 20px; height: 20px; color: var(--lcd); }
.readout:hover .readout__cta span { text-decoration: underline; text-underline-offset: 4px; }
.close__formtitle { font: 700 1.75rem/1.1 var(--f-display); margin-bottom: 24px; }
@media (min-width: 960px) {
	.close__call { grid-column: 1 / span 6; }
	.close__form { grid-column: 8 / span 5; }
}

/* ---------- Facts ---------- */
.facts { margin-top: 32px; }
.facts__row {
	display: grid;
	grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
	gap: 16px;
	padding: 14px 0;
	border-top: 1px solid var(--line);
}
.facts dt {
	display: inline-flex; align-items: center; gap: 8px; align-self: start;
	font: 700 0.75rem/1.6 var(--f-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-ink-2);
}
.facts dt .icon { width: 18px; height: 18px; flex: none; }
.facts dd { font: 500 1.0625rem/1.45 var(--f-label); overflow-wrap: anywhere; }
.facts a { text-underline-offset: 3px; }

/* ---------- Forms ---------- */
.form { position: relative; }
.form__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 24px; }
@media (min-width: 640px) {
	.form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.field--wide, .field--textarea, .form--compact [data-field="location"], .field--item { grid-column: 1 / -1; }
}
.field { min-width: 0; }
.field fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.field__label { display: block; margin-bottom: 8px; padding: 0; font: 700 0.9688rem/1.3 var(--f-label); color: var(--f-label-c); }
.field__req { color: var(--f-hint); }
.field input, .field select, .field textarea {
	display: block;
	width: 100%;
	min-height: 52px;
	padding: 12px 14px;
	background: var(--f-bg);
	color: var(--f-text);
	border: 1.5px solid var(--f-border);
	border-radius: 4px;
	font: 400 1.0625rem/1.4 var(--f-body);
	transition: border-color 0.2s, box-shadow 0.2s;
}
.field textarea { resize: vertical; min-height: 132px; }
.field select { appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 20px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--f-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--f-focus) 28%, transparent); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--f-error); }
.field__hint { margin-top: 6px; font-size: 0.875rem; color: var(--f-hint); }
.field__error { margin-top: 6px; font: 700 0.9375rem/1.35 var(--f-label); color: var(--f-error); }
.field__choices { display: flex; flex-wrap: wrap; gap: 10px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span {
	display: inline-flex; align-items: center;
	min-height: 48px; padding: 0 16px;
	border: 1.5px solid var(--f-border); border-radius: 4px;
	font: 700 0.9688rem var(--f-label);
	color: var(--f-text);
	background: var(--f-bg);
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.choice input:checked + span { background: var(--f-text); color: var(--f-bg); border-color: var(--f-text); }
.choice input[value="down"]:checked + span { background: var(--alarm); border-color: var(--alarm); color: #fff; }
.choice input:focus-visible + span { outline: 3px solid var(--f-focus); outline-offset: 2px; }
.field.has-error .choice span { border-color: var(--f-error); }
.field__urgent {
	display: flex; gap: 10px; align-items: flex-start;
	margin-top: 12px; padding: 12px 14px;
	border: 1px solid var(--f-border); border-radius: 4px;
	font: 600 0.9375rem/1.4 var(--f-label);
	color: var(--f-text);
}
.field__urgent .icon { width: 20px; height: 20px; flex: none; color: var(--alarm); }
.field__urgent a { font-weight: 800; white-space: nowrap; }
.is-urgent .field__urgent { border-color: var(--alarm); background: rgba(255, 59, 48, 0.07); }
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 28px; }
.form__note { flex: 1 1 220px; font-size: 0.875rem; color: var(--f-hint); }
.form__errors, .form__done {
	margin-bottom: 28px; padding: 16px 20px;
	border: 1.5px solid var(--f-error); border-radius: 4px;
	background: color-mix(in srgb, var(--f-error) 7%, transparent);
	font: 500 1rem/1.45 var(--f-label);
}
.form__errors ul { margin: 8px 0 0; padding-left: 1.1em; }
.form__errors a { color: var(--f-error); font-weight: 700; }
.form__done { display: flex; gap: 12px; align-items: flex-start; border-color: var(--f-focus); background: color-mix(in srgb, var(--f-focus) 8%, transparent); }
.form__done .icon { width: 24px; height: 24px; flex: none; color: var(--f-focus); }
.form__done a { font-weight: 800; }
.form__errors:focus, .form__done:focus { outline: none; }

/* ---------- Page head ---------- */
.phead { padding-block: clamp(56px, 7vw, 112px); }
.phead__grid { align-items: center; }
.phead__title { font-size: clamp(2.75rem, 1.8rem + 3.6vw, 5.25rem); line-height: 0.92; max-width: 16ch; }
.phead__intro { margin-top: 22px; max-width: 56ch; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); color: var(--text-ink-2); }
.phead__act { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.phead__media { aspect-ratio: 4 / 3; overflow: hidden; }
.phead__media img { position: absolute; inset: 0; }
.phead__media--cut { aspect-ratio: auto; background: none; outline: 0; overflow: visible; }
.phead__media--cut img { position: static; width: 100%; max-width: min(100%, 440px); margin-inline: auto; filter: drop-shadow(0 30px 30px rgba(0, 0, 0, 0.45)); }
.phead__makes { margin-top: 18px; font: 600 1rem var(--f-label); color: var(--text-ink); }
.phead__makes span { margin-right: 8px; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-ink-2); }
.phead__err { max-width: 480px; width: 100%; }
.seg--err .is-on { fill: var(--alarm); filter: drop-shadow(0 0 5px rgba(255, 59, 48, 0.5)); }
.seg--err .seg__s:not(.is-on), .seg--err .seg__dp { fill: var(--alarm); }
@media (min-width: 960px) {
	.phead__text { grid-column: 1 / span 7; }
	.phead__media, .phead__err { grid-column: 8 / span 5; }
	.phead:not(.has-image) .phead__text { grid-column: 1 / span 9; }
}

/* ---------- Service detail ---------- */
@media (min-width: 960px) {
	.detail__body { grid-column: 1 / span 7; }
	.detail__side { grid-column: 9 / span 4; align-self: start; position: sticky; top: calc(var(--head-h) + 32px); }
}
.panel { padding: 28px; border: 1.5px solid var(--text); border-radius: 4px; background: var(--paper); }
.panel__title { font-size: 1.875rem !important; line-height: 1 !important; }
.panel p { margin-top: 12px; color: var(--text-2); }
.panel__act { display: grid; gap: 10px; margin-top: 22px; }
.panel__act .btn { width: 100%; }
.sibs { margin-top: 40px; }
.sibs ul { list-style: none; margin: 0; padding: 0; }
.sibs__title { font: 700 0.8125rem var(--f-label) !important; letter-spacing: 0.1em; text-transform: uppercase; padding-bottom: 12px; border-bottom: 1.5px solid var(--text); }
.sibs a {
	display: flex; align-items: center; gap: 10px;
	padding: 12px 0;
	border-bottom: 1px solid var(--line);
	font: 600 1rem/1.3 var(--f-label);
	text-decoration: none;
	color: var(--text-2);
}
.sibs a::before { content: ""; width: 6px; height: 6px; flex: none; background: var(--line-strong); }
.sibs a:hover { color: var(--blue); }
.sibs a[aria-current="page"] { color: var(--text); }
.sibs a[aria-current="page"]::before { background: var(--blue); }
.enquire { margin-top: 0; }
.prose + .enquire { margin-top: 56px; padding-top: 48px; border-top: 1px solid var(--line); }
.enquire__title { font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem) !important; }
.enquire__text { margin: 14px 0 32px; color: var(--text-2); max-width: 56ch; }

/* ---------- Services page ---------- */
.sgroup { padding-block: clamp(56px, 7vw, 104px); }
.sgroup__title { font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem) !important; max-width: 12ch; }
@media (min-width: 960px) {
	.sgroup__title { grid-column: 1 / span 4; align-self: start; position: sticky; top: calc(var(--head-h) + 32px); }
	.sgroup__list { grid-column: 5 / span 8; }
}
.sgroup__list { border-top: 1.5px solid var(--text); }
.srow__link {
	display: grid;
	grid-template-columns: 112px minmax(0, 1fr) 24px;
	gap: 20px;
	align-items: center;
	padding: 20px 0;
	border-bottom: 1px solid var(--line);
	text-decoration: none;
}
.srow__media { aspect-ratio: 4 / 3; overflow: hidden; }
.srow__media img { position: absolute; inset: 0; }
.srow__text { display: grid; gap: 6px; }
.srow__name { font: 700 clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem)/1.08 var(--f-display); transition: color 0.2s; }
.srow__desc { color: var(--text-2); font-size: 1rem; line-height: 1.45; }
.srow__go { width: 22px; height: 22px; color: var(--text-2); transition: transform 0.25s var(--ease), color 0.2s; }
.srow__link:hover .srow__name, .srow__link:hover .srow__go { color: var(--blue); }
.srow__link:hover .srow__go { transform: translateX(4px); }
@media (min-width: 720px) { .srow__link { grid-template-columns: 184px minmax(0, 1fr) 24px; gap: 28px; } }

/* ---------- Equipment ---------- */
.equip__list { border-top: 1.5px solid var(--text); }
.eq {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px calc(2 * var(--cell));
	align-items: center;
	padding: 32px 0;
	border-bottom: 1px solid var(--line);
}
.eq__plate {
	display: grid; place-items: center;
	aspect-ratio: 1;
	max-width: 320px;
	padding: 18px;
	background: var(--paper-2);
	border-radius: 4px;
}
.eq__plate img { width: 100%; height: auto; }
.eq__title { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); line-height: 1; }
.eq__title a { text-decoration: none; }
.eq__title a:hover { color: var(--blue); }
.eq__text { margin-top: 12px; color: var(--text-2); max-width: 52ch; }
.eq__makes { margin-top: 14px; font: 600 1rem var(--f-label); }
.eq__makes span { margin-right: 8px; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); }
@media (min-width: 720px) {
	.eq { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.eq__plate { grid-column: 1 / span 4; }
	.eq__body { grid-column: 5 / span 8; }
	.eq__act { grid-column: 5 / span 8; }
}
@media (min-width: 1100px) {
	.eq__plate { grid-column: 1 / span 3; }
	.eq__body { grid-column: 4 / span 6; }
	.eq__act { grid-column: 10 / span 3; justify-self: end; }
}
.equip__note { margin-top: 40px; max-width: 64ch; color: var(--text-2); }
.equip__note a { color: var(--blue); font-weight: 700; }

/* ---------- About ---------- */
@media (min-width: 960px) {
	.miles__title, .team__title { grid-column: 1 / span 4; align-self: start; }
	.miles__list, .team__lead, .roster { grid-column: 5 / span 8; }
}
.miles__list { border-top: 1.5px solid var(--text); }
.miles__row { display: grid; gap: 8px 32px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.miles__row dt { font: 700 1.625rem/1.05 var(--f-display); }
.miles__row dd { color: var(--text-2); max-width: 56ch; }
@media (min-width: 720px) { .miles__row { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
.team__lead { display: grid; gap: 28px; border-top: 1.5px solid var(--text); padding-top: 28px; }
.team__lead.has-photo { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.team__photo { aspect-ratio: 4 / 5; overflow: hidden; }
.team__photo img { position: absolute; inset: 0; }
.team__name { font-size: clamp(2rem, 1.5rem + 1.5vw, 2.75rem); line-height: 1; }
.team__role { margin-top: 10px; font: 700 0.875rem var(--f-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.team__bio { margin-top: 18px; max-width: 62ch; }
.team__bio p + p { margin-top: 1em; }
.roster { margin-top: 48px; }
.roster th, .roster td { padding: 16px 16px 16px 0; text-align: left; border-bottom: 1px solid var(--line); vertical-align: baseline; }
.roster thead th { font: 700 0.75rem var(--f-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); border-bottom: 1.5px solid var(--text); }
.roster tbody th { font: 700 1.375rem/1.1 var(--f-display); }
.roster td { font: 500 1rem var(--f-label); color: var(--text-2); }

/* ---------- Contact ---------- */
@media (min-width: 960px) {
	.contact__forms { grid-column: 1 / span 7; }
	.contact__side { grid-column: 8 / span 5; align-self: start; position: sticky; top: calc(var(--head-h) + 24px); }
}
.contact__intro { margin-bottom: 32px; }
.switch {
	display: inline-flex; flex-wrap: wrap; gap: 4px;
	margin-bottom: 36px; padding: 4px;
	border: 1.5px solid var(--text); border-radius: 6px;
}
.switch:not([hidden]) { display: inline-flex; }
.switch__key {
	display: inline-flex; align-items: center; gap: 10px;
	min-height: 46px; padding: 0 18px;
	border: 0; border-radius: 3px;
	background: transparent;
	font: 700 0.9375rem var(--f-label);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text);
}
.switch__key i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.switch__key[aria-pressed="true"] { background: var(--ink); color: var(--text-ink); }
.switch__key[aria-pressed="true"] i { background: var(--lcd); box-shadow: 0 0 6px var(--lcd-glow); }
.switch__key[aria-pressed="false"]:hover { background: var(--paper-2); }
.contact__formtitle { font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem) !important; margin-bottom: 28px; }
.has-switch .contact__formtitle { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.contact__pane + .contact__pane { margin-top: 72px; }
.has-switch .contact__pane + .contact__pane { margin-top: 0; }
.contact__panel {
	padding: clamp(24px, 3vw, 40px);
	background: var(--ink);
	color: var(--text-ink);
	border-radius: 6px;
	--line: var(--line-ink);
	--focus: var(--lcd);
}
.contact__sidetitle { font-size: clamp(2rem, 1.5rem + 1.5vw, 2.75rem) !important; }
.readout--side { margin-top: 24px; }

/* ---------- Prose ---------- */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-weight: 800; font-size: clamp(2rem, 1.5rem + 1.6vw, 2.875rem); line-height: 0.98; margin-top: 1.8em; }
.prose h3 { font-weight: 700; font-size: 1.75rem; line-height: 1.05; margin-top: 1.6em; }
.prose > :first-child { margin-top: 0; }
.prose h2 + *, .prose h3 + * { margin-top: 0.6em; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: 0.4em; }
.prose a { color: var(--blue); text-underline-offset: 3px; }
.prose strong { font-weight: 800; }
.prose blockquote { padding-left: 20px; border-left: 1px solid var(--text); font: 600 1.5rem/1.2 var(--f-display); }
.prose img { border-radius: 2px; }
.prose figcaption { margin-top: 8px; font-size: 0.875rem; color: var(--text-2); }
.prose__meta { font: 700 0.8125rem var(--f-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); }
.prose .alignwide, .prose .alignfull { max-width: none; }
.prose--about { max-width: 72ch; }
.prose--about > h2:first-child { margin-top: 0; }
.detail__body.prose p:first-child { font-size: 1.25rem; line-height: 1.5; }

/* ---------- Footer ---------- */
.foot {
	position: relative;
	padding-block: clamp(56px, 7vw, 96px) 32px;
	background: var(--bezel);
	color: var(--text-ink);
	border-top: 1px solid var(--line-ink);
}
.foot__plate {
	display: inline-block;
	padding: 16px 20px;
	background: var(--paper);
	border-radius: 4px;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 18px 30px -18px rgba(0, 0, 0, 0.8);
}
.foot__logo { display: block; width: clamp(200px, 22vw, 260px); height: auto; }
.foot__list { display: grid; gap: 10px; }
.foot__list a, .foot__contact a { font: 700 1.0625rem var(--f-label); text-decoration: none; color: var(--text-ink); }
.foot__list a:hover, .foot__contact a:hover { color: var(--lcd); }
.foot__contact { display: grid; gap: 10px; align-content: start; }
.foot__contact address { margin-top: 6px; font: 500 1rem/1.45 var(--f-label); color: var(--text-ink-2); max-width: 34ch; }
.foot__base {
	display: flex; flex-wrap: wrap; gap: 10px 32px;
	padding-top: 24px;
	border-top: 1px solid var(--line-ink);
	font: 500 0.875rem var(--f-label);
	color: var(--text-ink-2);
}
.foot__base a { color: inherit; }
.foot__insured { display: inline-flex; align-items: center; gap: 8px; }
.foot__insured .icon { width: 18px; height: 18px; }
.foot__credit { margin-left: auto; }
@media (min-width: 960px) {
	.foot__brand { grid-column: 1 / span 4; }
	.foot__nav { grid-column: 6 / span 2; }
	.foot__contact { grid-column: 9 / span 4; }
	.foot__base { grid-column: 1 / -1; }
}
@media (max-width: 639px) { .foot__credit { margin-left: 0; } }

/* ---------- Photo tiles (projects, album, lightbox triggers) ---------- */
.tile {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--paper-2);
}
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.tile:hover img { transform: scale(1.03); }
.tile:focus-visible { outline-offset: 4px; }

/* ---------- Projects page ---------- */
.job { padding-block: clamp(56px, 7vw, 104px); }
.job h2.job__title { font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem); line-height: 0.96; max-width: 14ch; }
.job__title a { text-decoration: none; }
.job__title a:hover { color: var(--blue); }
.job__text { margin-top: 16px; max-width: 40ch; color: var(--text-2); font-size: 1.0625rem; }
.job__count { margin-top: 18px; font: 700 0.8125rem var(--f-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); }
.job__photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.job__photos .tile:first-child { grid-column: 1 / -1; }
.job__more { margin-top: calc(-1 * clamp(16px, 3vw, 36px)); }
@media (min-width: 960px) {
	.job__head { grid-column: 1 / span 4; align-self: start; position: sticky; top: calc(var(--head-h) + 32px); }
	.job__photos, .job__more { grid-column: 5 / span 8; }
	.job__photos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.job__photos .tile:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
	.job__photos--1 .tile:first-child, .job__photos--2 .tile:first-child, .job__photos--3 .tile:first-child { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 9; }
}

/* ---------- Project album ---------- */
.job__writeup { margin-bottom: 48px; }
.album { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px calc(2 * var(--cell)); }
@media (min-width: 640px) { .album { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .album { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.album__cap { margin-top: 12px; font: 500 0.9688rem/1.4 var(--f-label); color: var(--text-2); max-width: 46ch; }
.album__back { margin-top: 56px; }

/* ---------- Recent work (home) ---------- */
.work__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 40px; }
.work__head > div, .work__title { max-width: 14ch; }
.work__text { flex: 1 1 320px; max-width: 46ch; color: var(--text-2); font-size: 1.125rem; }
.work__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px 10px;
	margin-top: clamp(40px, 5vw, 64px);
}
.work__item:first-child { grid-column: 1 / -1; }
.work__link { display: block; text-decoration: none; }
.work__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); }
.work__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.work__link:hover .work__media img { transform: scale(1.03); }
.work__name { display: block; margin-top: 12px; font: 700 1.25rem/1.1 var(--f-display); transition: color 0.2s; }
.work__link:hover .work__name { color: var(--blue); }
.work__count { display: block; margin-top: 4px; font: 700 0.75rem var(--f-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); }
@media (min-width: 960px) {
	.work__list { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: calc(2 * var(--cell)); }
	.work__item:first-child { grid-column: span 2; grid-row: span 2; }
	.work__item:first-child .work__media { aspect-ratio: auto; height: calc(100% - 5.2rem); min-height: 300px; }
	.work__item:first-child .work__link { height: 100%; }
	.work__item:first-child .work__name { font-size: 1.75rem; }
}

/* ---------- Lightbox ---------- */
.lb {
	position: fixed;
	inset: 0;
	width: 100%; height: 100%;
	max-width: none; max-height: none;
	margin: 0;
	padding: clamp(56px, 7vh, 80px) clamp(12px, 6vw, 96px) clamp(88px, 10vh, 104px);
	border: 0;
	background: rgba(8, 9, 10, 0.97);
	color: var(--text-ink);
	--focus: var(--lcd);
}
.lb::backdrop { background: rgba(0, 0, 0, 0.6); }
.lb[open] { display: block; }
.lb__fig { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; height: 100%; margin: 0; }
.lb__img { max-width: 100%; max-height: calc(100% - 56px); width: auto; height: auto; object-fit: contain; }
.lb__cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; width: min(100%, 960px); font: 500 1rem/1.4 var(--f-label); color: var(--text-ink-2); }
.lb__num { font: 700 0.875rem var(--f-label); letter-spacing: 0.12em; color: var(--lcd); font-variant-numeric: tabular-nums; }
.lb__btn {
	position: absolute;
	display: grid; place-items: center;
	width: 52px; height: 52px;
	border: 1px solid var(--line-ink-strong);
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.06);
	color: var(--text-ink);
	transition: background-color 0.2s;
}
.lb__btn:hover { background: rgba(255, 255, 255, 0.14); }
.lb__btn .icon { width: 24px; height: 24px; }
.lb__btn--close { top: 14px; right: 14px; }
.lb__btn--prev, .lb__btn--next { bottom: 18px; }
.lb__btn--prev { left: calc(50% - 60px); }
.lb__btn--next { left: calc(50% + 8px); }
.lb__btn--prev .icon { transform: scaleX(-1); }
@media (min-width: 960px) {
	.lb__btn--prev, .lb__btn--next { top: 50%; bottom: auto; transform: translateY(-50%); }
	.lb__btn--prev { left: 24px; }
	.lb__btn--next { left: auto; right: 24px; }
}
html.lb-open { overflow: hidden; }

/* ---------- Comments (if a post ever has them) ---------- */
.comment-list { padding-left: 0; list-style: none; }
.comment-form input:not([type="checkbox"]):not([type="submit"]), .comment-form textarea { width: 100%; padding: 10px 12px; border: 1.5px solid var(--f-border); border-radius: 4px; }
.comment-form .submit { min-height: 48px; padding: 0 20px; border: 0; border-radius: 3px; background: var(--blue); color: #fff; font: 700 1rem var(--f-label); }
.nav-links { display: flex; gap: 12px; margin-top: 32px; font: 700 1rem var(--f-label); }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}