/* Aspen Supply — site styles. Eloti Designs. */

/* ---------- Fonts: Archivo (OFL), variable weight and width ---------- */
@font-face {
	font-family: "Aspen Archivo";
	src: url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations"),
	     url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2");
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Aspen Archivo";
	src: url("../fonts/archivo-latin-ext-wdth-normal.woff2") format("woff2-variations"),
	     url("../fonts/archivo-latin-ext-wdth-normal.woff2") format("woff2");
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root {
	--ink: #0b2836;          /* deep petrol: dark surfaces, headings */
	--ink-2: #133e4f;
	--text: #23343d;         /* body copy */
	--steel: #4c5f6a;        /* secondary text */
	--steel-2: #7d8d96;      /* icons, quiet marks */
	--line: #d8e0e4;
	--line-2: #e7edf0;
	--line-strong: #b9c6cd;
	--mist: #eef2f4;
	--paper: #ffffff;
	/* Accent. The plugin replaces these with colours taken from the logo. */
	--accent: #c2410c;        /* fills: buttons, markers, rules */
	--accent-hover: #a3360a;
	--accent-ink: #ffffff;    /* text on an accent fill */
	--accent-text: #c2410c;   /* accent-coloured text on light backgrounds */
	--accent-bright: #f2703f; /* accent on dark backgrounds */
	--accent-mark: #c2410c;   /* the exact brand accent, for rules and markers */
	--error: #b42318;
	--on-dark: #e3eaee;
	--on-dark-2: #a9bac3;

	--font: "Aspen Archivo", "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--wide: 114%;
	--body-stretch: 108%;     /* Archivo SemiExpanded for text, matching the wide headings */

	--container: 1240px;
	--gutter: clamp(20px, 4vw, 40px);
	--r-sm: 3px;
	--r-md: 6px;
	--header-offset: 104px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: 96px;
}
html.nav-open { overflow: hidden; }
body {
	margin: 0;
	font-family: var(--font);
	font-size: 1.0625rem;
	font-weight: 400;
	font-stretch: var(--body-stretch);
	line-height: 1.62;
	color: var(--text);
	background: var(--paper);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
@media (max-width: 600px) { body { font-size: 1rem; } }
img, svg, video, iframe { max-width: 100%; }
img { height: auto; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; text-wrap: pretty; }
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-stretch: var(--wide);
	font-weight: 650;
	letter-spacing: -0.02em;
	line-height: 1.12;
	color: var(--ink);
	text-wrap: balance;
}
button, input, select, textarea { font-family: inherit; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: 2px; }
.hero :focus-visible, .section--ink :focus-visible, .site-footer :focus-visible, .page-hero :focus-visible,
.aside-card--ink :focus-visible, .topbar :focus-visible { outline-color: var(--accent-bright); }
::selection { background: #f9d6c6; background: color-mix(in srgb, var(--accent) 24%, #fff); color: var(--ink); }

.icon { width: 1.25em; height: 1.25em; flex: none; }

.container {
	width: 100%;
	max-width: calc(var(--container) + 2 * var(--gutter));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.skip-link {
	position: absolute;
	left: 1rem; top: -100px;
	z-index: 200;
	padding: .75rem 1.1rem;
	background: var(--ink);
	color: #fff;
	border-radius: var(--r-sm);
	font-weight: 600;
	text-decoration: none;
}
.skip-link:focus { top: 1rem; }
.site-main:focus { outline: none; }

/* ---------- Buttons and links ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	min-height: 48px;
	padding: .7rem 1.4rem;
	border: 1.5px solid transparent;
	border-radius: var(--r-sm);
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	font-stretch: 110%;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn .icon { width: 18px; height: 18px; }
.btn--signal { background: var(--accent); color: var(--accent-ink); }
.btn--signal:hover { background: var(--accent-hover); }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: var(--ink-2); }
.btn--line { border-color: var(--line-strong); color: var(--ink); background: #fff; }
.btn--line:hover { border-color: var(--ink); }
.btn--line-light { border-color: rgba(255, 255, 255, .38); color: #fff; }
.btn--line-light:hover { border-color: #fff; background: rgba(255, 255, 255, .07); }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .7; cursor: progress; }

.link {
	color: var(--ink);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--accent-mark);
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}
.link:hover { color: var(--accent-text); }
.link--button { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; cursor: pointer; }
.section--ink .link, .aside-card--ink .link { color: #fff; text-decoration-color: var(--accent-bright); }

/* ---------- Top bar ---------- */
.topbar {
	background: var(--ink);
	color: var(--on-dark-2);
	font-size: .84rem;
	line-height: 1.3;
}
.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 40px;
}
.topbar__item {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
	color: inherit;
	text-decoration: none;
}
a.topbar__item:hover { color: #fff; }
.topbar .icon { width: 15px; height: 15px; color: var(--accent-bright); }
.topbar__list { display: flex; gap: 1.75rem; margin: 0; padding: 0; list-style: none; }
@media (max-width: 1100px) { .topbar__hours { display: none; } }
@media (max-width: 760px) {
	.topbar__address { display: none; }
	.topbar__list { width: 100%; justify-content: space-between; gap: 1rem; }
}

/* ---------- Masthead ---------- */
.masthead {
	position: sticky;
	top: 0;
	z-index: 60;
	background: #fff;
	border-bottom: 1px solid var(--line);
	transition: box-shadow .2s ease;
}
.masthead.is-stuck { box-shadow: 0 10px 30px -18px rgba(11, 40, 54, .35); }
.masthead__inner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-height: 78px;
}
.logo { display: inline-flex; align-items: center; flex: none; text-decoration: none; }
.logo__img { height: 58px; width: auto; max-width: 260px; object-fit: contain; }
.logo__img--tall { height: 62px; }
.logo__word {
	font-size: 1.3rem;
	font-weight: 720;
	font-stretch: 120%;
	letter-spacing: -.015em;
	color: var(--ink);
}

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: .1rem; margin: 0; padding: 0; list-style: none; }
.nav__item { display: flex; align-items: center; }
.nav__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 78px;
	padding: 0 .85rem;
	font-size: .98rem;
	font-weight: 560;
	color: var(--ink);
	text-decoration: none;
}
.nav__link::after {
	content: "";
	position: absolute;
	left: .85rem; right: .85rem; bottom: 22px;
	height: 2px;
	background: var(--steel-2);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .2s ease;
}
.nav__link:hover::after { transform: scaleX(1); }
.nav__link.is-current::after { transform: scaleX(1); background: var(--accent-mark); }
.nav__item--mega .nav__link { padding-right: .25rem; }
.nav__item--mega .nav__link::after { right: .25rem; }
.nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px; height: 30px;
	margin-right: .45rem;
	padding: 0;
	border: 0;
	border-radius: var(--r-sm);
	background: none;
	color: var(--steel);
	cursor: pointer;
}
.nav__toggle:hover { color: var(--ink); background: var(--mist); }
.nav__toggle .icon { width: 16px; height: 16px; transition: transform .2s ease; }
.nav__item--mega.is-open .nav__toggle .icon { transform: rotate(180deg); }
.masthead__cta { flex: none; margin-left: .75rem; }

.mega {
	position: absolute;
	left: 0; right: 0; top: 100%;
	background: #fff;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	box-shadow: 0 28px 40px -28px rgba(11, 40, 54, .3);
	visibility: hidden;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
.nav__item--mega:hover .mega,
.nav__item--mega.is-open .mega {
	visibility: visible;
	opacity: 1;
	transform: none;
	transition-delay: 0s;
}
.nav__item--mega.is-closed .mega { visibility: hidden; opacity: 0; }
.mega__inner {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.05fr);
	gap: 2rem;
	padding-block: 2rem 2.25rem;
}
.mega__discipline { margin: 0 0 .7rem; font-size: .84rem; font-weight: 600; color: var(--steel); }
.mega ul { display: grid; gap: .1rem; margin: 0; padding: 0; list-style: none; }
.mega__link {
	display: block;
	padding: .38rem 0;
	font-size: .98rem;
	font-weight: 560;
	line-height: 1.35;
	color: var(--ink);
	text-decoration: none;
}
.mega__link:hover { color: var(--accent-text); }
.mega__aside {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .7rem;
	padding-left: 2rem;
	border-left: 1px solid var(--line);
	font-size: .95rem;
	color: var(--steel);
}
.mega__aside p { margin: 0; }

.burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 48px; height: 48px;
	margin-left: auto;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: #fff;
	color: var(--ink);
	cursor: pointer;
}
.burger__open, .burger__close { display: inline-flex; }
.burger__close { display: none; }
.burger[aria-expanded="true"] .burger__open { display: none; }
.burger[aria-expanded="true"] .burger__close { display: inline-flex; }

.mobile-nav {
	max-height: calc(100vh - 68px);
	max-height: calc(100dvh - 68px);
	overflow-y: auto;
	border-top: 1px solid var(--line);
	background: #fff;
}
.mobile-nav__list { margin: 0; padding: .5rem 0 0; list-style: none; }
.mobile-nav__row { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line-2); }
.mobile-nav__link {
	flex: 1;
	display: block;
	padding: .95rem 0;
	font-size: 1.15rem;
	font-weight: 620;
	font-stretch: 110%;
	color: var(--ink);
	text-decoration: none;
}
.mobile-nav__link[aria-current] { color: var(--accent-text); }
.mobile-nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px; height: 48px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ink);
	cursor: pointer;
}
.mobile-nav__toggle .icon { transition: transform .2s ease; }
.mobile-nav__toggle[aria-expanded="true"] .icon { transform: rotate(45deg); }
.mobile-nav__sub { margin: 0; padding: .35rem 0 .8rem; list-style: none; border-bottom: 1px solid var(--line-2); }
.mobile-nav__sub a {
	display: block;
	padding: .5rem 0 .5rem 1rem;
	border-left: 2px solid var(--line);
	color: var(--steel);
	text-decoration: none;
}
.mobile-nav__foot { display: grid; gap: .9rem; padding: 1.4rem 0 1.8rem; }
.mobile-nav__contact { display: inline-flex; align-items: center; gap: .6rem; color: var(--ink); text-decoration: none; font-weight: 550; }
.mobile-nav__contact .icon { width: 18px; height: 18px; color: var(--accent-text); }

@media (max-width: 1100px) {
	.nav, .masthead__cta { display: none; }
	.burger { display: inline-flex; }
	.masthead__inner { min-height: 68px; }
	.logo__img { height: 48px; max-width: 210px; }
	.logo__img--tall { height: 54px; }
}
@media (min-width: 1101px) { .mobile-nav { display: none !important; } }

/* ---------- Hero ---------- */
.hero {
	position: relative;
	overflow: hidden;
	padding: clamp(2.75rem, 5.5vw, 4.5rem) 0 clamp(7rem, 11vw, 9.25rem);
	background: var(--ink);
	color: var(--on-dark);
}
.hero__grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
}
.hero__title {
	max-width: 15ch;
	font-size: clamp(2.35rem, 1.25rem + 3.9vw, 4.3rem);
	font-weight: 680;
	font-stretch: 118%;
	letter-spacing: -.032em;
	line-height: 1.02;
	color: #fff;
}
.hero__lead {
	max-width: 56ch;
	margin: 1.6rem 0 0;
	font-size: clamp(1.06rem, .98rem + .35vw, 1.22rem);
	line-height: 1.6;
	color: var(--on-dark);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.1rem; }
.hero__note {
	display: flex;
	align-items: center;
	gap: .55rem;
	margin: 1.9rem 0 0;
	font-size: .92rem;
	color: var(--on-dark-2);
}
.hero__note .icon { width: 17px; height: 17px; color: var(--accent-bright); }
.hero__media { justify-self: end; width: 100%; max-width: 500px; margin: 0; }
.hero__frame {
	position: relative;
	aspect-ratio: 5 / 6;
	overflow: hidden;
	border-radius: var(--r-md);
	background: var(--ink-2);
}
.hero__frame img { width: 100%; height: 100%; object-fit: cover; }
.hero__caption {
	display: flex;
	align-items: center;
	gap: .65rem;
	margin-top: .9rem;
	font-size: .88rem;
	color: var(--on-dark-2);
}
.hero__caption::before { content: ""; width: 20px; height: 2px; background: var(--accent-bright); flex: none; }

.trace {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	z-index: 1;
	width: 100%;
	height: clamp(120px, 15vw, 180px);
	pointer-events: none;
}
.trace__base { fill: none; stroke: rgba(169, 186, 195, .16); stroke-width: 1; }
.trace__gate { fill: none; stroke: rgba(169, 186, 195, .6); stroke-width: 1.5; }
.trace__line {
	fill: none;
	stroke: var(--accent-bright);
	stroke-width: 1.7;
	stroke-linejoin: round;
	stroke-linecap: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: trace-draw 2.8s cubic-bezier(.4, .1, .25, 1) .3s forwards;
}
@keyframes trace-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
	.trace__line { animation: none; stroke-dashoffset: 0; }
}
@media (max-width: 900px) {
	.hero__grid { grid-template-columns: 1fr; }
	.hero__media { justify-self: start; max-width: 560px; }
	.hero__frame { aspect-ratio: 4 / 3; }
	.trace__line { stroke-width: 2.4; }
}

/* ---------- Sections ---------- */
.section { padding-block: clamp(4rem, 8vw, 7rem); }
.section--tight-top { padding-top: clamp(2.5rem, 5vw, 4rem); }
.section--mist { background: var(--mist); }
.section--ink { background: var(--ink); color: var(--on-dark); }
.section--ink .section-title { color: #fff; }
.section--ink .section-lead { color: var(--on-dark-2); }
.section-head {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: 1.25rem 4rem;
	align-items: end;
	margin-bottom: clamp(2.25rem, 4vw, 3.5rem);
}
.section-head--split { grid-template-columns: 1fr auto; }
.section-title { font-size: clamp(1.9rem, 1.3rem + 1.9vw, 2.85rem); letter-spacing: -.026em; line-height: 1.08; }
.section-lead { max-width: 58ch; margin: 0; font-size: 1.08rem; color: var(--steel); }
@media (max-width: 860px) {
	.section-head { grid-template-columns: 1fr; }
	.section-head--split { grid-template-columns: 1fr; justify-items: start; }
}

/* Services index (home) */
.disciplines { border-top: 1px solid var(--line); }
.discipline {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
	gap: 2rem;
	padding: 1.4rem 0;
	border-bottom: 1px solid var(--line);
}
.discipline__name {
	padding-top: 1.05rem;
	font-size: 1rem;
	font-weight: 600;
	font-stretch: var(--body-stretch);
	letter-spacing: 0;
	color: var(--steel);
}
.discipline__list { margin: 0; padding: 0; list-style: none; }
.discipline__list li + li { border-top: 1px solid var(--line-2); }
.svc-row {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) 22px;
	gap: 1.5rem;
	align-items: baseline;
	padding: 1.05rem 0;
	color: var(--ink);
	text-decoration: none;
}
.svc-row__name {
	font-size: clamp(1.15rem, 1rem + .5vw, 1.38rem);
	font-weight: 620;
	font-stretch: 112%;
	letter-spacing: -.016em;
	line-height: 1.25;
	transition: color .15s ease;
}
.svc-row__sum { font-size: .98rem; line-height: 1.5; color: var(--steel); }
.svc-row__icon { align-self: center; width: 20px; height: 20px; color: var(--steel-2); transition: transform .2s ease, color .15s ease; }
.svc-row:hover .svc-row__name, .svc-row:hover .svc-row__icon { color: var(--accent-text); }
.svc-row:hover .svc-row__icon { transform: translateX(3px); }
@media (max-width: 860px) {
	.discipline { grid-template-columns: 1fr; gap: .2rem; }
	.discipline__name { padding-top: .2rem; }
	.svc-row { grid-template-columns: minmax(0, 1fr) 20px; gap: .3rem 1rem; }
	.svc-row__icon { grid-column: 2; grid-row: 1 / span 2; }
}

/* Recent work */
.work-grid {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(1rem, 2vw, 1.75rem);
}
.work { display: flex; flex-direction: column; margin: 0; }
.work--lead { grid-row: span 2; }
.work__frame { overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--r-md); background: var(--line); }
.work--lead .work__frame { flex: 1; aspect-ratio: auto; min-height: 320px; }
.work__frame img { width: 100%; height: 100%; object-fit: cover; }
.work__caption { display: flex; flex-direction: column; gap: .1rem; padding-top: .8rem; }
@media (min-width: 901px) { .work__caption { min-height: 4.75rem; } }
.work__title { font-size: .98rem; font-weight: 620; line-height: 1.35; color: var(--ink); }
.work__where { font-size: .88rem; color: var(--steel); }
@media (max-width: 900px) {
	.work-grid { grid-template-columns: 1fr 1fr; }
	.work--lead { grid-column: 1 / -1; grid-row: auto; }
	.work--lead .work__frame { aspect-ratio: 16 / 10; min-height: 0; }
}
@media (max-width: 520px) { .work-grid { grid-template-columns: 1fr; } }

/* Process */
.process {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 2rem;
	margin: 0; padding: 0;
	list-style: none;
}
.process__step { position: relative; padding-top: 1.5rem; border-top: 2px solid var(--line); }
.process__step::before { content: ""; position: absolute; top: -2px; left: 0; width: 44px; height: 2px; background: var(--accent-mark); }
.process__num {
	display: block;
	margin-bottom: .7rem;
	font-size: .95rem;
	font-weight: 650;
	font-stretch: 120%;
	font-variant-numeric: tabular-nums;
	color: var(--accent-text);
}
.process__title { margin-bottom: .55rem; font-size: 1.25rem; }
.process__text { margin: 0; font-size: .98rem; color: var(--steel); }
@media (max-width: 900px) { .process { grid-template-columns: 1fr 1fr; gap: 2.25rem 1.5rem; } }
@media (max-width: 540px) { .process { grid-template-columns: 1fr; } }

/* Standards plates */
.plates {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0; padding: 0;
	list-style: none;
	border-top: 1px solid rgba(255, 255, 255, .14);
	border-left: 1px solid rgba(255, 255, 255, .14);
}
.plate {
	display: flex;
	flex-direction: column;
	gap: .45rem;
	min-height: 128px;
	padding: 1.45rem 1.4rem 1.55rem;
	border-right: 1px solid rgba(255, 255, 255, .14);
	border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.plate__code {
	font-size: clamp(1.22rem, 1.05rem + .55vw, 1.55rem);
	font-weight: 650;
	font-stretch: 118%;
	letter-spacing: -.012em;
	line-height: 1.1;
	color: #fff;
}
.plate__what { font-size: .94rem; line-height: 1.45; color: var(--on-dark-2); }
.plates-note { max-width: 72ch; margin: 2rem 0 0; font-size: .98rem; color: var(--on-dark-2); }
@media (max-width: 1000px) { .plates { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) {
	.plates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.plate { min-height: 0; padding: 1.1rem .95rem 1.2rem; }
	.plate__code { font-size: 1.08rem; font-stretch: 102%; letter-spacing: -.005em; }
	.plate__what { font-size: .88rem; }
}

/* Clients: a wall of logos, quiet in grey until pointed at. Clients
   without a logo show their name in the same tile. */
.logo-wall {
	--cols: 4;
	--cols-md: 3;
	display: grid;
	grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
	margin: 0; padding: 0;
	list-style: none;
	border-top: 1px solid var(--line);
	border-left: 1px solid var(--line);
}
.logo-wall__item {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 136px;
	padding: 1.5rem 1.25rem;
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	background: var(--paper);
	text-align: center;
}
.logo-wall__img {
	display: block;
	max-width: 100%;
	height: auto;
	filter: grayscale(1) contrast(1.05) brightness(.92);
	opacity: .78;
	transition: filter .3s ease, opacity .3s ease;
}
.logo-wall__img--light { filter: brightness(0); opacity: .6; }
@media (hover: hover) {
	.logo-wall__item:hover .logo-wall__img { filter: none; opacity: 1; }
	.logo-wall__item:hover .logo-wall__img--light { filter: brightness(0); opacity: .85; }
}
.logo-wall__name {
	max-width: 17ch;
	font-size: 1rem;
	font-weight: 640;
	font-stretch: 112%;
	letter-spacing: -.005em;
	line-height: 1.3;
	color: var(--steel);
}
@media (min-width: 641px) and (max-width: 1000px) {
	.logo-wall { grid-template-columns: repeat(var(--cols-md), minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.logo-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.logo-wall__item { min-height: 108px; padding: 1.1rem .9rem; }
	.logo-wall__name { font-size: .94rem; }
}

/* Careers teaser and job lists */
.careers-teaser {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}
.careers-teaser__intro p { max-width: 44ch; margin: 1.2rem 0 1.75rem; color: var(--steel); }
@media (max-width: 900px) { .careers-teaser { grid-template-columns: 1fr; } }

.job-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.section--mist .job-list { border-top-color: var(--line-strong); }
.job { border-bottom: 1px solid var(--line); }
.section--mist .job { border-bottom-color: var(--line-strong); }
.job__link {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto 20px;
	grid-template-areas: "title date icon" "tags date icon";
	gap: .45rem 1.5rem;
	align-items: center;
	padding: 1.15rem .2rem;
	color: var(--ink);
	text-decoration: none;
}
.job__title { grid-area: title; font-size: 1.12rem; font-weight: 620; font-stretch: 108%; letter-spacing: -.01em; line-height: 1.3; transition: color .15s ease; }
.job__tags { grid-area: tags; display: flex; flex-wrap: wrap; gap: .4rem; }
.tag {
	display: inline-flex;
	align-items: center;
	padding: .18rem .62rem;
	border-radius: 999px;
	background: var(--mist);
	font-size: .82rem;
	font-weight: 520;
	line-height: 1.45;
	color: var(--steel);
}
.section--mist .tag { background: #fff; }
.job__date { grid-area: date; font-size: .86rem; color: var(--steel); white-space: nowrap; }
.job__icon { grid-area: icon; width: 20px; height: 20px; color: var(--steel-2); }
.job__link:hover .job__title, .job__link:hover .job__icon { color: var(--accent-text); }
@media (max-width: 640px) {
	.job__link { grid-template-columns: minmax(0, 1fr) 20px; grid-template-areas: "title icon" "tags icon" "date icon"; }
}
.empty-note { color: var(--steel); }

/* ---------- Footer ---------- */
.site-footer { background: var(--footer-bg, var(--ink)); color: var(--footer-muted, var(--on-dark-2)); }
.site-footer :focus-visible { outline-color: var(--footer-accent, var(--accent-bright)); }
.footer-cta { border-bottom: 1px solid rgba(255, 255, 255, .1); }
.footer-cta__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	padding-block: clamp(3rem, 6vw, 4.5rem);
}
.footer-cta__title { font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.6rem); color: #fff; }
.footer-cta__copy p { margin: .65rem 0 0; font-size: 1.06rem; }
.footer-cta__actions { display: flex; flex-wrap: wrap; gap: .85rem; flex: none; }
@media (max-width: 800px) { .footer-cta__inner { flex-direction: column; align-items: flex-start; } }

.footer-main {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, .85fr) minmax(0, 1.2fr);
	gap: 2.5rem;
	padding-block: clamp(3rem, 6vw, 4.5rem);
}
.logo--footer .logo__img { height: 60px; max-width: 260px; }
.logo--footer .logo__img--tall { height: 92px; }
.logo--footer .logo__word { color: #fff; }
.logo-plate { display: inline-flex; padding: .55rem .85rem; border-radius: var(--r-md); background: #fff; }
.logo-plate .logo__img { height: 44px; }
.footer-brand__blurb { max-width: 38ch; margin: 1.25rem 0 1.5rem; font-size: .95rem; }
.hours { display: grid; gap: .35rem; max-width: 310px; margin: 0; font-size: .9rem; }
.hours__row { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .35rem; border-bottom: 1px dashed rgba(255, 255, 255, .14); }
.hours dt { color: var(--footer-muted, var(--on-dark-2)); }
.hours dd { margin: 0; color: #fff; }
.footer-col__title { margin-bottom: 1rem; font-size: .95rem; font-weight: 600; font-stretch: var(--body-stretch); letter-spacing: 0; color: #fff; }
.footer-col ul { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.footer-col a { font-size: .94rem; color: var(--footer-muted, var(--on-dark-2)); text-decoration: none; }
.footer-col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer-contact__line { display: flex; align-items: flex-start; gap: .65rem; margin: 0 0 .7rem; font-size: .94rem; }
.footer-contact__line .icon { width: 17px; height: 17px; margin-top: .22rem; color: var(--footer-accent, var(--accent-bright)); }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); font-size: .86rem; }
.footer-bottom__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; padding-block: 1.4rem; }
.footer-bottom p { margin: 0; }
.credit a { color: #fff; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .35); }
.credit a:hover { border-bottom-color: var(--footer-accent, var(--accent-bright)); }
@media (max-width: 1000px) { .footer-main { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-main { grid-template-columns: 1fr; gap: 2rem; } }

/* ---------- Inner page hero ---------- */
.page-hero {
	padding: clamp(2.4rem, 5vw, 3.8rem) 0 clamp(3rem, 6vw, 4.6rem);
	background: var(--ink);
	color: var(--on-dark);
}
.crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem .6rem;
	margin: 0 0 1.4rem;
	padding: 0;
	list-style: none;
	font-size: .86rem;
	color: var(--on-dark-2);
}
.crumbs li { display: inline-flex; align-items: center; gap: .6rem; }
.crumbs li + li::before { content: "/"; color: rgba(169, 186, 195, .5); }
.crumbs a { color: var(--on-dark-2); text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current] { color: #fff; }
.page-hero__title {
	max-width: 22ch;
	font-size: clamp(2.15rem, 1.45rem + 2.6vw, 3.55rem);
	font-weight: 670;
	font-stretch: 116%;
	letter-spacing: -.03em;
	line-height: 1.04;
	color: #fff;
}
.page-hero__lead { max-width: 60ch; margin: 1.25rem 0 0; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); color: var(--on-dark); }
.page-hero__meta { margin: 1rem 0 0; color: var(--on-dark-2); }
.page-hero__actions { margin-top: 1.75rem; }

/* ---------- Service page ---------- */
.svc-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: clamp(2.5rem, 5vw, 5rem);
	align-items: start;
	padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(4rem, 7vw, 6rem);
}
.svc-main { max-width: 780px; }
.svc-aside { position: sticky; top: var(--header-offset); display: grid; gap: 1.25rem; }
@media (max-width: 1000px) { .svc-layout { grid-template-columns: 1fr; } .svc-aside { position: static; } }

.facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 0 0 2rem;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
}
.facts__item { display: flex; flex-direction: column-reverse; gap: .2rem; padding: 1.05rem 1.25rem; }
.facts__item + .facts__item { border-left: 1px solid var(--line); }
.facts dd { margin: 0; font-size: 1.3rem; font-weight: 650; font-stretch: 116%; line-height: 1.2; color: var(--ink); }
.facts dt { font-size: .88rem; color: var(--steel); }
@media (max-width: 640px) { .facts { grid-template-columns: 1fr; } .facts__item + .facts__item { border-left: 0; border-top: 1px solid var(--line); } }

.svc-intro p { max-width: 66ch; margin: 0 0 1.1rem; font-size: 1.08rem; }
.svc-intro p:first-child { font-size: clamp(1.14rem, 1.04rem + .4vw, 1.3rem); line-height: 1.55; color: var(--ink); }
.svc-figure { margin: 2rem 0 0; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--r-md); background: var(--line-2); }
.svc-figure img { width: 100%; height: 100%; object-fit: cover; }
.svc-section { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.svc-section__title { margin-bottom: 1.1rem; font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem); }
.svc-section__intro { margin: -.3rem 0 1.1rem; color: var(--steel); }
.svc-section > p { max-width: 66ch; }

.ticks { display: grid; margin: 0; padding: 0; list-style: none; }
.ticks li { position: relative; padding: .62rem 0 .62rem 1.5rem; border-bottom: 1px solid var(--line-2); line-height: 1.45; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 1.12em; width: 7px; height: 7px; border-radius: 1px; background: var(--accent-mark); }
.ticks--cols { grid-template-columns: 1fr 1fr; column-gap: 2.25rem; }
.ticks--large li { padding-block: .8rem; font-size: 1.05rem; color: var(--ink); }
.section--mist .ticks li { border-bottom-color: var(--line); }
@media (max-width: 640px) { .ticks--cols { grid-template-columns: 1fr; } }

.codes { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.25rem; margin: 0; }
.codes__row { display: grid; grid-template-columns: 4.6rem 1fr; gap: 1rem; align-items: baseline; padding: .65rem 0; border-bottom: 1px solid var(--line-2); }
.codes dt { font-size: .98rem; font-weight: 650; font-stretch: 118%; color: var(--accent-text); }
.codes dd { margin: 0; }
@media (max-width: 640px) { .codes { grid-template-columns: 1fr; } }

.scopes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.scope { padding: 1.35rem 1.4rem; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; }
.scope__title { margin-bottom: .6rem; font-size: 1.12rem; }
.scope p { margin: 0; color: var(--steel); }
.scope .ticks li { padding-block: .32rem; border-bottom: 0; }
.scope .ticks li::before { top: .95em; }

.steps { display: grid; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li {
	display: grid;
	grid-template-columns: 2.6rem 1fr;
	gap: .75rem;
	align-items: baseline;
	padding: .72rem 0;
	border-bottom: 1px solid var(--line-2);
	counter-increment: step;
}
.steps li::before {
	content: counter(step, decimal-leading-zero);
	font-size: .95rem;
	font-weight: 650;
	font-stretch: 118%;
	font-variant-numeric: tabular-nums;
	color: var(--accent-text);
}
.steps--grid { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 2rem; }
.steps--grid li { display: block; padding: 1.15rem 0 1.4rem; border-bottom: 0; border-top: 1px solid var(--line-strong); color: var(--ink); }
.steps--grid li::before { display: block; margin-bottom: .45rem; }
@media (max-width: 1000px) { .steps--grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .steps--grid { grid-template-columns: 1fr; } .steps--grid li { padding-block: .9rem 1rem; } }

.svc-gallery { display: grid; gap: 1rem; margin-top: 2rem; }
.svc-gallery--2 { grid-template-columns: 1fr 1fr; }
.svc-gallery--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.svc-gallery__item { margin: 0; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--r-md); background: var(--line-2); }
.svc-gallery__item img { width: 100%; height: 100%; object-fit: cover; }
.svc-gallery--1 .svc-gallery__item { aspect-ratio: 16 / 9; }
@media (max-width: 560px) { .svc-gallery--3 { grid-template-columns: 1fr 1fr; } }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.chip { padding: .42rem .8rem; border: 1px solid var(--line-strong); border-radius: var(--r-sm); font-size: .92rem; font-weight: 620; font-stretch: 114%; color: var(--ink); }

.svc-cta {
	margin-top: clamp(3rem, 6vw, 4.5rem);
	padding: clamp(1.6rem, 4vw, 2.4rem);
	border-left: 3px solid var(--accent-mark);
	border-radius: 0 var(--r-md) var(--r-md) 0;
	background: var(--mist);
}
.svc-cta__title { font-size: clamp(1.35rem, 1.2rem + .6vw, 1.7rem); }
.svc-cta p { max-width: 52ch; margin: .6rem 0 1.4rem; color: var(--steel); }
.svc-cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.next-link {
	display: grid;
	grid-template-columns: 1fr 24px;
	gap: .15rem 1rem;
	margin-top: 2rem;
	padding: 1.35rem 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	color: var(--ink);
	text-decoration: none;
}
.next-link__label { font-size: .86rem; color: var(--steel); }
.next-link__name { grid-column: 1; font-size: 1.25rem; font-weight: 620; font-stretch: 112%; letter-spacing: -.012em; }
.next-link__icon { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--accent-text); transition: transform .2s ease; }
.next-link:hover .next-link__name { color: var(--accent-text); }
.next-link:hover .next-link__icon { transform: translateX(3px); }

.aside-card { padding: 1.4rem 1.5rem; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; }
.aside-card__title { margin: 0 0 .9rem; font-size: 1.05rem; font-weight: 650; font-stretch: 110%; color: var(--ink); }
.aside-card p { font-size: .96rem; }
.aside-card--ink { border-color: var(--ink); background: var(--ink); color: var(--on-dark-2); }
.aside-card--ink .aside-card__title { color: #fff; }
.aside-card--ink a:not(.btn) { color: #fff; }
.aside-nav__group { margin: 1rem 0 .3rem; font-size: .8rem; font-weight: 600; color: var(--steel); }
.aside-card__title + .aside-nav__group { margin-top: 0; }
.aside-nav { margin: 0; padding: 0; list-style: none; }
.aside-nav a {
	display: block;
	padding: .36rem 0 .36rem .85rem;
	border-left: 2px solid var(--line);
	font-size: .95rem;
	line-height: 1.35;
	color: var(--text);
	text-decoration: none;
}
.aside-nav a:hover { border-left-color: var(--steel-2); color: var(--ink); }
.aside-nav a[aria-current] { border-left-color: var(--accent-mark); font-weight: 620; color: var(--ink); }
.aside-contact { display: flex; align-items: center; gap: .6rem; margin: 0 0 .65rem; font-size: .95rem; text-decoration: none; }
.aside-contact .icon { width: 17px; height: 17px; color: var(--accent-bright); }
.aside-card .btn { margin-top: .6rem; }

/* ---------- About ---------- */
.split {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	gap: clamp(2.5rem, 6vw, 6rem);
	align-items: center;
}
.split--top { align-items: start; }
.split__text .section-title { margin-bottom: 1.25rem; }
.lede { font-size: clamp(1.14rem, 1.04rem + .4vw, 1.3rem); line-height: 1.55; color: var(--ink); }
.prose-area p, .split__text p { max-width: 62ch; }
.collage { position: relative; min-height: 460px; }
.collage__a { width: 82%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--r-md); }
.collage__b {
	position: absolute;
	right: 0; bottom: 0;
	width: 50%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border: 6px solid #fff;
	border-radius: var(--r-md);
}
@media (max-width: 900px) {
	.split { grid-template-columns: 1fr; }
	.collage { min-height: 0; padding-bottom: 18%; }
	.collage__a { width: 78%; }
}

.statements { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); }
.statement { padding-top: 1.5rem; border-top: 2px solid var(--ink); }
.statement__label { margin-bottom: 1rem; font-size: 1rem; font-weight: 600; font-stretch: var(--body-stretch); letter-spacing: 0; color: var(--steel); }
.statement__text {
	margin: 0;
	font-size: clamp(1.32rem, 1.12rem + .9vw, 1.82rem);
	font-weight: 520;
	font-stretch: 108%;
	letter-spacing: -.016em;
	line-height: 1.36;
	color: var(--ink);
}
@media (max-width: 800px) { .statements { grid-template-columns: 1fr; } }

.pair { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); align-items: stretch; }
.pair__title { margin-bottom: .75rem; font-size: 1.32rem; }
.pair__item p { margin: 0; color: var(--steel); }
.pair__card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1rem;
	min-height: 180px;
	padding: 1.6rem;
	border-radius: var(--r-md);
	background: var(--ink);
	color: #fff;
	text-decoration: none;
}
.pair__card-label { font-size: .95rem; font-weight: 650; font-stretch: 118%; color: var(--accent-bright); }
.pair__card-title { font-size: 1.3rem; font-weight: 620; font-stretch: 110%; line-height: 1.25; }
.pair__card-icon { color: var(--accent-bright); transition: transform .2s ease; }
.pair__card:hover .pair__card-icon { transform: translateX(4px); }
@media (max-width: 900px) { .pair { grid-template-columns: 1fr; } }

/* ---------- Services overview ---------- */
.svc-group {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
	gap: 2rem;
	padding-block: 2.25rem;
	border-top: 1px solid var(--line);
}
.svc-group:first-child { padding-top: 0; border-top: 0; }
.svc-group__name { position: sticky; top: var(--header-offset); align-self: start; font-size: 1.35rem; }
.svc-cards { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.svc-card {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr) 22px;
	gap: 1.5rem;
	align-items: center;
	padding: .9rem;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: #fff;
	color: var(--ink);
	text-decoration: none;
	transition: border-color .15s ease;
}
.svc-card:hover { border-color: var(--ink); }
.svc-card__media { display: block; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 4px; background: var(--line-2); }
.svc-card__img { width: 100%; height: 100%; object-fit: cover; }
.svc-card__body { display: flex; flex-direction: column; gap: .35rem; }
.svc-card__name { font-size: 1.28rem; font-weight: 640; font-stretch: 112%; letter-spacing: -.015em; line-height: 1.25; }
.svc-card__sum { font-size: .98rem; color: var(--steel); }
.svc-card__icon { width: 20px; height: 20px; color: var(--steel-2); }
.svc-card:hover .svc-card__icon, .svc-card:hover .svc-card__name { color: var(--accent-text); }
@media (max-width: 900px) { .svc-group { grid-template-columns: 1fr; gap: 1.2rem; } .svc-group__name { position: static; } }
@media (max-width: 600px) { .svc-card { grid-template-columns: 1fr; gap: 1rem; } .svc-card__icon { display: none; } }

/* ---------- Quality policy ---------- */
.policy {
	position: relative;
	max-width: 880px;
	margin: 0 auto;
	padding: clamp(1.75rem, 5vw, 3.5rem);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: #fff;
}
.policy::before { content: ""; position: absolute; top: -1px; bottom: -1px; left: -1px; width: 4px; border-radius: var(--r-md) 0 0 var(--r-md); background: var(--ink); }
.policy__scope { margin: 0 0 2rem; font-size: clamp(1.12rem, 1.05rem + .3vw, 1.26rem); line-height: 1.55; color: var(--ink); }
.policy__list { margin: 0; }
.policy__item { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 1.5rem; padding: 1.3rem 0; border-top: 1px solid var(--line); }
.policy__item dt { font-size: 1.1rem; font-weight: 640; font-stretch: 110%; color: var(--ink); }
.policy__item dd { margin: 0; }
.policy__foot { margin: 2rem 0 0; color: var(--steel); }
.policy__sign { margin: 1.5rem 0 0; font-weight: 620; color: var(--ink); }
@media (max-width: 640px) { .policy__item { grid-template-columns: 1fr; gap: .4rem; } }

/* ---------- Gallery ---------- */
.albums { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.album__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .25rem 1.5rem;
	margin-bottom: 1rem;
	padding-bottom: .85rem;
	border-bottom: 1px solid var(--line);
}
.album__title { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); }
.album__where { margin: 0; color: var(--steel); }
.album__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.album__item {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: var(--r-md);
	background: var(--line-2);
}
.album__img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.album__item:hover .album__img { transform: scale(1.03); }
.album__zoom {
	position: absolute;
	right: .75rem; bottom: .75rem;
	display: grid;
	place-items: center;
	width: 38px; height: 38px;
	border-radius: 50%;
	background: rgba(11, 40, 54, .78);
	color: #fff;
	opacity: 0;
	transition: opacity .2s ease;
}
.album__zoom .icon { width: 18px; height: 18px; }
.album__item:hover .album__zoom, .album__item:focus-visible .album__zoom { opacity: 1; }
@media (hover: none) { .album__zoom { opacity: 1; } }
@media (max-width: 700px) { .album__grid { grid-template-columns: 1fr 1fr; } }

.lightbox {
	width: 100vw;
	max-width: none;
	height: 100vh;
	height: 100dvh;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
}
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: rgba(6, 22, 30, .94); }
.lightbox__figure { display: flex; flex-direction: column; align-items: center; gap: .9rem; max-width: min(1200px, 88vw); margin: 0; }
.lightbox__img { width: auto; max-width: 100%; max-height: 80vh; max-height: 80dvh; border-radius: 4px; }
.lightbox__caption { font-size: .95rem; text-align: center; color: var(--on-dark-2); }
.lightbox__btn {
	position: absolute;
	display: grid;
	place-items: center;
	width: 48px; height: 48px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 50%;
	background: rgba(255, 255, 255, .06);
	color: #fff;
	cursor: pointer;
}
.lightbox__btn:hover { background: rgba(255, 255, 255, .14); }
.lightbox__btn:focus-visible { outline-color: var(--accent-bright); }
.lightbox__close { top: 1rem; right: 1rem; }
.lightbox__prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 1rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 600px) { .lightbox__prev, .lightbox__next { top: auto; bottom: 1rem; transform: none; } }

/* ---------- Contact and form ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (max-width: 960px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-info { display: grid; gap: 1.8rem; }
.contact-block__title { margin-bottom: .5rem; font-size: .95rem; font-weight: 600; font-stretch: var(--body-stretch); letter-spacing: 0; color: var(--steel); }
.contact-block p { margin: 0 0 .4rem; }
.contact-big { font-size: 1.45rem; font-weight: 640; font-stretch: 114%; letter-spacing: -.01em; color: var(--ink); text-decoration: none; }
.contact-big:hover { color: var(--accent-text); }
.contact-label { display: block; font-size: .86rem; color: var(--steel); }
.contact-block p a:not(.contact-big) { font-weight: 560; color: var(--ink); }
.contact-careers { margin: 0; padding: 1.1rem 1.25rem; border-radius: var(--r-md); background: var(--mist); font-size: .95rem; }
.contact-careers a { color: var(--ink); font-weight: 600; }
.hours--light .hours__row { border-bottom-color: var(--line); }
.hours--light dt { color: var(--steel); }
.hours--light dd { color: var(--ink); }
.map-band { height: clamp(320px, 40vw, 460px); background: var(--line-2); }
.map-band__frame { display: block; width: 100%; height: 100%; border: 0; filter: grayscale(.3); }

.enquiry {
	padding: clamp(1.5rem, 4vw, 2.5rem);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: #fff;
	box-shadow: 0 30px 60px -44px rgba(11, 40, 54, .4);
}
.enquiry__title { font-size: clamp(1.5rem, 1.3rem + .8vw, 1.9rem); }
.enquiry__intro { margin: .5rem 0 1.5rem; color: var(--steel); }
.enquiry__alert {
	margin-bottom: 1.25rem;
	padding: .85rem 1rem;
	border: 1px solid var(--line-strong);
	border: 1px solid color-mix(in srgb, var(--error) 30%, #fff);
	border-left: 3px solid var(--error);
	border-radius: var(--r-sm);
	background: #fdf3f2;
	color: var(--ink);
}
.enquiry__alert p { margin: 0; }
.enquiry__form { position: relative; display: grid; gap: 1.1rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }
.field { display: grid; gap: .4rem; }
.field label { font-size: .92rem; font-weight: 600; color: var(--ink); }
.field__opt { font-weight: 400; color: var(--steel); }
.field input, .field select, .field textarea {
	width: 100%;
	min-height: 48px;
	padding: .72rem .9rem;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-sm);
	background: #fff;
	font: inherit;
	font-size: 1rem;
	color: var(--ink);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { min-height: 140px; resize: vertical; }
.field ::placeholder { color: #8796a0; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(11, 40, 54, .12); }
.field--error input, .field--error textarea { border-color: var(--error); }
.field__error { margin: 0; font-size: .88rem; color: var(--error); }
.select { position: relative; }
.select select { appearance: none; -webkit-appearance: none; padding-right: 2.6rem; cursor: pointer; }
.select::after {
	content: "";
	position: absolute;
	right: 1.05rem; top: 50%;
	width: 8px; height: 8px;
	border-right: 1.75px solid var(--steel);
	border-bottom: 1.75px solid var(--steel);
	transform: translateY(-70%) rotate(45deg);
	pointer-events: none;
}
.enquiry__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: .25rem; }
.enquiry__privacy { margin: 0; font-size: .86rem; color: var(--steel); }
.enquiry__done { outline: none; }
.enquiry__done p { margin: .75rem 0 0; }
.enquiry__note { padding: .75rem 1rem; border-radius: var(--r-sm); background: var(--mist); font-size: .92rem; }
.hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Careers ---------- */
.careers-layout, .job-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}
.job-layout { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(4rem, 7vw, 6rem); }
.careers-aside, .job-aside { position: sticky; top: var(--header-offset); display: grid; gap: 1.25rem; }
@media (max-width: 1000px) {
	.careers-layout, .job-layout { grid-template-columns: 1fr; }
	.careers-aside, .job-aside { position: static; }
}
.job-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.search-field { position: relative; flex: 1; min-width: 240px; max-width: 520px; }
.search-field .icon { position: absolute; left: .95rem; top: 50%; width: 19px; height: 19px; color: var(--steel); transform: translateY(-50%); pointer-events: none; }
.search-field input {
	width: 100%;
	min-height: 52px;
	padding: .8rem 1rem .8rem 2.85rem;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-sm);
	background: #fff;
	font: inherit;
	color: var(--ink);
}
.search-field input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(11, 40, 54, .12); }
.job-count { margin: 0; font-size: .95rem; color: var(--steel); }
.job-empty { margin-top: 1rem; padding: 1.75rem 2rem; border: 1px dashed var(--line-strong); border-radius: var(--r-md); }
.job-empty__title { margin: 0 0 .5rem; font-size: 1.15rem; font-weight: 650; color: var(--ink); }
.job-empty p:last-of-type { margin-bottom: 1rem; }
.apply-steps { display: grid; gap: .6rem; margin: 0; padding-left: 1.2rem; font-size: .96rem; }
.apply-steps li::marker { font-weight: 700; color: var(--accent-bright); }
.job-facts { display: flex; flex-wrap: wrap; gap: .6rem 1.75rem; margin: 1.3rem 0 0; padding: 0; list-style: none; color: var(--on-dark); }
.job-facts li { display: inline-flex; align-items: center; gap: .5rem; }
.job-facts .icon { width: 18px; height: 18px; color: var(--accent-bright); }
.mini-jobs { margin: 0 0 1rem; padding: 0; list-style: none; }
.mini-jobs a { display: flex; flex-direction: column; padding: .6rem 0; border-bottom: 1px solid var(--line-2); text-decoration: none; }
.mini-jobs__title { font-weight: 600; line-height: 1.35; color: var(--ink); }
.mini-jobs__meta { font-size: .86rem; color: var(--steel); }
.mini-jobs a:hover .mini-jobs__title { color: var(--accent-text); }

/* ---------- Prose (job posts, articles, plain pages) ---------- */
.prose { max-width: 70ch; }
.prose > * + * { margin-top: 1.05em; }
.prose > :first-child { margin-top: 0; }
.prose p { margin-bottom: 0; }
.prose h2, .prose h3, .prose h4, .prose h5 { margin-top: 2em; margin-bottom: 0; font-stretch: 110%; }
.prose h2 { font-size: 1.55rem; }
.prose h3 { font-size: 1.28rem; }
.prose h4, .prose h5 { font-size: 1.1rem; }
.prose h2 + *, .prose h3 + *, .prose h4 + *, .prose h5 + * { margin-top: .6em; }
.prose ul { padding-left: 0; list-style: none; }
.prose ul li { position: relative; margin: .42rem 0; padding-left: 1.4rem; }
.prose ul li::before { content: ""; position: absolute; left: .1rem; top: .7em; width: 6px; height: 6px; border-radius: 1px; background: var(--accent-mark); }
.prose ol { padding-left: 1.4rem; }
.prose ol li { margin: .42rem 0; }
.prose ol li::marker { font-weight: 650; color: var(--accent-text); }
.prose a { color: var(--accent-text); text-underline-offset: 3px; }
.prose strong, .prose b { font-weight: 650; color: var(--ink); }
.prose img { border-radius: var(--r-md); }
.prose figure { margin-inline: 0; }
.prose blockquote { margin-inline: 0; padding-left: 1.25rem; border-left: 3px solid var(--accent-mark); color: var(--ink); }
.prose table { width: 100%; border-collapse: collapse; }
.prose th, .prose td { padding: .55rem .5rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin-block: 2em; }
.prose .alignleft { float: left; margin: .3rem 1.5rem 1rem 0; }
.prose .alignright { float: right; margin: .3rem 0 1rem 1.5rem; }
.prose .aligncenter { margin-inline: auto; }
.job-body h2 { font-size: 1.3rem; }
.article-wrap { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(4rem, 7vw, 6rem); }
.article-figure { max-width: 900px; margin: 0 0 2rem; overflow: hidden; border-radius: var(--r-md); }

/* ---------- Listings, search, 404 ---------- */
.listing { max-width: 900px; }
.search-form { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 2rem; }
.post-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.post-list__item { border-bottom: 1px solid var(--line); }
.post-list__link { display: flex; flex-direction: column; gap: .3rem; padding: 1.25rem 0; color: var(--ink); text-decoration: none; }
.post-list__title { font-size: 1.25rem; font-weight: 630; font-stretch: 110%; letter-spacing: -.012em; }
.post-list__meta { font-size: .86rem; color: var(--steel); }
.post-list__sum { color: var(--text); }
.post-list__link:hover .post-list__title { color: var(--accent-text); }
.nav-links { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 .8rem; border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink); text-decoration: none; }
.page-numbers.current { border-color: var(--ink); background: var(--ink); color: #fff; }
.lost-links { max-width: 900px; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.lost-links li { border-bottom: 1px solid var(--line); }

/* ---------- Fallback (plugin inactive) ---------- */
.fallback-head, .fallback-foot { padding-block: 1.25rem; background: var(--ink); color: #fff; }
.fallback-head a, .fallback-foot a { color: #fff; }
.fallback-main { padding-block: 3rem; }

/* ---------- Print ---------- */
@media print {
	.topbar, .masthead, .footer-cta, .trace, .svc-aside, .careers-aside, .job-aside, .map-band { display: none !important; }
	.hero, .page-hero, .section--ink, .site-footer { background: #fff !important; color: #000 !important; }
	.hero__title, .page-hero__title, .section--ink .section-title, .plate__code { color: #000 !important; }
}