/*
Theme Name:   QuantumLink Solutions
Theme URI:    https://quantumlinksolutions.com
Author:       QuantumLink Solutions LLC
Description:  Commercial construction, technology, IT and infrastructure theme for New York City and Long Island. Dark structural palette with a single gold accent, self-hosted type, and one deduplicated stylesheet.
Version:      11.4.0
Requires at least: 6.2
Tested up to: 6.7
Requires PHP: 7.4
License:      Proprietary
Text Domain:  quantumlink
*/

/* ==========================================================================
   QuantumLink Solutions v11

   Read this before editing.

   1. ONE DEFINITION PER COMPONENT. v10 defined .why-card, the hero and the
      responsive rules two and three times each, and every change had to be
      made in several places. If you need to change a component, change it
      where it is defined. Do not append an override block to the bottom.
   2. ONE ACCENT. --gold is the only accent colour on the site. --ok is
      semantic (form success) and is never decorative.
   3. ONE RADIUS. --r, everywhere. No pills, no circles, no 14px cards.
   4. ONE THEME. The site is dark by brand. Sections tint within the dark
      family (--void / --base / --surface); nothing inverts to light.
   5. Media queries live WITH their component, not in a trailing block.
   ========================================================================== */

/* ── FONTS (self-hosted: no external origin, no stylesheet imports) ─────── */

@font-face {
	font-family: 'Big Shoulders Display';
	src: url('fonts/big-shoulders-display-var.woff2') format('woff2-variations');
	font-weight: 700 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Geist';
	src: url('fonts/geist-var.woff2') format('woff2-variations');
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Geist Mono';
	src: url('fonts/geist-mono-var.woff2') format('woff2-variations');
	font-weight: 400 500;
	font-style: normal;
	font-display: swap;
}

/* ── TOKENS ─────────────────────────────────────────────────────────────── */

:root {
	/* Surfaces, darkest to lightest. Never pure black. */
	--void:    #0E0E0C;
	--base:    #121211;
	--surface: #171715;
	--raised:  #1E1E1B;
	--line:    #2C2C28;
	--line-lt: #3A3A35;

	/* The single accent. 8.04:1 on --void, both directions. */
	--gold:    #C9A84C;
	--gold-lt: #E3CD8B;
	--gold-dk: #8C7430;

	/* Semantic only. Never decorative, never a CTA, never below 16px.
	   5.61:1 on --void. The v10 green was 3.74:1 and failed AA. */
	--ok:   #3AA15A;
	--warn: #D9534F;

	/* Text. All measured against --void. */
	--txt:   #F2F0EA;   /* 17.6:1 */
	--muted: #B0AEA6;   /*  8.2:1 */
	--dim:   #8E8C86;   /*  5.4:1, never below 12px */

	/* One radius for the whole site. */
	--r: 2px;

	/* Rhythm */
	--cw:  1320px;
	--gut: clamp(1.25rem, 4vw, 3.5rem);
	--sp:  clamp(4.5rem, 9vw, 8rem);

	/* Type */
	--f-display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
	--f-body:    'Geist', system-ui, -apple-system, sans-serif;
	--f-mono:    'Geist Mono', ui-monospace, 'SF Mono', monospace;

	/* Motion. MOTION_INTENSITY 5: fluid CSS, no choreography. */
	--ease: cubic-bezier(.16, 1, .3, 1);
	--dur:  .55s;

	/* Layer scale. Documented so nobody invents a z-index. */
	--z-sticky: 60;
	--z-header: 70;
	--z-nav:    80;
	--z-toast:  90;
}

/* ── RESET ──────────────────────────────────────────────────────────────── */

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

html {
	font-size: 16px;
	scroll-behavior: smooth;
	/* Anchor targets clear the fixed header instead of hiding under it. */
	scroll-padding-top: 88px;
	-webkit-text-size-adjust: 100%;
}

body {
	font-family: var(--f-body);
	font-size: 1rem;
	line-height: 1.65;
	font-weight: 400;
	background: var(--void);
	color: var(--muted);
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

/* Visible focus everywhere. Gold reads 8:1 on every dark surface we use. */
:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 3px;
	border-radius: var(--r);
}
/* On gold fills, gold-on-gold would be invisible. */
.btn-gold:focus-visible,
.f-submit:focus-visible { outline-color: var(--txt); }

::selection { background: var(--gold); color: var(--void); }

.ql-skip-nav {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: .85rem 1.4rem;
	background: var(--gold);
	color: var(--void);
	font-family: var(--f-mono);
	font-size: .75rem;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.ql-skip-nav:focus { left: 0; }

.ql-sr {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.ql-i { fill: currentColor; flex: none; }

/* ── LAYOUT ─────────────────────────────────────────────────────────────── */

.wrap {
	width: 100%;
	max-width: var(--cw);
	margin-inline: auto;
	padding-inline: var(--gut);
}

.sec { padding-block: var(--sp); }
.sec--void    { background: var(--void); }
.sec--base    { background: var(--base); }
.sec--surface { background: var(--surface); }

/* ── TYPE SCALE ─────────────────────────────────────────────────────────── */

.d1, .d2, .d3 {
	font-family: var(--f-display);
	font-weight: 800;
	line-height: .92;
	letter-spacing: -.01em;
	color: var(--txt);
	text-transform: uppercase;
}
.d1 { font-size: clamp(2.75rem, 6.5vw, 5.25rem); }
.d2 { font-size: clamp(2.25rem, 4.6vw, 3.75rem); }
.d3 { font-size: clamp(1.6rem, 2.6vw, 2.25rem); }

.lede {
	font-size: clamp(1rem, 1.35vw, 1.125rem);
	line-height: 1.7;
	color: var(--muted);
	max-width: 60ch;
}

.body { font-size: 1rem; line-height: 1.75; color: var(--muted); max-width: 65ch; }

/* The eyebrow. Rationed: three on the front page, three per inner page.
   Do not add one to every section. */
.eyebrow {
	display: block;
	font-family: var(--f-mono);
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 1.25rem;
}

.sec-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); max-width: 46ch; }
.sec-head .body { margin-top: 1.25rem; }

.num {
	font-family: var(--f-display);
	font-weight: 800;
	line-height: 1;
	color: var(--gold);
	font-variant-numeric: tabular-nums;
}

/* ── BUTTONS ────────────────────────────────────────────────────────────── */

.btn-gold, .btn-ghost, .f-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	/* No max-width: CTA labels must never wrap. */
	white-space: nowrap;
	padding: .95rem 1.75rem;
	border-radius: var(--r);
	font-family: var(--f-mono);
	font-size: .8125rem;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	transition: background .25s var(--ease), border-color .25s var(--ease),
	            color .25s var(--ease), transform .12s ease;
}

.btn-gold, .f-submit {
	background: var(--gold);
	color: var(--void);   /* 8.04:1 */
	border: 1px solid var(--gold);
}
.btn-gold:hover, .f-submit:hover:not(:disabled) { background: var(--gold-lt); border-color: var(--gold-lt); }
.btn-gold:active, .f-submit:active:not(:disabled) { transform: translateY(1px); }

.btn-ghost {
	background: transparent;
	color: var(--txt);
	border: 1px solid var(--line-lt);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn-ghost:active { transform: translateY(1px); }

.f-submit:disabled { opacity: .6; cursor: not-allowed; }

/* Text link with a moving underline. */
.link {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	color: var(--gold);
	font-family: var(--f-mono);
	font-size: .8125rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding-bottom: 2px;
	border-bottom: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
	transition: border-color .25s var(--ease), gap .25s var(--ease);
}
.link:hover { border-color: var(--gold); gap: .75rem; }

/* ── SCROLL PROGRESS ────────────────────────────────────────────────────── */
/* Pure CSS scroll-driven. No scroll listener anywhere in this theme.
   Hidden entirely where scroll timelines are unsupported, so it can never
   sit frozen at zero width. */

#prog { display: none; }

@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
		#prog {
			display: block;
			position: fixed;
			inset: 0 auto auto 0;
			z-index: var(--z-header);
			height: 2px;
			width: 100%;
			transform-origin: 0 50%;
			background: var(--gold);
			animation: prog-grow linear both;
			animation-timeline: scroll(root block);
		}
		@keyframes prog-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
	}
}

/* ── HEADER ─────────────────────────────────────────────────────────────── */

/* A sentinel spanning the first 120px of the document. One
   IntersectionObserver watches it: while any part is still on screen the
   page is "at the top", and once it scrolls away the header goes sticky and
   the back-to-top button appears. Its HEIGHT is the threshold, so no
   rootMargin is involved. An earlier version used a 1px sentinel plus a
   negative rootMargin, which read as not-intersecting at scroll 0 and showed
   the back-to-top button over the hero on load. */
#top-sentinel {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 120px;
	pointer-events: none;
}

/* The header always carries its own surface rather than starting transparent
   over the hero. Every hero on this site is a photograph, the nav overlaps
   the image side at wide viewports and on stacked mobile, and the client can
   swap in a brighter photo at any time. A translucent bar is legible in all
   of those cases; a transparent one is a contrast bug waiting to happen.
   Scrolling changes the height, not the fill. */
#hdr {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: var(--z-header);
	height: 72px;                     /* cap is 80px */
	display: flex;
	align-items: center;
	background: color-mix(in srgb, var(--void) 90%, transparent);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-bottom: 1px solid var(--line);
	transition: height .3s var(--ease), background .3s var(--ease);
}
#hdr.is-stuck {
	height: 64px;
	background: color-mix(in srgb, var(--void) 96%, transparent);
}
@supports not (backdrop-filter: blur(1px)) {
	#hdr, #hdr.is-stuck { background: var(--void); }
}

/* When a logged-in user is viewing the site, WordPress puts its own fixed
   admin bar at the top of the viewport. A fixed header at top:0 sits behind
   it and loses its first 32px. WordPress itself switches the bar to
   position:absolute below 783px, so the offset only applies above that. */
body.admin-bar #hdr { top: 32px; }
body.admin-bar #mob-nav { top: 32px; }
/* Keep anchor targets and the full-height hero honest about the lost 32px. */
body.admin-bar { scroll-padding-top: 120px; }
body.admin-bar .hero,
body.admin-bar .hero-media { min-height: calc(100dvh - 32px); }

@media screen and (max-width: 782px) {
	body.admin-bar #hdr { top: 46px; }
	body.admin-bar #mob-nav { top: 46px; }
	body.admin-bar { scroll-padding-top: 134px; }
}

.hdr-in {
	width: 100%;
	max-width: var(--cw);
	margin-inline: auto;
	padding-inline: var(--gut);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

.hdr-logo img {
	height: 34px;
	width: auto;
	transition: opacity .25s var(--ease);
}
.hdr-logo:hover img { opacity: .82; }

.hdr-nav { display: flex; align-items: center; gap: .15rem; }

.nav-link {
	position: relative;
	padding: .5rem .8rem;
	font-family: var(--f-mono);
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--muted);
	border-radius: var(--r);
	transition: color .2s var(--ease);
}
.nav-link::after {
	content: '';
	position: absolute;
	left: .8rem; right: .8rem; bottom: .25rem;
	height: 1px;
	background: var(--gold);
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform .3s var(--ease);
}
.nav-link:hover, .nav-link.is-active { color: var(--txt); }
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); }

.hdr-end { display: flex; align-items: center; gap: .75rem; }

.hdr-cta {
	padding: .65rem 1.25rem;
	border: 1px solid var(--gold);
	border-radius: var(--r);
	background: var(--gold);
	color: var(--void);
	font-family: var(--f-mono);
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background .25s var(--ease);
}
.hdr-cta:hover { background: var(--gold-lt); }
.hdr-cta:focus-visible { outline-color: var(--txt); }

.ham { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; color: var(--txt); }

@media (max-width: 1080px) {
	/* Below the point where six items plus a CTA still fit on one line,
	   the whole nav goes to the sheet rather than wrapping to two rows. */
	.hdr-nav { display: none; }
	.ham { display: flex; }
}

/* ── MOBILE NAV SHEET ───────────────────────────────────────────────────── */

#mob-nav {
	position: fixed;
	inset: 0;
	z-index: var(--z-nav);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: .25rem;
	padding: 6rem var(--gut) 8rem;
	background: var(--void);
	overflow-y: auto;
	visibility: hidden;
	opacity: 0;
	transition: opacity .3s var(--ease), visibility .3s;
}
#mob-nav.is-open { visibility: visible; opacity: 1; }

.mob-close {
	position: absolute;
	top: 1.25rem; right: var(--gut);
	width: 44px; height: 44px;
	display: flex; align-items: center; justify-content: center;
	color: var(--txt);
}

.mob-link {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: .85rem 0;
	border-bottom: 1px solid var(--line);
	font-family: var(--f-display);
	font-size: clamp(1.75rem, 8vw, 2.5rem);
	font-weight: 800;
	text-transform: uppercase;
	color: var(--txt);
	transition: color .2s var(--ease);
}
.mob-link:hover { color: var(--gold); }
.mob-link span {
	font-family: var(--f-mono);
	font-size: .75rem;
	font-weight: 400;
	letter-spacing: .1em;
	color: var(--dim);
}
.mob-foot { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.mob-tel { font-family: var(--f-mono); font-size: .8125rem; letter-spacing: .08em; color: var(--muted); }

/* ── HERO (layout family: asymmetric split) ─────────────────────────────── */

.hero {
	position: relative;
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	align-items: center;
	min-height: 100dvh;              /* never h-screen / 100vh */
	background: var(--void);
}

.hero-copy {
	/* Top padding cap is 6rem at desktop; the header is 72px of it. */
	padding: 6rem var(--gut) 4rem;
	max-width: calc(var(--cw) / 2 + 2rem);
	margin-left: auto;
	width: 100%;
}

/* Sized so each half of the headline holds ONE line in this column. The
   global .d1 clamp tops out at 5.25rem, which wrapped it to four lines. Two
   lines is the cap; check this at 1024px and 1440px if you change the copy. */
.hero h1 {
	font-size: clamp(2.1rem, 4.6vw, 4.25rem);
	margin-bottom: 1.5rem;
}
.hero h1 .accent { color: var(--gold); display: block; }

.hero .lede { margin-bottom: 2.25rem; max-width: 42ch; }

.hero-btns { display: flex; flex-wrap: wrap; gap: .875rem; }

.hero-media {
	position: relative;
	align-self: stretch;
	min-height: 100dvh;
	overflow: hidden;
}

/* Slides are stacked and cross-faded. Only opacity animates, so this stays
   on the compositor. Slide one is opaque by default, which means the hero
   still shows a photograph with JavaScript switched off. */
.hero-slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transition: opacity 1s var(--ease);
}
.hero-slide.is-current { opacity: 1; }

.hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 35%;
}

/* Controls sit inside the photo, clear of the copy column. */
.hero-controls {
	position: absolute;
	right: clamp(1rem, 2.5vw, 2rem);
	bottom: clamp(1rem, 2.5vw, 2rem);
	z-index: 2;
	display: flex;
	align-items: center;
	gap: .75rem;
}

.hero-dots { display: flex; gap: .4rem; }
.hero-dot {
	width: 28px;
	height: 4px;
	border-radius: var(--r);
	background: color-mix(in srgb, var(--txt) 35%, transparent);
	transition: background .25s var(--ease), width .25s var(--ease);
}
.hero-dot:hover { background: color-mix(in srgb, var(--txt) 60%, transparent); }
.hero-dot.is-current { background: var(--gold); width: 40px; }
.hero-dot:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

.hero-pause {
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid color-mix(in srgb, var(--txt) 30%, transparent);
	border-radius: var(--r);
	background: color-mix(in srgb, var(--void) 55%, transparent);
	backdrop-filter: blur(6px);
	color: var(--txt);
	transition: border-color .2s var(--ease), color .2s var(--ease);
}
.hero-pause:hover { border-color: var(--gold); color: var(--gold); }
.hero-pause .hero-pause-off { display: none; }
.hero-pause[aria-pressed="true"] .hero-pause-on { display: none; }
.hero-pause[aria-pressed="true"] .hero-pause-off { display: flex; }

/* No automatic motion under reduced motion: slide one only, no controls,
   nothing to pause. */
@media (prefers-reduced-motion: reduce) {
	.hero-slide { transition: none; }
	.hero-controls { display: none; }
}
/* Feathers the photo into the copy column so the split has no hard seam. */
.hero-media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--void) 0%, transparent 22%),
	            linear-gradient(0deg, color-mix(in srgb, var(--void) 55%, transparent), transparent 45%);
}

@media (max-width: 900px) {
	.hero {
		grid-template-columns: 1fr;
		min-height: auto;
	}
	.hero-copy {
		order: 2;
		padding: 2.5rem var(--gut) 3.5rem;
		max-width: none;
		margin-left: 0;
	}
	.hero-media { order: 1; min-height: 52vh; }
	.hero-media::after {
		background: linear-gradient(0deg, var(--void) 0%, transparent 45%);
	}
	.hero-btns .btn-gold, .hero-btns .btn-ghost { flex: 1 1 auto; }
}

/* ── CREDENTIALS STRIP (layout family: inline credential row) ───────────── */

.creds { background: var(--base); border-block: 1px solid var(--line); }
.creds-in {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 2.5rem;
	padding-block: 1.5rem;
}
.cred {
	display: flex;
	align-items: center;
	gap: .6rem;
	font-family: var(--f-mono);
	font-size: .8125rem;
	letter-spacing: .04em;
	color: var(--muted);
}
.cred .ql-i { color: var(--gold); }

@media (max-width: 700px) {
	.creds-in { gap: .875rem 1.5rem; }
	.cred { font-size: .75rem; }
}

/* ── WHO WE ARE (layout family: image + text split, used ONCE) ─────────── */

.who-grid {
	display: grid;
	grid-template-columns: .85fr 1.15fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}
.who-media { position: relative; border-radius: var(--r); overflow: hidden; }
.who-media img { width: 100%; aspect-ratio: 5 / 6; object-fit: cover; }

.who-points { margin-top: 2rem; display: grid; gap: 1.125rem; }
.who-point { display: flex; gap: .875rem; align-items: flex-start; }
.who-point .ql-i { color: var(--gold); margin-top: .25rem; }
.who-point strong { display: block; color: var(--txt); font-weight: 600; margin-bottom: .15rem; }
.who-point span { font-size: .9375rem; color: var(--muted); }

@media (max-width: 860px) {
	.who-grid { grid-template-columns: 1fr; }
	.who-media { max-width: 420px; }
}

/* ── SERVICES (layout family: spec listing) ─────────────────────────────── */
/* Four pillars, every service named, nothing hidden behind a click. A
   contractor is judged on breadth of scope, so this section lists rather
   than summarises. Each row: photograph, pillar and its call to action,
   then the service list. */

.pillars { border-top: 1px solid var(--line); }

.pillar {
	display: grid;
	grid-template-columns: .85fr 1fr 1.05fr;
	gap: clamp(1.5rem, 3.5vw, 3rem);
	align-items: start;
	padding-block: clamp(2rem, 4vw, 3.25rem);
	border-bottom: 1px solid var(--line);
}

.pillar-media {
	margin: 0;
	border-radius: var(--r);
	overflow: hidden;
	background: var(--surface);
}
.pillar-media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform .6s var(--ease);
}
.pillar:hover .pillar-media img { transform: scale(1.04); }

.pillar-icon { display: flex; color: var(--gold); margin-bottom: 1rem; }

.pillar-name {
	font-family: var(--f-display);
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	font-weight: 800;
	line-height: 1.05;
	text-transform: uppercase;
	letter-spacing: -.01em;
	color: var(--txt);
	margin-bottom: .875rem;
}
.pillar-copy p {
	font-size: .9375rem;
	line-height: 1.7;
	color: var(--muted);
	margin-bottom: 1.5rem;
	max-width: 46ch;
}

/* The list itself. Two columns where there is room, one marker per item and
   no rule between rows, so seven services do not become seven hairlines. */
.pillar-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .5rem clamp(1rem, 2vw, 2rem);
	align-content: start;
}
.pillar-list li {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	padding: .45rem 0;
	font-size: .9375rem;
	line-height: 1.45;
	color: var(--muted);
	border-bottom: 1px solid transparent;
	transition: color .2s var(--ease), border-color .2s var(--ease);
}
.pillar-list li:hover { color: var(--txt); border-bottom-color: var(--line-lt); }
.pillar-list .ql-i { color: var(--gold); margin-top: .3rem; flex: none; }

@media (max-width: 1080px) {
	.pillar { grid-template-columns: .9fr 1.1fr; }
	.pillar-list { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
	.pillar { grid-template-columns: 1fr; gap: 1.25rem; }
	.pillar-list { grid-template-columns: 1fr; gap: 0; }
	.pillar-media img { aspect-ratio: 16 / 9; }
}

@media (prefers-reduced-motion: reduce) {
	.pillar-media img { transition: none; }
}

/* ── BENTO (retained: used by inner pages and the tag lists) ────────────── */
/* Four service pillars, four cells. If a pillar is added, reshape the grid;
   never paste an empty tile. */

/* Four items, six slots, every slot filled: a tall cell on each flank with
   two stacked cells between them. Placement is explicit because auto-flow
   around a row-spanning item leaves a hole in the last column. If a fifth
   pillar is ever added, reshape this grid; do not add a blank tile. */
.bento {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1.05fr;
	grid-template-rows: auto auto;
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
	border-radius: var(--r);
	overflow: hidden;
}
.bento-cell:nth-child(1) { grid-area: 1 / 1 / 3 / 2; }
.bento-cell:nth-child(2) { grid-area: 1 / 2 / 2 / 3; }
.bento-cell:nth-child(3) { grid-area: 2 / 2 / 3 / 3; }
.bento-cell:nth-child(4) { grid-area: 1 / 3 / 3 / 4; }
.bento-cell {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: .75rem;
	min-height: 235px;
	padding: clamp(1.5rem, 2.6vw, 2.25rem);
	background: var(--base);
	isolation: isolate;
	transition: background .3s var(--ease);
}
.bento-cell:hover { background: var(--raised); }

/* The two flanking cells are the tall ones and carry the photography. */
.bento-cell--lead { min-height: 420px; }
.bento-cell--lead .bento-title { font-size: clamp(1.6rem, 2.4vw, 2.1rem); }

/* Background variation so this is not four text-on-flat cards.
   The photo itself is an inline span in the template (only the URL varies);
   this pseudo-element is the scrim that keeps the copy above it readable. */
.bento-cell--photo::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	/* Opaque behind the copy at the bottom, clear at the top so the
	   photograph actually reads instead of leaving the tile looking empty. */
	background: linear-gradient(0deg,
		var(--base) 30%,
		color-mix(in srgb, var(--base) 78%, transparent) 55%,
		color-mix(in srgb, var(--base) 25%, transparent) 100%);
}
.bento-cell--tint {
	background: linear-gradient(150deg, color-mix(in srgb, var(--gold) 9%, var(--base)), var(--base) 62%);
}
.bento-cell--tint:hover { background: linear-gradient(150deg, color-mix(in srgb, var(--gold) 14%, var(--base)), var(--base) 62%); }

.bento-icon { color: var(--gold); margin-bottom: auto; }
.bento-title {
	font-family: var(--f-display);
	font-size: clamp(1.25rem, 1.8vw, 1.5rem);
	font-weight: 800;
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--txt);
}
.bento-body { font-size: .9375rem; line-height: 1.65; color: var(--muted); }
.bento-list {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem .5rem;
	margin-top: .25rem;
}
.bento-list li {
	font-family: var(--f-mono);
	font-size: .6875rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--dim);
	padding: .25rem .5rem;
	border: 1px solid var(--line-lt);
	border-radius: var(--r);
}

@media (max-width: 1000px) {
	/* Two by two. Explicit placement is dropped so the four cells flow. */
	.bento { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
	.bento-cell:nth-child(1),
	.bento-cell:nth-child(2),
	.bento-cell:nth-child(3),
	.bento-cell:nth-child(4) { grid-area: auto; }
	.bento-cell--lead { min-height: 320px; }
}
@media (max-width: 640px) {
	.bento { grid-template-columns: 1fr; }
	.bento-cell { min-height: 220px; }
	.bento-cell--lead { min-height: 280px; }
}

/* ── TICKER (layout family: marquee, the ONLY one on the page) ─────────── */

.ticker {
	background: var(--void);
	border-block: 1px solid var(--line);
	padding-block: 1.125rem;
	overflow: hidden;
	/* Fades the ends so the loop seam is never visible. */
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker-track { display: flex; width: max-content; }
.ticker-group {
	display: flex;
	align-items: center;
	flex: none;
	padding-right: 2.5rem;
}
.ticker-group span {
	display: inline-flex;
	align-items: center;
	gap: 2.5rem;
	padding-right: 2.5rem;
	font-family: var(--f-mono);
	font-size: .8125rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--dim);
	white-space: nowrap;
}
.ticker-group span::after {
	content: '';
	width: 4px; height: 4px;
	background: var(--gold);
	flex: none;
}

@media (prefers-reduced-motion: no-preference) {
	.ticker-track { animation: ticker-run 46s linear infinite; }
	.ticker:hover .ticker-track { animation-play-state: paused; }
	@keyframes ticker-run { to { transform: translateX(-50%); } }
}
@media (prefers-reduced-motion: reduce) {
	/* Static and scrollable rather than clipped. */
	.ticker { overflow-x: auto; }
}

/* ── PROJECTS (layout family: horizontal scroll-snap track) ─────────────── */

.proj-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2rem;
	margin-bottom: 2.5rem;
}
.proj-nav { display: flex; gap: .5rem; }
.proj-btn {
	width: 44px; height: 44px;
	display: flex; align-items: center; justify-content: center;
	border: 1px solid var(--line-lt);
	border-radius: var(--r);
	color: var(--muted);
	transition: border-color .25s var(--ease), color .25s var(--ease);
}
.proj-btn:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.proj-btn:disabled { opacity: .35; cursor: not-allowed; }

.proj-track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(280px, 360px);
	gap: 1.25rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: var(--gut);
	padding-inline: var(--gut);
	padding-bottom: 1rem;
	margin-inline: calc(var(--gut) * -1);
	scrollbar-width: thin;
	scrollbar-color: var(--line-lt) transparent;
}
.proj-track::-webkit-scrollbar { height: 4px; }
.proj-track::-webkit-scrollbar-track { background: var(--line); }
.proj-track::-webkit-scrollbar-thumb { background: var(--line-lt); }

.proj-card { scroll-snap-align: start; }
.proj-card figure { position: relative; border-radius: var(--r); overflow: hidden; background: var(--surface); }
.proj-card img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform .5s var(--ease);
}
.proj-card:hover img { transform: scale(1.04); }
/* Caption is real text below the image, never a pill baked over it. */
.proj-card figcaption { padding-top: 1rem; }
.proj-meta {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-family: var(--f-mono);
	font-size: .6875rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--dim);
	margin-bottom: .4rem;
}
.proj-meta .is-done { color: var(--gold); }
.proj-title {
	font-family: var(--f-display);
	font-size: 1.375rem;
	font-weight: 800;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--txt);
	margin-bottom: .25rem;
}
.proj-where { font-size: .875rem; color: var(--muted); }

@media (max-width: 700px) {
	.proj-head { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
	.proj-nav { display: none; }   /* swipe is the interaction on touch */
	.proj-track { grid-auto-columns: 80%; }
}

/* ── INDUSTRIES (layout family: dense tag field) ────────────────────────── */

.ind-grid {
	display: flex;
	flex-wrap: wrap;
	gap: .625rem;
}
.ind {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .7rem 1.1rem;
	border: 1px solid var(--line-lt);
	border-radius: var(--r);
	background: var(--base);
	font-size: .875rem;
	color: var(--muted);
	transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.ind:hover { border-color: var(--gold); color: var(--txt); background: var(--raised); }
.ind .ql-i { color: var(--gold); }

/* ── STATS BAND (layout family: full-width numeric band) ────────────────── */

.stats { background: var(--surface); border-block: 1px solid var(--line); }
.stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
	border-radius: var(--r);
	overflow: hidden;
}
.stat {
	background: var(--surface);
	padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.25rem, 2.5vw, 2rem);
}
.stat .num { font-size: clamp(2.5rem, 5vw, 3.75rem); margin-bottom: .5rem; }
.stat-label {
	font-family: var(--f-mono);
	font-size: .75rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: .5rem;
}
.stat-note { font-size: .875rem; line-height: 1.55; color: var(--dim); }

@media (max-width: 860px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .stats-grid { grid-template-columns: 1fr; } }

/* ── PROCESS (layout family: sticky vertical sequence) ──────────────────── */

.proc {
	display: grid;
	grid-template-columns: .8fr 1.2fr;
	gap: clamp(2rem, 6vw, 5rem);
	align-items: start;
}
.proc-aside { position: sticky; top: 120px; }

.proc-steps { display: grid; gap: 0; }
.proc-step {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1.5rem;
	padding-block: 1.75rem;
	border-top: 1px solid var(--line);
}
.proc-step:last-child { border-bottom: 1px solid var(--line); }
.proc-mark {
	width: 40px; height: 40px;
	display: flex; align-items: center; justify-content: center;
	border: 1px solid var(--line-lt);
	border-radius: var(--r);
	color: var(--gold);
	transition: border-color .3s var(--ease), background .3s var(--ease);
}
.proc-step:hover .proc-mark { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, transparent); }
.proc-step h3 {
	font-family: var(--f-display);
	font-size: 1.375rem;
	font-weight: 800;
	text-transform: uppercase;
	color: var(--txt);
	margin-bottom: .4rem;
}
.proc-step p { font-size: .9375rem; color: var(--muted); max-width: 52ch; }

@media (max-width: 860px) {
	.proc { grid-template-columns: 1fr; }
	.proc-aside { position: static; }
}

/* ── COVERAGE (layout family: grouped column chunks) ────────────────────── */
/* Boroughs and towns grouped into three clusters instead of a long
   hairline-per-row list. */

.cov-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
	border-radius: var(--r);
	overflow: hidden;
}
.cov-col { background: var(--void); padding: clamp(1.5rem, 3vw, 2.25rem); }
.cov-col h3 {
	display: flex;
	align-items: center;
	gap: .55rem;
	font-family: var(--f-mono);
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 1.25rem;
}
.cov-col ul { display: grid; gap: .55rem; }
.cov-col li { font-size: .9375rem; color: var(--muted); }

@media (max-width: 800px) { .cov-grid { grid-template-columns: 1fr; } }

/* ── TESTIMONIALS (layout family: asymmetric quote pair) ────────────────── */
/* Deliberately not three equal cards. One lead quote, two supporting. */

.testi-grid {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: 1.25rem;
	align-items: start;
}
.testi-stack { display: grid; gap: 1.25rem; }

.quote {
	position: relative;
	padding: clamp(1.75rem, 3vw, 2.5rem);
	background: var(--base);
	border: 1px solid var(--line);
	border-radius: var(--r);
}
.quote .ql-i { color: var(--gold); opacity: .5; margin-bottom: 1rem; }
.quote blockquote {
	font-size: 1rem;
	line-height: 1.7;
	color: var(--txt);
	margin-bottom: 1.25rem;
}
.quote--lead blockquote { font-size: clamp(1.125rem, 1.7vw, 1.4rem); line-height: 1.55; }
.quote figcaption { font-size: .875rem; color: var(--muted); }
.quote figcaption b { display: block; color: var(--txt); font-weight: 600; }

@media (max-width: 860px) { .testi-grid { grid-template-columns: 1fr; } }

/* ── FORMS + CONTACT (layout family: form panel) ────────────────────────── */

.contact-grid {
	display: grid;
	grid-template-columns: .8fr 1.2fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

.contact-facts { display: grid; gap: 1.5rem; }
.fact { display: flex; gap: .875rem; align-items: flex-start; }
.fact .ql-i { color: var(--gold); margin-top: .2rem; }
.fact-label {
	font-family: var(--f-mono);
	font-size: .6875rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--dim);
	margin-bottom: .2rem;
}
.fact a, .fact span { color: var(--txt); font-size: 1rem; }
.fact a:hover { color: var(--gold); }

.form-panel {
	padding: clamp(1.5rem, 3vw, 2.5rem);
	background: var(--base);
	border: 1px solid var(--line);
	border-radius: var(--r);
}

.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.fg { display: grid; gap: .4rem; margin-bottom: 1rem; }

/* Label above input, always. Never a placeholder standing in for a label. */
.fl {
	font-family: var(--f-mono);
	font-size: .6875rem;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted);          /* 8.2:1 */
}
.fl .req { color: var(--gold); }

.fi {
	width: 100%;
	padding: .8rem .9rem;
	background: var(--void);
	border: 1px solid var(--line-lt);
	border-radius: var(--r);
	color: var(--txt);
	font-size: .9375rem;
	transition: border-color .2s var(--ease), background .2s var(--ease);
}
.fi::placeholder { color: var(--dim); }   /* 5.4:1, passes AA */
.fi:hover { border-color: var(--line-lt); background: var(--base); }
.fi:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
textarea.fi { min-height: 130px; resize: vertical; }
select.fi {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
	                  linear-gradient(135deg, var(--muted) 50%, transparent 50%);
	background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 2.5rem;
}

.fi[aria-invalid="true"] { border-color: var(--warn); }
.f-err {
	font-size: .8125rem;
	color: var(--warn);
	min-height: 0;
}
.f-help { font-size: .8125rem; color: var(--dim); }

.f-check { display: flex; flex-wrap: wrap; gap: .5rem; }
.f-check label {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .5rem .8rem;
	border: 1px solid var(--line-lt);
	border-radius: var(--r);
	font-size: .875rem;
	color: var(--muted);
	cursor: pointer;
	transition: border-color .2s var(--ease), color .2s var(--ease);
}
.f-check label:hover { border-color: var(--gold); color: var(--txt); }
.f-check input { accent-color: var(--gold); width: 15px; height: 15px; }
.f-check input:checked + span { color: var(--txt); }

.f-status {
	font-family: var(--f-mono);
	font-size: .8125rem;
	margin-bottom: .75rem;
	min-height: 1.25rem;
}
.f-status.is-ok  { color: var(--ok); }     /* the only place --ok appears */
.f-status.is-err { color: var(--warn); }

.f-submit { width: 100%; margin-top: .5rem; }
.f-note { margin-top: .875rem; font-size: .8125rem; color: var(--dim); }

@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .f-row { grid-template-columns: 1fr; } }

/* ── TOAST ──────────────────────────────────────────────────────────────── */

.toast {
	position: fixed;
	right: 1.5rem;
	bottom: 1.5rem;
	z-index: var(--z-toast);
	max-width: 340px;
	padding: .95rem 1.25rem;
	border-radius: var(--r);
	border: 1px solid var(--line-lt);
	background: var(--raised);
	color: var(--txt);
	font-size: .875rem;
	box-shadow: 0 12px 32px rgb(0 0 0 / .45);
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.toast.is-in { opacity: 1; transform: none; }
.toast.is-ok  { border-left: 2px solid var(--ok); }
.toast.is-err { border-left: 2px solid var(--warn); }

@media (max-width: 560px) {
	.toast { right: 1rem; left: 1rem; bottom: 5.5rem; max-width: none; }
}

/* ── CTA BAND ───────────────────────────────────────────────────────────── */

.cta-band {
	background: var(--base);
	border-top: 1px solid var(--line);
	padding-block: clamp(3.5rem, 7vw, 6rem);
	text-align: center;
}
.cta-band .d2 { margin-bottom: 1rem; }
.cta-band .d2 span { color: var(--gold); }
.cta-band .lede { margin: 0 auto 2rem; text-align: center; }
.cta-btns { display: flex; flex-wrap: wrap; gap: .875rem; justify-content: center; }

/* ── FOOTER ─────────────────────────────────────────────────────────────── */

#footer { background: var(--void); border-top: 1px solid var(--line); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }

.foot-grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
	gap: clamp(2rem, 4vw, 3.5rem);
	padding-bottom: 3rem;
}
.foot-logo img { height: 32px; width: auto; margin-bottom: 1.25rem; }
.foot-desc { font-size: .9375rem; line-height: 1.7; color: var(--muted); max-width: 34ch; }

.foot-social { margin-top: 1.5rem; display: flex; gap: .5rem; }
.foot-social a {
	width: 38px; height: 38px;
	display: flex; align-items: center; justify-content: center;
	border: 1px solid var(--line);
	border-radius: var(--r);
	color: var(--dim);
	transition: border-color .25s var(--ease), color .25s var(--ease);
}
.foot-social a:hover { border-color: var(--gold); color: var(--gold); }

.ft-h {
	font-family: var(--f-mono);
	font-size: .6875rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--txt);
	margin-bottom: 1.125rem;
}
.ft-links { display: grid; gap: .625rem; }
.ft-links a, .ft-links span { font-size: .9375rem; color: var(--muted); transition: color .2s var(--ease); }
.ft-links a:hover { color: var(--gold); }

.foot-legal {
	margin-top: 1.5rem;
	font-family: var(--f-mono);
	font-size: .75rem;            /* floor is 12px for --dim */
	line-height: 1.8;
	letter-spacing: .04em;
	color: var(--dim);
}

.foot-bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--line);
	font-family: var(--f-mono);
	font-size: .75rem;
	letter-spacing: .04em;
	color: var(--dim);
}

@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; gap: 2.25rem; } }

/* ── FLOATING CONTACT + BACK TO TOP ─────────────────────────────────────── */

#btt {
	position: fixed;
	right: 1.5rem;
	bottom: 1.5rem;
	z-index: var(--z-sticky);
	width: 46px; height: 46px;
	display: flex; align-items: center; justify-content: center;
	border: 1px solid var(--line-lt);
	border-radius: var(--r);
	background: color-mix(in srgb, var(--void) 88%, transparent);
	backdrop-filter: blur(10px);
	color: var(--muted);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s,
	            border-color .25s var(--ease), color .25s var(--ease);
}
#btt.is-shown { opacity: 1; visibility: visible; transform: none; }
#btt:hover { border-color: var(--gold); color: var(--gold); }

/* ── MOBILE STICKY CONTACT BAR ──────────────────────────────────────────── */
/* Three channels, not three phrasings of one CTA. */

#mob-sticky { display: none; }

@media (max-width: 780px) {
	#mob-sticky {
		position: fixed;
		inset: auto 0 0 0;
		z-index: var(--z-sticky);
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 1px;
		background: var(--line);
		border-top: 1px solid var(--line);
	}
	.mob-sticky-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: .2rem;
		padding: .6rem .25rem calc(.6rem + env(safe-area-inset-bottom));
		background: var(--base);
		font-family: var(--f-mono);
		font-size: .625rem;
		letter-spacing: .08em;
		text-transform: uppercase;
		color: var(--muted);
	}
	.mob-sticky-btn .ql-i { color: var(--gold); }
	.mob-sticky-btn:active { background: var(--raised); }

	#btt { bottom: 5.5rem; }
	body { padding-bottom: 64px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   INNER PAGES

   New components for /about and /contractors. These are additional blocks,
   not overrides of anything above. Everything the inner pages share with the
   front page (bento, quote, cov-grid, ind-grid, stats, forms) is reused as
   defined above rather than restyled here.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── PAGE HERO (compact; the full-height split hero is front page only) ─── */

/* Sized so the band reads as a real page header rather than a thin strip:
   it clears the fixed header, then holds a minimum height of its own. The
   photograph is a Featured Image when the page has one. */
.page-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(340px, 52vh, 520px);
	padding: calc(72px + clamp(3rem, 6vw, 5rem)) 0 clamp(2.5rem, 5vw, 4rem);
	background: var(--void);
	overflow: hidden;
}
.page-hero-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-repeat: no-repeat;
	opacity: .45;
}
/* Scrim over the photograph so the copy holds contrast whatever image the
   client sets as the Featured Image. Dark from the bottom-left, where the
   text sits, clearing toward the top-right. */
.page-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(0deg, var(--void) 2%, color-mix(in srgb, var(--void) 55%, transparent) 50%, transparent),
		linear-gradient(90deg, color-mix(in srgb, var(--void) 88%, transparent) 5%, color-mix(in srgb, var(--void) 35%, transparent) 55%, transparent);
}
.page-hero > .wrap { position: relative; z-index: 1; }
.page-hero h1 { max-width: 18ch; }
.page-hero .lede { margin-top: 1.5rem; max-width: 52ch; }
.page-hero-btns { display: flex; flex-wrap: wrap; gap: .875rem; margin-top: 2.25rem; }

/* ── TWO-COLUMN PROSE (about: "who we are") ─────────────────────────────── */

.prose-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	margin-top: 2rem;
}
.prose-2 p { font-size: 1rem; line-height: 1.75; color: var(--muted); }
.prose-2 p + p { margin-top: 1.25rem; }

@media (max-width: 760px) { .prose-2 { grid-template-columns: 1fr; } }

/* ── MISSION AND VISION (asymmetric pair, not two equal cards) ──────────── */

.mv {
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
	border-radius: var(--r);
	overflow: hidden;
}
.mv-cell { background: var(--base); padding: clamp(1.75rem, 3.5vw, 3rem); }
.mv-cell:first-child { background: linear-gradient(140deg, color-mix(in srgb, var(--gold) 10%, var(--base)), var(--base) 60%); }
.mv-cell .ql-i { color: var(--gold); margin-bottom: 1.25rem; }
.mv-cell h3 {
	font-family: var(--f-display);
	font-size: clamp(1.5rem, 2.2vw, 2rem);
	font-weight: 800;
	text-transform: uppercase;
	color: var(--txt);
	margin-bottom: .875rem;
}
.mv-cell p { color: var(--muted); line-height: 1.7; }

@media (max-width: 800px) { .mv { grid-template-columns: 1fr; } }

/* ── VALUE / CREDENTIAL COLUMNS ─────────────────────────────────────────── */

.duo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}
.duo h3 {
	font-family: var(--f-display);
	font-size: clamp(1.5rem, 2.2vw, 2rem);
	font-weight: 800;
	text-transform: uppercase;
	color: var(--txt);
	margin-bottom: 1.25rem;
}
.duo > div > .body { margin-bottom: 1.75rem; }

/* Grouped rows: one hairline between items, none above the first or below
   the last, so this never becomes border-t plus border-b on every row. */
.rows { display: grid; }
.rows li {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
	padding: .875rem 0;
	font-size: .9375rem;
	color: var(--muted);
}
.rows li + li { border-top: 1px solid var(--line); }
.rows .ql-i { color: var(--gold); margin-top: .2rem; }

@media (max-width: 800px) { .duo { grid-template-columns: 1fr; } }

/* ── CALLOUT PANEL ──────────────────────────────────────────────────────── */

.callout {
	margin-top: 2rem;
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	background: color-mix(in srgb, var(--gold) 8%, var(--base));
	border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent);
	border-radius: var(--r);
}
.callout p { font-size: .9375rem; color: var(--muted); margin-bottom: 1rem; }
.callout strong { display: block; color: var(--txt); margin-bottom: .4rem; }

/* ── TABS (contractors trade selector) ──────────────────────────────────── */

.tablist {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-bottom: 2rem;
}
.tablist button {
	padding: .6rem 1rem;
	border: 1px solid var(--line-lt);
	border-radius: var(--r);
	font-family: var(--f-mono);
	font-size: .75rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--muted);
	transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.tablist button:hover { border-color: var(--gold); color: var(--txt); }
.tablist button[aria-selected="true"] {
	background: var(--gold);
	border-color: var(--gold);
	color: var(--void);
}

.tabpanel {
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--base);
	border: 1px solid var(--line);
	border-radius: var(--r);
}
.tabpanel h3 {
	font-family: var(--f-display);
	font-size: 1.5rem;
	font-weight: 800;
	text-transform: uppercase;
	color: var(--txt);
	margin-bottom: .75rem;
}
.tabpanel > p { color: var(--muted); margin-bottom: 1.5rem; max-width: 62ch; }
.tabpanel .rows { max-width: 62ch; }

/* ── PORTAL SUB-NAV ─────────────────────────────────────────────────────── */

.portal-nav {
	background: var(--base);
	border-block: 1px solid var(--line);
	position: sticky;
	top: 64px;
	z-index: var(--z-sticky);
}
.portal-nav ul {
	display: flex;
	gap: .25rem;
	overflow-x: auto;
	padding-block: .625rem;
	scrollbar-width: none;
}
.portal-nav ul::-webkit-scrollbar { display: none; }
.portal-nav a {
	display: block;
	padding: .5rem .85rem;
	border-radius: var(--r);
	font-family: var(--f-mono);
	font-size: .75rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--muted);
	transition: color .2s var(--ease), background .2s var(--ease);
}
.portal-nav a:hover { color: var(--txt); background: var(--raised); }

/* ── DOC CHECKLIST ──────────────────────────────────────────────────────── */

/* Six documents in a grid that divides evenly: 3x2, then 2x3, then 1x6.
   auto-fit was leaving a run of empty cells on the second row at desktop. */
.docs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
	border-radius: var(--r);
	overflow: hidden;
}

@media (max-width: 860px) { .docs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .docs { grid-template-columns: 1fr; } }
.doc {
	display: flex;
	gap: .75rem;
	align-items: flex-start;
	padding: 1.25rem;
	background: var(--base);
}
.doc .ql-i { color: var(--gold); margin-top: .15rem; }
.doc b { display: block; color: var(--txt); font-weight: 600; font-size: .9375rem; margin-bottom: .15rem; }
.doc span { font-size: .8125rem; color: var(--dim); }

/* ── SCROLL REVEAL ──────────────────────────────────────────────────────── */
/* Driven by one IntersectionObserver in main.js, which adds .is-in.
   No scroll listener. Elements are visible by default so that a JS failure
   or a crawler never sees a blank page. */

@media (prefers-reduced-motion: no-preference) {
	.js .rv {
		opacity: 0;
		transform: translateY(18px);
		transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
		transition-delay: var(--rv-delay, 0ms);
	}
	.js .rv.is-in { opacity: 1; transform: none; }

	/* Stagger primitive. Put .rv-stagger on a container and its children
	   arrive in sequence, so a grid resolves left to right instead of
	   snapping in as one block. The delays live here rather than as inline
	   styles on every child in every template. */
	.js .rv-stagger > * {
		opacity: 0;
		transform: translateY(14px);
		transition: opacity .5s var(--ease), transform .5s var(--ease);
	}
	.js .rv-stagger.is-in > * { opacity: 1; transform: none; }

	.js .rv-stagger > *:nth-child(1)  { transition-delay: 0ms; }
	.js .rv-stagger > *:nth-child(2)  { transition-delay: 55ms; }
	.js .rv-stagger > *:nth-child(3)  { transition-delay: 110ms; }
	.js .rv-stagger > *:nth-child(4)  { transition-delay: 165ms; }
	.js .rv-stagger > *:nth-child(5)  { transition-delay: 210ms; }
	.js .rv-stagger > *:nth-child(6)  { transition-delay: 250ms; }
	.js .rv-stagger > *:nth-child(7)  { transition-delay: 285ms; }
	.js .rv-stagger > *:nth-child(8)  { transition-delay: 315ms; }
	.js .rv-stagger > *:nth-child(9)  { transition-delay: 340ms; }
	.js .rv-stagger > *:nth-child(10) { transition-delay: 360ms; }
	.js .rv-stagger > *:nth-child(11) { transition-delay: 375ms; }
	/* Anything past eleven arrives together; a longer cascade reads as lag. */
	.js .rv-stagger > *:nth-child(n+12) { transition-delay: 390ms; }

	/* Headline arrival: the type rises out of its own line box rather than
	   fading, which reads as deliberate instead of generic. */
	.js .rv-head { overflow: hidden; }
	.js .rv-head > * {
		display: block;
		transform: translateY(105%);
		transition: transform .7s var(--ease);
	}
	.js .rv-head.is-in > * { transform: none; }
}

/* ── GLOBAL REDUCED-MOTION BACKSTOP ─────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ── PRINT ──────────────────────────────────────────────────────────────── */

@media print {
	#hdr, #mob-nav, #mob-sticky, #btt, #prog, .ticker, .proj-nav { display: none !important; }
	body { background: #fff; color: #000; }
	.d1, .d2, .d3, .proj-title, .bento-title { color: #000; }
}