/* ============================================================================
   Webster Window and Door - V3 design system (single stylesheet)
   Stone & bronze, material-led. Reproduces the approved V2 component layout
   (legacy base + V2.0.1 re-skin) with every design token repointed to the
   Stone & bronze palette and the Clash Display / Hanken / IBM Plex Mono type system.
   No serif, single bronze accent, navy reserved for the logo.
   ============================================================================ */

/* ===== LAYER 1: base + components ===== */
/* ============================================================
   Webster Window and Door - preview stylesheet
   Design system matching the brand brief
   ============================================================ */

:root {
	/* COLORS - brass-forward architectural neutrals */
	--c-bg-warm: #F2F3F1;
	--c-bg-white: #FFFFFF;
	--c-bg-cream: #F6F6F4;
	--c-charcoal: #1B1D1E;
	--c-black: #121315;
	--c-warm-gray: #6C6E68;
	--c-brass: #3E342A;
	--c-bronze: #2E261E;
	--c-brass-light: #C8A24E;
	--c-webster-blue: #1A3783;

	/* Faint borders / overlays */
	--c-rule: rgba(27,29,30,0.10);
	--c-rule-strong: rgba(27,29,30,0.16);
	--c-rule-light: rgba(255, 255, 255, 0.18);

	/* TYPOGRAPHY */
	--f-display: 'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif;
	--f-body: 'Hanken Grotesk',system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
	--f-ui: 'Hanken Grotesk',system-ui,-apple-system,BlinkMacSystemFont,sans-serif;

	/* TYPE SCALE (fluid where useful) */
	--fs-eyebrow: 0.72rem;
	--fs-small: 0.875rem;
	--fs-body: 1.0625rem;
	--fs-lede: 1.1875rem;
	--fs-h4: 1.25rem;
	--fs-h3: 1.5rem;
	--fs-h2: clamp(1.85rem, 1.4rem + 1.6vw, 2.6rem);
	--fs-h1: clamp(2.4rem, 1.6rem + 3.2vw, 4rem);
	--lh-tight: 1.1;
	--lh-snug: 1.3;
	--lh-body: 1.7;

	/* SPACING SCALE */
	--s-10: 0.5rem;
	--s-20: 1rem;
	--s-30: 1.5rem;
	--s-40: 2rem;
	--s-50: 3rem;
	--s-60: 4.5rem;
	--s-70: 6rem;
	--s-80: 9rem;

	/* LAYOUT */
	--w-content: 720px;
	--w-narrow: 920px;
	--w-wide: 1280px;
	--w-full: 1560px;

	/* HEADER HEIGHT */
	--header-h: 76px;

	/* MOTION - tokens so timing is consistent site-wide */
	--motion-fast: 150ms;
	--motion-base: 300ms;
	--motion-slow: 600ms;
	--motion-hero: 2400ms;
	--ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--ease-emphasis: cubic-bezier(0.2, 0.7, 0.2, 1);

	/* ELEVATION - warm-tinted shadows (not generic gray) */
	--elev-1: 0 1px 2px rgba(60, 40, 25, 0.04), 0 2px 6px rgba(60, 40, 25, 0.05);
	--elev-2: 0 2px 4px rgba(60, 40, 25, 0.05), 0 8px 24px rgba(60, 40, 25, 0.08);
	--elev-3: 0 4px 8px rgba(60, 40, 25, 0.06), 0 18px 48px rgba(60, 40, 25, 0.12);

	/* GRAIN - reusable film-grain overlay (SVG noise, no image request) */
	--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--f-body);
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: var(--lh-body);
	color: var(--c-black);
	background: var(--c-bg-warm);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; transition: color var(--motion-base) var(--ease-out); }
button { font: inherit; cursor: pointer; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5 {
	font-family: var(--f-display);
	font-weight: 400;
	margin: 0;
	color: var(--c-black);
	letter-spacing: -0.01em;
}
h1 {
	font-size: clamp(2.5rem, 1.8rem + 3.6vw, 4.75rem);
	line-height: 1.05;
	letter-spacing: -0.01em;
}
h2 {
	font-size: clamp(1.875rem, 1.4rem + 2.2vw, 3.25rem);
	line-height: 1.1;
	letter-spacing: -0.008em;
}
h3 {
	font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
	line-height: 1.2;
}
h4 {
	font-family: var(--f-ui);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.005em;
}
p {
	margin: 0 0 1rem;
	color: var(--c-black);
}
.lede {
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
	line-height: 1.6;
	color: var(--c-warm-gray);
}
a { text-decoration: none; }
a.link-underline {
	border-bottom: 1px solid currentColor;
	padding-bottom: 1px;
}
a.link-underline:hover {
	color: var(--c-brass);
}

/* ============================================================
   LAYOUT
   ============================================================ */
.section {
	width: 100%;
	padding: var(--s-60) var(--s-40);
}
.section--tight { padding: var(--s-50) var(--s-40); }
.section--loose { padding: var(--s-70) var(--s-40); }
.section--massive { padding: var(--s-80) var(--s-40); }
.section--no-bottom { padding-bottom: 0 !important; }

.section--warm   { background: var(--c-bg-warm); }
.section--cream  { background: var(--c-bg-cream); }
.section--white  { background: var(--c-bg-white); }
.section--dark   { background: var(--c-charcoal); color: #fff; }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }
.section--dark p { color: rgba(255,255,255,0.78); }
.section--dark .lede { color: rgba(255,255,255,0.78); }

.wide   { max-width: var(--w-wide); margin: 0 auto; }
.full   { max-width: var(--w-full); margin: 0 auto; }
.narrow { max-width: var(--w-narrow); margin: 0 auto; }
.content { max-width: var(--w-content); margin: 0 auto; }

.center-text { text-align: center; }

/* ============================================================
   HEADER - transparent over hero, dark when scrolled
   ============================================================ */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	padding: 18px var(--s-40);
	background: rgba(0, 0, 0, 0.28);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transition: background 0.3s ease, padding 0.3s ease, top 0.3s ease;
}
/* When the WordPress admin bar is visible (logged-in users), shift the
   header down so it sits below the admin bar. Without this, anchored
   `top: 0` would put the header behind the admin bar; with this, we
   only shift when there's actually an admin bar present. */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) {
	.admin-bar .site-header { top: 46px; }
}
.site-header.is-scrolled,
.site-header.is-solid {
	background: var(--c-charcoal);
	padding: 14px var(--s-40);
}
.site-header__inner {
	max-width: var(--w-full);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
}
.site-title {
	font-family: var(--f-display);
	color: #fff;
	font-size: 1.375rem;
	font-weight: 500;
	letter-spacing: -0.005em;
	text-decoration: none;
	white-space: nowrap;
	display: flex;
	align-items: center;
	gap: 0.6rem;
}
.site-title__mark {
	width: 28px;
	height: 28px;
	background: var(--c-webster-blue);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-family: var(--f-display);
	font-weight: 600;
	font-size: 0.875rem;
	letter-spacing: 0;
}
.site-nav > ul {
	display: flex;
	gap: 1.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.site-nav__dropdown {
	list-style: none;
	margin: 0;
}
.site-nav > ul > li { position: relative; }
.site-nav a,
.site-nav__trigger {
	color: #fff;
	background: none;
	border: none;
	font: inherit;
	cursor: pointer;
	text-decoration: none;
	transition: color 0.2s ease;
	padding: 0.5rem 0;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.site-nav__trigger::after {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform 0.25s ease;
	margin-left: 0.25rem;
}
.site-nav__item--open .site-nav__trigger::after {
	transform: rotate(225deg) translateY(-2px);
}
.site-nav a:hover,
.site-nav__trigger:hover { color: var(--c-brass-light); }
.site-nav a.is-current,
.site-nav__item--current > .site-nav__trigger { color: var(--c-brass-light); }
.site-header.is-scrolled .site-nav a:hover,
.site-header.is-scrolled .site-nav__trigger:hover,
.site-header.is-solid .site-nav a:hover,
.site-header.is-solid .site-nav__trigger:hover { color: var(--c-brass); }

/* Chevron button - hidden on desktop, used on mobile to toggle submenu while
   the trigger link itself navigates to the landing page */
.site-nav__chevron {
	display: none;
	background: none;
	border: none;
	color: inherit;
	cursor: pointer;
	padding: 0.5rem 0.6rem;
	font-size: 0.9rem;
	line-height: 1;
}

/* === Dropdown panel === */
.site-nav__dropdown {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(-6px);
	background: var(--c-charcoal);
	min-width: 260px;
	padding: 0.5rem 0;
	margin-top: 18px; /* visual gap below trigger */
	border-top: 2px solid var(--c-brass);
	box-shadow: 0 12px 32px rgba(0,0,0,0.35);
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.35s;
	list-style: none;
}
/* Invisible hover bridge - fills the visual gap between trigger and dropdown
   so moving the cursor down doesn't lose hover state */
.site-nav__dropdown::before {
	content: "";
	position: absolute;
	top: -22px;
	left: 0;
	right: 0;
	height: 22px;
	background: transparent;
}
/* Desktop dropdown open state - applies whenever JS adds --open, on hover,
   or on focus-within. Works regardless of how the browser reports hover. */
.site-nav > ul > li:hover > .site-nav__dropdown,
.site-nav__item--open > .site-nav__dropdown,
.site-nav > ul > li:focus-within > .site-nav__dropdown {
	opacity: 1;
	pointer-events: auto;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0s;
}
.site-nav__dropdown li { display: block; }
.site-nav__dropdown a {
	display: block;
	padding: 0.75rem 1.75rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: rgba(255,255,255,0.85);
	text-transform: uppercase;
	white-space: nowrap;
	border-left: 2px solid transparent;
	transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.site-nav__dropdown a:hover {
	color: var(--c-brass-light);
	background: rgba(255,255,255,0.04);
	border-left-color: var(--c-brass);
}
.site-nav__dropdown li.has-divider {
	border-top: 1px solid rgba(255,255,255,0.08);
	margin-top: 0.4rem;
	padding-top: 0.4rem;
}
.header-cta {
	display: inline-block;
	padding: 0.625rem 1.1rem;
	border: 1px solid #fff;
	color: #fff;
	font-family: var(--f-ui);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 2px;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.header-cta:hover {
	background: var(--c-brass);
	color: var(--c-black);
	border-color: var(--c-brass);
}
.nav-toggle {
	display: none;
	background: none;
	border: none;
	color: #fff;
	font-size: 1.5rem;
	cursor: pointer;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
	display: inline-block;
	padding: 0.95rem 1.6rem;
	border: 1px solid var(--c-black);
	background: var(--c-black);
	color: #fff;
	font-family: var(--f-ui);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 3px;
	cursor: pointer;
	transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.btn:hover {
	background: var(--c-brass);
	border-color: var(--c-brass);
	color: #fff;
}
.btn--brass {
	background: var(--c-brass);
	border-color: var(--c-brass);
	color: #fff;
}
.btn--brass:hover {
	background: var(--c-bronze);
	border-color: var(--c-bronze);
	color: #fff;
}
.btn--ghost {
	background: transparent;
	border-color: var(--c-black);
	color: var(--c-black);
}
.btn--ghost:hover {
	background: var(--c-black);
	color: #fff;
}
.btn--ghost-light {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.6);
	color: #fff;
}
.btn--ghost-light:hover {
	background: #fff;
	color: var(--c-black);
	border-color: #fff;
}
.btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.875rem;
}
.btn-row--center { justify-content: center; }

/* ============================================================
   EYEBROWS - small uppercase labels
   ============================================================ */
.eyebrow {
	font-family: var(--f-ui);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--c-brass);
	margin-bottom: 0.875rem;
	display: inline-block;
}
.eyebrow--light { color: var(--c-brass-light); }
.eyebrow--gray  { color: var(--c-warm-gray); }
.eyebrow--center { display: block; text-align: center; }

/* Thin decorative rule used near eyebrows */
.eyebrow-rule {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	font-family: var(--f-ui);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--c-brass);
	margin-bottom: 1rem;
}
.eyebrow-rule::before {
	content: "";
	width: 32px;
	height: 1px;
	background: var(--c-brass);
}
.eyebrow-rule--light { color: var(--c-brass-light); }
.eyebrow-rule--light::before { background: var(--c-brass-light); }

/* ============================================================
   HERO - with panel-reveal animation
   ============================================================ */
.hero {
	position: relative;
	min-height: 92vh;
	display: flex;
	align-items: center;
	padding: calc(var(--header-h) + 64px) var(--s-40) var(--s-60);
	background-size: cover;
	background-position: center;
	color: #fff;
	overflow: hidden;
}
.hero--standard { min-height: 78vh; align-items: flex-end; }
.hero--medium { min-height: 64vh; align-items: flex-end; padding-top: calc(var(--header-h) + 60px); }
.hero--short  { min-height: 52vh; align-items: flex-end; padding-top: calc(var(--header-h) + 48px); }
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(17,17,17,0.30) 0%, rgba(17,17,17,0.50) 70%, rgba(17,17,17,0.65) 100%);
	z-index: 1;
}
.hero__inner {
	position: relative;
	z-index: 3;
	max-width: var(--w-wide);
	width: 100%;
	margin: 0 auto;
}
.hero h1 {
	color: #fff;
	margin: 0.75rem 0 1.25rem;
	max-width: 22ch;
}
.hero__lede {
	font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
	line-height: 1.55;
	color: rgba(255,255,255,0.86);
	margin-bottom: 2rem;
	max-width: 42rem;
}

/* Panel reveal animation - two charcoal panels slide apart */
.hero__panel {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 51%;
	background: var(--c-charcoal);
	z-index: 2;
	transition: transform 1.4s cubic-bezier(0.7, 0, 0.2, 1);
}
.hero__panel--left  { left: 0;  transform: translateX(0); }
.hero__panel--right { right: 0; transform: translateX(0); }
.hero.is-revealed .hero__panel--left  { transform: translateX(-101%); }
.hero.is-revealed .hero__panel--right { transform: translateX(101%); }

/* Hero copy fades up after reveal */
.hero__inner > * {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}
.hero.is-revealed .hero__inner > * { opacity: 1; transform: translateY(0); }
.hero.is-revealed .hero__inner > *:nth-child(1) { transition-delay: 1.05s; }
.hero.is-revealed .hero__inner > *:nth-child(2) { transition-delay: 1.18s; }
.hero.is-revealed .hero__inner > *:nth-child(3) { transition-delay: 1.30s; }
.hero.is-revealed .hero__inner > *:nth-child(4) { transition-delay: 1.42s; }

/* ============================================================
   SECTION INTRO - eyebrow + heading + lede pattern
   ============================================================ */
.section-intro {
	margin-bottom: var(--s-50);
}
.section-intro h2 { margin-bottom: 1rem; max-width: 28ch; }
.section-intro.center-text h2 { margin-left: auto; margin-right: auto; }
.section-intro p { max-width: 56ch; }
.section-intro.center-text p { margin-left: auto; margin-right: auto; }

/* ============================================================
   PRODUCT CATEGORY CARDS (Home page hero grid)
   Each card has a unique hover motion matching the product
   ============================================================ */
.cat-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
}
.cat-card {
	display: block;
	background: var(--c-bg-white);
	border: 1px solid var(--c-rule);
	color: var(--c-black);
	text-decoration: none;
	transition: border-color 0.4s ease, box-shadow 0.4s ease;
	overflow: hidden;
	position: relative;
}
.cat-card:hover {
	border-color: var(--c-brass);
	box-shadow: 0 18px 40px rgba(17, 17, 17, 0.07);
}
.cat-card__img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	position: relative;
	background: var(--c-bg-cream);
}
.cat-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* Single subtle, premium hover for all category cards */
.cat-card:hover .cat-card__img img {
	transform: scale(1.03);
}

.cat-card__body {
	padding: 2.5rem 2.25rem 2.75rem;
}
.cat-card__title {
	font-family: var(--f-display);
	font-size: 1.625rem;
	font-weight: 500;
	margin: 0 0 1rem;
	letter-spacing: -0.005em;
	line-height: 1.2;
}
.cat-card__desc {
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--c-warm-gray);
	margin: 0 0 1.75rem;
}
.cat-card__cta {
	font-family: var(--f-ui);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-brass);
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	transition: gap 0.3s ease, color 0.3s ease;
}
.cat-card:hover .cat-card__cta {
	gap: 0.8rem;
	color: var(--c-bronze);
}

/* ============================================================
   CAPABILITIES (4-up, 6-up)
   ============================================================ */
.feature-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
}
.feature-grid--3 { grid-template-columns: repeat(3, 1fr); }
.feature-grid--6 { grid-template-columns: repeat(3, 1fr); gap: 2.5rem 2rem; }
.feature-card {
	padding-top: 1.25rem;
	border-top: 1px solid var(--c-rule-strong);
}
.feature-card--bronze { border-top-color: var(--c-brass); }
.feature-card__num {
	font-family: var(--f-display);
	font-size: 1.25rem;
	color: var(--c-brass);
	margin-bottom: 0.5rem;
	letter-spacing: 0;
}
.feature-card__num-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	border: 1px solid var(--c-brass);
	font-family: var(--f-display);
	font-size: 1.125rem;
	color: var(--c-brass);
	margin-bottom: 1rem;
}
.feature-card h3,
.feature-card h4 {
	margin-bottom: 0.75rem;
}
.feature-card h3 { font-size: 1.375rem; }
.feature-card p {
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--c-warm-gray);
	margin: 0;
}

/* ============================================================
   TWO COLUMN - intro pattern
   ============================================================ */
.two-col {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 3rem 4rem;
	align-items: end;
	margin-bottom: var(--s-50);
}
.two-col--top { align-items: start; }
.two-col h2 { margin: 0; }
.two-col p { font-size: 1.0625rem; line-height: 1.6; margin: 0; color: var(--c-warm-gray); }

.two-col--balanced { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.two-col--media { grid-template-columns: 1fr 1.2fr; gap: 4rem; align-items: center; }
.two-col__media img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 2px;
}
.two-col--media.flip { grid-template-columns: 1.2fr 1fr; }
.two-col--media.flip .two-col__media { order: -1; }

/* ============================================================
   BRANDS - italic running list and grid
   ============================================================ */
.brands-list {
	font-family: var(--f-display);
	font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
	font-style: italic;
	font-weight: 400;
	color: var(--c-warm-gray);
	line-height: 1.5;
	text-align: center;
	max-width: 64rem;
	margin: 0 auto;
}
.brands-list span { white-space: nowrap; }
.brand-dot {
	display: inline-block;
	color: var(--c-brass);
	margin: 0 0.75em;
}
.brand-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
}
.brand-card {
	background: var(--c-bg-cream);
	padding: 2rem 1.5rem;
	text-align: center;
	border: 1px solid var(--c-rule);
	transition: border-color 0.25s, background 0.25s;
}
.brand-card:hover {
	border-color: var(--c-brass);
	background: var(--c-bg-white);
}
.brand-card__name {
	font-family: var(--f-display);
	font-size: 1.25rem;
	margin: 0 0 0.5rem;
	color: var(--c-black);
	letter-spacing: -0.005em;
}
.brand-card__desc {
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--c-warm-gray);
	margin: 0;
}

/* ============================================================
   PROJECT CARDS - premium hover treatment
   ============================================================ */
.projects-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}
.proj-card {
	display: block;
	text-decoration: none;
	color: var(--c-black);
	position: relative;
}
.proj-card__img {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: 2px;
	background: var(--c-bg-cream);
}
.proj-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.4s;
}
.proj-card__img::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(17,17,17,0) 50%, rgba(17,17,17,0.55) 100%);
	opacity: 0;
	transition: opacity 0.4s ease;
}
.proj-card:hover .proj-card__img img { transform: scale(1.04); }
.proj-card:hover .proj-card__img::after { opacity: 1; }
.proj-card__brass-rule {
	position: absolute;
	left: 1.25rem;
	bottom: 1.25rem;
	width: 0;
	height: 1px;
	background: var(--c-brass-light);
	transition: width 0.6s cubic-bezier(0.3, 0.7, 0.3, 1);
	z-index: 2;
}
.proj-card:hover .proj-card__brass-rule { width: 48px; }
.proj-card__cat {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-brass);
	margin: 1.25rem 0 0.5rem;
}
.proj-card__title {
	font-family: var(--f-display);
	font-size: 1.375rem;
	font-weight: 500;
	margin: 0 0 0.25rem;
	letter-spacing: -0.005em;
}
.proj-card__loc {
	font-size: 0.875rem;
	color: var(--c-warm-gray);
	margin: 0;
}

/* ============================================================
   HORIZONTAL SCROLL - slow editorial reel
   ============================================================ */
.h-scroll {
	width: 100%;
	overflow: hidden;
	position: relative;
}
.h-scroll__track {
	display: flex;
	gap: 1.25rem;
	animation: hScrollMove 80s linear infinite;
	width: max-content;
	padding: 0 0.5rem;
}
.h-scroll:hover .h-scroll__track {
	animation-play-state: paused;
}
.h-scroll__item {
	flex: 0 0 auto;
	width: 460px;
	height: 320px;
	border-radius: 2px;
	overflow: hidden;
	background: var(--c-bg-cream);
	position: relative;
}
.h-scroll__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.h-scroll__cap {
	position: absolute;
	left: 1.25rem;
	bottom: 1rem;
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
@keyframes hScrollMove {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ============================================================
   LIGHT-SWEEP EFFECT - sunlight through glass
   Add `.light-sweep` to any container; sweep triggers on intersection
   ============================================================ */
.light-sweep {
	position: relative;
	overflow: hidden;
}
.light-sweep::after {
	content: "";
	position: absolute;
	top: 0; bottom: 0; left: -40%;
	width: 40%;
	background: linear-gradient(110deg, transparent 0%, rgba(255, 240, 200, 0) 40%, rgba(255, 240, 200, 0.22) 50%, rgba(255, 240, 200, 0) 60%, transparent 100%);
	transform: translateX(0);
	pointer-events: none;
	z-index: 4;
}
.light-sweep.is-swept::after {
	animation: lightSweep 1.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes lightSweep {
	from { transform: translateX(0); }
	to { transform: translateX(350%); }
}

/* ============================================================
   FADE-UP REVEAL - on scroll
   ============================================================ */
.reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.9s cubic-bezier(0.3, 0.7, 0.3, 1), transform 0.9s cubic-bezier(0.3, 0.7, 0.3, 1);
}
.reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}
.reveal--stagger > *:nth-child(1) { transition-delay: 0s; }
.reveal--stagger > *:nth-child(2) { transition-delay: 0.08s; }
.reveal--stagger > *:nth-child(3) { transition-delay: 0.16s; }
.reveal--stagger > *:nth-child(4) { transition-delay: 0.24s; }
.reveal--stagger > *:nth-child(5) { transition-delay: 0.32s; }
.reveal--stagger > *:nth-child(6) { transition-delay: 0.40s; }

/* ============================================================
   CAPABILITY / VALUE BANDS
   ============================================================ */
.value-band {
	background: var(--c-charcoal);
	color: #fff;
	padding: var(--s-70) var(--s-40);
}
.value-band h2 { color: #fff; }
.value-band p { color: rgba(255,255,255,0.78); }
.value-band__grid {
	display: grid;
	grid-template-columns: 45% 1fr;
	gap: var(--s-60);
	align-items: center;
}
.value-band__heading { margin: 0.75rem 0 0; }

/* ============================================================
   STAT BLOCK - "What We're Built On"
   ============================================================ */
.stat-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
}
.stat {
	text-align: left;
	padding-top: 1.25rem;
	border-top: 1px solid var(--c-rule-strong);
}
.stat__num {
	font-family: var(--f-display);
	font-size: clamp(2.5rem, 2rem + 1.8vw, 3.5rem);
	font-weight: 500;
	line-height: 1;
	color: var(--c-black);
	letter-spacing: -0.008em;
	margin-bottom: 0.5rem;
}
.stat__label {
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--c-warm-gray);
}

/* ============================================================
   TEAM CARDS
   ============================================================ */
.team-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.5rem;
}
.team-card__img {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--c-bg-cream);
	border-radius: 2px;
	margin-bottom: 1.25rem;
}
.team-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(15%);
	transition: filter 0.4s ease, transform 0.5s ease;
}
.team-card:hover .team-card__img img {
	filter: grayscale(0%);
	transform: scale(1.02);
}
.team-card__name {
	font-family: var(--f-display);
	font-size: 1.5rem;
	margin: 0 0 0.25rem;
	color: var(--c-black);
}
.team-card__role {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--c-brass);
	margin: 0 0 0.75rem;
}
.team-card__bio {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--c-warm-gray);
	margin: 0;
}

/* ============================================================
   PULL QUOTE / TESTIMONIAL
   ============================================================ */
.pull-quote {
	font-family: var(--f-display);
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
	font-style: italic;
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: -0.005em;
	color: var(--c-black);
	margin: 0 0 1.5rem;
	position: relative;
	padding-left: 0;
}
.pull-quote::before {
	content: "\201C";
	display: inline;
	color: var(--c-brass);
	font-size: 1.2em;
	line-height: 0;
}
.attribution {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-brass);
}
.attribution__org {
	color: var(--c-warm-gray);
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	margin-left: 0.5rem;
}

/* ============================================================
   BRANDS STRIP / PRESS LOGOS
   ============================================================ */
.logo-strip {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 2rem 3rem;
	align-items: center;
	justify-items: center;
}
.logo-strip__item {
	font-family: var(--f-display);
	font-style: italic;
	font-weight: 400;
	font-size: 1.125rem;
	color: var(--c-warm-gray);
	opacity: 0.7;
	transition: opacity 0.25s, color 0.25s;
	text-align: center;
}
.logo-strip__item:hover { opacity: 1; color: var(--c-brass); }

/* ============================================================
   FAQ
   ============================================================ */
.faq-list { border-top: 1px solid var(--c-rule-strong); }
.faq-item {
	border-bottom: 1px solid var(--c-rule);
	padding: 1.5rem 0;
}
.faq-item summary {
	font-family: var(--f-display);
	font-size: 1.25rem;
	font-weight: 500;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	list-style: none;
	color: var(--c-black);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
	content: "+";
	color: var(--c-brass);
	font-size: 1.5rem;
	font-family: var(--f-body);
	font-weight: 300;
	transition: transform 0.3s ease;
	margin-left: 1.5rem;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p {
	font-size: 1rem;
	line-height: 1.65;
	color: var(--c-warm-gray);
	margin: 1rem 0 0;
	max-width: 64ch;
}

/* ============================================================
   SHOWROOM HOTSPOT EXPERIENCE
   ============================================================ */
.showroom-photo {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 2px;
	background: var(--c-charcoal);
}
.showroom-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hotspot {
	position: absolute;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1.5px solid var(--c-brass-light);
	background: rgba(255, 255, 255, 0.18);
	backdrop-filter: blur(4px);
	cursor: pointer;
	z-index: 3;
	transition: transform 0.2s ease;
}
.hotspot::before {
	content: "+";
	color: #fff;
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.25rem;
	font-weight: 300;
}
.hotspot::after {
	content: "";
	position: absolute;
	inset: -8px;
	border-radius: 50%;
	border: 1px solid var(--c-brass-light);
	opacity: 0.6;
	animation: hotspotPulse 2s ease-out infinite;
}
@keyframes hotspotPulse {
	0%   { transform: scale(1);   opacity: 0.6; }
	100% { transform: scale(1.6); opacity: 0; }
}
.hotspot:hover, .hotspot:focus-visible {
	transform: scale(1.1);
}
.hotspot__card {
	position: absolute;
	left: 44px;
	top: 0;
	width: 240px;
	background: var(--c-bg-white);
	color: var(--c-black);
	padding: 1rem 1.25rem;
	border-radius: 2px;
	box-shadow: 0 12px 28px rgba(0,0,0,0.18);
	opacity: 0;
	pointer-events: none;
	transform: translateY(8px);
	transition: opacity 0.25s ease, transform 0.25s ease;
	z-index: 4;
}
.hotspot:hover .hotspot__card,
.hotspot:focus-visible .hotspot__card {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}
.hotspot__card h4 {
	margin: 0 0 0.4rem;
	font-family: var(--f-display);
	font-size: 1.0625rem;
	font-weight: 500;
}
.hotspot__card p {
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--c-warm-gray);
	margin: 0;
}

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-block {
	text-align: center;
	max-width: 48rem;
	margin: 0 auto;
}
.cta-block h2 { color: #fff; margin: 0 auto 1rem; }
.cta-block p { color: rgba(255,255,255,0.78); margin: 0 auto 2.5rem; max-width: 38rem; }

/* ============================================================
   FORM
   ============================================================ */
.form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
}
.form-grid--full { grid-template-columns: 1fr; }
.field {
	display: flex;
	flex-direction: column;
}
.field label {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-warm-gray);
	margin-bottom: 0.5rem;
}
.field input,
.field select,
.field textarea {
	font-family: var(--f-body);
	font-size: 1rem;
	padding: 0.875rem 1rem;
	border: 1px solid var(--c-rule-strong);
	border-radius: 2px;
	background: var(--c-bg-white);
	color: var(--c-black);
	transition: border-color 0.2s;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
	outline: none;
	border-color: var(--c-brass);
}
.field textarea { min-height: 140px; resize: vertical; }
.field--full { grid-column: 1 / -1; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
	background: var(--c-charcoal);
	color: #fff;
	padding: var(--s-70) var(--s-40) var(--s-40);
}
.site-footer__inner {
	max-width: var(--w-wide);
	margin: 0 auto;
}
.footer-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 3rem;
}
.footer-brand h3 {
	font-family: var(--f-display);
	font-size: 1.625rem;
	color: #fff;
	margin: 0 0 1rem;
}
.footer-brand p {
	font-size: 0.9375rem;
	line-height: 1.7;
	color: rgba(255,255,255,0.65);
	max-width: 28rem;
}
.footer-label {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-brass-light);
	margin-bottom: 1.25rem;
}
.footer-list { list-style: none; padding: 0; margin: 0; }
.footer-list li { line-height: 2; }
.footer-list a {
	color: rgba(255,255,255,0.7);
	font-size: 0.9375rem;
	text-decoration: none;
	transition: color 0.2s;
}
.footer-list a:hover { color: var(--c-brass-light); }
.footer-meta {
	font-size: 0.9375rem;
	line-height: 1.8;
	color: rgba(255,255,255,0.7);
}
.footer-meta a { color: rgba(255,255,255,0.7); text-decoration: none; }
.footer-meta a:hover { color: var(--c-brass-light); }
.footer-divider {
	border: none;
	border-top: 1px solid rgba(255,255,255,0.10);
	margin: var(--s-50) 0 var(--s-30);
}
.footer-fine {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	font-size: 0.8125rem;
	color: rgba(255,255,255,0.5);
	letter-spacing: 0.02em;
}

/* ============================================================
   PREVIEW BANNER (only in preview, not in real site)
   ============================================================ */
.preview-banner {
	background: var(--c-bronze);
	color: #fff;
	font-family: var(--f-ui);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: center;
	padding: 9px 1rem;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 200;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
}
.preview-banner a { color: #fff; text-decoration: underline; }
body:has(.preview-banner) { padding-top: 32px; }

/* ============================================================
   PRODUCT PAGE BANDS - material, finish, performance grids
   ============================================================ */
.material-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}
.material-card {
	background: var(--c-bg-white);
	padding: 2rem 1.75rem 1.75rem;
	border: 1px solid var(--c-rule);
	border-radius: 2px;
	transition: border-color 0.25s, transform 0.25s;
}
.material-card:hover {
	border-color: var(--c-brass);
	transform: translateY(-2px);
}
.material-card__num {
	font-family: var(--f-display);
	font-style: italic;
	color: var(--c-brass);
	font-size: 1rem;
	margin-bottom: 0.5rem;
}
.material-card h3 {
	font-size: 1.25rem;
	margin: 0 0 0.75rem;
}
.material-card p {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--c-warm-gray);
	margin: 0;
}

/* ============================================================
   SERVICE LIST
   ============================================================ */
.service-list {
	display: grid;
	gap: 0;
}
.service-row {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 2rem;
	padding: 2.25rem 0;
	border-top: 1px solid var(--c-rule-strong);
	align-items: start;
}
.service-row:last-child { border-bottom: 1px solid var(--c-rule-strong); }
.service-row__num {
	font-family: var(--f-display);
	font-style: italic;
	color: var(--c-brass);
	font-size: 1.125rem;
	min-width: 2.5rem;
}
.service-row__body h3 { margin: 0 0 0.5rem; font-size: 1.5rem; }
.service-row__body p {
	font-size: 1rem;
	line-height: 1.65;
	color: var(--c-warm-gray);
	margin: 0;
	max-width: 48rem;
}
.service-row__cta {
	font-family: var(--f-ui);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--c-brass);
	white-space: nowrap;
	border: none;
	background: none;
	padding: 0.5rem 0;
}
.service-row:hover .service-row__cta { color: var(--c-bronze); }

/* ============================================================
   PRESS CARDS
   ============================================================ */
.press-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2.5rem;
}
.press-card {
	background: var(--c-bg-white);
	padding: 2.5rem 2.25rem;
	border: 1px solid var(--c-rule);
	border-radius: 2px;
	transition: border-color 0.25s, transform 0.25s;
}
.press-card:hover {
	border-color: var(--c-brass);
	transform: translateY(-2px);
}
.press-card__pub {
	font-family: var(--f-display);
	font-style: italic;
	font-size: 1.5rem;
	margin: 0 0 0.5rem;
	color: var(--c-black);
}
.press-card__date {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-brass);
	margin: 0 0 1rem;
}
.press-card__excerpt {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--c-warm-gray);
	margin: 0 0 1.5rem;
}
.press-card__link {
	font-family: var(--f-ui);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--c-brass);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
	.cat-grid { grid-template-columns: repeat(2, 1fr); }
	.feature-grid, .feature-grid--6 { grid-template-columns: repeat(2, 1fr); }
	.brand-grid { grid-template-columns: repeat(3, 1fr); }
	.projects-grid { grid-template-columns: repeat(2, 1fr); }
	.team-grid { grid-template-columns: repeat(2, 1fr); }
	.stat-grid { grid-template-columns: repeat(2, 1fr); }
	.material-grid { grid-template-columns: repeat(2, 1fr); }
	.footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
	.footer-grid > :nth-child(4) { grid-column: span 3; }
	.logo-strip { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   MOBILE / TABLET NAV - applies at 1100px and below.
   Width-only detection: any touch device wider than 1100px will
   keep the desktop nav (and can reach landing pages via the
   Products / Services links).
   ============================================================ */
@media (max-width: 1100px) {
	.nav-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		font-size: 1.5rem;
		color: #fff;
		background: rgba(255,255,255,0.06);
		border: 1px solid rgba(255,255,255,0.18);
		border-radius: 2px;
		transition: background 0.2s ease, border-color 0.2s ease;
	}
	.nav-toggle:hover,
	.nav-toggle:focus-visible {
		background: rgba(255,255,255,0.12);
		border-color: rgba(255,255,255,0.3);
	}
	.site-header.is-scrolled .nav-toggle,
	.site-header.is-solid .nav-toggle {
		color: #fff;
		background: rgba(255,255,255,0.08);
		border-color: rgba(255,255,255,0.22);
	}
	.header-cta { display: none; }

	/* Hide the desktop horizontal nav */
	.site-nav > ul { display: none; }

	/* Mobile drawer when opened */
	.site-nav.is-open > ul {
		display: flex;
		flex-direction: column;
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		background: var(--c-charcoal);
		padding: 1rem 1.5rem 1.75rem;
		gap: 0.25rem;
		max-height: calc(100vh - 80px);
		overflow-y: auto;
		box-shadow: 0 12px 32px rgba(0,0,0,0.4);
		border-top: 1px solid rgba(255,255,255,0.08);
	}
	.site-nav.is-open > ul > li {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid rgba(255,255,255,0.06);
	}
	.site-nav.is-open > ul > li:last-child { border-bottom: none; }

	/* Trigger link: hyperlink to landing page, takes left side */
	.site-nav.is-open > ul > li > a,
	.site-nav.is-open > ul > li > .site-nav__trigger {
		flex: 1 1 auto;
		display: inline-flex;
		align-items: center;
		padding: 1rem 0;
		font-size: 0.9375rem;
		min-height: 48px;
		color: #fff;
		letter-spacing: 0.06em;
		font-weight: 600;
	}
	.site-nav__trigger::after { display: none; }

	/* Chevron toggle: visible, 44x44 tap target, on the right */
	.site-nav__chevron {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		margin-right: -0.5rem;
		color: rgba(255,255,255,0.7);
		background: transparent;
		border: none;
		font-size: 1.1rem;
		font-weight: 700;
		line-height: 1;
		transition: transform 0.3s ease, color 0.2s ease;
		cursor: pointer;
	}
	.site-nav__chevron:hover,
	.site-nav__chevron:focus-visible { color: var(--c-brass-light); }
	.site-nav__item--open .site-nav__chevron {
		transform: rotate(180deg);
		color: var(--c-brass-light);
	}

	/* Dropdown takes the full row below the trigger + chevron */
	.site-nav.is-open > ul > li > .site-nav__dropdown { flex-basis: 100%; }

	.site-nav__dropdown {
		position: static !important;
		left: auto !important;
		right: auto !important;
		top: auto !important;
		transform: none !important;
		width: 100%;
		min-width: 0;
		max-width: 100%;
		box-sizing: border-box;
		opacity: 1;
		pointer-events: auto;
		visibility: visible;
		background: rgba(255,255,255,0.03);
		box-shadow: none;
		border-top: none;
		border-left: 2px solid var(--c-brass);
		padding: 0;
		margin: 0 0 0.5rem 0.5rem;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.3s ease, padding 0.3s ease, margin 0.3s ease;
	}
	.site-nav__dropdown::before { display: none; }
	.site-nav__item--open > .site-nav__dropdown {
		max-height: 700px;
		padding: 0.5rem 0;
		margin: 0.25rem 0 1rem 0.5rem;
		transform: none !important;
		left: auto !important;
		right: auto !important;
	}
	.site-nav__dropdown a {
		display: flex;
		align-items: center;
		min-height: 44px;
		padding: 0.75rem 1.25rem;
		font-size: 0.8125rem;
		color: rgba(255,255,255,0.82);
		border-left: none;
		text-transform: uppercase;
		letter-spacing: 0.06em;
		font-weight: 500;
	}
	.site-nav__dropdown a:hover,
	.site-nav__dropdown a:active {
		color: var(--c-brass-light);
		background: rgba(255,255,255,0.04);
	}
	.site-nav__dropdown li.has-divider {
		border-top: 1px solid rgba(255,255,255,0.10);
		margin-top: 0.4rem;
		padding-top: 0.6rem;
	}
}

@media (max-width: 760px) {
	.stat-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
	.material-grid { grid-template-columns: 1fr; }
	.press-grid { grid-template-columns: 1fr; gap: 1.5rem; }
	.two-col, .two-col--media, .two-col--balanced, .two-col--media.flip,
	.value-band__grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	.two-col--media.flip .two-col__media { order: 0; }
	.service-row {
		grid-template-columns: auto 1fr;
		gap: 1rem 1.5rem;
	}
	.service-row__cta { grid-column: 1 / -1; padding-top: 0.5rem; }
	.footer-grid { grid-template-columns: 1fr; gap: 2rem; }
	.footer-grid > :nth-child(4) { grid-column: auto; }
	.hero { min-height: 80vh; padding-left: 1.25rem; padding-right: 1.25rem; }
	.hero--medium { min-height: 56vh; }
	.hero--short { min-height: 44vh; }
	.h-scroll__item { width: 320px; height: 220px; }
	.form-grid { grid-template-columns: 1fr; }
	.logo-strip { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}

/* ============================================================
   EDITORIAL OVERLAP LAYOUTS
   Image and copy overlap rather than just sitting beside
   ============================================================ */
.overlap-block {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	align-items: center;
	margin: 0 auto;
}
.overlap-block__media {
	position: relative;
	z-index: 1;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 2px;
}
.overlap-block__media img { width: 100%; height: 100%; object-fit: cover; }
.overlap-block__copy {
	background: var(--c-bg-white);
	padding: var(--s-50) var(--s-50);
	position: relative;
	z-index: 2;
	margin-left: -8%;
	box-shadow: 0 20px 50px rgba(17, 17, 17, 0.08);
}
.overlap-block--flip .overlap-block__media { order: 2; }
.overlap-block--flip .overlap-block__copy {
	margin-left: 0;
	margin-right: -8%;
	order: 1;
}
.overlap-block__copy h2 { margin: 0.75rem 0 1.25rem; }
.overlap-block__copy p {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--c-warm-gray);
}
.overlap-block__copy p:last-of-type { margin-bottom: 1.5rem; }

/* === Asymmetric three-column block === */
.asym-3 {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1.2fr;
	gap: 2rem;
	align-items: end;
}
.asym-3 > *:nth-child(1) { padding-bottom: var(--s-30); }
.asym-3 > *:nth-child(2) { padding-bottom: var(--s-60); }
.asym-3__media {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 2px;
}
.asym-3__media img { width: 100%; height: 100%; object-fit: cover; }
.asym-3 h2 { margin: 0; }
.asym-3 p { color: var(--c-warm-gray); }

/* === Tall image + offset caption === */
.tall-detail {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
	gap: var(--s-60);
	align-items: stretch;
}
.tall-detail__img {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 2px;
}
.tall-detail__img img { width: 100%; height: 100%; object-fit: cover; }
.tall-detail__copy {
	align-self: center;
}

/* ============================================================
   PRODUCTS LANDING - large category tiles
   ============================================================ */
.product-tiles {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
}
.product-tile {
	display: block;
	position: relative;
	aspect-ratio: 5 / 4;
	overflow: hidden;
	border-radius: 2px;
	color: #fff;
	text-decoration: none;
	background: var(--c-charcoal);
}
.product-tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
	opacity: 0.78;
}
.product-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(17,17,17,0.15) 0%, rgba(17,17,17,0.75) 100%);
	pointer-events: none;
}
.product-tile:hover img { transform: scale(1.04); }
.product-tile__body {
	position: absolute;
	left: 2rem;
	right: 2rem;
	bottom: 2rem;
	z-index: 2;
	color: #fff;
}
.product-tile__cat {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-brass-light);
	margin-bottom: 0.5rem;
	display: block;
}
.product-tile__title {
	font-family: var(--f-display);
	font-size: clamp(1.875rem, 1.5rem + 1.5vw, 2.75rem);
	font-weight: 500;
	color: #fff;
	margin: 0 0 0.75rem;
	letter-spacing: -0.01em;
}
.product-tile__desc {
	font-size: 1rem;
	line-height: 1.5;
	color: rgba(255,255,255,0.85);
	margin: 0 0 1.25rem;
	max-width: 28rem;
}
.product-tile__cta {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
	border-bottom: 1px solid var(--c-brass-light);
	padding-bottom: 4px;
	display: inline-block;
}

/* ============================================================
   SERVICE CARDS - for Services landing page
   ============================================================ */
.service-card-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}
.service-card {
	display: flex;
	flex-direction: column;
	background: var(--c-bg-white);
	border: 1px solid var(--c-rule);
	color: var(--c-black);
	text-decoration: none;
	transition: border-color 0.4s ease, box-shadow 0.4s ease;
	overflow: hidden;
}
.service-card:hover {
	border-color: var(--c-brass);
	box-shadow: 0 14px 36px rgba(17, 17, 17, 0.07);
}
.service-card__img {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}
.service-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.service-card:hover .service-card__img img { transform: scale(1.03); }
.service-card__body {
	padding: 1.75rem 1.5rem 1.5rem;
	flex: 1;
	display: flex;
	flex-direction: column;
}
.service-card__num {
	font-family: var(--f-display);
	font-style: italic;
	font-size: 0.9375rem;
	color: var(--c-brass);
	margin: 0 0 0.4rem;
}
.service-card__title {
	font-family: var(--f-display);
	font-size: 1.5rem;
	font-weight: 500;
	margin: 0 0 0.75rem;
	letter-spacing: -0.005em;
}
.service-card__desc {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--c-warm-gray);
	margin: 0 0 1.25rem;
	flex: 1;
}
.service-card__cta {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-brass);
}

/* ============================================================
   BRAND DETAIL PAGE - pattern for /brands/[brand]/
   ============================================================ */
.brand-hero {
	background: var(--c-bg-cream);
	padding: calc(var(--header-h) + 88px) var(--s-40) var(--s-60);
	border-bottom: 1px solid var(--c-rule);
}
.brand-hero__inner {
	max-width: var(--w-wide);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: center;
}
.brand-hero__pill {
	display: inline-block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--c-brass);
	border: 1px solid var(--c-brass);
	padding: 0.4rem 0.85rem;
	border-radius: 999px;
	margin-bottom: 1.5rem;
}
.brand-hero h1 {
	font-size: clamp(2.5rem, 2rem + 2.2vw, 4.25rem);
	margin: 0 0 1rem;
}
.brand-hero p {
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--c-warm-gray);
	max-width: 38rem;
}
.brand-hero__media {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 2px;
	background: var(--c-bg-warm);
}
.brand-hero__media img { width: 100%; height: 100%; object-fit: cover; }

.brand-spec {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.5rem;
}
.brand-spec__col h4 {
	font-family: var(--f-ui);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-brass);
	margin: 0 0 1rem;
}
.brand-spec__col ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.brand-spec__col li {
	font-size: 0.9375rem;
	line-height: 1.65;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--c-rule);
	color: var(--c-black);
}
.brand-spec__col li:first-child { border-top: 1px solid var(--c-rule); }

/* ============================================================
   CONTACT PAGE - proper two-column without sticky
   ============================================================ */
.contact-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 5rem;
	align-items: start;
}
.contact-info-card {
	background: var(--c-bg-cream);
	padding: 2.25rem 1.875rem;
	border: 1px solid var(--c-rule);
	border-radius: 2px;
}
.contact-info-card__heading {
	font-family: var(--f-display);
	font-size: 1.5rem;
	line-height: 1.3;
	margin: 0 0 1rem;
	color: var(--c-black);
}
.contact-info-card__group { margin-bottom: 1.5rem; }
.contact-info-card__group:last-child { margin-bottom: 0; }
.contact-info-card__label {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-brass);
	margin: 0 0 0.5rem;
}
.contact-info-card__text {
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--c-warm-gray);
	margin: 0;
}
.contact-info-card__text a {
	color: var(--c-black);
	text-decoration: none;
	border-bottom: 1px solid var(--c-rule-strong);
	transition: border-color 0.2s, color 0.2s;
}
.contact-info-card__text a:hover {
	color: var(--c-brass);
	border-color: var(--c-brass);
}

/* ============================================================
   SHOWROOM / SERVICE AREA / PROCESS specific
   ============================================================ */
.process-timeline {
	border-top: 1px solid var(--c-rule-strong);
}
.process-step {
	display: grid;
	grid-template-columns: 100px 1fr 1.2fr;
	gap: 2.5rem;
	padding: 2.5rem 0;
	border-bottom: 1px solid var(--c-rule);
	align-items: start;
}
.process-step__num {
	font-family: var(--f-display);
	font-size: clamp(2rem, 1.5rem + 1.5vw, 2.75rem);
	color: var(--c-brass);
	line-height: 1;
}
.process-step__title h3 {
	margin: 0;
	font-size: 1.625rem;
}
.process-step__title p {
	font-size: 0.9375rem;
	font-style: italic;
	color: var(--c-warm-gray);
	margin: 0.5rem 0 0;
}
.process-step__body p {
	font-size: 1rem;
	line-height: 1.7;
	color: var(--c-warm-gray);
	margin: 0;
	max-width: 38rem;
}

.region-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem 2.5rem;
}
.region-col h4 {
	font-family: var(--f-ui);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-brass);
	margin: 0 0 1rem;
}
.region-col ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.region-col li {
	font-size: 0.9375rem;
	line-height: 2;
	color: var(--c-warm-gray);
}

/* ============================================================
   BRANDS LANDING - filter chips and detailed brand cards
   ============================================================ */
.brand-filter {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin-bottom: var(--s-50);
}
.brand-filter button {
	font-family: var(--f-ui);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--c-warm-gray);
	background: transparent;
	border: 1px solid var(--c-rule-strong);
	padding: 0.65rem 1.25rem;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.brand-filter button:hover {
	color: var(--c-black);
	border-color: var(--c-black);
}
.brand-filter button.is-active {
	background: var(--c-black);
	color: #fff;
	border-color: var(--c-black);
}

.brand-card--detail {
	background: var(--c-bg-white);
	padding: 2rem 1.75rem;
	border: 1px solid var(--c-rule);
	border-radius: 2px;
	text-decoration: none;
	color: var(--c-black);
	display: block;
	text-align: left;
	transition: border-color 0.25s, transform 0.25s;
}
.brand-card--detail:hover {
	border-color: var(--c-brass);
	transform: translateY(-2px);
}
.brand-card--detail .brand-card__cat {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-brass);
	margin: 0 0 0.5rem;
}
.brand-card--detail .brand-card__name {
	margin: 0 0 0.75rem;
	font-size: 1.5rem;
	text-align: left;
}
.brand-card--detail .brand-card__desc {
	font-size: 0.875rem;
	color: var(--c-warm-gray);
	margin: 0 0 1rem;
	text-align: left;
	line-height: 1.55;
}
.brand-card--detail .brand-card__cta {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--c-brass);
}

/* ============================================================
   RESPONSIVE - additions for new components
   ============================================================ */
@media (max-width: 1100px) {
	.product-tiles { grid-template-columns: 1fr; }
	.service-card-grid { grid-template-columns: repeat(2, 1fr); }
	.brand-spec { grid-template-columns: 1fr; gap: 1.5rem; }
	.region-grid { grid-template-columns: repeat(2, 1fr); }
	.process-step { grid-template-columns: 80px 1fr; }
	.process-step__body { grid-column: 1 / -1; padding-left: calc(80px + 2.5rem); }
	.overlap-block { grid-template-columns: 1fr; gap: 0; }
	.overlap-block__copy { margin: -3rem 1rem 0; padding: 2rem 1.75rem; }
	.overlap-block--flip .overlap-block__copy { margin: -3rem 1rem 0; }
	.overlap-block--flip .overlap-block__media { order: 1; }
	.overlap-block--flip .overlap-block__copy { order: 2; }
	.asym-3 { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
	.asym-3 > *:nth-child(2) { padding-bottom: 0; }
	.tall-detail { grid-template-columns: 1fr; gap: 2rem; }
	.brand-hero__inner { grid-template-columns: 1fr; gap: 2.5rem; }
	.contact-layout { grid-template-columns: 1fr; gap: 2.5rem; }
}

@media (max-width: 760px) {
	.product-tile__body { left: 1.5rem; right: 1.5rem; bottom: 1.5rem; }
	.service-card-grid { grid-template-columns: 1fr; gap: 1.25rem; }
	.region-grid { grid-template-columns: 1fr; }
	.process-step { grid-template-columns: 1fr; gap: 0.75rem; }
	.process-step__body { padding-left: 0; }
	.brand-filter { gap: 0.4rem; }
	.brand-filter button { font-size: 0.6875rem; padding: 0.5rem 0.9rem; }
	.brand-hero { padding-top: calc(var(--header-h) + 56px); }
}


/* ============================================================
   LOGO PLACEHOLDER - gray rectangle holding brand name.
   To swap in real logos later, replace .logo-slot content with
   <img src="logos/brand.svg" alt="Brand">
   ============================================================ */
.logo-slot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 60px;
	background: #E8E9E5;
	border: 1px solid var(--c-rule);
	border-radius: 2px;
	font-family: var(--f-display);
	font-weight: 500;
	font-size: 1.0625rem;
	color: var(--c-warm-gray);
	letter-spacing: -0.005em;
	padding: 0 1rem;
	margin-bottom: 1rem;
	text-align: center;
	transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.logo-slot--small { height: 48px; font-size: 0.9375rem; }
.logo-slot--large { height: 84px; font-size: 1.25rem; }
.brand-card--detail:hover .logo-slot {
	background: var(--c-bg-white);
	border-color: var(--c-brass);
	color: var(--c-black);
}
.logo-slot img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

/* ============================================================
   FEATURED MANUFACTURERS LOGO WALL
   Gray by default, full color on hover
   ============================================================ */
.logo-wall {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 1.5rem;
	align-items: center;
}
.logo-wall__item {
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #E8E9E5;
	border: 1px solid var(--c-rule);
	border-radius: 2px;
	font-family: var(--f-display);
	font-weight: 500;
	font-size: 0.9375rem;
	color: var(--c-warm-gray);
	letter-spacing: -0.005em;
	padding: 0 0.75rem;
	text-align: center;
	transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
	cursor: default;
	line-height: 1.2;
}
.logo-wall__item:hover {
	background: var(--c-bg-white);
	color: var(--c-black);
	border-color: var(--c-brass);
}
.logo-wall__item img {
	max-width: 78%;
	max-height: 46px;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: grayscale(100%);
	opacity: 0.6;
	transition: filter 0.4s ease, opacity 0.4s ease, transform 0.4s ease;
}
.logo-wall__item:hover img { filter: grayscale(0%); opacity: 1; transform: scale(1.03); }

/* ============================================================
   PUBLICATION LOGO PLACEHOLDER (About / Press)
   ============================================================ */
.pub-strip {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1.5rem;
	align-items: center;
}
.pub-slot {
	height: 90px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #E8E9E5;
	border: 1px solid var(--c-rule);
	border-radius: 2px;
	font-family: var(--f-display);
	font-style: italic;
	font-weight: 400;
	font-size: 1rem;
	color: var(--c-warm-gray);
	padding: 0 1rem;
	text-align: center;
	transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
	line-height: 1.3;
}
.pub-slot:hover { background: var(--c-bg-white); color: var(--c-black); border-color: var(--c-brass); }
.pub-slot img { max-width: 100%; max-height: 100%; filter: grayscale(100%); opacity: 0.7; transition: filter 0.4s ease, opacity 0.4s ease; }
.pub-slot:hover img { filter: grayscale(0%); opacity: 1; }

/* ============================================================
   INDIVIDUAL PROJECT PAGES
   ============================================================ */
.project-hero {
	background: var(--c-bg-cream);
	padding: calc(var(--header-h) + 88px) var(--s-40) var(--s-60);
}
.project-hero__inner { max-width: var(--w-wide); margin: 0 auto; }
.project-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin-bottom: 1.5rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-warm-gray);
}
.project-hero__meta span:not(:last-child)::after {
	content: "·";
	color: var(--c-brass);
	margin-left: 1.5rem;
}
.project-hero h1 { max-width: 22ch; margin-bottom: 1.5rem; }
.project-hero__lede {
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
	line-height: 1.6;
	color: var(--c-warm-gray);
	max-width: 48rem;
	margin: 0;
}
.project-feature-img {
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 2px;
	background: var(--c-bg-cream);
}
.project-feature-img img { width: 100%; height: 100%; object-fit: cover; }

.project-detail-grid {
	display: grid;
	grid-template-columns: 1fr 1.8fr;
	gap: 4rem;
	align-items: start;
}
.project-detail__sidebar dl { margin: 0 0 2rem; }
.project-detail__sidebar dt {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-warm-gray);
	margin: 1rem 0 0.25rem;
}
.project-detail__sidebar dd {
	margin: 0 0 0.5rem;
	font-size: 0.9375rem;
	color: var(--c-black);
}
.project-detail__body p {
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--c-warm-gray);
	margin: 0 0 1.25rem;
}
.project-detail__body p strong { color: var(--c-black); font-weight: 500; }

.project-gallery {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 1rem;
}
.project-gallery__item {
	overflow: hidden;
	border-radius: 2px;
	background: var(--c-bg-cream);
	aspect-ratio: 4 / 3;
}
.project-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.project-gallery__item:hover img { transform: scale(1.03); }
.project-gallery__item--span-3 { grid-column: span 3; }
.project-gallery__item--span-4 { grid-column: span 4; aspect-ratio: 16 / 9; }
.project-gallery__item--span-2 { grid-column: span 2; }
.project-gallery__item--span-6 { grid-column: span 6; aspect-ratio: 21 / 9; }

/* ============================================================
   HARDWARE VISUAL CATEGORY GRID
   ============================================================ */
.hw-visual-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
}
.hw-visual {
	position: relative;
	overflow: hidden;
	border-radius: 2px;
	aspect-ratio: 4 / 5;
	background: var(--c-charcoal);
}
.hw-visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.85;
	transition: transform 0.7s ease, opacity 0.4s ease;
}
.hw-visual::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(17,17,17,0) 50%, rgba(17,17,17,0.7) 100%);
	pointer-events: none;
}
.hw-visual:hover img { transform: scale(1.04); opacity: 1; }
.hw-visual__label {
	position: absolute;
	left: 1.25rem;
	bottom: 1.25rem;
	color: #fff;
	font-family: var(--f-display);
	font-size: 1.125rem;
	font-weight: 500;
	z-index: 2;
	letter-spacing: -0.005em;
}

/* ============================================================
   BRAND FEATURE STRIP - used on skylights for Velux callout
   ============================================================ */
.brand-feature-strip {
	background: var(--c-bg-white);
	border: 1px solid var(--c-rule);
	border-radius: 2px;
	padding: 2.5rem 3rem;
	display: grid;
	grid-template-columns: 220px 1fr auto;
	gap: 2.5rem;
	align-items: center;
}
.brand-feature-strip .logo-slot { height: 90px; margin: 0; font-size: 1.375rem; }
.brand-feature-strip__copy h3 { margin: 0 0 0.5rem; font-size: 1.5rem; }
.brand-feature-strip__copy p { margin: 0; color: var(--c-warm-gray); font-size: 0.9375rem; line-height: 1.6; }

/* ============================================================
   BREATHING ROOM helper - for CTAs near full-bleed images
   ============================================================ */
.two-col--balanced.has-breathing { gap: 6rem; }
.has-breathing .btn-row { margin-top: 2rem; }

/* ============================================================
   RESPONSIVE for new components
   ============================================================ */
@media (max-width: 1100px) {
	.logo-wall { grid-template-columns: repeat(4, 1fr); }
	.pub-strip { grid-template-columns: repeat(3, 1fr); }
	.hw-visual-grid { grid-template-columns: repeat(2, 1fr); }
	.project-detail-grid { grid-template-columns: 1fr; gap: 2.5rem; }
	.project-gallery { grid-template-columns: repeat(4, 1fr); }
	.project-gallery__item--span-3 { grid-column: span 4; }
	.project-gallery__item--span-4 { grid-column: span 4; }
	.project-gallery__item--span-2 { grid-column: span 2; }
	.project-gallery__item--span-6 { grid-column: span 4; }
	.brand-feature-strip { grid-template-columns: 1fr; gap: 1.5rem; text-align: center; padding: 2rem; }
	.brand-feature-strip .btn-row { justify-content: center; }
	.two-col--balanced.has-breathing { gap: 3rem; }
}

@media (max-width: 760px) {
	.logo-wall { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
	.logo-wall__item { height: 68px; font-size: 0.8125rem; }
	.pub-strip { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
	.pub-slot { height: 72px; font-size: 0.875rem; }
	.logo-slot { font-size: 0.9375rem; height: 52px; }
	.hw-visual-grid { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
	.hw-visual__label { font-size: 0.9375rem; left: 0.875rem; bottom: 0.875rem; }
	.project-gallery { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
	.project-gallery__item--span-3,
	.project-gallery__item--span-4,
	.project-gallery__item--span-6 { grid-column: span 2; }
	.project-gallery__item--span-2 { grid-column: span 2; }
	.project-hero { padding-top: calc(var(--header-h) + 56px); }
	.project-hero__meta { font-size: 0.6875rem; gap: 0.25rem 1rem; }
	.project-hero__meta span:not(:last-child)::after { margin-left: 1rem; }
}


/* ============================================================
   ART GLASS GALLERY - mosaic on the Windows page
   ============================================================ */
.art-glass-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 1rem;
}
.art-glass-grid__item {
	position: relative;
	overflow: hidden;
	border-radius: 2px;
	background: var(--c-bg-cream);
	aspect-ratio: 4 / 5;
}
.art-glass-grid__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.art-glass-grid__item:hover img { transform: scale(1.03); }
.art-glass-grid__item--tall { aspect-ratio: 3 / 5; grid-column: span 2; grid-row: span 2; }
.art-glass-grid__item--wide { aspect-ratio: 16 / 9; grid-column: span 4; }
.art-glass-grid__item--reg  { grid-column: span 2; }
.art-glass-grid__caption {
	position: absolute;
	left: 1rem;
	bottom: 0.875rem;
	color: #fff;
	font-family: var(--f-display);
	font-size: 0.875rem;
	font-style: italic;
	z-index: 2;
	padding: 0;
}
.art-glass-grid__item::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.55) 100%);
	pointer-events: none;
}

@media (max-width: 1100px) {
	.art-glass-grid { grid-template-columns: repeat(4, 1fr); }
	.art-glass-grid__item--tall { grid-column: span 2; grid-row: auto; aspect-ratio: 4 / 5; }
	.art-glass-grid__item--wide { grid-column: span 4; }
	.art-glass-grid__item--reg  { grid-column: span 2; }
}
@media (max-width: 760px) {
	.art-glass-grid { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
	.art-glass-grid__item,
	.art-glass-grid__item--tall,
	.art-glass-grid__item--wide,
	.art-glass-grid__item--reg { grid-column: span 2; grid-row: auto; aspect-ratio: 4 / 5; }
}


@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	.hero__panel { display: none; }
	.hero__inner > * { opacity: 1; transform: none; }
	.reveal { opacity: 1; transform: none; }
	.h-scroll__track { animation: none; }
}

/* ============================================================
   BRAND PAGE - Materials & Finishes grid
   New visual section for brand detail pages.
   ============================================================ */
.materials-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin-top: 2.5rem;
}
.swatch-tile {
	background: var(--bg-white);
	border: 1px solid var(--rule);
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.swatch-tile:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}
.swatch-tile__img {
	height: 180px;
	background-size: cover;
	background-position: center;
	background-color: #e5e0d5;
	position: relative;
}
.swatch-tile__img::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0) 100%);
	pointer-events: none;
}
.swatch-tile__body {
	padding: 1.25rem 1.25rem 1.5rem;
}
.swatch-tile__label {
	font-family: var(--font-display);
	font-size: 1.05rem;
	font-weight: 500;
	margin: 0 0 0.35rem;
	line-height: 1.2;
}
.swatch-tile__desc {
	font-size: 0.85rem;
	color: var(--warm-gray);
	margin: 0;
	line-height: 1.55;
}
@media (max-width: 768px) {
	.materials-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
	.swatch-tile__img { height: 140px; }
}
@media (max-width: 480px) {
	.materials-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   BRAND PAGE - In-the-Field gallery strip
   ============================================================ */
.gallery-strip {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
	margin-top: 2.5rem;
}
.gallery-strip__item {
	aspect-ratio: 4 / 5;
	background-size: cover;
	background-position: center;
	background-color: #e5e0d5;
	position: relative;
	overflow: hidden;
	transition: transform 0.4s ease;
}
.gallery-strip__item:hover {
	transform: scale(1.02);
}
.gallery-strip__caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
	color: white;
	padding: 2.5rem 1.5rem 1.25rem;
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0.02em;
}
.gallery-strip__caption strong {
	display: block;
	font-family: var(--font-display);
	font-size: 1.05rem;
	font-weight: 500;
	margin-bottom: 0.15rem;
}
@media (max-width: 768px) {
	.gallery-strip { grid-template-columns: 1fr; gap: 1rem; }
	.gallery-strip__item { aspect-ratio: 16 / 10; }
}

/* ============================================================
   BRAND PAGE - Cross-link card (V1.5.0)
   Used on cross-category brands (Loewen↔Loewen Doors, etc.) to
   point users to the companion brand page. Uses site-wide tokens.
   ============================================================ */
.brand-crosslink {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 1.5rem;
	align-items: center;
	background: var(--c-bg-warm);
	border: 1px solid var(--c-rule);
	padding: 1.5rem 1.75rem;
	max-width: 42rem;
	margin: 0 auto;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.brand-crosslink:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(60, 40, 25, 0.06);
	background: var(--c-bg-white);
}
.brand-crosslink__eyebrow {
	font-size: 0.7rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-bronze);
	font-weight: 500;
	margin: 0 0 0.35rem;
}
.brand-crosslink__headline {
	font-family: var(--f-display);
	font-size: 1.25rem;
	font-weight: 500;
	margin: 0 0 0.35rem;
	color: var(--c-charcoal);
	line-height: 1.3;
}
.brand-crosslink__sub {
	font-size: 0.95rem;
	color: var(--c-warm-gray);
	margin: 0;
	line-height: 1.55;
}
.brand-crosslink__arrow {
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-charcoal);
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	white-space: nowrap;
}
.brand-crosslink__arrow span {
	transition: transform 0.2s ease;
}
.brand-crosslink:hover .brand-crosslink__arrow span {
	transform: translateX(4px);
}
@media (max-width: 600px) {
	.brand-crosslink {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   BRAND PAGE - Install reel (V1.5.0)
   Four portrait-aspect cards in a grid with background images and
   gradient overlay caption. Replaces V1.1's .gallery-strip on
   brand pages while leaving .gallery-strip intact for other uses.
   ============================================================ */
.install-reel {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.75rem;
}
.install-tile {
	aspect-ratio: 3 / 4;
	background-size: cover;
	background-position: center;
	background-color: #4a3a28;
	position: relative;
	overflow: hidden;
	transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.install-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 50%, rgba(31, 31, 31, 0.85) 100%);
}
.install-tile__cap {
	position: absolute;
	left: 1rem;
	right: 1rem;
	bottom: 1rem;
	color: var(--c-bg-cream);
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}
.install-tile__cap strong {
	font-family: var(--f-display);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.25;
}
.install-tile__cap span {
	font-size: 0.78rem;
	color: rgba(250, 248, 243, 0.78);
	line-height: 1.35;
}
@media (max-width: 980px) {
	.install-reel {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 520px) {
	.install-reel {
		grid-template-columns: 1fr;
	}
	.install-tile {
		aspect-ratio: 4 / 3;
	}
}

/* ============================================================
   V1.5.0 - Layout cleanup
   ============================================================ */

/* Block themes wrap content in <main class="wp-block-group">.  
   Reset its default block-gap margin so nothing pushes the hero
   away from the top of the viewport. */
main.wp-block-group,
.wp-site-blocks > main,
.wp-site-blocks {
	margin-top: 0 !important;
	margin-block-start: 0 !important;
}

/* Hero sections should fill from the top edge */
.hero, .brand-hero, .project-hero {
	margin-top: 0;
}

/* ============================================================
   V1.5.0 - Site logo (header + footer)
   The wordmark image is a single SVG used in both places. Cream
   color so it shows against the transparent header (which has a
   dark hero behind it) and the dark scrolled header.
   ============================================================ */
.site-logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	height: 36px;
	transition: height 0.3s ease;
}
.site-logo__img {
	height: 100%;
	width: auto;
	display: block;
	max-width: 240px;
	object-fit: contain;
}
.site-header.is-scrolled .site-logo,
.site-header.is-solid .site-logo {
	height: 32px;
}

/* Footer logo - slightly larger, sits at top of brand column */
.footer-logo {
	display: inline-block;
	height: 44px;
	margin-bottom: 1.25rem;
	text-decoration: none;
}
.footer-logo__img {
	height: 100%;
	width: auto;
	display: block;
	max-width: 260px;
	object-fit: contain;
}

/* Mobile: shrink the logo proportionally */
@media (max-width: 768px) {
	.site-logo { height: 30px; }
	.footer-logo { height: 38px; }
}

/* ============================================================
   FAQ SECTION (V1.6.0) - accordion, also powers FAQPage schema
   ============================================================ */
.faq-list {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-top: 1.5rem;
}
.faq-item {
	border-bottom: 1px solid var(--c-rule);
}
.faq-item:first-child { border-top: 1px solid var(--c-rule); }
.faq-q {
	font-family: var(--f-display);
	font-size: 1.15rem;
	font-weight: 500;
	color: var(--c-charcoal);
	padding: 1.25rem 2.5rem 1.25rem 0;
	cursor: pointer;
	list-style: none;
	position: relative;
	transition: color 0.2s ease;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after {
	content: "+";
	position: absolute;
	right: 0.25rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.5rem;
	font-weight: 300;
	color: var(--c-brass);
	transition: transform 0.25s ease;
	font-family: var(--f-body);
}
.faq-item[open] .faq-q::after { transform: translateY(-50%) rotate(45deg); }
.faq-q:hover { color: var(--c-bronze); }
.faq-a {
	padding: 0 2.5rem 1.5rem 0;
	color: var(--c-warm-gray);
	animation: faqReveal 0.3s ease;
}
.faq-a p { margin: 0; line-height: 1.7; }
@keyframes faqReveal {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   ============================================================
   V1.7.0 - DESIGN ELEVATION LAYER
   Built on the frontend-design + design-system skills.
   Typography (Clash Display / Hanken / IBM Plex Mono), motion tokens, depth & grain,
   component polish, accessibility. Additive overrides - safe to
   review as one block.
   ============================================================
   ============================================================ */

/* ---- 1. HERO: film-grain + richer directional gradient + video support ---- */
.hero::before {
	background: linear-gradient(
		105deg,
		rgba(17,14,10,0.78) 0%,
		rgba(17,14,10,0.55) 42%,
		rgba(17,14,10,0.30) 72%,
		rgba(17,14,10,0.18) 100%
	);
}
/* grain sits above gradient, below content */
.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	opacity: 0.10;
	mix-blend-mode: overlay;
	background-image: var(--grain);
}
/* Hero background video - drop a <video class="hero__video" autoplay muted loop playsinline poster="..."> as first child of .hero */
.hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}
/* slow cinematic settle on hero media (image or video) */
@media (prefers-reduced-motion: no-preference) {
	.hero__video,
	.hero[style*="background-image"] {
		animation: heroSettle var(--motion-hero) var(--ease-out) both;
	}
}
@keyframes heroSettle {
	from { transform: scale(1.06); }
	to   { transform: scale(1); }
}

/* ---- 2. SECTION DEPTH: subtle gradients + hairline rules ---- */
.section--warm { background: linear-gradient(180deg, #F2F3F1 0%, #F3F0E9 100%); }
.section--cream { background: linear-gradient(180deg, #F6F6F4 0%, #F6F3EC 100%); }
.section--dark {
	background:
		radial-gradient(120% 80% at 50% 0%, rgba(184,138,58,0.07) 0%, transparent 55%),
		linear-gradient(180deg, #1B1D1E 0%, #181818 100%);
	position: relative;
}
.section--dark::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.05;
	mix-blend-mode: overlay;
	background-image: var(--grain);
}
.section--dark > * { position: relative; z-index: 1; }

/* ---- 3. EYEBROW tick-mark, systematized ---- */
.eyebrow {
	font-family: var(--f-ui);
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
}
.eyebrow::before {
	content: "";
	width: 26px;
	height: 1px;
	background: currentColor;
	opacity: 0.7;
	display: inline-block;
}
.eyebrow--center { justify-content: center; }

/* ---- 4. ELEVATION on cards via tokens ---- */
.feature-card { box-shadow: var(--elev-1); transition: transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out); position: relative; overflow: hidden; }
.feature-card::before {
	content: "";
	position: absolute;
	top: 0; left: 0;
	width: 2px; height: 0;
	background: var(--c-brass);
	transition: height var(--motion-base) var(--ease-emphasis);
}
.feature-card:hover { transform: translateY(-3px); box-shadow: var(--elev-2); }
.feature-card:hover::before { height: 100%; }

.install-tile { box-shadow: var(--elev-1); transition: transform var(--motion-slow) var(--ease-emphasis), box-shadow var(--motion-base) var(--ease-out); }
.install-tile:hover { transform: translateY(-4px) scale(1.01); box-shadow: var(--elev-3); }

.brand-crosslink { box-shadow: var(--elev-1); }
.brand-crosslink:hover { box-shadow: var(--elev-2); }

/* ---- 5. BUTTONS: focus ring + press state via tokens ---- */
.btn {
	transition: background var(--motion-base) var(--ease-out), color var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out), transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-base) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible {
	outline: 2px solid var(--c-brass);
	outline-offset: 3px;
}
a:focus-visible, button:focus-visible, summary:focus-visible {
	outline: 2px solid var(--c-brass);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ---- 6. CALM, UNIFIED SCROLL REVEAL ---- */
@media (prefers-reduced-motion: no-preference) {
	.reveal {
		opacity: 0;
		transform: translateY(22px);
		transition: opacity var(--motion-slow) var(--ease-out), transform var(--motion-slow) var(--ease-out);
		will-change: opacity, transform;
	}
	.reveal.is-revealed { opacity: 1; transform: translateY(0); }
	/* staggered children */
	.reveal--stagger.is-revealed > * {
		animation: riseFade var(--motion-slow) var(--ease-out) both;
	}
	.reveal--stagger.is-revealed > *:nth-child(1) { animation-delay: 0.00s; }
	.reveal--stagger.is-revealed > *:nth-child(2) { animation-delay: 0.08s; }
	.reveal--stagger.is-revealed > *:nth-child(3) { animation-delay: 0.16s; }
	.reveal--stagger.is-revealed > *:nth-child(4) { animation-delay: 0.24s; }
	.reveal--stagger.is-revealed > *:nth-child(5) { animation-delay: 0.32s; }
	.reveal--stagger.is-revealed > *:nth-child(6) { animation-delay: 0.40s; }
}
@keyframes riseFade {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ---- 7. LEDE uses display-adjacent weight for editorial feel ---- */
.lede, .hero__lede {
	font-family: var(--f-body);
	font-size: var(--fs-lede);
	line-height: 1.6;
}

/* ---- 8. ACCESSIBILITY: honor reduced-motion globally ---- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
	.reveal { opacity: 1 !important; transform: none !important; }
	.hero__inner > * { opacity: 1 !important; transform: none !important; }
	.hero__panel { display: none; }
}

/* ===== LAYER 2: V2.0.1 re-skin (supersedes layer 1) ===== */
/* ============================================================================
   WEBSTER WINDOW & DOOR - DESIGN SYSTEM V2.0.0  "Light & Precision"
   ----------------------------------------------------------------------------
   A ground-up design system: light-first, editorial, engineered.
   Clash Display (display), Hanken Grotesk (UI), IBM Plex Mono (labels).
   This stylesheet loads AFTER the legacy theme.css and supersedes it for the
   shared component vocabulary, reskinning the entire site at once.
   ============================================================================ */

:root {
  /* PALETTE - warm light canvas, brass as the light source, near-black for drama */
  --v-bg: #F2F3F1;   /* primary warm canvas */
  --v-bg-2: #F6F6F4;   /* raised surface */
  --v-bg-3: #E8E9E5;   /* sunken surface */
  --v-deep: #1B1D1E;   /* near-black warm (dark sections) */
  --v-deep-2: #232628;   /* raised on dark */
  --v-panel: #FFFFFF;

  --v-brass: #3E342A;
  --v-brass-deep: #2E261E;
  --v-brass-glow: #C8A24E;

  --v-ink: #121315;
  --v-txt: #2B2D2A;
  --v-txt-dim: #6C6E68;
  --v-txt-faint: #9A9C97;
  --v-on-dark: #E9EAE6;
  --v-on-dark-dim: rgba(233,234,230,0.66);

  --v-brd: rgba(27,29,30,0.12);
  --v-brd-soft: rgba(27,29,30,0.07);
  --v-brd-dark: rgba(233,234,230,0.14);

  /* TYPE */
  --vf-disp: 'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif;
  --vf-ui: 'Hanken Grotesk',system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  --vf-mono: 'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --vfs-h1: clamp(56px, 8.5vw, 120px);
  --vfs-h2: clamp(34px, 4.6vw, 60px);
  --vfs-h3: clamp(24px, 2.6vw, 34px);
  --vfs-lede: clamp(18px, 1.5vw, 21px);

  /* MOTION */
  --v-fast: 180ms;
  --v-base: 340ms;
  --v-slow: 680ms;
  --v-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --v-ease-emph: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* ELEVATION - warm-tinted */
  --v-e1: 0 1px 3px rgba(20,18,14,0.05);
  --v-e2: 0 8px 24px rgba(20,18,14,0.09);
  --v-e3: 0 24px 56px rgba(20,18,14,0.16);

  /* LAYOUT */
  --v-wrap: 1500px;
  --v-pad-l: 76px;
  --v-pad-r: 44px;

  /* light bloom + grain */
  --v-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- BASE ---- */
body {
  background: var(--v-bg);
  color: var(--v-txt);
  font-family: var(--vf-ui);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--vf-disp); font-weight: 300; color: var(--v-ink); letter-spacing: -0.02em; line-height: 1.0; }
h1 em, h2 em, h3 em { font-style: italic; font-weight: 400; color: var(--v-brass-deep); }
p { line-height: 1.65; }

/* ---- SHARED LAYOUT WRAPPERS ---- */
.wide, .narrow, .full {
  max-width: var(--v-wrap);
  margin: 0 auto;
  padding-left: var(--v-pad-l);
  padding-right: var(--v-pad-r);
  width: 100%;
}
.narrow { max-width: 1080px; }
.full { max-width: 100%; padding-left: var(--v-pad-l); padding-right: var(--v-pad-r); }

/* ---- EYEBROW (mono technical label + tick) ---- */
.eyebrow, .eyebrow-rule {
  font-family: var(--vf-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v-brass-deep);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 400;
}
.eyebrow::before, .eyebrow-rule::before {
  content: "";
  width: 30px; height: 1px;
  background: var(--v-brass);
  display: inline-block;
}
.eyebrow--center, .eyebrow--center.eyebrow { justify-content: center; }
.eyebrow--light, .eyebrow-rule--light { color: var(--v-brass-glow); }
.eyebrow--light::before, .eyebrow-rule--light::before { background: var(--v-brass-glow); }

/* ---- SECTION SCAFFOLD ---- */
.section { position: relative; }
.section--tight  { padding: 56px 0; }
.section--snug   { padding: 72px 0; }
.section--loose  { padding: 104px 0; }
.section--warm   { background: var(--v-bg); }
.section--cream  { background: var(--v-bg-2); }
.section--dark   { background: var(--v-deep); color: var(--v-on-dark); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }
.section--dark h2 em { color: var(--v-brass-glow); }
.section--dark .eyebrow, .section--dark .eyebrow-rule { color: var(--v-brass-glow); }
.section--dark .eyebrow::before { background: var(--v-brass-glow); }
.section--dark::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  opacity:0.05; mix-blend-mode:overlay; background-image:var(--v-grain);
}
.section--dark > * { position: relative; z-index: 1; }

.section-intro { margin-bottom: 48px; }
.section-intro h2 { font-size: var(--vfs-h2); margin-top: 16px; max-width: 18ch; }
.section-intro.center-text { text-align: center; }
.section-intro.center-text h2 { margin-left: auto; margin-right: auto; }
.lede { font-size: var(--vfs-lede); line-height: 1.6; color: var(--v-txt-dim); font-family: var(--vf-ui); }
.center-text { text-align: center; }

/* ---- BUTTONS ---- */
/* ---- BUTTONS - authoritative system, legible static + hover ----
   Three variants, each with guaranteed contrast in both states:
   .btn--brass        : primary, dark fill → brass fill (text stays light)
   .btn--ghost        : on light bg, outlined → dark fill
   .btn--ghost-light  : on dark/image bg, outlined → solid light fill (dark text)
*/
.btn {
  font-family: var(--vf-ui);
  font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 15px 27px; border-radius: 4px; cursor: pointer;
  border: 1.5px solid transparent; text-decoration: none; display: inline-block; line-height: 1;
  transition: background var(--v-base) var(--v-ease), color var(--v-base) var(--v-ease), border-color var(--v-base) var(--v-ease), transform var(--v-fast) var(--v-ease), box-shadow var(--v-base) var(--v-ease);
}
/* Primary - dark fill, brass on hover, text always light */
.btn--brass { background: var(--v-ink) !important; color: #fff !important; border-color: var(--v-ink) !important; }
.btn--brass:hover { background: var(--v-brass-deep) !important; border-color: var(--v-brass-deep) !important; color: #fff !important; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(46,38,30,0.28); }
/* Ghost on light - dark outline, fills dark on hover with light text */
.btn--ghost { background: transparent !important; color: var(--v-ink) !important; border-color: var(--v-brd) !important; }
.btn--ghost:hover { background: var(--v-ink) !important; color: #fff !important; border-color: var(--v-ink) !important; transform: translateY(-2px); }
/* Ghost on dark/image - light outline + light text, fills solid light with dark text on hover */
.btn--ghost-light { background: rgba(255,255,255,0.06) !important; color: #fff !important; border-color: rgba(255,255,255,0.55) !important; }
.btn--ghost-light:hover { background: #fff !important; color: var(--v-ink) !important; border-color: #fff !important; transform: translateY(-2px); }
/* (removed harmful .btn:hover{background:inherit}; variant hovers use !important) */
.btn-row { display: flex; gap: 13px; flex-wrap: wrap; margin-top: 32px; }
.btn-row--center { justify-content: center; }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--v-brass); outline-offset: 3px; }

/* ---- REVEAL MOTION ---- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--v-slow) var(--v-ease), transform var(--v-slow) var(--v-ease); }
  .reveal.is-revealed { opacity: 1; transform: none; }
  .reveal--stagger.is-revealed > * { animation: vRise var(--v-slow) var(--v-ease) both; }
  .reveal--stagger.is-revealed > *:nth-child(1){animation-delay:0s}
  .reveal--stagger.is-revealed > *:nth-child(2){animation-delay:.08s}
  .reveal--stagger.is-revealed > *:nth-child(3){animation-delay:.16s}
  .reveal--stagger.is-revealed > *:nth-child(4){animation-delay:.24s}
  .reveal--stagger.is-revealed > *:nth-child(5){animation-delay:.32s}
  .reveal--stagger.is-revealed > *:nth-child(6){animation-delay:.40s}
}
@keyframes vRise { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} }
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.001ms!important; transition-duration:.001ms!important; }
  .reveal{opacity:1!important;transform:none!important}
}

/* ============================================================================
   COMPONENTS
   ============================================================================ */

/* ---- HERO (home + page heroes) ---- */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 150px var(--v-pad-r) 90px var(--v-pad-l);
  max-width: var(--v-wrap); margin: 0 auto;
  overflow: hidden;
}
.hero::before { /* warm light bloom */
  content:""; position:absolute; width:680px; height:680px; border-radius:50%;
  filter: blur(120px); background: radial-gradient(circle, rgba(200,162,78,0.20), transparent 70%);
  top:-180px; right:4%; z-index:0; pointer-events:none;
}
.hero__panel { display: none; } /* retire old wipe panels */
.hero__inner { position: relative; z-index: 2; max-width: 60ch; }
/* V2: hero content reveals via a CSS-only load animation - ends visible
   regardless of JS, so the headline can never get stuck at opacity:0. */
.hero__inner > * { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .hero__inner > * { animation: vHeroIn var(--v-slow) var(--v-ease) both; }
  .hero__inner > *:nth-child(1){animation-delay:.05s}
  .hero__inner > *:nth-child(2){animation-delay:.18s}
  .hero__inner > *:nth-child(3){animation-delay:.31s}
  .hero__inner > *:nth-child(4){animation-delay:.44s}
}
@keyframes vHeroIn { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} }
.hero h1 { font-size: var(--vfs-h1); font-weight: 300; line-height: 0.92; }
.hero h1 em { font-style: italic; font-weight: 400; color: var(--v-brass-deep); }
.hero__lede, .hero .lede { font-size: var(--vfs-lede); color: var(--v-txt-dim); margin-top: 26px; max-width: 40ch; font-family: var(--vf-ui); }
.hero--medium { min-height: 64vh; }
.hero--short { min-height: 52vh; }
/* dark heroes (brand/category may opt in) keep light text */
.hero.section--dark h1, .hero.section--dark .hero__lede { color: #fff; }

/* ---- FULL-BLEED IMAGE HERO ----
   Break the hero out to the full viewport width (escapes the content wrapper),
   keep the inner content left-aligned within the site wrap, strong overlay. */
.hero[style*="background-image"] {
  max-width: none;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background-size: cover;
  background-position: center;
  background-color: var(--v-deep);
  min-height: 100vh;
  padding-left: 0; padding-right: 0;
}
.hero[style*="background-image"]::before { display: none; }
.hero[style*="background-image"]::after {
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(20,18,14,0.55) 0%, rgba(20,18,14,0.30) 30%, rgba(20,18,14,0.45) 100%),
    linear-gradient(100deg, rgba(20,18,14,0.78) 0%, rgba(20,18,14,0.48) 48%, rgba(20,18,14,0.32) 100%);
}
/* re-constrain the content inside the full-bleed hero, left-aligned */
.hero[style*="background-image"] .hero__inner {
  color: #fff;
  width: 100%;
  max-width: var(--v-wrap);
  margin: 0 auto;
  padding: 0 var(--v-pad-r) 0 var(--v-pad-l);
}
.hero[style*="background-image"] .hero__inner > * { max-width: 62ch; }
.hero[style*="background-image"] h1 { color: #fff; }
.hero[style*="background-image"] h1 em { color: var(--v-brass-glow); }
.hero[style*="background-image"] .hero__lede { color: rgba(255,255,255,0.94); text-shadow: 0 1px 20px rgba(0,0,0,0.3); }
.hero[style*="background-image"] .eyebrow,
.hero[style*="background-image"] .eyebrow-rule { color: var(--v-brass-glow); }
.hero[style*="background-image"] .eyebrow::before,
.hero[style*="background-image"] .eyebrow-rule::before { background: var(--v-brass-glow); }

/* ---- FEATURE CARDS ---- */
.feature-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.feature-grid--3 { grid-template-columns: repeat(3,1fr); }
.feature-card {
  position: relative; background: var(--v-panel); border: 1px solid var(--v-brd-soft);
  border-radius: 8px; padding: 30px 28px; box-shadow: var(--v-e1);
  transition: transform var(--v-base) var(--v-ease), box-shadow var(--v-base) var(--v-ease), border-color var(--v-base) var(--v-ease);
  overflow: hidden;
}
.feature-card::before { content:""; position:absolute; top:0; left:0; width:2px; height:0; background:var(--v-brass); transition: height var(--v-base) var(--v-ease-emph); }
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--v-e2); border-color: rgba(62,52,42,0.32); }
.feature-card:hover::before { height: 100%; }
.feature-card h3 { font-size: var(--vfs-h3); margin-bottom: 8px; }
.feature-card p { color: var(--v-txt-dim); font-size: 15px; }
.feature-card__num { font-family: var(--vf-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--v-brass-deep); display:block; margin-bottom: 14px; }
.feature-card--bronze { background: var(--v-deep); color: var(--v-on-dark); border-color: transparent; }
.feature-card--bronze h3, .feature-card--bronze h4 { color: #fff; }
.feature-card--bronze p { color: var(--v-on-dark-dim); }

/* ---- BRAND HERO (19 brand pages) ---- */
.brand-hero { position: relative; padding: 150px var(--v-pad-r) 80px var(--v-pad-l); max-width: var(--v-wrap); margin: 0 auto; overflow: hidden; }
.brand-hero::before { content:""; position:absolute; width:600px; height:600px; border-radius:50%; filter:blur(120px); background:radial-gradient(circle,rgba(200,162,78,0.16),transparent 70%); top:-160px; right:6%; z-index:0; }
.brand-hero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 60px; align-items: center; }
.brand-hero__pill { font-family: var(--vf-mono); font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--v-brass-deep); display: inline-flex; align-items:center; gap:12px; margin-bottom: 22px; }
.brand-hero__pill::before { content:""; width:28px; height:1px; background:var(--v-brass); }
.brand-hero h1 { font-size: clamp(48px,6vw,92px); font-weight: 300; }
.brand-hero p { color: var(--v-txt-dim); font-size: var(--vfs-lede); margin-top: 22px; max-width: 44ch; }
.brand-hero__media { position: relative; aspect-ratio: 5/6; border-radius: 4px; overflow: hidden; box-shadow: var(--v-e3); }
.brand-hero__media img { width:100%; height:100%; object-fit: cover; }
.brand-hero__media::before, .brand-hero__media::after { /* corner ticks */
  content:""; position:absolute; width:12px; height:12px; border:1px solid var(--v-brass); z-index:3;
}
.brand-hero__media::before { top:10px; left:10px; border-right:0; border-bottom:0; }
.brand-hero__media::after { bottom:10px; right:10px; border-left:0; border-top:0; }

/* ---- BRAND SPEC (3-col) ---- */
.brand-spec { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; border-top: 1px solid var(--v-brd); }
.brand-spec__col { padding: 32px 28px 32px 0; }
.brand-spec__col + .brand-spec__col { border-left: 1px solid var(--v-brd-soft); padding-left: 28px; }
.brand-spec__col h4 { font-family: var(--vf-mono); font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--v-brass-deep); margin-bottom: 18px; font-weight: 400; }
.brand-spec__col ul { list-style: none; padding: 0; margin: 0; }
.brand-spec__col li { padding: 11px 0; border-bottom: 1px solid var(--v-brd-soft); font-size: 15px; color: var(--v-txt); }

/* ---- INSTALL REEL ---- */
.install-reel { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.install-tile {
  position: relative; aspect-ratio: 3/4; border-radius: 8px; overflow: hidden;
  background-size: cover; background-position: center; box-shadow: var(--v-e1);
  border: 1px solid var(--v-brd-soft);
  transition: transform var(--v-slow) var(--v-ease-emph), box-shadow var(--v-base) var(--v-ease);
}
.install-tile::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 40%, rgba(20,18,14,0.82)); }
.install-tile:hover { transform: translateY(-5px); box-shadow: var(--v-e3); }
.install-tile__cap { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 2; color: #fff; }
.install-tile__cap strong { font-family: var(--vf-disp); font-weight: 400; font-size: 19px; display: block; }
.install-tile__cap span { font-family: var(--vf-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.72); }

/* ---- BRAND CROSSLINK ---- */
.brand-crosslink { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; background: var(--v-bg-2); border: 1px solid var(--v-brd-soft); border-radius: 10px; padding: 28px 32px; text-decoration: none; box-shadow: var(--v-e1); transition: all var(--v-base) var(--v-ease); }
.brand-crosslink:hover { box-shadow: var(--v-e2); transform: translateY(-2px); border-color: rgba(62,52,42,0.3); }
.brand-crosslink__eyebrow { font-family: var(--vf-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--v-brass-deep); margin-bottom: 8px; }
.brand-crosslink__headline { font-family: var(--vf-disp); font-size: 26px; font-weight: 400; color: var(--v-ink); }
.brand-crosslink__sub { color: var(--v-txt-dim); font-size: 14px; margin-top: 6px; }
.brand-crosslink__arrow { font-family: var(--vf-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--v-brass-deep); white-space: nowrap; }

/* ---- LOGO WALL ---- */
.logo-wall { display: grid; grid-template-columns: repeat(6,1fr); gap: 1px; background: var(--v-brd-soft); border: 1px solid var(--v-brd-soft); border-radius: 10px; overflow: hidden; }
.logo-wall__item { background: var(--v-bg-2); aspect-ratio: 3/2; display: flex; align-items: center; justify-content: center; font-family: var(--vf-disp); font-size: 18px; color: var(--v-txt-dim); text-decoration: none; transition: all var(--v-base) var(--v-ease); }
.logo-wall__item:hover { background: #fff; color: var(--v-ink); }
.logo-wall__item img { max-width: 76%; max-height: 44px; object-fit: contain; filter: grayscale(100%); opacity: 0.6; transition: all var(--v-base) var(--v-ease); }
.logo-wall__item:hover img { filter: none; opacity: 1; }

/* ---- CTA BLOCK ---- */
.cta-block { text-align: center; }
.cta-block h2 { font-size: clamp(36px,5vw,68px); max-width: 18ch; margin: 0 auto 20px; }
.cta-block p { color: var(--v-txt-dim); max-width: 48ch; margin: 0 auto 30px; font-size: 17px; }
.section--dark .cta-block p { color: var(--v-on-dark-dim); }

/* ---- FAQ ---- */
.faq-list { border-top: 1px solid var(--v-brd); margin-top: 32px; }
.faq-item { border-bottom: 1px solid var(--v-brd); }
.faq-q { font-family: var(--vf-disp); font-size: 22px; font-weight: 400; color: var(--v-ink); padding: 22px 40px 22px 0; cursor: pointer; list-style: none; position: relative; }
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-family: var(--vf-ui); font-size: 24px; font-weight: 300; color: var(--v-brass); transition: transform var(--v-base) var(--v-ease); }
.faq-item[open] .faq-q::after { transform: translateY(-50%) rotate(45deg); }
.faq-a { padding: 0 40px 24px 0; color: var(--v-txt-dim); }
.faq-a p { margin: 0; line-height: 1.7; }

/* ---- PROCESS STEPS ---- */
.process-step { padding: 32px 0; border-top: 1px solid var(--v-brd); display: grid; grid-template-columns: 80px 1fr 1.4fr; gap: 36px; align-items: start; }
.process-step__num { font-family: var(--vf-mono); font-size: 13px; color: var(--v-brass-deep); letter-spacing: 0.1em; padding-top: 6px; }
.process-step__title { }
.process-step__title h3 { font-family: var(--vf-disp); font-size: var(--vfs-h3); font-weight: 400; margin-bottom: 8px; line-height: 1.1; }
.process-step__title p { color: var(--v-txt-faint); font-size: 14px; font-family: var(--vf-mono); letter-spacing: 0.02em; }
.process-step__body { color: var(--v-txt-dim); }
.process-step__body p { margin: 0; line-height: 1.65; }
.section--dark .process-step { border-color: var(--v-brd-dark); }
.section--dark .process-step__title p { color: var(--v-on-dark-dim); }
.section--dark .process-step__body { color: var(--v-on-dark-dim); }
@media (max-width: 900px) {
  .process-step { grid-template-columns: 1fr; gap: 10px; }
  .process-step__num { padding-top: 0; }
}

/* ---- TWO-COLUMN ---- */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.two-col--balanced { grid-template-columns: 1fr 1fr; }
.two-col__media { position: relative; aspect-ratio: 4/3; border-radius: 6px; overflow: hidden; box-shadow: var(--v-e2); }
.two-col__media img { width:100%; height:100%; object-fit: cover; }

/* ---- PROJECT CARDS (home + projects grid) ---- */
.proj-card, .projects-grid > a { position: relative; display: block; border-radius: 8px; overflow: hidden; text-decoration: none; background: var(--v-deep-2); aspect-ratio: 4/3; }
.proj-card__img { width:100%; height:100%; object-fit: cover; transition: transform var(--v-slow) var(--v-ease-emph); }
.proj-card:hover .proj-card__img { transform: scale(1.05); }
.proj-card::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,0.72)); }
.proj-card__brass-rule { position:absolute; left:20px; bottom:74px; width:0; height:2px; background:var(--v-brass-glow); z-index:2; transition: width var(--v-base) var(--v-ease-emph); }
.proj-card:hover .proj-card__brass-rule { width: 44px; }
.proj-card__cat { position: absolute; left:20px; top:18px; z-index:2; font-family: var(--vf-mono); font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color: rgba(255,255,255,0.8); }
.proj-card__title { position: absolute; left:20px; bottom:38px; right:20px; z-index:2; font-family: var(--vf-disp); font-size: 24px; color:#fff; font-weight:400; }
.proj-card__loc { position: absolute; left:20px; bottom:18px; z-index:2; font-family: var(--vf-mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color: rgba(255,255,255,0.7); }
.projects-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }

/* ---- CATEGORY / SERVICE / PRODUCT / GLASS PANELS ---- */
.cat-card, .service-card, .product-tile {
  position: relative; border-radius: 8px; overflow: hidden; border: 1px solid var(--v-brd-soft);
  background: var(--v-bg-3); box-shadow: var(--v-e1); text-decoration: none; display: block;
  transition: transform var(--v-base) var(--v-ease), box-shadow var(--v-base) var(--v-ease), border-color var(--v-base) var(--v-ease);
}
.cat-card:hover, .service-card:hover, .product-tile:hover { transform: translateY(-5px); box-shadow: var(--v-e2); border-color: rgba(62,52,42,0.35); }
.cat-card__img, .service-card__img, .product-tile img { width:100%; aspect-ratio: 3/4; object-fit: cover; display:block; transition: transform var(--v-slow) var(--v-ease-emph); }
.cat-card:hover .cat-card__img { transform: scale(1.05); }
.cat-card__body, .service-card__body, .product-tile__body { padding: 22px 22px 26px; }
.cat-card__title, .service-card__title, .product-tile__title { font-family: var(--vf-disp); font-size: 26px; font-weight: 400; color: var(--v-ink); margin-bottom: 6px; }
.cat-card__desc, .service-card__desc, .product-tile__desc { color: var(--v-txt-dim); font-size: 14px; line-height: 1.55; }
.cat-card__cta, .service-card__cta, .product-tile__cta { font-family: var(--vf-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--v-brass-deep); margin-top: 14px; display:inline-block; }
.cat-card__cat, .service-card__num, .product-tile__cat, .feature-card__num { font-family: var(--vf-mono); font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--v-brass-deep); }

/* ---- TEAM / MATERIAL CARDS ---- */
.team-card { text-align: left; }
.team-card__img { aspect-ratio: 1; border-radius: 6px; overflow: hidden; margin-bottom: 16px; box-shadow: var(--v-e1); }
.team-card__img img { width:100%; height:100%; object-fit: cover; }
.team-card__name { font-family: var(--vf-disp); font-size: 22px; font-weight: 400; }
.team-card__role { font-family: var(--vf-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--v-brass-deep); margin: 4px 0 10px; }
.team-card__bio { color: var(--v-txt-dim); font-size: 14px; }
.material-card { background: var(--v-panel); border:1px solid var(--v-brd-soft); border-radius: 8px; padding: 24px; box-shadow: var(--v-e1); }
.material-card__num { font-family: var(--vf-mono); font-size:10px; color: var(--v-brass-deep); letter-spacing:0.12em; }

/* ---- HORIZONTAL SCROLL STRIP ("continuous look at the craft") ---- */
.h-scroll { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 14px; scroll-snap-type: x mandatory; }
.h-scroll__item { position: relative; flex: 0 0 auto; width: 300px; aspect-ratio: 3/4; border-radius: 8px; overflow: hidden; scroll-snap-align: start; background: var(--v-bg-3); }
.h-scroll__item img { width:100%; height:100%; object-fit: cover; }
.h-scroll__item::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 55%, rgba(20,18,14,0.7)); }
.h-scroll__cap { position:absolute; left:16px; bottom:14px; z-index:2; color:#fff; font-family: var(--vf-mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; }

/* ---- STATS ---- */
.stat__num { font-family: var(--vf-disp); font-size: 44px; font-weight: 400; color: var(--v-ink); line-height: 1; }
.stat__num em { font-style: italic; color: var(--v-brass-deep); }
.stat__label { font-family: var(--vf-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--v-txt-faint); margin-top: 10px; }

/* ---- ART GLASS GALLERY (#111 non-linking) ---- */
.art-glass-grid__item { position: relative; border-radius: 6px; overflow: hidden; aspect-ratio: 1; }
.art-glass-grid__item img { width:100%; height:100%; object-fit: cover; }
.art-glass-grid__caption { font-family: var(--vf-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--v-txt-faint); margin-top: 8px; }

/* ---- CONTACT FIELDS ---- */
.field { margin-bottom: 18px; }
.field label, .contact-info-card__label { font-family: var(--vf-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--v-txt-dim); display: block; margin-bottom: 8px; }
.field input, .field textarea, .field select { width: 100%; padding: 13px 15px; border: 1px solid var(--v-brd); border-radius: 4px; background: var(--v-panel); font-family: var(--vf-ui); font-size: 15px; color: var(--v-ink); transition: border-color var(--v-base) var(--v-ease); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--v-brass); }
.field--full { grid-column: 1 / -1; }
.contact-info-card__group { margin-bottom: 22px; }
.contact-info-card__text { color: var(--v-txt); font-size: 15px; }

/* ---- HARDWARE VISUAL / HOTSPOTS / REGION ---- */
.hw-visual { position: relative; border-radius: 8px; overflow: hidden; }
.hw-visual__label { font-family: var(--vf-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
.hotspot { position: absolute; cursor: pointer; }
.hotspot__card { background: rgba(251,250,246,0.94); backdrop-filter: blur(8px); border:1px solid var(--v-brd-soft); border-radius: 8px; padding: 14px 16px; box-shadow: var(--v-e2); }
.hotspot__card h4 { font-family: var(--vf-disp); font-size: 17px; font-weight: 400; }
.region-col h4 { font-family: var(--vf-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--v-brass-deep); margin-bottom: 12px; }

/* ---- HOME SIGNATURE: READOUT BAND ---- */
.wwd-readout { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--v-brd); max-width: var(--v-wrap); margin: 0 auto; padding: 34px var(--v-pad-r) 0 var(--v-pad-l); }
.wwd-readout .cell { padding-right: 28px; }
.wwd-readout .cell + .cell { border-left: 1px solid var(--v-brd-soft); padding-left: 28px; }
.wwd-readout .v { font-family: var(--vf-disp); font-weight: 400; font-size: 36px; line-height: 1; color: var(--v-ink); }
.wwd-readout .v em { font-style: italic; color: var(--v-brass-deep); }
.wwd-readout .k { font-size: 12px; color: var(--v-txt-dim); margin-top: 10px; }

/* ---- HOME SIGNATURE: GLASS CATEGORY PANELS ---- */
.glass-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.gpanel { position: relative; aspect-ratio: 3/4; border-radius: 8px; overflow: hidden; border: 1px solid var(--v-brd-soft); box-shadow: var(--v-e1); background: var(--v-bg-3); text-decoration:none; transition: transform var(--v-base) var(--v-ease), box-shadow var(--v-base) var(--v-ease), border-color var(--v-base) var(--v-ease); }
.gpanel img { position:absolute; inset:0; width:100%; height:100%; object-fit: cover; transition: transform var(--v-slow) var(--v-ease-emph); }
.gpanel::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 36%, rgba(20,18,14,0.8)); }
.gpanel:hover { transform: translateY(-6px); box-shadow: var(--v-e2); border-color: rgba(62,52,42,0.4); }
.gpanel:hover img { transform: scale(1.06); }
.gpanel .glow { position:absolute; inset:0; opacity:0; background: radial-gradient(120% 60% at 50% 100%, rgba(200,162,78,0.45), transparent 70%); transition: opacity var(--v-base) var(--v-ease); z-index:1; mix-blend-mode: screen; }
.gpanel:hover .glow { opacity: 1; }
.gpanel .body { position:absolute; left:20px; right:20px; bottom:20px; z-index:2; color:#fff; }
.gpanel .num { font-family: var(--vf-mono); font-size:10px; letter-spacing:0.13em; color: var(--v-brass-glow); margin-bottom: 9px; }
.gpanel h3 { font-family: var(--vf-disp); font-weight:400; font-size:26px; color:#fff; margin-bottom:5px; }
.gpanel p { font-size:12.5px; line-height:1.5; color: rgba(255,255,255,0.82); }
.gpanel .arrow { position:absolute; top:16px; right:16px; z-index:2; width:32px; height:32px; background: rgba(255,255,255,0.9); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--v-ink); transition: all var(--v-base) var(--v-ease); }
.gpanel:hover .arrow { background: var(--v-brass); color:#fff; transform: rotate(45deg); }

/* ---- RESPONSIVE ---- */
@media (max-width: 1100px) {
  :root { --v-pad-l: 32px; --v-pad-r: 32px; }
  .brand-hero__inner { grid-template-columns: 1fr; gap: 36px; }
  .glass-grid, .install-reel { grid-template-columns: repeat(2,1fr); }
  .feature-grid, .feature-grid--3, .projects-grid { grid-template-columns: repeat(2,1fr); }
  .two-col { grid-template-columns: 1fr; gap: 32px; }
  .wwd-readout { grid-template-columns: repeat(2,1fr); gap: 24px 0; }
  .logo-wall { grid-template-columns: repeat(3,1fr); }
  .brand-spec { grid-template-columns: 1fr; }
  .brand-spec__col + .brand-spec__col { border-left: 0; padding-left: 0; border-top: 1px solid var(--v-brd-soft); }
}
@media (max-width: 640px) {
  :root { --v-pad-l: 20px; --v-pad-r: 20px; }
  .glass-grid, .install-reel, .feature-grid, .feature-grid--3, .projects-grid, .logo-wall { grid-template-columns: 1fr; }
  .wwd-readout { grid-template-columns: 1fr; }
  .wwd-readout .cell + .cell { border-left: 0; padding-left: 0; border-top: 1px solid var(--v-brd-soft); padding-top: 20px; margin-top: 4px; }
  .hero { min-height: 80vh; padding-top: 120px; }
}

/* ============================================================================
   V2.0.1 FEEDBACK FIXES
   ============================================================================ */

/* (1) LOGO - +40% larger, top and sticky */
.site-logo { height: 50px !important; }
.site-header.is-scrolled .site-logo,
.site-header.is-solid .site-logo { height: 45px !important; }
.site-logo__img { max-width: 340px !important; }
@media (max-width: 768px) {
  .site-logo { height: 42px !important; }
}

/* (3 + 4) CATEGORY / PRODUCT CARDS - full redesign.
   Image on top (fixed ratio), text in a solid panel BELOW (never overlapping),
   strong contrast, brass CTA. Replaces the cramped overlapping layout. */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.cat-card {
  display: flex; flex-direction: column;
  background: var(--v-panel);
  border: 1px solid var(--v-brd-soft);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--v-e1);
  transition: transform var(--v-base) var(--v-ease), box-shadow var(--v-base) var(--v-ease), border-color var(--v-base) var(--v-ease);
}
.cat-card:hover { transform: translateY(-5px); box-shadow: var(--v-e2); border-color: rgba(62,52,42,0.35); }
.cat-card__img {
  display: block; position: relative;
  aspect-ratio: 4/3; overflow: hidden; background: var(--v-bg-3);
}
.cat-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--v-slow) var(--v-ease-emph); }
.cat-card:hover .cat-card__img img { transform: scale(1.05); }
.cat-card__body {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 22px 22px 24px; gap: 0;
}
.cat-card__title {
  font-family: var(--vf-disp); font-weight: 400; font-size: 26px;
  color: var(--v-ink); line-height: 1.1; margin-bottom: 8px;
}
.cat-card__desc {
  font-family: var(--vf-ui); font-size: 14px; line-height: 1.55;
  color: var(--v-txt-dim); margin-bottom: 16px;
}
.cat-card__cta {
  font-family: var(--vf-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--v-brass-deep); margin-top: auto;
  transition: color var(--v-base) var(--v-ease), letter-spacing var(--v-base) var(--v-ease);
}
.cat-card:hover .cat-card__cta { letter-spacing: 0.16em; }
@media (max-width: 1100px) { .cat-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px)  { .cat-grid { grid-template-columns: 1fr; } }

/* (6) "WHAT IT'S LIKE TO WORK WITH US" - 4 cards on one line, no hanging card */
.feature-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .feature-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .feature-grid--4 { grid-template-columns: 1fr; } }

/* (7) HORIZONTAL CRAFT STRIP - replace ugly native scrollbar with a clean thin one */
.h-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--v-brass) transparent;
  padding-bottom: 18px;
  -webkit-overflow-scrolling: touch;
}
.h-scroll::-webkit-scrollbar { height: 4px; }
.h-scroll::-webkit-scrollbar-track { background: var(--v-brd-soft); border-radius: 100px; }
.h-scroll::-webkit-scrollbar-thumb { background: var(--v-brass); border-radius: 100px; }
.h-scroll::-webkit-scrollbar-thumb:hover { background: var(--v-brass-deep); }
/* fade hint that there's more to scroll */
.h-scroll__item { scroll-snap-align: start; }

/* (8 + 2) BUILDERS BAND - keep body text inside the column, don't clip */
.two-col__media + div, .section--dark .two-col { overflow: visible; }
.section--dark .two-col p { color: var(--v-on-dark-dim); }

/* (2/8/11) VALUE BAND ("A partner that works on your schedule") - dark band,
   proper containment so body text never clips at the right edge */
.value-band {
  background: var(--v-deep);
  color: var(--v-on-dark);
  padding: 96px 0;
  position: relative;
}
.value-band::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  opacity:0.05; mix-blend-mode:overlay; background-image:var(--v-grain);
}
.value-band > .wide { position: relative; z-index: 1; }
.value-band__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.value-band h2, .value-band__heading {
  color: #fff; font-family: var(--vf-disp); font-weight: 300;
  font-size: var(--vfs-h2); line-height: 1.0; margin: 12px 0 0; max-width: 16ch;
}
.value-band p { color: var(--v-on-dark-dim); font-size: 16px; line-height: 1.6; max-width: 52ch; }
.value-band .eyebrow-rule, .value-band .eyebrow { color: var(--v-brass-glow); }
.value-band .eyebrow-rule::before, .value-band .eyebrow::before { background: var(--v-brass-glow); }
@media (max-width: 900px) {
  .value-band__grid { grid-template-columns: 1fr; gap: 28px; }
}

/* (12) BODONI MODA - keep large display weights solid (thin hairlines get
   fragile at hero scale), and tune optical sizing via weight. */
.hero h1, .brand-hero h1, .sec-head h2, h1 { font-weight: 500; }
h2 { font-weight: 500; }
.hero h1 em, h2 em, h1 em { font-weight: 500; }


/* ===== LAYER 3: V3 Stone & bronze corrections ===== */
/* Clash Display is a grotesque: use bold display weights, not the old thin serif weights */
h1,h2,h3,h4{font-weight:700;letter-spacing:-.018em}
.hero h1,.brand-hero h1,.project-hero h1{font-weight:800;letter-spacing:-.022em;line-height:1.02}
h1{line-height:1.04}
.value-band h2,.value-band__heading,.sec-head h2,.cat-card__title,.gpanel h3,.feature-card h3{font-weight:700}
/* drop the italic-serif accent; ems read as solid bronze */
h1 em,h2 em,h3 em,.hero h1 em,.brand-hero h1 em,.wwd-readout .v em{font-style:normal;font-weight:inherit;color:var(--c-brass)}
/* no serif anywhere */
body,.lede,.hero__lede,p{font-family:'Hanken Grotesk',system-ui,-apple-system,sans-serif}

/* Header: text lockup (navy mark + wordmark). Dark glass bar is authoritative (see LAYER 12 glass rule below); text is light so it reads on the glass. */
.site-logo{height:auto!important;display:flex;align-items:center;gap:11px;text-decoration:none}
.brand-mark{width:38px;height:38px;border-radius:3px;background:var(--c-webster-blue);display:grid;place-items:center;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,0.12)}
.brand-mark b{font-family:var(--vf-disp);font-weight:800;color:#fff;font-size:21px;line-height:1}
.brand-name{font-family:var(--vf-disp);font-weight:800;font-size:18px;letter-spacing:-.01em;line-height:1.04;color:#fff}
.brand-name span{display:block;font-family:var(--vf-mono);font-size:10px;font-weight:400;letter-spacing:.13em;color:rgba(255,255,255,0.62);text-transform:uppercase}
.site-header .site-nav a,.site-header .site-nav__trigger{color:rgba(255,255,255,0.92)}
.site-header .site-nav a:hover,.site-header .site-nav__trigger:hover{color:var(--c-brass-light)}
/* Dropdown submenu: charcoal panel, light items (high specificity so it beats the nav-link colour) */
.site-header .site-nav__dropdown{background:rgba(18,19,21,0.97);border-top:2px solid var(--c-brass-light);box-shadow:0 16px 40px rgba(0,0,0,0.45)}
.site-header .site-nav__dropdown a{color:rgba(255,255,255,0.90)}
.site-header .site-nav__dropdown a:hover{color:var(--c-brass-light);background:rgba(255,255,255,0.07)}
.site-header .header-cta{background:var(--c-brass-light);color:var(--c-black);border:none;font-weight:600}
.site-header .header-cta:hover{background:#d8b25e}
/* Footer lockup on dark */
.site-footer .brand-name{color:#fff}
.site-footer .brand-name span{color:#8e918b}

/* =========================================================================
   LAYER 4 - V3 glass elevation (architectural glass, light-sweep, bento, scrubber)
   Display face is Clash Display. Glass is a labeled web approximation: a blur
   base everywhere, plus an SVG turbulence backdrop-warp on Chromium, with a
   frosted fallback for Safari and prefers-reduced-transparency. Architectural
   edge: 4px radius, thin metal frame, chromatic edge, specular rim.
   Token note: --c-brass is the bronze accent (#3E342A); --c-brass-light is the
   metal brass (#C8A24E), used on dark only; --c-webster-blue is logo-only.
   ========================================================================= */

/* ---- architectural glass (on dark) ---- */
.wwd-glass{position:relative;isolation:isolate;border-radius:4px;
  background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.05));
  backdrop-filter:blur(7px) saturate(150%);-webkit-backdrop-filter:blur(7px) saturate(150%);
  border:1px solid rgba(200,162,78,.40);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.20),inset 1.5px 0 0 rgba(255,80,120,.16),inset -1.5px 0 0 rgba(60,170,255,.16),inset 0 1px 0 rgba(255,255,255,.55),0 24px 50px -28px rgba(0,0,0,.55)}
@supports (backdrop-filter:url('#wwdGlassRefract')) or (-webkit-backdrop-filter:url('#wwdGlassRefract')){
  .wwd-glass{backdrop-filter:blur(2.5px) saturate(155%) url('#wwdGlassRefract');-webkit-backdrop-filter:blur(2.5px) saturate(155%) url('#wwdGlassRefract')}
}
@media (prefers-reduced-transparency:reduce){
  .wwd-glass{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(22,24,27,.95)}
}

/* ---- hero light-sweep headline ---- */
.hero h1 .sweep{background:linear-gradient(100deg,#fff 0 44%,var(--c-brass-light) 49.5%,#fff 55% 100%);background-size:340% 100%;background-position:120% 0;-webkit-background-clip:text;background-clip:text;color:transparent;animation:wwdSweep 1.7s cubic-bezier(.16,1,.3,1) .35s both}
@keyframes wwdSweep{to{background-position:-30% 0}}
@media (prefers-reduced-motion:reduce){.hero h1 .sweep{animation:none;background:none;color:#fff}}

/* ---- hero glass category panels ---- */
.hero__panels{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;width:100%;margin-top:var(--s-50)}
.hero__gp{overflow:hidden;padding:16px 15px 13px;min-height:148px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;text-decoration:none;transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s}
.hero__gp::after{content:"";position:absolute;top:0;left:var(--glint,-40%);width:36%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-16deg);transition:left .5s cubic-bezier(.16,1,.3,1);pointer-events:none;z-index:3}
.hero__gp:hover{transform:translateY(-5px)}
.hero__gp svg{width:26px;height:26px;color:#fff;position:relative;z-index:2}
.hero__gp .t{display:block;font-family:var(--f-display);font-weight:600;font-size:1.05rem;color:#fff;position:relative;z-index:2}
.hero__gp .k{display:block;font-family:var(--f-ui);font-size:.6rem;letter-spacing:.05em;text-transform:uppercase;color:var(--c-brass-light);margin-top:3px;position:relative;z-index:2}
@media (max-width:860px){.hero__panels{grid-template-columns:repeat(2,1fr)}}
@media (prefers-reduced-motion:reduce){.hero__gp,.hero__gp::after{transition:none}.hero__gp:hover{transform:none}}

/* ---- bento "what we carry" ---- */
.wwd-bento{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:stretch;margin-top:var(--s-40)}
.wwd-tile{position:relative;overflow:hidden;border-radius:6px;min-height:158px;display:flex;flex-direction:column;justify-content:flex-end;padding:20px;border:1px solid var(--c-rule);background:var(--c-bg-cream);text-decoration:none;transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s}
.wwd-tile:hover{transform:translateY(-4px);box-shadow:0 26px 50px -30px rgba(27,29,30,.5)}
.wwd-tile__ey{font-family:var(--f-ui);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--c-brass);margin-bottom:6px}
.wwd-tile h3{font-family:var(--f-display);font-weight:600;font-size:1.4rem;color:var(--c-charcoal);margin:0;line-height:1.05}
.wwd-tile p{color:var(--c-warm-gray);font-size:.9rem;margin:4px 0 0}
.wwd-tile__rule{height:2px;width:26px;background:var(--c-brass);margin-top:12px;transition:width .4s cubic-bezier(.16,1,.3,1)}
.wwd-tile:hover .wwd-tile__rule{width:46px}
.wwd-tile--img{color:#fff;border:none}
.wwd-tile--img .wwd-tile__ey{color:var(--c-brass-light)}
.wwd-tile--img h3{color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.55)}
.wwd-tile--img p{color:rgba(255,255,255,.92);text-shadow:0 1px 10px rgba(0,0,0,.5)}
.wwd-tile--img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.wwd-tile--img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 24%,rgba(10,11,13,.45) 55%,rgba(10,11,13,.86));z-index:1}
.wwd-tile--img>*{position:relative;z-index:2}
.wwd-bento .t-windows{grid-column:span 2;aspect-ratio:1/1}
.wwd-bento .t-doors{grid-column:span 2;aspect-ratio:1/1}
.wwd-bento .t-hardware{grid-column:span 2;aspect-ratio:5/2}
.wwd-bento .t-skylights{grid-column:span 2;aspect-ratio:5/2}
.wwd-bento .t-brands{grid-column:span 3;justify-content:center}
.wwd-bento .t-showroom{grid-column:span 1;background:var(--c-brass);border:none;color:#fff}
.wwd-bento .t-showroom .wwd-tile__ey{color:var(--c-brass-light)}
.wwd-bento .t-showroom h3{color:#fff}
.wwd-bento .t-showroom p{color:rgba(255,255,255,.85)}
.wwd-bento .t-showroom .wwd-tile__rule{background:var(--c-brass-light)}
.wwd-logos{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center}
.wwd-logos span{font-family:var(--f-display);font-weight:600;font-size:.98rem;color:var(--c-warm-gray)}
@media (max-width:860px){
  .wwd-bento{grid-template-columns:repeat(2,1fr)}
  .wwd-bento .t-windows,.wwd-bento .t-doors{grid-column:span 1;aspect-ratio:1/1}
  .wwd-bento .t-hardware,.wwd-bento .t-skylights{grid-column:span 2;aspect-ratio:16/6}
  .wwd-bento .t-brands,.wwd-bento .t-showroom{grid-column:span 2;aspect-ratio:auto}
}

/* ---- before / after scrubber ---- */
.wwd-compare{position:relative;width:100%;aspect-ratio:16/9.4;border-radius:6px;overflow:hidden;box-shadow:0 40px 80px -44px rgba(27,29,30,.55);--pos:50%;-webkit-user-select:none;user-select:none}
.wwd-compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wwd-compare .wwd-compare__after{z-index:1}
.wwd-compare .wwd-compare__before{z-index:2;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.wwd-compare__div{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:rgba(255,255,255,.9);box-shadow:0 0 14px rgba(0,0,0,.35);z-index:4;transform:translateX(-1px)}
.wwd-compare__handle{position:absolute;top:50%;left:var(--pos);width:50px;height:50px;transform:translate(-50%,-50%);z-index:5;border-radius:6px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(255,255,255,.5),rgba(255,255,255,.15));backdrop-filter:blur(8px) saturate(160%);-webkit-backdrop-filter:blur(8px) saturate(160%);border:1px solid rgba(255,255,255,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 8px 22px -8px rgba(0,0,0,.5)}
.wwd-compare__handle b{display:block;width:20px;height:20px;border-left:2px solid var(--c-brass);border-right:2px solid var(--c-brass);border-radius:1px}
.wwd-compare__corner{position:absolute;bottom:16px;z-index:4;font-family:var(--f-ui);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(18,19,21,.7);padding:5px 10px;border-radius:999px}
.wwd-compare__corner.l{left:16px}
.wwd-compare__corner.r{right:16px}
.wwd-compare__range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:6}
.wwd-compare__range:focus-visible{outline:2px solid var(--c-brass-light);outline-offset:2px}
.wwd-compare__hint{font-family:var(--f-ui);font-size:.66rem;letter-spacing:.1em;color:var(--c-warm-gray);text-transform:uppercase;margin-top:14px;text-align:center}
@media (prefers-reduced-transparency:reduce){.wwd-compare__handle{backdrop-filter:none;-webkit-backdrop-filter:none;background:#f2f3f1}}
/* end LAYER 4 */

/* =========================================================================
   LAYER 5 - motion pass (light + glass language). Overrides the layered
   history above. Principle: optical, brief, precise. All reduced-motion safe.
   ========================================================================= */

/* focus-pull reveal: a slight lens blur resolves as content lifts */
.reveal{opacity:0;transform:translateY(16px);filter:blur(6px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1),filter .6s cubic-bezier(.16,1,.3,1)}
.reveal.is-visible{opacity:1;transform:none;filter:blur(0)}

/* project photo: retire the cream diagonal sweep, settle the image + wipe the brass rule on reveal */
.light-sweep::after{content:none}
.light-sweep img{transform:scale(1.055)}
.light-sweep.is-swept img{transform:scale(1);transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.light-sweep.is-swept .proj-card__brass-rule{width:48px;transition:width .8s cubic-bezier(.16,1,.3,1) .12s}

/* hero: retire the curtain reveal, bring the headline in fast */
.hero__panel{display:none}
.hero__inner > *{transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1)}
.hero.is-revealed .hero__inner > *:nth-child(1){transition-delay:.06s}
.hero.is-revealed .hero__inner > *:nth-child(2){transition-delay:.13s}
.hero.is-revealed .hero__inner > *:nth-child(3){transition-delay:.20s}
.hero.is-revealed .hero__inner > *:nth-child(4){transition-delay:.27s}

/* hotspots: calm the infinite pulse, expand a ring once on hover */
.hotspot::after{animation:none;opacity:0;transform:scale(1);transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1)}
.hotspot:hover::after,.hotspot:focus-visible::after{opacity:.6;transform:scale(1.5)}

/* keyboard focus rings (visible, not just a border tint) */
a:focus-visible,button:focus-visible,.btn:focus-visible{outline:2px solid var(--c-brass);outline-offset:3px;border-radius:2px}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--c-brass);outline-offset:2px}
.hotspot:focus-visible,.hero a:focus-visible,.hero__gp:focus-visible{outline:2px solid var(--c-brass-light);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .h-scroll__track{animation:none}
  .reveal{filter:none!important;transform:none!important;opacity:1!important;transition:none!important}
  .light-sweep img{transform:none!important;transition:none!important}
  .hero h1 .sweep{animation:none;background:none;color:#fff}
  .hotspot::after{transition:none}
}
/* end LAYER 5 */

/* =========================================================================
   LAYER 6 - closing glass CTA band (Option A). Dark band + warm glow so the
   architectural glass panel reads, no photography required. Brass fill is
   metal-on-dark, which the system allows.
   ========================================================================= */
.wwd-cta-band{position:relative;overflow:hidden;background:var(--c-black)}
.wwd-cta-band::before{content:"";position:absolute;top:-28%;right:-8%;width:58%;height:130%;background:radial-gradient(closest-side,rgba(244,236,219,.15),transparent 70%);pointer-events:none}
.wwd-cta-wrap{position:relative;z-index:1;max-width:720px;margin:0 auto;padding:var(--s-70) var(--s-30)}
.wwd-cta{padding:44px 38px;text-align:center}
.wwd-cta__ey{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--c-brass-light);margin:0}
.wwd-cta h2{color:#fff;font-family:var(--f-display);font-weight:700;font-size:clamp(1.8rem,3.4vw,2.6rem);letter-spacing:-.015em;line-height:1.07;margin:14px 0 0}
.wwd-cta .lede{color:rgba(255,255,255,.8);font-size:1.06rem;max-width:50ch;margin:16px auto 0}
.wwd-cta .btn-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.wwd-cta .cta-btn{font-family:var(--f-body);font-weight:600;font-size:.95rem;padding:.82rem 1.45rem;border-radius:4px;text-decoration:none;display:inline-block;transition:transform .18s cubic-bezier(.16,1,.3,1),background .25s,filter .25s}
.wwd-cta .cta-btn--primary{background:var(--c-brass-light);color:var(--c-charcoal)}
.wwd-cta .cta-btn--primary:hover{filter:brightness(1.06);transform:translateY(-1px)}
.wwd-cta .cta-btn--ghost{background:rgba(255,255,255,.10);color:#fff;border:1px solid rgba(255,255,255,.4)}
.wwd-cta .cta-btn--ghost:hover{background:rgba(255,255,255,.18)}
@media (max-width:600px){.wwd-cta{padding:32px 22px}.wwd-cta-wrap{padding:var(--s-60) var(--s-20)}}
@media (prefers-reduced-motion:reduce){.wwd-cta .cta-btn{transition:none}.wwd-cta .cta-btn--primary:hover{transform:none}}
/* end LAYER 6 */

/* =========================================================================
   LAYER 7 - QA fixes (High + Medium from the 3.3.0 review)
   ========================================================================= */

/* HIGH 1: let the home hero panels use the full hero width, not the 60ch copy
   column. Scoped with :has() so only the hero that contains panels widens;
   the headline and lede keep their own max-widths so they do not stretch. */
.hero:has(.hero__panels) .hero__inner{max-width:min(1120px,92vw)}
.hero:has(.hero__panels) h1{max-width:20ch}
.hero:has(.hero__panels) .hero__lede{max-width:46rem}

/* HIGH 2: hero panel labels on a solid chip so they stay readable over any
   part of the hero photo (text was sitting directly on the glass). */
.hero__gp{justify-content:space-between}
.hero__gp .lbl{display:block;background:rgba(18,19,21,.78);border-radius:6px;padding:9px 11px;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.hero__gp .t{color:#fff}
.hero__gp .k{color:var(--c-brass-light)}
@media (prefers-reduced-transparency:reduce){.hero__gp .lbl{background:rgba(18,19,21,.93);backdrop-filter:none;-webkit-backdrop-filter:none}}

/* HIGH 3: project hotspot card must not run off-screen on phones */
@media (max-width:600px){
  .hotspot__card{left:50% !important;right:auto !important;transform:translateX(-50%) !important;width:min(240px,78vw) !important}
}

/* MEDIUM 4: one canonical hero copy reveal. Neutralizes the three competing
   layers (old opacity:0 + JS delays, the V2 vHeroIn load animation, and the
   earlier inert LAYER 5 delays). Content is visible without JS, animates in
   only with motion allowed, and runs once on .is-revealed. */
.hero__inner > *{opacity:1;transform:none;animation:none}
@media (prefers-reduced-motion:no-preference){
  .hero.is-revealed .hero__inner > *{animation:wwdHeroIn .7s cubic-bezier(.16,1,.3,1) both}
  .hero.is-revealed .hero__inner > *:nth-child(2){animation-delay:.06s}
  .hero.is-revealed .hero__inner > *:nth-child(3){animation-delay:.12s}
  .hero.is-revealed .hero__inner > *:nth-child(4){animation-delay:.18s}
  .hero.is-revealed .hero__inner > *:nth-child(5){animation-delay:.24s}
}
@keyframes wwdHeroIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* MEDIUM 6: cap the before/after scrubber so it does not get huge on desktop */
.wwd-compare{max-width:880px;margin-left:auto;margin-right:auto}
/* end LAYER 7 */

/* =========================================================================
   LAYER 8 - Site-wide V3 rollout (hubs, brands, projects)
   ========================================================================= */

/* 8.1 Hero quick-nav panels: auto-fit so the hubs (3 panels) and the home
   (4 panels) both lay out flush with no empty cell. */
.hero__panels{grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}
@media (max-width:600px){.hero__panels{grid-template-columns:repeat(2,1fr)}}

/* 8.2 Roll the glass CTA band to every page. The closing dark CTA on the
   interior pages keeps its markup; this gives its inner block the same
   frosted-glass panel the home band uses, over the existing warm-glow dark.
   Glass here is a web approximation; it reads because the band is dark. */
.section--dark .cta-block{
  max-width:720px;margin-left:auto;margin-right:auto;
  padding:44px 38px;border-radius:4px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(200,162,78,.30);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 30px 60px -30px rgba(0,0,0,.6);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
@media (prefers-reduced-transparency:reduce){
  .section--dark .cta-block{background:rgba(30,32,34,.92);backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* 8.3 Projects archive: a quiet bento, the most recent project runs wide.
   Guarded to the desktop grid so the 1 to 2 column phone layout is untouched. */
@media (min-width:781px){
  .projects-grid{grid-auto-flow:dense}
  .projects-grid .proj-card:nth-child(8n+1){grid-column:span 2}
}
/* end LAYER 8 */

/* =========================================================================
   LAYER 9 - Hardware finish selector (Emtek). Glass is a web approximation;
   the lever is a placeholder until real Emtek photos are pasted per finish.
   ========================================================================= */
@property --m-hi {syntax:'<color>';inherits:true;initial-value:#9a6a3d}
@property --m-mid{syntax:'<color>';inherits:true;initial-value:#3a2a1d}
@property --m-lo {syntax:'<color>';inherits:true;initial-value:#150d08}
@property --m-edge{syntax:'<color>';inherits:true;initial-value:#4a3422}
@property --m-spec{syntax:'<color>';inherits:true;initial-value:rgba(255,214,168,.5)}
.fs-stage{position:relative;overflow:hidden;border-radius:6px;background:radial-gradient(120% 90% at 50% -10%,rgba(200,162,78,.16) 0%,transparent 55%),linear-gradient(180deg,#1d1f20 0%,#121315 100%);transition:--m-hi .45s ease,--m-mid .45s ease,--m-lo .45s ease,--m-edge .45s ease,--m-spec .45s ease}
.fs-grid{display:grid;grid-template-columns:1.2fr .8fr;align-items:stretch}
.fs-display{position:relative;min-height:440px;display:grid;place-items:center;padding:var(--s-50)}
.fs-frame{position:relative;isolation:isolate;overflow:hidden;width:min(380px,82%);aspect-ratio:1/1;border-radius:8px;border:1px solid rgba(200,162,78,.40);background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.02));backdrop-filter:blur(8px) saturate(140%);-webkit-backdrop-filter:blur(8px) saturate(140%);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 40px 80px -40px rgba(0,0,0,.7);display:grid;place-items:center}
.fs-frame::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at 28% 12%,rgba(255,255,255,.30),transparent 38%);z-index:3}
.fs-lever{width:86%;height:86%;position:relative;z-index:1;display:block;transition:opacity .4s ease}
.fs-shot{position:absolute;inset:8%;width:84%;height:84%;object-fit:contain;opacity:0;transition:opacity .4s ease;z-index:2;pointer-events:none}
.fs-frame.has-photo .fs-lever{opacity:0}
.fs-frame.has-photo .fs-shot{opacity:1}
.fs-cap{position:absolute;left:12px;bottom:10px;z-index:3;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.fs-frame.has-photo .fs-cap{display:none}
.fsm-hi{stop-color:var(--m-hi)}.fsm-mid{stop-color:var(--m-mid)}.fsm-lo{stop-color:var(--m-lo)}
.fs-edge{stroke:var(--m-edge)}.fs-spec{fill:var(--m-spec)}
.fs-read{border-left:1px solid rgba(255,255,255,.10);padding:var(--s-50) var(--s-40);display:flex;flex-direction:column;justify-content:center;gap:4px;color:#fff}
.fs-read .rk{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--c-brass-light);margin:0}
.fs-read .rn{font-family:var(--f-display);font-weight:600;font-size:1.8rem;line-height:1.05;margin:6px 0 0;color:#fff}
.fs-read .rc{font-family:var(--f-mono);font-size:.8rem;color:rgba(255,255,255,.6);margin:2px 0 0}
.fs-read .rmeta{font-family:var(--f-mono);font-size:.78rem;color:rgba(255,255,255,.66);margin:8px 0 0}
.fs-read .ravail{font-size:.92rem;color:rgba(255,255,255,.74);margin:14px 0 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.10)}
.fs-swatches{padding:22px var(--s-40) 26px;border-top:1px solid rgba(255,255,255,.10)}
.fs-swatches .fs-slabel{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55);margin:0 0 14px}
.fs-list{display:flex;flex-wrap:wrap;gap:14px}
.fs-sw{appearance:none;border:0;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:7px;width:84px;padding:0}
.fs-chip{width:46px;height:46px;border-radius:50%;background-size:cover;background-position:center;box-shadow:inset 0 1px 1px rgba(255,255,255,.35),inset 0 -3px 6px rgba(0,0,0,.4);outline:2px solid transparent;outline-offset:3px;transition:outline-color .2s,transform .2s}
.fs-cn{font-family:var(--f-mono);font-size:.6rem;line-height:1.25;letter-spacing:.03em;color:rgba(255,255,255,.6);text-align:center;transition:color .2s}
.fs-cn i{display:block;font-style:normal;color:rgba(255,255,255,.4)}
.fs-sw:hover .fs-chip{transform:translateY(-2px)}
.fs-sw[aria-checked="true"] .fs-chip{outline-color:var(--c-brass-light)}
.fs-sw[aria-checked="true"] .fs-cn{color:#fff}
.fs-sw[aria-checked="true"] .fs-cn i{color:var(--c-brass-light)}
.fs-sw:focus-visible .fs-chip{outline-color:#fff}
@media (max-width:760px){.fs-grid{grid-template-columns:1fr}.fs-read{border-left:0;border-top:1px solid rgba(255,255,255,.10);padding:var(--s-30) var(--s-40)}.fs-display{min-height:320px;padding:var(--s-40)}}
@media (prefers-reduced-motion:reduce){.fs-stage,.fs-lever,.fs-shot,.fs-chip{transition:none}.fs-sw:hover .fs-chip{transform:none}}
@media (prefers-reduced-transparency:reduce){.fs-frame{background:rgba(28,30,32,.96);backdrop-filter:none;-webkit-backdrop-filter:none}}

.fs-stage[data-finish="unlacquered-brass"]{--m-hi:#e7cd86;--m-mid:#b0913f;--m-lo:#6d5420;--m-edge:#8a6c2c;--m-spec:rgba(255,246,210,.5)}
.fs-chip--unlacquered-brass{background-image:radial-gradient(circle at 32% 26%,#e7cd86,#b0913f 58%,#6d5420)}
.fs-stage[data-finish="polished-brass"]{--m-hi:#fff0bf;--m-mid:#cda53f;--m-lo:#836018;--m-edge:#a07d22;--m-spec:rgba(255,250,225,.85)}
.fs-chip--polished-brass{background-image:radial-gradient(circle at 32% 26%,#fff0bf,#cda53f 58%,#836018)}
.fs-stage[data-finish="satin-brass"]{--m-hi:#ddc187;--m-mid:#ad8a40;--m-lo:#6f5526;--m-edge:#876a2f;--m-spec:rgba(255,246,214,.42)}
.fs-chip--satin-brass{background-image:radial-gradient(circle at 32% 26%,#ddc187,#ad8a40 58%,#6f5526)}
.fs-stage[data-finish="french-antique"]{--m-hi:#9d7d44;--m-mid:#4a3a22;--m-lo:#241a0e;--m-edge:#5a4527;--m-spec:rgba(255,222,170,.4)}
.fs-chip--french-antique{background-image:radial-gradient(circle at 32% 26%,#9d7d44,#4a3a22 58%,#241a0e)}
.fs-stage[data-finish="oil-rubbed-bronze"]{--m-hi:#9a6a3d;--m-mid:#3a2a1d;--m-lo:#150d08;--m-edge:#4a3422;--m-spec:rgba(255,214,168,.5)}
.fs-chip--oil-rubbed-bronze{background-image:radial-gradient(circle at 32% 26%,#9a6a3d,#3a2a1d 58%,#150d08)}
.fs-stage[data-finish="polished-nickel"]{--m-hi:#ffffff;--m-mid:#c6cdd1;--m-lo:#6f777b;--m-edge:#9aa2a6;--m-spec:rgba(255,255,255,.9)}
.fs-chip--polished-nickel{background-image:radial-gradient(circle at 32% 26%,#ffffff,#c6cdd1 58%,#6f777b)}
.fs-stage[data-finish="satin-nickel"]{--m-hi:#e8eaeb;--m-mid:#b3b8ba;--m-lo:#7e8285;--m-edge:#a0a5a7;--m-spec:rgba(255,255,255,.42)}
.fs-chip--satin-nickel{background-image:radial-gradient(circle at 32% 26%,#e8eaeb,#b3b8ba 58%,#7e8285)}
.fs-stage[data-finish="pewter"]{--m-hi:#d0cbc0;--m-mid:#9a958b;--m-lo:#615d55;--m-edge:#7d786e;--m-spec:rgba(255,255,255,.3)}
.fs-chip--pewter{background-image:radial-gradient(circle at 32% 26%,#d0cbc0,#9a958b 58%,#615d55)}
.fs-stage[data-finish="flat-black"]{--m-hi:#4d4f53;--m-mid:#242527;--m-lo:#0f0f10;--m-edge:#34363a;--m-spec:rgba(255,255,255,.13)}
.fs-chip--flat-black{background-image:radial-gradient(circle at 32% 26%,#4d4f53,#242527 58%,#0f0f10)}
.fs-stage[data-finish="polished-chrome"]{--m-hi:#ffffff;--m-mid:#cdd6db;--m-lo:#69767d;--m-edge:#94a1a8;--m-spec:rgba(255,255,255,.92)}
.fs-chip--polished-chrome{background-image:radial-gradient(circle at 32% 26%,#ffffff,#cdd6db 58%,#69767d)}
.fs-stage[data-finish="satin-steel"]{--m-hi:#d7d6d2;--m-mid:#a7a6a1;--m-lo:#6f6e69;--m-edge:#8a8984;--m-spec:rgba(255,255,255,.34)}
.fs-chip--satin-steel{background-image:radial-gradient(circle at 32% 26%,#d7d6d2,#a7a6a1 58%,#6f6e69)}
.fs-stage[data-finish="flat-black-steel"]{--m-hi:#45474a;--m-mid:#232426;--m-lo:#111113;--m-edge:#303133;--m-spec:rgba(255,255,255,.12)}
.fs-chip--flat-black-steel{background-image:radial-gradient(circle at 32% 26%,#45474a,#232426 58%,#111113)}
.fs-stage[data-finish="brushed-stainless"]{--m-hi:#dadde0;--m-mid:#aeb3b6;--m-lo:#767b7e;--m-edge:#969b9e;--m-spec:rgba(255,255,255,.34)}
.fs-chip--brushed-stainless{background-image:radial-gradient(circle at 32% 26%,#dadde0,#aeb3b6 58%,#767b7e)}
.fs-stage[data-finish="white-bronze"]{--m-hi:#f1e9d8;--m-mid:#c3b59b;--m-lo:#857a61;--m-edge:#a99b7f;--m-spec:rgba(255,250,238,.5)}
.fs-chip--white-bronze{background-image:radial-gradient(circle at 32% 26%,#f1e9d8,#c3b59b 58%,#857a61)}
.fs-stage[data-finish="medium-bronze"]{--m-hi:#8a6a44;--m-mid:#4f3a25;--m-lo:#281c10;--m-edge:#5e472d;--m-spec:rgba(255,222,170,.4)}
.fs-chip--medium-bronze{background-image:radial-gradient(circle at 32% 26%,#8a6a44,#4f3a25 58%,#281c10)}
.fs-stage[data-finish="flat-black-bronze"]{--m-hi:#4a3d30;--m-mid:#261d14;--m-lo:#0f0a06;--m-edge:#33271b;--m-spec:rgba(255,222,170,.3)}
.fs-chip--flat-black-bronze{background-image:radial-gradient(circle at 32% 26%,#4a3d30,#261d14 58%,#0f0a06)}
/* end LAYER 9 */

/* =========================================================================
   LAYER 10 - Showroom interactive glass callouts (replaces the old .hotspot
   component on the showroom page; glass cards are a web approximation that
   reads because they sit over a dark photo). Old .hotspot CSS left in place
   but is now unused on any page.
   ========================================================================= */
.sm-room{position:relative;border-radius:8px;overflow:hidden;aspect-ratio:16/10;background:#111;margin-top:8px}
.sm-room>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sm-room::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,11,.25),rgba(10,10,11,.55));pointer-events:none}
.sm-marker{position:absolute;z-index:2;transform:translate(-50%,-50%)}
.sm-dot{appearance:none;border:0;cursor:pointer;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-mono);font-size:.8rem;color:#fff;background:rgba(18,19,21,.55);border:1px solid rgba(200,162,78,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);box-shadow:0 4px 18px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.25);transition:transform .25s cubic-bezier(.16,1,.3,1),background .25s}
.sm-dot::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(200,162,78,.5);opacity:0;transform:scale(.9);transition:opacity .5s,transform .5s}
.sm-marker:hover .sm-dot,.sm-marker.is-open .sm-dot,.sm-marker.hot .sm-dot{transform:scale(1.12);background:rgba(200,162,78,.92);color:var(--c-charcoal)}
.sm-marker:hover .sm-dot::after,.sm-marker.hot .sm-dot::after{opacity:.7;transform:scale(1.4)}
.sm-dot:focus-visible{outline:2px solid var(--c-brass-light);outline-offset:3px}
.sm-card{position:absolute;left:50%;bottom:calc(100% + 14px);transform:translateX(-50%) translateY(6px);width:260px;z-index:3;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,transform .3s cubic-bezier(.16,1,.3,1);border-radius:4px;overflow:hidden;isolation:isolate;border:1px solid rgba(200,162,78,.42);background:linear-gradient(150deg,rgba(28,30,32,.62),rgba(18,19,21,.74));backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 26px 50px -22px rgba(0,0,0,.75)}
.sm-card::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(120% 60% at 20% 0%,rgba(255,255,255,.22),transparent 45%),linear-gradient(90deg,rgba(255,80,120,.10),transparent 30% 70%,rgba(60,170,255,.10))}
.sm-marker:hover .sm-card,.sm-marker:focus-within .sm-card,.sm-marker.is-open .sm-card{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);pointer-events:auto}
.sm-card__img{display:block;width:100%;height:120px;object-fit:cover;background:#222}
.sm-card__body{padding:13px 15px 15px;position:relative;z-index:1}
.sm-card__k{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--c-brass-light);margin:0}
.sm-card__t{font-family:var(--f-display);font-weight:600;font-size:1.12rem;color:#fff;margin:3px 0 5px;line-height:1.1}
.sm-card__p{font-size:.86rem;color:rgba(255,255,255,.8);margin:0;line-height:1.5}
.sm-legend{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}
.sm-li{display:flex;gap:11px;align-items:flex-start;text-align:left;background:none;border:0;padding:8px;border-radius:5px;cursor:pointer;transition:background .2s}
.sm-li:hover,.sm-li:focus-visible{background:var(--c-bg-cream);outline:none}
.sm-li__n{flex:0 0 auto;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-mono);font-size:.72rem;color:#fff;background:var(--c-charcoal)}
.sm-li__t{font-family:var(--f-display);font-weight:600;font-size:.98rem;line-height:1.15;margin:0 0 2px;display:block}
.sm-li__p{font-size:.8rem;color:var(--c-warm-gray);margin:0;line-height:1.4;display:block}
@media (max-width:700px){.sm-card{display:none}.sm-legend{grid-template-columns:1fr;gap:6px}.sm-room{aspect-ratio:4/3}}
@media (prefers-reduced-motion:reduce){.sm-dot,.sm-dot::after,.sm-card{transition:none}}
@media (prefers-reduced-transparency:reduce){.sm-card{background:rgba(20,21,23,.97);backdrop-filter:none;-webkit-backdrop-filter:none}.sm-dot{background:rgba(18,19,21,.95);backdrop-filter:none;-webkit-backdrop-filter:none}}
/* end LAYER 10 */

/* =========================================================================
   LAYER 11 - Home brand logo-wall image sizing (logo-slot + pub-slot img
   rules already exist; this is the only wall missing one). Logos are
   height-normalized so wide and square marks align by height.
   ========================================================================= */
.logo-wall__item{display:flex;align-items:center;justify-content:center;min-height:58px;padding:8px}
.logo-wall__item img{max-height:42px;max-width:100%;width:auto;height:auto;object-fit:contain}
/* end LAYER 11 */

/* =========================================================================
   LAYER 12 - Readability + chrome fixes
   - Restores the dark hero scrim that an earlier decorative ".hero::before"
     (warm bloom) had clobbered; this is why hero text was hard to read.
   - Makes the site header the intended glass bar with a thin bronze hairline.
   ========================================================================= */

/* Authoritative hero scrim: a single dark legibility overlay. Explicitly
   neutralizes the bloom box (width/height/top/right/radius/filter) so only
   this dark gradient remains, sitting above the photo and below content. */
.hero::before{
	content:"";
	position:absolute;
	inset:0; top:0; right:0; bottom:0; left:0;
	width:auto; height:auto;
	border-radius:0;
	filter:none;
	background:linear-gradient(180deg, rgba(15,16,17,0.45) 0%, rgba(15,16,17,0.58) 55%, rgba(15,16,17,0.74) 100%);
	z-index:1;
	pointer-events:none;
}
/* a touch more darkness on the left where the headline sits */
.hero::after{
	background:linear-gradient(90deg, rgba(15,16,17,0.40) 0%, rgba(15,16,17,0.12) 45%, transparent 70%);
	opacity:1;
	z-index:1;
}

/* Header: glass bar with a thin bronze hairline border (the intended look). */
.site-header{
	background:linear-gradient(180deg, rgba(18,19,21,0.44), rgba(18,19,21,0.30));
	backdrop-filter:blur(10px) saturate(140%);
	-webkit-backdrop-filter:blur(10px) saturate(140%);
	border-bottom:1px solid rgba(200,162,78,0.28);
	box-shadow:inset 0 1px 0 rgba(255,255,255,0.10);
}
.site-header.is-scrolled,
.site-header.is-solid{
	background:rgba(18,19,21,0.93);
	border-bottom-color:rgba(200,162,78,0.32);
	backdrop-filter:blur(12px) saturate(140%);
	-webkit-backdrop-filter:blur(12px) saturate(140%);
}
@media (prefers-reduced-transparency:reduce){
	.site-header,.site-header.is-scrolled,.site-header.is-solid{background:rgba(18,19,21,0.95);backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* simple text link used on the project single page */
.text-link{font-family:var(--f-mono);font-size:0.8rem;letter-spacing:0.04em;color:var(--c-brass);text-decoration:none;border-bottom:1px solid rgba(62,52,42,0.35);padding-bottom:2px}
.text-link:hover{color:var(--c-bronze);border-bottom-color:var(--c-brass)}
/* end LAYER 12 */

/* LAYER 13 - spacing + component polish (v3.10.0) */
/* About + media two-column text blocks: looser paragraph rhythm */
.two-col--media > div > p { margin-bottom: 1.35rem; line-height: 1.75; }
.two-col--media > div > p:last-child { margin-bottom: 0; }

/* Logo treatments (v3.10.0): bigger logos, no gray tiles, keep hover-to-colour */
/* Brand logo wall (home + brand pages) - white tiles, hairline grid, larger marks */
.logo-wall { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--v-brd-soft); border: 1px solid var(--v-brd-soft); border-radius: 10px; }
.logo-wall__item { background: #fff; aspect-ratio: auto; min-height: 108px; padding: 24px 20px; }
.logo-wall__item:hover { background: #fff; }
.logo-wall__item img { max-height: 60px; max-width: 80%; filter: grayscale(100%); opacity: 0.55; transition: filter .3s var(--v-ease), opacity .3s var(--v-ease), transform .3s var(--v-ease); }
.logo-wall__item:hover img { filter: none; opacity: 1; transform: scale(1.04); }
/* Product / brand-page brand-card logo slot - drop the grey box, enlarge the mark */
.logo-slot { background: transparent; border: none; height: 104px; margin-bottom: 1.25rem; }
.logo-slot--small { height: 84px; }
.logo-slot--large { height: 128px; }
.logo-slot img { max-width: 82%; max-height: 70%; }
.brand-card--detail:hover .logo-slot { background: transparent; border: none; }

/* LAYER 14 - art-glass two-photo layout (v3.11.0) */
.art-glass-grid--two { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-30); align-items:start; }
.art-glass-grid--two .art-glass-grid__item { margin:0; }
.art-glass-grid--two img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:4px; display:block; }
@media (max-width:640px){ .art-glass-grid--two { grid-template-columns:1fr; } }

/* LAYER 15 - process-card readability + larger logos (v3.12.0) */
/* Bronze process cards: brass card numbers were too dark on near-black; brighten number + body text. */
.feature-card--bronze .feature-card__num { color: var(--c-brass-light); }
.feature-card--bronze p { color: rgba(233,234,230,0.84); }
/* Home logo wall: larger logos, tighter tiles */
.logo-wall__item { min-height: 116px; padding: 20px 18px; }
.logo-wall__item img { max-height: 74px; max-width: 88%; }
/* Product + brand page logo slots: larger */
.logo-slot { height: 124px; }
.logo-slot--small { height: 96px; }
.logo-slot--large { height: 148px; }
.logo-slot img { max-width: 92%; max-height: 82%; }
.brand-feature-strip .logo-slot { height: 132px; }
/* end LAYER 15 */

/* LAYER 16 - projects gallery page (v3.12.0) */
.proj-gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-30); }
.proj-gallery .gallery-item { margin:0; position:relative; border-radius:6px; overflow:hidden; }
.proj-gallery .gallery-item img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; transition:transform .5s var(--v-ease); }
.proj-gallery .gallery-item:hover img { transform:scale(1.04); }
.proj-gallery figcaption { position:absolute; left:0; right:0; bottom:0; padding:10px 12px; font-family:var(--vf-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:linear-gradient(180deg,transparent,rgba(10,11,13,.72)); }
@media (max-width:900px){ .proj-gallery { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .proj-gallery { grid-template-columns:1fr; } }
/* end LAYER 16 */

/* =========================================================================
   LAYER 17 - layout + readability pass (v3.13.0)
   ========================================================================= */

/* ROOT FIX: .two-col--media / .two-col--balanced were used without the base
   .two-col class, so they never got display:grid and silently stacked
   full-width (giant images, crowded text). Restore the grid. */
.two-col--media, .two-col--balanced { display: grid; }

/* Compact-media variant: a smaller image beside the copy (historic, door callout) */
@media (min-width: 761px) {
  .two-col--tight-media { grid-template-columns: 1.6fr 1fr; align-items: center; gap: 3.5rem; }
  .two-col--tight-media .two-col__media { max-width: 430px; max-height: 360px; aspect-ratio: 5/4; margin-left: auto; }
}

/* two-col body copy: darker, looser, easier to read */
.two-col--media > div > p, .two-col--balanced > div > p { color: #3a3c36; line-height: 1.72; }
.two-col--media > div > p + p, .two-col--balanced > div > p + p { margin-top: 1.1rem; }

/* HERO: stronger scrim + text shadow so copy lifts off the photo (site-wide) */
.hero::before { background: linear-gradient(180deg, rgba(13,14,15,0.52) 0%, rgba(13,14,15,0.60) 45%, rgba(13,14,15,0.82) 100%) !important; }
.hero::after { background: linear-gradient(90deg, rgba(13,14,15,0.60) 0%, rgba(13,14,15,0.28) 44%, transparent 74%) !important; opacity: 1 !important; }
.hero h1 { text-shadow: 0 2px 26px rgba(0,0,0,0.55), 0 1px 4px rgba(0,0,0,0.45); }
.hero__lede { color: #fff !important; text-shadow: 0 1px 16px rgba(0,0,0,0.62), 0 1px 3px rgba(0,0,0,0.5); }
.hero .eyebrow-rule, .hero .eyebrow-rule--light, .hero .eyebrow { text-shadow: 0 1px 12px rgba(0,0,0,0.65); }

/* LOGO WALLS: bigger, more legible marks */
.logo-wall__item { min-height: 128px; padding: 14px 16px; }
.logo-wall__item img { max-height: 92px; max-width: 92%; opacity: 0.82; filter: grayscale(100%); }
.logo-wall__item:hover img { opacity: 1; filter: none; }
.logo-slot img { max-width: 96%; max-height: 88%; }

/* HEADER: smooth static -> sticky transition (both states solid so it animates) */
.site-header { background: rgba(18,19,21,0.42) !important; transition: background-color .45s ease, padding .45s ease, border-color .45s ease, box-shadow .45s ease !important; }
.site-header.is-scrolled, .site-header.is-solid { background: rgba(18,19,21,0.93) !important; }
@media (prefers-reduced-transparency: reduce) { .site-header, .site-header.is-scrolled, .site-header.is-solid { background: rgba(18,19,21,0.97) !important; } }

/* HEADER hover: readable brass-light in every state (nav + dropdown) */
.site-header .site-nav a:hover, .site-header .site-nav__trigger:hover,
.site-header.is-scrolled .site-nav a:hover, .site-header.is-scrolled .site-nav__trigger:hover,
.site-header.is-solid .site-nav a:hover, .site-header.is-solid .site-nav__trigger:hover { color: var(--c-brass-light) !important; }
.site-header .site-nav__dropdown a:hover { color: var(--c-brass-light) !important; background: rgba(255,255,255,0.08); }

/* Primary brass CTA on dark/glass bands: clear bright-brass hover (matches header CTA) */
.btn--brass:hover { background: var(--c-brass-light) !important; border-color: var(--c-brass-light) !important; color: var(--c-charcoal) !important; box-shadow: 0 8px 22px rgba(200,162,78,0.32) !important; transform: translateY(-2px); }

/* end LAYER 17 */

/* LAYER 18 - responsive fixes (v3.13.0) */
/* Brand grid collapsed to 3 cols at 1100px but never below, overflowing phones. */
@media (max-width: 760px) { .brand-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } .brand-card { padding: 1.5rem 1rem; } }
@media (max-width: 480px) { .brand-grid { grid-template-columns: 1fr; } }
/* Safety: never let a stray wide child force horizontal scroll on small screens. */
@media (max-width: 760px) { html, body { overflow-x: hidden; } }
/* end LAYER 18 */

/* =========================================================================
   LAYER 19 - readability + polish reinforcement (v3.14.0)
   ========================================================================= */

/* HERO: deeper left scrim so the eyebrow/headline/lede stay legible even over
   the brightest hero photos; stronger text shadow. */
.hero::after { background: linear-gradient(90deg, rgba(12,13,14,0.80) 0%, rgba(12,13,14,0.48) 38%, rgba(12,13,14,0.14) 62%, transparent 82%) !important; }
.hero::before { background: linear-gradient(180deg, rgba(12,13,14,0.50) 0%, rgba(12,13,14,0.58) 45%, rgba(12,13,14,0.84) 100%) !important; }
.hero h1 { text-shadow: 0 2px 30px rgba(0,0,0,0.6), 0 1px 4px rgba(0,0,0,0.5); }
.hero__lede { text-shadow: 0 1px 18px rgba(0,0,0,0.7), 0 1px 3px rgba(0,0,0,0.55); }
.hero .eyebrow-rule, .hero .eyebrow-rule--light, .hero .eyebrow { text-shadow: 0 1px 14px rgba(0,0,0,0.8), 0 0 2px rgba(0,0,0,0.6); }

/* LOGO WALLS: full-strength marks so they pop and read clearly. */
.logo-wall__item { min-height: 132px; padding: 12px 14px; }
.logo-wall__item img { max-height: 104px; max-width: 94%; opacity: 1 !important; filter: grayscale(0.12) !important; }
.logo-wall__item:hover img { filter: grayscale(0) !important; transform: scale(1.04); }
.logo-slot img { max-width: 98%; max-height: 92%; }

/* PRESS LOGOS ("Featured in" on home + about): legible marks on clean tiles. */
.pub-slot { background: #fff; }
.pub-slot img { max-height: 58px; opacity: 1; filter: grayscale(0.12); }
.pub-slot:hover img { filter: grayscale(0); }

/* PRIMARY CTA on dark / glass bands: bright at rest (matches the header CTA),
   so it no longer reads dark-on-dark; clear hover. */
.section--dark .btn--brass, .cta-block .btn--brass {
  background: var(--c-brass-light) !important; color: var(--c-charcoal) !important; border-color: var(--c-brass-light) !important;
}
.section--dark .btn--brass:hover, .cta-block .btn--brass:hover {
  background: #d8b25e !important; color: var(--c-charcoal) !important; border-color: #d8b25e !important;
  box-shadow: 0 8px 22px rgba(200,162,78,0.40) !important; transform: translateY(-2px);
}

/* COMPACT CALLOUT (historic / door-hardware): genuinely smaller image, copy gets the room. */
@media (min-width: 761px) {
  .two-col--tight-media { grid-template-columns: 1.9fr 1fr !important; gap: 3.5rem !important; }
  .two-col--tight-media .two-col__media { max-width: 340px !important; max-height: 300px !important; aspect-ratio: 4/3 !important; margin-left: auto; }
  .two-col--tight-media .two-col__media img { aspect-ratio: 4/3 !important; max-height: 300px; }
}
@media (max-width: 760px) {
  .two-col--tight-media .two-col__media { max-width: 360px; margin: 0 auto; }
  .two-col--tight-media .two-col__media img { aspect-ratio: 4/3; max-height: 260px; }
}

/* PROSE: a little more line-height in the two-column copy blocks (architects, about). */
.two-col--media > div > p, .two-col--balanced > div > p { line-height: 1.8 !important; }
.two-col--media > div > p + p, .two-col--balanced > div > p + p { margin-top: 1.3rem !important; }
/* end LAYER 19 */

/* =========================================================================
   LAYER 20 - mobile overflow sweep (v3.14.0)
   Inline grid-template styles in markup beat the responsive media queries,
   so a few grids stayed multi-column on phones and overflowed. These
   !important rules reclaim the collapse without editing every inline style.
   ========================================================================= */
/* Hardware material grid (inline repeat(4)) */
@media (max-width: 820px) { .material-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 460px) { .material-grid { grid-template-columns: 1fr !important; } }

/* Home "what we carry" bento: prevent grid blowout, single column on phones */
.wwd-tile { min-width: 0; }
@media (max-width: 560px) {
  .wwd-bento { grid-template-columns: 1fr !important; }
  .wwd-bento > * { grid-column: 1 / -1 !important; }
  .wwd-bento .t-windows, .wwd-bento .t-doors { aspect-ratio: 4/3 !important; }
  .wwd-bento .t-hardware, .wwd-bento .t-skylights { aspect-ratio: 16/7 !important; }
  .wwd-bento .t-brands, .wwd-bento .t-showroom { aspect-ratio: auto !important; }
}

/* General safety: inline multi-column grids collapse on small phones */
@media (max-width: 460px) {
  .feature-grid, .feature-grid--3, .feature-grid--6, .team-grid, .stat-grid, .service-grid { grid-template-columns: 1fr !important; }
  .pub-strip { grid-template-columns: repeat(2, 1fr) !important; }
}
/* end LAYER 20 */

/* =========================================================================
   LAYER 21 - hero/logo emphasis + smoother header + glass CTA hover (v3.13.0)
   Reinforces L17/L19 per client feedback: hero copy still hard to read on the
   brightest photos; logo walls need to be bigger and pop; the static->sticky
   header change felt abrupt; the glass-band primary button hover was faint.
   ========================================================================= */

/* HERO: heavier scrim concentrated where the copy sits + stronger text shadow */
.hero::after {
  background: linear-gradient(96deg, rgba(9,10,11,0.90) 0%, rgba(9,10,11,0.66) 32%, rgba(9,10,11,0.34) 55%, rgba(9,10,11,0.10) 78%, transparent 100%) !important;
  opacity: 1 !important;
}
.hero::before {
  background: linear-gradient(180deg, rgba(9,10,11,0.40) 0%, rgba(9,10,11,0.50) 38%, rgba(9,10,11,0.90) 100%) !important;
}
.hero h1 { text-shadow: 0 2px 38px rgba(0,0,0,0.78), 0 2px 6px rgba(0,0,0,0.65) !important; }
.hero__lede { color:#fff !important; text-shadow: 0 1px 22px rgba(0,0,0,0.85), 0 1px 4px rgba(0,0,0,0.7) !important; }
.hero .eyebrow-rule, .hero .eyebrow-rule--light, .hero .eyebrow { text-shadow: 0 1px 18px rgba(0,0,0,0.92), 0 0 3px rgba(0,0,0,0.75) !important; }

/* LOGO WALLS: bigger marks on clean white tiles, balanced 4x4 grid (16 brands). */
.logo-wall { grid-template-columns: repeat(4, 1fr) !important; gap: 1.25rem !important; }
.logo-wall__item {
  height: auto !important;
  min-height: 150px !important;
  background: #fff !important;
  border: 1px solid var(--c-rule) !important;
  padding: 20px 26px !important;
}
.logo-wall__item img {
  max-height: 124px !important;
  max-width: 100% !important;
  opacity: 1 !important;
  filter: grayscale(0) !important;
  transition: transform .35s var(--v-ease);
}
.logo-wall__item:hover { background:#fff !important; border-color: var(--c-brass) !important; }
.logo-wall__item:hover img { transform: scale(1.05); filter: grayscale(0) !important; }
@media (max-width: 900px){ .logo-wall { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 560px){ .logo-wall { grid-template-columns: repeat(2, 1fr) !important; } .logo-wall__item { min-height: 112px !important; padding: 14px 16px !important; } .logo-wall__item img { max-height: 80px !important; } }

/* HEADER: longer, smoother static -> sticky cross-fade */
.site-header { transition: background-color .5s ease, padding .5s ease, border-color .5s ease, box-shadow .5s ease !important; }

/* GLASS CTA primary button: bright, obvious hover that matches the header CTA */
.wwd-cta .cta-btn--primary:hover {
  background: #d8b25e !important; color: var(--c-charcoal) !important;
  filter: none !important; transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(200,162,78,0.40) !important;
}
/* end LAYER 21 */

/* =========================================================================
   LAYER 22 - hero legibility done right + smaller mobile logo (v3.16.0)
   The previous pass haloed the headline with large-blur text-shadows AND the
   animated light-sweep (background-clip:text) settled on a gray/tan slice of
   its gradient, so the letters read gray/embossed. Fix: solid crisp-white
   letters, a single tight shadow for edge definition only, and a stronger
   photo scrim so the copy lifts off the image instead of relying on shadow.
   ========================================================================= */

/* Stronger, cleaner scrim: a bottom-weighted veil over the whole photo plus a
   left-weighted band under the copy column. Keeps the right side of the photo
   visible while giving the headline/lede a genuinely dark backing. */
.hero::before {
  background: linear-gradient(180deg, rgba(8,9,10,0.32) 0%, rgba(8,9,10,0.40) 45%, rgba(8,9,10,0.80) 100%) !important;
}
.hero::after {
  background: linear-gradient(100deg, rgba(8,9,10,0.84) 0%, rgba(8,9,10,0.58) 34%, rgba(8,9,10,0.32) 58%, rgba(8,9,10,0.08) 80%, transparent 100%) !important;
  opacity: 1 !important;
}

/* Headline: force solid opaque white (kills the gradient-clip that rendered
   gray) and remove the halo. One tight shadow only, no wide blur. */
.hero h1, .hero h1 .sweep {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  animation: none !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55), 0 0 1px rgba(0,0,0,0.55) !important;
}
.hero__lede {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6) !important;
}
.hero .eyebrow-rule, .hero .eyebrow-rule--light, .hero .eyebrow {
  text-shadow: 0 1px 2px rgba(0,0,0,0.7) !important;
}

/* Smaller mobile static-header logo. The header uses the text lockup
   (.brand-mark + .brand-name), whose size comes from the mark box and the
   wordmark font, not .site-logo height -- so scale those down directly. */
@media (max-width: 768px) {
  .site-logo { height: auto !important; gap: 8px !important; }
  .brand-mark { width: 30px !important; height: 30px !important; }
  .brand-mark b { font-size: 16px !important; }
  .brand-name { font-size: 15px !important; }
  .brand-name span { font-size: 8.5px !important; letter-spacing: .11em !important; }
}
/* end LAYER 22 */

/* =========================================================================
   LAYER 23 - hero eyebrow + lede legibility (v3.17.0)
   Headline reads well now, but the smaller eyebrow and lede still wash out
   over the bright sky and the lit-interior part of the photo. The earlier
   scrim faded out exactly where that copy sits. Extend the dark coverage
   across the whole copy column (left + lower) and give the small text a
   clear, tight shadow. Site-wide (applies to every .hero).
   ========================================================================= */
.hero::before {
  background: linear-gradient(180deg, rgba(8,9,10,0.44) 0%, rgba(8,9,10,0.44) 38%, rgba(8,9,10,0.86) 100%) !important;
}
.hero::after {
  background: linear-gradient(100deg, rgba(8,9,10,0.90) 0%, rgba(8,9,10,0.82) 28%, rgba(8,9,10,0.62) 48%, rgba(8,9,10,0.38) 64%, rgba(8,9,10,0.12) 84%, transparent 100%) !important;
  opacity: 1 !important;
}
/* Eyebrow: brighter brass + clear tight shadow so small text reads on photo */
.hero .eyebrow-rule, .hero .eyebrow-rule--light, .hero .eyebrow {
  color: #e3c074 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 2px rgba(0,0,0,0.8) !important;
}
.hero .eyebrow-rule::before, .hero .eyebrow-rule--light::before { background: #e3c074 !important; }
.hero__lede {
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 0 2px rgba(0,0,0,0.6) !important;
}
/* end LAYER 23 */

/* =========================================================================
   LAYER 24 - scroll-linked progressive header (v3.18.0)
   Replaces the single-threshold class flip (which fades a large opacity jump
   all at once at 60px, and snapped the blur/logo). The header's darkness,
   blur and padding now interpolate continuously from --hdr-p (0 at the top,
   1 by ~170px of scroll, set by bindScrollHeader in app.js). The result is a
   gradual static->sticky change locked to scroll position, with no snap.
   ========================================================================= */
.site-header {
  background-color: rgba(18,19,21, calc(0.30 + 0.62 * var(--hdr-p, 0))) !important;
  background-image: none !important;
  backdrop-filter: blur(calc(5px + 7px * var(--hdr-p, 0))) saturate(140%) !important;
  -webkit-backdrop-filter: blur(calc(5px + 7px * var(--hdr-p, 0))) saturate(140%) !important;
  border-bottom-color: rgba(200,162,78, calc(0.18 + 0.16 * var(--hdr-p, 0))) !important;
  padding: calc(18px - 4px * var(--hdr-p, 0)) var(--s-40) !important;
  /* no background transition: the scroll position IS the animation. A tiny
     blur transition just smooths between rAF samples. */
  transition: backdrop-filter .12s linear !important;
}
/* Keep the logo a constant size so it doesn't jump when crossing the threshold. */
.site-header.is-scrolled .site-logo, .site-header.is-solid .site-logo { height: auto !important; }
/* Respect reduced transparency: solid bar, no blur. */
@media (prefers-reduced-transparency: reduce) {
  .site-header {
    background-color: rgba(18,19,21,0.96) !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
}
/* end LAYER 24 */

/* =========================================================================
   LAYER 25 - keep the header glass the whole way (no solidify on scroll).
   Client prefers the frosted-glass bar maintained when sticky. One constant
   translucent dark tint + blur for every state. The tint is dark enough that
   the white nav stays legible even where the bar floats over light page
   sections (the only reason the solidify-on-scroll pattern existed).
   Supersedes the scroll-linked darkening in LAYER 24.
   ========================================================================= */
.site-header,
.site-header.is-scrolled,
.site-header.is-solid {
  background-color: rgba(18,19,21,0.48) !important;
  background-image: none !important;
  backdrop-filter: blur(13px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(13px) saturate(145%) !important;
  border-bottom: 1px solid rgba(200,162,78,0.30) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 6px 24px -16px rgba(0,0,0,0.55) !important;
  padding: 16px var(--s-40) !important;
  transition: none !important;
}
@media (prefers-reduced-transparency: reduce) {
  .site-header, .site-header.is-scrolled, .site-header.is-solid {
    background-color: rgba(18,19,21,0.93) !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
}
/* end LAYER 25 */

/* =========================================================================
   LAYER 26 - lighter, corner-focused hero scrim (v3.20.0)
   With real photography in place, the heavy full-column scrim from L23 was
   washing the image out. Pull it back so most of the photo shows full color,
   and concentrate the darkening in the lower-left where the copy sits. The
   headline/eyebrow/lede keep their tight shadows (L22/L23) for edge contrast.
   ========================================================================= */
.hero::before {
  background: linear-gradient(180deg, rgba(8,9,10,0.10) 0%, rgba(8,9,10,0.16) 45%, rgba(8,9,10,0.40) 72%, rgba(8,9,10,0.62) 100%) !important;
}
.hero::after {
  background: linear-gradient(100deg, rgba(8,9,10,0.78) 0%, rgba(8,9,10,0.55) 30%, rgba(8,9,10,0.32) 50%, rgba(8,9,10,0.10) 65%, transparent 80%) !important;
  opacity: 1 !important;
}
/* Edge contrast that reads on any photo without the gray halo (tight blur only) */
.hero h1 { text-shadow: 0 1px 2px rgba(0,0,0,0.6), 0 0 3px rgba(0,0,0,0.5) !important; }
.hero__lede { color:#fff !important; text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 2px rgba(0,0,0,0.7) !important; }
.hero .eyebrow-rule, .hero .eyebrow-rule--light, .hero .eyebrow { text-shadow: 0 1px 3px rgba(0,0,0,0.95), 0 0 3px rgba(0,0,0,0.85) !important; }
/* end LAYER 26 */

/* =========================================================================
   LAYER 27 - readable small text + larger press logos (v3.21.0)
   Several label-tier components were set very small (eyebrows 12px, stat
   sub-labels 10px, finish-selector readout/swatches 9-13px) and got lost.
   Bump the small tiers to a comfortable reading size; enlarge press logos.
   ========================================================================= */
/* Section + hero eyebrows */
.eyebrow, .eyebrow-rule, .eyebrow-rule--light, .eyebrow--center { font-size: 0.85rem !important; letter-spacing: 0.18em !important; }

/* Stat sub-labels ("ESTABLISHED IN WEBSTER GROVES, MISSOURI", etc.) */
.stat__label { font-size: 0.8rem !important; line-height: 1.5 !important; }

/* Hardware finish selector: readout + swatch labels */
.fs-read .rk { font-size: 0.8rem !important; }
.fs-read .rn { font-size: 2rem !important; }
.fs-read .rc { font-size: 0.9rem !important; }
.fs-read .rmeta { font-size: 0.88rem !important; }
.fs-read .ravail { font-size: 1.02rem !important; line-height: 1.5 !important; }
.fs-swatches .fs-slabel { font-size: 0.8rem !important; }
.fs-cn { font-size: 0.72rem !important; }

/* Common small captions across the site */
.proj-card__cat, .proj-card__loc, .h-scroll__cap, .wwd-compare__corner,
.sm-card__k, .sm-li__p { font-size: 0.78rem !important; }
/* Tile / kicker labels (were 0.6rem) */
.wwd-tile__ey, .product-tile__ey, .wwd-cta__ey, .hero__gp .k, .sm-card__k { font-size: 0.72rem !important; }

/* Press logos (home + about "Featured in"): larger */
.pub-slot { height: 112px !important; }
.pub-slot img { max-height: 78px !important; }
@media (max-width: 760px) { .pub-slot { height: 86px !important; } .pub-slot img { max-height: 56px !important; } }
/* end LAYER 27 */

/* Hero eyebrow: keep the long location label on one line at the bumped size */
.hero .eyebrow-rule, .hero .eyebrow { font-size: 0.8rem !important; letter-spacing: 0.14em !important; }

/* =========================================================================
   LAYER 28 - self-hosted fonts (no external requests)
   3.27.0: Archivo variable (display + body/UI, weight 100..900 with a
   62..125% width axis, normal + italic) replaces Bricolage Grotesque and
   Hanken Grotesk; IBM Plex Mono (labels) unchanged. .woff2 files in
   assets/fonts/ (latin + latin-ext subsets). The old Bricolage/Hanken
   @font-face blocks were removed with their files, not appended over:
   dead src URLs would 404 on every load.
   ========================================================================= */
/* archivo - latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(../fonts/archivo-normal-100-900-latin-ext.woff2) format('woff2');
  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;
}
/* archivo - latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(../fonts/archivo-normal-100-900-latin.woff2) format('woff2');
  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;
}
/* archivo italic - latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(../fonts/archivo-italic-100-900-latin-ext.woff2) format('woff2');
  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;
}
/* archivo italic - latin */
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(../fonts/archivo-italic-100-900-latin.woff2) format('woff2');
  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;
}
/* ibm-plex-mono - latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-4-latin-ext.woff2) format('woff2');
  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;
}
/* ibm-plex-mono - latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-5-latin.woff2) format('woff2');
  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;
}
/* ibm-plex-mono - latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-9-latin-ext.woff2) format('woff2');
  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;
}
/* ibm-plex-mono - latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-10-latin.woff2) format('woff2');
  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;
}

/* =========================================================================
   LAYER 29 - home flow refinements (v3.25.0)
   Bento: showroom callout becomes the full-width bottom panel (Trusted-lines
   tile removed in markup). Projects: one uniform 4/3 overlay grid. Plus a
   one-line modifier for the "work with us" heading.
   ========================================================================= */

/* --- Bento: full-width showroom banner --- */
.wwd-bento .t-showroom {
  grid-column: 1 / -1 !important;
  background: var(--c-brass) !important; border: none !important; color: #fff;
  flex-direction: row; align-items: center; justify-content: space-between;
  gap: 24px; aspect-ratio: auto !important; min-height: 0 !important;
  padding: 30px 34px;
}
.t-showroom__text { display: flex; flex-direction: column; gap: 2px; }
.wwd-bento .t-showroom h3 { color: #fff; margin: 2px 0 0; }
.wwd-bento .t-showroom p { color: rgba(255,255,255,.85); margin: 5px 0 0; max-width: 52ch; }
.t-showroom__cta { font-family: var(--f-display); font-weight: 600; font-size: 1.05rem; color: #fff; white-space: nowrap; flex-shrink: 0; }
.wwd-tile.t-showroom:hover { transform: translateY(-2px); }
@media (max-width: 560px) {
  .wwd-bento .t-showroom { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* --- Projects: uniform 4/3 overlay cards --- */
.projects-grid { display: grid !important; grid-template-columns: repeat(3,1fr) !important; gap: 18px !important; align-items: start !important; }
.proj-card { position: relative !important; display: block !important; aspect-ratio: 4/3 !important; height: auto !important; overflow: hidden !important; border-radius: 8px !important; }
.proj-card__img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; aspect-ratio: auto !important; border-radius: 0 !important; margin: 0 !important; background: var(--c-charcoal); }
.proj-card__img img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.proj-card::after { display: none !important; }
.proj-card__img::after { content: "" !important; position: absolute !important; inset: 0 !important; background: linear-gradient(180deg, rgba(10,11,13,0) 40%, rgba(10,11,13,.42) 68%, rgba(10,11,13,.82)) !important; opacity: 1 !important; z-index: 1; }
.proj-card__cat { position: absolute !important; left: 20px !important; top: 18px !important; right: auto !important; bottom: auto !important; margin: 0 !important; z-index: 3 !important; color: #fff !important; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.proj-card__brass-rule { position: absolute !important; left: 20px !important; bottom: 78px !important; top: auto !important; z-index: 3 !important; }
.proj-card__title { position: absolute !important; left: 20px !important; right: 20px !important; bottom: 44px !important; top: auto !important; margin: 0 !important; z-index: 3 !important; color: #fff !important; text-shadow: 0 1px 4px rgba(0,0,0,.55); }
.proj-card__loc { position: absolute !important; left: 20px !important; bottom: 20px !important; top: auto !important; right: auto !important; margin: 0 !important; z-index: 3 !important; color: rgba(255,255,255,.86) !important; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
@media (max-width: 860px) { .projects-grid { grid-template-columns: repeat(2,1fr) !important; } }
@media (max-width: 560px) { .projects-grid { grid-template-columns: 1fr !important; } }

/* --- "What it's like to work with us." on one line (desktop) --- */
.h2-wide { max-width: none !important; }
@media (min-width: 900px) { .h2-wide { white-space: nowrap; } }
/* end LAYER 29 */

/* Home projects preview: even grid, neutralize the Projects-page featured span */
.projects-grid--even { grid-auto-flow: row !important; }
.projects-grid--even .proj-card:nth-child(8n+1) { grid-column: span 1 !important; }

/* =========================================================================
   LAYER 30 - hero overlay + text legibility rework (v3.26.0)
   The L26 treatment carried its scrim on .hero::after, which still inherits
   mix-blend-mode:overlay from the base grain rule. A dark gradient in *overlay*
   blend mode does not simply darken the photo - it crushes the shadows and
   pushes contrast hard. That is the "harsh contrast/lighting" Nick flagged.
   It also stacked an angled 100deg corner scrim plus a vertical veil (::before),
   which produced a visible diagonal seam across the image.

   Fix: ONE clean, normally-composited, eased LEFT -> RIGHT scrim (dark gray ->
   fully transparent by the right edge) so the photo keeps true color and
   contrast everywhere there is no text. Retire the ::before veil/bloom entirely.
   Many gradient stops = no visible band or seam. Text legibility now comes from
   the scrim, so the shadows drop to a single tight contact shadow that is
   imperceptible unless you look for it (per CSS-Tricks / NN-g guidance).
   The scrim is a web approximation of a printed gradient scrim; because it is a
   plain alpha gradient (not a backdrop-filter) it also holds up under
   prefers-reduced-transparency with no separate fallback needed.
   ========================================================================= */
.hero::after {
  background: linear-gradient(
    90deg,
    rgba(20,21,24,0.82) 0%,
    rgba(20,21,24,0.78) 10%,
    rgba(20,21,24,0.70) 20%,
    rgba(20,21,24,0.58) 30%,
    rgba(20,21,24,0.44) 42%,
    rgba(20,21,24,0.28) 54%,
    rgba(20,21,24,0.13) 66%,
    rgba(20,21,24,0.04) 78%,
    transparent 86%
  ) !important;
  mix-blend-mode: normal !important;   /* stop the overlay-blend contrast crush */
  opacity: 1 !important;
}
/* Retire the vertical veil + warm bloom so the photo is untouched top to bottom */
.hero::before { background: none !important; }

/* Legibility lives in the scrim now; shadows are a whisper for edge definition */
.hero h1 { text-shadow: 0 1px 2px rgba(0,0,0,0.28) !important; }
.hero__lede { color:#fff !important; text-shadow: 0 1px 2px rgba(0,0,0,0.42) !important; }
.hero .eyebrow-rule, .hero .eyebrow-rule--light, .hero .eyebrow { text-shadow: 0 1px 2px rgba(0,0,0,0.45) !important; }
/* end LAYER 30 */

/* =========================================================================
   LAYER 31 - navy accent system + Archivo type (v3.27.0)
   The 3.26 design, keeping its stone grounds and layered composition,
   adopts two pieces of the Claude Design system:
   1. TYPE: Archivo variable everywhere Bricolage/Hanken ran (the mono
      spec voice stays IBM Plex Mono). Display sizes use the width axis
      (font-stretch 110%) for signage weight without a second family.
   2. COLOR: Webster Navy #0E418F is promoted from logo-only to the
      working accent. Everything that ran in dark bronze #3E342A (links,
      buttons, eyebrows, accents) now runs navy; inks shift navy-cast;
      dark sections warm from near-black to the navy room #122B57.
      Real brass #C8A24E keeps its role as the on-dark accent. The stone
      field, white panels, and surface tones are untouched: this is an
      accent transfusion, not a repaint.
   Token-level override layer per the append-only rule: every value the
   layers below read through var() resolves to these.
   ========================================================================= */
:root {
	/* type */
	--f-display: 'Archivo', system-ui, sans-serif;
	--f-body: 'Archivo', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	--f-ui: 'Archivo', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	--vf-disp: 'Archivo', system-ui, sans-serif;
	--vf-ui: 'Archivo', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

	/* navy accent system */
	--c-webster-blue: #0E418F;
	--c-brass: #0E418F;         /* the working accent: bronze -> navy   */
	--c-bronze: #0A306C;        /* hover / pressed accent               */
	--c-black: #202A3C;         /* ink, navy-cast                       */
	--c-charcoal: #26303F;
	--c-warm-gray: #59647A;     /* secondary text, slate                */
	--c-rule: rgba(31,50,90,0.12);
	--c-rule-strong: rgba(31,50,90,0.18);

	/* the v2 parallel palette reads the same system */
	--v-brass: #0E418F;
	--v-brass-deep: #0A306C;
	--v-brass-glow: #C9A85C;    /* brass stays brass on dark            */
	--v-ink: #202A3C;
	--v-txt: #26303F;
	--v-txt-dim: #59647A;
	--v-deep: #122B57;          /* dark sections become navy rooms      */
	--v-brd: rgba(31,50,90,0.12);
	--v-brd-soft: rgba(31,50,90,0.07);
}
/* Archivo's width axis gives display sizes their signage weight */
h1, h2, h3, .hero h1 { font-stretch: 110%; }
/* one V2-era rule hardcoded the body family past the tokens; re-route it */
body, .lede, .hero__lede, p { font-family: var(--f-body); }
/* end LAYER 31 */

/* =========================================================================
   LAYER 32 - motion refinement (v3.28.0)
   Emil Kowalski review-animations pass over the 3.26 motion surface
   (.claude/skills/, MIT). Findings fixed, in order of severity:
   1. The .reveal--stagger nth-child transition-delay ladder never staggered
      the reveal (children are plain; the group fades as one block) but it
      DID delay children's hover transitions by up to 400ms. Delays zeroed;
      the intended stagger is provided properly via a one-shot animation,
      which cannot collide with the cards' own hover transitions.
   2. Hover durations: --v-base 340ms exceeded the 300ms UI ceiling across
      ~40 call sites. Token override to 240ms fixes them all at once.
   3. transition: all x4 (unbounded, off-GPU risk) -> explicit properties.
   4. Draw effects animated width/height (layout). Re-expressed as
      transform scaleX/scaleY (compositor) at identical geometry.
   5. The compare scrubber positioned its divider and handle with
      left: var(--pos) - layout animation on the drag path, driven by an
      inherited variable on the container. Re-anchored to left: 50% +
      translate3d(var(--dx)); app.js writes per element (proven in-browser
      on the 4.x line before the design pivot).
   6. Header transitioned padding and top while scroll-driving them.
      Transition list narrowed to paint-only properties.
   ========================================================================= */
:root {
	--v-base: 240ms;   /* was 340ms: interface feedback stays under 300ms */
}
/* - 1 · stagger: stop poisoning hover, then stagger for real - */
.reveal--stagger > * { transition-delay: 0s !important; }
.reveal--stagger:not(.is-visible) > * { opacity: 0; }
.reveal--stagger.is-visible > * {
	animation: wwdStagRise 0.64s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}
.reveal--stagger.is-visible > *:nth-child(2) { animation-delay: 0.08s; }
.reveal--stagger.is-visible > *:nth-child(3) { animation-delay: 0.16s; }
.reveal--stagger.is-visible > *:nth-child(4) { animation-delay: 0.24s; }
.reveal--stagger.is-visible > *:nth-child(5) { animation-delay: 0.32s; }
.reveal--stagger.is-visible > *:nth-child(6) { animation-delay: 0.40s; }
.reveal--stagger.is-visible > *:nth-child(n+7) { animation-delay: 0.44s; }
@keyframes wwdStagRise { from { opacity: 0; transform: translateY(14px); } }
/* - 3 · transition: all -> explicit - */
.brand-crosslink { transition: transform var(--v-base) var(--v-ease), box-shadow var(--v-base) var(--v-ease), border-color var(--v-base) var(--v-ease); }
.logo-wall__item { transition: background var(--v-base) var(--v-ease), color var(--v-base) var(--v-ease), border-color var(--v-base) var(--v-ease); }
.logo-wall__item img { transition: filter var(--v-base) var(--v-ease), opacity var(--v-base) var(--v-ease), transform var(--v-base) var(--v-ease); }
.gpanel .arrow { transition: transform var(--v-base) var(--v-ease), background var(--v-base) var(--v-ease), color var(--v-base) var(--v-ease), opacity var(--v-base) var(--v-ease); }
/* - 4 · draws move to the compositor at identical geometry - */
.feature-card::before {
	height: 100%;
	transform: scaleY(0); transform-origin: top center;
	transition: transform var(--v-base) var(--v-ease-emph);
}
.feature-card:hover::before { height: 100%; transform: scaleY(1); }
.proj-card__brass-rule {
	width: 44px;
	transform: scaleX(0); transform-origin: left center;
	transition: transform var(--v-base) var(--v-ease-emph);
}
.proj-card:hover .proj-card__brass-rule { width: 44px; transform: scaleX(1); }
/* - 5 · compare scrubber: compositor-only, per-element writes from app.js - */
.wwd-compare__div { left: 50%; transform: translate3d(var(--dx, 0px), 0, 0) translateX(-1px); }
.wwd-compare__handle { left: 50%; transform: translate3d(var(--dx, 0px), 0, 0) translate(-50%, -50%); }
/* - 6 · header: paint-only transitions (scroll drives the rest per frame) - */
.site-header { transition: background-color 240ms ease, border-color 240ms ease, box-shadow 240ms ease !important; }
/* - reduced motion for everything this layer added - */
@media (prefers-reduced-motion: reduce) {
	.reveal--stagger > * { animation: none !important; opacity: 1 !important; }
	.feature-card::before, .proj-card__brass-rule { transition: none !important; }
}
/* end LAYER 32 */

/* =========================================================================
   LAYER 33 - hardware brand heroes + electronic locks (v3.29.0)
   The hardware page redesign Nick commissioned on the 4.x line, re-expressed
   in v3 tokens: four white panel blocks, one per brand, each carrying a
   transparent product cutout floating on a navy-tinted drop shadow
   (drop-shadow hugs the silhouette; box-shadow would draw a slab), plus a
   full-width navy-room band for electronic locks - deliberately a different
   object than the brand cards. Product images are drawn-SVG placeholders
   until Nick's transparent cutouts arrive (swap src only; CSS supplies the
   shadow, so upload cutouts without baked-in shadows).
   ========================================================================= */
.hw-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.hw-hero {
	display: flex; flex-direction: column;
	background: var(--v-panel);
	border: 1px solid var(--v-brd-soft);
	border-radius: 8px;
	padding: 26px 30px;
	text-decoration: none;
	box-shadow: var(--v-e1);
	transition: transform var(--v-base) var(--v-ease),
	            box-shadow var(--v-base) var(--v-ease),
	            border-color var(--v-base) var(--v-ease);
}
.hw-hero:hover { transform: translateY(-4px); box-shadow: var(--v-e2); border-color: rgba(14,65,143,0.30); }
.hw-hero:active { transform: translateY(-2px) scale(0.995); }
.hw-hero__media { display: grid; place-items: center; min-height: 240px; padding: 14px 0 22px; }
.hw-hero__product {
	max-height: 200px; max-width: 76%;
	filter: drop-shadow(0 20px 30px rgba(16,35,74,0.22)) drop-shadow(0 4px 9px rgba(16,35,74,0.12));
	transition: transform var(--v-base) var(--v-ease);
}
.hw-hero:hover .hw-hero__product { transform: translateY(-4px) scale(1.02); }
.hw-hero__body { border-top: 1px solid var(--v-brd-soft); padding-top: 18px; }
.hw-hero__cat {
	font-family: var(--vf-mono); font-size: 11px; font-weight: 500;
	letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--v-txt-dim); margin: 0 0 12px;
}
.hw-hero__logo { margin: 0 0 14px; }
.hw-hero__logo img { max-height: 48px; max-width: 240px; width: auto; }
.hw-hero__desc { color: var(--v-txt-dim); font-size: 15px; line-height: 1.55; margin: 0 0 16px; max-width: 46ch; }
.hw-hero__cta {
	font-family: var(--f-ui); font-size: 13px; font-weight: 600;
	letter-spacing: 0.05em; color: var(--c-brass);
	border-bottom: 1px solid rgba(14,65,143,0.35); padding-bottom: 2px;
	align-self: flex-start; display: inline-block;
	transition: border-color var(--v-base) var(--v-ease);
}
.hw-hero:hover .hw-hero__cta { border-color: var(--c-brass); }
/* electronic locks: the one dark block in the set - a navy room */
.hw-elock {
	grid-column: 1 / -1;
	display: grid; grid-template-columns: 1.5fr 0.5fr;
	gap: 32px; align-items: center;
	background: var(--v-deep);
	border: 1px solid rgba(201,168,92,0.35);
	border-radius: 8px;
	padding: 34px 38px;
	text-decoration: none;
	box-shadow: var(--v-e1);
	transition: transform var(--v-base) var(--v-ease),
	            box-shadow var(--v-base) var(--v-ease),
	            border-color var(--v-base) var(--v-ease);
}
.hw-elock:hover { transform: translateY(-4px); box-shadow: var(--v-e2); border-color: var(--v-brass-glow); }
.hw-elock:active { transform: translateY(-2px) scale(0.995); }
.hw-elock__ey {
	display: inline-flex; align-items: center; gap: 14px;
	font-family: var(--vf-mono); font-size: 11px; font-weight: 500;
	letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--v-on-dark-dim); margin: 0 0 12px;
}
.hw-elock__ey::before { content: ""; width: 30px; height: 1px; background: var(--v-brass-glow); }
.hw-elock h3 { color: var(--v-on-dark); margin: 0 0 10px; }
.hw-elock__copy p:not(.hw-elock__ey) { color: var(--v-on-dark-dim); font-size: 15.5px; line-height: 1.6; margin: 0 0 16px; max-width: 56ch; }
.hw-elock__cta {
	font-family: var(--f-ui); font-size: 13px; font-weight: 600;
	letter-spacing: 0.05em; color: var(--v-on-dark);
	border-bottom: 1px solid rgba(201,168,92,0.42); padding-bottom: 2px;
	display: inline-block;
	transition: border-color var(--v-base) var(--v-ease);
}
.hw-elock:hover .hw-elock__cta { border-color: var(--v-brass-glow); }
.hw-elock__media { display: grid; place-items: center; }
.hw-elock__product {
	max-height: 170px; max-width: 90%;
	filter: drop-shadow(0 18px 26px rgba(7,16,34,0.55)); /* navy-cast, never black */
	transition: transform var(--v-base) var(--v-ease);
}
.hw-elock:hover .hw-elock__product { transform: translateY(-4px) scale(1.02); }
@media (max-width: 1100px) {
	.hw-hero-grid { grid-template-columns: 1fr; }
	.hw-elock { grid-template-columns: 1fr; }
	.hw-elock__media { order: -1; }
	.hw-elock__product { max-height: 120px; }
}
@media (hover: none), (pointer: coarse) {
	.hw-hero:hover, .hw-elock:hover { transform: none; }
	.hw-hero:hover .hw-hero__product, .hw-elock:hover .hw-elock__product { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.hw-hero, .hw-elock, .hw-hero__product, .hw-elock__product, .hw-hero__cta, .hw-elock__cta { transition: none !important; }
}
/* end LAYER 33 */

/* =========================================================================
   LAYER 34 - editor pattern coverage (v3.30.0)
   The block patterns in patterns/ (brand-page, project-page) referenced
   classes that never had rules - anything an editor inserted from them
   rendered unstyled. Minimal coverage, v3 tokens.
   ========================================================================= */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gallery-item--span-2 { grid-column: span 2; }
.proj-meta {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 20px; padding: 22px 0; margin: 26px 0;
	border-top: 1px solid var(--c-rule); border-bottom: 1px solid var(--c-rule);
}
.proj-meta__label {
	font-family: var(--vf-mono); font-size: 11px; font-weight: 500;
	letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--v-txt-dim); display: block; margin-bottom: 6px;
}
.proj-meta__item { min-width: 0; }
.proj-meta__value { font-weight: 600; color: var(--v-txt); }
.logo-slot__name { font-family: var(--vf-disp); font-weight: 600; color: var(--v-txt-dim); }
@media (max-width: 760px) {
	.gallery-grid { grid-template-columns: 1fr; }
	.gallery-item--span-2 { grid-column: auto; }
}
/* end LAYER 34 */

/* =========================================================================
   LAYER 35 - staging review fixes (v3.31.0, Nick's punch list 2026-07-22)
   ========================================================================= */
/* 1 · four-card grids: never 3+1. Any feature grid with exactly four
   children lays out 2x2 (the !important outranks inline repeat(3) styles;
   the :not guard means grids of 3, 5, or 6 are untouched). */
.feature-grid:has(> :nth-child(4)):not(:has(> :nth-child(5))) {
	grid-template-columns: repeat(2, 1fr) !important;
}
@media (max-width: 760px) {
	.feature-grid:has(> :nth-child(4)):not(:has(> :nth-child(5))) {
		grid-template-columns: 1fr !important;
	}
}
/* 2 · the light-sweep swipe reads as a glitch on photos; retired. The
   reveal (rise/fade) still runs; only the moving shine is gone. */
.light-sweep::after { content: none !important; animation: none !important; }
/* 3 · project card legibility: scrim starts higher and lands darker,
   title carries more weight, captions brighten. */
.proj-card::after { background: linear-gradient(180deg, transparent 30%, rgba(10,14,22,0.82)) !important; }
.proj-card__title { font-weight: 600; font-size: 22px; text-shadow: 0 1px 2px rgba(0,0,0,0.35); }
.proj-card__cat { color: rgba(255,255,255,0.92); }
.proj-card__loc { color: rgba(255,255,255,0.85); }
/* 4 · historic section media: full-height presence instead of a thumbnail */
.two-col__media--tall { min-height: 480px; }
.two-col__media--tall img { width: 100%; height: 100%; min-height: 480px; object-fit: cover; border-radius: 8px; }
@media (max-width: 900px) { .two-col__media--tall, .two-col__media--tall img { min-height: 320px; } }
/* 5 · hardware blocks: constrain the composition so wide viewports do not
   stretch the cards; center within the section */
.hw-hero-grid { max-width: 1240px; margin-left: auto; margin-right: auto; }
.hw-hero__media { min-height: 200px; }
.hw-hero__product { max-height: 180px; }
/* end LAYER 35 */

/* =========================================================================
   LAYER 36 - responsive sweep fixes (v3.32.1)
   Measured on the local harness at 768x1024 and 375x812 against home,
   hardware, and windows. Everything stacks correctly; two real findings:
   ========================================================================= */
/* 1 · The hero's full-bleed negative margin (-7.5px each side) makes the
   document 15px wider than the viewport. body{overflow-x:hidden} papers
   over it on desktop, but iOS Safari can still rubber-band sideways.
   clip on the root closes that door without creating a scroll container. */
html, body { overflow-x: clip; }
/* 2 · The header logo rides max-width:340px!important from an older layer,
   which renders ~100px tall on a phone - a third of the screen gone to
   chrome. Scale it with the viewport. */
@media (max-width: 1024px) {
	.site-logo__img { max-width: 220px !important; height: auto; }
}
@media (max-width: 600px) {
	.site-logo__img { max-width: 175px !important; }
}
/* end LAYER 36 */

/* =========================================================================
   LAYER 37 - hardware blocks go photographic (v3.33.0)
   The drawn-SVG placeholders are replaced with real Media Library photos,
   so the media treatment changes from floating-cutout (drop-shadow
   silhouette) to a framed photograph: full-bleed cover crop, 8px radius,
   gentle hover scale inside a clipped frame. Logos step up again - 48px
   still starved the wide wordmarks at this card size.
   ========================================================================= */
.hw-hero__media {
	display: block; min-height: 0; padding: 0 0 18px;
}
.hw-hero__media { border-radius: 8px; }
.hw-hero__product {
	width: 100%; height: 260px; max-height: none; max-width: none;
	object-fit: cover; border-radius: 8px;
	filter: none;
	display: block;
}
.hw-hero { overflow: hidden; }
.hw-hero:hover .hw-hero__product { transform: scale(1.02); }
.hw-hero__logo img { max-height: 64px; max-width: 300px; width: auto; }
.hw-elock__product {
	width: 100%; height: 220px; max-height: none; max-width: none;
	object-fit: cover; border-radius: 8px;
	filter: none; display: block;
}
@media (max-width: 1100px) {
	.hw-hero__product { height: 220px; }
	.hw-elock__product { height: 180px; max-height: none; }
}
/* the media frame clips the hover scale so it never bleeds the card */
.hw-hero__media { overflow: hidden; }
/* end LAYER 37 */

/* =========================================================================
   LAYER 38 - hardware cutouts arrive (v3.34.0)
   Nick supplied the five transparent PNGs, so the blocks return to the
   floating-product design L37 had parked: centered cutout on the panel,
   navy drop shadow hugging the silhouette. L37's photo framing (cover
   crop, radius) is reverted for these images; the 64px logos stay.
   ========================================================================= */
.hw-hero__media {
	display: grid; place-items: center;
	min-height: 240px; padding: 14px 0 22px;
	border-radius: 0; overflow: visible;
}
.hw-hero__product {
	width: auto; height: auto;
	max-height: 210px; max-width: 78%;
	object-fit: contain; border-radius: 0;
	filter: drop-shadow(0 20px 30px rgba(16,35,74,0.22)) drop-shadow(0 4px 9px rgba(16,35,74,0.12));
}
.hw-hero:hover .hw-hero__product { transform: translateY(-4px) scale(1.02); }
.hw-elock__product {
	width: auto; height: auto;
	max-height: 180px; max-width: 90%;
	object-fit: contain; border-radius: 0;
	filter: drop-shadow(0 18px 26px rgba(7,16,34,0.55));
}
@media (max-width: 1100px) {
	.hw-hero__product { height: auto; max-height: 180px; }
	.hw-elock__product { height: auto; max-height: 130px; }
}
/* end LAYER 38 */

/* =========================================================================
   LAYER 39 - two-tile install reels (v3.35.0)
   Brand pages trimmed from four install tiles to two (Nick, 2026-07-23:
   halves the photography lift). Two tiles read better as a landscape pair
   than as portrait slivers, and the old bronze-brown fallback ground joins
   the navy system.
   ========================================================================= */
.install-reel { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.install-tile { aspect-ratio: 3 / 2; background-color: var(--v-deep); }
@media (max-width: 520px) {
	.install-reel { grid-template-columns: 1fr; }
	.install-tile { aspect-ratio: 16 / 10; }
}
/* end LAYER 39 */

/* =========================================================================
   LAYER 40 - staging review round 3 (v3.36.0)
   ========================================================================= */
/* 1 · wide-media two-cols: doors "Chosen together", windows + historic
   review sections. Replaces the v2-era tight-media treatment: the media
   column now takes the larger share and the image runs tall. */
.two-col--media-wide { grid-template-columns: 0.9fr 1.1fr; gap: 4rem; }
.two-col--media-wide .two-col__media--tall,
.two-col--media-wide .two-col__media--tall img { min-height: 540px; }
.two-col--media-wide .two-col__media--tall img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
@media (max-width: 900px) {
	.two-col--media-wide { grid-template-columns: 1fr; gap: 2rem; }
	.two-col--media-wide .two-col__media--tall,
	.two-col--media-wide .two-col__media--tall img { min-height: 340px; }
}
/* 2 · hardware: everything bigger. Products from 210 -> 300, keypad from
   180 -> 260, logos from 64 -> 84px - readable as signage, per Nick. */
.hw-hero__media { min-height: 320px; }
.hw-hero__product { max-height: 300px; max-width: 88%; }
.hw-elock__product { max-height: 260px; }
.hw-hero__logo img { max-height: 84px; max-width: 340px; }
@media (max-width: 1100px) {
	.hw-hero__product { max-height: 230px; }
	.hw-elock__product { max-height: 170px; }
	.hw-hero__logo img { max-height: 64px; }
}
/* 3 · projects gallery: captions removed from markup; pure image grid */
/* 4 · Google Maps embed on the contact card */
.map-embed {
	margin-top: 1.125rem; border-radius: 8px; overflow: hidden;
	border: 1px solid var(--c-rule); aspect-ratio: 4 / 3;
}
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
/* end LAYER 40 */

/* =========================================================================
   LAYER 41 - staging review round 4 (v3.37.0)
   ========================================================================= */
/* 1 · hardware logos: the wordmarks are wide, so the 340px width cap (not
   the height cap) was what they hit - they rendered short. Force width to
   the panel column (this also upscales small source files, which max-width
   alone cannot) and letterbox within a 100px band, pinned left. */
.hw-hero__logo img {
	width: 100%; max-width: 100%; height: 100px; max-height: 100px;
	object-fit: contain; object-position: left center;
}
/* 2 · cutouts pop harder: deeper, closer-anchored navy shadow pair */
.hw-hero__product {
	filter: drop-shadow(0 28px 40px rgba(16,35,74,0.38)) drop-shadow(0 8px 14px rgba(16,35,74,0.24));
}
/* 3 · electronic lock sits on the navy band, so a navy shadow vanished
   into the ground. Warm brass-cast halo (echoes the band's brass hairline
   border) over a deep near-black anchor lifts it off the panel. */
.hw-elock__product {
	filter: drop-shadow(0 0 34px rgba(201,168,92,0.30)) drop-shadow(0 22px 32px rgba(3,8,20,0.70));
}
@media (max-width: 1100px) {
	.hw-hero__logo img { height: 72px; max-height: 72px; }
}
/* 4 · brand install tiles: caption markup removed from all 38 tiles
   (seed-brands); no CSS change needed - tiles hold their 3:2 frame. */
/* 5 · Contact Form 7: the static mock on /contact/ is now the CF7 shortcode.
   The CF7 Form-tab template reuses .form-grid/.field, so the existing field
   styling applies through CF7's control-wrap spans (descendant selectors).
   Below: only what CF7 adds - validation, response banner, spinner. */
.wpcf7-form .form-grid { margin: 0; }
.wpcf7-form-control-wrap { display: block; }
.field .wpcf7-form-control[aria-invalid="true"] { border-color: #A23B2E; }
.wpcf7-not-valid-tip {
	display: block; margin-top: 7px;
	font-family: var(--vf-mono); font-size: 11px;
	letter-spacing: 0.04em; color: #A23B2E;
}
.wpcf7 .wpcf7-response-output {
	margin: 1.25rem 0 0; padding: 14px 18px;
	border: 1px solid var(--v-brd); border-radius: 4px;
	background: var(--v-panel);
	font-size: 14.5px; color: var(--v-ink);
}
.wpcf7 form.sent .wpcf7-response-output { border-color: rgba(14,65,143,0.45); color: var(--v-brass); }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output { border-color: rgba(162,59,46,0.5); color: #A23B2E; }
.wpcf7-spinner { margin: 0 0 0 12px; }
.field input[type="file"] { padding: 11px 15px; font-size: 14px; cursor: pointer; }
/* end LAYER 41 */