/* ==========================================================================
   Hollingsworth Cabinetry  ·  main.css  ·  v1.0.0
   Concept: "A visit to the showroom". Light page, big photographs, Lato Light,
   teal as a signature only. Every colour pair here is from the approved
   contrast table in inputs/design-direction.md section 4.3.
   ========================================================================== */

/* --------------------------------------------------------------- 1. fonts */

@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('../fonts/lato-300.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/lato-400.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/lato-700.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metric-matched fallback so the font swap does not move the layout. */
@font-face {
	font-family: 'Lato fallback';
	src: local('Helvetica Neue'), local('Arial'), local('Liberation Sans');
	size-adjust: 97%;
	ascent-override: 101%;
	descent-override: 22%;
	line-gap-override: 0%;
}

/* -------------------------------------------------------------- 2. tokens */

:root {
	/* brand, kept exactly */
	--accent: #49c0ba;
	--accent-light: #e6f5f4;
	--accent-ink: #0a6a88;
	--brand-blue-mid: #179dbb;
	--brand-blue: #008cba;

	/* ink and text */
	--primary: #16242a;
	--primary-mid: #333;
	--primary-light: #5a6367;
	--text-dark: #333;
	--text-muted: #5a6367;
	--text-subtle: #646e72;

	/* surfaces */
	--surface-light: #fafafa;
	--surface-warm: #eef3f3;
	--surface-white: #fff;
	--line: #d5dddf;
	--line-strong: #727d81;

	/* state */
	--error: #b3261e;
	--success: #1b6e3c;

	/* per-service identifier, overridden per page */
	--service: var(--accent);

	/* type */
	--font: 'Lato', 'Lato fallback', 'Helvetica Neue', Arial, sans-serif;
	--fs-display: clamp(2.5rem, 1.444rem + 4.507vw, 5.5rem);
	--fs-h1: clamp(2.25rem, 1.634rem + 2.629vw, 4rem);
	--fs-h2: clamp(1.875rem, 1.567rem + 1.315vw, 2.75rem);
	--fs-h3: clamp(1.375rem, 1.243rem + 0.563vw, 1.75rem);
	--fs-h4: clamp(1.125rem, 1.081rem + 0.188vw, 1.25rem);
	--fs-quote: clamp(1.5rem, 1.236rem + 1.127vw, 2.25rem);
	--fs-lead: clamp(1.1875rem, 1.121rem + 0.282vw, 1.375rem);
	--fs-body: clamp(1.0625rem, 1.04rem + 0.094vw, 1.125rem);
	--fs-small: 0.9375rem;
	--fs-label: 0.8125rem;

	/* space, 4px base */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 24px;
	--sp-6: 32px;
	--sp-7: 48px;
	--sp-8: 64px;
	--sp-9: 96px;
	--sp-10: 128px;
	--sp-11: 160px;

	--section-y: clamp(4.5rem, 2.563rem + 8.263vw, 10rem);
	--gutter: 24px;
	--margin: 20px;
	--maxw: 1320px;

	/* motion */
	--dur-1: 150ms;
	--dur-2: 300ms;
	--dur-3: 600ms;
	--dur-4: 1200ms;
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

	--header-h: 64px;
}

@media (min-width: 768px) {
	:root { --margin: 40px; }
}
@media (min-width: 1024px) {
	:root { --margin: clamp(40px, 5vw, 72px); --header-h: 72px; }
}
@media (min-width: 1280px) {
	:root { --gutter: 32px; }
}

/* --------------------------------------------------------------- 3. reset */

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
	margin: 0;
	background: var(--surface-light);
	color: var(--text-dark);
	font-family: var(--font);
	font-size: var(--fs-body);
	line-height: 1.65;
	font-weight: 400;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; }

:where(a) { color: inherit; }

/* ----------------------------------------------------------- 4. utilities */

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

.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }
.section--mist { background: var(--surface-warm); }
.section + .section--mist, .section--mist + .section { border-top: 0; }

.grid {
	display: grid;
	gap: var(--gutter);
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (min-width: 768px) { .grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } }

.sr-only, .screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
	white-space: nowrap; border: 0;
}

.measure { max-width: 66ch; }
.stack > * + * { margin-top: var(--sp-5); }

/* --------------------------------------------------------------- 5. type */

h1, h2, h3, h4 { text-wrap: balance; color: var(--text-dark); }

.t-display {
	font-size: var(--fs-display);
	font-weight: 300;
	line-height: 1.04;
	letter-spacing: -0.02em;
}
.t-h1 {
	font-size: var(--fs-h1);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: -0.015em;
}
.t-h2 {
	font-size: var(--fs-h2);
	font-weight: 300;
	line-height: 1.15;
	letter-spacing: -0.01em;
}
.t-h3 { font-size: var(--fs-h3); font-weight: 400; line-height: 1.25; }
.t-h4 { font-size: var(--fs-h4); font-weight: 700; line-height: 1.35; }
.t-lead { font-size: var(--fs-lead); line-height: 1.5; }
.t-small { font-size: var(--fs-small); line-height: 1.5; }
.t-quote {
	font-size: var(--fs-quote);
	font-weight: 300;
	line-height: 1.3;
	letter-spacing: -0.005em;
}
.t-label {
	font-size: var(--fs-label);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.t-muted { color: var(--text-muted); }
.t-subtle { color: var(--text-subtle); }
.tabular { font-variant-numeric: tabular-nums; }

/* the short brand lines, moved below the heading as a sub-line */
.subline {
	font-size: var(--fs-lead);
	line-height: 1.5;
	color: var(--text-muted);
	margin-top: var(--sp-3);
}

.eyebrow { color: var(--text-muted); display: block; margin-bottom: var(--sp-4); }

.section-head { margin-bottom: var(--sp-6); }
@media (min-width: 768px) { .section-head { margin-bottom: var(--sp-7); } }

/* body copy links */
.rich a, .body-link {
	color: var(--accent-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.rich a:hover, .body-link:hover { text-decoration-thickness: 2px; }

.rich > * + * { margin-top: var(--sp-5); }
.rich h2 { font-size: var(--fs-h3); font-weight: 400; line-height: 1.25; margin-top: var(--sp-8); }
.rich h3 { font-size: var(--fs-h4); font-weight: 700; margin-top: var(--sp-7); }
.rich ul, .rich ol { padding-left: 1.4em; }
.rich li + li { margin-top: var(--sp-2); }
.rich ul { list-style: disc; }
.rich ol { list-style: decimal; }
.rich blockquote {
	border-left: 2px solid var(--accent);
	padding-left: var(--sp-5);
	font-size: var(--fs-lead);
	color: var(--text-muted);
}
.rich blockquote p + p { margin-top: var(--sp-3); }
.rich strong { font-weight: 700; color: var(--text-dark); }
.rich figure img { width: 100%; }
.rich figcaption { font-size: var(--fs-small); color: var(--text-muted); margin-top: var(--sp-3); }
.rich .post-callout {
	font-size: var(--fs-lead);
	font-weight: 400;
	color: var(--text-dark);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	padding-block: var(--sp-5);
}

/* ------------------------------------------------------------ 6. a11y focus */

:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
	box-shadow: 0 0 0 6px var(--surface-light);
}
.on-ink :focus-visible {
	outline-color: var(--accent);
	box-shadow: 0 0 0 6px var(--primary);
}

.skip-link {
	position: absolute;
	left: var(--sp-4);
	top: var(--sp-4);
	z-index: 400;
	transform: translateY(-200%);
	background: var(--primary);
	color: var(--surface-light);
	padding: var(--sp-3) var(--sp-5);
	text-decoration: none;
	font-size: var(--fs-label);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.skip-link:focus-visible { transform: translateY(0); }

/* ------------------------------------------------------------- 7. buttons */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	min-height: 52px;
	min-width: 44px;
	padding: 0 28px;
	border: 1px solid transparent;
	border-radius: 0;
	font-size: var(--fs-label);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color var(--dur-1) linear, color var(--dur-1) linear,
		border-color var(--dur-1) linear, transform var(--dur-1) linear;
}
.btn--primary { background: var(--accent); color: var(--primary); }
.btn--primary:hover, .btn--primary:focus-visible { background: var(--primary); color: var(--surface-light); }
.btn--secondary { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn--secondary:hover, .btn--secondary:focus-visible { background: var(--primary); color: var(--surface-light); }
.btn:active { transform: translateY(1px); }
.btn[aria-disabled="true"], .btn:disabled {
	background: var(--line);
	color: var(--text-muted);
	border-color: var(--line);
	pointer-events: none;
}
.on-ink .btn--primary, .site-footer .btn--primary, .menu-dialog .btn--primary {
	background: var(--accent);
	color: var(--primary);
}
.on-ink .btn--secondary { color: var(--surface-light); border-color: var(--surface-light); }
.on-ink .btn--secondary:hover, .on-ink .btn--secondary:focus-visible {
	background: var(--surface-light);
	color: var(--primary);
}
.on-ink .btn--primary:hover, .on-ink .btn--primary:focus-visible {
	background: var(--surface-light);
	color: var(--primary);
}

.btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4);
	margin-top: var(--sp-6);
}

/* arrow link */
.arrow-link {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-3);
	min-height: 44px;
	color: var(--primary);
	font-size: var(--fs-label);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: underline;
	text-decoration-color: var(--accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 6px;
}
.arrow-link svg { flex: none; transition: transform var(--dur-2) var(--ease-out); }
.arrow-link:hover svg, .arrow-link:focus-visible svg { transform: translateX(4px); }

/* -------------------------------------------------------------- 8. header */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--surface-light);
}
.site-header::after {
	content: '';
	position: absolute;
	inset: auto 0 0 0;
	height: 1px;
	background: var(--line);
	opacity: 0;
	transition: opacity var(--dur-2) linear;
}
.site-header.is-stuck::after { opacity: 1; }

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-5);
	min-height: var(--header-h);
}
.brand { display: inline-flex; align-items: center; padding-block: var(--sp-2); }
.brand img { width: 196px; height: 37px; }
@media (min-width: 1024px) { .brand img { width: 240px; height: 46px; } }

.header-actions { display: flex; align-items: center; gap: var(--sp-3); }

.icon-btn {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 48px;
	min-width: 48px;
	height: 48px;
	background: none;
	border: 1px solid var(--line);
	color: var(--primary);
	cursor: pointer;
}
.icon-btn:hover { border-color: var(--primary); }

.menu-btn {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: var(--sp-2);
	min-height: 48px;
	padding: 0 var(--sp-4);
	background: none;
	border: 1px solid var(--primary);
	color: var(--primary);
	font-size: var(--fs-label);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
}
.menu-btn:hover { background: var(--primary); color: var(--surface-light); }

/* desktop nav */
.nav-desktop { display: none; }
@media (min-width: 1024px) {
	.nav-desktop { display: flex; align-items: center; gap: var(--sp-6); }
	.nav-mobile-only { display: none !important; }
}
.nav-list { display: flex; align-items: center; gap: var(--sp-6); list-style: none; margin: 0; }
.nav-list > li { position: relative; }
.nav-link {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	font-size: var(--fs-label);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-dark);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}
.nav-link:hover { border-bottom-color: var(--accent); }
.nav-link[aria-current="page"], .nav-link.is-current { border-bottom-color: var(--accent); }

.nav-disclosure {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	min-height: 48px;
	background: none;
	border: 0;
	border-bottom: 1px solid transparent;
	padding: 0;
	font-size: var(--fs-label);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-dark);
	cursor: pointer;
}
.nav-disclosure:hover { border-bottom-color: var(--accent); }
.nav-disclosure svg { transition: transform var(--dur-1) linear; }
.nav-disclosure[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav-panel {
	position: absolute;
	top: 100%;
	left: -16px;
	min-width: 280px;
	background: var(--surface-white);
	border: 1px solid var(--line);
	padding: var(--sp-3) 0;
	list-style: none;
	margin: 0;
	display: none;
}
.nav-panel.is-open { display: block; }
.nav-panel a {
	display: block;
	padding: var(--sp-3) var(--sp-5);
	border-left: 4px solid transparent;
	text-decoration: none;
	font-size: var(--fs-small);
	font-weight: 700;
	color: var(--text-dark);
}
.nav-panel a:hover { background: var(--accent-light); }
.nav-panel a[data-service-colour] { border-left-color: var(--c, var(--accent)); }

.header-phone {
	display: none;
	font-size: var(--fs-small);
	font-weight: 700;
	color: var(--text-dark);
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}
.header-phone:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 1280px) { .header-phone { display: inline-flex; align-items: center; min-height: 48px; } }

.header-cta { min-height: 48px; }
.nav-desktop .header-cta { display: none; }
@media (min-width: 1024px) { .nav-desktop .header-cta { display: inline-flex; } }

/* mobile menu dialog */
.menu-dialog {
	position: fixed;
	inset: 0;
	width: 100%;
	max-width: none;
	max-height: none;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--primary);
	color: var(--surface-light);
	z-index: 200;
}
.menu-dialog::backdrop { background: rgba(22, 36, 42, 0.9); }
.menu-dialog:not([open]) { display: none; }
.menu-dialog-inner {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	padding: var(--sp-4) var(--margin) calc(var(--sp-7) + env(safe-area-inset-bottom));
	overflow-y: auto;
}
.menu-top { display: flex; align-items: center; justify-content: space-between; min-height: 64px; }
.menu-close {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	min-height: 48px;
	padding: 0 var(--sp-4);
	background: none;
	border: 1px solid var(--surface-light);
	color: var(--surface-light);
	font-size: var(--fs-label);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
}
.menu-nav { list-style: none; margin: var(--sp-6) 0 0; flex: 1; }
.menu-nav a {
	display: flex;
	align-items: center;
	min-height: 56px;
	font-size: 1.75rem;
	font-weight: 300;
	color: var(--surface-light);
	text-decoration: none;
	border-bottom: 1px solid rgba(250, 250, 250, 0.16);
}
.menu-nav a:hover { color: var(--accent); }
.menu-nav .is-sub a { padding-left: 20px; font-size: 1.25rem; color: var(--line); }
.menu-foot { margin-top: var(--sp-7); }
.menu-foot .btn { width: 100%; }
.menu-foot address {
	margin-top: var(--sp-5);
	font-style: normal;
	font-size: var(--fs-small);
	color: var(--line);
	line-height: 1.7;
}
/* Scoped to the address block on purpose: a bare `.menu-foot a` outranks
   `.btn--primary` and was painting the button label #D5DDDF on teal (1.6:1). */
.menu-foot address a { color: var(--line); }

/* mobile action bar */
.action-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-2);
	padding: var(--sp-2) var(--margin) calc(var(--sp-2) + env(safe-area-inset-bottom));
	background: var(--surface-light);
	border-top: 1px solid var(--line);
	transform: translateY(110%);
	transition: transform var(--dur-2) var(--ease-out);
}
.action-bar .btn { padding: 0 var(--sp-3); min-height: 48px; font-size: 0.75rem; letter-spacing: 0.1em; }
.action-bar.is-shown { transform: translateY(0); }
@media (min-width: 768px) { .action-bar { display: none; } }
body.has-action-bar { padding-bottom: 0; }
@media (max-width: 767px) { body.has-action-bar { padding-bottom: 72px; } }

/* --------------------------------------------------------- 9. page header */

.page-head { padding-block: calc(var(--section-y) * 0.65) 0; }
.page-head .t-h1 { margin-top: var(--sp-4); }
.page-head .measure { margin-top: var(--sp-5); }
.page-head__rule { width: 72px; height: 4px; background: var(--service); margin-bottom: var(--sp-5); }

.breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	list-style: none;
	font-size: var(--fs-small);
	color: var(--text-muted);
	margin-bottom: var(--sp-4);
}
.breadcrumb a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb li + li::before { content: '/'; margin-right: var(--sp-2); color: var(--line-strong); }

/* ---------------------------------------------------------- 10. media */

.media { position: relative; overflow: hidden; background: var(--surface-warm); }
.media img { width: 100%; height: 100%; object-fit: cover; }
.r-16-9 { aspect-ratio: 16 / 9; }
.r-3-2 { aspect-ratio: 3 / 2; }
.r-4-5 { aspect-ratio: 4 / 5; }
.r-1-1 { aspect-ratio: 1 / 1; }

figcaption, .caption { font-size: var(--fs-small); color: var(--text-muted); margin-top: var(--sp-3); }

/* `overflow: clip` here matters: the hero's settle animation scales the image to
   1.04, which would otherwise widen the page by ~30px and create a horizontal
   scrollbar at desktop widths. */
.full-bleed { width: 100%; max-width: 1440px; margin-inline: auto; overflow: clip; }

/* image link hover */
.img-link { display: block; text-decoration: none; color: inherit; }
.img-link .media img { transition: transform var(--dur-3) var(--ease-out); }
.img-link:hover .media img, .img-link:focus-visible .media img { transform: scale(1.03); }

/* ----------------------------------------------------------- 11. home hero */

.hero-photo { position: relative; overflow: clip; }
.hero-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (min-width: 768px) {
	.hero-photo img { aspect-ratio: 16 / 9; max-height: 78vh; max-height: 78svh; }
}
.hero-copy { padding-block: var(--sp-7) 0; }
@media (min-width: 1024px) {
	.hero-copy { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: end; }
	.hero-copy__title { grid-column: 1 / span 7; }
	.hero-copy__aside { grid-column: 9 / span 4; }
}
.hero-copy__aside { margin-top: var(--sp-5); }
@media (min-width: 1024px) { .hero-copy__aside { margin-top: 0; } }

/* ------------------------------------------------- 12. service index rows */

.svc-index { border-top: 1px solid var(--line); }
.svc-row {
	display: block;
	padding-block: var(--sp-6);
	border-bottom: 1px solid var(--line);
	text-decoration: none;
	color: inherit;
}
.svc-row__rule { width: 56px; height: 4px; background: var(--c, var(--accent)); margin-bottom: var(--sp-5); }
.svc-row__name { margin-bottom: var(--sp-3); }
.svc-row__meta { color: var(--text-muted); font-size: var(--fs-small); }
.svc-row__logo { margin-top: var(--sp-5); }
.svc-row__logo img { width: auto; max-width: 180px; max-height: 56px; object-fit: contain; }
.svc-row__media { margin-top: var(--sp-5); }
.svc-row__more { margin-top: var(--sp-5); }
.svc-row:hover .arrow-faux svg, .svc-row:focus-visible .arrow-faux svg { transform: translateX(4px); }
.arrow-faux {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-3);
	font-size: var(--fs-label);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: underline;
	text-decoration-color: var(--accent);
	text-underline-offset: 6px;
}
.arrow-faux svg { transition: transform var(--dur-2) var(--ease-out); }

@media (min-width: 1024px) {
	.svc-index { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); border-top: 0; }
	.svc-index__rows { grid-column: 1 / span 7; border-top: 1px solid var(--line); }
	.svc-index__preview { grid-column: 9 / span 4; position: sticky; top: calc(var(--header-h) + var(--sp-7)); align-self: start; }
	.svc-row { display: grid; grid-template-columns: 1fr auto; align-items: start; column-gap: var(--sp-6); }
	.svc-row__rule { grid-column: 1 / -1; }
	.svc-row__media { display: none; }
	.svc-row__more { grid-column: 2; grid-row: 2 / span 2; margin-top: 0; align-self: center; }
	.svc-row__logo { grid-column: 1; }
	.svc-preview { position: relative; aspect-ratio: 4 / 5; background: var(--surface-warm); }
	.svc-preview img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		opacity: 0;
		transition: opacity var(--dur-2) linear;
	}
	.svc-preview img.is-active { opacity: 1; }
}

/* ------------------------------------------------------- 13. scroll strips */

.strip {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 78%;
	gap: var(--gutter);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	padding-bottom: var(--sp-4);
}
.strip > * { scroll-snap-align: start; }
@media (min-width: 768px) { .strip { grid-auto-columns: 44%; } }
@media (min-width: 1024px) { .strip { grid-auto-columns: 30%; } }

.strip-head { display: flex; align-items: end; justify-content: space-between; gap: var(--sp-5); }
.strip-nav { display: none; gap: var(--sp-2); }
@media (min-width: 1024px) { .strip-nav { display: flex; } }

/* --------------------------------------------------------- 14. card types */

.tile__name { margin-top: var(--sp-4); }
.tile__meta { color: var(--text-muted); font-size: var(--fs-small); margin-top: var(--sp-1); }

.gallery-grid {
	display: grid;
	gap: var(--gutter);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 1024px) { .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.tour-list { display: grid; gap: var(--sp-8); }
@media (min-width: 1024px) {
	.tour-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); }
	.tour-list > .is-wide { grid-column: 1 / -1; }
	.tour-list > .is-offset { margin-top: var(--sp-9); }
}

.post-list { display: grid; gap: var(--sp-8); }
@media (min-width: 768px) { .post-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); } }
.post-card__cat { margin-top: var(--sp-4); color: var(--text-muted); }
.post-card__title { margin-top: var(--sp-2); }
/* Title links are the whole tap target for a card, so give them real height. */
a.t-h3, a.t-h2, a.t-h4 { display: block; min-height: 44px; padding-block: 8px; }
.post-card__excerpt {
	margin-top: var(--sp-3);
	color: var(--text-muted);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* mosaic on home "what we make" */
.mosaic { display: grid; gap: var(--sp-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) {
	.mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; }
	.mosaic > :first-child { grid-row: span 2; }
}
.link-columns { list-style: none; columns: 2; column-gap: var(--gutter); margin-top: var(--sp-5); }
.link-columns li { break-inside: avoid; }
.link-columns a {
	display: block;
	padding-block: var(--sp-3);
	min-height: 44px;
	text-decoration: none;
	border-bottom: 1px solid var(--line);
	font-size: var(--fs-small);
}
.link-columns a:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ----------------------------------------------------------- 15. chips */

.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; }
.chip, .chip-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--sp-4);
	background: none;
	border: 1px solid var(--line-strong);
	color: var(--text-dark);
	font-size: var(--fs-label);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}
.chip:hover, .chip-link:hover { border-color: var(--primary); }
.chip[aria-pressed="true"], .chip-link[aria-current="page"], .chip-link.is-current {
	background: var(--accent-light);
	border: 2px solid var(--primary);
	color: var(--primary);
}
.chip-scroller {
	display: flex;
	gap: var(--sp-2);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	padding-bottom: var(--sp-2);
	scrollbar-width: thin;
}
.chip-scroller > * { flex: none; }
.filter-group + .filter-group { margin-top: var(--sp-4); }
.filter-group__label { display: block; margin-bottom: var(--sp-2); color: var(--text-muted); }
.filter-status { margin-top: var(--sp-4); color: var(--text-muted); font-size: var(--fs-small); }

/* --------------------------------------------------- 16. gallery masonry */

.photo-grid { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
@media (min-width: 768px) { .photo-grid { gap: var(--sp-5); grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1536px) { .photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.photo-btn {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: var(--surface-warm);
	cursor: zoom-in;
}
.photo-btn img { width: 100%; height: auto; transition: transform var(--dur-3) var(--ease-out); }
.photo-btn:hover img { transform: scale(1.02); }

/* tour photo essay rhythm */
.essay { display: grid; gap: var(--sp-3); }
@media (min-width: 1024px) {
	.essay { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter) var(--gutter); }
	.essay > * { grid-column: 1 / -1; }
	.essay > .e-pair-a { grid-column: 1 / span 7; align-self: end; }
	.essay > .e-pair-b { grid-column: 8 / span 5; align-self: end; }
	.essay > .e-inset { grid-column: 3 / span 8; }
}

/* -------------------------------------------------------- 17. lightbox */

.lightbox {
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--primary);
	color: var(--surface-light);
}
.lightbox::backdrop { background: rgba(22, 36, 42, 0.96); }
.lightbox-inner {
	display: flex;
	flex-direction: column;
	height: 100dvh;
	padding: var(--sp-3);
	gap: var(--sp-3);
}
.lightbox-top { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.lightbox-count { font-size: var(--fs-small); color: var(--line); font-variant-numeric: tabular-nums; }
/* flex:1 with min-height:0 is what stops a tall photograph pushing the caption
   and the arrows off the bottom of the dialog and sitting over them. */
.lightbox-stage { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.lightbox-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.lightbox-bottom { flex: none; }
.lightbox-bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.lightbox-caption { font-size: var(--fs-small); color: var(--line); }
.lb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: none;
	border: 1px solid var(--surface-light);
	color: var(--surface-light);
	cursor: pointer;
}
.lb-btn:hover { background: var(--surface-light); color: var(--primary); }
.lb-btn[disabled] { opacity: 0.4; pointer-events: none; }

/* ----------------------------------------------------------- 18. film */

.film { position: relative; }
.film__btn {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	gap: var(--sp-3);
	width: 100%;
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--surface-light);
}
.film__circle {
	display: grid;
	place-items: center;
	width: 88px;
	height: 88px;
	border-radius: 50%;
	background: var(--accent);
	color: var(--primary);
	transition: transform var(--dur-2) var(--ease-out);
}
.film__btn:hover .film__circle { transform: scale(1.06); }
.film__label {
	font-size: var(--fs-label);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	background: var(--surface-light);
	color: var(--primary);
	padding: var(--sp-2) var(--sp-4);
}
.film-dialog {
	width: min(92vw, 1100px);
	max-width: 92vw;
	padding: 0;
	border: 0;
	background: var(--primary);
	color: var(--surface-light);
}
.film-dialog::backdrop { background: rgba(22, 36, 42, 0.94); }
.film-dialog__bar { display: flex; justify-content: flex-end; padding: var(--sp-3); }
.film-dialog__frame { aspect-ratio: 16 / 9; }
.film-dialog__frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ------------------------------------------------------ 19. accordion */

.accordion { border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-5);
	min-height: 64px;
	padding-block: var(--sp-4);
	font-size: var(--fs-h3);
	font-weight: 400;
	line-height: 1.3;
	cursor: pointer;
	list-style: none;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
	content: '';
	flex: none;
	width: 20px;
	height: 20px;
	background:
		linear-gradient(var(--primary), var(--primary)) center/100% 1px no-repeat,
		linear-gradient(var(--primary), var(--primary)) center/1px 100% no-repeat;
	transition: transform var(--dur-2) var(--ease-out);
}
.accordion details[open] summary::after { transform: rotate(45deg); }
.accordion .answer { padding-bottom: var(--sp-5); color: var(--text-muted); max-width: 66ch; }

/* --------------------------------------------------- 20. testimonials */

.quotes { position: relative; }
.quote { max-width: 60ch; }
.quote blockquote p { text-wrap: pretty; }
.quote cite { display: block; margin-top: var(--sp-5); font-style: normal; color: var(--text-muted); font-size: var(--fs-small); }
.quote-nav { display: flex; gap: var(--sp-2); margin-top: var(--sp-6); }
.quote[hidden] { display: none; }

/* ------------------------------------------------------- 21. process */

.steps { display: grid; gap: var(--sp-6); position: relative; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.step__n { display: block; color: var(--text-muted); margin-bottom: var(--sp-3); }
.step { border-top: 1px solid var(--line); padding-top: var(--sp-4); }

.sketch-bg {
	background-image: url('../img/sketch.webp');
	background-size: cover;
	background-position: center;
	position: relative;
	isolation: isolate;
}
.sketch-bg::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--surface-light);
	opacity: 0.88;
	z-index: -1;
}

/* --------------------------------------------------------- 22. people */

.people { display: grid; gap: var(--sp-6); }
@media (min-width: 768px) { .people { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); } }
.person { border-top: 1px solid var(--line); padding-top: var(--sp-4); }
.person__role { color: var(--text-muted); font-size: var(--fs-small); }
.person__name { margin-block: var(--sp-2); }
.person__links { display: flex; flex-wrap: wrap; gap: var(--sp-4); font-size: var(--fs-small); }
.person__links a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }

.team-groups { display: grid; gap: var(--sp-7); }
.team-list { list-style: none; display: grid; gap: var(--sp-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .team-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.team-list .role { display: block; color: var(--text-muted); font-size: var(--fs-small); }

/* ---------------------------------------------------------- 23. forms */

.form { display: grid; gap: var(--sp-5); max-width: 36rem; }
.field { display: grid; gap: var(--sp-2); }
.field label { font-size: var(--fs-small); font-weight: 700; color: var(--text-dark); }
.field input, .field textarea, .field select {
	width: 100%;
	min-height: 52px;
	padding: 14px var(--sp-4);
	background: var(--surface-white);
	border: 1px solid var(--line-strong);
	border-radius: 0;
	font-size: 1.0625rem;
	line-height: 1.4;
	color: var(--text-dark);
}
.field textarea { min-height: 160px; resize: vertical; }
.field input:focus, .field textarea:focus { border: 2px solid var(--primary); padding: 13px 15px; outline: none; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.field ::placeholder { color: var(--text-subtle); opacity: 1; }
.field--error input, .field--error textarea { border: 2px solid var(--error); }
.field__error { color: var(--error); font-size: var(--fs-small); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-summary {
	border: 2px solid var(--error);
	color: var(--error);
	padding: var(--sp-4);
	font-size: var(--fs-small);
}
.form-summary ul { padding-left: 1.2em; list-style: disc; margin-top: var(--sp-2); }
.form-notice {
	background: var(--accent-light);
	color: var(--text-dark);
	padding: var(--sp-5);
	font-size: var(--fs-small);
	border-left: 4px solid var(--accent);
}

/* CF7 parity */
.wpcf7-form p { margin: 0 0 var(--sp-5); }
.wpcf7-form label { display: block; font-size: var(--fs-small); font-weight: 700; margin-bottom: var(--sp-2); }
.wpcf7-form input[type="text"], .wpcf7-form input[type="email"], .wpcf7-form input[type="tel"], .wpcf7-form textarea {
	width: 100%;
	min-height: 52px;
	padding: 14px var(--sp-4);
	background: var(--surface-white);
	border: 1px solid var(--line-strong);
	border-radius: 0;
	font-size: 1.0625rem;
}
.wpcf7-form textarea { min-height: 160px; }
.wpcf7-form input[type="submit"] {
	min-height: 52px;
	padding: 0 28px;
	background: var(--accent);
	color: var(--primary);
	border: 1px solid transparent;
	border-radius: 0;
	font-size: var(--fs-label);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
}
.wpcf7-form input[type="submit"]:hover { background: var(--primary); color: var(--surface-light); }
.wpcf7-not-valid-tip { color: var(--error); font-size: var(--fs-small); }
.wpcf7-response-output { border: 2px solid var(--line-strong) !important; padding: var(--sp-4) !important; font-size: var(--fs-small); }

/* definition list used for contact facts */
.facts { display: grid; gap: var(--sp-4); margin-top: var(--sp-6); }
.facts > div { border-top: 1px solid var(--line); padding-top: var(--sp-3); }
.facts dt { font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.facts dd { margin-top: var(--sp-2); }
.facts a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
/* Standalone contact links are tap targets, not inline prose links. */
.facts dd > a { display: inline-block; min-width: 44px; padding-block: 11px; }
.facts .tabular { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------- 24. closing + footer */

.ruler-ticks {
	height: 12px;
	background-image: repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px 12px);
	background-position: bottom;
	background-repeat: repeat-x;
	margin-bottom: var(--sp-7);
}
.closing { background: var(--primary); color: var(--surface-light); }
.closing .t-h2 { color: var(--surface-light); }
.closing .ruler-ticks { background-image: repeating-linear-gradient(to right, var(--accent) 0 1px, transparent 1px 12px); }
.closing__phone {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	color: var(--accent);
	font-size: var(--fs-lead);
	text-decoration: underline;
	text-underline-offset: 4px;
	font-variant-numeric: tabular-nums;
}

.site-footer { background: var(--primary); color: var(--line); }
.site-footer a { color: var(--line); text-decoration: none; }
.site-footer a:hover { color: var(--surface-light); text-decoration: underline; text-underline-offset: 3px; }
.footer-cols { display: grid; gap: var(--sp-7); }
@media (min-width: 768px) { .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); } }
@media (min-width: 1024px) { .footer-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.footer-col h2 {
	color: var(--surface-light);
	font-size: var(--fs-label);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: var(--sp-4);
}
.footer-col ul { list-style: none; }
.footer-col li a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; font-size: var(--fs-small); }
.footer-brand__mark { display: flex; align-items: center; gap: var(--sp-3); }
.footer-brand__mark img { width: 48px; height: 48px; }
.footer-brand__word { display: block; }
/* The published wordmark is an SVG filled #333. A mask recolours it for the ink
   footer without needing a reversed file from the client. */
.footer-brand__mask {
	display: block;
	width: 170px;
	height: 14px;
	background-color: var(--surface-light);
	-webkit-mask: url('../img/wordmark.svg') no-repeat left center / contain;
	mask: url('../img/wordmark.svg') no-repeat left center / contain;
}
.footer-brand__sub {
	display: block;
	margin-top: 6px;
	font-size: 0.6875rem;
	letter-spacing: 0.38em;
	text-transform: uppercase;
	color: var(--line);
}
.footer-since { margin-top: var(--sp-5); font-size: var(--fs-small); }
.socials { display: flex; gap: var(--sp-2); margin-top: var(--sp-5); list-style: none; }
.socials a {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(250, 250, 250, 0.3);
	color: var(--line);
}
.socials a:hover { border-color: var(--surface-light); color: var(--surface-light); background: rgba(250, 250, 250, 0.08); }
.socials svg { width: 20px; height: 20px; fill: currentColor; }
.footer-visit address { font-style: normal; font-size: var(--fs-small); line-height: 1.8; }
.footer-base {
	border-top: 1px solid rgba(250, 250, 250, 0.16);
	margin-top: var(--sp-8);
	padding-top: var(--sp-5);
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4) var(--sp-6);
	justify-content: space-between;
	font-size: var(--fs-small);
}
.footer-base ul { display: flex; flex-wrap: wrap; gap: var(--sp-5); list-style: none; }

/* ------------------------------------------------------ 25. pagination */

.pagination { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-8); }
.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	min-height: 48px;
	padding: 0 var(--sp-3);
	border: 1px solid var(--line-strong);
	text-decoration: none;
	font-size: var(--fs-small);
	font-weight: 700;
}
.pagination .page-numbers.current { background: var(--accent-light); border: 2px solid var(--primary); }

/* ---------------------------------------------------------- 26. motion */

html.js [data-reveal] { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
	html.js [data-reveal] {
		opacity: 0;
		transform: translateY(16px);
		transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
	}
	html.js [data-reveal].is-in { opacity: 1; transform: none; }
	html.js .hero-photo img { animation: settle var(--dur-4) var(--ease-out) both; }
	@keyframes settle { from { transform: scale(1.04); } to { transform: none; } }
	@supports (animation-timeline: view()) {
		html.js [data-drift] { animation: drift linear both; animation-timeline: view(); }
		@keyframes drift { from { transform: translateY(-3%); } to { transform: translateY(3%); } }
	}
	@view-transition { navigation: auto; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	html.js [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ------------------------------------------------------- 27. print + misc */

.has-dialog-open { overflow: hidden; }

@media print {
	.site-header, .site-footer, .action-bar, .closing, .menu-dialog, .lightbox { display: none !important; }
	body { background: #fff; }
}

/* ==========================================================================
   POLISH ROUND 1  ·  2026-10-09  ·  v1.1.0
   1. Image-background heroes   2. Photo hover   3. Scroll signature element
   ========================================================================== */

/* ------------------------------------------------- 28. hero band (item 3) */

.hero-band {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: flex-end;
	overflow: clip;
}
.hero-band--display { min-height: 78svh; }
.hero-band--large { min-height: 62svh; }
.hero-band--compact { min-height: 46svh; }
@media (min-width: 768px) {
	.hero-band--display { min-height: 84svh; }
	.hero-band--large { min-height: 66svh; }
	.hero-band--compact { min-height: 48svh; }
}

.hero-band__media { position: absolute; inset: 0; z-index: -1; background: var(--primary); }
.hero-band__img { width: 100%; height: 100%; object-fit: cover; }

/* Bottom-weighted ink scrim. The 0.78 stop is what guarantees AA for #FAFAFA
   even over a pure-white photograph; do not lighten it without recomputing. */
.hero-band__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			to top,
			rgba(22, 36, 42, 0.34) 0%,
			rgba(22, 36, 42, 0.26) 45%,
			rgba(22, 36, 42, 0.10) 72%,
			rgba(22, 36, 42, 0) 92%
		);
}
/* Wider screens put the text in the left half, so the right side of the
   photograph can be left alone. The two layers multiply where the text sits. */


.hero-band__inner {
	padding-block: var(--sp-9) var(--sp-8);
	max-width: calc(var(--maxw) + var(--margin) * 2);
	width: 100%;
	position: relative;
}
/*
 * A second scrim anchored to the TEXT BLOCK rather than to the hero's height.
 * The hero-height gradient alone left the top of a three-line h1 sitting in a
 * light band on a tall hero; this layer always covers the copy because it is
 * sized by the copy. Verified worst-case (as if the photograph were pure white)
 * by the per-element check in the polish report.
 */
/*
 * GK 2026-10-09 asked for a lighter veil, like the reference. The photographs
 * here are white kitchens - sampling the real pixels under the copy found
 * backdrops as bright as rgb(242,242,241) - so a veil light enough to show the
 * room cannot carry white text on its own. The answer is local, not global:
 * the image keeps only a soft bottom gradient, and this panel sits behind the
 * COPY BLOCK alone, bounded vertically by the copy and, from 1024px up, faded
 * out horizontally past the text column so the rest of the photograph is clean.
 */
.hero-band:not(.hero-band--plate) .hero-band__inner::before {
	content: '';
	position: absolute;
	top: -110px;
	bottom: 0;
	left: calc(50% - 50vw);
	width: 100vw;
	z-index: -1;
	background: linear-gradient(
		to top,
		rgba(22, 36, 42, 0.62) 0,
		rgba(22, 36, 42, 0.62) calc(100% - 110px),
		rgba(22, 36, 42, 0) 100%
	);
	pointer-events: none;
}
@media (min-width: 1024px) {
	.hero-band:not(.hero-band--plate) .hero-band__inner::before {
		-webkit-mask-image: linear-gradient(to right, #000 0, #000 56%, transparent 80%);
		mask-image: linear-gradient(to right, #000 0, #000 56%, transparent 80%);
	}
}
@media (min-width: 1024px) {
	.hero-band__inner { padding-block: var(--sp-10) var(--sp-9); }
	.hero-band__inner > .t-display,
	.hero-band__inner > .t-h1 { max-width: 16ch; }
	.hero-band--compact .hero-band__inner > .t-h1 { max-width: 22ch; }
}

.hero-band.on-ink,
.hero-band.on-ink h1,
.hero-band.on-ink .hero-band__lead,
.hero-band.on-ink .hero-band__subline,
.hero-band.on-ink .hero-band__meta,
.hero-band.on-ink .hero-band__eyebrow { color: var(--surface-light); }

.hero-band__lead { margin-top: var(--sp-5); max-width: 52ch; }
.hero-band__subline { margin-top: var(--sp-3); font-size: var(--fs-lead); }
.hero-band__meta { margin-top: var(--sp-4); }
.hero-band__eyebrow { display: block; margin-bottom: var(--sp-4); }
.hero-band__rule { width: 72px; height: 4px; background: var(--service); margin-bottom: var(--sp-5); }

/* Full strength, not --line: over a photograph the dimmer grey landed at
   4.3-4.4 worst case, just under AA for 15px text. */
.hero-band.on-ink .breadcrumb,
.hero-band.on-ink .breadcrumb a { color: var(--surface-light); }
.hero-band.on-ink .breadcrumb li + li::before { color: var(--surface-light); opacity: 0.6; }

/* Plate variant: no photograph, for pages that have none to give (FAQs, legal). */
.hero-band--plate {
	background-color: var(--surface-warm);
	align-items: flex-end;
	border-bottom: 1px solid var(--line);
}
.hero-band--plate .hero-band__inner { padding-block: var(--sp-8) var(--sp-7); }
.hero-band--plate .hero-band__rule { background: var(--service); }

/* The old left-heavy page head is retained only for templates that still use
   a text-only intro below the hero. */
.page-head { padding-block: calc(var(--section-y) * 0.5) 0; }

/* --------------------------------------------- 29. photo hover (item 2) */

/*
 * Taken from the reference's gesture: the frame steps back on hover while the
 * photograph inside holds its magnification, so the image appears to settle
 * into a mount. Transform only. Keyboard focus gets exactly the same state,
 * and the whole thing is gated behind a real hovering pointer so a touch tap
 * can never leave a card stuck mid-gesture.
 */
.img-link .media,
.photo-btn {
	transition: transform var(--dur-3) var(--ease-out);
	will-change: transform;
}
.img-link .media img { transition: transform var(--dur-3) var(--ease-out); }

/* The caption pill that arrives with the gesture. */
.img-link { position: relative; }
.img-link .media::after {
	content: attr(data-pill);
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 2;
	display: block;
	padding: 10px 16px;
	background: var(--surface-light);
	color: var(--primary);
	font-size: var(--fs-label);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
	pointer-events: none;
}
.img-link .media:not([data-pill])::after { content: none; }

@media (hover: hover) and (pointer: fine) {
	.img-link:hover .media,
	.img-link:focus-visible .media { transform: scale(0.93); }
	.img-link:hover .media img,
	.img-link:focus-visible .media img { transform: scale(1.0753); }
	.img-link:hover .media::after,
	.img-link:focus-visible .media::after { opacity: 1; transform: translateY(0); }
	.photo-btn:hover,
	.photo-btn:focus-visible { transform: scale(0.96); }
	.photo-btn:hover img { transform: none; }
}

/* Keyboard parity on touch and hybrid devices, where the hover query is false. */
.img-link:focus-visible .media { transform: scale(0.93); }
.img-link:focus-visible .media img { transform: scale(1.0753); }
.img-link:focus-visible .media::after { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
	.img-link .media,
	.img-link .media img,
	.photo-btn { transition: none !important; transform: none !important; }
	.img-link:hover .media::after,
	.img-link:focus-visible .media::after { opacity: 1; transform: none; transition: none; }
}

/* ------------------------------------- 30. signature tape measure (item 1) */

.signature {
	--p: 0;
	/* GK 2026-10-09: "I'd go teal and ink." Blade in brand teal, graduations and
	   numerals in ink on top of it (#16242A on #49C0BA is 7.22:1), case in ink
	   with a near-white face so the turning spokes stay readable. */
	--sig-ink: var(--primary);
	--sig-blade: var(--accent);
	--sig-case: var(--surface-white);
	--sig-accent: var(--primary);
	position: relative;
	width: 100%;
	overflow: clip;
	pointer-events: none;
	margin-block: var(--sp-8);
}
.signature--ink {
	--sig-ink: var(--surface-light);
	--sig-case: var(--primary);
	--sig-accent: var(--accent);
}
.signature__svg {
	display: block;
	width: 148%;
	max-width: none;
	height: auto;
	margin-left: -34%;
}
.signature--right .signature__svg { margin-left: auto; margin-right: -34%; }
@media (min-width: 768px) {
	.signature__svg { width: 118%; margin-left: -16%; }
	.signature--right .signature__svg { margin-left: auto; margin-right: -16%; }
}
@media (min-width: 1280px) {
	.signature__svg { width: 104%; margin-left: -6%; }
	.signature--right .signature__svg { margin-left: auto; margin-right: -6%; }
}

/* The case turns; the blade pays out. Both read off the single --p. */
/* fill-box + center puts the pivot on the case's own axle. Using view-box here
   would rotate the case around the corner of the whole drawing. */
.signature__spin {
	transform: rotate(calc(var(--p) * 150deg));
	transform-box: fill-box;
	transform-origin: center;
}
.signature__blade {
	transform: scaleX(calc(0.06 + var(--p) * 0.94));
	transform-origin: 150px 130px;
	transform-box: view-box;
}
.signature__grads { opacity: calc(-0.35 + var(--p) * 1.8); }
.signature__hook { opacity: calc(-0.6 + var(--p) * 2); }

/*
 * --p is set by the small rAF driver in main.js, which only ticks while the
 * element is on screen. An earlier build drove this from
 * `animation-timeline: view()`; the browser reported support but the keyframed
 * custom property never advanced, leaving the tape frozen half-drawn, so the
 * script path is now used everywhere for a single predictable behaviour.
 */
@property --p {
	syntax: '<number>';
	inherits: true;
	initial-value: 0;
}

/* Still and finished when motion is not wanted. */
@media (prefers-reduced-motion: reduce) {
	.signature { --p: 1 !important; animation: none !important; }
	.signature__spin { transform: rotate(118deg); }
}

/* Without scripts the tape is simply drawn, not hidden. */
html:not(.js) .signature { --p: 1; }

/* ------------------------------------------- 31. hero scrim fix (round 2) */

/*
 * From 1024 up the copy sits in the left half, so the left-weighted layer on
 * .hero-band__scrim carries the contrast and the content-anchored band is
 * switched off. Keeping it darkened the WHOLE hero: on the home page the copy
 * block is 673px tall inside a 756px hero, and the band's 170px overhang put
 * its top 87px ABOVE the hero, so only 16-26% of the photograph survived. That
 * is what read as "a flat dark panel with no photograph" - the image was
 * complete and opaque from the first paint all along.
 *
 * This lives at the end of the file on purpose: the same selector appears in
 * section 28 with `content: ''`, and at equal specificity the later rule wins.
 */
/* Round 2 switched this off above 1024 because the old unbounded band covered
   the whole hero. The panel is now bounded, so it is wanted at every width. */

/* ------------------------------------------- 1.2.0 orientation-safe frames
   Client feedback #2 and #6 (2026-11-05): photographs were being cut off
   when a landscape picture sat in a portrait frame. hc_img() now gives a
   frame the photo's own proportions (.media--natural, inline aspect-ratio)
   whenever the requested ratio would hide more than 15% of it. Grids and
   strips then align to the top so mixed heights read as intentional. */
.strip,
.gallery-grid,
.post-list,
.mosaic { align-items: start; }
@media (min-width: 768px) {
	/* The tall lead cell only works for a portrait photo. */
	.mosaic > :first-child:has(.media--natural) { grid-row: auto; }
}
/* Service preview on home/about/services: every service photo is landscape. */
.svc-preview { aspect-ratio: 3 / 2; }

/* Phones (feedback #6): a portrait-shaped band was showing about half of
   each landscape hero photograph. Under 768px the photograph now sits at
   its own proportions above the copy, and the copy sits on solid ink, so
   no scrim or panel is needed. 768px and up keep the full-bleed band. */
@media (max-width: 767px) {
	.hero-band:not(.hero-band--plate) {
		flex-direction: column;
		align-items: stretch;
		min-height: 0;
		background: var(--primary);
	}
	.hero-band:not(.hero-band--plate) .hero-band__media { position: relative; inset: auto; z-index: 0; }
	.hero-band:not(.hero-band--plate) .hero-band__img { height: auto; display: block; }
	.hero-band:not(.hero-band--plate) .hero-band__scrim,
	.hero-band:not(.hero-band--plate) .hero-band__inner::before { display: none; }
	.hero-band:not(.hero-band--plate) .hero-band__inner { padding-block: var(--sp-7) var(--sp-8); }
}

/* 1.2.2 (GK 2026-11-05, Kristyn #2/#6): no hero photo is cut off at any
   width. From 768px the band becomes two columns on solid ink: the copy on
   the left, aligned to the site grid, and the photograph on the right at its
   own proportions (capped at 82% of the viewport height, width follows), so
   nothing is cropped and the text never sits on the picture. */
@media (min-width: 768px) {
	.hero-band:not(.hero-band--plate) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: center;
		min-height: 0;
		background: var(--primary);
	}
	.hero-band:not(.hero-band--plate) .hero-band__media {
		position: relative;
		inset: auto;
		z-index: 0;
		grid-column: 2;
		grid-row: 1;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		background: transparent;
	}
	.hero-band:not(.hero-band--plate) .hero-band__img {
		display: block;
		width: auto;
		height: auto;
		max-width: 100%;
		max-height: 82svh;
	}
	.hero-band:not(.hero-band--plate) .hero-band__scrim,
	.hero-band:not(.hero-band--plate) .hero-band__inner::before { display: none; }
	.hero-band:not(.hero-band--plate) .hero-band__inner {
		grid-column: 1;
		grid-row: 1;
		max-width: none;
		margin: 0;
		padding-block: var(--sp-9) var(--sp-8);
		padding-inline: max(var(--margin), calc((100vw - var(--maxw)) / 2)) var(--sp-7);
	}
	.hero-band:not(.hero-band--plate) .hero-band__inner > .t-display,
	.hero-band:not(.hero-band--plate) .hero-band__inner > .t-h1 { max-width: 14ch; }
}