/* Genz-Ryan Design System — shared tokens & components
Extracted from genzryan.com (live theme tokens, real photography, branded illustration system), 2026-05-11.
Stack: WordPress · custom theme `wp-content/themes/genzryan-theme/` · Bootstrap 5 scaffolding · "Uniform" proprietary type family.
Brand: Genz-Ryan — 75-year Twin Cities multi-trade family business (HVAC + plumbing + electrical).
Same-day service · Family Owned & Operated Since 1950 · "I love these guys!" customer-quote-as-graphic.
Audience: single-track B2C residential (Twin Cities metro homeowners).
Voice: "Family Owned & Operated Since 1950" · "Same Day Service & Installation Guaranteed" ·
"We've got your back when the unexpected happens" · "I love those guys!" ·
"From one Minnesota family to another".
Signature visual moves: tri-color CTA system (red urgent / blue primary / gold signature),
"I Love These Guys" SVG script as hero overlay graphic, Twin Cities
map illustration with crew + van overlay, co-equal 4-trade service grid,
Manrope ExtraBold 800 single-family discipline (substituting proprietary Uniform). */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');
:root {
/* ----------------------------------------------------------------
COLOR — extracted verbatim from `wp-content/themes/genzryan-theme/inc/css/main.min.css`.
The brand is a disciplined tri-color: red `#c92a39` + blue `#196cb6` + gold `#fad604`,
with deep blue `#005289` as the body-header weight and warm-dark gray `#434343` as body.
The signature combination:
- Red #c92a39 → URGENT CTA (emergency, book now)
- Blue #196cb6 → PRIMARY headings, secondary CTA
- Gold #fad604 → SIGNATURE accent ("I Love These Guys" + sparkle CTAs)
- Deep Blue #005289 → body-header weight + dark panels
- Ink Gray #434343 → body text (NOT pure black — softer Midwestern feel)
We add derived darker/lighter variants for hover states; the core five are immutable.
---------------------------------------------------------------- */
/* PRIMARY RED — the urgent CTA */
--brand-red: #c92a39; /* live theme red — primary CTA, emergency, book now */
--brand-red-deep: #b00c1c; /* live deep red — hover */
--brand-red-soft: #e04553; /* derived lighten — focus glow */
--brand-red-pale: #fce5e7; /* derived pale — surface tint */
/* PRIMARY BLUE — body-header weight */
--brand-blue: #196cb6; /* live theme blue — headings, secondary CTA */
--brand-blue-deep: #005289; /* live deep blue — body header, footer */
--brand-blue-soft: #1690d0; /* live light blue — link hover */
--brand-blue-pale: #d2f0ff; /* live pale blue — surface tint */
--brand-teal: #6095b8; /* live muted teal — secondary accent */
/* SIGNATURE GOLD — accent + "I Love These Guys" graphic */
--gold: #fad604; /* live gold — "I Love These Guys" + arrow accent */
--gold-deep: #c8a803; /* derived darken — hover, text on light */
--gold-soft: #fee685; /* derived lighten — surface glow */
--gold-pale: #fff7cf; /* derived pale — large background washes */
/* INK */
--ink: #434343; /* live body text */
--ink-deep: #212529; /* BS gray-900 — emphasis */
--ink-pure: #000000;
--ink-soft: #545454; /* live mid */
--ink-mid: #969696; /* live muted */
--ink-quiet: #adb5bd;
/* BACKGROUNDS */
--bg: #ffffff;
--bg-pure: #ffffff;
--bg-soft: #f4f4f4; /* live surface gray */
--bg-warm: #fff7cf; /* derived gold-pale — value-prop bands */
--bg-cool: #d2f0ff; /* live pale blue — blue-led panels */
--bg-dark: #005289; /* deep blue ground for inverted sections */
--bg-deepest: #212529; /* near-black ground for footer */
--surface-gray: #ebebeb; /* live border-y */
/* BORDER + RULE */
--border: #e8e8eb; /* live light border */
--border-mid: #969696;
--border-soft: #f0f0f2;
--rule: #212529;
/* CANONICAL GRADIENTS */
--grad-patriot: linear-gradient(135deg, #c92a39 0%, #196cb6 100%); /* red → blue */
--grad-warm-hero: linear-gradient(135deg, #fad604 0%, #c92a39 100%); /* gold → red — heritage feel */
--grad-cool-blue: linear-gradient(135deg, #005289 0%, #196cb6 50%, #1690d0 100%);
--grad-hero-scrim: linear-gradient(180deg, rgba(0,82,137,0) 35%, rgba(0,82,137,0.55) 75%, rgba(33,37,41,0.85) 100%);
--grad-warm-fade: linear-gradient(180deg, #ffffff 0%, #fff7cf 100%);
--grad-cool-fade: linear-gradient(180deg, #ffffff 0%, #d2f0ff 100%);
/* TYPE — Manrope substituting proprietary "Uniform" (Process Type Foundry).
Live theme weights: 300/400/500/600/700/800. All headings weight 800.
Single-family discipline preserved (no serif accent). */
--font-display: 'Manrope', 'Uniform', system-ui, -apple-system, sans-serif;
--font-body: 'Manrope', 'Uniform', system-ui, -apple-system, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
/* Live type scale (from main.min.css), promoted to fluid clamp */
--text-display: clamp(2.5rem, 4vw + 1rem, 4.5rem); /* H1 — 64px desktop, 44px mobile */
--text-h1: clamp(2.25rem, 3vw + 1rem, 4rem);
--text-h2: clamp(1.875rem, 1.6vw + 1rem, 3.25rem); /* 52px desktop, 36px mobile */
--text-h3: clamp(1.5rem, 1vw + 1rem, 2.25rem);
--text-h4: clamp(1.25rem, 0.6vw + 1rem, 1.625rem);
--text-h5: 1.25rem;
--text-h6: 1.125rem;
--text-body-lg: 1.125rem; /* 18px lede */
--text-body: 1rem;
--text-meta: 0.875rem;
--text-eyebrow: 0.75rem;
/* RADIUS — Bootstrap 5 defaults + our pill */
--radius-xs: 4px;
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 20px;
--radius-pill: 999px;
--radius-circle: 50%;
/* SHADOWS */
--shadow-card: 0 1px 2px rgba(33,37,41,0.06), 0 4px 12px rgba(33,37,41,0.05);
--shadow-card-hover: 0 18px 36px -16px rgba(33,37,41,0.18), 0 4px 12px rgba(33,37,41,0.06);
--shadow-cta-red: 0 8px 20px rgba(201,42,57,0.30);
--shadow-cta-blue: 0 8px 20px rgba(25,108,182,0.30);
--shadow-cta-gold: 0 8px 20px rgba(250,214,4,0.40);
--shadow-sticky: 0 1px 0 rgba(33,37,41,0.06), 0 4px 16px rgba(33,37,41,0.05);
--shadow-hero: 0 30px 60px -20px rgba(0,82,137,0.35);
/* MOTION */
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--t-fast: 150ms;
--t-base: 280ms;
--t-slow: 480ms;
/* SPACING */
--space-2xs: 0.25rem;
--space-xs: 0.5rem;
--space-sm: 0.75rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2rem;
--space-2xl: 3rem;
--space-3xl: 4rem;
--space-4xl: 6rem;
--space-5xl: 8rem;
}
/* =============================================================== RESET =============================================================== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
background: var(--bg);
color: var(--ink);
font-family: var(--font-body);
font-size: var(--text-body);
font-weight: 400;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--brand-blue); outline-offset: 3px; border-radius: 4px; }
/* =============================================================== TYPOGRAPHY =============================================================== */
.display, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: var(--font-display);
color: var(--ink-deep);
margin: 0;
line-height: 1.1;
letter-spacing: -0.015em;
}
.display { font-size: var(--text-display); font-weight: 800; line-height: 1.02; letter-spacing: -0.025em; }
.h1 { font-size: var(--text-h1); font-weight: 800; letter-spacing: -0.02em; }
.h2 { font-size: var(--text-h2); font-weight: 800; line-height: 1.1; }
.h3 { font-size: var(--text-h3); font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; }
.h4 { font-size: var(--text-h4); font-weight: 800; line-height: 1.2; }
.h5 { font-size: var(--text-h5); font-weight: 700; line-height: 1.25; }
.h6 { font-size: var(--text-h6); font-weight: 700; line-height: 1.3; }
.accent-red { color: var(--brand-red); }
.accent-blue { color: var(--brand-blue); }
.accent-blue-deep { color: var(--brand-blue-deep); }
.accent-gold { color: var(--gold-deep); }
/* Body presets */
.lede { font-family: var(--font-body); font-size: var(--text-body-lg); font-weight: 400; line-height: 1.6; color: var(--ink); max-width: 60ch; margin: 0; }
.lede-lg { font-size: 1.375rem; font-weight: 500; line-height: 1.5; color: var(--ink-deep); max-width: 56ch; }
.body-copy { font-size: var(--text-body-lg); font-weight: 400; color: var(--ink); }
.body-copy-2 { font-size: var(--text-body); font-weight: 400; color: var(--ink); }
.meta { font-size: var(--text-meta); color: var(--ink-mid); }
.muted { color: var(--ink-mid); }
.maxw-prose { max-width: 60ch; margin-inline: auto; }
.text-center { text-align: center; }
.eyebrow {
font-family: var(--font-body);
font-size: var(--text-eyebrow);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--brand-red);
margin: 0;
display: inline-flex;
align-items: center;
gap: 10px;
}
.eyebrow.blue { color: var(--brand-blue); }
.eyebrow.gold { color: var(--gold-deep); }
.eyebrow.muted { color: var(--ink-mid); }
.eyebrow.with-bar::before {
content: '';
display: inline-block;
width: 32px;
height: 2px;
background: currentColor;
}
.color-red { color: var(--brand-red); }
.color-blue { color: var(--brand-blue); }
.color-blue-deep { color: var(--brand-blue-deep); }
.color-gold { color: var(--gold-deep); }
.color-ink { color: var(--ink); }
/* Wordmark — GENZ-RYAN locked in tight tracking */
.wordmark { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.005em; }
.wordmark .genz { color: var(--brand-red); }
.wordmark .ryan { color: var(--ink-deep); }
.wordmark.on-dark .ryan { color: #ffffff; }
/* =============================================================== FIELD STRIPE (signature horizontal rule) =============================================================== */
.field-stripe {
display: block;
height: 4px;
width: 60px;
background: var(--brand-red);
border-radius: 2px;
margin-bottom: 1.25rem;
}
.field-stripe.lg { height: 6px; width: 96px; }
.field-stripe.blue { background: var(--brand-blue); }
.field-stripe.gold { background: var(--gold); }
.field-stripe.grad { background: var(--grad-patriot); }
.field-stripe.center { margin-inline: auto; }
.field-stripe.full { width: 100%; height: 4px; border-radius: 0; }
.gloss-rule { height: 1px; background: var(--border); border: 0; margin: 0; }
.hr { border: 0; height: 1px; background: var(--border); margin: 0; }
.hr-thick { border: 0; height: 2px; background: var(--ink-deep); margin: 0; }
.hr-red { border: 0; height: 4px; background: var(--brand-red); border-radius: 2px; margin: 0; }
.hr-blue { border: 0; height: 4px; background: var(--brand-blue); border-radius: 2px; margin: 0; }
.hr-gold { border: 0; height: 4px; background: var(--gold); border-radius: 2px; margin: 0; }
/* =============================================================== LAYOUT =============================================================== */
.container {
max-width: 1280px;
margin-inline: auto;
padding-inline: clamp(1rem, 4vw, 3rem);
}
.container.narrow { max-width: 960px; }
.container.wide { max-width: 1440px; }
.section { padding-block: clamp(3rem, 6vw, 6rem); }
.section.tight { padding-block: clamp(2rem, 4vw, 4rem); }
.section.bg-soft { background: var(--bg-soft); }
.section.bg-warm { background: var(--bg-warm); }
.section.bg-cool { background: var(--bg-cool); }
.section.bg-dark { background: var(--bg-dark); color: #ffffff; }
.section.bg-dark .display, .section.bg-dark .h1, .section.bg-dark .h2, .section.bg-dark .h3, .section.bg-dark .h4 { color: #ffffff; }
.section.bg-dark .lede, .section.bg-dark .body-copy { color: rgba(255,255,255,0.85); }
.section.bg-dark .eyebrow { color: var(--gold); }
.section.bg-deepest { background: var(--bg-deepest); color: #ffffff; }
.section.bg-deepest .display, .section.bg-deepest .h1, .section.bg-deepest .h2, .section.bg-deepest .h3 { color: #ffffff; }
.section.bg-deepest .lede { color: rgba(255,255,255,0.82); }
.section.bg-deepest .eyebrow { color: var(--gold); }
.section-head { margin-bottom: clamp(2rem, 4vw, 3rem); max-width: 64ch; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head .field-stripe.center { margin-bottom: 1.25rem; }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }
.gap-12 { gap: 12px; }
.gap-24 { gap: 24px; }
.grid { display: grid; gap: var(--space-lg); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 980px) {
.grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
.grid-5 { grid-template-columns: repeat(3, 1fr); }
.grid-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
.grid-5, .grid-6 { grid-template-columns: repeat(2, 1fr); }
}
.row-2col { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.row-2col.reverse { grid-template-columns: 1fr 1.1fr; }
@media (max-width: 880px) { .row-2col, .row-2col.reverse { grid-template-columns: 1fr; } }
.mt-md { margin-top: var(--space-md); } .mt-lg { margin-top: var(--space-lg); } .mt-xl { margin-top: var(--space-xl); }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } .mt-48 { margin-top: 48px; }
.mb-md { margin-bottom: var(--space-md); } .mb-lg { margin-bottom: var(--space-lg); }
.spacer { height: var(--space-2xl); } .spacer-lg { height: var(--space-4xl); }
/* =============================================================== BUTTONS — tri-color CTA system =============================================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 26px;
font-family: var(--font-body);
font-weight: 700;
font-size: 0.95rem;
letter-spacing: 0.005em;
border-radius: var(--radius-pill);
border: 2px solid transparent;
cursor: pointer;
text-decoration: none;
transition: all var(--t-base) var(--ease);
white-space: nowrap;
}
.btn-sm { padding: 10px 18px; font-size: 0.82rem; }
.btn-lg { padding: 16px 32px; font-size: 1rem; }
/* RED — urgent (emergency, book now) */
.btn-red {
background: var(--brand-red);
border-color: var(--brand-red);
color: #ffffff;
}
.btn-red:hover {
background: var(--brand-red-deep);
border-color: var(--brand-red-deep);
transform: translateY(-1px);
box-shadow: var(--shadow-cta-red);
}
/* BLUE — primary CTAs (estimate, learn more) */
.btn-blue {
background: var(--brand-blue);
border-color: var(--brand-blue);
color: #ffffff;
}
.btn-blue:hover {
background: var(--brand-blue-deep);
border-color: var(--brand-blue-deep);
transform: translateY(-1px);
box-shadow: var(--shadow-cta-blue);
}
/* GOLD — signature accent (HomePulse membership, "I Love These Guys" CTAs) */
.btn-gold {
background: var(--gold);
border-color: var(--gold);
color: var(--ink-deep);
}
.btn-gold:hover {
background: var(--gold-deep);
border-color: var(--gold-deep);
transform: translateY(-1px);
box-shadow: var(--shadow-cta-gold);
}
/* Ghost — outlined-blue */
.btn-ghost {
background: transparent;
color: var(--brand-blue);
border-color: var(--brand-blue);
}
.btn-ghost:hover {
background: var(--brand-blue);
color: #ffffff;
}
/* Dark / outline-light / text */
.btn-dark { background: var(--ink-deep); border-color: var(--ink-deep); color: #ffffff; }
.btn-dark:hover { background: var(--ink-pure); border-color: var(--ink-pure); }
.btn-outline-light { background: transparent; color: #ffffff; border-color: rgba(255,255,255,0.55); }
.btn-outline-light:hover { background: var(--gold); color: var(--ink-deep); border-color: var(--gold); }
.btn-text {
background: transparent; border: 0; padding: 6px 0; color: var(--brand-blue);
border-bottom: 2px solid transparent;
border-radius: 0; letter-spacing: 0.005em; font-weight: 700; font-size: 0.95rem;
}
.btn-text:hover { border-bottom-color: var(--brand-blue); }
.btn .arrow {
display: inline-block;
width: 16px;
height: 16px;
background: currentColor;
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
transition: transform var(--t-base) var(--ease);
}
.btn:hover .arrow { transform: translateX(4px); }
/* =============================================================== CARDS =============================================================== */
.card {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: clamp(1.25rem, 2vw, 1.75rem);
transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.card:hover { border-color: var(--brand-blue); transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
/* Service tile — the co-equal 4-trade signature pattern (heating/cooling/plumbing/electrical) */
.service-card {
background: #ffffff;
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 32px 24px 28px;
text-align: center;
display: flex;
flex-direction: column;
gap: 16px;
text-decoration: none;
color: inherit;
transition: all var(--t-base) var(--ease);
position: relative;
overflow: hidden;
/* default service color = blue; can be overridden by [data-svc] */
--service-color: var(--brand-blue);
}
.service-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: var(--service-color);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--t-base) var(--ease);
}
.service-card:hover {
transform: translateY(-6px);
border-color: var(--service-color);
box-shadow: 0 24px 48px -20px rgba(33,37,41,0.18);
}
.service-card:hover::before { transform: scaleX(1); }
.service-card .icon { height: 100px; display: flex; align-items: center; justify-content: center; margin: 8px 0 0; }
.service-card .icon img { height: 88px; width: auto; object-fit: contain; }
.service-card h3 { font-size: 1.375rem; margin: 0; color: var(--ink-deep); }
.service-card .desc { font-size: 14px; color: var(--ink-soft); flex: 1; margin: 0; }
.service-card .link { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--service-color); display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: 4px; }
.service-card .link::after { content: "→"; transition: transform var(--t-base) var(--ease); }
.service-card:hover .link::after { transform: translateX(4px); }
.service-card[data-svc="heating"] { --service-color: var(--brand-red); }
.service-card[data-svc="cooling"] { --service-color: var(--brand-blue); }
.service-card[data-svc="plumbing"] { --service-color: var(--brand-blue-deep); }
.service-card[data-svc="electrical"] { --service-color: var(--gold-deep); }
/* Promise tile — value props with gold accent */
.value-tile {
background: #ffffff;
border: 1px solid var(--border);
border-top: 4px solid var(--gold);
border-radius: var(--radius-md);
padding: 1.75rem 1.5rem 1.5rem;
display: flex;
flex-direction: column;
gap: 12px;
}
.value-tile.red { border-top-color: var(--brand-red); }
.value-tile.blue { border-top-color: var(--brand-blue); }
.value-tile .icon { width: 44px; height: 44px; color: var(--brand-blue); margin-bottom: 4px; }
.value-tile h3 { font-family: var(--font-display); font-size: 1.125rem; font-weight: 800; color: var(--ink-deep); margin: 0; }
.value-tile p { color: var(--ink); font-size: 0.95rem; line-height: 1.55; margin: 0; }
/* Generic tile, bio-card, case-card */
.tile { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1.5rem; }
.bio-card { background: #ffffff; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1.5rem; text-align: left; }
.bio-card .avatar { width: 72px; height: 72px; border-radius: 50%; background: var(--bg-warm); margin-bottom: 1rem; display: inline-flex; align-items: center; justify-content: center; color: var(--brand-red); font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; }
.bio-card .name { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: var(--ink-deep); margin: 0; }
.bio-card .role { font-size: 0.85rem; color: var(--ink-mid); margin: 4px 0 12px; }
.case-card { background: #ffffff; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); }
.case-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.case-card .photo { aspect-ratio: 4/3; overflow: hidden; background: var(--surface-gray); }
.case-card .photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out-expo); }
.case-card:hover .photo img { transform: scale(1.04); }
.case-card .body { padding: 1.25rem; }
.case-card .meta-row { display: inline-flex; gap: 8px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-blue); margin-bottom: 8px; }
/* Pricing tier (Tune-Up / Repair / Install + HomePulse) */
.pricing-tier { background: #ffffff; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1.75rem; display: flex; flex-direction: column; gap: 12px; }
.pricing-tier.featured { background: var(--bg-warm); border-color: var(--gold); box-shadow: var(--shadow-card-hover); position: relative; }
.pricing-tier.featured::before {
content: 'MOST BOOKED';
position: absolute;
top: -12px; left: 50%; transform: translateX(-50%);
background: var(--gold); color: var(--ink-deep);
font-size: 0.65rem; font-weight: 800; letter-spacing: 0.16em;
padding: 4px 12px; border-radius: 999px;
}
.pricing-tier .price { font-family: var(--font-display); font-size: 2.5rem; font-weight: 800; color: var(--ink-deep); letter-spacing: -0.02em; }
.pricing-tier .price small { font-size: 0.85rem; font-weight: 500; color: var(--ink-mid); margin-left: 4px; }
/* =============================================================== HEROES =============================================================== */
/* hero-photo — split-screen with photo right + copy left + "I Love These Guys" stamp */
.hero-photo {
position: relative;
background: var(--bg-soft);
padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(4rem, 7vw, 6rem);
overflow: hidden;
}
.hero-photo::before {
content: "";
position: absolute;
top: -50%;
right: -10%;
width: 700px;
height: 700px;
background: radial-gradient(circle, var(--gold-pale) 0%, transparent 60%);
pointer-events: none;
z-index: 0;
}
.hero-photo .container { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.hero-copy .display { margin: 24px 0; }
.hero-copy .lede { margin-bottom: 36px; max-width: 56ch; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 36px; }
.hero-trust { display: flex; align-items: center; gap: 24px; padding-top: 28px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.hero-trust .stars { color: var(--gold); font-size: 18px; letter-spacing: 2px; }
.hero-trust .stars-meta { font-size: 13px; color: var(--ink-soft); font-weight: 500; }
.hero-trust .stars-meta strong { color: var(--ink-deep); font-weight: 800; }
.hero-trust .heritage { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-blue-deep); }
.hero-media {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
aspect-ratio: 4 / 5;
background: var(--bg-deepest);
box-shadow: var(--shadow-hero);
}
.hero-media .hero-photo-img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-media::after { content: ""; position: absolute; inset: 0; background: var(--grad-hero-scrim); pointer-events: none; }
.hero-media .iloveguys-stamp { position: absolute; bottom: 28px; left: 28px; right: 28px; z-index: 2; }
.hero-media .iloveguys-stamp img { width: min(80%, 320px); filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5)); }
.hero-media .stamp-meta { display: block; margin-top: 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); text-shadow: 0 2px 8px rgba(0,0,0,0.5); }
@media (max-width: 980px) {
.hero-grid { grid-template-columns: 1fr; }
.hero-media { aspect-ratio: 1 / 1; max-height: 480px; }
}
/* hero-centered — typography-only, no photo */
.hero-centered {
background: var(--bg-soft);
padding: clamp(4rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5rem);
text-align: center;
position: relative;
overflow: hidden;
}
.hero-centered::before {
content: '';
position: absolute;
inset: -200px;
background: radial-gradient(ellipse at center top, var(--gold-pale) 0%, transparent 60%);
z-index: 0;
pointer-events: none;
}
.hero-centered .container { position: relative; z-index: 1; }
.hero-centered .display { max-width: 18ch; margin: 18px auto; }
.hero-centered .lede { margin-inline: auto; max-width: 56ch; }
.hero-centered .hero-actions { justify-content: center; }
/* page-hero — dark-blue inverted hero for landing pages */
.page-hero {
background: var(--grad-cool-blue);
color: #ffffff;
padding: clamp(4rem, 7vw, 6rem) 0 clamp(3rem, 5vw, 4rem);
position: relative;
overflow: hidden;
}
.page-hero::before {
content: '';
position: absolute;
top: -150px; right: -150px;
width: 500px; height: 500px;
border-radius: 50%;
background: var(--grad-warm-hero);
opacity: 0.18;
filter: blur(48px);
pointer-events: none;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero .display, .page-hero .h1 { color: #ffffff; }
.page-hero .lede { color: rgba(255,255,255,0.88); }
.page-hero .eyebrow { color: var(--gold); }
.page-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--grad-patriot); }
/* =============================================================== ANNOUNCEMENT BAR + NAV =============================================================== */
.announcement-bar {
background: var(--bg-deepest);
color: #ffffff;
padding: 10px 0;
font-size: 0.85rem;
text-align: center;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.announcement-bar strong { color: var(--gold); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; margin-right: 8px; }
.announcement-bar a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; margin-left: 8px; font-weight: 700; }
.nav {
position: sticky;
top: 0;
z-index: 30;
background: rgba(255, 255, 255, 0.97);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border);
box-shadow: var(--shadow-sticky);
}
.nav .container { display: flex; align-items: center; justify-content: space-between; padding-block: 0.85rem; gap: 1.5rem; }
.nav .brand-mark { display: inline-flex; align-items: center; }
.nav .brand-mark img { height: 44px; width: auto; }
.nav .links { display: flex; align-items: center; gap: clamp(0.85rem, 1.5vw, 1.75rem); flex-wrap: wrap; }
.nav .links a { font-size: 0.95rem; font-weight: 600; color: var(--ink-deep); transition: color var(--t-fast) var(--ease); padding: 8px 0; }
.nav .links a:hover { color: var(--brand-blue); }
.nav .actions { display: flex; gap: 12px; align-items: center; }
.nav .phone { font-size: 1.05rem; font-weight: 800; color: var(--brand-red); letter-spacing: -0.005em; }
.nav .phone:hover { color: var(--brand-red-deep); }
/* =============================================================== CHIPS / BADGES =============================================================== */
.chip {
display: inline-flex; align-items: center; gap: 6px;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--ink-deep);
background: var(--bg-warm);
border: 1px solid var(--border);
border-radius: 999px;
padding: 6px 14px;
}
.chip.red { background: var(--brand-red-pale); border-color: var(--brand-red); color: var(--brand-red-deep); }
.chip.blue { background: var(--brand-blue-pale); border-color: var(--brand-blue); color: var(--brand-blue-deep); }
.chip.gold { background: var(--gold-pale); border-color: var(--gold-deep); color: var(--ink-deep); }
.chip.dark { background: var(--ink-deep); color: var(--gold); border-color: transparent; }
.chip.outline { background: transparent; border-color: var(--border-mid); color: var(--ink); font-weight: 600; }
.creds-strip {
display: flex; flex-wrap: wrap; gap: 16px;
padding: 1.25rem 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
align-items: center;
justify-content: center;
}
/* =============================================================== STATS / NUMBERS =============================================================== */
.stat { display: flex; flex-direction: column; gap: 4px; padding-top: 16px; border-top: 2px solid var(--ink-deep); }
.stat .num {
font-family: var(--font-display);
font-size: clamp(2.5rem, 4vw, 3.5rem);
font-weight: 800;
letter-spacing: -0.025em;
color: var(--ink-deep);
line-height: 1;
}
.stat[data-tint="red"] .num { color: var(--brand-red); }
.stat[data-tint="blue"] .num { color: var(--brand-blue); }
.stat[data-tint="blue-deep"] .num { color: var(--brand-blue-deep); }
.stat[data-tint="gold"] .num { color: var(--gold-deep); }
.stat[data-tint="grad"] .num { background: var(--grad-patriot); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat .lbl { font-size: 0.85rem; color: var(--ink-soft); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
/* =============================================================== TESTIMONIAL / PULLQUOTE =============================================================== */
.testimonial {
background: #ffffff;
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 1.75rem;
display: flex;
flex-direction: column;
gap: 1rem;
position: relative;
}
.testimonial.gold-rule { border-left: 4px solid var(--gold); }
.testimonial.red-rule { border-left: 4px solid var(--brand-red); }
.testimonial.blue-rule { border-left: 4px solid var(--brand-blue); }
.testimonial .stars { color: var(--gold); font-size: 14px; letter-spacing: 2px; }
.testimonial .quote { font-family: var(--font-display); font-size: 1.05rem; font-weight: 500; line-height: 1.5; color: var(--ink-deep); margin: 0; }
.testimonial .author { display: flex; align-items: center; gap: 12px; }
.testimonial .author .avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--bg-warm); display: inline-flex; align-items: center; justify-content: center; color: var(--brand-red); font-weight: 800; }
.testimonial .author .name { font-weight: 800; font-size: 0.9rem; color: var(--ink-deep); }
.testimonial .author .role { font-size: 0.8rem; color: var(--ink-mid); }
.pullquote {
font-family: var(--font-display);
font-size: clamp(1.5rem, 2.5vw + 0.75rem, 2.5rem);
font-weight: 800;
line-height: 1.2;
color: var(--ink-deep);
letter-spacing: -0.015em;
border-left: 6px solid var(--brand-red);
padding-left: 1.75rem;
max-width: 26ch;
}
/* =============================================================== I LOVE THESE GUYS SIGNATURE BLOCK =============================================================== */
.iloveguys-block {
background: linear-gradient(135deg, var(--ink-deep) 0%, var(--brand-blue-deep) 100%);
color: #ffffff;
border-radius: var(--radius-lg);
padding: clamp(2rem, 4vw, 3rem);
text-align: center;
position: relative;
overflow: hidden;
}
.iloveguys-block::before {
content: '';
position: absolute;
inset: -50%;
background: radial-gradient(circle, rgba(250,214,4,0.18) 0%, transparent 50%);
pointer-events: none;
}
.iloveguys-block .graphic { max-width: 360px; margin: 0 auto 16px; position: relative; }
.iloveguys-block .graphic img { width: 100%; height: auto; }
.iloveguys-block .attribution { font-size: 0.85rem; color: rgba(255,255,255,0.78); letter-spacing: 0.04em; }
.iloveguys-block .meta-row { display: flex; gap: 16px; align-items: center; justify-content: center; margin-top: 20px; flex-wrap: wrap; }
/* =============================================================== TWIN CITIES MAP BLOCK =============================================================== */
.heritage-map {
position: relative;
aspect-ratio: 5 / 4;
background: linear-gradient(135deg, var(--brand-blue-deep) 0%, var(--brand-blue) 100%);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-hero);
}
.heritage-map .map-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0.92; mix-blend-mode: lighten; }
.heritage-map .crew { position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 65%; object-fit: contain; object-position: bottom center; z-index: 2; }
.heritage-map .van { position: absolute; top: 22%; right: 8%; width: 130px; z-index: 3; filter: drop-shadow(0 8px 16px rgba(0,0,0,0.3)); animation: van-drift 6s ease-in-out infinite alternate; }
.heritage-map .badge { position: absolute; top: 24px; left: 24px; background: rgba(255,255,255,0.95); border-radius: var(--radius-pill); padding: 10px 18px; font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-red); z-index: 4; display: inline-flex; align-items: center; gap: 8px; }
.heritage-map .badge::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-red); animation: pulse 2s ease-in-out infinite; }
@keyframes van-drift { to { transform: translateX(-30px) translateY(5px); } }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: 0.5; } }
@media (prefers-reduced-motion: reduce) {
.heritage-map .van { animation: none; }
.heritage-map .badge::before { animation: none; }
}
/* =============================================================== 5-STEP PROCESS =============================================================== */
.process-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.process-steps .step { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; position: relative; padding: 0 8px; }
.process-steps .step::after {
content: '';
position: absolute;
top: 30px;
right: -50%;
width: 100%;
height: 2px;
background: var(--border);
z-index: 0;
}
.process-steps .step:last-child::after { display: none; }
.process-steps .step .icon-wrap { width: 64px; height: 64px; border-radius: 50%; background: #ffffff; border: 2px solid var(--brand-blue); display: inline-flex; align-items: center; justify-content: center; position: relative; z-index: 1; padding: 8px; }
.process-steps .step .icon-wrap img { width: 100%; height: 100%; object-fit: contain; }
.process-steps .step .num-chip { font-family: var(--font-display); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-red); }
.process-steps .step h4 { font-family: var(--font-display); font-size: 0.95rem; font-weight: 800; color: var(--ink-deep); margin: 0; line-height: 1.2; }
.process-steps .step p { color: var(--ink); font-size: 0.85rem; line-height: 1.5; margin: 0; }
@media (max-width: 980px) {
.process-steps { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1rem; }
.process-steps .step::after { display: none; }
}
@media (max-width: 540px) {
.process-steps { grid-template-columns: 1fr; }
}
/* =============================================================== EXPERTISE MATRIX / SERVICE CHECKLIST / FAQ =============================================================== */
.expertise-matrix { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border); }
.expertise-matrix .cell { background: var(--bg); padding: 1.5rem; display: flex; flex-direction: column; gap: 8px; transition: background var(--t-base) var(--ease); }
.expertise-matrix .cell:hover { background: var(--bg-warm); }
.expertise-matrix .cell .label { font-family: var(--font-display); font-weight: 800; font-size: 0.95rem; color: var(--ink-deep); }
.expertise-matrix .cell .meta { font-size: 0.85rem; color: var(--ink); }
@media (max-width: 880px) { .expertise-matrix { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .expertise-matrix { grid-template-columns: 1fr; } }
.faq { display: grid; gap: 0; border-top: 1px solid var(--border); }
.faq .item { padding: 1.5rem 0; border-bottom: 1px solid var(--border); }
.faq .item h3 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 800; color: var(--ink-deep); margin: 0 0 8px; }
.faq .item p { margin: 0; color: var(--ink); }
.service-checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.service-checklist li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; font-size: 0.95rem; color: var(--ink); }
.service-checklist li::before {
content: '';
width: 20px; height: 20px;
margin-top: 2px;
background: var(--brand-blue);
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
border-radius: 2px;
}
/* =============================================================== HERITAGE / FAMILY ANCHOR =============================================================== */
.heritage-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 640px) { .heritage-stats { grid-template-columns: 1fr; } }
.family-card { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; padding: 20px; background: #ffffff; border: 1px solid var(--border); border-left: 4px solid var(--gold); border-radius: var(--radius-md); }
.family-card img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 3px solid var(--bg-warm); }
.family-card .quote { font-size: 15px; font-style: italic; color: var(--ink-deep); line-height: 1.5; margin: 0 0 6px; }
.family-card .attr { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; color: var(--brand-blue-deep); text-transform: uppercase; }
/* =============================================================== CTA BAND =============================================================== */
.cta-band {
background: var(--bg-deepest);
color: #ffffff;
padding: clamp(3rem, 5vw, 5rem) 0;
position: relative;
overflow: hidden;
isolation: isolate;
}
.cta-band::before {
content: '';
position: absolute;
top: -200px; right: -200px;
width: 500px; height: 500px;
border-radius: 50%;
background: var(--grad-warm-hero);
opacity: 0.20;
filter: blur(48px);
z-index: -1;
}
.cta-band::after {
content: '';
position: absolute; left: 0; right: 0; bottom: 0;
height: 4px;
background: var(--grad-patriot);
}
.cta-band .container { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.cta-band .display, .cta-band .h2 { color: #ffffff; max-width: 20ch; }
.cta-band .lede { color: rgba(255,255,255,0.85); }
/* =============================================================== COUPON STRIP =============================================================== */
.coupon-strip {
background: linear-gradient(135deg, var(--brand-red) 0%, var(--brand-red-deep) 100%);
color: #ffffff;
border-radius: var(--radius-md);
padding: 1.5rem 2rem;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 1.5rem;
align-items: center;
}
.coupon-strip .ticket { width: 56px; height: 56px; flex-shrink: 0; }
.coupon-strip .ticket img { width: 100%; height: 100%; object-fit: contain; filter: brightness(0) invert(1); }
.coupon-strip .copy h3 { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; margin: 0 0 4px; color: #ffffff; }
.coupon-strip .copy p { font-size: 0.9rem; margin: 0; color: rgba(255,255,255,0.88); }
@media (max-width: 640px) { .coupon-strip { grid-template-columns: 1fr; text-align: center; justify-items: center; } }
/* =============================================================== FOOTER =============================================================== */
.footer {
background: var(--bg-deepest);
color: rgba(255,255,255,0.78);
padding: clamp(3rem, 5vw, 4rem) 0 1.5rem;
position: relative;
border-top: 4px solid var(--gold);
}
.footer .container.cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; }
.footer h4 { font-family: var(--font-display); font-size: 0.95rem; font-weight: 800; color: #ffffff; margin: 0 0 1rem; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.footer ul a { font-size: 0.9rem; color: rgba(255,255,255,0.72); transition: color var(--t-fast) var(--ease); }
.footer ul a:hover { color: var(--gold); }
.footer .brand-block img { height: 56px; width: auto; margin-bottom: 1rem; filter: brightness(0) invert(1); }
.footer .brand-block p { font-size: 0.9rem; color: rgba(255,255,255,0.65); margin: 0; max-width: 38ch; }
.footer .legal { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: 0.78rem; color: rgba(255,255,255,0.55); }
@media (max-width: 880px) { .footer .container.cols { grid-template-columns: 1fr 1fr; } .footer .brand-block { grid-column: 1 / -1; } }
@media (max-width: 540px) { .footer .container.cols { grid-template-columns: 1fr; } }
/* =============================================================== COVERAGE ZONES / AVAILABILITY =============================================================== */
.coverage-zones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.coverage-zones .zone { background: var(--bg-cool); border: 1px solid var(--brand-blue-pale); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 0.85rem; font-weight: 700; color: var(--brand-blue-deep); text-align: center; }
@media (max-width: 720px) { .coverage-zones { grid-template-columns: repeat(2, 1fr); } }
.availability { display: grid; gap: 6px; font-size: 0.92rem; color: var(--ink); }
.availability .row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); }
.availability .row:last-child { border-bottom: 0; }
.availability .row .day { color: var(--ink-deep); font-weight: 700; }
.availability .row .open { color: var(--brand-blue); font-weight: 800; }
/* =============================================================== BOOKING PATHS =============================================================== */
.booking-paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.booking-paths .path { padding: 1.75rem; background: #ffffff; border: 1px solid var(--border); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: 12px; transition: all var(--t-base) var(--ease); }
.booking-paths .path:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); border-color: var(--brand-blue); }
.booking-paths .path .icon { width: 48px; height: 48px; border-radius: 50%; background: var(--bg-cool); color: var(--brand-blue-deep); display: inline-flex; align-items: center; justify-content: center; }
.booking-paths .path h3 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 800; margin: 0; color: var(--ink-deep); }
.booking-paths .path p { color: var(--ink); font-size: 0.92rem; margin: 0; }
@media (max-width: 880px) { .booking-paths { grid-template-columns: 1fr; } }
/* =============================================================== DESIGN-SYSTEM PAGE CHROME (.ds-*) =============================================================== */
.ds-nav {
position: sticky; top: 0; z-index: 50;
background: #ffffff;
border-bottom: 1px solid var(--border);
box-shadow: var(--shadow-sticky);
padding: 0.75rem clamp(1rem, 4vw, 3rem);
display: flex; align-items: center; justify-content: space-between;
gap: 2rem;
flex-wrap: wrap;
}
.lockup-text { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: var(--ink-deep); margin: 0; letter-spacing: -0.005em; }
.lockup-text .accent { color: var(--brand-red); }
.lockup-text small { display: block; font-family: var(--font-body); font-size: 0.7rem; font-weight: 700; color: var(--ink-mid); letter-spacing: 0.12em; text-transform: uppercase; margin-top: 2px; }
.tabs { display: flex; gap: 4px; }
.tab { padding: 8px 14px; font-size: 0.85rem; font-weight: 700; color: var(--ink-mid); border-radius: var(--radius-sm); letter-spacing: 0.02em; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.tab:hover { background: var(--bg-warm); color: var(--ink-deep); }
.tab.active { background: var(--brand-blue-deep); color: var(--gold); }
.ds-hero {
padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem);
background: var(--bg-soft);
border-bottom: 1px solid var(--border);
position: relative;
overflow: hidden;
}
.ds-hero::before {
content: '';
position: absolute;
top: -120px; right: -120px;
width: 400px; height: 400px;
border-radius: 50%;
background: var(--grad-warm-hero);
opacity: 0.15;
filter: blur(48px);
pointer-events: none;
}
.ds-hero .container { position: relative; z-index: 1; }
.ds-hero .display { max-width: 18ch; margin-bottom: 1.25rem; }
.ds-hero .lede { max-width: 62ch; }
.ds-section { padding: clamp(2.5rem, 5vw, 4rem) 0; border-bottom: 1px solid var(--border); }
.ds-section:last-child { border-bottom: 0; }
.ds-section .head { margin-bottom: 2rem; }
/* =============================================================== SWATCHES =============================================================== */
.swatch-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; }
@media (max-width: 880px) { .swatch-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 540px) { .swatch-grid { grid-template-columns: repeat(2, 1fr); } }
.swatch { border-radius: var(--radius-md); border: 1px solid var(--border); overflow: hidden; background: var(--bg); }
.swatch .chip-color { aspect-ratio: 1.4; }
.swatch .label { padding: 10px 12px 12px; }
.swatch .label .name { font-family: var(--font-display); font-weight: 800; font-size: 0.85rem; color: var(--ink-deep); }
.swatch .label .hex { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-mid); margin-top: 2px; }
/* =============================================================== TYPE SPEC =============================================================== */
.type-spec { display: grid; grid-template-columns: 1fr 2fr; gap: 1.5rem; padding-block: 1.5rem; border-bottom: 1px solid var(--border); align-items: baseline; }
.type-spec .meta { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-mid); }
.type-spec .meta strong { display: block; color: var(--ink-deep); font-family: var(--font-body); font-weight: 800; margin-bottom: 4px; letter-spacing: 0.02em; font-size: 0.85rem; }
.type-spec .demo { color: var(--ink-deep); }
.type-spec:last-child { border-bottom: 0; }
/* =============================================================== SECTIONS-PAGE CHROME (.sx-*) =============================================================== */
.sx-shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; background: var(--bg-soft); }
.sx-index { background: #ffffff; border-right: 1px solid var(--border); padding: 1.5rem 1rem; position: sticky; top: 0; max-height: 100vh; overflow-y: auto; }
.sx-index h4 { font-family: var(--font-display); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mid); margin: 1.25rem 0 0.5rem; }
.sx-index a { display: block; padding: 6px 8px; font-size: 0.85rem; color: var(--ink-soft); border-radius: var(--radius-xs); margin-bottom: 2px; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.sx-index a:hover { background: var(--bg-warm); color: var(--brand-blue-deep); }
.sx-main { padding: 2rem clamp(1rem, 3vw, 2.5rem); }
.sx-header { background: #ffffff; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1.5rem; margin-bottom: 1.5rem; }
.sx-pattern { background: #ffffff; border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 1.5rem; overflow: hidden; }
.sx-pattern .sx-header { border: 0; border-bottom: 1px solid var(--border); border-radius: 0; margin-bottom: 0; padding: 1rem 1.25rem; }
.sx-pattern .sx-header h2 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 800; margin: 0; color: var(--ink-deep); }
.sx-pattern .sx-header .demo-label { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-mid); margin: 4px 0 0; }
.sx-body { padding: 0; }
.sx-demo { padding: 0; background: var(--bg); }
@media (max-width: 880px) { .sx-shell { grid-template-columns: 1fr; } .sx-index { position: relative; max-height: none; border-right: 0; border-bottom: 1px solid var(--border); } }
/* =============================================================== PAGES GALLERY =============================================================== */
.pages-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.pages-gallery .page-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; text-decoration: none; color: inherit; transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease); }
.pages-gallery .page-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); border-color: var(--brand-blue); }
.pages-gallery .page-card .preview { aspect-ratio: 4/3; background: var(--surface-gray); display: flex; align-items: center; justify-content: center; color: var(--ink-mid); font-family: var(--font-mono); font-size: 0.75rem; overflow: hidden; }
.pages-gallery .page-card .preview img { width: 100%; height: 100%; object-fit: cover; }
.pages-gallery .page-card .preview.dark { background: var(--bg-deepest); position: relative; }
.pages-gallery .page-card .preview.dark::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--grad-patriot); }
.pages-gallery .page-card .preview.dark .pv-content { position: absolute; inset: 0; padding: 1.5rem; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; }
.pages-gallery .page-card .preview.dark .pv-eyebrow { font-family: var(--font-body); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.pages-gallery .page-card .preview.dark .pv-headline { font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; color: #fff; line-height: 1.1; }
.pages-gallery .page-card .meta { padding: 1rem 1.25rem; }
.pages-gallery .page-card .meta h3 { font-family: var(--font-display); font-size: 1rem; font-weight: 800; margin: 0 0 4px; color: var(--ink-deep); }
.pages-gallery .page-card .meta p { font-size: 0.85rem; color: var(--ink-soft); margin: 0; }
@media (max-width: 720px) { .pages-gallery { grid-template-columns: 1fr; } }
/* =============================================================== HERO-MAIN (signature live-site hero) =============================================================== */
/* Full-bleed family-house photo on deep-blue #005289 ground.
100px gradient fade at the bottom so the photo blends into the
service-card strip. Red .micro callout badge above the .jumbo
headline. 3-bullet .hero-highlights list with circular SVG icon
badges. Distinctive .btn-book-now-yellow stadium button.
Google rating badge floats top-right. */
.hero-main {
position: relative;
background-color: var(--bg-dark); /* #005289 deep blue */
color: #ffffff;
overflow: hidden;
}
.hero-main .bg-image-abs {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.hero-main .bg-image-abs img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center right;
}
.hero-main .dot-pattern {
position: absolute;
inset: 0;
background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.07) 1.2px, transparent 0);
background-size: 26px 26px;
pointer-events: none;
z-index: 1;
opacity: 0.9;
mix-blend-mode: screen;
}
.hero-main .hero-gradient {
position: absolute;
left: 0; right: 0;
bottom: 0;
height: 100px;
background: linear-gradient(0deg, var(--bg-dark) 20%, transparent);
z-index: 2;
pointer-events: none;
}
.hero-main .container {
position: relative;
z-index: 3;
padding-block: clamp(3rem, 6vw, 5rem) clamp(6rem, 10vw, 9rem);
}
.hero-main-row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 2rem;
align-items: center;
min-height: clamp(440px, 50vw, 620px);
}
.hero-main-copy { max-width: 560px; }
/* RED CALLOUT BADGE */
.hero-main .micro {
display: inline-block;
background: var(--brand-red);
color: #ffffff;
padding: 9px 12px 7px;
text-transform: uppercase;
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(0.95rem, 1.1vw, 1.0625rem);
line-height: 1.15;
letter-spacing: 0.045em;
max-width: 500px;
margin: 0 0 22px;
}
.hero-main .jumbo {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(2.5rem, 5vw, 4rem);
line-height: 1.04;
letter-spacing: -0.025em;
color: #ffffff;
margin: 0 0 32px;
max-width: 14ch;
}
/* HIGHLIGHTS — 3 bullets with circular SVG icon badges */
.hero-highlights {
list-style: none;
padding: 0;
margin: 0 0 36px;
display: grid;
gap: 14px;
}
.hero-highlights li {
display: flex;
align-items: center;
gap: 14px;
color: #ffffff;
font-size: 1.0625rem;
font-weight: 400;
line-height: 1.35;
}
.hero-highlights li p { margin: 0; }
.hero-highlights .icon {
width: 38px;
height: 38px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.hero-highlights .icon img { width: 100%; height: 100%; object-fit: contain; }
.hero-highlights a {
color: #ffffff;
font-weight: 800;
text-decoration: none;
border-bottom: 2px solid #ffffff;
display: inline-flex;
align-items: center;
gap: 8px;
padding-bottom: 2px;
transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.hero-highlights a:hover { color: var(--gold); border-bottom-color: var(--gold); }
.hero-highlights a .arrow {
display: inline-block;
width: 16px; height: 14px;
background: currentColor;
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
}
/* BOOK NOW YELLOW (stadium with white-circle calendar icon left) */
.btn-book-now-yellow {
display: inline-flex;
align-items: center;
gap: 18px;
padding: 7px 36px 7px 7px;
background: var(--gold);
color: var(--ink-deep);
border-radius: 999px;
border: 0;
font-family: var(--font-display);
font-weight: 800;
font-size: 1.0625rem;
letter-spacing: 0.005em;
text-decoration: none;
cursor: pointer;
transition: all var(--t-base) var(--ease);
box-shadow: 0 14px 28px rgba(0,0,0,0.22);
position: relative;
}
.btn-book-now-yellow:hover {
background: var(--gold-deep);
transform: translateY(-2px);
box-shadow: 0 18px 36px rgba(250,214,4,0.45);
}
.btn-book-now-yellow .icon {
width: 56px;
height: 56px;
border-radius: 50%;
background: #ffffff;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: inset 0 0 0 1px rgba(33,37,41,0.06);
}
.btn-book-now-yellow .icon img { width: 32px; height: 32px; }
.btn-book-now-yellow .arrow {
display: inline-block;
width: 18px; height: 16px;
background: var(--ink-deep);
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
transition: transform var(--t-base) var(--ease);
}
.btn-book-now-yellow:hover .arrow { transform: translateX(4px); }
/* GOOGLE RATING BADGE — floats top-right of hero */
.google-rating {
position: absolute;
top: clamp(1rem, 3vw, 1.75rem);
right: clamp(1rem, 3vw, 2rem);
background: #ffffff;
padding: 10px 14px;
border-radius: 6px;
color: var(--ink-deep);
box-shadow: 0 6px 18px rgba(0,0,0,0.18);
display: flex;
align-items: center;
gap: 10px;
z-index: 10;
font-family: var(--font-body);
}
.google-rating .g-icon {
width: 36px; height: 36px;
border-radius: 50%;
background: #ffffff;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
/* Stylized G mark in brand colors */
background:
conic-gradient(from -180deg at 50% 50%,
#4285F4 0deg 90deg,
#34A853 90deg 180deg,
#FBBC05 180deg 270deg,
#EA4335 270deg 360deg);
-webkit-mask: radial-gradient(circle, transparent 38%, #000 39%);
mask: radial-gradient(circle, transparent 38%, #000 39%);
}
.google-rating .g-icon::after {
content: 'G';
position: absolute;
font-family: var(--font-display);
font-weight: 800;
color: #ffffff;
font-size: 18px;
}
.google-rating .meta { display: flex; flex-direction: column; gap: 1px; line-height: 1.15; }
.google-rating .meta .label { font-size: 10px; color: var(--ink-mid); font-weight: 600; letter-spacing: 0.02em; }
.google-rating .meta .score { font-size: 13px; font-weight: 800; color: var(--ink-deep); display: inline-flex; align-items: center; gap: 6px; }
.google-rating .meta .stars-inline { color: var(--gold); font-size: 12px; letter-spacing: 1px; }
.google-rating .meta .based-on { font-size: 10px; color: var(--ink-mid); font-weight: 500; }
/* HERO CARDS STRIP — the 4 floating cards that overflow into the next section */
.hero-cards {
background: var(--bg-dark);
padding: 0 0 clamp(3rem, 5vw, 4.5rem);
position: relative;
margin-top: clamp(-7rem, -10vw, -5rem);
z-index: 4;
}
.hero-cards-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.25rem;
}
.hero-service-card-stacked {
background: #ffffff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 28px 80px rgba(0,0,0,0.18);
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
height: 100%;
transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.hero-service-card-stacked:hover {
transform: translateY(-6px);
box-shadow: 0 36px 80px rgba(0,0,0,0.25);
}
.hsc-coupon {
background: var(--bg-soft);
padding: 14px 16px;
display: flex;
align-items: center;
gap: 10px;
text-align: left;
}
.hsc-coupon img { width: 18px; height: 18px; flex-shrink: 0; }
.hsc-coupon .copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hsc-coupon h4 {
font-family: var(--font-display);
font-weight: 800;
font-size: 0.85rem;
color: var(--ink-deep);
margin: 0;
line-height: 1.2;
letter-spacing: -0.005em;
}
.hsc-coupon .see-all {
font-size: 11px;
color: var(--ink-mid);
font-weight: 600;
text-align: center;
text-decoration: none;
}
.hsc-coupon .see-all:hover { color: var(--brand-red); }
.hsc-main {
padding: 28px 22px 26px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 18px;
flex: 1;
background: #ffffff;
}
.hsc-main .name-row {
display: flex;
align-items: center;
gap: 12px;
}
.hsc-main .name-row img {
width: 38px;
height: 38px;
object-fit: contain;
}
.hsc-main h3 {
font-family: var(--font-display);
font-weight: 800;
font-size: 1.5rem;
color: var(--ink-deep);
margin: 0;
}
.hsc-main .tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
justify-content: center;
}
.hsc-main .tag {
background: var(--bg-soft);
color: var(--ink-deep);
padding: 5px 11px;
border-radius: 999px;
font-size: 11.5px;
font-weight: 600;
letter-spacing: -0.003em;
}
.hsc-main .cta {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--brand-red);
color: #ffffff;
padding: 12px 22px;
border-radius: 999px;
font-family: var(--font-display);
font-weight: 800;
font-size: 0.92rem;
text-decoration: none;
margin-top: auto;
transition: all var(--t-base) var(--ease);
}
.hsc-main .cta:hover {
background: var(--brand-red-deep);
transform: translateY(-1px);
box-shadow: var(--shadow-cta-red);
}
.hsc-main .cta .arrow {
display: inline-block;
width: 14px; height: 12px;
background: currentColor;
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
transition: transform var(--t-base) var(--ease);
}
.hsc-main .cta:hover .arrow { transform: translateX(4px); }
@media (max-width: 1100px) {
.hero-cards-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
.hero-main-row { grid-template-columns: 1fr; min-height: auto; }
.hero-main .bg-image-abs img { object-position: 70% center; opacity: 0.45; }
.google-rating { top: 12px; right: 12px; padding: 8px 10px; }
.google-rating .meta .based-on { display: none; }
}
@media (max-width: 540px) {
.hero-cards-row { grid-template-columns: 1fr; }
.hero-main .jumbo { font-size: 2.25rem; }
}
/* =============================================================== GUARANTEE BAND (signature live-site pattern) =============================================================== */
/* Repeating-text watermark background (huge "HEATING COOLING PLUMBING
ELECTRICAL" set in ghost gray) + red diamond Genz-Ryan Guarantee
badge centered above a white card. The card has padding-top: 96px
to make room for the overlapping badge above (badge has
margin-bottom: -80px to pull the card up under it). Inside the
card: 5 line-art blue-icon value props in a row, then a centered
"Looking for a Resource? → Visit Our Information Center" link. */
.guarantee-band {
position: relative;
background-color: var(--bg);
background-image: url('assets/genz-ryan-brand/guarantee-watermark-bg.png');
background-repeat: repeat;
background-position: center top;
padding: clamp(2rem, 4vw, 3rem) 0 clamp(4rem, 8vw, 6rem);
overflow: hidden;
}
.guarantee-band .container { max-width: 1095px; }
.guarantee-band .badge {
width: clamp(280px, 36vw, 400px);
display: block;
margin-inline: auto;
filter: drop-shadow(0 0.2rem 0.25rem rgba(0,0,0,0.2));
position: relative;
z-index: 2;
}
.guarantee-band .g-wrapper {
position: relative;
z-index: 1;
margin-top: -80px;
border-radius: 18px;
background: #ffffff;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
padding: 116px 24px 32px;
text-align: center;
}
.guarantee-band .g-steps-box {
display: grid;
grid-template-columns: repeat(5, 1fr);
align-items: start;
justify-content: center;
max-width: 1000px;
margin: 0 auto 56px;
gap: 24px;
}
.guarantee-band .g-steps {
text-align: center;
max-width: 180px;
margin-inline: auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
}
.guarantee-band .g-steps .icon {
width: 64px;
height: 64px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.guarantee-band .g-steps .icon img { width: 64px; height: 64px; object-fit: contain; }
.guarantee-band .g-steps p {
font-family: var(--font-display);
font-weight: 800;
font-size: 1rem;
line-height: 1.15;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--ink-deep);
margin: 0;
}
.guarantee-band .link-title {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(1.5rem, 2vw + 0.5rem, 2rem);
color: var(--ink-deep);
margin: 0 0 12px;
}
.guarantee-band .btn-text-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-display);
font-weight: 700;
font-size: 1rem;
color: var(--brand-blue);
text-decoration: none;
border-bottom: 0;
transition: color var(--t-fast) var(--ease), gap var(--t-base) var(--ease);
}
.guarantee-band .btn-text-link:hover { color: var(--brand-blue-deep); gap: 12px; }
.guarantee-band .btn-text-link .arrow {
display: inline-block;
width: 18px; height: 14px;
background: currentColor;
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
}
@media (max-width: 980px) {
.guarantee-band .g-steps-box { grid-template-columns: repeat(3, 1fr); gap: 32px 16px; }
.guarantee-band .g-wrapper { padding-top: 100px; }
}
@media (max-width: 540px) {
.guarantee-band .g-steps-box { grid-template-columns: repeat(2, 1fr); }
.guarantee-band .badge { width: 240px; }
.guarantee-band .g-wrapper { margin-top: -60px; padding-top: 80px; }
}
/* =============================================================== HERO-SERV-LP (service-landing parent template) =============================================================== */
/* Full-bleed photo background with dark scrim + centered header
(red .micro callout + .jumbo headline) + 6-up sub-service card grid
below. Used as the entry point for a service category page like
/electrical/, /plumbing/, /heating/. Live class: hero hero--serv-lp. */
.hero-serv-lp {
position: relative;
background-color: var(--bg-deepest);
color: #ffffff;
overflow: hidden;
padding: 0;
}
.hero-serv-lp .bg-image-abs { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-serv-lp .bg-image-abs img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-serv-lp::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(33,37,41,0.65) 0%, rgba(0,82,137,0.78) 60%, rgba(0,82,137,0.95) 100%);
z-index: 1;
}
.hero-serv-lp .container { position: relative; z-index: 2; padding-block: clamp(4rem, 7vw, 6rem) clamp(3rem, 5vw, 4.5rem); }
.hero-serv-lp .hero-header { text-align: left; max-width: 720px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.hero-serv-lp .hero-header .micro {
display: inline-block;
background: var(--brand-red);
color: #ffffff;
padding: 8px 12px 6px;
text-transform: uppercase;
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(0.875rem, 1vw, 1rem);
line-height: 1.15;
letter-spacing: 0.045em;
max-width: 540px;
margin: 0 0 18px;
}
.hero-serv-lp .hero-header .jumbo {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(2.5rem, 5vw, 4rem);
line-height: 1.02;
letter-spacing: -0.025em;
color: #ffffff;
margin: 0;
max-width: 18ch;
}
/* SUB-SERVICE CARD GRID — 3-col desktop / 2-col tablet / 1-col mobile */
.hero-cards-wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
@media (max-width: 980px) { .hero-cards-wrapper { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .hero-cards-wrapper { grid-template-columns: 1fr; } }
.serv-lp-card {
background: #ffffff;
border-radius: 16px;
overflow: hidden;
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
height: 100%;
transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
box-shadow: 0 12px 36px rgba(0,0,0,0.18);
}
.serv-lp-card:hover {
transform: translateY(-6px);
box-shadow: 0 28px 60px rgba(0,0,0,0.30);
}
.serv-lp-card .photo {
aspect-ratio: 3/2;
overflow: hidden;
background: var(--bg-soft);
}
.serv-lp-card .photo img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 600ms var(--ease-out-expo);
}
.serv-lp-card:hover .photo img { transform: scale(1.05); }
.serv-lp-card .body {
padding: 22px 22px 24px;
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
}
.serv-lp-card .body h3 {
font-family: var(--font-display);
font-weight: 800;
font-size: 1.375rem;
color: var(--ink-deep);
margin: 0;
line-height: 1.15;
}
.serv-lp-card .body p {
font-size: 0.92rem;
color: var(--ink);
line-height: 1.5;
margin: 0;
flex: 1;
}
.serv-lp-card .learn-more {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-display);
font-weight: 800;
font-size: 0.82rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--brand-blue);
margin-top: 4px;
}
.serv-lp-card .learn-more::after { content: "→"; transition: transform var(--t-base) var(--ease); }
.serv-lp-card:hover .learn-more { color: var(--brand-blue-deep); }
.serv-lp-card:hover .learn-more::after { transform: translateX(4px); }
/* =============================================================== TWO-COL CONTENT FORM (lead capture composition) =============================================================== */
/* Left: copy + diagnostic checklist. Right: white-card multi-field
contact form with consent. Used after the hero for service landings
to capture leads in-page. Live class: section.two-col-content-form. */
.two-col-content-form {
padding-block: clamp(3rem, 6vw, 5rem);
background: var(--bg);
}
.two-col-content-form .row-2col { gap: clamp(2rem, 4vw, 4rem); }
.tccf-info .eyebrow { margin-bottom: 18px; }
.tccf-info h2 {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(2rem, 3vw + 0.5rem, 3rem);
color: var(--ink-deep);
margin: 0 0 22px;
line-height: 1.1;
letter-spacing: -0.02em;
max-width: 18ch;
}
.tccf-info p { font-size: 1.0625rem; line-height: 1.6; color: var(--ink); margin: 0 0 16px; }
.tccf-info .problem-checklist {
list-style: none;
padding: 0;
margin: 22px 0 0;
display: grid;
gap: 12px;
}
.tccf-info .problem-checklist li {
display: grid;
grid-template-columns: 24px 1fr;
gap: 12px;
align-items: start;
font-size: 1rem;
color: var(--ink-deep);
line-height: 1.45;
font-weight: 500;
}
.tccf-info .problem-checklist li::before {
content: '';
width: 22px; height: 22px;
margin-top: 2px;
background: var(--brand-red);
border-radius: 50%;
-webkit-mask: url("data:image/svg+xml;utf8,") center / 75% no-repeat var(--brand-red);
mask: url("data:image/svg+xml;utf8,") center / 75% no-repeat;
}
/* CONTACT FORM CARD */
.contact-form-card {
background: #ffffff;
border: 1px solid var(--border);
border-top: 6px solid var(--brand-red);
border-radius: var(--radius-md);
box-shadow: var(--shadow-card-hover);
padding: clamp(1.75rem, 3vw, 2.5rem);
}
.contact-form-card h3 {
font-family: var(--font-display);
font-weight: 800;
font-size: 1.375rem;
color: var(--ink-deep);
margin: 0 0 6px;
}
.contact-form-card .form-lede {
font-size: 0.92rem;
color: var(--ink-mid);
margin: 0 0 22px;
}
.contact-form-card .form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 12px;
}
.contact-form-card .form-row.single { grid-template-columns: 1fr; }
@media (max-width: 540px) { .contact-form-card .form-row { grid-template-columns: 1fr; } }
.contact-form-card label {
display: block;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-soft);
margin-bottom: 5px;
}
.contact-form-card input,
.contact-form-card select,
.contact-form-card textarea {
width: 100%;
padding: 11px 13px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-family: var(--font-body);
font-size: 0.95rem;
background: var(--bg);
color: var(--ink-deep);
transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.contact-form-card input:focus,
.contact-form-card select:focus,
.contact-form-card textarea:focus {
outline: 0;
border-color: var(--brand-blue);
box-shadow: 0 0 0 3px var(--brand-blue-pale);
}
.contact-form-card textarea { resize: vertical; min-height: 96px; }
.contact-form-card .consent {
display: flex;
gap: 10px;
font-size: 0.78rem;
color: var(--ink-mid);
line-height: 1.45;
margin: 14px 0 18px;
}
.contact-form-card .consent input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }
.contact-form-card .consent a { color: var(--brand-blue); text-decoration: underline; }
.contact-form-card button[type="submit"] {
width: 100%;
padding: 14px 22px;
background: var(--brand-red);
color: #ffffff;
border: 0;
border-radius: var(--radius-pill);
font-family: var(--font-display);
font-weight: 800;
font-size: 1rem;
letter-spacing: 0.04em;
text-transform: uppercase;
cursor: pointer;
transition: all var(--t-base) var(--ease);
}
.contact-form-card button[type="submit"]:hover {
background: var(--brand-red-deep);
transform: translateY(-1px);
box-shadow: var(--shadow-cta-red);
}
/* =============================================================== TWO-COL REVERSED (heritage + photo) =============================================================== */
/* Generic two-column with photo left + content right. Used here for
"Turn Off Your Worries" / "Family-Focused Twin Cities Services Since
1950" block. Live class: section.two-col.reversed. */
.two-col-reversed {
padding-block: clamp(3rem, 6vw, 5rem);
background: var(--bg);
}
.two-col-reversed .row-2col { grid-template-columns: 1fr 1.1fr; }
.two-col-reversed .photo-block {
border-radius: var(--radius-md);
overflow: hidden;
aspect-ratio: 4/3;
background: var(--bg-soft);
box-shadow: var(--shadow-card-hover);
}
.two-col-reversed .photo-block img { width: 100%; height: 100%; object-fit: cover; }
.two-col-reversed .copy h3 {
font-family: var(--font-display);
font-weight: 800;
font-size: 1.25rem;
color: var(--brand-red);
margin: 0 0 8px;
letter-spacing: -0.005em;
}
.two-col-reversed .copy h2 {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(2rem, 3vw + 0.5rem, 3rem);
color: var(--ink-deep);
margin: 0 0 24px;
line-height: 1.1;
letter-spacing: -0.02em;
}
.two-col-reversed .copy p { font-size: 1.0625rem; line-height: 1.6; color: var(--ink); margin: 0 0 16px; }
.two-col-reversed .copy .signature-name {
font-family: var(--font-display);
font-weight: 800;
font-style: italic;
color: var(--brand-blue-deep);
font-size: 1.05rem;
margin-top: 18px;
}
/* =============================================================== SERVICE-AREAS GRID (dense city links) =============================================================== */
/* Twin Cities suburb names in a 4-col dense grid. Each city is a
styled link; hover swaps in brand color. Used as a footer-adjacent
trust-and-SEO block. Live class: section.service-areas. */
.service-areas-band {
padding-block: clamp(3rem, 6vw, 5rem);
background: var(--bg-soft);
text-align: center;
}
.service-areas-band .section-head { margin-inline: auto; }
.service-areas-band h2 {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(2rem, 3vw + 0.5rem, 3rem);
color: var(--ink-deep);
margin: 14px 0 12px;
letter-spacing: -0.02em;
max-width: 22ch;
margin-inline: auto;
}
.service-areas-band .lede { margin-inline: auto; max-width: 56ch; margin-bottom: 36px; }
.service-areas-band .cities {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 4px 16px;
max-width: 1100px;
margin-inline: auto;
}
@media (max-width: 980px) { .service-areas-band .cities { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px) { .service-areas-band .cities { grid-template-columns: repeat(2, 1fr); } }
.service-areas-band .cities a {
display: block;
padding: 9px 12px;
font-size: 0.92rem;
font-weight: 600;
color: var(--ink-deep);
border-radius: var(--radius-sm);
text-decoration: none;
transition: all var(--t-fast) var(--ease);
}
.service-areas-band .cities a:hover {
background: #ffffff;
color: var(--brand-blue-deep);
box-shadow: var(--shadow-card);
}
/* =============================================================== RECENT-ARTICLES-FEED (blog preview) =============================================================== */
/* 3-up article preview cards with image + read-time chip + title +
excerpt + Read More link. Live class: section.recent-articles-faq
(which combines blog feed + FAQ — here we split for cleaner reuse). */
.articles-feed-band {
padding-block: clamp(3rem, 6vw, 5rem);
background: var(--bg);
}
.articles-feed-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
margin-top: 2rem;
}
@media (max-width: 980px) { .articles-feed-grid { grid-template-columns: 1fr; } }
.article-card {
background: #ffffff;
border: 1px solid var(--border);
border-radius: var(--radius-md);
overflow: hidden;
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.article-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-card-hover);
border-color: var(--brand-blue);
}
.article-card .photo {
aspect-ratio: 16/9;
overflow: hidden;
background: var(--bg-soft);
position: relative;
}
.article-card .photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out-expo); }
.article-card:hover .photo img { transform: scale(1.04); }
.article-card .read-time {
position: absolute;
top: 12px;
left: 12px;
background: rgba(255,255,255,0.96);
padding: 5px 11px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--brand-blue-deep);
display: inline-flex;
align-items: center;
gap: 6px;
}
.article-card .body {
padding: 18px 20px 22px;
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
}
.article-card .body h3 {
font-family: var(--font-display);
font-weight: 800;
font-size: 1.0625rem;
color: var(--ink-deep);
margin: 0;
line-height: 1.3;
}
.article-card .body p {
font-size: 0.9rem;
color: var(--ink);
line-height: 1.5;
margin: 0;
flex: 1;
}
.article-card .read-more {
font-family: var(--font-display);
font-weight: 800;
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--brand-blue);
margin-top: 4px;
}
.article-card .read-more::after { content: ' →'; transition: transform var(--t-base) var(--ease); display: inline-block; }
.article-card:hover .read-more::after { transform: translateX(4px); }
/* =============================================================== CTA BANNER (image-led conversion) =============================================================== */
/* Large image background with dark scrim + centered headline + CTA
buttons. Used at the end of service landing pages. Distinct from
.cta-band (which is solid-dark) — this one is photo-led for stronger
final impression. Live class: section.cta-banner. */
.cta-banner-image {
position: relative;
padding: clamp(4rem, 8vw, 7rem) 0;
background: var(--bg-deepest);
color: #ffffff;
overflow: hidden;
}
.cta-banner-image .bg-image-abs { position: absolute; inset: 0; z-index: 0; }
.cta-banner-image .bg-image-abs img { width: 100%; height: 100%; object-fit: cover; }
.cta-banner-image::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(33,37,41,0.50) 0%, rgba(0,82,137,0.78) 100%);
z-index: 1;
}
.cta-banner-image::after {
content: "";
position: absolute;
left: 0; right: 0;
bottom: 0;
height: 4px;
background: linear-gradient(90deg, var(--brand-red) 0%, var(--brand-blue) 50%, var(--gold) 100%);
z-index: 2;
}
.cta-banner-image .container { position: relative; z-index: 3; text-align: center; }
.cta-banner-image h2 {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(2.25rem, 4vw + 0.5rem, 3.75rem);
color: #ffffff;
margin: 0 0 18px;
letter-spacing: -0.025em;
line-height: 1.05;
}
.cta-banner-image p {
font-size: 1.0625rem;
color: rgba(255,255,255,0.92);
margin: 0 auto 32px;
max-width: 52ch;
line-height: 1.55;
}
.cta-banner-image .actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
justify-content: center;
}
/* =============================================================== FOOTER ANCHOR INTRO (small page-level breadcrumb pattern) =============================================================== */
.breadcrumb-bar {
background: var(--bg-soft);
border-bottom: 1px solid var(--border);
padding: 14px 0;
font-size: 13px;
color: var(--ink-mid);
}
.breadcrumb-bar a { color: var(--ink-mid); text-decoration: none; }
.breadcrumb-bar a:hover { color: var(--brand-blue); }
.breadcrumb-bar .crumb-sep { margin: 0 8px; opacity: 0.5; }
.breadcrumb-bar .current { color: var(--ink-deep); font-weight: 600; }
/* =============================================================== HERO-SINGLE (service-detail child template) =============================================================== */
/* Full-bleed photo hero with dark-blue scrim + left-aligned header
(red .micro callout + .jumbo headline) + 2 highlight bullets
(shield/wrench icons) + yellow Book Appointment button. Distinct
from .hero-main (which has 3 highlights and Google rating) and
.hero-serv-lp (which has a sub-service card grid below). Used for
bottom-of-funnel service-detail pages like /electrical/repair/.
Live class: hero hero--main hero--single. */
.hero-single {
position: relative;
background-color: var(--bg-dark);
color: #ffffff;
overflow: hidden;
padding: 0;
}
.hero-single .bg-image-abs { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-single .bg-image-abs img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-single::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(120deg, rgba(0,82,137,0.92) 0%, rgba(0,82,137,0.65) 45%, rgba(33,37,41,0.45) 100%);
z-index: 1;
}
.hero-single .dot-pattern {
position: absolute;
inset: 0;
background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.08) 1.2px, transparent 0);
background-size: 26px 26px;
pointer-events: none;
z-index: 2;
opacity: 0.7;
mix-blend-mode: screen;
}
.hero-single .container {
position: relative;
z-index: 3;
padding-block: clamp(4rem, 7vw, 6rem) clamp(4rem, 7vw, 6rem);
}
.hero-single-copy { max-width: 760px; }
.hero-single .micro {
display: inline-block;
background: var(--gold); /* live theme override: yellow not red on child pages */
color: var(--brand-blue-deep); /* deep blue text on yellow */
padding: 8px 12px 6px;
text-transform: uppercase;
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(0.875rem, 1vw, 1rem);
line-height: 1.15;
letter-spacing: 0.045em;
max-width: unset; /* live: no max-width clamp on child */
margin: 0 0 22px;
}
.hero-single .jumbo {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(2.25rem, 4.5vw, 3.75rem);
line-height: 1.05;
letter-spacing: -0.025em;
color: #ffffff;
margin: 0 0 24px;
max-width: none; /* let the column dictate wrap, then balance */
text-wrap: balance; /* gives the long-line + short-line rag */
}
.hero-single .hero-body {
font-family: var(--font-body);
font-size: 1.0625rem;
line-height: 1.55;
color: rgba(255,255,255,0.95);
margin: 0 0 32px;
max-width: 56ch;
text-wrap: pretty;
}
.hero-single-highlights {
list-style: none;
padding: 0;
margin: 0 0 36px;
display: flex;
flex-wrap: wrap;
gap: 32px;
}
.hero-single-highlights li {
display: inline-flex;
align-items: center;
gap: 10px;
color: #ffffff;
font-size: 1rem;
font-weight: 800; /* live: highlights li are bold */
}
.hero-single-highlights .icon {
width: 27px; /* live: 27px inline icons */
height: 27px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.hero-single-highlights .icon img {
width: 27px;
height: 27px;
object-fit: contain;
/* Recolor solid-black SVGs to gold to match the live page */
filter: brightness(0) saturate(100%) invert(82%) sepia(56%) saturate(1623%) hue-rotate(9deg) brightness(106%) contrast(106%);
}
/* =============================================================== TWO-COL-FULL (image + content + service-menu) =============================================================== */
/* Full-width row used on service-detail pages. Photo left, content
right with H2 + paragraph + .service-menu-list of sub-services
(e.g. Ceiling Fan / Outlet / Panel / Wiring Repair on the
/electrical/repair/ page). Distinct from .two-col-content-form
(which has a form), .two-col-reversed (just photo + content with
no menu), and the simpler .row-2col. Live class: section.two-col-full. */
.two-col-full {
padding-block: clamp(3rem, 6vw, 5rem);
background: var(--bg);
}
.two-col-full .row-2col { grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 4vw, 4rem); }
.two-col-full .tcf-photo {
border-radius: var(--radius-md);
overflow: hidden;
aspect-ratio: 4/5;
background: var(--bg-soft);
box-shadow: var(--shadow-card-hover);
}
.two-col-full .tcf-photo img { width: 100%; height: 100%; object-fit: cover; }
.two-col-full .tcf-info .eyebrow { margin-bottom: 18px; }
.two-col-full .tcf-info h2 {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(2rem, 3vw + 0.5rem, 3rem);
color: var(--ink-deep);
margin: 0 0 22px;
line-height: 1.08;
letter-spacing: -0.02em;
max-width: 20ch;
}
.two-col-full .tcf-info p {
font-size: 1.0625rem;
line-height: 1.6;
color: var(--ink);
margin: 0 0 24px;
}
@media (max-width: 880px) { .two-col-full .tcf-photo { aspect-ratio: 4/3; max-height: 420px; } }
/* SERVICE MENU LIST — sub-service cards inside two-col-full */
.service-menu-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
}
@media (max-width: 640px) { .service-menu-list { grid-template-columns: 1fr; } }
.service-menu-list li {
display: grid;
grid-template-columns: 44px 1fr;
gap: 14px;
padding: 16px 18px;
background: var(--bg-soft);
border: 1px solid var(--border);
border-left: 4px solid var(--brand-blue);
border-radius: var(--radius-sm);
align-items: center;
transition: all var(--t-base) var(--ease);
}
.service-menu-list li:hover {
background: #ffffff;
border-left-color: var(--brand-red);
transform: translateX(3px);
box-shadow: var(--shadow-card);
}
.service-menu-list .icon {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--brand-blue-pale);
color: var(--brand-blue-deep);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.service-menu-list li:hover .icon { background: var(--brand-red-pale); color: var(--brand-red-deep); }
.service-menu-list .icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.service-menu-list .item-name {
font-family: var(--font-display);
font-weight: 800;
font-size: 1rem;
color: var(--ink-deep);
line-height: 1.25;
}
.service-menu-list .item-meta {
display: block;
font-family: var(--font-body);
font-size: 0.82rem;
font-weight: 500;
color: var(--ink-mid);
letter-spacing: -0.005em;
margin-top: 2px;
text-transform: none;
}
/* =============================================================== REVIEWS CAROUSEL (signature live-site pattern) =============================================================== */
/* Horizontal-scrolling row of testimonial cards with star rating +
quote + reviewer avatar/name + Google indicator. CSS scroll-snap
for smooth swipe behavior. 8,036-review trust signal across the
top. Live class: section.reviews (used on every service-detail
page). */
.reviews-band {
padding-block: clamp(3rem, 6vw, 5rem);
background: var(--bg-soft);
overflow: hidden;
}
.reviews-band .reviews-head {
display: flex;
justify-content: space-between;
align-items: end;
gap: 1.5rem;
flex-wrap: wrap;
margin-bottom: 2rem;
}
.reviews-band .reviews-head h2 {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(2rem, 3vw + 0.5rem, 3rem);
color: var(--ink-deep);
margin: 0;
letter-spacing: -0.02em;
line-height: 1.1;
}
.reviews-band .reviews-head .sub {
font-family: var(--font-display);
font-weight: 800;
font-size: 0.95rem;
color: var(--brand-red);
margin: 0 0 6px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.reviews-band .reviews-summary {
display: flex;
align-items: center;
gap: 12px;
background: #ffffff;
border: 1px solid var(--border);
border-radius: var(--radius-pill);
padding: 8px 14px 8px 8px;
box-shadow: var(--shadow-card);
}
.reviews-band .reviews-summary .g-mark {
width: 36px; height: 36px;
background: conic-gradient(from -180deg at 50% 50%, #4285F4 0deg 90deg, #34A853 90deg 180deg, #FBBC05 180deg 270deg, #EA4335 270deg 360deg);
border-radius: 50%;
-webkit-mask: radial-gradient(circle, transparent 38%, #000 39%);
mask: radial-gradient(circle, transparent 38%, #000 39%);
}
.reviews-band .reviews-summary .text { line-height: 1.15; }
.reviews-band .reviews-summary .text .score { font-weight: 800; color: var(--ink-deep); font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.reviews-band .reviews-summary .text .score .stars-inline { color: var(--gold); letter-spacing: 1px; }
.reviews-band .reviews-summary .text .count { font-size: 11px; color: var(--ink-mid); }
.reviews-carousel {
display: flex;
gap: 16px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-inline: clamp(1rem, 4vw, 3rem);
padding: 6px 6px 24px;
margin: 0 calc(-1 * clamp(1rem, 4vw, 3rem));
padding-inline: clamp(1rem, 4vw, 3rem);
scrollbar-width: thin;
scrollbar-color: var(--brand-blue) transparent;
}
.reviews-carousel::-webkit-scrollbar { height: 6px; }
.reviews-carousel::-webkit-scrollbar-track { background: var(--border); border-radius: 999px; }
.reviews-carousel::-webkit-scrollbar-thumb { background: var(--brand-blue); border-radius: 999px; }
.review-card {
flex: 0 0 320px;
background: #ffffff;
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 24px;
scroll-snap-align: start;
display: flex;
flex-direction: column;
gap: 14px;
transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.review-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.review-card .stars-row { display: flex; justify-content: space-between; align-items: center; }
.review-card .stars-row .stars { color: var(--gold); font-size: 16px; letter-spacing: 2px; }
.review-card .stars-row .g-tag {
width: 22px; height: 22px;
background: conic-gradient(from -180deg at 50% 50%, #4285F4 0deg 90deg, #34A853 90deg 180deg, #FBBC05 180deg 270deg, #EA4335 270deg 360deg);
border-radius: 50%;
-webkit-mask: radial-gradient(circle, transparent 38%, #000 39%);
mask: radial-gradient(circle, transparent 38%, #000 39%);
}
.review-card .quote {
font-family: var(--font-body);
font-size: 0.95rem;
line-height: 1.55;
color: var(--ink-deep);
margin: 0;
flex: 1;
font-weight: 500;
}
.review-card .quote::before { content: '"'; color: var(--brand-red); font-size: 1.3rem; font-weight: 800; margin-right: 2px; line-height: 0; }
.review-card .author {
display: flex;
align-items: center;
gap: 12px;
padding-top: 14px;
border-top: 1px solid var(--border);
}
.review-card .author .avatar {
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--bg-warm);
color: var(--brand-red);
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-weight: 800;
font-size: 14px;
}
.review-card .author .name { font-weight: 800; font-size: 0.92rem; color: var(--ink-deep); }
.review-card .author .date { font-size: 0.75rem; color: var(--ink-mid); }
.reviews-band .reviews-foot {
display: flex;
justify-content: center;
margin-top: 24px;
}
/* =============================================================== MOTION REDUCE =============================================================== */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}