/* ==========================================================================
   Far West Contractors — Design System "Plumb"
   Tokens + components shared by the Divi child theme and the static preview.
   Class prefix: fw-  (applied via Divi module "CSS Class" fields / presets)
   ========================================================================== */

@font-face {
	font-family: "Archivo";
	src: url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations"), url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2");
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-style: normal;
	font-display: swap;
}
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
	/* Brand */
	--fw-yellow: var(--wp--preset--color--brand, #f6be00);          /* logo yellow — fills, rules, accents. Never text on light bg (1.8:1). */
	--fw-yellow-hi: var(--wp--preset--color--brand-light, #ffcd2b);
	--fw-ink: var(--wp--preset--color--ink, #16181b);             /* primary text / dark surfaces (17.9:1 on white) */
	--fw-ink-2: #22262b;
	--fw-steel-700: var(--wp--preset--color--steel, #3d434b);       /* secondary text (10.2:1) */
	--fw-steel-600: var(--wp--preset--color--steel-muted, #565d66);       /* muted text (6.6:1 on white, 6.0:1 on concrete) */
	--fw-steel-300: #aab0b8;       /* text on dark (8.3:1 on ink) */
	--fw-line: var(--wp--preset--color--line, #dcd8d0);
	--fw-line-dark: rgba(255,255,255,.14);
	--fw-concrete: var(--wp--preset--color--concrete, #f4f2ee);
	--fw-paper: var(--wp--preset--color--paper, #ffffff);
	--fw-focus: #1d5fd6;

	/* Type */
	--fw-font-body: var(--wp--preset--font-family--body, "Archivo", "Helvetica Neue", Arial, sans-serif);
	--fw-font-display: var(--wp--preset--font-family--heading, "Archivo", "Helvetica Neue", Arial, sans-serif);
	--fw-font-mono: var(--wp--preset--font-family--mono, "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace);
	--fw-display-stretch: 112%;
	--fw-step--1: clamp(0.84rem, 0.82rem + 0.1vw, 0.9rem);
	--fw-step-0: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
	--fw-step-1: clamp(1.2rem, 1.1rem + 0.45vw, 1.42rem);
	--fw-step-2: clamp(1.45rem, 1.25rem + 0.9vw, 1.95rem);
	--fw-step-3: clamp(1.8rem, 1.45rem + 1.6vw, 2.75rem);
	--fw-step-4: clamp(2.3rem, 1.7rem + 2.8vw, 4rem);
	--fw-step-5: clamp(2.7rem, 1.8rem + 4.2vw, 5.4rem);

	/* Space (8px base) & layout */
	--fw-s-1: .5rem; --fw-s-2: 1rem; --fw-s-3: 1.5rem; --fw-s-4: 2rem; --fw-s-5: 3rem; --fw-s-6: 4rem;
	--fw-section: clamp(4rem, 3rem + 5vw, 8rem);
	--fw-gutter: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
	--fw-max: 1320px;
	--fw-radius: 2px;
	--fw-ease: cubic-bezier(.2,.7,.2,1);
	--fw-header-h: 84px;
}

/* ---------- Base ---------- */
.fw-site, .fw-site body { margin: 0; }
.fw-site {
	font-family: var(--fw-font-body);
	font-size: var(--fw-step-0);
	line-height: 1.6;
	color: var(--fw-ink);
	background: var(--fw-paper);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
.fw-site *, .fw-site *::before, .fw-site *::after { box-sizing: border-box; }
:where(.fw-site) img { max-width: 100%; height: auto; display: block; }
:where(.fw-site) a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.fw-site :focus-visible { outline: 3px solid var(--fw-focus); outline-offset: 3px; }
.fw-dark :focus-visible, .fw-site .fw-dark :focus-visible { outline-color: var(--fw-yellow); }
:where(.fw-site) :where(h1, h2, h3, h4, h5, h6) {
	font-family: var(--fw-font-display);
	font-stretch: var(--fw-display-stretch);
	font-weight: 650;
	line-height: 1.08;
	letter-spacing: -0.012em;
	margin: 0 0 var(--fw-s-2);
	padding: 0;
	color: inherit;
	text-wrap: balance;
}
/* Bold headings kept moderate (2026-10-26 review: 68px bold H2s read too heavy). Display-size
   headlines are set per component in direction-editorial.css (light weight). */
:where(.fw-site) h1 { font-size: clamp(2.1rem, 1.6rem + 2vw, 3.25rem); }
:where(.fw-site) h2 { font-size: clamp(1.55rem, 1.3rem + 1.1vw, 2.35rem); line-height: 1.12; }
:where(.fw-site) h3 { font-size: clamp(1.2rem, 1.1rem + .45vw, 1.5rem); line-height: 1.2; }
:where(.fw-site) h4 { font-size: clamp(1.05rem, 1rem + .2vw, 1.2rem); line-height: 1.25; }
:where(.fw-site) h5 { font-size: 1.1rem; line-height: 1.3; }
:where(.fw-site) h6 { font-size: 1rem; line-height: 1.3; font-weight: 600; }
:where(.fw-site) :where(h1, h2, h3, h4, h5, h6) :where(strong, b) { font-weight: inherit; }
:where(.fw-site) li:empty { display: none; }
:where(.fw-site) p { margin: 0 0 var(--fw-s-2); max-width: 68ch; text-wrap: pretty; }
.fw-lead { font-size: var(--fw-step-1); line-height: 1.5; color: var(--fw-steel-700); }
.fw-muted { color: var(--fw-steel-600); }
.fw-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.fw-skip { position: absolute; left: var(--fw-s-2); top: -100px; z-index: 1000; padding: .75rem 1rem; background: var(--fw-yellow); color: var(--fw-ink); font-weight: 650; }
.fw-skip:focus { top: var(--fw-s-2); }

/* ---------- Layout ---------- */
.fw-container { width: 100%; max-width: calc(var(--fw-max) + 2 * var(--fw-gutter)); margin: 0 auto; padding: 0 var(--fw-gutter); }
.fw-section { padding: var(--fw-section) 0; position: relative; }
.fw-section--tight { padding: calc(var(--fw-section) * .6) 0; }
.fw-concrete { background: var(--fw-concrete); }
.fw-dark { background: var(--fw-ink); color: #fff; }
.fw-dark .fw-lead, .fw-dark .fw-muted { color: var(--fw-steel-300); }
.fw-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--fw-gutter); }
.fw-span-4 { grid-column-end: span 4; } .fw-span-5 { grid-column-end: span 5; } .fw-span-6 { grid-column-end: span 6; }
.fw-span-7 { grid-column-end: span 7; } .fw-span-8 { grid-column-end: span 8; } .fw-start-7 { grid-column-start: 7; } .fw-start-8 { grid-column-start: 8; }
@media (max-width: 900px) { .fw-grid > [class*="fw-span-"] { grid-column: 1 / -1; } }

/* Section head: eyebrow with a dimension-line tick, title, optional aside */
.fw-eyebrow {
	display: inline-flex; align-items: center; gap: .75rem;
	margin: 0 0 var(--fw-s-3);
	font: 500 .75rem/1.2 var(--fw-font-mono); letter-spacing: .12em; text-transform: uppercase;
	color: var(--fw-steel-600);
}
.fw-dark .fw-eyebrow { color: var(--fw-steel-300); }
.fw-eyebrow::before { content: ""; width: 28px; height: 9px; border: solid currentColor; border-width: 0 1px; background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat; }
.fw-eyebrow b { font-weight: 500; color: var(--fw-ink); }
.fw-dark .fw-eyebrow b { color: var(--fw-yellow); }
.fw-head { display: flex; align-items: end; justify-content: space-between; gap: var(--fw-s-4); margin-bottom: var(--fw-s-5); flex-wrap: wrap; }
.fw-head h2 { margin: 0; max-width: 18ch; }

/* ---------- Buttons & links ---------- */
.fw-btn {
	--_bg: var(--fw-yellow); --_fg: var(--fw-ink); --_bd: var(--fw-yellow);
	display: inline-flex; align-items: center; gap: .6rem;
	min-height: 48px; padding: .8rem 1.35rem;
	font: 650 .95rem/1.1 var(--fw-font-body); letter-spacing: .01em; text-decoration: none;
	color: var(--_fg); background: var(--_bg); border: 1.5px solid var(--_bd); border-radius: var(--fw-radius);
	cursor: pointer; transition: background-color .2s var(--fw-ease), color .2s, border-color .2s, transform .2s var(--fw-ease);
}
.fw-btn:hover { --_bg: var(--fw-yellow-hi); --_bd: var(--fw-yellow-hi); }
.fw-btn:active { transform: translateY(1px); }
.fw-btn--ghost { --_bg: transparent; --_fg: var(--fw-ink); --_bd: var(--fw-ink); }
.fw-btn--ghost:hover { --_bg: var(--fw-ink); --_fg: #fff; --_bd: var(--fw-ink); }
.fw-dark .fw-btn--ghost, .fw-btn--on-dark { --_fg: #fff; --_bd: rgba(255,255,255,.6); --_bg: transparent; }
.fw-dark .fw-btn--ghost:hover, .fw-btn--on-dark:hover { --_bg: #fff; --_fg: var(--fw-ink); --_bd: #fff; }
.fw-btn svg { width: 18px; height: 18px; transition: transform .25s var(--fw-ease); }
.fw-btn:hover svg { transform: translateX(3px); }
.fw-link { display: inline-flex; align-items: center; gap: .5rem; font-weight: 650; text-decoration: none; border-bottom: 1.5px solid var(--fw-yellow); padding-bottom: 2px; }
.fw-link:hover { border-bottom-color: currentColor; }
.fw-link { white-space: nowrap; }
.fw-link svg { width: 18px; height: 18px; flex: none; transition: transform .25s var(--fw-ease); }
.fw-link:hover svg { transform: translateX(3px); }
.fw-actions { display: flex; flex-wrap: wrap; gap: var(--fw-s-2); align-items: center; }

/* ---------- Header & navigation ---------- */
.fw-header { position: sticky; top: 0; z-index: 900; background: var(--fw-paper); /* no backdrop-filter: it would trap the fixed mobile menu */ border-bottom: 1px solid var(--fw-line); transition: box-shadow .25s; }
.fw-header.is-scrolled { box-shadow: 0 8px 24px -18px rgba(22,24,27,.35); }
.fw-header__bar { display: flex; align-items: center; gap: var(--fw-s-4); min-height: var(--fw-header-h); }
.fw-logo { display: block; flex: none; }
.fw-logo img { width: auto; height: 52px; }
.fw-nav { margin-left: auto; }
.fw-nav__list { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.fw-nav__item { position: relative; margin: 0; padding: 0; }
.fw-nav__link, .fw-nav__toggle {
	display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: .5rem .8rem;
	font: 600 .95rem/1 var(--fw-font-body); color: var(--fw-ink); text-decoration: none;
	background: none; border: 0; border-radius: var(--fw-radius); cursor: pointer; position: relative;
}
.fw-nav__link::after, .fw-nav__toggle::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: 6px; height: 2px; background: var(--fw-yellow); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--fw-ease); }
.fw-nav__link:hover::after, .fw-nav__toggle:hover::after, .fw-nav__toggle[aria-expanded="true"]::after, .fw-nav__link[aria-current="page"]::after { transform: scaleX(1); }
.fw-nav__toggle svg { width: 12px; height: 12px; transition: transform .2s; }
.fw-nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.fw-nav__sub {
	position: absolute; top: calc(100% + 6px); left: 0; min-width: 270px; margin: 0; padding: .5rem; list-style: none;
	background: var(--fw-paper); border: 1px solid var(--fw-line); border-top: 3px solid var(--fw-yellow);
	box-shadow: 0 24px 40px -24px rgba(22,24,27,.4);
	opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .18s, transform .18s var(--fw-ease), visibility 0s .18s;
}
.fw-nav__toggle[aria-expanded="true"] + .fw-nav__sub { opacity: 1; visibility: visible; transform: none; transition: opacity .18s, transform .18s var(--fw-ease); }
.fw-nav__sub a { display: block; padding: .65rem .75rem; font-weight: 500; text-decoration: none; border-radius: var(--fw-radius); }
.fw-nav__sub a:hover { background: var(--fw-concrete); box-shadow: inset 3px 0 0 var(--fw-yellow); }
.fw-header__cta { flex: none; }
.fw-menu-btn { display: none; }
@media (max-width: 1100px) {
	:root { --fw-header-h: 72px; }
	.fw-logo img { height: 44px; }
	.fw-header__cta { display: none; }
	.fw-menu-btn { display: inline-flex; margin-left: auto; align-items: center; gap: .5rem; min-height: 44px; padding: .5rem .9rem; font: 650 .95rem/1 var(--fw-font-body); color: var(--fw-ink); background: none; border: 1.5px solid var(--fw-ink); border-radius: var(--fw-radius); cursor: pointer; }
	.fw-nav { position: fixed; inset: var(--fw-header-h) 0 0 0; margin: 0; padding: var(--fw-s-2) var(--fw-gutter) var(--fw-s-5); overflow-y: auto; background: var(--fw-paper); display: none; }
	.fw-nav.is-open { display: block; }
	.fw-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.fw-nav__item { border-bottom: 1px solid var(--fw-line); }
	.fw-nav__link, .fw-nav__toggle { width: 100%; justify-content: space-between; min-height: 56px; font-size: 1.1rem; padding: .75rem 0; }
	.fw-nav__link::after, .fw-nav__toggle::after { display: none; }
	.fw-nav__sub { position: static; display: none; min-width: 0; padding: 0 0 .75rem; border: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; }
	.fw-nav__toggle[aria-expanded="true"] + .fw-nav__sub { display: block; }
	.fw-nav__sub a { padding: .7rem 1rem; color: var(--fw-steel-700); }
	.fw-nav__mobile-cta { display: block !important; margin-top: var(--fw-s-4); }
	html.fw-nav-open { overflow: hidden; }
}
.fw-nav__mobile-cta { display: none !important; }

/* ---------- Hero ---------- */
.fw-hero { position: relative; color: #fff; background: var(--fw-ink); overflow: hidden; isolation: isolate; }
.fw-hero__media { position: absolute; inset: 0; z-index: -2; }
.fw-hero__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.6s var(--fw-ease); }
.fw-loaded .fw-hero__media img { transform: scale(1); }
.fw-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(14,15,17,.88) 0%, rgba(14,15,17,.7) 42%, rgba(14,15,17,.18) 100%), linear-gradient(0deg, rgba(14,15,17,.55), transparent 40%); }
.fw-hero__grid { position: absolute; inset: 0; z-index: -1; pointer-events: none; color: rgba(255,255,255,.16); }
.fw-hero__inner { min-height: min(84vh, 820px); display: flex; flex-direction: column; justify-content: flex-end; padding-top: calc(var(--fw-section) * 1.2); padding-bottom: var(--fw-s-6); }
.fw-hero h1 { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.6rem); max-width: 15ch; margin-bottom: var(--fw-s-3); }
.fw-hero .fw-lead { color: #e2e4e7; max-width: 52ch; margin-bottom: var(--fw-s-4); }
.fw-hero__tagline { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: 0 0 var(--fw-s-3); padding: 0; list-style: none; font: 500 .8rem/1.3 var(--fw-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fw-yellow); }
.fw-hero__tagline li { display: inline-flex; align-items: center; gap: 1.1rem; }
.fw-hero__tagline li + li::before { content: ""; width: 1px; height: 12px; background: rgba(255,255,255,.4); }
.fw-hero__caption { position: absolute; right: var(--fw-gutter); top: var(--fw-s-4); display: flex; gap: .6rem; align-items: center; font: 500 .75rem/1.3 var(--fw-font-mono); letter-spacing: .08em; color: #d6d9dd; text-decoration: none; padding: .5rem .75rem; background: rgba(14,15,17,.55); border-left: 2px solid var(--fw-yellow); }
.fw-hero__caption:hover { color: #fff; }
@media (max-width: 900px) { .fw-hero__caption { position: static; margin-top: var(--fw-s-4); align-self: flex-start; } .fw-hero::before { background: linear-gradient(0deg, rgba(14,15,17,.92) 15%, rgba(14,15,17,.55) 70%, rgba(14,15,17,.35)); } }

/* Page hero (interior pages) */
.fw-pagehero { padding: calc(var(--fw-section) * .7) 0 calc(var(--fw-section) * .5); border-bottom: 1px solid var(--fw-line); background: var(--fw-concrete); position: relative; overflow: hidden; }
.fw-pagehero h1 { font-size: var(--fw-step-4); max-width: 20ch; }
.fw-crumbs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 var(--fw-s-3); padding: 0; list-style: none; font: 500 .78rem/1.3 var(--fw-font-mono); letter-spacing: .06em; color: var(--fw-steel-600); }
.fw-crumbs li + li::before { content: "/"; margin-right: .5rem; color: var(--fw-steel-300); }
.fw-crumbs a { text-decoration: none; }
.fw-crumbs a:hover { text-decoration: underline; }

/* ---------- Sector index (category strip) ---------- */
.fw-sectors { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-top: 1px solid var(--fw-line); border-left: 1px solid var(--fw-line); margin: 0; padding: 0; list-style: none; }
.fw-sectors li { margin: 0; border-right: 1px solid var(--fw-line); border-bottom: 1px solid var(--fw-line); }
.fw-sectors a { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1.4rem 1.25rem; text-decoration: none; font-weight: 600; font-size: var(--fw-step-1); transition: background-color .2s; position: relative; }
.fw-sectors a::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--fw-yellow); transform: scaleY(0); transform-origin: bottom; transition: transform .25s var(--fw-ease); }
.fw-sectors a:hover { background: var(--fw-paper); }
.fw-sectors a:hover::before { transform: scaleY(1); }
.fw-sectors .fw-count { font: 500 .8rem/1 var(--fw-font-mono); color: var(--fw-steel-600); }
@media (max-width: 900px) { .fw-sectors { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* ---------- About / pillars ---------- */
.fw-pillars { display: grid; gap: 0; margin: var(--fw-s-4) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--fw-line); }
.fw-pillars li { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--fw-line); margin: 0; }
.fw-pillars .fw-num { font: 500 .8rem/1.6 var(--fw-font-mono); color: var(--fw-steel-600); }
.fw-pillars strong { display: block; font-size: var(--fw-step-1); font-stretch: var(--fw-display-stretch); }
.fw-fact { display: inline-flex; align-items: baseline; gap: .75rem; padding: 1rem 1.25rem; border-left: 3px solid var(--fw-yellow); background: var(--fw-concrete); margin: 0 0 var(--fw-s-4); }
.fw-fact span { font: 500 .78rem/1.2 var(--fw-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fw-steel-600); }
.fw-fact b { font-size: var(--fw-step-2); font-stretch: var(--fw-display-stretch); font-weight: 680; }

/* ---------- Services list ---------- */
.fw-services { list-style: none; margin: 0; padding: 0; counter-reset: svc; border-top: 1px solid var(--fw-line); }
.fw-services li { margin: 0; border-bottom: 1px solid var(--fw-line); counter-increment: svc; }
.fw-services a { display: grid; grid-template-columns: 4.5rem minmax(0, 1.1fr) minmax(0, 1.6fr) 2.5rem; gap: var(--fw-gutter); align-items: center; padding: 1.75rem 0; text-decoration: none; transition: background-color .25s, padding .25s var(--fw-ease); }
.fw-services a::before { content: counter(svc, decimal-leading-zero); font: 500 .85rem/1 var(--fw-font-mono); color: var(--fw-steel-600); }
.fw-services h3 { margin: 0; font-size: var(--fw-step-2); }
.fw-services p { margin: 0; color: var(--fw-steel-700); }
.fw-services .fw-arrow { justify-self: end; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border: 1.5px solid var(--fw-ink); border-radius: 50%; transition: background-color .25s, transform .3s var(--fw-ease); }
.fw-services .fw-arrow svg { width: 18px; height: 18px; }
.fw-services a:hover { background: var(--fw-concrete); padding-left: 1rem; padding-right: 1rem; }
.fw-services a:hover .fw-arrow { background: var(--fw-yellow); border-color: var(--fw-yellow); transform: rotate(-45deg); }
@media (max-width: 800px) { .fw-services a { grid-template-columns: 3rem 1fr 2.5rem; } .fw-services p { grid-column: 2 / 3; } .fw-services .fw-arrow { grid-row: 1; grid-column: 3; } }

/* ---------- SCIF band ---------- */
.fw-scif { overflow: hidden; }
.fw-scif__plan { position: absolute; right: -4%; top: 50%; width: min(56vw, 760px); transform: translateY(-50%); color: rgba(255,255,255,.22); pointer-events: none; }
.fw-scif__plan .fw-accent { color: var(--fw-yellow); }
.fw-standards { display: flex; flex-wrap: wrap; gap: .5rem; margin: var(--fw-s-4) 0; padding: 0; list-style: none; }
.fw-standards li { margin: 0; padding: .45rem .7rem; font: 500 .78rem/1.2 var(--fw-font-mono); letter-spacing: .04em; border: 1px solid var(--fw-line-dark); color: #e8eaec; }
.fw-scif .fw-note { font-size: var(--fw-step--1); color: var(--fw-steel-300); max-width: 52ch; }
@media (max-width: 900px) { .fw-scif__plan { opacity: .45; width: 120vw; right: -40%; } }

/* ---------- Project cards ---------- */
.fw-cards { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: var(--fw-gutter); margin: 0; padding: 0; list-style: none; }
.fw-cards > li { margin: 0; grid-column: span 4; }
.fw-cards--feature { row-gap: calc(var(--fw-gutter) * 1.6); }
.fw-cards--feature > li:nth-child(4n+1), .fw-cards--feature > li:nth-child(4n) { grid-column: span 7; }
.fw-cards--feature > li:nth-child(4n+2), .fw-cards--feature > li:nth-child(4n+3) { grid-column: span 5; }
.fw-cards--feature .fw-card__media { aspect-ratio: auto; height: clamp(240px, 30vw, 440px); }
@media (max-width: 1000px) { .fw-cards > li, .fw-cards--feature > li:nth-child(n) { grid-column: span 6; grid-row: auto; } }
@media (max-width: 640px) { .fw-cards > li, .fw-cards--feature > li:nth-child(n) { grid-column: 1 / -1; } }
.fw-card { position: relative; display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.fw-card__media { position: relative; overflow: hidden; background: var(--fw-concrete); aspect-ratio: 4 / 3; }
.fw-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--fw-ease), filter .4s; }
.fw-card:hover .fw-card__media img { transform: scale(1.045); }
.fw-card__media::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: var(--fw-yellow); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--fw-ease); }
.fw-card:hover .fw-card__media::after, .fw-card:focus-visible .fw-card__media::after { transform: scaleX(1); }
.fw-card__body { padding: 1rem 0 0; display: grid; gap: .35rem; }
.fw-card__meta span + span::before { content: "·"; margin-right: .6rem; }
.fw-card__meta { display: flex; flex-wrap: wrap; gap: .25rem .6rem; font: 500 .75rem/1.3 var(--fw-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fw-steel-600); }
.fw-card__title { margin: 0 !important; font-size: var(--fw-step-1) !important; line-height: 1.2 !important; }
.fw-card__title span { background: linear-gradient(var(--fw-ink), var(--fw-ink)) 0 100% / 0 1.5px no-repeat; transition: background-size .35s var(--fw-ease); }
.fw-card:hover .fw-card__title span { background-size: 100% 1.5px; }

/* Filter bar (projects index) */
.fw-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 var(--fw-s-5); padding: 0; list-style: none; }
.fw-filters li { margin: 0; }
.fw-filter { min-height: 42px; padding: .55rem 1rem; font: 600 .9rem/1 var(--fw-font-body); color: var(--fw-ink); background: var(--fw-paper); border: 1.5px solid var(--fw-line); border-radius: 999px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: .5rem; transition: border-color .2s, background-color .2s; }
.fw-filter:hover { border-color: var(--fw-ink); }
.fw-filter[aria-pressed="true"], .fw-filter[aria-current="page"] { background: var(--fw-ink); border-color: var(--fw-ink); color: #fff; }
.fw-filter .fw-count { font: 500 .75rem/1 var(--fw-font-mono); opacity: .75; }
.fw-results { font: 500 .8rem/1.3 var(--fw-font-mono); color: var(--fw-steel-600); margin-bottom: var(--fw-s-3); }

/* ---------- Photo mosaic (selected work) ---------- */
.fw-mosaic { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); grid-auto-rows: clamp(150px, 15vw, 240px); grid-auto-flow: dense; gap: 12px; margin: 0; padding: 0; list-style: none; }
.fw-mosaic li { margin: 0; position: relative; overflow: hidden; background: var(--fw-ink); }
.fw-mosaic .c4 { grid-column: span 4; } .fw-mosaic .c5 { grid-column: span 5; } .fw-mosaic .c7 { grid-column: span 7; } .fw-mosaic .c8 { grid-column: span 8; }
.fw-mosaic .r2 { grid-row: span 2; }
.fw-mosaic a { display: block; height: 100%; color: #fff; text-decoration: none; }
.fw-mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--fw-ease), opacity .4s; }
.fw-mosaic a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(14,15,17,.82) 0%, rgba(14,15,17,.15) 45%, transparent 70%); transition: opacity .4s; }
.fw-mosaic a:hover img, .fw-mosaic a:focus-visible img { transform: scale(1.05); }
.fw-mosaic__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: grid; gap: .2rem; padding: 1rem 1.1rem; }
.fw-mosaic__cap strong { font-size: var(--fw-step-1); font-stretch: var(--fw-display-stretch); font-weight: 650; line-height: 1.2; }
.fw-mosaic__cap span { font: 500 .72rem/1.3 var(--fw-font-mono); letter-spacing: .08em; text-transform: uppercase; color: #d9dce0; }
.fw-mosaic__cap::before { content: ""; width: 28px; height: 3px; background: var(--fw-yellow); margin-bottom: .45rem; transform-origin: left; transition: transform .35s var(--fw-ease); }
.fw-mosaic a:hover .fw-mosaic__cap::before { transform: scaleX(2); }
.fw-mosaic a:focus-visible { outline-offset: -3px; }
@media (max-width: 700px) {
	.fw-mosaic { grid-template-columns: 1fr 1fr; grid-auto-rows: 170px; }
	.fw-mosaic li[class] { grid-column: span 1; grid-row: span 1; }
	.fw-mosaic li:nth-child(3n+1) { grid-column: 1 / -1; grid-row: span 2; }
	.fw-mosaic__cap strong { font-size: 1rem; }
}

/* ---------- Logo wall ---------- */
.fw-logos { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--fw-line); border-left: 1px solid var(--fw-line); }
.fw-logos li { margin: 0; display: grid; place-items: center; padding: .5rem 1.5rem; aspect-ratio: 16/9; overflow: hidden; border-right: 1px solid var(--fw-line); border-bottom: 1px solid var(--fw-line); background: var(--fw-paper); }
.fw-logos img { width: min(190px, 78%); height: auto; max-height: none; filter: grayscale(1); opacity: .85; transition: filter .3s, opacity .3s; mix-blend-mode: multiply; }
.fw-logos li:hover img { filter: none; opacity: 1; }
@media (max-width: 700px) { .fw-logos { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* Awards */
.fw-awards { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--fw-line-dark); }
.fw-awards li { display: grid; grid-template-columns: 5rem 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--fw-line-dark); margin: 0; }
.fw-awards .fw-year { font: 500 .85rem/1.6 var(--fw-font-mono); color: var(--fw-yellow); }
.fw-badges { display: flex; flex-wrap: wrap; gap: var(--fw-s-2); margin-top: var(--fw-s-4); align-items: center; }
.fw-badges img { height: 72px; width: auto; background: #fff; padding: .4rem; }

/* CTA band */
.fw-cta { background: var(--fw-yellow); color: var(--fw-ink); position: relative; overflow: hidden; }
.fw-cta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--fw-s-4); padding-top: var(--fw-s-6); padding-bottom: var(--fw-s-6); position: relative; }
.fw-cta h2 { font-size: var(--fw-step-3); margin: 0; max-width: 22ch; }
.fw-cta .fw-btn { --_bg: var(--fw-ink); --_fg: #fff; --_bd: var(--fw-ink); }
.fw-cta .fw-btn:hover { --_bg: #000; --_bd: #000; }
.fw-cta .fw-btn--ghost { --_bg: transparent; --_fg: var(--fw-ink); --_bd: var(--fw-ink); }
.fw-cta .fw-btn--ghost:hover { --_bg: var(--fw-ink); --_fg: #fff; }
.fw-cta__lines { position: absolute; inset: 0; pointer-events: none; color: rgba(22,24,27,.12); }

/* ---------- Footer ---------- */
.fw-footer { background: var(--fw-ink); color: #d5d8dc; padding: var(--fw-s-6) 0 calc(var(--fw-s-4) + 72px); font-size: var(--fw-step--1); }
.fw-footer a { color: #fff; text-decoration: none; }
.fw-footer a:hover { text-decoration: underline; }
.fw-footer__top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--fw-gutter); padding-bottom: var(--fw-s-5); border-bottom: 1px solid var(--fw-line-dark); }
.fw-footer__logo { display: inline-block; background: #fff; padding: .75rem 1rem; margin-bottom: var(--fw-s-3); }
.fw-footer__logo img { height: 52px; width: auto; }
.fw-footer h2 { font: 500 .75rem/1.2 var(--fw-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fw-steel-300); margin: 0 0 var(--fw-s-2); }
.fw-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.fw-footer address { font-style: normal; line-height: 1.7; }
.fw-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--fw-s-2); padding-top: var(--fw-s-3); color: var(--fw-steel-300); }
@media (max-width: 900px) { .fw-footer__top { grid-template-columns: 1fr 1fr; } .fw-footer__top > :first-child { grid-column: 1 / -1; } }

/* ---------- Project detail ---------- */
.fw-project-hero { position: relative; background: var(--fw-ink); }
.fw-project-hero img { width: 100%; height: min(72vh, 720px); object-fit: cover; opacity: .97; }
.fw-project-head { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: var(--fw-s-6); padding: var(--fw-s-6) 0 var(--fw-s-5); align-items: start; }
.fw-project-head h1 { font-size: var(--fw-step-4); max-width: 16ch; }
.fw-specs { margin: 0; display: grid; border-top: 2px solid var(--fw-ink); }
.fw-specs > div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--fw-line); }
.fw-specs dt { font: 500 .75rem/1.6 var(--fw-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fw-steel-600); }
.fw-specs dd { margin: 0; font-weight: 550; }
@media (max-width: 900px) { .fw-project-head { grid-template-columns: 1fr; gap: var(--fw-s-4); } }

.fw-gallery { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); grid-auto-flow: dense; gap: 12px; margin: 0; padding: 0; list-style: none; }
.fw-gallery li { margin: 0; grid-column: span 4; aspect-ratio: 4 / 3; }
/* Rhythm per 6 photos: one large (8 cols x 2 rows) beside two small, then a row of three; large alternates sides. */
.fw-gallery li:nth-child(12n+1) { grid-column: 1 / span 8; grid-row: span 2; aspect-ratio: auto; }
.fw-gallery li:nth-child(12n+7) { grid-column: 5 / span 8; grid-row: span 2; aspect-ratio: auto; }
@media (max-width: 800px) {
	.fw-gallery li:nth-child(n) { grid-column: span 6; grid-row: auto; aspect-ratio: 4 / 3; }
	.fw-gallery li:nth-child(5n+1) { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
}
.fw-gallery button { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: var(--fw-concrete); cursor: zoom-in; overflow: hidden; position: relative; }
.fw-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--fw-ease); }
.fw-gallery button:hover img { transform: scale(1.035); }
.fw-gallery .fw-idx { position: absolute; left: .6rem; bottom: .6rem; padding: .2rem .45rem; font: 500 .7rem/1.2 var(--fw-font-mono); background: rgba(14,15,17,.75); color: #fff; opacity: 0; transition: opacity .2s; }
.fw-gallery button:hover .fw-idx, .fw-gallery button:focus-visible .fw-idx { opacity: 1; }

/* Lightbox (native <dialog>) */
.fw-lightbox { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(10,11,12,.96); color: #fff; }
.fw-lightbox::backdrop { background: rgba(10,11,12,.9); }
.fw-lightbox__frame { position: absolute; inset: 64px 72px 72px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.fw-lightbox__frame img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transition: opacity .25s ease; }
.fw-lightbox__frame img.is-fading { opacity: 0; }
.fw-lightbox__bar { position: absolute; top: 0; left: 0; right: 0; height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 1rem 0 1.5rem; font: 500 .8rem/1.2 var(--fw-font-mono); letter-spacing: .06em; }
.fw-lightbox button { min-width: 48px; min-height: 48px; display: grid; place-items: center; color: #fff; background: transparent; border: 1px solid rgba(255,255,255,.3); border-radius: var(--fw-radius); cursor: pointer; }
.fw-lightbox button:hover { background: rgba(255,255,255,.12); }
.fw-lightbox__prev, .fw-lightbox__next { position: absolute; top: 50%; transform: translateY(-50%); }
.fw-lightbox__prev { left: 12px; } .fw-lightbox__next { right: 12px; }
.fw-site .fw-lightbox__caption { max-width: none; margin: 0; }
.fw-lightbox__caption { position: absolute; left: 0; right: 0; bottom: 0; height: 72px; display: flex; align-items: center; justify-content: center; font-size: .9rem; color: #c9ccd1; padding: 0 1rem; text-align: center; }
@media (max-width: 700px) { .fw-lightbox__frame { inset: 64px 8px 96px; } .fw-lightbox__prev, .fw-lightbox__next { top: auto; bottom: 14px; transform: none; } }

.fw-pager { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--fw-line); }
.fw-pager a { display: grid; gap: .3rem; padding: var(--fw-s-4) 0; text-decoration: none; }
.fw-pager a:last-child { text-align: right; border-left: 1px solid var(--fw-line); padding-left: var(--fw-s-3); }
.fw-pager span { font: 500 .75rem/1.2 var(--fw-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fw-steel-600); }
.fw-pager strong { font-size: var(--fw-step-1); font-stretch: var(--fw-display-stretch); }

/* ---------- Architectural line graphics ---------- */
.fw-lines path, .fw-lines line, .fw-lines rect, .fw-lines circle { vector-effect: non-scaling-stroke; }
.fw-draw { stroke-dasharray: var(--len, 1200); stroke-dashoffset: 0; }

/* ---------- Motion (progressive enhancement) ----------
   Content is fully visible by default. Only when JS adds .fw-motion to <html>
   (and the user has not requested reduced motion) do elements start hidden
   and reveal on scroll. If JS fails, nothing is hidden. */
.fw-motion [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--fw-ease), transform .7s var(--fw-ease); transition-delay: var(--d, 0s); }
.fw-motion [data-reveal].is-in { opacity: 1; transform: none; }
.fw-motion .fw-draw { stroke-dashoffset: var(--len, 1200); transition: stroke-dashoffset 2.2s var(--fw-ease); transition-delay: var(--d, 0s); }
.fw-motion .is-in .fw-draw, .fw-motion .fw-draw.is-in { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
	.fw-site *, .fw-site *::before, .fw-site *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
	.fw-hero__media img { transform: none !important; }
}
@media (forced-colors: active) {
	.fw-btn, .fw-filter, .fw-card__media::after { border: 1px solid CanvasText; }
}
@media print {
	.fw-header, .fw-footer, .fw-cta, .fw-lightbox, .fwa-root { display: none !important; }
	.fw-hero { color: #000; background: none; } .fw-hero::before, .fw-hero__media { display: none; }
}

/* Keep the assistant launcher out of the way while the mobile menu is open. */
html.fw-nav-open .fwa-root { display: none; }
.fw-mosaic li:not(.r2) .fw-mosaic__cap strong { font-size: 1.05rem; }
.fw-mosaic li:not(.r2) .fw-mosaic__cap { padding: .75rem 1rem; }