/* ============================================================
Pole Barn — site/style.css ("rugged warm" skin)
A block-palette skin of the shared vocabulary, derived from
_easton-template. Same variable NAMES, new VALUES.
Palette: warm charcoal + barn red, timber & oat neutrals,
galvanized steel accents.
Fonts: Zilla Slab (headings, slab) + Source Sans 3 (body), self-hosted.
============================================================ */
/* ---------- Design Tokens ---------- */
:root {
/* --navy* = warm charcoal darks (header, dark sections, footer, form card) */
--navy: #2B2A28; /* dark sections, header, footer */
--navy-2: #35332F; /* slightly lighter charcoal panels */
--navy-card: #3A362F; /* quote-form card (warm dark) */
/* --teal* = timber brown — the secondary accent (labels, h3, links, bands) */
--teal: #6B4E3D; /* timber — section labels, links on light */
--teal-bright: #C9A57E; /* warm tan — timber accent on dark bg */
/* --orange* = barn red — the primary action color (CTA, phone) */
--orange: #8C3A2B; /* barn red — primary CTA, phone accents */
--orange-dark: #6E2C20; /* barn red hover */
--orange-bright: #D97A54; /* warm brick — barn-red accent on dark bg */
--color-link: var(--teal);
--color-text: #2E2B27;
--color-text-muted: #6f6a62;
--color-heading: #2B2A28;
--color-bg: #ffffff;
--color-bg-alt: #F3ECDD; /* warm oat cream */
--color-border: #e4ddd0;
--color-error: #b00020;
--color-focus: var(--orange);
--color-fg-on-dark: #ffffff;
/* barn-red accent used as a decorative RULE/BORDER on dark sections
(project-card top rule on --navy-2, footer h4 underline on --navy,
service-card-header inset on --teal). Role split from --orange so a
palette whose primary is too dark to read on its own dark sections can
lighten just these accents. DEFAULT aliases --orange, whose barn-red
melts on the dark bands (1.0–1.9:1) — grandfathered as shipped; the two
alternates re-derive it to ≥3:1 on navy/navy-2/teal. */
--accent-frame: var(--orange);
/* muted warm-neutral inks ON the dark charcoal chrome (top bar + footer) —
tinted per palette so the chrome tracks the skin. */
--on-dark-nav: #d9d3c7; /* top-bar text + links (9.62:1 on --navy) */
--on-dark-social: #cfc7b8; /* top-bar social icons (8.55:1) */
--on-dark-body: #b0a99c; /* footer body text + legal links (6.15:1) */
--on-dark-link: #cfc7b9; /* footer nav + contact links (8.55:1) */
--on-dark-faint: #8f8879; /* legal fine print — 4.07:1 on --navy is grandfathered (pre-contract); alternates hit ≥4.5 */
--on-teal-label: #e6dcc8; /* pale label ON the timber/teal band (5.55:1 on --teal) */
/* galvanized-steel corrugated ribbing (hero edge, .metal-edge, steps post
line) — three-stop rib gradient. Retired the old unused --galvanized
token in favour of these three consumed stops. Decorative texture (no
text-contrast requirement); shifted per palette so the corrugation
tracks the skin's temperature. */
--metal-1: #767d84; /* mid rib */
--metal-2: #9aa2a8; /* rib highlight */
--metal-3: #656c73; /* rib shadow */
/* photo-overlay washes (tinted darkening over section bg images). The
charcoal wash tint (30,28,26) is a hair deeper than --navy so photos
read; re-derived per palette. Low-alpha scrims stay tinted too. */
--overlay-dark: linear-gradient(rgba(30,28,26,0.82), rgba(30,28,26,0.88)); /* .bg-host default */
--overlay-teal: linear-gradient(rgba(74,54,42,0.86), rgba(60,44,34,0.92)); /* .bg-host.bg-teal (timber-tinted) */
--overlay-soft: linear-gradient(rgba(30,28,26,0.55), rgba(30,28,26,0.72)); /* .bg-host.bg-soft (banner) */
--overlay-scrim: linear-gradient(rgba(30,28,26,0.30), rgba(30,28,26,0.30)); /* flex-media--overlay light scrim */
--overlay-scrim-strong: linear-gradient(rgba(30,28,26,0.35), rgba(30,28,26,0.35)); /* flex-media--long-center scrim */
--overlay-panel: rgba(30,28,26,0.78); /* translucent .overlay-half / .overlay-center text panels */
/* brand-tinted rings/washes (alpha too high / too saturated to read as
neutral). NOTE: the default values carry easton's teal (46,112,119) —
a stale clone leftover kept BYTE-IDENTICAL so the shipped default is
unchanged; both alternates re-derive them from their own accents. */
--focus-ring: rgba(46,112,119,0.18); /* utility-form .field:focus halo */
--wash-accent: rgba(46,112,119,0.22); /* .feature-aside-box panel wash */
/* select placeholder ink + caret data-URI (dark quote-bar / contact form
selects sit on the --oat field) — re-emitted per palette. */
--select-ink: #6b7280;
--select-caret: url("data:image/svg+xml;utf8,");
/* check-bullet / tick data-URIs — a CSS var can't interpolate into a
data-URI, so each palette re-emits the whole url() with its own fill.
--bullet-hero rides the DARK hero panel; --bullet-badge/--bullet-snow
ride LIGHT sections; --tick-timber is the light-bg feature tick (its
tan 2.2:1 on white is grandfathered decorative — alternates use a
darker secondary). The white on-dark tick stays a literal (exempt). */
--bullet-hero: url("data:image/svg+xml;utf8,");
--bullet-badge: url("data:image/svg+xml;utf8,");
--bullet-snow: url("data:image/svg+xml;utf8,");
--tick-timber: url("data:image/svg+xml;utf8,");
/* extra rugged-skin tokens */
--oat: #E7DCC7; /* deeper oat for cards/strips */
--radius: 0;
--shadow-sm: 0 1px 3px rgba(43,42,40,0.14);
--shadow-md: 0 10px 30px rgba(43,42,40,0.18);
--shadow-lg: 0 18px 50px rgba(43,42,40,0.30);
--max-w: 1200px;
--header-h: 80px;
--font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
--font-head: "Archivo", "Source Sans 3", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
/* ============================================================
ASSEMBLY-TIME PALETTE VARIANTS — the standard every skin follows
(full contract: templates/_template/CLAUDE.md "Color palettes")
Default (no attribute) = the warm-charcoal + barn-red pole-barn skin in
:root above. To build a site in another palette, set the attribute on
:
Rules of the system (hard requirements for every palette block):
• FULL-SPECTRUM — override EVERY color role from :root (same role, new
value), including the on-dark neutrals, metal ribbing, overlays,
rings, select ink/caret and every check-bullet data-URI. Exemptions:
white-on-dark inks stay white (--color-fg-on-dark; the literal #fff
headings/copy/button-ink on .section-dark, .hero, bands and the dark
form card; the rgba(255,255,255,…) washes; the white card/field/faq
surfaces on light sections; the white on-dark feature-tick data-URI),
and the low-alpha NEUTRAL shadows stay un-overridden (--shadow-sm/md/lg
and the rgba(43,42,40,…)/rgba(0,0,0,…) box + inset shadows, alpha ≤0.30
— at that opacity they read as neutral). Everything else — the four
overlay washes, the two scrims + panel, the focus/error rings, the
select caret and the bullet/tick URIs — is a role above and MUST be
re-derived.
• FUNCTION PRESERVED — light backgrounds stay light, dark sections stay
dark, inks stay dark-and-readable, error stays recognizably red. The
pole-barn identity holds: ONE loud PRIMARY action family (--orange*:
CTAs, phone, step nodes, project tags, decorative rules), a SEPARATE
secondary (--teal* timber: labels, h3, links, bands, keyline frames),
warm-neutral chrome darks (--navy*) and a soft section band
(--color-bg-alt). Nothing reorganizes which role does what.
• PALETTE SEPARATION — palettes differ at a glance INCLUDING neutrals.
Primary accents sit apart in hue (barn-red 9° vs denim cobalt 216° vs
harvest goldenrod 46° vs walnut caramel 29°); the section bands are
different hue FAMILIES or lightnesses (default warm oat-cream ~41°/91% vs
denim cool blue-gray ~219° vs harvest olive-wheat ~57° vs walnut warm tan
~36°/86%); the dark chrome carries an obvious temperature/depth shift
(warm charcoal ~40°/4% vs cool slate ~226° vs harvest warm espresso
~25°/25%/L13% vs walnut near-black coffee-charcoal ~26°/16%/L9%); and the
secondaries come from different families (timber-brown 22° vs deep teal
177° vs olive-bronze 49° vs walnut bronze-brown 33°). Where hue crowds —
the three WARM palettes' accents (barn-red 9° / goldenrod 46° / caramel
29°) box each other in — separation is carried by LIGHTNESS/CHROMA per the
family standard, not hue alone: walnut's caramel is brighter than the
barn-red, and its coffee-charcoal darks are deeper AND lower-chroma than
harvest's warm espresso so the two never read the same.
• CONTRAST — white on --orange/--teal/--navy* fills ≥4.5; --teal &
--orange as ink on --color-bg AND --color-bg-alt ≥4.5; --orange-bright
& --teal-bright on --navy AND --navy-2 ≥4.5; --on-teal-label on the
teal band ≥4.5; every --on-dark-* ink on --navy ≥4.5; --color-text on
--color-bg ≥7; --color-text-muted on both light bgs ≥4.5; and every
accent-on-dark DECORATIVE consumer (--accent-frame rules, hero bullet
circle, feature ticks, --teal-bright frames) ≥3:1. All three alternates
below pass ALL of these with zero failures. (The DEFAULT's grandfathered
shortfalls — --on-dark-faint 4.07:1, barn-red --accent-frame melting on
the dark bands, the 2.7:1 hero bullet and 2.2:1 tan feature tick, and
--orange-bright's 4.12:1 on --navy-2 — predate this contract and are
left as shipped; see the token comments.)
Add a palette by cloning a block below and re-deriving every role. The three
alternates span the separation standard: denim is a cool COUNTERPOINT to the
warm default, while harvest and walnut are both WARM — kept apart from each
other (and the default) by lightness/chroma, not hue (harvest = goldenrod +
visible-brown espresso darks; walnut = brighter caramel + deeper, cooler
coffee-charcoal darks + a distinct tan band). Cloning any of them inherits
the standard: when a new accent hue is boxed in, separate on lightness/chroma.
============================================================ */
/* Denim — saturated cobalt-blue primary (216°, a true blue set apart from
the repo's muted steel 205° / icy cyan 193–195° accents by its high
chroma) + deep-teal secondary, on a COOL family: slate-indigo darks,
cool blue-gray band + chrome, cool paper-white page. */
[data-theme="denim"] {
--navy: #232838; /* slate-indigo dark sections/header/footer (white 14.66:1) */
--navy-2: #2C3242; /* lighter slate panels (service/project cards) */
--navy-card: #2E3446; /* quote-form card (white 12.38:1) */
--teal: #316D6A; /* deep teal secondary — 5.96:1 white-on-fill; 5.61/4.89:1 as ink on bg/bg-alt */
--teal-bright: #86C0BC; /* pale teal on dark — 7.18:1 on --navy, 6.26:1 on --navy-2 */
--orange: #2B579A; /* cobalt PRIMARY — 7.16:1 white-on-fill; 6.74/5.88:1 as ink on bg/bg-alt */
--orange-dark: #213F73; /* cobalt hover (10.38:1 with white) */
--orange-bright: #7CA6DD; /* light cobalt on dark — 5.83:1 on --navy, 5.09:1 on --navy-2 */
--color-link: var(--teal);
--color-text: #23272E; /* cool near-black body (14.11:1 on bg) */
--color-text-muted: #565E6A; /* cool slate muted (6.17/5.38:1 on bg/bg-alt) */
--color-heading: #1E222C; /* near-black slate headings (14.98:1) */
--color-bg: #F7F8FB; /* cool paper-white page */
--color-bg-alt: #E4E9F2; /* cool blue-gray band (hue ~219° — vs default oat-cream and harvest olive) */
--color-border: #D3D9E4; /* cool gray-blue border */
--oat: #DDE3ED; /* cool blue-gray card/field surface (deeper than --color-bg-alt; text 11.6:1, teal 4.62:1) */
--color-error: #B0243A; /* cool crimson, off the blue axis (6.26:1 on bg) */
--color-focus: var(--orange);
--color-fg-on-dark: #ffffff; /* stays white (exempt) */
--accent-frame: #AEC9EA; /* pale cobalt decorative rule — ≥3 on navy/navy-2/teal (7.5/8.6/3.5:1) */
--on-dark-nav: #D2D8E2; /* top-bar text (10.24:1 on --navy) */
--on-dark-social: #C8CFDB; /* top-bar social (9.36:1) */
--on-dark-body: #A6AEBD; /* footer body (6.57:1) */
--on-dark-link: #C8CFDB; /* footer links (9.36:1) */
--on-dark-faint: #8892A0; /* legal fine print (4.65:1) */
--on-teal-label: #CFE9E6; /* pale label on the teal band (4.67:1 on --teal) */
--metal-1: #6E7A88; /* cool blue-steel rib */
--metal-2: #97A3B0; /* rib highlight */
--metal-3: #5C6673; /* rib shadow */
--overlay-dark: linear-gradient(rgba(24,27,38,0.82), rgba(24,27,38,0.88));
--overlay-teal: linear-gradient(rgba(30,58,56,0.86), rgba(24,48,46,0.92)); /* deep-teal tinted */
--overlay-soft: linear-gradient(rgba(24,27,38,0.55), rgba(24,27,38,0.72));
--overlay-scrim: linear-gradient(rgba(24,27,38,0.30), rgba(24,27,38,0.30));
--overlay-scrim-strong: linear-gradient(rgba(24,27,38,0.35), rgba(24,27,38,0.35));
--overlay-panel: rgba(24,27,38,0.78);
--focus-ring: rgba(43,87,154,0.18); /* from --orange #2B579A */
--wash-accent: rgba(49,109,106,0.22); /* from --teal #316D6A */
--select-ink: #565E6A;
--select-caret: url("data:image/svg+xml;utf8,");
/* light cobalt circle on the dark hero panel ⇒ dark (navy) check, not white */
--bullet-hero: url("data:image/svg+xml;utf8,");
--bullet-badge: url("data:image/svg+xml;utf8,");
--bullet-snow: url("data:image/svg+xml;utf8,");
--tick-timber: url("data:image/svg+xml;utf8,");
}
/* Harvest — goldenrod primary (46°, ≥27° off easton copper 19° / orange 15°)
+ olive-bronze secondary, on a WARM but distinctly deeper family than the
default's pale oat: espresso-brown darks, olive-wheat band, wheat chrome,
warm ivory page. */
[data-theme="harvest"] {
--navy: #2A2019; /* espresso brown-black dark sections (white 15.92:1) */
--navy-2: #362B22; /* lighter walnut panels */
--navy-card: #3A2E24; /* quote-form card (white 13.16:1) */
--teal: #5E5320; /* olive-bronze secondary — 7.68:1 white-on-fill; 7.24/5.98:1 as ink on bg/bg-alt */
--teal-bright: #C9A94E; /* gold on dark — 7.03:1 on --navy, 6.08:1 on --navy-2 */
--orange: #725806; /* goldenrod PRIMARY — 6.74:1 white-on-fill; 6.35/5.25:1 as ink on bg/bg-alt */
--orange-dark: #5C4805; /* goldenrod hover (8.5:1 with white) */
--orange-bright: #E0A63A; /* bright amber on dark — 7.34:1 on --navy, 6.35:1 on --navy-2 */
--color-link: var(--teal);
--color-text: #292219; /* warm espresso body (14.80:1 on bg) */
--color-text-muted: #6B6350; /* warm taupe muted (5.61/4.64:1 on bg/bg-alt) */
--color-heading: #241D14; /* near-black brown headings (15.69:1) */
--color-bg: #FBF8F0; /* warm ivory page */
--color-bg-alt: #E7E5BE; /* olive-wheat band (hue ~57° — vs default oat-cream and denim blue-gray) */
--color-border: #D9D3AE; /* wheat-khaki border */
--oat: #E4DDB6; /* deeper wheat card/field surface (text 11.5:1, teal 5.60:1, select-ink 4.83:1) */
--color-error: #B0242A; /* warm brick-crimson, clear of the gold axis (6.32:1 on bg) */
--color-focus: var(--orange);
--color-fg-on-dark: #ffffff; /* stays white (exempt) */
--accent-frame: #E0A63A; /* bright amber decorative rule — ≥3 on navy/navy-2/teal (7.3/6.4/3.5:1) */
--on-dark-nav: #E0D6B8; /* top-bar text (10.98:1 on --navy) */
--on-dark-social: #D8CDAB; /* top-bar social (10.04:1) */
--on-dark-body: #B4AB8C; /* footer body (6.93:1) */
--on-dark-link: #D8CDAB; /* footer links (10.04:1) */
--on-dark-faint: #938A72; /* legal fine print (4.64:1) */
--on-teal-label: #EFE3B4; /* pale label on the olive band (5.97:1 on --teal) */
--metal-1: #7C7A72; /* warm pewter/zinc rib */
--metal-2: #A19E93; /* rib highlight */
--metal-3: #6B6960; /* rib shadow */
--overlay-dark: linear-gradient(rgba(30,23,17,0.82), rgba(30,23,17,0.88));
--overlay-teal: linear-gradient(rgba(60,52,24,0.86), rgba(48,42,20,0.92)); /* olive-bronze tinted */
--overlay-soft: linear-gradient(rgba(30,23,17,0.55), rgba(30,23,17,0.72));
--overlay-scrim: linear-gradient(rgba(30,23,17,0.30), rgba(30,23,17,0.30));
--overlay-scrim-strong: linear-gradient(rgba(30,23,17,0.35), rgba(30,23,17,0.35));
--overlay-panel: rgba(30,23,17,0.78);
--focus-ring: rgba(114,88,6,0.18); /* from --orange #725806 */
--wash-accent: rgba(94,83,32,0.22); /* from --teal #5E5320 */
--select-ink: #645C49; /* darker so placeholder passes on the wheat --oat field (4.83:1) */
--select-caret: url("data:image/svg+xml;utf8,");
/* bright amber circle on the dark hero panel ⇒ dark (espresso) check */
--bullet-hero: url("data:image/svg+xml;utf8,");
--bullet-badge: url("data:image/svg+xml;utf8,");
--bullet-snow: url("data:image/svg+xml;utf8,");
--tick-timber: url("data:image/svg+xml;utf8,");
}
/* Walnut — warm leather/caramel primary (29°, a burnt-caramel set apart from
the default's barn-red 9° AND its timber secondary 22° by being a clearly
lighter, more orange leather tone) + muted bronze-brown secondary, on warm
tan bands + chrome and a tan oat page, over a NEAR-BLACK COFFEE-CHARCOAL dark
family. Those darks are deliberately deeper AND lower-chroma than harvest's
warm espresso (walnut --navy #1A1613 L9%/sat16% vs harvest #2A2019
L13%/sat25%; R-B spread 7 vs 17) so the two warm palettes' dark chrome reads
distinct at a glance — walnut = coffee-black charcoal, harvest = visible
brown. Separation from the default here is lightness/chroma, not hue (the
caramel accent is legitimately boxed between barn-red and goldenrod), per the
family standard. The whole palette reads walnut/leather next to the default's
red. */
[data-theme="walnut"] {
--navy: #1A1613; /* near-black coffee-charcoal dark sections (white 17.98:1) */
--navy-2: #241F1B; /* lighter coffee panels (service/project cards) */
--navy-card: #292420; /* quote-form card (white 15.36:1) */
--teal: #5A4326; /* bronze-brown secondary — 9.27:1 white-on-fill; 8.71/7.13:1 as ink on bg/bg-alt */
--teal-bright: #D0A566; /* warm tan on dark — 7.39:1 on --navy, 6.66:1 on --navy-2 */
--orange: #8E5016; /* caramel/leather PRIMARY — 6.35:1 white-on-fill; 5.96/4.88:1 as ink on bg/bg-alt */
--orange-dark: #733F10; /* caramel hover (8.06:1 with white) */
--orange-bright: #D08A44; /* light caramel on dark — 5.91:1 on --navy, 5.33:1 on --navy-2 */
--color-link: var(--teal);
--color-text: #2B2119; /* warm espresso body (14.78:1 on bg) */
--color-text-muted: #6B5B49; /* warm taupe muted (6.13/5.02:1 on bg/bg-alt) */
--color-heading: #241B12; /* near-black brown headings (15.90:1) */
--color-bg: #FDF7EF; /* warm tan-ivory page */
--color-bg-alt: #EEE0CB; /* warm tan band (hue ~36° — deeper & warmer than default oat-cream #F3ECDD 41°/91%; vs denim blue-gray & harvest olive-wheat) */
--color-border: #DDCEB6; /* warm tan border */
--oat: #E0CDB0; /* deeper tan card/field surface (text 12.6:1, teal 5.97:1, select-ink 4.96:1) */
--color-error: #B0242A; /* warm brick-crimson, clear of the caramel axis (6.30:1 on bg) */
--color-focus: var(--orange);
--color-fg-on-dark: #ffffff; /* stays white (exempt) */
--accent-frame: #D08A44; /* light caramel decorative rule — ≥3 on navy/navy-2/teal (5.9/5.3/3.3:1) */
--on-dark-nav: #DBCDB6; /* top-bar text (10.72:1 on --navy) */
--on-dark-social: #D2C3A9; /* top-bar social (9.68:1) */
--on-dark-body: #B2A488; /* footer body (6.84:1) */
--on-dark-link: #D2C3A9; /* footer links (9.68:1) */
--on-dark-faint: #948871; /* legal fine print (4.81:1) */
--on-teal-label: #E8D3AC; /* pale label on the bronze band (6.33:1 on --teal) */
--metal-1: #7E7264; /* warm bronze/pewter rib */
--metal-2: #A0937F; /* rib highlight */
--metal-3: #6B5F52; /* rib shadow */
--overlay-dark: linear-gradient(rgba(20,17,15,0.82), rgba(20,17,15,0.88)); /* a hair deeper than the coffee-charcoal --navy */
--overlay-teal: linear-gradient(rgba(70,52,30,0.86), rgba(56,42,24,0.92)); /* bronze-brown tinted */
--overlay-soft: linear-gradient(rgba(20,17,15,0.55), rgba(20,17,15,0.72));
--overlay-scrim: linear-gradient(rgba(20,17,15,0.30), rgba(20,17,15,0.30));
--overlay-scrim-strong: linear-gradient(rgba(20,17,15,0.35), rgba(20,17,15,0.35));
--overlay-panel: rgba(20,17,15,0.78);
--focus-ring: rgba(142,80,22,0.18); /* from --orange #8E5016 */
--wash-accent: rgba(90,67,38,0.22); /* from --teal #5A4326 */
--select-ink: #615040; /* darker so placeholder passes on the tan --oat field (4.96:1) */
--select-caret: url("data:image/svg+xml;utf8,");
/* light caramel circle on the dark hero panel ⇒ dark (espresso) check */
--bullet-hero: url("data:image/svg+xml;utf8,");
--bullet-badge: url("data:image/svg+xml;utf8,");
--bullet-snow: url("data:image/svg+xml;utf8,");
--tick-timber: url("data:image/svg+xml;utf8,");
}
/* ---------- Self-hosted fonts ---------- */
@font-face { font-family:"Source Sans 3"; font-style:normal; font-weight:400 700; font-display:swap; src:url("/fonts/source-sans-3.woff2") format("woff2"); }
@font-face { font-family:"Archivo"; font-style:normal; font-weight:600 700; font-display:swap; src:url("/fonts/archivo.woff2") format("woff2"); }
/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html, body { overflow-x: clip; }
:target, section[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }
body {
margin: 0;
font-family: var(--font-body);
font-size: 16px;
line-height: 1.7;
color: var(--color-text);
background: var(--color-bg);
-webkit-font-smoothing: antialiased;
}
img, picture, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 {
font-family: var(--font-head);
font-weight: 600;
line-height: 1.04;
margin: 0 0 0.5em;
color: var(--color-heading);
text-transform: uppercase;
letter-spacing: 0.01em;
}
h1 { font-size: clamp(2rem, 4vw, 2.8rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.05rem); }
h3 { font-size: clamp(1.2rem, 1.9vw, 1.35rem); color: var(--teal); }
h4 { font-size: 1.1rem; }
p { margin: 0 0 1em; }
a { color: var(--color-link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
strong { color: inherit; font-weight: 700; }
/* ---------- A11y ---------- */
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.skip-link {
position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;
background: var(--navy); color: #fff; padding: 0.75rem 1rem; z-index: 1000;
}
.skip-link:focus { left: 0; top: 0; width: auto; height: auto; }
.hp-field {
position: absolute !important; width: 1px !important; height: 1px !important; min-width: 0 !important; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.sr-h2, .visually-hidden {
position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 1.25rem; }
main { display: block; }
section { padding: clamp(2.75rem, 6vw, 4.75rem) 0; }
.section-dark { background: var(--navy); color: var(--color-fg-on-dark); }
.section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }
.section-dark p { color: rgba(255,255,255,0.82); }
.section-dark a:not(.btn) { color: var(--orange-bright); }
.section-intro { max-width: 78ch; margin: 0 0 2rem; }
.section-cta { display: flex; justify-content: center; margin-top: 2rem; }
.section-label {
font-family: var(--font-head); font-weight: 600; text-transform: uppercase;
letter-spacing: 0.08em; color: var(--teal); font-size: 1.05rem; margin: 0 0 0.4rem;
}
.section-dark .section-label, .lf-banner .section-label { color: var(--teal-bright); }
.lf-banner.b-teal .section-label { color: var(--on-teal-label); }
.accent { color: var(--orange); }
.section-dark .accent { color: var(--orange-bright); }
/* ---------- Gable roofline top edge (post-frame profile) ----------
Carves a center roof-peak into the section's top edge; the section
behind (usually white/oat) shows through the notches. Add extra
top padding so content clears the peak. */
.gable-top {
--gable: clamp(1.25rem, 3.2vw, 2.75rem);
clip-path: polygon(0 var(--gable), 50% 0, 100% var(--gable), 100% 100%, 0 100%);
padding-top: calc(clamp(2.75rem, 6vw, 4.75rem) + var(--gable));
}
/* ---------- Buttons ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
font: inherit; font-family: var(--font-head); font-weight: 600; font-size: 1.1rem;
text-transform: uppercase; letter-spacing: 0.04em;
padding: 0.7rem 1.6rem; border: 2px solid transparent; border-radius: var(--radius);
text-decoration: none; cursor: pointer; min-height: 50px; line-height: 1.1;
transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .08s ease;
}
.btn:active { transform: translateY(1px); }
/* All .btn variants are SOLID by default and go OUTLINE on hover (inverse
fill). The .btn 2px border is reserved transparent above, so the swap
never changes the button's size. (.btn-tel, the header call button, is
the sole exception — see its own rule below.) */
.btn-call, .btn-primary { background: var(--orange); color: #fff; border-color: var(--orange); }
.btn-call:hover, .btn-primary:hover { background: transparent; color: var(--orange); border-color: var(--orange); }
.btn-teal { background: var(--teal); color: #fff; border-color: var(--teal); }
.btn-teal:hover { background: transparent; color: var(--teal); border-color: var(--teal); }
/* white solid — sits on dark backgrounds */
.btn-services, .btn-outline-light { background: #fff; color: var(--navy); border-color: #fff; }
.btn-services:hover, .btn-outline-light:hover { background: transparent; color: #fff; border-color: #fff; }
/* dark solid — sits on light backgrounds */
.btn-outline-dark, .btn-outline-navy { background: var(--color-heading); color: #fff; border-color: var(--color-heading); }
.btn-outline-dark:hover, .btn-outline-navy:hover { background: transparent; color: var(--color-heading); border-color: var(--color-heading); }
/* on dark sections the barn-red outline needs the brighter brick to stay legible */
.hero .btn-call:hover, .section-dark .btn-call:hover, .section-dark .btn-primary:hover,
.section-dark .btn-teal:hover { color: var(--orange-bright); border-color: var(--orange-bright); }
/* Hero "Call Now": states reversed vs the global .btn-outline-light — ghost
outline by default, solid white fill on hover. */
.hero .btn-outline-light { background: transparent; color: #fff; border-color: #fff; }
.hero .btn-outline-light:hover { background: #fff; color: var(--navy); border-color: #fff; }
.btn-block { display: flex; width: 100%; }
/* ============================================================
img-as-background helper (real ![]()
, positioned to fill)
============================================================ */
.bg-host { position: relative; isolation: isolate; }
.bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.bg-host::before {
content: ""; position: absolute; inset: 0; z-index: 1;
background: var(--overlay-dark);
}
.bg-host.bg-teal::before { background: var(--overlay-teal); }
.bg-host.bg-soft::before { background: var(--overlay-soft); }
.bg-host > .container { position: relative; z-index: 2; }
/* Fixed (parallax) backgrounds — disabled on small/touch screens where iOS renders them badly.
The hero's parallax uses its CSS background (attachment: fixed, clips to the section);
its .bg-img is hidden on desktop so the fixed background shows through. */
@media (max-width: 900px) {
.bg-fixed { background-attachment: scroll !important; }
}
/* ============================================================
Top bar (navy, scrolls away) + Header (white, sticky)
============================================================ */
.top-bar { background: var(--navy); color: var(--on-dark-nav); font-size: 0.9rem; }
.top-bar .container {
padding-top: 0.5rem; padding-bottom: 0.5rem;
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.35rem 1.5rem;
}
.top-bar-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1.75rem; }
.top-bar-list li { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--on-dark-nav); }
.top-bar-list a { color: var(--on-dark-nav); text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; }
.top-bar-list a:hover { color: #fff; }
.top-bar-list svg { color: var(--orange-bright); flex-shrink: 0; }
.top-bar-social { display: inline-flex; align-items: center; gap: 0.9rem; }
.top-bar-social a { color: var(--on-dark-social); display: inline-flex; }
.top-bar-social a:hover { color: #fff; }
.site-header {
position: sticky; top: 0; z-index: 50;
background: #fff;
box-shadow: 0 2px 14px rgba(43,42,40,0.12);
}
.site-header .container {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
min-height: var(--header-h);
}
.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; padding: 0.4rem 0; }
.brand-logo { height: 56px; width: auto; display: block; }
.brand-text { font-family: var(--font-head); font-weight: 600; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1; font-size: 1.55rem; white-space: nowrap; color: var(--navy); }
.brand-text b { color: var(--orange); font-weight: 600; }
@media (max-width: 600px) { .brand-logo { height: 44px; } .brand-text { font-size: 1.35rem; } }
.site-nav { display: flex; align-items: center; }
.nav-list { display: flex; align-items: center; gap: 0.25rem 1.5rem; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.nav-item { position: relative; }
.nav-item > a {
display: inline-flex; align-items: center; gap: 0.3rem; color: var(--navy); text-decoration: none;
font-family: var(--font-head); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
font-size: 0.9rem; padding: 1.4rem 0.1rem;
}
.nav-item > a:hover { color: var(--teal); }
.nav-caret { transition: transform .15s ease; flex-shrink: 0; }
.has-dropdown:hover > a .nav-caret, .has-dropdown:focus-within > a .nav-caret { transform: rotate(180deg); }
.dropdown {
position: absolute; top: 100%; left: 0; min-width: 250px; background: #fff;
box-shadow: 0 16px 36px rgba(43,42,40,0.22); list-style: none; margin: 0; padding: 0.5rem 0;
z-index: 100; opacity: 0; visibility: hidden; transform: translateY(6px);
transition: opacity .15s ease, visibility .15s ease, transform .15s ease;
border-top: 3px solid var(--orange);
}
.has-dropdown:hover > .dropdown, .has-dropdown:focus-within > .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown li { margin: 0; }
.dropdown a { display: block; padding: 0.55rem 1.1rem; font-size: 0.95rem; font-weight: 500; color: var(--color-text); text-decoration: none; white-space: nowrap; }
.dropdown a:hover, .dropdown a:focus-visible { background: var(--color-bg-alt); color: var(--teal); }
.dropdown-2col, .dropdown-3col { display: grid; }
.dropdown-2col { grid-template-columns: 1fr 1fr; min-width: 440px; }
.dropdown-3col { grid-template-columns: 1fr 1fr 1fr; min-width: 560px; }
@media (max-width: 1100px) { .dropdown-3col { grid-template-columns: 1fr 1fr; min-width: 400px; } }
.nav-cta { margin-left: 0.5rem; }
.btn-tel {
background: #2D3546; color: #fff; border-radius: var(--radius);
/* 4px bottom border reserved transparent (bottom padding shortened to
match) so the hover accent adds NO height — only its color changes */
padding: 0.7rem 1.5rem calc(0.7rem - 4px); border-bottom: 4px solid transparent;
font-family: var(--font-head); font-weight: 600; font-size: 1.3rem; letter-spacing: 0.02em;
text-transform: none; display: inline-flex;
align-items: center; gap: 0.5rem; min-height: 50px; text-decoration: none;
white-space: nowrap; flex-shrink: 0;
transition: border-color .15s ease;
}
/* Narrow-desktop squeeze (nav can wrap to two rows): tighten the rows */
@media (min-width: 901px) and (max-width: 980px) {
.nav-item > a { padding-top: 0.45rem; padding-bottom: 0.45rem; }
}
.btn-tel:hover { border-bottom-color: var(--orange-bright); }
.menu-toggle { display: none; background: transparent; border: 0; padding: 0; width: 44px; height: 44px; align-items: center; justify-content: center; cursor: pointer; }
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after { display: block; width: 26px; height: 3px; background: var(--navy); border-radius: var(--radius); transition: transform .25s ease, top .25s ease; }
.menu-toggle span { position: relative; }
.menu-toggle span::before, .menu-toggle span::after { content: ""; position: absolute; left: 0; }
.menu-toggle span::before { top: -8px; } .menu-toggle span::after { top: 8px; }
.menu-toggle.is-open span { background: transparent; }
.menu-toggle.is-open span::before { top: 0; transform: rotate(45deg); }
.menu-toggle.is-open span::after { top: 0; transform: rotate(-45deg); }
@media (max-width: 900px) {
.top-bar .container { justify-content: center; }
.top-bar-list { justify-content: center; font-size: 0.82rem; gap: 0.25rem 1.25rem; }
.site-header .container { flex-wrap: wrap; align-content: center; row-gap: 0; }
.site-header .brand { min-height: var(--header-h); }
.site-nav { display: none; }
.menu-toggle { display: inline-flex; order: 3; }
.nav-cta { order: 2; }
.site-nav.is-open {
display: block; order: 4; flex: 1 1 100%; margin: 0 -1.25rem 0;
padding: 0.25rem 1.25rem 1rem; background: var(--navy);
}
.site-nav.is-open .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
.site-nav.is-open .nav-item { width: 100%; position: static; }
.site-nav.is-open .nav-item + .nav-item { border-top: 1px solid rgba(255,255,255,0.15); }
.site-nav.is-open .nav-item > a { justify-content: space-between; padding: 0.85rem 0; font-size: 1.15rem; color: #fff; }
.site-nav.is-open .nav-item > a:hover { color: var(--orange-bright); }
.site-nav.is-open .dropdown { display: none; position: static; opacity: 1; visibility: visible; transform: none; background: transparent; box-shadow: none; border-top: 0; min-width: 0; padding: 0 0 0.5rem 1rem; }
.site-nav.is-open .has-dropdown.expanded > .dropdown { display: block; }
.site-nav.is-open .has-dropdown.expanded > a .nav-caret { transform: rotate(180deg); }
.site-nav.is-open .dropdown a { color: rgba(255,255,255,0.85); padding: 0.4rem 0; white-space: normal; }
.site-nav.is-open .dropdown a:hover { background: transparent; color: #fff; }
}
/* Smallest screens: logo + hamburger on top, phone button centered below */
@media (max-width: 480px) {
.menu-toggle { order: 1; }
.nav-cta { order: 2; flex: 0 0 100%; max-width: max-content; margin: 0 auto 0.75rem; }
}
/* ============================================================
Hero (full-bleed photo + checklist left, quote card right)
============================================================ */
/* ---------- HERO: 50/50 split (Gable layout) ----------
Solid charcoal type panel left | full-bleed photo right.
No overlay, no floating form card — the lead form lives in the
.quote-bar band directly beneath the hero. */
/* Gable triangle + corrugated-metal hero edge removed for this site — the
hero/quote-bar divider is a single accent border, matching the rest of the page. */
.hero { position: relative; color: #fff; background: var(--navy); padding: 0; border-bottom: 4px solid var(--accent-frame); }
/* reusable corrugated divider for other bands (e.g. banner) */
.metal-edge { position: relative; }
.metal-edge::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 11px; z-index: 3;
background: repeating-linear-gradient(90deg, var(--metal-1) 0 7px, var(--metal-2) 7px 9px, var(--metal-3) 9px 14px);
box-shadow: inset 0 2px 3px rgba(0,0,0,0.28);
}
.hero-split { display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) { .hero-split { grid-template-columns: 1.05fr 0.95fr; min-height: min(72vh, 680px); } }
.hero-panel {
position: relative; z-index: 2;
display: flex; flex-direction: column; justify-content: center;
padding: clamp(2.5rem, 6vw, 4.25rem) clamp(1.25rem, 4vw, 3.5rem) clamp(2rem, 4vw, 3rem);
}
/* Desktop (2-col) trims the panel's top padding — placed AFTER the base shorthand so it wins. */
@media (min-width: 900px) { .hero-panel { padding-top: clamp(1.5rem, 2.5vw, 2.5rem); } }
.hero-media { position: relative; min-height: 300px; }
.hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-kicker {
font-family: var(--font-head); font-weight: 600; text-transform: uppercase;
letter-spacing: 0.14em; font-size: 1.05rem; color: var(--teal-bright); margin: 0 0 0.75rem;
}
.hero-title { color: #fff; margin: 0 0 0.85rem; font-size: clamp(1.75rem, 2.7vw, 2.4rem); line-height: 1.06; }
.hero-title-accent { color: var(--accent-frame); }
.hero-checklist { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: 0.55rem 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .hero-checklist { grid-template-columns: 1fr 1fr; } }
.hero-checklist li { position: relative; padding-left: 30px; font-weight: 500; line-height: 1.4; }
.hero-checklist li::before {
content: ""; position: absolute; left: 0; top: 0.05em; width: 20px; height: 20px;
background-repeat: no-repeat; background-size: contain;
background-image: var(--bullet-hero);
}
.hero-intro { color: rgba(255,255,255,0.9); margin-bottom: 0.56em; line-height: 1.6; }
.hero-intro:last-child { margin-bottom: 0; }
.hero-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem; margin: 1rem 0 1.75rem; }
/* ---------- Estimate / quote form card (kept for contact page + card-variant assemblies) ---------- */
.estimate-card { background: var(--navy-card); color: #fff; padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.estimate-card .quote-mark { color: var(--orange); margin-bottom: 0.25rem; }
.estimate-title { font-family: var(--font-head); font-weight: 600; text-transform: uppercase; font-size: clamp(1.7rem, 3vw, 2.2rem); color: #fff; margin: 0 0 1.25rem; letter-spacing: 0.01em; }
.estimate-head { display: flex; align-items: center; gap: 0.65rem; margin: 0 0 1.25rem; }
.estimate-head .quote-mark { margin: 0; display: inline-flex; }
.estimate-head .estimate-title { margin: 0; }
.estimate-form { display: grid; gap: 0.7rem; grid-template-columns: 1fr 1fr; }
.estimate-form > .full, .estimate-form textarea, .estimate-form select, .estimate-form button, .estimate-form .cf-turnstile { grid-column: 1 / -1; }
.estimate-form input, .estimate-form select, .estimate-form textarea {
font: inherit; width: 100%; min-height: 48px; padding: 0.7rem 0.9rem;
border: 0; border-radius: var(--radius); background: var(--oat); color: var(--color-text);
}
.estimate-form select { color: var(--select-ink); appearance: none; background-image: var(--select-caret); background-repeat: no-repeat; background-position: right 0.7rem center; padding-right: 2.2rem; }
.estimate-form textarea { min-height: 96px; resize: vertical; }
.estimate-form input:focus, .estimate-form select:focus, .estimate-form textarea:focus { outline: 3px solid var(--orange); outline-offset: 1px; }
.estimate-form button[type="submit"] {
background: var(--orange); color: #fff; font: inherit; font-family: var(--font-head);
font-weight: 600; font-size: 1.25rem; text-transform: uppercase; letter-spacing: 0.06em; padding: calc(0.85rem - 2px); border: 2px solid var(--orange);
border-radius: var(--radius); cursor: pointer; min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.estimate-form button[type="submit"]:hover { background: transparent; color: var(--orange-bright); border-color: var(--orange-bright); }
/* ---------- QUOTE-BAR: the lead form as a horizontal band under the hero ----------
(Overrides live AFTER the base .estimate-form rules — same specificity, later wins.) */
.quote-bar { background: var(--navy-card); color: #fff; padding: clamp(1.75rem, 3.5vw, 2.75rem) 0; border-bottom: 4px solid var(--orange); }
.quote-bar .estimate-head { margin-bottom: 1rem; }
.quote-bar .quote-mark { color: var(--accent-frame); }
.estimate-form--bar { grid-template-columns: repeat(4, 1fr); align-items: start; }
.estimate-form--bar > .full { grid-column: auto; } /* name/address become normal row cells */
.estimate-form--bar textarea { grid-column: 1 / -1; min-height: 72px; }
.estimate-form--bar .cf-turnstile { grid-column: 1 / 3; }
.estimate-form--bar button[type="submit"] { grid-column: 3 / -1; align-self: stretch; }
@media (max-width: 880px) {
.estimate-form--bar { grid-template-columns: 1fr 1fr; }
.estimate-form--bar > .full, .estimate-form--bar .cf-turnstile, .estimate-form--bar button[type="submit"] { grid-column: 1 / -1; }
}
/* ============================================================
Feature bands (navy + teal): icon + heading + text triplets
============================================================ */
.feature-band { background: var(--navy); color: #fff; padding: clamp(2.25rem, 4vw, 3rem) 0; }
.feature-band.band-teal { background: var(--teal); }
.feature-grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: 1fr; }
@media (min-width: 760px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } }
.feature-item { display: grid; grid-template-columns: auto 1fr; gap: 0 1rem; align-items: start; }
.feature-item .feature-ico { grid-row: span 2; color: #fff; }
.feature-band.band-navy .feature-item .feature-ico { color: var(--teal-bright); }
.feature-item h3 { color: #fff; margin: 0 0 0.35rem; font-size: 1.4rem; }
.feature-item p { color: rgba(255,255,255,0.82); margin: 0; font-size: 0.95rem; line-height: 1.55; }
/* ============================================================
Split content (About / Story): media + text + check badges
============================================================ */
.split { background: var(--color-bg); }
.split-alt { background: var(--color-bg-alt); }
.split-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.75rem, 4vw, 3.25rem); align-items: center; }
@media (min-width: 900px) { .split-grid { grid-template-columns: 1fr 1fr; } }
.split-grid.media-right .split-media { order: -1; }
@media (min-width: 900px) { .split-grid.media-right .split-media { order: 2; } }
.split-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-md); }
.split h2 { color: var(--color-heading); }
.badge-grid { list-style: none; margin: 1.5rem 0 1.75rem; padding: 0; display: grid; gap: 0.55rem 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 520px) { .badge-grid { grid-template-columns: 1fr 1fr; } }
.badge-grid li { position: relative; padding-left: 28px; font-weight: 600; color: var(--navy); line-height: 1.4; }
.badge-grid li::before {
content: ""; position: absolute; left: 0; top: 0.1em; width: 18px; height: 18px;
background-repeat: no-repeat; background-size: contain;
background-image: var(--bullet-badge);
}
.split-cta-row { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; }
/* ============================================================
How it works strip (teal)
============================================================ */
.howitworks { background: var(--teal); color: #fff; padding: clamp(1.75rem, 3.5vw, 2.5rem) 0; }
.hiw-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem 2rem; align-items: center; text-align: center; }
@media (min-width: 760px) { .hiw-grid { grid-template-columns: auto repeat(3, 1fr); text-align: left; } }
.hiw-title { font-family: var(--font-head); font-weight: 600; text-transform: uppercase; font-size: 1.7rem; color: #fff; margin: 0; }
.hiw-step { display: inline-flex; align-items: center; gap: 0.6rem; justify-content: center; font-family: var(--font-head); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; font-size: 1.25rem; color: #fff; }
@media (min-width: 760px) { .hiw-step { justify-content: flex-start; } }
.hiw-step svg { color: #fff; flex-shrink: 0; }
.hiw-step a { color: #fff; text-decoration: none; }
.hiw-step a:hover { text-decoration: underline; }
/* ============================================================
Services grid (shared vocab: header + image + description)
Dark section.
============================================================ */
.services-head { text-align: center; max-width: 64ch; margin: 0 auto 2.25rem; }
.services-foot { text-align: center; max-width: 64ch; margin: 2.25rem auto 0; }
.services-head .section-label, .services-head h2 { text-align: center; }
.services-head .section-label { color: var(--orange-bright); }
.section-dark .services-head h2 { color: #fff; margin-bottom: 0.5rem; }
/* Mosaic rows: the FIRST TWO cards form a row of 2 (wider, taller images);
every card after flows into rows of 3. Works for any card count. */
.services-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin-top: 0.5rem; }
@media (min-width: 600px) {
.services-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 940px) {
.services-grid { grid-template-columns: repeat(6, 1fr); }
.service-card { grid-column: span 2; }
.service-card:nth-child(-n+2) { grid-column: span 3; }
}
.service-card {
display: flex; flex-direction: column; background: var(--navy-2);
border: 1px solid rgba(255,255,255,0.10); border-radius: var(--radius); overflow: hidden;
transition: transform .12s ease, border-color .15s ease, box-shadow .15s ease;
}
.service-card:hover { transform: translateY(-3px); border-color: var(--teal-bright); box-shadow: 0 12px 28px rgba(0,0,0,0.35); }
.service-card-header {
background: var(--teal); color: #fff; padding: 0.75rem 1.25rem; margin: 0; text-align: left;
font-family: var(--font-head); font-size: 1.4rem; font-weight: 600; letter-spacing: 0.01em;
text-transform: uppercase; line-height: 1.15;
box-shadow: inset 0 -3px 0 var(--accent-frame);
}
.service-card-body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; gap: 0.9rem; }
.service-card-body img {
width: calc(100% + 2.5rem); max-width: none; margin: -1.25rem -1.25rem 0;
aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0;
}
.service-card-body p { color: rgba(255,255,255,0.80); margin: 0; font-size: 1rem; }
/* first-row (of 2) cards: bigger type; their wider span makes the 16/9 images taller naturally */
@media (min-width: 940px) {
.service-card:nth-child(-n+2) .service-card-header { font-size: clamp(1.5rem, 2vw, 1.9rem); }
.service-card:nth-child(-n+2) .service-card-body p { font-size: 1.05rem; }
}
/* --2-3-2-3: 10-card mosaic as rows of 2, 3, 2, 3 — cards 6-7 form the second wide row.
All card headers stay the normal size (the default first-row inflation is reset here). */
@media (min-width: 940px) {
.services-grid--2-3-2-3 .service-card:nth-child(6),
.services-grid--2-3-2-3 .service-card:nth-child(7) { grid-column: span 3; }
.services-grid--2-3-2-3 .service-card:nth-child(-n+2) .service-card-header { font-size: 1.4rem; }
.services-grid--2-3-2-3 .service-card:nth-child(-n+2) .service-card-body p { font-size: 1rem; }
}
/* --3up: every card is a rows-of-3 span (no first-row-of-2); headers/text stay normal size */
@media (min-width: 940px) {
.services-grid--3up .service-card:nth-child(-n+2) { grid-column: span 2; }
.services-grid--3up .service-card:nth-child(-n+2) .service-card-header { font-size: 1.4rem; }
.services-grid--3up .service-card:nth-child(-n+2) .service-card-body p { font-size: 1rem; }
}
/* ============================================================
Long-form banner sections (installation / repair / demolition / decorative)
============================================================ */
.lf-banner { color: #fff; padding: clamp(2.5rem, 5vw, 4rem) 0; }
.lf-banner.b-navy { background: var(--navy); }
.lf-banner.b-teal { background: var(--teal); }
.lf-banner-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; }
@media (min-width: 900px) { .lf-banner-grid { grid-template-columns: 1.05fr 0.95fr; } }
.lf-banner-grid.media-right .lf-media { order: -1; }
@media (min-width: 900px) { .lf-banner-grid.media-right .lf-media { order: 2; } }
.lf-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.lf-banner h2 { color: #fff; }
.lf-banner p { color: rgba(255,255,255,0.85); }
.lf-sub-h { font-family: var(--font-head); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #fff; font-size: 1.2rem; margin: 1.5rem 0 0.75rem; }
.lf-body { background: var(--color-bg); }
.lf-body.body-alt { background: var(--color-bg-alt); }
.lf-body h2 { color: var(--color-heading); }
.lf-body h3 { color: var(--teal); margin-top: 1.75rem; }
.lf-prose { max-width: 82ch; }
.lf-prose.center { margin: 0 auto; }
/* ============================================================
Check / feature lists
============================================================ */
.feature-list { list-style: none; margin: 0.75rem 0 0; padding: 0; font-size: 0.97rem; }
.feature-list li { position: relative; padding-left: 28px; margin-bottom: 0.65rem; line-height: 1.5; }
.feature-list li strong { color: var(--color-heading); }
.feature-list li::before {
content: ""; position: absolute; left: 0; top: 0.2em; width: 16px; height: 16px;
background-repeat: no-repeat; background-size: contain;
background-image: var(--tick-timber);
}
.lf-banner .feature-list li, .section-dark .feature-list li { color: rgba(255,255,255,0.9); }
.lf-banner .feature-list li strong, .section-dark .feature-list li strong { color: #fff; }
.lf-banner .feature-list li::before, .section-dark .feature-list li::before { background-image: url("data:image/svg+xml;utf8,"); }
.feature-list-2col, .feature-list-3col { display: grid; gap: 0 1.75rem; grid-template-columns: 1fr; }
@media (min-width: 600px) { .feature-list-2col, .feature-list-3col { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .feature-list-3col { grid-template-columns: 1fr 1fr 1fr; } }
.inline-cta { margin-top: 1.5rem; display: inline-flex; }
/* ============================================================
FAQ (navy panel with accordion)
============================================================ */
/* FAQ: LIGHT two-column — intro column (sticky on desktop) left,
accordion of white cards right, on the oat section bg. */
.faq { background: var(--color-bg-alt); }
.faq-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 880px) {
.faq-grid { grid-template-columns: 0.85fr 1.4fr; }
.faq-intro { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}
.faq-intro h2 { margin-bottom: 0.75rem; }
.faq-intro p { color: var(--color-text); max-width: 45ch; }
.faq-intro .btn { margin-top: 0.75rem; }
.faq-list { display: flex; flex-direction: column; gap: 0.75rem; }
.faq-item { background: #fff; border: 1px solid var(--color-border); border-left: 4px solid var(--teal); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.faq-item > summary { list-style: none; cursor: pointer; padding: 1rem 1.15rem; font-family: var(--font-head); font-weight: 600; text-transform: uppercase; letter-spacing: 0.01em; color: var(--color-heading); font-size: 1.2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after { content: "+"; font-size: 1.7rem; color: var(--orange); flex-shrink: 0; line-height: 1; }
.faq-item[open] > summary::after { content: "\2212"; }
.faq-item > .faq-body { padding: 0 1.15rem 1.1rem; color: var(--color-text); }
.faq-item > .faq-body ul { margin: 0.5rem 0; padding-left: 1.1rem; }
.faq-item > .faq-body a { color: var(--teal); }
/* ============================================================
Final CTA (photo bg + centered quote card)
============================================================ */
.final-cta { color: #fff; padding: clamp(3rem, 6vw, 5rem) 0; }
.final-cta .estimate-card { max-width: 560px; margin: 0 auto; }
/* ============================================================
Footer (navy + wood strip)
============================================================ */
.site-footer { background: var(--navy); color: var(--on-dark-body); padding: 3.25rem 0 1.5rem; border-top: 4px solid var(--accent-frame); }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 0.95fr 1.9fr 1.4fr 1.05fr; } }
.footer-brand-logo { display: inline-block; text-decoration: none; }
.footer-brand-logo img { width: 100%; max-width: 210px; height: auto; display: block; }
/* text wordmark fallback in the footer (dark bg): knockout white + brick accent */
.footer-brand-logo .brand-text { color: #fff; font-size: 1.9rem; }
.footer-brand-logo .brand-text b { color: var(--orange-bright); }
/* --boxed: for dark/color logos that need a white plate (no knockout version available) */
.footer-brand-logo--boxed { background: #fff; padding: 0.9rem 1rem; border-radius: var(--radius); display: inline-block; }
.footer-brand-logo--boxed img { height: 70px; width: auto; }
.footer-col h4 { color: #fff; margin: 0 0 1rem; padding-bottom: 0.5rem; position: relative; font-size: 1.3rem; }
.footer-col h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 38px; height: 3px; background: var(--accent-frame); }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 0.6rem; }
.footer-links a { color: var(--on-dark-link); text-decoration: none; display: inline-flex; align-items: center; gap: 0.6rem; }
.footer-links a:hover { color: #fff; }
.footer-links svg { color: var(--orange-bright); flex-shrink: 0; }
.footer-col ul.footer-col-links { margin-top: 2.25rem; }
.footer-list-plain { list-style: none; padding: 0; margin: 0; }
.footer-list-plain li { color: var(--on-dark-body); margin-bottom: 0.4rem; font-size: 0.88rem; line-height: 1.35; }
.footer-areas-list { columns: 2; column-gap: 1.5rem; }
.footer-areas-list li { break-inside: avoid; }
.footer-services-list { columns: 2; column-gap: 1.5rem; }
.footer-services-list li { break-inside: avoid; }
.footer-contact-list li { display: flex; align-items: flex-start; gap: 0.6rem; line-height: 1.5; }
.footer-contact-list a, .footer-contact-list span { color: var(--on-dark-link); text-decoration: none; display: inline-flex; align-items: flex-start; gap: 0.6rem; }
.footer-contact-list a:hover { color: #fff; }
.footer-contact-list svg { color: var(--orange-bright); flex-shrink: 0; margin-top: 0.18em; }
.footer-phone { font-family: var(--font-head); font-weight: 600; font-size: 1.7rem; color: var(--orange-bright); text-decoration: none; }
.footer-phone:hover { color: #fff; }
.legal { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,0.1); font-size: 0.85rem; color: var(--on-dark-faint); display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; justify-content: space-between; }
.legal a { color: var(--on-dark-body); text-decoration: none; margin-right: 1rem; }
.legal a:hover { color: #fff; }
/* ============================================================
Contact / utility forms (contact.html etc.)
============================================================ */
.page-narrow { max-width: 820px; margin: 0 auto; }
.page-hero { background: var(--navy); color: #fff; padding: clamp(2.5rem, 5vw, 3.75rem) 0; border-bottom: 4px solid var(--orange); }
.page-hero h1 { color: #fff; }
.page-hero p { color: rgba(255,255,255,0.85); margin: 0; }
.breadcrumb { font-size: 0.9rem; color: rgba(255,255,255,0.7); margin-bottom: 0.5rem; }
.breadcrumb a { color: rgba(255,255,255,0.85); text-decoration: none; }
.breadcrumb a:hover { color: #fff; }
.form-card { background: #fff; border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--radius); }
.form-grid { display: grid; gap: 1rem; }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label { font-weight: 700; font-size: 0.95rem; color: var(--navy); }
.field .req { color: var(--color-error); margin-left: 0.15rem; }
.field input, .field select, .field textarea {
font: inherit; padding: 0.75rem 0.9rem; border: 1px solid var(--color-border); border-radius: var(--radius);
background: #fff; color: var(--color-text); min-height: 48px; width: 100%;
transition: border-color .12s ease, box-shadow .12s ease;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--color-focus); box-shadow: 0 0 0 3px var(--focus-ring); outline: none; }
.field .help { font-size: 0.85rem; color: var(--color-text-muted); }
.field .error { font-size: 0.9rem; color: var(--color-error); display: none; }
.field input[aria-invalid="true"] ~ .error, .field textarea[aria-invalid="true"] ~ .error { display: block; }
.form-footnote { font-size: 0.85rem; color: var(--color-text-muted); margin-top: 0.5rem; }
.contact-info { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.85rem; }
.contact-info li { display: flex; align-items: flex-start; gap: 0.7rem; line-height: 1.4; }
.contact-info svg { color: var(--teal); flex-shrink: 0; margin-top: 0.12em; }
.contact-info a { color: var(--color-text); text-decoration: none; }
.contact-info a:hover { color: var(--teal); }
.nap address { font-style: normal; line-height: 1.7; }
.prose h2 { margin-top: 2rem; }
.prose h3 { margin-top: 1.5rem; color: var(--teal); }
/* ---------- Utility page simple nav ---------- */
.site-nav.simple { gap: 2rem; }
.site-nav.simple a { color: var(--navy); font-family: var(--font-head); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; text-decoration: none; font-size: 1.15rem; }
.site-nav.simple a:hover { color: var(--teal); }
@media (max-width: 900px) { .site-nav.simple { display: none; } }
/* ============================================================
SHARED BLOCK VOCABULARY (Gable / rugged-warm skin)
The global blocks the assembler fills. Extras (feature-band,
lf-banner) keep their own sections above.
============================================================ */
/* ---------- Flex-media (workhorse: overlapping offset card) ----------
Desktop: the image bleeds wide on its side and the TEXT sits in an
offset card that overlaps it by one grid column. Default = card left /
image right; --reverse mirrors. Mobile stacks normally. */
.flex-media { background: var(--color-bg); }
.flex-media--reverse, .flex-media--long-reverse { background: var(--color-bg-alt); }
.flex-media h2, .flex-media--long h2, .flex-media--long-reverse h2 { color: var(--color-heading); }
/* barn-red rule spans the FULL block width — above both the text card and
the image; ONE box-shadow wraps the whole card+image unit (not per column) */
.flex-media-grid { display: grid; gap: clamp(1.5rem, 3vw, 2rem); grid-template-columns: 1fr; align-items: center; border-top: 4px solid var(--orange); box-shadow: var(--shadow-md); }
.flex-media-text {
background: var(--oat);
border-radius: var(--radius);
padding: clamp(1.5rem, 3vw, 2.5rem);
}
.flex-media--reverse .flex-media-text { background: #fff; } /* card flips to white on the oat section bg */
/* --card-page: content card uses the page bg (--color-bg) instead of white */
.flex-media--card-page .flex-media-text { background: var(--color-bg); }
.flex-media-text > :first-child { margin-top: 0; }
.flex-media-figure { margin: 0; } /* no per-column shadow — the unit shadow lives on .flex-media-grid */
.flex-media-figure img { width: 100%; border-radius: var(--radius); aspect-ratio: 4 / 3; object-fit: cover; }
/* --split: two stacked images sharing the figure height, divided by an accent rule
(keeps each image from stretching too tall on a long text column) */
.flex-media-figure--split { display: flex; flex-direction: column; }
.flex-media-figure--split img + img { border-top: 4px solid var(--accent-frame); }
@media (min-width: 880px) {
.flex-media-grid { grid-template-columns: repeat(12, 1fr); align-items: stretch; }
.flex-media-text { grid-column: 1 / 7; grid-row: 1; position: relative; z-index: 2; }
/* the TEXT card drives the row height; the image absolute-fills its
figure and crops (object-fit) to always match the text's height */
.flex-media-figure { grid-column: 6 / -1; grid-row: 1; position: relative; min-height: 300px; }
.flex-media-figure img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; aspect-ratio: auto;
}
/* split figure distributes the row height across its two images (static, half each) */
.flex-media-figure--split { position: relative; }
.flex-media-figure--split img { position: static; flex: 1 1 0; min-height: 0; height: auto; aspect-ratio: auto; }
/* --reverse mirrors the overlap */
.flex-media--reverse .flex-media-text { grid-column: 7 / -1; }
.flex-media--reverse .flex-media-figure { grid-column: 1 / 8; }
}
.flex-media-cta-row { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; align-items: center; }
/* --narrow: this block stays 2-col only above 1200px; from 1200px down it is a
single centered column (text over image[s]) capped ~800px, with no gap between
the text card and the stacked image(s). ≤879px keeps the base mobile stack. */
@media (min-width: 880px) and (max-width: 1199.98px) {
.flex-media--narrow .flex-media-grid {
grid-template-columns: 1fr; align-items: start;
max-width: 800px; margin-inline: auto; gap: 0;
}
.flex-media--narrow .flex-media-text { grid-column: 1 / -1; grid-row: auto; }
.flex-media--narrow .flex-media-figure { grid-column: 1 / -1; grid-row: auto; position: static; min-height: 0; }
.flex-media--narrow .flex-media-figure img {
position: static; width: 100%; height: auto; aspect-ratio: 4 / 3; flex: 0 0 auto;
}
}
@media (max-width: 879.98px) {
.flex-media--narrow .flex-media-grid { gap: 0; }
}
/* --long / --long-reverse: two columns of long copy, image cornered.
--long = image at TOP of the first column; --long-reverse = image at
the BOTTOM of the first column (columns are equal height). Images get
an offset timber keyline frame. */
.flex-media-long-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: stretch; margin-top: 1.5rem; }
@media (min-width: 768px) { .flex-media-long-grid { grid-template-columns: 1fr 1fr; } }
.flex-media-long-col { display: flex; flex-direction: column; }
.flex-media-long-col > :first-child { margin-top: 0; }
.flex-media-long-col h3 { margin-top: 1.5rem; }
.flex-media-long-figure { margin: 0; position: relative; }
/* offset keyline frame — peeks BOTTOM-RIGHT on --long */
.flex-media-long-figure::after {
content: ""; position: absolute; inset: 14px -14px -14px 14px;
border: 3px solid var(--teal); border-radius: var(--radius); z-index: 0; pointer-events: none;
}
/* --long-reverse: same 14px offset, hangs off the BOTTOM-LEFT */
.flex-media--long-reverse .flex-media-long-figure::after { inset: 14px 14px -14px -14px; }
/* the bottom-cornered figure carries 1.25rem padding-top (its gap from the
text above) — offset the frame from the IMAGE, not the padded figure box */
.flex-media--long-reverse .flex-media-long-figure:last-child::after { top: calc(1.25rem + 14px); }
.flex-media-long-figure img { position: relative; z-index: 1; width: 100%; border-radius: var(--radius); aspect-ratio: 4 / 3; object-fit: cover; box-shadow: var(--shadow-md); }
.flex-media-long-col > .flex-media-long-figure:first-child { margin-bottom: 1.75rem; }
.flex-media-long-col > .flex-media-long-figure:last-child { margin-top: auto; padding-top: 1.25rem; }
@media (max-width: 767px) {
.flex-media-long-figure::after { inset: 10px -8px -8px 10px; }
.flex-media--long-reverse .flex-media-long-figure::after { inset: 10px 10px -8px -8px; }
.flex-media--long-reverse .flex-media-long-figure:last-child::after { top: calc(1.25rem + 10px); }
}
/* --long-even: uniform spacing above the bottom figure (no margin-top:auto push);
columns kept close by a balanced content split rather than by pinning the image.
Uniform vertical rhythm: zero every top margin and give every block the SAME
bottom margin, so flex (which does not collapse margins) can't produce uneven
gaps (e.g. a 16px p-margin + 24px h3-top-margin = 40px before headings). */
.flex-media--long-even .flex-media-long-col > * { margin-top: 0; margin-bottom: 1rem; }
.flex-media--long-even .flex-media-long-col > :last-child { margin-bottom: 0; }
.flex-media--long-even .flex-media-long-col > .flex-media-long-figure:last-child { margin-top: 0; padding-top: 0; }
/* top image: clear its keyline frame (peeks ~14px past the bottom) + a 16px visible gap */
.flex-media--long-even .flex-media-long-col > .flex-media-long-figure:first-child { margin-bottom: calc(1rem + 14px); }
.flex-media--long-even.flex-media--long-reverse .flex-media-long-figure:last-child::after { top: 14px; }
@media (max-width: 767px) {
.flex-media--long-even.flex-media--long-reverse .flex-media-long-figure:last-child::after { top: 10px; }
}
/* --overlay / --overlay-right: FULL-BLEED bg photo; the text lives on a
TRANSLUCENT dark panel covering one half (photo fully visible on the
other). Copy length is content-driven — works as a short OR long block.
Section also carries .bg-host + .section-dark (white text).
Default = panel LEFT; add --overlay-right for panel RIGHT. */
.flex-media--overlay { padding: 0; }
.flex-media--overlay.bg-host::before { background: var(--overlay-scrim); } /* light scrim only */
.flex-media--overlay .overlay-half {
--panel-pad: clamp(1.25rem, 4vw, 3rem);
position: relative; z-index: 2;
background: var(--overlay-panel); border-top: 4px solid var(--accent-frame); /* translucent — photo reads through */
padding: clamp(2.75rem, 6vw, 4.5rem) var(--panel-pad);
}
.flex-media--overlay h2 { color: #fff; }
@media (min-width: 880px) {
.flex-media--overlay .overlay-half {
width: 50%; min-height: 480px; border-top: none; border-right: 4px solid var(--accent-frame);
display: flex; flex-direction: column; justify-content: center;
}
/* align the panel's text with the global container's edge. The panel is
exactly HALF the layout width, so 100% − max-w/2 is the gutter+padding
distance — %-based, immune to the 100vw scrollbar error. */
.flex-media--overlay .overlay-half-inner {
max-width: 34rem;
margin-left: max(0px, calc(100% + var(--panel-pad) + 4px - var(--max-w) / 2 + 1.25rem));
}
/* --overlay-right: mirror — panel covers the RIGHT half */
.flex-media--overlay-right .overlay-half {
margin-left: 50%; border-right: none; border-left: 4px solid var(--accent-frame);
}
.flex-media--overlay-right .overlay-half-inner {
margin-left: auto; margin-right: max(0px, calc(100% + var(--panel-pad) + 4px - var(--max-w) / 2 + 1.25rem));
}
}
/* --long-center: FULL-BLEED bg photo; the overlay is a CENTERED content
panel holding the heading + the 2-col long grid.
Section also carries .bg-host + .section-dark (white text). */
.flex-media--long-center { padding: 0; } /* panel runs flush to the section's top + bottom */
.flex-media--long-center.bg-host::before { background: var(--overlay-scrim-strong); } /* light scrim only */
.flex-media--long-center h2 { color: #fff; }
.flex-media--long-center .overlay-center {
background: var(--overlay-panel); border-right: 4px solid var(--accent-frame); /* translucent — photo reads through */
padding: clamp(1.75rem, 4vw, 3rem);
}
/* ---------- snow-list (check-bullet feature list) ---------- */
.snow-list { list-style: none; margin: 1.25rem 0 0; padding: 0; font-size: 0.97rem; }
.snow-list li { position: relative; padding-left: 30px; margin-bottom: 0.7rem; line-height: 1.5; color: var(--color-text); }
.snow-list li strong { color: var(--color-heading); }
.snow-list li::before {
content: ""; position: absolute; left: 0; top: 0.15em; width: 20px; height: 20px;
background-repeat: no-repeat; background-size: contain;
background-image: var(--bullet-snow);
}
.flex-media .snow-list { display: grid; grid-template-columns: 1fr; gap: 0.4rem 1.5rem; }
@media (min-width: 560px) { .flex-media .snow-list { grid-template-columns: 1fr 1fr; } }
.snow-list--single { grid-template-columns: 1fr !important; }
.section-dark .snow-list li, .spotlight .snow-list li { color: rgba(255,255,255,0.9); }
.section-dark .snow-list li strong, .spotlight .snow-list li strong { color: #fff; }
/* ---------- subhead (h3 lead-in inside text blocks) ---------- */
.subhead { font-family: var(--font-head); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--teal); font-size: 1.2rem; margin: 1.5rem 0 0.5rem; }
.section-dark .subhead, .feature-aside .subhead { color: var(--teal-bright); }
/* ---------- Feature-aside (dark text column + nav aside boxes) ---------- */
.feature-aside-grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 960px) { .feature-aside-grid { grid-template-columns: 1.5fr 1fr; } }
.feature-aside-side { display: flex; flex-direction: column; gap: 1rem; justify-content: center; }
.feature-aside-box { background: var(--wash-accent); border: 1px solid var(--teal-bright); padding: 1.75rem; border-radius: var(--radius); text-align: center; }
.feature-aside-box-title { color: #fff; margin: 0 0 1rem; font-family: var(--font-head); font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 600; text-transform: uppercase; line-height: 1.05; }
.feature-aside-box .btn { width: 100%; background: var(--orange); color: #fff; border-color: var(--orange); }
.feature-aside-box .btn:hover { background: var(--orange-dark); border-color: var(--orange-dark); color: #fff; }
/* ---------- Spotlight (service areas + city narrative) ---------- */
.spotlight { color: #fff; }
.spotlight .container { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (min-width: 880px) {
.spotlight .container { grid-template-columns: 1fr 1.3fr; }
/* --reverse: narrative in the WIDE left column, areas chips narrow right */
.spotlight--reverse .container { grid-template-columns: 1.3fr 1fr; }
}
.spotlight h2 { color: #fff; }
.spotlight p { color: rgba(255,255,255,0.85); }
.spotlight-side-title { font-family: var(--font-head); font-size: clamp(1.6rem, 3.5vw, 2.2rem); font-weight: 600; text-transform: uppercase; line-height: 1.05; color: #fff; margin: 0 0 1rem; }
/* areas render as stamped TAG CHIPS (not a bulleted list) */
.spotlight-areas { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0; font-size: 0.95rem; }
.spotlight-areas li {
padding: 0.4rem 0.9rem; margin: 0; line-height: 1.4;
background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.30);
border-left: 3px solid var(--orange-bright); border-radius: var(--radius);
color: #fff; font-weight: 600;
}
.spotlight-areas li::before { display: none; }
.spotlight--light .spotlight-areas li {
background: var(--oat); border-color: var(--color-border);
border-left-color: var(--orange); color: var(--color-heading);
}
.spotlight--light { color: var(--color-text); background: var(--color-bg); }
.spotlight--light h2 { color: var(--color-heading); }
.spotlight--light .spotlight-side-title { color: var(--teal); }
.spotlight--light p, .spotlight--light .snow-list li { color: var(--color-text); }
.spotlight--light .snow-list li strong { color: var(--color-heading); }
/* Serving-area spotlight: a FIXED (parallax) background photo sits behind the
bg-host scrim. .bg-fixed already forces attachment:scroll on small screens. */
.spotlight--fixed {
background-image: url("/images/weathered-wood-plank-bg-1600.webp");
background-size: cover; background-position: center; background-attachment: fixed;
}
/* two stacked area groups in the areas column: smaller side-title, separated. */
.spotlight-side-title--sub { font-size: clamp(1.25rem, 2.6vw, 1.6rem); }
.spotlight-areas + .spotlight-side-title--sub { margin-top: 1.75rem; }
/* final CTA: exact slate background per operator (keeps .section-dark white text). */
.cta--slate { background: #2D3546; }
/* serving-area spotlight: long-form figure under the narrative, keyline frame
peeking BOTTOM-LEFT (the --long-reverse / image-on-left treatment). */
.spotlight .flex-media-long-figure { margin-top: 1.75rem; }
.spotlight .flex-media-long-figure::after { inset: 14px 14px -14px -14px; }
@media (max-width: 767px) { .spotlight .flex-media-long-figure::after { inset: 10px 10px -8px -8px; } }
/* ---------- Steps (vertical timeline on a galvanized post line) ----------
Markup per step: N
h3 + p
. Handles any step count. */
.steps h2 { color: #fff; }
.process-intro { max-width: 70ch; margin: 0 auto 2.5rem; text-align: center; color: rgba(255,255,255,0.85); }
.process-grid {
position: relative; display: flex; flex-direction: column;
gap: clamp(2rem, 4vw, 3rem); max-width: 820px; margin: 0 auto; padding: 0; list-style: none;
}
/* the "post": a ribbed galvanized line running down the number column */
.process-grid::before {
content: ""; position: absolute; left: 26px; top: 10px; bottom: 10px; width: 4px;
background: repeating-linear-gradient(180deg, var(--metal-1) 0 10px, var(--metal-2) 10px 14px);
border-radius: var(--radius);
}
.process-step { display: grid; grid-template-columns: 56px 1fr auto; gap: 1.1rem 1.4rem; align-items: start; position: relative; }
.process-step .step-num {
grid-column: 1; grid-row: 1 / span 2; position: relative; z-index: 1;
width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
background: var(--orange); color: #fff; font-family: var(--font-head); font-size: 1.7rem;
font-weight: 600; line-height: 1; border-radius: var(--radius);
box-shadow: 0 0 0 6px var(--navy);
}
.process-step-body { grid-column: 2; }
.process-step-body > :first-child { margin-top: 0; }
.process-step > img, .process-step > .process-step-icon {
grid-column: 3; grid-row: 1 / span 2; width: 150px; height: 104px;
border-radius: var(--radius); object-fit: cover; margin: 0;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.process-step > .process-step-icon { background: var(--teal); color: #fff; }
.process-step h3 { color: #fff; margin-bottom: 0.4rem; }
.process-step p { color: rgba(255,255,255,0.80); font-size: 0.95rem; margin: 0; }
/* small screens: drop the side thumb below the text, keep the post line */
@media (max-width: 640px) {
.process-step { grid-template-columns: 48px 1fr; }
.process-grid::before { left: 22px; }
.process-step .step-num { width: 48px; height: 48px; font-size: 1.4rem; grid-row: 1; }
.process-step > img, .process-step > .process-step-icon { grid-column: 2; grid-row: 3; width: 100%; max-width: 320px; height: 140px; }
}
/* --card-bg: use the warm quote-form card shade (--navy-card) instead of --navy;
the step-num halo tracks the background so the ring stays invisible. */
.steps--card-bg { background: var(--navy-card); }
.steps--card-bg .process-step .step-num { box-shadow: 0 0 0 6px var(--navy-card); }
.mini-cta { margin-top: 3rem; text-align: center; padding: 1.75rem; background: #232938; border-radius: var(--radius); }
.mini-cta p { color: var(--orange-bright); font-family: var(--font-head); font-weight: 600; text-transform: uppercase; margin: 0 0 0.35rem; font-size: 1.15rem; }
.mini-cta p + p { color: rgba(255,255,255,0.80); font-weight: 400; text-transform: none; margin-bottom: 1rem; font-family: var(--font-body); }
.mini-cta .btn { margin-top: 0.5rem; }
.mini-cta .flex-media-cta-row { justify-content: center; margin-top: 0; }
/* ---------- Banner (centered emphasis over image) ---------- */
.banner { color: #fff; display: flex; align-items: center; min-height: 420px; padding: clamp(3.5rem, 7vw, 6rem) 0; text-align: center; }
.banner-inner { max-width: 760px; margin: 0 auto; }
.banner h2 { color: #fff; }
.banner p { color: rgba(255,255,255,0.9); }
.banner-kicker { font-family: var(--font-head); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; font-size: 1.05rem; color: var(--teal-bright); margin: 0 0 0.5rem; }
.banner-cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; justify-content: center; margin-top: 1.75rem; }
/* left-justify intro/outro paragraph text while the block stays centered on the page. */
.banner-left-text .banner-inner p { text-align: left; }
.svc-left-text .services-head p { text-align: left; }
.svc-left-text .services-foot { text-align: left; }
/* storm section: CTA buttons under the bottom-left image — clear the keyline frame. */
.flex-media-long-col > .storm-cta-row { margin-top: 1.75rem; }
/* ---------- Testimonials carousel (JS in /testimonials.js) ---------- */
.testimonials { background: var(--color-bg-alt); }
.testi-carousel { display: flex; align-items: center; gap: clamp(0.5rem, 2vw, 1rem); margin-top: 2rem; }
.testi-viewport { overflow: hidden; flex: 1 1 auto; min-width: 0; }
.testi-track { display: flex; margin: 0; padding: 0; list-style: none; will-change: transform; }
.testi-slide { flex: 0 0 100%; width: 100%; padding: 0.5rem clamp(0.25rem, 2vw, 1.5rem); }
.testi-quote { margin: 0 auto; max-width: 760px; background: #fff; border: 1px solid var(--color-border); border-top: 4px solid var(--teal); border-radius: var(--radius); padding: clamp(1.5rem, 4vw, 2.75rem); text-align: center; box-shadow: var(--shadow-md); }
.testi-quote > p { font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.6; font-style: italic; color: var(--color-text); margin: 0 0 1.5rem; }
.testi-quote > p::before { content: "\201C"; }
.testi-quote > p::after { content: "\201D"; }
.testi-cite { display: flex; flex-direction: column; gap: 0.1rem; }
.testi-name { font-family: var(--font-head); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; color: var(--color-heading); font-size: 1.2rem; }
.testi-meta { font-size: 0.9rem; color: var(--color-text-muted); }
.testi-arrow { flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; background: var(--navy); color: #fff; border: 0; border-radius: 50%; cursor: pointer; transition: background-color .15s ease, transform .08s ease; }
.testi-arrow:hover { background: var(--orange); }
.testi-arrow:active { transform: scale(0.94); }
.testi-arrow svg { width: 24px; height: 24px; }
.testi-dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.5rem; }
.testi-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-border); transition: background-color .15s ease; }
.testi-dot.is-active { background: var(--teal); }
@media (prefers-reduced-motion: reduce) { .testi-track { transition: none !important; } }
/* ---------- Recent-projects carousel (scroll-snap gallery) ---------- */
.projects { background: var(--navy); color: var(--color-fg-on-dark); }
.projects h2 { color: #fff; }
.projects-head { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.projects-carousel { position: relative; }
.projects-track {
display: flex; gap: 1.25rem; margin: 0; padding: 0 0 0.5rem; list-style: none;
overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
-webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.projects-track::-webkit-scrollbar { display: none; }
.projects-track:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
.project-card {
flex: 0 0 auto; width: min(85%, 380px); scroll-snap-align: start;
background: var(--navy-2); border-top: 4px solid var(--accent-frame);
box-shadow: var(--shadow-md); overflow: hidden;
}
@media (min-width: 700px) { .project-card { width: calc((100% - 2.5rem) / 3); } }
@media (min-width: 1040px) { .project-card { width: calc((100% - 3.75rem) / 4); } }
.project-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.project-cap { padding: 0.9rem 1.1rem 1.1rem; }
.project-tag {
display: inline-block; font-family: var(--font-head); font-weight: 600;
text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.72rem;
color: #fff; background: var(--orange); padding: 0.15rem 0.55rem; margin-bottom: 0.5rem;
}
.project-cap p { margin: 0; font-family: var(--font-head); font-weight: 600; text-transform: uppercase; color: #fff; font-size: 1.05rem; line-height: 1.15; }
.proj-arrows { display: flex; justify-content: center; gap: 0.6rem; margin-top: 1.5rem; }
.proj-btn {
width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center;
background: var(--navy-2); color: #fff; border: 2px solid rgba(255,255,255,0.25); cursor: pointer;
transition: background-color .15s ease, border-color .15s ease, opacity .15s ease, transform .08s ease;
}
.proj-btn:hover { background: var(--orange); border-color: var(--orange); }
.proj-btn:active { transform: scale(0.94); }
.proj-btn:disabled { opacity: 0.35; cursor: default; }
.proj-btn svg { width: 24px; height: 24px; }
@media (prefers-reduced-motion: reduce) { .projects-track { scroll-behavior: auto; } }
/* ---------- CTA (closing call to action) ---------- */
.cta-split { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 880px) { .cta-split { grid-template-columns: 1fr 1fr; } }
.cta-split .btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.cta > .container > .btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
/* cta-center: single centered column — heading, text, buttons stacked. */
.cta-center { max-width: 760px; margin: 0 auto; text-align: center; }
.cta-center .btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
/* ---------- Print ---------- */
@media print {
.top-bar, .site-header, .site-footer, .nav-cta, .howitworks, .feature-band { display: none; }
body { font-size: 12pt; color: #000; background: #fff; }
}
/* FIXED (parallax) background photo behind a .bg-host scrim - same treatment as
.spotlight--fixed. The inline .bg-img is hidden on desktop so the fixed background
shows through; <=900px keeps the ![]()
and .bg-fixed forces attachment:scroll
(iOS renders fixed backgrounds badly). Pair with a .bg-* image class below. */
.flex-media--fixed {
background-size: cover; background-position: center; background-attachment: fixed;
}
@media (min-width: 901px) { .flex-media--fixed > .bg-img { display: none; } }
.bg-ceiling-popcorn { background-image: url("/images/ceiling-popcorn-bg-1536.webp"); }
.bg-pricing-room { background-image: url("/images/pricing-open-room-2400.webp"); }
/* Process steps: no side thumbnails - number + copy only, centred column. */
.process-step { grid-template-columns: 56px 1fr; }
@media (max-width: 640px) { .process-step { grid-template-columns: 48px 1fr; } }