/* =============================================================================
RL Concrete - Global Stylesheet (LEAN REBUILD - pilot scope: chrome + HOME)
Source of truth for values: r:/RL Concrete/BUILD/homepage/css/styles.css
Iron Rules: 39 (replace between markers), 51 (mockup values verbatim).
Architecture: zero importance-overrides; one responsive breakpoint at 980px.
No duplicate component selectors. Tokens via var(). Live-DOM BEM targeted.
============================================================================= */
/* SECTION:fonts START
Montserrat, self-hosted. This was a CSS @import of fonts.googleapis.com, which
is the slowest way there is to load a webfont: the browser had to download
THIS stylesheet, parse it, only then discover the font stylesheet, fetch that,
and only then fetch the font files. Three serialized round trips, all
render-blocking. Measured at 795ms on a throttled mobile Lighthouse run, the
single largest render-blocking item on the site. It also asked for seven
static weights when the CSS uses five, and weight 900 is used nowhere.
These are the VARIABLE font files: one file per subset covers the whole
400-800 range, so the family costs one request instead of seven, served from
our own origin with no third-party DNS lookup or TLS handshake. latin-ext is
listed first but only downloads if a page actually uses those characters.
functions.php preloads the latin file so it starts before CSS parsing.
Weight 300 was used once (.service-hero__desc) and is now 400.
Jay 2026-09-23. */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url('fonts/montserrat-v31-latin-ext-var.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url('fonts/montserrat-v31-latin-var.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* SECTION:fonts END */
/* SECTION:tokens START */
:root {
--primary: #DD0000; --primary-dark: #B30000; --primary-light: #FF1A1A; --primary-rgb: 221, 0, 0;
--navy: #1B325F; --navy-dark: #011627; --navy-light: #2A4A7F;
--black: #000000; --black-soft: #011627; --charcoal: #1B325F;
--gray-dark: #3A3A3A; --gray: #424242; --gray-light: #E5E5E5; --gray-bg: #F5F5F5;
--white: #FFFFFF; --off-white: #F9FAFB;
--concrete: #E5E1DC; --concrete-dark: #C9C4BD; --star-gold: #F59E0B; --success: #16A34A; --error: #DC2626;
--accent-blue: #5B9BD5;
--text-body: rgba(1, 22, 39, 0.75); --text-heading: #1B325F;
--overlay-dark: rgba(1, 22, 39, 0.7); --overlay-medium: rgba(1, 22, 39, 0.5); --overlay-light: rgba(1, 22, 39, 0.3);
--font-display: 'Montserrat', sans-serif; --font-body: 'Montserrat', sans-serif;
--space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-5: 40px;
--space-6: 48px; --space-8: 64px; --space-10: 80px; --space-12: 96px; --space-13: 104px;
--ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}
/* SECTION:tokens END */
/* SECTION:base START */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 1.75;
color: var(--text-body); background: var(--white);
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; transition: color 0.3s ease; }
ul, ol { list-style: none; }
button { border: none; background: none; cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; }
.skip-link {
position: absolute; top: -100%; left: 16px; z-index: 10000; padding: 12px 24px;
background: var(--navy); color: var(--white); font-size: 14px; font-weight: 600;
border-radius: 0 0 4px 4px; transition: top 0.3s ease;
}
.skip-link:focus { top: 0; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 60px; width: 100%; }
/* Phone: 60px side padding squeezed a 360px screen down to 240px of content.
Header/footer/announce-bar set their own .container padding and are unaffected. */
@media (max-width: 600px) {
.container { padding: 0 16px; }
}
/* SECTION:base END */
/* SECTION:typography START */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--text-heading); line-height: 1.1; }
h1 { font-size: clamp(34px, 4vw, 50px); font-weight: 700; line-height: 1.05; letter-spacing: 2px; text-transform: uppercase; }
h2 { font-size: clamp(30px, 3.4vw, 44px); font-weight: 700; line-height: 1.1; letter-spacing: 1.5px; text-transform: uppercase; }
h3 { font-size: clamp(24px, 2.5vw, 36px); font-weight: 600; line-height: 1.15; letter-spacing: 1px; text-transform: uppercase; }
h4 { font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; text-transform: uppercase; }
h5 { font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; text-transform: uppercase; }
h6 { font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; text-transform: uppercase; color: var(--gray-dark); }
/* Shared section header - live widget emits .section-header__* BEM */
.section-header { text-align: center; margin-bottom: var(--space-5); }
.section-header__eyebrow, .finance-intro__header__eyebrow, .eyebrow {
font-family: var(--font-body); font-size: 11px; font-weight: 600; line-height: 1.2;
letter-spacing: 4px; text-transform: uppercase; color: var(--navy);
margin-bottom: var(--space-2); display: block;
}
.section-header__heading {
font-family: var(--font-display); font-size: clamp(30px, 3.4vw, 44px); font-weight: 700;
line-height: 1.1; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-heading);
}
.section-header__accent, .finance-intro__header__accent { color: var(--primary); }
.text-accent { color: var(--navy); }
.section-header__desc { font-family: var(--font-body); font-size: 16px; font-weight: 400; color: var(--gray-dark); line-height: 1.75; max-width: 600px; margin: 20px auto 0; }
/* SECTION:typography END */
/* SECTION:buttons START */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: 1.2px;
text-transform: uppercase; border-radius: 3px; cursor: pointer; text-decoration: none; line-height: 1; white-space: nowrap;
transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--primary); color: var(--white); padding: 14px 32px; border: 2px solid var(--primary); }
.btn--primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn--outline { background: transparent; color: var(--primary); padding: 14px 32px; border: 2px solid var(--primary); }
.btn--outline:hover { background: var(--primary); color: var(--white); }
.btn--white { background: var(--white); color: var(--navy); padding: 14px 32px; border: 2px solid var(--white); }
.btn--white:hover { background: var(--off-white); }
.btn--white-outline { background: transparent; color: var(--white); padding: 14px 32px; border: 2px solid rgba(255,255,255,0.4); }
.btn--white-outline:hover { border-color: var(--white); background: rgba(255,255,255,0.1); }
.btn--sm { padding: 10px 22px; font-size: 12px; }
/* SECTION:buttons END */
/* SECTION:utilities START */
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes heroSlowZoom { from { transform: scale(1); } to { transform: scale(1.05); } }
@keyframes heroPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.3); } }
.fade-up { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade-up.is-visible { opacity: 1; transform: translateY(0); }
.fade-up-delay-1 { transition-delay: 0.1s; }
.fade-up-delay-2 { transition-delay: 0.2s; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.01ms; animation-iteration-count: 1; transition-duration: 0.01ms; }
}
/* SECTION:utilities END */
/* SECTION:announce-bar START */
#announce-bar { background: var(--navy); color: rgba(255,255,255,0.92); padding: 10px 0; font-size: 12.5px; font-weight: 400; letter-spacing: 0.02em; position: relative; z-index: 1001; }
#announce-bar .container { max-width: 100%; padding: 0 var(--space-4); position: relative; }
.announce-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; }
.announce-bar__msg { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.announce-bar__msg strong { color: var(--white); font-weight: 700; }
.announce-bar__pill {
display: inline-block; padding: 2px 10px; background: rgba(255,255,255,0.14);
border: 1px solid rgba(255,255,255,0.25); border-radius: 50px; font-size: 10px;
font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--white);
}
#announce-bar .announce-bar__right { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; width: auto; }
.announce-bar__socials { display: flex; align-items: center; gap: 14px; }
.announce-bar__socials a { display: flex; color: rgba(255,255,255,0.65); transition: color 0.2s ease, transform 0.2s ease; }
/* White on hover, not red: these sit on the navy announcement bar, where red
on navy is the weakest contrast pair in the palette. */
.announce-bar__socials a:hover { color: var(--white); transform: translateY(-1px); }
.announce-bar__socials a svg { width: 14px; height: 14px; flex-shrink: 0; }
@media (max-width: 980px) {
#announce-bar { font-size: 11px; }
.announce-bar__pill { display: none; }
/* Socials wrapped to a second row and doubled the bar height (69px vs 35px).
Reference hides them at this width too. */
.announce-bar__socials { display: none; }
}
/* SECTION:announce-bar END */
/* SECTION:navbar START */
/* Sticky lives on the Theme-Builder header wrapper (announce + navbar) so the
whole header pins - position:sticky on the inner navbar can't work, its
parent wrapper is only as tall as the header. Matches lightcyan. */
.elementor-location-header { position: sticky; top: 0; z-index: 1000; }
#site-navbar {
height: 84px; background: rgba(255,255,255,0.97);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 2px solid var(--primary);
box-shadow: 0 2px 16px rgba(0,0,0,0.06); transition: box-shadow 0.3s ease, height 0.3s ease;
}
#site-navbar .container { max-width: 100%; height: 100%; padding: 0 var(--space-4); }
#site-navbar .navbar__logo { display: flex; align-items: center; flex: 0 0 auto; width: auto; }
.navbar__logo img { max-height: 56px; width: auto; transition: max-height 0.3s ease; }
#site-navbar .navbar__right { display: flex; align-items: center; gap: 20px; flex: 0 0 auto; width: auto; }
.navbar-phone { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; transition: transform 0.2s ease; }
.navbar-phone:hover { transform: translateY(-1px); }
.navbar-phone__label { font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray); }
.navbar-phone__number { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--navy); letter-spacing: -0.01em; transition: color 0.2s; }
.navbar-phone:hover .navbar-phone__number { color: var(--primary); }
@media (max-width: 980px) {
.navbar-phone, #navbar-right .btn { display: none; }
}
/* SECTION:navbar END */
/* SECTION:mega-menu START */
.navbar-mm { display: flex; align-items: center; gap: 32px; }
.navbar-mm__link, .navbar-mm__trigger {
font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--navy); opacity: 0.78; position: relative; padding: 8px 0;
transition: opacity 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.navbar-mm__trigger { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.navbar-mm__link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--primary); transition: width 0.3s var(--ease); }
.navbar-mm__link:hover { opacity: 1; color: var(--primary); transform: translateY(-1px); }
.navbar-mm__link:hover::after { width: 100%; }
.navbar-mm__chev { flex-shrink: 0; opacity: 0.6; transition: transform 0.25s ease, opacity 0.25s ease; }
.navbar-mm__mega { position: relative; }
.navbar-mm__mega:hover .navbar-mm__chev { transform: rotate(180deg); opacity: 1; }
.navbar-mm__mega::after { content: ''; position: absolute; top: 100%; left: -8px; right: -8px; height: 18px; z-index: 10; }
.navbar-mm__panel {
position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(-4px);
padding-top: 14px; width: 600px; opacity: 0; pointer-events: none;
transition: opacity 0.22s ease, transform 0.22s ease; z-index: 999;
background: var(--white); border-radius: 12px; overflow: hidden;
box-shadow: 0 16px 56px rgba(0,0,0,0.14), 0 0 0 1px rgba(0,0,0,0.05);
}
.navbar-mm__panel::before {
content: ''; position: absolute; top: 8px; left: 50%; width: 14px; height: 14px; background: var(--white);
border-left: 1px solid rgba(0,0,0,0.06); border-top: 1px solid rgba(0,0,0,0.06);
transform: translateX(-50%) rotate(45deg);
}
.navbar-mm__mega:hover .navbar-mm__panel, .navbar-mm__panel:hover { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(4px); }
.navbar-mm__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 10px; }
.navbar-mm__item { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border-radius: 8px; text-decoration: none; transition: background 0.2s ease, transform 0.2s ease; }
.navbar-mm__item:hover { background: var(--off-white); transform: translateX(3px); }
.navbar-mm__icon {
width: 38px; height: 38px; border-radius: 8px; background: var(--off-white); display: flex;
align-items: center; justify-content: center; color: var(--primary); flex-shrink: 0;
transition: background 0.2s ease, color 0.2s ease;
}
.navbar-mm__icon svg { width: 22px; height: 22px; }
.navbar-mm__item:hover .navbar-mm__icon { background: var(--primary); color: var(--white); }
.navbar-mm__copy { display: block; min-width: 0; }
.navbar-mm__title { display: block; font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 3px; line-height: 1.2; transition: color 0.2s; }
.navbar-mm__item:hover .navbar-mm__title { color: var(--primary); }
.navbar-mm__desc { display: block; font-size: 12px; color: var(--gray); font-weight: 400; line-height: 1.35; }
.navbar-mm__panel-footer { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-top: 1px solid var(--gray-bg); }
.navbar-mm__panel-footer-link { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--navy); text-decoration: none; transition: color 0.2s; }
.navbar-mm__panel-footer-link:hover { color: var(--primary); }
#site-navbar .navbar-mm__panel-footer-cta { font-size: 11px; padding: 9px 18px; }
.navbar-mm__hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; }
.navbar-mm__hamburger span { display: block; width: 24px; height: 2px; background: var(--navy); transition: all 0.3s ease; }
@media (max-width: 980px) {
/* Keep .navbar-mm visible so the hamburger (its child) shows; hide only the
desktop links/trigger/mega. The mobile drawer (plugin) takes over. */
.navbar-mm { gap: 0; }
.navbar-mm__link, .navbar-mm__trigger, .navbar-mm__mega { display: none; }
.navbar-mm__hamburger { display: flex; }
/* Mobile header row: logo left, hamburger far right; the 2-line phone + CTA
button collapse (the sticky mobile-cta bar covers Call + Estimate). */
/* #id alone lost to Elementor's e-con display:flex, so the empty box stayed
in the space-between row and parked the hamburger mid-header. */
#site-navbar #navbar-right { display: none; }
/* Bars sit 16px from the viewport edge: container pads 16px, bars align to the
button's right edge. The 44px tap target is unchanged. */
#site-navbar #site-navbar-container { padding-right: 16px; }
#site-navbar .navbar-mm__hamburger { align-items: flex-end; padding-right: 0; }
}
/* SECTION:mega-menu END */
/* SECTION:footer START */
#site-footer { background: var(--navy-dark); padding: 80px 0 0; color: var(--white); }
#site-footer .container { max-width: 100%; padding: 0 var(--space-4); }
#footer-grid { display: grid; grid-template-columns: 2fr 1fr 1.5fr 1fr; gap: 48px; }
.footer__brand-logo img { max-height: 40px; width: auto; }
.footer__brand-desc { font-size: 14px; color: rgba(255,255,255,0.7); line-height: 1.7; }
.footer__brand-phone { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; transition: color 0.3s ease; }
.footer__brand-phone:hover { color: var(--primary); }
.footer__brand-phone svg { width: 18px; height: 18px; fill: currentColor; }
.footer__heading { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--white); margin-bottom: 24px; }
/* Second heading in the Service Areas column, above the main cities menu. */
.footer__heading--cities { margin-top: 32px; }
/* Footer Services / Service-Areas = Elementor Nav Menu widgets (WP menus).
#id scope (1,1,0) neutralises Elementor's item chrome; .footer__col a carries
the link color + hover underline. Areas column is a 2-col grid. */
#footer-col-services .elementor-nav-menu { display: flex; flex-direction: column; gap: 10px; }
#footer-col-areas .elementor-nav-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; }
#footer-col-services .elementor-item, #footer-col-areas .elementor-item { padding: 0; line-height: 1.6; background: transparent; }
.footer__contact-line { font-size: 14px; color: rgba(255,255,255,0.7); line-height: 1.7; }
/* Phone under the address block. Sized between the address lines and the big
brand phone: readable as a link without competing with the brand column. */
.footer__contact-phone { font-size: 15px; font-weight: 600; color: var(--white); display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; transition: color 0.2s ease; }
.footer__contact-phone:hover { color: var(--primary); }
.footer__contact-phone svg { width: 15px; height: 15px; fill: currentColor; flex-shrink: 0; }
/* Footer link hover: red + white expandable underline + slight Y lift (standing rule) */
.footer__col a, .footer__bottom a { font-size: 14px; color: rgba(255,255,255,0.7); position: relative; display: inline-block; transition: color 0.2s ease, transform 0.2s ease; }
.footer__col a::after, .footer__bottom a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background: var(--white); transition: width 0.25s ease; }
.footer__col a:hover, .footer__bottom a:hover { color: var(--primary); transform: translateY(-1px); }
.footer__col a:hover::after, .footer__bottom a:hover::after { width: 100%; }
/* The social icons sit inside .footer__col, so the expanding underline above
was drawing a line across the bottom of each circular icon on hover. They
already have their own hover (white fill, red glyph, lift), so kill the
underline for them only. Text links in the column keep it. */
.footer__social a::after { content: none; }
.footer__social { display: flex; gap: 12px; }
.footer__social a {
width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2);
display: flex; align-items: center; justify-content: center; color: var(--white);
transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.footer__social a:hover { background: var(--white); border-color: var(--white); color: var(--primary); transform: translateY(-3px); }
.footer__social svg { width: 16px; height: 16px; }
#footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding: 24px 0; margin-top: 60px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.footer__copyright { font-size: 13px; color: rgba(255,255,255,0.5); }
/* Both halves are e-con-full, so each computed to width:100% (1280px) inside a
1280px flex-wrap row and the credits dropped below the copyright. Size them
to content so space-between can do its job. */
#footer-bottom-left, #footer-bottom-right { width: auto; }
.footer__bottom-right { display: flex; align-items: center; gap: 8px; }
.footer__bottom-sep { color: rgba(255,255,255,0.3); font-size: 13px; }
.footer__bottom-link { font-size: 13px; color: rgba(255,255,255,0.5); }
@media (max-width: 980px) {
#footer-grid { grid-template-columns: 1fr; gap: 32px; }
#footer-bottom { flex-direction: column; text-align: center; gap: 8px; }
}
/* SECTION:footer END */
/* SECTION:floating START */
.back-to-top {
position: fixed; bottom: 32px; left: 32px; z-index: 999; width: 48px; height: 48px;
background: var(--navy); border: none; border-radius: 50%; cursor: pointer;
display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none;
box-shadow: 0 4px 20px rgba(1,22,39,0.35);
transition: opacity 0.4s ease, transform 0.3s ease, box-shadow 0.3s ease, bottom 0.3s ease;
}
.back-to-top.visible { opacity: 1; pointer-events: auto; }
.back-to-top:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(1,22,39,0.5); }
/* Centered on the button's midpoint, not a fixed 2px offset: that offset only
centered the 44px ring in the 48px desktop button and pushed it down-right
in the 42px phone button. */
.back-to-top__ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); overflow: visible; }
.back-to-top__arrow { position: relative; z-index: 1; color: var(--white); transition: color 0.2s ease, transform 0.2s ease; }
.back-to-top:hover .back-to-top__arrow { color: var(--primary); transform: translateY(-2px); }
.back-to-top__progress { stroke: var(--white); transition: stroke-dashoffset 0.1s linear; }
.float-cta { position: fixed; bottom: 32px; right: 32px; z-index: 999; opacity: 0; pointer-events: none; transition: opacity 0.4s ease, bottom 0.3s ease; }
.float-cta.visible { opacity: 1; pointer-events: auto; }
.float-cta__btn {
display: inline-flex; align-items: center; gap: 10px; background: var(--primary); color: var(--white);
padding: 14px 24px; border-radius: 50px; font-size: 13px; font-weight: 700; letter-spacing: 0.05em;
text-transform: uppercase; text-decoration: none; cursor: pointer; border: 2px solid transparent;
transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.float-cta__btn:hover { background: var(--navy); border-color: var(--primary); transform: translateY(-3px) scale(1.02); }
.float-cta__btn svg { flex-shrink: 0; }
.mobile-cta { display: none; position: fixed; bottom: 0; left: 0; right: 0; height: 62px; z-index: 999; grid-template-columns: 1fr 1fr; box-shadow: 0 -2px 16px rgba(0,0,0,0.15); }
.mobile-cta__call, .mobile-cta__estimate {
display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-body);
font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; text-decoration: none;
}
.mobile-cta__call { background: var(--off-white); color: var(--navy); }
.mobile-cta__estimate { background: var(--primary); color: var(--white); }
.mobile-cta__call svg, .mobile-cta__estimate svg { width: 20px; height: 20px; }
@media (max-width: 980px) {
body { padding-bottom: 62px; }
.back-to-top { bottom: 80px; left: 16px; width: 42px; height: 42px; }
.float-cta { display: none; }
.mobile-cta { display: grid; }
}
/* SECTION:floating END */
/* SECTION:hero START */
/* `overflow: clip`, not `hidden`, and the order matters. `hidden` makes .hero a
scroll container, which then becomes the scrollport for the sticky hero copy
below - and because .hero itself never scrolls, the sticky would silently
never engage. `clip` clips identically without being a scroll container. The
`hidden` declaration stays first as the fallback for browsers that do not
understand `clip`, which simply ignore the second line. Jay 2026-09-23. */
.hero { position: relative; min-height: 92vh; display: flex; align-items: center; overflow: hidden; overflow: clip; background: var(--navy-dark); padding-top: 100px; }
.hero__bg {
position: absolute; inset: 0; background-size: cover; background-position: center right;
/* Plain WebP, no image-set()/AVIF. AVIF was tried and REJECTED on measurement:
the best AVIF of this frame was 158 KB, but Jay's hand-compressed WebP is
88 KB (down from 265 KB). Re-encoding the old WebP with sharp or ffmpeg hit
a floor around 179 KB, because re-compressing already-lossy WebP is very
inefficient - whatever Jay compresses with is roughly twice as efficient as
either. Going back to one plain file also removed a real hazard: with
image-set() the preload tag has to name the .avif or a desktop visitor
downloads BOTH formats. Jay 2026-09-23. */
background-image:
linear-gradient(105deg, rgba(1,22,39,0.94) 0%, rgba(1,22,39,0.78) 55%, rgba(1,22,39,0.5) 100%),
url('/wp-content/uploads/rlc/hero-driveway-1100.webp');
animation: heroSlowZoom 20s ease-in-out infinite alternate;
}
/* Phones get a 760px copy: 117 KB instead of 265 KB. The single large file was
3.4s of the home page's LCP on a throttled phone. Keep these paths in sync
with the two preload tags in functions.php. */
@media (max-width: 600px) {
.hero__bg {
/* No image-set() here on purpose. Jay recompressed this file by hand on
2026-09-23 from 117 KB to 43 KB, which BEATS the 72 KB AVIF, so the
plain WebP is the smallest option and no format fallback is needed.
Verified on screen at 412px: no visible artifacts under the gradient. */
background-image:
linear-gradient(105deg, rgba(1,22,39,0.94) 0%, rgba(1,22,39,0.78) 55%, rgba(1,22,39,0.5) 100%),
url('/wp-content/uploads/rlc/hero-driveway-760.webp');
}
}
.hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.hero__overlay { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at top right, transparent 0%, rgba(1,22,39,0.4) 100%); }
.hero .container { position: relative; z-index: 3; }
.hero__inner { display: grid; grid-template-columns: 1fr 440px; gap: 64px; align-items: center; width: 100%; padding: 64px 0; }
.hero__content { animation: fadeUp 0.9s ease forwards; }
.hero__eyebrow-pill {
display: inline-flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.18); padding: 8px 18px; border-radius: 50px;
margin-bottom: 28px; backdrop-filter: blur(8px);
}
.hero__eyebrow-dot { width: 8px; height: 8px; background: var(--primary); border-radius: 50%; animation: heroPulse 2s ease-in-out infinite; }
.hero__eyebrow-text { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--white); }
/* The hero headline is three ranked elements (h1/h2/h3) that must read as ONE
headline: same face, same size, no gap between the lines. Left to the global
h1/h2/h3 rules they would step down in size and weight and pick up browser
margins between each line. max-width:none because the hero column is already
half the page - see the h1-measure section. Jay 2026-09-23. */
/* 48px, not 50px, and 3.2vw, not 4vw. Jay wants "Concrete Contractor" and
"Patios & Slabs" each kept on one line. At 50px "CONCRETE CONTRACTOR" measures
660px against a 656px column - it missed by FOUR pixels, which is why it broke
mid-phrase. 3.2vw keeps the longest line inside the column at every desktop
width from 981px up; measured, not guessed. The line breaks themselves are
explicit
in rebuild-home.php, because a soft wrap would break at whatever
word happened to fit. Jay 2026-09-23: "even if you have to make the lettering
slightly smaller thats fine". */
.hero__heading { font-family: var(--font-display); font-size: clamp(2rem, 3.2vw, 48px); font-weight: 700; line-height: 1.05; color: var(--white); margin: 0; letter-spacing: -0.01em; text-transform: uppercase; max-width: none; }
.hero__heading--3 { color: var(--accent-blue); margin-bottom: 22px; }
.hero__heading em { font-style: normal; font-weight: 700; color: var(--accent-blue); display: inline-block; }
.hero__sub { font-size: 1.05rem; line-height: 1.7; color: rgba(255,255,255,0.8); max-width: 540px; margin-bottom: 32px; font-weight: 400; }
.hero__proof { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.hero__proof-stars { display: flex; align-items: center; gap: 10px; }
.hero__stars { color: var(--star-gold); font-size: 16px; letter-spacing: 2px; }
.hero__proof-text { font-size: 13px; color: rgba(255,255,255,0.75); font-weight: 400; }
.hero__proof-text strong { color: var(--white); font-weight: 700; }
.hero__proof-divider { width: 1px; height: 22px; background: rgba(255,255,255,0.2); }
.hero__proof-item { font-size: 13px; color: rgba(255,255,255,0.75); font-weight: 400; }
.hero__proof-item strong { color: var(--white); font-weight: 700; }
@media (max-width: 980px) {
.hero { padding-top: 120px; min-height: auto; }
.hero__inner { grid-template-columns: 1fr; gap: 32px; padding: 40px 0; }
.hero__heading { font-size: clamp(2rem, 6vw, 3rem); }
.hero__proof { flex-direction: column; align-items: flex-start; gap: 10px; }
.hero__proof-divider { display: none; }
}
/* Narrow desktop only. Between 981px and 1279px the 440px form eats so much of
the row that the copy column drops under 450px and the headline cannot hold
"CONCRETE CONTRACTOR" on one line at any readable size. Trimming the form to
360px and the gap to 40px buys back 104px, which is what makes the intended
line breaks survive all the way down to the 981px breakpoint. Above 1279px
there is room for the full 440px form. Jay 2026-09-23. */
@media (min-width: 981px) and (max-width: 1279px) {
.hero__inner { grid-template-columns: 1fr 360px; gap: 40px; }
}
/* Desktop: the hero copy is sticky. Jay 2026-09-23 - "make the front page hero
left side text sticky so it starts at the same height as the right column and
follows it down to the bottom of the right side column".
Two things make this work, and both are easy to miss:
1. `align-items: start` replaces the previous `center`. It top-aligns the two
columns (the "starts at the same height" half), AND it is what gives the
sticky element room to travel: the copy is ~548px inside a row sized by the
772px form, so it can move 224px before it reaches the bottom of its grid
area, which IS the bottom of the form column.
2. .hero must not be a scroll container - see the `overflow: clip` note above.
top: 152px = the 128px sticky header (.elementor-location-header, announce bar
44 + navbar 84, measured constant across every desktop width) plus 24px of
breathing room. A smaller offset tucks the headline UNDER the header, which is
exactly what a first pass at top:40px did. `top` only decides WHEN the copy
pins; the travel distance is fixed by the grid area, so it still ends flush
with the bottom of the form column either way.
Mobile is untouched: the grid is single-column there and nothing is sticky. */
@media (min-width: 981px) {
.hero__inner { align-items: start; }
.hero__content { position: sticky; top: 152px; }
}
/* SECTION:hero END */
/* SECTION:page-hero START */
/* Shared inner-page hero band. Solid navy by default; bg image (set via
Elementor container background_image when caller passes one) sits behind
a dark gradient overlay so text stays readable both ways. */
.page-hero { position: relative; background-color: var(--navy-dark); background-size: cover; background-position: center center; min-height: 360px; display: flex; flex-direction: column; justify-content: center; text-align: center; padding: 40px 0; overflow: hidden; }
.page-hero::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(135deg, rgba(1,22,39,0.85) 0%, rgba(1,22,39,0.65) 100%); }
.page-hero > .container, .page-hero .container { position: relative; z-index: 2; }
.page-hero .section-header { text-align: center; }
.page-hero .section-header__heading { color: var(--white); font-size: clamp(34px, 4vw, 50px); }
.page-hero .section-header__accent { color: var(--primary); }
.page-hero .section-header__eyebrow { color: rgba(255,255,255,0.7); }
.page-hero .section-header__desc { color: rgba(255,255,255,0.85); max-width: 600px; margin-left: auto; margin-right: auto; }
@media (max-width: 980px) { .page-hero { min-height: 260px; padding: 32px 0; } }
/* SECTION:page-hero END */
/* SECTION:lead-form START */
/* Hero/estimate form card (rfmwpe_form_card component_name=hero__form-card); reused by .lead-form */
.hero__form-wrap { animation: fadeUp 0.9s ease 0.2s both; }
/* Mobile-only form band under the hero (Elementor hides it on tablet/desktop). */
.hero-form-mobile { background: var(--navy-dark); padding: 32px 0; }
#home-hero-form-mobile-container { padding: 0 var(--space-2); }
.hero__form-card { background: rgba(255,255,255,0.98); backdrop-filter: blur(20px); border-radius: 10px; padding: 36px 32px; box-shadow: 0 30px 80px rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.15); }
.hero__form-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--navy); margin-bottom: 6px; line-height: 1.2; }
.hero__form-subtitle { font-size: 0.82rem; color: var(--gray); margin-bottom: 22px; font-weight: 400; }
/* Form fields. The form itself is ONE global Elementor Pro template shared by
every card, so these map the card's design onto Elementor's field markup.
Everything is scoped to .hero__form-card - Elementor forms elsewhere on the
site are left alone. Replaces the old .hero__form-input/-label/-cta rules,
whose markup no longer exists. */
.hero__form-card .elementor-field-group { margin-bottom: 14px; }
.hero__form-card .elementor-field-label { display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray); margin-bottom: 6px; }
.hero__form-card .elementor-field-textual {
width: 100%; padding: 12px 14px; border: 1.5px solid #E5E7EB; border-radius: 6px;
font-family: var(--font-body); font-size: 0.92rem; color: var(--navy); background: var(--off-white);
transition: border-color 0.2s, background 0.2s; outline: none; -webkit-appearance: none; appearance: none;
}
.hero__form-card .elementor-field-textual:focus { border-color: var(--primary); background: var(--white); }
.hero__form-card textarea.elementor-field-textual { resize: vertical; min-height: 76px; }
.hero__form-card .elementor-field-type-select { position: relative; }
.hero__form-card .elementor-field-type-select::after { content: '\25BE'; position: absolute; right: 14px; bottom: 15px; color: var(--primary); font-size: 0.85rem; line-height: 1; pointer-events: none; }
.hero__form-card .elementor-button {
width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
line-height: 1; border-radius: 3px; cursor: pointer; padding: 16px 28px; margin-top: 8px;
background: var(--primary); color: var(--white); border: 2px solid var(--primary);
transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.hero__form-card .elementor-button:hover { background: var(--primary-dark); border-color: var(--primary-dark); transform: translateY(-2px); }
.hero__form-card .elementor-message { font-size: 0.85rem; margin-top: 12px; }
.hero__form-card .elementor-message.elementor-message-success { color: var(--navy); font-weight: 600; }
.hero__form-trust { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; padding: 0 4px; }
.hero__form-trust-item { display: flex; align-items: center; gap: 6px; font-size: 0.7rem; font-weight: 500; color: var(--gray); }
.hero__form-trust-item svg { width: 13px; height: 13px; color: var(--primary); flex-shrink: 0; }
.hero__form-rating { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding: 12px 14px; background: var(--navy); border-radius: 6px; }
.hero__form-rating-item { text-align: center; flex: 1; padding: 4px 2px; }
.hero__form-rating-stars { color: var(--star-gold); font-size: 0.7rem; letter-spacing: 1px; line-height: 1; margin-bottom: 4px; }
.hero__form-rating-num { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--white); line-height: 1; margin-bottom: 4px; }
.hero__form-rating-label { font-size: 0.62rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.7); }
.hero__form-rating-divider { width: 1px; height: 28px; background: rgba(255,255,255,0.18); margin: 0 8px; }
.hero__form-privacy { display: flex; align-items: center; gap: 8px; justify-content: center; margin-top: 12px; font-size: 11px; color: var(--gray); font-weight: 400; text-align: center; }
.hero__form-privacy svg { width: 12px; height: 12px; color: var(--gray); flex-shrink: 0; }
.lead-form { padding: var(--space-10) 0; background: var(--off-white); }
.lead-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.lead-form__content .section-header { text-align: left; margin-bottom: var(--space-4); }
.lead-form__content .section-header__desc { margin-left: 0; margin-right: 0; }
.lead-form__reasons { margin-bottom: var(--space-4); }
.lead-form__reasons li { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 15px; color: var(--gray-dark); transition: transform 0.25s ease; }
.lead-form__reasons li:hover { transform: translateX(4px); }
.lead-form__reasons li svg { width: 18px; height: 18px; color: var(--success); flex-shrink: 0; }
.lead-form__trust { padding: 18px 22px; background: var(--white); border-left: 4px solid var(--navy); border-radius: 0 4px 4px 0; }
.lead-form__trust p { font-size: 14px; color: var(--gray-dark); line-height: 1.6; }
.lead-form__trust strong { color: var(--black); }
@media (max-width: 980px) {
.lead-form { padding: 56px 0; }
.lead-form__grid { grid-template-columns: 1fr; gap: 40px; }
.hero__form-card { padding: 28px 24px; max-width: 520px; margin: 0 auto; }
.hero__form-trust { flex-direction: column; align-items: flex-start; gap: 8px; }
}
/* SECTION:lead-form END */
/* SECTION:trust-strip START */
.trust-strip { background: var(--navy); padding: 48px 0; }
.trust-strip__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.trust-strip__stat { text-align: center; position: relative; padding: 0 8px; cursor: default; transition: transform 0.3s var(--ease); }
.trust-strip__stat:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 10%; height: 80%; width: 1px; background: rgba(255,255,255,0.2); }
.trust-strip__stat:hover { transform: translateY(-4px); }
.trust-strip__number { font-family: var(--font-display); font-size: clamp(36px, 3.5vw, 56px); font-weight: 700; color: var(--white); line-height: 1; transition: color 0.25s ease; }
.trust-strip__stat:hover .trust-strip__number { color: var(--accent-blue); }
.trust-strip__label { font-family: var(--font-body); font-size: 14px; font-weight: 400; color: rgba(255,255,255,0.85); margin-top: 8px; }
@media (max-width: 980px) {
.trust-strip__grid { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
.trust-strip__stat:not(:last-child)::after { display: none; }
.trust-strip__stat:nth-child(-n+2) { padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.2); }
}
/* SECTION:trust-strip END */
/* SECTION:segment START */
/* The background-color is a real fallback (it shows if the photo 404s or is slow)
AND it fixes a false contrast failure. Accessibility checkers cannot evaluate
an image background, so axe walked up to the nearest solid colour - white - and
reported the blue accent at 2.96:1 against a background that is actually dark
navy. Declaring the colour lets it compute the true ratio. Jay 2026-09-23. */
.segment {
padding: var(--space-13) 0; position: relative; color: var(--white);
background-color: var(--navy-dark);
background-size: cover; background-position: center center; background-attachment: fixed; background-repeat: no-repeat;
background-image:
linear-gradient(rgba(1, 22, 39, 0.78), rgba(1, 22, 39, 0.78)),
url('/wp-content/uploads/rlc/about-rl-concrete.webp');
}
.segment .section-header__heading, .segment .section-header__eyebrow, .segment .section-header__desc { color: var(--white); }
.segment .section-header__accent, .segment .text-accent { color: var(--accent-blue); }
.segment__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: var(--space-5); }
.segment__grid > .elementor-widget, .segment__grid .elementor-widget-container { height: 100%; }
.segment-card {
text-align: center; padding: 40px 32px; background: var(--white); border: 1px solid rgba(255,255,255,0.15);
border-radius: 6px; display: block; cursor: pointer; height: 100%;
transition: transform 0.3s var(--ease), border-color 0.3s ease, box-shadow 0.3s ease;
}
.segment-card:hover { transform: translateY(-4px); border-color: rgba(27,50,95,0.3); box-shadow: 0 12px 40px rgba(0,0,0,0.08); }
.segment-card__icon {
width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--gray-light);
display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; transition: all 0.3s ease;
}
.segment-card__icon svg { width: 28px; height: 28px; color: var(--navy); transition: color 0.3s ease; }
.segment-card:hover .segment-card__icon { background: var(--navy); border-color: var(--navy); }
.segment-card:hover .segment-card__icon svg { color: var(--white); }
.segment-card__title { font-family: var(--font-display); font-size: 22px; font-weight: 600; text-transform: uppercase; color: var(--black); margin-bottom: 12px; }
.segment-card__desc { font-family: var(--font-body); font-size: 15px; font-weight: 400; color: var(--gray-dark); line-height: 1.7; margin-bottom: 20px; }
.segment-card__link {
font-family: var(--font-body); font-size: 13px; font-weight: 600; text-transform: uppercase; color: var(--navy);
display: inline-flex; align-items: center; gap: 6px; transition: gap 0.3s ease;
}
.segment-card:hover .segment-card__link { gap: 10px; }
.segment-card__link svg { width: 14px; height: 14px; }
@media (max-width: 980px) {
.segment { padding: 72px 0; background-attachment: scroll; }
.segment__grid { grid-template-columns: 1fr; }
}
/* SECTION:segment END */
/* SECTION:process START */
.process { padding: var(--space-10) 0; background: var(--off-white); }
.process__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; margin-top: var(--space-5); }
.process__steps { display: flex; flex-direction: column; }
.process-step { display: flex; gap: 20px; padding: 24px 16px; border-bottom: 1px solid var(--gray-light); border-radius: 4px; transition: transform 0.3s var(--ease), background 0.3s ease; }
.process-step:hover { transform: translateX(6px); }
.process-step__number {
width: 40px; height: 40px; min-width: 40px; border-radius: 50%; background: var(--navy); color: var(--white);
font-family: var(--font-display); font-size: 18px; font-weight: 700; display: flex; align-items: center; justify-content: center;
transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease;
}
.process-step:hover .process-step__number { transform: scale(1.1); box-shadow: 0 4px 16px rgba(27,50,95,0.3); }
.process-step__content h4, .process-step__content h3 { font-size: 22px; margin-bottom: 6px; transition: color 0.3s ease; }
.process-step:hover .process-step__content h4, .process-step:hover .process-step__content h3 { color: var(--navy); }
.process-step__content p { font-size: 14px; color: var(--gray-dark); line-height: 1.65; }
.process__image { position: relative; border-radius: 6px; overflow: visible; }
.process__image img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; aspect-ratio: 4/5; }
.process__image-badge {
position: absolute; bottom: -20px; left: -20px; width: 110px; height: 110px; border-radius: 50%;
background: var(--navy); color: var(--white); display: flex; flex-direction: column; align-items: center; justify-content: center;
box-shadow: 0 8px 24px rgba(0,0,0,0.15); z-index: 5; transition: transform 0.3s var(--ease);
}
.process__image:hover .process__image-badge { transform: scale(1.06) translateY(-3px); }
.process__image-badge span:first-child { font-family: var(--font-display); font-size: 28px; font-weight: 700; line-height: 1; }
.process__image-badge span:last-child { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }
@media (max-width: 980px) {
.process { padding: 56px 0; }
.process__grid { grid-template-columns: 1fr; gap: 40px; }
}
/* SECTION:process END */
/* SECTION:value-band START */
.value-band { background: var(--navy-dark); padding: var(--space-8) 0; }
.value-band > .container > .e-con-inner { display: grid; grid-template-columns: 1.5fr 1fr; gap: 80px; align-items: center; }
.value-band__content .section-header { text-align: left; margin-bottom: var(--space-4); }
.value-band__content .section-header__eyebrow { color: rgba(255,255,255,0.7); }
.value-band__content .section-header__heading { color: var(--white); }
.value-band__content .section-header__accent, .value-band .text-accent { color: var(--accent-blue); }
.value-band__content .section-header__desc { color: rgba(255,255,255,0.7); margin-left: 0; margin-right: 0; }
.value-band__checklist { border-left: 5px solid rgba(255,255,255,0.3); padding-left: 32px; }
.value-band__checklist li { display: flex; align-items: center; gap: 12px; color: var(--white); font-size: 15px; font-weight: 400; padding: 10px 0; transition: transform 0.25s ease, color 0.25s ease; }
.value-band__checklist li:hover { transform: translateX(6px); }
.value-band__checklist li svg { width: 20px; height: 20px; color: var(--primary); flex-shrink: 0; }
@media (max-width: 980px) {
.value-band { padding: 48px 0; }
.value-band > .container > .e-con-inner { grid-template-columns: 1fr; gap: 40px; }
}
/* SECTION:value-band END */
/* SECTION:services START */
.services { padding: var(--space-13) 0; background: var(--white); }
.services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: var(--space-5); }
/* Cards in a row must match height. Descriptions are no longer clamped to three
lines (they were cutting the copy), so they now wrap to whatever they need and
the cards would otherwise end up ragged. Elementor wraps each card in two
divs, so the full stretch chain has to be spelled out or height:100% resolves
against nothing. */
.services__grid > .elementor-element,
.services__grid .elementor-widget-container,
.related-services__grid > .elementor-element,
.related-services__grid .elementor-widget-container { height: 100%; }
.service-card {
position: relative; cursor: pointer; background: var(--white); border: 1px solid rgba(0,0,0,0.06); border-radius: 6px; overflow: hidden;
transition: transform 0.3s var(--ease), box-shadow 0.3s ease, border-color 0.3s ease;
height: 100%; display: flex; flex-direction: column;
}
.service-card:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(27,50,95,0.12); border-color: rgba(27,50,95,0.2); }
.service-card__image { aspect-ratio: 16/10; overflow: hidden; position: relative; }
.service-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.service-card:hover .service-card__image img { transform: scale(1.04); }
.service-card__badge { position: absolute; top: 12px; left: 12px; background: var(--navy); color: var(--white); font-size: 11px; font-weight: 600; padding: 6px 14px; border-radius: 50px; }
/* Body grows to fill the card so the Learn More link sits on a common line. */
.service-card__body { padding: 28px; flex: 1 1 auto; display: flex; flex-direction: column; }
.service-card__title { font-family: var(--font-display); font-size: clamp(20px, 2vw, 24px); font-weight: 600; text-transform: uppercase; color: var(--black); margin-bottom: 12px; }
.service-card__desc {
font-family: var(--font-body); font-size: 15px; font-weight: 400; color: var(--gray-dark); line-height: 1.65;
}
.service-card__actions { display: flex; gap: 12px; margin-top: auto; padding-top: 20px; }
@media (max-width: 980px) {
.services { padding: 72px 0; }
.services__grid { grid-template-columns: 1fr; }
}
/* SECTION:services END */
/* SECTION:service-hero START */
/* Per-service hero band: 560px max. Outer band is `.service-hero-band` (NOT
.service-hero - that would collide with the section_header widget's own
root). Bg image is set via Elementor container background_image. Dark
overlay via ::before (dual gradient). Navy accent line via ::after.
Widget renders with component_name='service-hero' → .service-hero (root) +
.service-hero__eyebrow / __heading / __accent / __desc. */
.service-hero-band { position: relative; min-height: 400px; overflow: hidden; display: flex; align-items: flex-end; background-color: var(--black); background-size: cover; background-position: center center; }
.service-hero-band::before {
content: ''; position: absolute; inset: 0; z-index: 1;
background:
linear-gradient(to bottom, rgba(17,17,17,0.4) 0%, rgba(17,17,17,0.7) 100%),
linear-gradient(to right, rgba(17,17,17,0.6) 0%, transparent 70%);
}
.service-hero-band::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background: var(--navy); z-index: 2; }
.service-hero-band .container { position: relative; z-index: 3; padding-bottom: var(--space-8); padding-top: 140px; width: 100%; }
.service-hero__eyebrow { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: rgba(255,255,255,0.85); margin-bottom: var(--space-2); display: block; }
.service-hero__heading { color: var(--white); font-size: clamp(30px, 3.4vw, 50px); line-height: 1.05; font-weight: 700; text-transform: uppercase; margin-bottom: var(--space-2); }
.service-hero__accent { color: var(--primary); }
.service-hero__desc { font-family: var(--font-body); font-size: 18px; font-weight: 400; color: rgba(255,255,255,0.85); max-width: 560px; line-height: 1.7; }
@media (max-width: 980px) {
.service-hero-band { min-height: 320px; }
.service-hero-band .container { padding-bottom: var(--space-5); padding-top: 120px; }
.service-hero__desc { font-size: 16px; }
}
/* SECTION:service-hero END */
/* SECTION:area-hero START */
/* Per-area county hero: navy-dark gradient OVERLAY (::before) over bg image
(set via Elementor container background_image). Outer band class is
`.area-hero-band` (NOT .area-hero - avoids widget-root collision). 2-col
grid w/ content (breadcrumb + h1 + sub + 3-stat counter + cta) | form-card.
Matches lightcyan exactly (~981px @1440). */
.area-hero-band { position: relative; background-color: var(--navy-dark); background-size: cover; background-position: center; padding: 140px 0 72px; color: var(--white); }
.area-hero-band::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(105deg, rgba(1,22,39,0.92) 0%, rgba(1,22,39,0.75) 60%, rgba(1,22,39,0.5) 100%); }
.area-hero-band > .container, .area-hero-band > .e-con-inner, .area-hero-band .container { position: relative; z-index: 2; }
.area-hero__inner { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.area-hero__breadcrumb { font-size: 13px; color: rgba(255,255,255,0.7); margin-bottom: 20px; }
.area-hero__breadcrumb nav { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: inherit; font-size: inherit; }
.area-hero__breadcrumb a { color: rgba(255,255,255,0.7); }
.area-hero__breadcrumb a:hover { color: var(--white); }
.area-hero__breadcrumb [aria-current="page"] { color: var(--white); font-weight: 500; }
.area-hero__breadcrumb__sep, .area-hero__breadcrumb nav > span { color: rgba(255,255,255,0.4); font-size: 12px; }
.area-hero__heading { color: var(--white); font-size: clamp(32px, 4vw, 50px); line-height: 1.05; text-transform: uppercase; font-weight: 700; margin-bottom: 16px; }
.area-hero__heading .text-accent { color: var(--primary); }
.area-hero__sub { color: rgba(255,255,255,0.85); font-size: 18px; line-height: 1.7; max-width: 560px; margin-bottom: 32px; }
.area-hero__stats__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 32px; }
.area-hero__stats__stat { text-align: left; }
.area-hero__stats__number { font-family: var(--font-display); font-size: clamp(28px, 3vw, 40px); font-weight: 700; color: var(--white); line-height: 1; }
.area-hero__stats__label { font-size: 13px; color: rgba(255,255,255,0.75); margin-top: 6px; line-height: 1.4; }
/* Elementor makes container children full-width column items, so the two
buttons stacked despite the flex row here. Force the row and let each widget
wrapper size to its button. */
.area-hero__ctas { display: flex; flex-direction: row; gap: 14px; flex-wrap: wrap; align-items: center; }
.area-hero__ctas > .elementor-element { width: auto; flex: 0 0 auto; }
@media (max-width: 600px) {
.area-hero__ctas { flex-direction: column; align-items: stretch; }
.area-hero__ctas > .elementor-element { width: 100%; }
}
/* Bare wrapper. This used to carry its own white background, radius and 32px
padding around .hero__form-card, which already has all three - so the area
pages showed a white box inside a white box and the form sat inset from every
other copy of it on the site. One form, one chrome, everywhere. */
.area-hero__form-wrap { color: var(--text-body); }
@media (max-width: 980px) {
.area-hero-band { padding: 100px 0 56px; }
.area-hero__inner { grid-template-columns: 1fr; gap: 32px; }
.area-hero__stats__grid { gap: 16px; }
}
/* SECTION:area-hero END */
/* SECTION:promo-hero START */
/* Summer Patio Promo landing-page hero. Outer band is .promo-hero-band (NOT
.promo-hero - widget-root collision). Navy gradient + bg image via ::before.
2-col content (pill + h1 + sub + features grid + urgency) | form-card. */
.promo-hero-band { position: relative; min-height: 92vh; display: flex; align-items: center; overflow: hidden; background-color: var(--navy-dark); background-size: cover; background-position: center; padding-top: 100px; }
.promo-hero-band::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(105deg, rgba(1,22,39,0.92) 0%, rgba(1,22,39,0.7) 55%, rgba(1,22,39,0.45) 100%); }
.promo-hero-band::after { content: ''; position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at top right, transparent 0%, rgba(1,22,39,0.4) 100%); pointer-events: none; }
.promo-hero-band > .container, .promo-hero-band .container { position: relative; z-index: 3; }
.promo-hero__inner { display: grid; grid-template-columns: 1fr 460px; gap: 64px; align-items: center; width: 100%; padding: 64px 0; }
.promo-hero__pill { display: inline-flex; flex-direction: row; align-items: center; gap: 10px; background: var(--primary); padding: 9px 20px; border-radius: 50px; margin-bottom: 28px; color: var(--white); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; width: fit-content; }
.promo-hero__pill-dot { width: 8px; height: 8px; background: var(--white); border-radius: 50%; flex: 0 0 8px; }
.promo-hero__heading { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 50px); font-weight: 700; line-height: 1.05; color: var(--white); margin-bottom: 22px; letter-spacing: -0.01em; }
.promo-hero__heading em { font-style: normal; font-weight: 800; color: var(--accent-blue); display: block; margin-top: 4px; }
.promo-hero__sub { font-size: 1.05rem; line-height: 1.7; color: rgba(255,255,255,0.85); max-width: 540px; margin-bottom: 28px; }
.promo-hero__sub strong { color: var(--white); font-weight: 700; }
/* icon_checklist widget BEM: component=promo-hero__features → __features__item / __icon / __text */
.promo-hero__features { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; margin-bottom: 28px; }
.promo-hero__features__item { display: flex; align-items: center; gap: 10px; font-size: 14px; color: rgba(255,255,255,0.9); line-height: 1.4; }
.promo-hero__features__icon, .promo-hero__features__item svg { width: 18px; height: 18px; color: var(--success); flex-shrink: 0; fill: currentColor; }
.promo-hero__features__text strong { color: var(--white); font-weight: 700; }
.promo-hero__urgency { display: inline-flex; flex-direction: row; align-items: center; gap: 10px; padding: 12px 20px; background: rgba(221,0,0,0.15); border: 1px solid rgba(221,0,0,0.4); border-radius: 6px; color: var(--white); font-size: 14px; font-weight: 500; width: fit-content; }
/* The urgency line is an icon_checklist (clock icon), so its inner row is
.promo-hero__urgency-line__item. The descendant svg rule is kept so the box
still styles an icon whatever draws it. */
.promo-hero__urgency-line__item { display: inline-flex; flex-direction: row; align-items: center; gap: 10px; }
.promo-hero__urgency svg { width: 18px; height: 18px; color: var(--primary); flex-shrink: 0; fill: currentColor; }
.promo-hero__urgency strong { color: var(--white); font-weight: 700; }
.promo-hero__form-wrap { position: relative; }
.promo-form__badge { position: absolute; top: -16px; right: 24px; background: var(--primary); color: var(--white); padding: 8px 18px; border-radius: 50px; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; box-shadow: 0 6px 20px rgba(221,0,0,0.4); z-index: 2; }
.promo-hero__form-wrap .hero__form-card { position: relative; border: 2px solid var(--primary); }
@media (max-width: 980px) {
.promo-hero-band { min-height: auto; padding-top: 80px; }
.promo-hero__inner { grid-template-columns: 1fr; gap: 32px; padding: 32px 0; }
.promo-hero__features { grid-template-columns: 1fr; }
}
/* SECTION:promo-hero END */
/* SECTION:page-extras START */
/* Below-hero styling for reviews, contact, finance pages - minimum CSS to
match lightcyan visuals. Shared button/card/section-header styles live
elsewhere; this block fills the page-specific gaps only. */
/* --- REVIEWS --- */
.review-stats { padding: var(--space-8) 0; background: var(--white); }
/* flex-start (not center): the rating column has an extra stars line the count
column doesn't, so center-alignment pushed the two big numbers to different
heights. flex-start keeps both numbers on the same top line. */
.review-stats__inner { display: flex; flex-direction: row; align-items: flex-start; justify-content: center; gap: var(--space-8); flex-wrap: wrap; }
.review-stats__rating, .review-stats__count { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.review-stats__number, .review-stats__count-number { font-family: var(--font-display); font-size: clamp(56px, 6vw, 80px); font-weight: 800; color: var(--text-heading); line-height: 1; }
.review-stats__stars { display: flex; flex-direction: row; gap: 4px; }
.review-stats__stars svg { width: 28px; height: 28px; fill: var(--star-gold); color: var(--star-gold); }
/* Live markup renders the stars as literal star characters (text), not SVG, so
the svg rule above never applied and they fell back to the inherited body
text color (gray). Color + size the text glyphs directly. */
.review-stats__stars { color: var(--star-gold); font-size: 22px; letter-spacing: 3px; line-height: 1; }
.review-stats__label, .review-stats__count-label { font-size: 14px; font-weight: 500; color: var(--gray-dark); letter-spacing: 1px; text-transform: uppercase; }
.review-stats__divider { width: 1px; height: 80px; background: var(--gray-light); }
.review-stats__cta { margin-top: var(--space-4); width: 100%; display: flex; justify-content: center; }
.reviews-featured { padding: var(--space-10) 0; background: var(--gray-bg); }
.reviews-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin-top: var(--space-5); }
.review-card { background: var(--white); border-radius: 6px; padding: var(--space-4); box-shadow: 0 2px 12px rgba(0,0,0,0.06); transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; }
.review-card:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(0,0,0,0.1); }
.review-card--featured { border: 2px solid var(--navy); }
.review-card__stars { display: flex; flex-direction: row; gap: 2px; margin-bottom: var(--space-2); }
.review-card__stars svg { width: 16px; height: 16px; fill: var(--star-gold); }
.review-card__quote { font-size: 15px; line-height: 1.7; color: var(--text-body); margin-bottom: var(--space-3); flex: 1; }
.review-card__author { display: flex; flex-direction: row; align-items: center; gap: var(--space-2); }
.review-card__avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--navy); color: var(--white); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; flex-shrink: 0; }
.review-card__name { font-weight: 600; font-size: 15px; color: var(--text-heading); }
.review-card__meta { display: block; }
.review-card__subtitle { font-size: 13px; color: var(--gray); }
/* --- CONTACT --- */
.contact-strip { background: var(--white); padding: var(--space-8) 0; }
.contact-strip__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.contact-card { background: var(--off-white); border-radius: 6px; padding: var(--space-5) var(--space-4); text-align: center; border: 1px solid var(--gray-light); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.contact-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.08); }
.contact-card__icon { width: 48px; height: 48px; background: var(--navy); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-3); }
/* All three icons are stroke drawings with fill="none". Forcing fill:currentColor
overrode that attribute and filled them solid, which turned the clock into a
plain disc. Stroke them instead. */
.contact-card__icon svg { width: 22px; height: 22px; color: var(--white); fill: none; stroke: currentColor; }
.contact-card__title { font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--navy); margin-bottom: var(--space-1); }
.contact-card__desc { font-size: 18px; font-weight: 600; color: var(--text-heading); line-height: 1.4; }
.contact-card__link { color: var(--text-heading); }
.contact-card__link:hover { color: var(--navy); }
.contact-main { background: var(--gray-bg); padding: var(--space-10) 0; }
.contact-main__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start; }
/* --- FINANCE --- */
.finance-intro { padding: var(--space-10) 0; background: var(--white); }
.finance-intro__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-8); align-items: center; }
/* Body-copy vertical rhythm to match the rest of the site (body line-height 1.75). */
/* Each is the only
inside its own Elementor widget wrapper, so
:last-of-type/:last-child match ALL three paragraphs (each is an only
child) and would cancel this margin on every one. Keep the bottom margin
on all three and accept the trailing gap before the next block instead. */
.finance-intro__text { font-size: 16px; line-height: 1.75; color: var(--text-body); margin-bottom: var(--space-3); }
/* Klarna / Afterpay / Powered by Stripe badges - no CSS existed for this markup,
so it rendered as one run-on line of text. */
.finance-intro__brands__items { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }
.finance-intro__brands__chip {
display: inline-flex; align-items: center; font-family: var(--font-body); font-size: 12px; font-weight: 600;
letter-spacing: 0.04em; text-transform: uppercase; color: var(--gray-dark); background: var(--off-white);
border: 1px solid var(--gray-light); border-radius: 50px; padding: 6px 16px;
}
.finance-stats__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); padding: var(--space-4); background: var(--off-white); border-radius: 8px; }
.finance-stats__stat { text-align: center; }
.finance-stats__number { font-family: var(--font-display); font-size: clamp(28px, 3vw, 40px); font-weight: 800; color: var(--primary); line-height: 1; }
.finance-stats__label { font-size: 12px; font-weight: 500; color: var(--gray-dark); margin-top: 6px; letter-spacing: 0.5px; text-transform: uppercase; }
.finance-how { padding: var(--space-12) 0; background: var(--off-white); }
.finance-process__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-6); counter-reset: step; }
.finance-step { position: relative; padding: var(--space-4); background: var(--white); border-radius: 6px; border: 1px solid var(--gray-light); counter-increment: step; }
.finance-step__number { font-family: var(--font-display); font-size: 32px; font-weight: 800; color: var(--primary); line-height: 1; margin-bottom: var(--space-2); }
/* Finance sections alternate white / off-white below the hero, in page order:
intro W, plans O, lead W, how O, why W, coverage O, faq W, then navy CTA. */
.finance-plans { padding: var(--space-12) 0; background: var(--off-white); }
#finance-lead.lead-form { background: var(--white); }
/* Cards run to different copy lengths, so they stretch to a common height and
the Get a Quote link is pinned to the bottom. Same two-wrapper Elementor
stretch chain the service cards need. */
.finance-plans__grid > .elementor-element,
.finance-plans__grid .elementor-widget-container { height: 100%; }
.finance-plan-card { background: var(--white); border: 1px solid var(--gray-light); border-radius: 8px; padding: var(--space-5); position: relative; transition: transform 0.3s ease, box-shadow 0.3s ease; height: 100%; display: flex; flex-direction: column; }
/* Corner flag: "Most Popular", "Up to $4,000", "0% Interest". The widget only
gained badge support now, so this is its first styling. */
.finance-plan-card__badge { position: absolute; top: -12px; right: var(--space-4); background: var(--navy); color: var(--white); font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 6px 14px; border-radius: 50px; white-space: nowrap; }
.finance-plan-card__link { margin-top: auto; color: var(--primary); font-weight: 600; transition: color 0.2s ease; }
.finance-plan-card:hover .finance-plan-card__link { color: var(--primary-dark, var(--primary)); }
.finance-plan-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.08); }
.finance-plan-card__title { font-size: 20px; font-weight: 700; color: var(--text-heading); margin-bottom: var(--space-2); }
.finance-plan-card__desc { font-size: 14px; color: var(--gray-dark); line-height: 1.65; margin-bottom: var(--space-3); }
.finance-plan-card__desc strong { color: var(--text-heading); }
/* Trust-signals stats card (contact-side info column). */
.contact-map__wrap { background: var(--white); border-radius: 8px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.06); margin-bottom: var(--space-4); height: 320px; }
.contact-map__wrap iframe { width: 100%; height: 100%; border: 0; display: block; }
.trust-signals__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); padding: var(--space-4); background: var(--off-white); border-radius: 8px; }
.trust-signals__stat { text-align: center; }
.trust-signals__number { font-family: var(--font-display); font-size: clamp(28px, 3vw, 36px); font-weight: 800; color: var(--text-heading); line-height: 1; }
.trust-signals__label { font-size: 11px; font-weight: 500; color: var(--gray-dark); margin-top: 6px; letter-spacing: 0.5px; text-transform: uppercase; }
/* Elementor flex/grid direction overrides - Elementor containers default to
`display: flex; flex-direction: column` even when assigned a row/grid
class. Use id selectors (Iron Rule 6, specificity 1,0,0) to beat the
.elementor-element-XXX post-CSS (0,1,0). */
/* align-items: flex-start (see .review-stats__inner above) so the 4.9 and 140+
numbers share a top line instead of each column centering independently. */
#review-stats-inner { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: var(--space-8); }
#review-stats-inner > * { width: auto; flex: 0 0 auto; }
/* The CTA container is an Elementor column, so justify-content centered it
vertically; align-items centers the button horizontally. */
#review-stats-cta { align-items: center; }
#contact-strip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
#contact-main-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start; }
#finance-intro-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-8); align-items: center; }
#finance-plans-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
@media (max-width: 980px) {
.review-stats__divider { display: none; }
.reviews-grid, .contact-strip__grid, .contact-main__grid, .finance-intro__grid, .finance-process__steps { grid-template-columns: 1fr; }
#contact-strip-grid, #contact-main-grid, #finance-intro-grid, #finance-plans-grid { grid-template-columns: 1fr; }
}
/* SECTION:page-extras END */
/* SECTION:about-page START */
/* About page sections (lightcyan-verbatim where possible). */
.story { padding: var(--space-13) 0; }
.story__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }
.story__eyebrow { font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--navy); margin-bottom: var(--space-2); display: block; }
.story__title { font-family: var(--font-display); font-size: clamp(28px, 3vw, 40px); font-weight: 800; color: var(--text-heading); line-height: 1.2; margin-bottom: var(--space-3); }
.story__text { font-size: 16px; line-height: 1.75; color: var(--text-body); margin-bottom: var(--space-2); }
.story__highlight { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--navy); border-left: 4px solid var(--navy); padding-left: var(--space-3); margin: var(--space-4) 0; line-height: 1.5; font-style: italic; }
.story__badge { display: inline-flex; align-items: center; gap: var(--space-1); background: var(--navy); color: var(--white); padding: 8px 20px; border-radius: 4px; font-family: var(--font-display); font-size: 14px; font-weight: 600; letter-spacing: 0.5px; width: fit-content; }
.story__image { border-radius: 8px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.15); }
.story__image img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; }
.roger { padding: var(--space-13) 0; background: var(--gray-bg); }
.roger__grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: var(--space-8); align-items: center; }
.roger__image { border-radius: 8px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.12); }
.roger__image img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3/4; }
.roger__eyebrow { font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--navy); margin-bottom: var(--space-2); display: block; }
.roger__title { font-family: var(--font-display); font-size: clamp(28px, 3vw, 40px); font-weight: 800; color: var(--text-heading); line-height: 1.2; margin-bottom: var(--space-1); }
.roger__role { font-size: 16px; font-weight: 500; color: var(--navy); margin-bottom: var(--space-3); }
.roger__text { font-size: 16px; line-height: 1.75; color: var(--text-body); margin-bottom: var(--space-2); }
.roger__quote { font-family: var(--font-display); font-size: 18px; font-weight: 600; font-style: italic; color: var(--navy); border-left: 4px solid var(--navy); padding-left: var(--space-3); margin: var(--space-4) 0; line-height: 1.5; }
.values { padding: var(--space-13) 0; }
.values__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-top: var(--space-6); }
.values__card { background: var(--white); border: 1px solid var(--gray-light); border-radius: 8px; padding: var(--space-5) var(--space-3); text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.values__card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.1); }
.values__card__title { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--text-heading); margin-bottom: var(--space-1); }
.values__card__desc { font-size: 14px; line-height: 1.65; color: var(--text-body); }
.testimonial-featured { padding: var(--space-13) 0; background: var(--gray-bg); }
.testimonial-featured__inner { max-width: 800px; margin: 0 auto; text-align: center; }
.testimonial-featured__quote-mark { font-family: Georgia, serif; font-size: 80px; line-height: 1; color: var(--navy); opacity: 0.3; margin-bottom: -20px; }
.testimonial-featured__text { font-size: clamp(16px, 1.5vw, 20px); line-height: 1.75; color: var(--text-body); font-style: italic; margin-bottom: var(--space-4); }
.testimonial-featured__stars { color: var(--star-gold); font-size: 20px; margin-bottom: var(--space-2); }
.testimonial-featured__author { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--text-heading); }
#about-story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }
#about-roger-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: var(--space-8); align-items: center; }
#about-values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
/* Reviews themes (5-card 3x2 grid via rfmwpe_card_box with component_name='theme-card')
+ Promo "What's Included" (6-card 3x2 grid). */
.review-themes, .promo-included { padding: var(--space-13) 0; background: var(--off-white); }
#review-themes-grid, .review-themes__grid, .promo-included__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-5); }
.theme-card, .promo-included__card { background: var(--white); border: 1px solid var(--gray-light); border-radius: 8px; padding: var(--space-4); text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.theme-card:hover, .promo-included__card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.08); }
.theme-card__icon svg, .theme-card svg, .promo-included__card svg { width: 32px; height: 32px; color: var(--navy); margin: 0 auto var(--space-2); display: block; fill: none; stroke: currentColor; stroke-width: 2; }
.promo-included__card svg { color: var(--primary); }
.theme-card__title, .promo-included__card h4, .promo-included__card h3 { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--text-heading); margin-bottom: var(--space-1); }
.theme-card__desc { font-size: 13px; font-weight: 600; color: var(--navy); letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: var(--space-2); }
.theme-card__link, .promo-included__card p { font-size: 14px; line-height: 1.6; color: var(--gray-dark); font-style: italic; }
@media (max-width: 980px) {
.story__grid, .roger__grid, #about-story-grid, #about-roger-grid { grid-template-columns: 1fr; gap: var(--space-5); }
.values__grid, #about-values-grid { grid-template-columns: repeat(2, 1fr); }
/* #review-themes-grid must be named here too: the id in the base rule above
outranks a bare class override and kept this 3-col on every width. */
#review-themes-grid, .review-themes__grid, .promo-included__grid { grid-template-columns: 1fr; }
}
/* SECTION:about-page END */
/* SECTION:filter-gallery START */
/* Gallery: .filter-bar > .filter-btn[data-filter] + .gallery-grid > .gallery-item[data-category]. */
.filter-bar { padding: var(--space-4) 0; background: var(--white); border-bottom: 1px solid var(--gray-light); }
.filter-bar .container, #gallery-filter .container { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--space-1); justify-content: center; }
.filter-btn { font-size: 0.875rem; font-weight: 600; padding: 10px 20px; border: 2px solid var(--gray-light); border-radius: 50px; background: var(--white); color: var(--gray-dark); cursor: pointer; transition: all 0.25s ease; text-transform: uppercase; letter-spacing: 0.03em; }
.filter-btn:hover { border-color: var(--navy); color: var(--navy); }
.filter-btn.active { background: var(--navy); border-color: var(--navy); color: var(--white); }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); padding: var(--space-8) 0 var(--space-10); }
.gallery-item { position: relative; border-radius: 12px; overflow: hidden; cursor: pointer; aspect-ratio: 4 / 3; background: var(--concrete); }
.gallery-item.hidden { display: none; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.gallery-item:hover img { transform: scale(1.08); }
.gallery-item__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(1,22,39,0.75) 0%, transparent 50%); opacity: 0; transition: opacity 0.3s ease; display: flex; align-items: flex-end; padding: var(--space-3); }
.gallery-item:hover .gallery-item__overlay { opacity: 1; }
.gallery-item__label { font-family: var(--font-display); font-size: 0.9375rem; font-weight: 700; color: var(--white); text-transform: uppercase; letter-spacing: 0.04em; }
@media (max-width: 980px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
/* SECTION:filter-gallery END */
/* SECTION:service-detail START */
/* Shared section bands for service-detail (8 pages) AND service-areas (12 county pages).
ONE canonical look per component - no per-page-id overrides. */
/* breadcrumb bar - light band under page-hero. Widget renders nav.breadcrumb
with + .breadcrumb__sep + [aria-current] separated children. */
.breadcrumb-bar { background: var(--off-white); padding: 14px 0; border-bottom: 1px solid var(--gray-light); }
.breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--gray); }
.breadcrumb a { color: var(--gray); }
.breadcrumb a:hover { color: var(--navy); }
.breadcrumb__sep { color: var(--gray-light); font-size: 11px; }
.breadcrumb [aria-current="page"] { color: var(--gray-dark); font-weight: 500; }
/* service-overview - 2-col content + image w/ corner badge. */
.service-overview { padding: var(--space-12) 0; background: var(--white); }
.service-overview__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }
.service-overview__content h2 { margin-bottom: var(--space-3); }
.service-overview__content p { margin-bottom: var(--space-3); line-height: 1.75; }
.service-overview__list { margin-top: var(--space-3); }
.service-overview__list li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; font-size: 15px; color: var(--gray-dark); border-bottom: 1px solid rgba(0,0,0,0.06); }
.service-overview__list li:last-child { border-bottom: none; }
.service-overview__list li svg { width: 18px; height: 18px; color: var(--navy); flex-shrink: 0; margin-top: 2px; }
.service-overview__image { border-radius: 6px; overflow: hidden; position: sticky; top: 120px; align-self: start; }
.service-overview__image img { width: 100%; height: 480px; object-fit: cover; border-radius: 6px; }
.service-overview__image-inner-badge { position: absolute; bottom: 20px; left: 20px; background: var(--navy); color: var(--white); padding: 10px 20px; border-radius: 4px; font-size: 13px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; }
/* service-benefits - 4-col icon-card grid. */
.service-benefits { padding: var(--space-12) 0; background: var(--off-white); }
.service-benefits__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-top: var(--space-6); }
.benefit-card { background: var(--white); border-radius: 6px; padding: var(--space-4); text-align: center; border: 1px solid rgba(0,0,0,0.06); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.benefit-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(var(--primary-rgb), 0.12); }
.benefit-card__icon { width: 56px; height: 56px; background: rgba(var(--primary-rgb), 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-3); }
.benefit-card__icon svg { width: 28px; height: 28px; color: var(--navy); }
.benefit-card h4, .benefit-card h3 { font-size: 22px; margin-bottom: var(--space-1); letter-spacing: 0.5px; }
.benefit-card p { font-size: 14px; line-height: 1.6; color: var(--gray); }
/* service-gallery - uniform 4-up grid w/ hover overlay (rfmwpe_gallery_grid
widget output: .service-gallery__item > img + .service-gallery__item-overlay
> .service-gallery__item-type). */
/* TEMPORARY, 2026-09-23, Jay: "can we disable the recent image section on each
page for now till we can fill it with more images".
Most services have only 2-3 photos, so the row looked sparse. Hidden rather
than removed from the page data so it comes back by deleting THIS ONE RULE,
with no rebuild. The images below are lazy-loaded, so a hidden section does
not download them.
NOTE: the "View Full Gallery" button lives inside this section, so while it
is off no service page links to /gallery/. The footer and main nav still do. */
.service-gallery { display: none !important; }
.service-gallery { padding: var(--space-12) 0; background: var(--white); }
/* Flex, not grid, because a 4-column grid leaves the empty columns on the RIGHT
when a service has 2 or 3 photos, so the row sits hard left under a centred
heading. Grid cannot centre a partial row. flex-wrap + justify-content does,
at any count, and the basis keeps the 4-up sizing. flex-direction is explicit
on purpose: this root is only ever a plain div today, but every flex row in
this file states it after Elementor containers defaulted to column. */
.service-gallery__grid { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-6); }
.service-gallery__item { flex: 0 1 calc((100% - 3 * var(--space-3)) / 4); position: relative; border-radius: 6px; overflow: hidden; aspect-ratio: 4 / 3; }
.service-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.service-gallery__item:hover img { transform: scale(1.05); }
.service-gallery__item-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(17,17,17,0.6) 0%, transparent 50%); opacity: 0; transition: opacity 0.3s ease; display: flex; align-items: flex-end; padding: 16px; }
.service-gallery__item:hover .service-gallery__item-overlay { opacity: 1; }
.service-gallery__item-type { font-size: 13px; font-weight: 500; color: var(--white); }
.service-gallery__cta { text-align: center; margin-top: var(--space-5); }
/* pricing-context - 2-col factors-list | form-card. */
.pricing-context { padding: var(--space-12) 0; background: var(--off-white); }
.pricing-context__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; margin-top: var(--space-6); }
/* Short column follows the taller one. align-self:start stops the grid's
align-items:center stretching it and defeating the stick. */
.story__image, .roger__image, .pricing-context__factors { position: sticky; top: 120px; align-self: start; }
.pricing-context__factors h3 { margin-bottom: var(--space-3); font-size: clamp(20px, 2vw, 28px); }
.pricing-context__list { margin-top: var(--space-3); }
.pricing-context__list li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; font-size: 15px; color: var(--gray-dark); border-bottom: 1px solid rgba(0,0,0,0.06); }
.pricing-context__list li:last-child { border-bottom: none; }
.pricing-context__list li svg { width: 20px; height: 20px; color: var(--navy); flex-shrink: 0; margin-top: 2px; }
.pricing-context__cta-card { background: var(--white); border: 1px solid rgba(0,0,0,0.06); border-radius: 6px; padding: var(--space-6); }
/* service-faq - 2-col sidebar | accordion. */
.service-faq { padding: var(--space-12) 0; background: var(--white); }
.service-faq__grid { display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-8); margin-top: var(--space-2); }
.service-faq__sidebar h2 { margin-bottom: var(--space-2); }
.service-faq__sidebar p { color: var(--gray); line-height: 1.7; margin-bottom: var(--space-3); }
.service-faq__sidebar-link { display: inline-flex; align-items: center; gap: 8px; color: var(--navy); font-size: 14px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; }
.service-faq__sidebar-link:hover { gap: 12px; }
/* related-services - 3-col linked cards (rfmwpe_card_box with icon_source=image). */
/* TEMPORARY, 2026-09-23, Jay: "disable that section for now".
Same reason as .service-gallery above. On Commercial Concrete the four cards
left an orphan on row two, Shop Slabs and Metal Building Slabs showed the
SAME slab photo, and Parking Lot Repairs showed a residential driveway.
Delete this one rule to bring it back, no rebuild needed.
NOTE: this was the only cross-link between sibling service pages. The mega
menu and the footer services menu still link to all 13. */
.related-services { display: none !important; }
.related-services { padding: var(--space-12) 0; background: var(--off-white); }
.related-services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-6); }
.related-card { background: var(--white); border-radius: 6px; overflow: hidden; border: 1px solid rgba(0,0,0,0.06); transition: transform 0.3s ease, box-shadow 0.3s ease; display: block; }
.related-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(var(--primary-rgb), 0.12); }
.related-card__link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--navy); letter-spacing: 0.5px; text-transform: uppercase; }
/* Service-detail responsive - ONE breakpoint @980px (refactor mandate). */
@media (max-width: 980px) {
.service-overview__grid, .pricing-context__grid, .service-faq__grid { grid-template-columns: 1fr; gap: var(--space-5); } .service-overview__image, .story__image, .roger__image, .pricing-context__factors { position: static; }
.service-overview__image img { height: 360px; }
.service-benefits__grid { grid-template-columns: repeat(2, 1fr); }
/* Gallery is flex now, so it takes a basis, not a column count. */
.service-gallery__item { flex: 0 1 calc((100% - var(--space-3)) / 2); }
.related-services__grid { grid-template-columns: 1fr; }
.service-overview, .service-benefits, .service-gallery, .pricing-context, .service-faq, .related-services { padding: var(--space-8) 0; }
}
/* SECTION:service-detail END */
/* SECTION:icon-checklist-universal START */
/* rfmwpe_icon_checklist widget emits