/* ============================================================
_immov2-template — site/style.css
Kitchen & bath remodeling skin, derived from immovable-masonry-kc.
Palette: teal blend (Burbank cyan + A&J deep teal) with a warm
taupe secondary; dark teal-charcoal contrast sections.
Fonts: Archivo (headings) + Public Sans (body), self-hosted.
============================================================ */
/* ---------- Design Tokens ---------- */
:root {
--color-accent: #00B5D9; /* Burbank teal — brand fills (buttons, cards) + accents on dark */
--color-accent-dark: #0098BC; /* darker cyan — fill hover */
--color-accent-bright: #00B5D9; /* Burbank bright cyan-teal for dark backgrounds */
--color-on-accent: #06242c; /* dark ink for text/icons sitting ON the bright teal (AA ~7:1) */
--color-teal-ink: #0E7490; /* deep teal — teal TEXT on light backgrounds (AA on white) */
--color-secondary: #8E7861; /* warm taupe — sparing accents, badges */
--color-secondary-bright: #b39c84;/* lighter taupe for dark backgrounds */
--color-yellow: #FDDB17; /* Burbank yellow — alternate accent / CTAs */
--color-yellow-dark: #E4C40C; /* yellow hover */
--color-yellow-ink: #2f2600; /* dark ink for text on yellow */
--color-gold: #A1885D; /* A&J brownish-gold — highlights (brackets, emphasis) */
--color-gold-bright: #C6A86F; /* lighter gold for emphasis text on dark */
--color-header: #0E2229; /* dark teal — sticky header */
--color-link: #0E7490;
--color-black: #08181e; /* top bar, form cards, header phone button (near-black teal) */
--color-charcoal: #0E2229; /* dark sections, footer (deep teal-charcoal) */
--color-charcoal-2: #13323B; /* cards inside dark sections */
--color-gray: #d7dee0; /* secondary button, light borders */
--color-text: #263238;
--color-text-muted: #5c6b70;
--color-heading: #14252b;
--color-bg: #ffffff;
--color-bg-alt: #F5EAE6; /* Burbank warm cream — alt section bg */
--color-border: #dbe4e6;
--color-error: #b00020;
--color-focus: #0E7490;
--color-fg-on-dark: #ffffff;
/* check-bullet images — tokenized so a palette can recolor them (CSS vars can't
interpolate into a data-URI, so each palette supplies its own full url()). */
--bullet-light: url("data:image/svg+xml;utf8,");
--bullet-dark: url("data:image/svg+xml;utf8,");
--tick-light: url("data:image/svg+xml;utf8,");
--tick-dark: url("data:image/svg+xml;utf8,");
--shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
--shadow-md: 0 10px 30px rgba(0,0,0,0.15);
--shadow-lg: 0 18px 50px rgba(0,0,0,0.30);
--max-w: 1200px;
--header-h: 84px;
--font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
--font-head: "Archivo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
--font-display: "Archivo", system-ui, sans-serif; /* alias — Archivo is the site heading font */
}
/* ============================================================
ASSEMBLY-TIME PALETTE VARIANTS
Default (no attribute) = the teal palette in :root above.
To build a site in another palette, add the attribute to :
Every rule reads role tokens. Alternate palettes override the FULL
color-role set — every role gets a NEW value while keeping its
FUNCTION (light bgs stay light, dark sections stay dark, inks stay
readable, error stays red). Contrast rules are hard requirements:
on-accent ink reads on accent ≥4.5:1; *-ink reads on white AND
bg-alt ≥4.5:1; *-bright reads on charcoal ≥4.5:1; body text on bg
aims ≥7:1. Add more palettes by cloning a block below.
============================================================ */
/* Slate — steel blue + warm sand. Cool paper-white page, slate-tinted
inks/neutrals, leather-tan secondary, muted amber + bronze accents. */
[data-theme="slate"] {
--color-accent: #3E6B8C; /* steel blue fill */
--color-accent-dark: #335A76; /* fill hover */
--color-accent-bright: #6BA6CC; /* steel blue on dark (≥4.5:1 on charcoal) */
--color-on-accent: #ffffff; /* white reads on the mid steel-blue */
--color-teal-ink: #2C567A; /* brand TEXT on light (white + sand) */
--color-secondary: #8A6F51; /* warm leather tan — badges, sparing accents */
--color-secondary-bright: #C2A985; /* lighter tan for dark backgrounds */
--color-yellow: #DCA83E; /* muted amber — alternate accent */
--color-yellow-dark: #C2912E; /* amber hover */
--color-yellow-ink: #2b2005; /* dark ink on the amber */
--color-gold: #9C7B4E; /* warm bronze — highlights on light */
--color-gold-bright: #C8A878; /* bronze emphasis on dark */
--color-header: #1B2A38; /* slate-navy sticky header */
--color-link: #2C567A;
--color-black: #101b24; /* near-black slate (top bar, form cards) */
--color-charcoal: #1B2A38; /* dark sections, footer */
--color-charcoal-2: #24384A; /* cards inside dark sections */
--color-gray: #D3DAE1; /* cool slate secondary button / light borders */
--color-text: #2A3540; /* slate-cast body ink (~12:1 on bg) */
--color-text-muted: #5A6B7A; /* cool blue-gray muted ink */
--color-heading: #1C2B39; /* slate-navy headings */
--color-bg: #FAFBFC; /* cool paper-white page bg */
--color-bg-alt: #F0E9DC; /* warm sand content boxes */
--color-border: #D5DDE4; /* cool slate border */
--color-error: #B0243A; /* slightly cool red */
--color-focus: #2C567A;
--color-fg-on-dark: #ffffff;
--bullet-light: url("data:image/svg+xml;utf8,");
--bullet-dark: url("data:image/svg+xml;utf8,");
--tick-light: url("data:image/svg+xml;utf8,");
--tick-dark: url("data:image/svg+xml;utf8,");
}
/* Forest — green + cream. Warm ivory page, gray-green inks, oak-tan
secondary, harvest-gold + olive-gold accents, sage-tinted neutrals. */
[data-theme="forest"] {
--color-accent: #2F7A55; /* forest green fill */
--color-accent-dark: #276847; /* fill hover */
--color-accent-bright: #63B98C; /* green on dark (≥4.5:1 on charcoal) */
--color-on-accent: #ffffff; /* white reads on the forest green */
--color-teal-ink: #1F6B47; /* brand TEXT on light (white + cream) */
--color-secondary: #8C6E4A; /* warm oak tan — badges, sparing accents */
--color-secondary-bright: #C0A47D; /* lighter oak for dark backgrounds */
--color-yellow: #D9A62E; /* harvest gold — alternate accent */
--color-yellow-dark: #BE8F22; /* harvest gold hover */
--color-yellow-ink: #2a2003; /* dark ink on the gold */
--color-gold: #8A7A3E; /* olive gold — highlights on light */
--color-gold-bright: #BCA95F; /* olive-gold emphasis on dark */
--color-header: #17281F; /* deep green-black sticky header */
--color-link: #1F6B47;
--color-black: #0e1a13; /* near-black green (top bar, form cards) */
--color-charcoal: #17281F; /* dark sections, footer */
--color-charcoal-2: #203A2C; /* cards inside dark sections */
--color-gray: #D6DCD2; /* warm sage secondary button / light borders */
--color-text: #2B362E; /* gray-green body ink (~12:1 on bg) */
--color-text-muted: #5E6B60; /* warm gray-green muted ink */
--color-heading: #1E2C22; /* deep green headings */
--color-bg: #FBFAF6; /* warm ivory page bg */
--color-bg-alt: #F1ECDD; /* cream content boxes */
--color-border: #DAE0D4; /* warm sage border */
--color-error: #A93226; /* warm red */
--color-focus: #1F6B47;
--color-fg-on-dark: #ffffff;
--bullet-light: url("data:image/svg+xml;utf8,");
--bullet-dark: url("data:image/svg+xml;utf8,");
--tick-light: url("data:image/svg+xml;utf8,");
--tick-dark: url("data:image/svg+xml;utf8,");
}
/* Onyx — striking black + vivid teal pop. True-black dark sections
(charcoal/header = #000), cool light-gray page furniture, deep-teal
brand text on light, brass alternate CTA. immov2's dark-on-bright-teal
ink direction is preserved (white fails on #00acac, so ink stays dark). */
[data-theme="onyx"] {
--color-accent: #00acac; /* vivid teal fill */
--color-accent-dark: #009c9c; /* fill hover — kept light enough that the dark on-accent ink still clears AA (4.81:1; #009292 was 4.26, Codex PR#5) */
--color-accent-bright: #00acac; /* teal on dark (7.5:1 on true-black) */
--color-on-accent: #06242c; /* DARK ink reads on the vivid teal (5.8:1); white fails (~2.8:1) */
--color-teal-ink: #0A5C72; /* deep teal — brand TEXT on light (white 7.5:1 + cool-gray 5.6:1) */
--color-secondary: #a6a7a2; /* sage-gray — badges, sparing accents */
--color-secondary-bright: #c4c5c0; /* lighter sage for dark backgrounds */
--color-yellow: #C79A3E; /* brass — alternate CTA (pops on black) */
--color-yellow-dark: #B0862E; /* brass hover */
--color-yellow-ink: #241a02; /* dark ink on the brass (6.6:1) */
--color-gold: #9A7C46; /* muted gold — highlights on light */
--color-gold-bright: #C6A86F; /* gold emphasis on dark */
--color-header: #000000; /* true-black sticky header (onyx signature) */
--color-link: #0A5C72;
--color-black: #0d0d0d; /* near-black (top bar, form cards) */
--color-charcoal: #000000; /* true-black dark sections, footer */
--color-charcoal-2: #1c1c1c; /* cards inside dark sections */
--color-gray: #d5d6d2; /* cool gray secondary button / light borders */
--color-text: #232322; /* near-black body ink (~16:1 on white) */
--color-text-muted: #5c5c5a; /* neutral gray muted ink */
--color-heading: #171716; /* near-black headings */
--color-bg: #ffffff; /* white page bg */
--color-bg-alt: #dfdedc; /* cool light-gray content boxes */
--color-border: #cdccc9; /* cool gray border */
--color-error: #b00020;
--color-focus: #0A5C72;
--color-fg-on-dark: #ffffff;
--bullet-light: url("data:image/svg+xml;utf8,");
--bullet-dark: url("data:image/svg+xml;utf8,");
--tick-light: url("data:image/svg+xml;utf8,");
--tick-dark: url("data:image/svg+xml;utf8,");
}
/* Clay — warm clay + cool slate (two-temperature). Warm clay fills/CTAs,
cool slate-blue brand text/links, deep-brown dark sections, coral pop on
dark, warm-greige page furniture. Clay seed #bc7b6f is darkened to #A85B4D
so WHITE ink clears AA on the fill (raw #bc7b6f + white ≈ 3:1 fails). */
[data-theme="clay"] {
--color-accent: #A85B4D; /* clay fill (seed #bc7b6f darkened for white ink) */
--color-accent-dark: #8F4B3E; /* fill hover */
--color-accent-bright: #e4a499; /* light coral on dark (7:1 on deep brown) */
--color-on-accent: #ffffff; /* white ink reads on the clay fill (4.9:1) */
--color-teal-ink: #445E78; /* slate-blue — brand TEXT on light (seed #718a9e deepened; white 6.4:1 + greige 5.0:1) */
--color-secondary: #718a9e; /* slate blue — badges, sparing accents */
--color-secondary-bright: #9db0c0; /* lighter slate for dark backgrounds */
--color-yellow: #e4a499; /* light coral — alternate CTA (clay-family warm pop) */
--color-yellow-dark: #d68b7e; /* coral hover */
--color-yellow-ink: #3a1e18; /* deep-brown ink on the coral (7.3:1) */
--color-gold: #9C6E52; /* warm bronze — highlights on light */
--color-gold-bright: #C89A7A; /* bronze emphasis on dark */
--color-header: #3d221c; /* deep-brown sticky header */
--color-link: #445E78;
--color-black: #2e1a15; /* near-black brown (top bar, form cards) */
--color-charcoal: #3d221c; /* deep-brown dark sections, footer */
--color-charcoal-2: #4d2c24; /* cards inside dark sections */
--color-gray: #d8d3ce; /* warm gray secondary button / light borders */
--color-text: #2b211d; /* warm near-black body ink (~15:1 on bg) */
--color-text-muted: #6a5852; /* warm taupe-gray muted ink */
--color-heading: #35211b; /* deep-brown headings */
--color-bg: #FCF9F6; /* warm paper page bg */
--color-bg-alt: #e6dbd2; /* warm-greige content boxes */
--color-border: #ddd2ca; /* warm greige border */
--color-error: #A93226; /* warm red */
--color-focus: #445E78;
--color-fg-on-dark: #ffffff;
--bullet-light: url("data:image/svg+xml;utf8,");
--bullet-dark: url("data:image/svg+xml;utf8,");
--tick-light: url("data:image/svg+xml;utf8,");
--tick-dark: url("data:image/svg+xml;utf8,");
}
/* Brick — recreates the ORIGINAL immovable-masonry-kc look (immov2 was
re-skinned from it): terracotta brick accent, neutral-charcoal dark
sections, warm off-white page. NOTE the on-accent direction flips vs
immov2's default: the original used WHITE ink on the brick fill (white on
#B7410E ≈ 5.6:1 passes AA), so --color-on-accent = #fff here. accent-bright
is lightened from the source #cf4d14 to #F07F40 to clear 4.5:1 on charcoal. */
[data-theme="brick"] {
--color-accent: #B7410E; /* terracotta brick fill */
--color-accent-dark: #8A3209; /* fill hover */
--color-accent-bright: #F07F40; /* lightened terracotta on dark (5.3:1 on #2b2b2b, 4.7:1 on the steps mini-cta wash; source #cf4d14 = 3.2:1 fails) */
--color-on-accent: #ffffff; /* WHITE ink on brick fill (5.6:1) — direction flip vs default's dark ink */
--color-teal-ink: #B7410E; /* brick — brand TEXT/links on light (white 5.6:1 + off-white 5.0:1) */
--color-secondary: #9a8d7e; /* warm stone/taupe (derived from #d3d3d3/#e2ddd6) */
--color-secondary-bright: #c3b7a6; /* lighter stone for dark backgrounds */
--color-yellow: #E0A32E; /* warm amber — alternate CTA (complements terracotta) */
--color-yellow-dark: #C68C1E; /* amber hover */
--color-yellow-ink: #2a1c02; /* dark ink on the amber (7.5:1) */
--color-gold: #96794a; /* warm gold — highlights on light */
--color-gold-bright: #C4A76E; /* gold emphasis on dark */
--color-header: #2b2b2b; /* neutral-charcoal sticky header */
--color-link: #B7410E;
--color-black: #000000; /* black (top bar, form cards) */
--color-charcoal: #2b2b2b; /* neutral-charcoal dark sections, footer */
--color-charcoal-2: #1f1f1f; /* cards inside dark sections */
--color-gray: #d3d3d3; /* neutral-gray secondary button / light borders */
--color-text: #2c2c2c; /* near-black body ink (~14:1 on white) */
--color-text-muted: #6b6b6b; /* neutral gray muted ink */
--color-heading: #222222; /* near-black headings */
--color-bg: #ffffff; /* white page bg */
--color-bg-alt: #f4f2ef; /* warm off-white content boxes */
--color-border: #e2ddd6; /* warm gray border */
--color-error: #b00020;
--color-focus: #B7410E;
--color-fg-on-dark: #ffffff;
--bullet-light: url("data:image/svg+xml;utf8,");
--bullet-dark: url("data:image/svg+xml;utf8,");
--tick-light: url("data:image/svg+xml;utf8,");
--tick-dark: url("data:image/svg+xml;utf8,");
}
/* ---------- Self-hosted fonts ---------- */
@font-face { font-family:"Archivo"; font-style:normal; font-weight:400 700; font-display:swap; src:url("/fonts/archivo.woff2") format("woff2"); }
@font-face { font-family:"Public Sans"; font-style:normal; font-weight:400 700; font-display:swap; src:url("/fonts/public-sans.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.65;
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: 700;
line-height: 1.08;
margin: 0 0 0.5em;
color: var(--color-heading);
text-transform: uppercase;
letter-spacing: 0.005em;
}
h1 { font-size: clamp(1.85rem, 4.5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3.3vw, 2.1rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
h4 { font-size: 1.2rem; }
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(--color-black); 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;
}
/* ---------- 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.5rem) 0; }
.section-dark { background: var(--color-charcoal); 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(--color-accent-bright); }
.section-intro { max-width: 75ch; margin: 0 0 2rem; }
.section-cta { display: flex; justify-content: center; margin-top: 2rem; }
.accent { color: var(--color-teal-ink); }
.section-dark .accent { color: var(--color-accent-bright); }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
font: inherit; font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
padding: 0.8rem 1.6rem; border: 2px solid transparent; border-radius: 0;
text-decoration: none; cursor: pointer; min-height: 48px; line-height: 1.1;
transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .08s ease;
}
.btn:active { transform: translateY(1px); }
.btn-call { background: var(--color-accent); color: var(--color-on-accent); }
.btn-call:hover { background: var(--color-accent-dark); color: var(--color-on-accent); }
.btn-services { background: var(--color-gray); color: var(--color-heading); }
.btn-services:hover { background: #fff; }
.btn-accent { background: var(--color-yellow); color: var(--color-yellow-ink); }
.btn-accent:hover { background: var(--color-yellow-dark); color: var(--color-yellow-ink); }
.btn-light { background: var(--color-bg-alt); color: var(--color-teal-ink); }
.btn-light:hover { background: #fff; color: var(--color-teal-ink); }
.btn-outline-dark { background: transparent; color: var(--color-heading); border-color: var(--color-heading); }
.btn-outline-dark:hover { background: var(--color-heading); color: #fff; }
.btn-tel { background: var(--color-accent); color: var(--color-on-accent); border-radius: 999px; padding: 0.7rem 1.4rem; white-space: nowrap; flex-shrink: 0; }
.btn-tel:hover { background: var(--color-accent-dark); color: var(--color-on-accent); }
/* aliases so utility pages' existing button classes keep working */
.btn-primary { background: var(--color-accent); color: var(--color-on-accent); }
.btn-primary:hover { background: var(--color-accent-dark); color: var(--color-on-accent); }
.btn-outline-navy { background: transparent; color: var(--color-heading); border-color: var(--color-heading); }
.btn-outline-navy:hover { background: var(--color-heading); color: #fff; }
.btn-block { display: flex; width: 100%; }
/* ============================================================
Header (dark teal, sticky)
============================================================ */
.site-header {
position: sticky; top: 0; z-index: 50;
background: var(--color-header);
box-shadow: 0 2px 10px rgba(0,0,0,0.28);
}
.site-header .container {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
min-height: var(--header-h);
}
.brand {
display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px;
background: #fff; padding: 0.55rem 1rem; text-decoration: none;
box-shadow: 0 6px 14px rgba(0,0,0,0.18);
}
.site-nav { display: flex; align-items: center; }
.nav-list { display: flex; align-items: center; gap: 0.25rem 1.4rem; flex-wrap: nowrap; list-style: none; margin: 0; padding: 0; }
.nav-item { position: relative; }
.nav-item > a {
display: inline-flex; align-items: center; gap: 0.3rem; color: #fff; text-decoration: none;
font-family: var(--font-head); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
font-size: 0.92rem; padding: 1rem 0.1rem;
}
.nav-item > a:hover { color: var(--color-accent-bright); }
.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: 270px; background: #fff;
box-shadow: 0 16px 36px rgba(0,0,0,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(--color-black);
}
.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.92rem; 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(--color-teal-ink); }
.dropdown-2col { display: grid; grid-template-columns: 1fr 1fr; min-width: 420px; gap: 0; }
.dropdown-3col { display: grid; grid-template-columns: 1fr 1fr 1fr; min-width: 560px; gap: 0; }
@media (max-width: 1100px) { .dropdown-3col { grid-template-columns: 1fr 1fr; min-width: 400px; } }
.nav-cta { margin-left: 0.5rem; }
.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: 24px; height: 2px; background: #fff; 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: -7px; } .menu-toggle span::after { top: 7px; }
.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: 940px) {
.site-header .container { flex-wrap: wrap; align-content: center; row-gap: 0; }
.site-header .brand { min-height: var(--header-h); justify-content: center; }
.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.5rem -1.25rem -0.5rem;
padding: 0.25rem 1.25rem 1rem; background: var(--color-charcoal);
}
.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.05rem; }
.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); }
/* nav.js flags dropdowns whose children are plain text: in the drawer those
parents navigate instead of expanding, so the caret would promise a
disclosure that never happens. It still earns its place on desktop, where
hover reveals the list. */
.site-nav.is-open .has-dropdown--unlinked > a .nav-caret { display: none; }
.site-nav.is-open .dropdown-2col, .site-nav.is-open .dropdown-3col { grid-template-columns: 1fr; min-width: 0; }
.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; }
}
/* Small mobile: phone button drops to its own centered row below logo + hamburger */
@media (max-width: 480px) {
.menu-toggle { order: 1; }
.nav-cta { order: 2; flex: 0 0 100%; max-width: max-content; margin: 0.15rem auto 0.6rem; }
}
/* ============================================================
Hero (split: heading + CTAs left, estimate form right)
============================================================ */
.hero {
position: relative;
background:
linear-gradient(color-mix(in srgb, var(--color-charcoal) 64%, transparent), color-mix(in srgb, var(--color-charcoal) 78%, transparent)),
url("/images/hero-sprinkler-bg.webp") center / cover no-repeat,
var(--color-charcoal);
color: #fff;
padding: clamp(3rem, 7vw, 6rem) 0;
}
.hero-grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.05fr 0.95fr; } }
.hero-text h1 { color: #fff; margin: 0 0 1.75rem; max-width: 18ch; }
.hero-text h1 .accent { color: var(--color-accent-bright); }
/* .hero-headline — full-width headline for the ALT hero (spans above both columns) */
.hero-headline { color: #fff; max-width: 100%; margin: 0 0 clamp(1.5rem, 3vw, 2.25rem); }
/* intro hero: tighter top padding (headline starts higher) */
.hero:has(.hero-intro) { padding-top: clamp(1.25rem, 3vw, 2.5rem); }
.hero-headline .accent { color: var(--color-accent-bright); }
/* with a headline on top, top-align the columns (alt hero only) */
.hero-headline + .hero-grid { align-items: start; }
/* .hero-intro — lead paragraph for the ALT (intro) hero variant */
.hero-intro { color: rgba(255,255,255,0.92); line-height: 1.65; margin: 0 0 1.75rem; }
.hero-cta-row { display: flex; flex-wrap: wrap; gap: 0.85rem; }
/* ---------- Estimate form card (teal) ---------- */
.estimate-card { background: var(--color-accent); color: var(--color-on-accent); padding: clamp(1.5rem, 3vw, 2.25rem); }
.estimate-title { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; text-align: center; font-size: clamp(1.5rem, 3vw, 2rem); color: var(--color-on-accent); margin: 0 0 1.25rem; letter-spacing: 0.01em; }
.estimate-form { display: grid; gap: 0.75rem; }
.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: 0; background: #f3f4f6; color: var(--color-text);
}
.estimate-form select { color: #6b6b6b; appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 0.7rem center; padding-right: 2.2rem; }
.estimate-form textarea { min-height: 110px; resize: vertical; }
/* Reserve the Turnstile widget's height so its async render doesn't shift the hero */
.cf-turnstile { min-height: 76px; }
.estimate-form input:focus, .estimate-form select:focus, .estimate-form textarea:focus { outline: 3px solid var(--color-accent); outline-offset: 1px; }
.estimate-form button[type="submit"] {
background: var(--color-charcoal); color: #fff; font: inherit; font-family: var(--font-head);
font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.95rem; border: 0;
cursor: pointer; min-height: 52px;
}
.estimate-form button[type="submit"]:hover { background: var(--color-black); }
/* ============================================================
Trust / About
============================================================ */
.trust-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; }
/* Cream "content box" on the utility-page trust section */
.trust .container {
background: var(--color-bg-alt);
padding: clamp(1.75rem, 4vw, 3.25rem);
box-shadow: var(--shadow-sm);
}
@media (min-width: 880px) { .trust-grid { grid-template-columns: 1.1fr 0.9fr; } }
.trust h2 { color: var(--color-heading); }
.trust-cta-row { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.75rem; }
.trust-media > img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; box-shadow: var(--shadow-md); }
/* ============================================================
Feature lists (check-bullet lists — used by lf-banner + long blocks)
============================================================ */
.feature-list { list-style: none; margin: 0.5rem 0 0; padding: 0; font-size: 0.95rem; }
.feature-list li { position: relative; padding-left: 28px; margin-bottom: 0.7rem; line-height: 1.45; }
.feature-list li strong { color: var(--color-heading); }
.feature-list li::before {
content: ""; position: absolute; left: 0; top: 0.18em; width: 16px; height: 16px;
background-repeat: no-repeat; background-size: contain;
background-image: var(--tick-light);
}
.section-dark .feature-list li { color: rgba(255,255,255,0.85); }
.section-dark .feature-list li strong { color: #fff; }
.section-dark .feature-list li::before { background-image: var(--tick-dark); }
.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; } }
/* ============================================================
Services — full-bleed dark grid, teal hairline dividers.
Alternating rows: 3-across (image over stacked title+text),
then 2-across (image left, title+text right). Ported from the
A&J Remodels services grid, retheme'd to the teal palette.
============================================================ */
.services h2 { text-align: center; color: #fff; font-family: var(--font-display); }
.services .section-intro { text-align: center; margin-left: auto; margin-right: auto; }
/* full-bleed wrapper: escape the page and any container gutters */
.services-grid {
margin-top: 2.5rem;
}
.svc-row { display: grid; gap: 2px; background: var(--color-accent-bright); }
.svc-row + .svc-row { border-top: 2px solid var(--color-accent-bright); }
.svc-row-3 { grid-template-columns: repeat(3, 1fr); }
.svc-row-2 { grid-template-columns: repeat(2, 1fr); }
/* cells sit on the dark section colour so the teal gaps read as dividers */
.svc-cell { background: var(--color-charcoal); position: relative; }
.svc-cell-link { color: inherit; text-decoration: none; display: block; height: 100%; }
.svc-figure { margin: 0; overflow: hidden; background: var(--color-charcoal-2); }
.svc-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.svc-cell:hover .svc-img { transform: scale(1.03); }
.svc-title {
font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
letter-spacing: 0.05em; color: #fff; margin: 0;
transition: color .15s ease;
}
.svc-cell:hover .svc-title { color: var(--color-accent-bright); }
.svc-text { color: rgba(255,255,255,0.78); font-size: 0.95rem; margin: 0.6rem 0 0; }
/* 3-across: inset image on top, centered title, then text below */
.svc-cell-3 { display: flex; flex-direction: column; text-align: center; padding: 2.5rem 2.5rem 0; }
.svc-cell-3 .svc-figure { aspect-ratio: 4 / 3; }
.svc-cell-3 .svc-body { padding: 1.25rem 0.25rem 1.75rem; }
.svc-cell-3 .svc-title { font-size: 1.3rem; }
/* 2-across: inset image left, title + text on the right */
.svc-cell-2 { padding: 1.5rem; }
.svc-cell-2 .svc-cell-link { display: grid; grid-template-columns: minmax(0,42%) 1fr; align-items: center; gap: 1.75rem; }
.svc-cell-2 .svc-figure { aspect-ratio: 4 / 3; }
.svc-cell-2 .svc-body { padding: 0; }
.svc-cell-2 .svc-title { font-size: 1.5rem; }
@media (max-width: 900px) {
.svc-row-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
.svc-row-3, .svc-row-2 { grid-template-columns: 1fr; }
.svc-cell-2 .svc-cell-link { grid-template-columns: 1fr; }
.svc-cell-2 .svc-figure { aspect-ratio: 16 / 9; }
.svc-cell-2 .svc-body { text-align: center; }
}
/* ---------- page-narrow (utility page content width) ---------- */
.page-narrow { max-width: 820px; margin: 0 auto; }
/* ============================================================
FAQ
============================================================ */
.faq h2 { text-align: center; color: #fff; }
.faq-list { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.75rem; max-width: 860px; margin-left: auto; margin-right: auto; }
.faq-item { background: var(--color-bg-alt); border: 1px solid var(--color-border); }
.faq-item > summary { list-style: none; cursor: pointer; padding: 1rem 1.25rem; font-family: var(--font-head); font-weight: 600; text-transform: uppercase; letter-spacing: 0.01em; color: var(--color-heading); 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.5rem; color: var(--color-teal-ink); flex-shrink: 0; }
.faq-item[open] > summary::after { content: "\2212"; }
.faq-item[open] > summary { background: var(--color-accent); color: var(--color-on-accent); }
.faq-item[open] > summary::after { color: var(--color-on-accent); }
.faq-item > .faq-body { padding: 1rem 1.25rem; color: var(--color-text); }
/* ============================================================
Contact band (Have questions + estimate)
============================================================ */
.contact-band { background: var(--color-charcoal); }
.contact-band-grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 880px) { .contact-band-grid { grid-template-columns: 1fr 1fr; } }
.contact-band-info { text-align: center; }
@media (min-width: 880px) { .contact-band-info { text-align: left; } }
.contact-band-icon { display: inline-flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 50%; background: var(--color-accent); color: var(--color-on-accent); margin-bottom: 1rem; }
.contact-band-kicker { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; color: var(--color-accent-bright); margin: 0 0 0.25rem; letter-spacing: 0.02em; }
.contact-band-phone { display: inline-block; font-family: var(--font-head); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.2rem); color: #fff; text-decoration: none; margin-bottom: 1rem; }
.contact-band-phone:hover { color: var(--color-accent-bright); }
/* "Get in touch" contact info list (light section) */
.get-in-touch h2 { color: var(--color-heading); }
.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(--color-teal-ink); flex-shrink: 0; margin-top: 0.12em; }
.contact-info a { color: var(--color-text); text-decoration: none; }
.contact-info a:hover { color: var(--color-teal-ink); }
/* ============================================================
Footer
============================================================ */
.site-footer { background: var(--color-charcoal); color: #b9b9b9; padding: 3.5rem 0 1.5rem; border-top: 2px solid var(--color-accent-bright); }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.6fr 0.85fr 1.15fr 1.2fr; } }
.footer-wordmark { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.05; color: var(--color-accent-bright); text-decoration: none; display: inline-block; }
.footer-wordmark span { color: var(--color-accent-bright); }
.footer-col h3 { color: #fff; margin: 0 0 1rem; padding-bottom: 0.5rem; position: relative; font-size: 1.2rem; }
.footer-col h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 38px; height: 3px; background: var(--color-accent); }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 0.6rem; }
.footer-contact-list li, .footer-links li { display: flex; align-items: flex-start; gap: 0.6rem; line-height: 1.5; }
.footer-contact-list a, .footer-links a, .footer-contact-list span { color: #c4c4c4; text-decoration: none; display: inline-flex; align-items: flex-start; gap: 0.6rem; }
.footer-contact-list a:hover, .footer-links a:hover { color: #fff; }
.footer-contact-list svg, .footer-links svg { color: var(--color-accent-bright); flex-shrink: 0; margin-top: 0.18em; }
.footer-brand-contact { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.footer-list-plain { list-style: none; padding: 0; margin: 0; }
.footer-areas { columns: 2; column-gap: 1.25rem; }
.footer-areas li { color: #c4c4c4; font-size: 0.9rem; margin-bottom: 0.5rem; break-inside: avoid; }
.legal { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,0.1); font-size: 0.85rem; color: #8d8d8d; display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; justify-content: space-between; }
.legal a { color: #b9b9b9; text-decoration: none; margin-right: 1rem; }
.legal a:hover { color: #fff; }
/* ============================================================
Contact / utility forms (contact.html etc.)
============================================================ */
.form-card { background: #fff; border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); padding: clamp(1.25rem, 3vw, 2rem); }
.form-grid { display: grid; gap: 1rem; }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label { font-weight: 700; font-size: 0.95rem; }
.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: 0;
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 color-mix(in srgb, var(--color-focus) 18%, transparent); 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; }
.form-or { text-align: center; margin: 1.5rem 0; color: var(--color-text-muted); font-weight: 700; letter-spacing: 0.04em; }
.nap address { font-style: normal; line-height: 1.7; }
/* ---------- Utility page simple nav ---------- */
.site-nav.simple { gap: 1.5rem; }
.site-nav.simple a { color: #fff; font-family: var(--font-head); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; text-decoration: none; font-size: 1rem; }
.site-nav.simple a:hover { color: var(--color-accent-bright); }
@media (max-width: 940px) { .site-nav.simple { display: none; } }
/* ============================================================
SHARED BLOCK VOCABULARY (immov2 skin)
The global blocks the assembler fills, skinned in immov2's
teal (#00B5D9) + dark-teal (#0E2229) + cream (#F5EAE6) tokens,
Archivo headings / Public Sans body, flat square corners.
Ported + re-tokenized from _easton-template.
============================================================ */
/* ---------- section-label (teal kicker above h2) ---------- */
.section-label {
font-family: var(--font-head); font-weight: 700; text-transform: uppercase;
letter-spacing: 0.08em; color: var(--color-teal-ink); font-size: 1.05rem; margin: 0 0 0.4rem;
}
.section-dark .section-label { color: var(--color-accent-bright); }
/* ---------- img-as-background helper (real ![]()
+ overlay) ---------- */
.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: linear-gradient(color-mix(in srgb, var(--color-charcoal) 82%, transparent), color-mix(in srgb, var(--color-charcoal) 90%, transparent));
}
.bg-host.bg-soft::before { background: linear-gradient(color-mix(in srgb, var(--color-charcoal) 55%, transparent), color-mix(in srgb, var(--color-charcoal) 72%, transparent)); }
.bg-host > .container { position: relative; z-index: 2; }
/* Fixed (parallax) backgrounds — disabled ≤900px (iOS renders them badly + double-download) */
/* One value per background layer — .hero has THREE (scrim gradient, photo, and the
trailing var(--color-charcoal), which is a layer in the shorthand even though its
image is none). Only the photo is pinned to the viewport; the scrim must stay with
the section, since a single `fixed` would pin the gradient too and stretch the
scrim across the whole viewport instead of the hero. Keep this list at three
entries if the .hero shorthand ever gains or loses a layer. */
.hero.bg-fixed { background-attachment: scroll, fixed, scroll; }
.hero.bg-fixed .bg-img { display: none; }
@media (max-width: 900px) {
.bg-fixed { background-attachment: scroll !important; }
.hero.bg-fixed .bg-img { display: block; }
}
/* ---------- btn-outline-light (for CTAs on dark/photo bg) ---------- */
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.6); }
.btn-outline-light:hover { background: #fff; color: var(--color-charcoal); }
/* ---------- snow-list (teal 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-light);
}
.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; }
/* brighter check circle on dark backgrounds (parity with .feature-list) */
.section-dark .snow-list li::before, .spotlight .snow-list li::before {
background-image: var(--bullet-dark);
}
/* ---------- subhead (h3 lead-in inside text blocks) ---------- */
.subhead { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--color-teal-ink); font-size: 1.2rem; margin: 1.5rem 0 0.5rem; }
.section-dark .subhead, .feature-aside .subhead { color: var(--color-accent-bright); }
/* ---------- Flex-media (workhorse: short text + image) ---------- */
.flex-media { background: var(--color-bg); }
.flex-media h2, .flex-media--long h2, .flex-media--long-reverse h2 { color: var(--color-heading); }
.flex-media-grid { display: grid; gap: clamp(1.5rem, 3vw, 2.75rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 880px) { .flex-media-grid { grid-template-columns: 1.1fr 1fr; } }
.flex-media-text > :first-child { margin-top: 0; }
.flex-media-figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; box-shadow: var(--shadow-md); }
.flex-media-cta-row { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; align-items: center; }
@media (min-width: 880px) { .flex-media--reverse .flex-media-figure { order: -1; } }
.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; } }
/* immov2 identity: SHORT flex-media sits in a cream content box floating on white */
.flex-media:not(.flex-media--long):not(.flex-media--long-reverse) > .container {
background: var(--color-bg-alt); padding: clamp(1.75rem, 4vw, 3.25rem); box-shadow: var(--shadow-sm);
}
/* immov2 identity: LONG blocks = dark-teal offset panel with overlapping image + teal bracket */
.flex-media--long, .flex-media--long-reverse { background: var(--color-bg); }
.flex-media--long .flex-media-text, .flex-media--long-reverse .flex-media-text {
background: var(--color-charcoal); color: #fff; padding: clamp(2rem, 4vw, 3.25rem); position: relative; z-index: 1;
}
.flex-media--long .flex-media-text h2, .flex-media--long-reverse .flex-media-text h2,
.flex-media--long .flex-media-text h3, .flex-media--long-reverse .flex-media-text h3 { color: #fff; }
.flex-media--long .flex-media-text h2, .flex-media--long-reverse .flex-media-text h2 { margin-top: 0; }
.flex-media--long .flex-media-text h2::before, .flex-media--long-reverse .flex-media-text h2::before {
content: ""; display: block; width: 56px; height: 22px;
border-top: 3px solid var(--color-accent-bright); border-left: 3px solid var(--color-accent-bright); margin-bottom: 16px;
}
.flex-media--long .flex-media-text p, .flex-media--long-reverse .flex-media-text p { color: rgba(255,255,255,0.86); }
.flex-media--long .flex-media-text strong, .flex-media--long-reverse .flex-media-text strong { color: var(--color-accent-bright); }
.flex-media--long .flex-media-figure img, .flex-media--long-reverse .flex-media-figure img { box-shadow: var(--shadow-lg); }
@media (min-width: 860px) {
/* zero the grid gap so the negative margin genuinely overlaps the image onto the panel */
.flex-media--long .flex-media-grid,
.flex-media--long-reverse .flex-media-grid { gap: 0; }
.flex-media--long .flex-media-grid { grid-template-columns: 0.9fr 1.25fr; align-items: center; }
.flex-media--long-reverse .flex-media-grid { grid-template-columns: 1.25fr 0.9fr; align-items: center; }
.flex-media--long .flex-media-figure { margin-right: -3.5rem; position: relative; z-index: 2; }
.flex-media--long .flex-media-text { padding-left: clamp(4.5rem, 6vw, 6.5rem); }
.flex-media--long-reverse .flex-media-figure { order: 2; margin-left: -3.5rem; position: relative; z-index: 2; }
.flex-media--long-reverse .flex-media-text { padding-right: clamp(4.5rem, 6vw, 6.5rem); }
}
/* stacked figure — two images stacked in the figure column (from findlay) */
.flex-media--stack .flex-media-figure { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); align-content: center; }
/* sticky figure — pin the image to the top of its column so it tracks the
reader (from sioux-falls-hardwood-flooring). The skin CENTERS the figure
by default, which is right for a short block but leaves a large void above
and below it once the text column runs long: a 430-670 word section makes a
1400-2200px text column against a ~406px figure, stranding the image in the
middle of ~875px of empty space. Opt in with --sticky on any long block
carrying that much copy; leave it off for short ones, where centering wins.
Composes with --stack, --cream and --frame. */
@media (min-width: 880px) {
.flex-media--sticky.flex-media--long .flex-media-figure,
.flex-media--sticky.flex-media--long-reverse .flex-media-figure { align-self: start; position: sticky; top: 7rem; }
}
/* full-width cream band variant (replaces the white section bg) */
.flex-media.flex-media--cream { background: var(--color-bg-alt); }
/* teal frame around the figure images */
.flex-media--frame .flex-media-figure img { border: 2px solid var(--color-accent-bright); }
/* services-head (centered kicker + h2 above the full-width grid) */
.services-head { text-align: center; max-width: 64ch; margin: 0 auto 2.25rem; }
.services-head .section-label { color: var(--color-accent-bright); }
.section-dark .services-head h2 { color: #fff; margin-bottom: 0.5rem; }
/* ---------- 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: color-mix(in srgb, var(--color-accent-bright) 14%, transparent); border: 1px solid var(--color-accent-bright); padding: 1.75rem; 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: 700; text-transform: uppercase; line-height: 1.05; }
.feature-aside-box .btn { width: 100%; background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent); }
.feature-aside-box .btn:hover { background: var(--color-accent-dark); border-color: var(--color-accent-dark); color: var(--color-on-accent); }
/* ---------- Spotlight (service areas + city narrative over bg) ---------- */
.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: 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: 700; text-transform: uppercase; line-height: 1.05; color: #fff; margin: 0 0 1rem; }
.spotlight-areas { display: grid; grid-template-columns: 1fr; gap: 0 1.5rem; margin-top: 0; }
@media (min-width: 480px) { .spotlight-areas { grid-template-columns: 1fr 1fr; } }
.spotlight--light { color: var(--color-text); background: var(--color-bg); }
.spotlight--light h2 { color: var(--color-heading); }
.spotlight--light .spotlight-side-title { color: var(--color-teal-ink); }
.spotlight--light p, .spotlight--light .snow-list li { color: var(--color-text); }
.spotlight--light .snow-list li strong { color: var(--color-heading); }
/* ---------- Steps (staggered timeline: one per row, circles inside) ---------- */
.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 { display: flex; flex-direction: column; gap: clamp(1.75rem, 3.5vw, 3rem); max-width: 920px; margin: 0 auto; padding: 0; list-style: none; }
.process-step { display: grid; align-items: center; gap: clamp(1.25rem, 3vw, 2.25rem); width: min(600px, 100%); }
.process-step > img, .process-step > .process-step-icon { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; margin: 0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.process-step > .process-step-icon { background: var(--color-accent); color: var(--color-on-accent); }
.process-step-body > :first-child { margin-top: 0; }
.process-step .step-num { display: block; font-family: var(--font-head); font-size: 2rem; font-weight: 700; color: var(--color-accent-bright); line-height: 1; margin-bottom: 0.25rem; }
.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; }
.process-step:nth-child(odd) { grid-template-columns: 1fr auto; margin-right: auto; text-align: right; }
.process-step:nth-child(odd) > .process-step-body { grid-column: 1; grid-row: 1; }
.process-step:nth-child(odd) > img,
.process-step:nth-child(odd) > .process-step-icon { grid-column: 2; grid-row: 1; }
.process-step:nth-child(even) { grid-template-columns: auto 1fr; margin-left: auto; text-align: left; }
@media (max-width: 640px) {
.process-step:nth-child(odd),
.process-step:nth-child(even) { grid-template-columns: 1fr; width: 100%; margin: 0; text-align: center; justify-items: center; }
.process-step:nth-child(odd) > img,
.process-step:nth-child(odd) > .process-step-icon,
.process-step:nth-child(even) > img,
.process-step:nth-child(even) > .process-step-icon { grid-column: 1; grid-row: 1; margin: 0 auto; }
.process-step:nth-child(odd) > .process-step-body,
.process-step:nth-child(even) > .process-step-body { grid-column: 1; grid-row: 2; }
}
.mini-cta { margin-top: 3rem; text-align: center; padding: 1.75rem; background: rgba(255,255,255,0.04); }
.mini-cta p { color: var(--color-accent-bright); font-family: var(--font-head); font-weight: 700; 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; }
/* ---------- 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: 700; font-size: 1.05rem; color: var(--color-accent-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; }
/* ---------- 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(--color-accent); 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-stars { color: #F5B301; font-size: 1.15rem; letter-spacing: 4px; line-height: 1; margin: 0 0 0.9rem; }
.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: 700; 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(--color-charcoal); color: #fff; border: 0; border-radius: 50%; cursor: pointer; transition: background-color .15s ease, transform .08s ease; }
.testi-arrow:hover { background: var(--color-accent); color: var(--color-on-accent); }
.testi-arrow:active { transform: scale(0.94); }
.testi-arrow svg { width: 24px; height: 24px; }
.testi-prev svg { transform: scaleX(-1); } /* mirror the (always-present) chevron-right into a left arrow */
.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(--color-accent); }
@media (prefers-reduced-motion: reduce) { .testi-track { transition: none !important; } }
/* ---------- 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); }
/* ---------- Feature-band (EXTRA: icon + heading + text triplets) ---------- */
.feature-band { background: var(--color-charcoal); color: #fff; padding: clamp(2.25rem, 4vw, 3rem) 0; }
.feature-band.band-navy { background: var(--color-charcoal); } /* explicit variant (default) — parity with .band-teal */
.feature-band.band-teal { background: var(--color-teal-ink); }
.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: var(--color-accent-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; }
/* ---------- lf-banner (EXTRA: colored service-intro band) ---------- */
.lf-banner { color: #fff; padding: clamp(2.5rem, 5vw, 4rem) 0; }
.lf-banner.b-navy { background: var(--color-charcoal); }
.lf-banner.b-teal { background: var(--color-teal-ink); }
/* light cream band — dark text (palette-consistent alternative to the colored bands) */
.lf-banner.b-cream { background: var(--color-bg-alt); color: var(--color-text); }
.lf-banner.b-cream h2 { color: var(--color-heading); }
.lf-banner.b-cream p { color: var(--color-text); }
.lf-banner.b-cream .section-label { color: var(--color-teal-ink); }
.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; box-shadow: var(--shadow-lg); }
.lf-banner h2 { color: #fff; }
.lf-banner p { color: rgba(255,255,255,0.85); }
.lf-banner .section-label { color: color-mix(in srgb, var(--color-accent-bright) 30%, white); }
.lf-prose { max-width: 82ch; }
.inline-cta { margin-top: 1.5rem; display: inline-flex; }
/* ---------- Print ---------- */
@media print {
.site-header, .site-footer, .nav-cta, .contact-band { display: none; }
body { font-size: 12pt; color: #000; background: #fff; }
}
/* ============================================================
SITE-LOCAL — winter-haven-irrigation
Small additions for blocks this page uses in a shape the
palette did not ship. Nothing here overrides a palette token.
============================================================ */
/* Services band: the section's own intro paragraph, under the h2. */
.section-dark .services-head p { color: rgba(255,255,255,0.82); margin: 0.75rem 0 0; }
/* Spotlight carries h3 subsections here; .subhead's default ink is the
light-background teal, which does not read on the dark spotlight. */
.spotlight .subhead { color: var(--color-accent-bright); }
/* Spotlight areas column holds TWO labelled lists. .spotlight-side-title is a
display-size heading built for a single 2-word label; these are sentence
lead-ins, so they get a quieter label style instead. */
.spotlight-side-label {
font-family: var(--font-head);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.02em;
font-size: 1.05rem;
line-height: 1.3;
color: var(--color-accent-bright);
margin: 0 0 0.85rem;
}
.spotlight-areas + .spotlight-side-label { margin-top: 2rem; }
/* Testimonials: the section's own intro line, under the h2. */
.testi-intro { text-align: center; max-width: 62ch; margin: 0 auto 2rem; color: var(--color-text-muted); }
/* FAQ: the section's own intro line, under the h2 inside the panel. */
.faq-panel > p { margin: 0 0 1.75rem; }
/* steps: the mini-cta here carries a full sentence with inline links rather
than the palette's two-line shout, so it reads as body copy. */
.mini-cta p {
font-family: var(--font-body);
font-weight: 400;
text-transform: none;
font-size: 1.05rem;
color: rgba(255,255,255,0.88);
margin: 0 0 1rem;
}
/* Spotlight: the "Areas We Serve" lead-in sits in the areas column, so its
subhead needs the column's top margin reset. */
.spotlight-areas + .spotlight-side-label,
.spotlight > .container > div > p + .spotlight-side-label { margin-top: 1.75rem; }
.spotlight .subhead:first-child { margin-top: 0; }
/* Footer wordmark sub-line: the skin ships it at wordmark size, which suits a
tagline ("Kitchen & Bath") but not a locality line. */
.footer-wordmark span {
display: block;
font-size: 0.95rem;
letter-spacing: 0.12em;
color: var(--on-dark-body, rgba(255,255,255,0.7));
margin-top: 0.35rem;
}
/* svc-cell-2 image-left / content-right layout — the palette hangs this grid
off .svc-cell-link (a wrapping ), which these cards deliberately do not
have: a home-only launch has no service pages to link to. Put the grid on
the cell itself instead. Same fix as sioux-falls-hardwood-flooring. */
@media (min-width: 720px) {
.services .svc-cell-2 { display: grid; grid-template-columns: minmax(0, 42%) 1fr; align-items: center; gap: 1.75rem; }
}
/* ============================================================
steps--brand — the process band on the brand green (#2E7A55)
instead of the near-black --color-charcoal.
.section-dark's ink is tuned for a near-black surface, so every
token that assumed it has to be re-picked here: the accent green
(#63B98C) drops to 2.2:1 on this band, and the two accent FILLS
(--color-accent #2F7A55) are the band colour itself, so the
step-1 medallion and the Call Now button would both vanish.
============================================================ */
.steps--brand { background: #2E7A55; }
/* body copy: 0.80–0.82 white lands at ~4.1:1 here. Full white = 5.21:1. */
.steps--brand p,
.steps--brand .process-intro,
.steps--brand .process-step p { color: #fff; }
/* step numerals stay tonally distinct from the white h3s. 2rem/700 is large
text, so this pale mint's 4.1:1 clears the 3:1 bar with room to spare. */
.steps--brand .process-step .step-num { color: #CFEBDC; }
/* step-1 medallion: an accent fill on an accent band is invisible. Takes the
same surface as the mini-cta panel the Call Now button sits in — one token
drives both, so they cannot drift apart. */
.steps--brand .process-step > .process-step-icon {
background: var(--band-panel);
color: #fff;
}
/* the panel's 4% white is lost on green. --band-panel is the band's raised
surface: the mini-cta panel AND the step-1 medallion both read from it.
Tinted DOWN, not up: 10% white lightened #2E7A55 to rgb(67,135,102), which
put the panel's white body copy at 4.29:1 — under the 4.5:1 AA floor for
normal text. Going darker keeps the panel just as legible against the band
(that was the reason 4% white was abandoned) while taking the text to
6.37:1. Do not swap this back to a white tint without re-checking contrast. */
.steps--brand { --band-panel: rgba(0,0,0,0.12); }
.steps--brand .mini-cta { background: var(--band-panel); }
/* inline tel: / #quote-form links inherit --color-accent-bright (2.2:1) */
.steps--brand a:not(.btn) { color: #fff; text-decoration: underline; }
/* Call Now: the accent fill IS the band. White fill is the strongest CTA
available here, inverting to charcoal on hover for a clear state change. */
.steps--brand .btn-call { background: #fff; color: var(--color-header); }
.steps--brand .btn-call:hover { background: var(--color-charcoal); color: #fff; }
/* Hero intro: tighter leading and less space between the three paragraphs
than the palette default (1.65 / 1.75rem), which left the stack airy at
this length. */
.hero-intro { line-height: 1.5; margin: 0 0 0.7rem; }
.hero-intro:last-of-type { margin-bottom: 1.6rem; }
/* Hero split: give the intro copy more room and pull the estimate card in.
Scoped to >=1100px on purpose — the card's inner width has a hard floor of
300px (the Turnstile iframe is fixed at that), and below ~1100 the palette's
1.05/0.95 split is already close to it. */
@media (min-width: 1100px) { .hero-grid { grid-template-columns: 1.25fr 0.8fr; } }
/* Hero headline: less air between the h1 and the intro copy than the
palette's clamp(1.5rem, 3vw, 2.25rem). */
.hero-headline { margin-bottom: clamp(1.1rem, 2.2vw, 1.75rem); }
/* Quote-form title: it inherits body leading, which is far too loose for a
2rem uppercase display line that wraps to two lines in the narrowed card. */
.estimate-title { line-height: 1.1; }
/* ============================================================
Brand logos — the supplied artwork is white-on-dark, so the
palette's white .brand plate is gone and both logos sit
directly on the header / footer surface.
============================================================ */
.brand {
background: none;
padding: 0;
box-shadow: none;
}
.brand-logo {
display: block;
width: auto;
height: clamp(38px, 4.4vw, 54px);
}
@media (max-width: 600px) { .brand-logo { height: 36px; } }
.footer-wordmark { display: inline-block; line-height: 0; }
.footer-logo {
display: block;
width: clamp(180px, 22vw, 240px);
height: auto;
}
/* ============================================================
services--brand — the services band on the brand green
(#2E7A55), matching the process band.
The band's colour lives in THREE layers: the section, the
.svc-row background that shows through the 2px gaps as
dividers, and the .svc-cell fill. All three move, and every
ink that assumed --color-charcoal gets re-picked.
============================================================ */
.services--brand,
.services--brand .svc-cell { background: #2E7A55; }
/* dividers: --color-accent-bright is 2.2:1 on this band and all but
disappears. White at 45% keeps the grid structure legible. */
.services--brand .svc-row { background: rgba(255,255,255,0.7); }
.services--brand .svc-row + .svc-row { border-top-color: rgba(255,255,255,0.7); }
/* section label was the accent green (2.2:1) and is small caps — needs full white */
.services--brand .services-head .section-label { color: #fff; }
.services--brand .services-head p { color: #fff; }
/* card copy: 0.78 white lands at 3.87:1 here */
.services--brand .svc-text { color: rgba(255,255,255,0.92); }
/* hover tint was the accent green; the titles are large text, so the pale
mint clears the 3:1 bar while staying distinct from the resting white */
.services--brand .svc-cell:hover .svc-title { color: #CFEBDC; }
/* the closing Call Now fill IS the band colour — invert it, as on the steps band */
.services--brand .btn-call { background: #fff; color: var(--color-header); }
.services--brand .btn-call:hover { background: var(--color-charcoal); color: #fff; }
/* 3-across cards: the palette centres the whole cell. Ragged-centre body copy
is hard to read at this length, so only the title keeps the centring. */
.services--brand .svc-cell-3 .svc-text { text-align: left; }
/* Bare URLs printed in body copy. Without this they are unbreakable tokens and
push their container wide on narrow viewports. */
.inline-url { overflow-wrap: anywhere; }
/* Hero closes on the same 2px accent rule the footer opens with, so the page is
bracketed top and bottom by the same line. */
.hero { border-bottom: 2px solid var(--color-accent-bright); }